@nextcloud/vue 8.36.0 → 8.37.0

package/dist/chunks/NcFilePicker-Ct_uwON0.cjs

@@ -0,0 +1,209 @@
+require('../assets/NcFilePicker-BokX813z.css');
+"use strict";
+const Vue = require("vue");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+const NcActionButton = require("./NcActionButton-C5Dqge0c.cjs");
+const Components_NcActionCaption = require("../Components/NcActionCaption.cjs");
+const NcActions = require("./NcActions-BSDvtMJD.cjs");
+const NcIconSvgWrapper = require("./NcIconSvgWrapper-Bbl4kXZI.cjs");
+const Components_NcLoadingIcon = require("../Components/NcLoadingIcon.cjs");
+const _l10n = require("./_l10n-skrZri3h.cjs");
+const _sfc_main$3 = {
+  name: "FolderUploadIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var _sfc_render$3 = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", _vm._b({ staticClass: "material-design-icon folder-upload-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "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" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
+};
+var _sfc_staticRenderFns$3 = [];
+var __component__$3 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$3,
+  _sfc_render$3,
+  _sfc_staticRenderFns$3,
+  false,
+  null,
+  null
+);
+const IconFolderUpload = __component__$3.exports;
+const _sfc_main$2 = {
+  name: "PlusIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var _sfc_render$2 = function render2() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", _vm._b({ staticClass: "material-design-icon plus-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
+};
+var _sfc_staticRenderFns$2 = [];
+var __component__$2 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$2,
+  _sfc_render$2,
+  _sfc_staticRenderFns$2,
+  false,
+  null,
+  null
+);
+const IconPlus = __component__$2.exports;
+const _sfc_main$1 = {
+  name: "UploadIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var _sfc_render$1 = function render3() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", _vm._b({ staticClass: "material-design-icon upload-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
+};
+var _sfc_staticRenderFns$1 = [];
+var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
+  null,
+  null
+);
+const IconUpload = __component__$1.exports;
+_l10n.register(_l10n.t40);
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "NcFilePicker",
+  props: {
+    accept: { default: void 0 },
+    actionCaption: { default: "" },
+    actions: { default: () => [] },
+    directory: { type: Boolean },
+    directoryOnly: { type: Boolean },
+    disabled: { type: Boolean },
+    iconOnly: { type: Boolean },
+    label: { default: void 0 },
+    loading: { type: Boolean },
+    multiple: { type: Boolean },
+    variant: { default: "primary" }
+  },
+  emits: ["pick"],
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    expose({
+      reset
+    });
+    const formElement = Vue.ref(null);
+    const inputElement = Vue.ref(null);
+    const currentLabel = Vue.computed(() => {
+      if (props.loading) {
+        return _l10n.t("Uploading …");
+      } else if (props.label) {
+        return props.label;
+      } else if (props.directoryOnly) {
+        return _l10n.t("Pick folder");
+      }
+      return props.multiple ? _l10n.t("Pick files") : _l10n.t("Pick file");
+    });
+    const canUploadFolders = Vue.computed(() => {
+      return (props.directory || props.directoryOnly) && "webkitdirectory" in HTMLInputElement.prototype;
+    });
+    function triggerPickFiles(uploadFolders) {
+      reset();
+      if (canUploadFolders.value) {
+        inputElement.value.webkitdirectory = uploadFolders;
+      }
+      Vue.nextTick(() => inputElement.value.click());
+    }
+    function onPick() {
+      const files = inputElement.value?.files ? Array.from(inputElement.value.files) : [];
+      emit("pick", files);
+    }
+    function reset() {
+      formElement.value.reset();
+    }
+    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 style0 = {
+  filePicker
+};
+var _sfc_render = function render4() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c("form", { ref: "formElement", class: _vm.$style.filePicker }, [_c(_setup.NcActions, { attrs: { "aria-label": _setup.currentLabel, "disabled": _vm.disabled || _vm.loading, "menu-name": _vm.iconOnly ? void 0 : _setup.currentLabel, "force-name": !_vm.iconOnly, "variant": _vm.variant }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [!_vm.loading ? _vm._t("icon", function() {
+      return [_c(_setup.IconPlus, { attrs: { "size": 20 } })];
+    }) : _c(_setup.NcLoadingIcon)];
+  }, proxy: true }], null, true) }, [_vm.actionCaption ? _c(_setup.NcActionCaption, { attrs: { "name": _vm.actionCaption } }) : _vm._e(), !_vm.directoryOnly ? _c(_setup.NcActionButton, { attrs: { "close-after-click": "" }, on: { "click": function($event) {
+    return _setup.triggerPickFiles(false);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c(_setup.IconUpload, { attrs: { "size": 20 } })];
+  }, proxy: true }], null, false, 3377047136) }, [_vm._v(" " + _vm._s(_setup.canUploadFolders || !!_vm.$slots.actions ? _vm.multiple ? _setup.t("Upload files") : _setup.t("Upload file") : _setup.currentLabel) + " ")]) : _vm._e(), _setup.canUploadFolders ? _c(_setup.NcActionButton, { attrs: { "close-after-click": "" }, on: { "click": function($event) {
+    return _setup.triggerPickFiles(true);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c(_setup.IconFolderUpload, { staticStyle: { "color": "var(--color-primary-element)" }, attrs: { "size": 20 } })];
+  }, proxy: true }], null, false, 746052933) }, [_vm._v(" " + _vm._s(!_vm.directoryOnly || !!_vm.$slots.actions ? _setup.t("Upload folder") : _setup.currentLabel) + " ")]) : _vm._e(), _vm._l(_vm.actions, function(group) {
+    return [group.caption ? _c(_setup.NcActionCaption, { key: group.caption, attrs: { "name": group.caption } }) : _vm._e(), _vm._l(group.actions ?? [group], function(action) {
+      return _c(_setup.NcActionButton, { key: action.label, attrs: { "close-after-click": "" }, on: { "click": action.onClick }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+        return [_c(_setup.NcIconSvgWrapper, { attrs: { "svg": action.iconSvg } })];
+      }, proxy: true }], null, true) }, [_vm._v(" " + _vm._s(action.label) + " ")]);
+    })];
+  })], 2), _c("input", { ref: "inputElement", staticClass: "hidden-visually", attrs: { "accept": _vm.accept?.join(", "), "aria-hidden": "true", "multiple": _vm.multiple, "type": "file" }, on: { "change": _setup.onPick } }), _vm._t("default")], 2);
+};
+var _sfc_staticRenderFns = [];
+const __cssModules = {
+  "$style": style0
+};
+function _sfc_injectStyles(ctx) {
+  for (var key in __cssModules) {
+    this[key] = __cssModules[key];
+  }
+}
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  _sfc_injectStyles,
+  null
+);
+const NcFilePicker = __component__.exports;
+exports.NcFilePicker = NcFilePicker;
+//# sourceMappingURL=NcFilePicker-Ct_uwON0.cjs.map

package/dist/chunks/NcFilePicker-Ct_uwON0.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcFilePicker-Ct_uwON0.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/{NcFormBoxCopyButton-DmFZ1t3a.cjs → NcFormBoxCopyButton-B2GrmfEz.cjs}

@@ -3,7 +3,7 @@ const Vue = require("vue");
 const core = require("@vueuse/core");
 const NcFormBoxButton = require("./NcFormBoxButton-BO2bMnah.cjs");
 const NcIconSvgWrapper = require("./NcIconSvgWrapper-Bbl4kXZI.cjs");
-const useCopy = require("./useCopy-Crn9gIC_.cjs");
+const useCopy = require("./useCopy-3m2jDiIN.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "NcFormBoxCopyButton",
@@ -43,4 +43,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcFormBoxCopyButton = __component__.exports;
 exports.NcFormBoxCopyButton = NcFormBoxCopyButton;
-//# sourceMappingURL=NcFormBoxCopyButton-DmFZ1t3a.cjs.map
+//# sourceMappingURL=NcFormBoxCopyButton-B2GrmfEz.cjs.map

package/dist/chunks/{NcFormBoxCopyButton-DmFZ1t3a.cjs.map → NcFormBoxCopyButton-B2GrmfEz.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcFormBoxCopyButton-DmFZ1t3a.cjs","sources":["../../src/components/NcFormBoxCopyButton/NcFormBoxCopyButton.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 { whenever } from '@vueuse/core'\nimport NcFormBoxButton from '../NcFormBoxButton/NcFormBoxButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useCopy } from '../../composables/useCopy.ts'\n\nconst props = withDefaults(defineProps<{\n\t/** Copied value's value */\n\tlabel?: string\n\t/** The value to be copied */\n\tvalue: string\n\t/** Native disabled attribute */\n\tdisabled?: boolean\n}>(), {\n\tlabel: undefined,\n\tdisabled: false,\n})\n\nconst emit = defineEmits<{\n\t/** Value has been successfully copied */\n\t(event: 'copy'): void\n}>()\n\nconst { isCopied, copy, icon, altText } = useCopy(() => props.value)\n\nwhenever(isCopied, () => emit('copy'))\n</script>\n\n<template>\n\t<NcFormBoxButton\n\t\t:disabled=\"disabled\"\n\t\tinverted-accent\n\t\t@click=\"copy\">\n\t\t<template v-if=\"$slots.default || label\" #default>\n\t\t\t<!-- @slot Custom label content -->\n\t\t\t<span class=\"hidden-visually\">\n\t\t\t\t{{ altText }}\n\t\t\t</span>\n\t\t\t<slot>\n\t\t\t\t{{ label }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template #description>\n\t\t\t{{ value }}\n\t\t</template>\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper :path=\"icon\" inline />\n\t\t</template>\n\t</NcFormBoxButton>\n</template>\n\n<docs>\n### General\n\n`NcFormBoxButton` set up to be a copy button.\n\n```vue\n<template>\n\t<NcFormGroup label=\"CalDAV\" description=\"Access Nextcloud calendars from other apps and devices\">\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxCopyButton\n\t\t\t\tlabel=\"CalDAV URL\"\n\t\t\t\tvalue=\"https://cloud.example.com/remote.php/dav/\" />\n\t\t\t<NcFormBoxCopyButton\n\t\t\t\tlabel=\"Server Address for iOS and macOS\"\n\t\t\t\tvalue=\"https://cloud.example.com/remote.php/dav/principals/users/user/\" />\n\t\t</NcFormBox>\n\t</NcFormGroup>\n</template>\n```\n</docs>\n"],"names":["useCopy","whenever"],"mappings":";;;;;;;;;;;;;;;;;AA4BA,UAAM,EAAE,UAAU,MAAM,MAAM,YAAYA,QAAAA,QAAQ,MAAM,MAAM,KAAK;AAEnEC,SAAAA,SAAS,UAAU,MAAM,KAAK,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcFormBoxCopyButton-B2GrmfEz.cjs","sources":["../../src/components/NcFormBoxCopyButton/NcFormBoxCopyButton.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 { whenever } from '@vueuse/core'\nimport NcFormBoxButton from '../NcFormBoxButton/NcFormBoxButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useCopy } from '../../composables/useCopy.ts'\n\nconst props = withDefaults(defineProps<{\n\t/** Copied value's value */\n\tlabel?: string\n\t/** The value to be copied */\n\tvalue: string\n\t/** Native disabled attribute */\n\tdisabled?: boolean\n}>(), {\n\tlabel: undefined,\n\tdisabled: false,\n})\n\nconst emit = defineEmits<{\n\t/** Value has been successfully copied */\n\t(event: 'copy'): void\n}>()\n\nconst { isCopied, copy, icon, altText } = useCopy(() => props.value)\n\nwhenever(isCopied, () => emit('copy'))\n</script>\n\n<template>\n\t<NcFormBoxButton\n\t\t:disabled=\"disabled\"\n\t\tinverted-accent\n\t\t@click=\"copy\">\n\t\t<template v-if=\"$slots.default || label\" #default>\n\t\t\t<!-- @slot Custom label content -->\n\t\t\t<span class=\"hidden-visually\">\n\t\t\t\t{{ altText }}\n\t\t\t</span>\n\t\t\t<slot>\n\t\t\t\t{{ label }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template #description>\n\t\t\t{{ value }}\n\t\t</template>\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper :path=\"icon\" inline />\n\t\t</template>\n\t</NcFormBoxButton>\n</template>\n\n<docs>\n### General\n\n`NcFormBoxButton` set up to be a copy button.\n\n```vue\n<template>\n\t<NcFormGroup label=\"CalDAV\" description=\"Access Nextcloud calendars from other apps and devices\">\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxCopyButton\n\t\t\t\tlabel=\"CalDAV URL\"\n\t\t\t\tvalue=\"https://cloud.example.com/remote.php/dav/\" />\n\t\t\t<NcFormBoxCopyButton\n\t\t\t\tlabel=\"Server Address for iOS and macOS\"\n\t\t\t\tvalue=\"https://cloud.example.com/remote.php/dav/principals/users/user/\" />\n\t\t</NcFormBox>\n\t</NcFormGroup>\n</template>\n```\n</docs>\n"],"names":["useCopy","whenever"],"mappings":";;;;;;;;;;;;;;;;;AA4BA,UAAM,EAAE,UAAU,MAAM,MAAM,YAAYA,QAAAA,QAAQ,MAAM,MAAM,KAAK;AAEnEC,SAAAA,SAAS,UAAU,MAAM,KAAK,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcFormBoxCopyButton-DtJpZ971.mjs → NcFormBoxCopyButton-BkunQ3me.mjs}

@@ -2,7 +2,7 @@ import { defineComponent } from "vue";
 import { whenever } from "@vueuse/core";
 import { N as NcFormBoxButton } from "./NcFormBoxButton-BQi11xQX.mjs";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-Bui9PhAS.mjs";
-import { u as useCopy } from "./useCopy-CYjunv08.mjs";
+import { u as useCopy } from "./useCopy-DDDe5RYH.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcFormBoxCopyButton",
@@ -44,4 +44,4 @@ const NcFormBoxCopyButton = __component__.exports;
 export {
   NcFormBoxCopyButton as N
 };
-//# sourceMappingURL=NcFormBoxCopyButton-DtJpZ971.mjs.map
+//# sourceMappingURL=NcFormBoxCopyButton-BkunQ3me.mjs.map

package/dist/chunks/{NcFormBoxCopyButton-DtJpZ971.mjs.map → NcFormBoxCopyButton-BkunQ3me.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcFormBoxCopyButton-DtJpZ971.mjs","sources":["../../src/components/NcFormBoxCopyButton/NcFormBoxCopyButton.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 { whenever } from '@vueuse/core'\nimport NcFormBoxButton from '../NcFormBoxButton/NcFormBoxButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useCopy } from '../../composables/useCopy.ts'\n\nconst props = withDefaults(defineProps<{\n\t/** Copied value's value */\n\tlabel?: string\n\t/** The value to be copied */\n\tvalue: string\n\t/** Native disabled attribute */\n\tdisabled?: boolean\n}>(), {\n\tlabel: undefined,\n\tdisabled: false,\n})\n\nconst emit = defineEmits<{\n\t/** Value has been successfully copied */\n\t(event: 'copy'): void\n}>()\n\nconst { isCopied, copy, icon, altText } = useCopy(() => props.value)\n\nwhenever(isCopied, () => emit('copy'))\n</script>\n\n<template>\n\t<NcFormBoxButton\n\t\t:disabled=\"disabled\"\n\t\tinverted-accent\n\t\t@click=\"copy\">\n\t\t<template v-if=\"$slots.default || label\" #default>\n\t\t\t<!-- @slot Custom label content -->\n\t\t\t<span class=\"hidden-visually\">\n\t\t\t\t{{ altText }}\n\t\t\t</span>\n\t\t\t<slot>\n\t\t\t\t{{ label }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template #description>\n\t\t\t{{ value }}\n\t\t</template>\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper :path=\"icon\" inline />\n\t\t</template>\n\t</NcFormBoxButton>\n</template>\n\n<docs>\n### General\n\n`NcFormBoxButton` set up to be a copy button.\n\n```vue\n<template>\n\t<NcFormGroup label=\"CalDAV\" description=\"Access Nextcloud calendars from other apps and devices\">\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxCopyButton\n\t\t\t\tlabel=\"CalDAV URL\"\n\t\t\t\tvalue=\"https://cloud.example.com/remote.php/dav/\" />\n\t\t\t<NcFormBoxCopyButton\n\t\t\t\tlabel=\"Server Address for iOS and macOS\"\n\t\t\t\tvalue=\"https://cloud.example.com/remote.php/dav/principals/users/user/\" />\n\t\t</NcFormBox>\n\t</NcFormGroup>\n</template>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA4BA,UAAM,EAAE,UAAU,MAAM,MAAM,YAAY,QAAQ,MAAM,MAAM,KAAK;AAEnE,aAAS,UAAU,MAAM,KAAK,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcFormBoxCopyButton-BkunQ3me.mjs","sources":["../../src/components/NcFormBoxCopyButton/NcFormBoxCopyButton.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 { whenever } from '@vueuse/core'\nimport NcFormBoxButton from '../NcFormBoxButton/NcFormBoxButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useCopy } from '../../composables/useCopy.ts'\n\nconst props = withDefaults(defineProps<{\n\t/** Copied value's value */\n\tlabel?: string\n\t/** The value to be copied */\n\tvalue: string\n\t/** Native disabled attribute */\n\tdisabled?: boolean\n}>(), {\n\tlabel: undefined,\n\tdisabled: false,\n})\n\nconst emit = defineEmits<{\n\t/** Value has been successfully copied */\n\t(event: 'copy'): void\n}>()\n\nconst { isCopied, copy, icon, altText } = useCopy(() => props.value)\n\nwhenever(isCopied, () => emit('copy'))\n</script>\n\n<template>\n\t<NcFormBoxButton\n\t\t:disabled=\"disabled\"\n\t\tinverted-accent\n\t\t@click=\"copy\">\n\t\t<template v-if=\"$slots.default || label\" #default>\n\t\t\t<!-- @slot Custom label content -->\n\t\t\t<span class=\"hidden-visually\">\n\t\t\t\t{{ altText }}\n\t\t\t</span>\n\t\t\t<slot>\n\t\t\t\t{{ label }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template #description>\n\t\t\t{{ value }}\n\t\t</template>\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper :path=\"icon\" inline />\n\t\t</template>\n\t</NcFormBoxButton>\n</template>\n\n<docs>\n### General\n\n`NcFormBoxButton` set up to be a copy button.\n\n```vue\n<template>\n\t<NcFormGroup label=\"CalDAV\" description=\"Access Nextcloud calendars from other apps and devices\">\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxCopyButton\n\t\t\t\tlabel=\"CalDAV URL\"\n\t\t\t\tvalue=\"https://cloud.example.com/remote.php/dav/\" />\n\t\t\t<NcFormBoxCopyButton\n\t\t\t\tlabel=\"Server Address for iOS and macOS\"\n\t\t\t\tvalue=\"https://cloud.example.com/remote.php/dav/principals/users/user/\" />\n\t\t</NcFormBox>\n\t</NcFormGroup>\n</template>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA4BA,UAAM,EAAE,UAAU,MAAM,MAAM,YAAY,QAAQ,MAAM,MAAM,KAAK;AAEnE,aAAS,UAAU,MAAM,KAAK,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcHeaderButton-Dvo1_Bwc.mjs → NcHeaderButton-BI15lyn_.mjs}

@@ -1,6 +1,6 @@
 import '../assets/NcHeaderButton-DI-1Gsph.css';
 import { G as GenRandomId } from "./GenRandomId-F5ebeBB_.mjs";
-import { N as NcButton } from "./NcButton-Dz2O6cSU.mjs";
+import { N as NcButton } from "./NcButton-BaZAY-tN.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const _sfc_main = {
   name: "NcHeaderButton",
@@ -61,4 +61,4 @@ const NcHeaderButton = __component__.exports;
 export {
   NcHeaderButton as N
 };
-//# sourceMappingURL=NcHeaderButton-Dvo1_Bwc.mjs.map
+//# sourceMappingURL=NcHeaderButton-BI15lyn_.mjs.map

package/dist/chunks/{NcHeaderButton-Dvo1_Bwc.mjs.map → NcHeaderButton-BI15lyn_.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcHeaderButton-Dvo1_Bwc.mjs","sources":["../../src/components/NcHeaderButton/NcHeaderButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used in the Nextcloud top header,\nsimilar to the NcHeaderMenu but to be used when only a trigger button is needed, e.g. when opening a dialog.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderButton id=\"search-dialog\"\n\t\t\taria-label=\"Search\"\n\t\t\t@click=\"showDialog = true\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t</NcHeaderButton>\n\n\t\t<NcDialog name=\"Search\"\n\t\t\tsize=\"normal\"\n\t\t\t:open.sync=\"showDialog\">\n\t\t\t<NcTextField label=\"Search for files, comments, contacts …\"\n\t\t\t\ttype=\"search\"\n\t\t\t\t:value.sync=\"query\" />\n\t\t\t<NcEmptyContent name=\"Search\"\n\t\t\t\t:description=\"query ? `No results for '${query}'` : 'Start typing to search'\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</NcDialog>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tquery: '',\n\t\t}\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n\theight: var(--header-height, 50px);\n\tpadding-inline-end: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<!-- We need a wrapper for server styles to apply -->\n\t<div :id=\"id\" class=\"header-menu\">\n\t\t<NcButton\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:aria-describedby=\"descriptionId\"\n\t\t\tsize=\"large\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click.prevent=\"$emit('click', $event)\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Icon trigger slot. Make sure the svg path\n\t\t\t\tis at least 16px. Usually mdi icon works at 20px -->\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span\n\t\t\tv-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\t</div>\n</template>\n\n<script>\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcHeaderButton',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Unique id for this menu\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * `aria-label` attribute of the button\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Additional visually hidden description text for the button\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'click',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../NcHeaderMenu/header-menu__trigger.scss';\n</style>\n"],"names":[],"mappings":";;;AA6FA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,eAAA,YAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcHeaderButton-BI15lyn_.mjs","sources":["../../src/components/NcHeaderButton/NcHeaderButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used in the Nextcloud top header,\nsimilar to the NcHeaderMenu but to be used when only a trigger button is needed, e.g. when opening a dialog.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderButton id=\"search-dialog\"\n\t\t\taria-label=\"Search\"\n\t\t\t@click=\"showDialog = true\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t</NcHeaderButton>\n\n\t\t<NcDialog name=\"Search\"\n\t\t\tsize=\"normal\"\n\t\t\t:open.sync=\"showDialog\">\n\t\t\t<NcTextField label=\"Search for files, comments, contacts …\"\n\t\t\t\ttype=\"search\"\n\t\t\t\t:value.sync=\"query\" />\n\t\t\t<NcEmptyContent name=\"Search\"\n\t\t\t\t:description=\"query ? `No results for '${query}'` : 'Start typing to search'\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</NcDialog>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tquery: '',\n\t\t}\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n\theight: var(--header-height, 50px);\n\tpadding-inline-end: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<!-- We need a wrapper for server styles to apply -->\n\t<div :id=\"id\" class=\"header-menu\">\n\t\t<NcButton\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:aria-describedby=\"descriptionId\"\n\t\t\tsize=\"large\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click.prevent=\"$emit('click', $event)\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Icon trigger slot. Make sure the svg path\n\t\t\t\tis at least 16px. Usually mdi icon works at 20px -->\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span\n\t\t\tv-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\t</div>\n</template>\n\n<script>\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcHeaderButton',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Unique id for this menu\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * `aria-label` attribute of the button\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Additional visually hidden description text for the button\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'click',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../NcHeaderMenu/header-menu__trigger.scss';\n</style>\n"],"names":[],"mappings":";;;AA6FA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,eAAA,YAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcHeaderButton-CpWQbzfF.cjs → NcHeaderButton-KtkQRinp.cjs}

@@ -1,7 +1,7 @@
 require('../assets/NcHeaderButton-DI-1Gsph.css');
 "use strict";
 const GenRandomId = require("./GenRandomId-D7iOvpZS.cjs");
-const NcButton = require("./NcButton-CuFElrFD.cjs");
+const NcButton = require("./NcButton-Dszi1Apb.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const _sfc_main = {
   name: "NcHeaderButton",
@@ -60,4 +60,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcHeaderButton = __component__.exports;
 exports.NcHeaderButton = NcHeaderButton;
-//# sourceMappingURL=NcHeaderButton-CpWQbzfF.cjs.map
+//# sourceMappingURL=NcHeaderButton-KtkQRinp.cjs.map

package/dist/chunks/{NcHeaderButton-CpWQbzfF.cjs.map → NcHeaderButton-KtkQRinp.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcHeaderButton-CpWQbzfF.cjs","sources":["../../src/components/NcHeaderButton/NcHeaderButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used in the Nextcloud top header,\nsimilar to the NcHeaderMenu but to be used when only a trigger button is needed, e.g. when opening a dialog.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderButton id=\"search-dialog\"\n\t\t\taria-label=\"Search\"\n\t\t\t@click=\"showDialog = true\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t</NcHeaderButton>\n\n\t\t<NcDialog name=\"Search\"\n\t\t\tsize=\"normal\"\n\t\t\t:open.sync=\"showDialog\">\n\t\t\t<NcTextField label=\"Search for files, comments, contacts …\"\n\t\t\t\ttype=\"search\"\n\t\t\t\t:value.sync=\"query\" />\n\t\t\t<NcEmptyContent name=\"Search\"\n\t\t\t\t:description=\"query ? `No results for '${query}'` : 'Start typing to search'\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</NcDialog>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tquery: '',\n\t\t}\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n\theight: var(--header-height, 50px);\n\tpadding-inline-end: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<!-- We need a wrapper for server styles to apply -->\n\t<div :id=\"id\" class=\"header-menu\">\n\t\t<NcButton\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:aria-describedby=\"descriptionId\"\n\t\t\tsize=\"large\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click.prevent=\"$emit('click', $event)\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Icon trigger slot. Make sure the svg path\n\t\t\t\tis at least 16px. Usually mdi icon works at 20px -->\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span\n\t\t\tv-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\t</div>\n</template>\n\n<script>\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcHeaderButton',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Unique id for this menu\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * `aria-label` attribute of the button\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Additional visually hidden description text for the button\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'click',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../NcHeaderMenu/header-menu__trigger.scss';\n</style>\n"],"names":["NcButton","GenRandomId"],"mappings":";;;;AA6FA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAA,SAAAA;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,eAAAC,YAAAA,YAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcHeaderButton-KtkQRinp.cjs","sources":["../../src/components/NcHeaderButton/NcHeaderButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used in the Nextcloud top header,\nsimilar to the NcHeaderMenu but to be used when only a trigger button is needed, e.g. when opening a dialog.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderButton id=\"search-dialog\"\n\t\t\taria-label=\"Search\"\n\t\t\t@click=\"showDialog = true\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t</NcHeaderButton>\n\n\t\t<NcDialog name=\"Search\"\n\t\t\tsize=\"normal\"\n\t\t\t:open.sync=\"showDialog\">\n\t\t\t<NcTextField label=\"Search for files, comments, contacts …\"\n\t\t\t\ttype=\"search\"\n\t\t\t\t:value.sync=\"query\" />\n\t\t\t<NcEmptyContent name=\"Search\"\n\t\t\t\t:description=\"query ? `No results for '${query}'` : 'Start typing to search'\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</NcDialog>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tquery: '',\n\t\t}\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n\theight: var(--header-height, 50px);\n\tpadding-inline-end: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<!-- We need a wrapper for server styles to apply -->\n\t<div :id=\"id\" class=\"header-menu\">\n\t\t<NcButton\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:aria-describedby=\"descriptionId\"\n\t\t\tsize=\"large\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click.prevent=\"$emit('click', $event)\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Icon trigger slot. Make sure the svg path\n\t\t\t\tis at least 16px. Usually mdi icon works at 20px -->\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span\n\t\t\tv-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\t</div>\n</template>\n\n<script>\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcHeaderButton',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Unique id for this menu\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * `aria-label` attribute of the button\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Additional visually hidden description text for the button\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'click',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../NcHeaderMenu/header-menu__trigger.scss';\n</style>\n"],"names":["NcButton","GenRandomId"],"mappings":";;;;AA6FA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAA,SAAAA;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,eAAAC,YAAAA,YAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcHeaderMenu-Cuh8ay0F.mjs → NcHeaderMenu-B2gYavD4.mjs}

@@ -20,7 +20,7 @@ import "@nextcloud/capabilities";
 import "./logger-D3RVzcfQ.mjs";
 import { g as getTrapStack } from "./focusTrap-HJQ4pqHV.mjs";
 import { G as GenRandomId } from "./GenRandomId-F5ebeBB_.mjs";
-import { N as NcButton } from "./NcButton-Dz2O6cSU.mjs";
+import { N as NcButton } from "./NcButton-BaZAY-tN.mjs";
 const _sfc_main = {
   name: "NcHeaderMenu",
   components: {
@@ -231,4 +231,4 @@ const NcHeaderMenu = __component__.exports;
 export {
   NcHeaderMenu as N
 };
-//# sourceMappingURL=NcHeaderMenu-Cuh8ay0F.mjs.map
+//# sourceMappingURL=NcHeaderMenu-B2gYavD4.mjs.map

package/dist/chunks/{NcHeaderMenu-Cuh8ay0F.mjs.map → NcHeaderMenu-B2gYavD4.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcHeaderMenu-Cuh8ay0F.mjs","sources":["../../src/components/NcHeaderMenu/NcHeaderMenu.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used in the Nextcloud top header.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderMenu id=\"search\"\n\t\t\taria-label=\"Search\">\n\t\t\t<template #trigger>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t\t<div>\n\t\t\t\t<NcTextField label=\"Search for files, comments, contacts …\"\n\t\t\t\tstyle=\"padding-inline: 8px;\"\n\t\t\t\ttype=\"search\"\n\t\t\t\t:value.sync=\"query\" />\n\t\t\t\t<NcEmptyContent\n\t\t\t\t\tname=\"Search\"\n\t\t\t\t\t:description=\"query ? `No results for '${query}'` : 'Start typing to search'\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Magnify />\n\t\t\t\t\t</template>\n\t\t\t\t</NcEmptyContent>\n\t\t\t</div>\n\t\t</NcHeaderMenu>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tquery: '',\n\t\t}\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n\theight: var(--header-height, 50px);\n\tpadding-inline-end: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<component\n\t\t:is=\"wrapperTag\"\n\t\t:id=\"id\"\n\t\tref=\"headerMenu\"\n\t\tv-click-outside=\"clickOutsideConfig\"\n\t\t:aria-labelledby=\"isNav ? triggerId : null\"\n\t\t:class=\"{ 'header-menu--opened': opened }\"\n\t\tclass=\"header-menu\"\n\t\tv-on=\"listeners\">\n\t\t<!-- Trigger -->\n\t\t<NcButton\n\t\t\t:id=\"isNav ? triggerId : null\"\n\t\t\tref=\"trigger\"\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\t:aria-controls=\"`header-menu-${id}`\"\n\t\t\t:aria-describedby=\"description ? descriptionId : null\"\n\t\t\t:aria-expanded=\"opened.toString()\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\tsize=\"large\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click.prevent=\"toggleMenu\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Icon trigger slot. Make sure the svg path\n\t\t\t\tis at least 16px. Usually mdi icon works at 20px -->\n\t\t\t\t<slot name=\"trigger\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span\n\t\t\tv-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\n\t\t<!-- Visual triangle -->\n\t\t<div v-show=\"opened\" class=\"header-menu__carret\" />\n\n\t\t<!-- Menu opened content -->\n\t\t<div\n\t\t\tv-show=\"opened\"\n\t\t\t:id=\"`header-menu-${id}`\"\n\t\t\tclass=\"header-menu__wrapper\">\n\t\t\t<div ref=\"content\" class=\"header-menu__content\">\n\t\t\t\t<!-- @slot Main content -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport { createFocusTrap } from 'focus-trap'\nimport { ref } from 'vue'\nimport { useTrapStackControl } from '../../composables/useTrapStackControl.ts'\nimport { clickOutsideOptions } from '../../mixins/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcHeaderMenu',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\n\tmixins: [\n\t\tclickOutsideOptions,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Unique id for this menu\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * aria-label attribute of the menu open button\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Current menu open state\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Pass `true` if the header menu is used for website navigation\n\t\t *\n\t\t * The wrapper tag will be set to `nav` and its `aria-labelledby`\n\t\t * will be associated with the menu open button\n\t\t */\n\t\tisNav: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Additional visually hidden description text for the menu\n\t\t * open button\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'close',\n\t\t'closed',\n\t\t'open',\n\t\t'opened',\n\t\t'update:open',\n\t\t'cancel',\n\t],\n\n\tsetup(props) {\n\t\tconst opened = ref(props.open)\n\n\t\t// When component has its own custom focus management\n\t\t// The global focus trap stack should be paused\n\t\tuseTrapStackControl(opened, {\n\t\t\tdisabled: () => !props.isNav,\n\t\t})\n\n\t\treturn {\n\t\t\topened,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tfocusTrap: null,\n\t\t\tshortcutsDisabled: window.OCP?.Accessibility?.disableKeyboardShortcuts?.(),\n\t\t\ttriggerId: GenRandomId(),\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\twrapperTag() {\n\t\t\treturn this.isNav ? 'nav' : 'div'\n\t\t},\n\n\t\tclickOutsideConfig() {\n\t\t\treturn [\n\t\t\t\tthis.closeMenu,\n\t\t\t\tthis.clickOutsideOptions,\n\t\t\t]\n\t\t},\n\n\t\tlisteners() {\n\t\t\tif (this.isNav) {\n\t\t\t\treturn {\n\t\t\t\t\tfocusout: this.onFocusOut,\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(open) {\n\t\t\tif (open) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tdocument.addEventListener('keydown', this.onKeyDown)\n\t},\n\n\tbeforeDestroy() {\n\t\tdocument.removeEventListener('keydown', this.onKeyDown)\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Toggle the current menu open state\n\t\t */\n\t\ttoggleMenu() {\n\t\t\t// Toggling current state\n\t\t\tif (!this.opened) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Close the current menu\n\t\t *\n\t\t * @param {boolean} cancelled emit a cancel event instead of close\n\t\t */\n\t\tcloseMenu(cancelled = false) {\n\t\t\t// Close the menu\n\t\t\tthis.opened = false\n\t\t\tthis.$emit(cancelled ? 'cancel' : 'close')\n\t\t\tthis.$emit('update:open', false)\n\n\t\t\t// Kill focus trap\n\t\t\tthis.clearFocusTrap()\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$emit('closed')\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * Open the current menu\n\t\t */\n\t\topenMenu() {\n\t\t\t// Open the menu\n\t\t\tthis.opened = true\n\t\t\tthis.$emit('open')\n\t\t\tthis.$emit('update:open', true)\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.useFocusTrap()\n\t\t\t\tthis.$emit('opened')\n\t\t\t})\n\t\t},\n\n\t\tonKeyDown(event) {\n\t\t\tif (this.shortcutsDisabled || !this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If escape have been pressed, we close\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tevent.preventDefault()\n\n\t\t\t\t/** User cancelled the menu by pressing escape */\n\t\t\t\tthis.closeMenu(true)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @param {FocusEvent} event The focus event\n\t\t */\n\t\tonFocusOut(event) {\n\t\t\tif (!this.$refs.headerMenu.contains(event.relatedTarget)) {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t * Shall only be used when all children are mounted\n\t\t * and available in the DOM. We use $nextTick for that.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\tif (this.isNav || this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Init focus trap\n\t\t\tconst contentContainer = this.$refs.content\n\t\t\tthis.focusTrap = createFocusTrap(contentContainer, {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tfallbackFocus: this.$refs.trigger.$el,\n\t\t\t})\n\t\t\tthis.focusTrap.activate()\n\t\t},\n\n\t\tclearFocusTrap() {\n\t\t\tthis.focusTrap?.deactivate()\n\t\t\tthis.focusTrap = null\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// content inner and outer margin\n// Also used for menu top-right positioning\n$externalMargin: 8px;\n\n@use './header-menu__trigger.scss';\n\n.header-menu {\n\t&__wrapper {\n\t\tposition: fixed;\n\t\tz-index: 2000;\n\t\ttop: var(--header-height);\n\t\tinset-inline-end: 0;\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $externalMargin;\n\t\tborder-radius: 0 0 var(--border-radius) var(--border-radius);\n\t\tborder-radius: var(--border-radius-large);\n\t\tbackground-color: var(--color-main-background);\n\n\t\tfilter: drop-shadow(0 1px 5px var(--color-box-shadow));\n\t}\n\n\t&__carret {\n\t\tposition: absolute;\n\t\tz-index: 2001; // Because __wrapper is 2000.\n\t\tbottom: 0;\n\t\tinset-inline-start: calc(50% - 10px);\n\t\twidth: 0;\n\t\theight: 0;\n\t\tcontent: ' ';\n\t\tpointer-events: none;\n\t\tborder: 10px solid transparent;\n\t\tborder-bottom-color: var(--color-main-background);\n\t}\n\n\t&__content {\n\t\toverflow: auto;\n\t\twidth: 350px;\n\t\tmax-width: calc(100vw - 2 * $externalMargin);\n\t\tmin-height: calc(var(--default-clickable-area) * 1.5);\n\t\tmax-height: calc(100vh - var(--header-height) * 2);\n\t\t:deep(.empty-content) {\n\t\t\tmargin: 12vh 10px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["ClickOutside"],"mappings":"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"}
+{"version":3,"file":"NcHeaderMenu-B2gYavD4.mjs","sources":["../../src/components/NcHeaderMenu/NcHeaderMenu.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used in the Nextcloud top header.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderMenu id=\"search\"\n\t\t\taria-label=\"Search\">\n\t\t\t<template #trigger>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t\t<div>\n\t\t\t\t<NcTextField label=\"Search for files, comments, contacts …\"\n\t\t\t\tstyle=\"padding-inline: 8px;\"\n\t\t\t\ttype=\"search\"\n\t\t\t\t:value.sync=\"query\" />\n\t\t\t\t<NcEmptyContent\n\t\t\t\t\tname=\"Search\"\n\t\t\t\t\t:description=\"query ? `No results for '${query}'` : 'Start typing to search'\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Magnify />\n\t\t\t\t\t</template>\n\t\t\t\t</NcEmptyContent>\n\t\t\t</div>\n\t\t</NcHeaderMenu>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tquery: '',\n\t\t}\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n\theight: var(--header-height, 50px);\n\tpadding-inline-end: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<component\n\t\t:is=\"wrapperTag\"\n\t\t:id=\"id\"\n\t\tref=\"headerMenu\"\n\t\tv-click-outside=\"clickOutsideConfig\"\n\t\t:aria-labelledby=\"isNav ? triggerId : null\"\n\t\t:class=\"{ 'header-menu--opened': opened }\"\n\t\tclass=\"header-menu\"\n\t\tv-on=\"listeners\">\n\t\t<!-- Trigger -->\n\t\t<NcButton\n\t\t\t:id=\"isNav ? triggerId : null\"\n\t\t\tref=\"trigger\"\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\t:aria-controls=\"`header-menu-${id}`\"\n\t\t\t:aria-describedby=\"description ? descriptionId : null\"\n\t\t\t:aria-expanded=\"opened.toString()\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\tsize=\"large\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click.prevent=\"toggleMenu\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Icon trigger slot. Make sure the svg path\n\t\t\t\tis at least 16px. Usually mdi icon works at 20px -->\n\t\t\t\t<slot name=\"trigger\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span\n\t\t\tv-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\n\t\t<!-- Visual triangle -->\n\t\t<div v-show=\"opened\" class=\"header-menu__carret\" />\n\n\t\t<!-- Menu opened content -->\n\t\t<div\n\t\t\tv-show=\"opened\"\n\t\t\t:id=\"`header-menu-${id}`\"\n\t\t\tclass=\"header-menu__wrapper\">\n\t\t\t<div ref=\"content\" class=\"header-menu__content\">\n\t\t\t\t<!-- @slot Main content -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport { createFocusTrap } from 'focus-trap'\nimport { ref } from 'vue'\nimport { useTrapStackControl } from '../../composables/useTrapStackControl.ts'\nimport { clickOutsideOptions } from '../../mixins/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcHeaderMenu',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\n\tmixins: [\n\t\tclickOutsideOptions,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Unique id for this menu\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * aria-label attribute of the menu open button\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Current menu open state\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Pass `true` if the header menu is used for website navigation\n\t\t *\n\t\t * The wrapper tag will be set to `nav` and its `aria-labelledby`\n\t\t * will be associated with the menu open button\n\t\t */\n\t\tisNav: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Additional visually hidden description text for the menu\n\t\t * open button\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'close',\n\t\t'closed',\n\t\t'open',\n\t\t'opened',\n\t\t'update:open',\n\t\t'cancel',\n\t],\n\n\tsetup(props) {\n\t\tconst opened = ref(props.open)\n\n\t\t// When component has its own custom focus management\n\t\t// The global focus trap stack should be paused\n\t\tuseTrapStackControl(opened, {\n\t\t\tdisabled: () => !props.isNav,\n\t\t})\n\n\t\treturn {\n\t\t\topened,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tfocusTrap: null,\n\t\t\tshortcutsDisabled: window.OCP?.Accessibility?.disableKeyboardShortcuts?.(),\n\t\t\ttriggerId: GenRandomId(),\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\twrapperTag() {\n\t\t\treturn this.isNav ? 'nav' : 'div'\n\t\t},\n\n\t\tclickOutsideConfig() {\n\t\t\treturn [\n\t\t\t\tthis.closeMenu,\n\t\t\t\tthis.clickOutsideOptions,\n\t\t\t]\n\t\t},\n\n\t\tlisteners() {\n\t\t\tif (this.isNav) {\n\t\t\t\treturn {\n\t\t\t\t\tfocusout: this.onFocusOut,\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(open) {\n\t\t\tif (open) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tdocument.addEventListener('keydown', this.onKeyDown)\n\t},\n\n\tbeforeDestroy() {\n\t\tdocument.removeEventListener('keydown', this.onKeyDown)\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Toggle the current menu open state\n\t\t */\n\t\ttoggleMenu() {\n\t\t\t// Toggling current state\n\t\t\tif (!this.opened) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Close the current menu\n\t\t *\n\t\t * @param {boolean} cancelled emit a cancel event instead of close\n\t\t */\n\t\tcloseMenu(cancelled = false) {\n\t\t\t// Close the menu\n\t\t\tthis.opened = false\n\t\t\tthis.$emit(cancelled ? 'cancel' : 'close')\n\t\t\tthis.$emit('update:open', false)\n\n\t\t\t// Kill focus trap\n\t\t\tthis.clearFocusTrap()\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$emit('closed')\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * Open the current menu\n\t\t */\n\t\topenMenu() {\n\t\t\t// Open the menu\n\t\t\tthis.opened = true\n\t\t\tthis.$emit('open')\n\t\t\tthis.$emit('update:open', true)\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.useFocusTrap()\n\t\t\t\tthis.$emit('opened')\n\t\t\t})\n\t\t},\n\n\t\tonKeyDown(event) {\n\t\t\tif (this.shortcutsDisabled || !this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If escape have been pressed, we close\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tevent.preventDefault()\n\n\t\t\t\t/** User cancelled the menu by pressing escape */\n\t\t\t\tthis.closeMenu(true)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @param {FocusEvent} event The focus event\n\t\t */\n\t\tonFocusOut(event) {\n\t\t\tif (!this.$refs.headerMenu.contains(event.relatedTarget)) {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t * Shall only be used when all children are mounted\n\t\t * and available in the DOM. We use $nextTick for that.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\tif (this.isNav || this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Init focus trap\n\t\t\tconst contentContainer = this.$refs.content\n\t\t\tthis.focusTrap = createFocusTrap(contentContainer, {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tfallbackFocus: this.$refs.trigger.$el,\n\t\t\t})\n\t\t\tthis.focusTrap.activate()\n\t\t},\n\n\t\tclearFocusTrap() {\n\t\t\tthis.focusTrap?.deactivate()\n\t\t\tthis.focusTrap = null\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// content inner and outer margin\n// Also used for menu top-right positioning\n$externalMargin: 8px;\n\n@use './header-menu__trigger.scss';\n\n.header-menu {\n\t&__wrapper {\n\t\tposition: fixed;\n\t\tz-index: 2000;\n\t\ttop: var(--header-height);\n\t\tinset-inline-end: 0;\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $externalMargin;\n\t\tborder-radius: 0 0 var(--border-radius) var(--border-radius);\n\t\tborder-radius: var(--border-radius-large);\n\t\tbackground-color: var(--color-main-background);\n\n\t\tfilter: drop-shadow(0 1px 5px var(--color-box-shadow));\n\t}\n\n\t&__carret {\n\t\tposition: absolute;\n\t\tz-index: 2001; // Because __wrapper is 2000.\n\t\tbottom: 0;\n\t\tinset-inline-start: calc(50% - 10px);\n\t\twidth: 0;\n\t\theight: 0;\n\t\tcontent: ' ';\n\t\tpointer-events: none;\n\t\tborder: 10px solid transparent;\n\t\tborder-bottom-color: var(--color-main-background);\n\t}\n\n\t&__content {\n\t\toverflow: auto;\n\t\twidth: 350px;\n\t\tmax-width: calc(100vw - 2 * $externalMargin);\n\t\tmin-height: calc(var(--default-clickable-area) * 1.5);\n\t\tmax-height: calc(100vh - var(--header-height) * 2);\n\t\t:deep(.empty-content) {\n\t\t\tmargin: 12vh 10px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["ClickOutside"],"mappings":"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"}

package/dist/chunks/{NcHeaderMenu-Cmu-m_aM.cjs → NcHeaderMenu-Bl4_eT2K.cjs}

@@ -21,7 +21,7 @@ require("@nextcloud/capabilities");
 require("./logger-3HuiEIF6.cjs");
 const focusTrap$1 = require("./focusTrap-DUTqW_IG.cjs");
 const GenRandomId = require("./GenRandomId-D7iOvpZS.cjs");
-const NcButton = require("./NcButton-CuFElrFD.cjs");
+const NcButton = require("./NcButton-Dszi1Apb.cjs");
 const _sfc_main = {
   name: "NcHeaderMenu",
   components: {
@@ -230,4 +230,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcHeaderMenu = __component__.exports;
 exports.NcHeaderMenu = NcHeaderMenu;
-//# sourceMappingURL=NcHeaderMenu-Cmu-m_aM.cjs.map
+//# sourceMappingURL=NcHeaderMenu-Bl4_eT2K.cjs.map

package/dist/chunks/{NcHeaderMenu-Cmu-m_aM.cjs.map → NcHeaderMenu-Bl4_eT2K.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcHeaderMenu-Cmu-m_aM.cjs","sources":["../../src/components/NcHeaderMenu/NcHeaderMenu.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used in the Nextcloud top header.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderMenu id=\"search\"\n\t\t\taria-label=\"Search\">\n\t\t\t<template #trigger>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t\t<div>\n\t\t\t\t<NcTextField label=\"Search for files, comments, contacts …\"\n\t\t\t\tstyle=\"padding-inline: 8px;\"\n\t\t\t\ttype=\"search\"\n\t\t\t\t:value.sync=\"query\" />\n\t\t\t\t<NcEmptyContent\n\t\t\t\t\tname=\"Search\"\n\t\t\t\t\t:description=\"query ? `No results for '${query}'` : 'Start typing to search'\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Magnify />\n\t\t\t\t\t</template>\n\t\t\t\t</NcEmptyContent>\n\t\t\t</div>\n\t\t</NcHeaderMenu>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tquery: '',\n\t\t}\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n\theight: var(--header-height, 50px);\n\tpadding-inline-end: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<component\n\t\t:is=\"wrapperTag\"\n\t\t:id=\"id\"\n\t\tref=\"headerMenu\"\n\t\tv-click-outside=\"clickOutsideConfig\"\n\t\t:aria-labelledby=\"isNav ? triggerId : null\"\n\t\t:class=\"{ 'header-menu--opened': opened }\"\n\t\tclass=\"header-menu\"\n\t\tv-on=\"listeners\">\n\t\t<!-- Trigger -->\n\t\t<NcButton\n\t\t\t:id=\"isNav ? triggerId : null\"\n\t\t\tref=\"trigger\"\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\t:aria-controls=\"`header-menu-${id}`\"\n\t\t\t:aria-describedby=\"description ? descriptionId : null\"\n\t\t\t:aria-expanded=\"opened.toString()\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\tsize=\"large\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click.prevent=\"toggleMenu\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Icon trigger slot. Make sure the svg path\n\t\t\t\tis at least 16px. Usually mdi icon works at 20px -->\n\t\t\t\t<slot name=\"trigger\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span\n\t\t\tv-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\n\t\t<!-- Visual triangle -->\n\t\t<div v-show=\"opened\" class=\"header-menu__carret\" />\n\n\t\t<!-- Menu opened content -->\n\t\t<div\n\t\t\tv-show=\"opened\"\n\t\t\t:id=\"`header-menu-${id}`\"\n\t\t\tclass=\"header-menu__wrapper\">\n\t\t\t<div ref=\"content\" class=\"header-menu__content\">\n\t\t\t\t<!-- @slot Main content -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport { createFocusTrap } from 'focus-trap'\nimport { ref } from 'vue'\nimport { useTrapStackControl } from '../../composables/useTrapStackControl.ts'\nimport { clickOutsideOptions } from '../../mixins/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcHeaderMenu',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\n\tmixins: [\n\t\tclickOutsideOptions,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Unique id for this menu\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * aria-label attribute of the menu open button\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Current menu open state\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Pass `true` if the header menu is used for website navigation\n\t\t *\n\t\t * The wrapper tag will be set to `nav` and its `aria-labelledby`\n\t\t * will be associated with the menu open button\n\t\t */\n\t\tisNav: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Additional visually hidden description text for the menu\n\t\t * open button\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'close',\n\t\t'closed',\n\t\t'open',\n\t\t'opened',\n\t\t'update:open',\n\t\t'cancel',\n\t],\n\n\tsetup(props) {\n\t\tconst opened = ref(props.open)\n\n\t\t// When component has its own custom focus management\n\t\t// The global focus trap stack should be paused\n\t\tuseTrapStackControl(opened, {\n\t\t\tdisabled: () => !props.isNav,\n\t\t})\n\n\t\treturn {\n\t\t\topened,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tfocusTrap: null,\n\t\t\tshortcutsDisabled: window.OCP?.Accessibility?.disableKeyboardShortcuts?.(),\n\t\t\ttriggerId: GenRandomId(),\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\twrapperTag() {\n\t\t\treturn this.isNav ? 'nav' : 'div'\n\t\t},\n\n\t\tclickOutsideConfig() {\n\t\t\treturn [\n\t\t\t\tthis.closeMenu,\n\t\t\t\tthis.clickOutsideOptions,\n\t\t\t]\n\t\t},\n\n\t\tlisteners() {\n\t\t\tif (this.isNav) {\n\t\t\t\treturn {\n\t\t\t\t\tfocusout: this.onFocusOut,\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(open) {\n\t\t\tif (open) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tdocument.addEventListener('keydown', this.onKeyDown)\n\t},\n\n\tbeforeDestroy() {\n\t\tdocument.removeEventListener('keydown', this.onKeyDown)\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Toggle the current menu open state\n\t\t */\n\t\ttoggleMenu() {\n\t\t\t// Toggling current state\n\t\t\tif (!this.opened) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Close the current menu\n\t\t *\n\t\t * @param {boolean} cancelled emit a cancel event instead of close\n\t\t */\n\t\tcloseMenu(cancelled = false) {\n\t\t\t// Close the menu\n\t\t\tthis.opened = false\n\t\t\tthis.$emit(cancelled ? 'cancel' : 'close')\n\t\t\tthis.$emit('update:open', false)\n\n\t\t\t// Kill focus trap\n\t\t\tthis.clearFocusTrap()\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$emit('closed')\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * Open the current menu\n\t\t */\n\t\topenMenu() {\n\t\t\t// Open the menu\n\t\t\tthis.opened = true\n\t\t\tthis.$emit('open')\n\t\t\tthis.$emit('update:open', true)\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.useFocusTrap()\n\t\t\t\tthis.$emit('opened')\n\t\t\t})\n\t\t},\n\n\t\tonKeyDown(event) {\n\t\t\tif (this.shortcutsDisabled || !this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If escape have been pressed, we close\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tevent.preventDefault()\n\n\t\t\t\t/** User cancelled the menu by pressing escape */\n\t\t\t\tthis.closeMenu(true)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @param {FocusEvent} event The focus event\n\t\t */\n\t\tonFocusOut(event) {\n\t\t\tif (!this.$refs.headerMenu.contains(event.relatedTarget)) {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t * Shall only be used when all children are mounted\n\t\t * and available in the DOM. We use $nextTick for that.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\tif (this.isNav || this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Init focus trap\n\t\t\tconst contentContainer = this.$refs.content\n\t\t\tthis.focusTrap = createFocusTrap(contentContainer, {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tfallbackFocus: this.$refs.trigger.$el,\n\t\t\t})\n\t\t\tthis.focusTrap.activate()\n\t\t},\n\n\t\tclearFocusTrap() {\n\t\t\tthis.focusTrap?.deactivate()\n\t\t\tthis.focusTrap = null\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// content inner and outer margin\n// Also used for menu top-right positioning\n$externalMargin: 8px;\n\n@use './header-menu__trigger.scss';\n\n.header-menu {\n\t&__wrapper {\n\t\tposition: fixed;\n\t\tz-index: 2000;\n\t\ttop: var(--header-height);\n\t\tinset-inline-end: 0;\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $externalMargin;\n\t\tborder-radius: 0 0 var(--border-radius) var(--border-radius);\n\t\tborder-radius: var(--border-radius-large);\n\t\tbackground-color: var(--color-main-background);\n\n\t\tfilter: drop-shadow(0 1px 5px var(--color-box-shadow));\n\t}\n\n\t&__carret {\n\t\tposition: absolute;\n\t\tz-index: 2001; // Because __wrapper is 2000.\n\t\tbottom: 0;\n\t\tinset-inline-start: calc(50% - 10px);\n\t\twidth: 0;\n\t\theight: 0;\n\t\tcontent: ' ';\n\t\tpointer-events: none;\n\t\tborder: 10px solid transparent;\n\t\tborder-bottom-color: var(--color-main-background);\n\t}\n\n\t&__content {\n\t\toverflow: auto;\n\t\twidth: 350px;\n\t\tmax-width: calc(100vw - 2 * $externalMargin);\n\t\tmin-height: calc(var(--default-clickable-area) * 1.5);\n\t\tmax-height: calc(100vh - var(--header-height) * 2);\n\t\t:deep(.empty-content) {\n\t\t\tmargin: 12vh 10px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["NcButton","ClickOutside","clickOutsideOptions","ref","useTrapStackControl","GenRandomId","createFocusTrap","getTrapStack"],"mappings":"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"}
+{"version":3,"file":"NcHeaderMenu-Bl4_eT2K.cjs","sources":["../../src/components/NcHeaderMenu/NcHeaderMenu.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used in the Nextcloud top header.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderMenu id=\"search\"\n\t\t\taria-label=\"Search\">\n\t\t\t<template #trigger>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t\t<div>\n\t\t\t\t<NcTextField label=\"Search for files, comments, contacts …\"\n\t\t\t\tstyle=\"padding-inline: 8px;\"\n\t\t\t\ttype=\"search\"\n\t\t\t\t:value.sync=\"query\" />\n\t\t\t\t<NcEmptyContent\n\t\t\t\t\tname=\"Search\"\n\t\t\t\t\t:description=\"query ? `No results for '${query}'` : 'Start typing to search'\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Magnify />\n\t\t\t\t\t</template>\n\t\t\t\t</NcEmptyContent>\n\t\t\t</div>\n\t\t</NcHeaderMenu>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tquery: '',\n\t\t}\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n\theight: var(--header-height, 50px);\n\tpadding-inline-end: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<component\n\t\t:is=\"wrapperTag\"\n\t\t:id=\"id\"\n\t\tref=\"headerMenu\"\n\t\tv-click-outside=\"clickOutsideConfig\"\n\t\t:aria-labelledby=\"isNav ? triggerId : null\"\n\t\t:class=\"{ 'header-menu--opened': opened }\"\n\t\tclass=\"header-menu\"\n\t\tv-on=\"listeners\">\n\t\t<!-- Trigger -->\n\t\t<NcButton\n\t\t\t:id=\"isNav ? triggerId : null\"\n\t\t\tref=\"trigger\"\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\t:aria-controls=\"`header-menu-${id}`\"\n\t\t\t:aria-describedby=\"description ? descriptionId : null\"\n\t\t\t:aria-expanded=\"opened.toString()\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\tsize=\"large\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click.prevent=\"toggleMenu\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Icon trigger slot. Make sure the svg path\n\t\t\t\tis at least 16px. Usually mdi icon works at 20px -->\n\t\t\t\t<slot name=\"trigger\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span\n\t\t\tv-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\n\t\t<!-- Visual triangle -->\n\t\t<div v-show=\"opened\" class=\"header-menu__carret\" />\n\n\t\t<!-- Menu opened content -->\n\t\t<div\n\t\t\tv-show=\"opened\"\n\t\t\t:id=\"`header-menu-${id}`\"\n\t\t\tclass=\"header-menu__wrapper\">\n\t\t\t<div ref=\"content\" class=\"header-menu__content\">\n\t\t\t\t<!-- @slot Main content -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport { createFocusTrap } from 'focus-trap'\nimport { ref } from 'vue'\nimport { useTrapStackControl } from '../../composables/useTrapStackControl.ts'\nimport { clickOutsideOptions } from '../../mixins/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcHeaderMenu',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\n\tmixins: [\n\t\tclickOutsideOptions,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Unique id for this menu\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * aria-label attribute of the menu open button\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Current menu open state\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Pass `true` if the header menu is used for website navigation\n\t\t *\n\t\t * The wrapper tag will be set to `nav` and its `aria-labelledby`\n\t\t * will be associated with the menu open button\n\t\t */\n\t\tisNav: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Additional visually hidden description text for the menu\n\t\t * open button\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'close',\n\t\t'closed',\n\t\t'open',\n\t\t'opened',\n\t\t'update:open',\n\t\t'cancel',\n\t],\n\n\tsetup(props) {\n\t\tconst opened = ref(props.open)\n\n\t\t// When component has its own custom focus management\n\t\t// The global focus trap stack should be paused\n\t\tuseTrapStackControl(opened, {\n\t\t\tdisabled: () => !props.isNav,\n\t\t})\n\n\t\treturn {\n\t\t\topened,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tfocusTrap: null,\n\t\t\tshortcutsDisabled: window.OCP?.Accessibility?.disableKeyboardShortcuts?.(),\n\t\t\ttriggerId: GenRandomId(),\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\twrapperTag() {\n\t\t\treturn this.isNav ? 'nav' : 'div'\n\t\t},\n\n\t\tclickOutsideConfig() {\n\t\t\treturn [\n\t\t\t\tthis.closeMenu,\n\t\t\t\tthis.clickOutsideOptions,\n\t\t\t]\n\t\t},\n\n\t\tlisteners() {\n\t\t\tif (this.isNav) {\n\t\t\t\treturn {\n\t\t\t\t\tfocusout: this.onFocusOut,\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(open) {\n\t\t\tif (open) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tdocument.addEventListener('keydown', this.onKeyDown)\n\t},\n\n\tbeforeDestroy() {\n\t\tdocument.removeEventListener('keydown', this.onKeyDown)\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Toggle the current menu open state\n\t\t */\n\t\ttoggleMenu() {\n\t\t\t// Toggling current state\n\t\t\tif (!this.opened) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Close the current menu\n\t\t *\n\t\t * @param {boolean} cancelled emit a cancel event instead of close\n\t\t */\n\t\tcloseMenu(cancelled = false) {\n\t\t\t// Close the menu\n\t\t\tthis.opened = false\n\t\t\tthis.$emit(cancelled ? 'cancel' : 'close')\n\t\t\tthis.$emit('update:open', false)\n\n\t\t\t// Kill focus trap\n\t\t\tthis.clearFocusTrap()\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$emit('closed')\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * Open the current menu\n\t\t */\n\t\topenMenu() {\n\t\t\t// Open the menu\n\t\t\tthis.opened = true\n\t\t\tthis.$emit('open')\n\t\t\tthis.$emit('update:open', true)\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.useFocusTrap()\n\t\t\t\tthis.$emit('opened')\n\t\t\t})\n\t\t},\n\n\t\tonKeyDown(event) {\n\t\t\tif (this.shortcutsDisabled || !this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If escape have been pressed, we close\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tevent.preventDefault()\n\n\t\t\t\t/** User cancelled the menu by pressing escape */\n\t\t\t\tthis.closeMenu(true)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @param {FocusEvent} event The focus event\n\t\t */\n\t\tonFocusOut(event) {\n\t\t\tif (!this.$refs.headerMenu.contains(event.relatedTarget)) {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t * Shall only be used when all children are mounted\n\t\t * and available in the DOM. We use $nextTick for that.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\tif (this.isNav || this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Init focus trap\n\t\t\tconst contentContainer = this.$refs.content\n\t\t\tthis.focusTrap = createFocusTrap(contentContainer, {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tfallbackFocus: this.$refs.trigger.$el,\n\t\t\t})\n\t\t\tthis.focusTrap.activate()\n\t\t},\n\n\t\tclearFocusTrap() {\n\t\t\tthis.focusTrap?.deactivate()\n\t\t\tthis.focusTrap = null\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// content inner and outer margin\n// Also used for menu top-right positioning\n$externalMargin: 8px;\n\n@use './header-menu__trigger.scss';\n\n.header-menu {\n\t&__wrapper {\n\t\tposition: fixed;\n\t\tz-index: 2000;\n\t\ttop: var(--header-height);\n\t\tinset-inline-end: 0;\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $externalMargin;\n\t\tborder-radius: 0 0 var(--border-radius) var(--border-radius);\n\t\tborder-radius: var(--border-radius-large);\n\t\tbackground-color: var(--color-main-background);\n\n\t\tfilter: drop-shadow(0 1px 5px var(--color-box-shadow));\n\t}\n\n\t&__carret {\n\t\tposition: absolute;\n\t\tz-index: 2001; // Because __wrapper is 2000.\n\t\tbottom: 0;\n\t\tinset-inline-start: calc(50% - 10px);\n\t\twidth: 0;\n\t\theight: 0;\n\t\tcontent: ' ';\n\t\tpointer-events: none;\n\t\tborder: 10px solid transparent;\n\t\tborder-bottom-color: var(--color-main-background);\n\t}\n\n\t&__content {\n\t\toverflow: auto;\n\t\twidth: 350px;\n\t\tmax-width: calc(100vw - 2 * $externalMargin);\n\t\tmin-height: calc(var(--default-clickable-area) * 1.5);\n\t\tmax-height: calc(100vh - var(--header-height) * 2);\n\t\t:deep(.empty-content) {\n\t\t\tmargin: 12vh 10px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["NcButton","ClickOutside","clickOutsideOptions","ref","useTrapStackControl","GenRandomId","createFocusTrap","getTrapStack"],"mappings":"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"}

package/dist/chunks/{NcHotkey-Cv2Je6eF.mjs → NcHotkey-CLLtt9LG.mjs}

@@ -1,6 +1,6 @@
 import '../assets/NcHotkey-9k8cxWO5.css';
 import { defineComponent, computed } from "vue";
-import { N as NcKbd } from "./NcKbd-CUoUkqEz.mjs";
+import { N as NcKbd } from "./NcKbd-GB8FuSAU.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcHotkey",
@@ -57,4 +57,4 @@ const NcHotkey = __component__.exports;
 export {
   NcHotkey as N
 };
-//# sourceMappingURL=NcHotkey-Cv2Je6eF.mjs.map
+//# sourceMappingURL=NcHotkey-CLLtt9LG.mjs.map

package/dist/chunks/{NcHotkey-Cv2Je6eF.mjs.map → NcHotkey-CLLtt9LG.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcHotkey-Cv2Je6eF.mjs","sources":["../../src/components/NcHotkey/NcHotkey.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 { computed } from 'vue'\nimport NcKbd from '../NcKbd/NcKbd.vue'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Label for the hotkey\n\t */\n\tlabel?: string\n\t/**\n\t * Hotkey combination string separated by space, for example, `Control Alt T` or `F2` (see `<NcKbd>` for supported key names)\n\t */\n\thotkey?: string\n}>(), {\n\tlabel: undefined,\n\thotkey: undefined,\n})\n\nconst symbols = computed(() => {\n\treturn props.hotkey?.split(/\\s+/).map((s) => s.trim())\n})\n\nconst NO_LABEL_WARNING = '⚠️ NcHotKey must have a label or slot content'\n</script>\n\n<template>\n\t<li :class=\"$style.hotkey\">\n\t\t<span role=\"term\" :class=\"$style.hotkey__keys\">\n\t\t\t<!-- @slot Custom hotkey content for an advanced hotkey layout with \"NcKbd\" components or other custom content -->\n\t\t\t<slot name=\"hotkey\">\n\t\t\t\t<NcKbd v-for=\"(symbol, index) in symbols\" :key=\"index\" :symbol=\"symbol\" />\n\t\t\t</slot>\n\t\t</span>\n\t\t<span role=\"definition\" :class=\"$style.hotkey__label\">\n\t\t\t<!-- @slot Custom label content -->\n\t\t\t<slot>\n\t\t\t\t{{ label || NO_LABEL_WARNING }}\n\t\t\t</slot>\n\t\t</span>\n\t</li>\n</template>\n\n<style lang=\"scss\" module>\n.hotkey {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n\tdisplay: flex;\n\tflex-direction: row-reverse;\n\talign-items: stretch;\n\tpadding-inline: var(--form-element-label-offset);\n\n\t&:first-child {\n\t\t.hotkey__label,\n\t\t.hotkey__keys {\n\t\t\tborder-block-start: none;\n\t\t}\n\t}\n\n}\n\n.hotkey__label,\n.hotkey__keys {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding-block: calc(2 * var(--default-grid-baseline));\n\tborder-block-start: 1px solid var(--color-border);\n}\n\n.hotkey__label {\n\tflex: 1 1 200px;\n}\n\n.hotkey__keys {\n\tflex: 1 1 auto;\n\tflex-wrap: wrap;\n\tjustify-content: end;\n\trow-gap: calc(1 * var(--default-grid-baseline));\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;AAuBA,UAAM,UAAU,SAAS,MAAM;AAC9B,aAAO,MAAM,QAAQ,MAAM,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM;AAAA,IACtD,CAAC;AAED,UAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcHotkey-CLLtt9LG.mjs","sources":["../../src/components/NcHotkey/NcHotkey.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 { computed } from 'vue'\nimport NcKbd from '../NcKbd/NcKbd.vue'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Label for the hotkey\n\t */\n\tlabel?: string\n\t/**\n\t * Hotkey combination string separated by space, for example, `Control Alt T` or `F2` (see `<NcKbd>` for supported key names)\n\t */\n\thotkey?: string\n}>(), {\n\tlabel: undefined,\n\thotkey: undefined,\n})\n\nconst symbols = computed(() => {\n\treturn props.hotkey?.split(/\\s+/).map((s) => s.trim())\n})\n\nconst NO_LABEL_WARNING = '⚠️ NcHotKey must have a label or slot content'\n</script>\n\n<template>\n\t<li :class=\"$style.hotkey\">\n\t\t<span role=\"term\" :class=\"$style.hotkey__keys\">\n\t\t\t<!-- @slot Custom hotkey content for an advanced hotkey layout with \"NcKbd\" components or other custom content -->\n\t\t\t<slot name=\"hotkey\">\n\t\t\t\t<NcKbd v-for=\"(symbol, index) in symbols\" :key=\"index\" :symbol=\"symbol\" />\n\t\t\t</slot>\n\t\t</span>\n\t\t<span role=\"definition\" :class=\"$style.hotkey__label\">\n\t\t\t<!-- @slot Custom label content -->\n\t\t\t<slot>\n\t\t\t\t{{ label || NO_LABEL_WARNING }}\n\t\t\t</slot>\n\t\t</span>\n\t</li>\n</template>\n\n<style lang=\"scss\" module>\n.hotkey {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n\tdisplay: flex;\n\tflex-direction: row-reverse;\n\talign-items: stretch;\n\tpadding-inline: var(--form-element-label-offset);\n\n\t&:first-child {\n\t\t.hotkey__label,\n\t\t.hotkey__keys {\n\t\t\tborder-block-start: none;\n\t\t}\n\t}\n\n}\n\n.hotkey__label,\n.hotkey__keys {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding-block: calc(2 * var(--default-grid-baseline));\n\tborder-block-start: 1px solid var(--color-border);\n}\n\n.hotkey__label {\n\tflex: 1 1 200px;\n}\n\n.hotkey__keys {\n\tflex: 1 1 auto;\n\tflex-wrap: wrap;\n\tjustify-content: end;\n\trow-gap: calc(1 * var(--default-grid-baseline));\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;AAuBA,UAAM,UAAU,SAAS,MAAM;AAC9B,aAAO,MAAM,QAAQ,MAAM,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM;AAAA,IACtD,CAAC;AAED,UAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcHotkey-wTQuk8tk.cjs → NcHotkey-vKyDZ2a7.cjs}

@@ -1,7 +1,7 @@
 require('../assets/NcHotkey-9k8cxWO5.css');
 "use strict";
 const Vue = require("vue");
-const NcKbd = require("./NcKbd-BOezPDqA.cjs");
+const NcKbd = require("./NcKbd-DbjnDaJH.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "NcHotkey",
@@ -56,4 +56,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcHotkey = __component__.exports;
 exports.NcHotkey = NcHotkey;
-//# sourceMappingURL=NcHotkey-wTQuk8tk.cjs.map
+//# sourceMappingURL=NcHotkey-vKyDZ2a7.cjs.map

package/dist/chunks/{NcHotkey-wTQuk8tk.cjs.map → NcHotkey-vKyDZ2a7.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcHotkey-wTQuk8tk.cjs","sources":["../../src/components/NcHotkey/NcHotkey.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 { computed } from 'vue'\nimport NcKbd from '../NcKbd/NcKbd.vue'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Label for the hotkey\n\t */\n\tlabel?: string\n\t/**\n\t * Hotkey combination string separated by space, for example, `Control Alt T` or `F2` (see `<NcKbd>` for supported key names)\n\t */\n\thotkey?: string\n}>(), {\n\tlabel: undefined,\n\thotkey: undefined,\n})\n\nconst symbols = computed(() => {\n\treturn props.hotkey?.split(/\\s+/).map((s) => s.trim())\n})\n\nconst NO_LABEL_WARNING = '⚠️ NcHotKey must have a label or slot content'\n</script>\n\n<template>\n\t<li :class=\"$style.hotkey\">\n\t\t<span role=\"term\" :class=\"$style.hotkey__keys\">\n\t\t\t<!-- @slot Custom hotkey content for an advanced hotkey layout with \"NcKbd\" components or other custom content -->\n\t\t\t<slot name=\"hotkey\">\n\t\t\t\t<NcKbd v-for=\"(symbol, index) in symbols\" :key=\"index\" :symbol=\"symbol\" />\n\t\t\t</slot>\n\t\t</span>\n\t\t<span role=\"definition\" :class=\"$style.hotkey__label\">\n\t\t\t<!-- @slot Custom label content -->\n\t\t\t<slot>\n\t\t\t\t{{ label || NO_LABEL_WARNING }}\n\t\t\t</slot>\n\t\t</span>\n\t</li>\n</template>\n\n<style lang=\"scss\" module>\n.hotkey {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n\tdisplay: flex;\n\tflex-direction: row-reverse;\n\talign-items: stretch;\n\tpadding-inline: var(--form-element-label-offset);\n\n\t&:first-child {\n\t\t.hotkey__label,\n\t\t.hotkey__keys {\n\t\t\tborder-block-start: none;\n\t\t}\n\t}\n\n}\n\n.hotkey__label,\n.hotkey__keys {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding-block: calc(2 * var(--default-grid-baseline));\n\tborder-block-start: 1px solid var(--color-border);\n}\n\n.hotkey__label {\n\tflex: 1 1 200px;\n}\n\n.hotkey__keys {\n\tflex: 1 1 auto;\n\tflex-wrap: wrap;\n\tjustify-content: end;\n\trow-gap: calc(1 * var(--default-grid-baseline));\n}\n</style>\n"],"names":["computed"],"mappings":";;;;;;;;;;;;AAuBA,UAAM,UAAUA,IAAAA,SAAS,MAAM;AAC9B,aAAO,MAAM,QAAQ,MAAM,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM;AAAA,IACtD,CAAC;AAED,UAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcHotkey-vKyDZ2a7.cjs","sources":["../../src/components/NcHotkey/NcHotkey.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 { computed } from 'vue'\nimport NcKbd from '../NcKbd/NcKbd.vue'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Label for the hotkey\n\t */\n\tlabel?: string\n\t/**\n\t * Hotkey combination string separated by space, for example, `Control Alt T` or `F2` (see `<NcKbd>` for supported key names)\n\t */\n\thotkey?: string\n}>(), {\n\tlabel: undefined,\n\thotkey: undefined,\n})\n\nconst symbols = computed(() => {\n\treturn props.hotkey?.split(/\\s+/).map((s) => s.trim())\n})\n\nconst NO_LABEL_WARNING = '⚠️ NcHotKey must have a label or slot content'\n</script>\n\n<template>\n\t<li :class=\"$style.hotkey\">\n\t\t<span role=\"term\" :class=\"$style.hotkey__keys\">\n\t\t\t<!-- @slot Custom hotkey content for an advanced hotkey layout with \"NcKbd\" components or other custom content -->\n\t\t\t<slot name=\"hotkey\">\n\t\t\t\t<NcKbd v-for=\"(symbol, index) in symbols\" :key=\"index\" :symbol=\"symbol\" />\n\t\t\t</slot>\n\t\t</span>\n\t\t<span role=\"definition\" :class=\"$style.hotkey__label\">\n\t\t\t<!-- @slot Custom label content -->\n\t\t\t<slot>\n\t\t\t\t{{ label || NO_LABEL_WARNING }}\n\t\t\t</slot>\n\t\t</span>\n\t</li>\n</template>\n\n<style lang=\"scss\" module>\n.hotkey {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n\tdisplay: flex;\n\tflex-direction: row-reverse;\n\talign-items: stretch;\n\tpadding-inline: var(--form-element-label-offset);\n\n\t&:first-child {\n\t\t.hotkey__label,\n\t\t.hotkey__keys {\n\t\t\tborder-block-start: none;\n\t\t}\n\t}\n\n}\n\n.hotkey__label,\n.hotkey__keys {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding-block: calc(2 * var(--default-grid-baseline));\n\tborder-block-start: 1px solid var(--color-border);\n}\n\n.hotkey__label {\n\tflex: 1 1 200px;\n}\n\n.hotkey__keys {\n\tflex: 1 1 auto;\n\tflex-wrap: wrap;\n\tjustify-content: end;\n\trow-gap: calc(1 * var(--default-grid-baseline));\n}\n</style>\n"],"names":["computed"],"mappings":";;;;;;;;;;;;AAuBA,UAAM,UAAUA,IAAAA,SAAS,MAAM;AAC9B,aAAO,MAAM,QAAQ,MAAM,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM;AAAA,IACtD,CAAC;AAED,UAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}