npm - @nextcloud/vue - Versions diffs - 9.3.2 → 9.3.3 - Mend

@nextcloud/vue 9.3.2 → 9.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (128) hide show

package/dist/chunks/{NcAvatar-S8EJR2BK.mjs → NcAvatar-CK_dTsmT.mjs} RENAMED Viewed

@@ -23,7 +23,7 @@ import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 import { getCapabilities } from "@nextcloud/capabilities";
 import { l as logger } from "./logger-D3RVzcfQ.mjs";
 import { N as NcUserStatusIcon, g as getUserStatusText } from "./NcUserStatusIcon-BgElapLh.mjs";
-import { N as NcActionButton } from "./NcActionButton-BHXE4UKQ.mjs";
+import { N as NcActionButton } from "./NcActionButton-DNXoAooH.mjs";
 import { N as NcActionLink } from "./NcActionLink-Cd69py4e.mjs";
 import { N as NcActionRouter } from "./NcActionRouter-DtxPh20B.mjs";
 import { N as NcActionText } from "./NcActionText-Bd1fgVqA.mjs";
@@ -682,4 +682,4 @@ export {
   NcAvatar as N,
   userStatus as u
 };
-//# sourceMappingURL=NcAvatar-S8EJR2BK.mjs.map
+//# sourceMappingURL=NcAvatar-CK_dTsmT.mjs.map

package/dist/chunks/{NcAvatar-S8EJR2BK.mjs.map → NcAvatar-CK_dTsmT.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcAvatar-S8EJR2BK.mjs","sources":["../../src/mixins/userStatus.js","../../src/components/NcAvatar/NcAvatar.vue"],"sourcesContent":["/*\n SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n /\n\nimport { getCurrentUser } from '@nextcloud/auth'\nimport axios from '@nextcloud/axios'\nimport { getCapabilities } from '@nextcloud/capabilities'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport { logger } from '../utils/logger.ts'\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.hasOwn(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\tthis.setUserStatus(data.ocs.data)\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\tlogger.error('Failed to fetch user status', { error: e })\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Sets the user status\n\t\t \n\t\t @param {string} status user's status\n\t\t * @param {string} message user's message\n\t\t * @param {string} icon user's icon\n\t\t /\n\t\tsetUserStatus({ status, message, icon }) {\n\t\t\tthis.userStatus.status = status \|\| ''\n\t\t\tthis.userStatus.message = message \|\| ''\n\t\t\tthis.userStatus.icon = icon \|\| ''\n\t\t\tthis.hasStatus = !!status\n\t\t},\n\t},\n}\n","<!--\n - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\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=\"favicon-touch.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<IconAccountMultipleOutline :size=\"20\" />\n\t\t</template>\n\t</NcAvatar>\n</template>\n<script>\nimport IconAccountMultipleOutline from 'vue-material-design-icons/AccountMultipleOutline.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconAccountMultipleOutline,\n\t},\n}\n</script>\n```\n\n### Avatar with preloaded status\n```\n<template>\n\t<div>\n\t\t<NcAvatar user=\"janedoe\"\n\t\t\tdisplay-name=\"Jane Doe\"\n\t\t\t:preloaded-user-status=\"status.online\">\n\t\t</NcAvatar>\n\t\t<NcAvatar user=\"janedoe\"\n\t\t\tdisplay-name=\"Jane Doe\"\n\t\t\t:preloaded-user-status=\"status.away\">\n\t\t</NcAvatar>\n\t\t<NcAvatar user=\"janedoe\"\n\t\t\tdisplay-name=\"Jane Doe\"\n\t\t\t:preloaded-user-status=\"status.dnd\">\n\t\t</NcAvatar>\n\t\t<NcAvatar user=\"janedoe\"\n\t\t\tdisplay-name=\"Jane Doe\"\n\t\t\t:preloaded-user-status=\"status.custom\">\n\t\t</NcAvatar>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tstatus: {\n\t\t\t\tonline: {\n\t\t\t\t\ticon: '',\n\t\t\t\t\tstatus: 'online',\n\t\t\t\t\tmessage: 'Available',\n\t\t\t\t},\n\t\t\t\taway: {\n\t\t\t\t\ticon: '',\n\t\t\t\t\tstatus: 'away',\n\t\t\t\t\tmessage: 'Away',\n\t\t\t\t},\n\t\t\t\tdnd: {\n\t\t\t\t\ticon: '',\n\t\t\t\t\tstatus: 'dnd',\n\t\t\t\t\tmessage: 'Busy',\n\t\t\t\t},\n\t\t\t\tcustom: {\n\t\t\t\t\ticon: '📆',\n\t\t\t\t\tstatus: 'online',\n\t\t\t\t\tmessage: 'In a meeting',\n\t\t\t\t}\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### Avatar size\n\n```vue\n<template>\n\t<div>\n\t\t<div v-for=\"size in [15, 24, 34, 44, 180]\">\n\t\t\t<span>\n\t\t\t\t{{ size }}px\n\t\t\t</span>\n\t\t\t<NcAvatar user=\"alice-smith\"\n\t\t\t\tdisplay-name=\"Alice Smith\"\n\t\t\t\t:size=\"size\"\n\t\t\t\t:preloaded-user-status=\"status.online\" />\n\t\t\t<NcAvatar user=\"bob-doe\"\n\t\t\t\tdisplay-name=\"Bob Doe\"\n\t\t\t\t:size=\"size\"\n\t\t\t\t:preloaded-user-status=\"status.meeting\" />\n\t\t</div>\n\t\t<div>\n\t\t\t<div>\n\t\t\t\tCustom: {{ customSize }}px\n\t\t\t</div>\n\t\t\t<NcAvatar user=\"alice-smith\"\n\t\t\t\tdisplay-name=\"Alice Smith\"\n\t\t\t\t:size=\"customSize\"\n\t\t\t\t:preloaded-user-status=\"status.online\" />\n\t\t\t<NcAvatar user=\"bob-doe\"\n\t\t\t\tdisplay-name=\"Bob Doe\"\n\t\t\t\t:size=\"customSize\"\n\t\t\t\t:preloaded-user-status=\"status.meeting\" />\n\t\t</div>\n\t\t<div>\n\t\t\t<input type=\"range\" v-model=\"customSize\" :min=\"15\" :max=\"180\" step=\"1\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'\n\nexport default {\n\tcomponents: {\n\t\tAccountMultiple,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcustomSize: 20,\n\t\t\tstatus: {\n\t\t\t\tonline: {\n\t\t\t\t\ticon: '',\n\t\t\t\t\tstatus: 'online',\n\t\t\t\t\tmessage: 'Available',\n\t\t\t\t},\n\t\t\t\tmeeting: {\n\t\t\t\t\ticon: '📆',\n\t\t\t\t\tstatus: 'online',\n\t\t\t\t\tmessage: 'In a meeting',\n\t\t\t\t},\n\t\t\t},\n\t\t}\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<span\n\t\tv-click-outside=\"closeMenu\"\n\t\tclass=\"avatardiv popovermenu-wrapper\"\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\t:title=\"tooltip\">\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\n\t\t\t\tv-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\n\t\t\tv-if=\"hasMenu && menu.length === 0\"\n\t\t\t:aria-label=\"avatarAriaLabel\"\n\t\t\tclass=\"action-item action-item__menutoggle\"\n\t\t\tvariant=\"tertiary-no-background\"\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<IconDotsHorizontal v-else :size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcActions\n\t\t\tv-else-if=\"hasMenu\"\n\t\t\tv-model:open=\"contactsMenuOpenState\"\n\t\t\t:aria-label=\"avatarAriaLabel\"\n\t\t\t:container=\"menuContainer\"\n\t\t\tforce-menu\n\t\t\tmanual-open\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click=\"toggleMenu\">\n\t\t\t<component\n\t\t\t\t:is=\"item.ncActionComponent\"\n\t\t\t\tv-for=\"(item, key) in menu\"\n\t\t\t\t:key=\"key\"\n\t\t\t\tv-bind=\"item.ncActionComponentProps\">\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</component>\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\n\t\t\tv-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\n\t\t\tv-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 { getCurrentUser } from '@nextcloud/auth'\nimport axios from '@nextcloud/axios'\nimport { getBuilder } from '@nextcloud/browser-storage'\nimport { subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { generateUrl } from '@nextcloud/router'\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport IconDotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\nimport { getRoute } from '../../components/NcRichText/autolink.ts'\nimport { useIsDarkTheme } from '../../composables/index.ts'\nimport { getEnabledContactsMenuActions } from '../../functions/contactsMenu/index.ts'\nimport { usernameToColor } from '../../functions/usernameToColor/index.ts'\nimport { t } from '../../l10n.ts'\nimport { userStatus } from '../../mixins/index.js'\nimport { getAvatarUrl } from '../../utils/getAvatarUrl.ts'\nimport { logger } from '../../utils/logger.ts'\nimport { getUserStatusText } from '../../utils/UserStatus.ts'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcActionLink from '../NcActionLink/index.js'\nimport NcActionRouter from '../NcActionRouter/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcActionText from '../NcActionText/index.js'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\nimport NcLoadingIcon from '../NcLoadingIcon/index.ts'\nimport NcUserStatusIcon from '../NcUserStatusIcon/index.js'\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\t/* @type {import('vue').ObjectDirective} /\n\t\tClickOutside,\n\t},\n\n\tcomponents: {\n\t\tIconDotsHorizontal,\n\t\tNcActions,\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t\tNcLoadingIcon,\n\t\tNcUserStatusIcon,\n\t},\n\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\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\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\n\t\t/\n\t\t Do not show the user status on the avatar.\n\t\t /\n\t\thideStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Show the verbose user status (e.g. \"online\" / \"away\") instead of just the status icon.\n\t\t /\n\t\tverboseStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\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\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\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\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\n\t\t/\n\t\t Do not automatically generate a placeholder avatars if there is no real avatar is available.\n\t\t /\n\t\tnoPlaceholder: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\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\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\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: [Boolean, String, Object, Element],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\n\tsetup() {\n\t\tconst isDarkTheme = useIsDarkTheme()\n\n\t\treturn {\n\t\t\tisDarkTheme,\n\t\t}\n\t},\n\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\tcontactsMenuData: {},\n\t\t\tcontactsMenuActions: [],\n\t\t\tcontactsMenuOpenState: false,\n\t\t}\n\t},\n\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\n\t\tcanDisplayUserStatus() {\n\t\t\treturn !this.hideStatus\n\t\t\t\t&& this.hasStatus\n\t\t\t\t&& ['online', 'away', 'busy', 'dnd'].includes(this.userStatus.status)\n\t\t},\n\n\t\tshowUserStatusIconOnAvatar() {\n\t\t\treturn !this.hideStatus\n\t\t\t\t&& !this.verboseStatus\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\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\n\t\tisUserDefined() {\n\t\t\treturn typeof this.user !== 'undefined'\n\t\t},\n\n\t\tisDisplayNameDefined() {\n\t\t\treturn typeof this.displayName !== 'undefined'\n\t\t},\n\n\t\tisUrlDefined() {\n\t\t\treturn typeof this.url !== 'undefined'\n\t\t},\n\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.noPlaceholder && this.userDoesNotExist && !(this.iconClass \|\| this.$slots.icon)\n\t\t},\n\n\t\tavatarStyle() {\n\t\t\treturn {\n\t\t\t\t'--avatar-size': this.size + 'px',\n\t\t\t\tlineHeight: this.showInitials ? (this.size + 'px') : 0,\n\t\t\t\tfontSize: Math.round(this.size 0.45) + 'px',\n\t\t\t}\n\t\t},\n\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\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\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 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 \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) {\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\n\t\tmenu() {\n\t\t\tconst actions = this.contactsMenuActions.map((item) => {\n\t\t\t\tconst route = getRoute(this.$router, item.hyperlink)\n\t\t\t\treturn {\n\t\t\t\t\tncActionComponent: route ? NcActionRouter : NcActionLink,\n\t\t\t\t\tncActionComponentProps: route\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tto: route,\n\t\t\t\t\t\t\t\ticon: item.icon,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\thref: item.hyperlink,\n\t\t\t\t\t\t\t\ticon: item.icon,\n\t\t\t\t\t\t\t},\n\t\t\t\t\ttext: item.title,\n\t\t\t\t}\n\t\t\t})\n\n\t\t\tfor (const action of getEnabledContactsMenuActions(this.contactsMenuData)) {\n\t\t\t\ttry {\n\t\t\t\t\tactions.push({\n\t\t\t\t\t\tncActionComponent: NcActionButton,\n\t\t\t\t\t\tncActionComponentProps: {\n\t\t\t\t\t\t\tonClick: () => action.callback(this.contactsMenuData),\n\t\t\t\t\t\t},\n\t\t\t\t\t\ttext: action.displayName(this.contactsMenuData),\n\t\t\t\t\t\ticonSvg: action.iconSvg(this.contactsMenuData),\n\t\t\t\t\t})\n\t\t\t\t} catch (error) {\n\t\t\t\t\tlogger.error(`Failed to render ContactsMenu action ${action.id}`, {\n\t\t\t\t\t\terror,\n\t\t\t\t\t\taction,\n\t\t\t\t\t})\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.hideStatus && (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\tncActionComponent: NcActionText,\n\t\t\t\t\tncActionComponentProps: {},\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\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.hideStatus && 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.setUserStatus(this.preloadedUserStatus)\n\t\t\t}\n\t\t\tsubscribe('user_status:status.updated', this.handleUserStatusUpdated)\n\t\t} else if (!this.hideStatus && this.preloadedUserStatus) {\n\t\t\t// Always set preloaded status if provided\n\t\t\tthis.setUserStatus(this.preloadedUserStatus)\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\tunsubscribe('user_status:status.updated', this.handleUserStatusUpdated)\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\tthis.hasStatus = state.status !== null\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 \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\n\t\tcloseMenu() {\n\t\t\tthis.contactsMenuOpenState = false\n\t\t},\n\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.contactsMenuData = data\n\t\t\t\tthis.contactsMenuActions = data.topAction ? [data.topAction].concat(data.actions) : data.actions\n\t\t\t} catch {\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 \|\| this.iconClass \|\| this.$slots.icon)) {\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, {\n\t\t\t\tsize,\n\t\t\t\tisDarkTheme: this.isDarkTheme,\n\t\t\t\tisGuest: this.isGuest,\n\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=' + window.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 = (error) => {\n\t\t\t\tlogger.debug('[NcAvatar] Invalid avatar url', { error, 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(--avatar-size);\n\theight: var(--avatar-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\tinset-inline-start: 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(--avatar-size);\n\t\t\t\tmin-height: var(--avatar-size);\n\t\t\t\twidth: var(--avatar-size) !important;\n\t\t\t\tmin-width: var(--avatar-size);\n\t\t\t}\n\t\t}\n\t\t& > :deep(.button-vue),\n\t\t& > :deep(.action-item .button-vue) {\n\t\t\t--button-radius: calc(var(--avatar-size) / 2);\n\t\t}\n\t}\n\n\t.avatardiv__initials-wrapper {\n\t\tdisplay: block;\n\t\theight: var(--avatar-size);\n\t\twidth: var(--avatar-size);\n\t\tbackground-color: var(--color-main-background);\n\t\tborder-radius: calc(var(--avatar-size) / 2);\n\n\t\t.avatardiv__initials {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tinset-inline-start: 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(--avatar-size);\n\t\theight: var(--avatar-size);\n\t}\n\n\t.avatardiv__user-status {\n\t\t// Size of the status icon to make it:\n\t\t// - 💫 Orbital: the status icon's center is positioned on the avatar circle\n\t\t// - ⏹️ Best-fit: the status icon is as large as possible without exceeding the avatar box\n\t\t// See PR for math explanation: PR #6004\n\t\t--avatar-status-size-orbital: calc(var(--avatar-size) (1 - 1 / sqrt(2)));\n\t\t// Limit the status icon size to minimum font size to keep it readable\n\t\t// Ideally avatars with a smaller should not be used with the status icon at all\n\t\t--avatar-status-size-min: var(--font-size-small);\n\t\t--avatar-status-size: max(var(--avatar-status-size-orbital), var(--avatar-status-size-min));\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tinset-inline-end: 0;\n\t\tinset-block-end: 0;\n\t\theight: var(--avatar-status-size);\n\t\twidth: var(--avatar-status-size);\n\t\tline-height: 1;\n\t\tfont-size: calc(var(--avatar-status-size) / 1.2);\n\t\tbackground-color: var(--color-main-background);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: var(--avatar-status-size);\n\t\tbackground-position: center;\n\t\tborder-radius: 50%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\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: calc(var(--avatar-size) / 2);\n\tbackground-color: var(--color-background-darker);\n\theight: 100%;\n}\n\n</style>\n"],"names":["ClickOutside","_createElementBlock","_renderSlot","_normalizeClass","_createBlock","_openBlock","_Fragment","_renderList","_resolveDynamicComponent","_mergeProps","_createSlots","_toDisplayString","_createVNode","_createElementVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAA,aAAe;AAAA,EACd,OAAO;AACN,WAAO;AAAA,MACN,WAAW;AAAA,MACX,YAAY;AAAA,QACX,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,IACA;AAAA,EACC;AAAA,EACA,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQR,MAAM,gBAAgB,QAAQ;AAC7B,UAAI,CAAC,QAAQ;AACZ;AAAA,MACD;AACA,YAAM,eAAe,gBAAe;AACpC,UAAI,CAAC,OAAO,OAAO,cAAc,aAAa,KAAK,CAAC,aAAa,YAAY,SAAS;AACrF;AAAA,MACD;AAGA,UAAI,CAAC,eAAc,GAAI;AACtB;AAAA,MACD;AAEA,UAAI;AACH,cAAM,EAAE,KAAI,IAAK,MAAM,MAAM,IAAI,eAAe,6CAA6C,EAAE,QAAQ,CAAC;AACxG,aAAK,cAAc,KAAK,IAAI,IAAI;AAAA,MACjC,SAAS,GAAG;AACX,YAAI,EAAE,SAAS,WAAW,OAAO,EAAE,SAAS,KAAK,KAAK,MAAM,WAAW,GAAG;AAEzE;AAAA,QACD;AACA,eAAO,MAAM,+BAA+B,EAAE,OAAO,EAAC,CAAE;AAAA,MACzD;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,cAAc,EAAE,QAAQ,SAAS,KAAI,GAAI;AACxC,WAAK,WAAW,SAAS,UAAU;AACnC,WAAK,WAAW,UAAU,WAAW;AACrC,WAAK,WAAW,OAAO,QAAQ;AAC/B,WAAK,YAAY,CAAC,CAAC;AAAA,IACpB;AAAA,EACF;AACA;ACoOA,MAAM,iBAAiB,WAAW,WAAW,EAAE,QAAO,EAAG,MAAK;AAK9D,SAAS,iBAAiB,QAAQ;AACjC,QAAM,OAAO,eAAe,QAAQ,qBAAqB,MAAM;AAC/D,MAAI,OAAO,SAAS,UAAU;AAC7B,WAAO,QAAQ,IAAI;AAAA,EACpB;AACA,SAAO;AACR;AAMA,SAAS,iBAAiB,QAAQ,MAAM;AACvC,MAAI,QAAQ;AACX,mBAAe,QAAQ,qBAAqB,QAAQ,IAAI;AAAA,EACzD;AACD;AAEA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA;AAAA,kBAEXA;AAAAA;EAGD,YAAY;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;EAGD,QAAQ,CAAC,UAAU;AAAA,EACnB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKN,KAAK;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOV,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,YAAY;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,eAAe;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;IAQV,qBAAqB;AAAA,MACpB,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;;IASV,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,eAAe;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,gBAAgB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;;IASV,gBAAgB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;IAQV,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,eAAe;AAAA,MACd,MAAM,CAAC,SAAS,QAAQ,QAAQ,OAAO;AAAA,MACvC,SAAS;AAAA;;EAIX,QAAQ;AACP,UAAM,cAAc,eAAc;AAElC,WAAO;AAAA,MACN;AAAA,IACD;AAAA,EACD;AAAA,EAEA,OAAO;AACN,WAAO;AAAA,MACN,iBAAiB;AAAA,MACjB,oBAAoB;AAAA,MACpB,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,MAChB,cAAc;AAAA,MACd,qBAAqB;AAAA,MACrB,kBAAkB,CAAA;AAAA,MAClB,qBAAqB,CAAA;AAAA,MACrB,uBAAuB;AAAA,IACxB;AAAA,EACD;AAAA,EAEA,UAAU;AAAA,IACT,kBAAkB;AAEjB,UAAI,CAAC,KAAK,SAAS;AAClB;AAAA,MACD;AACA,UAAI,KAAK,wBAAwB,KAAK,4BAA4B;AACjE,eAAO,EAAE,qCAAqC,EAAE,aAAa,KAAK,eAAe,KAAK,MAAM,QAAQ,kBAAkB,KAAK,WAAW,MAAM,GAAG;AAAA,MAChJ;AACA,aAAO,EAAE,2BAA2B,EAAE,aAAa,KAAK,eAAe,KAAK,MAAM;AAAA,IACnF;AAAA,IAEA,uBAAuB;AACtB,aAAO,CAAC,KAAK,cACT,KAAK,aACL,CAAC,UAAU,QAAQ,QAAQ,KAAK,EAAE,SAAS,KAAK,WAAW,MAAM;AAAA,IACtE;AAAA,IAEA,6BAA6B;AAC5B,aAAO,CAAC,KAAK,cACT,CAAC,KAAK,iBACN,KAAK,aACL,KAAK,WAAW,WAAW,SAC3B,KAAK,WAAW;AAAA,IACrB;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAiB;AAChB,UAAI,KAAK,sBAAsB;AAC9B,eAAO,KAAK;AAAA,MACb;AACA,UAAI,KAAK,eAAe;AACvB,eAAO,KAAK;AAAA,MACb;AACA,aAAO;AAAA,IACR;AAAA,IAEA,gBAAgB;AACf,aAAO,OAAO,KAAK,SAAS;AAAA,IAC7B;AAAA,IAEA,uBAAuB;AACtB,aAAO,OAAO,KAAK,gBAAgB;AAAA,IACpC;AAAA,IAEA,eAAe;AACd,aAAO,OAAO,KAAK,QAAQ;AAAA,IAC5B;AAAA,IAEA,UAAU;AACT,UAAI,KAAK,aAAa;AACrB,eAAO;AAAA,MACR;AACA,UAAI,KAAK,cAAc;AACtB,eAAO,KAAK,KAAK,SAAS;AAAA,MAC3B;AACA,aAAO,EAAE,KAAK,SAAS,eAAc,GAAI,OAAO,KAAK,oBAAoB,KAAK;AAAA,IAC/E;AAAA;AAAA;AAAA;AAAA,IAKA,eAAe;AACd,aAAO,CAAC,KAAK,iBAAiB,KAAK,oBAAoB,EAAE,KAAK,aAAa,KAAK,OAAO;AAAA,IACxF;AAAA,IAEA,cAAc;AACb,aAAO;AAAA,QACN,iBAAiB,KAAK,OAAO;AAAA,QAC7B,YAAY,KAAK,eAAgB,KAAK,OAAO,OAAQ;AAAA,QACrD,UAAU,KAAK,MAAM,KAAK,OAAO,IAAI,IAAI;AAAA,MAC1C;AAAA,IACD;AAAA,IAEA,uBAAuB;AACtB,YAAM,EAAE,GAAG,GAAG,EAAA,IAAM,gBAAgB,KAAK,cAAc;AACvD,aAAO;AAAA,QACN,iBAAiB,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC;AAAA,MACvC;AAAA,IACD;AAAA,IAEA,gBAAgB;AACf,YAAM,EAAE,GAAG,GAAG,EAAA,IAAM,gBAAgB,KAAK,cAAc;AACvD,aAAO;AAAA,QACN,OAAO,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC;AAAA,MAC5B;AAAA,IACD;AAAA,IAEA,UAAU;AACT,UAAI,KAAK,gBAAgB;AACxB,eAAO;AAAA,MACR;AACA,UAAI,KAAK,gBAAgB;AACxB,eAAO,KAAK;AAAA,MACb;AAEA,aAAO,KAAK;AAAA,IACb;AAAA;AAAA;AAAA;AAAA,IAKA,WAAW;AACV,UAAI,WAAW;AACf,UAAI,KAAK,cAAc;AACtB,cAAM,OAAO,KAAK,eAAe,KAAI;AACrC,YAAI,SAAS,IAAI;AAChB,iBAAO;AAAA,QACR;AAUA,cAAM,gBAAgB,KAAK,MAAM,kBAAkB;AACnD,YAAI,CAAC,eAAe;AACnB,iBAAO;AAAA,QACR;AAEA,cAAM,WAAW,cAAc,KAAK,EAAE;AACtC,cAAM,MAAM,SAAS,YAAY,GAAG;AACpC,mBAAW,OAAO,cAAc,SAAS,YAAY,CAAC,CAAC;AACvD,YAAI,QAAQ,IAAI;AACf,qBAAW,SAAS,OAAO,OAAO,cAAc,SAAS,YAAY,MAAM,CAAC,CAAC,CAAC;AAAA,QAC/E;AAAA,MACD;AACA,aAAO,SAAS,kBAAiB;AAAA,IAClC;AAAA,IAEA,OAAO;AACN,YAAM,UAAU,KAAK,oBAAoB,IAAI,CAAC,SAAS;AACtD,cAAM,QAAQ,SAAS,KAAK,SAAS,KAAK,SAAS;AACnD,eAAO;AAAA,UACN,mBAAmB,QAAQ,iBAAiB;AAAA,UAC5C,wBAAwB,QACrB;AAAA,YACA,IAAI;AAAA,YACJ,MAAM,KAAK;AAAA,UACZ,IACC;AAAA,YACA,MAAM,KAAK;AAAA,YACX,MAAM,KAAK;AAAA;UAEd,MAAM,KAAK;AAAA,QACZ;AAAA,MACD,CAAC;AAED,iBAAW,UAAU,8BAA8B,KAAK,gBAAgB,GAAG;AAC1E,YAAI;AACH,kBAAQ,KAAK;AAAA,YACZ,mBAAmB;AAAA,YACnB,wBAAwB;AAAA,cACvB,SAAS,MAAM,OAAO,SAAS,KAAK,gBAAgB;AAAA;YAErD,MAAM,OAAO,YAAY,KAAK,gBAAgB;AAAA,YAC9C,SAAS,OAAO,QAAQ,KAAK,gBAAgB;AAAA,WAC7C;AAAA,QACF,SAAS,OAAO;AACf,iBAAO,MAAM,wCAAwC,OAAO,EAAE,IAAI;AAAA,YACjE;AAAA,YACA;AAAA,WACA;AAAA,QACF;AAAA,MACD;AAKA,eAAS,OAAO,MAAM;AACrB,cAAM,OAAO,SAAS,eAAe,IAAI;AACzC,cAAM,IAAI,SAAS,cAAc,GAAG;AACpC,UAAE,YAAY,IAAI;AAClB,eAAO,EAAE;AAAA,MACV;AAEA,UAAI,CAAC,KAAK,eAAe,KAAK,WAAW,QAAQ,KAAK,WAAW,UAAU;AAE1E,cAAM,YAAY;AAAA,qGAC+E,OAAO,KAAK,WAAW,IAAI,CAAC;AAAA;AAE7H,eAAO,CAAC;AAAA,UACP,mBAAmB;AAAA,UACnB,wBAAwB,CAAA;AAAA,UACxB,SAAS,KAAK,WAAW,OAAO,YAAY;AAAA,UAC5C,MAAM,GAAG,KAAK,WAAW,OAAO;AAAA,QACjC,CAAC,EAAE,OAAO,OAAO;AAAA,MAClB;AAEA,aAAO;AAAA,IACR;AAAA;EAGD,OAAO;AAAA,IACN,MAAM;AACL,WAAK,mBAAmB;AACxB,WAAK,cAAa;AAAA,IACnB;AAAA,IAEA,OAAO;AACN,WAAK,mBAAmB;AACxB,WAAK,eAAe;AACpB,WAAK,cAAa;AAAA,IACnB;AAAA;EAGD,UAAU;AACT,SAAK,cAAa;AAClB,cAAU,2BAA2B,KAAK,aAAa;AACvD,cAAU,iCAAiC,KAAK,aAAa;AAC7D,QAAI,CAAC,KAAK,cAAc,KAAK,QAAQ,CAAC,KAAK,UAAU;AACpD,UAAI,CAAC,KAAK,qBAAqB;AAC9B,aAAK,gBAAgB,KAAK,IAAI;AAAA,MAC/B,OAAO;AACN,aAAK,cAAc,KAAK,mBAAmB;AAAA,MAC5C;AACA,gBAAU,8BAA8B,KAAK,uBAAuB;AAAA,IACrE,WAAW,CAAC,KAAK,cAAc,KAAK,qBAAqB;AAExD,WAAK,cAAc,KAAK,mBAAmB;AAAA,IAC5C;AAAA,EACD;AAAA,EAEA,gBAAgB;AACf,gBAAY,2BAA2B,KAAK,aAAa;AACzD,gBAAY,iCAAiC,KAAK,aAAa;AAC/D,gBAAY,8BAA8B,KAAK,uBAAuB;AAAA,EACvE;AAAA,EAEA,SAAS;AAAA,IACR;AAAA,IACA,wBAAwB,OAAO;AAC9B,UAAI,KAAK,SAAS,MAAM,QAAQ;AAC/B,aAAK,aAAa;AAAA,UACjB,QAAQ,MAAM;AAAA,UACd,MAAM,MAAM;AAAA,UACZ,SAAS,MAAM;AAAA,QAChB;AACA,aAAK,YAAY,MAAM,WAAW;AAAA,MACnC;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAM,WAAW,OAAO;AACvB,UAAI,MAAM,SAAS,aAAa,MAAM,QAAQ,SAAS;AACtD;AAAA,MACD;AACA,UAAI,CAAC,KAAK,uBAAuB;AAChC,cAAM,KAAK,kBAAiB;AAAA,MAC7B;AACA,WAAK,wBAAwB,CAAC,KAAK;AAAA,IACpC;AAAA,IAEA,YAAY;AACX,WAAK,wBAAwB;AAAA,IAC9B;AAAA,IAEA,MAAM,oBAAoB;AACzB,WAAK,sBAAsB;AAC3B,UAAI;AACH,cAAM,OAAO,mBAAmB,KAAK,IAAI;AACzC,cAAM,EAAE,KAAG,IAAM,MAAM,MAAM,KAAK,YAAY,sBAAsB,GAAG,yBAAyB,IAAI,EAAE;AACtG,aAAK,mBAAmB;AACxB,aAAK,sBAAsB,KAAK,YAAY,CAAC,KAAK,SAAS,EAAE,OAAO,KAAK,OAAO,IAAI,KAAK;AAAA,MAC1F,QAAQ;AACP,aAAK,wBAAwB;AAAA,MAC9B;AACA,WAAK,sBAAsB;AAC3B,WAAK,eAAe;AAAA,IACrB;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAgB;AACf,WAAK,iBAAiB;AAGtB,UAAI,CAAC,KAAK,iBAAiB,CAAC,KAAK,iBAAiB,KAAK,YAAY,KAAK,aAAa,KAAK,OAAO,OAAO;AACvG,aAAK,iBAAiB;AACtB,aAAK,mBAAmB;AACxB;AAAA,MACD;AAGA,UAAI,KAAK,cAAc;AACtB,aAAK,mBAAmB,KAAK,GAAG;AAChC;AAAA,MACD;AAEA,UAAI,KAAK,QAAQ,IAAI;AACpB,cAAM,YAAY,KAAK,mBAAmB,KAAK,MAAM,EAAE;AACvD,cAAM,SAAS;AAAA,UACd,YAAY;AAAA,UACZ,KAAK,mBAAmB,KAAK,MAAM,GAAG,IAAI;AAAA,UACzC,KAAK,IAAI;AAEX,aAAK,mBAAmB,WAAW,MAAM;AAAA,MAC1C,OAAO;AACN,cAAM,YAAY,KAAK,mBAAmB,KAAK,MAAM,GAAG;AACxD,aAAK,mBAAmB,SAAS;AAAA,MAClC;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,mBAAmB,MAAM,MAAM;AAC9B,UAAI,YAAY,aAAa,MAAM;AAAA,QAClC;AAAA,QACA,aAAa,KAAK;AAAA,QAClB,SAAS,KAAK;AAAA,OACd;AAGD,UAAI,SAAS,eAAc,GAAI,OAAO,OAAO,kBAAkB,aAAa;AAC3E,qBAAa,QAAQ,OAAO,cAAc,OAAO;AAAA,MAClD;AAEA,aAAO;AAAA,IACR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,mBAAmB,KAAK,SAAS,MAAM;AAEtC,YAAM,gBAAgB,iBAAiB,KAAK,IAAI;AAChD,UAAI,KAAK,iBAAiB,OAAO,kBAAkB,WAAW;AAC7D,aAAK,iBAAiB;AACtB,aAAK,kBAAkB;AACvB,YAAI,QAAQ;AACX,eAAK,qBAAqB;AAAA,QAC3B;AACA,YAAI,kBAAkB,OAAO;AAC5B,eAAK,mBAAmB;AAAA,QACzB;AACA;AAAA,MACD;AAEA,YAAM,MAAM,IAAI,MAAK;AACrB,UAAI,SAAS,MAAM;AAClB,aAAK,kBAAkB;AACvB,YAAI,QAAQ;AACX,eAAK,qBAAqB;AAAA,QAC3B;AACA,aAAK,iBAAiB;AAEtB,yBAAiB,KAAK,MAAM,IAAI;AAAA,MACjC;AACA,UAAI,UAAU,CAAC,UAAU;AACxB,eAAO,MAAM,iCAAiC,EAAE,OAAO,IAAE,CAAG;AAE5D,aAAK,kBAAkB;AACvB,aAAK,qBAAqB;AAE1B,aAAK,mBAAmB;AACxB,aAAK,iBAAiB;AACtB,yBAAiB,KAAK,MAAM,KAAK;AAAA,MAClC;AAEA,UAAI,QAAQ;AACX,YAAI,SAAS;AAAA,MACd;AACA,UAAI,MAAM;AAAA,IACX;AAAA;AAEF;;;;;EArnB0C,OAAM;;;;;;;;;;sCA3D/CC,mBA6EO,QAAA;AAAA,IA3EN,uBAAM,iCAA+B;AAAA,4BACF,MAAA;AAAA,8BAA6C,SAAA;AAAA,sCAA4C,MAAA;AAAA;IAK3H,sBAAO,SAAA,WAAW;AAAA,IAClB,OAAO,SAAA;AAAA;IAERC,WAQO,yBARP,MAQO;AAAA,MANM,OAAA,0BAAZD,mBAAsE,QAAA;AAAA;QAA9C,OAAKE,eAAA,CAAE,OAAA,WAAiB,mBAAmB,CAAA;AAAA,qBAEvD,MAAA,mBAAmB,MAAA,iCAD/BF,mBAIQ,OAAA;AAAA;QAFN,KAAK,MAAA;AAAA,QACL,QAAQ,MAAA;AAAA,QACT,KAAI;AAAA;;IAMC,SAAA,WAAW,SAAA,KAAK,WAAM,kBAD7BG,YAUW,qBAAA;AAAA;MART,cAAY,SAAA;AAAA,MACb,OAAM;AAAA,MACN,SAAQ;AAAA,MACP,SAAO,SAAA;AAAA;MACG,cACV,MAA4C;AAAA,QAAvB,MAAA,oCAArBA,YAA4C,0BAAA,EAAA,KAAA,EAAA,CAAA,mBAC5CA,YAAwC,+BAAA;AAAA;UAAZ,MAAM;AAAA;;;wCAIxB,SAAA,wBADZA,YAsBY,sBAAA;AAAA;MApBH,MAAM,MAAA;AAAA,6DAAA,MAAA,wBAAqB;AAAA,MAClC,cAAY,SAAA;AAAA,MACZ,WAAW,OAAA;AAAA,MACZ,cAAA;AAAA,MACA,eAAA;AAAA,MACA,SAAQ;AAAA,MACP,SAAO,SAAA;AAAA;uBAGP,MAA2B;AAAA,SAF5BC,UAAA,IAAA,GAAAJ,mBASYK,UAAA,MAAAC,WAPW,SAAA,MAAI,CAAlB,MAAM,QAAG;AAFlB,iBAAAF,UAAA,GAAAD,YASYI,wBARN,KAAK,iBAAiB,GAD5BC,WASY,EANV,IAAQ,GAAA,EAAA,SAAA,KAAA,GACD,KAAK,sBAAsB,GAAAC,YAAA;AAAA,6BAGxB,MACX;AAAA,8BADW,MACXC,gBAAG,KAAK,IAAI,GAAA,CAAA;AAAA;;;YAHI,KAAK;oBAAU;AAAA,0BAC9B,MAAwC;AAAA,gBAAxCC,YAAwC,6BAAA;AAAA,kBAArB,KAAK,KAAK;AAAA;;;;;;;;;MAIf,MAAA;cAAsB;AAAA,oBACrC,MAAiB;AAAA,UAAjBA,YAAiB,wBAAA;AAAA;;;;IAKP,SAAA,8BAAZP,UAAA,GAAAJ,mBAEO,QAFP,YAEOU,gBADH,KAAA,WAAW,IAAI,GAAA,CAAA,KAGP,SAAA,qCADZP,YAIkC,6BAAA;AAAA;MAFjC,OAAM;AAAA,MACL,QAAQ,KAAA,WAAW;AAAA,MACnB,eAAa,OAAO,SAAA,OAAO;AAAA;IAItB,SAAA,6BADPH,mBAOO,QAAA;AAAA;MALL,sBAAO,SAAA,oBAAoB;AAAA,MAC5B,OAAM;AAAA;MACNY,mBAEO,QAAA;AAAA,QAFA,sBAAO,SAAA,aAAa;AAAA,QAAE,OAAM;AAAA,yBAC/B,SAAA,QAAQ,GAAA,CAAA;AAAA;;+BAzEI,SAAA,SAAS;AAAA;;;"}
1	+ {"version":3,"file":"NcAvatar-CK_dTsmT.mjs","sources":["../../src/mixins/userStatus.js","../../src/components/NcAvatar/NcAvatar.vue"],"sourcesContent":["/*\n SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n /\n\nimport { getCurrentUser } from '@nextcloud/auth'\nimport axios from '@nextcloud/axios'\nimport { getCapabilities } from '@nextcloud/capabilities'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport { logger } from '../utils/logger.ts'\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.hasOwn(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\tthis.setUserStatus(data.ocs.data)\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\tlogger.error('Failed to fetch user status', { error: e })\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Sets the user status\n\t\t \n\t\t @param {string} status user's status\n\t\t * @param {string} message user's message\n\t\t * @param {string} icon user's icon\n\t\t /\n\t\tsetUserStatus({ status, message, icon }) {\n\t\t\tthis.userStatus.status = status \|\| ''\n\t\t\tthis.userStatus.message = message \|\| ''\n\t\t\tthis.userStatus.icon = icon \|\| ''\n\t\t\tthis.hasStatus = !!status\n\t\t},\n\t},\n}\n","<!--\n - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\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=\"favicon-touch.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<IconAccountMultipleOutline :size=\"20\" />\n\t\t</template>\n\t</NcAvatar>\n</template>\n<script>\nimport IconAccountMultipleOutline from 'vue-material-design-icons/AccountMultipleOutline.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconAccountMultipleOutline,\n\t},\n}\n</script>\n```\n\n### Avatar with preloaded status\n```\n<template>\n\t<div>\n\t\t<NcAvatar user=\"janedoe\"\n\t\t\tdisplay-name=\"Jane Doe\"\n\t\t\t:preloaded-user-status=\"status.online\">\n\t\t</NcAvatar>\n\t\t<NcAvatar user=\"janedoe\"\n\t\t\tdisplay-name=\"Jane Doe\"\n\t\t\t:preloaded-user-status=\"status.away\">\n\t\t</NcAvatar>\n\t\t<NcAvatar user=\"janedoe\"\n\t\t\tdisplay-name=\"Jane Doe\"\n\t\t\t:preloaded-user-status=\"status.dnd\">\n\t\t</NcAvatar>\n\t\t<NcAvatar user=\"janedoe\"\n\t\t\tdisplay-name=\"Jane Doe\"\n\t\t\t:preloaded-user-status=\"status.custom\">\n\t\t</NcAvatar>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tstatus: {\n\t\t\t\tonline: {\n\t\t\t\t\ticon: '',\n\t\t\t\t\tstatus: 'online',\n\t\t\t\t\tmessage: 'Available',\n\t\t\t\t},\n\t\t\t\taway: {\n\t\t\t\t\ticon: '',\n\t\t\t\t\tstatus: 'away',\n\t\t\t\t\tmessage: 'Away',\n\t\t\t\t},\n\t\t\t\tdnd: {\n\t\t\t\t\ticon: '',\n\t\t\t\t\tstatus: 'dnd',\n\t\t\t\t\tmessage: 'Busy',\n\t\t\t\t},\n\t\t\t\tcustom: {\n\t\t\t\t\ticon: '📆',\n\t\t\t\t\tstatus: 'online',\n\t\t\t\t\tmessage: 'In a meeting',\n\t\t\t\t}\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### Avatar size\n\n```vue\n<template>\n\t<div>\n\t\t<div v-for=\"size in [15, 24, 34, 44, 180]\">\n\t\t\t<span>\n\t\t\t\t{{ size }}px\n\t\t\t</span>\n\t\t\t<NcAvatar user=\"alice-smith\"\n\t\t\t\tdisplay-name=\"Alice Smith\"\n\t\t\t\t:size=\"size\"\n\t\t\t\t:preloaded-user-status=\"status.online\" />\n\t\t\t<NcAvatar user=\"bob-doe\"\n\t\t\t\tdisplay-name=\"Bob Doe\"\n\t\t\t\t:size=\"size\"\n\t\t\t\t:preloaded-user-status=\"status.meeting\" />\n\t\t</div>\n\t\t<div>\n\t\t\t<div>\n\t\t\t\tCustom: {{ customSize }}px\n\t\t\t</div>\n\t\t\t<NcAvatar user=\"alice-smith\"\n\t\t\t\tdisplay-name=\"Alice Smith\"\n\t\t\t\t:size=\"customSize\"\n\t\t\t\t:preloaded-user-status=\"status.online\" />\n\t\t\t<NcAvatar user=\"bob-doe\"\n\t\t\t\tdisplay-name=\"Bob Doe\"\n\t\t\t\t:size=\"customSize\"\n\t\t\t\t:preloaded-user-status=\"status.meeting\" />\n\t\t</div>\n\t\t<div>\n\t\t\t<input type=\"range\" v-model=\"customSize\" :min=\"15\" :max=\"180\" step=\"1\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'\n\nexport default {\n\tcomponents: {\n\t\tAccountMultiple,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcustomSize: 20,\n\t\t\tstatus: {\n\t\t\t\tonline: {\n\t\t\t\t\ticon: '',\n\t\t\t\t\tstatus: 'online',\n\t\t\t\t\tmessage: 'Available',\n\t\t\t\t},\n\t\t\t\tmeeting: {\n\t\t\t\t\ticon: '📆',\n\t\t\t\t\tstatus: 'online',\n\t\t\t\t\tmessage: 'In a meeting',\n\t\t\t\t},\n\t\t\t},\n\t\t}\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<span\n\t\tv-click-outside=\"closeMenu\"\n\t\tclass=\"avatardiv popovermenu-wrapper\"\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\t:title=\"tooltip\">\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\n\t\t\t\tv-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\n\t\t\tv-if=\"hasMenu && menu.length === 0\"\n\t\t\t:aria-label=\"avatarAriaLabel\"\n\t\t\tclass=\"action-item action-item__menutoggle\"\n\t\t\tvariant=\"tertiary-no-background\"\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<IconDotsHorizontal v-else :size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcActions\n\t\t\tv-else-if=\"hasMenu\"\n\t\t\tv-model:open=\"contactsMenuOpenState\"\n\t\t\t:aria-label=\"avatarAriaLabel\"\n\t\t\t:container=\"menuContainer\"\n\t\t\tforce-menu\n\t\t\tmanual-open\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click=\"toggleMenu\">\n\t\t\t<component\n\t\t\t\t:is=\"item.ncActionComponent\"\n\t\t\t\tv-for=\"(item, key) in menu\"\n\t\t\t\t:key=\"key\"\n\t\t\t\tv-bind=\"item.ncActionComponentProps\">\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</component>\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\n\t\t\tv-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\n\t\t\tv-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 { getCurrentUser } from '@nextcloud/auth'\nimport axios from '@nextcloud/axios'\nimport { getBuilder } from '@nextcloud/browser-storage'\nimport { subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { generateUrl } from '@nextcloud/router'\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport IconDotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\nimport { getRoute } from '../../components/NcRichText/autolink.ts'\nimport { useIsDarkTheme } from '../../composables/index.ts'\nimport { getEnabledContactsMenuActions } from '../../functions/contactsMenu/index.ts'\nimport { usernameToColor } from '../../functions/usernameToColor/index.ts'\nimport { t } from '../../l10n.ts'\nimport { userStatus } from '../../mixins/index.js'\nimport { getAvatarUrl } from '../../utils/getAvatarUrl.ts'\nimport { logger } from '../../utils/logger.ts'\nimport { getUserStatusText } from '../../utils/UserStatus.ts'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcActionLink from '../NcActionLink/index.js'\nimport NcActionRouter from '../NcActionRouter/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcActionText from '../NcActionText/index.js'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\nimport NcLoadingIcon from '../NcLoadingIcon/index.ts'\nimport NcUserStatusIcon from '../NcUserStatusIcon/index.js'\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\t/* @type {import('vue').ObjectDirective} /\n\t\tClickOutside,\n\t},\n\n\tcomponents: {\n\t\tIconDotsHorizontal,\n\t\tNcActions,\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t\tNcLoadingIcon,\n\t\tNcUserStatusIcon,\n\t},\n\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\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\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\n\t\t/\n\t\t Do not show the user status on the avatar.\n\t\t /\n\t\thideStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Show the verbose user status (e.g. \"online\" / \"away\") instead of just the status icon.\n\t\t /\n\t\tverboseStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\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\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\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\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\n\t\t/\n\t\t Do not automatically generate a placeholder avatars if there is no real avatar is available.\n\t\t /\n\t\tnoPlaceholder: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\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\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\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: [Boolean, String, Object, Element],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\n\tsetup() {\n\t\tconst isDarkTheme = useIsDarkTheme()\n\n\t\treturn {\n\t\t\tisDarkTheme,\n\t\t}\n\t},\n\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\tcontactsMenuData: {},\n\t\t\tcontactsMenuActions: [],\n\t\t\tcontactsMenuOpenState: false,\n\t\t}\n\t},\n\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\n\t\tcanDisplayUserStatus() {\n\t\t\treturn !this.hideStatus\n\t\t\t\t&& this.hasStatus\n\t\t\t\t&& ['online', 'away', 'busy', 'dnd'].includes(this.userStatus.status)\n\t\t},\n\n\t\tshowUserStatusIconOnAvatar() {\n\t\t\treturn !this.hideStatus\n\t\t\t\t&& !this.verboseStatus\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\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\n\t\tisUserDefined() {\n\t\t\treturn typeof this.user !== 'undefined'\n\t\t},\n\n\t\tisDisplayNameDefined() {\n\t\t\treturn typeof this.displayName !== 'undefined'\n\t\t},\n\n\t\tisUrlDefined() {\n\t\t\treturn typeof this.url !== 'undefined'\n\t\t},\n\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.noPlaceholder && this.userDoesNotExist && !(this.iconClass \|\| this.$slots.icon)\n\t\t},\n\n\t\tavatarStyle() {\n\t\t\treturn {\n\t\t\t\t'--avatar-size': this.size + 'px',\n\t\t\t\tlineHeight: this.showInitials ? (this.size + 'px') : 0,\n\t\t\t\tfontSize: Math.round(this.size 0.45) + 'px',\n\t\t\t}\n\t\t},\n\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\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\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 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 \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) {\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\n\t\tmenu() {\n\t\t\tconst actions = this.contactsMenuActions.map((item) => {\n\t\t\t\tconst route = getRoute(this.$router, item.hyperlink)\n\t\t\t\treturn {\n\t\t\t\t\tncActionComponent: route ? NcActionRouter : NcActionLink,\n\t\t\t\t\tncActionComponentProps: route\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tto: route,\n\t\t\t\t\t\t\t\ticon: item.icon,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\thref: item.hyperlink,\n\t\t\t\t\t\t\t\ticon: item.icon,\n\t\t\t\t\t\t\t},\n\t\t\t\t\ttext: item.title,\n\t\t\t\t}\n\t\t\t})\n\n\t\t\tfor (const action of getEnabledContactsMenuActions(this.contactsMenuData)) {\n\t\t\t\ttry {\n\t\t\t\t\tactions.push({\n\t\t\t\t\t\tncActionComponent: NcActionButton,\n\t\t\t\t\t\tncActionComponentProps: {\n\t\t\t\t\t\t\tonClick: () => action.callback(this.contactsMenuData),\n\t\t\t\t\t\t},\n\t\t\t\t\t\ttext: action.displayName(this.contactsMenuData),\n\t\t\t\t\t\ticonSvg: action.iconSvg(this.contactsMenuData),\n\t\t\t\t\t})\n\t\t\t\t} catch (error) {\n\t\t\t\t\tlogger.error(`Failed to render ContactsMenu action ${action.id}`, {\n\t\t\t\t\t\terror,\n\t\t\t\t\t\taction,\n\t\t\t\t\t})\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.hideStatus && (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\tncActionComponent: NcActionText,\n\t\t\t\t\tncActionComponentProps: {},\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\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.hideStatus && 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.setUserStatus(this.preloadedUserStatus)\n\t\t\t}\n\t\t\tsubscribe('user_status:status.updated', this.handleUserStatusUpdated)\n\t\t} else if (!this.hideStatus && this.preloadedUserStatus) {\n\t\t\t// Always set preloaded status if provided\n\t\t\tthis.setUserStatus(this.preloadedUserStatus)\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\tunsubscribe('user_status:status.updated', this.handleUserStatusUpdated)\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\tthis.hasStatus = state.status !== null\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 \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\n\t\tcloseMenu() {\n\t\t\tthis.contactsMenuOpenState = false\n\t\t},\n\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.contactsMenuData = data\n\t\t\t\tthis.contactsMenuActions = data.topAction ? [data.topAction].concat(data.actions) : data.actions\n\t\t\t} catch {\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 \|\| this.iconClass \|\| this.$slots.icon)) {\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, {\n\t\t\t\tsize,\n\t\t\t\tisDarkTheme: this.isDarkTheme,\n\t\t\t\tisGuest: this.isGuest,\n\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=' + window.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 = (error) => {\n\t\t\t\tlogger.debug('[NcAvatar] Invalid avatar url', { error, 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(--avatar-size);\n\theight: var(--avatar-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\tinset-inline-start: 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(--avatar-size);\n\t\t\t\tmin-height: var(--avatar-size);\n\t\t\t\twidth: var(--avatar-size) !important;\n\t\t\t\tmin-width: var(--avatar-size);\n\t\t\t}\n\t\t}\n\t\t& > :deep(.button-vue),\n\t\t& > :deep(.action-item .button-vue) {\n\t\t\t--button-radius: calc(var(--avatar-size) / 2);\n\t\t}\n\t}\n\n\t.avatardiv__initials-wrapper {\n\t\tdisplay: block;\n\t\theight: var(--avatar-size);\n\t\twidth: var(--avatar-size);\n\t\tbackground-color: var(--color-main-background);\n\t\tborder-radius: calc(var(--avatar-size) / 2);\n\n\t\t.avatardiv__initials {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tinset-inline-start: 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(--avatar-size);\n\t\theight: var(--avatar-size);\n\t}\n\n\t.avatardiv__user-status {\n\t\t// Size of the status icon to make it:\n\t\t// - 💫 Orbital: the status icon's center is positioned on the avatar circle\n\t\t// - ⏹️ Best-fit: the status icon is as large as possible without exceeding the avatar box\n\t\t// See PR for math explanation: PR #6004\n\t\t--avatar-status-size-orbital: calc(var(--avatar-size) (1 - 1 / sqrt(2)));\n\t\t// Limit the status icon size to minimum font size to keep it readable\n\t\t// Ideally avatars with a smaller should not be used with the status icon at all\n\t\t--avatar-status-size-min: var(--font-size-small);\n\t\t--avatar-status-size: max(var(--avatar-status-size-orbital), var(--avatar-status-size-min));\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tinset-inline-end: 0;\n\t\tinset-block-end: 0;\n\t\theight: var(--avatar-status-size);\n\t\twidth: var(--avatar-status-size);\n\t\tline-height: 1;\n\t\tfont-size: calc(var(--avatar-status-size) / 1.2);\n\t\tbackground-color: var(--color-main-background);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: var(--avatar-status-size);\n\t\tbackground-position: center;\n\t\tborder-radius: 50%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\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: calc(var(--avatar-size) / 2);\n\tbackground-color: var(--color-background-darker);\n\theight: 100%;\n}\n\n</style>\n"],"names":["ClickOutside","_createElementBlock","_renderSlot","_normalizeClass","_createBlock","_openBlock","_Fragment","_renderList","_resolveDynamicComponent","_mergeProps","_createSlots","_toDisplayString","_createVNode","_createElementVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAA,aAAe;AAAA,EACd,OAAO;AACN,WAAO;AAAA,MACN,WAAW;AAAA,MACX,YAAY;AAAA,QACX,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,IACA;AAAA,EACC;AAAA,EACA,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQR,MAAM,gBAAgB,QAAQ;AAC7B,UAAI,CAAC,QAAQ;AACZ;AAAA,MACD;AACA,YAAM,eAAe,gBAAe;AACpC,UAAI,CAAC,OAAO,OAAO,cAAc,aAAa,KAAK,CAAC,aAAa,YAAY,SAAS;AACrF;AAAA,MACD;AAGA,UAAI,CAAC,eAAc,GAAI;AACtB;AAAA,MACD;AAEA,UAAI;AACH,cAAM,EAAE,KAAI,IAAK,MAAM,MAAM,IAAI,eAAe,6CAA6C,EAAE,QAAQ,CAAC;AACxG,aAAK,cAAc,KAAK,IAAI,IAAI;AAAA,MACjC,SAAS,GAAG;AACX,YAAI,EAAE,SAAS,WAAW,OAAO,EAAE,SAAS,KAAK,KAAK,MAAM,WAAW,GAAG;AAEzE;AAAA,QACD;AACA,eAAO,MAAM,+BAA+B,EAAE,OAAO,EAAC,CAAE;AAAA,MACzD;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,cAAc,EAAE,QAAQ,SAAS,KAAI,GAAI;AACxC,WAAK,WAAW,SAAS,UAAU;AACnC,WAAK,WAAW,UAAU,WAAW;AACrC,WAAK,WAAW,OAAO,QAAQ;AAC/B,WAAK,YAAY,CAAC,CAAC;AAAA,IACpB;AAAA,EACF;AACA;ACoOA,MAAM,iBAAiB,WAAW,WAAW,EAAE,QAAO,EAAG,MAAK;AAK9D,SAAS,iBAAiB,QAAQ;AACjC,QAAM,OAAO,eAAe,QAAQ,qBAAqB,MAAM;AAC/D,MAAI,OAAO,SAAS,UAAU;AAC7B,WAAO,QAAQ,IAAI;AAAA,EACpB;AACA,SAAO;AACR;AAMA,SAAS,iBAAiB,QAAQ,MAAM;AACvC,MAAI,QAAQ;AACX,mBAAe,QAAQ,qBAAqB,QAAQ,IAAI;AAAA,EACzD;AACD;AAEA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA;AAAA,kBAEXA;AAAAA;EAGD,YAAY;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;EAGD,QAAQ,CAAC,UAAU;AAAA,EACnB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKN,KAAK;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOV,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,YAAY;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,eAAe;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;IAQV,qBAAqB;AAAA,MACpB,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;;IASV,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,eAAe;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,gBAAgB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;;IASV,gBAAgB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;IAQV,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,eAAe;AAAA,MACd,MAAM,CAAC,SAAS,QAAQ,QAAQ,OAAO;AAAA,MACvC,SAAS;AAAA;;EAIX,QAAQ;AACP,UAAM,cAAc,eAAc;AAElC,WAAO;AAAA,MACN;AAAA,IACD;AAAA,EACD;AAAA,EAEA,OAAO;AACN,WAAO;AAAA,MACN,iBAAiB;AAAA,MACjB,oBAAoB;AAAA,MACpB,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,MAChB,cAAc;AAAA,MACd,qBAAqB;AAAA,MACrB,kBAAkB,CAAA;AAAA,MAClB,qBAAqB,CAAA;AAAA,MACrB,uBAAuB;AAAA,IACxB;AAAA,EACD;AAAA,EAEA,UAAU;AAAA,IACT,kBAAkB;AAEjB,UAAI,CAAC,KAAK,SAAS;AAClB;AAAA,MACD;AACA,UAAI,KAAK,wBAAwB,KAAK,4BAA4B;AACjE,eAAO,EAAE,qCAAqC,EAAE,aAAa,KAAK,eAAe,KAAK,MAAM,QAAQ,kBAAkB,KAAK,WAAW,MAAM,GAAG;AAAA,MAChJ;AACA,aAAO,EAAE,2BAA2B,EAAE,aAAa,KAAK,eAAe,KAAK,MAAM;AAAA,IACnF;AAAA,IAEA,uBAAuB;AACtB,aAAO,CAAC,KAAK,cACT,KAAK,aACL,CAAC,UAAU,QAAQ,QAAQ,KAAK,EAAE,SAAS,KAAK,WAAW,MAAM;AAAA,IACtE;AAAA,IAEA,6BAA6B;AAC5B,aAAO,CAAC,KAAK,cACT,CAAC,KAAK,iBACN,KAAK,aACL,KAAK,WAAW,WAAW,SAC3B,KAAK,WAAW;AAAA,IACrB;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAiB;AAChB,UAAI,KAAK,sBAAsB;AAC9B,eAAO,KAAK;AAAA,MACb;AACA,UAAI,KAAK,eAAe;AACvB,eAAO,KAAK;AAAA,MACb;AACA,aAAO;AAAA,IACR;AAAA,IAEA,gBAAgB;AACf,aAAO,OAAO,KAAK,SAAS;AAAA,IAC7B;AAAA,IAEA,uBAAuB;AACtB,aAAO,OAAO,KAAK,gBAAgB;AAAA,IACpC;AAAA,IAEA,eAAe;AACd,aAAO,OAAO,KAAK,QAAQ;AAAA,IAC5B;AAAA,IAEA,UAAU;AACT,UAAI,KAAK,aAAa;AACrB,eAAO;AAAA,MACR;AACA,UAAI,KAAK,cAAc;AACtB,eAAO,KAAK,KAAK,SAAS;AAAA,MAC3B;AACA,aAAO,EAAE,KAAK,SAAS,eAAc,GAAI,OAAO,KAAK,oBAAoB,KAAK;AAAA,IAC/E;AAAA;AAAA;AAAA;AAAA,IAKA,eAAe;AACd,aAAO,CAAC,KAAK,iBAAiB,KAAK,oBAAoB,EAAE,KAAK,aAAa,KAAK,OAAO;AAAA,IACxF;AAAA,IAEA,cAAc;AACb,aAAO;AAAA,QACN,iBAAiB,KAAK,OAAO;AAAA,QAC7B,YAAY,KAAK,eAAgB,KAAK,OAAO,OAAQ;AAAA,QACrD,UAAU,KAAK,MAAM,KAAK,OAAO,IAAI,IAAI;AAAA,MAC1C;AAAA,IACD;AAAA,IAEA,uBAAuB;AACtB,YAAM,EAAE,GAAG,GAAG,EAAA,IAAM,gBAAgB,KAAK,cAAc;AACvD,aAAO;AAAA,QACN,iBAAiB,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC;AAAA,MACvC;AAAA,IACD;AAAA,IAEA,gBAAgB;AACf,YAAM,EAAE,GAAG,GAAG,EAAA,IAAM,gBAAgB,KAAK,cAAc;AACvD,aAAO;AAAA,QACN,OAAO,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC;AAAA,MAC5B;AAAA,IACD;AAAA,IAEA,UAAU;AACT,UAAI,KAAK,gBAAgB;AACxB,eAAO;AAAA,MACR;AACA,UAAI,KAAK,gBAAgB;AACxB,eAAO,KAAK;AAAA,MACb;AAEA,aAAO,KAAK;AAAA,IACb;AAAA;AAAA;AAAA;AAAA,IAKA,WAAW;AACV,UAAI,WAAW;AACf,UAAI,KAAK,cAAc;AACtB,cAAM,OAAO,KAAK,eAAe,KAAI;AACrC,YAAI,SAAS,IAAI;AAChB,iBAAO;AAAA,QACR;AAUA,cAAM,gBAAgB,KAAK,MAAM,kBAAkB;AACnD,YAAI,CAAC,eAAe;AACnB,iBAAO;AAAA,QACR;AAEA,cAAM,WAAW,cAAc,KAAK,EAAE;AACtC,cAAM,MAAM,SAAS,YAAY,GAAG;AACpC,mBAAW,OAAO,cAAc,SAAS,YAAY,CAAC,CAAC;AACvD,YAAI,QAAQ,IAAI;AACf,qBAAW,SAAS,OAAO,OAAO,cAAc,SAAS,YAAY,MAAM,CAAC,CAAC,CAAC;AAAA,QAC/E;AAAA,MACD;AACA,aAAO,SAAS,kBAAiB;AAAA,IAClC;AAAA,IAEA,OAAO;AACN,YAAM,UAAU,KAAK,oBAAoB,IAAI,CAAC,SAAS;AACtD,cAAM,QAAQ,SAAS,KAAK,SAAS,KAAK,SAAS;AACnD,eAAO;AAAA,UACN,mBAAmB,QAAQ,iBAAiB;AAAA,UAC5C,wBAAwB,QACrB;AAAA,YACA,IAAI;AAAA,YACJ,MAAM,KAAK;AAAA,UACZ,IACC;AAAA,YACA,MAAM,KAAK;AAAA,YACX,MAAM,KAAK;AAAA;UAEd,MAAM,KAAK;AAAA,QACZ;AAAA,MACD,CAAC;AAED,iBAAW,UAAU,8BAA8B,KAAK,gBAAgB,GAAG;AAC1E,YAAI;AACH,kBAAQ,KAAK;AAAA,YACZ,mBAAmB;AAAA,YACnB,wBAAwB;AAAA,cACvB,SAAS,MAAM,OAAO,SAAS,KAAK,gBAAgB;AAAA;YAErD,MAAM,OAAO,YAAY,KAAK,gBAAgB;AAAA,YAC9C,SAAS,OAAO,QAAQ,KAAK,gBAAgB;AAAA,WAC7C;AAAA,QACF,SAAS,OAAO;AACf,iBAAO,MAAM,wCAAwC,OAAO,EAAE,IAAI;AAAA,YACjE;AAAA,YACA;AAAA,WACA;AAAA,QACF;AAAA,MACD;AAKA,eAAS,OAAO,MAAM;AACrB,cAAM,OAAO,SAAS,eAAe,IAAI;AACzC,cAAM,IAAI,SAAS,cAAc,GAAG;AACpC,UAAE,YAAY,IAAI;AAClB,eAAO,EAAE;AAAA,MACV;AAEA,UAAI,CAAC,KAAK,eAAe,KAAK,WAAW,QAAQ,KAAK,WAAW,UAAU;AAE1E,cAAM,YAAY;AAAA,qGAC+E,OAAO,KAAK,WAAW,IAAI,CAAC;AAAA;AAE7H,eAAO,CAAC;AAAA,UACP,mBAAmB;AAAA,UACnB,wBAAwB,CAAA;AAAA,UACxB,SAAS,KAAK,WAAW,OAAO,YAAY;AAAA,UAC5C,MAAM,GAAG,KAAK,WAAW,OAAO;AAAA,QACjC,CAAC,EAAE,OAAO,OAAO;AAAA,MAClB;AAEA,aAAO;AAAA,IACR;AAAA;EAGD,OAAO;AAAA,IACN,MAAM;AACL,WAAK,mBAAmB;AACxB,WAAK,cAAa;AAAA,IACnB;AAAA,IAEA,OAAO;AACN,WAAK,mBAAmB;AACxB,WAAK,eAAe;AACpB,WAAK,cAAa;AAAA,IACnB;AAAA;EAGD,UAAU;AACT,SAAK,cAAa;AAClB,cAAU,2BAA2B,KAAK,aAAa;AACvD,cAAU,iCAAiC,KAAK,aAAa;AAC7D,QAAI,CAAC,KAAK,cAAc,KAAK,QAAQ,CAAC,KAAK,UAAU;AACpD,UAAI,CAAC,KAAK,qBAAqB;AAC9B,aAAK,gBAAgB,KAAK,IAAI;AAAA,MAC/B,OAAO;AACN,aAAK,cAAc,KAAK,mBAAmB;AAAA,MAC5C;AACA,gBAAU,8BAA8B,KAAK,uBAAuB;AAAA,IACrE,WAAW,CAAC,KAAK,cAAc,KAAK,qBAAqB;AAExD,WAAK,cAAc,KAAK,mBAAmB;AAAA,IAC5C;AAAA,EACD;AAAA,EAEA,gBAAgB;AACf,gBAAY,2BAA2B,KAAK,aAAa;AACzD,gBAAY,iCAAiC,KAAK,aAAa;AAC/D,gBAAY,8BAA8B,KAAK,uBAAuB;AAAA,EACvE;AAAA,EAEA,SAAS;AAAA,IACR;AAAA,IACA,wBAAwB,OAAO;AAC9B,UAAI,KAAK,SAAS,MAAM,QAAQ;AAC/B,aAAK,aAAa;AAAA,UACjB,QAAQ,MAAM;AAAA,UACd,MAAM,MAAM;AAAA,UACZ,SAAS,MAAM;AAAA,QAChB;AACA,aAAK,YAAY,MAAM,WAAW;AAAA,MACnC;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAM,WAAW,OAAO;AACvB,UAAI,MAAM,SAAS,aAAa,MAAM,QAAQ,SAAS;AACtD;AAAA,MACD;AACA,UAAI,CAAC,KAAK,uBAAuB;AAChC,cAAM,KAAK,kBAAiB;AAAA,MAC7B;AACA,WAAK,wBAAwB,CAAC,KAAK;AAAA,IACpC;AAAA,IAEA,YAAY;AACX,WAAK,wBAAwB;AAAA,IAC9B;AAAA,IAEA,MAAM,oBAAoB;AACzB,WAAK,sBAAsB;AAC3B,UAAI;AACH,cAAM,OAAO,mBAAmB,KAAK,IAAI;AACzC,cAAM,EAAE,KAAG,IAAM,MAAM,MAAM,KAAK,YAAY,sBAAsB,GAAG,yBAAyB,IAAI,EAAE;AACtG,aAAK,mBAAmB;AACxB,aAAK,sBAAsB,KAAK,YAAY,CAAC,KAAK,SAAS,EAAE,OAAO,KAAK,OAAO,IAAI,KAAK;AAAA,MAC1F,QAAQ;AACP,aAAK,wBAAwB;AAAA,MAC9B;AACA,WAAK,sBAAsB;AAC3B,WAAK,eAAe;AAAA,IACrB;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAgB;AACf,WAAK,iBAAiB;AAGtB,UAAI,CAAC,KAAK,iBAAiB,CAAC,KAAK,iBAAiB,KAAK,YAAY,KAAK,aAAa,KAAK,OAAO,OAAO;AACvG,aAAK,iBAAiB;AACtB,aAAK,mBAAmB;AACxB;AAAA,MACD;AAGA,UAAI,KAAK,cAAc;AACtB,aAAK,mBAAmB,KAAK,GAAG;AAChC;AAAA,MACD;AAEA,UAAI,KAAK,QAAQ,IAAI;AACpB,cAAM,YAAY,KAAK,mBAAmB,KAAK,MAAM,EAAE;AACvD,cAAM,SAAS;AAAA,UACd,YAAY;AAAA,UACZ,KAAK,mBAAmB,KAAK,MAAM,GAAG,IAAI;AAAA,UACzC,KAAK,IAAI;AAEX,aAAK,mBAAmB,WAAW,MAAM;AAAA,MAC1C,OAAO;AACN,cAAM,YAAY,KAAK,mBAAmB,KAAK,MAAM,GAAG;AACxD,aAAK,mBAAmB,SAAS;AAAA,MAClC;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,mBAAmB,MAAM,MAAM;AAC9B,UAAI,YAAY,aAAa,MAAM;AAAA,QAClC;AAAA,QACA,aAAa,KAAK;AAAA,QAClB,SAAS,KAAK;AAAA,OACd;AAGD,UAAI,SAAS,eAAc,GAAI,OAAO,OAAO,kBAAkB,aAAa;AAC3E,qBAAa,QAAQ,OAAO,cAAc,OAAO;AAAA,MAClD;AAEA,aAAO;AAAA,IACR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,mBAAmB,KAAK,SAAS,MAAM;AAEtC,YAAM,gBAAgB,iBAAiB,KAAK,IAAI;AAChD,UAAI,KAAK,iBAAiB,OAAO,kBAAkB,WAAW;AAC7D,aAAK,iBAAiB;AACtB,aAAK,kBAAkB;AACvB,YAAI,QAAQ;AACX,eAAK,qBAAqB;AAAA,QAC3B;AACA,YAAI,kBAAkB,OAAO;AAC5B,eAAK,mBAAmB;AAAA,QACzB;AACA;AAAA,MACD;AAEA,YAAM,MAAM,IAAI,MAAK;AACrB,UAAI,SAAS,MAAM;AAClB,aAAK,kBAAkB;AACvB,YAAI,QAAQ;AACX,eAAK,qBAAqB;AAAA,QAC3B;AACA,aAAK,iBAAiB;AAEtB,yBAAiB,KAAK,MAAM,IAAI;AAAA,MACjC;AACA,UAAI,UAAU,CAAC,UAAU;AACxB,eAAO,MAAM,iCAAiC,EAAE,OAAO,IAAE,CAAG;AAE5D,aAAK,kBAAkB;AACvB,aAAK,qBAAqB;AAE1B,aAAK,mBAAmB;AACxB,aAAK,iBAAiB;AACtB,yBAAiB,KAAK,MAAM,KAAK;AAAA,MAClC;AAEA,UAAI,QAAQ;AACX,YAAI,SAAS;AAAA,MACd;AACA,UAAI,MAAM;AAAA,IACX;AAAA;AAEF;;;;;EArnB0C,OAAM;;;;;;;;;;sCA3D/CC,mBA6EO,QAAA;AAAA,IA3EN,uBAAM,iCAA+B;AAAA,4BACF,MAAA;AAAA,8BAA6C,SAAA;AAAA,sCAA4C,MAAA;AAAA;IAK3H,sBAAO,SAAA,WAAW;AAAA,IAClB,OAAO,SAAA;AAAA;IAERC,WAQO,yBARP,MAQO;AAAA,MANM,OAAA,0BAAZD,mBAAsE,QAAA;AAAA;QAA9C,OAAKE,eAAA,CAAE,OAAA,WAAiB,mBAAmB,CAAA;AAAA,qBAEvD,MAAA,mBAAmB,MAAA,iCAD/BF,mBAIQ,OAAA;AAAA;QAFN,KAAK,MAAA;AAAA,QACL,QAAQ,MAAA;AAAA,QACT,KAAI;AAAA;;IAMC,SAAA,WAAW,SAAA,KAAK,WAAM,kBAD7BG,YAUW,qBAAA;AAAA;MART,cAAY,SAAA;AAAA,MACb,OAAM;AAAA,MACN,SAAQ;AAAA,MACP,SAAO,SAAA;AAAA;MACG,cACV,MAA4C;AAAA,QAAvB,MAAA,oCAArBA,YAA4C,0BAAA,EAAA,KAAA,EAAA,CAAA,mBAC5CA,YAAwC,+BAAA;AAAA;UAAZ,MAAM;AAAA;;;wCAIxB,SAAA,wBADZA,YAsBY,sBAAA;AAAA;MApBH,MAAM,MAAA;AAAA,6DAAA,MAAA,wBAAqB;AAAA,MAClC,cAAY,SAAA;AAAA,MACZ,WAAW,OAAA;AAAA,MACZ,cAAA;AAAA,MACA,eAAA;AAAA,MACA,SAAQ;AAAA,MACP,SAAO,SAAA;AAAA;uBAGP,MAA2B;AAAA,SAF5BC,UAAA,IAAA,GAAAJ,mBASYK,UAAA,MAAAC,WAPW,SAAA,MAAI,CAAlB,MAAM,QAAG;AAFlB,iBAAAF,UAAA,GAAAD,YASYI,wBARN,KAAK,iBAAiB,GAD5BC,WASY,EANV,IAAQ,GAAA,EAAA,SAAA,KAAA,GACD,KAAK,sBAAsB,GAAAC,YAAA;AAAA,6BAGxB,MACX;AAAA,8BADW,MACXC,gBAAG,KAAK,IAAI,GAAA,CAAA;AAAA;;;YAHI,KAAK;oBAAU;AAAA,0BAC9B,MAAwC;AAAA,gBAAxCC,YAAwC,6BAAA;AAAA,kBAArB,KAAK,KAAK;AAAA;;;;;;;;;MAIf,MAAA;cAAsB;AAAA,oBACrC,MAAiB;AAAA,UAAjBA,YAAiB,wBAAA;AAAA;;;;IAKP,SAAA,8BAAZP,UAAA,GAAAJ,mBAEO,QAFP,YAEOU,gBADH,KAAA,WAAW,IAAI,GAAA,CAAA,KAGP,SAAA,qCADZP,YAIkC,6BAAA;AAAA;MAFjC,OAAM;AAAA,MACL,QAAQ,KAAA,WAAW;AAAA,MACnB,eAAa,OAAO,SAAA,OAAO;AAAA;IAItB,SAAA,6BADPH,mBAOO,QAAA;AAAA;MALL,sBAAO,SAAA,oBAAoB;AAAA,MAC5B,OAAM;AAAA;MACNY,mBAEO,QAAA;AAAA,QAFA,sBAAO,SAAA,aAAa;AAAA,QAAE,OAAM;AAAA,yBAC/B,SAAA,QAAQ,GAAA,CAAA;AAAA;;+BAzEI,SAAA,SAAS;AAAA;;;"}

package/dist/chunks/{NcBreadcrumbs-DHS31Ax7.mjs → NcBreadcrumbs-CbJmdlaF.mjs} RENAMED Viewed

@@ -4,7 +4,7 @@ import debounce from "debounce";
 import { createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, toDisplayString, Fragment, cloneVNode, h } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 import { N as NcActions, i as isSlotPopulated } from "./NcActions-4R7icatI.mjs";
-import { N as NcActionButton } from "./NcActionButton-BHXE4UKQ.mjs";
+import { N as NcActionButton } from "./NcActionButton-DNXoAooH.mjs";
 import { N as NcActionLink } from "./NcActionLink-Cd69py4e.mjs";
 import { N as NcActionRouter } from "./NcActionRouter-DtxPh20B.mjs";
 import { N as NcBreadcrumb } from "./NcBreadcrumb-ChYVw5CP.mjs";
@@ -458,4 +458,4 @@ const NcBreadcrumbs = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "dat
 export {
   NcBreadcrumbs as N
 };
-//# sourceMappingURL=NcBreadcrumbs-DHS31Ax7.mjs.map
+//# sourceMappingURL=NcBreadcrumbs-CbJmdlaF.mjs.map

package/dist/chunks/{NcBreadcrumbs-DHS31Ax7.mjs.map → NcBreadcrumbs-CbJmdlaF.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcBreadcrumbs-DHS31Ax7.mjs","sources":["../../node_modules/vue-material-design-icons/Folder.vue","../../src/components/NcBreadcrumbs/NcBreadcrumbs.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon folder-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"FolderIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<!--\n - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component renders a breadcrumb bar. It adjusts to the available width\nby hiding breadcrumbs in a dropdown menu and emits an event when something\nis dropped on a creadcrumb.\n\n### Usage\n\n```vue\n<template>\n\t<div>\n\t\t<div class=\"container\">\n\t\t\t<NcBreadcrumbs @dropped=\"dropped\">\n\t\t\t\t<NcBreadcrumb name=\"Home\"\n\t\t\t\t\ttitle=\"Title of the Home folder\"\n\t\t\t\t\thref=\"/\"\n\t\t\t\t\t@dropped=\"droppedOnCrumb\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Folder :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcBreadcrumb>\n\t\t\t\t<NcBreadcrumb name=\"Folder 1\"\n\t\t\t\t\ttitle=\"Folder 1\"\n\t\t\t\t\thref=\"/Folder 1\" />\n\t\t\t\t<NcBreadcrumb name=\"Folder 2\"\n\t\t\t\t\thref=\"/Folder 1/Folder 2\"\n\t\t\t\t\t:disable-drop=\"true\" />\n\t\t\t\t<NcBreadcrumb name=\"Folder 3\"\n\t\t\t\t\ttitle=\"Folder 3\"\n\t\t\t\t\thref=\"/Folder 1/Folder 2/Folder 3\" />\n\t\t\t\t<NcBreadcrumb name=\"Folder 4\"\n\t\t\t\t\ttitle=\"Folder 4\"\n\t\t\t\t\thref=\"/Folder 1/Folder 2/Folder 3/Folder 4\" />\n\t\t\t\t<NcBreadcrumb name=\"Folder 5 with an overflowing long name\"\n\t\t\t\t\ttitle=\"Folder 5\"\n\t\t\t\t\thref=\"/Folder 1/Folder 2/Folder 3/Folder 4/Folder 5\"\n\t\t\t\t\t:disable-drop=\"true\">\n\t\t\t\t\t<template #menu-icon>\n\t\t\t\t\t\t<MenuDown :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t<NcActionButton @click=\"alert('Share')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tShare\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton @click=\"alert('Download')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Download :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDownload\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</NcBreadcrumb>\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tNew\n\t\t\t\t\t</NcButton>\n\t\t\t\t</template>\n\t\t\t</NcBreadcrumbs>\n\t\t</div>\n\t\t<br />\n\t\t<div class=\"dragme\" draggable=\"true\" @dragstart=\"dragStart\">\n\t\t\t<span>Drag me onto the breadcrumbs.</span>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport Download from 'vue-material-design-icons/Download'\nimport Folder from 'vue-material-design-icons/Folder'\nimport MenuDown from 'vue-material-design-icons/MenuDown'\nimport Plus from 'vue-material-design-icons/Plus'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant'\n\nexport default {\n\tcomponents: {\n\t\tDownload,\n\t\tFolder,\n\t\tMenuDown,\n\t\tPlus,\n\t\tShareVariant,\n\t},\n\tmethods: {\n\t\tdropped(e, path) {\n\t\t\talert('Global drop on ' + path)\n\t\t},\n\t\tdroppedOnCrumb(e, path) {\n\t\t\talert('Drop on crumb ' + path)\n\t\t},\n\t\tdragStart(e) {\n\t\t\te.dataTransfer.setData('text/plain', 'dragging')\n\t\t},\n\t}\n}\n</script>\n<style>\n.container {\n\tdisplay: inline-flex;\n\twidth: 100%;\n}\n\n.dragme {\n\tdisplay: block;\n\twidth: 100px;\n\theight: var(--default-clickable-area);\n\tbackground-color: var(--color-background-dark);\n}\n</style>\n```\n</docs>\n\n<script>\nimport { subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport debounce from 'debounce'\nimport { cloneVNode, Fragment, h } from 'vue'\nimport IconFolder from 'vue-material-design-icons/Folder.vue'\nimport { isSlotPopulated } from '../../utils/isSlotPopulated.ts'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcActionLink from '../NcActionLink/index.js'\nimport NcActionRouter from '../NcActionRouter/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcBreadcrumb from '../NcBreadcrumb/index.js'\n\nconst crumbClass = 'vue-crumb'\n\nexport default {\n\tname: 'NcBreadcrumbs',\n\tcomponents: {\n\t\tNcActions,\n\t\tNcActionButton,\n\t\tNcActionRouter,\n\t\tNcActionLink,\n\t\tNcBreadcrumb,\n\t\tIconFolder,\n\t},\n\n\tprops: {\n\t\t/*\n\t\t Set a css icon-class for the icon of the root breadcrumb to be used.\n\t\t /\n\t\trootIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: 'icon-home',\n\t\t},\n\n\t\t/\n\t\t Set the aria-label of the nav element.\n\t\t /\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: ['dropped'],\n\tdata() {\n\t\treturn {\n\t\t\t/\n\t\t\t Array to track the hidden breadcrumbs by their index.\n\t\t\t * Comparing two crumbs somehow does not work, so we use the indices.\n\t\t\t /\n\t\t\thiddenIndices: [],\n\n\t\t\t/\n\t\t\t This is the props of the middle Action menu\n\t\t\t * that show the ellipsised breadcrumbs\n\t\t\t /\n\t\t\tmenuBreadcrumbProps: {\n\t\t\t\t// Don't show a name for this breadcrumb, only the Actions menu\n\t\t\t\tname: '',\n\t\t\t\tforceMenu: true,\n\t\t\t\t// Don't allow dropping directly on the actions breadcrumb\n\t\t\t\tdisableDrop: true,\n\t\t\t\t// Is the menu open or not\n\t\t\t\topen: false,\n\t\t\t},\n\n\t\t\tbreadcrumbsRefs: [],\n\t\t}\n\t},\n\n\tcreated() {\n\t\t/\n\t\t Add a listener so the component reacts on resize\n\t\t /\n\t\twindow.addEventListener('resize', debounce(() => {\n\t\t\tthis.handleWindowResize()\n\t\t}, 100))\n\t\tsubscribe('navigation-toggled', this.delayedResize)\n\t},\n\n\tmounted() {\n\t\tthis.handleWindowResize()\n\t},\n\n\tupdated() {\n\t\t/\n\t\t Check the size on update\n\t\t /\n\t\tthis.delayedResize()\n\t\t/\n\t\t Check that crumbs to hide are hidden\n\t\t /\n\t\tthis.$nextTick(() => {\n\t\t\tthis.hideCrumbs()\n\t\t})\n\t},\n\n\tbeforeUnmount() {\n\t\twindow.removeEventListener('resize', this.handleWindowResize)\n\t\tunsubscribe('navigation-toggled', this.delayedResize)\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Close the actions menu\n\t\t \n\t\t @param {object} e The event\n\t\t /\n\t\tcloseActions(e) {\n\t\t\t// Don't do anything if we leave towards a child element.\n\t\t\tif (this.$refs.actionsBreadcrumb.$el.contains(e.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.menuBreadcrumbProps.open = false\n\t\t},\n\n\t\t/\n\t\t Call the resize function after a delay\n\t\t /\n\t\tasync delayedResize() {\n\t\t\tawait this.$nextTick()\n\t\t\tthis.handleWindowResize()\n\t\t},\n\n\t\t/\n\t\t Check the width of the breadcrumb and hide breadcrumbs\n\t\t * if we overflow otherwise.\n\t\t /\n\t\thandleWindowResize() {\n\t\t\t// If there is no container yet, we cannot determine its size\n\t\t\tif (!this.$refs.container) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst nrCrumbs = this.breadcrumbsRefs.length\n\t\t\tconst hiddenIndices = []\n\t\t\tconst availableWidth = this.$refs.container.offsetWidth\n\t\t\tlet totalWidth = this.getTotalWidth()\n\t\t\t// If we have breadcrumbs actions, we have to take their width into account too.\n\t\t\tif (this.$refs.breadcrumb__actions) {\n\t\t\t\ttotalWidth += this.$refs.breadcrumb__actions.offsetWidth\n\t\t\t}\n\t\t\tlet overflow = totalWidth - availableWidth\n\t\t\t// If we overflow, we have to take the action-item width into account as well.\n\t\t\toverflow += (overflow > 0) ? 64 : 0\n\t\t\tlet i = 0\n\t\t\t// We start hiding the breadcrumb in the center\n\t\t\tconst startIndex = Math.floor(nrCrumbs / 2)\n\t\t\t// Don't hide the first and last breadcrumb\n\t\t\twhile (overflow > 0 && i < nrCrumbs - 2) {\n\t\t\t\t// We hide elements alternating to the left and right\n\t\t\t\tconst currentIndex = startIndex + ((i % 2) ? i + 1 : i) / 2 Math.pow(-1, i + (nrCrumbs % 2))\n\t\t\t\t// Calculate the remaining overflow width after hiding this breadcrumb\n\t\t\t\toverflow -= this.getWidth(this.breadcrumbsRefs[currentIndex]?.$el, currentIndex === (this.breadcrumbsRefs.length - 1))\n\t\t\t\thiddenIndices.push(currentIndex)\n\t\t\t\ti++\n\t\t\t}\n\t\t\t// We only update the hidden crumbs if they have changed,\n\t\t\t// otherwise we will run into an infinite update loop.\n\t\t\tif (!this.arraysEqual(this.hiddenIndices, hiddenIndices.sort((a, b) => a - b))) {\n\t\t\t\tthis.hiddenIndices = hiddenIndices\n\t\t\t}\n\t\t},\n\n\t\t/*\n\t\t Checks if two arrays are equal.\n\t\t * Only works for primitive arrays, but that's enough here.\n\t\t \n\t\t @param {Array} a The first array\n\t\t * @param {Array} b The second array\n\t\t * @return {boolean} Wether the arrays are equal\n\t\t /\n\t\tarraysEqual(a, b) {\n\t\t\tif (a.length !== b.length) {\n\t\t\t\treturn false\n\t\t\t} else if (a === b) {\n\t\t\t\treturn true\n\t\t\t} else if (a === null \|\| b === null) {\n\t\t\t\treturn false\n\t\t\t}\n\n\t\t\tfor (let i = 0; i < a.length; ++i) {\n\t\t\t\tif (a[i] !== b[i]) {\n\t\t\t\t\treturn false\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn true\n\t\t},\n\n\t\t/\n\t\t Calculates the total width of all breadcrumbs\n\t\t \n\t\t @return {number} The total width\n\t\t /\n\t\tgetTotalWidth() {\n\t\t\treturn this.breadcrumbsRefs.reduce((width, crumb, index) => width + this.getWidth(crumb.$el, index === (this.breadcrumbsRefs.length - 1)), 0)\n\t\t},\n\n\t\t/\n\t\t Calculates the width of the provided element\n\t\t \n\t\t @param {object} el The element\n\t\t * @param {boolean} isLast Is this the last crumb\n\t\t * @return {number} The width\n\t\t /\n\t\tgetWidth(el, isLast) {\n\t\t\tif (!el?.classList) {\n\t\t\t\treturn 0\n\t\t\t}\n\n\t\t\tconst hide = el.classList.contains(`${crumbClass}--hidden`)\n\t\t\tel.style.minWidth = 'auto'\n\t\t\t// For the last crumb, we calculate with a max-width of 210px,\n\t\t\t// but don't set it in CSS to allow it to grow.\n\t\t\tif (isLast) {\n\t\t\t\tel.style.maxWidth = '210px'\n\t\t\t}\n\t\t\tel.classList.remove(`${crumbClass}--hidden`)\n\t\t\tconst w = el.offsetWidth\n\t\t\tif (hide) {\n\t\t\t\tel.classList.add(`${crumbClass}--hidden`)\n\t\t\t}\n\t\t\tel.style.minWidth = ''\n\t\t\tel.style.maxWidth = ''\n\t\t\treturn w\n\t\t},\n\n\t\t/\n\t\t Prevents the default of a provided event\n\t\t \n\t\t @param {object} e The event\n\t\t * @return {boolean}\n\t\t /\n\t\tpreventDefault(e) {\n\t\t\tif (e.preventDefault) {\n\t\t\t\te.preventDefault()\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\t/\n\t\t Handles the drag start.\n\t\t * Prevents a breadcrumb from being draggable.\n\t\t \n\t\t @param {object} e The event\n\t\t * @return {boolean}\n\t\t /\n\t\tdragStart(e) {\n\t\t\treturn this.preventDefault(e)\n\t\t},\n\n\t\t/\n\t\t Handles when something is dropped on the breadcrumb.\n\t\t \n\t\t @param {object} e The drop event\n\t\t * @param {string} path The path of the breadcrumb\n\t\t * @param {boolean} disabled Whether dropping is disabled for this breadcrumb\n\t\t * @return {boolean}\n\t\t /\n\t\tdropped(e, path, disabled) {\n\t\t\t/\n\t\t\t Don't emit if dropping is disabled.\n\t\t\t /\n\t\t\tif (!disabled) {\n\t\t\t\t/\n\t\t\t\t Event emitted when something is dropped on the breadcrumb.\n\t\t\t\t \n\t\t\t\t @param {Event} e the drop DOM event\n\t\t\t\t * @param {string} path The path of the breadcrumb\n\t\t\t\t /\n\t\t\t\tthis.$emit('dropped', e, path)\n\t\t\t}\n\t\t\t// Close the actions menu after the drop\n\t\t\tthis.menuBreadcrumbProps.open = false\n\n\t\t\t// Remove all hovering classes\n\t\t\tconst crumbs = document.querySelectorAll(`.${crumbClass}`)\n\t\t\tfor (const crumb of crumbs) {\n\t\t\t\tcrumb.classList.remove(`${crumbClass}--hovered`)\n\t\t\t}\n\t\t\treturn this.preventDefault(e)\n\t\t},\n\n\t\t/\n\t\t Handles the drag over event\n\t\t \n\t\t @param {object} e The drag over event\n\t\t * @return {boolean}\n\t\t /\n\t\tdragOver(e) {\n\t\t\treturn this.preventDefault(e)\n\t\t},\n\n\t\t/\n\t\t Handles the drag enter event\n\t\t \n\t\t @param {object} e The drag over event\n\t\t * @param {boolean} disabled Whether dropping is disabled for this breadcrumb\n\t\t /\n\t\tdragEnter(e, disabled) {\n\t\t\t/\n\t\t\t Don't do anything if dropping is disabled.\n\t\t\t /\n\t\t\tif (disabled) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Get the correct element, in case we hover a child.\n\t\t\tif (e.target.closest) {\n\t\t\t\tconst target = e.target.closest(`.${crumbClass}`)\n\t\t\t\tif (target.classList && target.classList.contains(crumbClass)) {\n\t\t\t\t\tconst crumbs = document.querySelectorAll(`.${crumbClass}`)\n\t\t\t\t\tfor (const crumb of crumbs) {\n\t\t\t\t\t\tcrumb.classList.remove(`${crumbClass}--hovered`)\n\t\t\t\t\t}\n\t\t\t\t\ttarget.classList.add(`${crumbClass}--hovered`)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Handles the drag leave event\n\t\t \n\t\t @param {object} e The drag leave event\n\t\t * @param {boolean} disabled Whether dropping is disabled for this breadcrumb\n\t\t /\n\t\tdragLeave(e, disabled) {\n\t\t\t/\n\t\t\t Don't do anything if dropping is disabled.\n\t\t\t /\n\t\t\tif (disabled) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Don't do anything if we leave towards a child element.\n\t\t\tif (e.target.contains(e.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Get the correct element, in case we leave directly from a child.\n\t\t\tif (e.target.closest) {\n\t\t\t\tconst target = e.target.closest(`.${crumbClass}`)\n\t\t\t\tif (target.contains(e.relatedTarget)) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tif (target.classList && target.classList.contains(crumbClass)) {\n\t\t\t\t\ttarget.classList.remove(`${crumbClass}--hovered`)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Check for each crumb if we have to hide it and\n\t\t * add it to the array of all crumbs.\n\t\t /\n\t\thideCrumbs() {\n\t\t\tthis.breadcrumbsRefs.forEach((crumb, i) => {\n\t\t\t\tif (crumb?.$el?.classList) {\n\t\t\t\t\tif (this.hiddenIndices.includes(i)) {\n\t\t\t\t\t\tcrumb.$el.classList.add(`${crumbClass}--hidden`)\n\t\t\t\t\t} else {\n\t\t\t\t\t\tcrumb.$el.classList.remove(`${crumbClass}--hidden`)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\n\t\tisBreadcrumb(vnode) {\n\t\t\treturn vnode?.type?.name === 'NcBreadcrumb'\n\t\t},\n\t},\n\n\t/\n\t The render function to display the component\n\t \n\t @return {object\|undefined} The created VNode\n\t /\n\trender() {\n\t\t// Get the breadcrumbs\n\t\tlet breadcrumbs = []\n\t\t// We have to iterate over all slot elements\n\t\tthis.$slots.default?.().forEach((vnode) => {\n\t\t\tif (this.isBreadcrumb(vnode)) {\n\t\t\t\tbreadcrumbs.push(vnode)\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// If we encounter a Fragment, we have to check its children too\n\t\t\tif (vnode?.type === Fragment) {\n\t\t\t\tvnode?.children?.forEach?.((child) => {\n\t\t\t\t\tif (this.isBreadcrumb(child)) {\n\t\t\t\t\t\tbreadcrumbs.push(child)\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\n\t\t// Check that we have at least one breadcrumb\n\t\tif (breadcrumbs.length === 0) {\n\t\t\treturn\n\t\t}\n\n\t\t// Add the root icon to the first breadcrumb\n\t\tbreadcrumbs[0] = cloneVNode(breadcrumbs[0], {\n\t\t\ticon: this.rootIcon,\n\t\t\tref: 'breadcrumbs',\n\t\t})\n\n\t\t/\n\t\t Use a proxy object to store breadcrumbs refs\n\t\t * and don't write to this.breadcrumbsRefs directly\n\t\t * to not trigger a myriad of re-renders.\n\t\t /\n\t\tconst breadcrumbsRefs = []\n\t\t// Add the breadcrumbs to the array of the created VNodes, check if hiding them is necessary.\n\t\tbreadcrumbs = breadcrumbs.map((crumb, index) => cloneVNode(crumb, {\n\t\t\tref: (crumb) => {\n\t\t\t\tbreadcrumbsRefs[index] = crumb\n\t\t\t},\n\t\t}))\n\n\t\t// The array of all created VNodes\n\t\tconst crumbs = [...breadcrumbs]\n\t\tif (this.hiddenIndices.length) {\n\t\t\t/\n\t\t\t We show the first half of the breadcrumbs before the Actions dropdown menu\n\t\t\t * which shows the hidden breadcrumbs.\n\t\t\t */\n\t\t\tcrumbs.splice(\n\t\t\t\tMath.round(breadcrumbs.length / 2), 0,\n\n\t\t\t\t// The Actions menu\n\t\t\t\t// Use a breadcrumb component for the hidden breadcrumbs\n\t\t\t\t// eslint-disable-line @stylistic/function-call-argument-newline\n\t\t\t\th(NcBreadcrumb, {\n\t\t\t\t\tclass: 'dropdown',\n\t\t\t\t\t...this.menuBreadcrumbProps,\n\t\t\t\t\t// Hide the dropdown menu from screen-readers,\n\t\t\t\t\t// since the crumbs in the menu are still in the list.\n\t\t\t\t\t'aria-hidden': true,\n\t\t\t\t\t// Add a ref to the Actions menu\n\t\t\t\t\tref: 'actionsBreadcrumb',\n\t\t\t\t\tkey: 'actions-breadcrumb-1',\n\t\t\t\t\t// Add handlers so the Actions menu opens on hover\n\t\t\t\t\tonDragenter: () => { this.menuBreadcrumbProps.open = true },\n\t\t\t\t\tonDragleave: this.closeActions,\n\t\t\t\t\t// Make sure we keep the same open state\n\t\t\t\t\t// as the Actions component\n\t\t\t\t\t'onUpdate:open': (open) => {\n\t\t\t\t\t\tthis.menuBreadcrumbProps.open = open\n\t\t\t\t\t},\n\t\t\t\t// Add all hidden breadcrumbs as ActionRouter or ActionLink\n\t\t\t\t}, {\n\t\t\t\t\tdefault: () => this.hiddenIndices.filter((index) => index <= breadcrumbs.length - 1).map((index) => {\n\t\t\t\t\t\tconst crumb = breadcrumbs[index]\n\t\t\t\t\t\tconst {\n\t\t\t\t\t\t\t// Get the parameters from the breadcrumb component props\n\t\t\t\t\t\t\tto,\n\t\t\t\t\t\t\thref,\n\t\t\t\t\t\t\tdisableDrop,\n\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t// Props to forward\n\t\t\t\t\t\t\t...propsToForward\n\t\t\t\t\t\t} = crumb.props\n\t\t\t\t\t\t// Do not forward the ref, otherwise it will be null if the hidden crumb gets destroyed\n\t\t\t\t\t\tdelete propsToForward.ref\n\n\t\t\t\t\t\t// Decide whether to show the breadcrumbs as ActionButton, ActionRouter or ActionLink\n\t\t\t\t\t\tlet element = NcActionButton\n\t\t\t\t\t\tlet path = ''\n\t\t\t\t\t\tif (href) {\n\t\t\t\t\t\t\telement = NcActionLink\n\t\t\t\t\t\t\tpath = href\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (to) {\n\t\t\t\t\t\t\telement = NcActionRouter\n\t\t\t\t\t\t\tpath = to\n\t\t\t\t\t\t}\n\t\t\t\t\t\tconst folderIcon = h(IconFolder, {\n\t\t\t\t\t\t\tsize: 20,\n\t\t\t\t\t\t})\n\t\t\t\t\t\treturn h(element, {\n\t\t\t\t\t\t\t...propsToForward,\n\t\t\t\t\t\t\tclass: crumbClass,\n\t\t\t\t\t\t\thref: href \|\| null,\n\t\t\t\t\t\t\tto: to \|\| null,\n\t\t\t\t\t\t\t// Prevent the breadcrumbs from being draggable\n\t\t\t\t\t\t\tdraggable: false,\n\t\t\t\t\t\t\t// Add the drag and drop handlers\n\t\t\t\t\t\t\tonDragstart: this.dragStart,\n\t\t\t\t\t\t\tonDrop: ($event) => this.dropped($event, path, disableDrop),\n\t\t\t\t\t\t\tonDragover: this.dragOver,\n\t\t\t\t\t\t\tonDragenter: ($event) => this.dragEnter($event, disableDrop),\n\t\t\t\t\t\t\tonDragleave: ($event) => this.dragLeave($event, disableDrop),\n\t\t\t\t\t\t}, {\n\t\t\t\t\t\t\tdefault: () => name,\n\t\t\t\t\t\t\ticon: () => folderIcon,\n\t\t\t\t\t\t})\n\t\t\t\t\t}),\n\t\t\t\t}),\n\t\t\t)\n\t\t}\n\n\t\tconst wrapper = [h('nav', { 'aria-label': this.ariaLabel }, [h('ul', { class: 'breadcrumb__crumbs' }, [crumbs])])]\n\t\t// Append the actions slot if it is populated\n\t\tif (isSlotPopulated(this.$slots.actions?.())) {\n\t\t\twrapper.push(h('div', { class: 'breadcrumb__actions', ref: 'breadcrumb__actions' }, this.$slots.actions?.()))\n\t\t}\n\n\t\tthis.breadcrumbsRefs = breadcrumbsRefs\n\n\t\treturn h('div', { class: ['breadcrumb', { 'breadcrumb--collapsed': (this.hiddenIndices.length === breadcrumbs.length - 2) }], ref: 'container' }, wrapper)\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.breadcrumb {\n\twidth: 100%;\n\tflex-grow: 1;\n\tdisplay: inline-flex;\n\talign-items: center;\n\n\t&--collapsed :deep(.vue-crumb:last-child) {\n\t\tmin-width: 100px;\n\t}\n\n\tnav {\n\t\tflex-shrink: 1;\n\t\tmin-width: 0;\n\t}\n\n\t& #{&}__crumbs {\n\t\tmax-width: 100%;\n\t}\n\n\t& #{&}__crumbs,\n\t& #{&}__actions {\n\t\tdisplay: inline-flex;\n\t}\n}\n</style>\n"],"names":["_sfc_main","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","crumb"],"mappings":"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","x_google_ignoreList":[0]}
1	+ {"version":3,"file":"NcBreadcrumbs-CbJmdlaF.mjs","sources":["../../node_modules/vue-material-design-icons/Folder.vue","../../src/components/NcBreadcrumbs/NcBreadcrumbs.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon folder-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"FolderIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<!--\n - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component renders a breadcrumb bar. It adjusts to the available width\nby hiding breadcrumbs in a dropdown menu and emits an event when something\nis dropped on a creadcrumb.\n\n### Usage\n\n```vue\n<template>\n\t<div>\n\t\t<div class=\"container\">\n\t\t\t<NcBreadcrumbs @dropped=\"dropped\">\n\t\t\t\t<NcBreadcrumb name=\"Home\"\n\t\t\t\t\ttitle=\"Title of the Home folder\"\n\t\t\t\t\thref=\"/\"\n\t\t\t\t\t@dropped=\"droppedOnCrumb\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Folder :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcBreadcrumb>\n\t\t\t\t<NcBreadcrumb name=\"Folder 1\"\n\t\t\t\t\ttitle=\"Folder 1\"\n\t\t\t\t\thref=\"/Folder 1\" />\n\t\t\t\t<NcBreadcrumb name=\"Folder 2\"\n\t\t\t\t\thref=\"/Folder 1/Folder 2\"\n\t\t\t\t\t:disable-drop=\"true\" />\n\t\t\t\t<NcBreadcrumb name=\"Folder 3\"\n\t\t\t\t\ttitle=\"Folder 3\"\n\t\t\t\t\thref=\"/Folder 1/Folder 2/Folder 3\" />\n\t\t\t\t<NcBreadcrumb name=\"Folder 4\"\n\t\t\t\t\ttitle=\"Folder 4\"\n\t\t\t\t\thref=\"/Folder 1/Folder 2/Folder 3/Folder 4\" />\n\t\t\t\t<NcBreadcrumb name=\"Folder 5 with an overflowing long name\"\n\t\t\t\t\ttitle=\"Folder 5\"\n\t\t\t\t\thref=\"/Folder 1/Folder 2/Folder 3/Folder 4/Folder 5\"\n\t\t\t\t\t:disable-drop=\"true\">\n\t\t\t\t\t<template #menu-icon>\n\t\t\t\t\t\t<MenuDown :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t<NcActionButton @click=\"alert('Share')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tShare\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton @click=\"alert('Download')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Download :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDownload\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</NcBreadcrumb>\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tNew\n\t\t\t\t\t</NcButton>\n\t\t\t\t</template>\n\t\t\t</NcBreadcrumbs>\n\t\t</div>\n\t\t<br />\n\t\t<div class=\"dragme\" draggable=\"true\" @dragstart=\"dragStart\">\n\t\t\t<span>Drag me onto the breadcrumbs.</span>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport Download from 'vue-material-design-icons/Download'\nimport Folder from 'vue-material-design-icons/Folder'\nimport MenuDown from 'vue-material-design-icons/MenuDown'\nimport Plus from 'vue-material-design-icons/Plus'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant'\n\nexport default {\n\tcomponents: {\n\t\tDownload,\n\t\tFolder,\n\t\tMenuDown,\n\t\tPlus,\n\t\tShareVariant,\n\t},\n\tmethods: {\n\t\tdropped(e, path) {\n\t\t\talert('Global drop on ' + path)\n\t\t},\n\t\tdroppedOnCrumb(e, path) {\n\t\t\talert('Drop on crumb ' + path)\n\t\t},\n\t\tdragStart(e) {\n\t\t\te.dataTransfer.setData('text/plain', 'dragging')\n\t\t},\n\t}\n}\n</script>\n<style>\n.container {\n\tdisplay: inline-flex;\n\twidth: 100%;\n}\n\n.dragme {\n\tdisplay: block;\n\twidth: 100px;\n\theight: var(--default-clickable-area);\n\tbackground-color: var(--color-background-dark);\n}\n</style>\n```\n</docs>\n\n<script>\nimport { subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport debounce from 'debounce'\nimport { cloneVNode, Fragment, h } from 'vue'\nimport IconFolder from 'vue-material-design-icons/Folder.vue'\nimport { isSlotPopulated } from '../../utils/isSlotPopulated.ts'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcActionLink from '../NcActionLink/index.js'\nimport NcActionRouter from '../NcActionRouter/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcBreadcrumb from '../NcBreadcrumb/index.js'\n\nconst crumbClass = 'vue-crumb'\n\nexport default {\n\tname: 'NcBreadcrumbs',\n\tcomponents: {\n\t\tNcActions,\n\t\tNcActionButton,\n\t\tNcActionRouter,\n\t\tNcActionLink,\n\t\tNcBreadcrumb,\n\t\tIconFolder,\n\t},\n\n\tprops: {\n\t\t/*\n\t\t Set a css icon-class for the icon of the root breadcrumb to be used.\n\t\t /\n\t\trootIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: 'icon-home',\n\t\t},\n\n\t\t/\n\t\t Set the aria-label of the nav element.\n\t\t /\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: ['dropped'],\n\tdata() {\n\t\treturn {\n\t\t\t/\n\t\t\t Array to track the hidden breadcrumbs by their index.\n\t\t\t * Comparing two crumbs somehow does not work, so we use the indices.\n\t\t\t /\n\t\t\thiddenIndices: [],\n\n\t\t\t/\n\t\t\t This is the props of the middle Action menu\n\t\t\t * that show the ellipsised breadcrumbs\n\t\t\t /\n\t\t\tmenuBreadcrumbProps: {\n\t\t\t\t// Don't show a name for this breadcrumb, only the Actions menu\n\t\t\t\tname: '',\n\t\t\t\tforceMenu: true,\n\t\t\t\t// Don't allow dropping directly on the actions breadcrumb\n\t\t\t\tdisableDrop: true,\n\t\t\t\t// Is the menu open or not\n\t\t\t\topen: false,\n\t\t\t},\n\n\t\t\tbreadcrumbsRefs: [],\n\t\t}\n\t},\n\n\tcreated() {\n\t\t/\n\t\t Add a listener so the component reacts on resize\n\t\t /\n\t\twindow.addEventListener('resize', debounce(() => {\n\t\t\tthis.handleWindowResize()\n\t\t}, 100))\n\t\tsubscribe('navigation-toggled', this.delayedResize)\n\t},\n\n\tmounted() {\n\t\tthis.handleWindowResize()\n\t},\n\n\tupdated() {\n\t\t/\n\t\t Check the size on update\n\t\t /\n\t\tthis.delayedResize()\n\t\t/\n\t\t Check that crumbs to hide are hidden\n\t\t /\n\t\tthis.$nextTick(() => {\n\t\t\tthis.hideCrumbs()\n\t\t})\n\t},\n\n\tbeforeUnmount() {\n\t\twindow.removeEventListener('resize', this.handleWindowResize)\n\t\tunsubscribe('navigation-toggled', this.delayedResize)\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Close the actions menu\n\t\t \n\t\t @param {object} e The event\n\t\t /\n\t\tcloseActions(e) {\n\t\t\t// Don't do anything if we leave towards a child element.\n\t\t\tif (this.$refs.actionsBreadcrumb.$el.contains(e.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.menuBreadcrumbProps.open = false\n\t\t},\n\n\t\t/\n\t\t Call the resize function after a delay\n\t\t /\n\t\tasync delayedResize() {\n\t\t\tawait this.$nextTick()\n\t\t\tthis.handleWindowResize()\n\t\t},\n\n\t\t/\n\t\t Check the width of the breadcrumb and hide breadcrumbs\n\t\t * if we overflow otherwise.\n\t\t /\n\t\thandleWindowResize() {\n\t\t\t// If there is no container yet, we cannot determine its size\n\t\t\tif (!this.$refs.container) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst nrCrumbs = this.breadcrumbsRefs.length\n\t\t\tconst hiddenIndices = []\n\t\t\tconst availableWidth = this.$refs.container.offsetWidth\n\t\t\tlet totalWidth = this.getTotalWidth()\n\t\t\t// If we have breadcrumbs actions, we have to take their width into account too.\n\t\t\tif (this.$refs.breadcrumb__actions) {\n\t\t\t\ttotalWidth += this.$refs.breadcrumb__actions.offsetWidth\n\t\t\t}\n\t\t\tlet overflow = totalWidth - availableWidth\n\t\t\t// If we overflow, we have to take the action-item width into account as well.\n\t\t\toverflow += (overflow > 0) ? 64 : 0\n\t\t\tlet i = 0\n\t\t\t// We start hiding the breadcrumb in the center\n\t\t\tconst startIndex = Math.floor(nrCrumbs / 2)\n\t\t\t// Don't hide the first and last breadcrumb\n\t\t\twhile (overflow > 0 && i < nrCrumbs - 2) {\n\t\t\t\t// We hide elements alternating to the left and right\n\t\t\t\tconst currentIndex = startIndex + ((i % 2) ? i + 1 : i) / 2 Math.pow(-1, i + (nrCrumbs % 2))\n\t\t\t\t// Calculate the remaining overflow width after hiding this breadcrumb\n\t\t\t\toverflow -= this.getWidth(this.breadcrumbsRefs[currentIndex]?.$el, currentIndex === (this.breadcrumbsRefs.length - 1))\n\t\t\t\thiddenIndices.push(currentIndex)\n\t\t\t\ti++\n\t\t\t}\n\t\t\t// We only update the hidden crumbs if they have changed,\n\t\t\t// otherwise we will run into an infinite update loop.\n\t\t\tif (!this.arraysEqual(this.hiddenIndices, hiddenIndices.sort((a, b) => a - b))) {\n\t\t\t\tthis.hiddenIndices = hiddenIndices\n\t\t\t}\n\t\t},\n\n\t\t/*\n\t\t Checks if two arrays are equal.\n\t\t * Only works for primitive arrays, but that's enough here.\n\t\t \n\t\t @param {Array} a The first array\n\t\t * @param {Array} b The second array\n\t\t * @return {boolean} Wether the arrays are equal\n\t\t /\n\t\tarraysEqual(a, b) {\n\t\t\tif (a.length !== b.length) {\n\t\t\t\treturn false\n\t\t\t} else if (a === b) {\n\t\t\t\treturn true\n\t\t\t} else if (a === null \|\| b === null) {\n\t\t\t\treturn false\n\t\t\t}\n\n\t\t\tfor (let i = 0; i < a.length; ++i) {\n\t\t\t\tif (a[i] !== b[i]) {\n\t\t\t\t\treturn false\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn true\n\t\t},\n\n\t\t/\n\t\t Calculates the total width of all breadcrumbs\n\t\t \n\t\t @return {number} The total width\n\t\t /\n\t\tgetTotalWidth() {\n\t\t\treturn this.breadcrumbsRefs.reduce((width, crumb, index) => width + this.getWidth(crumb.$el, index === (this.breadcrumbsRefs.length - 1)), 0)\n\t\t},\n\n\t\t/\n\t\t Calculates the width of the provided element\n\t\t \n\t\t @param {object} el The element\n\t\t * @param {boolean} isLast Is this the last crumb\n\t\t * @return {number} The width\n\t\t /\n\t\tgetWidth(el, isLast) {\n\t\t\tif (!el?.classList) {\n\t\t\t\treturn 0\n\t\t\t}\n\n\t\t\tconst hide = el.classList.contains(`${crumbClass}--hidden`)\n\t\t\tel.style.minWidth = 'auto'\n\t\t\t// For the last crumb, we calculate with a max-width of 210px,\n\t\t\t// but don't set it in CSS to allow it to grow.\n\t\t\tif (isLast) {\n\t\t\t\tel.style.maxWidth = '210px'\n\t\t\t}\n\t\t\tel.classList.remove(`${crumbClass}--hidden`)\n\t\t\tconst w = el.offsetWidth\n\t\t\tif (hide) {\n\t\t\t\tel.classList.add(`${crumbClass}--hidden`)\n\t\t\t}\n\t\t\tel.style.minWidth = ''\n\t\t\tel.style.maxWidth = ''\n\t\t\treturn w\n\t\t},\n\n\t\t/\n\t\t Prevents the default of a provided event\n\t\t \n\t\t @param {object} e The event\n\t\t * @return {boolean}\n\t\t /\n\t\tpreventDefault(e) {\n\t\t\tif (e.preventDefault) {\n\t\t\t\te.preventDefault()\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\t/\n\t\t Handles the drag start.\n\t\t * Prevents a breadcrumb from being draggable.\n\t\t \n\t\t @param {object} e The event\n\t\t * @return {boolean}\n\t\t /\n\t\tdragStart(e) {\n\t\t\treturn this.preventDefault(e)\n\t\t},\n\n\t\t/\n\t\t Handles when something is dropped on the breadcrumb.\n\t\t \n\t\t @param {object} e The drop event\n\t\t * @param {string} path The path of the breadcrumb\n\t\t * @param {boolean} disabled Whether dropping is disabled for this breadcrumb\n\t\t * @return {boolean}\n\t\t /\n\t\tdropped(e, path, disabled) {\n\t\t\t/\n\t\t\t Don't emit if dropping is disabled.\n\t\t\t /\n\t\t\tif (!disabled) {\n\t\t\t\t/\n\t\t\t\t Event emitted when something is dropped on the breadcrumb.\n\t\t\t\t \n\t\t\t\t @param {Event} e the drop DOM event\n\t\t\t\t * @param {string} path The path of the breadcrumb\n\t\t\t\t /\n\t\t\t\tthis.$emit('dropped', e, path)\n\t\t\t}\n\t\t\t// Close the actions menu after the drop\n\t\t\tthis.menuBreadcrumbProps.open = false\n\n\t\t\t// Remove all hovering classes\n\t\t\tconst crumbs = document.querySelectorAll(`.${crumbClass}`)\n\t\t\tfor (const crumb of crumbs) {\n\t\t\t\tcrumb.classList.remove(`${crumbClass}--hovered`)\n\t\t\t}\n\t\t\treturn this.preventDefault(e)\n\t\t},\n\n\t\t/\n\t\t Handles the drag over event\n\t\t \n\t\t @param {object} e The drag over event\n\t\t * @return {boolean}\n\t\t /\n\t\tdragOver(e) {\n\t\t\treturn this.preventDefault(e)\n\t\t},\n\n\t\t/\n\t\t Handles the drag enter event\n\t\t \n\t\t @param {object} e The drag over event\n\t\t * @param {boolean} disabled Whether dropping is disabled for this breadcrumb\n\t\t /\n\t\tdragEnter(e, disabled) {\n\t\t\t/\n\t\t\t Don't do anything if dropping is disabled.\n\t\t\t /\n\t\t\tif (disabled) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Get the correct element, in case we hover a child.\n\t\t\tif (e.target.closest) {\n\t\t\t\tconst target = e.target.closest(`.${crumbClass}`)\n\t\t\t\tif (target.classList && target.classList.contains(crumbClass)) {\n\t\t\t\t\tconst crumbs = document.querySelectorAll(`.${crumbClass}`)\n\t\t\t\t\tfor (const crumb of crumbs) {\n\t\t\t\t\t\tcrumb.classList.remove(`${crumbClass}--hovered`)\n\t\t\t\t\t}\n\t\t\t\t\ttarget.classList.add(`${crumbClass}--hovered`)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Handles the drag leave event\n\t\t \n\t\t @param {object} e The drag leave event\n\t\t * @param {boolean} disabled Whether dropping is disabled for this breadcrumb\n\t\t /\n\t\tdragLeave(e, disabled) {\n\t\t\t/\n\t\t\t Don't do anything if dropping is disabled.\n\t\t\t /\n\t\t\tif (disabled) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Don't do anything if we leave towards a child element.\n\t\t\tif (e.target.contains(e.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Get the correct element, in case we leave directly from a child.\n\t\t\tif (e.target.closest) {\n\t\t\t\tconst target = e.target.closest(`.${crumbClass}`)\n\t\t\t\tif (target.contains(e.relatedTarget)) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tif (target.classList && target.classList.contains(crumbClass)) {\n\t\t\t\t\ttarget.classList.remove(`${crumbClass}--hovered`)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Check for each crumb if we have to hide it and\n\t\t * add it to the array of all crumbs.\n\t\t /\n\t\thideCrumbs() {\n\t\t\tthis.breadcrumbsRefs.forEach((crumb, i) => {\n\t\t\t\tif (crumb?.$el?.classList) {\n\t\t\t\t\tif (this.hiddenIndices.includes(i)) {\n\t\t\t\t\t\tcrumb.$el.classList.add(`${crumbClass}--hidden`)\n\t\t\t\t\t} else {\n\t\t\t\t\t\tcrumb.$el.classList.remove(`${crumbClass}--hidden`)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\n\t\tisBreadcrumb(vnode) {\n\t\t\treturn vnode?.type?.name === 'NcBreadcrumb'\n\t\t},\n\t},\n\n\t/\n\t The render function to display the component\n\t \n\t @return {object\|undefined} The created VNode\n\t /\n\trender() {\n\t\t// Get the breadcrumbs\n\t\tlet breadcrumbs = []\n\t\t// We have to iterate over all slot elements\n\t\tthis.$slots.default?.().forEach((vnode) => {\n\t\t\tif (this.isBreadcrumb(vnode)) {\n\t\t\t\tbreadcrumbs.push(vnode)\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// If we encounter a Fragment, we have to check its children too\n\t\t\tif (vnode?.type === Fragment) {\n\t\t\t\tvnode?.children?.forEach?.((child) => {\n\t\t\t\t\tif (this.isBreadcrumb(child)) {\n\t\t\t\t\t\tbreadcrumbs.push(child)\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\n\t\t// Check that we have at least one breadcrumb\n\t\tif (breadcrumbs.length === 0) {\n\t\t\treturn\n\t\t}\n\n\t\t// Add the root icon to the first breadcrumb\n\t\tbreadcrumbs[0] = cloneVNode(breadcrumbs[0], {\n\t\t\ticon: this.rootIcon,\n\t\t\tref: 'breadcrumbs',\n\t\t})\n\n\t\t/\n\t\t Use a proxy object to store breadcrumbs refs\n\t\t * and don't write to this.breadcrumbsRefs directly\n\t\t * to not trigger a myriad of re-renders.\n\t\t /\n\t\tconst breadcrumbsRefs = []\n\t\t// Add the breadcrumbs to the array of the created VNodes, check if hiding them is necessary.\n\t\tbreadcrumbs = breadcrumbs.map((crumb, index) => cloneVNode(crumb, {\n\t\t\tref: (crumb) => {\n\t\t\t\tbreadcrumbsRefs[index] = crumb\n\t\t\t},\n\t\t}))\n\n\t\t// The array of all created VNodes\n\t\tconst crumbs = [...breadcrumbs]\n\t\tif (this.hiddenIndices.length) {\n\t\t\t/\n\t\t\t We show the first half of the breadcrumbs before the Actions dropdown menu\n\t\t\t * which shows the hidden breadcrumbs.\n\t\t\t */\n\t\t\tcrumbs.splice(\n\t\t\t\tMath.round(breadcrumbs.length / 2), 0,\n\n\t\t\t\t// The Actions menu\n\t\t\t\t// Use a breadcrumb component for the hidden breadcrumbs\n\t\t\t\t// eslint-disable-line @stylistic/function-call-argument-newline\n\t\t\t\th(NcBreadcrumb, {\n\t\t\t\t\tclass: 'dropdown',\n\t\t\t\t\t...this.menuBreadcrumbProps,\n\t\t\t\t\t// Hide the dropdown menu from screen-readers,\n\t\t\t\t\t// since the crumbs in the menu are still in the list.\n\t\t\t\t\t'aria-hidden': true,\n\t\t\t\t\t// Add a ref to the Actions menu\n\t\t\t\t\tref: 'actionsBreadcrumb',\n\t\t\t\t\tkey: 'actions-breadcrumb-1',\n\t\t\t\t\t// Add handlers so the Actions menu opens on hover\n\t\t\t\t\tonDragenter: () => { this.menuBreadcrumbProps.open = true },\n\t\t\t\t\tonDragleave: this.closeActions,\n\t\t\t\t\t// Make sure we keep the same open state\n\t\t\t\t\t// as the Actions component\n\t\t\t\t\t'onUpdate:open': (open) => {\n\t\t\t\t\t\tthis.menuBreadcrumbProps.open = open\n\t\t\t\t\t},\n\t\t\t\t// Add all hidden breadcrumbs as ActionRouter or ActionLink\n\t\t\t\t}, {\n\t\t\t\t\tdefault: () => this.hiddenIndices.filter((index) => index <= breadcrumbs.length - 1).map((index) => {\n\t\t\t\t\t\tconst crumb = breadcrumbs[index]\n\t\t\t\t\t\tconst {\n\t\t\t\t\t\t\t// Get the parameters from the breadcrumb component props\n\t\t\t\t\t\t\tto,\n\t\t\t\t\t\t\thref,\n\t\t\t\t\t\t\tdisableDrop,\n\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t// Props to forward\n\t\t\t\t\t\t\t...propsToForward\n\t\t\t\t\t\t} = crumb.props\n\t\t\t\t\t\t// Do not forward the ref, otherwise it will be null if the hidden crumb gets destroyed\n\t\t\t\t\t\tdelete propsToForward.ref\n\n\t\t\t\t\t\t// Decide whether to show the breadcrumbs as ActionButton, ActionRouter or ActionLink\n\t\t\t\t\t\tlet element = NcActionButton\n\t\t\t\t\t\tlet path = ''\n\t\t\t\t\t\tif (href) {\n\t\t\t\t\t\t\telement = NcActionLink\n\t\t\t\t\t\t\tpath = href\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (to) {\n\t\t\t\t\t\t\telement = NcActionRouter\n\t\t\t\t\t\t\tpath = to\n\t\t\t\t\t\t}\n\t\t\t\t\t\tconst folderIcon = h(IconFolder, {\n\t\t\t\t\t\t\tsize: 20,\n\t\t\t\t\t\t})\n\t\t\t\t\t\treturn h(element, {\n\t\t\t\t\t\t\t...propsToForward,\n\t\t\t\t\t\t\tclass: crumbClass,\n\t\t\t\t\t\t\thref: href \|\| null,\n\t\t\t\t\t\t\tto: to \|\| null,\n\t\t\t\t\t\t\t// Prevent the breadcrumbs from being draggable\n\t\t\t\t\t\t\tdraggable: false,\n\t\t\t\t\t\t\t// Add the drag and drop handlers\n\t\t\t\t\t\t\tonDragstart: this.dragStart,\n\t\t\t\t\t\t\tonDrop: ($event) => this.dropped($event, path, disableDrop),\n\t\t\t\t\t\t\tonDragover: this.dragOver,\n\t\t\t\t\t\t\tonDragenter: ($event) => this.dragEnter($event, disableDrop),\n\t\t\t\t\t\t\tonDragleave: ($event) => this.dragLeave($event, disableDrop),\n\t\t\t\t\t\t}, {\n\t\t\t\t\t\t\tdefault: () => name,\n\t\t\t\t\t\t\ticon: () => folderIcon,\n\t\t\t\t\t\t})\n\t\t\t\t\t}),\n\t\t\t\t}),\n\t\t\t)\n\t\t}\n\n\t\tconst wrapper = [h('nav', { 'aria-label': this.ariaLabel }, [h('ul', { class: 'breadcrumb__crumbs' }, [crumbs])])]\n\t\t// Append the actions slot if it is populated\n\t\tif (isSlotPopulated(this.$slots.actions?.())) {\n\t\t\twrapper.push(h('div', { class: 'breadcrumb__actions', ref: 'breadcrumb__actions' }, this.$slots.actions?.()))\n\t\t}\n\n\t\tthis.breadcrumbsRefs = breadcrumbsRefs\n\n\t\treturn h('div', { class: ['breadcrumb', { 'breadcrumb--collapsed': (this.hiddenIndices.length === breadcrumbs.length - 2) }], ref: 'container' }, wrapper)\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.breadcrumb {\n\twidth: 100%;\n\tflex-grow: 1;\n\tdisplay: inline-flex;\n\talign-items: center;\n\n\t&--collapsed :deep(.vue-crumb:last-child) {\n\t\tmin-width: 100px;\n\t}\n\n\tnav {\n\t\tflex-shrink: 1;\n\t\tmin-width: 0;\n\t}\n\n\t& #{&}__crumbs {\n\t\tmax-width: 100%;\n\t}\n\n\t& #{&}__crumbs,\n\t& #{&}__actions {\n\t\tdisplay: inline-flex;\n\t}\n}\n</style>\n"],"names":["_sfc_main","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","crumb"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/chunks/{NcChip-QHPd3nMF.mjs → NcChip-B8jcrLqG.mjs} RENAMED Viewed

@@ -1,7 +1,7 @@
 import '../assets/NcChip-DZ8dUSFy.css';
 import { defineComponent, useSlots, computed, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, createBlock, renderSlot, createTextVNode, toDisplayString, withCtx, createVNode, unref } from "vue";
-import { b as mdiClose } from "./mdi-DvQxv1t7.mjs";
-import { N as NcActionButton } from "./NcActionButton-BHXE4UKQ.mjs";
+import { b as mdiClose } from "./mdi-CpchYUUV.mjs";
+import { N as NcActionButton } from "./NcActionButton-DNXoAooH.mjs";
 import { N as NcActions } from "./NcActions-4R7icatI.mjs";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.mjs";
 import { r as register, A as t19, a as t } from "./_l10n-CgsPi8nC.mjs";
@@ -91,4 +91,4 @@ const NcChip = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2aa
 export {
   NcChip as N
 };
-//# sourceMappingURL=NcChip-QHPd3nMF.mjs.map
+//# sourceMappingURL=NcChip-B8jcrLqG.mjs.map

package/dist/chunks/{NcChip-QHPd3nMF.mjs.map → NcChip-B8jcrLqG.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcChip-~~QHPd3nMF~~.mjs","sources":["../../src/components/NcChip/NcChip.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n<docs>\n### Basic usage\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 8px; flex-wrap: wrap;\">\n\t\t<NcChip text=\"Notes.txt\" />\n\t\t<NcChip text=\"Files\" :icon-path=\"mdiFileOutline\" />\n\t\t<NcChip text=\"Color\" :icon-path=\"mdiPaletteOutline\" variant=\"tertiary\" />\n\t\t<NcChip text=\"Current time\" :icon-path=\"mdiClock\" no-close variant=\"primary\" />\n\t\t<NcChip text=\"Canceled\" :icon-path=\"mdiCancel\" variant=\"error\" no-close />\n\t\t<NcChip text=\"Open\" :icon-path=\"mdiCircleOutline\" variant=\"success\" no-close />\n\t\t<NcChip text=\"Due tomorrow\" :icon-path=\"mdiAlertCircleOutline\" variant=\"warning\" no-close />\n\t</div>\n</template>\n<script>\nimport { mdiClock, mdiFileOutline, mdiPaletteOutline, mdiCancel, mdiCircleOutline, mdiAlertCircleOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiAlertCircleOutline,\n\t\t\tmdiCancel,\n\t\t\tmdiCircleOutline,\n\t\t\tmdiClock,\n\t\t\tmdiFileOutline,\n\t\t\tmdiPaletteOutline,\n\t\t}\n\t}\n}\n</script>\n```\n\n### Advanced usage\n\nIt is also possible to use custom components for the icon by using the `icon` slot.\nIn this example we are using the `NcAvatar` component to render the users avatar as the icon.\n\nHint: If you use round icons like avatars you should set their size to `24px` (or use CSS variable `--chip-size`) to make them fully fill and align with the the chip\n\nAlso it is possible to pass custom actions.\n\n```vue\n<template>\n\t<NcChip>\n\t\t<!-- The icon slot allow to use custom components as the chip icon -->\n\t\t<template #icon>\n\t\t\t<NcAvatar :size=\"24\" user=\"jdoe\" display-name=\"J. Doe\" />\n\t\t</template>\n\t\t<!-- The actions slot allows to add custom actions -->\n\t\t<template #actions>\n\t\t\t<NcActionButton>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ContactsIcon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd to contacts\n\t\t\t</NcActionButton>\n\t\t</template>\n\t\t<!-- The default slot can be used for add content, just like the `text` prop -->\n\t\tJ. Doe\n\t</NcChip>\n</template>\n<script>\nimport ContactsIcon from 'vue-material-design-icons/Contacts.vue'\nexport default {\n\tcomponents: {\n\t\tContactsIcon,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div\n\t\tclass=\"nc-chip\"\n\t\t:class=\"{\n\t\t\t[`nc-chip--${variant}`]: true,\n\t\t\t'nc-chip--no-actions': noClose && !hasActions(),\n\t\t\t'nc-chip--no-icon': !hasIcon(),\n\t\t}\">\n\t\t<span v-if=\"hasIcon()\" class=\"nc-chip__icon\">\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<!-- The default icon wrapper uses a size of 18px to ensure the icon is not clipped by the round chip style -->\n\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\tv-if=\"iconPath \|\| iconSvg\"\n\t\t\t\t\tinline\n\t\t\t\t\t:path=\"iconPath\"\n\t\t\t\t\t:svg=\"iconPath ? undefined : iconSvg\"\n\t\t\t\t\t:size=\"18\" />\n\t\t\t</slot>\n\t\t</span>\n\t\t<span class=\"nc-chip__text\">\n\t\t\t<slot>{{ text }}</slot>\n\t\t</span>\n\t\t<NcActions\n\t\t\tv-if=\"canClose \|\| hasActions()\"\n\t\t\tclass=\"nc-chip__actions\"\n\t\t\t:container=\"actionsContainer\"\n\t\t\t:force-menu=\"!canClose\"\n\t\t\tvariant=\"tertiary-no-background\">\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"canClose\"\n\t\t\t\tclose-after-click\n\t\t\t\t@click=\"emit('close')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiClose\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ ariaLabelClose }}\n\t\t\t</NcActionButton>\n\t\t\t<slot name=\"actions\" />\n\t\t</NcActions>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { mdiClose } from '@mdi/js'\nimport { computed } from 'vue'\nimport NcActionButton from '../NcActionButton/NcActionButton.vue'\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { t } from '../../l10n.ts'\n\nconst props = withDefaults(defineProps<{\n\t/*\n\t aria label to set on the close button\n\t \n\t @default 'Close'\n\t /\n\tariaLabelClose?: string\n\n\t/\n\t Container for the actions\n\t /\n\tactionsContainer?: string\n\n\t/\n\t Main text of the chip.\n\t /\n\ttext?: string\n\n\t/\n\t SVG path of the icon to use, this takes precedence over `iconSVG`.\n\t * For example icon paths from `@mdi/js` can be used.\n\t /\n\ticonPath?: string\n\n\t/\n\t Inline SVG to use as the icon\n\t /\n\ticonSvg?: string\n\n\t/\n\t Set to true to prevent the close button to be shown\n\t /\n\tnoClose?: boolean\n\n\t/\n\t Set the chips design variant-\n\t \n\t This sets the background style of the chip, similar to NcButton's `variant`.\n\t \n\t @default 'secondary'\n\t * @since 8.23.0\n\t /\n\tvariant?: 'primary' \| 'secondary' \| 'tertiary' \| 'error' \| 'warning' \| 'success'\n}>(), {\n\tariaLabelClose: t('Close'),\n\tactionsContainer: 'body',\n\ticonPath: undefined,\n\ticonSvg: undefined,\n\ttext: '',\n\tvariant: 'secondary',\n})\n\nconst emit = defineEmits<{\n\t/\n\t Emitted when the close button is clicked\n\t /\n\tclose: []\n}>()\n\nconst slots = defineSlots<{\n\t/\n\t The actions slot can be used to add custom actions (`NcAction`) to the chips actions.\n\t /\n\tactions?: Slot\n\n\t/*\n\t The default slot can be used to set the text that is shown.\n\t /\n\tdefault?: Slot\n\n\t/\n\t The icon slot can be used to set the chip icon.\n\t * Make sure that the icon is not exceeding a height of `--chip-size`.\n\t * For round icons a exact size of `var(--chip-size)` is recommended.\n\t /\n\ticon?: Slot\n}>()\n\nconst canClose = computed(() => !props.noClose)\nconst hasActions = () => !!slots.actions\nconst hasIcon = () => Boolean(props.iconPath \|\| props.iconSvg \|\| !!slots.icon)\n</script>\n\n<style scoped lang=\"scss\">\n.nc-chip {\n\t--chip-size: 24px;\n\t--chip-radius: calc(var(--chip-size) / 2);\n\t// Setup size of wrapper\n\theight: var(--chip-size);\n\tmax-width: fit-content;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tborder-radius: var(--chip-radius);\n\tbackground-color: var(--color-background-hover);\n\n\t&--primary {\n\t\tbackground-color: var(--color-primary-element);\n\t\tcolor: var(--color-primary-element-text);\n\t}\n\n\t&--secondary {\n\t\tbackground-color: var(--color-primary-element-light);\n\t\tcolor: var(--color-primary-element-light-text);\n\t}\n\n\t&--error {\n\t\tbackground-color: var(--color-error);\n\t\tcolor: var(--color-error-text);\n\t}\n\n\t&--warning {\n\t\tbackground-color: var(--color-warning);\n\t\tcolor: var(--color-warning-text);\n\t}\n\n\t&--success {\n\t\tbackground-color: var(--color-success);\n\t\tcolor: var(--color-success-text);\n\t}\n\n\t&--no-actions &__text {\n\t\t// If there are no actions we need to add some padding to ensure the text is not cut-off\n\t\tpadding-inline-end: calc(2 var(--default-grid-baseline));\n\t}\n\n\t&--no-icon &__text {\n\t\t// Add some more space to the border\n\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t}\n\n\t&__text {\n\t\t// Allow to grow the text\n\t\t// this is only used if an app forces a width of the chip\n\t\tflex: 1 auto;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttext-wrap: nowrap;\n\t}\n\n\t&__icon {\n\t\t// Do neither grow nor shrink, size is fixed\n\t\tflex: 0 0 var(--chip-size);\n\t\tmargin-inline-end: var(--default-grid-baseline);\n\n\t\tline-height: 1;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t// Force size\n\t\toverflow: hidden;\n\t\theight: var(--chip-size);\n\t\twidth: var(--chip-size);\n\t}\n\n\t&__actions {\n\t\t// Do neither grow nor shrink, size is fixed\n\t\tflex: 0 0 var(--chip-size);\n\t\t// Adjust action size to match chip size\n\t\t--default-clickable-area: var(--chip-size);\n\t\t--border-radius-element: var(--chip-radius);\n\t}\n}\n</style>\n"],"names":["_useSlots","_createElementBlock","variant","noClose","_openBlock","_renderSlot","iconPath","iconSvg","_createBlock","_createElementVNode","text","actionsContainer","_createVNode","_unref","_createTextVNode","ariaLabelClose"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiIA,UAAM,QAAQ;AAoDd,UAAM,OAAO;AAOb,UAAM,QAAQA,SAAA;AAmBd,UAAM,WAAW,SAAS,MAAM,CAAC,MAAM,OAAO;AAC9C,UAAM,aAAa,MAAM,CAAC,CAAC,MAAM;AACjC,UAAM,UAAU,MAAM,QAAQ,MAAM,YAAY,MAAM,WAAW,CAAC,CAAC,MAAM,IAAI;;0BAnI5EC,mBAsCM,OAAA;AAAA,QArCL,uBAAM,WAAS;AAAA,uBACWC,KAAAA,OAAO,EAAA,GAAA;AAAA,UAAqCC,uBAAAA,KAAAA,YAAY,WAAA;AAAA,+BAAsC,QAAA;AAAA,QAAO;;QAKnH,aAAZC,UAAA,GAAAH,mBAUO,QAVP,YAUO;AAAA,UATNI,WAQO,yBARP,MAQO;AAAA,YALCC,KAAAA,YAAYC,KAAAA,wBADnBC,YAKc,kBAAA;AAAA;cAHb,QAAA;AAAA,cACC,MAAMF,KAAAA;AAAAA,cACN,KAAKA,KAAAA,WAAW,SAAYC,KAAAA;AAAAA,cAC5B,MAAM;AAAA,YAAA;;;QAGVE,mBAEO,QAFP,YAEO;AAAA,UADNJ,WAAuB,4BAAvB,MAAuB;AAAA,4CAAdK,KAAAA,IAAI,GAAA,CAAA;AAAA,UAAA;;QAGP,SAAA,SAAY,WAAA,kBADnBF,YAgBY,WAAA;AAAA;UAdX,OAAM;AAAA,UACL,WAAWG,KAAAA;AAAAA,UACX,eAAa,SAAA;AAAA,UACd,SAAQ;AAAA,QAAA;2BACR,MAQiB;AAAA,YAPV,SAAA,sBADPH,YAQiB,gBAAA;AAAA;cANhB,qBAAA;AAAA,cACC,+CAAO,KAAI,OAAA;AAAA,YAAA;cACD,cACV,MAAgD;AAAA,gBAAhDI,YAAgD,kBAAA;AAAA,kBAA7B,MAAMC,MAAA,QAAA;AAAA,kBAAW,MAAM;AAAA,gBAAA;;+BAChC,MACX;AAAA,gBADWC,gBAAA,sBACRC,KAAAA,cAAc,GAAA,CAAA;AAAA,cAAA;;;YAElBV,WAAuB,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAAA;;;;;;;;"}
1	+ {"version":3,"file":"NcChip-B8jcrLqG.mjs","sources":["../../src/components/NcChip/NcChip.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n<docs>\n### Basic usage\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 8px; flex-wrap: wrap;\">\n\t\t<NcChip text=\"Notes.txt\" />\n\t\t<NcChip text=\"Files\" :icon-path=\"mdiFileOutline\" />\n\t\t<NcChip text=\"Color\" :icon-path=\"mdiPaletteOutline\" variant=\"tertiary\" />\n\t\t<NcChip text=\"Current time\" :icon-path=\"mdiClock\" no-close variant=\"primary\" />\n\t\t<NcChip text=\"Canceled\" :icon-path=\"mdiCancel\" variant=\"error\" no-close />\n\t\t<NcChip text=\"Open\" :icon-path=\"mdiCircleOutline\" variant=\"success\" no-close />\n\t\t<NcChip text=\"Due tomorrow\" :icon-path=\"mdiAlertCircleOutline\" variant=\"warning\" no-close />\n\t</div>\n</template>\n<script>\nimport { mdiClock, mdiFileOutline, mdiPaletteOutline, mdiCancel, mdiCircleOutline, mdiAlertCircleOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiAlertCircleOutline,\n\t\t\tmdiCancel,\n\t\t\tmdiCircleOutline,\n\t\t\tmdiClock,\n\t\t\tmdiFileOutline,\n\t\t\tmdiPaletteOutline,\n\t\t}\n\t}\n}\n</script>\n```\n\n### Advanced usage\n\nIt is also possible to use custom components for the icon by using the `icon` slot.\nIn this example we are using the `NcAvatar` component to render the users avatar as the icon.\n\nHint: If you use round icons like avatars you should set their size to `24px` (or use CSS variable `--chip-size`) to make them fully fill and align with the the chip\n\nAlso it is possible to pass custom actions.\n\n```vue\n<template>\n\t<NcChip>\n\t\t<!-- The icon slot allow to use custom components as the chip icon -->\n\t\t<template #icon>\n\t\t\t<NcAvatar :size=\"24\" user=\"jdoe\" display-name=\"J. Doe\" />\n\t\t</template>\n\t\t<!-- The actions slot allows to add custom actions -->\n\t\t<template #actions>\n\t\t\t<NcActionButton>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ContactsIcon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd to contacts\n\t\t\t</NcActionButton>\n\t\t</template>\n\t\t<!-- The default slot can be used for add content, just like the `text` prop -->\n\t\tJ. Doe\n\t</NcChip>\n</template>\n<script>\nimport ContactsIcon from 'vue-material-design-icons/Contacts.vue'\nexport default {\n\tcomponents: {\n\t\tContactsIcon,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div\n\t\tclass=\"nc-chip\"\n\t\t:class=\"{\n\t\t\t[`nc-chip--${variant}`]: true,\n\t\t\t'nc-chip--no-actions': noClose && !hasActions(),\n\t\t\t'nc-chip--no-icon': !hasIcon(),\n\t\t}\">\n\t\t<span v-if=\"hasIcon()\" class=\"nc-chip__icon\">\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<!-- The default icon wrapper uses a size of 18px to ensure the icon is not clipped by the round chip style -->\n\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\tv-if=\"iconPath \|\| iconSvg\"\n\t\t\t\t\tinline\n\t\t\t\t\t:path=\"iconPath\"\n\t\t\t\t\t:svg=\"iconPath ? undefined : iconSvg\"\n\t\t\t\t\t:size=\"18\" />\n\t\t\t</slot>\n\t\t</span>\n\t\t<span class=\"nc-chip__text\">\n\t\t\t<slot>{{ text }}</slot>\n\t\t</span>\n\t\t<NcActions\n\t\t\tv-if=\"canClose \|\| hasActions()\"\n\t\t\tclass=\"nc-chip__actions\"\n\t\t\t:container=\"actionsContainer\"\n\t\t\t:force-menu=\"!canClose\"\n\t\t\tvariant=\"tertiary-no-background\">\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"canClose\"\n\t\t\t\tclose-after-click\n\t\t\t\t@click=\"emit('close')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiClose\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ ariaLabelClose }}\n\t\t\t</NcActionButton>\n\t\t\t<slot name=\"actions\" />\n\t\t</NcActions>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { mdiClose } from '@mdi/js'\nimport { computed } from 'vue'\nimport NcActionButton from '../NcActionButton/NcActionButton.vue'\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { t } from '../../l10n.ts'\n\nconst props = withDefaults(defineProps<{\n\t/*\n\t aria label to set on the close button\n\t \n\t @default 'Close'\n\t /\n\tariaLabelClose?: string\n\n\t/\n\t Container for the actions\n\t /\n\tactionsContainer?: string\n\n\t/\n\t Main text of the chip.\n\t /\n\ttext?: string\n\n\t/\n\t SVG path of the icon to use, this takes precedence over `iconSVG`.\n\t * For example icon paths from `@mdi/js` can be used.\n\t /\n\ticonPath?: string\n\n\t/\n\t Inline SVG to use as the icon\n\t /\n\ticonSvg?: string\n\n\t/\n\t Set to true to prevent the close button to be shown\n\t /\n\tnoClose?: boolean\n\n\t/\n\t Set the chips design variant-\n\t \n\t This sets the background style of the chip, similar to NcButton's `variant`.\n\t \n\t @default 'secondary'\n\t * @since 8.23.0\n\t /\n\tvariant?: 'primary' \| 'secondary' \| 'tertiary' \| 'error' \| 'warning' \| 'success'\n}>(), {\n\tariaLabelClose: t('Close'),\n\tactionsContainer: 'body',\n\ticonPath: undefined,\n\ticonSvg: undefined,\n\ttext: '',\n\tvariant: 'secondary',\n})\n\nconst emit = defineEmits<{\n\t/\n\t Emitted when the close button is clicked\n\t /\n\tclose: []\n}>()\n\nconst slots = defineSlots<{\n\t/\n\t The actions slot can be used to add custom actions (`NcAction`) to the chips actions.\n\t /\n\tactions?: Slot\n\n\t/*\n\t The default slot can be used to set the text that is shown.\n\t /\n\tdefault?: Slot\n\n\t/\n\t The icon slot can be used to set the chip icon.\n\t * Make sure that the icon is not exceeding a height of `--chip-size`.\n\t * For round icons a exact size of `var(--chip-size)` is recommended.\n\t /\n\ticon?: Slot\n}>()\n\nconst canClose = computed(() => !props.noClose)\nconst hasActions = () => !!slots.actions\nconst hasIcon = () => Boolean(props.iconPath \|\| props.iconSvg \|\| !!slots.icon)\n</script>\n\n<style scoped lang=\"scss\">\n.nc-chip {\n\t--chip-size: 24px;\n\t--chip-radius: calc(var(--chip-size) / 2);\n\t// Setup size of wrapper\n\theight: var(--chip-size);\n\tmax-width: fit-content;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tborder-radius: var(--chip-radius);\n\tbackground-color: var(--color-background-hover);\n\n\t&--primary {\n\t\tbackground-color: var(--color-primary-element);\n\t\tcolor: var(--color-primary-element-text);\n\t}\n\n\t&--secondary {\n\t\tbackground-color: var(--color-primary-element-light);\n\t\tcolor: var(--color-primary-element-light-text);\n\t}\n\n\t&--error {\n\t\tbackground-color: var(--color-error);\n\t\tcolor: var(--color-error-text);\n\t}\n\n\t&--warning {\n\t\tbackground-color: var(--color-warning);\n\t\tcolor: var(--color-warning-text);\n\t}\n\n\t&--success {\n\t\tbackground-color: var(--color-success);\n\t\tcolor: var(--color-success-text);\n\t}\n\n\t&--no-actions &__text {\n\t\t// If there are no actions we need to add some padding to ensure the text is not cut-off\n\t\tpadding-inline-end: calc(2 var(--default-grid-baseline));\n\t}\n\n\t&--no-icon &__text {\n\t\t// Add some more space to the border\n\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t}\n\n\t&__text {\n\t\t// Allow to grow the text\n\t\t// this is only used if an app forces a width of the chip\n\t\tflex: 1 auto;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttext-wrap: nowrap;\n\t}\n\n\t&__icon {\n\t\t// Do neither grow nor shrink, size is fixed\n\t\tflex: 0 0 var(--chip-size);\n\t\tmargin-inline-end: var(--default-grid-baseline);\n\n\t\tline-height: 1;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t// Force size\n\t\toverflow: hidden;\n\t\theight: var(--chip-size);\n\t\twidth: var(--chip-size);\n\t}\n\n\t&__actions {\n\t\t// Do neither grow nor shrink, size is fixed\n\t\tflex: 0 0 var(--chip-size);\n\t\t// Adjust action size to match chip size\n\t\t--default-clickable-area: var(--chip-size);\n\t\t--border-radius-element: var(--chip-radius);\n\t}\n}\n</style>\n"],"names":["_useSlots","_createElementBlock","variant","noClose","_openBlock","_renderSlot","iconPath","iconSvg","_createBlock","_createElementVNode","text","actionsContainer","_createVNode","_unref","_createTextVNode","ariaLabelClose"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiIA,UAAM,QAAQ;AAoDd,UAAM,OAAO;AAOb,UAAM,QAAQA,SAAA;AAmBd,UAAM,WAAW,SAAS,MAAM,CAAC,MAAM,OAAO;AAC9C,UAAM,aAAa,MAAM,CAAC,CAAC,MAAM;AACjC,UAAM,UAAU,MAAM,QAAQ,MAAM,YAAY,MAAM,WAAW,CAAC,CAAC,MAAM,IAAI;;0BAnI5EC,mBAsCM,OAAA;AAAA,QArCL,uBAAM,WAAS;AAAA,uBACWC,KAAAA,OAAO,EAAA,GAAA;AAAA,UAAqCC,uBAAAA,KAAAA,YAAY,WAAA;AAAA,+BAAsC,QAAA;AAAA,QAAO;;QAKnH,aAAZC,UAAA,GAAAH,mBAUO,QAVP,YAUO;AAAA,UATNI,WAQO,yBARP,MAQO;AAAA,YALCC,KAAAA,YAAYC,KAAAA,wBADnBC,YAKc,kBAAA;AAAA;cAHb,QAAA;AAAA,cACC,MAAMF,KAAAA;AAAAA,cACN,KAAKA,KAAAA,WAAW,SAAYC,KAAAA;AAAAA,cAC5B,MAAM;AAAA,YAAA;;;QAGVE,mBAEO,QAFP,YAEO;AAAA,UADNJ,WAAuB,4BAAvB,MAAuB;AAAA,4CAAdK,KAAAA,IAAI,GAAA,CAAA;AAAA,UAAA;;QAGP,SAAA,SAAY,WAAA,kBADnBF,YAgBY,WAAA;AAAA;UAdX,OAAM;AAAA,UACL,WAAWG,KAAAA;AAAAA,UACX,eAAa,SAAA;AAAA,UACd,SAAQ;AAAA,QAAA;2BACR,MAQiB;AAAA,YAPV,SAAA,sBADPH,YAQiB,gBAAA;AAAA;cANhB,qBAAA;AAAA,cACC,+CAAO,KAAI,OAAA;AAAA,YAAA;cACD,cACV,MAAgD;AAAA,gBAAhDI,YAAgD,kBAAA;AAAA,kBAA7B,MAAMC,MAAA,QAAA;AAAA,kBAAW,MAAM;AAAA,gBAAA;;+BAChC,MACX;AAAA,gBADWC,gBAAA,sBACRC,KAAAA,cAAc,GAAA,CAAA;AAAA,cAAA;;;YAElBV,WAAuB,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAAA;;;;;;;;"}

package/dist/chunks/{NcCollectionList-ByFl0-ca.mjs → NcCollectionList-TB1GbWbo.mjs} RENAMED Viewed

@@ -2,9 +2,9 @@ import '../assets/NcCollectionList-C7OiUQQ-.css';
 import debounce from "debounce";
 import { resolveComponent, createElementBlock, openBlock, createVNode, createCommentVNode, toDisplayString, withModifiers, normalizeClass, withDirectives, createElementVNode, vModelText, Fragment, renderList, createBlock, resolveDynamicComponent, withCtx, createTextVNode, Transition, ref } from "vue";
 import { r as register, L as t28, a as t, M as t6 } from "./_l10n-CgsPi8nC.mjs";
-import { N as NcActionButton } from "./NcActionButton-BHXE4UKQ.mjs";
+import { N as NcActionButton } from "./NcActionButton-DNXoAooH.mjs";
 import { N as NcActions } from "./NcActions-4R7icatI.mjs";
-import { N as NcAvatar } from "./NcAvatar-S8EJR2BK.mjs";
+import { N as NcAvatar } from "./NcAvatar-CK_dTsmT.mjs";
 import { g as getRoute } from "./autolink-U5pBzLgI.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 import { l as logger } from "./logger-D3RVzcfQ.mjs";
@@ -591,4 +591,4 @@ const NcCollectionList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc
 export {
   NcCollectionList as N
 };
-//# sourceMappingURL=NcCollectionList-ByFl0-ca.mjs.map
+//# sourceMappingURL=NcCollectionList-TB1GbWbo.mjs.map