@nextcloud/vue 8.10.0 → 8.11.1

package/dist/chunks/{NcAvatar-Bn9oT7sS.cjs → NcAvatar-CO9waN_L.cjs}

@@ -1,17 +1,16 @@
-require('../assets/NcMentionBubble-BhiXWJv8.css');
-require('../assets/NcAvatar-Dkf1ypwP.css');
+require('../assets/NcMentionBubble-7PQ8wEko.css');
+require('../assets/NcAvatar-CR4U9eTm.css');
 "use strict";
-const m = require("./NcActions-B049TCK5.cjs"), y = require("../Components/NcActionLink.cjs"), U = require("../Components/NcButton.cjs"), _ = require("../Components/NcLoadingIcon.cjs"), c = require("./NcUserStatusIcon-7yBYL8ur.cjs"), d = require("./usernameToColor-7pQQJMR_.cjs");
+const m = require("./NcActions-X10TnO-4.cjs"), y = require("../Components/NcActionLink.cjs"), U = require("../Components/NcButton.cjs"), _ = require("./NcIconSvgWrapper-kIn1eQyv.cjs"), N = require("../Components/NcLoadingIcon.cjs"), u = require("./NcUserStatusIcon-Bqtgf32T.cjs"), l = require("./usernameToColor-B7GSjspk.cjs"), b = require("./getAvatarUrl-CjIpoO6I.cjs");
 require("../Composables/useIsFullscreen.cjs");
 require("../Composables/useIsMobile.cjs");
-const u = require("@nextcloud/router");
 ;/* empty css                                                                           */
-const N = require("./_plugin-vue2_normalizer-GXKvuwrq.cjs");
+const A = require("./_plugin-vue2_normalizer-GXKvuwrq.cjs");
 require("linkify-string");
 require("escape-html");
 require("striptags");
 require("vue");
-const l = require("@nextcloud/auth"), b = require("@nextcloud/axios"), A = require("@nextcloud/capabilities"), n = require("./_l10n-DZggkcVs.cjs"), M = require("./DotsHorizontal-B8kTqpHe.cjs"), i = require("@nextcloud/event-bus"), L = require("@nextcloud/browser-storage"), w = require("@vueuse/components"), C = (e) => e && e.__esModule ? e : { default: e }, f = /* @__PURE__ */ C(b);
+const o = require("@nextcloud/auth"), M = require("@nextcloud/axios"), L = require("@nextcloud/capabilities"), d = require("@nextcloud/router"), n = require("./_l10n-BVVVUgGU.cjs"), x = require("./DotsHorizontal-B8kTqpHe.cjs"), i = require("@nextcloud/event-bus"), w = require("@nextcloud/browser-storage"), C = require("@vueuse/components"), I = (e) => e && e.__esModule ? e : { default: e }, h = /* @__PURE__ */ I(M);
 /**
  * @copyright Copyright (c) 2020 Georg Ehrke <georg-nextcloud@ehrke.email>
  *
@@ -56,15 +55,15 @@ const p = {
       var s, a;
       if (!e)
         return;
-      const t = A.getCapabilities();
-      if (!(!Object.prototype.hasOwnProperty.call(t, "user_status") || !t.user_status.enabled) && l.getCurrentUser())
+      const t = L.getCapabilities();
+      if (!(!Object.prototype.hasOwnProperty.call(t, "user_status") || !t.user_status.enabled) && o.getCurrentUser())
         try {
-          const { data: r } = await f.default.get(u.generateOcsUrl("apps/user_status/api/v1/statuses/{userId}", { userId: e })), {
-            status: o,
-            message: g,
-            icon: S
+          const { data: r } = await h.default.get(d.generateOcsUrl("apps/user_status/api/v1/statuses/{userId}", { userId: e })), {
+            status: v,
+            message: S,
+            icon: g
           } = r.ocs.data;
-          this.userStatus.status = o, this.userStatus.message = g || "", this.userStatus.icon = S || "", this.hasStatus = !0;
+          this.userStatus.status = v, this.userStatus.message = S || "", this.userStatus.icon = g || "", this.hasStatus = !0;
         } catch (r) {
           if (r.response.status === 404 && ((a = (s = r.response.data.ocs) == null ? void 0 : s.data) == null ? void 0 : a.length) === 0)
             return;
@@ -74,26 +73,27 @@ const p = {
   }
 };
 n.register(n.t9);
-const v = L.getBuilder("nextcloud").persist().build();
-function x(e) {
-  const t = v.getItem("user-has-avatar." + e);
+const f = w.getBuilder("nextcloud").persist().build();
+function D(e) {
+  const t = f.getItem("user-has-avatar." + e);
   return typeof t == "string" ? !!t : null;
 }
-function h(e, t) {
-  e && v.setItem("user-has-avatar." + e, t);
+function c(e, t) {
+  e && f.setItem("user-has-avatar." + e, t);
 }
-const I = {
+const q = {
   name: "NcAvatar",
   directives: {
-    ClickOutside: w.vOnClickOutside
+    ClickOutside: C.vOnClickOutside
   },
   components: {
-    DotsHorizontal: M.DotsHorizontal,
+    DotsHorizontal: x.DotsHorizontal,
     NcActions: m.NcActions,
     NcActionLink: y,
     NcButton: U,
-    NcLoadingIcon: _,
-    NcUserStatusIcon: c.NcUserStatusIcon
+    NcIconSvgWrapper: _.NcIconSvgWrapper,
+    NcLoadingIcon: N,
+    NcUserStatusIcon: u.NcUserStatusIcon
   },
   mixins: [p],
   props: {
@@ -231,7 +231,7 @@ const I = {
     avatarAriaLabel() {
       var e, t;
       if (this.hasMenu)
-        return this.canDisplayUserStatus || this.showUserStatusIconOnAvatar ? n.t("Avatar of {displayName}, {status}", { displayName: (e = this.displayName) != null ? e : this.user, status: c.getUserStatusText(this.userStatus.status) }) : n.t("Avatar of {displayName}", { displayName: (t = this.displayName) != null ? t : this.user });
+        return this.canDisplayUserStatus || this.showUserStatusIconOnAvatar ? n.t("Avatar of {displayName}, {status}", { displayName: (e = this.displayName) != null ? e : this.user, status: u.getUserStatusText(this.userStatus.status) }) : n.t("Avatar of {displayName}", { displayName: (t = this.displayName) != null ? t : this.user });
     },
     canDisplayUserStatus() {
       return this.showUserStatus && this.hasStatus && ["online", "away", "busy", "dnd"].includes(this.userStatus.status);
@@ -257,7 +257,7 @@ const I = {
     },
     hasMenu() {
       var e;
-      return this.disableMenu ? !1 : this.isMenuLoaded ? this.menu.length > 0 : !(this.user === ((e = l.getCurrentUser()) == null ? void 0 : e.uid) || this.userDoesNotExist || this.url);
+      return this.disableMenu ? !1 : this.isMenuLoaded ? this.menu.length > 0 : !(this.user === ((e = o.getCurrentUser()) == null ? void 0 : e.uid) || this.userDoesNotExist || this.url);
     },
     /**
      * True if initials should be shown as the user icon fallback
@@ -273,13 +273,13 @@ const I = {
       };
     },
     initialsWrapperStyle() {
-      const { r: e, g: t, b: s } = d.usernameToColor(this.userIdentifier);
+      const { r: e, g: t, b: s } = l.usernameToColor(this.userIdentifier);
       return {
         backgroundColor: "rgba(".concat(e, ", ").concat(t, ", ").concat(s, ", 0.1)")
       };
     },
     initialsStyle() {
-      const { r: e, g: t, b: s } = d.usernameToColor(this.userIdentifier);
+      const { r: e, g: t, b: s } = l.usernameToColor(this.userIdentifier);
       return {
         color: "rgb(".concat(e, ", ").concat(t, ", ").concat(s, ")")
       };
@@ -295,9 +295,12 @@ const I = {
       if (this.showInitials) {
         const t = this.userIdentifier.trim();
         if (t === "")
-          return "?";
-        const s = t.match(/[\p{L}\p{N}\s]/gu).join(""), a = s.lastIndexOf(" ");
-        e = String.fromCodePoint(s.codePointAt(0)), a !== -1 && (e = e.concat(String.fromCodePoint(s.codePointAt(a + 1))));
+          return e;
+        const s = t.match(/[\p{L}\p{N}\s]/gu);
+        if (s == null)
+          return e;
+        const a = s.join(""), r = a.lastIndexOf(" ");
+        e = String.fromCodePoint(a.codePointAt(0)), r !== -1 && (e = e.concat(String.fromCodePoint(a.codePointAt(r + 1))));
       }
       return e.toLocaleUpperCase();
     },
@@ -311,11 +314,15 @@ const I = {
         const a = document.createTextNode(s), r = document.createElement("p");
         return r.appendChild(a), r.innerHTML;
       }
-      return this.showUserStatus && (this.userStatus.icon || this.userStatus.message) ? [{
-        href: "#",
-        icon: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='0' y='14' font-size='14'>".concat(t(this.userStatus.icon), "</text></svg>"),
-        text: "".concat(this.userStatus.message)
-      }].concat(e) : e;
+      if (this.showUserStatus && (this.userStatus.icon || this.userStatus.message)) {
+        const s = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n					<text x="50%" y="50%" text-anchor="middle" style="dominant-baseline: central; font-size: 85%">'.concat(t(this.userStatus.icon), "</text>\n				</svg>");
+        return [{
+          href: "#",
+          iconSvg: this.userStatus.icon ? s : void 0,
+          text: "".concat(this.userStatus.message)
+        }].concat(e);
+      }
+      return e;
     }
   },
   watch: {
@@ -354,7 +361,7 @@ const I = {
     async fetchContactsMenu() {
       this.contactsMenuLoading = !0;
       try {
-        const e = encodeURIComponent(this.user), { data: t } = await f.default.post(u.generateUrl("contactsmenu/findOne"), "shareType=0&shareWith=".concat(e));
+        const e = encodeURIComponent(this.user), { data: t } = await h.default.post(d.generateUrl("contactsmenu/findOne"), "shareType=0&shareWith=".concat(e));
         this.contactsMenuActions = t.topAction ? [t.topAction].concat(t.actions) : t.actions;
       } catch {
         this.contactsMenuOpenState = !1;
@@ -392,18 +399,9 @@ const I = {
      * @return {string}
      */
     avatarUrlGenerator(e, t) {
-      var o;
-      const s = window.getComputedStyle(document.body).getPropertyValue("--background-invert-if-dark") === "invert(100%)";
-      let a = "/avatar/{user}/{size}" + (s ? "/dark" : "");
-      this.isGuest && (a = "/avatar/guest/{user}/{size}" + (s ? "/dark" : ""));
-      let r = u.generateUrl(
-        a,
-        {
-          user: e,
-          size: t
-        }
-      );
-      return e === ((o = l.getCurrentUser()) == null ? void 0 : o.uid) && typeof oc_userconfig < "u" && (r += "?v=" + oc_userconfig.avatar.version), r;
+      var a;
+      let s = b.getAvatarUrl(e, t, this.isGuest);
+      return e === ((a = o.getCurrentUser()) == null ? void 0 : a.uid) && typeof oc_userconfig < "u" && (s += "?v=" + oc_userconfig.avatar.version), s;
     },
     /**
      * Check if the provided url is valid and update Avatar if so
@@ -412,21 +410,21 @@ const I = {
      * @param {Array} srcset the avatar srcset
      */
     updateImageIfValid(e, t = null) {
-      const s = x(this.user);
+      const s = D(this.user);
       if (this.isUserDefined && typeof s == "boolean") {
         this.isAvatarLoaded = !0, this.avatarUrlLoaded = e, t && (this.avatarSrcSetLoaded = t), s === !1 && (this.userDoesNotExist = !0);
         return;
       }
       const a = new Image();
       a.onload = () => {
-        this.avatarUrlLoaded = e, t && (this.avatarSrcSetLoaded = t), this.isAvatarLoaded = !0, h(this.user, !0);
+        this.avatarUrlLoaded = e, t && (this.avatarSrcSetLoaded = t), this.isAvatarLoaded = !0, c(this.user, !0);
       }, a.onerror = () => {
-        console.debug("Invalid avatar url", e), this.avatarUrlLoaded = null, this.avatarSrcSetLoaded = null, this.userDoesNotExist = !0, this.isAvatarLoaded = !1, h(this.user, !1);
+        console.debug("Invalid avatar url", e), this.avatarUrlLoaded = null, this.avatarSrcSetLoaded = null, this.userDoesNotExist = !0, this.isAvatarLoaded = !1, c(this.user, !1);
       }, t && (a.srcset = t), a.src = e;
     }
   }
 };
-var D = function() {
+var O = function() {
   var t = this, s = t._self._c;
   return s("span", { directives: [{ name: "click-outside", rawName: "v-click-outside", value: t.closeMenu, expression: "closeMenu" }], ref: "main", staticClass: "avatardiv popovermenu-wrapper", class: {
     "avatardiv--unknown": t.userDoesNotExist,
@@ -441,18 +439,20 @@ var D = function() {
   }, click: t.toggleMenu }, scopedSlots: t._u([t.contactsMenuLoading ? { key: "icon", fn: function() {
     return [s("NcLoadingIcon")];
   }, proxy: !0 } : null], null, !0) }, t._l(t.menu, function(a, r) {
-    return s("NcActionLink", { key: r, attrs: { href: a.href, icon: a.icon } }, [t._v(" " + t._s(a.text) + " ")]);
+    return s("NcActionLink", { key: r, attrs: { href: a.href, icon: a.icon }, scopedSlots: t._u([a.iconSvg ? { key: "icon", fn: function() {
+      return [s("NcIconSvgWrapper", { attrs: { svg: a.iconSvg } })];
+    }, proxy: !0 } : null], null, !0) }, [t._v(" " + t._s(a.text) + " ")]);
   }), 1) : t._e(), t.showUserStatusIconOnAvatar ? s("span", { staticClass: "avatardiv__user-status avatardiv__user-status--icon" }, [t._v(" " + t._s(t.userStatus.icon) + " ")]) : t.canDisplayUserStatus ? s("NcUserStatusIcon", { staticClass: "avatardiv__user-status", attrs: { status: t.userStatus.status, "aria-hidden": String(t.hasMenu) } }) : t._e(), t.showInitials ? s("span", { staticClass: "avatardiv__initials-wrapper", style: t.initialsWrapperStyle }, [s("span", { staticClass: "avatardiv__initials", style: t.initialsStyle }, [t._v(" " + t._s(t.initials) + " ")])]) : t._e()], 2);
-}, k = [], q = /* @__PURE__ */ N.normalizeComponent(
-  I,
-  D,
+}, k = [], z = /* @__PURE__ */ A.normalizeComponent(
+  q,
+  O,
   k,
   !1,
   null,
-  "de3f465f",
+  "8e0f5c51",
   null,
   null
 );
-const O = q.exports;
-exports.NcAvatar = O;
+const B = z.exports;
+exports.NcAvatar = B;
 exports.userStatus = p;

package/dist/chunks/NcAvatar-CO9waN_L.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAvatar-CO9waN_L.cjs","sources":["../../src/mixins/userStatus.js","../../src/components/NcAvatar/NcAvatar.vue"],"sourcesContent":["/**\n * @copyright Copyright (c) 2020 Georg Ehrke <georg-nextcloud@ehrke.email>\n *\n * @author Georg Ehrke <georg-nextcloud@ehrke.email>\n *\n * @license AGPL-3.0-or-later\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\nimport { getCurrentUser } from '@nextcloud/auth'\nimport axios from '@nextcloud/axios'\nimport { getCapabilities } from '@nextcloud/capabilities'\nimport { generateOcsUrl } from '@nextcloud/router'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\thasStatus: false,\n\t\t\tuserStatus: {\n\t\t\t\tstatus: null,\n\t\t\t\tmessage: null,\n\t\t\t\ticon: null,\n\t\t\t},\n\t\t}\n\t},\n\tmethods: {\n\t\t/**\n\t\t * Fetches the user-status from the server\n\t\t *\n\t\t * @param {string} userId UserId of the user to fetch the status for\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t */\n\t\tasync fetchUserStatus(userId) {\n\t\t\tif (!userId) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst capabilities = getCapabilities()\n\t\t\tif (!Object.prototype.hasOwnProperty.call(capabilities, 'user_status') || !capabilities.user_status.enabled) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// User status endpoint is not available for guests.\n\t\t\tif (!getCurrentUser()) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tconst { data } = await axios.get(generateOcsUrl('apps/user_status/api/v1/statuses/{userId}', { userId }))\n\t\t\t\tconst {\n\t\t\t\t\tstatus,\n\t\t\t\t\tmessage,\n\t\t\t\t\ticon,\n\t\t\t\t} = data.ocs.data\n\t\t\t\tthis.userStatus.status = status\n\t\t\t\tthis.userStatus.message = message || ''\n\t\t\t\tthis.userStatus.icon = icon || ''\n\t\t\t\tthis.hasStatus = true\n\t\t\t} catch (e) {\n\t\t\t\tif (e.response.status === 404 && e.response.data.ocs?.data?.length === 0) {\n\t\t\t\t\t// User just has no status set, so don't log it\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tconsole.error(e)\n\t\t\t}\n\t\t},\n\t},\n}\n","<!--\n  - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>\n  -\n  - @author Julius Härtl <jus@bitgrid.net>\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\n### Basic user avatar\n\n```vue\n\t<NcAvatar user=\"willywonka\" display-name=\"Willy Wonka\" />\n```\n\n### Avatar with image\n\n```vue\n\t<NcAvatar url=\"https://nextcloud.com/wp-content/themes/next/assets/img/common/nextcloud-square-logo.png\" />\n```\n\n### Avatar with material design icon\n\n```\n <template>\n\t<NcAvatar>\n\t\t<template #icon>\n\t\t\t<AccountMultiple :size=\"20\" />\n\t\t</template>\n\t</NcAvatar>\n</template>\n<script>\nimport AccountMultiple from 'vue-material-design-icons/AccountMultiple'\n\nexport default {\n\tcomponents: {\n\t\tAccountMultiple,\n\t},\n }\n </script>\n```\n\n### Avatar with preloaded status\n```\n <template>\n\t<NcAvatar user=\"janedoe\"\n\t\tdisplay-name=\"Jane Doe\"\n\t\t:preloaded-user-status=\"status\">\n\t</NcAvatar>\n</template>\n<script>\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tstatus: {\n\t\t\t\ticon: '',\n\t\t\t\tstatus: 'dnd',\n\t\t\t\tmessage: 'Not busy',\n\t\t\t},\n\t\t}\n\t},\n }\n </script>\n```\n\n### Avatar for non-users\n\n```vue\n\t<NcAvatar display-name=\"Robbie Hyeon-Jeong\" :is-no-user=\"true\" />\n```\n\n### Avatar on complex background\n\n```\n<template>\n\t<div class=\"avatar-background\">\n\t\t<NcAvatar class=\"avatar\" :is-no-user=\"true\" display-name=\"Cecilia Rohese\" />\n\t</div>\n</template>\n<style scoped>\n.avatar-background {\n\twidth: 80px;\n\theight: 60px;\n\tbackground: linear-gradient(to bottom, #0057b8 0%, #0057b8 49.99%, #ffd700 50%, #ffd700 100%);\n}\n\n.avatar {\n\tmargin: 15px 25px;\n}\n</style>\n```\n\n</docs>\n<template>\n\t<span ref=\"main\"\n\t\tv-click-outside=\"closeMenu\"\n\t\t:class=\"{\n\t\t\t'avatardiv--unknown': userDoesNotExist,\n\t\t\t'avatardiv--with-menu': hasMenu,\n\t\t\t'avatardiv--with-menu-loading': contactsMenuLoading\n\t\t}\"\n\t\t:style=\"avatarStyle\"\n\t\tclass=\"avatardiv popovermenu-wrapper\">\n\t\t<!-- @slot Icon slot -->\n\t\t<slot name=\"icon\">\n\t\t\t<!-- Avatar icon or image -->\n\t\t\t<span v-if=\"iconClass\" :class=\"iconClass\" class=\"avatar-class-icon\" />\n\t\t\t<img v-else-if=\"isAvatarLoaded && !userDoesNotExist\"\n\t\t\t\t:src=\"avatarUrlLoaded\"\n\t\t\t\t:srcset=\"avatarSrcSetLoaded\"\n\t\t\t\talt=\"\">\n\t\t</slot>\n\n\t\t<!-- Contact menu -->\n\t\t<!-- We show a button if the menu is not loaded yet. -->\n\t\t<NcButton v-if=\"hasMenu && menu.length === 0\"\n\t\t\ttype=\"tertiary-no-background\"\n\t\t\tclass=\"action-item action-item__menutoggle\"\n\t\t\t:aria-label=\"avatarAriaLabel\"\n\t\t\t:title=\"tooltip\"\n\t\t\t@click=\"toggleMenu\">\n\t\t\t<template #icon>\n\t\t\t\t<NcLoadingIcon v-if=\"contactsMenuLoading\" />\n\t\t\t\t<DotsHorizontal v-else :size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcActions v-else-if=\"hasMenu\"\n\t\t\tforce-menu\n\t\t\tmanual-open\n\t\t\ttype=\"tertiary-no-background\"\n\t\t\t:container=\"menuContainer\"\n\t\t\t:open.sync=\"contactsMenuOpenState\"\n\t\t\t:aria-label=\"avatarAriaLabel\"\n\t\t\t:title=\"tooltip\"\n\t\t\t@click=\"toggleMenu\">\n\t\t\t<NcActionLink v-for=\"(item, key) in menu\"\n\t\t\t\t:key=\"key\"\n\t\t\t\t:href=\"item.href\"\n\t\t\t\t:icon=\"item.icon\">\n\t\t\t\t<template v-if=\"item.iconSvg\" #icon>\n\t\t\t\t\t<NcIconSvgWrapper :svg=\"item.iconSvg\" />\n\t\t\t\t</template>\n\t\t\t\t{{ item.text }}\n\t\t\t</NcActionLink>\n\t\t\t<template v-if=\"contactsMenuLoading\" #icon>\n\t\t\t\t<NcLoadingIcon />\n\t\t\t</template>\n\t\t</NcActions>\n\n\t\t<!-- Avatar status -->\n\t\t<span v-if=\"showUserStatusIconOnAvatar\" class=\"avatardiv__user-status avatardiv__user-status--icon\">\n\t\t\t{{ userStatus.icon }}\n\t\t</span>\n\t\t<NcUserStatusIcon v-else-if=\"canDisplayUserStatus\"\n\t\t\tclass=\"avatardiv__user-status\"\n\t\t\t:status=\"userStatus.status\"\n\t\t\t:aria-hidden=\"String(hasMenu)\" />\n\n\t\t<!-- Show the letter if no avatar nor icon class -->\n\t\t<span v-if=\"showInitials\"\n\t\t\t:style=\"initialsWrapperStyle\"\n\t\t\tclass=\"avatardiv__initials-wrapper\">\n\t\t\t<span :style=\"initialsStyle\" class=\"avatardiv__initials\">\n\t\t\t\t{{ initials }}\n\t\t\t</span>\n\t\t</span>\n\t</span>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcActionLink from '../NcActionLink/index.js'\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport NcUserStatusIcon from '../NcUserStatusIcon/index.js'\nimport usernameToColor from '../../functions/usernameToColor/index.js'\nimport { getAvatarUrl } from '../../utils/getAvatarUrl.ts'\nimport { getUserStatusText } from '../../utils/UserStatus.ts'\nimport { userStatus } from '../../mixins/index.js'\nimport { t } from '../../l10n.js'\n\nimport axios from '@nextcloud/axios'\nimport DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\n\nimport { getCurrentUser } from '@nextcloud/auth'\nimport { subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { getBuilder } from '@nextcloud/browser-storage'\nimport { generateUrl } from '@nextcloud/router'\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\n\nconst browserStorage = getBuilder('nextcloud').persist().build()\n\n/**\n * @param {string} userId The id of the user\n */\nfunction getUserHasAvatar(userId) {\n\tconst flag = browserStorage.getItem('user-has-avatar.' + userId)\n\tif (typeof flag === 'string') {\n\t\treturn Boolean(flag)\n\t}\n\treturn null\n}\n\n/**\n * @param {string} userId The id of the user\n * @param {boolean} flag Has the user an avatar\n */\nfunction setUserHasAvatar(userId, flag) {\n\tif (userId) {\n\t\tbrowserStorage.setItem('user-has-avatar.' + userId, flag)\n\t}\n}\n\nexport default {\n\tname: 'NcAvatar',\n\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\tcomponents: {\n\t\tDotsHorizontal,\n\t\tNcActions,\n\t\tNcActionLink,\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t\tNcLoadingIcon,\n\t\tNcUserStatusIcon,\n\t},\n\tmixins: [userStatus],\n\tprops: {\n\t\t/**\n\t\t * Set a custom url to the avatar image\n\t\t * either the url, user or displayName property must be defined\n\t\t */\n\t\turl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Set a css icon-class for an icon to be used instead of the avatar.\n\t\t */\n\t\ticonClass: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Set the user id to fetch the avatar\n\t\t * either the url, user or displayName property must be defined\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 * Whether or not to display the user-status\n\t\t */\n\t\tshowUserStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * Whether or not to the status-icon should be used instead of online/away\n\t\t */\n\t\tshowUserStatusCompact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * When the user status was preloaded via another source it can be handed in with this property to save the request.\n\t\t * If this property is not set the status will be fetched automatically.\n\t\t * If a preloaded no-status is available provide this object with properties \"status\", \"icon\" and \"message\" set to null.\n\t\t */\n\t\tpreloadedUserStatus: {\n\t\t\ttype: Object,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Is the user a guest user (then we have to user a different endpoint)\n\t\t */\n\t\tisGuest: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Set a display name that will be rendered as a tooltip\n\t\t * either the url, user or displayName property must be defined\n\t\t * specify just the displayname to generate a placeholder avatar without\n\t\t * trying to fetch the avatar based on the user id\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 * Set a size in px for the rendered avatar\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 32,\n\t\t},\n\t\t/**\n\t\t * Placeholder avatars will be automatically generated when this is set to true\n\t\t */\n\t\tallowPlaceholder: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * Disable the tooltip\n\t\t */\n\t\tdisableTooltip: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Disable the menu\n\t\t */\n\t\tdisableMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Declares a custom tooltip when not null\n\t\t * Fallback will be the displayName\n\t\t *\n\t\t * requires disableTooltip not to be set to true\n\t\t */\n\t\ttooltipMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Declares username is not a user's name, when true.\n\t\t * Prevents loading user's avatar from server and forces generating colored initials,\n\t\t * i.e. if the user is a group\n\t\t */\n\t\tisNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover menu container\n\t\t */\n\t\tmenuContainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tavatarUrlLoaded: null,\n\t\t\tavatarSrcSetLoaded: null,\n\t\t\tuserDoesNotExist: false,\n\t\t\tisAvatarLoaded: false,\n\t\t\tisMenuLoaded: false,\n\t\t\tcontactsMenuLoading: false,\n\t\t\tcontactsMenuActions: [],\n\t\t\tcontactsMenuOpenState: false,\n\t\t}\n\t},\n\tcomputed: {\n\t\tavatarAriaLabel() {\n\t\t\t// aria-label is only allowed on interactive elements\n\t\t\tif (!this.hasMenu) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.canDisplayUserStatus || this.showUserStatusIconOnAvatar) {\n\t\t\t\treturn t('Avatar of {displayName}, {status}', { displayName: this.displayName ?? this.user, status: getUserStatusText(this.userStatus.status) })\n\t\t\t}\n\t\t\treturn t('Avatar of {displayName}', { displayName: this.displayName ?? this.user })\n\t\t},\n\t\tcanDisplayUserStatus() {\n\t\t\treturn this.showUserStatus\n\t\t\t\t&& this.hasStatus\n\t\t\t\t&& ['online', 'away', 'busy', 'dnd'].includes(this.userStatus.status)\n\t\t},\n\t\tshowUserStatusIconOnAvatar() {\n\t\t\treturn this.showUserStatus\n\t\t\t\t&& this.showUserStatusCompact\n\t\t\t\t&& this.hasStatus\n\t\t\t\t&& this.userStatus.status !== 'dnd'\n\t\t\t\t&& this.userStatus.icon\n\t\t},\n\t\t/**\n\t\t * The user identifier, either the display name if set or the user property\n\t\t * If both properties are not set an empty string is returned\n\t\t */\n\t\tuserIdentifier() {\n\t\t\tif (this.isDisplayNameDefined) {\n\t\t\t\treturn this.displayName\n\t\t\t}\n\t\t\tif (this.isUserDefined) {\n\t\t\t\treturn this.user\n\t\t\t}\n\t\t\treturn ''\n\t\t},\n\t\tisUserDefined() {\n\t\t\treturn typeof this.user !== 'undefined'\n\t\t},\n\t\tisDisplayNameDefined() {\n\t\t\treturn typeof this.displayName !== 'undefined'\n\t\t},\n\t\tisUrlDefined() {\n\t\t\treturn typeof this.url !== 'undefined'\n\t\t},\n\t\thasMenu() {\n\t\t\tif (this.disableMenu) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tif (this.isMenuLoaded) {\n\t\t\t\treturn this.menu.length > 0\n\t\t\t}\n\t\t\treturn !(this.user === getCurrentUser()?.uid || this.userDoesNotExist || this.url)\n\t\t},\n\n\t\t/**\n\t\t * True if initials should be shown as the user icon fallback\n\t\t */\n\t\tshowInitials() {\n\t\t\treturn this.allowPlaceholder && this.userDoesNotExist && !(this.iconClass || this.$slots.icon)\n\t\t},\n\n\t\tavatarStyle() {\n\t\t\tconst style = {\n\t\t\t\t'--size': this.size + 'px',\n\t\t\t\tlineHeight: this.size + 'px',\n\t\t\t\tfontSize: Math.round(this.size * 0.45) + 'px',\n\t\t\t}\n\t\t\treturn style\n\t\t},\n\t\tinitialsWrapperStyle() {\n\t\t\tconst { r, g, b } = usernameToColor(this.userIdentifier)\n\t\t\treturn {\n\t\t\t\tbackgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)`,\n\t\t\t}\n\t\t},\n\t\tinitialsStyle() {\n\t\t\tconst { r, g, b } = usernameToColor(this.userIdentifier)\n\t\t\treturn {\n\t\t\t\tcolor: `rgb(${r}, ${g}, ${b})`,\n\t\t\t}\n\t\t},\n\t\ttooltip() {\n\t\t\tif (this.disableTooltip) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tif (this.tooltipMessage) {\n\t\t\t\treturn this.tooltipMessage\n\t\t\t}\n\n\t\t\treturn this.displayName\n\t\t},\n\n\t\t/**\n\t\t * Get the (max. two) initials of the user as uppcase string\n\t\t */\n\t\tinitials() {\n\t\t\tlet initials = '?'\n\t\t\tif (this.showInitials) {\n\t\t\t\tconst user = this.userIdentifier.trim()\n\t\t\t\tif (user === '') {\n\t\t\t\t\treturn initials\n\t\t\t\t}\n\n\t\t\t\t/**\n\t\t\t\t * Filtered user name, without special characters so only letters and numbers are allowed (prevent e.g. '(' as an initial)\n\t\t\t\t * \\p{L}: Letters of all languages\n\t\t\t\t * \\p{N}: Numbers of all languages\n\t\t\t\t * \\s: White space for breaking the string\n\t\t\t\t * @type {string}\n\t\t\t\t */\n\t\t\t\tconst filteredChars = user.match(/[\\p{L}\\p{N}\\s]/gu)\n\t\t\t\tif (filteredChars == null) {\n\t\t\t\t\treturn initials\n\t\t\t\t}\n\n\t\t\t\tconst filtered = filteredChars.join('')\n\t\t\t\tconst idx = filtered.lastIndexOf(' ')\n\t\t\t\tinitials = String.fromCodePoint(filtered.codePointAt(0))\n\t\t\t\tif (idx !== -1) {\n\t\t\t\t\tinitials = initials.concat(String.fromCodePoint(filtered.codePointAt(idx + 1)))\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn initials.toLocaleUpperCase()\n\t\t},\n\t\tmenu() {\n\t\t\tconst actions = this.contactsMenuActions.map((item) => {\n\t\t\t\treturn {\n\t\t\t\t\thref: item.hyperlink,\n\t\t\t\t\ticon: item.icon,\n\t\t\t\t\ttext: item.title,\n\t\t\t\t}\n\t\t\t})\n\n\t\t\t/**\n\t\t\t * @param {string} html The HTML to escape\n\t\t\t */\n\t\t\tfunction escape(html) {\n\t\t\t\tconst text = document.createTextNode(html)\n\t\t\t\tconst p = document.createElement('p')\n\t\t\t\tp.appendChild(text)\n\t\t\t\treturn p.innerHTML\n\t\t\t}\n\n\t\t\tif (this.showUserStatus && (this.userStatus.icon || this.userStatus.message)) {\n\t\t\t\t// NcAction's URL icons are inverted in dark mode, so we need to pass SVG image in the icon slot\n\t\t\t\tconst emojiIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n\t\t\t\t\t<text x=\"50%\" y=\"50%\" text-anchor=\"middle\" style=\"dominant-baseline: central; font-size: 85%\">${escape(this.userStatus.icon)}</text>\n\t\t\t\t</svg>`\n\t\t\t\treturn [{\n\t\t\t\t\thref: '#',\n\t\t\t\t\ticonSvg: this.userStatus.icon ? emojiIcon : undefined,\n\t\t\t\t\ttext: `${this.userStatus.message}`,\n\t\t\t\t}].concat(actions)\n\t\t\t}\n\n\t\t\treturn actions\n\t\t},\n\t},\n\n\twatch: {\n\t\turl() {\n\t\t\tthis.userDoesNotExist = false\n\t\t\tthis.loadAvatarUrl()\n\t\t},\n\t\tuser() {\n\t\t\tthis.userDoesNotExist = false\n\t\t\tthis.isMenuLoaded = false\n\t\t\tthis.loadAvatarUrl()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.loadAvatarUrl()\n\t\tsubscribe('settings:avatar:updated', this.loadAvatarUrl)\n\t\tsubscribe('settings:display-name:updated', this.loadAvatarUrl)\n\t\tif (this.showUserStatus && this.user && !this.isNoUser) {\n\t\t\tif (!this.preloadedUserStatus) {\n\t\t\t\tthis.fetchUserStatus(this.user)\n\t\t\t} else {\n\t\t\t\tthis.userStatus.status = this.preloadedUserStatus.status || ''\n\t\t\t\tthis.userStatus.message = this.preloadedUserStatus.message || ''\n\t\t\t\tthis.userStatus.icon = this.preloadedUserStatus.icon || ''\n\t\t\t\tthis.hasStatus = this.preloadedUserStatus.status !== null\n\t\t\t}\n\t\t\tsubscribe('user_status:status.updated', this.handleUserStatusUpdated)\n\t\t}\n\t},\n\n\tbeforeDestroy() {\n\t\tunsubscribe('settings:avatar:updated', this.loadAvatarUrl)\n\t\tunsubscribe('settings:display-name:updated', this.loadAvatarUrl)\n\t\tif (this.showUserStatus && this.user && !this.isNoUser) {\n\t\t\tunsubscribe('user_status:status.updated', this.handleUserStatusUpdated)\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\n\t\thandleUserStatusUpdated(state) {\n\t\t\tif (this.user === state.userId) {\n\t\t\t\tthis.userStatus = {\n\t\t\t\t\tstatus: state.status,\n\t\t\t\t\ticon: state.icon,\n\t\t\t\t\tmessage: state.message,\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Toggle the popover menu on click or enter\n\t\t * @param {KeyboardEvent|MouseEvent} event the UI event\n\t\t */\n\t\tasync toggleMenu(event) {\n\t\t\tif (event.type === 'keydown' && event.key !== 'Enter') {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (!this.contactsMenuOpenState) {\n\t\t\t\tawait this.fetchContactsMenu()\n\t\t\t}\n\t\t\tthis.contactsMenuOpenState = !this.contactsMenuOpenState\n\t\t},\n\t\tcloseMenu() {\n\t\t\tthis.contactsMenuOpenState = false\n\t\t},\n\t\tasync fetchContactsMenu() {\n\t\t\tthis.contactsMenuLoading = true\n\t\t\ttry {\n\t\t\t\tconst user = encodeURIComponent(this.user)\n\t\t\t\tconst { data } = await axios.post(generateUrl('contactsmenu/findOne'), `shareType=0&shareWith=${user}`)\n\t\t\t\tthis.contactsMenuActions = data.topAction ? [data.topAction].concat(data.actions) : data.actions\n\t\t\t} catch (e) {\n\t\t\t\tthis.contactsMenuOpenState = false\n\t\t\t}\n\t\t\tthis.contactsMenuLoading = false\n\t\t\tthis.isMenuLoaded = true\n\t\t},\n\n\t\t/**\n\t\t * Handle avatar loading if user or url defined\n\t\t */\n\t\tloadAvatarUrl() {\n\t\t\tthis.isAvatarLoaded = false\n\n\t\t\t/** Only run avatar image loading if either user or url property is defined */\n\t\t\tif (!this.isUrlDefined && (!this.isUserDefined || this.isNoUser)) {\n\t\t\t\tthis.isAvatarLoaded = true\n\t\t\t\tthis.userDoesNotExist = true\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Directly use the url if defined\n\t\t\tif (this.isUrlDefined) {\n\t\t\t\tthis.updateImageIfValid(this.url)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tif (this.size <= 64) {\n\t\t\t\tconst avatarUrl = this.avatarUrlGenerator(this.user, 64)\n\t\t\t\tconst srcset = [\n\t\t\t\t\tavatarUrl + ' 1x',\n\t\t\t\t\tthis.avatarUrlGenerator(this.user, 512) + ' 8x',\n\t\t\t\t].join(', ')\n\n\t\t\t\tthis.updateImageIfValid(avatarUrl, srcset)\n\t\t\t} else {\n\t\t\t\tconst avatarUrl = this.avatarUrlGenerator(this.user, 512)\n\t\t\t\tthis.updateImageIfValid(avatarUrl)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Generate an avatar url from the server's avatar endpoint\n\t\t *\n\t\t * @param {string} user the user id\n\t\t * @param {number} size the desired size\n\t\t * @return {string}\n\t\t */\n\t\tavatarUrlGenerator(user, size) {\n\t\t\tlet avatarUrl = getAvatarUrl(user, size, this.isGuest)\n\n\t\t\t// eslint-disable-next-line camelcase\n\t\t\tif (user === getCurrentUser()?.uid && typeof oc_userconfig !== 'undefined') {\n\t\t\t\tavatarUrl += '?v=' + oc_userconfig.avatar.version\n\t\t\t}\n\n\t\t\treturn avatarUrl\n\t\t},\n\n\t\t/**\n\t\t * Check if the provided url is valid and update Avatar if so\n\t\t *\n\t\t * @param {string} url the avatar url\n\t\t * @param {Array} srcset the avatar srcset\n\t\t */\n\t\tupdateImageIfValid(url, srcset = null) {\n\t\t\t// skip loading\n\t\t\tconst userHasAvatar = getUserHasAvatar(this.user)\n\t\t\tif (this.isUserDefined && typeof userHasAvatar === 'boolean') {\n\t\t\t\tthis.isAvatarLoaded = true\n\t\t\t\tthis.avatarUrlLoaded = url\n\t\t\t\tif (srcset) {\n\t\t\t\t\tthis.avatarSrcSetLoaded = srcset\n\t\t\t\t}\n\t\t\t\tif (userHasAvatar === false) {\n\t\t\t\t\tthis.userDoesNotExist = true\n\t\t\t\t}\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst img = new Image()\n\t\t\timg.onload = () => {\n\t\t\t\tthis.avatarUrlLoaded = url\n\t\t\t\tif (srcset) {\n\t\t\t\t\tthis.avatarSrcSetLoaded = srcset\n\t\t\t\t}\n\t\t\t\tthis.isAvatarLoaded = true\n\t\t\t\t// re-get to avoid concurrent access\n\t\t\t\tsetUserHasAvatar(this.user, true)\n\t\t\t}\n\t\t\timg.onerror = () => {\n\t\t\t\tconsole.debug('Invalid avatar url', url)\n\t\t\t\t// Avatar is invalid, reset\n\t\t\t\tthis.avatarUrlLoaded = null\n\t\t\t\tthis.avatarSrcSetLoaded = null\n\n\t\t\t\tthis.userDoesNotExist = true\n\t\t\t\tthis.isAvatarLoaded = false\n\t\t\t\tsetUserHasAvatar(this.user, false)\n\t\t\t}\n\n\t\t\tif (srcset) {\n\t\t\t\timg.srcset = srcset\n\t\t\t}\n\t\t\timg.src = url\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.avatardiv {\n\tposition: relative;\n\tdisplay: inline-block;\n\twidth: var(--size);\n\theight: var(--size);\n\n\t&--unknown {\n\t\tposition: relative;\n\t\tbackground-color: var(--color-main-background);\n\t\twhite-space: normal;\n\t}\n\n\t&:not(&--unknown) {\n\t\t// White/black background for avatars with transparency\n\t\tbackground-color: var(--color-main-background) !important;\n\t\tbox-shadow: 0 0 5px rgba(0, 0, 0, 0.05) inset;\n\t}\n\n\t&--with-menu {\n\t\tcursor: pointer;\n\t\t.action-item {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t}\n\t\t:deep(.action-item__menutoggle) {\n\t\t\tcursor: pointer;\n\t\t\topacity: 0;\n\t\t}\n\t\t&:focus-within,\n\t\t&:hover,\n\t\t&#{&}-loading {\n\t\t\t:deep(.action-item__menutoggle) {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t\timg {\n\t\t\t\topacity: 0.3;\n\t\t\t}\n\t\t}\n\t\t:deep(.action-item__menutoggle),\n\t\timg {\n\t\t\ttransition: opacity var(--animation-quick);\n\t\t}\n\t\t:deep() {\n\t\t\t.button-vue,\n\t\t\t.button-vue__icon {\n\t\t\t\theight: var(--size);\n\t\t\t\tmin-height: var(--size);\n\t\t\t\twidth: var(--size) !important;\n\t\t\t\tmin-width: var(--size);\n\t\t\t}\n\t\t}\n\t}\n\n\t.avatardiv__initials-wrapper {\n\t\tdisplay: block;\n\t\theight: var(--size);\n\t\twidth: var(--size);\n\t\tbackground-color: var(--color-main-background);\n\t\tborder-radius: 50%;\n\n\t\t.avatardiv__initials {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t\ttext-align: center;\n\t\t\tfont-weight: normal;\n\t\t}\n\t}\n\n\timg {\n\t\t// Cover entire area\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\t// Keep ratio\n\t\tobject-fit: cover;\n\t}\n\n\t.material-design-icon {\n\t\twidth: var(--size);\n\t\theight: var(--size);\n\t}\n\n\t.avatardiv__user-status {\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tright: -4px;\n\t\tbottom: -4px;\n\t\tmin-height: 18px;\n\t\tmin-width: 18px;\n\t\tmax-height: 18px;\n\t\tmax-width: 18px;\n\t\theight: 40%;\n\t\twidth: 40%;\n\t\tline-height: 15px;\n\t\tfont-size: var(--default-font-size);\n\t\tborder: 2px solid var(--color-main-background);\n\t\tbackground-color: var(--color-main-background);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: 16px;\n\t\tbackground-position: center;\n\t\tborder-radius: 50%;\n\n\t\t.acli:hover & {\n\t\t\tborder-color: var(--color-background-hover);\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\t\t.acli.active & {\n\t\t\tborder-color: var(--color-primary-element-light);\n\t\t\tbackground-color: var(--color-primary-element-light);\n\t\t}\n\n\t\t&--icon {\n\t\t\tborder: none;\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t.popovermenu-wrapper {\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t}\n}\n\n.avatar-class-icon {\n\tdisplay: block;\n\tborder-radius: 50%;\n\tbackground-color: var(--color-background-darker);\n\theight: 100%;\n}\n\n</style>\n"],"names":["userStatus","userId","capabilities","getCapabilities","getCurrentUser","data","axios","generateOcsUrl","status","message","icon","e","_b","_a","browserStorage","getBuilder","getUserHasAvatar","flag","setUserHasAvatar","_sfc_main","ClickOutside","DotsHorizontal","NcActions","NcActionLink","NcButton","NcIconSvgWrapper","NcLoadingIcon","NcUserStatusIcon","t","getUserStatusText","r","g","b","usernameToColor","initials","user","filteredChars","filtered","idx","actions","item","escape","html","text","p","emojiIcon","subscribe","unsubscribe","state","event","generateUrl","avatarUrl","srcset","size","getAvatarUrl","url","userHasAvatar","img"],"mappings":"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"}

package/dist/chunks/{NcAvatar-BdtXzaRJ.mjs → NcAvatar-GULQurjA.mjs}

@@ -1,28 +1,30 @@
-import '../assets/NcMentionBubble-BhiXWJv8.css';
-import '../assets/NcAvatar-Dkf1ypwP.css';
-import { N as S } from "./NcActions-D2wvJbMw.mjs";
-import g from "../Components/NcActionLink.mjs";
-import y from "../Components/NcButton.mjs";
+import '../assets/NcMentionBubble-7PQ8wEko.css';
+import '../assets/NcAvatar-CR4U9eTm.css';
+import { N as v } from "./NcActions-B1Ue3gj8.mjs";
+import S from "../Components/NcActionLink.mjs";
+import g from "../Components/NcButton.mjs";
+import { N as y } from "./NcIconSvgWrapper-BTdzvQGV.mjs";
 import U from "../Components/NcLoadingIcon.mjs";
-import { N as _, g as N } from "./NcUserStatusIcon-DMQxYiY6.mjs";
-import { u as d } from "./usernameToColor-3Z3jKEos.mjs";
+import { N, g as _ } from "./NcUserStatusIcon-D_ItGF5U.mjs";
+import { u as l } from "./usernameToColor-CgqbKJ4t.mjs";
+import { g as M } from "./getAvatarUrl-BHpn8LgJ.mjs";
 import "../Composables/useIsFullscreen.mjs";
 import "../Composables/useIsMobile.mjs";
-import { generateOcsUrl as M, generateUrl as c } from "@nextcloud/router";
 /* empty css                                                                          */
 import { n as A } from "./_plugin-vue2_normalizer-Bj5bLKV4.mjs";
 import "linkify-string";
 import "escape-html";
 import "striptags";
 import "vue";
-import { getCurrentUser as l } from "@nextcloud/auth";
-import p from "@nextcloud/axios";
-import { getCapabilities as L } from "@nextcloud/capabilities";
-import { r as w, n as b, a as n } from "./_l10n-CAwwH-o2.mjs";
-import { D as x } from "./DotsHorizontal-DfVgEXgz.mjs";
-import { subscribe as o, unsubscribe as u } from "@nextcloud/event-bus";
-import { getBuilder as C } from "@nextcloud/browser-storage";
-import { vOnClickOutside as I } from "@vueuse/components";
+import { getCurrentUser as u } from "@nextcloud/auth";
+import d from "@nextcloud/axios";
+import { getCapabilities as x } from "@nextcloud/capabilities";
+import { generateOcsUrl as L, generateUrl as w } from "@nextcloud/router";
+import { r as b, n as I, a as r } from "./_l10n-BZu8wI2q.mjs";
+import { D as C } from "./DotsHorizontal-DfVgEXgz.mjs";
+import { subscribe as n, unsubscribe as o } from "@nextcloud/event-bus";
+import { getBuilder as D } from "@nextcloud/browser-storage";
+import { vOnClickOutside as O } from "@vueuse/components";
 /**
  * @copyright Copyright (c) 2020 Georg Ehrke <georg-nextcloud@ehrke.email>
  *
@@ -44,7 +46,7 @@ import { vOnClickOutside as I } from "@vueuse/components";
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-const D = {
+const k = {
   data() {
     return {
       hasStatus: !1,
@@ -67,15 +69,15 @@ const D = {
       var e, a;
       if (!s)
         return;
-      const t = L();
-      if (!(!Object.prototype.hasOwnProperty.call(t, "user_status") || !t.user_status.enabled) && l())
+      const t = x();
+      if (!(!Object.prototype.hasOwnProperty.call(t, "user_status") || !t.user_status.enabled) && u())
         try {
-          const { data: i } = await p.get(M("apps/user_status/api/v1/statuses/{userId}", { userId: s })), {
-            status: r,
-            message: m,
-            icon: v
+          const { data: i } = await d.get(L("apps/user_status/api/v1/statuses/{userId}", { userId: s })), {
+            status: p,
+            message: f,
+            icon: m
           } = i.ocs.data;
-          this.userStatus.status = r, this.userStatus.message = m || "", this.userStatus.icon = v || "", this.hasStatus = !0;
+          this.userStatus.status = p, this.userStatus.message = f || "", this.userStatus.icon = m || "", this.hasStatus = !0;
         } catch (i) {
           if (i.response.status === 404 && ((a = (e = i.response.data.ocs) == null ? void 0 : e.data) == null ? void 0 : a.length) === 0)
             return;
@@ -84,29 +86,30 @@ const D = {
     }
   }
 };
-w(b);
-const f = C("nextcloud").persist().build();
-function k(s) {
-  const t = f.getItem("user-has-avatar." + s);
+b(I);
+const h = D("nextcloud").persist().build();
+function B(s) {
+  const t = h.getItem("user-has-avatar." + s);
   return typeof t == "string" ? !!t : null;
 }
-function h(s, t) {
-  s && f.setItem("user-has-avatar." + s, t);
+function c(s, t) {
+  s && h.setItem("user-has-avatar." + s, t);
 }
-const O = {
+const E = {
   name: "NcAvatar",
   directives: {
-    ClickOutside: I
+    ClickOutside: O
   },
   components: {
-    DotsHorizontal: x,
-    NcActions: S,
-    NcActionLink: g,
-    NcButton: y,
+    DotsHorizontal: C,
+    NcActions: v,
+    NcActionLink: S,
+    NcButton: g,
+    NcIconSvgWrapper: y,
     NcLoadingIcon: U,
-    NcUserStatusIcon: _
+    NcUserStatusIcon: N
   },
-  mixins: [D],
+  mixins: [k],
   props: {
     /**
      * Set a custom url to the avatar image
@@ -242,7 +245,7 @@ const O = {
     avatarAriaLabel() {
       var s, t;
       if (this.hasMenu)
-        return this.canDisplayUserStatus || this.showUserStatusIconOnAvatar ? n("Avatar of {displayName}, {status}", { displayName: (s = this.displayName) != null ? s : this.user, status: N(this.userStatus.status) }) : n("Avatar of {displayName}", { displayName: (t = this.displayName) != null ? t : this.user });
+        return this.canDisplayUserStatus || this.showUserStatusIconOnAvatar ? r("Avatar of {displayName}, {status}", { displayName: (s = this.displayName) != null ? s : this.user, status: _(this.userStatus.status) }) : r("Avatar of {displayName}", { displayName: (t = this.displayName) != null ? t : this.user });
     },
     canDisplayUserStatus() {
       return this.showUserStatus && this.hasStatus && ["online", "away", "busy", "dnd"].includes(this.userStatus.status);
@@ -268,7 +271,7 @@ const O = {
     },
     hasMenu() {
       var s;
-      return this.disableMenu ? !1 : this.isMenuLoaded ? this.menu.length > 0 : !(this.user === ((s = l()) == null ? void 0 : s.uid) || this.userDoesNotExist || this.url);
+      return this.disableMenu ? !1 : this.isMenuLoaded ? this.menu.length > 0 : !(this.user === ((s = u()) == null ? void 0 : s.uid) || this.userDoesNotExist || this.url);
     },
     /**
      * True if initials should be shown as the user icon fallback
@@ -284,13 +287,13 @@ const O = {
       };
     },
     initialsWrapperStyle() {
-      const { r: s, g: t, b: e } = d(this.userIdentifier);
+      const { r: s, g: t, b: e } = l(this.userIdentifier);
       return {
         backgroundColor: "rgba(".concat(s, ", ").concat(t, ", ").concat(e, ", 0.1)")
       };
     },
     initialsStyle() {
-      const { r: s, g: t, b: e } = d(this.userIdentifier);
+      const { r: s, g: t, b: e } = l(this.userIdentifier);
       return {
         color: "rgb(".concat(s, ", ").concat(t, ", ").concat(e, ")")
       };
@@ -306,9 +309,12 @@ const O = {
       if (this.showInitials) {
         const t = this.userIdentifier.trim();
         if (t === "")
-          return "?";
-        const e = t.match(/[\p{L}\p{N}\s]/gu).join(""), a = e.lastIndexOf(" ");
-        s = String.fromCodePoint(e.codePointAt(0)), a !== -1 && (s = s.concat(String.fromCodePoint(e.codePointAt(a + 1))));
+          return s;
+        const e = t.match(/[\p{L}\p{N}\s]/gu);
+        if (e == null)
+          return s;
+        const a = e.join(""), i = a.lastIndexOf(" ");
+        s = String.fromCodePoint(a.codePointAt(0)), i !== -1 && (s = s.concat(String.fromCodePoint(a.codePointAt(i + 1))));
       }
       return s.toLocaleUpperCase();
     },
@@ -322,11 +328,15 @@ const O = {
         const a = document.createTextNode(e), i = document.createElement("p");
         return i.appendChild(a), i.innerHTML;
       }
-      return this.showUserStatus && (this.userStatus.icon || this.userStatus.message) ? [{
-        href: "#",
-        icon: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='0' y='14' font-size='14'>".concat(t(this.userStatus.icon), "</text></svg>"),
-        text: "".concat(this.userStatus.message)
-      }].concat(s) : s;
+      if (this.showUserStatus && (this.userStatus.icon || this.userStatus.message)) {
+        const e = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n					<text x="50%" y="50%" text-anchor="middle" style="dominant-baseline: central; font-size: 85%">'.concat(t(this.userStatus.icon), "</text>\n				</svg>");
+        return [{
+          href: "#",
+          iconSvg: this.userStatus.icon ? e : void 0,
+          text: "".concat(this.userStatus.message)
+        }].concat(s);
+      }
+      return s;
     }
   },
   watch: {
@@ -338,13 +348,13 @@ const O = {
     }
   },
   mounted() {
-    this.loadAvatarUrl(), o("settings:avatar:updated", this.loadAvatarUrl), o("settings:display-name:updated", this.loadAvatarUrl), this.showUserStatus && this.user && !this.isNoUser && (this.preloadedUserStatus ? (this.userStatus.status = this.preloadedUserStatus.status || "", this.userStatus.message = this.preloadedUserStatus.message || "", this.userStatus.icon = this.preloadedUserStatus.icon || "", this.hasStatus = this.preloadedUserStatus.status !== null) : this.fetchUserStatus(this.user), o("user_status:status.updated", this.handleUserStatusUpdated));
+    this.loadAvatarUrl(), n("settings:avatar:updated", this.loadAvatarUrl), n("settings:display-name:updated", this.loadAvatarUrl), this.showUserStatus && this.user && !this.isNoUser && (this.preloadedUserStatus ? (this.userStatus.status = this.preloadedUserStatus.status || "", this.userStatus.message = this.preloadedUserStatus.message || "", this.userStatus.icon = this.preloadedUserStatus.icon || "", this.hasStatus = this.preloadedUserStatus.status !== null) : this.fetchUserStatus(this.user), n("user_status:status.updated", this.handleUserStatusUpdated));
   },
   beforeDestroy() {
-    u("settings:avatar:updated", this.loadAvatarUrl), u("settings:display-name:updated", this.loadAvatarUrl), this.showUserStatus && this.user && !this.isNoUser && u("user_status:status.updated", this.handleUserStatusUpdated);
+    o("settings:avatar:updated", this.loadAvatarUrl), o("settings:display-name:updated", this.loadAvatarUrl), this.showUserStatus && this.user && !this.isNoUser && o("user_status:status.updated", this.handleUserStatusUpdated);
   },
   methods: {
-    t: n,
+    t: r,
     handleUserStatusUpdated(s) {
       this.user === s.userId && (this.userStatus = {
         status: s.status,
@@ -365,7 +375,7 @@ const O = {
     async fetchContactsMenu() {
       this.contactsMenuLoading = !0;
       try {
-        const s = encodeURIComponent(this.user), { data: t } = await p.post(c("contactsmenu/findOne"), "shareType=0&shareWith=".concat(s));
+        const s = encodeURIComponent(this.user), { data: t } = await d.post(w("contactsmenu/findOne"), "shareType=0&shareWith=".concat(s));
         this.contactsMenuActions = t.topAction ? [t.topAction].concat(t.actions) : t.actions;
       } catch {
         this.contactsMenuOpenState = !1;
@@ -403,18 +413,9 @@ const O = {
      * @return {string}
      */
     avatarUrlGenerator(s, t) {
-      var r;
-      const e = window.getComputedStyle(document.body).getPropertyValue("--background-invert-if-dark") === "invert(100%)";
-      let a = "/avatar/{user}/{size}" + (e ? "/dark" : "");
-      this.isGuest && (a = "/avatar/guest/{user}/{size}" + (e ? "/dark" : ""));
-      let i = c(
-        a,
-        {
-          user: s,
-          size: t
-        }
-      );
-      return s === ((r = l()) == null ? void 0 : r.uid) && typeof oc_userconfig < "u" && (i += "?v=" + oc_userconfig.avatar.version), i;
+      var a;
+      let e = M(s, t, this.isGuest);
+      return s === ((a = u()) == null ? void 0 : a.uid) && typeof oc_userconfig < "u" && (e += "?v=" + oc_userconfig.avatar.version), e;
     },
     /**
      * Check if the provided url is valid and update Avatar if so
@@ -423,16 +424,16 @@ const O = {
      * @param {Array} srcset the avatar srcset
      */
     updateImageIfValid(s, t = null) {
-      const e = k(this.user);
+      const e = B(this.user);
       if (this.isUserDefined && typeof e == "boolean") {
         this.isAvatarLoaded = !0, this.avatarUrlLoaded = s, t && (this.avatarSrcSetLoaded = t), e === !1 && (this.userDoesNotExist = !0);
         return;
       }
       const a = new Image();
       a.onload = () => {
-        this.avatarUrlLoaded = s, t && (this.avatarSrcSetLoaded = t), this.isAvatarLoaded = !0, h(this.user, !0);
+        this.avatarUrlLoaded = s, t && (this.avatarSrcSetLoaded = t), this.isAvatarLoaded = !0, c(this.user, !0);
       }, a.onerror = () => {
-        console.debug("Invalid avatar url", s), this.avatarUrlLoaded = null, this.avatarSrcSetLoaded = null, this.userDoesNotExist = !0, this.isAvatarLoaded = !1, h(this.user, !1);
+        console.debug("Invalid avatar url", s), this.avatarUrlLoaded = null, this.avatarSrcSetLoaded = null, this.userDoesNotExist = !0, this.isAvatarLoaded = !1, c(this.user, !1);
       }, t && (a.srcset = t), a.src = s;
     }
   }
@@ -452,20 +453,22 @@ var z = function() {
   }, click: t.toggleMenu }, scopedSlots: t._u([t.contactsMenuLoading ? { key: "icon", fn: function() {
     return [e("NcLoadingIcon")];
   }, proxy: !0 } : null], null, !0) }, t._l(t.menu, function(a, i) {
-    return e("NcActionLink", { key: i, attrs: { href: a.href, icon: a.icon } }, [t._v(" " + t._s(a.text) + " ")]);
+    return e("NcActionLink", { key: i, attrs: { href: a.href, icon: a.icon }, scopedSlots: t._u([a.iconSvg ? { key: "icon", fn: function() {
+      return [e("NcIconSvgWrapper", { attrs: { svg: a.iconSvg } })];
+    }, proxy: !0 } : null], null, !0) }, [t._v(" " + t._s(a.text) + " ")]);
   }), 1) : t._e(), t.showUserStatusIconOnAvatar ? e("span", { staticClass: "avatardiv__user-status avatardiv__user-status--icon" }, [t._v(" " + t._s(t.userStatus.icon) + " ")]) : t.canDisplayUserStatus ? e("NcUserStatusIcon", { staticClass: "avatardiv__user-status", attrs: { status: t.userStatus.status, "aria-hidden": String(t.hasMenu) } }) : t._e(), t.showInitials ? e("span", { staticClass: "avatardiv__initials-wrapper", style: t.initialsWrapperStyle }, [e("span", { staticClass: "avatardiv__initials", style: t.initialsStyle }, [t._v(" " + t._s(t.initials) + " ")])]) : t._e()], 2);
-}, E = [], B = /* @__PURE__ */ A(
-  O,
-  z,
+}, $ = [], H = /* @__PURE__ */ A(
   E,
+  z,
+  $,
   !1,
   null,
-  "de3f465f",
+  "8e0f5c51",
   null,
   null
 );
-const nt = B.exports;
+const ct = H.exports;
 export {
-  nt as N,
-  D as u
+  ct as N,
+  k as u
 };