@nextcloud/vue 8.0.0-beta.9 → 8.0.1

package/dist/Components/NcUserBubble.mjs

@@ -1,30 +1,31 @@
-import "../assets/index-9e44e336.css";
-import { n as a } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-import { N as s } from "../chunks/index-fb2ee22c.mjs";
+import "../assets/index-c221fe05.css";
+import { n as s } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+import { N as a } from "../chunks/index-fbf943b3.mjs";
 import n from "./NcPopover.mjs";
-const i = {
+import i from "vue";
+const o = {
   name: "NcUserBubbleDiv"
 };
 var l = function() {
   var e = this, r = e._self._c;
   return r("div", [e._t("trigger")], 2);
-}, o = [], u = /* @__PURE__ */ a(
-  i,
-  l,
+}, u = [], p = /* @__PURE__ */ s(
   o,
+  l,
+  u,
   !1,
   null,
   null,
   null,
   null
 );
-const p = u.exports;
-const c = {
+const c = p.exports;
+const m = {
   name: "NcUserBubble",
   components: {
-    NcAvatar: s,
+    NcAvatar: a,
     NcPopover: n,
-    NcUserBubbleDiv: p
+    NcUserBubbleDiv: c
   },
   props: {
     /**
@@ -46,7 +47,7 @@ const c = {
      */
     displayName: {
       type: String,
-      required: !0
+      default: void 0
     },
     /**
      * Whether or not to display the user-status
@@ -62,8 +63,9 @@ const c = {
       type: String,
       default: void 0,
       validator: (t) => {
+        var e;
         try {
-          return t = new URL(t), !!t;
+          return t = new URL(t, (e = t == null ? void 0 : t.startsWith) != null && e.call(t, "/") ? window.location.href : void 0), !0;
         } catch {
           return !1;
         }
@@ -159,6 +161,9 @@ const c = {
       };
     }
   },
+  mounted() {
+    !this.displayName && !this.user && i.util.warn("[NcUserBubble] At least `displayName` or `user` property should be set.");
+  },
   methods: {
     onOpenChange(t) {
       this.$emit("update:open", t);
@@ -173,22 +178,22 @@ const c = {
     }
   }
 };
-var m = function() {
+var d = function() {
   var e = this, r = e._self._c;
   return r(e.isPopoverComponent, { tag: "component", staticClass: "user-bubble__wrapper", attrs: { trigger: "hover focus", shown: e.open }, on: { "update:open": e.onOpenChange }, scopedSlots: e._u([{ key: "trigger", fn: function() {
-    return [r(e.isLinkComponent, { tag: "component", staticClass: "user-bubble__content", class: { "user-bubble__content--primary": e.primary }, style: e.styles.content, attrs: { href: e.hasUrl ? e.url : null }, on: { click: e.onClick } }, [r("NcAvatar", e._b({ staticClass: "user-bubble__avatar", style: e.styles.avatar, attrs: { url: e.isCustomAvatar && e.isAvatarUrl ? e.avatarImage : void 0, "icon-class": e.isCustomAvatar && !e.isAvatarUrl ? e.avatarImage : void 0, user: e.user, "display-name": e.displayName, size: e.size - e.margin * 2, "disable-tooltip": !0, "disable-menu": !0 } }, "NcAvatar", e.$props, !1)), r("span", { staticClass: "user-bubble__name" }, [e._v(" " + e._s(e.displayName || e.user) + " ")]), e.$slots.name ? r("span", { staticClass: "user-bubble__secondary" }, [e._t("name")], 2) : e._e()], 1)];
+    return [r(e.isLinkComponent, { tag: "component", staticClass: "user-bubble__content", class: { "user-bubble__content--primary": e.primary }, style: e.styles.content, attrs: { href: e.hasUrl ? e.url : null }, on: { click: e.onClick } }, [r("NcAvatar", { staticClass: "user-bubble__avatar", style: e.styles.avatar, attrs: { url: e.isCustomAvatar && e.isAvatarUrl ? e.avatarImage : void 0, "icon-class": e.isCustomAvatar && !e.isAvatarUrl ? e.avatarImage : void 0, user: e.user, "display-name": e.displayName, size: e.size - e.margin * 2, "disable-tooltip": !0, "disable-menu": !0, "show-user-status": e.showUserStatus } }), r("span", { staticClass: "user-bubble__name" }, [e._v(" " + e._s(e.displayName || e.user) + " ")]), e.$slots.name ? r("span", { staticClass: "user-bubble__secondary" }, [e._t("name")], 2) : e._e()], 1)];
   }, proxy: !0 }], null, !0) }, [e._t("default")], 2);
-}, _ = [], d = /* @__PURE__ */ a(
-  c,
+}, _ = [], f = /* @__PURE__ */ s(
   m,
+  d,
   _,
   !1,
   null,
-  "14da7eb2",
+  "55ab76f1",
   null,
   null
 );
-const y = d.exports;
+const N = f.exports;
 export {
-  y as default
+  N as default
 };

package/dist/Components/NcUserBubble.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcUserBubble.mjs","sources":["../../src/components/NcUserBubble/NcUserBubbleDiv.vue","../../src/components/NcUserBubble/NcUserBubble.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2021 Raimund Schlüßler <raimund.schluessler@mailbox.org>\n -\n - @author Raimund Schlüßler <raimund.schluessler@mailbox.org>\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<template>\n\t<div>\n\t\t<slot name=\"trigger\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcUserBubbleDiv',\n}\n</script>\n","<!--\n  - @copyright Copyright (c) 2019 Jonas Sulzer <jonas@violoncello.ch>\n  -\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  - @author Jonas Sulzer <jonas@violoncello.ch>\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<docs>\n\n### General description\n\nThis component displays a user together with a small avatar in a grey bubble.\nIt's possible to use an actual user's avatar, just an image/icon as a url or an icon-class,\nto link the bubble to e.g. a users profile\nand to show a popover on hover with e.g. the full user name handle / email address or something else.\n\nThis component has the following slot:\n* a default slot which is for the content of the popover (this is passed to the popover component directly).\n\n### Examples\n\n```vue\n<p>\n\tSome text before <NcUserBubble user=\"admin\" display-name=\"Admin Example\" :url=\"'/test'\">@admin@foreign-host.com</NcUserBubble> and after the bubble.\n\t<NcUserBubble avatar-image=\"icon-group\" display-name=\"test group xyz\" :primary=\"true\">Hey there!</NcUserBubble>\n</p>\n```\n\n### Example with name slot\n\n```vue\n<template>\n<NcUserBubble\n\t:margin=\"4\"\n\t:size=\"30\"\n\tdisplay-name=\"Administrator\"\n\tuser=\"admin\">\n\t<template #name>\n\t\t<a href=\"#\"\n\t\t\ttitle=\"Remove user\"\n\t\t\tclass=\"icon-close\"\n\t\t\t@click=\"alert\" />\n\t</template>\n</NcUserBubble>\n</template>\n\n<style>\n.icon-close {\n\tdisplay: block;\n\theight: 100%;\n}\n</style>\n```\n\n</docs>\n<template>\n\t<component :is=\"isPopoverComponent\"\n\t\ttrigger=\"hover focus\"\n\t\t:shown=\"open\"\n\t\tclass=\"user-bubble__wrapper\"\n\t\t@update:open=\"onOpenChange\">\n\t\t<!-- Main userbubble structure -->\n\t\t<template #trigger>\n\t\t\t<component :is=\"isLinkComponent\"\n\t\t\t\tclass=\"user-bubble__content\"\n\t\t\t\t:style=\"styles.content\"\n\t\t\t\t:href=\"hasUrl ? url : null\"\n\t\t\t\t:class=\"{ 'user-bubble__content--primary': primary }\"\n\t\t\t\t@click=\"onClick\">\n\t\t\t\t<!-- NcAvatar -->\n\t\t\t\t<NcAvatar :url=\"isCustomAvatar && isAvatarUrl ? avatarImage : undefined\"\n\t\t\t\t\t:icon-class=\"isCustomAvatar && !isAvatarUrl ? avatarImage : undefined\"\n\t\t\t\t\t:user=\"user\"\n\t\t\t\t\t:display-name=\"displayName\"\n\t\t\t\t\t:size=\"size - (margin * 2)\"\n\t\t\t\t\t:style=\"styles.avatar\"\n\t\t\t\t\t:disable-tooltip=\"true\"\n\t\t\t\t\t:disable-menu=\"true\"\n\t\t\t\t\tv-bind=\"$props\"\n\t\t\t\t\tclass=\"user-bubble__avatar\" />\n\n\t\t\t\t<!-- Name -->\n\t\t\t\t<span class=\"user-bubble__name\">\n\t\t\t\t\t{{ displayName || user }}\n\t\t\t\t</span>\n\n\t\t\t\t<!-- @slot Optional slot just after the name -->\n\t\t\t\t<span v-if=\"$slots.name\" class=\"user-bubble__secondary\">\n\t\t\t\t\t<slot name=\"name\" />\n\t\t\t\t</span>\n\t\t\t</component>\n\t\t</template>\n\n\t\t<!-- @slot Main Popover content on userbubble hover/focus -->\n\t\t<slot />\n\t</component>\n</template>\n\n<script>\nimport NcUserBubbleDiv from './NcUserBubbleDiv.vue'\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcPopover from '../NcPopover/index.js'\n\nexport default {\n\tname: 'NcUserBubble',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcPopover,\n\t\tNcUserBubbleDiv,\n\t},\n\tprops: {\n\t\t/**\n\t\t * Override generated avatar, can be an url or an icon class\n\t\t */\n\t\tavatarImage: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Provide the user id if this is a user\n\t\t */\n\t\tuser: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Displayed label\n\t\t */\n\t\tdisplayName: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Whether or not to display the user-status\n\t\t */\n\t\tshowUserStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Define the whole bubble as a link\n\t\t */\n\t\turl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: url => {\n\t\t\t\ttry {\n\t\t\t\t\turl = new URL(url)\n\t\t\t\t\treturn !!url\n\t\t\t\t} catch (error) {\n\t\t\t\t\treturn false\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\t/**\n\t\t * Default popover state. Requires the UserBubble\n\t\t * to have some content to render inside the popover\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Use the primary colour\n\t\t */\n\t\tprimary: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * This is the height of the component\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\t\t/**\n\t\t * This is the margin of the avatar (size - margin = avatar size)\n\t\t */\n\t\tmargin: {\n\t\t\ttype: Number,\n\t\t\tdefault: 2,\n\t\t},\n\t},\n\temits: [\n\t\t'click',\n\t\t'update:open',\n\t],\n\tcomputed: {\n\t\t/**\n\t\t * If userbubble is empty, let's NOT\n\t\t * use the Popover component\n\t\t * We need a component instead of a simple div here,\n\t\t * because otherwise the trigger template will not be shown.\n\t\t *\n\t\t * @return {string} 'Popover' or 'UserBubbleDiv'\n\t\t */\n\t\tisPopoverComponent() {\n\t\t\treturn !this.popoverEmpty\n\t\t\t\t? 'NcPopover'\n\t\t\t\t: 'NcUserBubbleDiv'\n\t\t},\n\n\t\t/**\n\t\t * Is the provided avatar url valid or not\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisAvatarUrl() {\n\t\t\tif (!this.avatarImage) {\n\t\t\t\treturn false\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tconst url = new URL(this.avatarImage)\n\t\t\t\treturn !!url\n\t\t\t} catch (error) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Do we have a custom avatar or not\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisCustomAvatar() {\n\t\t\treturn !!this.avatarImage\n\t\t},\n\n\t\thasUrl() {\n\t\t\treturn this.url && this.url.trim() !== ''\n\t\t},\n\n\t\tisLinkComponent() {\n\t\t\treturn this.hasUrl ? 'a' : 'div'\n\t\t},\n\n\t\tpopoverEmpty() {\n\t\t\tif ('default' in this.$slots) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn true\n\t\t},\n\n\t\tstyles() {\n\t\t\treturn {\n\t\t\t\tcontent: {\n\t\t\t\t\theight: this.size + 'px',\n\t\t\t\t\tlineHeight: this.size + 'px',\n\t\t\t\t\tborderRadius: this.size / 2 + 'px',\n\t\t\t\t},\n\t\t\t\tavatar: {\n\t\t\t\t\tmarginLeft: this.margin + 'px',\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t},\n\tmethods: {\n\t\tonOpenChange(state) {\n\t\t\tthis.$emit('update:open', state)\n\t\t},\n\t\t/**\n\t\t * Catch and forward click event to parent\n\t\t *\n\t\t * @param {Event} event the click event\n\t\t */\n\t\tonClick(event) {\n\t\t\tthis.$emit('click', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.user-bubble {\n\t&__wrapper {\n\t\t// align inline with text\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t\t// shrink and allow grow to fit\n\t\tmin-width: 0;\n\t\tmax-width: 100%;\n\t}\n\n\t&__content {\n\t\tdisplay: inline-flex;\n\t\tmax-width: 100%;\n\t\tbackground-color: var(--color-background-dark);\n\n\t\t&--primary {\n\t\t\tcolor: var(--color-primary-element-text);\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t}\n\n\t\t> :last-child {\n\t\t\t// border radius left padding\n\t\t\tpadding-right: 8px;\n\t\t}\n\t}\n\n\t&__avatar {\n\t\talign-self: center;\n\t}\n\n\t&__name {\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t&__name,\n\t&__secondary {\n\t\t// proper spacing between avatar, name & slot\n\t\tpadding: 0;\n\t\tpadding-left: 4px;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main$1","_sfc_main","NcAvatar","NcPopover","NcUserBubbleDiv","url","state","event"],"mappings":";;;;AA4BA,MAAAA,IAAA;AAAA,EACA,MAAA;AACA;;;;;;;;;;;;;;;ACwFA,MAAAC,IAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,iBAAAC;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA;AACA,YAAA;AACA,iBAAAA,IAAA,IAAA,IAAAA,CAAA,GACA,CAAA,CAAAA;AAAA,QACA,QAAA;AACA,iBAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,qBAAA;AACA,aAAA,KAAA,eAEA,oBADA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA;AACA,UAAA,CAAA,KAAA;AACA,eAAA;AAGA,UAAA;AAEA,eAAA,CAAA,CADA,IAAA,IAAA,KAAA,WAAA;AAAA,MAEA,QAAA;AACA,eAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAA;AACA,aAAA,CAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,SAAA;AACA,aAAA,KAAA,OAAA,KAAA,IAAA,KAAA,MAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,SAAA,MAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAA,eAAA,KAAA;AAAA,IAIA;AAAA,IAEA,SAAA;AACA,aAAA;AAAA,QACA,SAAA;AAAA,UACA,QAAA,KAAA,OAAA;AAAA,UACA,YAAA,KAAA,OAAA;AAAA,UACA,cAAA,KAAA,OAAA,IAAA;AAAA,QACA;AAAA,QACA,QAAA;AAAA,UACA,YAAA,KAAA,SAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EACA,SAAA;AAAA,IACA,aAAAC,GAAA;AACA,WAAA,MAAA,eAAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAAC,GAAA;AACA,WAAA,MAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcUserBubble.mjs","sources":["../../src/components/NcUserBubble/NcUserBubbleDiv.vue","../../src/components/NcUserBubble/NcUserBubble.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2021 Raimund Schlüßler <raimund.schluessler@mailbox.org>\n -\n - @author Raimund Schlüßler <raimund.schluessler@mailbox.org>\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<template>\n\t<div>\n\t\t<slot name=\"trigger\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcUserBubbleDiv',\n}\n</script>\n","<!--\n  - @copyright Copyright (c) 2019 Jonas Sulzer <jonas@violoncello.ch>\n  -\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  - @author Jonas Sulzer <jonas@violoncello.ch>\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<docs>\n\n### General description\n\nThis component displays a user together with a small avatar in a grey bubble.\nIt's possible to use an actual user's avatar, just an image/icon as a url or an icon-class,\nto link the bubble to e.g. a users profile\nand to show a popover on hover with e.g. the full user name handle / email address or something else.\n\nThis component has the following slot:\n* a default slot which is for the content of the popover (this is passed to the popover component directly).\n\n### Examples\n\n```vue\n<p>\n\tSome text before <NcUserBubble user=\"admin\" display-name=\"Admin Example\" url=\"/test\">@admin@foreign-host.com</NcUserBubble> and after the bubble.\n\t<NcUserBubble avatar-image=\"icon-group\" display-name=\"test group xyz\" :primary=\"true\">Hey there!</NcUserBubble>\n</p>\n```\n\n### Example with name slot\n\n```vue\n<template>\n<NcUserBubble\n\t:margin=\"4\"\n\t:size=\"30\"\n\tdisplay-name=\"Administrator\"\n\tuser=\"admin\">\n\t<template #name>\n\t\t<a href=\"#\"\n\t\t\ttitle=\"Remove user\"\n\t\t\tclass=\"icon-close\"\n\t\t\t@click=\"alert\" />\n\t</template>\n</NcUserBubble>\n</template>\n<script>\nexport default {\n\tmethods: {\n\t\talert() {\n\t\t\talert('Removed')\n\t\t},\n\t},\n}\n</script>\n<style>\n.icon-close {\n\tdisplay: block;\n\theight: 100%;\n}\n</style>\n```\n\n</docs>\n<template>\n\t<component :is=\"isPopoverComponent\"\n\t\ttrigger=\"hover focus\"\n\t\t:shown=\"open\"\n\t\tclass=\"user-bubble__wrapper\"\n\t\t@update:open=\"onOpenChange\">\n\t\t<!-- Main userbubble structure -->\n\t\t<template #trigger>\n\t\t\t<component :is=\"isLinkComponent\"\n\t\t\t\tclass=\"user-bubble__content\"\n\t\t\t\t:style=\"styles.content\"\n\t\t\t\t:href=\"hasUrl ? url : null\"\n\t\t\t\t:class=\"{ 'user-bubble__content--primary': primary }\"\n\t\t\t\t@click=\"onClick\">\n\t\t\t\t<!-- NcAvatar -->\n\t\t\t\t<NcAvatar :url=\"isCustomAvatar && isAvatarUrl ? avatarImage : undefined\"\n\t\t\t\t\t:icon-class=\"isCustomAvatar && !isAvatarUrl ? avatarImage : undefined\"\n\t\t\t\t\t:user=\"user\"\n\t\t\t\t\t:display-name=\"displayName\"\n\t\t\t\t\t:size=\"size - (margin * 2)\"\n\t\t\t\t\t:style=\"styles.avatar\"\n\t\t\t\t\t:disable-tooltip=\"true\"\n\t\t\t\t\t:disable-menu=\"true\"\n\t\t\t\t\t:show-user-status=\"showUserStatus\"\n\t\t\t\t\tclass=\"user-bubble__avatar\" />\n\n\t\t\t\t<!-- Name -->\n\t\t\t\t<span class=\"user-bubble__name\">\n\t\t\t\t\t{{ displayName || user }}\n\t\t\t\t</span>\n\n\t\t\t\t<!-- @slot Optional slot just after the name -->\n\t\t\t\t<span v-if=\"$slots.name\" class=\"user-bubble__secondary\">\n\t\t\t\t\t<slot name=\"name\" />\n\t\t\t\t</span>\n\t\t\t</component>\n\t\t</template>\n\n\t\t<!-- @slot Main Popover content on userbubble hover/focus -->\n\t\t<slot />\n\t</component>\n</template>\n\n<script>\nimport NcUserBubbleDiv from './NcUserBubbleDiv.vue'\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport Vue from 'vue'\n\nexport default {\n\tname: 'NcUserBubble',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcPopover,\n\t\tNcUserBubbleDiv,\n\t},\n\tprops: {\n\t\t/**\n\t\t * Override generated avatar, can be an url or an icon class\n\t\t */\n\t\tavatarImage: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Provide the user id if this is a user\n\t\t */\n\t\tuser: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Displayed label\n\t\t */\n\t\tdisplayName: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Whether or not to display the user-status\n\t\t */\n\t\tshowUserStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Define the whole bubble as a link\n\t\t */\n\t\turl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (url) => {\n\t\t\t\ttry {\n\t\t\t\t\turl = new URL(url, url?.startsWith?.('/') ? window.location.href : undefined)\n\t\t\t\t\treturn true\n\t\t\t\t} catch (error) {\n\t\t\t\t\treturn false\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\t/**\n\t\t * Default popover state. Requires the UserBubble\n\t\t * to have some content to render inside the popover\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Use the primary colour\n\t\t */\n\t\tprimary: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * This is the height of the component\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\t\t/**\n\t\t * This is the margin of the avatar (size - margin = avatar size)\n\t\t */\n\t\tmargin: {\n\t\t\ttype: Number,\n\t\t\tdefault: 2,\n\t\t},\n\t},\n\temits: [\n\t\t'click',\n\t\t'update:open',\n\t],\n\tcomputed: {\n\t\t/**\n\t\t * If userbubble is empty, let's NOT\n\t\t * use the Popover component\n\t\t * We need a component instead of a simple div here,\n\t\t * because otherwise the trigger template will not be shown.\n\t\t *\n\t\t * @return {string} 'Popover' or 'UserBubbleDiv'\n\t\t */\n\t\tisPopoverComponent() {\n\t\t\treturn !this.popoverEmpty\n\t\t\t\t? 'NcPopover'\n\t\t\t\t: 'NcUserBubbleDiv'\n\t\t},\n\n\t\t/**\n\t\t * Is the provided avatar url valid or not\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisAvatarUrl() {\n\t\t\tif (!this.avatarImage) {\n\t\t\t\treturn false\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tconst url = new URL(this.avatarImage)\n\t\t\t\treturn !!url\n\t\t\t} catch (error) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Do we have a custom avatar or not\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisCustomAvatar() {\n\t\t\treturn !!this.avatarImage\n\t\t},\n\n\t\thasUrl() {\n\t\t\treturn this.url && this.url.trim() !== ''\n\t\t},\n\n\t\tisLinkComponent() {\n\t\t\treturn this.hasUrl ? 'a' : 'div'\n\t\t},\n\n\t\tpopoverEmpty() {\n\t\t\tif ('default' in this.$slots) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn true\n\t\t},\n\n\t\tstyles() {\n\t\t\treturn {\n\t\t\t\tcontent: {\n\t\t\t\t\theight: this.size + 'px',\n\t\t\t\t\tlineHeight: this.size + 'px',\n\t\t\t\t\tborderRadius: this.size / 2 + 'px',\n\t\t\t\t},\n\t\t\t\tavatar: {\n\t\t\t\t\tmarginLeft: this.margin + 'px',\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t},\n\tmounted() {\n\t\tif (!this.displayName && !this.user) {\n\t\t\tVue.util.warn('[NcUserBubble] At least `displayName` or `user` property should be set.')\n\t\t}\n\t},\n\tmethods: {\n\t\tonOpenChange(state) {\n\t\t\tthis.$emit('update:open', state)\n\t\t},\n\t\t/**\n\t\t * Catch and forward click event to parent\n\t\t *\n\t\t * @param {Event} event the click event\n\t\t */\n\t\tonClick(event) {\n\t\t\tthis.$emit('click', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.user-bubble {\n\t&__wrapper {\n\t\t// align inline with text\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t\t// shrink and allow grow to fit\n\t\tmin-width: 0;\n\t\tmax-width: 100%;\n\t}\n\n\t&__content {\n\t\tdisplay: inline-flex;\n\t\tmax-width: 100%;\n\t\tbackground-color: var(--color-background-dark);\n\n\t\t&--primary {\n\t\t\tcolor: var(--color-primary-element-text);\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t}\n\n\t\t> :last-child {\n\t\t\t// border radius left padding\n\t\t\tpadding-right: 8px;\n\t\t}\n\t}\n\n\t&__avatar {\n\t\talign-self: center;\n\t}\n\n\t&__name {\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t&__name,\n\t&__secondary {\n\t\t// proper spacing between avatar, name & slot\n\t\tpadding: 0;\n\t\tpadding-left: 4px;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main$1","_sfc_main","NcAvatar","NcPopover","NcUserBubbleDiv","url","_a","Vue","state","event"],"mappings":"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"}

package/dist/assets/{NcAppNavigationToggle-2cc5b864.css → NcAppNavigationToggle-9e170630.css}

@@ -20,16 +20,17 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-.material-design-icon[data-v-506dc204] {
+.material-design-icon[data-v-13b4f13a] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-button.app-navigation-toggle[data-v-506dc204] {
+button.app-navigation-toggle[data-v-13b4f13a] {
   position: absolute;
   top: var(--app-navigation-padding);
   right: calc(0px - var(--app-navigation-padding));
   margin-right: -44px;
+  background-color: var(--color-main-background);
 }

package/dist/assets/{NcInputConfirmCancel-2ba60a52.css → NcInputConfirmCancel-45d1d76b.css}

@@ -20,30 +20,30 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-.material-design-icon {
+.material-design-icon[data-v-dcf0becf] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.app-navigation-input-confirm {
+.app-navigation-input-confirm[data-v-dcf0becf] {
   flex: 1 0 100%;
   width: 100%;
 }
-.app-navigation-input-confirm form {
+.app-navigation-input-confirm form[data-v-dcf0becf] {
   display: flex;
 }
-.app-navigation-input-confirm__input {
+.app-navigation-input-confirm__input[data-v-dcf0becf] {
   height: 34px;
   flex: 1 1 100%;
   font-size: 100% !important;
   margin: 5px 5px 5px -8px !important;
   padding: 7px !important;
 }
-.app-navigation-input-confirm__input:active,
-.app-navigation-input-confirm__input:focus,
-.app-navigation-input-confirm__input:hover {
+.app-navigation-input-confirm__input[data-v-dcf0becf]:active,
+.app-navigation-input-confirm__input[data-v-dcf0becf]:focus,
+.app-navigation-input-confirm__input[data-v-dcf0becf]:hover {
   outline: none;
   background-color: var(--color-main-background);
   color: var(--color-main-text);

package/dist/assets/{index-af72a30b.css → index-05760fea.css}

@@ -105,7 +105,7 @@ li.active[data-v-979f3026] {
 }
 .action-link__longtext[data-v-979f3026] {
   cursor: pointer;
-  white-space: pre-wrap;
+  white-space: pre-wrap !important;
 }
 .action-link__name[data-v-979f3026] {
   font-weight: 700;
@@ -115,3 +115,7 @@ li.active[data-v-979f3026] {
   max-width: 100%;
   display: inline-block;
 }
+.action-link__menu-icon[data-v-979f3026] {
+  margin-left: auto;
+  margin-right: -14px;
+}

package/dist/assets/{index-30e099f7.css → index-0ac09203.css}

@@ -20,17 +20,17 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-.material-design-icon[data-v-e8e5ca46] {
+.material-design-icon[data-v-c47dc611] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.app-navigation-new[data-v-e8e5ca46] {
+.app-navigation-new[data-v-c47dc611] {
   display: block;
   padding: calc(var(--default-grid-baseline, 4px) * 2);
 }
-.app-navigation-new button[data-v-e8e5ca46] {
+.app-navigation-new button[data-v-c47dc611] {
   width: 100%;
 }

package/dist/assets/{index-eea65531.css → index-0e9b11c7.css}

@@ -20,7 +20,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-.material-design-icon[data-v-5423306a] {
+.material-design-icon[data-v-4ad257bb] {
   display: flex;
   align-self: center;
   justify-self: center;
@@ -49,24 +49,24 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-li.active[data-v-5423306a] {
+li.active[data-v-4ad257bb] {
   background-color: var(--color-background-hover);
   border-radius: 6px;
   padding: 0;
 }
-.action--disabled[data-v-5423306a] {
+.action--disabled[data-v-4ad257bb] {
   pointer-events: none;
   opacity: .5;
 }
-.action--disabled[data-v-5423306a]:hover,
-.action--disabled[data-v-5423306a]:focus {
+.action--disabled[data-v-4ad257bb]:hover,
+.action--disabled[data-v-4ad257bb]:focus {
   cursor: default;
   opacity: .5;
 }
-.action--disabled *[data-v-5423306a] {
+.action--disabled *[data-v-4ad257bb] {
   opacity: 1 !important;
 }
-.action-button[data-v-5423306a] {
+.action-button[data-v-4ad257bb] {
   display: flex;
   align-items: flex-start;
   width: 100%;
@@ -85,11 +85,11 @@ li.active[data-v-5423306a] {
   font-size: var(--default-font-size);
   line-height: 44px;
 }
-.action-button > span[data-v-5423306a] {
+.action-button > span[data-v-4ad257bb] {
   cursor: pointer;
   white-space: nowrap;
 }
-.action-button__icon[data-v-5423306a] {
+.action-button__icon[data-v-4ad257bb] {
   width: 44px;
   height: 44px;
   opacity: 1;
@@ -97,16 +97,16 @@ li.active[data-v-5423306a] {
   background-size: 16px;
   background-repeat: no-repeat;
 }
-.action-button[data-v-5423306a] .material-design-icon {
+.action-button[data-v-4ad257bb] .material-design-icon {
   width: 44px;
   height: 44px;
   opacity: 1;
 }
-.action-button[data-v-5423306a] .material-design-icon .material-design-icon__svg {
+.action-button[data-v-4ad257bb] .material-design-icon .material-design-icon__svg {
   vertical-align: middle;
 }
-.action-button__longtext-wrapper[data-v-5423306a],
-.action-button__longtext[data-v-5423306a] {
+.action-button__longtext-wrapper[data-v-4ad257bb],
+.action-button__longtext[data-v-4ad257bb] {
   max-width: 220px;
   line-height: 1.6em;
   padding: 10.8px 0;
@@ -115,11 +115,11 @@ li.active[data-v-5423306a] {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.action-button__longtext[data-v-5423306a] {
+.action-button__longtext[data-v-4ad257bb] {
   cursor: pointer;
-  white-space: pre-wrap;
+  white-space: pre-wrap !important;
 }
-.action-button__name[data-v-5423306a] {
+.action-button__name[data-v-4ad257bb] {
   font-weight: 700;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -127,3 +127,7 @@ li.active[data-v-5423306a] {
   max-width: 100%;
   display: inline-block;
 }
+.action-button__menu-icon[data-v-4ad257bb] {
+  margin-left: auto;
+  margin-right: -14px;
+}

package/dist/assets/{index-7813bab3.css → index-17673ea1.css}

@@ -20,14 +20,14 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-.material-design-icon[data-v-d96bcd79] {
+.material-design-icon[data-v-b318b0e4] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.counter-bubble__counter[data-v-d96bcd79] {
+.counter-bubble__counter[data-v-b318b0e4] {
   font-size: calc(var(--default-font-size) * .8);
   overflow: hidden;
   width: fit-content;
@@ -41,26 +41,24 @@
   font-weight: 700;
   color: var(--color-primary-element-light-text);
 }
-.counter-bubble__counter .active[data-v-d96bcd79] {
+.counter-bubble__counter .active[data-v-b318b0e4] {
   color: var(--color-main-background);
   background-color: var(--color-primary-element-light);
 }
-.counter-bubble__counter--highlighted[data-v-d96bcd79] {
+.counter-bubble__counter--highlighted[data-v-b318b0e4] {
   color: var(--color-primary-element-text);
   background-color: var(--color-primary-element);
 }
-.counter-bubble__counter--highlighted[data-v-d96bcd79],
-.counter-bubble__counter .active[data-v-d96bcd79] {
+.counter-bubble__counter--highlighted.active[data-v-b318b0e4] {
   color: var(--color-primary-element);
   background-color: var(--color-main-background);
 }
-.counter-bubble__counter--outlined[data-v-d96bcd79] {
+.counter-bubble__counter--outlined[data-v-b318b0e4] {
   color: var(--color-primary-element);
   background: transparent;
   box-shadow: inset 0 0 0 2px;
 }
-.counter-bubble__counter--outlined[data-v-d96bcd79],
-.counter-bubble__counter .active[data-v-d96bcd79] {
+.counter-bubble__counter--outlined.active[data-v-b318b0e4] {
   color: var(--color-main-background);
   box-shadow: inset 0 0 0 2px;
 }

package/dist/assets/{index-1151d229.css → index-1f25a3c0.css}

@@ -20,17 +20,17 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-.material-design-icon[data-v-a8066fd5] {
+.material-design-icon[data-v-5162e6df] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.app-settings-section[data-v-a8066fd5] {
+.app-settings-section[data-v-5162e6df] {
   margin-bottom: 80px;
 }
-.app-settings-section__name[data-v-a8066fd5] {
+.app-settings-section__name[data-v-5162e6df] {
   font-size: 20px;
   margin: 0;
   padding: 20px 0;

package/dist/assets/{index-9dcf6260.css → index-2e5e3b55.css}

@@ -20,69 +20,69 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-.material-design-icon[data-v-538ddb41] {
+.material-design-icon[data-v-b9bda6c2] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.avatardiv[data-v-538ddb41] {
+.avatardiv[data-v-b9bda6c2] {
   position: relative;
   display: inline-block;
   width: var(--size);
   height: var(--size);
 }
-.avatardiv--unknown[data-v-538ddb41] {
+.avatardiv--unknown[data-v-b9bda6c2] {
   position: relative;
   background-color: var(--color-main-background);
   white-space: normal;
 }
-.avatardiv[data-v-538ddb41]:not(.avatardiv--unknown) {
+.avatardiv[data-v-b9bda6c2]:not(.avatardiv--unknown) {
   background-color: var(--color-main-background) !important;
   box-shadow: 0 0 5px #0000000d inset;
 }
-.avatardiv--with-menu[data-v-538ddb41] {
+.avatardiv--with-menu[data-v-b9bda6c2] {
   cursor: pointer;
 }
-.avatardiv--with-menu .action-item[data-v-538ddb41] {
+.avatardiv--with-menu .action-item[data-v-b9bda6c2] {
   position: absolute;
   top: 0;
   left: 0;
 }
-.avatardiv--with-menu[data-v-538ddb41] .action-item__menutoggle {
+.avatardiv--with-menu[data-v-b9bda6c2] .action-item__menutoggle {
   cursor: pointer;
   opacity: 0;
 }
-.avatardiv--with-menu[data-v-538ddb41]:focus .action-item__menutoggle,
-.avatardiv--with-menu[data-v-538ddb41]:hover .action-item__menutoggle,
-.avatardiv--with-menu.avatardiv--with-menu-loading[data-v-538ddb41] .action-item__menutoggle {
+.avatardiv--with-menu[data-v-b9bda6c2]:focus .action-item__menutoggle,
+.avatardiv--with-menu[data-v-b9bda6c2]:hover .action-item__menutoggle,
+.avatardiv--with-menu.avatardiv--with-menu-loading[data-v-b9bda6c2] .action-item__menutoggle {
   opacity: 1;
 }
-.avatardiv--with-menu:focus img[data-v-538ddb41],
-.avatardiv--with-menu:hover img[data-v-538ddb41],
-.avatardiv--with-menu.avatardiv--with-menu-loading img[data-v-538ddb41] {
+.avatardiv--with-menu:focus img[data-v-b9bda6c2],
+.avatardiv--with-menu:hover img[data-v-b9bda6c2],
+.avatardiv--with-menu.avatardiv--with-menu-loading img[data-v-b9bda6c2] {
   opacity: .3;
 }
-.avatardiv--with-menu[data-v-538ddb41] .action-item__menutoggle,
-.avatardiv--with-menu img[data-v-538ddb41] {
+.avatardiv--with-menu[data-v-b9bda6c2] .action-item__menutoggle,
+.avatardiv--with-menu img[data-v-b9bda6c2] {
   transition: opacity var(--animation-quick);
 }
-.avatardiv--with-menu[data-v-538ddb41] .button-vue,
-.avatardiv--with-menu[data-v-538ddb41] .button-vue__icon {
+.avatardiv--with-menu[data-v-b9bda6c2] .button-vue,
+.avatardiv--with-menu[data-v-b9bda6c2] .button-vue__icon {
   height: var(--size);
   min-height: var(--size);
   width: var(--size) !important;
   min-width: var(--size);
 }
-.avatardiv .avatardiv__initials-wrapper[data-v-538ddb41] {
+.avatardiv .avatardiv__initials-wrapper[data-v-b9bda6c2] {
   display: block;
   height: var(--size);
   width: var(--size);
   background-color: var(--color-main-background);
   border-radius: 50%;
 }
-.avatardiv .avatardiv__initials-wrapper .unknown[data-v-538ddb41] {
+.avatardiv .avatardiv__initials-wrapper .avatardiv__initials[data-v-b9bda6c2] {
   position: absolute;
   top: 0;
   left: 0;
@@ -91,16 +91,16 @@
   text-align: center;
   font-weight: 400;
 }
-.avatardiv img[data-v-538ddb41] {
+.avatardiv img[data-v-b9bda6c2] {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.avatardiv .material-design-icon[data-v-538ddb41] {
+.avatardiv .material-design-icon[data-v-b9bda6c2] {
   width: var(--size);
   height: var(--size);
 }
-.avatardiv .avatardiv__user-status[data-v-538ddb41] {
+.avatardiv .avatardiv__user-status[data-v-b9bda6c2] {
   position: absolute;
   right: -4px;
   bottom: -4px;
@@ -117,33 +117,33 @@
   background-position: center;
   border-radius: 50%;
 }
-.acli:hover .avatardiv .avatardiv__user-status[data-v-538ddb41] {
+.acli:hover .avatardiv .avatardiv__user-status[data-v-b9bda6c2] {
   border-color: var(--color-background-hover);
   background-color: var(--color-background-hover);
 }
-.acli.active .avatardiv .avatardiv__user-status[data-v-538ddb41] {
+.acli.active .avatardiv .avatardiv__user-status[data-v-b9bda6c2] {
   border-color: var(--color-primary-element-light);
   background-color: var(--color-primary-element-light);
 }
-.avatardiv .avatardiv__user-status--online[data-v-538ddb41] {
+.avatardiv .avatardiv__user-status--online[data-v-b9bda6c2] {
   background-image: url(data:image/svg+xml;base64,PCEtLSBUaGlzIGljb24gaXMgcGFydCBvZiBNYXRlcmlhbCBVSSBJY29ucy4gQ29weXJpZ2h0IDIwMjAgR29vZ2xlIEluYy4sIEFwYWNoZS0yLjAgTGljZW5zZSAtLT4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTQuOCAxMS4yaDYuNFY0LjhINC44djYuNHpNOCAwQzMuNiAwIDAgMy42IDAgOHMzLjYgOCA4IDggOC0zLjYgOC04LTMuNi04LTgtOHoiIGZpbGw9IiM0OWIzODIiLz48L3N2Zz4K);
 }
-.avatardiv .avatardiv__user-status--dnd[data-v-538ddb41] {
+.avatardiv .avatardiv__user-status--dnd[data-v-b9bda6c2] {
   background-image: url(data:image/svg+xml;base64,PCEtLSBUaGlzIGljb24gaXMgcGFydCBvZiBNYXRlcmlhbCBVSSBJY29ucy4gQ29weXJpZ2h0IDIwMjAgR29vZ2xlIEluYy4sIEFwYWNoZS0yLjAgTGljZW5zZSAtLT4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTS00LTRoMjR2MjRILTRWLTR6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhzMy42IDggOCA4IDgtMy42IDgtOC0zLjYtOC04LTh6IiBmaWxsPSIjZWQ0ODRjIi8+PHBhdGggZD0iTTUgNi41aDZjLjggMCAxLjUuNyAxLjUgMS41cy0uNyAxLjUtMS41IDEuNUg1Yy0uOCAwLTEuNS0uNy0xLjUtMS41UzQuMiA2LjUgNSA2LjV6IiBmaWxsPSIjZmRmZmZmIi8+PC9zdmc+Cg==);
   background-color: #fff;
 }
-.avatardiv .avatardiv__user-status--away[data-v-538ddb41] {
+.avatardiv .avatardiv__user-status--away[data-v-b9bda6c2] {
   background-image: url(data:image/svg+xml;base64,PCEtLSBUaGlzIGljb24gaXMgcGFydCBvZiBNYXRlcmlhbCBVSSBJY29ucy4gQ29weXJpZ2h0IDIwMjAgR29vZ2xlIEluYy4sIEFwYWNoZS0yLjAgTGljZW5zZSAtLT4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTS00LTRoMjR2MjRILTR6Ii8+PHBhdGggZD0iTTYuOS4xQzMgLjYtLjEgNC0uMSA4YzAgNC40IDMuNiA4IDggOCA0IDAgNy40LTMgOC02LjktMS4yIDEuMy0yLjkgMi4xLTQuNyAyLjEtMy41IDAtNi40LTIuOS02LjQtNi40IDAtMS45LjgtMy42IDIuMS00Ljd6IiBmaWxsPSIjZjRhMzMxIi8+PC9zdmc+Cg==);
 }
-.avatardiv .avatardiv__user-status--icon[data-v-538ddb41] {
+.avatardiv .avatardiv__user-status--icon[data-v-b9bda6c2] {
   border: none;
   background-color: transparent;
 }
-.avatardiv .popovermenu-wrapper[data-v-538ddb41] {
+.avatardiv .popovermenu-wrapper[data-v-b9bda6c2] {
   position: relative;
   display: inline-block;
 }
-.avatar-class-icon[data-v-538ddb41] {
+.avatar-class-icon[data-v-b9bda6c2] {
   display: block;
   border-radius: 50%;
   background-color: var(--color-background-darker);