@nextcloud/vue 8.3.0 → 8.5.0

package/dist/chunks/NcEmojiPicker-o1VRXxQO.cjs

@@ -0,0 +1,238 @@
+var T = require("../assets/NcEmojiPicker-lBXbC6Jd.css");
+const l = require("emoji-mart-vue-fast"), r = require("./_l10n-juAR1Sua.cjs"), c = require("./emoji-mJIuLpNR.cjs"), o = require("./GenColors-6mrcK1J2.cjs"), p = require("emoji-mart-vue-fast/data/all.json"), f = require("./_plugin-vue2_normalizer-DCfUPqga.cjs"), d = require("../Components/NcButton.cjs"), m = require("./NcColorPicker-4qA0UWdA.cjs"), h = require("./NcPopover-EXxv8Pzw.cjs"), k = require("./NcTextField-8ap5MAGr.cjs"), _ = (t) => t && t.__esModule ? t : { default: t }, v = /* @__PURE__ */ _(p);
+r.register(r.t6, r.t30, r.t34);
+const y = {
+  name: "CircleIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var g = function() {
+  var e = this, n = e._self._c;
+  return n("span", e._b({ staticClass: "material-design-icon circle-icon", attrs: { "aria-hidden": !e.title, "aria-label": e.title, role: "img" }, on: { click: function(i) {
+    return e.$emit("click", i);
+  } } }, "span", e.$attrs, !1), [n("svg", { staticClass: "material-design-icon__svg", attrs: { fill: e.fillColor, width: e.size, height: e.size, viewBox: "0 0 24 24" } }, [n("path", { attrs: { d: "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" } }, [e.title ? n("title", [e._v(e._s(e.title))]) : e._e()])])]);
+}, C = [], S = /* @__PURE__ */ f.normalizeComponent(
+  y,
+  g,
+  C,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const w = S.exports;
+let a;
+const j = {
+  search: r.t("Search emoji"),
+  notfound: r.t("No emoji found"),
+  categories: {
+    search: r.t("Search results"),
+    recent: r.t("Frequently used"),
+    smileys: r.t("Smileys & Emotion"),
+    people: r.t("People & Body"),
+    nature: r.t("Animals & Nature"),
+    foods: r.t("Food & Drink"),
+    activity: r.t("Activities"),
+    places: r.t("Travel & Places"),
+    objects: r.t("Objects"),
+    symbols: r.t("Symbols"),
+    flags: r.t("Flags"),
+    custom: r.t("Custom")
+  }
+}, u = [
+  new o.Color(255, 222, 52, r.t("Neutral skin color")),
+  new o.Color(228, 205, 166, r.t("Light skin tone")),
+  new o.Color(250, 221, 192, r.t("Medium light skin tone")),
+  new o.Color(174, 129, 87, r.t("Medium skin tone")),
+  new o.Color(158, 113, 88, r.t("Medium dark skin tone")),
+  new o.Color(96, 79, 69, r.t("Dark skin tone"))
+], b = {
+  name: "NcEmojiPicker",
+  components: {
+    Emoji: l.Emoji,
+    IconCircle: w,
+    NcButton: d,
+    NcColorPicker: m.NcColorPicker,
+    NcPopover: h.NcPopover,
+    NcTextField: k.NcTextField,
+    Picker: l.Picker
+  },
+  props: {
+    /**
+     * The emoji-set
+     */
+    activeSet: {
+      type: String,
+      default: "native"
+    },
+    /**
+     * Show preview section when hovering emoji
+     */
+    showPreview: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Allow unselecting the selected emoji
+     */
+    allowUnselect: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Selected emoji to allow unselecting
+     */
+    selectedEmoji: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The fallback emoji in the preview section
+     */
+    previewFallbackEmoji: {
+      type: String,
+      default: "grinning"
+    },
+    /**
+     * The fallback text in the preview section
+     */
+    previewFallbackName: {
+      type: String,
+      default: r.t("Pick an emoji")
+    },
+    /**
+     * Whether to close the emoji picker after picking one
+     */
+    closeOnSelect: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Selector for the popover container
+     */
+    container: {
+      type: [String, Object, Element, Boolean],
+      default: "body"
+    }
+  },
+  emits: [
+    "select",
+    "select-data",
+    "unselect"
+  ],
+  setup() {
+    return a || (a = new l.EmojiIndex(v.default)), {
+      // Non-reactive constants
+      emojiIndex: a,
+      skinTonePalette: u,
+      i18n: j
+    };
+  },
+  data() {
+    const t = c.getCurrentSkinTone();
+    return {
+      /**
+       * The current active color from the skin tone palette
+       */
+      currentColor: u[t - 1],
+      /**
+       * The current active skin tone
+       * @type {1|2|3|4|5|6}
+       */
+      currentSkinTone: t,
+      search: "",
+      open: !1
+    };
+  },
+  computed: {
+    native() {
+      return this.activeSet === "native";
+    }
+  },
+  methods: {
+    t: r.t,
+    clearSearch() {
+      this.search = "";
+      const t = this.$refs.search?.$refs.inputField?.$refs.input;
+      t && t.focus();
+    },
+    /**
+     * Update the current skin tone by the result of the color picker
+     * @param {string} color Color set
+     */
+    onChangeSkinTone(t) {
+      const e = this.skinTonePalette.findIndex((n) => n.color.toLowerCase() === t.toLowerCase());
+      e > -1 && (this.currentSkinTone = e + 1, this.currentColor = this.skinTonePalette[e], c.setCurrentSkinTone(this.currentSkinTone));
+    },
+    select(t) {
+      this.$emit("select", t.native), this.$emit("select-data", t), this.closeOnSelect && (this.open = !1);
+    },
+    unselect() {
+      this.$emit("unselect");
+    },
+    afterShow() {
+      this.$refs.picker.$el.addEventListener("keydown", this.checkKeyEvent);
+      const e = this.$refs.search?.$refs.inputField?.$refs.input;
+      e && e.focus();
+    },
+    afterHide() {
+      this.$refs.picker.$el.removeEventListener("keydown", this.checkKeyEvent);
+    },
+    checkKeyEvent(t) {
+      if (t.key !== "Tab")
+        return;
+      const n = this.$refs.picker.$el.querySelectorAll(
+        "button, input"
+      ), i = n.length - 1;
+      if (n.length <= 1) {
+        t.preventDefault();
+        return;
+      }
+      t.shiftKey === !1 && t.target === n[i] ? (t.preventDefault(), n[0].focus()) : t.shiftKey === !0 && t.target === n[0] && (t.preventDefault(), n[i].focus());
+    }
+  }
+};
+var $ = function() {
+  var e = this, n = e._self._c;
+  return n("NcPopover", e._g(e._b({ attrs: { shown: e.open, container: e.container, "popup-role": "dialog" }, on: { "update:shown": function(i) {
+    e.open = i;
+  }, "after-show": e.afterShow, "after-hide": e.afterHide }, scopedSlots: e._u([{ key: "trigger", fn: function(i) {
+    return [e._t("default", null, null, i)];
+  } }], null, !0) }, "NcPopover", e.$attrs, !1), e.$listeners), [n("Picker", e._b({ ref: "picker", attrs: { "auto-focus": !1, color: "var(--color-primary-element)", data: e.emojiIndex, emoji: e.previewFallbackEmoji, i18n: e.i18n, native: e.native, "emoji-size": 20, "per-line": 8, "picker-styles": { width: "320px" }, "show-preview": e.showPreview, skin: e.currentSkinTone, "show-skin-tones": !1, title: e.previewFallbackName, role: "dialog", "aria-label": e.t("Emoji picker") }, on: { select: e.select }, scopedSlots: e._u([{ key: "searchTemplate", fn: function(i) {
+    return [n("div", { staticClass: "search__wrapper" }, [n("NcTextField", { ref: "search", staticClass: "search", attrs: { value: e.search, label: e.t("Search"), "label-visible": !0, placeholder: e.i18n.search, "trailing-button-icon": "close", "trailing-button-label": e.t("Clear search"), "show-trailing-button": e.search !== "" }, on: { "update:value": [function(s) {
+      e.search = s;
+    }, function(s) {
+      return i.onSearch(e.search);
+    }], "trailing-button-click": function(s) {
+      e.clearSearch(), i.onSearch(e.search);
+    } } }), n("NcColorPicker", { attrs: { "palette-only": "", palette: e.skinTonePalette, value: e.currentColor.color }, on: { "update:value": e.onChangeSkinTone } }, [n("NcButton", { attrs: { "aria-label": e.t("Skin tone"), type: "tertiary-no-background" }, scopedSlots: e._u([{ key: "icon", fn: function() {
+      return [n("IconCircle", { style: { color: e.currentColor.color }, attrs: { title: e.currentColor.name, size: 20 } })];
+    }, proxy: !0 }], null, !0) })], 1)], 1)];
+  } }, e.allowUnselect && e.selectedEmoji ? { key: "customCategory", fn: function() {
+    return [n("div", { staticClass: "emoji-mart-category-label" }, [n("h3", { staticClass: "emoji-mart-category-label" }, [e._v(" " + e._s(e.t("Selected")) + " ")])]), n("Emoji", { staticClass: "emoji-selected", attrs: { data: e.emojiIndex, emoji: e.selectedEmoji, native: !0, size: 32 }, on: { click: e.unselect } }), n("Emoji", { staticClass: "emoji-delete", attrs: { data: e.emojiIndex, emoji: ":x:", native: !0, size: 10 }, on: { click: e.unselect } })];
+  }, proxy: !0 } : null], null, !0) }, "Picker", e.$attrs, !1))], 1);
+}, N = [], P = /* @__PURE__ */ f.normalizeComponent(
+  b,
+  $,
+  N,
+  !1,
+  null,
+  "2d0dea86",
+  null,
+  null
+);
+const E = P.exports;
+exports.NcEmojiPicker = E;

package/dist/chunks/NcEmojiPicker-o1VRXxQO.cjs.map

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

package/dist/chunks/NcHeaderMenu-CIYGCufy.cjs

@@ -0,0 +1,183 @@
+var v = require("../assets/NcHeaderMenu-P0OkK9WN.css");
+const n = require("@vueuse/components"), a = require("focus-trap"), s = require("./GenRandomId-ULxaMkkr.cjs"), o = require("../Mixins/clickOutsideOptions.cjs");
+require("../Composables/useIsFullscreen.cjs");
+require("../Composables/useIsMobile.cjs");
+require("@nextcloud/router");
+;/* empty css                                                                           */
+const u = require("./_plugin-vue2_normalizer-DCfUPqga.cjs");
+require("linkify-string");
+require("escape-html");
+require("striptags");
+require("vue");
+require("@nextcloud/auth");
+require("@nextcloud/axios");
+require("@nextcloud/capabilities");
+const c = require("./focusTrap-n3H52LOw.cjs"), d = require("../Components/NcButton.cjs"), l = {
+  name: "NcHeaderMenu",
+  components: {
+    NcButton: d
+  },
+  directives: {
+    ClickOutside: n.vOnClickOutside
+  },
+  mixins: [
+    o
+  ],
+  props: {
+    /**
+     * Unique id for this menu
+     */
+    id: {
+      type: String,
+      required: !0
+    },
+    /**
+     * aria-label attribute of the menu open button
+     */
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Current menu open state
+     */
+    open: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * 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: !1
+    },
+    /**
+     * Additional visually hidden description text for the menu
+     * open button
+     */
+    description: {
+      type: String,
+      default: null
+    }
+  },
+  emits: [
+    "close",
+    "closed",
+    "open",
+    "opened",
+    "update:open",
+    "cancel"
+  ],
+  data() {
+    return {
+      focusTrap: null,
+      opened: this.open,
+      shortcutsDisabled: window.OCP?.Accessibility?.disableKeyboardShortcuts?.(),
+      triggerId: s.GenRandomId(),
+      descriptionId: s.GenRandomId()
+    };
+  },
+  computed: {
+    wrapperTag() {
+      return this.isNav ? "nav" : "div";
+    },
+    clickOutsideConfig() {
+      return [
+        this.closeMenu,
+        this.clickOutsideOptions
+      ];
+    },
+    listeners() {
+      return this.isNav ? {
+        focusout: this.onFocusOut
+      } : null;
+    }
+  },
+  watch: {
+    open(t) {
+      t ? this.openMenu() : this.closeMenu();
+    }
+  },
+  mounted() {
+    document.addEventListener("keydown", this.onKeyDown);
+  },
+  beforeDestroy() {
+    document.removeEventListener("keydown", this.onKeyDown);
+  },
+  methods: {
+    /**
+     * Toggle the current menu open state
+     */
+    toggleMenu() {
+      this.opened ? this.closeMenu() : this.openMenu();
+    },
+    /**
+     * Close the current menu
+     *
+     * @param {boolean} cancelled emit a cancel event instead of close
+     */
+    closeMenu(t = !1) {
+      this.opened = !1, this.$emit(t ? "cancel" : "close"), this.$emit("update:open", !1), this.clearFocusTrap(), this.$nextTick(() => {
+        this.$emit("closed");
+      });
+    },
+    /**
+     * Open the current menu
+     */
+    openMenu() {
+      this.opened = !0, this.$emit("open"), this.$emit("update:open", !0), this.$nextTick(() => {
+        this.useFocusTrap(), this.$emit("opened");
+      });
+    },
+    onKeyDown(t) {
+      this.shortcutsDisabled || !this.opened || t.key === "Escape" && (t.preventDefault(), this.closeMenu(!0));
+    },
+    /**
+     * @param {FocusEvent} event The focus event
+     */
+    onFocusOut(t) {
+      this.$refs.headerMenu.contains(t.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 t = this.$refs.content;
+      this.focusTrap = a.createFocusTrap(t, {
+        allowOutsideClick: !0,
+        trapStack: c.getTrapStack(),
+        fallbackFocus: this.$refs.trigger
+      }), this.focusTrap.activate();
+    },
+    clearFocusTrap() {
+      this.focusTrap?.deactivate(), this.focusTrap = null;
+    }
+  }
+};
+var p = function() {
+  var e = this, i = e._self._c;
+  return i(e.wrapperTag, e._g({ directives: [{ name: "click-outside", rawName: "v-click-outside", value: e.clickOutsideConfig, expression: "clickOutsideConfig" }], ref: "headerMenu", tag: "component", staticClass: "header-menu", class: { "header-menu--opened": e.opened }, attrs: { id: e.id, "aria-labelledby": e.isNav ? e.triggerId : null } }, e.listeners), [i("NcButton", { ref: "trigger", staticClass: "header-menu__trigger", attrs: { id: e.isNav ? e.triggerId : null, type: "tertiary-no-background", "aria-label": e.ariaLabel, "aria-describedby": e.description ? e.descriptionId : null, "aria-controls": `header-menu-${e.id}`, "aria-expanded": e.opened.toString() }, on: { click: function(r) {
+    return r.preventDefault(), e.toggleMenu.apply(null, arguments);
+  } }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [e._t("trigger")];
+  }, proxy: !0 }], null, !0) }), e.description ? i("span", { staticClass: "header-menu__description hidden-visually", attrs: { id: e.descriptionId } }, [e._v(" " + e._s(e.description) + " ")]) : e._e(), i("div", { directives: [{ name: "show", rawName: "v-show", value: e.opened, expression: "opened" }], staticClass: "header-menu__carret" }), i("div", { directives: [{ name: "show", rawName: "v-show", value: e.opened, expression: "opened" }], staticClass: "header-menu__wrapper", attrs: { id: `header-menu-${e.id}` } }, [i("div", { ref: "content", staticClass: "header-menu__content" }, [e._t("default")], 2)])], 1);
+}, h = [], f = /* @__PURE__ */ u.normalizeComponent(
+  l,
+  p,
+  h,
+  !1,
+  null,
+  "81a5dab3",
+  null,
+  null
+);
+const m = f.exports;
+exports.NcHeaderMenu = m;

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcHeaderMenu-CIYGCufy.cjs","sources":["../../src/components/NcHeaderMenu/NcHeaderMenu.vue"],"sourcesContent":[" <!--\n  - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program.  If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\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<input placeholder=\"Search for files, comments, contacts...\" type=\"search\" style=\"width: 99%;\" />\n\t\t\t\t<NcEmptyContent\n\t\t\t\t\tname=\"Search\"\n\t\t\t\t\tdescription=\"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}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n}\n</style>\n```\n</docs>\n\n<template>\n\t<component :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 :id=\"isNav ? triggerId : null\"\n\t\t\tref=\"trigger\"\n\t\t\ttype=\"tertiary-no-background\"\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:aria-describedby=\"description ? descriptionId : null\"\n\t\t\t:aria-controls=\"`header-menu-${id}`\"\n\t\t\t:aria-expanded=\"opened.toString()\"\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 v-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 v-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'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { clickOutsideOptions } from '../../mixins/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.js'\n\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\tdata() {\n\t\treturn {\n\t\t\tfocusTrap: null,\n\t\t\topened: this.open,\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\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,\n\t\t\t})\n\t\t\tthis.focusTrap.activate()\n\t\t},\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.header-menu {\n\tposition: relative;\n\twidth: var(--header-height);\n\theight: var(--header-height);\n\n\t&__trigger {\n\t\twidth: var(--header-height);\n\t\theight: var(--header-height);\n\t\topacity: .85;\n\n\t\t// header is filled with primary or image background\n\t\tfilter: none !important;\n\t\tcolor: var(--color-primary-text) !important;\n\t}\n\n\t&--opened &__trigger,\n\t&__trigger:hover,\n\t&__trigger:focus,\n\t&__trigger:active {\n\t\topacity: 1;\n\t}\n\n\t#{&}__trigger:focus-visible {\n\t\toutline: none !important;\n\t\tbox-shadow: none !important;\n\t}\n\n\t&__wrapper {\n\t\tposition: fixed;\n\t\tz-index: 2000;\n\t\ttop: 50px;\n\t\tinset-inline-end: 0;\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $externalMargin;\n\t\tpadding: 8px;\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(44px * 1.5);\n\t\tmax-height: calc(100vh - 50px * 2);\n\t\t:deep(.empty-content) {\n\t\t\tmargin: 12vh 10px;\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.header-menu {\n\t\twidth: $clickable-area;\n\n\t\t&__trigger {\n\t\t\twidth: $clickable-area;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","Components_NcButton","components","Mixins_clickOutsideOptions","GenRandomId","open","cancelled","event","contentContainer","focusTrap","focusTrap$1"],"mappings":";;;;;;;;;;;;;;0FA0HAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,EACA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAC,EAAA;AAAA,EACA;AAAA,EAEA,QAAA;AAAA,IACAC;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,OAAA;AACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA,KAAA;AAAA,MACA,mBAAA,OAAA,KAAA,eAAA,2BAAA;AAAA,MACA,WAAAC,EAAA,YAAA;AAAA,MACA,eAAAA,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,aAAA,KAAA,QACA;AAAA,QACA,UAAA,KAAA;AAAA,MACA,IAEA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,KAAAC,GAAA;AACA,MAAAA,IACA,KAAA,SAAA,IAEA,KAAA,UAAA;AAAA,IAEA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,aAAA,iBAAA,WAAA,KAAA,SAAA;AAAA,EACA;AAAA,EACA,gBAAA;AACA,aAAA,oBAAA,WAAA,KAAA,SAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAEA,MAAA,KAAA,SAGA,KAAA,UAAA,IAFA,KAAA,SAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAAC,IAAA,IAAA;AAEA,WAAA,SAAA,IACA,KAAA,MAAAA,IAAA,WAAA,OAAA,GACA,KAAA,MAAA,eAAA,EAAA,GAGA,KAAA,eAAA,GAGA,KAAA,UAAA,MAAA;AACA,aAAA,MAAA,QAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAEA,WAAA,SAAA,IACA,KAAA,MAAA,MAAA,GACA,KAAA,MAAA,eAAA,EAAA,GAGA,KAAA,UAAA,MAAA;AACA,aAAA,aAAA,GACA,KAAA,MAAA,QAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IAEA,UAAAC,GAAA;AACA,MAAA,KAAA,qBAAA,CAAA,KAAA,UAKAA,EAAA,QAAA,aACAA,EAAA,eAAA,GAGA,KAAA,UAAA,EAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAAA,GAAA;AACA,MAAA,KAAA,MAAA,WAAA,SAAAA,EAAA,aAAA,KACA,KAAA,UAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA,eAAA;AACA,UAAA,KAAA,SAAA,KAAA;AACA;AAGA,YAAAC,IAAA,KAAA,MAAA;AACA,WAAA,YAAAC,EAAA,gBAAAD,GAAA;AAAA,QACA,mBAAA;AAAA,QACA,WAAAE,EAAA,aAAA;AAAA,QACA,eAAA,KAAA,MAAA;AAAA,MACA,CAAA,GACA,KAAA,UAAA,SAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,WAAA,WAAA,WAAA,GACA,KAAA,YAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}