@nextcloud/vue 8.5.0 → 9.0.0-alpha.0

package/dist/chunks/NcAvatar-paLjF9Tc.mjs

@@ -0,0 +1,532 @@
+import "../assets/NcAvatar-qgACiUer.css";
+import { N as C } from "./NcActions-6Yv0De7D.mjs";
+import { N as O } from "./NcActionLink-YllmwOrF.mjs";
+import { N as z } from "./NcButton-nCkJxwsi.mjs";
+import { N as B } from "./NcLoadingIcon-DnhhU7Z8.mjs";
+import { N as E, g as H } from "./NcUserStatusIcon--z2VUZIt.mjs";
+import { u as y } from "./usernameToColor-t95If_mB.mjs";
+import { generateOcsUrl as P, generateUrl as U } from "@nextcloud/router";
+import { resolveComponent as o, resolveDirective as T, withDirectives as V, openBlock as n, createElementBlock as u, mergeProps as G, toHandlers as j, renderSlot as W, normalizeClass as F, createCommentVNode as c, createBlock as l, withCtx as d, createSlots as R, Fragment as q, renderList as J, createTextVNode as K, toDisplayString as f, createVNode as Q, normalizeStyle as N, createElementVNode as X } from "vue";
+/* empty css                                                                          */
+import { _ as Y } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+import "linkify-string";
+import "escape-html";
+import "striptags";
+import { getCurrentUser as S } from "@nextcloud/auth";
+import M from "@nextcloud/axios";
+import { getCapabilities as Z } from "@nextcloud/capabilities";
+import { r as $, n as tt, a as p } from "./_l10n-JmazR_zZ.mjs";
+import { D as et } from "./DotsHorizontal-2GCivGee.mjs";
+import { subscribe as m, unsubscribe as g } from "@nextcloud/event-bus";
+import { getBuilder as st } from "@nextcloud/browser-storage";
+import { vOnClickOutside as at } from "@vueuse/components";
+/**
+ * @copyright Copyright (c) 2020 Georg Ehrke <georg-nextcloud@ehrke.email>
+ *
+ * @author Georg Ehrke <georg-nextcloud@ehrke.email>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+const rt = {
+  data() {
+    return {
+      hasStatus: !1,
+      userStatus: {
+        status: null,
+        message: null,
+        icon: null
+      }
+    };
+  },
+  methods: {
+    /**
+     * Fetches the user-status from the server
+     *
+     * @param {string} userId UserId of the user to fetch the status for
+     *
+     * @return {Promise<void>}
+     */
+    async fetchUserStatus(t) {
+      if (!t)
+        return;
+      const e = Z();
+      if (!(!Object.prototype.hasOwnProperty.call(e, "user_status") || !e.user_status.enabled) && S())
+        try {
+          const { data: s } = await M.get(P("apps/user_status/api/v1/statuses/{userId}", { userId: t })), {
+            status: i,
+            message: r,
+            icon: a
+          } = s.ocs.data;
+          this.userStatus.status = i, this.userStatus.message = r || "", this.userStatus.icon = a || "", this.hasStatus = !0;
+        } catch (s) {
+          if (s.response.status === 404 && s.response.data.ocs?.data?.length === 0)
+            return;
+          console.error(s);
+        }
+    }
+  }
+};
+$(tt);
+const b = st("nextcloud").persist().build();
+function it(t) {
+  const e = b.getItem("user-has-avatar." + t);
+  return typeof e == "string" ? !!e : null;
+}
+function _(t, e) {
+  t && b.setItem("user-has-avatar." + t, e);
+}
+const nt = {
+  name: "NcAvatar",
+  directives: {
+    ClickOutside: at
+  },
+  components: {
+    DotsHorizontal: et,
+    NcActions: C,
+    NcActionLink: O,
+    NcButton: z,
+    NcLoadingIcon: B,
+    NcUserStatusIcon: E
+  },
+  mixins: [rt],
+  props: {
+    /**
+     * Set a custom url to the avatar image
+     * either the url, user or displayName property must be defined
+     */
+    url: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Set a css icon-class for an icon to be used instead of the avatar.
+     */
+    iconClass: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Set the user id to fetch the avatar
+     * either the url, user or displayName property must be defined
+     */
+    user: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Whether or not to display the user-status
+     */
+    showUserStatus: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Whether or not to the status-icon should be used instead of online/away
+     */
+    showUserStatusCompact: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * When the user status was preloaded via another source it can be handed in with this property to save the request.
+     * If this property is not set the status will be fetched automatically.
+     * If a preloaded no-status is available provide this object with properties "status", "icon" and "message" set to null.
+     */
+    preloadedUserStatus: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Is the user a guest user (then we have to user a different endpoint)
+     */
+    isGuest: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Set a display name that will be rendered as a tooltip
+     * either the url, user or displayName property must be defined
+     * specify just the displayname to generate a placeholder avatar without
+     * trying to fetch the avatar based on the user id
+     */
+    displayName: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Set a size in px for the rendered avatar
+     */
+    size: {
+      type: Number,
+      default: 32
+    },
+    /**
+     * Placeholder avatars will be automatically generated when this is set to true
+     */
+    allowPlaceholder: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Disable the tooltip
+     */
+    disableTooltip: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Disable the menu
+     */
+    disableMenu: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Declares a custom tooltip when not null
+     * Fallback will be the displayName
+     *
+     * requires disableTooltip not to be set to true
+     */
+    tooltipMessage: {
+      type: String,
+      default: null
+    },
+    /**
+     * Declares username is not a user's name, when true.
+     * Prevents loading user's avatar from server and forces generating colored initials,
+     * i.e. if the user is a group
+     */
+    isNoUser: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Selector for the popover menu container
+     */
+    menuContainer: {
+      type: [String, Object, Element, Boolean],
+      default: "body"
+    }
+  },
+  data() {
+    return {
+      avatarUrlLoaded: null,
+      avatarSrcSetLoaded: null,
+      userDoesNotExist: !1,
+      isAvatarLoaded: !1,
+      isMenuLoaded: !1,
+      contactsMenuLoading: !1,
+      contactsMenuActions: [],
+      contactsMenuOpenState: !1
+    };
+  },
+  computed: {
+    avatarAriaLabel() {
+      if (this.hasMenu)
+        return this.canDisplayUserStatus || this.showUserStatusIconOnAvatar ? p("Avatar of {displayName}, {status}", { displayName: this.displayName ?? this.user, status: H(this.userStatus.status) }) : p("Avatar of {displayName}", { displayName: this.displayName ?? this.user });
+    },
+    canDisplayUserStatus() {
+      return this.showUserStatus && this.hasStatus && ["online", "away", "busy", "dnd"].includes(this.userStatus.status);
+    },
+    showUserStatusIconOnAvatar() {
+      return this.showUserStatus && this.showUserStatusCompact && this.hasStatus && this.userStatus.status !== "dnd" && this.userStatus.icon;
+    },
+    /**
+     * The user identifier, either the display name if set or the user property
+     * If both properties are not set an empty string is returned
+     */
+    userIdentifier() {
+      return this.isDisplayNameDefined ? this.displayName : this.isUserDefined ? this.user : "";
+    },
+    isUserDefined() {
+      return typeof this.user < "u";
+    },
+    isDisplayNameDefined() {
+      return typeof this.displayName < "u";
+    },
+    isUrlDefined() {
+      return typeof this.url < "u";
+    },
+    hasMenu() {
+      return this.disableMenu ? !1 : this.isMenuLoaded ? this.menu.length > 0 : !(this.user === S()?.uid || this.userDoesNotExist || this.url);
+    },
+    /**
+     * True if initials should be shown as the user icon fallback
+     */
+    showInitials() {
+      return this.allowPlaceholder && this.userDoesNotExist && !(this.iconClass || this.$slots.icon?.());
+    },
+    avatarStyle() {
+      return {
+        "--size": this.size + "px",
+        lineHeight: this.size + "px",
+        fontSize: Math.round(this.size * 0.45) + "px"
+      };
+    },
+    initialsWrapperStyle() {
+      const { r: t, g: e, b: s } = y(this.userIdentifier);
+      return {
+        backgroundColor: `rgba(${t}, ${e}, ${s}, 0.1)`
+      };
+    },
+    initialsStyle() {
+      const { r: t, g: e, b: s } = y(this.userIdentifier);
+      return {
+        color: `rgb(${t}, ${e}, ${s})`
+      };
+    },
+    tooltip() {
+      return this.disableTooltip ? null : this.tooltipMessage ? this.tooltipMessage : this.displayName;
+    },
+    /**
+     * Get the (max. two) initials of the user as uppcase string
+     */
+    initials() {
+      let t = "?";
+      if (this.showInitials) {
+        const e = this.userIdentifier.trim();
+        if (e === "")
+          return "?";
+        const s = e.match(/[\p{L}\p{N}\s]/gu).join(""), i = s.lastIndexOf(" ");
+        t = String.fromCodePoint(s.codePointAt(0)), i !== -1 && (t = t.concat(String.fromCodePoint(s.codePointAt(i + 1))));
+      }
+      return t.toLocaleUpperCase();
+    },
+    menu() {
+      const t = this.contactsMenuActions.map((s) => ({
+        href: s.hyperlink,
+        icon: s.icon,
+        text: s.title
+      }));
+      function e(s) {
+        const i = document.createTextNode(s), r = document.createElement("p");
+        return r.appendChild(i), 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'>${e(this.userStatus.icon)}</text></svg>`,
+        text: `${this.userStatus.message}`
+      }].concat(t) : t;
+    }
+  },
+  watch: {
+    url() {
+      this.userDoesNotExist = !1, this.loadAvatarUrl();
+    },
+    user() {
+      this.userDoesNotExist = !1, this.isMenuLoaded = !1, this.loadAvatarUrl();
+    }
+  },
+  mounted() {
+    this.loadAvatarUrl(), m("settings:avatar:updated", this.loadAvatarUrl), m("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), m("user_status:status.updated", this.handleUserStatusUpdated));
+  },
+  beforeUnmount() {
+    g("settings:avatar:updated", this.loadAvatarUrl), g("settings:display-name:updated", this.loadAvatarUrl), this.showUserStatus && this.user && !this.isNoUser && g("user_status:status.updated", this.handleUserStatusUpdated);
+  },
+  methods: {
+    t: p,
+    handleUserStatusUpdated(t) {
+      this.user === t.userId && (this.userStatus = {
+        status: t.status,
+        icon: t.icon,
+        message: t.message
+      });
+    },
+    /**
+     * Toggle the popover menu on click or enter
+     * @param {KeyboardEvent|MouseEvent} event the UI event
+     */
+    async toggleMenu(t) {
+      t.type === "keydown" && t.key !== "Enter" || (this.contactsMenuOpenState || await this.fetchContactsMenu(), this.contactsMenuOpenState = !this.contactsMenuOpenState);
+    },
+    closeMenu() {
+      this.contactsMenuOpenState = !1;
+    },
+    async fetchContactsMenu() {
+      this.contactsMenuLoading = !0;
+      try {
+        const t = encodeURIComponent(this.user), { data: e } = await M.post(U("contactsmenu/findOne"), `shareType=0&shareWith=${t}`);
+        this.contactsMenuActions = e.topAction ? [e.topAction].concat(e.actions) : e.actions;
+      } catch {
+        this.contactsMenuOpenState = !1;
+      }
+      this.contactsMenuLoading = !1, this.isMenuLoaded = !0;
+    },
+    /**
+     * Handle avatar loading if user or url defined
+     */
+    loadAvatarUrl() {
+      if (this.isAvatarLoaded = !1, !this.isUrlDefined && (!this.isUserDefined || this.isNoUser)) {
+        this.isAvatarLoaded = !0, this.userDoesNotExist = !0;
+        return;
+      }
+      if (this.isUrlDefined) {
+        this.updateImageIfValid(this.url);
+        return;
+      }
+      if (this.size <= 64) {
+        const t = this.avatarUrlGenerator(this.user, 64), e = [
+          t + " 1x",
+          this.avatarUrlGenerator(this.user, 512) + " 8x"
+        ].join(", ");
+        this.updateImageIfValid(t, e);
+      } else {
+        const t = this.avatarUrlGenerator(this.user, 512);
+        this.updateImageIfValid(t);
+      }
+    },
+    /**
+     * Generate an avatar url from the server's avatar endpoint
+     *
+     * @param {string} user the user id
+     * @param {number} size the desired size
+     * @return {string}
+     */
+    avatarUrlGenerator(t, e) {
+      const s = window.getComputedStyle(document.body).getPropertyValue("--background-invert-if-dark") === "invert(100%)";
+      let i = "/avatar/{user}/{size}" + (s ? "/dark" : "");
+      this.isGuest && (i = "/avatar/guest/{user}/{size}" + (s ? "/dark" : ""));
+      let r = U(
+        i,
+        {
+          user: t,
+          size: e
+        }
+      );
+      return t === S()?.uid && typeof oc_userconfig < "u" && (r += "?v=" + oc_userconfig.avatar.version), r;
+    },
+    /**
+     * Check if the provided url is valid and update Avatar if so
+     *
+     * @param {string} url the avatar url
+     * @param {Array} srcset the avatar srcset
+     */
+    updateImageIfValid(t, e = null) {
+      const s = it(this.user);
+      if (this.isUserDefined && typeof s == "boolean") {
+        this.isAvatarLoaded = !0, this.avatarUrlLoaded = t, e && (this.avatarSrcSetLoaded = e), s === !1 && (this.userDoesNotExist = !0);
+        return;
+      }
+      const i = new Image();
+      i.onload = () => {
+        this.avatarUrlLoaded = t, e && (this.avatarSrcSetLoaded = e), this.isAvatarLoaded = !0, _(this.user, !0);
+      }, i.onerror = () => {
+        console.debug("Invalid avatar url", t), this.avatarUrlLoaded = null, this.avatarSrcSetLoaded = null, this.userDoesNotExist = !0, this.isAvatarLoaded = !1, _(this.user, !1);
+      }, e && (i.srcset = e), i.src = t;
+    }
+  }
+}, ot = ["title", "tabindex", "aria-label", "role"], ut = ["src", "srcset"], lt = {
+  key: 2,
+  class: "avatardiv__user-status avatardiv__user-status--icon"
+};
+function ct(t, e, s, i, r, a) {
+  const v = o("NcLoadingIcon"), A = o("DotsHorizontal"), w = o("NcButton"), L = o("NcActionLink"), k = o("NcActions"), x = o("NcUserStatusIcon"), D = T("click-outside");
+  return V((n(), u("span", G({
+    ref: "main",
+    class: [{
+      "avatardiv--unknown": r.userDoesNotExist,
+      "avatardiv--with-menu": a.hasMenu,
+      "avatardiv--with-menu-loading": r.contactsMenuLoading
+    }, "avatardiv popovermenu-wrapper"],
+    title: a.tooltip,
+    style: a.avatarStyle,
+    tabindex: a.hasMenu ? "0" : void 0,
+    "aria-label": a.avatarAriaLabel,
+    role: a.hasMenu ? "button" : void 0
+  }, j(a.hasMenu ? {
+    click: a.toggleMenu,
+    keydown: a.toggleMenu
+  } : {}, !0)), [
+    W(t.$slots, "icon", {}, () => [
+      s.iconClass ? (n(), u("span", {
+        key: 0,
+        class: F([s.iconClass, "avatar-class-icon"])
+      }, null, 2)) : r.isAvatarLoaded && !r.userDoesNotExist ? (n(), u("img", {
+        key: 1,
+        src: r.avatarUrlLoaded,
+        srcset: r.avatarSrcSetLoaded,
+        alt: ""
+      }, null, 8, ut)) : c("", !0)
+    ], !0),
+    a.hasMenu && !a.menu.length ? (n(), l(w, {
+      key: 0,
+      "aria-label": a.t("Open contact menu"),
+      type: "tertiary-no-background",
+      class: "action-item action-item__menutoggle"
+    }, {
+      icon: d(() => [
+        r.contactsMenuLoading ? (n(), l(v, { key: 0 })) : (n(), l(A, {
+          key: 1,
+          size: 20
+        }))
+      ]),
+      _: 1
+    }, 8, ["aria-label"])) : a.hasMenu ? (n(), l(k, {
+      key: 1,
+      "force-menu": "",
+      "manual-open": "",
+      type: "tertiary-no-background",
+      container: s.menuContainer,
+      open: r.contactsMenuOpenState
+    }, R({
+      default: d(() => [
+        (n(!0), u(q, null, J(a.menu, (h, I) => (n(), l(L, {
+          key: I,
+          href: h.href,
+          icon: h.icon
+        }, {
+          default: d(() => [
+            K(f(h.text), 1)
+          ]),
+          _: 2
+        }, 1032, ["href", "icon"]))), 128))
+      ]),
+      _: 2
+    }, [
+      r.contactsMenuLoading ? {
+        name: "icon",
+        fn: d(() => [
+          Q(v)
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["container", "open"])) : c("", !0),
+    a.showUserStatusIconOnAvatar ? (n(), u("span", lt, f(t.userStatus.icon), 1)) : a.canDisplayUserStatus ? (n(), l(x, {
+      key: 3,
+      class: "avatardiv__user-status",
+      status: t.userStatus.status,
+      "aria-hidden": String(a.hasMenu)
+    }, null, 8, ["status", "aria-hidden"])) : c("", !0),
+    a.showInitials ? (n(), u("span", {
+      key: 4,
+      style: N(a.initialsWrapperStyle),
+      class: "avatardiv__initials-wrapper"
+    }, [
+      X("span", {
+        style: N(a.initialsStyle),
+        class: "avatardiv__initials"
+      }, f(a.initials), 5)
+    ], 4)) : c("", !0)
+  ], 16, ot)), [
+    [D, a.closeMenu]
+  ]);
+}
+const Ot = /* @__PURE__ */ Y(nt, [["render", ct], ["__scopeId", "data-v-ba9b4ca3"]]);
+export {
+  Ot as N,
+  rt as u
+};

package/dist/chunks/NcAvatar-paLjF9Tc.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAvatar-paLjF9Tc.mjs","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:title=\"tooltip\"\n\t\t:style=\"avatarStyle\"\n\t\tclass=\"avatardiv popovermenu-wrapper\"\n\t\t:tabindex=\"hasMenu ? '0' : undefined\"\n\t\t:aria-label=\"avatarAriaLabel\"\n\t\t:role=\"hasMenu ? 'button' : undefined\"\n\t\tv-on=\"hasMenu ? {\n\t\t\tclick: toggleMenu,\n\t\t\tkeydown: toggleMenu,\n\t\t} : {}\">\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\"\n\t\t\t:aria-label=\"t('Open contact menu')\"\n\t\t\ttype=\"tertiary-no-background\"\n\t\t\tclass=\"action-item action-item__menutoggle\">\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=\"contactsMenuOpenState\">\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{{ 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.ts'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport NcUserStatusIcon from '../NcUserStatusIcon/index.js'\nimport usernameToColor from '../../functions/usernameToColor/index.js'\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\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 null\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 '?'\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 filtered = user.match(/[\\p{L}\\p{N}\\s]/gu).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\treturn [{\n\t\t\t\t\thref: '#',\n\t\t\t\t\ticon: `data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='0' y='14' font-size='14'>${escape(this.userStatus.icon)}</text></svg>`,\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\tbeforeUnmount() {\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\tconst darkTheme = window.getComputedStyle(document.body)\n\t\t\t\t.getPropertyValue('--background-invert-if-dark') === 'invert(100%)'\n\t\t\tlet url = '/avatar/{user}/{size}' + (darkTheme ? '/dark' : '')\n\t\t\tif (this.isGuest) {\n\t\t\t\turl = '/avatar/guest/{user}/{size}' + (darkTheme ? '/dark' : '')\n\t\t\t}\n\n\t\t\tlet avatarUrl = generateUrl(\n\t\t\t\turl,\n\t\t\t\t{\n\t\t\t\t\tuser,\n\t\t\t\t\tsize,\n\t\t\t\t})\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,\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","browserStorage","getBuilder","getUserHasAvatar","flag","setUserHasAvatar","_sfc_main","DotsHorizontal","NcActions","NcButton","NcUserStatusIcon","t","getUserStatusText","r","g","b","initials","user","idx","filtered","item","escape","html","text","p","actions","subscribe","unsubscribe","state","avatarUrl","srcset","url","userHasAvatar","img","_hoisted_1","_hoisted_2","withDirectives","openBlock","createElementBlock","mergeProps","$options","toHandlers","renderSlot","_ctx","normalizeClass","$props","$data","createCommentVNode","withCtx","createBlock","_component_NcLoadingIcon","createSlots","Fragment","renderList","key","_hoisted_3","toDisplayString"],"mappings":"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"}