@nextcloud/vue 8.39.0 → 8.41.0

package/dist/chunks/{NcEmojiPicker-2KIJVstd.cjs → NcEmojiPicker-Dyqwkm_d.cjs}

@@ -4,14 +4,14 @@ const emojiMartVueFast = require("emoji-mart-vue-fast");
 const data = require("emoji-mart-vue-fast/data/all.json");
 const tabbable = require("tabbable");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
-const NcColorPicker = require("./NcColorPicker-BTiAa5mm.cjs");
+const NcColorPicker = require("./NcColorPicker-oQVwX8dO.cjs");
 const useTrapStackControl = require("./useTrapStackControl-XYABY64G.cjs");
 const emoji = require("./emoji-aWWWqkrJ.cjs");
-const _l10n = require("./_l10n-skrZri3h.cjs");
-const colors = require("./colors-CyIwf6gH.cjs");
-const NcButton = require("./NcButton-ByTFUhwJ.cjs");
-const NcPopover = require("./NcPopover-Ujf9nIvN.cjs");
-const NcTextField = require("./NcTextField-B92lM77I.cjs");
+const _l10n = require("./_l10n-Be-gO5QO.cjs");
+const colors = require("./colors-DF9O093h.cjs");
+const NcButton = require("./NcButton-W3wDpCdX.cjs");
+const NcPopover = require("./NcPopover-Bq-bsaqt.cjs");
+const NcTextField = require("./NcTextField-DMxdmT5a.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const data__default = /* @__PURE__ */ _interopDefault(data);
 const _sfc_main$1 = {
@@ -47,7 +47,7 @@ var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   null
 );
 const IconCircle = __component__$1.exports;
-_l10n.register(_l10n.t5, _l10n.t15, _l10n.t36, _l10n.t43);
+_l10n.register(_l10n.t6, _l10n.t16, _l10n.t37, _l10n.t44);
 let emojiIndex;
 const i18n = {
   search: _l10n.t("Search emoji"),
@@ -316,4 +316,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcEmojiPicker = __component__.exports;
 exports.NcEmojiPicker = NcEmojiPicker;
-//# sourceMappingURL=NcEmojiPicker-2KIJVstd.cjs.map
+//# sourceMappingURL=NcEmojiPicker-Dyqwkm_d.cjs.map

package/dist/chunks/{NcEmojiPicker-2KIJVstd.cjs.map → NcEmojiPicker-Dyqwkm_d.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcEmojiPicker-2KIJVstd.cjs","sources":["../../node_modules/vue-material-design-icons/Circle.vue","../../src/components/NcEmojiPicker/NcEmojiPicker.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon circle-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"CircleIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\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\n\t\tref=\"popover\"\n\t\t:shown.sync=\"open\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\n\t\tv-bind=\"$attrs\"\n\t\t:focus-trap=\"false /* Handled manually to remove emoji buttons from TAB sequence */\"\n\t\tv-on=\"$listeners\"\n\t\t@after-show=\"afterShow\"\n\t\t@after-hide=\"afterHide\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<div class=\"nc-emoji-picker-container\">\n\t\t\t<Picker\n\t\t\t\tref=\"picker\"\n\t\t\t\tcolor=\"var(--color-primary-element)\"\n\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t:emoji=\"previewFallbackEmoji\"\n\t\t\t\t:i18n=\"i18n\"\n\t\t\t\t:native=\"native\"\n\t\t\t\t:emoji-size=\"20\"\n\t\t\t\t:per-line=\"8\"\n\t\t\t\t:picker-styles=\"{ width: '320px' }\"\n\t\t\t\t:show-preview=\"showPreview\"\n\t\t\t\t:skin=\"currentSkinTone\"\n\t\t\t\t:show-skin-tones=\"false\"\n\t\t\t\t:title=\"previewFallbackName\"\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\t:aria-label=\"t('Emoji picker')\"\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t@keydown.native.tab.prevent=\"handleTabNavigationSkippingEmojis\"\n\t\t\t\t@select=\"select\">\n\t\t\t\t<template #searchTemplate=\"{ onSearch }\">\n\t\t\t\t\t<div class=\"search__wrapper\">\n\t\t\t\t\t\t<NcTextField\n\t\t\t\t\t\t\tref=\"search\"\n\t\t\t\t\t\t\tclass=\"search\"\n\t\t\t\t\t\t\t:value.sync=\"search\"\n\t\t\t\t\t\t\t:label=\"t('Search')\"\n\t\t\t\t\t\t\t:label-visible=\"true\"\n\t\t\t\t\t\t\t:placeholder=\"i18n.search\"\n\t\t\t\t\t\t\ttrailing-button-icon=\"close\"\n\t\t\t\t\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\t\t\t\t\t:show-trailing-button=\"search !== ''\"\n\t\t\t\t\t\t\t@keydown.left=\"callPickerArrowHandlerWithScrollFix('onArrowLeft', $event)\"\n\t\t\t\t\t\t\t@keydown.right=\"callPickerArrowHandlerWithScrollFix('onArrowRight', $event)\"\n\t\t\t\t\t\t\t@keydown.down=\"callPickerArrowHandlerWithScrollFix('onArrowDown', $event)\"\n\t\t\t\t\t\t\t@keydown.up=\"callPickerArrowHandlerWithScrollFix('onArrowUp', $event)\"\n\t\t\t\t\t\t\t@keydown.enter=\"$refs.picker.onEnter\"\n\t\t\t\t\t\t\t@trailing-button-click=\"clearSearch(); onSearch('');\"\n\t\t\t\t\t\t\t@update:value=\"onSearch(search)\" />\n\t\t\t\t\t\t<NcColorPicker\n\t\t\t\t\t\t\tpalette-only\n\t\t\t\t\t\t\t:container=\"container\"\n\t\t\t\t\t\t\t:palette=\"skinTonePalette\"\n\t\t\t\t\t\t\t:value=\"currentColor.color\"\n\t\t\t\t\t\t\t@update:value=\"onChangeSkinTone\">\n\t\t\t\t\t\t\t<NcButton :aria-label=\"t('Skin tone')\" variant=\"tertiary-no-background\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconCircle :style=\"{ color: currentColor.color }\" :title=\"currentColor.name\" :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</NcColorPicker>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t\t<template v-if=\"allowUnselect && selectedEmoji\" #customCategory>\n\t\t\t\t\t<div class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t<h3 class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t\t{{ t('Selected') }}\n\t\t\t\t\t\t</h3>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Emoji\n\t\t\t\t\t\tclass=\"emoji-selected\"\n\t\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t\t:emoji=\"selectedEmoji\"\n\t\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t\t:size=\"32\"\n\t\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t\t<Emoji\n\t\t\t\t\t\tclass=\"emoji-delete\"\n\t\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t\temoji=\":x:\"\n\t\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t\t:size=\"10\"\n\t\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t</template>\n\t\t\t</Picker>\n\t\t</div>\n\t</NcPopover>\n</template>\n\n<script>\nimport { Emoji, EmojiIndex, Picker } from 'emoji-mart-vue-fast'\nimport data from 'emoji-mart-vue-fast/data/all.json'\nimport { isFocusable } from 'tabbable'\nimport IconCircle from 'vue-material-design-icons/Circle.vue'\nimport NcColorPicker from '../NcColorPicker/NcColorPicker.vue'\nimport { useTrapStackControl } from '../../composables/useTrapStackControl.ts'\nimport { getCurrentSkinTone, setCurrentSkinTone } from '../../functions/emoji/emoji.ts'\nimport { t } from '../../l10n.js'\nimport { Color } from '../../utils/colors.ts'\nimport NcButton from '../NcButton/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport NcTextField from '../NcTextField/index.js'\n\n// Shared emoji index and skinTone 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\nconst skinTonePalette = [\n\tnew Color(255, 222, 52, t('Neutral skin color')),\n\tnew Color(228, 205, 166, t('Light skin tone')),\n\tnew Color(250, 221, 192, t('Medium light skin tone')),\n\tnew Color(174, 129, 87, t('Medium skin tone')),\n\tnew Color(158, 113, 88, t('Medium dark skin tone')),\n\tnew Color(96, 79, 69, t('Dark skin tone')),\n]\n\nexport default {\n\tname: 'NcEmojiPicker',\n\n\tcomponents: {\n\t\tEmoji,\n\t\tIconCircle,\n\t\tNcButton,\n\t\tNcColorPicker,\n\t\tNcPopover,\n\t\tNcTextField,\n\t\tPicker,\n\t},\n\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\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\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\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\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\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\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\t// eslint-disable-next-line vue/no-boolean-default\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: [Boolean, String, Object, Element],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\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\tskinTonePalette,\n\t\t\ti18n,\n\t\t}\n\t},\n\n\tdata() {\n\t\tconst currentSkinTone = getCurrentSkinTone()\n\n\t\treturn {\n\t\t\t/**\n\t\t\t * The current active color from the skin tone palette\n\t\t\t */\n\t\t\tcurrentColor: skinTonePalette[currentSkinTone - 1],\n\t\t\t/**\n\t\t\t * The current active skin tone\n\t\t\t *\n\t\t\t * @type {1|2|3|4|5|6}\n\t\t\t */\n\t\t\tcurrentSkinTone,\n\t\t\tsearch: '',\n\t\t\topen: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tnative() {\n\t\t\treturn this.activeSet === 'native'\n\t\t},\n\t},\n\n\tcreated() {\n\t\t// Component has its own custom focus management\n\t\t// The global focus trap stack should be paused\n\t\tuseTrapStackControl(() => this.open)\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\tclearSearch() {\n\t\t\tthis.search = ''\n\t\t\tthis.$refs.search.focus()\n\t\t},\n\n\t\t/**\n\t\t * Update the current skin tone by the result of the color picker\n\t\t *\n\t\t * @param {string} color Color set\n\t\t */\n\t\tonChangeSkinTone(color) {\n\t\t\tconst index = this.skinTonePalette.findIndex((tone) => tone.color.toLowerCase() === color.toLowerCase())\n\t\t\tif (index > -1) {\n\t\t\t\tthis.currentSkinTone = index + 1\n\t\t\t\tthis.currentColor = this.skinTonePalette[index]\n\t\t\t\tsetCurrentSkinTone(this.currentSkinTone)\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\tthis.$refs.search.focus()\n\t\t},\n\n\t\tafterHide() {\n\t\t\t// Manually return focus to the trigger button, as we disabled focus-trap\n\t\t\t// But only if there is no focus target outside the picker, for example, input element that received focus by click closing the emoji picker\n\t\t\tif (!document.activeElement || this.$refs.picker.$el.contains(document.activeElement) || !isFocusable(document.activeElement)) {\n\t\t\t\tthis.$refs.popover.$el.querySelector('button, [role=\"button\"]')?.focus()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Manually handle Tab navigation skipping emoji buttons.\n\t\t * Navigation over emojis is handled by Arrow keys.\n\t\t *\n\t\t * @param {KeyboardEvent} event - Keyboard event\n\t\t */\n\t\thandleTabNavigationSkippingEmojis(event) {\n\t\t\tconst current = event.target\n\t\t\tconst focusable = Array.from(this.$refs.picker.$el.querySelectorAll('button:not(.emoji-mart-emoji), input'))\n\t\t\tif (!event.shiftKey) {\n\t\t\t\tconst nextNode = focusable.find((node) => current.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING) || focusable[0]\n\t\t\t\tnextNode.focus()\n\t\t\t} else {\n\t\t\t\tconst prevNode = focusable.findLast((node) => current.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_PRECEDING) || focusable.at(-1)\n\t\t\t\tprevNode.focus()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Handle arrow navigation via <Picker>'s handlers with scroll bug fix\n\t\t *\n\t\t * @param {'onArrowLeft' | 'onArrowRight' | 'onArrowDown' | 'onArrowUp'} originalHandlerName - Picker's arrow keydown handler name\n\t\t * @param {KeyboardEvent} event - Keyboard event\n\t\t */\n\t\tasync callPickerArrowHandlerWithScrollFix(originalHandlerName, event) {\n\t\t\t// Call the original handler\n\t\t\t// See: https://github.com/serebrov/emoji-mart-vue/blob/a1ea72673a111cce78dc8caad8bc9ea3e02ad5bd/src/components/Picker.vue#L29\n\t\t\t// TODO: expose these methods via slot props in upstream library\n\t\t\tthis.$refs.picker[originalHandlerName](event)\n\n\t\t\t// Wait until emoji-mart-vue-fast scrolls\n\t\t\tawait this.$nextTick()\n\n\t\t\t// Scroll position is incorrect after emoji-mart-vue-fast scrolls...\n\t\t\t// It calculates scroll incorrectly.\n\t\t\t// It doesn't take into account, that emojis are wrapped into categories sections\n\t\t\t// See: https://github.com/serebrov/emoji-mart-vue/blob/a1ea72673a111cce78dc8caad8bc9ea3e02ad5bd/src/utils/picker.js#L244\n\t\t\t// Now scroll to the correct position\n\t\t\t// TODO: fix in upstream\n\t\t\tconst selectedEmoji = this.$refs.picker.$el.querySelector('.emoji-mart-emoji-selected')\n\t\t\tselectedEmoji?.scrollIntoView({\n\t\t\t\tblock: 'center',\n\t\t\t\tinline: 'center',\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@use \"sass:meta\";\n\n.nc-emoji-picker-container :deep() {\n\t@include meta.load-css('emoji-mart-vue-fast/css/emoji-mart.css');\n}\n\n.nc-emoji-picker-container :deep(.emoji-mart) {\n\tbackground-color: var(--color-main-background) !important;\n\tborder: 0;\n\tcolor: var(--color-main-text) !important;\n\n\t// Reset emoji-mart styles\n\tbutton {\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tfont-size: inherit;\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-anchors {\n\t\tpadding-block: 0;\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t}\n\n\t.emoji-mart-anchor {\n\t\tborder-radius: 0;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\t\theight: var(--clickable-area-small);\n\t\tmin-width: var(--clickable-area-small);\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 2px solid var(--color-primary-element) !important;\n\t\t\toutline-offset: -2px;\n\t\t}\n\n\t\t// Icon\n\t\tdiv {\n\t\t\tdisplay: grid;\n\t\t\tplace-content: center;\n\t\t}\n\t}\n\n\t.emoji-mart-scroll {\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: 0 calc(2 * var(--default-grid-baseline));\n\t}\n\n\t.emoji-mart-category {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(8, 1fr);\n\t\tjustify-items: stretch;\n\n\t\t&.emoji-mart-no-results {\n\t\t\tgrid-template-columns: 1fr;\n\t\t\tfont-size: inherit;\n\t\t\tcolor: var(--color-text-maxcontrast) !important;\n\t\t}\n\t}\n\n\t/* Label element in the section grid */\n\tdiv.emoji-mart-category-label {\n\t\tgrid-column: span 8;\n\t\tjustify-self: stretch;\n\t}\n\n\t/* An actual heading inside the element */\n\th3.emoji-mart-category-label  {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t// Inline with buttons\n\t\theight: var(--default-clickable-area);\n\t\tmargin: 0;\n\t\t// Inline with input\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: 0;\n\t\tuser-select: none;\n\t}\n\n\t.emoji-mart-emoji {\n\t\taspect-ratio: 1 / 1;\n\t\ttext-align: center;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\n\t\t&:hover,\n\t\t&:focus-visible,\n\t\t&.emoji-mart-emoji-selected {\n\t\t\tbackground-color: var(--color-background-hover) !important;\n\t\t\tborder: none;\n\t\t\tborder-radius: var(--border-radius-element, var(--border-radius-pill));\n\t\t\tbox-shadow: none !important;\n\t\t\toutline: 2px solid var(--color-primary-element) !important;\n\t\t\toutline-offset: -2px;\n\t\t}\n\n\t\t&::before {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\tspan {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n\n.search__wrapper {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n\talign-items: end;\n\tpadding-block: var(--default-grid-baseline);\n\tpadding-inline: calc(2 * var(--default-grid-baseline));\n}\n\n.row-selected {\n\tbutton, span {\n\t\tvertical-align: middle;\n\t}\n}\n\n.emoji-delete {\n\tvertical-align: top;\n\tmargin-left: -21px;\n\tmargin-top: -3px;\n}\n</style>\n"],"names":["_sfc_main","t","Color","Emoji","NcButton","NcColorPicker","NcPopover","NcTextField","Picker","EmojiIndex","data","getCurrentSkinTone","useTrapStackControl","setCurrentSkinTone","isFocusable"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"NcEmojiPicker-Dyqwkm_d.cjs","sources":["../../node_modules/vue-material-design-icons/Circle.vue","../../src/components/NcEmojiPicker/NcEmojiPicker.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon circle-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"CircleIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\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\n\t\tref=\"popover\"\n\t\t:shown.sync=\"open\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\n\t\tv-bind=\"$attrs\"\n\t\t:focus-trap=\"false /* Handled manually to remove emoji buttons from TAB sequence */\"\n\t\tv-on=\"$listeners\"\n\t\t@after-show=\"afterShow\"\n\t\t@after-hide=\"afterHide\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<div class=\"nc-emoji-picker-container\">\n\t\t\t<Picker\n\t\t\t\tref=\"picker\"\n\t\t\t\tcolor=\"var(--color-primary-element)\"\n\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t:emoji=\"previewFallbackEmoji\"\n\t\t\t\t:i18n=\"i18n\"\n\t\t\t\t:native=\"native\"\n\t\t\t\t:emoji-size=\"20\"\n\t\t\t\t:per-line=\"8\"\n\t\t\t\t:picker-styles=\"{ width: '320px' }\"\n\t\t\t\t:show-preview=\"showPreview\"\n\t\t\t\t:skin=\"currentSkinTone\"\n\t\t\t\t:show-skin-tones=\"false\"\n\t\t\t\t:title=\"previewFallbackName\"\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\t:aria-label=\"t('Emoji picker')\"\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t@keydown.native.tab.prevent=\"handleTabNavigationSkippingEmojis\"\n\t\t\t\t@select=\"select\">\n\t\t\t\t<template #searchTemplate=\"{ onSearch }\">\n\t\t\t\t\t<div class=\"search__wrapper\">\n\t\t\t\t\t\t<NcTextField\n\t\t\t\t\t\t\tref=\"search\"\n\t\t\t\t\t\t\tclass=\"search\"\n\t\t\t\t\t\t\t:value.sync=\"search\"\n\t\t\t\t\t\t\t:label=\"t('Search')\"\n\t\t\t\t\t\t\t:label-visible=\"true\"\n\t\t\t\t\t\t\t:placeholder=\"i18n.search\"\n\t\t\t\t\t\t\ttrailing-button-icon=\"close\"\n\t\t\t\t\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\t\t\t\t\t:show-trailing-button=\"search !== ''\"\n\t\t\t\t\t\t\t@keydown.left=\"callPickerArrowHandlerWithScrollFix('onArrowLeft', $event)\"\n\t\t\t\t\t\t\t@keydown.right=\"callPickerArrowHandlerWithScrollFix('onArrowRight', $event)\"\n\t\t\t\t\t\t\t@keydown.down=\"callPickerArrowHandlerWithScrollFix('onArrowDown', $event)\"\n\t\t\t\t\t\t\t@keydown.up=\"callPickerArrowHandlerWithScrollFix('onArrowUp', $event)\"\n\t\t\t\t\t\t\t@keydown.enter=\"$refs.picker.onEnter\"\n\t\t\t\t\t\t\t@trailing-button-click=\"clearSearch(); onSearch('');\"\n\t\t\t\t\t\t\t@update:value=\"onSearch(search)\" />\n\t\t\t\t\t\t<NcColorPicker\n\t\t\t\t\t\t\tpalette-only\n\t\t\t\t\t\t\t:container=\"container\"\n\t\t\t\t\t\t\t:palette=\"skinTonePalette\"\n\t\t\t\t\t\t\t:value=\"currentColor.color\"\n\t\t\t\t\t\t\t@update:value=\"onChangeSkinTone\">\n\t\t\t\t\t\t\t<NcButton :aria-label=\"t('Skin tone')\" variant=\"tertiary-no-background\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconCircle :style=\"{ color: currentColor.color }\" :title=\"currentColor.name\" :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</NcColorPicker>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t\t<template v-if=\"allowUnselect && selectedEmoji\" #customCategory>\n\t\t\t\t\t<div class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t<h3 class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t\t{{ t('Selected') }}\n\t\t\t\t\t\t</h3>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Emoji\n\t\t\t\t\t\tclass=\"emoji-selected\"\n\t\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t\t:emoji=\"selectedEmoji\"\n\t\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t\t:size=\"32\"\n\t\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t\t<Emoji\n\t\t\t\t\t\tclass=\"emoji-delete\"\n\t\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t\temoji=\":x:\"\n\t\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t\t:size=\"10\"\n\t\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t</template>\n\t\t\t</Picker>\n\t\t</div>\n\t</NcPopover>\n</template>\n\n<script>\nimport { Emoji, EmojiIndex, Picker } from 'emoji-mart-vue-fast'\nimport data from 'emoji-mart-vue-fast/data/all.json'\nimport { isFocusable } from 'tabbable'\nimport IconCircle from 'vue-material-design-icons/Circle.vue'\nimport NcColorPicker from '../NcColorPicker/NcColorPicker.vue'\nimport { useTrapStackControl } from '../../composables/useTrapStackControl.ts'\nimport { getCurrentSkinTone, setCurrentSkinTone } from '../../functions/emoji/emoji.ts'\nimport { t } from '../../l10n.js'\nimport { Color } from '../../utils/colors.ts'\nimport NcButton from '../NcButton/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport NcTextField from '../NcTextField/index.js'\n\n// Shared emoji index and skinTone 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\nconst skinTonePalette = [\n\tnew Color(255, 222, 52, t('Neutral skin color')),\n\tnew Color(228, 205, 166, t('Light skin tone')),\n\tnew Color(250, 221, 192, t('Medium light skin tone')),\n\tnew Color(174, 129, 87, t('Medium skin tone')),\n\tnew Color(158, 113, 88, t('Medium dark skin tone')),\n\tnew Color(96, 79, 69, t('Dark skin tone')),\n]\n\nexport default {\n\tname: 'NcEmojiPicker',\n\n\tcomponents: {\n\t\tEmoji,\n\t\tIconCircle,\n\t\tNcButton,\n\t\tNcColorPicker,\n\t\tNcPopover,\n\t\tNcTextField,\n\t\tPicker,\n\t},\n\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\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\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\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\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\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\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\t// eslint-disable-next-line vue/no-boolean-default\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: [Boolean, String, Object, Element],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\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\tskinTonePalette,\n\t\t\ti18n,\n\t\t}\n\t},\n\n\tdata() {\n\t\tconst currentSkinTone = getCurrentSkinTone()\n\n\t\treturn {\n\t\t\t/**\n\t\t\t * The current active color from the skin tone palette\n\t\t\t */\n\t\t\tcurrentColor: skinTonePalette[currentSkinTone - 1],\n\t\t\t/**\n\t\t\t * The current active skin tone\n\t\t\t *\n\t\t\t * @type {1|2|3|4|5|6}\n\t\t\t */\n\t\t\tcurrentSkinTone,\n\t\t\tsearch: '',\n\t\t\topen: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tnative() {\n\t\t\treturn this.activeSet === 'native'\n\t\t},\n\t},\n\n\tcreated() {\n\t\t// Component has its own custom focus management\n\t\t// The global focus trap stack should be paused\n\t\tuseTrapStackControl(() => this.open)\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\tclearSearch() {\n\t\t\tthis.search = ''\n\t\t\tthis.$refs.search.focus()\n\t\t},\n\n\t\t/**\n\t\t * Update the current skin tone by the result of the color picker\n\t\t *\n\t\t * @param {string} color Color set\n\t\t */\n\t\tonChangeSkinTone(color) {\n\t\t\tconst index = this.skinTonePalette.findIndex((tone) => tone.color.toLowerCase() === color.toLowerCase())\n\t\t\tif (index > -1) {\n\t\t\t\tthis.currentSkinTone = index + 1\n\t\t\t\tthis.currentColor = this.skinTonePalette[index]\n\t\t\t\tsetCurrentSkinTone(this.currentSkinTone)\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\tthis.$refs.search.focus()\n\t\t},\n\n\t\tafterHide() {\n\t\t\t// Manually return focus to the trigger button, as we disabled focus-trap\n\t\t\t// But only if there is no focus target outside the picker, for example, input element that received focus by click closing the emoji picker\n\t\t\tif (!document.activeElement || this.$refs.picker.$el.contains(document.activeElement) || !isFocusable(document.activeElement)) {\n\t\t\t\tthis.$refs.popover.$el.querySelector('button, [role=\"button\"]')?.focus()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Manually handle Tab navigation skipping emoji buttons.\n\t\t * Navigation over emojis is handled by Arrow keys.\n\t\t *\n\t\t * @param {KeyboardEvent} event - Keyboard event\n\t\t */\n\t\thandleTabNavigationSkippingEmojis(event) {\n\t\t\tconst current = event.target\n\t\t\tconst focusable = Array.from(this.$refs.picker.$el.querySelectorAll('button:not(.emoji-mart-emoji), input'))\n\t\t\tif (!event.shiftKey) {\n\t\t\t\tconst nextNode = focusable.find((node) => current.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING) || focusable[0]\n\t\t\t\tnextNode.focus()\n\t\t\t} else {\n\t\t\t\tconst prevNode = focusable.findLast((node) => current.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_PRECEDING) || focusable.at(-1)\n\t\t\t\tprevNode.focus()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Handle arrow navigation via <Picker>'s handlers with scroll bug fix\n\t\t *\n\t\t * @param {'onArrowLeft' | 'onArrowRight' | 'onArrowDown' | 'onArrowUp'} originalHandlerName - Picker's arrow keydown handler name\n\t\t * @param {KeyboardEvent} event - Keyboard event\n\t\t */\n\t\tasync callPickerArrowHandlerWithScrollFix(originalHandlerName, event) {\n\t\t\t// Call the original handler\n\t\t\t// See: https://github.com/serebrov/emoji-mart-vue/blob/a1ea72673a111cce78dc8caad8bc9ea3e02ad5bd/src/components/Picker.vue#L29\n\t\t\t// TODO: expose these methods via slot props in upstream library\n\t\t\tthis.$refs.picker[originalHandlerName](event)\n\n\t\t\t// Wait until emoji-mart-vue-fast scrolls\n\t\t\tawait this.$nextTick()\n\n\t\t\t// Scroll position is incorrect after emoji-mart-vue-fast scrolls...\n\t\t\t// It calculates scroll incorrectly.\n\t\t\t// It doesn't take into account, that emojis are wrapped into categories sections\n\t\t\t// See: https://github.com/serebrov/emoji-mart-vue/blob/a1ea72673a111cce78dc8caad8bc9ea3e02ad5bd/src/utils/picker.js#L244\n\t\t\t// Now scroll to the correct position\n\t\t\t// TODO: fix in upstream\n\t\t\tconst selectedEmoji = this.$refs.picker.$el.querySelector('.emoji-mart-emoji-selected')\n\t\t\tselectedEmoji?.scrollIntoView({\n\t\t\t\tblock: 'center',\n\t\t\t\tinline: 'center',\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@use \"sass:meta\";\n\n.nc-emoji-picker-container :deep() {\n\t@include meta.load-css('emoji-mart-vue-fast/css/emoji-mart.css');\n}\n\n.nc-emoji-picker-container :deep(.emoji-mart) {\n\tbackground-color: var(--color-main-background) !important;\n\tborder: 0;\n\tcolor: var(--color-main-text) !important;\n\n\t// Reset emoji-mart styles\n\tbutton {\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tfont-size: inherit;\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-anchors {\n\t\tpadding-block: 0;\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t}\n\n\t.emoji-mart-anchor {\n\t\tborder-radius: 0;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\t\theight: var(--clickable-area-small);\n\t\tmin-width: var(--clickable-area-small);\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 2px solid var(--color-primary-element) !important;\n\t\t\toutline-offset: -2px;\n\t\t}\n\n\t\t// Icon\n\t\tdiv {\n\t\t\tdisplay: grid;\n\t\t\tplace-content: center;\n\t\t}\n\t}\n\n\t.emoji-mart-scroll {\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: 0 calc(2 * var(--default-grid-baseline));\n\t}\n\n\t.emoji-mart-category {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(8, 1fr);\n\t\tjustify-items: stretch;\n\n\t\t&.emoji-mart-no-results {\n\t\t\tgrid-template-columns: 1fr;\n\t\t\tfont-size: inherit;\n\t\t\tcolor: var(--color-text-maxcontrast) !important;\n\t\t}\n\t}\n\n\t/* Label element in the section grid */\n\tdiv.emoji-mart-category-label {\n\t\tgrid-column: span 8;\n\t\tjustify-self: stretch;\n\t}\n\n\t/* An actual heading inside the element */\n\th3.emoji-mart-category-label  {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t// Inline with buttons\n\t\theight: var(--default-clickable-area);\n\t\tmargin: 0;\n\t\t// Inline with input\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: 0;\n\t\tuser-select: none;\n\t}\n\n\t.emoji-mart-emoji {\n\t\taspect-ratio: 1 / 1;\n\t\ttext-align: center;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\n\t\t&:hover,\n\t\t&:focus-visible,\n\t\t&.emoji-mart-emoji-selected {\n\t\t\tbackground-color: var(--color-background-hover) !important;\n\t\t\tborder: none;\n\t\t\tborder-radius: var(--border-radius-element, var(--border-radius-pill));\n\t\t\tbox-shadow: none !important;\n\t\t\toutline: 2px solid var(--color-primary-element) !important;\n\t\t\toutline-offset: -2px;\n\t\t}\n\n\t\t&::before {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\tspan {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n\n.search__wrapper {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n\talign-items: end;\n\tpadding-block: var(--default-grid-baseline);\n\tpadding-inline: calc(2 * var(--default-grid-baseline));\n}\n\n.row-selected {\n\tbutton, span {\n\t\tvertical-align: middle;\n\t}\n}\n\n.emoji-delete {\n\tvertical-align: top;\n\tmargin-left: -21px;\n\tmargin-top: -3px;\n}\n</style>\n"],"names":["_sfc_main","t","Color","Emoji","NcButton","NcColorPicker","NcPopover","NcTextField","Picker","EmojiIndex","data","getCurrentSkinTone","useTrapStackControl","setCurrentSkinTone","isFocusable"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/chunks/{NcFilePicker-BL6iajt2.cjs → NcFilePicker-Cdc1TsXy.cjs}

@@ -1,13 +1,13 @@
-require('../assets/NcFilePicker-BokX813z.css');
+require('../assets/NcFilePicker-BjFpDu4R.css');
 "use strict";
 const Vue = require("vue");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
-const NcActionButton = require("./NcActionButton-CiYel4_C.cjs");
+const NcActionButton = require("./NcActionButton-B1jvJWjl.cjs");
 const Components_NcActionCaption = require("../Components/NcActionCaption.cjs");
-const NcActions = require("./NcActions-D51W1X9v.cjs");
+const NcActions = require("./NcActions-H0GXWVPU.cjs");
 const NcIconSvgWrapper = require("./NcIconSvgWrapper-Bbl4kXZI.cjs");
 const Components_NcLoadingIcon = require("../Components/NcLoadingIcon.cjs");
-const _l10n = require("./_l10n-skrZri3h.cjs");
+const _l10n = require("./_l10n-Be-gO5QO.cjs");
 const _sfc_main$3 = {
   name: "FolderUploadIcon",
   emits: ["click"],
@@ -107,7 +107,7 @@ var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   null
 );
 const IconUpload = __component__$1.exports;
-_l10n.register(_l10n.t40);
+_l10n.register(_l10n.t41);
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "NcFilePicker",
   props: {
@@ -161,7 +161,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     return { __sfc: true, props, emit, formElement, inputElement, currentLabel, canUploadFolders, triggerPickFiles, onPick, reset, IconFolderUpload, IconPlus, IconUpload, NcActionButton: NcActionButton.NcActionButton, NcActionCaption: Components_NcActionCaption, NcActions: NcActions.NcActions, NcIconSvgWrapper: NcIconSvgWrapper.NcIconSvgWrapper, NcLoadingIcon: Components_NcLoadingIcon, t: _l10n.t };
   }
 });
-const filePicker = "_filePicker_KfdBJ";
+const filePicker = "_filePicker_2NMRS";
 const style0 = {
   filePicker
 };
@@ -206,4 +206,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcFilePicker = __component__.exports;
 exports.NcFilePicker = NcFilePicker;
-//# sourceMappingURL=NcFilePicker-BL6iajt2.cjs.map
+//# sourceMappingURL=NcFilePicker-Cdc1TsXy.cjs.map

package/dist/chunks/{NcFilePicker-BL6iajt2.cjs.map → NcFilePicker-Cdc1TsXy.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcFilePicker-BL6iajt2.cjs","sources":["../../node_modules/vue-material-design-icons/FolderUpload.vue","../../node_modules/vue-material-design-icons/Plus.vue","../../node_modules/vue-material-design-icons/Upload.vue","../../src/components/NcFilePicker/NcFilePicker.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon folder-upload-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M20,6A2,2 0 0,1 22,8V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4H10L12,6H20M10.75,13H14V17H16V13H19.25L15,8.75\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"FolderUploadIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon plus-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"PlusIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon upload-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"UploadIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, ref } from 'vue'\nimport IconFolderUpload from 'vue-material-design-icons/FolderUpload.vue'\nimport IconPlus from 'vue-material-design-icons/Plus.vue'\nimport IconUpload from 'vue-material-design-icons/Upload.vue'\nimport NcActionButton from '../NcActionButton/NcActionButton.vue'\nimport NcActionCaption from '../NcActionCaption/NcActionCaption.vue'\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/NcLoadingIcon.vue'\nimport { t } from '../../l10n.js'\n\nexport interface FilePickerItem {\n\t/**\n\t * SVG icon (as string) for the action\n\t */\n\ticonSvg: string\n\t/**\n\t * Label of the action\n\t */\n\tlabel: string\n\t/**\n\t * Callback when the action is clicked\n\t */\n\tonClick: () => void\n}\n\nexport interface FilePickerItemGroup {\n\t/**\n\t * Caption for the action group\n\t */\n\tcaption: string\n\t/**\n\t * Actions within this group\n\t */\n\tactions: FilePickerItem[]\n}\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * File types to accept\n\t */\n\taccept?: string[]\n\n\t/**\n\t * Optional menu caption to be shown above the actions\n\t */\n\tactionCaption?: string\n\n\t/**\n\t * Additional actions to be shown within the picker menu\n\t */\n\tactions?: FilePickerItem[] | FilePickerItemGroup[]\n\n\t/**\n\t * Allow picking a directory\n\t */\n\tdirectory?: boolean\n\n\t/**\n\t * Disable picking files and only allow picking a directory\n\t */\n\tdirectoryOnly?: boolean\n\n\t/**\n\t * Disabled state of the picker\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * If set then the label is only used for accessibility but not shown visually\n\t */\n\ticonOnly?: boolean\n\n\t/**\n\t * Label of the picker\n\t *\n\t * @default 'Pick file' or 'Pick files' depending on `multiple`\n\t */\n\tlabel?: string\n\n\t/**\n\t * If set then the picker will be set into a loading state.\n\t * This means the picker is disabled, a loading spinner is shown and the label is adjusted.\n\t */\n\tloading?: boolean\n\n\t/**\n\t * Can the user pick multiple files.\n\t * This is ignored when picking folder (by browser limitations).\n\t */\n\tmultiple?: boolean\n\n\t/**\n\t * The variant of the button\n\t */\n\tvariant?: 'primary' | 'secondary' | 'tertiary'\n}>(), {\n\tactions: () => [],\n\taccept: undefined,\n\tactionCaption: '',\n\tlabel: undefined,\n\tvariant: 'primary',\n})\n\nconst emit = defineEmits<{\n\t(event: 'pick', files: File[]): void\n}>()\n\ndefineExpose({\n\treset,\n})\n\nconst formElement = ref<HTMLFormElement | null>(null)\nconst inputElement = ref<HTMLInputElement | null>(null)\n\n/**\n * The current label to be used as menu name and accessible name of the picker.\n */\nconst currentLabel = computed(() => {\n\tif (props.loading) {\n\t\treturn t('Uploading …')\n\t} else if (props.label) {\n\t\treturn props.label\n\t} else if (props.directoryOnly) {\n\t\treturn t('Pick folder')\n\t}\n\treturn props.multiple ? t('Pick files') : t('Pick file')\n})\n\n/**\n * Check whether the current browser supports uploading directories\n * Hint: This does not check if the current connection supports this, as some browsers require a secure context!\n */\nconst canUploadFolders = computed(() => {\n\treturn (props.directory || props.directoryOnly) && 'webkitdirectory' in HTMLInputElement.prototype\n})\n\n/**\n * Trigger file picker\n *\n * @param uploadFolders - Whether to upload folders or files\n */\nfunction triggerPickFiles(uploadFolders: boolean) {\n\t// Without reset selecting the same file doesn't trigger the change event\n\treset()\n\n\t// Only if the browser supports picking folders and the user selected \"pick folder\" we set the file input to directory picking.\n\tif (canUploadFolders.value) {\n\t\tinputElement.value!.webkitdirectory = uploadFolders\n\t}\n\n\t// Wait for the reset and the `webkitdirectory` to be dispatched in DOM\n\tnextTick(() => inputElement.value!.click())\n}\n\n/**\n * Handle picking some local files\n */\nfunction onPick() {\n\tconst files = inputElement.value?.files ? Array.from(inputElement.value.files) : []\n\temit('pick', files)\n}\n\n/**\n * Reset the picker state of the currently selected files.\n */\nfunction reset() {\n\tformElement.value!.reset()\n}\n</script>\n\n<template>\n\t<form\n\t\tref=\"formElement\"\n\t\t:class=\"$style.filePicker\">\n\t\t<NcActions\n\t\t\t:aria-label=\"currentLabel\"\n\t\t\t:disabled=\"disabled || loading\"\n\t\t\t:menu-name=\"iconOnly ? undefined : currentLabel\"\n\t\t\t:force-name=\"!iconOnly\"\n\t\t\t:variant=\"variant\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Optional custom icon for the picker menu -->\n\t\t\t\t<slot v-if=\"!loading\" name=\"icon\">\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</slot>\n\t\t\t\t<NcLoadingIcon v-else />\n\t\t\t</template>\n\n\t\t\t<NcActionCaption v-if=\"actionCaption\" :name=\"actionCaption\" />\n\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"!directoryOnly\"\n\t\t\t\tclose-after-click\n\t\t\t\t@click=\"triggerPickFiles(false)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconUpload :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ (canUploadFolders || !!$slots.actions) ? (multiple ? t('Upload files') : t('Upload file')) : currentLabel }}\n\t\t\t\t<!-- If this is not the only action in the NcActions this is a menu entry and we need a generic name - otherwise this will be a single button where we need to apply the label -->\n\t\t\t</NcActionButton>\n\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"canUploadFolders\"\n\t\t\t\tclose-after-click\n\t\t\t\t@click=\"triggerPickFiles(true)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFolderUpload style=\"color: var(--color-primary-element)\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ (!directoryOnly || !!$slots.actions) ? t('Upload folder') : currentLabel }}\n\t\t\t\t<!-- If this is not the only action in the NcActions this is a menu entry and we need a generic name - otherwise this will be a single button where we need to apply the label -->\n\t\t\t</NcActionButton>\n\n\t\t\t<template v-for=\"group of actions\">\n\t\t\t\t<NcActionCaption\n\t\t\t\t\tv-if=\"group.caption\"\n\t\t\t\t\t:key=\"group.caption\"\n\t\t\t\t\t:name=\"group.caption\" />\n\n\t\t\t\t<NcActionButton\n\t\t\t\t\tv-for=\"action of group.actions ?? [group]\"\n\t\t\t\t\t:key=\"action.label\"\n\t\t\t\t\tclose-after-click\n\t\t\t\t\t@click=\"action.onClick\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :svg=\"action.iconSvg\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t{{ action.label }}\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcActions>\n\n\t\t<!-- Hidden files picker input - also hidden for accessibility as otherwise such users also loose the ability to pick files -->\n\t\t<input\n\t\t\tref=\"inputElement\"\n\t\t\t:accept=\"accept?.join(', ')\"\n\t\t\taria-hidden=\"true\"\n\t\t\tclass=\"hidden-visually\"\n\t\t\t:multiple=\"multiple\"\n\t\t\ttype=\"file\"\n\t\t\t@change=\"onPick\">\n\n\t\t<!-- @slot Optional content to be shown in the picker. This can be used e.g. for a progress bar or similar. -->\n\t\t<slot />\n\t</form>\n</template>\n\n<style module>\n.filePicker {\n\tdisplay: inline-flex;\n\talign-items: center;\n\theight: var(--default-clickable-area);\n}\n</style>\n\n<docs>\nThis component allows to pick local files (or directories) which can be used to upload them to Nextcloud or directly process them in the browser.\n\n### Exposed methods\n\n- `function reset(): void`\n  This method allows to reset the internal state of the file picker to clear the current selection\n\n### Example\n\n```vue\n<template>\n\t<div>\n\t\t<div class=\"wrapper\">\n\t\t\t<NcFilePicker ref=\"picker\"\n\t\t\t\tdirectory\n\t\t\t\t@pick=\"selectedFiles = $event\" />\n\n\t\t\t<NcButton variant=\"tertiary\"\n\t\t\t\t@click=\"clearPicker\">\n\t\t\t\tClear\n\t\t\t</NcButton>\n\t\t</div>\n\n\t\t<h3>Selected files:</h3>\n\t\t<ul>\n\t\t\t<li v-for=\"file in selectedFiles\" :key=\"file.name\">\n\t\t\t\t{{ file.webkitRelativePath || file.name }}\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tselectedFiles: [],\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\t/**\n\t\t\t * This will clear the selected files from the picker.\n\t\t\t */\n\t\t\tclearPicker() {\n\t\t\t\tthis.$refs.picker.reset()\n\t\t\t},\n\t\t},\n\t}\n</script>\n<style scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 10px;\n}\n</style>\n```\n</docs>\n"],"names":["_sfc_main","ref","computed","t","nextTick"],"mappings":";;;;;;;;;AAoBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;AChBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;AChBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC8EA,WAAa;AAAA,MACZ;AAAA,IAAA,CACA;AAED,UAAM,cAAcC,IAAAA,IAA4B,IAAI;AACpD,UAAM,eAAeA,IAAAA,IAA6B,IAAI;AAKtD,UAAM,eAAeC,IAAAA,SAAS,MAAM;AACnC,UAAI,MAAM,SAAS;AAClB,eAAOC,MAAAA,EAAE,aAAa;AAAA,MACvB,WAAW,MAAM,OAAO;AACvB,eAAO,MAAM;AAAA,MACd,WAAW,MAAM,eAAe;AAC/B,eAAOA,MAAAA,EAAE,aAAa;AAAA,MACvB;AACA,aAAO,MAAM,WAAWA,MAAAA,EAAE,YAAY,IAAIA,MAAAA,EAAE,WAAW;AAAA,IACxD,CAAC;AAMD,UAAM,mBAAmBD,IAAAA,SAAS,MAAM;AACvC,cAAQ,MAAM,aAAa,MAAM,kBAAkB,qBAAqB,iBAAiB;AAAA,IAC1F,CAAC;AAOD,aAAS,iBAAiB,eAAwB;AAEjD,YAAA;AAGA,UAAI,iBAAiB,OAAO;AAC3B,qBAAa,MAAO,kBAAkB;AAAA,MACvC;AAGAE,UAAAA,SAAS,MAAM,aAAa,MAAO,MAAA,CAAO;AAAA,IAC3C;AAKA,aAAS,SAAS;AACjB,YAAM,QAAQ,aAAa,OAAO,QAAQ,MAAM,KAAK,aAAa,MAAM,KAAK,IAAI,CAAA;AACjF,WAAK,QAAQ,KAAK;AAAA,IACnB;AAKA,aAAS,QAAQ;AAChB,kBAAY,MAAO,MAAA;AAAA,IACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0,1,2]}
+{"version":3,"file":"NcFilePicker-Cdc1TsXy.cjs","sources":["../../node_modules/vue-material-design-icons/FolderUpload.vue","../../node_modules/vue-material-design-icons/Plus.vue","../../node_modules/vue-material-design-icons/Upload.vue","../../src/components/NcFilePicker/NcFilePicker.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon folder-upload-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M20,6A2,2 0 0,1 22,8V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4H10L12,6H20M10.75,13H14V17H16V13H19.25L15,8.75\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"FolderUploadIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon plus-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"PlusIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon upload-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"UploadIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, ref } from 'vue'\nimport IconFolderUpload from 'vue-material-design-icons/FolderUpload.vue'\nimport IconPlus from 'vue-material-design-icons/Plus.vue'\nimport IconUpload from 'vue-material-design-icons/Upload.vue'\nimport NcActionButton from '../NcActionButton/NcActionButton.vue'\nimport NcActionCaption from '../NcActionCaption/NcActionCaption.vue'\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/NcLoadingIcon.vue'\nimport { t } from '../../l10n.js'\n\nexport interface FilePickerItem {\n\t/**\n\t * SVG icon (as string) for the action\n\t */\n\ticonSvg: string\n\t/**\n\t * Label of the action\n\t */\n\tlabel: string\n\t/**\n\t * Callback when the action is clicked\n\t */\n\tonClick: () => void\n}\n\nexport interface FilePickerItemGroup {\n\t/**\n\t * Caption for the action group\n\t */\n\tcaption: string\n\t/**\n\t * Actions within this group\n\t */\n\tactions: FilePickerItem[]\n}\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * File types to accept\n\t */\n\taccept?: string[]\n\n\t/**\n\t * Optional menu caption to be shown above the actions\n\t */\n\tactionCaption?: string\n\n\t/**\n\t * Additional actions to be shown within the picker menu\n\t */\n\tactions?: FilePickerItem[] | FilePickerItemGroup[]\n\n\t/**\n\t * Allow picking a directory\n\t */\n\tdirectory?: boolean\n\n\t/**\n\t * Disable picking files and only allow picking a directory\n\t */\n\tdirectoryOnly?: boolean\n\n\t/**\n\t * Disabled state of the picker\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * If set then the label is only used for accessibility but not shown visually\n\t */\n\ticonOnly?: boolean\n\n\t/**\n\t * Label of the picker\n\t *\n\t * @default 'Pick file' or 'Pick files' depending on `multiple`\n\t */\n\tlabel?: string\n\n\t/**\n\t * If set then the picker will be set into a loading state.\n\t * This means the picker is disabled, a loading spinner is shown and the label is adjusted.\n\t */\n\tloading?: boolean\n\n\t/**\n\t * Can the user pick multiple files.\n\t * This is ignored when picking folder (by browser limitations).\n\t */\n\tmultiple?: boolean\n\n\t/**\n\t * The variant of the button\n\t */\n\tvariant?: 'primary' | 'secondary' | 'tertiary'\n}>(), {\n\tactions: () => [],\n\taccept: undefined,\n\tactionCaption: '',\n\tlabel: undefined,\n\tvariant: 'primary',\n})\n\nconst emit = defineEmits<{\n\t(event: 'pick', files: File[]): void\n}>()\n\ndefineExpose({\n\treset,\n})\n\nconst formElement = ref<HTMLFormElement | null>(null)\nconst inputElement = ref<HTMLInputElement | null>(null)\n\n/**\n * The current label to be used as menu name and accessible name of the picker.\n */\nconst currentLabel = computed(() => {\n\tif (props.loading) {\n\t\treturn t('Uploading …')\n\t} else if (props.label) {\n\t\treturn props.label\n\t} else if (props.directoryOnly) {\n\t\treturn t('Pick folder')\n\t}\n\treturn props.multiple ? t('Pick files') : t('Pick file')\n})\n\n/**\n * Check whether the current browser supports uploading directories\n * Hint: This does not check if the current connection supports this, as some browsers require a secure context!\n */\nconst canUploadFolders = computed(() => {\n\treturn (props.directory || props.directoryOnly) && 'webkitdirectory' in HTMLInputElement.prototype\n})\n\n/**\n * Trigger file picker\n *\n * @param uploadFolders - Whether to upload folders or files\n */\nfunction triggerPickFiles(uploadFolders: boolean) {\n\t// Without reset selecting the same file doesn't trigger the change event\n\treset()\n\n\t// Only if the browser supports picking folders and the user selected \"pick folder\" we set the file input to directory picking.\n\tif (canUploadFolders.value) {\n\t\tinputElement.value!.webkitdirectory = uploadFolders\n\t}\n\n\t// Wait for the reset and the `webkitdirectory` to be dispatched in DOM\n\tnextTick(() => inputElement.value!.click())\n}\n\n/**\n * Handle picking some local files\n */\nfunction onPick() {\n\tconst files = inputElement.value?.files ? Array.from(inputElement.value.files) : []\n\temit('pick', files)\n}\n\n/**\n * Reset the picker state of the currently selected files.\n */\nfunction reset() {\n\tformElement.value!.reset()\n}\n</script>\n\n<template>\n\t<form\n\t\tref=\"formElement\"\n\t\t:class=\"$style.filePicker\">\n\t\t<NcActions\n\t\t\t:aria-label=\"currentLabel\"\n\t\t\t:disabled=\"disabled || loading\"\n\t\t\t:menu-name=\"iconOnly ? undefined : currentLabel\"\n\t\t\t:force-name=\"!iconOnly\"\n\t\t\t:variant=\"variant\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Optional custom icon for the picker menu -->\n\t\t\t\t<slot v-if=\"!loading\" name=\"icon\">\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</slot>\n\t\t\t\t<NcLoadingIcon v-else />\n\t\t\t</template>\n\n\t\t\t<NcActionCaption v-if=\"actionCaption\" :name=\"actionCaption\" />\n\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"!directoryOnly\"\n\t\t\t\tclose-after-click\n\t\t\t\t@click=\"triggerPickFiles(false)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconUpload :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ (canUploadFolders || !!$slots.actions) ? (multiple ? t('Upload files') : t('Upload file')) : currentLabel }}\n\t\t\t\t<!-- If this is not the only action in the NcActions this is a menu entry and we need a generic name - otherwise this will be a single button where we need to apply the label -->\n\t\t\t</NcActionButton>\n\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"canUploadFolders\"\n\t\t\t\tclose-after-click\n\t\t\t\t@click=\"triggerPickFiles(true)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFolderUpload style=\"color: var(--color-primary-element)\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ (!directoryOnly || !!$slots.actions) ? t('Upload folder') : currentLabel }}\n\t\t\t\t<!-- If this is not the only action in the NcActions this is a menu entry and we need a generic name - otherwise this will be a single button where we need to apply the label -->\n\t\t\t</NcActionButton>\n\n\t\t\t<template v-for=\"group of actions\">\n\t\t\t\t<NcActionCaption\n\t\t\t\t\tv-if=\"group.caption\"\n\t\t\t\t\t:key=\"group.caption\"\n\t\t\t\t\t:name=\"group.caption\" />\n\n\t\t\t\t<NcActionButton\n\t\t\t\t\tv-for=\"action of group.actions ?? [group]\"\n\t\t\t\t\t:key=\"action.label\"\n\t\t\t\t\tclose-after-click\n\t\t\t\t\t@click=\"action.onClick\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :svg=\"action.iconSvg\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t{{ action.label }}\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcActions>\n\n\t\t<!-- Hidden files picker input - also hidden for accessibility as otherwise such users also loose the ability to pick files -->\n\t\t<input\n\t\t\tref=\"inputElement\"\n\t\t\t:accept=\"accept?.join(', ')\"\n\t\t\taria-hidden=\"true\"\n\t\t\tclass=\"hidden-visually\"\n\t\t\t:multiple=\"multiple\"\n\t\t\ttype=\"file\"\n\t\t\t@change=\"onPick\">\n\n\t\t<!-- @slot Optional content to be shown in the picker. This can be used e.g. for a progress bar or similar. -->\n\t\t<slot />\n\t</form>\n</template>\n\n<style module>\n.filePicker {\n\tdisplay: inline-flex;\n\talign-items: center;\n\theight: var(--default-clickable-area);\n}\n</style>\n\n<docs>\nThis component allows to pick local files (or directories) which can be used to upload them to Nextcloud or directly process them in the browser.\n\n### Exposed methods\n\n- `function reset(): void`\n  This method allows to reset the internal state of the file picker to clear the current selection\n\n### Example\n\n```vue\n<template>\n\t<div>\n\t\t<div class=\"wrapper\">\n\t\t\t<NcFilePicker ref=\"picker\"\n\t\t\t\tdirectory\n\t\t\t\t@pick=\"selectedFiles = $event\" />\n\n\t\t\t<NcButton variant=\"tertiary\"\n\t\t\t\t@click=\"clearPicker\">\n\t\t\t\tClear\n\t\t\t</NcButton>\n\t\t</div>\n\n\t\t<h3>Selected files:</h3>\n\t\t<ul>\n\t\t\t<li v-for=\"file in selectedFiles\" :key=\"file.name\">\n\t\t\t\t{{ file.webkitRelativePath || file.name }}\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tselectedFiles: [],\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\t/**\n\t\t\t * This will clear the selected files from the picker.\n\t\t\t */\n\t\t\tclearPicker() {\n\t\t\t\tthis.$refs.picker.reset()\n\t\t\t},\n\t\t},\n\t}\n</script>\n<style scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 10px;\n}\n</style>\n```\n</docs>\n"],"names":["_sfc_main","ref","computed","t","nextTick"],"mappings":";;;;;;;;;AAoBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;AChBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;AChBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC8EA,WAAa;AAAA,MACZ;AAAA,IAAA,CACA;AAED,UAAM,cAAcC,IAAAA,IAA4B,IAAI;AACpD,UAAM,eAAeA,IAAAA,IAA6B,IAAI;AAKtD,UAAM,eAAeC,IAAAA,SAAS,MAAM;AACnC,UAAI,MAAM,SAAS;AAClB,eAAOC,MAAAA,EAAE,aAAa;AAAA,MACvB,WAAW,MAAM,OAAO;AACvB,eAAO,MAAM;AAAA,MACd,WAAW,MAAM,eAAe;AAC/B,eAAOA,MAAAA,EAAE,aAAa;AAAA,MACvB;AACA,aAAO,MAAM,WAAWA,MAAAA,EAAE,YAAY,IAAIA,MAAAA,EAAE,WAAW;AAAA,IACxD,CAAC;AAMD,UAAM,mBAAmBD,IAAAA,SAAS,MAAM;AACvC,cAAQ,MAAM,aAAa,MAAM,kBAAkB,qBAAqB,iBAAiB;AAAA,IAC1F,CAAC;AAOD,aAAS,iBAAiB,eAAwB;AAEjD,YAAA;AAGA,UAAI,iBAAiB,OAAO;AAC3B,qBAAa,MAAO,kBAAkB;AAAA,MACvC;AAGAE,UAAAA,SAAS,MAAM,aAAa,MAAO,MAAA,CAAO;AAAA,IAC3C;AAKA,aAAS,SAAS;AACjB,YAAM,QAAQ,aAAa,OAAO,QAAQ,MAAM,KAAK,aAAa,MAAM,KAAK,IAAI,CAAA;AACjF,WAAK,QAAQ,KAAK;AAAA,IACnB;AAKA,aAAS,QAAQ;AAChB,kBAAY,MAAO,MAAA;AAAA,IACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0,1,2]}

package/dist/chunks/{NcFilePicker-Ck9o-ia3.mjs → NcFilePicker-Dg6UqMN1.mjs}

@@ -1,12 +1,12 @@
-import '../assets/NcFilePicker-BokX813z.css';
+import '../assets/NcFilePicker-BjFpDu4R.css';
 import { defineComponent, ref, computed, nextTick } from "vue";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
-import { N as NcActionButton } from "./NcActionButton-K4jUGMlW.mjs";
+import { N as NcActionButton } from "./NcActionButton-D7uypboC.mjs";
 import NcActionCaption from "../Components/NcActionCaption.mjs";
-import { N as NcActions } from "./NcActions-DbPerbGE.mjs";
+import { N as NcActions } from "./NcActions-CX1MSord.mjs";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-Bui9PhAS.mjs";
 import NcLoadingIcon from "../Components/NcLoadingIcon.mjs";
-import { r as register, L as t40, a as t } from "./_l10n-DVz9Qdzk.mjs";
+import { r as register, M as t41, a as t } from "./_l10n-CAnZaLWU.mjs";
 const _sfc_main$3 = {
   name: "FolderUploadIcon",
   emits: ["click"],
@@ -106,7 +106,7 @@ var __component__$1 = /* @__PURE__ */ normalizeComponent(
   null
 );
 const IconUpload = __component__$1.exports;
-register(t40);
+register(t41);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcFilePicker",
   props: {
@@ -160,7 +160,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return { __sfc: true, props, emit, formElement, inputElement, currentLabel, canUploadFolders, triggerPickFiles, onPick, reset, IconFolderUpload, IconPlus, IconUpload, NcActionButton, NcActionCaption, NcActions, NcIconSvgWrapper, NcLoadingIcon, t };
   }
 });
-const filePicker = "_filePicker_KfdBJ";
+const filePicker = "_filePicker_2NMRS";
 const style0 = {
   filePicker
 };
@@ -207,4 +207,4 @@ const NcFilePicker = __component__.exports;
 export {
   NcFilePicker as N
 };
-//# sourceMappingURL=NcFilePicker-Ck9o-ia3.mjs.map
+//# sourceMappingURL=NcFilePicker-Dg6UqMN1.mjs.map

package/dist/chunks/{NcFilePicker-Ck9o-ia3.mjs.map → NcFilePicker-Dg6UqMN1.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcFilePicker-Ck9o-ia3.mjs","sources":["../../node_modules/vue-material-design-icons/FolderUpload.vue","../../node_modules/vue-material-design-icons/Plus.vue","../../node_modules/vue-material-design-icons/Upload.vue","../../src/components/NcFilePicker/NcFilePicker.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon folder-upload-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M20,6A2,2 0 0,1 22,8V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4H10L12,6H20M10.75,13H14V17H16V13H19.25L15,8.75\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"FolderUploadIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon plus-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"PlusIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon upload-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"UploadIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, ref } from 'vue'\nimport IconFolderUpload from 'vue-material-design-icons/FolderUpload.vue'\nimport IconPlus from 'vue-material-design-icons/Plus.vue'\nimport IconUpload from 'vue-material-design-icons/Upload.vue'\nimport NcActionButton from '../NcActionButton/NcActionButton.vue'\nimport NcActionCaption from '../NcActionCaption/NcActionCaption.vue'\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/NcLoadingIcon.vue'\nimport { t } from '../../l10n.js'\n\nexport interface FilePickerItem {\n\t/**\n\t * SVG icon (as string) for the action\n\t */\n\ticonSvg: string\n\t/**\n\t * Label of the action\n\t */\n\tlabel: string\n\t/**\n\t * Callback when the action is clicked\n\t */\n\tonClick: () => void\n}\n\nexport interface FilePickerItemGroup {\n\t/**\n\t * Caption for the action group\n\t */\n\tcaption: string\n\t/**\n\t * Actions within this group\n\t */\n\tactions: FilePickerItem[]\n}\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * File types to accept\n\t */\n\taccept?: string[]\n\n\t/**\n\t * Optional menu caption to be shown above the actions\n\t */\n\tactionCaption?: string\n\n\t/**\n\t * Additional actions to be shown within the picker menu\n\t */\n\tactions?: FilePickerItem[] | FilePickerItemGroup[]\n\n\t/**\n\t * Allow picking a directory\n\t */\n\tdirectory?: boolean\n\n\t/**\n\t * Disable picking files and only allow picking a directory\n\t */\n\tdirectoryOnly?: boolean\n\n\t/**\n\t * Disabled state of the picker\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * If set then the label is only used for accessibility but not shown visually\n\t */\n\ticonOnly?: boolean\n\n\t/**\n\t * Label of the picker\n\t *\n\t * @default 'Pick file' or 'Pick files' depending on `multiple`\n\t */\n\tlabel?: string\n\n\t/**\n\t * If set then the picker will be set into a loading state.\n\t * This means the picker is disabled, a loading spinner is shown and the label is adjusted.\n\t */\n\tloading?: boolean\n\n\t/**\n\t * Can the user pick multiple files.\n\t * This is ignored when picking folder (by browser limitations).\n\t */\n\tmultiple?: boolean\n\n\t/**\n\t * The variant of the button\n\t */\n\tvariant?: 'primary' | 'secondary' | 'tertiary'\n}>(), {\n\tactions: () => [],\n\taccept: undefined,\n\tactionCaption: '',\n\tlabel: undefined,\n\tvariant: 'primary',\n})\n\nconst emit = defineEmits<{\n\t(event: 'pick', files: File[]): void\n}>()\n\ndefineExpose({\n\treset,\n})\n\nconst formElement = ref<HTMLFormElement | null>(null)\nconst inputElement = ref<HTMLInputElement | null>(null)\n\n/**\n * The current label to be used as menu name and accessible name of the picker.\n */\nconst currentLabel = computed(() => {\n\tif (props.loading) {\n\t\treturn t('Uploading …')\n\t} else if (props.label) {\n\t\treturn props.label\n\t} else if (props.directoryOnly) {\n\t\treturn t('Pick folder')\n\t}\n\treturn props.multiple ? t('Pick files') : t('Pick file')\n})\n\n/**\n * Check whether the current browser supports uploading directories\n * Hint: This does not check if the current connection supports this, as some browsers require a secure context!\n */\nconst canUploadFolders = computed(() => {\n\treturn (props.directory || props.directoryOnly) && 'webkitdirectory' in HTMLInputElement.prototype\n})\n\n/**\n * Trigger file picker\n *\n * @param uploadFolders - Whether to upload folders or files\n */\nfunction triggerPickFiles(uploadFolders: boolean) {\n\t// Without reset selecting the same file doesn't trigger the change event\n\treset()\n\n\t// Only if the browser supports picking folders and the user selected \"pick folder\" we set the file input to directory picking.\n\tif (canUploadFolders.value) {\n\t\tinputElement.value!.webkitdirectory = uploadFolders\n\t}\n\n\t// Wait for the reset and the `webkitdirectory` to be dispatched in DOM\n\tnextTick(() => inputElement.value!.click())\n}\n\n/**\n * Handle picking some local files\n */\nfunction onPick() {\n\tconst files = inputElement.value?.files ? Array.from(inputElement.value.files) : []\n\temit('pick', files)\n}\n\n/**\n * Reset the picker state of the currently selected files.\n */\nfunction reset() {\n\tformElement.value!.reset()\n}\n</script>\n\n<template>\n\t<form\n\t\tref=\"formElement\"\n\t\t:class=\"$style.filePicker\">\n\t\t<NcActions\n\t\t\t:aria-label=\"currentLabel\"\n\t\t\t:disabled=\"disabled || loading\"\n\t\t\t:menu-name=\"iconOnly ? undefined : currentLabel\"\n\t\t\t:force-name=\"!iconOnly\"\n\t\t\t:variant=\"variant\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Optional custom icon for the picker menu -->\n\t\t\t\t<slot v-if=\"!loading\" name=\"icon\">\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</slot>\n\t\t\t\t<NcLoadingIcon v-else />\n\t\t\t</template>\n\n\t\t\t<NcActionCaption v-if=\"actionCaption\" :name=\"actionCaption\" />\n\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"!directoryOnly\"\n\t\t\t\tclose-after-click\n\t\t\t\t@click=\"triggerPickFiles(false)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconUpload :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ (canUploadFolders || !!$slots.actions) ? (multiple ? t('Upload files') : t('Upload file')) : currentLabel }}\n\t\t\t\t<!-- If this is not the only action in the NcActions this is a menu entry and we need a generic name - otherwise this will be a single button where we need to apply the label -->\n\t\t\t</NcActionButton>\n\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"canUploadFolders\"\n\t\t\t\tclose-after-click\n\t\t\t\t@click=\"triggerPickFiles(true)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFolderUpload style=\"color: var(--color-primary-element)\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ (!directoryOnly || !!$slots.actions) ? t('Upload folder') : currentLabel }}\n\t\t\t\t<!-- If this is not the only action in the NcActions this is a menu entry and we need a generic name - otherwise this will be a single button where we need to apply the label -->\n\t\t\t</NcActionButton>\n\n\t\t\t<template v-for=\"group of actions\">\n\t\t\t\t<NcActionCaption\n\t\t\t\t\tv-if=\"group.caption\"\n\t\t\t\t\t:key=\"group.caption\"\n\t\t\t\t\t:name=\"group.caption\" />\n\n\t\t\t\t<NcActionButton\n\t\t\t\t\tv-for=\"action of group.actions ?? [group]\"\n\t\t\t\t\t:key=\"action.label\"\n\t\t\t\t\tclose-after-click\n\t\t\t\t\t@click=\"action.onClick\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :svg=\"action.iconSvg\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t{{ action.label }}\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcActions>\n\n\t\t<!-- Hidden files picker input - also hidden for accessibility as otherwise such users also loose the ability to pick files -->\n\t\t<input\n\t\t\tref=\"inputElement\"\n\t\t\t:accept=\"accept?.join(', ')\"\n\t\t\taria-hidden=\"true\"\n\t\t\tclass=\"hidden-visually\"\n\t\t\t:multiple=\"multiple\"\n\t\t\ttype=\"file\"\n\t\t\t@change=\"onPick\">\n\n\t\t<!-- @slot Optional content to be shown in the picker. This can be used e.g. for a progress bar or similar. -->\n\t\t<slot />\n\t</form>\n</template>\n\n<style module>\n.filePicker {\n\tdisplay: inline-flex;\n\talign-items: center;\n\theight: var(--default-clickable-area);\n}\n</style>\n\n<docs>\nThis component allows to pick local files (or directories) which can be used to upload them to Nextcloud or directly process them in the browser.\n\n### Exposed methods\n\n- `function reset(): void`\n  This method allows to reset the internal state of the file picker to clear the current selection\n\n### Example\n\n```vue\n<template>\n\t<div>\n\t\t<div class=\"wrapper\">\n\t\t\t<NcFilePicker ref=\"picker\"\n\t\t\t\tdirectory\n\t\t\t\t@pick=\"selectedFiles = $event\" />\n\n\t\t\t<NcButton variant=\"tertiary\"\n\t\t\t\t@click=\"clearPicker\">\n\t\t\t\tClear\n\t\t\t</NcButton>\n\t\t</div>\n\n\t\t<h3>Selected files:</h3>\n\t\t<ul>\n\t\t\t<li v-for=\"file in selectedFiles\" :key=\"file.name\">\n\t\t\t\t{{ file.webkitRelativePath || file.name }}\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tselectedFiles: [],\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\t/**\n\t\t\t * This will clear the selected files from the picker.\n\t\t\t */\n\t\t\tclearPicker() {\n\t\t\t\tthis.$refs.picker.reset()\n\t\t\t},\n\t\t},\n\t}\n</script>\n<style scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 10px;\n}\n</style>\n```\n</docs>\n"],"names":["_sfc_main"],"mappings":";;;;;;;;AAoBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;AChBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;AChBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC8EA,WAAa;AAAA,MACZ;AAAA,IAAA,CACA;AAED,UAAM,cAAc,IAA4B,IAAI;AACpD,UAAM,eAAe,IAA6B,IAAI;AAKtD,UAAM,eAAe,SAAS,MAAM;AACnC,UAAI,MAAM,SAAS;AAClB,eAAO,EAAE,aAAa;AAAA,MACvB,WAAW,MAAM,OAAO;AACvB,eAAO,MAAM;AAAA,MACd,WAAW,MAAM,eAAe;AAC/B,eAAO,EAAE,aAAa;AAAA,MACvB;AACA,aAAO,MAAM,WAAW,EAAE,YAAY,IAAI,EAAE,WAAW;AAAA,IACxD,CAAC;AAMD,UAAM,mBAAmB,SAAS,MAAM;AACvC,cAAQ,MAAM,aAAa,MAAM,kBAAkB,qBAAqB,iBAAiB;AAAA,IAC1F,CAAC;AAOD,aAAS,iBAAiB,eAAwB;AAEjD,YAAA;AAGA,UAAI,iBAAiB,OAAO;AAC3B,qBAAa,MAAO,kBAAkB;AAAA,MACvC;AAGA,eAAS,MAAM,aAAa,MAAO,MAAA,CAAO;AAAA,IAC3C;AAKA,aAAS,SAAS;AACjB,YAAM,QAAQ,aAAa,OAAO,QAAQ,MAAM,KAAK,aAAa,MAAM,KAAK,IAAI,CAAA;AACjF,WAAK,QAAQ,KAAK;AAAA,IACnB;AAKA,aAAS,QAAQ;AAChB,kBAAY,MAAO,MAAA;AAAA,IACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0,1,2]}
+{"version":3,"file":"NcFilePicker-Dg6UqMN1.mjs","sources":["../../node_modules/vue-material-design-icons/FolderUpload.vue","../../node_modules/vue-material-design-icons/Plus.vue","../../node_modules/vue-material-design-icons/Upload.vue","../../src/components/NcFilePicker/NcFilePicker.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon folder-upload-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M20,6A2,2 0 0,1 22,8V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4H10L12,6H20M10.75,13H14V17H16V13H19.25L15,8.75\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"FolderUploadIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon plus-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"PlusIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon upload-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"UploadIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, ref } from 'vue'\nimport IconFolderUpload from 'vue-material-design-icons/FolderUpload.vue'\nimport IconPlus from 'vue-material-design-icons/Plus.vue'\nimport IconUpload from 'vue-material-design-icons/Upload.vue'\nimport NcActionButton from '../NcActionButton/NcActionButton.vue'\nimport NcActionCaption from '../NcActionCaption/NcActionCaption.vue'\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/NcLoadingIcon.vue'\nimport { t } from '../../l10n.js'\n\nexport interface FilePickerItem {\n\t/**\n\t * SVG icon (as string) for the action\n\t */\n\ticonSvg: string\n\t/**\n\t * Label of the action\n\t */\n\tlabel: string\n\t/**\n\t * Callback when the action is clicked\n\t */\n\tonClick: () => void\n}\n\nexport interface FilePickerItemGroup {\n\t/**\n\t * Caption for the action group\n\t */\n\tcaption: string\n\t/**\n\t * Actions within this group\n\t */\n\tactions: FilePickerItem[]\n}\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * File types to accept\n\t */\n\taccept?: string[]\n\n\t/**\n\t * Optional menu caption to be shown above the actions\n\t */\n\tactionCaption?: string\n\n\t/**\n\t * Additional actions to be shown within the picker menu\n\t */\n\tactions?: FilePickerItem[] | FilePickerItemGroup[]\n\n\t/**\n\t * Allow picking a directory\n\t */\n\tdirectory?: boolean\n\n\t/**\n\t * Disable picking files and only allow picking a directory\n\t */\n\tdirectoryOnly?: boolean\n\n\t/**\n\t * Disabled state of the picker\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * If set then the label is only used for accessibility but not shown visually\n\t */\n\ticonOnly?: boolean\n\n\t/**\n\t * Label of the picker\n\t *\n\t * @default 'Pick file' or 'Pick files' depending on `multiple`\n\t */\n\tlabel?: string\n\n\t/**\n\t * If set then the picker will be set into a loading state.\n\t * This means the picker is disabled, a loading spinner is shown and the label is adjusted.\n\t */\n\tloading?: boolean\n\n\t/**\n\t * Can the user pick multiple files.\n\t * This is ignored when picking folder (by browser limitations).\n\t */\n\tmultiple?: boolean\n\n\t/**\n\t * The variant of the button\n\t */\n\tvariant?: 'primary' | 'secondary' | 'tertiary'\n}>(), {\n\tactions: () => [],\n\taccept: undefined,\n\tactionCaption: '',\n\tlabel: undefined,\n\tvariant: 'primary',\n})\n\nconst emit = defineEmits<{\n\t(event: 'pick', files: File[]): void\n}>()\n\ndefineExpose({\n\treset,\n})\n\nconst formElement = ref<HTMLFormElement | null>(null)\nconst inputElement = ref<HTMLInputElement | null>(null)\n\n/**\n * The current label to be used as menu name and accessible name of the picker.\n */\nconst currentLabel = computed(() => {\n\tif (props.loading) {\n\t\treturn t('Uploading …')\n\t} else if (props.label) {\n\t\treturn props.label\n\t} else if (props.directoryOnly) {\n\t\treturn t('Pick folder')\n\t}\n\treturn props.multiple ? t('Pick files') : t('Pick file')\n})\n\n/**\n * Check whether the current browser supports uploading directories\n * Hint: This does not check if the current connection supports this, as some browsers require a secure context!\n */\nconst canUploadFolders = computed(() => {\n\treturn (props.directory || props.directoryOnly) && 'webkitdirectory' in HTMLInputElement.prototype\n})\n\n/**\n * Trigger file picker\n *\n * @param uploadFolders - Whether to upload folders or files\n */\nfunction triggerPickFiles(uploadFolders: boolean) {\n\t// Without reset selecting the same file doesn't trigger the change event\n\treset()\n\n\t// Only if the browser supports picking folders and the user selected \"pick folder\" we set the file input to directory picking.\n\tif (canUploadFolders.value) {\n\t\tinputElement.value!.webkitdirectory = uploadFolders\n\t}\n\n\t// Wait for the reset and the `webkitdirectory` to be dispatched in DOM\n\tnextTick(() => inputElement.value!.click())\n}\n\n/**\n * Handle picking some local files\n */\nfunction onPick() {\n\tconst files = inputElement.value?.files ? Array.from(inputElement.value.files) : []\n\temit('pick', files)\n}\n\n/**\n * Reset the picker state of the currently selected files.\n */\nfunction reset() {\n\tformElement.value!.reset()\n}\n</script>\n\n<template>\n\t<form\n\t\tref=\"formElement\"\n\t\t:class=\"$style.filePicker\">\n\t\t<NcActions\n\t\t\t:aria-label=\"currentLabel\"\n\t\t\t:disabled=\"disabled || loading\"\n\t\t\t:menu-name=\"iconOnly ? undefined : currentLabel\"\n\t\t\t:force-name=\"!iconOnly\"\n\t\t\t:variant=\"variant\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Optional custom icon for the picker menu -->\n\t\t\t\t<slot v-if=\"!loading\" name=\"icon\">\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</slot>\n\t\t\t\t<NcLoadingIcon v-else />\n\t\t\t</template>\n\n\t\t\t<NcActionCaption v-if=\"actionCaption\" :name=\"actionCaption\" />\n\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"!directoryOnly\"\n\t\t\t\tclose-after-click\n\t\t\t\t@click=\"triggerPickFiles(false)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconUpload :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ (canUploadFolders || !!$slots.actions) ? (multiple ? t('Upload files') : t('Upload file')) : currentLabel }}\n\t\t\t\t<!-- If this is not the only action in the NcActions this is a menu entry and we need a generic name - otherwise this will be a single button where we need to apply the label -->\n\t\t\t</NcActionButton>\n\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"canUploadFolders\"\n\t\t\t\tclose-after-click\n\t\t\t\t@click=\"triggerPickFiles(true)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFolderUpload style=\"color: var(--color-primary-element)\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ (!directoryOnly || !!$slots.actions) ? t('Upload folder') : currentLabel }}\n\t\t\t\t<!-- If this is not the only action in the NcActions this is a menu entry and we need a generic name - otherwise this will be a single button where we need to apply the label -->\n\t\t\t</NcActionButton>\n\n\t\t\t<template v-for=\"group of actions\">\n\t\t\t\t<NcActionCaption\n\t\t\t\t\tv-if=\"group.caption\"\n\t\t\t\t\t:key=\"group.caption\"\n\t\t\t\t\t:name=\"group.caption\" />\n\n\t\t\t\t<NcActionButton\n\t\t\t\t\tv-for=\"action of group.actions ?? [group]\"\n\t\t\t\t\t:key=\"action.label\"\n\t\t\t\t\tclose-after-click\n\t\t\t\t\t@click=\"action.onClick\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :svg=\"action.iconSvg\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t{{ action.label }}\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcActions>\n\n\t\t<!-- Hidden files picker input - also hidden for accessibility as otherwise such users also loose the ability to pick files -->\n\t\t<input\n\t\t\tref=\"inputElement\"\n\t\t\t:accept=\"accept?.join(', ')\"\n\t\t\taria-hidden=\"true\"\n\t\t\tclass=\"hidden-visually\"\n\t\t\t:multiple=\"multiple\"\n\t\t\ttype=\"file\"\n\t\t\t@change=\"onPick\">\n\n\t\t<!-- @slot Optional content to be shown in the picker. This can be used e.g. for a progress bar or similar. -->\n\t\t<slot />\n\t</form>\n</template>\n\n<style module>\n.filePicker {\n\tdisplay: inline-flex;\n\talign-items: center;\n\theight: var(--default-clickable-area);\n}\n</style>\n\n<docs>\nThis component allows to pick local files (or directories) which can be used to upload them to Nextcloud or directly process them in the browser.\n\n### Exposed methods\n\n- `function reset(): void`\n  This method allows to reset the internal state of the file picker to clear the current selection\n\n### Example\n\n```vue\n<template>\n\t<div>\n\t\t<div class=\"wrapper\">\n\t\t\t<NcFilePicker ref=\"picker\"\n\t\t\t\tdirectory\n\t\t\t\t@pick=\"selectedFiles = $event\" />\n\n\t\t\t<NcButton variant=\"tertiary\"\n\t\t\t\t@click=\"clearPicker\">\n\t\t\t\tClear\n\t\t\t</NcButton>\n\t\t</div>\n\n\t\t<h3>Selected files:</h3>\n\t\t<ul>\n\t\t\t<li v-for=\"file in selectedFiles\" :key=\"file.name\">\n\t\t\t\t{{ file.webkitRelativePath || file.name }}\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tselectedFiles: [],\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\t/**\n\t\t\t * This will clear the selected files from the picker.\n\t\t\t */\n\t\t\tclearPicker() {\n\t\t\t\tthis.$refs.picker.reset()\n\t\t\t},\n\t\t},\n\t}\n</script>\n<style scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 10px;\n}\n</style>\n```\n</docs>\n"],"names":["_sfc_main"],"mappings":";;;;;;;;AAoBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;AChBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;AChBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC8EA,WAAa;AAAA,MACZ;AAAA,IAAA,CACA;AAED,UAAM,cAAc,IAA4B,IAAI;AACpD,UAAM,eAAe,IAA6B,IAAI;AAKtD,UAAM,eAAe,SAAS,MAAM;AACnC,UAAI,MAAM,SAAS;AAClB,eAAO,EAAE,aAAa;AAAA,MACvB,WAAW,MAAM,OAAO;AACvB,eAAO,MAAM;AAAA,MACd,WAAW,MAAM,eAAe;AAC/B,eAAO,EAAE,aAAa;AAAA,MACvB;AACA,aAAO,MAAM,WAAW,EAAE,YAAY,IAAI,EAAE,WAAW;AAAA,IACxD,CAAC;AAMD,UAAM,mBAAmB,SAAS,MAAM;AACvC,cAAQ,MAAM,aAAa,MAAM,kBAAkB,qBAAqB,iBAAiB;AAAA,IAC1F,CAAC;AAOD,aAAS,iBAAiB,eAAwB;AAEjD,YAAA;AAGA,UAAI,iBAAiB,OAAO;AAC3B,qBAAa,MAAO,kBAAkB;AAAA,MACvC;AAGA,eAAS,MAAM,aAAa,MAAO,MAAA,CAAO;AAAA,IAC3C;AAKA,aAAS,SAAS;AACjB,YAAM,QAAQ,aAAa,OAAO,QAAQ,MAAM,KAAK,aAAa,MAAM,KAAK,IAAI,CAAA;AACjF,WAAK,QAAQ,KAAK;AAAA,IACnB;AAKA,aAAS,QAAQ;AAChB,kBAAY,MAAO,MAAA;AAAA,IACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0,1,2]}

package/dist/chunks/{NcFormBox-DtoCXLMx.mjs → NcFormBox-C38-8CH6.mjs}

@@ -1,4 +1,4 @@
-import '../assets/NcFormBox-9NY7pxez.css';
+import '../assets/NcFormBox-DoEpsPVV.css';
 import { defineComponent, useCssModule, provide } from "vue";
 import { N as NC_FORM_BOX_CONTEXT_KEY } from "./useNcFormBox-Djlh582y.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
@@ -16,12 +16,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return { __sfc: true, style };
   }
 });
-const ncFormBox = "_ncFormBox_OjStT";
-const ncFormBox_row = "_ncFormBox_row_Qlk-j";
-const ncFormBox__item = "_ncFormBox__item_ayS-H";
-const ncFormBox_col = "_ncFormBox_col_VaIn3";
+const ncFormBox = "_ncFormBox_cvvSS";
+const ncFormBox_row = "_ncFormBox_row_x-cjq";
+const ncFormBox__item = "_ncFormBox__item_xO781";
+const ncFormBox_col = "_ncFormBox_col_BEEgR";
 const style0 = {
-  "material-design-icon": "_material-design-icon_zDurS",
+  "material-design-icon": "_material-design-icon_6xExP",
   ncFormBox,
   ncFormBox_row,
   ncFormBox__item,
@@ -53,4 +53,4 @@ const NcFormBox = __component__.exports;
 export {
   NcFormBox as N
 };
-//# sourceMappingURL=NcFormBox-DtoCXLMx.mjs.map
+//# sourceMappingURL=NcFormBox-C38-8CH6.mjs.map

package/dist/chunks/{NcFormBox-DtoCXLMx.mjs.map → NcFormBox-C38-8CH6.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcFormBox-DtoCXLMx.mjs","sources":["../../src/components/NcFormBox/NcFormBox.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport { provide, useCssModule } from 'vue'\nimport { NC_FORM_BOX_CONTEXT_KEY } from './useNcFormBox.ts'\n\nwithDefaults(defineProps<{\n\t/**\n\t * Display the group as a row instead of a column\n\t */\n\trow?: boolean\n}>(), {\n\trow: false,\n})\n\nconst style = useCssModule()\n\nprovide(NC_FORM_BOX_CONTEXT_KEY, {\n\tisInFormBox: true,\n\tformBoxItemClass: style.ncFormBox__item,\n})\n</script>\n\n<template>\n\t<div :class=\"[$style.ncFormBox, row ? $style.ncFormBox_row : $style.ncFormBox_col]\">\n\t\t<!--\n\t\t\t@slot Grouped content\n\t\t\t\t@binding {string} itemClass - Class to add on a custom item to apply the border radius effect\n\t\t  -->\n\t\t<slot :item-class=\"$style.ncFormBox__item\" />\n\t</div>\n</template>\n\n<style lang=\"scss\" module>\n.ncFormBox {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(1 * var(--default-grid-baseline));\n\n\t&.ncFormBox_row {\n\t\tflex-direction: row;\n\t}\n}\n\n.ncFormBox__item {\n\tborder-radius: var(--border-radius-small) !important;\n}\n\n.ncFormBox_col {\n\tflex-direction: column;\n\n\t.ncFormBox__item {\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n\n.ncFormBox_row {\n\tflex-direction: row;\n\n\t.ncFormBox__item {\n\t\tflex: 1 1;\n\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n</style>\n\n<docs>\n### General\n\nA container of supported components with a small gap and rounded corners forming a solid group.\n\nCurrently supported components:\n- **`<NcFormBoxButton>`**: an action button/link with an optional description specially for the `<NcFormBox>` context\n- **`<NcFormBoxCopyButton>`**: a special case of a button to copy a text to the clipboard\n- **`<NcFormBoxSwitch>`**: a toggle switch replacing `<NcCheckboxRadioSwitch type=\"switch\">` in a box\n- **`<NcButton>`**: a general button in case there is a kind of primary action within a box\n\n**Note**: if the group has a semantic meaning, consider wrapping the `<NcFormBox>` into `<NcFormGroup>` component with a label.\n\n```vue\n<script>\nimport { mdiArrowRight, mdiFolderOpenOutline, mdiPlus } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn { mdiArrowRight, mdiFolderOpenOutline, mdiPlus }\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'Text',\n\t\t\tswitchValue: false,\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<div style=\"display: flex; flex-direction: column; gap: calc(6 * var(--default-grid-baseline));\">\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxCopyButton label=\"WebDAV URL\" value=\"https://cloud.example.tld/remote.php/dav/files/user\" />\n\t\t</NcFormBox>\n\n\t\t<NcFormGroup label=\"Account settings\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton label=\"user@example.com\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcFormBoxButton label=\"sales@example.com\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcButton wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPlus\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tAdd mail account\n\t\t\t\t</NcButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormGroup label=\"Device settings\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Turn camera and microphone off by default\" />\n\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Blur camera background by default\"  />\n\t\t\t\t<NcFormBoxSwitch\n\t\t\t\t\tv-model=\"switchValue\"\n\t\t\t\t\tlabel=\"Skip device preview before joining a call\"\n\t\t\t\t\tdescription=\"Will always show if recording consent is required\" />\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxButton\n\t\t\t\tlabel=\"Attachments folder\"\n\t\t\t\tdescription=\"/Talk\"\n\t\t\t\tinverted-accent>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiFolderOpenOutline\" inline />\n\t\t\t\t</template>\n\t\t\t</NcFormBoxButton>\n\t\t</NcFormBox>\n\t</div>\n</template>\n```\n\n### Advanced usage\n\nScoped slot prop `itemClass` can be used to apply the same border radius effect to custom components.\nCreate an issue if you need a composable to inject the class into a custom component.\n\n```vue\n<template>\n\t<NcFormBox v-slot=\"{ itemClass }\">\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tFirst native button\n\t\t</button>\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tSecond native button\n\t\t</button>\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tThird native button\n\t\t</button>\n\t</NcFormBox>\n</template>\n\n<style scoped>\n.native-button {\n\t/* Remove default server margin around a native button */\n\tmargin: 0 !important;\n}\n</style>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;AAkBA,UAAM,QAAQ,aAAA;AAEd,YAAQ,yBAAyB;AAAA,MAChC,aAAa;AAAA,MACb,kBAAkB,MAAM;AAAA,IAAA,CACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcFormBox-C38-8CH6.mjs","sources":["../../src/components/NcFormBox/NcFormBox.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport { provide, useCssModule } from 'vue'\nimport { NC_FORM_BOX_CONTEXT_KEY } from './useNcFormBox.ts'\n\nwithDefaults(defineProps<{\n\t/**\n\t * Display the group as a row instead of a column\n\t */\n\trow?: boolean\n}>(), {\n\trow: false,\n})\n\nconst style = useCssModule()\n\nprovide(NC_FORM_BOX_CONTEXT_KEY, {\n\tisInFormBox: true,\n\tformBoxItemClass: style.ncFormBox__item,\n})\n</script>\n\n<template>\n\t<div :class=\"[$style.ncFormBox, row ? $style.ncFormBox_row : $style.ncFormBox_col]\">\n\t\t<!--\n\t\t\t@slot Grouped content\n\t\t\t\t@binding {string} itemClass - Class to add on a custom item to apply the border radius effect\n\t\t  -->\n\t\t<slot :item-class=\"$style.ncFormBox__item\" />\n\t</div>\n</template>\n\n<style lang=\"scss\" module>\n.ncFormBox {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(1 * var(--default-grid-baseline));\n\n\t&.ncFormBox_row {\n\t\tflex-direction: row;\n\t}\n}\n\n.ncFormBox__item {\n\tborder-radius: var(--border-radius-small) !important;\n}\n\n.ncFormBox_col {\n\tflex-direction: column;\n\n\t.ncFormBox__item {\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n\n.ncFormBox_row {\n\tflex-direction: row;\n\n\t.ncFormBox__item {\n\t\tflex: 1 1;\n\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n</style>\n\n<docs>\n### General\n\nA container of supported components with a small gap and rounded corners forming a solid group.\n\nCurrently supported components:\n- **`<NcFormBoxButton>`**: an action button/link with an optional description specially for the `<NcFormBox>` context\n- **`<NcFormBoxCopyButton>`**: a special case of a button to copy a text to the clipboard\n- **`<NcFormBoxSwitch>`**: a toggle switch replacing `<NcCheckboxRadioSwitch type=\"switch\">` in a box\n- **`<NcButton>`**: a general button in case there is a kind of primary action within a box\n\n**Note**: if the group has a semantic meaning, consider wrapping the `<NcFormBox>` into `<NcFormGroup>` component with a label.\n\n```vue\n<script>\nimport { mdiArrowRight, mdiFolderOpenOutline, mdiPlus } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn { mdiArrowRight, mdiFolderOpenOutline, mdiPlus }\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'Text',\n\t\t\tswitchValue: false,\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<div style=\"display: flex; flex-direction: column; gap: calc(6 * var(--default-grid-baseline));\">\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxCopyButton label=\"WebDAV URL\" value=\"https://cloud.example.tld/remote.php/dav/files/user\" />\n\t\t</NcFormBox>\n\n\t\t<NcFormGroup label=\"Account settings\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton label=\"user@example.com\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcFormBoxButton label=\"sales@example.com\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcButton wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPlus\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tAdd mail account\n\t\t\t\t</NcButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormGroup label=\"Device settings\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Turn camera and microphone off by default\" />\n\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Blur camera background by default\"  />\n\t\t\t\t<NcFormBoxSwitch\n\t\t\t\t\tv-model=\"switchValue\"\n\t\t\t\t\tlabel=\"Skip device preview before joining a call\"\n\t\t\t\t\tdescription=\"Will always show if recording consent is required\" />\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxButton\n\t\t\t\tlabel=\"Attachments folder\"\n\t\t\t\tdescription=\"/Talk\"\n\t\t\t\tinverted-accent>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiFolderOpenOutline\" inline />\n\t\t\t\t</template>\n\t\t\t</NcFormBoxButton>\n\t\t</NcFormBox>\n\t</div>\n</template>\n```\n\n### Advanced usage\n\nScoped slot prop `itemClass` can be used to apply the same border radius effect to custom components.\nCreate an issue if you need a composable to inject the class into a custom component.\n\n```vue\n<template>\n\t<NcFormBox v-slot=\"{ itemClass }\">\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tFirst native button\n\t\t</button>\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tSecond native button\n\t\t</button>\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tThird native button\n\t\t</button>\n\t</NcFormBox>\n</template>\n\n<style scoped>\n.native-button {\n\t/* Remove default server margin around a native button */\n\tmargin: 0 !important;\n}\n</style>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;AAkBA,UAAM,QAAQ,aAAA;AAEd,YAAQ,yBAAyB;AAAA,MAChC,aAAa;AAAA,MACb,kBAAkB,MAAM;AAAA,IAAA,CACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcFormBox-DRGVpFeZ.cjs → NcFormBox-C8LDr6nF.cjs}

@@ -1,4 +1,4 @@
-require('../assets/NcFormBox-9NY7pxez.css');
+require('../assets/NcFormBox-DoEpsPVV.css');
 "use strict";
 const Vue = require("vue");
 const useNcFormBox = require("./useNcFormBox-XowgPxpI.cjs");
@@ -17,12 +17,12 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     return { __sfc: true, style };
   }
 });
-const ncFormBox = "_ncFormBox_OjStT";
-const ncFormBox_row = "_ncFormBox_row_Qlk-j";
-const ncFormBox__item = "_ncFormBox__item_ayS-H";
-const ncFormBox_col = "_ncFormBox_col_VaIn3";
+const ncFormBox = "_ncFormBox_cvvSS";
+const ncFormBox_row = "_ncFormBox_row_x-cjq";
+const ncFormBox__item = "_ncFormBox__item_xO781";
+const ncFormBox_col = "_ncFormBox_col_BEEgR";
 const style0 = {
-  "material-design-icon": "_material-design-icon_zDurS",
+  "material-design-icon": "_material-design-icon_6xExP",
   ncFormBox,
   ncFormBox_row,
   ncFormBox__item,
@@ -52,4 +52,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcFormBox = __component__.exports;
 exports.NcFormBox = NcFormBox;
-//# sourceMappingURL=NcFormBox-DRGVpFeZ.cjs.map
+//# sourceMappingURL=NcFormBox-C8LDr6nF.cjs.map

package/dist/chunks/{NcFormBox-DRGVpFeZ.cjs.map → NcFormBox-C8LDr6nF.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcFormBox-DRGVpFeZ.cjs","sources":["../../src/components/NcFormBox/NcFormBox.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport { provide, useCssModule } from 'vue'\nimport { NC_FORM_BOX_CONTEXT_KEY } from './useNcFormBox.ts'\n\nwithDefaults(defineProps<{\n\t/**\n\t * Display the group as a row instead of a column\n\t */\n\trow?: boolean\n}>(), {\n\trow: false,\n})\n\nconst style = useCssModule()\n\nprovide(NC_FORM_BOX_CONTEXT_KEY, {\n\tisInFormBox: true,\n\tformBoxItemClass: style.ncFormBox__item,\n})\n</script>\n\n<template>\n\t<div :class=\"[$style.ncFormBox, row ? $style.ncFormBox_row : $style.ncFormBox_col]\">\n\t\t<!--\n\t\t\t@slot Grouped content\n\t\t\t\t@binding {string} itemClass - Class to add on a custom item to apply the border radius effect\n\t\t  -->\n\t\t<slot :item-class=\"$style.ncFormBox__item\" />\n\t</div>\n</template>\n\n<style lang=\"scss\" module>\n.ncFormBox {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(1 * var(--default-grid-baseline));\n\n\t&.ncFormBox_row {\n\t\tflex-direction: row;\n\t}\n}\n\n.ncFormBox__item {\n\tborder-radius: var(--border-radius-small) !important;\n}\n\n.ncFormBox_col {\n\tflex-direction: column;\n\n\t.ncFormBox__item {\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n\n.ncFormBox_row {\n\tflex-direction: row;\n\n\t.ncFormBox__item {\n\t\tflex: 1 1;\n\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n</style>\n\n<docs>\n### General\n\nA container of supported components with a small gap and rounded corners forming a solid group.\n\nCurrently supported components:\n- **`<NcFormBoxButton>`**: an action button/link with an optional description specially for the `<NcFormBox>` context\n- **`<NcFormBoxCopyButton>`**: a special case of a button to copy a text to the clipboard\n- **`<NcFormBoxSwitch>`**: a toggle switch replacing `<NcCheckboxRadioSwitch type=\"switch\">` in a box\n- **`<NcButton>`**: a general button in case there is a kind of primary action within a box\n\n**Note**: if the group has a semantic meaning, consider wrapping the `<NcFormBox>` into `<NcFormGroup>` component with a label.\n\n```vue\n<script>\nimport { mdiArrowRight, mdiFolderOpenOutline, mdiPlus } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn { mdiArrowRight, mdiFolderOpenOutline, mdiPlus }\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'Text',\n\t\t\tswitchValue: false,\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<div style=\"display: flex; flex-direction: column; gap: calc(6 * var(--default-grid-baseline));\">\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxCopyButton label=\"WebDAV URL\" value=\"https://cloud.example.tld/remote.php/dav/files/user\" />\n\t\t</NcFormBox>\n\n\t\t<NcFormGroup label=\"Account settings\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton label=\"user@example.com\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcFormBoxButton label=\"sales@example.com\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcButton wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPlus\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tAdd mail account\n\t\t\t\t</NcButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormGroup label=\"Device settings\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Turn camera and microphone off by default\" />\n\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Blur camera background by default\"  />\n\t\t\t\t<NcFormBoxSwitch\n\t\t\t\t\tv-model=\"switchValue\"\n\t\t\t\t\tlabel=\"Skip device preview before joining a call\"\n\t\t\t\t\tdescription=\"Will always show if recording consent is required\" />\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxButton\n\t\t\t\tlabel=\"Attachments folder\"\n\t\t\t\tdescription=\"/Talk\"\n\t\t\t\tinverted-accent>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiFolderOpenOutline\" inline />\n\t\t\t\t</template>\n\t\t\t</NcFormBoxButton>\n\t\t</NcFormBox>\n\t</div>\n</template>\n```\n\n### Advanced usage\n\nScoped slot prop `itemClass` can be used to apply the same border radius effect to custom components.\nCreate an issue if you need a composable to inject the class into a custom component.\n\n```vue\n<template>\n\t<NcFormBox v-slot=\"{ itemClass }\">\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tFirst native button\n\t\t</button>\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tSecond native button\n\t\t</button>\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tThird native button\n\t\t</button>\n\t</NcFormBox>\n</template>\n\n<style scoped>\n.native-button {\n\t/* Remove default server margin around a native button */\n\tmargin: 0 !important;\n}\n</style>\n```\n</docs>\n"],"names":["useCssModule","provide","NC_FORM_BOX_CONTEXT_KEY"],"mappings":";;;;;;;;;;AAkBA,UAAM,QAAQA,IAAAA,aAAA;AAEdC,QAAAA,QAAQC,aAAAA,yBAAyB;AAAA,MAChC,aAAa;AAAA,MACb,kBAAkB,MAAM;AAAA,IAAA,CACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcFormBox-C8LDr6nF.cjs","sources":["../../src/components/NcFormBox/NcFormBox.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport { provide, useCssModule } from 'vue'\nimport { NC_FORM_BOX_CONTEXT_KEY } from './useNcFormBox.ts'\n\nwithDefaults(defineProps<{\n\t/**\n\t * Display the group as a row instead of a column\n\t */\n\trow?: boolean\n}>(), {\n\trow: false,\n})\n\nconst style = useCssModule()\n\nprovide(NC_FORM_BOX_CONTEXT_KEY, {\n\tisInFormBox: true,\n\tformBoxItemClass: style.ncFormBox__item,\n})\n</script>\n\n<template>\n\t<div :class=\"[$style.ncFormBox, row ? $style.ncFormBox_row : $style.ncFormBox_col]\">\n\t\t<!--\n\t\t\t@slot Grouped content\n\t\t\t\t@binding {string} itemClass - Class to add on a custom item to apply the border radius effect\n\t\t  -->\n\t\t<slot :item-class=\"$style.ncFormBox__item\" />\n\t</div>\n</template>\n\n<style lang=\"scss\" module>\n.ncFormBox {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(1 * var(--default-grid-baseline));\n\n\t&.ncFormBox_row {\n\t\tflex-direction: row;\n\t}\n}\n\n.ncFormBox__item {\n\tborder-radius: var(--border-radius-small) !important;\n}\n\n.ncFormBox_col {\n\tflex-direction: column;\n\n\t.ncFormBox__item {\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n\n.ncFormBox_row {\n\tflex-direction: row;\n\n\t.ncFormBox__item {\n\t\tflex: 1 1;\n\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n</style>\n\n<docs>\n### General\n\nA container of supported components with a small gap and rounded corners forming a solid group.\n\nCurrently supported components:\n- **`<NcFormBoxButton>`**: an action button/link with an optional description specially for the `<NcFormBox>` context\n- **`<NcFormBoxCopyButton>`**: a special case of a button to copy a text to the clipboard\n- **`<NcFormBoxSwitch>`**: a toggle switch replacing `<NcCheckboxRadioSwitch type=\"switch\">` in a box\n- **`<NcButton>`**: a general button in case there is a kind of primary action within a box\n\n**Note**: if the group has a semantic meaning, consider wrapping the `<NcFormBox>` into `<NcFormGroup>` component with a label.\n\n```vue\n<script>\nimport { mdiArrowRight, mdiFolderOpenOutline, mdiPlus } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn { mdiArrowRight, mdiFolderOpenOutline, mdiPlus }\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'Text',\n\t\t\tswitchValue: false,\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<div style=\"display: flex; flex-direction: column; gap: calc(6 * var(--default-grid-baseline));\">\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxCopyButton label=\"WebDAV URL\" value=\"https://cloud.example.tld/remote.php/dav/files/user\" />\n\t\t</NcFormBox>\n\n\t\t<NcFormGroup label=\"Account settings\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton label=\"user@example.com\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcFormBoxButton label=\"sales@example.com\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcButton wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPlus\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tAdd mail account\n\t\t\t\t</NcButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormGroup label=\"Device settings\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Turn camera and microphone off by default\" />\n\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Blur camera background by default\"  />\n\t\t\t\t<NcFormBoxSwitch\n\t\t\t\t\tv-model=\"switchValue\"\n\t\t\t\t\tlabel=\"Skip device preview before joining a call\"\n\t\t\t\t\tdescription=\"Will always show if recording consent is required\" />\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxButton\n\t\t\t\tlabel=\"Attachments folder\"\n\t\t\t\tdescription=\"/Talk\"\n\t\t\t\tinverted-accent>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiFolderOpenOutline\" inline />\n\t\t\t\t</template>\n\t\t\t</NcFormBoxButton>\n\t\t</NcFormBox>\n\t</div>\n</template>\n```\n\n### Advanced usage\n\nScoped slot prop `itemClass` can be used to apply the same border radius effect to custom components.\nCreate an issue if you need a composable to inject the class into a custom component.\n\n```vue\n<template>\n\t<NcFormBox v-slot=\"{ itemClass }\">\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tFirst native button\n\t\t</button>\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tSecond native button\n\t\t</button>\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tThird native button\n\t\t</button>\n\t</NcFormBox>\n</template>\n\n<style scoped>\n.native-button {\n\t/* Remove default server margin around a native button */\n\tmargin: 0 !important;\n}\n</style>\n```\n</docs>\n"],"names":["useCssModule","provide","NC_FORM_BOX_CONTEXT_KEY"],"mappings":";;;;;;;;;;AAkBA,UAAM,QAAQA,IAAAA,aAAA;AAEdC,QAAAA,QAAQC,aAAAA,yBAAyB;AAAA,MAChC,aAAa;AAAA,MACb,kBAAkB,MAAM;AAAA,IAAA,CACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcFormBoxButton-ozVuTgCZ.cjs → NcFormBoxButton-Bk-1cqbj.cjs}

@@ -1,9 +1,9 @@
-require('../assets/NcFormBoxButton-BlS280R1.css');
+require('../assets/NcFormBoxButton-CFtdjCfy.css');
 "use strict";
 const Vue = require("vue");
 const mdi = require("./mdi-DTiP6a6e.cjs");
 const core = require("@vueuse/core");
-const NcFormBoxItem = require("./NcFormBoxItem-3lI7Bu3S.cjs");
+const NcFormBoxItem = require("./NcFormBoxItem-BAJxkxRf.cjs");
 const NcIconSvgWrapper = require("./NcIconSvgWrapper-Bbl4kXZI.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 /*!
@@ -88,9 +88,9 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     return { __sfc: true, props, tag, attrs, isLink, icon, NcFormBoxItem: NcFormBoxItem.NcFormBoxItem, NcIconSvgWrapper: NcIconSvgWrapper.NcIconSvgWrapper };
   }
 });
-const formBoxButton = "_formBoxButton_DGIeJ";
+const formBoxButton = "_formBoxButton_1Xs0E";
 const style0 = {
-  "material-design-icon": "_material-design-icon_nhhXo",
+  "material-design-icon": "_material-design-icon_n0rxV",
   formBoxButton
 };
 var _sfc_render = function render() {
@@ -134,4 +134,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcFormBoxButton = __component__.exports;
 exports.NcFormBoxButton = NcFormBoxButton;
-//# sourceMappingURL=NcFormBoxButton-ozVuTgCZ.cjs.map
+//# sourceMappingURL=NcFormBoxButton-Bk-1cqbj.cjs.map