@nextcloud/vue 8.2.0 → 8.4.0

package/dist/Components/NcDialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcDialog.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: '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\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]\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>\n\t\t<NcButton @click=\"showDialog = true\">Show 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</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcModal v-if=\"open\"\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 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\" class=\"dialog__navigation\" :class=\"navigationClasses\">\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>{{ message }}</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\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) => Array.isArray(arr) && arr.every((element) => typeof element === 'string'),\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 * @values '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 * 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 * 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)\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 * 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\tclass: 'dialog__modal',\n\t\t\tcloseOnClickOutside: false,\n\t\t\tenableSlideshow: false,\n\t\t\tenableSwipe: false,\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\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: math.div($breakpoint-mobile, 2)) {\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-container) {\n\t\t\tdisplay: flex !important;\n\t\t\tpadding-block: 4px 8px; // 4px to align with close button, 8px block-end to allow the actions a margin of 4px for the focus visible outline\n\t\t\tpadding-inline: 12px 8px; // 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-container__content) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\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\t\t// see modal-container padding, this aligns with the padding-inline-start (8px + 4px = 12px)\n\t\tpadding-inline-end: 4px;\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\t// Same as the NcAppSettingsDialog\n\t\ttext-align: center;\n\t\theight: var(--default-clickable-area);\n\t\tmin-height: var(--default-clickable-area);\n\t\tline-height: var(--default-clickable-area);\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}\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 4px; // 4px to align with the overall modal padding, we need this here for the buttons to have their 4px focus-visible outline\n\t\tmargin-block: 6px 4px; // 4px block-end see reason above\n\t}\n}\n</style>\n"],"names":["_sfc_main","Vue","Components_NcDialogButton","Components_NcModal","arr","element","value","props","emit","slots","wrapper","dialogWidth","core","isNavigationCollapsed","hasNavigation","showModal","handleButtonClose","handleClosing","handleClosed","modalProps"],"mappings":"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"}
+{"version":3,"file":"NcDialog.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>\n\t\t<NcButton @click=\"showDialog = true\">Show 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</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcModal v-if=\"open\"\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-labelledby=\"navigationId\">\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) => Array.isArray(arr) && arr.every((element) => typeof element === 'string'),\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 * 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 * 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 * 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\tclass: 'dialog__modal',\n\t\t\tcloseOnClickOutside: false,\n\t\t\tenableSlideshow: false,\n\t\t\tenableSwipe: false,\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\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 8px; // 4px to align with close button, 8px block-end to allow the actions a margin of 4px for the focus visible outline\n\t\t\tpadding-inline: 12px 8px; // 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-container__content) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\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\t\t// see modal-container padding, this aligns with the padding-inline-start (8px + 4px = 12px)\n\t\tpadding-inline-end: 4px;\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\t// Same as the NcAppSettingsDialog\n\t\ttext-align: center;\n\t\theight: var(--default-clickable-area);\n\t\tmin-height: var(--default-clickable-area);\n\t\tline-height: var(--default-clickable-area);\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}\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 4px; // 4px to align with the overall modal padding, we need this here for the buttons to have their 4px focus-visible outline\n\t\tmargin-block: 6px 4px; // 4px block-end see reason above\n\t}\n}\n</style>\n"],"names":["_sfc_main","Vue","Components_NcDialogButton","Components_NcModal","arr","element","value","props","emit","slots","wrapper","dialogWidth","core","isNavigationCollapsed","hasNavigation","navigationId","GenRandomId","showModal","handleButtonClose","handleClosing","handleClosed","modalProps"],"mappings":"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"}

package/dist/Components/NcDialog.mjs

@@ -1,14 +1,15 @@
-import "../assets/index-dc612aa3.css";
-import { useElementSize as p } from "@vueuse/core";
-import { defineComponent as g, ref as d, computed as s } from "vue";
-import m from "./NcModal.mjs";
+import "../assets/index-86454928.css";
+import { useElementSize as g } from "@vueuse/core";
+import { defineComponent as m, ref as l, computed as i } from "vue";
+import v from "./NcModal.mjs";
 import y from "./NcDialogButton.mjs";
-import { n as v } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-const C = g({
+import { G as C } from "../chunks/GenRandomId-cb9ccebe.mjs";
+import { n as h } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const N = m({
   name: "NcDialog",
   components: {
     NcDialogButton: y,
-    NcModal: m
+    NcModal: v
   },
   props: {
     /** Name of the dialog (the heading) */
@@ -47,7 +48,7 @@ const C = g({
     /**
      * Size of the underlying NcModal
      * @default 'small'
-     * @values 'small', 'normal', 'large', 'full'
+     * @type {'small'|'normal'|'large'|'full'}
      */
     size: {
       type: String,
@@ -122,19 +123,19 @@ const C = g({
   },
   emits: ["closing", "update:open"],
   setup(a, { emit: e, slots: t }) {
-    const n = d(), { width: o } = p(n), c = s(() => o.value < 876), u = s(() => (t == null ? void 0 : t.navigation) !== void 0), l = d(!0), _ = () => {
-      i(), window.setTimeout(() => r(), 300);
-    }, i = () => {
-      l.value = !1, e("closing");
+    const n = l(), { width: o } = g(n, { width: 900 }), c = i(() => o.value < 876), u = i(() => (t == null ? void 0 : t.navigation) !== void 0), _ = l(C()), s = l(!0), f = () => {
+      r(), window.setTimeout(() => d(), 300);
     }, r = () => {
-      l.value = !0, e("update:open", !1);
-    }, f = s(() => ({
+      s.value = !1, e("closing");
+    }, d = () => {
+      s.value = !0, e("update:open", !1);
+    }, p = i(() => ({
       canClose: a.canClose,
       container: a.container === void 0 ? "body" : a.container,
       // we do not pass the name as we already have the name as the headline
       // name: props.name,
       size: a.size,
-      show: a.open && l.value,
+      show: a.open && s.value,
       outTransition: a.outTransition,
       class: "dialog__modal",
       closeOnClickOutside: !1,
@@ -142,36 +143,37 @@ const C = g({
       enableSwipe: !1
     }));
     return {
-      handleButtonClose: _,
-      handleClosing: i,
-      handleClosed: r,
+      handleButtonClose: f,
+      handleClosing: r,
+      handleClosed: d,
       hasNavigation: u,
+      navigationId: _,
       isNavigationCollapsed: c,
-      modalProps: f,
+      modalProps: p,
       wrapper: n
     };
   }
 });
-var h = function() {
+var b = function() {
   var e = this, t = e._self._c;
-  return e._self._setupProxy, e.open ? t("NcModal", e._b({ on: { close: e.handleClosed, "update:show": e.handleClosing } }, "NcModal", e.modalProps, !1), [t("h2", { staticClass: "dialog__name", domProps: { textContent: e._s(e.name) } }), t("div", { staticClass: "dialog", class: e.dialogClasses }, [t("div", { ref: "wrapper", class: ["dialog__wrapper", { "dialog__wrapper--collapsed": e.isNavigationCollapsed }] }, [e.hasNavigation ? t("nav", { staticClass: "dialog__navigation", class: e.navigationClasses }, [e._t("navigation", null, { isCollapsed: e.isNavigationCollapsed })], 2) : e._e(), t("div", { staticClass: "dialog__content", class: e.contentClasses }, [e._t("default", function() {
-    return [t("p", [e._v(e._s(e.message))])];
+  return e._self._setupProxy, e.open ? t("NcModal", e._b({ on: { close: e.handleClosed, "update:show": e.handleClosing } }, "NcModal", e.modalProps, !1), [t("h2", { staticClass: "dialog__name", attrs: { id: e.navigationId }, domProps: { textContent: e._s(e.name) } }), t("div", { staticClass: "dialog", class: e.dialogClasses }, [t("div", { ref: "wrapper", class: ["dialog__wrapper", { "dialog__wrapper--collapsed": e.isNavigationCollapsed }] }, [e.hasNavigation ? t("nav", { staticClass: "dialog__navigation", class: e.navigationClasses, attrs: { "aria-labelledby": e.navigationId } }, [e._t("navigation", null, { isCollapsed: e.isNavigationCollapsed })], 2) : e._e(), t("div", { staticClass: "dialog__content", class: e.contentClasses }, [e._t("default", function() {
+    return [t("p", { staticClass: "dialog__text" }, [e._v(" " + e._s(e.message) + " ")])];
   })], 2)]), t("div", { staticClass: "dialog__actions" }, [e._t("actions", function() {
     return e._l(e.buttons, function(n, o) {
       return t("NcDialogButton", e._b({ key: o, on: { click: e.handleButtonClose } }, "NcDialogButton", n, !1));
     });
   })], 2)])]) : e._e();
-}, N = [], b = /* @__PURE__ */ v(
-  C,
-  h,
+}, w = [], S = /* @__PURE__ */ h(
   N,
+  b,
+  w,
   !1,
   null,
-  "cf1c45bf",
+  "758f0283",
   null,
   null
 );
-const x = b.exports;
+const T = S.exports;
 export {
-  x as default
+  T as default
 };

package/dist/Components/NcDialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcDialog.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: '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\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]\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>\n\t\t<NcButton @click=\"showDialog = true\">Show 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</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcModal v-if=\"open\"\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 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\" class=\"dialog__navigation\" :class=\"navigationClasses\">\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>{{ message }}</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\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) => Array.isArray(arr) && arr.every((element) => typeof element === 'string'),\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 * @values '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 * 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 * 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)\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 * 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\tclass: 'dialog__modal',\n\t\t\tcloseOnClickOutside: false,\n\t\t\tenableSlideshow: false,\n\t\t\tenableSwipe: false,\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\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: math.div($breakpoint-mobile, 2)) {\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-container) {\n\t\t\tdisplay: flex !important;\n\t\t\tpadding-block: 4px 8px; // 4px to align with close button, 8px block-end to allow the actions a margin of 4px for the focus visible outline\n\t\t\tpadding-inline: 12px 8px; // 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-container__content) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\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\t\t// see modal-container padding, this aligns with the padding-inline-start (8px + 4px = 12px)\n\t\tpadding-inline-end: 4px;\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\t// Same as the NcAppSettingsDialog\n\t\ttext-align: center;\n\t\theight: var(--default-clickable-area);\n\t\tmin-height: var(--default-clickable-area);\n\t\tline-height: var(--default-clickable-area);\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}\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 4px; // 4px to align with the overall modal padding, we need this here for the buttons to have their 4px focus-visible outline\n\t\tmargin-block: 6px 4px; // 4px block-end see reason above\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","showModal","handleButtonClose","handleClosing","handleClosed","modalProps"],"mappings":"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"}
+{"version":3,"file":"NcDialog.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>\n\t\t<NcButton @click=\"showDialog = true\">Show 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</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcModal v-if=\"open\"\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-labelledby=\"navigationId\">\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) => Array.isArray(arr) && arr.every((element) => typeof element === 'string'),\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 * 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 * 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 * 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\tclass: 'dialog__modal',\n\t\t\tcloseOnClickOutside: false,\n\t\t\tenableSlideshow: false,\n\t\t\tenableSwipe: false,\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\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 8px; // 4px to align with close button, 8px block-end to allow the actions a margin of 4px for the focus visible outline\n\t\t\tpadding-inline: 12px 8px; // 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-container__content) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\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\t\t// see modal-container padding, this aligns with the padding-inline-start (8px + 4px = 12px)\n\t\tpadding-inline-end: 4px;\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\t// Same as the NcAppSettingsDialog\n\t\ttext-align: center;\n\t\theight: var(--default-clickable-area);\n\t\tmin-height: var(--default-clickable-area);\n\t\tline-height: var(--default-clickable-area);\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}\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 4px; // 4px to align with the overall modal padding, we need this here for the buttons to have their 4px focus-visible outline\n\t\tmargin-block: 6px 4px; // 4px block-end see reason above\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","showModal","handleButtonClose","handleClosing","handleClosed","modalProps"],"mappings":"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"}

package/dist/Components/NcDialogButton.cjs

@@ -31,7 +31,7 @@ const o = require("vue"), l = require("./NcButton.cjs"), i = require("./NcIconSv
     },
     /**
      * The button type, see NcButton
-     * @values 'primary', 'secondary', 'error', 'warning', 'success'
+     * @type {'primary'|'secondary'|'error'|'warning'|'success'}
      */
     type: {
       type: String,

package/dist/Components/NcDialogButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcDialogButton.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 * @values '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":";+JA2CAA,IAAAC,EAAAA,gBAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAAA,IACA,kBAAAC;AAAAA,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;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcDialogButton.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":";+JA2CAA,IAAAC,EAAAA,gBAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAAA,IACA,kBAAAC;AAAAA,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/Components/NcDialogButton.mjs

@@ -34,7 +34,7 @@ const u = o({
     },
     /**
      * The button type, see NcButton
-     * @values 'primary', 'secondary', 'error', 'warning', 'success'
+     * @type {'primary'|'secondary'|'error'|'warning'|'success'}
      */
     type: {
       type: String,

package/dist/Components/NcDialogButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcDialogButton.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 * @values '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;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcDialogButton.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/Components/NcEmojiPicker.cjs

@@ -1,5 +1,6 @@
 var j = require("../assets/index-2a8e4ca1.css");
-const c = require("./NcPopover.cjs"), l = require("./NcTextField.cjs"), r = require("../chunks/l10n-e9ffbe5e.cjs"), a = require("emoji-mart-vue-fast"), u = require("emoji-mart-vue-fast/data/all.json"), f = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), p = (t) => t && t.__esModule ? t : { default: t }, d = /* @__PURE__ */ p(u);
+const c = require("./NcPopover.cjs"), l = require("./NcTextField.cjs"), r = require("../chunks/_l10n-72c5e29e.cjs"), a = require("emoji-mart-vue-fast"), u = require("emoji-mart-vue-fast/data/all.json"), f = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), p = (t) => t && t.__esModule ? t : { default: t }, d = /* @__PURE__ */ p(u);
+r.register(r.t6, r.t29, r.t33);
 let o;
 const m = {
   search: r.t("Search emoji"),

package/dist/Components/NcEmojiPicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcEmojiPicker.cjs","sources":["../../src/components/NcEmojiPicker/NcEmojiPicker.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com>\n -\n - @author 2020 Georg Ehrke <oc.list@georgehrke.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n### General description\n\nThis component allows the user to pick an emoji.\n\n### Usage\n\n* Listen to the select event and pass in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker @select=\"select\" style=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Showing a preview and keeping it open after a user selected an emoji\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:close-on-select=\"false\"\n\t\t\t:show-preview=\"true\"\n\t\t\t@select=\"select\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Allow unselecting a previously set emoji.\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:show-preview=\"true\"\n\t\t\t:allow-unselect=\"true\"\n\t\t\t:selected-emoji=\"emoji\"\n\t\t\t@select=\"select\"\n\t\t\t@unselect=\"unselect\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t\tunselect() {\n\t\t\t\tthis.emoji = ''\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<NcPopover :shown.sync=\"open\"\n\t\t:container=\"container\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t\t@after-show=\"afterShow\"\n\t\t@after-hide=\"afterHide\">\n\t\t<template #trigger>\n\t\t\t<slot />\n\t\t</template>\n\t\t<Picker ref=\"picker\"\n\t\t\t:auto-focus=\"false /* We manage the input focus ourselves */\"\n\t\t\tcolor=\"var(--color-primary-element)\"\n\t\t\t:data=\"emojiIndex\"\n\t\t\t:emoji=\"previewFallbackEmoji\"\n\t\t\t:i18n=\"i18n\"\n\t\t\t:native=\"native\"\n\t\t\t:emoji-size=\"20\"\n\t\t\t:per-line=\"8\"\n\t\t\t:picker-styles=\"{ width: '320px' }\"\n\t\t\t:show-preview=\"showPreview\"\n\t\t\t:title=\"previewFallbackName\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@select=\"select\">\n\t\t\t<template #searchTemplate=\"slotProps\">\n\t\t\t\t<NcTextField ref=\"search\"\n\t\t\t\t\tclass=\"search\"\n\t\t\t\t\t:value.sync=\"search\"\n\t\t\t\t\t:label=\"t('Search')\"\n\t\t\t\t\t:label-visible=\"true\"\n\t\t\t\t\t:placeholder=\"i18n.search\"\n\t\t\t\t\ttrailing-button-icon=\"close\"\n\t\t\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\t\t\t:show-trailing-button=\"search !== ''\"\n\t\t\t\t\t@trailing-button-click=\"clearSearch(); slotProps.onSearch(search);\"\n\t\t\t\t\t@update:value=\"slotProps.onSearch(search)\" />\n\t\t\t</template>\n\t\t\t<template v-if=\"allowUnselect && selectedEmoji\" #customCategory>\n\t\t\t\t<div class=\"emoji-mart-category-label\">\n\t\t\t\t\t<h3 class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t{{ t('Selected') }}\n\t\t\t\t\t</h3>\n\t\t\t\t</div>\n\t\t\t\t<Emoji class=\"emoji-selected\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t:emoji=\"selectedEmoji\"\n\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t:size=\"32\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t<Emoji class=\"emoji-delete\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\temoji=\":x:\"\n\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t:size=\"10\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t</template>\n\t\t</Picker>\n\t</NcPopover>\n</template>\n\n<script>\nimport NcPopover from '../NcPopover/index.js'\nimport NcTextField from '../NcTextField/index.js'\nimport { t } from '../../l10n.js'\n\nimport { Picker, Emoji, EmojiIndex } from 'emoji-mart-vue-fast'\nimport data from 'emoji-mart-vue-fast/data/all.json'\n\n// Shared emoji index for all NcEmojiPicker instances\n// Will be initialized on the first NcEmojiPicker creating\nlet emojiIndex\n\nconst i18n = {\n\tsearch: t('Search emoji'),\n\tnotfound: t('No emoji found'),\n\tcategories: {\n\t\tsearch: t('Search results'),\n\t\trecent: t('Frequently used'),\n\t\tsmileys: t('Smileys & Emotion'),\n\t\tpeople: t('People & Body'),\n\t\tnature: t('Animals & Nature'),\n\t\tfoods: t('Food & Drink'),\n\t\tactivity: t('Activities'),\n\t\tplaces: t('Travel & Places'),\n\t\tobjects: t('Objects'),\n\t\tsymbols: t('Symbols'),\n\t\tflags: t('Flags'),\n\t\tcustom: t('Custom'),\n\t},\n}\n\nexport default {\n\tname: 'NcEmojiPicker',\n\tcomponents: {\n\t\tNcPopover,\n\t\tNcTextField,\n\t\tEmoji,\n\t\tPicker,\n\t},\n\tprops: {\n\t\t/**\n\t\t * The emoji-set\n\t\t */\n\t\tactiveSet: {\n\t\t\ttype: String,\n\t\t\tdefault: 'native',\n\t\t},\n\t\t/**\n\t\t * Show preview section when hovering emoji\n\t\t */\n\t\tshowPreview: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Allow unselecting the selected emoji\n\t\t */\n\t\tallowUnselect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Selected emoji to allow unselecting\n\t\t */\n\t\tselectedEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The fallback emoji in the preview section\n\t\t */\n\t\tpreviewFallbackEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: 'grinning',\n\t\t},\n\t\t/**\n\t\t * The fallback text in the preview section\n\t\t */\n\t\tpreviewFallbackName: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Pick an emoji'),\n\t\t},\n\t\t/**\n\t\t * Whether to close the emoji picker after picking one\n\t\t */\n\t\tcloseOnSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\temits: [\n\t\t'select',\n\t\t'select-data',\n\t\t'unselect',\n\t],\n\n\tsetup() {\n\t\t// If this is the first instance of NcEmojiPicker - setup EmojiIndex\n\t\tif (!emojiIndex) {\n\t\t\temojiIndex = new EmojiIndex(data)\n\t\t}\n\n\t\treturn {\n\t\t\t// Non-reactive constants\n\t\t\temojiIndex,\n\t\t\ti18n,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tsearch: '',\n\t\t\topen: false,\n\t\t}\n\t},\n\tcomputed: {\n\t\tnative() {\n\t\t\treturn this.activeSet === 'native'\n\t\t},\n\t},\n\tmethods: {\n\t\tt,\n\n\t\tclearSearch() {\n\t\t\tthis.search = ''\n\t\t\tconst input = this.$refs.search?.$refs.inputField?.$refs.input\n\t\t\tif (input) {\n\t\t\t\tinput.focus()\n\t\t\t}\n\t\t},\n\n\t\tselect(emojiObject) {\n\t\t\t/**\n\t\t\t * Emits a string containing the emoji e.g. '👩🏿‍💻'\n\t\t\t */\n\t\t\tthis.$emit('select', emojiObject.native)\n\n\t\t\t/**\n\t\t\t * Emits a object with more data about the picked emoji\n\t\t\t */\n\t\t\tthis.$emit('select-data', emojiObject)\n\n\t\t\tif (this.closeOnSelect) {\n\t\t\t\tthis.open = false\n\t\t\t}\n\t\t},\n\n\t\tunselect() {\n\t\t\tthis.$emit('unselect')\n\t\t},\n\n\t\tafterShow() {\n\t\t\t// add focus trap in modal\n\t\t\tconst picker = this.$refs.picker\n\t\t\tpicker.$el.addEventListener('keydown', this.checkKeyEvent)\n\n\t\t\t// set focus on input search field\n\t\t\tconst input = this.$refs.search?.$refs.inputField?.$refs.input\n\t\t\tif (input) {\n\t\t\t\tinput.focus()\n\t\t\t}\n\t\t},\n\n\t\tafterHide() {\n\t\t\t// remove keydown listner if popover is hidden\n\t\t\tconst picker = this.$refs.picker\n\t\t\tpicker.$el.removeEventListener('keydown', this.checkKeyEvent)\n\t\t},\n\n\t\tcheckKeyEvent(event) {\n\t\t\tif (event.key !== 'Tab') {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst picker = this.$refs.picker\n\t\t\tconst focusableList = picker.$el.querySelectorAll(\n\t\t\t\t'button, input',\n\t\t\t)\n\t\t\tconst last = focusableList.length - 1\n\t\t\t// escape early if only 1 or no elements to focus\n\t\t\tif (focusableList.length <= 1) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (event.shiftKey === false && event.target === focusableList[last]) {\n\t\t\t\t// Jump to first item when pressing tab on the latest item\n\t\t\t\tevent.preventDefault()\n\t\t\t\tfocusableList[0].focus()\n\t\t\t} else if (event.shiftKey === true && event.target === focusableList[0]) {\n\t\t\t\t// Jump to the last item if pressing shift+tab on the first item\n\t\t\t\tevent.preventDefault()\n\t\t\t\tfocusableList[last].focus()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n@import 'emoji-mart-vue-fast/css/emoji-mart.css';\n\n.emoji-mart {\n\tbackground-color: var(--color-main-background) !important;\n\tborder: 0;\n\tcolor: var(--color-main-text) !important;\n\n\t// default style reset\n\tbutton {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tfont-size: inherit;\n\t\theight: 36px;\n\t\twidth: auto;\n\n\t\t* {\n\t\t\tcursor: pointer !important;\n\t\t}\n\t}\n\n\t.emoji-mart-bar,\n\t.emoji-mart-anchors,\n\t.emoji-mart-search,\n\t.emoji-mart-search input,\n\t.emoji-mart-category,\n\t.emoji-mart-category-label,\n\t.emoji-mart-category-label span,\n\t.emoji-mart-skin-swatches {\n\t\tbackground-color: transparent !important;\n\t\tborder-color: var(--color-border) !important;\n\t\tcolor: inherit !important;\n\t}\n\n\t.emoji-mart-search input:focus-visible {\n\t\tbox-shadow: inset 0 0 0 2px var(--color-primary-element);\n\t\toutline: none;\n\t}\n\n\t.emoji-mart-bar {\n\t\t&:first-child {\n\t\t\tborder-top-left-radius: var(--border-radius) !important;\n\t\t\tborder-top-right-radius: var(--border-radius) !important;\n\t\t}\n\t}\n\n\t.emoji-mart-anchors {\n\t\tbutton {\n\t\t\tborder-radius: 0;\n\t\t\tpadding: 12px 4px;\n\t\t\theight: auto;\n\t\t\t&:focus-visible {\n\t\t\t\t/* box-shadow: inset 0 0 0 2px var(--color-primary-element); */\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t}\n\n\t.emoji-mart-category {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tflex-wrap: wrap;\n\t\tjustify-content: start;\n\n\t\t.emoji-mart-category-label,\n\t\t.emoji-mart-emoji {\n\t\t\tuser-select: none;\n\t\t\tflex-grow: 0;\n\t\t\tflex-shrink: 0;\n\t\t}\n\n\t\t.emoji-mart-category-label {\n\t\t\tflex-basis: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t.emoji-mart-emoji {\n\t\t\t// 8 emoji per row\n\t\t\tflex-basis: calc(100% / 8);\n\t\t\ttext-align: center;\n\n\t\t\t&:hover::before,\n\t\t\t&.emoji-mart-emoji-selected::before{\n\t\t\t\tbackground-color: var(--color-background-hover) !important;\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t\tbutton {\n\n\t\t\t&:focus-visible {\n\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t\tborder: 2px solid var(--color-primary-element) !important;\n\t\t\t\tborder-radius: 50%;\n\t\t\t}\n\t\t}\n\t}\n\n}\n\n.search {\n\tpadding: 4px 8px;\n}\n\n</style>\n\n<style scoped>\n.row-selected span {\n\tvertical-align: middle;\n}\n\n.row-selected button {\n\tvertical-align: middle;\n}\n\n.emoji-delete {\n\tvertical-align: top;\n\tmargin-left: -21px;\n\tmargin-top: -3px;\n}\n</style>\n"],"names":["emojiIndex","i18n","l10n","_sfc_main","Components_NcPopover","Components_NcTextField","emojiMartVueFast","data__default","input","_b","_a","emojiObject","event","focusableList","last"],"mappings":"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"}
+{"version":3,"file":"NcEmojiPicker.cjs","sources":["../../src/components/NcEmojiPicker/NcEmojiPicker.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com>\n -\n - @author 2020 Georg Ehrke <oc.list@georgehrke.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n### General description\n\nThis component allows the user to pick an emoji.\n\n### Usage\n\n* Listen to the select event and pass in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker @select=\"select\" style=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Showing a preview and keeping it open after a user selected an emoji\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:close-on-select=\"false\"\n\t\t\t:show-preview=\"true\"\n\t\t\t@select=\"select\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Allow unselecting a previously set emoji.\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:show-preview=\"true\"\n\t\t\t:allow-unselect=\"true\"\n\t\t\t:selected-emoji=\"emoji\"\n\t\t\t@select=\"select\"\n\t\t\t@unselect=\"unselect\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t\tunselect() {\n\t\t\t\tthis.emoji = ''\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<NcPopover :shown.sync=\"open\"\n\t\t:container=\"container\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t\t@after-show=\"afterShow\"\n\t\t@after-hide=\"afterHide\">\n\t\t<template #trigger>\n\t\t\t<slot />\n\t\t</template>\n\t\t<Picker ref=\"picker\"\n\t\t\t:auto-focus=\"false /* We manage the input focus ourselves */\"\n\t\t\tcolor=\"var(--color-primary-element)\"\n\t\t\t:data=\"emojiIndex\"\n\t\t\t:emoji=\"previewFallbackEmoji\"\n\t\t\t:i18n=\"i18n\"\n\t\t\t:native=\"native\"\n\t\t\t:emoji-size=\"20\"\n\t\t\t:per-line=\"8\"\n\t\t\t:picker-styles=\"{ width: '320px' }\"\n\t\t\t:show-preview=\"showPreview\"\n\t\t\t:title=\"previewFallbackName\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@select=\"select\">\n\t\t\t<template #searchTemplate=\"slotProps\">\n\t\t\t\t<NcTextField ref=\"search\"\n\t\t\t\t\tclass=\"search\"\n\t\t\t\t\t:value.sync=\"search\"\n\t\t\t\t\t:label=\"t('Search')\"\n\t\t\t\t\t:label-visible=\"true\"\n\t\t\t\t\t:placeholder=\"i18n.search\"\n\t\t\t\t\ttrailing-button-icon=\"close\"\n\t\t\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\t\t\t:show-trailing-button=\"search !== ''\"\n\t\t\t\t\t@trailing-button-click=\"clearSearch(); slotProps.onSearch(search);\"\n\t\t\t\t\t@update:value=\"slotProps.onSearch(search)\" />\n\t\t\t</template>\n\t\t\t<template v-if=\"allowUnselect && selectedEmoji\" #customCategory>\n\t\t\t\t<div class=\"emoji-mart-category-label\">\n\t\t\t\t\t<h3 class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t{{ t('Selected') }}\n\t\t\t\t\t</h3>\n\t\t\t\t</div>\n\t\t\t\t<Emoji class=\"emoji-selected\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t:emoji=\"selectedEmoji\"\n\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t:size=\"32\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t<Emoji class=\"emoji-delete\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\temoji=\":x:\"\n\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t:size=\"10\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t</template>\n\t\t</Picker>\n\t</NcPopover>\n</template>\n\n<script>\nimport NcPopover from '../NcPopover/index.js'\nimport NcTextField from '../NcTextField/index.js'\nimport { t } from '../../l10n.js'\n\nimport { Picker, Emoji, EmojiIndex } from 'emoji-mart-vue-fast'\nimport data from 'emoji-mart-vue-fast/data/all.json'\n\n// Shared emoji index for all NcEmojiPicker instances\n// Will be initialized on the first NcEmojiPicker creating\nlet emojiIndex\n\nconst i18n = {\n\tsearch: t('Search emoji'),\n\tnotfound: t('No emoji found'),\n\tcategories: {\n\t\tsearch: t('Search results'),\n\t\trecent: t('Frequently used'),\n\t\tsmileys: t('Smileys & Emotion'),\n\t\tpeople: t('People & Body'),\n\t\tnature: t('Animals & Nature'),\n\t\tfoods: t('Food & Drink'),\n\t\tactivity: t('Activities'),\n\t\tplaces: t('Travel & Places'),\n\t\tobjects: t('Objects'),\n\t\tsymbols: t('Symbols'),\n\t\tflags: t('Flags'),\n\t\tcustom: t('Custom'),\n\t},\n}\n\nexport default {\n\tname: 'NcEmojiPicker',\n\tcomponents: {\n\t\tNcPopover,\n\t\tNcTextField,\n\t\tEmoji,\n\t\tPicker,\n\t},\n\tprops: {\n\t\t/**\n\t\t * The emoji-set\n\t\t */\n\t\tactiveSet: {\n\t\t\ttype: String,\n\t\t\tdefault: 'native',\n\t\t},\n\t\t/**\n\t\t * Show preview section when hovering emoji\n\t\t */\n\t\tshowPreview: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Allow unselecting the selected emoji\n\t\t */\n\t\tallowUnselect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Selected emoji to allow unselecting\n\t\t */\n\t\tselectedEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The fallback emoji in the preview section\n\t\t */\n\t\tpreviewFallbackEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: 'grinning',\n\t\t},\n\t\t/**\n\t\t * The fallback text in the preview section\n\t\t */\n\t\tpreviewFallbackName: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Pick an emoji'),\n\t\t},\n\t\t/**\n\t\t * Whether to close the emoji picker after picking one\n\t\t */\n\t\tcloseOnSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\temits: [\n\t\t'select',\n\t\t'select-data',\n\t\t'unselect',\n\t],\n\n\tsetup() {\n\t\t// If this is the first instance of NcEmojiPicker - setup EmojiIndex\n\t\tif (!emojiIndex) {\n\t\t\temojiIndex = new EmojiIndex(data)\n\t\t}\n\n\t\treturn {\n\t\t\t// Non-reactive constants\n\t\t\temojiIndex,\n\t\t\ti18n,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tsearch: '',\n\t\t\topen: false,\n\t\t}\n\t},\n\tcomputed: {\n\t\tnative() {\n\t\t\treturn this.activeSet === 'native'\n\t\t},\n\t},\n\tmethods: {\n\t\tt,\n\n\t\tclearSearch() {\n\t\t\tthis.search = ''\n\t\t\tconst input = this.$refs.search?.$refs.inputField?.$refs.input\n\t\t\tif (input) {\n\t\t\t\tinput.focus()\n\t\t\t}\n\t\t},\n\n\t\tselect(emojiObject) {\n\t\t\t/**\n\t\t\t * Emits a string containing the emoji e.g. '👩🏿‍💻'\n\t\t\t */\n\t\t\tthis.$emit('select', emojiObject.native)\n\n\t\t\t/**\n\t\t\t * Emits a object with more data about the picked emoji\n\t\t\t */\n\t\t\tthis.$emit('select-data', emojiObject)\n\n\t\t\tif (this.closeOnSelect) {\n\t\t\t\tthis.open = false\n\t\t\t}\n\t\t},\n\n\t\tunselect() {\n\t\t\tthis.$emit('unselect')\n\t\t},\n\n\t\tafterShow() {\n\t\t\t// add focus trap in modal\n\t\t\tconst picker = this.$refs.picker\n\t\t\tpicker.$el.addEventListener('keydown', this.checkKeyEvent)\n\n\t\t\t// set focus on input search field\n\t\t\tconst input = this.$refs.search?.$refs.inputField?.$refs.input\n\t\t\tif (input) {\n\t\t\t\tinput.focus()\n\t\t\t}\n\t\t},\n\n\t\tafterHide() {\n\t\t\t// remove keydown listner if popover is hidden\n\t\t\tconst picker = this.$refs.picker\n\t\t\tpicker.$el.removeEventListener('keydown', this.checkKeyEvent)\n\t\t},\n\n\t\tcheckKeyEvent(event) {\n\t\t\tif (event.key !== 'Tab') {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst picker = this.$refs.picker\n\t\t\tconst focusableList = picker.$el.querySelectorAll(\n\t\t\t\t'button, input',\n\t\t\t)\n\t\t\tconst last = focusableList.length - 1\n\t\t\t// escape early if only 1 or no elements to focus\n\t\t\tif (focusableList.length <= 1) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (event.shiftKey === false && event.target === focusableList[last]) {\n\t\t\t\t// Jump to first item when pressing tab on the latest item\n\t\t\t\tevent.preventDefault()\n\t\t\t\tfocusableList[0].focus()\n\t\t\t} else if (event.shiftKey === true && event.target === focusableList[0]) {\n\t\t\t\t// Jump to the last item if pressing shift+tab on the first item\n\t\t\t\tevent.preventDefault()\n\t\t\t\tfocusableList[last].focus()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n@import 'emoji-mart-vue-fast/css/emoji-mart.css';\n\n.emoji-mart {\n\tbackground-color: var(--color-main-background) !important;\n\tborder: 0;\n\tcolor: var(--color-main-text) !important;\n\n\t// default style reset\n\tbutton {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tfont-size: inherit;\n\t\theight: 36px;\n\t\twidth: auto;\n\n\t\t* {\n\t\t\tcursor: pointer !important;\n\t\t}\n\t}\n\n\t.emoji-mart-bar,\n\t.emoji-mart-anchors,\n\t.emoji-mart-search,\n\t.emoji-mart-search input,\n\t.emoji-mart-category,\n\t.emoji-mart-category-label,\n\t.emoji-mart-category-label span,\n\t.emoji-mart-skin-swatches {\n\t\tbackground-color: transparent !important;\n\t\tborder-color: var(--color-border) !important;\n\t\tcolor: inherit !important;\n\t}\n\n\t.emoji-mart-search input:focus-visible {\n\t\tbox-shadow: inset 0 0 0 2px var(--color-primary-element);\n\t\toutline: none;\n\t}\n\n\t.emoji-mart-bar {\n\t\t&:first-child {\n\t\t\tborder-top-left-radius: var(--border-radius) !important;\n\t\t\tborder-top-right-radius: var(--border-radius) !important;\n\t\t}\n\t}\n\n\t.emoji-mart-anchors {\n\t\tbutton {\n\t\t\tborder-radius: 0;\n\t\t\tpadding: 12px 4px;\n\t\t\theight: auto;\n\t\t\t&:focus-visible {\n\t\t\t\t/* box-shadow: inset 0 0 0 2px var(--color-primary-element); */\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t}\n\n\t.emoji-mart-category {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tflex-wrap: wrap;\n\t\tjustify-content: start;\n\n\t\t.emoji-mart-category-label,\n\t\t.emoji-mart-emoji {\n\t\t\tuser-select: none;\n\t\t\tflex-grow: 0;\n\t\t\tflex-shrink: 0;\n\t\t}\n\n\t\t.emoji-mart-category-label {\n\t\t\tflex-basis: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t.emoji-mart-emoji {\n\t\t\t// 8 emoji per row\n\t\t\tflex-basis: calc(100% / 8);\n\t\t\ttext-align: center;\n\n\t\t\t&:hover::before,\n\t\t\t&.emoji-mart-emoji-selected::before{\n\t\t\t\tbackground-color: var(--color-background-hover) !important;\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t\tbutton {\n\n\t\t\t&:focus-visible {\n\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t\tborder: 2px solid var(--color-primary-element) !important;\n\t\t\t\tborder-radius: 50%;\n\t\t\t}\n\t\t}\n\t}\n\n}\n\n.search {\n\tpadding: 4px 8px;\n}\n\n</style>\n\n<style scoped>\n.row-selected span {\n\tvertical-align: middle;\n}\n\n.row-selected button {\n\tvertical-align: middle;\n}\n\n.emoji-delete {\n\tvertical-align: top;\n\tmargin-left: -21px;\n\tmargin-top: -3px;\n}\n</style>\n"],"names":["emojiIndex","i18n","_l10n","_sfc_main","Components_NcPopover","Components_NcTextField","emojiMartVueFast","data__default","input","_b","_a","emojiObject","event","focusableList","last"],"mappings":";;;AAmMA,IAAAA;AAEA,MAAAC,IAAA;AAAA,EACA,QAAAC,EAAA,EAAA,cAAA;AAAA,EACA,UAAAA,EAAA,EAAA,gBAAA;AAAA,EACA,YAAA;AAAA,IACA,QAAAA,EAAA,EAAA,gBAAA;AAAA,IACA,QAAAA,EAAA,EAAA,iBAAA;AAAA,IACA,SAAAA,EAAA,EAAA,mBAAA;AAAA,IACA,QAAAA,EAAA,EAAA,eAAA;AAAA,IACA,QAAAA,EAAA,EAAA,kBAAA;AAAA,IACA,OAAAA,EAAA,EAAA,cAAA;AAAA,IACA,UAAAA,EAAA,EAAA,YAAA;AAAA,IACA,QAAAA,EAAA,EAAA,iBAAA;AAAA,IACA,SAAAA,EAAA,EAAA,SAAA;AAAA,IACA,SAAAA,EAAA,EAAA,SAAA;AAAA,IACA,OAAAA,EAAA,EAAA,OAAA;AAAA,IACA,QAAAA,EAAA,EAAA,QAAA;AAAA,EACA;AACA,GAEAC,IAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC,EAAA;AAAA,IACA,QAAAA,EAAA;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAJ,EAAA,EAAA,eAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,SAAA,OAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AAEA,WAAAF,MACAA,IAAA,IAAAM,EAAA,WAAAC,EAAA,OAAA,IAGA;AAAA;AAAA,MAEA,YAAAP;AAAA,MACA,MAAAC;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA,IACA,SAAA;AACA,aAAA,KAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,SAAA;AAAA,IACA,GAAAC,EAAA;AAAA,IAEA,cAAA;;AACA,WAAA,SAAA;AACA,YAAAM,KAAAC,KAAAC,IAAA,KAAA,MAAA,WAAA,gBAAAA,EAAA,MAAA,eAAA,gBAAAD,EAAA,MAAA;AACA,MAAAD,KACAA,EAAA,MAAA;AAAA,IAEA;AAAA,IAEA,OAAAG,GAAA;AAIA,WAAA,MAAA,UAAAA,EAAA,MAAA,GAKA,KAAA,MAAA,eAAAA,CAAA,GAEA,KAAA,kBACA,KAAA,OAAA;AAAA,IAEA;AAAA,IAEA,WAAA;AACA,WAAA,MAAA,UAAA;AAAA,IACA;AAAA,IAEA,YAAA;;AAGA,MADA,KAAA,MAAA,OACA,IAAA,iBAAA,WAAA,KAAA,aAAA;AAGA,YAAAH,KAAAC,KAAAC,IAAA,KAAA,MAAA,WAAA,gBAAAA,EAAA,MAAA,eAAA,gBAAAD,EAAA,MAAA;AACA,MAAAD,KACAA,EAAA,MAAA;AAAA,IAEA;AAAA,IAEA,YAAA;AAGA,MADA,KAAA,MAAA,OACA,IAAA,oBAAA,WAAA,KAAA,aAAA;AAAA,IACA;AAAA,IAEA,cAAAI,GAAA;AACA,UAAAA,EAAA,QAAA;AACA;AAGA,YAAAC,IADA,KAAA,MAAA,OACA,IAAA;AAAA,QACA;AAAA,MACA,GACAC,IAAAD,EAAA,SAAA;AAEA,UAAAA,EAAA,UAAA,GAAA;AACA,QAAAD,EAAA,eAAA;AACA;AAAA,MACA;AACA,MAAAA,EAAA,aAAA,MAAAA,EAAA,WAAAC,EAAAC,CAAA,KAEAF,EAAA,eAAA,GACAC,EAAA,CAAA,EAAA,MAAA,KACAD,EAAA,aAAA,MAAAA,EAAA,WAAAC,EAAA,CAAA,MAEAD,EAAA,eAAA,GACAC,EAAAC,CAAA,EAAA,MAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcEmojiPicker.mjs

@@ -1,12 +1,13 @@
 import "../assets/index-2a8e4ca1.css";
 import n from "./NcPopover.mjs";
 import c from "./NcTextField.mjs";
-import { t as r } from "../chunks/l10n-ef44019c.mjs";
-import { Emoji as l, Picker as u, EmojiIndex as f } from "emoji-mart-vue-fast";
-import p from "emoji-mart-vue-fast/data/all.json";
-import { n as m } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+import { r as l, l as u, y as f, E as p, a as r } from "../chunks/_l10n-f5af5269.mjs";
+import { Emoji as m, Picker as d, EmojiIndex as h } from "emoji-mart-vue-fast";
+import v from "emoji-mart-vue-fast/data/all.json";
+import { n as y } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+l(p, f, u);
 let o;
-const d = {
+const _ = {
   search: r("Search emoji"),
   notfound: r("No emoji found"),
   categories: {
@@ -23,13 +24,13 @@ const d = {
     flags: r("Flags"),
     custom: r("Custom")
   }
-}, h = {
+}, k = {
   name: "NcEmojiPicker",
   components: {
     NcPopover: n,
     NcTextField: c,
-    Emoji: l,
-    Picker: u
+    Emoji: m,
+    Picker: d
   },
   props: {
     /**
@@ -95,10 +96,10 @@ const d = {
     "unselect"
   ],
   setup() {
-    return o || (o = new f(p)), {
+    return o || (o = new h(v)), {
       // Non-reactive constants
       emojiIndex: o,
-      i18n: d
+      i18n: _
     };
   },
   data() {
@@ -149,7 +150,7 @@ const d = {
     }
   }
 };
-var v = function() {
+var j = function() {
   var e = this, t = e._self._c;
   return t("NcPopover", e._g(e._b({ attrs: { shown: e.open, container: e.container }, on: { "update:shown": function(s) {
     e.open = s;
@@ -166,17 +167,17 @@ var v = function() {
   } }, e.allowUnselect && e.selectedEmoji ? { key: "customCategory", fn: function() {
     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);
-}, y = [], _ = /* @__PURE__ */ m(
-  h,
-  v,
-  y,
+}, g = [], b = /* @__PURE__ */ y(
+  k,
+  j,
+  g,
   !1,
   null,
   "4d56e499",
   null,
   null
 );
-const $ = _.exports;
+const F = b.exports;
 export {
-  $ as default
+  F as default
 };

package/dist/Components/NcEmojiPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcEmojiPicker.mjs","sources":["../../src/components/NcEmojiPicker/NcEmojiPicker.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com>\n -\n - @author 2020 Georg Ehrke <oc.list@georgehrke.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n### General description\n\nThis component allows the user to pick an emoji.\n\n### Usage\n\n* Listen to the select event and pass in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker @select=\"select\" style=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Showing a preview and keeping it open after a user selected an emoji\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:close-on-select=\"false\"\n\t\t\t:show-preview=\"true\"\n\t\t\t@select=\"select\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Allow unselecting a previously set emoji.\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:show-preview=\"true\"\n\t\t\t:allow-unselect=\"true\"\n\t\t\t:selected-emoji=\"emoji\"\n\t\t\t@select=\"select\"\n\t\t\t@unselect=\"unselect\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t\tunselect() {\n\t\t\t\tthis.emoji = ''\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<NcPopover :shown.sync=\"open\"\n\t\t:container=\"container\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t\t@after-show=\"afterShow\"\n\t\t@after-hide=\"afterHide\">\n\t\t<template #trigger>\n\t\t\t<slot />\n\t\t</template>\n\t\t<Picker ref=\"picker\"\n\t\t\t:auto-focus=\"false /* We manage the input focus ourselves */\"\n\t\t\tcolor=\"var(--color-primary-element)\"\n\t\t\t:data=\"emojiIndex\"\n\t\t\t:emoji=\"previewFallbackEmoji\"\n\t\t\t:i18n=\"i18n\"\n\t\t\t:native=\"native\"\n\t\t\t:emoji-size=\"20\"\n\t\t\t:per-line=\"8\"\n\t\t\t:picker-styles=\"{ width: '320px' }\"\n\t\t\t:show-preview=\"showPreview\"\n\t\t\t:title=\"previewFallbackName\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@select=\"select\">\n\t\t\t<template #searchTemplate=\"slotProps\">\n\t\t\t\t<NcTextField ref=\"search\"\n\t\t\t\t\tclass=\"search\"\n\t\t\t\t\t:value.sync=\"search\"\n\t\t\t\t\t:label=\"t('Search')\"\n\t\t\t\t\t:label-visible=\"true\"\n\t\t\t\t\t:placeholder=\"i18n.search\"\n\t\t\t\t\ttrailing-button-icon=\"close\"\n\t\t\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\t\t\t:show-trailing-button=\"search !== ''\"\n\t\t\t\t\t@trailing-button-click=\"clearSearch(); slotProps.onSearch(search);\"\n\t\t\t\t\t@update:value=\"slotProps.onSearch(search)\" />\n\t\t\t</template>\n\t\t\t<template v-if=\"allowUnselect && selectedEmoji\" #customCategory>\n\t\t\t\t<div class=\"emoji-mart-category-label\">\n\t\t\t\t\t<h3 class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t{{ t('Selected') }}\n\t\t\t\t\t</h3>\n\t\t\t\t</div>\n\t\t\t\t<Emoji class=\"emoji-selected\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t:emoji=\"selectedEmoji\"\n\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t:size=\"32\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t<Emoji class=\"emoji-delete\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\temoji=\":x:\"\n\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t:size=\"10\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t</template>\n\t\t</Picker>\n\t</NcPopover>\n</template>\n\n<script>\nimport NcPopover from '../NcPopover/index.js'\nimport NcTextField from '../NcTextField/index.js'\nimport { t } from '../../l10n.js'\n\nimport { Picker, Emoji, EmojiIndex } from 'emoji-mart-vue-fast'\nimport data from 'emoji-mart-vue-fast/data/all.json'\n\n// Shared emoji index for all NcEmojiPicker instances\n// Will be initialized on the first NcEmojiPicker creating\nlet emojiIndex\n\nconst i18n = {\n\tsearch: t('Search emoji'),\n\tnotfound: t('No emoji found'),\n\tcategories: {\n\t\tsearch: t('Search results'),\n\t\trecent: t('Frequently used'),\n\t\tsmileys: t('Smileys & Emotion'),\n\t\tpeople: t('People & Body'),\n\t\tnature: t('Animals & Nature'),\n\t\tfoods: t('Food & Drink'),\n\t\tactivity: t('Activities'),\n\t\tplaces: t('Travel & Places'),\n\t\tobjects: t('Objects'),\n\t\tsymbols: t('Symbols'),\n\t\tflags: t('Flags'),\n\t\tcustom: t('Custom'),\n\t},\n}\n\nexport default {\n\tname: 'NcEmojiPicker',\n\tcomponents: {\n\t\tNcPopover,\n\t\tNcTextField,\n\t\tEmoji,\n\t\tPicker,\n\t},\n\tprops: {\n\t\t/**\n\t\t * The emoji-set\n\t\t */\n\t\tactiveSet: {\n\t\t\ttype: String,\n\t\t\tdefault: 'native',\n\t\t},\n\t\t/**\n\t\t * Show preview section when hovering emoji\n\t\t */\n\t\tshowPreview: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Allow unselecting the selected emoji\n\t\t */\n\t\tallowUnselect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Selected emoji to allow unselecting\n\t\t */\n\t\tselectedEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The fallback emoji in the preview section\n\t\t */\n\t\tpreviewFallbackEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: 'grinning',\n\t\t},\n\t\t/**\n\t\t * The fallback text in the preview section\n\t\t */\n\t\tpreviewFallbackName: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Pick an emoji'),\n\t\t},\n\t\t/**\n\t\t * Whether to close the emoji picker after picking one\n\t\t */\n\t\tcloseOnSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\temits: [\n\t\t'select',\n\t\t'select-data',\n\t\t'unselect',\n\t],\n\n\tsetup() {\n\t\t// If this is the first instance of NcEmojiPicker - setup EmojiIndex\n\t\tif (!emojiIndex) {\n\t\t\temojiIndex = new EmojiIndex(data)\n\t\t}\n\n\t\treturn {\n\t\t\t// Non-reactive constants\n\t\t\temojiIndex,\n\t\t\ti18n,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tsearch: '',\n\t\t\topen: false,\n\t\t}\n\t},\n\tcomputed: {\n\t\tnative() {\n\t\t\treturn this.activeSet === 'native'\n\t\t},\n\t},\n\tmethods: {\n\t\tt,\n\n\t\tclearSearch() {\n\t\t\tthis.search = ''\n\t\t\tconst input = this.$refs.search?.$refs.inputField?.$refs.input\n\t\t\tif (input) {\n\t\t\t\tinput.focus()\n\t\t\t}\n\t\t},\n\n\t\tselect(emojiObject) {\n\t\t\t/**\n\t\t\t * Emits a string containing the emoji e.g. '👩🏿‍💻'\n\t\t\t */\n\t\t\tthis.$emit('select', emojiObject.native)\n\n\t\t\t/**\n\t\t\t * Emits a object with more data about the picked emoji\n\t\t\t */\n\t\t\tthis.$emit('select-data', emojiObject)\n\n\t\t\tif (this.closeOnSelect) {\n\t\t\t\tthis.open = false\n\t\t\t}\n\t\t},\n\n\t\tunselect() {\n\t\t\tthis.$emit('unselect')\n\t\t},\n\n\t\tafterShow() {\n\t\t\t// add focus trap in modal\n\t\t\tconst picker = this.$refs.picker\n\t\t\tpicker.$el.addEventListener('keydown', this.checkKeyEvent)\n\n\t\t\t// set focus on input search field\n\t\t\tconst input = this.$refs.search?.$refs.inputField?.$refs.input\n\t\t\tif (input) {\n\t\t\t\tinput.focus()\n\t\t\t}\n\t\t},\n\n\t\tafterHide() {\n\t\t\t// remove keydown listner if popover is hidden\n\t\t\tconst picker = this.$refs.picker\n\t\t\tpicker.$el.removeEventListener('keydown', this.checkKeyEvent)\n\t\t},\n\n\t\tcheckKeyEvent(event) {\n\t\t\tif (event.key !== 'Tab') {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst picker = this.$refs.picker\n\t\t\tconst focusableList = picker.$el.querySelectorAll(\n\t\t\t\t'button, input',\n\t\t\t)\n\t\t\tconst last = focusableList.length - 1\n\t\t\t// escape early if only 1 or no elements to focus\n\t\t\tif (focusableList.length <= 1) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (event.shiftKey === false && event.target === focusableList[last]) {\n\t\t\t\t// Jump to first item when pressing tab on the latest item\n\t\t\t\tevent.preventDefault()\n\t\t\t\tfocusableList[0].focus()\n\t\t\t} else if (event.shiftKey === true && event.target === focusableList[0]) {\n\t\t\t\t// Jump to the last item if pressing shift+tab on the first item\n\t\t\t\tevent.preventDefault()\n\t\t\t\tfocusableList[last].focus()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n@import 'emoji-mart-vue-fast/css/emoji-mart.css';\n\n.emoji-mart {\n\tbackground-color: var(--color-main-background) !important;\n\tborder: 0;\n\tcolor: var(--color-main-text) !important;\n\n\t// default style reset\n\tbutton {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tfont-size: inherit;\n\t\theight: 36px;\n\t\twidth: auto;\n\n\t\t* {\n\t\t\tcursor: pointer !important;\n\t\t}\n\t}\n\n\t.emoji-mart-bar,\n\t.emoji-mart-anchors,\n\t.emoji-mart-search,\n\t.emoji-mart-search input,\n\t.emoji-mart-category,\n\t.emoji-mart-category-label,\n\t.emoji-mart-category-label span,\n\t.emoji-mart-skin-swatches {\n\t\tbackground-color: transparent !important;\n\t\tborder-color: var(--color-border) !important;\n\t\tcolor: inherit !important;\n\t}\n\n\t.emoji-mart-search input:focus-visible {\n\t\tbox-shadow: inset 0 0 0 2px var(--color-primary-element);\n\t\toutline: none;\n\t}\n\n\t.emoji-mart-bar {\n\t\t&:first-child {\n\t\t\tborder-top-left-radius: var(--border-radius) !important;\n\t\t\tborder-top-right-radius: var(--border-radius) !important;\n\t\t}\n\t}\n\n\t.emoji-mart-anchors {\n\t\tbutton {\n\t\t\tborder-radius: 0;\n\t\t\tpadding: 12px 4px;\n\t\t\theight: auto;\n\t\t\t&:focus-visible {\n\t\t\t\t/* box-shadow: inset 0 0 0 2px var(--color-primary-element); */\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t}\n\n\t.emoji-mart-category {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tflex-wrap: wrap;\n\t\tjustify-content: start;\n\n\t\t.emoji-mart-category-label,\n\t\t.emoji-mart-emoji {\n\t\t\tuser-select: none;\n\t\t\tflex-grow: 0;\n\t\t\tflex-shrink: 0;\n\t\t}\n\n\t\t.emoji-mart-category-label {\n\t\t\tflex-basis: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t.emoji-mart-emoji {\n\t\t\t// 8 emoji per row\n\t\t\tflex-basis: calc(100% / 8);\n\t\t\ttext-align: center;\n\n\t\t\t&:hover::before,\n\t\t\t&.emoji-mart-emoji-selected::before{\n\t\t\t\tbackground-color: var(--color-background-hover) !important;\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t\tbutton {\n\n\t\t\t&:focus-visible {\n\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t\tborder: 2px solid var(--color-primary-element) !important;\n\t\t\t\tborder-radius: 50%;\n\t\t\t}\n\t\t}\n\t}\n\n}\n\n.search {\n\tpadding: 4px 8px;\n}\n\n</style>\n\n<style scoped>\n.row-selected span {\n\tvertical-align: middle;\n}\n\n.row-selected button {\n\tvertical-align: middle;\n}\n\n.emoji-delete {\n\tvertical-align: top;\n\tmargin-left: -21px;\n\tmargin-top: -3px;\n}\n</style>\n"],"names":["emojiIndex","i18n","t","_sfc_main","NcPopover","NcTextField","Emoji","Picker","EmojiIndex","data","input","_b","_a","emojiObject","event","focusableList","last"],"mappings":"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"}
+{"version":3,"file":"NcEmojiPicker.mjs","sources":["../../src/components/NcEmojiPicker/NcEmojiPicker.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com>\n -\n - @author 2020 Georg Ehrke <oc.list@georgehrke.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n### General description\n\nThis component allows the user to pick an emoji.\n\n### Usage\n\n* Listen to the select event and pass in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker @select=\"select\" style=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Showing a preview and keeping it open after a user selected an emoji\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:close-on-select=\"false\"\n\t\t\t:show-preview=\"true\"\n\t\t\t@select=\"select\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Allow unselecting a previously set emoji.\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:show-preview=\"true\"\n\t\t\t:allow-unselect=\"true\"\n\t\t\t:selected-emoji=\"emoji\"\n\t\t\t@select=\"select\"\n\t\t\t@unselect=\"unselect\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t\tunselect() {\n\t\t\t\tthis.emoji = ''\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<NcPopover :shown.sync=\"open\"\n\t\t:container=\"container\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t\t@after-show=\"afterShow\"\n\t\t@after-hide=\"afterHide\">\n\t\t<template #trigger>\n\t\t\t<slot />\n\t\t</template>\n\t\t<Picker ref=\"picker\"\n\t\t\t:auto-focus=\"false /* We manage the input focus ourselves */\"\n\t\t\tcolor=\"var(--color-primary-element)\"\n\t\t\t:data=\"emojiIndex\"\n\t\t\t:emoji=\"previewFallbackEmoji\"\n\t\t\t:i18n=\"i18n\"\n\t\t\t:native=\"native\"\n\t\t\t:emoji-size=\"20\"\n\t\t\t:per-line=\"8\"\n\t\t\t:picker-styles=\"{ width: '320px' }\"\n\t\t\t:show-preview=\"showPreview\"\n\t\t\t:title=\"previewFallbackName\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@select=\"select\">\n\t\t\t<template #searchTemplate=\"slotProps\">\n\t\t\t\t<NcTextField ref=\"search\"\n\t\t\t\t\tclass=\"search\"\n\t\t\t\t\t:value.sync=\"search\"\n\t\t\t\t\t:label=\"t('Search')\"\n\t\t\t\t\t:label-visible=\"true\"\n\t\t\t\t\t:placeholder=\"i18n.search\"\n\t\t\t\t\ttrailing-button-icon=\"close\"\n\t\t\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\t\t\t:show-trailing-button=\"search !== ''\"\n\t\t\t\t\t@trailing-button-click=\"clearSearch(); slotProps.onSearch(search);\"\n\t\t\t\t\t@update:value=\"slotProps.onSearch(search)\" />\n\t\t\t</template>\n\t\t\t<template v-if=\"allowUnselect && selectedEmoji\" #customCategory>\n\t\t\t\t<div class=\"emoji-mart-category-label\">\n\t\t\t\t\t<h3 class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t{{ t('Selected') }}\n\t\t\t\t\t</h3>\n\t\t\t\t</div>\n\t\t\t\t<Emoji class=\"emoji-selected\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t:emoji=\"selectedEmoji\"\n\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t:size=\"32\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t<Emoji class=\"emoji-delete\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\temoji=\":x:\"\n\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t:size=\"10\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t</template>\n\t\t</Picker>\n\t</NcPopover>\n</template>\n\n<script>\nimport NcPopover from '../NcPopover/index.js'\nimport NcTextField from '../NcTextField/index.js'\nimport { t } from '../../l10n.js'\n\nimport { Picker, Emoji, EmojiIndex } from 'emoji-mart-vue-fast'\nimport data from 'emoji-mart-vue-fast/data/all.json'\n\n// Shared emoji index for all NcEmojiPicker instances\n// Will be initialized on the first NcEmojiPicker creating\nlet emojiIndex\n\nconst i18n = {\n\tsearch: t('Search emoji'),\n\tnotfound: t('No emoji found'),\n\tcategories: {\n\t\tsearch: t('Search results'),\n\t\trecent: t('Frequently used'),\n\t\tsmileys: t('Smileys & Emotion'),\n\t\tpeople: t('People & Body'),\n\t\tnature: t('Animals & Nature'),\n\t\tfoods: t('Food & Drink'),\n\t\tactivity: t('Activities'),\n\t\tplaces: t('Travel & Places'),\n\t\tobjects: t('Objects'),\n\t\tsymbols: t('Symbols'),\n\t\tflags: t('Flags'),\n\t\tcustom: t('Custom'),\n\t},\n}\n\nexport default {\n\tname: 'NcEmojiPicker',\n\tcomponents: {\n\t\tNcPopover,\n\t\tNcTextField,\n\t\tEmoji,\n\t\tPicker,\n\t},\n\tprops: {\n\t\t/**\n\t\t * The emoji-set\n\t\t */\n\t\tactiveSet: {\n\t\t\ttype: String,\n\t\t\tdefault: 'native',\n\t\t},\n\t\t/**\n\t\t * Show preview section when hovering emoji\n\t\t */\n\t\tshowPreview: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Allow unselecting the selected emoji\n\t\t */\n\t\tallowUnselect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Selected emoji to allow unselecting\n\t\t */\n\t\tselectedEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The fallback emoji in the preview section\n\t\t */\n\t\tpreviewFallbackEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: 'grinning',\n\t\t},\n\t\t/**\n\t\t * The fallback text in the preview section\n\t\t */\n\t\tpreviewFallbackName: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Pick an emoji'),\n\t\t},\n\t\t/**\n\t\t * Whether to close the emoji picker after picking one\n\t\t */\n\t\tcloseOnSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\temits: [\n\t\t'select',\n\t\t'select-data',\n\t\t'unselect',\n\t],\n\n\tsetup() {\n\t\t// If this is the first instance of NcEmojiPicker - setup EmojiIndex\n\t\tif (!emojiIndex) {\n\t\t\temojiIndex = new EmojiIndex(data)\n\t\t}\n\n\t\treturn {\n\t\t\t// Non-reactive constants\n\t\t\temojiIndex,\n\t\t\ti18n,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tsearch: '',\n\t\t\topen: false,\n\t\t}\n\t},\n\tcomputed: {\n\t\tnative() {\n\t\t\treturn this.activeSet === 'native'\n\t\t},\n\t},\n\tmethods: {\n\t\tt,\n\n\t\tclearSearch() {\n\t\t\tthis.search = ''\n\t\t\tconst input = this.$refs.search?.$refs.inputField?.$refs.input\n\t\t\tif (input) {\n\t\t\t\tinput.focus()\n\t\t\t}\n\t\t},\n\n\t\tselect(emojiObject) {\n\t\t\t/**\n\t\t\t * Emits a string containing the emoji e.g. '👩🏿‍💻'\n\t\t\t */\n\t\t\tthis.$emit('select', emojiObject.native)\n\n\t\t\t/**\n\t\t\t * Emits a object with more data about the picked emoji\n\t\t\t */\n\t\t\tthis.$emit('select-data', emojiObject)\n\n\t\t\tif (this.closeOnSelect) {\n\t\t\t\tthis.open = false\n\t\t\t}\n\t\t},\n\n\t\tunselect() {\n\t\t\tthis.$emit('unselect')\n\t\t},\n\n\t\tafterShow() {\n\t\t\t// add focus trap in modal\n\t\t\tconst picker = this.$refs.picker\n\t\t\tpicker.$el.addEventListener('keydown', this.checkKeyEvent)\n\n\t\t\t// set focus on input search field\n\t\t\tconst input = this.$refs.search?.$refs.inputField?.$refs.input\n\t\t\tif (input) {\n\t\t\t\tinput.focus()\n\t\t\t}\n\t\t},\n\n\t\tafterHide() {\n\t\t\t// remove keydown listner if popover is hidden\n\t\t\tconst picker = this.$refs.picker\n\t\t\tpicker.$el.removeEventListener('keydown', this.checkKeyEvent)\n\t\t},\n\n\t\tcheckKeyEvent(event) {\n\t\t\tif (event.key !== 'Tab') {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst picker = this.$refs.picker\n\t\t\tconst focusableList = picker.$el.querySelectorAll(\n\t\t\t\t'button, input',\n\t\t\t)\n\t\t\tconst last = focusableList.length - 1\n\t\t\t// escape early if only 1 or no elements to focus\n\t\t\tif (focusableList.length <= 1) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (event.shiftKey === false && event.target === focusableList[last]) {\n\t\t\t\t// Jump to first item when pressing tab on the latest item\n\t\t\t\tevent.preventDefault()\n\t\t\t\tfocusableList[0].focus()\n\t\t\t} else if (event.shiftKey === true && event.target === focusableList[0]) {\n\t\t\t\t// Jump to the last item if pressing shift+tab on the first item\n\t\t\t\tevent.preventDefault()\n\t\t\t\tfocusableList[last].focus()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n@import 'emoji-mart-vue-fast/css/emoji-mart.css';\n\n.emoji-mart {\n\tbackground-color: var(--color-main-background) !important;\n\tborder: 0;\n\tcolor: var(--color-main-text) !important;\n\n\t// default style reset\n\tbutton {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tfont-size: inherit;\n\t\theight: 36px;\n\t\twidth: auto;\n\n\t\t* {\n\t\t\tcursor: pointer !important;\n\t\t}\n\t}\n\n\t.emoji-mart-bar,\n\t.emoji-mart-anchors,\n\t.emoji-mart-search,\n\t.emoji-mart-search input,\n\t.emoji-mart-category,\n\t.emoji-mart-category-label,\n\t.emoji-mart-category-label span,\n\t.emoji-mart-skin-swatches {\n\t\tbackground-color: transparent !important;\n\t\tborder-color: var(--color-border) !important;\n\t\tcolor: inherit !important;\n\t}\n\n\t.emoji-mart-search input:focus-visible {\n\t\tbox-shadow: inset 0 0 0 2px var(--color-primary-element);\n\t\toutline: none;\n\t}\n\n\t.emoji-mart-bar {\n\t\t&:first-child {\n\t\t\tborder-top-left-radius: var(--border-radius) !important;\n\t\t\tborder-top-right-radius: var(--border-radius) !important;\n\t\t}\n\t}\n\n\t.emoji-mart-anchors {\n\t\tbutton {\n\t\t\tborder-radius: 0;\n\t\t\tpadding: 12px 4px;\n\t\t\theight: auto;\n\t\t\t&:focus-visible {\n\t\t\t\t/* box-shadow: inset 0 0 0 2px var(--color-primary-element); */\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t}\n\n\t.emoji-mart-category {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tflex-wrap: wrap;\n\t\tjustify-content: start;\n\n\t\t.emoji-mart-category-label,\n\t\t.emoji-mart-emoji {\n\t\t\tuser-select: none;\n\t\t\tflex-grow: 0;\n\t\t\tflex-shrink: 0;\n\t\t}\n\n\t\t.emoji-mart-category-label {\n\t\t\tflex-basis: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t.emoji-mart-emoji {\n\t\t\t// 8 emoji per row\n\t\t\tflex-basis: calc(100% / 8);\n\t\t\ttext-align: center;\n\n\t\t\t&:hover::before,\n\t\t\t&.emoji-mart-emoji-selected::before{\n\t\t\t\tbackground-color: var(--color-background-hover) !important;\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t\tbutton {\n\n\t\t\t&:focus-visible {\n\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t\tborder: 2px solid var(--color-primary-element) !important;\n\t\t\t\tborder-radius: 50%;\n\t\t\t}\n\t\t}\n\t}\n\n}\n\n.search {\n\tpadding: 4px 8px;\n}\n\n</style>\n\n<style scoped>\n.row-selected span {\n\tvertical-align: middle;\n}\n\n.row-selected button {\n\tvertical-align: middle;\n}\n\n.emoji-delete {\n\tvertical-align: top;\n\tmargin-left: -21px;\n\tmargin-top: -3px;\n}\n</style>\n"],"names":["emojiIndex","i18n","t","_sfc_main","NcPopover","NcTextField","Emoji","Picker","EmojiIndex","data","input","_b","_a","emojiObject","event","focusableList","last"],"mappings":"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"}