@nextcloud/vue 8.30.0 → 8.32.0

package/dist/chunks/NcHeaderMenu-BzyFhg55.cjs

@@ -0,0 +1,235 @@
+require('../assets/NcMentionBubble-CaztX9Pv.css');
+require('../assets/NcHeaderMenu-BXb9npZp.css');
+"use strict";
+const components = require("@vueuse/components");
+const focusTrap = require("focus-trap");
+const Vue = require("vue");
+const useTrapStackControl = require("./useTrapStackControl-dthvITlQ.cjs");
+const Mixins_clickOutsideOptions = require("../Mixins/clickOutsideOptions.cjs");
+require("../Composables/useIsFullscreen.cjs");
+require("../Composables/useIsMobile.cjs");
+require("escape-html");
+require("striptags");
+require("../Composables/useIsDarkTheme.cjs");
+require("@nextcloud/router");
+require("../Functions/isDarkTheme.cjs");
+;/* empty css                                                                           */
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+require("@nextcloud/auth");
+require("@nextcloud/axios");
+require("@nextcloud/capabilities");
+require("./logger-3HuiEIF6.cjs");
+const focusTrap$1 = require("./focusTrap-DhhUL4JZ.cjs");
+const GenRandomId = require("./GenRandomId-D7iOvpZS.cjs");
+const NcButton = require("./NcButton-DK7bNZIL.cjs");
+const _sfc_main = {
+  name: "NcHeaderMenu",
+  components: {
+    NcButton: NcButton.NcButton
+  },
+  directives: {
+    ClickOutside: components.vOnClickOutside
+  },
+  mixins: [
+    Mixins_clickOutsideOptions
+  ],
+  props: {
+    /**
+     * Unique id for this menu
+     */
+    id: {
+      type: String,
+      required: true
+    },
+    /**
+     * aria-label attribute of the menu open button
+     */
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Current menu open state
+     */
+    open: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Pass `true` if the header menu is used for website navigation
+     *
+     * The wrapper tag will be set to `nav` and its `aria-labelledby`
+     * will be associated with the menu open button
+     */
+    isNav: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Additional visually hidden description text for the menu
+     * open button
+     */
+    description: {
+      type: String,
+      default: null
+    }
+  },
+  emits: [
+    "close",
+    "closed",
+    "open",
+    "opened",
+    "update:open",
+    "cancel"
+  ],
+  setup(props) {
+    const opened = Vue.ref(props.open);
+    useTrapStackControl.useTrapStackControl(opened, {
+      disabled: () => !props.isNav
+    });
+    return {
+      opened
+    };
+  },
+  data() {
+    var _a, _b, _c;
+    return {
+      focusTrap: null,
+      shortcutsDisabled: (_c = (_b = (_a = window.OCP) == null ? void 0 : _a.Accessibility) == null ? void 0 : _b.disableKeyboardShortcuts) == null ? void 0 : _c.call(_b),
+      triggerId: GenRandomId.GenRandomId(),
+      descriptionId: GenRandomId.GenRandomId()
+    };
+  },
+  computed: {
+    wrapperTag() {
+      return this.isNav ? "nav" : "div";
+    },
+    clickOutsideConfig() {
+      return [
+        this.closeMenu,
+        this.clickOutsideOptions
+      ];
+    },
+    listeners() {
+      if (this.isNav) {
+        return {
+          focusout: this.onFocusOut
+        };
+      }
+      return null;
+    }
+  },
+  watch: {
+    open(open) {
+      if (open) {
+        this.openMenu();
+      } else {
+        this.closeMenu();
+      }
+    }
+  },
+  mounted() {
+    document.addEventListener("keydown", this.onKeyDown);
+  },
+  beforeDestroy() {
+    document.removeEventListener("keydown", this.onKeyDown);
+  },
+  methods: {
+    /**
+     * Toggle the current menu open state
+     */
+    toggleMenu() {
+      if (!this.opened) {
+        this.openMenu();
+      } else {
+        this.closeMenu();
+      }
+    },
+    /**
+     * Close the current menu
+     *
+     * @param {boolean} cancelled emit a cancel event instead of close
+     */
+    closeMenu(cancelled = false) {
+      this.opened = false;
+      this.$emit(cancelled ? "cancel" : "close");
+      this.$emit("update:open", false);
+      this.clearFocusTrap();
+      this.$nextTick(() => {
+        this.$emit("closed");
+      });
+    },
+    /**
+     * Open the current menu
+     */
+    openMenu() {
+      this.opened = true;
+      this.$emit("open");
+      this.$emit("update:open", true);
+      this.$nextTick(() => {
+        this.useFocusTrap();
+        this.$emit("opened");
+      });
+    },
+    onKeyDown(event) {
+      if (this.shortcutsDisabled || !this.opened) {
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        this.closeMenu(true);
+      }
+    },
+    /**
+     * @param {FocusEvent} event The focus event
+     */
+    onFocusOut(event) {
+      if (!this.$refs.headerMenu.contains(event.relatedTarget)) {
+        this.closeMenu();
+      }
+    },
+    /**
+     * Add focus trap for accessibility.
+     * Shall only be used when all children are mounted
+     * and available in the DOM. We use $nextTick for that.
+     */
+    async useFocusTrap() {
+      if (this.isNav || this.focusTrap) {
+        return;
+      }
+      const contentContainer = this.$refs.content;
+      this.focusTrap = focusTrap.createFocusTrap(contentContainer, {
+        allowOutsideClick: true,
+        trapStack: focusTrap$1.getTrapStack(),
+        fallbackFocus: this.$refs.trigger.$el
+      });
+      this.focusTrap.activate();
+    },
+    clearFocusTrap() {
+      var _a;
+      (_a = this.focusTrap) == null ? void 0 : _a.deactivate();
+      this.focusTrap = null;
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c(_vm.wrapperTag, _vm._g({ directives: [{ name: "click-outside", rawName: "v-click-outside", value: _vm.clickOutsideConfig, expression: "clickOutsideConfig" }], ref: "headerMenu", tag: "component", staticClass: "header-menu", class: { "header-menu--opened": _vm.opened }, attrs: { "id": _vm.id, "aria-labelledby": _vm.isNav ? _vm.triggerId : null } }, _vm.listeners), [_c("NcButton", { ref: "trigger", staticClass: "header-menu__trigger", attrs: { "id": _vm.isNav ? _vm.triggerId : null, "aria-controls": "header-menu-".concat(_vm.id), "aria-describedby": _vm.description ? _vm.descriptionId : null, "aria-expanded": _vm.opened.toString(), "aria-label": _vm.ariaLabel, "size": "large", "variant": "tertiary-no-background" }, on: { "click": function($event) {
+    $event.preventDefault();
+    return _vm.toggleMenu.apply(null, arguments);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_vm._t("trigger")];
+  }, proxy: true }], null, true) }), _vm.description ? _c("span", { staticClass: "header-menu__description hidden-visually", attrs: { "id": _vm.descriptionId } }, [_vm._v(" " + _vm._s(_vm.description) + " ")]) : _vm._e(), _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.opened, expression: "opened" }], staticClass: "header-menu__carret" }), _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.opened, expression: "opened" }], staticClass: "header-menu__wrapper", attrs: { "id": "header-menu-".concat(_vm.id) } }, [_c("div", { ref: "content", staticClass: "header-menu__content" }, [_vm._t("default")], 2)])], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "80cd9705"
+);
+const NcHeaderMenu = __component__.exports;
+exports.NcHeaderMenu = NcHeaderMenu;
+//# sourceMappingURL=NcHeaderMenu-BzyFhg55.cjs.map

package/dist/chunks/NcHeaderMenu-BzyFhg55.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcHeaderMenu-BzyFhg55.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@import './header-menu__trigger';\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-D5ddiKnF.mjs

@@ -0,0 +1,236 @@
+import '../assets/NcMentionBubble-CaztX9Pv.css';
+import '../assets/NcHeaderMenu-BXb9npZp.css';
+import { vOnClickOutside } from "@vueuse/components";
+import { createFocusTrap } from "focus-trap";
+import { ref } from "vue";
+import { u as useTrapStackControl } from "./useTrapStackControl-2gEo3rvr.mjs";
+import clickOutsideOptions from "../Mixins/clickOutsideOptions.mjs";
+import "../Composables/useIsFullscreen.mjs";
+import "../Composables/useIsMobile.mjs";
+import "escape-html";
+import "striptags";
+import "../Composables/useIsDarkTheme.mjs";
+import "@nextcloud/router";
+import "../Functions/isDarkTheme.mjs";
+/* empty css                                                                          */
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+import "@nextcloud/auth";
+import "@nextcloud/axios";
+import "@nextcloud/capabilities";
+import "./logger-D3RVzcfQ.mjs";
+import { g as getTrapStack } from "./focusTrap-BibOtksr.mjs";
+import { G as GenRandomId } from "./GenRandomId-F5ebeBB_.mjs";
+import { N as NcButton } from "./NcButton-D3CaJu1f.mjs";
+const _sfc_main = {
+  name: "NcHeaderMenu",
+  components: {
+    NcButton
+  },
+  directives: {
+    ClickOutside: vOnClickOutside
+  },
+  mixins: [
+    clickOutsideOptions
+  ],
+  props: {
+    /**
+     * Unique id for this menu
+     */
+    id: {
+      type: String,
+      required: true
+    },
+    /**
+     * aria-label attribute of the menu open button
+     */
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Current menu open state
+     */
+    open: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Pass `true` if the header menu is used for website navigation
+     *
+     * The wrapper tag will be set to `nav` and its `aria-labelledby`
+     * will be associated with the menu open button
+     */
+    isNav: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Additional visually hidden description text for the menu
+     * open button
+     */
+    description: {
+      type: String,
+      default: null
+    }
+  },
+  emits: [
+    "close",
+    "closed",
+    "open",
+    "opened",
+    "update:open",
+    "cancel"
+  ],
+  setup(props) {
+    const opened = ref(props.open);
+    useTrapStackControl(opened, {
+      disabled: () => !props.isNav
+    });
+    return {
+      opened
+    };
+  },
+  data() {
+    var _a, _b, _c;
+    return {
+      focusTrap: null,
+      shortcutsDisabled: (_c = (_b = (_a = window.OCP) == null ? void 0 : _a.Accessibility) == null ? void 0 : _b.disableKeyboardShortcuts) == null ? void 0 : _c.call(_b),
+      triggerId: GenRandomId(),
+      descriptionId: GenRandomId()
+    };
+  },
+  computed: {
+    wrapperTag() {
+      return this.isNav ? "nav" : "div";
+    },
+    clickOutsideConfig() {
+      return [
+        this.closeMenu,
+        this.clickOutsideOptions
+      ];
+    },
+    listeners() {
+      if (this.isNav) {
+        return {
+          focusout: this.onFocusOut
+        };
+      }
+      return null;
+    }
+  },
+  watch: {
+    open(open) {
+      if (open) {
+        this.openMenu();
+      } else {
+        this.closeMenu();
+      }
+    }
+  },
+  mounted() {
+    document.addEventListener("keydown", this.onKeyDown);
+  },
+  beforeDestroy() {
+    document.removeEventListener("keydown", this.onKeyDown);
+  },
+  methods: {
+    /**
+     * Toggle the current menu open state
+     */
+    toggleMenu() {
+      if (!this.opened) {
+        this.openMenu();
+      } else {
+        this.closeMenu();
+      }
+    },
+    /**
+     * Close the current menu
+     *
+     * @param {boolean} cancelled emit a cancel event instead of close
+     */
+    closeMenu(cancelled = false) {
+      this.opened = false;
+      this.$emit(cancelled ? "cancel" : "close");
+      this.$emit("update:open", false);
+      this.clearFocusTrap();
+      this.$nextTick(() => {
+        this.$emit("closed");
+      });
+    },
+    /**
+     * Open the current menu
+     */
+    openMenu() {
+      this.opened = true;
+      this.$emit("open");
+      this.$emit("update:open", true);
+      this.$nextTick(() => {
+        this.useFocusTrap();
+        this.$emit("opened");
+      });
+    },
+    onKeyDown(event) {
+      if (this.shortcutsDisabled || !this.opened) {
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        this.closeMenu(true);
+      }
+    },
+    /**
+     * @param {FocusEvent} event The focus event
+     */
+    onFocusOut(event) {
+      if (!this.$refs.headerMenu.contains(event.relatedTarget)) {
+        this.closeMenu();
+      }
+    },
+    /**
+     * Add focus trap for accessibility.
+     * Shall only be used when all children are mounted
+     * and available in the DOM. We use $nextTick for that.
+     */
+    async useFocusTrap() {
+      if (this.isNav || this.focusTrap) {
+        return;
+      }
+      const contentContainer = this.$refs.content;
+      this.focusTrap = createFocusTrap(contentContainer, {
+        allowOutsideClick: true,
+        trapStack: getTrapStack(),
+        fallbackFocus: this.$refs.trigger.$el
+      });
+      this.focusTrap.activate();
+    },
+    clearFocusTrap() {
+      var _a;
+      (_a = this.focusTrap) == null ? void 0 : _a.deactivate();
+      this.focusTrap = null;
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c(_vm.wrapperTag, _vm._g({ directives: [{ name: "click-outside", rawName: "v-click-outside", value: _vm.clickOutsideConfig, expression: "clickOutsideConfig" }], ref: "headerMenu", tag: "component", staticClass: "header-menu", class: { "header-menu--opened": _vm.opened }, attrs: { "id": _vm.id, "aria-labelledby": _vm.isNav ? _vm.triggerId : null } }, _vm.listeners), [_c("NcButton", { ref: "trigger", staticClass: "header-menu__trigger", attrs: { "id": _vm.isNav ? _vm.triggerId : null, "aria-controls": "header-menu-".concat(_vm.id), "aria-describedby": _vm.description ? _vm.descriptionId : null, "aria-expanded": _vm.opened.toString(), "aria-label": _vm.ariaLabel, "size": "large", "variant": "tertiary-no-background" }, on: { "click": function($event) {
+    $event.preventDefault();
+    return _vm.toggleMenu.apply(null, arguments);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_vm._t("trigger")];
+  }, proxy: true }], null, true) }), _vm.description ? _c("span", { staticClass: "header-menu__description hidden-visually", attrs: { "id": _vm.descriptionId } }, [_vm._v(" " + _vm._s(_vm.description) + " ")]) : _vm._e(), _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.opened, expression: "opened" }], staticClass: "header-menu__carret" }), _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.opened, expression: "opened" }], staticClass: "header-menu__wrapper", attrs: { "id": "header-menu-".concat(_vm.id) } }, [_c("div", { ref: "content", staticClass: "header-menu__content" }, [_vm._t("default")], 2)])], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "80cd9705"
+);
+const NcHeaderMenu = __component__.exports;
+export {
+  NcHeaderMenu as N
+};
+//# sourceMappingURL=NcHeaderMenu-D5ddiKnF.mjs.map

package/dist/chunks/NcHeaderMenu-D5ddiKnF.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcHeaderMenu-D5ddiKnF.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@import './header-menu__trigger';\n\n.header-menu {\n\t&__wrapper {\n\t\tposition: fixed;\n\t\tz-index: 2000;\n\t\ttop: var(--header-height);\n\t\tinset-inline-end: 0;\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $externalMargin;\n\t\tborder-radius: 0 0 var(--border-radius) var(--border-radius);\n\t\tborder-radius: var(--border-radius-large);\n\t\tbackground-color: var(--color-main-background);\n\n\t\tfilter: drop-shadow(0 1px 5px var(--color-box-shadow));\n\t}\n\n\t&__carret {\n\t\tposition: absolute;\n\t\tz-index: 2001; // Because __wrapper is 2000.\n\t\tbottom: 0;\n\t\tinset-inline-start: calc(50% - 10px);\n\t\twidth: 0;\n\t\theight: 0;\n\t\tcontent: ' ';\n\t\tpointer-events: none;\n\t\tborder: 10px solid transparent;\n\t\tborder-bottom-color: var(--color-main-background);\n\t}\n\n\t&__content {\n\t\toverflow: auto;\n\t\twidth: 350px;\n\t\tmax-width: calc(100vw - 2 * $externalMargin);\n\t\tmin-height: calc(var(--default-clickable-area) * 1.5);\n\t\tmax-height: calc(100vh - var(--header-height) * 2);\n\t\t:deep(.empty-content) {\n\t\t\tmargin: 12vh 10px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["ClickOutside"],"mappings":"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"}

package/dist/chunks/NcIconSvgWrapper-BCVwmZN2.mjs

@@ -0,0 +1,112 @@
+import '../assets/NcIconSvgWrapper-DJQ2Kuip.css';
+import DOMPurify from "dompurify";
+import Vue, { useCssVars } from "vue";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+const __default__ = {
+  name: "NcIconSvgWrapper",
+  props: {
+    /**
+     * Make the icon directional, meaning it is langauge direction aware.
+     * If the icon is placed in a right-to-left context it will be mirrored vertically.
+     */
+    directional: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Set if the icon should be used as inline content e.g. within text.
+     * By default the icon is made a block element for use inside `icon`-slots.
+     */
+    inline: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Raw SVG string to render
+     */
+    svg: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Label of the icon, used in aria-label
+     */
+    name: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.
+     */
+    path: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Size of the icon to show. Only use if not using within an icon slot.
+     * Defaults to 20px which is the Nextcloud icon size for all icon slots.
+     *
+     * @default 20
+     */
+    size: {
+      type: [Number, String],
+      default: 20,
+      validator: (value) => typeof value === "number" || value === "auto"
+    }
+  },
+  computed: {
+    /**
+     * Icon size used in CSS
+     */
+    iconSize() {
+      return typeof this.size === "number" ? "".concat(this.size, "px") : this.size;
+    },
+    cleanSvg() {
+      if (!this.svg || this.path) {
+        return;
+      }
+      const svg = DOMPurify.sanitize(this.svg);
+      const svgDocument = new DOMParser().parseFromString(svg, "image/svg+xml");
+      if (svgDocument.querySelector("parsererror")) {
+        Vue.util.warn("SVG is not valid");
+        return "";
+      }
+      if (svgDocument.documentElement.id) {
+        svgDocument.documentElement.removeAttribute("id");
+      }
+      return svgDocument.documentElement.outerHTML;
+    }
+  }
+};
+const __injectCSSVars__ = () => {
+  useCssVars((_vm, _setup) => ({
+    "0ceed50f": _vm.iconSize
+  }));
+};
+const __setup__ = __default__.setup;
+__default__.setup = __setup__ ? (props, ctx) => {
+  __injectCSSVars__();
+  return __setup__(props, ctx);
+} : __injectCSSVars__;
+const _sfc_main = __default__;
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", { staticClass: "icon-vue", class: {
+    "icon-vue--directional": _vm.directional,
+    "icon-vue--inline": _vm.inline
+  }, attrs: { "aria-hidden": _vm.name ? void 0 : "true", "aria-label": _vm.name || void 0, "role": "img" } }, [!_vm.cleanSvg ? _c("svg", { attrs: { "viewBox": "0 0 24 24", "xmlns": "http://www.w3.org/2000/svg" } }, [_c("path", { attrs: { "d": _vm.path } })]) : _c("span", { domProps: { "innerHTML": _vm._s(_vm.cleanSvg) } })]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "6a8df8b8"
+);
+const NcIconSvgWrapper = __component__.exports;
+export {
+  NcIconSvgWrapper as N
+};
+//# sourceMappingURL=NcIconSvgWrapper-BCVwmZN2.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcIconSvgWrapper-BCVwmZN2.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=\"mdiSend\" 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=\"mdiStar\" 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.svg?raw'\nimport plusSvg from '@mdi/svg/svg/plus.svg?raw'\nimport { mdiSend } from '@mdi/js'\nimport { mdiStar } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\t// This 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\tmdiSend,\n\t\t\tmdiStar,\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=\"mdiStar\" /> Favorite\n\t</p>\n</template>\n<script>\nimport { mdiStar } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiStar,\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,YAAA,MAAA,QAAA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}