@nextcloud/vue 9.9.0 → 9.11.0

package/dist/chunks/NcProfileHoverCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcProfileHoverCard.mjs","sources":["../../node_modules/vue-material-design-icons/AccountOutline.vue","../../node_modules/vue-material-design-icons/BriefcaseOutline.vue","../../node_modules/vue-material-design-icons/ClockOutline.vue","../../node_modules/vue-material-design-icons/MapMarkerOutline.vue","../../node_modules/vue-material-design-icons/PencilOutline.vue","../../src/components/NcProfileHoverCard/profileCache.ts","../../src/components/NcProfileHoverCard/NcProfileHoverCard.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon account-outline-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"AccountOutlineIcon\",\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>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon briefcase-outline-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=\"M20,6C20.58,6 21.05,6.2 21.42,6.59C21.8,7 22,7.45 22,8V19C22,19.55 21.8,20 21.42,20.41C21.05,20.8 20.58,21 20,21H4C3.42,21 2.95,20.8 2.58,20.41C2.2,20 2,19.55 2,19V8C2,7.45 2.2,7 2.58,6.59C2.95,6.2 3.42,6 4,6H8V4C8,3.42 8.2,2.95 8.58,2.58C8.95,2.2 9.42,2 10,2H14C14.58,2 15.05,2.2 15.42,2.58C15.8,2.95 16,3.42 16,4V6H20M4,8V19H20V8H4M14,6V4H10V6H14Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"BriefcaseOutlineIcon\",\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>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon clock-outline-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"ClockOutlineIcon\",\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>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon map-marker-outline-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5M12,2A7,7 0 0,1 19,9C19,14.25 12,22 12,22C12,22 5,14.25 5,9A7,7 0 0,1 12,2M12,4A5,5 0 0,0 7,9C7,10 7,12 12,18.71C17,12 17,10 17,9A5,5 0 0,0 12,4Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"MapMarkerOutlineIcon\",\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>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon pencil-outline-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=\"M14.06,9L15,9.94L5.92,19H5V18.08L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"PencilOutlineIcon\",\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: 2026 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport type { IProfileData } from './NcProfileHoverCard.vue'\n\n/** Default TTL for cached profile payloads (30 minutes). */\nexport const PROFILE_CACHE_TTL_MS = 30 * 60 * 1000\n\ninterface CacheEntry {\n\tdata: IProfileData\n\texpiresAt: number\n}\n\nconst cache = new Map<string, CacheEntry>()\nconst inflight = new Map<string, Promise<IProfileData | null>>()\n\n/**\n * Return a non-expired cached profile for the user, or null.\n *\n * @param userId - User id\n */\nexport function getCachedProfile(userId: string): IProfileData | null {\n\tconst entry = cache.get(userId)\n\tif (!entry) {\n\t\treturn null\n\t}\n\tif (Date.now() >= entry.expiresAt) {\n\t\tcache.delete(userId)\n\t\treturn null\n\t}\n\treturn entry.data\n}\n\n/**\n * Store profile data in the shared TTL cache.\n *\n * @param userId - User id\n * @param data - Profile payload\n * @param ttlMs - Time to live in milliseconds\n */\nexport function setCachedProfile(userId: string, data: IProfileData, ttlMs = PROFILE_CACHE_TTL_MS): void {\n\tcache.set(userId, {\n\t\tdata,\n\t\texpiresAt: Date.now() + ttlMs,\n\t})\n}\n\n/**\n * Clear all cached profiles and in-flight fetches. Used by tests.\n *\n * @internal\n */\nexport function clearProfileCache(): void {\n\tcache.clear()\n\tinflight.clear()\n}\n\n/**\n * Fetch a profile with shared TTL cache and in-flight request deduplication.\n *\n * @param userId - User id\n * @param fetcher - Network loader invoked on cache miss\n * @param ttlMs - Time to live for a successful result\n */\nexport async function fetchProfileCached(\n\tuserId: string,\n\tfetcher: () => Promise<IProfileData | null>,\n\tttlMs = PROFILE_CACHE_TTL_MS,\n): Promise<IProfileData | null> {\n\tconst cached = getCachedProfile(userId)\n\tif (cached) {\n\t\treturn cached\n\t}\n\n\tconst pending = inflight.get(userId)\n\tif (pending) {\n\t\treturn pending\n\t}\n\n\tconst promise = (async () => {\n\t\ttry {\n\t\t\tconst data = await fetcher()\n\t\t\tif (data) {\n\t\t\t\tsetCachedProfile(userId, data, ttlMs)\n\t\t\t}\n\t\t\treturn data\n\t\t} finally {\n\t\t\tinflight.delete(userId)\n\t\t}\n\t})()\n\n\tinflight.set(userId, promise)\n\treturn promise\n}\n","<!--\n  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { RouteLocationRaw } from 'vue-router'\n\nimport { getCurrentUser } from '@nextcloud/auth'\nimport axios from '@nextcloud/axios'\nimport { getCapabilities } from '@nextcloud/capabilities'\nimport { getCanonicalLocale } from '@nextcloud/l10n'\nimport { generateOcsUrl, generateUrl } from '@nextcloud/router'\nimport { computed, onMounted, ref, watch } from 'vue'\nimport AccountIcon from 'vue-material-design-icons/AccountOutline.vue'\nimport BriefcaseIcon from 'vue-material-design-icons/BriefcaseOutline.vue'\nimport ClockIcon from 'vue-material-design-icons/ClockOutline.vue'\nimport MapMarkerIcon from 'vue-material-design-icons/MapMarkerOutline.vue'\nimport PencilIcon from 'vue-material-design-icons/PencilOutline.vue'\nimport NcActionButton from '../NcActionButton/NcActionButton.vue'\nimport NcActionLink from '../NcActionLink/NcActionLink.vue'\nimport NcActionRouter from '../NcActionRouter/NcActionRouter.vue'\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcAvatar from '../NcAvatar/NcAvatar.vue'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcEmptyContent from '../NcEmptyContent/NcEmptyContent.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/NcLoadingIcon.vue'\nimport NcRichText from '../NcRichText/NcRichText.vue'\nimport { useIsSmallMobile } from '../../composables/useIsMobile/index.ts'\nimport { t } from '../../l10n.ts'\nimport { logger } from '../../utils/logger.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\nimport { fetchProfileCached, getCachedProfile, setCachedProfile } from './profileCache.ts'\n\nexport interface IProfileAction {\n\tid: string\n\tappId?: string\n\ticon: string\n\ttitle: string\n\ttarget: string | null\n}\n\nexport interface IProfileData {\n\tuserId: string\n\taddress?: string | null\n\tbiography?: string | null\n\tdisplayname?: string | null\n\theadline?: string | null\n\tisUserAvatarVisible?: boolean\n\torganisation?: string | null\n\tpronouns?: string | null\n\trole?: string | null\n\ttimezone?: string | null\n\ttimezoneOffset?: number | null\n\tactions: IProfileAction[]\n}\n\n/**\n * Action shown in the hover card sidebar (typically from NcAvatar's contacts menu).\n */\nexport interface IProfileHoverCardAction {\n\tid?: string\n\tappId?: string\n\ttext: string\n\thref?: string\n\tto?: RouteLocationRaw\n\ttarget?: string\n\trel?: string\n\ticon?: string\n\ticonSvg?: string\n\tonClick?: (event: MouseEvent) => void\n}\n\nexport interface IUserStatus {\n\ticon?: string | null\n\tmessage?: string | null\n\tstatus?: string | null\n}\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * User id whose profile to show.\n\t */\n\tuser?: string | null\n\n\t/**\n\t * Optional preloaded profile data (skips the profile API request when set).\n\t */\n\tprofile?: IProfileData | null\n\n\t/**\n\t * Optional preloaded user status (skips the status API request when set).\n\t * Pass an object with `status`, `icon`, and `message` set to null for a known empty status.\n\t */\n\tpreloadedUserStatus?: IUserStatus | null\n\n\t/**\n\t * Whether the popover that hosts this card is currently shown.\n\t * Profile data and user status are loaded when this becomes true.\n\t */\n\topen?: boolean\n\n\t/**\n\t * Actions to show in the card (e.g. NcAvatar contacts menu actions).\n\t * When omitted or empty, actions from the profile API are used.\n\t */\n\tactions?: IProfileHoverCardAction[] | null\n\n\t/**\n\t * True while parent actions (e.g. contacts menu) are still loading.\n\t */\n\tactionsLoading?: boolean\n}>(), {\n\tuser: null,\n\tprofile: null,\n\tpreloadedUserStatus: null,\n\topen: false,\n\tactions: null,\n\tactionsLoading: false,\n})\n\nconst loading = ref(false)\nconst error = ref(false)\nconst profileData = ref<IProfileData | null>(props.profile)\nconst userStatus = ref<IUserStatus>(props.preloadedUserStatus ?? {})\nconst isMobile = useIsSmallMobile()\n\nif (props.user && props.profile) {\n\tsetCachedProfile(props.user, props.profile)\n}\n\nconst isCurrentUser = computed(() => !!props.user && getCurrentUser()?.uid === props.user)\nconst settingsUrl = generateUrl('/settings/user')\n\nconst resolvedActions = computed((): IProfileHoverCardAction[] => {\n\tif (props.actions && props.actions.length > 0) {\n\t\treturn props.actions.filter((action) => action.appId !== 'timezone')\n\t}\n\treturn (profileData.value?.actions ?? [])\n\t\t.filter((action) => action.appId !== 'timezone')\n\t\t.map((action) => ({\n\t\t\tid: action.id,\n\t\t\tappId: action.appId,\n\t\t\ttext: action.title,\n\t\t\thref: action.target || undefined,\n\t\t\ticon: action.icon,\n\t\t\ttarget: action.id === 'phone' ? '_self' : '_blank',\n\t\t\trel: action.id === 'fediverse' ? 'me' : undefined,\n\t\t}))\n})\n\n/**\n * Local clock for the profile user (same format as Talk's right sidebar).\n */\nconst localTimeLabel = computed(() => {\n\tconst time = formatProfileLocalTime(new Date())\n\tif (!time) {\n\t\treturn null\n\t}\n\treturn t('Local time: {time}', { time })\n})\n\nconst primaryAction = computed(() => resolvedActions.value[0])\nconst otherActions = computed(() => resolvedActions.value.slice(1))\n\nconst primaryActionButtonProps = computed(() => {\n\tconst action = primaryAction.value\n\tif (!action) {\n\t\treturn {}\n\t}\n\tif (action.to) {\n\t\treturn { to: action.to }\n\t}\n\tif (action.href) {\n\t\treturn {\n\t\t\thref: action.href,\n\t\t\ttarget: action.target ?? (action.href.startsWith('tel:') ? '_self' : '_blank'),\n\t\t\trel: action.rel,\n\t\t}\n\t}\n\treturn {}\n})\n\nconst emptyProfileMessage = computed(() => {\n\tif (isCurrentUser.value) {\n\t\treturn t('You have not added any info yet')\n\t}\n\tconst name = profileData.value?.displayname || props.user || ''\n\treturn t('{user} has not added any info yet', { user: name })\n})\n\n/**\n * Pass status to NcAvatar so the badge matches the loaded status.\n * Always pass an object (null fields if empty) so NcAvatar does not fetch again.\n */\nconst avatarUserStatus = computed(() => ({\n\tstatus: userStatus.value.status ?? null,\n\ticon: userStatus.value.icon ?? null,\n\tmessage: userStatus.value.message ?? null,\n}))\n\n/**\n * Format the profile user's current time like Talk (`HH:MM` in their timezone)\n *\n * @param date - Instant to format\n */\nfunction formatProfileLocalTime(date: Date): string | null {\n\tconst timeZone = profileData.value?.timezone\n\tif (timeZone) {\n\t\ttry {\n\t\t\treturn new Intl.DateTimeFormat(getCanonicalLocale(), {\n\t\t\t\ttimeZone,\n\t\t\t\thour: '2-digit',\n\t\t\t\tminute: '2-digit',\n\t\t\t}).format(date)\n\t\t} catch {\n\t\t\t// Invalid timezone id from the server\n\t\t}\n\t}\n\n\tif (typeof profileData.value?.timezoneOffset === 'number') {\n\t\tconst shifted = new Date(date.getTime() + profileData.value.timezoneOffset * 1000)\n\t\treturn new Intl.DateTimeFormat(getCanonicalLocale(), {\n\t\t\ttimeZone: 'UTC',\n\t\t\thour: '2-digit',\n\t\t\tminute: '2-digit',\n\t\t}).format(shifted)\n\t}\n\n\treturn null\n}\n\n/**\n * Whether an action icon is an image URL rather than a CSS class\n *\n * @param icon - Icon value\n */\nfunction isIconUrl(icon?: string) {\n\treturn !!icon && (/^(https?:)?\\/\\//.test(icon) || icon.startsWith('/') || icon.startsWith('data:'))\n}\n\n/**\n * Resolve the NcAction component for a secondary hover-card action\n *\n * @param action - Hover card action\n */\nfunction otherActionComponent(action: IProfileHoverCardAction) {\n\tif (action.to) {\n\t\treturn NcActionRouter\n\t}\n\tif (action.onClick && !action.href) {\n\t\treturn NcActionButton\n\t}\n\treturn NcActionLink\n}\n\n/**\n * Props for a secondary hover-card action component\n *\n * @param action - Hover card action\n */\nfunction otherActionProps(action: IProfileHoverCardAction) {\n\tif (action.to) {\n\t\treturn { to: action.to, closeAfterClick: true }\n\t}\n\tif (action.onClick && !action.href) {\n\t\treturn { onClick: action.onClick, closeAfterClick: true }\n\t}\n\treturn {\n\t\thref: action.href,\n\t\ttarget: action.target ?? (action.href?.startsWith('tel:') ? '_self' : '_blank'),\n\t\trel: action.rel,\n\t\tcloseAfterClick: true,\n\t}\n}\n\nwatch(() => props.profile, (value) => {\n\tif (value) {\n\t\tprofileData.value = value\n\t\tif (props.user) {\n\t\t\tsetCachedProfile(props.user, value)\n\t\t}\n\t\terror.value = false\n\t}\n})\n\nwatch(() => props.preloadedUserStatus, (value) => {\n\tif (value) {\n\t\tuserStatus.value = value\n\t}\n})\n\nwatch(() => props.user, () => {\n\tprofileData.value = props.profile\n\tuserStatus.value = props.preloadedUserStatus ?? {}\n\terror.value = false\n\tif (props.user && props.profile) {\n\t\tsetCachedProfile(props.user, props.profile)\n\t}\n\tif (props.open) {\n\t\tloadProfile()\n\t}\n})\n\nwatch(() => props.open, (isOpen) => {\n\tif (isOpen) {\n\t\tloadProfile()\n\t}\n})\n\nonMounted(() => {\n\tif (props.open) {\n\t\tloadProfile()\n\t}\n})\n\n/**\n * Whether user status was already provided (including a known empty status).\n */\nfunction hasPreloadedUserStatus() {\n\treturn props.preloadedUserStatus !== null\n\t\t|| !!(userStatus.value.icon || userStatus.value.message || userStatus.value.status)\n}\n\n/**\n * Ensure user status is loaded when missing.\n *\n * @param userId - User id\n */\nasync function ensureUserStatus(userId: string) {\n\t// Skip the status request when already preloaded (e.g. from NcAvatar)\n\tif (!hasPreloadedUserStatus()) {\n\t\tuserStatus.value = await fetchUserStatus(userId)\n\t}\n}\n\n/**\n * Load profile fields and user status when the hovercard opens\n */\nasync function loadProfile() {\n\tif (!props.user || loading.value) {\n\t\treturn\n\t}\n\n\tconst userId = props.user\n\n\t// Use preloaded, instance, or shared-cache profile; only refresh status if needed\n\tif (!profileData.value) {\n\t\tconst cached = getCachedProfile(userId)\n\t\tif (cached) {\n\t\t\tprofileData.value = cached\n\t\t}\n\t}\n\tif (profileData.value) {\n\t\tawait ensureUserStatus(userId)\n\t\treturn\n\t}\n\n\tloading.value = true\n\terror.value = false\n\n\ttry {\n\t\tconst [profile, status] = await Promise.all([\n\t\t\tfetchProfileCached(userId, async () => {\n\t\t\t\tconst { data } = await axios.get(generateOcsUrl('/profile/{userId}', { userId }))\n\t\t\t\treturn data.ocs?.data ?? null\n\t\t\t}),\n\t\t\thasPreloadedUserStatus()\n\t\t\t\t? Promise.resolve(userStatus.value)\n\t\t\t\t: fetchUserStatus(userId),\n\t\t])\n\t\tprofileData.value = profile\n\t\tuserStatus.value = status\n\t\tif (!profileData.value) {\n\t\t\terror.value = true\n\t\t}\n\t} catch (e) {\n\t\tlogger.debug('Failed to load profile for hovercard', { error: e, user: userId })\n\t\terror.value = true\n\t} finally {\n\t\tloading.value = false\n\t}\n}\n\n/**\n * Fetch user status for the given user\n *\n * @param userId - User id\n */\nasync function fetchUserStatus(userId: string): Promise<IUserStatus> {\n\ttry {\n\t\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\t\tif (!(getCapabilities() as any)?.user_status?.enabled || !getCurrentUser()) {\n\t\t\treturn {}\n\t\t}\n\t\tconst { data } = await axios.get(generateOcsUrl('/apps/user_status/api/v1/statuses/{userId}', { userId }))\n\t\treturn data.ocs?.data ?? {}\n\t} catch (e) {\n\t\tlogger.debug('Failed to load user status for hovercard', { error: e, userId })\n\t\treturn {}\n\t}\n}\n</script>\n\n<template>\n\t<div\n\t\tclass=\"profile-hover-card\"\n\t\trole=\"dialog\"\n\t\t:aria-label=\"t('Profile of {user}', { user: profileData?.displayname || user || '' })\">\n\t\t<div v-if=\"loading\" class=\"profile-hover-card__loading\">\n\t\t\t<NcLoadingIcon :size=\"32\" :name=\"t('Loading profile')\" />\n\t\t</div>\n\n\t\t<template v-else-if=\"profileData && !error\">\n\t\t\t<!-- Header band: name, pronouns, status (mirrors ProfileApp.vue) -->\n\t\t\t<div class=\"profile-hover-card__header\">\n\t\t\t\t<NcButton\n\t\t\t\t\tv-if=\"isCurrentUser\"\n\t\t\t\t\tclass=\"profile-hover-card__header__edit\"\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t:aria-label=\"t('Edit profile')\"\n\t\t\t\t\t:title=\"t('Edit profile')\"\n\t\t\t\t\t:href=\"settingsUrl\"\n\t\t\t\t\ttarget=\"_blank\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<PencilIcon :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<div class=\"profile-hover-card__header__container\">\n\t\t\t\t\t<NcAvatar\n\t\t\t\t\t\tv-if=\"isMobile\"\n\t\t\t\t\t\tclass=\"avatar profile-hover-card__header__container__avatar\"\n\t\t\t\t\t\t:user=\"profileData.userId\"\n\t\t\t\t\t\t:size=\"96\"\n\t\t\t\t\t\tdisableMenu\n\t\t\t\t\t\tdisableTooltip\n\t\t\t\t\t\t:preloadedUserStatus=\"avatarUserStatus\"\n\t\t\t\t\t\t:isNoUser=\"!profileData.isUserAvatarVisible\" />\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-else\n\t\t\t\t\t\tclass=\"profile-hover-card__header__container__placeholder\" />\n\t\t\t\t\t<div class=\"profile-hover-card__header__container__identity\">\n\t\t\t\t\t\t<div class=\"profile-hover-card__header__container__displayname\">\n\t\t\t\t\t\t\t<h2>{{ profileData.displayname || profileData.userId }}</h2>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tv-if=\"profileData.pronouns\"\n\t\t\t\t\t\t\t\tclass=\"profile-hover-card__header__container__pronoun-separator\">·</span>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tv-if=\"profileData.pronouns\"\n\t\t\t\t\t\t\t\tclass=\"profile-hover-card__header__container__pronouns\">{{ profileData.pronouns }}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tv-if=\"userStatus.icon || userStatus.message\"\n\t\t\t\t\t\t\tclass=\"profile-hover-card__header__container__status\">\n\t\t\t\t\t\t\t<span class=\"profile-hover-card__header__container__status-content\">\n\t\t\t\t\t\t\t\t<span>{{ userStatus.icon }} {{ userStatus.message }}</span>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class=\"profile-hover-card__body\">\n\t\t\t\t<div class=\"profile-hover-card__content\">\n\t\t\t\t\t<!-- Sidebar: avatar + actions (mirrors ProfileApp.vue) -->\n\t\t\t\t\t<div class=\"profile-hover-card__sidebar\">\n\t\t\t\t\t\t<NcAvatar\n\t\t\t\t\t\t\tv-if=\"!isMobile\"\n\t\t\t\t\t\t\tclass=\"avatar\"\n\t\t\t\t\t\t\t:user=\"profileData.userId\"\n\t\t\t\t\t\t\t:size=\"135\"\n\t\t\t\t\t\t\tdisableMenu\n\t\t\t\t\t\t\tdisableTooltip\n\t\t\t\t\t\t\t:preloadedUserStatus=\"avatarUserStatus\"\n\t\t\t\t\t\t\t:isNoUser=\"!profileData.isUserAvatarVisible\" />\n\n\t\t\t\t\t\t<div class=\"user-actions\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tv-if=\"actionsLoading && resolvedActions.length === 0\"\n\t\t\t\t\t\t\t\tclass=\"user-actions__loading\">\n\t\t\t\t\t\t\t\t<NcLoadingIcon :size=\"20\" :name=\"t('Loading actions')\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<template v-else>\n\t\t\t\t\t\t\t\t<NcButton\n\t\t\t\t\t\t\t\t\tv-if=\"primaryAction\"\n\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\tclass=\"user-actions__primary\"\n\t\t\t\t\t\t\t\t\tv-bind=\"primaryActionButtonProps\"\n\t\t\t\t\t\t\t\t\t@click=\"primaryAction.onClick\">\n\t\t\t\t\t\t\t\t\t<template v-if=\"primaryAction.iconSvg || primaryAction.icon\" #icon>\n\t\t\t\t\t\t\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\t\t\t\t\t\t\tv-if=\"primaryAction.iconSvg\"\n\t\t\t\t\t\t\t\t\t\t\t:svg=\"primaryAction.iconSvg\" />\n\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\tv-else-if=\"isIconUrl(primaryAction.icon)\"\n\t\t\t\t\t\t\t\t\t\t\t:src=\"primaryAction.icon\"\n\t\t\t\t\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"user-actions__primary__icon\">\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tv-else\n\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"user-actions__primary__icon-class\"\n\t\t\t\t\t\t\t\t\t\t\t:class=\"primaryAction.icon\" />\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t{{ primaryAction.text }}\n\t\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t\t<NcActions\n\t\t\t\t\t\t\t\t\tv-if=\"otherActions.length > 0\"\n\t\t\t\t\t\t\t\t\tclass=\"user-actions__other\"\n\t\t\t\t\t\t\t\t\t:inline=\"isMobile ? 5 : 4\">\n\t\t\t\t\t\t\t\t\t<component\n\t\t\t\t\t\t\t\t\t\t:is=\"otherActionComponent(action)\"\n\t\t\t\t\t\t\t\t\t\tv-for=\"(action, index) in otherActions\"\n\t\t\t\t\t\t\t\t\t\t:key=\"action.id || action.href || index\"\n\t\t\t\t\t\t\t\t\t\tv-bind=\"otherActionProps(action)\">\n\t\t\t\t\t\t\t\t\t\t<template v-if=\"action.iconSvg || action.icon\" #icon>\n\t\t\t\t\t\t\t\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\t\t\t\t\t\t\t\tv-if=\"action.iconSvg\"\n\t\t\t\t\t\t\t\t\t\t\t\t:svg=\"action.iconSvg\" />\n\t\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\t\tv-else-if=\"isIconUrl(action.icon)\"\n\t\t\t\t\t\t\t\t\t\t\t\t:src=\"action.icon\"\n\t\t\t\t\t\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"user-actions__other__icon\">\n\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\tv-else\n\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"user-actions__other__icon-class\"\n\t\t\t\t\t\t\t\t\t\t\t\t:class=\"action.icon\" />\n\t\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t\t{{ action.text }}\n\t\t\t\t\t\t\t\t\t</component>\n\t\t\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Content blocks: details + bio (mirrors ProfileApp.vue) -->\n\t\t\t\t\t<div class=\"profile-hover-card__blocks\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tv-if=\"profileData.organisation || profileData.role || profileData.address || localTimeLabel\"\n\t\t\t\t\t\t\tclass=\"profile-hover-card__blocks-details\">\n\t\t\t\t\t\t\t<div v-if=\"profileData.organisation || profileData.role\" class=\"detail\">\n\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t<BriefcaseIcon\n\t\t\t\t\t\t\t\t\t\tclass=\"detail-icon\"\n\t\t\t\t\t\t\t\t\t\t:size=\"16\"\n\t\t\t\t\t\t\t\t\t\ttitle=\"\" />\n\t\t\t\t\t\t\t\t\t{{ profileData.organisation }} <span v-if=\"profileData.organisation && profileData.role\">•</span> {{ profileData.role }}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div v-if=\"profileData.address\" class=\"detail\">\n\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t<MapMarkerIcon\n\t\t\t\t\t\t\t\t\t\tclass=\"detail-icon\"\n\t\t\t\t\t\t\t\t\t\t:size=\"16\"\n\t\t\t\t\t\t\t\t\t\ttitle=\"\" />\n\t\t\t\t\t\t\t\t\t{{ profileData.address }}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div v-if=\"localTimeLabel\" class=\"detail\">\n\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t<ClockIcon\n\t\t\t\t\t\t\t\t\t\tclass=\"detail-icon\"\n\t\t\t\t\t\t\t\t\t\t:size=\"16\"\n\t\t\t\t\t\t\t\t\t\ttitle=\"\" />\n\t\t\t\t\t\t\t\t\t{{ localTimeLabel }}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<template v-if=\"profileData.headline || profileData.biography\">\n\t\t\t\t\t\t\t<h3 v-if=\"profileData.headline\" class=\"profile-hover-card__blocks-headline\">\n\t\t\t\t\t\t\t\t{{ profileData.headline }}\n\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t<div v-if=\"profileData.biography\" class=\"profile-hover-card__blocks-biography\">\n\t\t\t\t\t\t\t\t<NcRichText :text=\"profileData.biography\" useExtendedMarkdown />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<NcEmptyContent\n\t\t\t\t\t\t\tv-else\n\t\t\t\t\t\t\tclass=\"profile-hover-card__blocks-empty-info\"\n\t\t\t\t\t\t\t:name=\"emptyProfileMessage\"\n\t\t\t\t\t\t\t:description=\"t('The headline and about sections will show up here')\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<AccountIcon :size=\"40\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcEmptyContent>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</template>\n\n\t\t<div v-else class=\"profile-hover-card__error\">\n\t\t\t{{ t('Failed to load profile') }}\n\t\t</div>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n// Card-scaled mirror of apps/profile ProfileApp.vue layout\n$card-width: 560px;\n$card-height: 300px;\n$header-height: 127px;\n$sidebar-width: 180px;\n\n.profile-hover-card {\n\tbox-sizing: border-box;\n\tposition: relative;\n\twidth: $card-width;\n\tmax-width: min(#{$card-width}, 90vw);\n\tmin-height: $card-height;\n\toverflow: hidden;\n\tcolor: var(--color-main-text);\n\tbackground-color: var(--color-main-background);\n\tborder-radius: var(--border-radius-large);\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t&__header {\n\t\tdisplay: flex;\n\t\tflex-shrink: 0;\n\t\tposition: relative;\n\t\theight: $header-height;\n\t\tbackground-color: var(--color-primary-element-light);\n\n\t\t&__edit {\n\t\t\tposition: absolute;\n\t\t\tinset-block-start: 8px;\n\t\t\tinset-inline-end: 8px;\n\t\t\tz-index: 1;\n\t\t}\n\n\t\t&__container {\n\t\t\talign-self: flex-end;\n\t\t\tdisplay: flex;\n\t\t\talign-items: flex-end;\n\t\t\t// Match sidebar margin-inline-end so name/status line up with role/bio\n\t\t\tgap: 12px;\n\t\t\twidth: 100%;\n\t\t\tmargin: 8px 0;\n\t\t\tpadding-inline: 16px;\n\t\t\tbox-sizing: border-box;\n\n\t\t\t&__placeholder {\n\t\t\t\tflex: 0 0 $sidebar-width;\n\t\t\t\twidth: $sidebar-width;\n\t\t\t}\n\n\t\t\t&__avatar {\n\t\t\t\tflex-shrink: 0;\n\t\t\t}\n\n\t\t\t&__identity {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tjustify-content: flex-end;\n\t\t\t\talign-items: flex-start;\n\t\t\t\tgap: 4px;\n\t\t\t\tmin-width: 0;\n\t\t\t\tflex: 1;\n\t\t\t\tpadding-inline: 0;\n\t\t\t}\n\n\t\t\t&__displayname {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: baseline;\n\t\t\t\tgap: 8px;\n\t\t\t\tmin-width: 0;\n\n\t\t\t\th2 {\n\t\t\t\t\tfont-size: 24px;\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\toverflow-wrap: anywhere;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&__pronouns {\n\t\t\t\tfont-size: 15px;\n\t\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\t}\n\n\t\t\t&__status {\n\t\t\t\tmin-width: 0;\n\t\t\t}\n\n\t\t\t&__status-content {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 8px;\n\t\t\t\tfont-size: 14px;\n\t\t\t\toverflow-wrap: anywhere;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__body {\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\tbackground-color: var(--color-main-background);\n\t}\n\n\t&__content {\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tpadding-inline: 16px 16px;\n\t\tbox-sizing: border-box;\n\t}\n\n\t&__sidebar {\n\t\talign-self: flex-start;\n\t\tpadding-top: 8px;\n\t\twidth: $sidebar-width;\n\t\tmin-width: $sidebar-width;\n\t\tmargin-block: -100px 0;\n\t\tmargin-inline: 0 12px;\n\t}\n\n\t&__header,\n\t&__sidebar {\n\t\t// Specificity hack is needed to override Avatar component styles\n\t\t:deep(.avatar.avatardiv) {\n\t\t\ttext-align: center;\n\t\t\tmargin: auto;\n\t\t\tdisplay: block;\n\t\t\tpadding: 8px;\n\n\t\t\t.avatardiv__user-status {\n\t\t\t\tinset-inline-end: 10px;\n\t\t\t\tbottom: 10px;\n\t\t\t\twidth: 26px;\n\t\t\t\theight: 26px;\n\t\t\t\tbackground-size: 22px;\n\t\t\t\tborder: none;\n\t\t\t\tbackground-color: var(--color-main-background);\n\t\t\t\tline-height: 26px;\n\t\t\t\tfont-size: 16px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__blocks {\n\t\tmargin: 12px 0 12px 0;\n\t\tdisplay: grid;\n\t\tgap: 8px 0;\n\t\tmin-width: 0;\n\t\tflex: 1;\n\t\toverflow: hidden;\n\t\talign-content: start;\n\n\t\tp, h3 {\n\t\t\toverflow-wrap: anywhere;\n\t\t}\n\n\t\t&-details {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: 2px 0;\n\n\t\t\t.detail {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\t\tfont-size: 14px;\n\n\t\t\t\tp .detail-icon {\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tvertical-align: middle;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&-headline {\n\t\t\tmargin-inline: 0;\n\t\t\tmargin-block: 4px 0;\n\t\t\tfont-weight: bold;\n\t\t\tfont-size: 16px;\n\t\t}\n\n\t\t&-biography {\n\t\t\toverflow: hidden;\n\t\t\tfont-size: 14px;\n\t\t\tline-height: 1.4;\n\t\t\tdisplay: -webkit-box;\n\t\t\t-webkit-box-orient: vertical;\n\t\t\t-webkit-line-clamp: 4;\n\t\t\tline-clamp: 4;\n\t\t\ttext-overflow: ellipsis;\n\t\t\toverflow-wrap: anywhere;\n\n\t\t\t:deep(p) {\n\t\t\t\tmargin: 0;\n\t\t\t}\n\t\t}\n\n\t\t&-empty-info {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t&__loading,\n\t&__error {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\theight: 100%;\n\t\tmin-height: $card-height;\n\t\tpadding: 16px;\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n}\n\n.user-actions {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px 0;\n\tmargin-top: 12px;\n\tmax-width: $sidebar-width;\n\n\t&__loading {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tpadding: 8px 0;\n\t}\n\n\t&__primary {\n\t\tmargin: 0 auto;\n\t\twidth: $sidebar-width !important;\n\n\t\t&__icon {\n\t\t\theight: 20px;\n\t\t\twidth: 20px;\n\t\t\tobject-fit: contain;\n\t\t\tfilter: var(--primary-invert-if-dark);\n\t\t}\n\n\t\t&__icon-class {\n\t\t\tdisplay: block;\n\t\t\theight: 20px;\n\t\t\twidth: 20px;\n\t\t\tbackground-size: 20px;\n\t\t\tbackground-repeat: no-repeat;\n\t\t\tbackground-position: center;\n\t\t\tfilter: var(--primary-invert-if-dark);\n\t\t}\n\t}\n\n\t&__other {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tgap: 0 4px;\n\n\t\t&__icon {\n\t\t\theight: 20px;\n\t\t\twidth: 20px;\n\t\t\tobject-fit: contain;\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t\talign-self: center;\n\t\t\tmargin: 8px; // compact 44px-ish hit target for the card\n\t\t}\n\n\t\t&__icon-class {\n\t\t\tdisplay: block;\n\t\t\theight: 20px;\n\t\t\twidth: 20px;\n\t\t\tmargin: 8px;\n\t\t\tbackground-size: 20px;\n\t\t\tbackground-repeat: no-repeat;\n\t\t\tbackground-position: center;\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\t}\n}\n\n// Mobile layout — uses MOBILE_SMALL_BREAKPOINT (512px), same as useIsSmallMobile()\n@media only screen and (max-width: 512px) {\n\t.profile-hover-card {\n\t\twidth: min(#{$card-width}, calc(100vw - 24px));\n\t\tmax-width: calc(100vw - 24px);\n\t\theight: auto;\n\t\tmin-height: 0;\n\t\tmax-height: min(80vh, 520px);\n\t\toverflow: auto;\n\n\t\t&__header {\n\t\t\theight: auto;\n\t\t\tmin-height: 112px;\n\n\t\t\t&__container {\n\t\t\t\talign-self: flex-end;\n\t\t\t\talign-items: flex-end;\n\t\t\t\tgap: 16px;\n\t\t\t\tmargin: 12px auto;\n\t\t\t\tpadding-inline: 12px;\n\n\t\t\t\t&__avatar {\n\t\t\t\t\talign-self: flex-end;\n\t\t\t\t}\n\n\t\t\t\t&__identity {\n\t\t\t\t\tgap: 6px;\n\t\t\t\t\tpadding-inline: 0;\n\t\t\t\t\t// Stack from the bottom: name, then pronouns, then status\n\t\t\t\t\tjustify-content: flex-end;\n\t\t\t\t}\n\n\t\t\t\t&__displayname {\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t\talign-items: flex-start;\n\t\t\t\t\tgap: 4px;\n\n\t\t\t\t\th2 {\n\t\t\t\t\t\tfont-size: 20px;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&__pronouns {\n\t\t\t\t\tfont-size: 16px;\n\t\t\t\t}\n\n\t\t\t\t&__pronoun-separator {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\n\t\t\t\t&__status-content {\n\t\t\t\t\tfont-size: 16px;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&__content {\n\t\t\tdisplay: block;\n\t\t\theight: auto;\n\t\t\tpadding-inline: 12px;\n\t\t\tpadding-block-end: 12px;\n\t\t}\n\n\t\t&__sidebar {\n\t\t\tmargin: unset;\n\t\t\twidth: auto;\n\t\t\tmin-width: 0;\n\t\t\tpadding-top: 0;\n\t\t}\n\n\t\t&__blocks {\n\t\t\twidth: unset;\n\t\t\tmargin: 0;\n\t\t\tpadding: 8px 4px 12px;\n\t\t}\n\n\t\t&__header,\n\t\t&__sidebar {\n\t\t\t:deep(.avatar.avatardiv) {\n\t\t\t\t.avatardiv__user-status {\n\t\t\t\t\tinset-inline-end: 0;\n\t\t\t\t\tbottom: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&__loading,\n\t\t&__error {\n\t\t\tmin-height: 200px;\n\t\t}\n\t}\n\n\t.user-actions {\n\t\twidth: unset;\n\t\tmax-width: none;\n\t\tmargin: 8px auto 0;\n\t\tpadding: 0 4px;\n\n\t\t&__primary {\n\t\t\twidth: 100% !important;\n\t\t\tmax-width: 220px;\n\t\t}\n\n\t\t&__other {\n\t\t\tflex-wrap: wrap;\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: 480px) {\n\t.profile-hover-card {\n\t\twidth: calc(100vw - 16px);\n\t\tmax-width: calc(100vw - 16px);\n\t\tborder-radius: var(--border-radius);\n\n\t\t&__header {\n\t\t\t&__container {\n\t\t\t\tgap: 8px;\n\t\t\t\tpadding-inline: 8px;\n\t\t\t}\n\t\t}\n\t}\n}\n</style>\n\n<docs>\n\n### Description\n\n`NcProfileHoverCard` is the **content** of a profile popover. It is not a trigger and does not wrap `NcPopover`.\n\nWhen `open` becomes `true`, the card loads the user's profile and user status itself.\nPass `profile` to skip the profile request.\nPass `preloadedUserStatus` to skip the status request (e.g. when `NcAvatar` already loaded it).\n\n`NcAvatar` already hosts this card on hover or focus for real users (unless `disable-menu` is set)\nand can pass contacts menu actions via `actions` / `actions-loading`.\nIf `actions` is omitted, actions from the profile API are used.\n\n### With NcAvatar\n\n```vue\n\t<NcAvatar user=\"alice\" display-name=\"Alice\" />\n```\n\n### Standalone as popover content\n\nBind `open` to the popover visibility so data is loaded only while the card is shown.\n\n```vue\n<template>\n\t<NcPopover v-model:shown=\"shown\"\n\t\t:triggers=\"['hover', 'focus', 'click']\"\n\t\t:popover-triggers=\"['hover']\"\n\t\t:delay=\"{ show: 400, hide: 200 }\"\n\t\tno-focus-trap\n\t\tpopup-role=\"dialog\">\n\t\t<template #trigger>\n\t\t\t<span tabindex=\"0\">Hover me</span>\n\t\t</template>\n\t\t<NcProfileHoverCard user=\"alice\" :open=\"shown\" />\n\t</NcPopover>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshown: false,\n\t\t}\n\t},\n}\n</script>\n```\n\n</docs>\n"],"names":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","_unref","_createVNode","_Fragment","_createBlock","_toDisplayString","_normalizeClass","_renderList","_resolveDynamicComponent","_createSlots","_createTextVNode"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4]}

package/dist/chunks/{NcProgressBar-C-ane-Ni.mjs → NcProgressBar.mjs}

@@ -1,7 +1,7 @@
-import '../assets/NcProgressBar-B6wveIA1.css';
+import '../assets/NcProgressBar.css';
 import { defineComponent, useCssVars, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode } from "vue";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-const _hoisted_1 = ["aria-valuenow"];
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
+const _hoisted_1 = ["aria-label", "aria-labelledby", "aria-describedby", "aria-valuenow"];
 const _hoisted_2 = ["height", "width"];
 const _hoisted_3 = ["stroke-dasharray", "stroke-dashoffset", "stroke-width", "r", "cx", "cy"];
 const _hoisted_4 = ["stroke-dasharray", "stroke-dashoffset", "stroke-width", "r", "cx", "cy"];
@@ -9,9 +9,10 @@ const _hoisted_5 = {
   key: 1,
   class: "progress-bar-container"
 };
-const _hoisted_6 = ["value"];
+const _hoisted_6 = ["aria-label", "aria-labelledby", "aria-describedby", "value"];
 const _hoisted_7 = {
   key: 0,
+  "aria-hidden": "true",
   class: "progress-bar__value"
 };
 const gridBaseline = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue("--default-grid-baseline"));
@@ -20,6 +21,9 @@ const clickableAreaSmall = Number.parseInt(window.getComputedStyle(document.body
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcProgressBar",
   props: {
+    ariaLabel: { default: void 0 },
+    ariaLabelledby: { default: void 0 },
+    ariaDescribedby: { default: void 0 },
     value: { default: 0 },
     size: { default: "small" },
     error: { type: Boolean },
@@ -29,8 +33,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v3a86fec2": _ctx.color,
-      "v57442460": heightPx.value
+      "v737c16c0": _ctx.color,
+      "v0630ed12": heightPx.value
     }));
     const props = __props;
     const normalizedProgress = computed(() => Math.max(0, Math.min(100, props.value)) / 100);
@@ -58,9 +62,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return __props.type === "circular" ? (openBlock(), createElementBlock("span", {
         key: 0,
-        role: "progressbar",
+        class: normalizeClass(["progress-bar progress-bar--circular", { "progress-bar--error": __props.error }]),
+        "aria-label": __props.ariaLabel,
+        "aria-labelledby": __props.ariaLabelledby,
+        "aria-describedby": __props.ariaDescribedby,
         "aria-valuenow": __props.value,
-        class: normalizeClass([{ "progress-bar--error": __props.error }, "progress-bar progress-bar--circular"])
+        role: "progressbar"
       }, [
         (openBlock(), createElementBlock("svg", {
           height: height.value,
@@ -90,6 +97,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       ], 10, _hoisted_1)) : (openBlock(), createElementBlock("div", _hoisted_5, [
         createElementVNode("progress", {
           class: normalizeClass(["progress-bar progress-bar--linear vue", { "progress-bar--error": __props.error }]),
+          "aria-label": __props.ariaLabel,
+          "aria-labelledby": __props.ariaLabelledby,
+          "aria-describedby": __props.ariaDescribedby,
           value: __props.value,
           max: "100"
         }, null, 10, _hoisted_6),
@@ -98,8 +108,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NcProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-353fa414"]]);
+const NcProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-461c5031"]]);
 export {
   NcProgressBar as N
 };
-//# sourceMappingURL=NcProgressBar-C-ane-Ni.mjs.map
+//# sourceMappingURL=NcProgressBar.mjs.map

package/dist/chunks/NcProgressBar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcProgressBar.mjs","sources":["../../src/components/NcProgressBar/NcProgressBar.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis is a simple progress bar component.\n## Usage:\n\n### Linear\n```vue\n<template>\n\t<span>\n\t\tSmall\n\t\t<NcProgressBar :value=\"20\" />\n\t\t<br />\n\t\tError\n\t\t<NcProgressBar :value=\"80\" :error=\"true\" />\n\t\t<br />\n\t\tCustom color\n\t\t<NcProgressBar :value=\"55\" size=\"medium\" color=\"green\" />\n\t\t<br />\n\t\tMedium size\n\t\t<NcProgressBar :value=\"60\" size=\"medium\" />\n\t\t<br />\n\t\tCustom size (changes the progress bar height)\n\t\t<NcProgressBar :value=\"55\" :size=\"8\" showValue />\n\t</span>\n</template>\n```\n\n### Circular\n```vue\n<template>\n\t<span>\n\t\tDefault\n\t\t<NcProgressBar type=\"circular\" :value=\"25\" />\n\t\t<br />\n\t\tColor\n\t\t<NcProgressBar type=\"circular\" :value=\"42\" color=\"green\" />\n\t\t<br />\n\t\tError\n\t\t<NcProgressBar type=\"circular\" :value=\"80\" error />\n\t\t<br />\n\t\tMedium size\n\t\t<NcProgressBar type=\"circular\" :value=\"65\" size=\"medium\" />\n\t\t<br />\n\t\tCustom size (changes the diameter of the progress bar)\n\t\t<NcProgressBar type=\"circular\" :value=\"65\" :size=\"42\" />\n\t</span>\n</template>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * The accessible label for the progressbar.\n\t */\n\tariaLabel?: string | undefined\n\n\t/**\n\t * The id of the element that labels the progressbar.\n\t */\n\tariaLabelledby?: string | undefined\n\n\t/**\n\t * The id of the element that describes the progressbar.\n\t */\n\tariaDescribedby?: string | undefined\n\n\t/**\n\t * An integer between 0 and 100\n\t */\n\tvalue?: number\n\n\t/**\n\t * Determines the height of the progressbar.\n\t */\n\tsize?: 'small' | 'medium' | number\n\n\t/**\n\t * Applies an error color to the progressbar if true.\n\t */\n\terror?: boolean\n\n\t/**\n\t * Progress bar variant\n\t */\n\ttype?: 'linear' | 'circular'\n\n\t/**\n\t * The color of the progress bar\n\t */\n\tcolor?: string\n\n\t/**\n\t * Show value at the end of progress bar (only for linear type)\n\t */\n\tshowValue?: boolean\n}>(), {\n\tariaLabel: undefined,\n\tariaLabelledby: undefined,\n\tariaDescribedby: undefined,\n\tvalue: 0,\n\tcolor: 'var(--color-primary-element)',\n\tsize: 'small',\n\ttype: 'linear',\n\tshowValue: false,\n})\n\nconst normalizedProgress = computed(() => Math.max(0, Math.min(100, props.value)) / 100)\n\nconst height = computed(() => {\n\tif (typeof props.size === 'number') {\n\t\treturn Math.round(props.size)\n\t}\n\n\t// circular type\n\tif (props.type === 'circular') {\n\t\tif (props.size === 'medium') {\n\t\t\treturn clickableArea\n\t\t} else {\n\t\t\treturn clickableAreaSmall\n\t\t}\n\t}\n\n\t// linear type\n\tif (props.size === 'medium') {\n\t\treturn 1.5 * gridBaseline\n\t}\n\treturn gridBaseline\n})\n\nconst heightPx = computed(() => `${height.value}px`)\n\n// Variables for the circlur progressbar\nconst strokeWidth = computed(() => Math.max(gridBaseline, height.value / clickableArea * gridBaseline))\nconst circleCenterPosition = computed(() => height.value / 2)\nconst circleRadius = computed(() => (height.value / 2) - strokeWidth.value)\nconst circumference = computed(() => circleRadius.value * 2 * Math.PI)\n</script>\n\n<script lang=\"ts\">\n// design constants\nconst gridBaseline = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-grid-baseline'))\nconst clickableArea = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-clickable-area'))\nconst clickableAreaSmall = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--clickable-area-small'))\n</script>\n\n<template>\n\t<span\n\t\tv-if=\"type === 'circular'\"\n\t\tclass=\"progress-bar progress-bar--circular\"\n\t\t:class=\"{ 'progress-bar--error': error }\"\n\t\t:aria-label\n\t\t:aria-labelledby\n\t\t:aria-describedby\n\t\t:aria-valuenow=\"value\"\n\t\trole=\"progressbar\">\n\t\t<svg\n\t\t\t:height=\"height\"\n\t\t\t:width=\"height\">\n\t\t\t<circle\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\t:stroke-dasharray=\"`${normalizedProgress * circumference} ${(1 - normalizedProgress) * circumference}`\"\n\t\t\t\t:stroke-dashoffset=\"0.25 * circumference\"\n\t\t\t\t:stroke-width\n\t\t\t\t:r=\"circleRadius\"\n\t\t\t\t:cx=\"circleCenterPosition\"\n\t\t\t\t:cy=\"circleCenterPosition\" />\n\t\t\t<circle\n\t\t\t\tstroke=\"var(--color-background-darker)\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\t:stroke-dasharray=\"`${(1 - normalizedProgress) * circumference} ${normalizedProgress * circumference}`\"\n\t\t\t\t:stroke-dashoffset=\"(0.25 - normalizedProgress) * circumference\"\n\t\t\t\t:stroke-width\n\t\t\t\t:r=\"circleRadius\"\n\t\t\t\t:cx=\"circleCenterPosition\"\n\t\t\t\t:cy=\"circleCenterPosition\" />\n\t\t</svg>\n\t</span>\n\t<div v-else class=\"progress-bar-container\">\n\t\t<progress\n\t\t\tclass=\"progress-bar progress-bar--linear vue\"\n\t\t\t:class=\"{ 'progress-bar--error': error }\"\n\t\t\t:aria-label\n\t\t\t:aria-labelledby\n\t\t\t:aria-describedby\n\t\t\t:value\n\t\t\tmax=\"100\" />\n\n\t\t<span v-if=\"showValue\" aria-hidden=\"true\" class=\"progress-bar__value\">{{ value }}%</span>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n\n.progress-bar {\n\tdisplay: block;\n\theight: var(--progress-bar-height);\n\n\t--progress-bar-color: v-bind(color);\n\t--progress-bar-height: v-bind(heightPx);\n\n\t&--linear {\n\t\twidth: 100%;\n\t\toverflow: hidden;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tbackground: var(--color-background-dark);\n\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\n\t\t// Browser specific rules\n\t\t&::-webkit-progress-bar {\n\t\t\theight: var(--progress-bar-height);\n\t\t\tbackground-color: transparent;\n\t\t}\n\t\t&::-webkit-progress-value {\n\t\t\tbackground: var(--progress-bar-color, var(--gradient-primary-background));\n\t\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\t\t}\n\t\t&::-moz-progress-bar {\n\t\t\tbackground: var(--progress-bar-color, var(--gradient-primary-background));\n\t\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\t\t}\n\t}\n\t&--circular {\n\t\twidth: var(--progress-bar-height);\n\t\tcolor: var(--progress-bar-color);\n\t}\n\t&--error {\n\t\tcolor: var(--color-text-error, var(--color-error)) !important;\n\t\t// Override previous values\n\t\t&::-moz-progress-bar {\n\t\t\tbackground: var(--color-text-error, var(--color-error)) !important;\n\t\t}\n\t\t&::-webkit-progress-value {\n\t\t\tbackground: var(--color-text-error, var(--color-error)) !important;\n\t\t}\n\t}\n\n\t&-container {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: calc(2 * var(--default-grid-baseline));\n\t}\n\n\t&__value {\n\t\tfont-size: var(--font-size-small, 13px);\n\t\tfont-variant-numeric: tabular-nums;\n\t\tmin-width: 4ch;\n\t\ttext-align: end;\n\t}\n}\n\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_openBlock","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;;AAmJA,MAAM,eAAe,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,yBAAyB,CAAC;AACvH,MAAM,gBAAgB,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,0BAA0B,CAAC;AACzH,MAAM,qBAAqB,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,wBAAwB,CAAC;;;;;;;;;;;;;;;;;;;AA5F5H,UAAM,QAAQ;AAwDd,UAAM,qBAAqB,SAAS,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,MAAM,KAAK,CAAC,IAAI,GAAG;AAEvF,UAAM,SAAS,SAAS,MAAM;AAC7B,UAAI,OAAO,MAAM,SAAS,UAAU;AACnC,eAAO,KAAK,MAAM,MAAM,IAAI;AAAA,MAC7B;AAGA,UAAI,MAAM,SAAS,YAAY;AAC9B,YAAI,MAAM,SAAS,UAAU;AAC5B,iBAAO;AAAA,QACR,OAAO;AACN,iBAAO;AAAA,QACR;AAAA,MACD;AAGA,UAAI,MAAM,SAAS,UAAU;AAC5B,eAAO,MAAM;AAAA,MACd;AACA,aAAO;AAAA,IACR,CAAC;AAED,UAAM,WAAW,SAAS,MAAM,GAAG,OAAO,KAAK,IAAI;AAGnD,UAAM,cAAc,SAAS,MAAM,KAAK,IAAI,cAAc,OAAO,QAAQ,gBAAgB,YAAY,CAAC;AACtG,UAAM,uBAAuB,SAAS,MAAM,OAAO,QAAQ,CAAC;AAC5D,UAAM,eAAe,SAAS,MAAO,OAAO,QAAQ,IAAK,YAAY,KAAK;AAC1E,UAAM,gBAAgB,SAAS,MAAM,aAAa,QAAQ,IAAI,KAAK,EAAE;;aAY7D,QAAA,SAAI,2BADXA,mBA+BO,QAAA;AAAA;QA7BN,OAAKC,eAAA,CAAC,uCAAqC,EAAA,uBACV,QAAA,MAAA,CAAK,CAAA;AAAA,QACrC,cAAA,QAAA;AAAA,QACA,mBAAA,QAAA;AAAA,QACA,oBAAA,QAAA;AAAA,QACA,iBAAe,QAAA;AAAA,QAChB,MAAK;AAAA,MAAA;sBACLD,mBAqBM,OAAA;AAAA,UApBJ,QAAQ,OAAA;AAAA,UACR,OAAO,OAAA;AAAA,QAAA;UACRE,mBAQ8B,UAAA;AAAA,YAP7B,QAAO;AAAA,YACP,MAAK;AAAA,YACJ,uBAAqB,mBAAA,QAAqB,mBAAa,KAAA,IAAS,mBAAA,SAAsB,cAAA,KAAa;AAAA,YACnG,4BAA0B,cAAA;AAAA,YAC1B,gBAAA,YAAA;AAAA,YACA,GAAG,aAAA;AAAA,YACH,IAAI,qBAAA;AAAA,YACJ,IAAI,qBAAA;AAAA,UAAA;UACNA,mBAQ8B,UAAA;AAAA,YAP7B,QAAO;AAAA,YACP,MAAK;AAAA,YACJ,4BAA0B,mBAAA,SAAsB,mBAAa,IAAI,mBAAA,QAAqB,cAAA,KAAa;AAAA,YACnG,sBAAiB,OAAU,mBAAA,SAAsB,cAAA;AAAA,YACjD,gBAAA,YAAA;AAAA,YACA,GAAG,aAAA;AAAA,YACH,IAAI,qBAAA;AAAA,YACJ,IAAI,qBAAA;AAAA,UAAA;;6BAGRC,aAAAH,mBAWM,OAXN,YAWM;AAAA,QAVLE,mBAOa,YAAA;AAAA,UANZ,OAAKD,eAAA,CAAC,yCAAuC,EAAA,uBACZ,QAAA,MAAA,CAAK,CAAA;AAAA,UACrC,cAAA,QAAA;AAAA,UACA,mBAAA,QAAA;AAAA,UACA,oBAAA,QAAA;AAAA,UACA,OAAA,QAAA;AAAA,UACD,KAAI;AAAA,QAAA;QAEO,QAAA,aAAZE,UAAA,GAAAH,mBAAyF,QAAzF,YAAyFI,gBAAhB,QAAA,KAAK,IAAG,KAAC,CAAA;;;;;;"}

package/dist/chunks/{NcRadioGroup-B4qmS2UD.mjs → NcRadioGroup.mjs}

@@ -1,9 +1,9 @@
-import '../assets/NcRadioGroup-CtXZ4Y8D.css';
+import '../assets/NcRadioGroup.css';
 import { defineComponent, useModel, ref, provide, computed, warn, openBlock, createBlock, withCtx, renderSlot, createElementBlock, normalizeClass, mergeModels } from "vue";
-import { N as NcFormBox } from "./NcFormBox-Bmqar8nn.mjs";
-import { N as NcFormGroup } from "./NcFormGroup-N7qIFAwN.mjs";
-import { I as INSIDE_RADIO_GROUP_KEY } from "./useNcRadioGroup-D6llQmAl.mjs";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { N as NcFormBox } from "./NcFormBox.mjs";
+import { N as NcFormGroup } from "./NcFormGroup.mjs";
+import { I as INSIDE_RADIO_GROUP_KEY } from "./useNcRadioGroup.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcRadioGroup",
   props: /* @__PURE__ */ mergeModels({
@@ -60,9 +60,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const radioGroup_checkboxRadioContainer = "_radioGroup_checkboxRadioContainer_8C8Ku";
+const radioGroup_checkboxRadioContainer = "_radioGroup_checkboxRadioContainer_AUPA7";
 const style0 = {
-  "material-design-icon": "_material-design-icon_Mmjja",
+  "material-design-icon": "_material-design-icon_TUacq",
   radioGroup_checkboxRadioContainer
 };
 const cssModules = {
@@ -72,4 +72,4 @@ const NcRadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cs
 export {
   NcRadioGroup as N
 };
-//# sourceMappingURL=NcRadioGroup-B4qmS2UD.mjs.map
+//# sourceMappingURL=NcRadioGroup.mjs.map

package/dist/chunks/NcRadioGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcRadioGroup.mjs","sources":["../../src/components/NcRadioGroup/NcRadioGroup.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { computed, provide, ref, warn } from 'vue'\nimport NcFormBox from '../NcFormBox/NcFormBox.vue'\nimport NcFormGroup from '../NcFormGroup/NcFormGroup.vue'\nimport { INSIDE_RADIO_GROUP_KEY } from './useNcRadioGroup.ts'\n\nconst modelValue = defineModel<string>({ required: false, default: '' })\n\ndefineProps<{\n\t/**\n\t * Label of the radio group (accessible name).\n\t * It can be hidden visually if needed using `hide-label` prop.\n\t */\n\tlabel: string\n\n\t/**\n\t * If set the label of the button group will not be shown visually but only for accessibility purposes.\n\t *\n\t * @deprecated Use `hide-label` instead.\n\t */\n\tlabelHidden?: boolean\n\n\t/**\n\t * If set the label of the button group will not be shown visually but only for accessibility purposes.\n\t */\n\thideLabel?: boolean\n\n\t/**\n\t * Optional visual description of the radio group.\n\t */\n\tdescription?: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * Slot for the included radio buttons (`NcCheckboxRadioSwitch`).\n\t * The `type` prop of the `NcCheckboxRadioSwitch` will be automatically set (and forced) to `radio`.\n\t *\n\t * If you want the button variant, then you have to use `NcRadioGroupButton`.\n\t */\n\tdefault?: Slot\n}>()\n\nconst buttonVariant = ref<boolean>()\n\nprovide(INSIDE_RADIO_GROUP_KEY, computed(() => ({\n\tregister,\n\tmodelValue: modelValue.value,\n\tonUpdate,\n})))\n\n/**\n * Register a child component\n *\n * @param isButton - Whether the registered child component is a button or normal radio\n */\nfunction register(isButton: boolean): void {\n\tif (buttonVariant.value !== undefined && buttonVariant.value !== isButton) {\n\t\twarn('[NcRadioGroup] Mixing NcCheckboxRadioSwitch and NcRadioGroupButton is not possible!')\n\t}\n\tbuttonVariant.value = isButton\n}\n\n/**\n * Handle updating the current model value\n *\n * @param value - The new value\n */\nfunction onUpdate(value: string) {\n\tmodelValue.value = value\n}\n</script>\n\n<template>\n\t<NcFormGroup\n\t\t:label\n\t\t:description\n\t\t:hideLabel=\"labelHidden || hideLabel\">\n\t\t<NcFormBox v-if=\"buttonVariant\" row>\n\t\t\t<slot />\n\t\t</NcFormBox>\n\t\t<span v-else :class=\"$style.radioGroup_checkboxRadioContainer\">\n\t\t\t<slot />\n\t\t</span>\n\t</NcFormGroup>\n</template>\n\n<style module lang=\"scss\">\n.radioGroup_checkboxRadioContainer :global(.checkbox-content) {\n\tmax-width: unset !important;\n}\n</style>\n\n<docs>\n## Usage example\n\n### Grouping multiple radio buttons\n\nThe radio group allows to group radio buttons into semantical groups.\nThe `v-model` only needs to be bound to the group component, also the `type` will automatically be set to `radio`.\n\n```vue\n<template>\n\t<NcRadioGroup v-model=\"selectedSides\" class=\"radio-group\" label=\"Sides\" description=\"Please choose the sides for your menu.\">\n\t\t<NcCheckboxRadioSwitch value=\"fries\">\n\t\t\tFries\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch value=\"salad\">\n\t\t\tSalad\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch value=\"none\">\n\t\t\tNothing\n\t\t</NcCheckboxRadioSwitch>\n\t</NcRadioGroup>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tselectedSides: 'none',\n\t\t}\n\t},\n}\n</script>\n\n<style scoped>\n.radio-group {\n\tmax-width: 400px\n}\n</style>\n```\n\n### Radio buttons with button styling\n\nThe radio group also allows to create a button like styling together with the `NcRadioGroupButton` component:\n\n```vue\n<template>\n\t<div>\n\t\t<h4>With text labels</h4>\n\t\t<div style=\"max-width: 400px\">\n\t\t\t<NcRadioGroup v-model=\"alignment\" label=\"Example alignment\" hide-label>\n\t\t\t\t<NcRadioGroupButton label=\"Start\" value=\"start\" />\n\t\t\t\t<NcRadioGroupButton label=\"Center\" value=\"center\" />\n\t\t\t\t<NcRadioGroupButton label=\"End\" value=\"end\" />\n\t\t\t</NcRadioGroup>\n\t\t</div>\n\n\t\t<br>\n\n\t\t<h4>With icons</h4>\n\t\t<div style=\"max-width: 250px\">\n\t\t\t<NcRadioGroup v-model=\"alignment\" label=\"Example alignment with icons\" hide-label>\n\t\t\t\t<NcRadioGroupButton aria-label=\"Start\" value=\"start\" disabled>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiAlignHorizontalLeft\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t<NcRadioGroupButton aria-label=\"Center\" value=\"center\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiAlignHorizontalCenter\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t<NcRadioGroupButton aria-label=\"End\" value=\"end\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiAlignHorizontalRight\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t</NcRadioGroup>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { mdiAlignHorizontalCenter, mdiAlignHorizontalLeft, mdiAlignHorizontalRight } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiAlignHorizontalCenter,\n\t\t\tmdiAlignHorizontalLeft,\n\t\t\tmdiAlignHorizontalRight,\n\t\t}\n\t},\n\tdata() {\n\t\treturn {\n\t\t\talignment: 'center',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n"],"names":["_useModel","_createBlock","_renderSlot","_createElementBlock","_normalizeClass","$style"],"mappings":";;;;;;;;;;;;;;;;;;AAaA,UAAM,aAAaA,SAAmB,SAAA,YAAiC;AAqCvE,UAAM,gBAAgB,IAAA;AAEtB,YAAQ,wBAAwB,SAAS,OAAO;AAAA,MAC/C;AAAA,MACA,YAAY,WAAW;AAAA,MACvB;AAAA,IAAA,EACC,CAAC;AAOH,aAAS,SAAS,UAAyB;AAC1C,UAAI,cAAc,UAAU,UAAa,cAAc,UAAU,UAAU;AAC1E,aAAK,qFAAqF;AAAA,MAC3F;AACA,oBAAc,QAAQ;AAAA,IACvB;AAOA,aAAS,SAAS,OAAe;AAChC,iBAAW,QAAQ;AAAA,IACpB;;0BAICC,YAUc,aAAA;AAAA,QATZ,OAAA,QAAA;AAAA,QACA,aAAA,QAAA;AAAA,QACA,WAAW,QAAA,eAAe,QAAA;AAAA,MAAA;yBAC3B,MAEY;AAAA,UAFK,cAAA,sBAAjBA,YAEY,WAAA;AAAA;YAFoB,KAAA;AAAA,UAAA;6BAC/B,MAAQ;AAAA,cAARC,WAAQ,KAAA,QAAA,SAAA;AAAA,YAAA;;8BAETC,mBAEO,QAAA;AAAA;YAFO,OAAKC,eAAEC,KAAAA,OAAO,iCAAiC;AAAA,UAAA;YAC5DH,WAAQ,KAAA,QAAA,SAAA;AAAA,UAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcRadioGroupButton-CZykGwv3.mjs → NcRadioGroupButton.mjs}

@@ -1,9 +1,9 @@
-import '../assets/NcRadioGroupButton-BuB-aWeJ.css';
+import '../assets/NcRadioGroupButton.css';
 import { defineComponent, onMounted, computed, openBlock, createElementBlock, normalizeClass, unref, renderSlot, createCommentVNode, toDisplayString, createElementVNode } from "vue";
-import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
-import { u as useNcFormBox } from "./useNcFormBox-Djlh582y.mjs";
-import { u as useInsideRadioGroup } from "./useNcRadioGroup-D6llQmAl.mjs";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { c as createElementId } from "./createElementId.mjs";
+import { u as useNcFormBox } from "./useNcFormBox.mjs";
+import { u as useInsideRadioGroup } from "./useNcRadioGroup.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
 const _hoisted_1 = ["id"];
 const _hoisted_2 = ["aria-labelledby", "aria-label", "checked", "disabled", "value"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -60,13 +60,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const radioGroupButton = "_radioGroupButton_68Is2";
-const radioGroupButton__label = "_radioGroupButton__label_KtgfH";
-const radioGroupButton__icon = "_radioGroupButton__icon_ob6sk";
-const radioGroupButton_disabled = "_radioGroupButton_disabled_fGQyO";
-const radioGroupButton_active = "_radioGroupButton_active_rIE5T";
+const radioGroupButton = "_radioGroupButton_YNoo0";
+const radioGroupButton__label = "_radioGroupButton__label_8W6-c";
+const radioGroupButton__icon = "_radioGroupButton__icon_lPjNx";
+const radioGroupButton_disabled = "_radioGroupButton_disabled_8uxSh";
+const radioGroupButton_active = "_radioGroupButton_active_qTVBh";
 const style0 = {
-  "material-design-icon": "_material-design-icon_4nAOE",
+  "material-design-icon": "_material-design-icon_L0tBR",
   radioGroupButton,
   radioGroupButton__label,
   radioGroupButton__icon,
@@ -80,4 +80,4 @@ const NcRadioGroupButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModule
 export {
   NcRadioGroupButton as N
 };
-//# sourceMappingURL=NcRadioGroupButton-CZykGwv3.mjs.map
+//# sourceMappingURL=NcRadioGroupButton.mjs.map

package/dist/chunks/NcRadioGroupButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcRadioGroupButton.mjs","sources":["../../src/components/NcRadioGroupButton/NcRadioGroupButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { computed, onMounted } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { useNcFormBox } from '../NcFormBox/useNcFormBox.ts'\nimport { useInsideRadioGroup } from '../NcRadioGroup/useNcRadioGroup.ts'\n\nconst props = defineProps<{\n\t/**\n\t * Non visible label for accessibility when no `label` is passed.\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * The visual label of the radio button\n\t */\n\tlabel?: string\n\n\t/**\n\t * The value that should be assigned to the `modelValue` of the `NcRadioGroup`.\n\t */\n\tvalue: string\n\n\t/**\n\t * Disabled state of the radio button\n\t */\n\tdisabled?: boolean\n}>()\n\ndefineSlots<{\n\t/**\n\t * Optional icon slot\n\t */\n\ticon?: Slot\n}>()\n\nconst labelId = createElementId()\nconst radioGroup = useInsideRadioGroup()\nconst { formBoxItemClass } = useNcFormBox()\n\nonMounted(() => radioGroup!.value.register(true))\n\nconst isChecked = computed(() => radioGroup?.value.modelValue === props.value)\n\n/**\n * Handle updating the current model value\n */\nfunction onUpdate() {\n\tif (props.disabled) {\n\t\treturn\n\t}\n\n\tradioGroup!.value.onUpdate(props.value)\n}\n</script>\n\n<template>\n\t<div\n\t\t:class=\"[{\n\t\t\t[$style.radioGroupButton_active]: isChecked,\n\t\t\t[$style.radioGroupButton_disabled]: disabled,\n\t\t}, $style.radioGroupButton, formBoxItemClass]\"\n\t\t@click=\"onUpdate\">\n\t\t<div v-if=\"$slots.icon\" :class=\"$style.radioGroupButton__icon\">\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\n\t\t<div v-if=\"label\" :id=\"labelId\" :class=\"$style.radioGroupButton__label\">\n\t\t\t{{ label }}\n\t\t</div>\n\n\t\t<input\n\t\t\t:aria-labelledby=\"label ? labelId : undefined\"\n\t\t\t:aria-label=\"label ? undefined : ariaLabel\"\n\t\t\tclass=\"hidden-visually\"\n\t\t\t:checked=\"isChecked\"\n\t\t\ttype=\"radio\"\n\t\t\t:disabled\n\t\t\t:value\n\t\t\t@input=\"onUpdate\">\n\t</div>\n</template>\n\n<style module lang=\"scss\">\n.radioGroupButton {\n\t--radio-group-button--border-radius: var(--border-radius-small);\n\t--radio-group-button--border-width: 1px;\n\t--radio-group-button--color: var(--color-primary-element-light-text);\n\t--radio-group-button--background-color: var(--color-primary-element-light);\n\t--radio-group-button--background-color-hover: var(--color-primary-element-light-hover);\n\t--radio-group-button--padding: 1px;\n\tcursor: pointer;\n\tcolor: var(--radio-group-button--color);\n\tbackground-color: var(--radio-group-button--background-color);\n\twill-change: transform;\n\ttransition-property: color, background-color, transform;\n\ttransition-duration: var(--animation-quick);\n\tborder: var(--radio-group-button--border-width) solid var(--radio-group-button--background-color-hover);\n\tborder-bottom-width: 2px;\n\tborder-radius: var(--radio-group-button--border-radius);\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: center;\n\ttext-align: center;\n\tmin-height: var(--default-clickable-area);\n\t// ensure that the content is centered because of uneven border\n\tpadding-block: var(--radio-group-button--padding) 0;\n\tpadding-inline: var(--radio-group-button--padding);\n\n\t* {\n\t\tcursor: pointer;\n\t}\n\n\t&:has(&__label) {\n\t\tpadding-inline: calc(var(--radio-group-button--padding) + var(--border-radius-element));\n\t}\n\n\t&:has(&__icon) {\n\t\tpadding-inline-start: var(--radio-group-button--padding);\n\t}\n\n\t&:hover:not(.radioGroupButton_disabled) {\n\t\tbackground-color: var(--radio-group-button--background-color-hover);\n\t}\n\n\t&:active:not(.radioGroupButton_disabled) {\n\t\t// TODO: add to theming with animation initiative\n\t\ttransform: scale(0.985);\n\t}\n\n\t&:focus-within {\n\t\t--radio-group-button--border-width: 2px;\n\t\t--radio-group-button--padding: 0px;\n\t\tborder: var(--radio-group-button--border-width) solid var(--color-main-text) !important;\n\t\toutline: calc(var(--default-grid-baseline) / 2) var(--color-main-background);\n\t}\n}\n\n.radioGroupButton_active {\n\t--radio-group-button--color: var(--color-primary-element-text);\n\t--radio-group-button--background-color: var(--color-primary-element);\n\t--radio-group-button--background-color-hover: var(--color-primary-element-hover);\n}\n\n.radioGroupButton__label {\n\tfont-weight: var(--font-weight-element, bold);\n}\n\n.radioGroupButton_disabled {\n\tfilter: saturate($opacity_normal);\n\topacity: $opacity_disabled;\n\n\t// Reset the cursor\n\tcursor: default;\n\t* {\n\t\tcursor: default;\n\t}\n}\n\n.radioGroupButton__icon {\n\t--radio-group-button--icon-size: calc(var(--default-clickable-area) - 4px);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n\twidth: var(--radio-group-button--icon-size);\n\n\t// make sure the icon is a bit smaller to account for border\n\t* {\n\t\t--default-clickable-area: var(--radio-group-button--icon-size);\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_unref","$slots","_renderSlot","_createElementVNode"],"mappings":";;;;;;;;;;;;;;;;AAaA,UAAM,QAAQ;AA6Bd,UAAM,UAAU,gBAAA;AAChB,UAAM,aAAa,oBAAA;AACnB,UAAM,EAAE,iBAAA,IAAqB,aAAA;AAE7B,cAAU,MAAM,WAAY,MAAM,SAAS,IAAI,CAAC;AAEhD,UAAM,YAAY,SAAS,MAAM,YAAY,MAAM,eAAe,MAAM,KAAK;AAK7E,aAAS,WAAW;AACnB,UAAI,MAAM,UAAU;AACnB;AAAA,MACD;AAEA,iBAAY,MAAM,SAAS,MAAM,KAAK;AAAA,IACvC;;0BAICA,mBAuBM,OAAA;AAAA,QAtBJ,OAAKC,eAAA,CAAA;AAAA,WAASC,KAAAA,OAAO,uBAAuB,GAAG,UAAA;AAAA,WAAeA,KAAAA,OAAO,yBAAyB,GAAG,QAAA;AAAA,QAAA,GAAeA,KAAAA,OAAO,kBAAkBC,MAAA,gBAAA,CAAgB,CAAA;AAAA,QAIzJ,SAAO;AAAA,MAAA;QACGC,KAAAA,OAAO,qBAAlBJ,mBAEM,OAAA;AAAA;UAFmB,OAAKC,eAAEC,KAAAA,OAAO,sBAAsB;AAAA,QAAA;UAC5DG,WAAoB,KAAA,QAAA,MAAA;AAAA,QAAA;QAGV,QAAA,sBAAXL,mBAEM,OAAA;AAAA;UAFa,IAAIG,MAAA,OAAA;AAAA,UAAU,OAAKF,eAAEC,KAAAA,OAAO,uBAAuB;AAAA,QAAA,mBAClE,QAAA,KAAK,GAAA,IAAA,UAAA;QAGTI,mBAQmB,SAAA;AAAA,UAPjB,mBAAiB,QAAA,QAAQH,MAAA,OAAA,IAAU;AAAA,UACnC,cAAY,QAAA,QAAQ,SAAY,QAAA;AAAA,UACjC,OAAM;AAAA,UACL,SAAS,UAAA;AAAA,UACV,MAAK;AAAA,UACJ,UAAA,QAAA;AAAA,UACA,OAAA,QAAA;AAAA,UACA,SAAO;AAAA,QAAA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcReferenceWidget.mjs

@@ -0,0 +1,292 @@
+import '../assets/NcReferenceWidget.css';
+import { defineComponent, inject, ref, useTemplateRef, nextTick, computed, watch, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, withKeys, withModifiers, unref, createCommentVNode, createBlock, resolveDynamicComponent, mergeProps, withCtx, toDisplayString, createTextVNode } from "vue";
+import { useElementSize, useIntersectionObserver } from "@vueuse/core";
+import { routerKey, RouterLink } from "vue-router";
+import { N as NcButton } from "./NcButton.mjs";
+import { r as register, m as t25, a as t } from "./_l10n.mjs";
+import { c as createElementId } from "./createElementId.mjs";
+import { b as hasFullWidth, c as isResizable, i as isWidgetRegistered, h as hasInteractiveView, a as renderWidget, d as destroyWidget } from "./widgets.mjs";
+import { g as getRoute } from "./autolink.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
+register(t25);
+const _hoisted_1 = ["aria-label", "aria-valuenow", "aria-valuemin", "aria-valuemax"];
+const _hoisted_2 = ["src"];
+const _hoisted_3 = { class: "widget-default--details" };
+const _hoisted_4 = { class: "widget-default--name" };
+const _hoisted_5 = { class: "widget-default--link" };
+const IDLE_TIMEOUT = 3 * 60 * 1e3;
+const RESIZE_KEYBOARD_STEP = 10;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcReferenceWidget",
+  props: {
+    reference: {},
+    interactive: { type: Boolean, default: true },
+    interactiveOptIn: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const router = inject(routerKey, null);
+    const widgetId = `nc-reference-widget-${createElementId()}`;
+    const isVisible = ref(false);
+    const customWidget = useTemplateRef("customWidget");
+    const customWidgetContent = useTemplateRef("customWidgetContent");
+    const widgetRoot = useTemplateRef("widgetRoot");
+    const { width } = useElementSize(widgetRoot);
+    const { height: customWidgetHeight } = useElementSize(customWidget);
+    useIntersectionObserver(widgetRoot, ([entry]) => {
+      nextTick(() => {
+        isVisible.value = entry.isIntersecting;
+      });
+    });
+    const showInteractive = ref(false);
+    const rendered = ref(false);
+    let idleTimeout = null;
+    const isResizing = ref(false);
+    const resizedHeight = ref(null);
+    const resizeStartY = ref(0);
+    const resizeStartHeight = ref(0);
+    const resizeMinHeight = ref(100);
+    const resizeMaxHeight = ref(window.innerHeight - 120);
+    const isInteractive = computed(() => {
+      return !props.interactiveOptIn && props.interactive || showInteractive.value;
+    });
+    const referenceHasFullWidth = computed(() => {
+      return hasFullWidth(props.reference.richObjectType);
+    });
+    const isWidgetResizable = computed(() => {
+      return isResizable(props.reference.richObjectType);
+    });
+    const hasCustomWidget = computed(() => {
+      return isWidgetRegistered(props.reference.richObjectType);
+    });
+    const customWidgetStyle = computed(() => {
+      if (!resizedHeight.value) {
+        return null;
+      }
+      return { height: `${resizedHeight.value}px !important` };
+    });
+    const ariaValueNow = computed(() => {
+      return Math.round(resizedHeight.value ?? customWidgetHeight.value);
+    });
+    const referenceHasInteractiveView = computed(() => {
+      return hasCustomWidget.value && hasInteractiveView(props.reference.richObjectType);
+    });
+    const noAccess = computed(() => {
+      return !props.reference.accessible;
+    });
+    const numberOfLines = computed(() => {
+      const lineCountOffsets = [450, 550, 650, Infinity];
+      return lineCountOffsets.findIndex((max) => width.value < max);
+    });
+    const descriptionStyle = computed(() => {
+      if (numberOfLines.value === 0) {
+        return {
+          display: "none"
+        };
+      }
+      const lineClamp = numberOfLines.value;
+      return {
+        lineClamp,
+        webkitLineClamp: lineClamp
+      };
+    });
+    const compactLink = computed(() => {
+      const link = props.reference.openGraphObject.link;
+      if (!link) {
+        return "";
+      }
+      if (link.startsWith("https://")) {
+        return link.substring(8);
+      }
+      if (link.startsWith("http://")) {
+        return link.substring(7);
+      }
+      return link;
+    });
+    const route = computed(() => {
+      return getRoute(router, props.reference.openGraphObject.link);
+    });
+    const referenceWidgetLinkComponent = computed(() => {
+      return route.value ? RouterLink : "a";
+    });
+    const referenceWidgetLinkProps = computed(() => {
+      return route.value ? { to: route.value } : { href: props.reference.openGraphObject.link, target: "_blank" };
+    });
+    watch(isVisible, (val) => {
+      if (!val) {
+        idleTimeout = setTimeout(() => {
+          if (!isVisible.value) {
+            destroyReferenceWidget();
+          }
+        }, IDLE_TIMEOUT);
+        return;
+      }
+      if (idleTimeout) {
+        clearTimeout(idleTimeout);
+        idleTimeout = null;
+      }
+      if (!rendered.value) {
+        renderReferenceWidget();
+      }
+    }, { immediate: true });
+    onBeforeUnmount(() => {
+      if (idleTimeout) {
+        clearTimeout(idleTimeout);
+        idleTimeout = null;
+      }
+      stopResize();
+      destroyReferenceWidget();
+    });
+    function enableInteractive() {
+      showInteractive.value = true;
+      renderReferenceWidget();
+    }
+    function renderReferenceWidget() {
+      if (!customWidgetContent.value) {
+        return;
+      }
+      if (props.reference.richObjectType === "open-graph") {
+        return;
+      }
+      customWidgetContent.value.innerHTML = "";
+      const widget = document.createElement("div");
+      widget.style.width = "100%";
+      customWidgetContent.value.appendChild(widget);
+      nextTick(() => {
+        renderWidget(widget, {
+          ...props.reference,
+          interactive: isInteractive.value
+        });
+        rendered.value = true;
+      });
+    }
+    function destroyReferenceWidget() {
+      if (rendered.value && widgetRoot.value) {
+        destroyWidget(props.reference.richObjectType, widgetRoot.value);
+        rendered.value = false;
+      }
+    }
+    function initResizeLimits() {
+      const widgetEl = customWidgetContent.value?.firstElementChild;
+      if (widgetEl) {
+        const computedStyle = window.getComputedStyle(widgetEl);
+        const parsedMin = parseFloat(computedStyle.minHeight);
+        const parsedMax = parseFloat(computedStyle.maxHeight);
+        resizeMinHeight.value = parsedMin > 0 ? parsedMin : 100;
+        resizeMaxHeight.value = Number.isFinite(parsedMax) && parsedMax > 0 ? parsedMax : window.innerHeight - 120;
+      } else {
+        resizeMinHeight.value = 100;
+        resizeMaxHeight.value = window.innerHeight - 120;
+      }
+    }
+    function startResize(event) {
+      if (!isWidgetResizable.value || !customWidget.value) {
+        return;
+      }
+      initResizeLimits();
+      isResizing.value = true;
+      resizeStartY.value = event.clientY;
+      resizeStartHeight.value = customWidget.value.getBoundingClientRect().height;
+      window.addEventListener("pointermove", onResize);
+      window.addEventListener("pointerup", stopResize);
+    }
+    function onResizeKeydown(delta) {
+      if (!isWidgetResizable.value || !customWidget.value) {
+        return;
+      }
+      initResizeLimits();
+      const currentHeight = resizedHeight.value ?? resizeStartHeight.value;
+      const next = currentHeight + delta;
+      resizedHeight.value = Math.min(resizeMaxHeight.value, Math.max(resizeMinHeight.value, next));
+    }
+    function onResize(event) {
+      if (!isResizing.value || !customWidget.value) {
+        return;
+      }
+      const deltaY = event.clientY - resizeStartY.value;
+      resizedHeight.value = Math.min(resizeMaxHeight.value, Math.max(resizeMinHeight.value, resizeStartHeight.value + deltaY));
+    }
+    function stopResize() {
+      if (!isResizing.value) {
+        return;
+      }
+      isResizing.value = false;
+      window.removeEventListener("pointermove", onResize);
+      window.removeEventListener("pointerup", stopResize);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "widgetRoot",
+        ref: widgetRoot,
+        class: normalizeClass({ "toggle-interactive": referenceHasInteractiveView.value && !isInteractive.value })
+      }, [
+        __props.reference && hasCustomWidget.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          id: widgetId,
+          ref_key: "customWidget",
+          ref: customWidget,
+          class: normalizeClass(["widget-custom", { "full-width": referenceHasFullWidth.value }]),
+          style: normalizeStyle(customWidgetStyle.value)
+        }, [
+          createElementVNode("div", {
+            ref_key: "customWidgetContent",
+            ref: customWidgetContent,
+            class: "widget-custom__content"
+          }, null, 512),
+          isWidgetResizable.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "widget-custom__resize-handle",
+            role: "slider",
+            tabindex: "0",
+            "aria-orientation": "vertical",
+            "aria-label": unref(t)("Widget height"),
+            "aria-valuenow": ariaValueNow.value,
+            "aria-valuemin": resizeMinHeight.value,
+            "aria-valuemax": resizeMaxHeight.value,
+            "aria-controls": widgetId,
+            onPointerdown: withModifiers(startResize, ["stop", "prevent"]),
+            onKeydown: [
+              _cache[0] || (_cache[0] = withKeys(withModifiers(($event) => onResizeKeydown(-RESIZE_KEYBOARD_STEP), ["stop", "prevent"]), ["up"])),
+              _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => onResizeKeydown(RESIZE_KEYBOARD_STEP), ["stop", "prevent"]), ["down"]))
+            ]
+          }, null, 40, _hoisted_1)) : createCommentVNode("", true)
+        ], 6)) : !noAccess.value && __props.reference && __props.reference.openGraphObject && !hasCustomWidget.value ? (openBlock(), createBlock(resolveDynamicComponent(referenceWidgetLinkComponent.value), mergeProps({ key: 1 }, referenceWidgetLinkProps.value, {
+          rel: "noopener noreferrer",
+          class: "widget-default"
+        }), {
+          default: withCtx(() => [
+            __props.reference.openGraphObject.thumb ? (openBlock(), createElementBlock("img", {
+              key: 0,
+              class: "widget-default--image",
+              src: __props.reference.openGraphObject.thumb
+            }, null, 8, _hoisted_2)) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_3, [
+              createElementVNode("p", _hoisted_4, toDisplayString(__props.reference.openGraphObject.name), 1),
+              createElementVNode("p", {
+                class: "widget-default--description",
+                style: normalizeStyle(descriptionStyle.value)
+              }, toDisplayString(__props.reference.openGraphObject.description), 5),
+              createElementVNode("p", _hoisted_5, toDisplayString(compactLink.value), 1)
+            ])
+          ]),
+          _: 1
+        }, 16)) : createCommentVNode("", true),
+        __props.interactiveOptIn && referenceHasInteractiveView.value && !isInteractive.value ? (openBlock(), createBlock(NcButton, {
+          key: 2,
+          class: "toggle-interactive--button",
+          onClick: enableInteractive
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(unref(t)("Enable interactive view")), 1)
+          ]),
+          _: 1
+        })) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const NcReferenceWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4b144346"]]);
+export {
+  NcReferenceWidget as N
+};
+//# sourceMappingURL=NcReferenceWidget.mjs.map