@nextcloud/vue 8.34.0 → 8.35.1

package/dist/chunks/{NcFormBoxSwitch-aOCNeI-K.mjs → NcFormBoxSwitch-Dq5JvIem.mjs}

@@ -1,9 +1,8 @@
-import '../assets/NcFormBoxSwitch-BmyNQCbA.css';
+import '../assets/NcFormBoxSwitch-DScgbxtv.css';
 import { defineComponent, watch } from "vue";
-import { f as mdiToggleSwitchOff, g as mdiToggleSwitch } from "./mdi-C_j0YT8c.mjs";
 import { useVModel } from "@vueuse/core";
-import { N as NcFormBoxItem } from "./NcFormBoxItem-DPBm3ZbJ.mjs";
-import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BreCg8pX.mjs";
+import { N as NcFormBoxItem } from "./NcFormBoxItem-DJZrmlTP.mjs";
+import { N as NcIconToggleSwitch } from "./NcIconToggleSwitch-C2VDKTSP.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const __default__ = {
@@ -24,7 +23,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["enable", "disable", "update:modelValue"],
   setup(__props, { emit }) {
     const props = __props;
-    const model = useVModel(props, "modelValue", emit);
+    const model = useVModel(props, "modelValue", emit, { passive: true });
     const inputId = createElementId();
     watch(model, () => {
       if (model.value) {
@@ -37,15 +36,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       // Watching it synchronously to emit the enable/disable events together with the update:modelValue event
       flush: "sync"
     });
-    return { __sfc: true, props, emit, model, inputId, mdiToggleSwitch, mdiToggleSwitchOff, NcFormBoxItem, NcIconSvgWrapper };
+    return { __sfc: true, props, emit, model, inputId, NcFormBoxItem, NcIconToggleSwitch };
   }
 });
-const formBoxSwitch__input = "_formBoxSwitch__input_hjv1a_20";
-const formBoxSwitch__icon = "_formBoxSwitch__icon_hjv1a_34";
+const formBoxSwitch__input = "_formBoxSwitch__input_njiy8_20";
 const style0 = {
-  "material-design-icon": "_material-design-icon_hjv1a_12",
-  formBoxSwitch__input,
-  formBoxSwitch__icon
+  "material-design-icon": "_material-design-icon_njiy8_12",
+  formBoxSwitch__input
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
@@ -70,7 +67,7 @@ var _sfc_render = function render() {
       } else {
         _setup.model = $$c;
       }
-    } } }), _c(_setup.NcIconSvgWrapper, { class: _vm.$style.formBoxSwitch__icon, attrs: { "path": _setup.model ? _setup.mdiToggleSwitch : _setup.mdiToggleSwitchOff, "size": 34, "inline": "" } })];
+    } } }), _c(_setup.NcIconToggleSwitch, { attrs: { "checked": _vm.modelValue, "inline": "" } })];
   } }], null, true) });
 };
 var _sfc_staticRenderFns = [];
@@ -94,4 +91,4 @@ const NcFormBoxSwitch = __component__.exports;
 export {
   NcFormBoxSwitch as N
 };
-//# sourceMappingURL=NcFormBoxSwitch-aOCNeI-K.mjs.map
+//# sourceMappingURL=NcFormBoxSwitch-Dq5JvIem.mjs.map

package/dist/chunks/NcFormBoxSwitch-Dq5JvIem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormBoxSwitch-Dq5JvIem.mjs","sources":["../../src/components/NcFormBoxSwitch/NcFormBoxSwitch.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script lang=\"ts\">\nexport default {\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { watch } from 'vue'\nimport NcFormBoxItem from '../NcFormBox/NcFormBoxItem.vue'\nimport NcIconToggleSwitch from '../NcIconToggleSwitch/NcIconToggleSwitch.vue'\nimport { createElementId } from '../../utils/createElementId.ts'\n\nconst props = withDefaults(defineProps<{\n\t/** Main label */\n\tlabel?: string\n\t/** Optional description below the label, also used for the aria-describedby */\n\tdescription?: string\n\t/** Disabled state */\n\tdisabled?: boolean\n\t/** Switch toggle model value */\n\tmodelValue: boolean // eslint-disable-line vue/no-unused-properties\n}>(), {\n\tlabel: undefined,\n\tdescription: undefined,\n\tdisabled: false,\n})\n\nconst emit = defineEmits<{\n\t/** Switch is toggled ON */\n\t(event: 'enable'): void\n\t/** Switch is toggled OFF */\n\t(event: 'disable'): void\n\t(event: 'update:modelValue', value: boolean): void\n}>()\n\nconst model = useVModel(props, 'modelValue', emit, { passive: true })\n\nconst inputId = createElementId()\n\nwatch(model, () => {\n\tif (model.value) {\n\t\temit('enable')\n\t} else {\n\t\temit('disable')\n\t}\n}, {\n\t// defineModel emits update:modelValue synchronously\n\t// Watching it synchronously to emit the enable/disable events together with the update:modelValue event\n\tflush: 'sync',\n})\n</script>\n\n<template>\n\t<NcFormBoxItem\n\t\ttag=\"label\"\n\t\t:for=\"inputId\">\n\t\t<template v-if=\"$slots.default || label\" #default>\n\t\t\t<!-- @slot Custom label content -->\n\t\t\t<slot>\n\t\t\t\t{{ label }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template v-if=\"$slots.description || description\" #description>\n\t\t\t<!-- @slot Custom description content -->\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template #icon=\"{ descriptionId }\">\n\t\t\t<input\n\t\t\t\t:id=\"inputId\"\n\t\t\t\tv-model=\"model\"\n\t\t\t\t:class=\"$style.formBoxSwitch__input\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\trole=\"switch\"\n\t\t\t\t:aria-describedby=\"descriptionId\"\n\t\t\t\t:disabled=\"disabled\">\n\t\t\t<NcIconToggleSwitch :checked=\"modelValue\" inline />\n\t\t</template>\n\t</NcFormBoxItem>\n</template>\n\n<style lang=\"scss\" module>\ninput.formBoxSwitch__input {\n\tmargin: 0;\n\twidth: var(--default-clickable-area);\n\t/* Keep it visually hidden but on the position of visual switch icon */\n\tposition: absolute;\n\tinset-block: 0;\n\tinset-inline-end: var(--form-element-label-offset);\n\tz-index: -1;\n\topacity: 0 !important;\n\t/* Override server styles */\n\theight: auto;\n\tcursor: inherit;\n}\n</style>\n\n<docs>\n### General\n\nA toggle switch to be used within `<NcFormBox>`.\n\nLike other form box items, it has a label and an optional description.\n\nIn addition to the standard `v-model` binding, it emits `enable` and `disable` events when toggled **on** or **off**.\n\n```vue\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tswitchValue: false,\n\t\t}\n\t},\n\tmethods: {\n\t\tlog: console.log,\n\t},\n}\n</script>\n\n<template>\n\t<NcFormBox>\n\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Turn camera and microphone off by default\" />\n\t\t<NcFormBoxSwitch\n\t\t\tv-model=\"switchValue\"\n\t\t\tlabel=\"Blur camera background by default\"\n\t\t\tdisabled />\n\t\t<NcFormBoxSwitch\n\t\t\tv-model=\"switchValue\"\n\t\t\tlabel=\"Skip device preview before joining a call\"\n\t\t\tdescription=\"Will always show if recording consent is required\"\n\t\t\t@update:modelValue=\"log('Switch toggled', $event, switchValue)\"\n\t\t\t@enable=\"log('Switch enabled', switchValue)\"\n\t\t\t@disable=\"log('Switch disabled', switchValue)\"\n\t\t/>\n\t\t<NcFormBoxSwitch v-model=\"switchValue\" />\n\t</NcFormBox>\n</template>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAMA,MAAA,cAAe;AAAA,EACd,OAAO;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAET;;;;;;;;;;;;;AAiCA,UAAM,QAAQ,UAAU,OAAO,cAAc,MAAM,EAAE,SAAS,MAAM;AAEpE,UAAM,UAAU,gBAAA;AAEhB,UAAM,OAAO,MAAM;AAClB,UAAI,MAAM,OAAO;AAChB,aAAK,QAAQ;AAAA,MACd,OAAO;AACN,aAAK,SAAS;AAAA,MACf;AAAA,IACD,GAAG;AAAA;AAAA;AAAA,MAGF,OAAO;AAAA,IAAA,CACP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,7 +1,7 @@
 require('../assets/NcHeaderButton-DI-1Gsph.css');
 "use strict";
 const GenRandomId = require("./GenRandomId-D7iOvpZS.cjs");
-const NcButton = require("./NcButton-CJBZrdiL.cjs");
+const NcButton = require("./NcButton-CuFElrFD.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-6kuTEKbj.cjs.map
+//# sourceMappingURL=NcHeaderButton-CpWQbzfF.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"NcHeaderButton-6kuTEKbj.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-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;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcHeaderButton-TgPjfPtk.mjs → NcHeaderButton-Dvo1_Bwc.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-DUZTtFhr.mjs";
+import { N as NcButton } from "./NcButton-Dz2O6cSU.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-TgPjfPtk.mjs.map
+//# sourceMappingURL=NcHeaderButton-Dvo1_Bwc.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"NcHeaderButton-TgPjfPtk.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-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;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcHeaderMenu-CwjH_j0c.cjs → NcHeaderMenu-Cmu-m_aM.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-CJBZrdiL.cjs");
+const NcButton = require("./NcButton-CuFElrFD.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-CwjH_j0c.cjs.map
+//# sourceMappingURL=NcHeaderMenu-Cmu-m_aM.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"NcHeaderMenu-CwjH_j0c.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-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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"}

package/dist/chunks/{NcHeaderMenu-Hk8OTuma.mjs → NcHeaderMenu-Cuh8ay0F.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-DUZTtFhr.mjs";
+import { N as NcButton } from "./NcButton-Dz2O6cSU.mjs";
 const _sfc_main = {
   name: "NcHeaderMenu",
   components: {
@@ -231,4 +231,4 @@ const NcHeaderMenu = __component__.exports;
 export {
   NcHeaderMenu as N
 };
-//# sourceMappingURL=NcHeaderMenu-Hk8OTuma.mjs.map
+//# sourceMappingURL=NcHeaderMenu-Cuh8ay0F.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"NcHeaderMenu-Hk8OTuma.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-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":";;;;;;;;;;;;;;;;;;;;;AAwHA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAA;AAAAA,EACA;AAAA,EAEA,QAAA;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,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,OAAA;AACA,UAAA,SAAA,IAAA,MAAA,IAAA;AAIA,wBAAA,QAAA;AAAA,MACA,UAAA,MAAA,CAAA,MAAA;AAAA,IACA,CAAA;AAEA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,mBAAA,OAAA,KAAA,eAAA,2BAAA;AAAA,MACA,WAAA,YAAA;AAAA,MACA,eAAA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,QAAA,QAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,UAAA,KAAA,OAAA;AACA,eAAA;AAAA,UACA,UAAA,KAAA;AAAA,QACA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,KAAA,MAAA;AACA,UAAA,MAAA;AACA,aAAA,SAAA;AAAA,MACA,OAAA;AACA,aAAA,UAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,aAAA,iBAAA,WAAA,KAAA,SAAA;AAAA,EACA;AAAA,EAEA,gBAAA;AACA,aAAA,oBAAA,WAAA,KAAA,SAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAEA,UAAA,CAAA,KAAA,QAAA;AACA,aAAA,SAAA;AAAA,MACA,OAAA;AACA,aAAA,UAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA,YAAA,OAAA;AAEA,WAAA,SAAA;AACA,WAAA,MAAA,YAAA,WAAA,OAAA;AACA,WAAA,MAAA,eAAA,KAAA;AAGA,WAAA,eAAA;AAGA,WAAA,UAAA,MAAA;AACA,aAAA,MAAA,QAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAEA,WAAA,SAAA;AACA,WAAA,MAAA,MAAA;AACA,WAAA,MAAA,eAAA,IAAA;AAGA,WAAA,UAAA,MAAA;AACA,aAAA,aAAA;AACA,aAAA,MAAA,QAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IAEA,UAAA,OAAA;AACA,UAAA,KAAA,qBAAA,CAAA,KAAA,QAAA;AACA;AAAA,MACA;AAGA,UAAA,MAAA,QAAA,UAAA;AACA,cAAA,eAAA;AAGA,aAAA,UAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA,OAAA;AACA,UAAA,CAAA,KAAA,MAAA,WAAA,SAAA,MAAA,aAAA,GAAA;AACA,aAAA,UAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA,eAAA;AACA,UAAA,KAAA,SAAA,KAAA,WAAA;AACA;AAAA,MACA;AAEA,YAAA,mBAAA,KAAA,MAAA;AACA,WAAA,YAAA,gBAAA,kBAAA;AAAA,QACA,mBAAA;AAAA,QACA,WAAA,aAAA;AAAA,QACA,eAAA,KAAA,MAAA,QAAA;AAAA,MACA,CAAA;AACA,WAAA,UAAA,SAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,WAAA,WAAA,WAAA;AACA,WAAA,YAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcHotkey-BMemJWSu.cjs → NcHotkey-B9IBly2F.cjs}

@@ -1,7 +1,7 @@
 require('../assets/NcHotkey-4yi1Hobg.css');
 "use strict";
 const Vue = require("vue");
-const NcKbd = require("./NcKbd-ewuqi-PO.cjs");
+const NcKbd = require("./NcKbd-DiOuj-R9.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-BMemJWSu.cjs.map
+//# sourceMappingURL=NcHotkey-B9IBly2F.cjs.map

package/dist/chunks/{NcHotkey-BMemJWSu.cjs.map → NcHotkey-B9IBly2F.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcHotkey-BMemJWSu.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-B9IBly2F.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcHotkey-CzuMmIU9.mjs → NcHotkey-COqzksbg.mjs}

@@ -1,6 +1,6 @@
 import '../assets/NcHotkey-4yi1Hobg.css';
 import { defineComponent, computed } from "vue";
-import { N as NcKbd } from "./NcKbd-CfVfr9CW.mjs";
+import { N as NcKbd } from "./NcKbd-CapL6_v1.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-CzuMmIU9.mjs.map
+//# sourceMappingURL=NcHotkey-COqzksbg.mjs.map

package/dist/chunks/{NcHotkey-CzuMmIU9.mjs.map → NcHotkey-COqzksbg.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcHotkey-CzuMmIU9.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-COqzksbg.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/{NcHotkeyList-DAJkKYNu.cjs → NcHotkeyList-D5QS6zXI.cjs}

@@ -1,10 +1,10 @@
 require('../assets/NcHotkeyList-gAZN0WIu.css');
 "use strict";
 const Vue = require("vue");
-const _l10n = require("./_l10n-B4clLGwo.cjs");
+const _l10n = require("./_l10n-IBFNlYqh.cjs");
 const createElementId = require("./createElementId-lalylSCf.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
-_l10n.register();
+_l10n.register(_l10n.t31);
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "NcHotkeyList",
   props: {
@@ -44,4 +44,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcHotkeyList = __component__.exports;
 exports.NcHotkeyList = NcHotkeyList;
-//# sourceMappingURL=NcHotkeyList-DAJkKYNu.cjs.map
+//# sourceMappingURL=NcHotkeyList-D5QS6zXI.cjs.map

package/dist/chunks/{NcHotkeyList-DAJkKYNu.cjs.map → NcHotkeyList-D5QS6zXI.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcHotkeyList-DAJkKYNu.cjs","sources":["../../src/components/NcHotkeyList/NcHotkeyList.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 { t } from '../../l10n.js'\nimport { createElementId } from '../../utils/createElementId.ts'\n\nwithDefaults(defineProps<{\n\t/**\n\t * Heading list label to use when there are multiple lists of shortcuts\n\t */\n\tlabel?: string\n}>(), {\n\tlabel: undefined,\n})\n\nconst labelId = `NcHotkeyList_${createElementId()}`\n</script>\n\n<template>\n\t<div :class=\"$style.hotkeyList\">\n\t\t<div :id=\"labelId\" :class=\"[$style.hotkeyList__heading, { 'hidden-visually': !label }]\">\n\t\t\t{{ label || t('Keyboard shortcuts') }}\n\t\t</div>\n\t\t<ul :aria-labelledby=\"labelId\">\n\t\t\t<!-- @slot Shortcuts described via \"NcHotkey\" components -->\n\t\t\t<slot />\n\t\t</ul>\n\t</div>\n</template>\n\n<style module>\n.hotkeyList {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n}\n\n.hotkeyList__heading {\n\tfont-weight: bold;\n\tmargin-inline: var(--form-element-label-offset);\n}\n</style>\n\n<docs>\n## General\n\nList of keyboard shortcuts for the `<NcAppSettingsShortcutsSection>`.\n\n```vue\n<template>\n\t<NcHotkeyList>\n\t\t<NcHotkey label=\"New File\" hotkey=\"Ctrl N\" />\n\t\t<NcHotkey label=\"Open File\" hotkey=\"Ctrl O\" />\n\t\t<NcHotkey label=\"Save File\" hotkey=\"Ctrl S\" />\n\t</NcHotkeyList>\n</template>\n```\n\n## Groups\n\nThe hotkey list can have an optional heading label. This is useful when there are multiple groups of shortcuts in an app with many shortcuts.\n\n```vue\n<template>\n\t<section>\n\t\t<NcHotkeyList label=\"Actions\">\n\t\t\t<NcHotkey label=\"File actions\" hotkey=\"A\" />\n\t\t\t<NcHotkey label=\"Rename\" hotkey=\"F2\" />\n\t\t\t<NcHotkey label=\"Delete\" hotkey=\"Delete\" />\n\t\t\t<NcHotkey label=\"Add or remove favorite\" hotkey=\"S\" />\n\t\t\t<NcHotkey label=\"Manage tags\" hotkey=\"T\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"Selection\">\n\t\t\t<NcHotkey label=\"Select all files\" hotkey=\"Control A\" />\n\t\t\t<NcHotkey label=\"Deselect all\" hotkey=\"Escape\" />\n\t\t\t<NcHotkey label=\"Select or deselect\" hotkey=\"Control Space\" />\n\t\t\t<NcHotkey label=\"Select a range\" hotkey=\"Control Shift Space\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"Navigation\">\n\t\t\t<NcHotkey label=\"Go to parent folder\" hotkey=\"Alt ArrowUp\" />\n\t\t\t<NcHotkey label=\"Go to file above\" hotkey=\"ArrowUp\" />\n\t\t\t<NcHotkey label=\"Go to file below\" hotkey=\"ArrowDown\" />\n\t\t\t<NcHotkey label=\"Go left in grid\" hotkey=\"ArrowLeft\" />\n\t\t\t<NcHotkey label=\"Go right in grid\" hotkey=\"ArrowRight\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"View\">\n\t\t\t<NcHotkey label=\"Toggle grid view\" hotkey=\"V\" />\n\t\t\t<NcHotkey label=\"Open file sidebar\" hotkey=\"D\" />\n\t\t\t<NcHotkey label=\"Show those shortcuts\" hotkey=\"?\" />\n\t\t</NcHotkeyList>\n\t</section>\n</template>\n```\n</docs>\n"],"names":["createElementId"],"mappings":";;;;;;;;;;;;AAkBA,UAAM,UAAU,gBAAgBA,gBAAAA,gBAAA,CAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcHotkeyList-D5QS6zXI.cjs","sources":["../../src/components/NcHotkeyList/NcHotkeyList.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 { t } from '../../l10n.js'\nimport { createElementId } from '../../utils/createElementId.ts'\n\nwithDefaults(defineProps<{\n\t/**\n\t * Heading list label to use when there are multiple lists of shortcuts\n\t */\n\tlabel?: string\n}>(), {\n\tlabel: undefined,\n})\n\nconst labelId = `NcHotkeyList_${createElementId()}`\n</script>\n\n<template>\n\t<div :class=\"$style.hotkeyList\">\n\t\t<div :id=\"labelId\" :class=\"[$style.hotkeyList__heading, { 'hidden-visually': !label }]\">\n\t\t\t{{ label || t('Keyboard shortcuts') }}\n\t\t</div>\n\t\t<ul :aria-labelledby=\"labelId\">\n\t\t\t<!-- @slot Shortcuts described via \"NcHotkey\" components -->\n\t\t\t<slot />\n\t\t</ul>\n\t</div>\n</template>\n\n<style module>\n.hotkeyList {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n}\n\n.hotkeyList__heading {\n\tfont-weight: bold;\n\tmargin-inline: var(--form-element-label-offset);\n}\n</style>\n\n<docs>\n## General\n\nList of keyboard shortcuts for the `<NcAppSettingsShortcutsSection>`.\n\n```vue\n<template>\n\t<NcHotkeyList>\n\t\t<NcHotkey label=\"New File\" hotkey=\"Ctrl N\" />\n\t\t<NcHotkey label=\"Open File\" hotkey=\"Ctrl O\" />\n\t\t<NcHotkey label=\"Save File\" hotkey=\"Ctrl S\" />\n\t</NcHotkeyList>\n</template>\n```\n\n## Groups\n\nThe hotkey list can have an optional heading label. This is useful when there are multiple groups of shortcuts in an app with many shortcuts.\n\n```vue\n<template>\n\t<section>\n\t\t<NcHotkeyList label=\"Actions\">\n\t\t\t<NcHotkey label=\"File actions\" hotkey=\"A\" />\n\t\t\t<NcHotkey label=\"Rename\" hotkey=\"F2\" />\n\t\t\t<NcHotkey label=\"Delete\" hotkey=\"Delete\" />\n\t\t\t<NcHotkey label=\"Add or remove favorite\" hotkey=\"S\" />\n\t\t\t<NcHotkey label=\"Manage tags\" hotkey=\"T\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"Selection\">\n\t\t\t<NcHotkey label=\"Select all files\" hotkey=\"Control A\" />\n\t\t\t<NcHotkey label=\"Deselect all\" hotkey=\"Escape\" />\n\t\t\t<NcHotkey label=\"Select or deselect\" hotkey=\"Control Space\" />\n\t\t\t<NcHotkey label=\"Select a range\" hotkey=\"Control Shift Space\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"Navigation\">\n\t\t\t<NcHotkey label=\"Go to parent folder\" hotkey=\"Alt ArrowUp\" />\n\t\t\t<NcHotkey label=\"Go to file above\" hotkey=\"ArrowUp\" />\n\t\t\t<NcHotkey label=\"Go to file below\" hotkey=\"ArrowDown\" />\n\t\t\t<NcHotkey label=\"Go left in grid\" hotkey=\"ArrowLeft\" />\n\t\t\t<NcHotkey label=\"Go right in grid\" hotkey=\"ArrowRight\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"View\">\n\t\t\t<NcHotkey label=\"Toggle grid view\" hotkey=\"V\" />\n\t\t\t<NcHotkey label=\"Open file sidebar\" hotkey=\"D\" />\n\t\t\t<NcHotkey label=\"Show those shortcuts\" hotkey=\"?\" />\n\t\t</NcHotkeyList>\n\t</section>\n</template>\n```\n</docs>\n"],"names":["createElementId"],"mappings":";;;;;;;;;;;;AAkBA,UAAM,UAAU,gBAAgBA,gBAAAA,gBAAA,CAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcHotkeyList-Bm25Odp7.mjs → NcHotkeyList-D9tKXM-e.mjs}

@@ -1,9 +1,9 @@
 import '../assets/NcHotkeyList-gAZN0WIu.css';
 import { defineComponent } from "vue";
-import { r as register, a as t } from "./_l10n-BmKQgz1z.mjs";
+import { r as register, x as t31, a as t } from "./_l10n-BcrsamRV.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
-register();
+register(t31);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcHotkeyList",
   props: {
@@ -45,4 +45,4 @@ const NcHotkeyList = __component__.exports;
 export {
   NcHotkeyList as N
 };
-//# sourceMappingURL=NcHotkeyList-Bm25Odp7.mjs.map
+//# sourceMappingURL=NcHotkeyList-D9tKXM-e.mjs.map

package/dist/chunks/{NcHotkeyList-Bm25Odp7.mjs.map → NcHotkeyList-D9tKXM-e.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcHotkeyList-Bm25Odp7.mjs","sources":["../../src/components/NcHotkeyList/NcHotkeyList.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 { t } from '../../l10n.js'\nimport { createElementId } from '../../utils/createElementId.ts'\n\nwithDefaults(defineProps<{\n\t/**\n\t * Heading list label to use when there are multiple lists of shortcuts\n\t */\n\tlabel?: string\n}>(), {\n\tlabel: undefined,\n})\n\nconst labelId = `NcHotkeyList_${createElementId()}`\n</script>\n\n<template>\n\t<div :class=\"$style.hotkeyList\">\n\t\t<div :id=\"labelId\" :class=\"[$style.hotkeyList__heading, { 'hidden-visually': !label }]\">\n\t\t\t{{ label || t('Keyboard shortcuts') }}\n\t\t</div>\n\t\t<ul :aria-labelledby=\"labelId\">\n\t\t\t<!-- @slot Shortcuts described via \"NcHotkey\" components -->\n\t\t\t<slot />\n\t\t</ul>\n\t</div>\n</template>\n\n<style module>\n.hotkeyList {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n}\n\n.hotkeyList__heading {\n\tfont-weight: bold;\n\tmargin-inline: var(--form-element-label-offset);\n}\n</style>\n\n<docs>\n## General\n\nList of keyboard shortcuts for the `<NcAppSettingsShortcutsSection>`.\n\n```vue\n<template>\n\t<NcHotkeyList>\n\t\t<NcHotkey label=\"New File\" hotkey=\"Ctrl N\" />\n\t\t<NcHotkey label=\"Open File\" hotkey=\"Ctrl O\" />\n\t\t<NcHotkey label=\"Save File\" hotkey=\"Ctrl S\" />\n\t</NcHotkeyList>\n</template>\n```\n\n## Groups\n\nThe hotkey list can have an optional heading label. This is useful when there are multiple groups of shortcuts in an app with many shortcuts.\n\n```vue\n<template>\n\t<section>\n\t\t<NcHotkeyList label=\"Actions\">\n\t\t\t<NcHotkey label=\"File actions\" hotkey=\"A\" />\n\t\t\t<NcHotkey label=\"Rename\" hotkey=\"F2\" />\n\t\t\t<NcHotkey label=\"Delete\" hotkey=\"Delete\" />\n\t\t\t<NcHotkey label=\"Add or remove favorite\" hotkey=\"S\" />\n\t\t\t<NcHotkey label=\"Manage tags\" hotkey=\"T\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"Selection\">\n\t\t\t<NcHotkey label=\"Select all files\" hotkey=\"Control A\" />\n\t\t\t<NcHotkey label=\"Deselect all\" hotkey=\"Escape\" />\n\t\t\t<NcHotkey label=\"Select or deselect\" hotkey=\"Control Space\" />\n\t\t\t<NcHotkey label=\"Select a range\" hotkey=\"Control Shift Space\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"Navigation\">\n\t\t\t<NcHotkey label=\"Go to parent folder\" hotkey=\"Alt ArrowUp\" />\n\t\t\t<NcHotkey label=\"Go to file above\" hotkey=\"ArrowUp\" />\n\t\t\t<NcHotkey label=\"Go to file below\" hotkey=\"ArrowDown\" />\n\t\t\t<NcHotkey label=\"Go left in grid\" hotkey=\"ArrowLeft\" />\n\t\t\t<NcHotkey label=\"Go right in grid\" hotkey=\"ArrowRight\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"View\">\n\t\t\t<NcHotkey label=\"Toggle grid view\" hotkey=\"V\" />\n\t\t\t<NcHotkey label=\"Open file sidebar\" hotkey=\"D\" />\n\t\t\t<NcHotkey label=\"Show those shortcuts\" hotkey=\"?\" />\n\t\t</NcHotkeyList>\n\t</section>\n</template>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;AAkBA,UAAM,UAAU,gBAAgB,gBAAA,CAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcHotkeyList-D9tKXM-e.mjs","sources":["../../src/components/NcHotkeyList/NcHotkeyList.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 { t } from '../../l10n.js'\nimport { createElementId } from '../../utils/createElementId.ts'\n\nwithDefaults(defineProps<{\n\t/**\n\t * Heading list label to use when there are multiple lists of shortcuts\n\t */\n\tlabel?: string\n}>(), {\n\tlabel: undefined,\n})\n\nconst labelId = `NcHotkeyList_${createElementId()}`\n</script>\n\n<template>\n\t<div :class=\"$style.hotkeyList\">\n\t\t<div :id=\"labelId\" :class=\"[$style.hotkeyList__heading, { 'hidden-visually': !label }]\">\n\t\t\t{{ label || t('Keyboard shortcuts') }}\n\t\t</div>\n\t\t<ul :aria-labelledby=\"labelId\">\n\t\t\t<!-- @slot Shortcuts described via \"NcHotkey\" components -->\n\t\t\t<slot />\n\t\t</ul>\n\t</div>\n</template>\n\n<style module>\n.hotkeyList {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n}\n\n.hotkeyList__heading {\n\tfont-weight: bold;\n\tmargin-inline: var(--form-element-label-offset);\n}\n</style>\n\n<docs>\n## General\n\nList of keyboard shortcuts for the `<NcAppSettingsShortcutsSection>`.\n\n```vue\n<template>\n\t<NcHotkeyList>\n\t\t<NcHotkey label=\"New File\" hotkey=\"Ctrl N\" />\n\t\t<NcHotkey label=\"Open File\" hotkey=\"Ctrl O\" />\n\t\t<NcHotkey label=\"Save File\" hotkey=\"Ctrl S\" />\n\t</NcHotkeyList>\n</template>\n```\n\n## Groups\n\nThe hotkey list can have an optional heading label. This is useful when there are multiple groups of shortcuts in an app with many shortcuts.\n\n```vue\n<template>\n\t<section>\n\t\t<NcHotkeyList label=\"Actions\">\n\t\t\t<NcHotkey label=\"File actions\" hotkey=\"A\" />\n\t\t\t<NcHotkey label=\"Rename\" hotkey=\"F2\" />\n\t\t\t<NcHotkey label=\"Delete\" hotkey=\"Delete\" />\n\t\t\t<NcHotkey label=\"Add or remove favorite\" hotkey=\"S\" />\n\t\t\t<NcHotkey label=\"Manage tags\" hotkey=\"T\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"Selection\">\n\t\t\t<NcHotkey label=\"Select all files\" hotkey=\"Control A\" />\n\t\t\t<NcHotkey label=\"Deselect all\" hotkey=\"Escape\" />\n\t\t\t<NcHotkey label=\"Select or deselect\" hotkey=\"Control Space\" />\n\t\t\t<NcHotkey label=\"Select a range\" hotkey=\"Control Shift Space\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"Navigation\">\n\t\t\t<NcHotkey label=\"Go to parent folder\" hotkey=\"Alt ArrowUp\" />\n\t\t\t<NcHotkey label=\"Go to file above\" hotkey=\"ArrowUp\" />\n\t\t\t<NcHotkey label=\"Go to file below\" hotkey=\"ArrowDown\" />\n\t\t\t<NcHotkey label=\"Go left in grid\" hotkey=\"ArrowLeft\" />\n\t\t\t<NcHotkey label=\"Go right in grid\" hotkey=\"ArrowRight\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"View\">\n\t\t\t<NcHotkey label=\"Toggle grid view\" hotkey=\"V\" />\n\t\t\t<NcHotkey label=\"Open file sidebar\" hotkey=\"D\" />\n\t\t\t<NcHotkey label=\"Show those shortcuts\" hotkey=\"?\" />\n\t\t</NcHotkeyList>\n\t</section>\n</template>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;AAkBA,UAAM,UAAU,gBAAgB,gBAAA,CAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcIconSvgWrapper-D-aKMbf3.cjs → NcIconSvgWrapper-Bbl4kXZI.cjs}

@@ -1,4 +1,4 @@
-require('../assets/NcIconSvgWrapper-DJQ2Kuip.css');
+require('../assets/NcIconSvgWrapper-Cm1Dmlij.css');
 "use strict";
 const DOMPurify = require("dompurify");
 const Vue = require("vue");
@@ -84,7 +84,7 @@ const __default__ = {
 };
 const __injectCSSVars__ = () => {
   Vue.useCssVars((_vm, _setup) => ({
-    "0ceed50f": _vm.iconSize
+    "dad67fa8": _vm.iconSize
   }));
 };
 const __setup__ = __default__.setup;
@@ -107,8 +107,8 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "6a8df8b8"
+  "4625d649"
 );
 const NcIconSvgWrapper = __component__.exports;
 exports.NcIconSvgWrapper = NcIconSvgWrapper;
-//# sourceMappingURL=NcIconSvgWrapper-D-aKMbf3.cjs.map
+//# sourceMappingURL=NcIconSvgWrapper-Bbl4kXZI.cjs.map

package/dist/chunks/NcIconSvgWrapper-Bbl4kXZI.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcIconSvgWrapper-Bbl4kXZI.cjs","sources":["../../src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\n\nRender raw SVG string icons.\n\n### Usage within `icon`-slot\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<NcButton aria-label=\"Close\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"closeSvg\" name=\"Close\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Settings\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"cogSvg\" name=\"Cog\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Add\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"plusSvg\" name=\"Plus\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Send\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiSendOutline\" name=\"Send\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Star\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiStarOutline\" name=\"Star\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport closeSvg from '@mdi/svg/svg/close.svg?raw'\nimport cogSvg from '@mdi/svg/svg/cog-outline.svg?raw'\nimport plusSvg from '@mdi/svg/svg/plus.svg?raw'\nimport { mdiSendOutline } from '@mdi/js'\nimport { mdiStarOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\t// These icons are static data, so you do not need to put them into `data` which will make them reactive\n\t\treturn {\n\t\t\tcloseSvg,\n\t\t\tcogSvg,\n\t\t\tplusSvg,\n\t\t\tmdiSendOutline,\n\t\t\tmdiStarOutline,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(5, max-content);\n\tgap: 10px;\n}\n</style>\n```\n\n### Inline usage inside text\n\n```vue\n<template>\n\t<p>\n\t\tThis is my <NcIconSvgWrapper inline :path=\"mdiStarOutline\" /> Favorite\n\t</p>\n</template>\n<script>\nimport { mdiStarOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiStarOutline,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Directional usage\n\nThe `directional` property allows to enable a language direction aware icon.\nThis icon component can be used in places where an language direction aware icon should be used,\nfor example if an arrow pointing to the left it used it often points in the wrong direction for right-to-left languages.\nIn this cases this icon can be used which will always point into the logical \"start\" direction.\n\n```vue\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcButton @click=\"isRtl = !isRtl\">Toggle RTL</NcButton>\n\t\t<div class=\"directional\" :dir=\"isRtl ? 'rtl' : 'ltr'\">\n\t\t\t<NcButton alignment=\"start\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiChevronLeft\" />\n\t\t\t\t</template>\n\t\t\t\tPrevious\n\t\t\t</NcButton>\n\t\t\t<NcButton alignment=\"end-reverse\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiChevronRight\" />\n\t\t\t\t</template>\n\t\t\t\tNext\n\t\t\t</NcButton>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { mdiChevronLeft, mdiChevronRight } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiChevronLeft,\n\t\t\tmdiChevronRight,\n\t\t}\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tisRtl: false\n\t\t}\n\t},\n}\n</script>\n<style scoped>\n.wrapper {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(2 * var(--default-grid-baseline));\n\tmax-width: 300px;\n}\n\n.directional {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: calc(2 * var(--default-grid-baseline));\n}\n\n.directional * {\n\tflex: 1 50%;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span\n\t\t:aria-hidden=\"name ? undefined : 'true'\"\n\t\t:aria-label=\"name || undefined\"\n\t\tclass=\"icon-vue\"\n\t\t:class=\"{\n\t\t\t'icon-vue--directional': directional,\n\t\t\t'icon-vue--inline': inline,\n\t\t}\"\n\t\trole=\"img\">\n\t\t<svg v-if=\"!cleanSvg\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<path :d=\"path\" />\n\t\t</svg>\n\t\t<!-- eslint-disable-next-line vue/no-v-text-v-html-on-component,vue/no-v-html -->\n\t\t<span v-else v-html=\"cleanSvg\" />\n\t</span>\n</template>\n\n<script>\nimport DOMPurify from 'dompurify'\nimport Vue from 'vue'\n\nexport default {\n\tname: 'NcIconSvgWrapper',\n\n\tprops: {\n\t\t/**\n\t\t * Make the icon directional, meaning it is langauge direction aware.\n\t\t * If the icon is placed in a right-to-left context it will be mirrored vertically.\n\t\t */\n\t\tdirectional: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Set if the icon should be used as inline content e.g. within text.\n\t\t * By default the icon is made a block element for use inside `icon`-slots.\n\t\t */\n\t\tinline: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Raw SVG string to render\n\t\t */\n\t\tsvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Label of the icon, used in aria-label\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.\n\t\t */\n\t\tpath: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Size of the icon to show. Only use if not using within an icon slot.\n\t\t * Defaults to 20px which is the Nextcloud icon size for all icon slots.\n\t\t *\n\t\t * @default 20\n\t\t */\n\t\tsize: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: 20,\n\t\t\tvalidator: (value) => typeof value === 'number' || value === 'auto',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Icon size used in CSS\n\t\t */\n\t\ticonSize() {\n\t\t\treturn typeof this.size === 'number' ? `${this.size}px` : this.size\n\t\t},\n\n\t\tcleanSvg() {\n\t\t\tif (!this.svg || this.path) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst svg = DOMPurify.sanitize(this.svg)\n\n\t\t\tconst svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml')\n\n\t\t\tif (svgDocument.querySelector('parsererror')) {\n\t\t\t\tVue.util.warn('SVG is not valid')\n\t\t\t\treturn ''\n\t\t\t}\n\n\t\t\tif (svgDocument.documentElement.id) {\n\t\t\t\tsvgDocument.documentElement.removeAttribute('id')\n\t\t\t}\n\n\t\t\treturn svgDocument.documentElement.outerHTML\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.icon-vue {\n\t--icon-size: v-bind('iconSize');\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tmin-width: var(--default-clickable-area);\n\tmin-height: var(--default-clickable-area);\n\topacity: 1;\n\n\t&--inline {\n\t\tdisplay: inline-flex;\n\t\tmin-width: fit-content;\n\t\tmin-height: fit-content;\n\t\tvertical-align: text-bottom;\n\t}\n\n\t// Icon svg wrapper\n\tspan {\n\t\tline-height: 0;\n\t}\n\n\t&:deep(svg) {\n\t\tfill: currentColor;\n\t\twidth: var(--icon-size, 20px);\n\t\theight: var(--icon-size, 20px);\n\t\tmax-width: var(--icon-size, 20px);\n\t\tmax-height: var(--icon-size, 20px);\n\t}\n\n\t&--directional:deep(svg:dir(rtl)) {\n\t\ttransform: scaleX(-1);\n\t}\n}\n</style>\n"],"names":["DOMPurify","Vue"],"mappings":";;;;;;;AAsLA,MAAA,cAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,MAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,UAAA,YAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AACA,aAAA,OAAA,KAAA,SAAA,WAAA,GAAA,KAAA,IAAA,OAAA,KAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,UAAA,CAAA,KAAA,OAAA,KAAA,MAAA;AACA;AAAA,MACA;AAEA,YAAA,MAAAA,mBAAAA,QAAA,SAAA,KAAA,GAAA;AAEA,YAAA,cAAA,IAAA,UAAA,EAAA,gBAAA,KAAA,eAAA;AAEA,UAAA,YAAA,cAAA,aAAA,GAAA;AACAC,6BAAA,KAAA,KAAA,kBAAA;AACA,eAAA;AAAA,MACA;AAEA,UAAA,YAAA,gBAAA,IAAA;AACA,oBAAA,gBAAA,gBAAA,IAAA;AAAA,MACA;AAEA,aAAA,YAAA,gBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcIconSvgWrapper-BreCg8pX.mjs → NcIconSvgWrapper-Bui9PhAS.mjs}

@@ -1,4 +1,4 @@
-import '../assets/NcIconSvgWrapper-DJQ2Kuip.css';
+import '../assets/NcIconSvgWrapper-Cm1Dmlij.css';
 import DOMPurify from "dompurify";
 import Vue, { useCssVars } from "vue";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
@@ -80,7 +80,7 @@ const __default__ = {
 };
 const __injectCSSVars__ = () => {
   useCssVars((_vm, _setup) => ({
-    "0ceed50f": _vm.iconSize
+    "dad67fa8": _vm.iconSize
   }));
 };
 const __setup__ = __default__.setup;
@@ -103,10 +103,10 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "6a8df8b8"
+  "4625d649"
 );
 const NcIconSvgWrapper = __component__.exports;
 export {
   NcIconSvgWrapper as N
 };
-//# sourceMappingURL=NcIconSvgWrapper-BreCg8pX.mjs.map
+//# sourceMappingURL=NcIconSvgWrapper-Bui9PhAS.mjs.map

package/dist/chunks/NcIconSvgWrapper-Bui9PhAS.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcIconSvgWrapper-Bui9PhAS.mjs","sources":["../../src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\n\nRender raw SVG string icons.\n\n### Usage within `icon`-slot\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<NcButton aria-label=\"Close\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"closeSvg\" name=\"Close\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Settings\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"cogSvg\" name=\"Cog\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Add\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"plusSvg\" name=\"Plus\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Send\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiSendOutline\" name=\"Send\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Star\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiStarOutline\" name=\"Star\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport closeSvg from '@mdi/svg/svg/close.svg?raw'\nimport cogSvg from '@mdi/svg/svg/cog-outline.svg?raw'\nimport plusSvg from '@mdi/svg/svg/plus.svg?raw'\nimport { mdiSendOutline } from '@mdi/js'\nimport { mdiStarOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\t// These icons are static data, so you do not need to put them into `data` which will make them reactive\n\t\treturn {\n\t\t\tcloseSvg,\n\t\t\tcogSvg,\n\t\t\tplusSvg,\n\t\t\tmdiSendOutline,\n\t\t\tmdiStarOutline,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(5, max-content);\n\tgap: 10px;\n}\n</style>\n```\n\n### Inline usage inside text\n\n```vue\n<template>\n\t<p>\n\t\tThis is my <NcIconSvgWrapper inline :path=\"mdiStarOutline\" /> Favorite\n\t</p>\n</template>\n<script>\nimport { mdiStarOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiStarOutline,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Directional usage\n\nThe `directional` property allows to enable a language direction aware icon.\nThis icon component can be used in places where an language direction aware icon should be used,\nfor example if an arrow pointing to the left it used it often points in the wrong direction for right-to-left languages.\nIn this cases this icon can be used which will always point into the logical \"start\" direction.\n\n```vue\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcButton @click=\"isRtl = !isRtl\">Toggle RTL</NcButton>\n\t\t<div class=\"directional\" :dir=\"isRtl ? 'rtl' : 'ltr'\">\n\t\t\t<NcButton alignment=\"start\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiChevronLeft\" />\n\t\t\t\t</template>\n\t\t\t\tPrevious\n\t\t\t</NcButton>\n\t\t\t<NcButton alignment=\"end-reverse\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiChevronRight\" />\n\t\t\t\t</template>\n\t\t\t\tNext\n\t\t\t</NcButton>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { mdiChevronLeft, mdiChevronRight } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiChevronLeft,\n\t\t\tmdiChevronRight,\n\t\t}\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tisRtl: false\n\t\t}\n\t},\n}\n</script>\n<style scoped>\n.wrapper {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(2 * var(--default-grid-baseline));\n\tmax-width: 300px;\n}\n\n.directional {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: calc(2 * var(--default-grid-baseline));\n}\n\n.directional * {\n\tflex: 1 50%;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span\n\t\t:aria-hidden=\"name ? undefined : 'true'\"\n\t\t:aria-label=\"name || undefined\"\n\t\tclass=\"icon-vue\"\n\t\t:class=\"{\n\t\t\t'icon-vue--directional': directional,\n\t\t\t'icon-vue--inline': inline,\n\t\t}\"\n\t\trole=\"img\">\n\t\t<svg v-if=\"!cleanSvg\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<path :d=\"path\" />\n\t\t</svg>\n\t\t<!-- eslint-disable-next-line vue/no-v-text-v-html-on-component,vue/no-v-html -->\n\t\t<span v-else v-html=\"cleanSvg\" />\n\t</span>\n</template>\n\n<script>\nimport DOMPurify from 'dompurify'\nimport Vue from 'vue'\n\nexport default {\n\tname: 'NcIconSvgWrapper',\n\n\tprops: {\n\t\t/**\n\t\t * Make the icon directional, meaning it is langauge direction aware.\n\t\t * If the icon is placed in a right-to-left context it will be mirrored vertically.\n\t\t */\n\t\tdirectional: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Set if the icon should be used as inline content e.g. within text.\n\t\t * By default the icon is made a block element for use inside `icon`-slots.\n\t\t */\n\t\tinline: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Raw SVG string to render\n\t\t */\n\t\tsvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Label of the icon, used in aria-label\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.\n\t\t */\n\t\tpath: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Size of the icon to show. Only use if not using within an icon slot.\n\t\t * Defaults to 20px which is the Nextcloud icon size for all icon slots.\n\t\t *\n\t\t * @default 20\n\t\t */\n\t\tsize: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: 20,\n\t\t\tvalidator: (value) => typeof value === 'number' || value === 'auto',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Icon size used in CSS\n\t\t */\n\t\ticonSize() {\n\t\t\treturn typeof this.size === 'number' ? `${this.size}px` : this.size\n\t\t},\n\n\t\tcleanSvg() {\n\t\t\tif (!this.svg || this.path) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst svg = DOMPurify.sanitize(this.svg)\n\n\t\t\tconst svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml')\n\n\t\t\tif (svgDocument.querySelector('parsererror')) {\n\t\t\t\tVue.util.warn('SVG is not valid')\n\t\t\t\treturn ''\n\t\t\t}\n\n\t\t\tif (svgDocument.documentElement.id) {\n\t\t\t\tsvgDocument.documentElement.removeAttribute('id')\n\t\t\t}\n\n\t\t\treturn svgDocument.documentElement.outerHTML\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.icon-vue {\n\t--icon-size: v-bind('iconSize');\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tmin-width: var(--default-clickable-area);\n\tmin-height: var(--default-clickable-area);\n\topacity: 1;\n\n\t&--inline {\n\t\tdisplay: inline-flex;\n\t\tmin-width: fit-content;\n\t\tmin-height: fit-content;\n\t\tvertical-align: text-bottom;\n\t}\n\n\t// Icon svg wrapper\n\tspan {\n\t\tline-height: 0;\n\t}\n\n\t&:deep(svg) {\n\t\tfill: currentColor;\n\t\twidth: var(--icon-size, 20px);\n\t\theight: var(--icon-size, 20px);\n\t\tmax-width: var(--icon-size, 20px);\n\t\tmax-height: var(--icon-size, 20px);\n\t}\n\n\t&--directional:deep(svg:dir(rtl)) {\n\t\ttransform: scaleX(-1);\n\t}\n}\n</style>\n"],"names":[],"mappings":";;;AAsLA,MAAA,cAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,MAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,UAAA,YAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AACA,aAAA,OAAA,KAAA,SAAA,WAAA,GAAA,KAAA,IAAA,OAAA,KAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,UAAA,CAAA,KAAA,OAAA,KAAA,MAAA;AACA;AAAA,MACA;AAEA,YAAA,MAAA,UAAA,SAAA,KAAA,GAAA;AAEA,YAAA,cAAA,IAAA,UAAA,EAAA,gBAAA,KAAA,eAAA;AAEA,UAAA,YAAA,cAAA,aAAA,GAAA;AACA,YAAA,KAAA,KAAA,kBAAA;AACA,eAAA;AAAA,MACA;AAEA,UAAA,YAAA,gBAAA,IAAA;AACA,oBAAA,gBAAA,gBAAA,IAAA;AAAA,MACA;AAEA,aAAA,YAAA,gBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}