npm - @nextcloud/vue - Versions diffs - 8.28.0 → 8.29.1 - Mend

@nextcloud/vue 8.28.0 → 8.29.1

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 (474) hide show

package/dist/chunks/NcAvatar-CbUnw3_c.cjs.map DELETED Viewed

@@ -1 +0,0 @@

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

package/dist/chunks/NcAvatar-DC7NtEPz.mjs.map DELETED Viewed

@@ -1 +0,0 @@

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

package/dist/chunks/NcColorPicker-CtcS-XMk.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcColorPicker-CtcS-XMk.mjs","sources":["../../src/components/NcColorPicker/NcColorPicker.vue"],"sourcesContent":["\n\n<docs>\n\n### General description\n\nThis component allows the user to choose a color. It consists of 2\nactual pickers:\n\n- One simple picker with a predefined palette of colors;\n- One more advanced picker that provides the full color spectrum;\n\n### Usage\n\n* Using v-model and passing in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div class=\"container0\">\n\t\t<NcColorPicker v-model=\"color\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcColorPicker>\n\t\t<NcColorPicker v-model=\"color\" :palette=\"customPalette\">\n\t\t\t<NcButton> Click Me for a custom palette </NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color0\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9',\n\t\t\tcustomPalette: [\n\t\t\t\t'#E40303',\n\t\t\t\t'#FF8C00',\n\t\t\t\t'#FFED00',\n\t\t\t\t'#008026',\n\t\t\t\t'#24408E',\n\t\t\t\t'#732982',\n\t\t\t\t'#5BCEFA',\n\t\t\t\t'#F5A9B8',\n\t\t\t\t'#FFFFFF',\n\t\t\t\t'#F5A9B8',\n\t\t\t\t'#5BCEFA',\n\t\t\t],\n\t\t}\n\t}\n}\n</script>\n<style>\n.container0 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Using v-bind for both color and open state and emitting an event that updates the color\n\n```vue\n<template>\n\t<div class=\"container1\">\n\t\t<NcButton @click=\"open = !open\"> Click Me </NcButton>\n\t\t<NcColorPicker :model-value=\"color\" @update:model-value=\"updateColor\" :shown.sync=\"open\" v-slot=\"{ attrs }\">\n\t\t\t<div v-bind=\"attrs\" :style=\"{'background-color': color}\" class=\"color1\" />\n\t\t</NcColorPicker>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9',\n\t\t\topen: false\n\t\t}\n\t},\n\tmethods: {\n\t\tupdateColor(e) {\n\t\t\tthis.color = e\n\t\t}\n\t}\n}\n</script>\n<style>\n.container1 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color1 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Using advanced fields including HEX, RGB, and HSL:\n\n```vue\n<template>\n\t<div class=\"container0\">\n\t\t<NcColorPicker v-model=\"color\"\n\t\t\t:advanced-fields=\"true\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color0\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9'\n\t\t}\n\t}\n}\n</script>\n<style>\n.container0 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcPopover popup-role=\"dialog\"\n\t\t:container=\"container\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t\t@apply-hide=\"handleClose\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<template #default=\"slotProps\">\n\t\t\t<div role=\"dialog\"\n\t\t\t\tclass=\"color-picker\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\t:aria-label=\"t('Color picker')\"\n\t\t\t\t:class=\"{ 'color-picker--advanced-fields': advanced && advancedFields }\">\n\t\t\t\t<Transition name=\"slide\" mode=\"out-in\">\n\t\t\t\t\t<div v-if=\"!advanced\" class=\"color-picker__simple\">\n\t\t\t\t\t\t<label v-for=\"({ color, name }, index) in normalizedPalette\"\n\t\t\t\t\t\t\t:key=\"index\"\n\t\t\t\t\t\t\t:style=\"{ backgroundColor: color }\"\n\t\t\t\t\t\t\tclass=\"color-picker__simple-color-circle\"\n\t\t\t\t\t\t\t:class=\"{ 'color-picker__simple-color-circle--active' : color === currentColor }\">\n\t\t\t\t\t\t\t<Check v-if=\"color === currentColor\" :size=\"20\" :fill-color=\"contrastColor\" />\n\t\t\t\t\t\t\t<input type=\"radio\"\n\t\t\t\t\t\t\t\tclass=\"hidden-visually\"\n\t\t\t\t\t\t\t\t:aria-label=\"name\"\n\t\t\t\t\t\t\t\t:name=\"`color-picker-${uid}`\"\n\t\t\t\t\t\t\t\t:checked=\"color === currentColor\"\n\t\t\t\t\t\t\t\t@click=\"pickColor(color)\">\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Chrome v-else\n\t\t\t\t\t\tv-model=\"currentColor\"\n\t\t\t\t\t\tclass=\"color-picker__advanced\"\n\t\t\t\t\t\t:disable-alpha=\"true\"\n\t\t\t\t\t\t:disable-fields=\"!advancedFields\"\n\t\t\t\t\t\t@input=\"pickColor\" />\n\t\t\t\t</Transition>\n\t\t\t\t<div v-if=\"!paletteOnly\" class=\"color-picker__navigation\">\n\t\t\t\t\t<NcButton v-if=\"advanced\"\n\t\t\t\t\t\t:aria-label=\"ariaBack\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"handleBack\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<ArrowLeft :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton v-else\n\t\t\t\t\t\t:aria-label=\"ariaMore\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"handleMoreSettings\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<DotsHorizontal :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton variant=\"primary\"\n\t\t\t\t\t\t@click=\"handleConfirm(slotProps.hide)\">\n\t\t\t\t\t\t{{ t('Choose') }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</template>\n\t</NcPopover>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport { t } from '../../l10n.js'\nimport { defaultPalette } from '../../utils/GenColors.js'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\n\nimport { Chrome } from 'vue-color'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\n\nconst HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i\n\nexport default {\n\tname: 'NcColorPicker',\n\n\tcomponents: {\n\t\tArrowLeft,\n\t\tCheck,\n\t\tChrome,\n\t\tDotsHorizontal,\n\t\tNcButton,\n\t\tNcPopover,\n\t},\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * A HEX color that represents the initial value of the picker\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Set to `true` to enable advanced fields including HEX, RGB, and HSL\n\t\t */\n\t\tadvancedFields: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Limit selectable colors to only the provided palette\n\t\t */\n\t\tpaletteOnly: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Provide a custom array of colors to show.\n\t\t * Can be either an array of string hexadecimal colors,\n\t\t * or an array of object with a `color` property with hexadecimal color string,\n\t\t * and a `name` property for accessibility.\n\t\t *\n\t\t * @type {string[] | {color: string, name: string}[]}\n\t\t */\n\t\tpalette: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [...defaultPalette],\n\t\t\tvalidator: (palette) => palette.every(item =>\n\t\t\t\t(typeof item === 'string' && HEX_REGEX.test(item))\n\t\t\t\t|| (typeof item === 'object' && item.color && HEX_REGEX.test(item.color)),\n\t\t\t),\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\n\temits: [\n\t\t'submit',\n\t\t'close',\n\t\t'update:open',\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\t'update:value',\n\t\t/**\n\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t */\n\t\t'update:modelValue',\n\t\t/** Same as update:modelValue for Vue 2 compatibility */\n\t\t'update:model-value',\n\t\t'input',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('value', 'update:value', true)\n\t\treturn {\n\t\t\tmodel,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcurrentColor: this.model,\n\t\t\tadvanced: false,\n\t\t\tariaBack: t('Back'),\n\t\t\tariaMore: t('More options'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tnormalizedPalette() {\n\t\t\treturn this.palette.map((item) => ({\n\t\t\t\tcolor: typeof item === 'object' ? item.color : item,\n\t\t\t\tname: typeof item === 'object' && item.name\n\t\t\t\t\t? item.name\n\t\t\t\t\t: t('A color with a HEX value {hex}', { hex: item.color }),\n\t\t\t}))\n\t\t},\n\n\t\tuid() {\n\t\t\treturn GenRandomId()\n\t\t},\n\t\tcontrastColor() {\n\t\t\tconst black = '#000000'\n\t\t\tconst white = '#FFFFFF'\n\t\t\treturn (this.calculateLuma(this.currentColor) > 0.5) ? black : white\n\t\t},\n\t},\n\n\twatch: {\n\t\tmodel(color) {\n\t\t\tthis.currentColor = color\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\t/**\n\t\t * Submit a picked colour and close picker\n\t\t * @param {Function} hideCallback callback to close popover\n\t\t */\n\t\thandleConfirm(hideCallback) {\n\t\t\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('submit', this.currentColor)\n\t\t\thideCallback()\n\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleClose() {\n\t\t\t/**\n\t\t\t * Emitted after picker close\n\t\t\t */\n\t\t\tthis.$emit('close')\n\t\t\t/**\n\t\t\t * @deprecated use the 'close' event instead\n\t\t\t */\n\t\t\tthis.$emit('update:open', false)\n\t\t},\n\n\t\t/**\n\t\t * Inner navigations\n\t\t */\n\t\thandleBack() {\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleMoreSettings() {\n\t\t\tthis.advanced = true\n\t\t},\n\n\t\t/**\n\t\t * Pick a colour\n\t\t *\n\t\t * @param {string} color the picked color\n\t\t */\n\t\tpickColor(color) {\n\t\t\tif (typeof color !== 'string') {\n\t\t\t\tcolor = this.currentColor.hex\n\t\t\t}\n\t\t\tthis.currentColor = color\n\n\t\t\tthis.model = color\n\n\t\t\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('input', color)\n\n\t\t},\n\n\t\t/**\n\t\t * Calculate luminance of provided hex color\n\t\t *\n\t\t * @param {string} color the hex color\n\t\t */\n\t\t calculateLuma(color) {\n\t\t\tconst [red, green, blue] = this.hexToRGB(color)\n\t\t\treturn (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255\n\t\t},\n\n\t\t/**\n\t\t * Convert hex color to RGB\n\t\t *\n\t\t * @param {string} hex the hex color\n\t\t */\n\t\t hexToRGB(hex) {\n\t\t\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n\t\t\treturn result\n\t\t\t\t? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]\n\t\t\t\t: null\n\t\t},\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.color-picker {\n\tdisplay: flex;\n\toverflow: hidden;\n\talign-content: flex-end;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\tbox-sizing: content-box !important;\n\twidth: 176px;\n\tpadding: 8px;\n\tborder-radius: 3px;\n\n\t&--advanced-fields {\n\t\twidth: 264px;\n\t}\n\n\t&__simple {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(auto-fit, var(--default-clickable-area));\n\t\tgrid-auto-rows: var(--default-clickable-area);\n\n\t\t&-color-circle {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: calc(var(--default-clickable-area) - 10px);\n\t\t\theight: calc(var(--default-clickable-area) - 10px);\n\t\t\tmin-height: calc(var(--default-clickable-area) - 10px);\n\t\t\tmargin: auto;\n\t\t\tpadding: 0;\n\t\t\tcolor: white;\n\t\t\tborder: 1px solid rgba(0, 0, 0, 0.25);\n\t\t\tborder-radius: 50%;\n\t\t\tfont-size: 16px;\n\t\t\t&:focus-within {\n\t\t\t\toutline: 2px solid var(--color-main-text);\n\t\t\t}\n\t\t\t&:hover {\n\t\t\t\topacity: .6;\n\t\t\t}\n\t\t\t&--active {\n\t\t\t\twidth: calc(var(--default-clickable-area) - 6px);\n\t\t\t\theight: calc(var(--default-clickable-area) - 6px);\n\t\t\t\tmin-height: calc(var(--default-clickable-area) - 6px);\n\t\t\t\ttransition: all 100ms ease-in-out;\n\t\t\t\topacity: 1 !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__advanced {\n\t\tbox-shadow: none !important;\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\t\tmargin-top: 10px;\n\t}\n}\n\n:deep() .vc {\n\t&-chrome {\n\t\twidth: unset;\n\t\tbackground-color: var(--color-main-background);\n\n\t\t&-color-wrap {\n\t\t\twidth: 30px;\n\t\t\theight: 30px;\n\t\t}\n\n\t\t&-active-color {\n\t\t\tborder-radius: 17px;\n\t\t}\n\n\t\t&-body {\n\t\t\tpadding: 14px 0 0 0;\n\t\t\tbackground-color: var(--color-main-background);\n\n\t\t\t.vc-input__input {\n\t\t\t\t--input-border-radius: var(--border-radius-element, var(--border-radius-large));\n\t\t\t\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\t\t\t\twidth: 100%;\n\t\t\t\theight: var(--default-clickable-area);\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding-inline: calc(var(--border-radius-large) + var(--input-border-width-offset));\n\t\t\t\tpadding-block: var(--input-border-width-offset);\n\t\t\t\tborder: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);\n\t\t\t\tborder-radius: var(--input-border-radius);\n\t\t\t\tfont-size: var(--default-font-size);\n\t\t\t\tcolor: var(--color-main-text);\n\t\t\t\tbox-shadow: none;\n\n\t\t\t\t&:active:not([disabled]),\n\t\t\t\t&:hover:not([disabled]),\n\t\t\t\t&:focus:not([disabled]) {\n\t\t\t\t\t// Reset padding offset when focused\n\t\t\t\t\t--input-border-width-offset: 0px;\n\t\t\t\t\tborder-color: var(--color-main-text);\n\t\t\t\t\tborder-width: var(--border-width-input-focused, 2px);\n\t\t\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\n\t\t\t\t\t& + .vc-input__label {\n\t\t\t\t\t\tcolor: var(--color-main-text);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vc-input__label {\n\t\t\t\tposition: absolute;\n\t\t\t\tinset-inline: var(--border-width-input-focused, 2px);\n\t\t\t\tinset-block-start: calc(-1.5 * var(--font-size-small, 13px) / 2);\n\t\t\t\tmax-width: fit-content;\n\t\t\t\tmargin-inline: calc(var(--border-radius-large) - var(--default-grid-baseline));\n\t\t\t\tmargin-block: 0;\n\t\t\t\tpadding-inline: var(--default-grid-baseline);\n\t\t\t\tfont-family: var(--font-face);\n\t\t\t\tfont-size: var(--font-size-small, 13px);\n\t\t\t\tline-height: 1.5;\n\t\t\t\tfont-weight: 500;\n\t\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\t\tbackground-color: var(--color-main-background);\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&-toggle-btn {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\tmargin-left: 6px;\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\n\t\t&-toggle-icon {\n\t\t\twidth: 24px;\n\t\t\theight: 24px;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t&-toggle-icon-highlight {\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\tinset: 0;\n\t\t}\n\n\t\t&-saturation {\n\t\t\t&-wrap {\n\t\t\t\tborder-radius: 3px;\n\t\t\t}\n\n\t\t\t&-circle {\n\t\t\t\twidth: 20px;\n\t\t\t\theight: 20px;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.slide {\n\t&-enter {\n\t\ttransform: translateX(-50%);\n\t\topacity: 0;\n\t}\n\t&-enter-to {\n\t\ttransform: translateX(0);\n\t\topacity: 1;\n\t}\n\t&-leave {\n\t\ttransform: translateX(0);\n\t\topacity: 1;\n\t}\n\t&-leave-to {\n\t\ttransform: translateX(-50%);\n\t\topacity: 0;\n\t}\n\t&-enter-active,\n\t&-leave-active {\n\t\ttransition: all 50ms ease-in-out;\n\t}\n}\n\n</style>\n"],"names":[],"mappings":"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"}

package/dist/chunks/NcColorPicker-HzfzrrTt.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcColorPicker-HzfzrrTt.cjs","sources":["../../src/components/NcColorPicker/NcColorPicker.vue"],"sourcesContent":["\n\n<docs>\n\n### General description\n\nThis component allows the user to choose a color. It consists of 2\nactual pickers:\n\n- One simple picker with a predefined palette of colors;\n- One more advanced picker that provides the full color spectrum;\n\n### Usage\n\n* Using v-model and passing in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div class=\"container0\">\n\t\t<NcColorPicker v-model=\"color\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcColorPicker>\n\t\t<NcColorPicker v-model=\"color\" :palette=\"customPalette\">\n\t\t\t<NcButton> Click Me for a custom palette </NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color0\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9',\n\t\t\tcustomPalette: [\n\t\t\t\t'#E40303',\n\t\t\t\t'#FF8C00',\n\t\t\t\t'#FFED00',\n\t\t\t\t'#008026',\n\t\t\t\t'#24408E',\n\t\t\t\t'#732982',\n\t\t\t\t'#5BCEFA',\n\t\t\t\t'#F5A9B8',\n\t\t\t\t'#FFFFFF',\n\t\t\t\t'#F5A9B8',\n\t\t\t\t'#5BCEFA',\n\t\t\t],\n\t\t}\n\t}\n}\n</script>\n<style>\n.container0 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Using v-bind for both color and open state and emitting an event that updates the color\n\n```vue\n<template>\n\t<div class=\"container1\">\n\t\t<NcButton @click=\"open = !open\"> Click Me </NcButton>\n\t\t<NcColorPicker :model-value=\"color\" @update:model-value=\"updateColor\" :shown.sync=\"open\" v-slot=\"{ attrs }\">\n\t\t\t<div v-bind=\"attrs\" :style=\"{'background-color': color}\" class=\"color1\" />\n\t\t</NcColorPicker>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9',\n\t\t\topen: false\n\t\t}\n\t},\n\tmethods: {\n\t\tupdateColor(e) {\n\t\t\tthis.color = e\n\t\t}\n\t}\n}\n</script>\n<style>\n.container1 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color1 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Using advanced fields including HEX, RGB, and HSL:\n\n```vue\n<template>\n\t<div class=\"container0\">\n\t\t<NcColorPicker v-model=\"color\"\n\t\t\t:advanced-fields=\"true\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color0\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9'\n\t\t}\n\t}\n}\n</script>\n<style>\n.container0 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcPopover popup-role=\"dialog\"\n\t\t:container=\"container\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t\t@apply-hide=\"handleClose\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<template #default=\"slotProps\">\n\t\t\t<div role=\"dialog\"\n\t\t\t\tclass=\"color-picker\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\t:aria-label=\"t('Color picker')\"\n\t\t\t\t:class=\"{ 'color-picker--advanced-fields': advanced && advancedFields }\">\n\t\t\t\t<Transition name=\"slide\" mode=\"out-in\">\n\t\t\t\t\t<div v-if=\"!advanced\" class=\"color-picker__simple\">\n\t\t\t\t\t\t<label v-for=\"({ color, name }, index) in normalizedPalette\"\n\t\t\t\t\t\t\t:key=\"index\"\n\t\t\t\t\t\t\t:style=\"{ backgroundColor: color }\"\n\t\t\t\t\t\t\tclass=\"color-picker__simple-color-circle\"\n\t\t\t\t\t\t\t:class=\"{ 'color-picker__simple-color-circle--active' : color === currentColor }\">\n\t\t\t\t\t\t\t<Check v-if=\"color === currentColor\" :size=\"20\" :fill-color=\"contrastColor\" />\n\t\t\t\t\t\t\t<input type=\"radio\"\n\t\t\t\t\t\t\t\tclass=\"hidden-visually\"\n\t\t\t\t\t\t\t\t:aria-label=\"name\"\n\t\t\t\t\t\t\t\t:name=\"`color-picker-${uid}`\"\n\t\t\t\t\t\t\t\t:checked=\"color === currentColor\"\n\t\t\t\t\t\t\t\t@click=\"pickColor(color)\">\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Chrome v-else\n\t\t\t\t\t\tv-model=\"currentColor\"\n\t\t\t\t\t\tclass=\"color-picker__advanced\"\n\t\t\t\t\t\t:disable-alpha=\"true\"\n\t\t\t\t\t\t:disable-fields=\"!advancedFields\"\n\t\t\t\t\t\t@input=\"pickColor\" />\n\t\t\t\t</Transition>\n\t\t\t\t<div v-if=\"!paletteOnly\" class=\"color-picker__navigation\">\n\t\t\t\t\t<NcButton v-if=\"advanced\"\n\t\t\t\t\t\t:aria-label=\"ariaBack\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"handleBack\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<ArrowLeft :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton v-else\n\t\t\t\t\t\t:aria-label=\"ariaMore\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"handleMoreSettings\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<DotsHorizontal :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton variant=\"primary\"\n\t\t\t\t\t\t@click=\"handleConfirm(slotProps.hide)\">\n\t\t\t\t\t\t{{ t('Choose') }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</template>\n\t</NcPopover>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport { t } from '../../l10n.js'\nimport { defaultPalette } from '../../utils/GenColors.js'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\n\nimport { Chrome } from 'vue-color'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\n\nconst HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i\n\nexport default {\n\tname: 'NcColorPicker',\n\n\tcomponents: {\n\t\tArrowLeft,\n\t\tCheck,\n\t\tChrome,\n\t\tDotsHorizontal,\n\t\tNcButton,\n\t\tNcPopover,\n\t},\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * A HEX color that represents the initial value of the picker\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Set to `true` to enable advanced fields including HEX, RGB, and HSL\n\t\t */\n\t\tadvancedFields: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Limit selectable colors to only the provided palette\n\t\t */\n\t\tpaletteOnly: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Provide a custom array of colors to show.\n\t\t * Can be either an array of string hexadecimal colors,\n\t\t * or an array of object with a `color` property with hexadecimal color string,\n\t\t * and a `name` property for accessibility.\n\t\t *\n\t\t * @type {string[] | {color: string, name: string}[]}\n\t\t */\n\t\tpalette: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [...defaultPalette],\n\t\t\tvalidator: (palette) => palette.every(item =>\n\t\t\t\t(typeof item === 'string' && HEX_REGEX.test(item))\n\t\t\t\t|| (typeof item === 'object' && item.color && HEX_REGEX.test(item.color)),\n\t\t\t),\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\n\temits: [\n\t\t'submit',\n\t\t'close',\n\t\t'update:open',\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\t'update:value',\n\t\t/**\n\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t */\n\t\t'update:modelValue',\n\t\t/** Same as update:modelValue for Vue 2 compatibility */\n\t\t'update:model-value',\n\t\t'input',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('value', 'update:value', true)\n\t\treturn {\n\t\t\tmodel,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcurrentColor: this.model,\n\t\t\tadvanced: false,\n\t\t\tariaBack: t('Back'),\n\t\t\tariaMore: t('More options'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tnormalizedPalette() {\n\t\t\treturn this.palette.map((item) => ({\n\t\t\t\tcolor: typeof item === 'object' ? item.color : item,\n\t\t\t\tname: typeof item === 'object' && item.name\n\t\t\t\t\t? item.name\n\t\t\t\t\t: t('A color with a HEX value {hex}', { hex: item.color }),\n\t\t\t}))\n\t\t},\n\n\t\tuid() {\n\t\t\treturn GenRandomId()\n\t\t},\n\t\tcontrastColor() {\n\t\t\tconst black = '#000000'\n\t\t\tconst white = '#FFFFFF'\n\t\t\treturn (this.calculateLuma(this.currentColor) > 0.5) ? black : white\n\t\t},\n\t},\n\n\twatch: {\n\t\tmodel(color) {\n\t\t\tthis.currentColor = color\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\t/**\n\t\t * Submit a picked colour and close picker\n\t\t * @param {Function} hideCallback callback to close popover\n\t\t */\n\t\thandleConfirm(hideCallback) {\n\t\t\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('submit', this.currentColor)\n\t\t\thideCallback()\n\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleClose() {\n\t\t\t/**\n\t\t\t * Emitted after picker close\n\t\t\t */\n\t\t\tthis.$emit('close')\n\t\t\t/**\n\t\t\t * @deprecated use the 'close' event instead\n\t\t\t */\n\t\t\tthis.$emit('update:open', false)\n\t\t},\n\n\t\t/**\n\t\t * Inner navigations\n\t\t */\n\t\thandleBack() {\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleMoreSettings() {\n\t\t\tthis.advanced = true\n\t\t},\n\n\t\t/**\n\t\t * Pick a colour\n\t\t *\n\t\t * @param {string} color the picked color\n\t\t */\n\t\tpickColor(color) {\n\t\t\tif (typeof color !== 'string') {\n\t\t\t\tcolor = this.currentColor.hex\n\t\t\t}\n\t\t\tthis.currentColor = color\n\n\t\t\tthis.model = color\n\n\t\t\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('input', color)\n\n\t\t},\n\n\t\t/**\n\t\t * Calculate luminance of provided hex color\n\t\t *\n\t\t * @param {string} color the hex color\n\t\t */\n\t\t calculateLuma(color) {\n\t\t\tconst [red, green, blue] = this.hexToRGB(color)\n\t\t\treturn (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255\n\t\t},\n\n\t\t/**\n\t\t * Convert hex color to RGB\n\t\t *\n\t\t * @param {string} hex the hex color\n\t\t */\n\t\t hexToRGB(hex) {\n\t\t\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n\t\t\treturn result\n\t\t\t\t? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]\n\t\t\t\t: null\n\t\t},\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.color-picker {\n\tdisplay: flex;\n\toverflow: hidden;\n\talign-content: flex-end;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\tbox-sizing: content-box !important;\n\twidth: 176px;\n\tpadding: 8px;\n\tborder-radius: 3px;\n\n\t&--advanced-fields {\n\t\twidth: 264px;\n\t}\n\n\t&__simple {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(auto-fit, var(--default-clickable-area));\n\t\tgrid-auto-rows: var(--default-clickable-area);\n\n\t\t&-color-circle {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: calc(var(--default-clickable-area) - 10px);\n\t\t\theight: calc(var(--default-clickable-area) - 10px);\n\t\t\tmin-height: calc(var(--default-clickable-area) - 10px);\n\t\t\tmargin: auto;\n\t\t\tpadding: 0;\n\t\t\tcolor: white;\n\t\t\tborder: 1px solid rgba(0, 0, 0, 0.25);\n\t\t\tborder-radius: 50%;\n\t\t\tfont-size: 16px;\n\t\t\t&:focus-within {\n\t\t\t\toutline: 2px solid var(--color-main-text);\n\t\t\t}\n\t\t\t&:hover {\n\t\t\t\topacity: .6;\n\t\t\t}\n\t\t\t&--active {\n\t\t\t\twidth: calc(var(--default-clickable-area) - 6px);\n\t\t\t\theight: calc(var(--default-clickable-area) - 6px);\n\t\t\t\tmin-height: calc(var(--default-clickable-area) - 6px);\n\t\t\t\ttransition: all 100ms ease-in-out;\n\t\t\t\topacity: 1 !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__advanced {\n\t\tbox-shadow: none !important;\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\t\tmargin-top: 10px;\n\t}\n}\n\n:deep() .vc {\n\t&-chrome {\n\t\twidth: unset;\n\t\tbackground-color: var(--color-main-background);\n\n\t\t&-color-wrap {\n\t\t\twidth: 30px;\n\t\t\theight: 30px;\n\t\t}\n\n\t\t&-active-color {\n\t\t\tborder-radius: 17px;\n\t\t}\n\n\t\t&-body {\n\t\t\tpadding: 14px 0 0 0;\n\t\t\tbackground-color: var(--color-main-background);\n\n\t\t\t.vc-input__input {\n\t\t\t\t--input-border-radius: var(--border-radius-element, var(--border-radius-large));\n\t\t\t\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\t\t\t\twidth: 100%;\n\t\t\t\theight: var(--default-clickable-area);\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding-inline: calc(var(--border-radius-large) + var(--input-border-width-offset));\n\t\t\t\tpadding-block: var(--input-border-width-offset);\n\t\t\t\tborder: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);\n\t\t\t\tborder-radius: var(--input-border-radius);\n\t\t\t\tfont-size: var(--default-font-size);\n\t\t\t\tcolor: var(--color-main-text);\n\t\t\t\tbox-shadow: none;\n\n\t\t\t\t&:active:not([disabled]),\n\t\t\t\t&:hover:not([disabled]),\n\t\t\t\t&:focus:not([disabled]) {\n\t\t\t\t\t// Reset padding offset when focused\n\t\t\t\t\t--input-border-width-offset: 0px;\n\t\t\t\t\tborder-color: var(--color-main-text);\n\t\t\t\t\tborder-width: var(--border-width-input-focused, 2px);\n\t\t\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\n\t\t\t\t\t& + .vc-input__label {\n\t\t\t\t\t\tcolor: var(--color-main-text);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vc-input__label {\n\t\t\t\tposition: absolute;\n\t\t\t\tinset-inline: var(--border-width-input-focused, 2px);\n\t\t\t\tinset-block-start: calc(-1.5 * var(--font-size-small, 13px) / 2);\n\t\t\t\tmax-width: fit-content;\n\t\t\t\tmargin-inline: calc(var(--border-radius-large) - var(--default-grid-baseline));\n\t\t\t\tmargin-block: 0;\n\t\t\t\tpadding-inline: var(--default-grid-baseline);\n\t\t\t\tfont-family: var(--font-face);\n\t\t\t\tfont-size: var(--font-size-small, 13px);\n\t\t\t\tline-height: 1.5;\n\t\t\t\tfont-weight: 500;\n\t\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\t\tbackground-color: var(--color-main-background);\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&-toggle-btn {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\tmargin-left: 6px;\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\n\t\t&-toggle-icon {\n\t\t\twidth: 24px;\n\t\t\theight: 24px;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t&-toggle-icon-highlight {\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\tinset: 0;\n\t\t}\n\n\t\t&-saturation {\n\t\t\t&-wrap {\n\t\t\t\tborder-radius: 3px;\n\t\t\t}\n\n\t\t\t&-circle {\n\t\t\t\twidth: 20px;\n\t\t\t\theight: 20px;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.slide {\n\t&-enter {\n\t\ttransform: translateX(-50%);\n\t\topacity: 0;\n\t}\n\t&-enter-to {\n\t\ttransform: translateX(0);\n\t\topacity: 1;\n\t}\n\t&-leave {\n\t\ttransform: translateX(0);\n\t\topacity: 1;\n\t}\n\t&-leave-to {\n\t\ttransform: translateX(-50%);\n\t\topacity: 0;\n\t}\n\t&-enter-active,\n\t&-leave-active {\n\t\ttransition: all 50ms ease-in-out;\n\t}\n}\n\n</style>\n"],"names":["ArrowLeft","Check","Chrome","DotsHorizontal","NcButton","NcPopover","defaultPalette","useModelMigration","t","GenRandomId"],"mappings":"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"}

package/dist/chunks/NcInputField-C61UUN46.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcInputField-C61UUN46.cjs","sources":["../../src/components/NcInputField/NcInputField.vue"],"sourcesContent":["\n\n<docs>\n### Description\n\nThis component is used by the other Fields components.\nIt extends and styles an HTMLInputElement.\n\nYou cannot use it as is. This is here for documentation purposes.\nSee the other field components.\n\nFor a list of all available props and attributes, please check the [HTMLInputElement documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n\n</docs>\n\n<template>\n\t<div class=\"input-field\"\n\t\t:class=\"{\n\t\t\t'input-field--disabled': disabled,\n\t\t\t'input-field--label-outside': labelOutside || !isValidLabel,\n\t\t\t'input-field--leading-icon': !!$scopedSlots.icon || !!$scopedSlots.default || !!$slots.default,\n\t\t\t'input-field--trailing-icon': showTrailingButton || hasTrailingIcon,\n\t\t\t'input-field--pill': pill,\n\t\t}\">\n\t\t<div class=\"input-field__main-wrapper\">\n\t\t\t<input v-bind=\"$attrs\"\n\t\t\t\t:id=\"computedId\"\n\t\t\t\tref=\"input\"\n\t\t\t\tclass=\"input-field__input\"\n\t\t\t\t:type=\"type\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:placeholder=\"computedPlaceholder\"\n\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\t:class=\"[inputClass,\n\t\t\t\t\t{\n\t\t\t\t\t\t'input-field__input--success': success,\n\t\t\t\t\t\t'input-field__input--error': error,\n\t\t\t\t\t}]\"\n\t\t\t\t:value=\"model?.toString()\"\n\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t@input=\"handleInput\">\n\t\t\t\n\t\t\t<label v-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"input-field__label\"\n\t\t\t\t:for=\"computedId\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\n\t\t\t\n\t\t\t<div v-show=\"!!$scopedSlots.icon || !!$scopedSlots.default || !!$slots.default\" class=\"input-field__icon input-field__icon--leading\">\n\t\t\t\t\n\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t\n\t\t\t\t\t<slot />\n\t\t\t\t</slot>\n\t\t\t</div>\n\n\t\t\t\n\t\t\t<NcButton v-if=\"showTrailingButton\"\n\t\t\t\tclass=\"input-field__trailing-button\"\n\t\t\t\t:aria-label=\"trailingButtonLabel\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t\t@click=\"handleTrailingButtonClick\">\n\t\t\t\t\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"trailing-button-icon\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t\n\t\t\t<div v-else-if=\"success || error\"\n\t\t\t\tclass=\"input-field__icon input-field__icon--trailing\">\n\t\t\t\t<Check v-if=\"success\" :size=\"20\" style=\"color: var(--color-success-text);\" />\n\t\t\t\t<AlertCircle v-else-if=\"error\" :size=\"20\" style=\"color: var(--color-error-text);\" />\n\t\t\t</div>\n\t\t</div>\n\t\t<p v-if=\"helperText.length > 0\"\n\t\t\t:id=\"`${inputName}-helper-text`\"\n\t\t\tclass=\"input-field__helper-text-message\"\n\t\t\t:class=\"{\n\t\t\t\t'input-field__helper-text-message--error': error,\n\t\t\t\t'input-field__helper-text-message--success': success,\n\t\t\t}\">\n\t\t\t<Check v-if=\"success\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t<AlertCircle v-else-if=\"error\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\n\nexport default {\n\tname: 'NcInputField',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tAlertCircle,\n\t\tCheck,\n\t},\n\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\tvalue: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The value of the input field\n\t\t * If type is 'number' and a number is passed as value than the type of `update:modelValue` will also be 'number'\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The type of the input element\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'text',\n\t\t\tvalidator: (value) => [\n\t\t\t\t'text',\n\t\t\t\t'password',\n\t\t\t\t'email',\n\t\t\t\t'tel',\n\t\t\t\t'url',\n\t\t\t\t'search',\n\t\t\t\t'number',\n\t\t\t].includes(value),\n\t\t},\n\n\t\t/**\n\t\t * The input label, always provide one for accessibility purposes.\n\t\t * This will also be used as a placeholder unless the placeholder\n\t\t * prop is populated with a different string.\n\t\t *\n\t\t * Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Pass in true if you want to use an external label. This is useful\n\t\t * if you need a label that looks different from the one provided by\n\t\t * this component\n\t\t */\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The placeholder of the input. This defaults as the string that's\n\t\t * passed into the label prop. In order to remove the placeholder,\n\t\t * pass in an empty string.\n\t\t */\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Controls whether to display the trailing button.\n\t\t */\n\t\tshowTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Label of the trailing button\n\t\t *\n\t\t * Required when showTrailingButton is set\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Toggles the success state of the component. Adds a checkmark icon.\n\t\t * this cannot be used together with canClear.\n\t\t */\n\t\tsuccess: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Toggles the error state of the component. Adds an error icon.\n\t\t * this cannot be used together with canClear.\n\t\t */\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Additional helper text message\n\t\t *\n\t\t * This will be displayed beneath the input field. In case the field is\n\t\t * also marked as having an error, the text will be displayed in red.\n\t\t */\n\t\thelperText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Disable the input field\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Specifies whether the input should have a pill form.\n\t\t * By default, input has rounded corners.\n\t\t */\n\t\tpill: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Class to add to the input field.\n\t\t * Necessary to use NcInputField in the NcActionInput component.\n\t\t */\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\t'update:value',\n\t\t'update:modelValue',\n\t\t/** Same as update:modelValue for Vue 2 compatibility */\n\t\t'update:model-value',\n\t\t'trailing-button-click',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('value', 'update:value', true)\n\t\treturn {\n\t\t\tmodel,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcomputedId() {\n\t\t\treturn this.$attrs.id && this.$attrs.id !== '' ? this.$attrs.id : this.inputName\n\t\t},\n\n\t\tinputName() {\n\t\t\treturn 'input' + GenRandomId()\n\t\t},\n\n\t\thasTrailingIcon() {\n\t\t\treturn this.success\n\t\t},\n\n\t\thasPlaceholder() {\n\t\t\treturn this.placeholder !== '' && this.placeholder !== undefined\n\t\t},\n\n\t\tcomputedPlaceholder() {\n\t\t\treturn this.hasPlaceholder ? this.placeholder : this.label\n\t\t},\n\n\t\tisValidLabel() {\n\t\t\tconst isValidLabel = this.label || this.labelOutside\n\t\t\tif (!isValidLabel) {\n\t\t\t\tconsole.warn('You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.')\n\t\t\t}\n\t\t\treturn isValidLabel\n\t\t},\n\n\t\tariaDescribedby() {\n\t\t\tconst ariaDescribedby = []\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\tariaDescribedby.push(`${this.inputName}-helper-text`)\n\t\t\t}\n\t\t\tif (this.$attrs['aria-describedby']) {\n\t\t\t\tariaDescribedby.push(this.$attrs['aria-describedby'])\n\t\t\t}\n\t\t\treturn ariaDescribedby.join(' ') || null\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.input.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tconst newValue = this.type === 'number' && typeof this.model === 'number' ? parseFloat(event.target.value, 10) : event.target.value\n\t\t\tthis.model = newValue\n\t\t},\n\n\t\thandleTrailingButtonClick(event) {\n\t\t\tthis.$emit('trailing-button-click', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.input-field {\n\t--input-border-radius: var(--border-radius-element, var(--border-radius-large));\n\t// The padding before the input can start (leading button or border)\n\t--input-padding-start: var(--border-radius-large);\n\t// The padding where the input has to end (trailing button or border)\n\t--input-padding-end: var(--border-radius-large);\n\t// positional styles\n\tposition: relative;\n\twidth: 100%;\n\tmargin-block-start: 6px; // for the label in active state\n\n\t&--disabled {\n\t\topacity: 0.4;\n\t\tfilter: saturate(0.4);\n\t}\n\n\t// If there is no internal label we reset the margin reserved for it\n\t&--label-outside {\n\t\tmargin-block-start: 0;\n\t}\n\n\t&--leading-icon {\n\t\t--input-padding-start: calc(var(--default-clickable-area) - var(--default-grid-baseline));\n\t}\n\n\t&--trailing-icon {\n\t\t--input-padding-end: calc(var(--default-clickable-area) - var(--default-grid-baseline));\n\t}\n\n\t&--pill {\n\t\t--input-border-radius: var(--border-radius-pill);\n\t}\n\n\t&__main-wrapper {\n\t\theight: var(--default-clickable-area);\n\t\tposition: relative;\n\t}\n\n\t&__input {\n\t\t// If border width differes between focused and unfocused we need to compensate to prevent jumping\n\t\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);\n\t\tborder-radius: var(--input-border-radius);\n\n\t\tcursor: pointer;\n\t\t-webkit-appearance: textfield !important;\n\t\t-moz-appearance: textfield !important;\n\t\tappearance: textfield !important;\n\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\n\t\theight: calc(var(--default-clickable-area) - 2 * var(--input-border-width-offset)) !important;\n\t\twidth: 100%;\n\n\t\tpadding-inline: calc(var(--input-padding-start) + var(--input-border-width-offset)) calc(var(--input-padding-end) + var(--input-border-width-offset));\n\t\tpadding-block: var(--input-border-width-offset);\n\n\t\t&::placeholder {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t&:active:not([disabled]),\n\t\t&:hover:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\tborder-color: var(--color-main-text);\n\t\t\tborder-width: var(--border-width-input-focused, 2px);\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t\t// Reset padding offset when focused\n\t\t\t--input-border-width-offset: 0px;\n\t\t}\n\n\t\t&:focus + .input-field__label,\n\t\t&:hover:not(:placeholder-shown) + .input-field__label {\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\n\t\t&:focus {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: unset !important; // Override server rules\n\t\t}\n\n\t\t&--success {\n\t\t\tborder-color: var(--color-success) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\n\t\t&--error,\n\t\t&:user-invalid {\n\t\t\tborder-color: var(--color-error) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\t}\n\n\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t&:not(&--label-outside) &__input:not(:focus)::placeholder {\n\t\topacity: 0;\n\t}\n\n\t&__label {\n\t\t--input-label-font-size: var(--default-font-size);\n\t\tposition: absolute;\n\t\tmargin-inline: var(--input-padding-start) var(--input-padding-end);\n\t\tmax-width: fit-content;\n\t\tfont-size: var(--input-label-font-size);\n\t\tinset-block-start: calc((var(--default-clickable-area) - 1lh) / 2); // center the label vertically\n\t\tinset-inline: var(--border-width-input-focused, 2px);\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(:placeholder-shown) + &__label {\n\t\t--input-label-font-size: 13px; // minimum allowed font size for accessibility\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\t// 1.5 * font-size = line-height; line-height / 2 for centering and make it negative as we need to move outside the element\n\t\tinset-block-start: calc(-1.5 * var(--input-label-font-size) / 2);\n\t\tfont-weight: 500;\n\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: var(--default-grid-baseline);\n\t\tmargin-inline: calc(var(--input-padding-start) - var(--default-grid-baseline)) calc(var(--input-padding-end) - var(--default-grid-baseline));\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t}\n\n\t&__icon {\n\t\tposition: absolute;\n\t\theight: var(--default-clickable-area);\n\t\twidth: var(--default-clickable-area);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\topacity: 0.7;\n\n\t\tinset-block-end: 0;\n\n\t\t&--leading {\n\t\t\tinset-inline-start: 0px;\n\t\t}\n\n\t\t&--trailing {\n\t\t\tinset-inline-end: 0px;\n\t\t}\n\t}\n\n\t&__trailing-button {\n\t\t--button-size: calc(var(--default-clickable-area) - 2 * var(--border-width-input-focused, 2px)) !important;\n\t\t--button-radius: calc(var(--input-border-radius) - var(--border-width-input-focused, 2px)); // lower radius as size is smaller\n\n\t\t&.button-vue {\n\t\t\tposition: absolute;\n\t\t\ttop: var(--border-width-input-focused, 2px);\n\t\t\tinset-inline-end: var(--border-width-input-focused, 2px);\n\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: none !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tpadding-inline: var(--border-radius-large);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcolor: var(--color-text-maxcontrast);\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\n\t\t&--error {\n\t\t\tcolor: var(--color-error-text);\n\t\t}\n\n\t\t&--success {\n\t\t\tcolor: var(--color-success-text);\n\t\t}\n\t}\n}\n</style>\n"],"names":["NcButton","AlertCircle","Check","useModelMigration","GenRandomId"],"mappings":"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"}

package/dist/chunks/NcInputField-DTtUueUZ.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcInputField-DTtUueUZ.mjs","sources":["../../src/components/NcInputField/NcInputField.vue"],"sourcesContent":["\n\n<docs>\n### Description\n\nThis component is used by the other Fields components.\nIt extends and styles an HTMLInputElement.\n\nYou cannot use it as is. This is here for documentation purposes.\nSee the other field components.\n\nFor a list of all available props and attributes, please check the [HTMLInputElement documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n\n</docs>\n\n<template>\n\t<div class=\"input-field\"\n\t\t:class=\"{\n\t\t\t'input-field--disabled': disabled,\n\t\t\t'input-field--label-outside': labelOutside || !isValidLabel,\n\t\t\t'input-field--leading-icon': !!$scopedSlots.icon || !!$scopedSlots.default || !!$slots.default,\n\t\t\t'input-field--trailing-icon': showTrailingButton || hasTrailingIcon,\n\t\t\t'input-field--pill': pill,\n\t\t}\">\n\t\t<div class=\"input-field__main-wrapper\">\n\t\t\t<input v-bind=\"$attrs\"\n\t\t\t\t:id=\"computedId\"\n\t\t\t\tref=\"input\"\n\t\t\t\tclass=\"input-field__input\"\n\t\t\t\t:type=\"type\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:placeholder=\"computedPlaceholder\"\n\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\t:class=\"[inputClass,\n\t\t\t\t\t{\n\t\t\t\t\t\t'input-field__input--success': success,\n\t\t\t\t\t\t'input-field__input--error': error,\n\t\t\t\t\t}]\"\n\t\t\t\t:value=\"model?.toString()\"\n\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t@input=\"handleInput\">\n\t\t\t\n\t\t\t<label v-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"input-field__label\"\n\t\t\t\t:for=\"computedId\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\n\t\t\t\n\t\t\t<div v-show=\"!!$scopedSlots.icon || !!$scopedSlots.default || !!$slots.default\" class=\"input-field__icon input-field__icon--leading\">\n\t\t\t\t\n\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t\n\t\t\t\t\t<slot />\n\t\t\t\t</slot>\n\t\t\t</div>\n\n\t\t\t\n\t\t\t<NcButton v-if=\"showTrailingButton\"\n\t\t\t\tclass=\"input-field__trailing-button\"\n\t\t\t\t:aria-label=\"trailingButtonLabel\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t\t@click=\"handleTrailingButtonClick\">\n\t\t\t\t\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"trailing-button-icon\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t\n\t\t\t<div v-else-if=\"success || error\"\n\t\t\t\tclass=\"input-field__icon input-field__icon--trailing\">\n\t\t\t\t<Check v-if=\"success\" :size=\"20\" style=\"color: var(--color-success-text);\" />\n\t\t\t\t<AlertCircle v-else-if=\"error\" :size=\"20\" style=\"color: var(--color-error-text);\" />\n\t\t\t</div>\n\t\t</div>\n\t\t<p v-if=\"helperText.length > 0\"\n\t\t\t:id=\"`${inputName}-helper-text`\"\n\t\t\tclass=\"input-field__helper-text-message\"\n\t\t\t:class=\"{\n\t\t\t\t'input-field__helper-text-message--error': error,\n\t\t\t\t'input-field__helper-text-message--success': success,\n\t\t\t}\">\n\t\t\t<Check v-if=\"success\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t<AlertCircle v-else-if=\"error\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\n\nexport default {\n\tname: 'NcInputField',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tAlertCircle,\n\t\tCheck,\n\t},\n\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\tvalue: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The value of the input field\n\t\t * If type is 'number' and a number is passed as value than the type of `update:modelValue` will also be 'number'\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The type of the input element\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'text',\n\t\t\tvalidator: (value) => [\n\t\t\t\t'text',\n\t\t\t\t'password',\n\t\t\t\t'email',\n\t\t\t\t'tel',\n\t\t\t\t'url',\n\t\t\t\t'search',\n\t\t\t\t'number',\n\t\t\t].includes(value),\n\t\t},\n\n\t\t/**\n\t\t * The input label, always provide one for accessibility purposes.\n\t\t * This will also be used as a placeholder unless the placeholder\n\t\t * prop is populated with a different string.\n\t\t *\n\t\t * Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Pass in true if you want to use an external label. This is useful\n\t\t * if you need a label that looks different from the one provided by\n\t\t * this component\n\t\t */\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The placeholder of the input. This defaults as the string that's\n\t\t * passed into the label prop. In order to remove the placeholder,\n\t\t * pass in an empty string.\n\t\t */\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Controls whether to display the trailing button.\n\t\t */\n\t\tshowTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Label of the trailing button\n\t\t *\n\t\t * Required when showTrailingButton is set\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Toggles the success state of the component. Adds a checkmark icon.\n\t\t * this cannot be used together with canClear.\n\t\t */\n\t\tsuccess: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Toggles the error state of the component. Adds an error icon.\n\t\t * this cannot be used together with canClear.\n\t\t */\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Additional helper text message\n\t\t *\n\t\t * This will be displayed beneath the input field. In case the field is\n\t\t * also marked as having an error, the text will be displayed in red.\n\t\t */\n\t\thelperText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Disable the input field\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Specifies whether the input should have a pill form.\n\t\t * By default, input has rounded corners.\n\t\t */\n\t\tpill: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Class to add to the input field.\n\t\t * Necessary to use NcInputField in the NcActionInput component.\n\t\t */\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\t'update:value',\n\t\t'update:modelValue',\n\t\t/** Same as update:modelValue for Vue 2 compatibility */\n\t\t'update:model-value',\n\t\t'trailing-button-click',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('value', 'update:value', true)\n\t\treturn {\n\t\t\tmodel,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcomputedId() {\n\t\t\treturn this.$attrs.id && this.$attrs.id !== '' ? this.$attrs.id : this.inputName\n\t\t},\n\n\t\tinputName() {\n\t\t\treturn 'input' + GenRandomId()\n\t\t},\n\n\t\thasTrailingIcon() {\n\t\t\treturn this.success\n\t\t},\n\n\t\thasPlaceholder() {\n\t\t\treturn this.placeholder !== '' && this.placeholder !== undefined\n\t\t},\n\n\t\tcomputedPlaceholder() {\n\t\t\treturn this.hasPlaceholder ? this.placeholder : this.label\n\t\t},\n\n\t\tisValidLabel() {\n\t\t\tconst isValidLabel = this.label || this.labelOutside\n\t\t\tif (!isValidLabel) {\n\t\t\t\tconsole.warn('You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.')\n\t\t\t}\n\t\t\treturn isValidLabel\n\t\t},\n\n\t\tariaDescribedby() {\n\t\t\tconst ariaDescribedby = []\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\tariaDescribedby.push(`${this.inputName}-helper-text`)\n\t\t\t}\n\t\t\tif (this.$attrs['aria-describedby']) {\n\t\t\t\tariaDescribedby.push(this.$attrs['aria-describedby'])\n\t\t\t}\n\t\t\treturn ariaDescribedby.join(' ') || null\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.input.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tconst newValue = this.type === 'number' && typeof this.model === 'number' ? parseFloat(event.target.value, 10) : event.target.value\n\t\t\tthis.model = newValue\n\t\t},\n\n\t\thandleTrailingButtonClick(event) {\n\t\t\tthis.$emit('trailing-button-click', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.input-field {\n\t--input-border-radius: var(--border-radius-element, var(--border-radius-large));\n\t// The padding before the input can start (leading button or border)\n\t--input-padding-start: var(--border-radius-large);\n\t// The padding where the input has to end (trailing button or border)\n\t--input-padding-end: var(--border-radius-large);\n\t// positional styles\n\tposition: relative;\n\twidth: 100%;\n\tmargin-block-start: 6px; // for the label in active state\n\n\t&--disabled {\n\t\topacity: 0.4;\n\t\tfilter: saturate(0.4);\n\t}\n\n\t// If there is no internal label we reset the margin reserved for it\n\t&--label-outside {\n\t\tmargin-block-start: 0;\n\t}\n\n\t&--leading-icon {\n\t\t--input-padding-start: calc(var(--default-clickable-area) - var(--default-grid-baseline));\n\t}\n\n\t&--trailing-icon {\n\t\t--input-padding-end: calc(var(--default-clickable-area) - var(--default-grid-baseline));\n\t}\n\n\t&--pill {\n\t\t--input-border-radius: var(--border-radius-pill);\n\t}\n\n\t&__main-wrapper {\n\t\theight: var(--default-clickable-area);\n\t\tposition: relative;\n\t}\n\n\t&__input {\n\t\t// If border width differes between focused and unfocused we need to compensate to prevent jumping\n\t\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);\n\t\tborder-radius: var(--input-border-radius);\n\n\t\tcursor: pointer;\n\t\t-webkit-appearance: textfield !important;\n\t\t-moz-appearance: textfield !important;\n\t\tappearance: textfield !important;\n\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\n\t\theight: calc(var(--default-clickable-area) - 2 * var(--input-border-width-offset)) !important;\n\t\twidth: 100%;\n\n\t\tpadding-inline: calc(var(--input-padding-start) + var(--input-border-width-offset)) calc(var(--input-padding-end) + var(--input-border-width-offset));\n\t\tpadding-block: var(--input-border-width-offset);\n\n\t\t&::placeholder {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t&:active:not([disabled]),\n\t\t&:hover:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\tborder-color: var(--color-main-text);\n\t\t\tborder-width: var(--border-width-input-focused, 2px);\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t\t// Reset padding offset when focused\n\t\t\t--input-border-width-offset: 0px;\n\t\t}\n\n\t\t&:focus + .input-field__label,\n\t\t&:hover:not(:placeholder-shown) + .input-field__label {\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\n\t\t&:focus {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: unset !important; // Override server rules\n\t\t}\n\n\t\t&--success {\n\t\t\tborder-color: var(--color-success) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\n\t\t&--error,\n\t\t&:user-invalid {\n\t\t\tborder-color: var(--color-error) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\t}\n\n\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t&:not(&--label-outside) &__input:not(:focus)::placeholder {\n\t\topacity: 0;\n\t}\n\n\t&__label {\n\t\t--input-label-font-size: var(--default-font-size);\n\t\tposition: absolute;\n\t\tmargin-inline: var(--input-padding-start) var(--input-padding-end);\n\t\tmax-width: fit-content;\n\t\tfont-size: var(--input-label-font-size);\n\t\tinset-block-start: calc((var(--default-clickable-area) - 1lh) / 2); // center the label vertically\n\t\tinset-inline: var(--border-width-input-focused, 2px);\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(:placeholder-shown) + &__label {\n\t\t--input-label-font-size: 13px; // minimum allowed font size for accessibility\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\t// 1.5 * font-size = line-height; line-height / 2 for centering and make it negative as we need to move outside the element\n\t\tinset-block-start: calc(-1.5 * var(--input-label-font-size) / 2);\n\t\tfont-weight: 500;\n\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: var(--default-grid-baseline);\n\t\tmargin-inline: calc(var(--input-padding-start) - var(--default-grid-baseline)) calc(var(--input-padding-end) - var(--default-grid-baseline));\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t}\n\n\t&__icon {\n\t\tposition: absolute;\n\t\theight: var(--default-clickable-area);\n\t\twidth: var(--default-clickable-area);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\topacity: 0.7;\n\n\t\tinset-block-end: 0;\n\n\t\t&--leading {\n\t\t\tinset-inline-start: 0px;\n\t\t}\n\n\t\t&--trailing {\n\t\t\tinset-inline-end: 0px;\n\t\t}\n\t}\n\n\t&__trailing-button {\n\t\t--button-size: calc(var(--default-clickable-area) - 2 * var(--border-width-input-focused, 2px)) !important;\n\t\t--button-radius: calc(var(--input-border-radius) - var(--border-width-input-focused, 2px)); // lower radius as size is smaller\n\n\t\t&.button-vue {\n\t\t\tposition: absolute;\n\t\t\ttop: var(--border-width-input-focused, 2px);\n\t\t\tinset-inline-end: var(--border-width-input-focused, 2px);\n\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: none !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tpadding-inline: var(--border-radius-large);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcolor: var(--color-text-maxcontrast);\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\n\t\t&--error {\n\t\t\tcolor: var(--color-error-text);\n\t\t}\n\n\t\t&--success {\n\t\t\tcolor: var(--color-success-text);\n\t\t}\n\t}\n}\n</style>\n"],"names":[],"mappings":";;;;;;AAwGA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,UAAA,QAAA,kBAAA,SAAA,gBAAA,IAAA;AACA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,OAAA,MAAA,KAAA,OAAA,OAAA,KAAA,KAAA,OAAA,KAAA,KAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAA,UAAA,YAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,KAAA,gBAAA,MAAA,KAAA,gBAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AACA,aAAA,KAAA,iBAAA,KAAA,cAAA,KAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,YAAA,eAAA,KAAA,SAAA,KAAA;AACA,UAAA,CAAA,cAAA;AACA,gBAAA,KAAA,mJAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,YAAA,kBAAA,CAAA;AACA,UAAA,KAAA,WAAA,SAAA,GAAA;AACA,wBAAA,KAAA,GAAA,KAAA,SAAA,cAAA;AAAA,MACA;AACA,UAAA,KAAA,OAAA,kBAAA,GAAA;AACA,wBAAA,KAAA,KAAA,OAAA,kBAAA,CAAA;AAAA,MACA;AACA,aAAA,gBAAA,KAAA,GAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AACA,WAAA,MAAA,MAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AACA,WAAA,MAAA,MAAA,OAAA;AAAA,IACA;AAAA,IAEA,YAAA,OAAA;AACA,YAAA,WAAA,KAAA,SAAA,YAAA,OAAA,KAAA,UAAA,WAAA,WAAA,MAAA,OAAA,OAAA,EAAA,IAAA,MAAA,OAAA;AACA,WAAA,QAAA;AAAA,IACA;AAAA,IAEA,0BAAA,OAAA;AACA,WAAA,MAAA,yBAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcListItem-BHhlE1Sb.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcListItem-BHhlE1Sb.mjs","sources":["../../src/components/NcListItem/NcListItem.vue"],"sourcesContent":["\n\n<docs>\n\n### Default Usage\n\n```vue\n<template>\n\t<ul>\n\t\t<NcListItem active\n\t\t\tbold\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"highlighted\"\n\t\t\tdetails=\"1h\"\n\t\t\tname=\"This is an active element with highlighted counter\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with outlined counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with normal counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"123\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with highlighted counter\"\n\t\t\tbold\n\t\t\t:force-display-actions=\"true\"\n\t\t\tdetails=\"1h\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"highlighted\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with outlined counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with normal counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\tdetails=\"1h\"\n\t\t\t:counter-number=\"123\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element\"\n\t\t\t:bold=\"false\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #name>\n\t\t\t\t<span style=\"display: flex; gap: 0.5rem; color: var(--color-warning);\">\n\t\t\t\t\tFlexible styling within the first line of the component\n\t\t\t\t\t<div style=\"color: var(--color-error);\">\n\t\t\t\t\t\tlike this.\n\t\t\t\t\t</div>\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Without subname, Name of the element\"\n\t\t\t:bold=\"false\"\n\t\t\tdetails=\"1h\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n\n<script>\n\timport CheckboxBlankCircle from 'vue-material-design-icons/CheckboxBlankCircle'\n\timport LinkIcon from 'vue-material-design-icons/Link'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheckboxBlankCircle,\n\t\t\tLinkIcon,\n\t\t}\n\t}\n</script>\n\n```\n\n### NcListItem one line mode\n```vue\n<NcListItem active\n\t:bold=\"false\"\n\t:counter-number=\"123\"\n\tcounterType=\"highlighted\"\n\tdetails=\"1h\"\n\tname=\"This is an active element with highlighted counter\"\n\tone-line>\n\t<template #icon>\n\t\t<NcAvatar disable-menu :size=\"34\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t</template>\n\t<template #subname>\n\t\tIn this slot you can put both text and other components such as icons\n\t</template>\n\t<template #indicator>\n\t\t\n\t\t<CheckboxBlankCircle :size=\"20\" fill-color=\"#fff\" />\n\t</template>\n\t<template #actions>\n\t\t<NcActionButton>\n\t\t\tButton one\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\tButton two\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\tButton three\n\t\t</NcActionButton>\n\t</template>\n</NcListItem>\n```\n### NcListItem with extra actions slot and customized icon\n\nThe `extra-actions` slot can be used to add other interactive components.\n\nThe `actions-icon` slot can be used to pass icon to the inner NcActions component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with extra actions slot\"\n\t\t\tbold\n\t\t\t:active=\"true\"\n\t\t\t:force-display-actions=\"true\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #extra-actions>\n\t\t\t\t<NcButton variant=\"primary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCog :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #actions-icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an element with extra actions slot\"\n\t\t\tbold>\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #extra-actions>\n\t\t\t\t<NcButton variant=\"tertiary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconPencil :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton variant=\"tertiary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCog :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #actions-icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t</div>\n</template>\n<script>\n\timport IconCog from 'vue-material-design-icons/Cog.vue'\n\timport IconNoteText from 'vue-material-design-icons/NoteText.vue'\n\timport IconPencil from 'vue-material-design-icons/Pencil.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconCog,\n\t\t\tIconNoteText,\n\t\t\tIconPencil,\n\t\t},\n\t}\n</script>\n```\n### NcListItem compact mode\n```vue\n<template>\n\t<ul style=\"width: 350px;\">\n\t\t<NcListItem active\n\t\t\tcompact\n\t\t\tname=\"Active item\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"1\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"3\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"4\"\n\t\t\thref=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with an external link\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n<script>\n\timport IconNoteText from 'vue-material-design-icons/NoteText.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconNoteText,\n\t\t},\n\t}\n</script>\n```\n</docs>\n\n<template>\n\t\n\t<component :is=\"to ? 'router-link' : 'NcVNodes'\"\n\t\tv-slot=\"{ href: routerLinkHref, navigate, isActive }\"\n\t\t:custom=\"to ? true : null\"\n\t\t:to=\"to\"\n\t\t:exact=\"to ? exact : null\">\n\t\t<li class=\"list-item__wrapper\"\n\t\t\t:class=\"{ 'list-item__wrapper--active' : active ?? isActive }\">\n\t\t\t<div ref=\"list-item\"\n\t\t\t\tclass=\"list-item\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'list-item--compact': compact,\n\t\t\t\t\t'list-item--legacy': isLegacy,\n\t\t\t\t\t'list-item--one-line': oneLine,\n\t\t\t\t}\"\n\t\t\t\t@mouseover=\"handleMouseover\"\n\t\t\t\t@mouseleave=\"handleMouseleave\">\n\t\t\t\t<a :id=\"anchorId || undefined\"\n\t\t\t\t\t:aria-label=\"linkAriaLabel\"\n\t\t\t\t\tclass=\"list-item__anchor\"\n\t\t\t\t\t:href=\"routerLinkHref || href\"\n\t\t\t\t\t:target=\"target || (href === '#' ? undefined : '_blank')\"\n\t\t\t\t\t:rel=\"href === '#' ? undefined : 'noopener noreferrer'\"\n\t\t\t\t\t@focus=\"showActions\"\n\t\t\t\t\t@focusout=\"handleBlur\"\n\t\t\t\t\t@click=\"onClick($event, navigate, routerLinkHref)\"\n\t\t\t\t\t@keydown.esc=\"hideActions\">\n\t\t\t\t\t\n\t\t\t\t\t<slot name=\"icon\" />\n\n\t\t\t\t\t\n\t\t\t\t\t<div class=\"list-item-content\">\n\t\t\t\t\t\t<div class=\"list-item-content__main\">\n\t\t\t\t\t\t\t<div class=\"list-item-content__name\">\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<slot name=\"name\">{{ name }}</slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div v-if=\"hasSubname\"\n\t\t\t\t\t\t\t\tclass=\"list-item-content__subname\"\n\t\t\t\t\t\t\t\t:class=\"{'list-item-content__subname--bold': bold}\">\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<slot name=\"subname\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"list-item-content__details\">\n\t\t\t\t\t\t\t<div v-if=\"showDetails\" class=\"list-item-details__details\">\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<slot name=\"details\">{{ details }}</slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<div v-if=\"counterNumber || hasIndicator\"\n\t\t\t\t\t\t\t\tv-show=\"showAdditionalElements\"\n\t\t\t\t\t\t\t\tclass=\"list-item-details__extra\">\n\t\t\t\t\t\t\t\t<NcCounterBubble v-if=\"counterNumber\"\n\t\t\t\t\t\t\t\t\t:active=\"active ?? isActive\"\n\t\t\t\t\t\t\t\t\tclass=\"list-item-details__counter\"\n\t\t\t\t\t\t\t\t\t:type=\"counterType\">\n\t\t\t\t\t\t\t\t\t{{ counterNumber }}\n\t\t\t\t\t\t\t\t</NcCounterBubble>\n\n\t\t\t\t\t\t\t\t<span v-if=\"hasIndicator\" class=\"list-item-details__indicator\">\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<slot name=\"indicator\" />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\n\t\t\t\t<div v-if=\"$slots['extra-actions']\" class=\"list-item-content__extra-actions\">\n\t\t\t\t\t\n\t\t\t\t\t<slot name=\"extra-actions\" />\n\t\t\t\t</div>\n\n\t\t\t\t\n\t\t\t\t<div v-show=\"forceDisplayActions || displayActionsOnHoverFocus\"\n\t\t\t\t\tclass=\"list-item-content__actions\"\n\t\t\t\t\t@focusout=\"handleBlur\">\n\t\t\t\t\t<NcActions ref=\"actions\"\n\t\t\t\t\t\t:primary=\"active ?? isActive\"\n\t\t\t\t\t\t:force-menu=\"forceMenu\"\n\t\t\t\t\t\t:aria-label=\"actionsAriaLabel\"\n\t\t\t\t\t\t@update:open=\"handleActionsUpdateOpen\">\n\t\t\t\t\t\t<template v-if=\"$slots['actions-icon']\" #icon>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<slot name=\"actions-icon\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\n\t\t\t\t<div v-if=\"$slots.extra\" class=\"list-item__extra\">\n\t\t\t\t\t\n\t\t\t\t\t<slot name=\"extra\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</li>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcCounterBubble from '../NcCounterBubble/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\n\nexport default {\n\tname: 'NcListItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcCounterBubble,\n\t\tNcVNodes,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The details text displayed in the upper right part of the component\n\t\t */\n\t\tdetails: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Name (first line of text)\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Pass in `true` if you want the matching behavior to\n\t\t * be non-inclusive: https://router.vuejs.org/api/#exact\n\t\t */\n\t\texact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The route for the router link.\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The value for the external link\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: '#',\n\t\t},\n\n\t\ttarget: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Id for the `<a>` element\n\t\t */\n\t\tanchorId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Make subname bold\n\t\t */\n\t\tbold: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Show the NcListItem in compact design\n\t\t */\n\t\tcompact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Toggle the active state of the component\n\t\t */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Aria label for the wrapper element\n\t\t */\n\t\tlinkAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Aria label for the actions toggle\n\t\t */\n\t\tactionsAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * If different from 0 this component will display the\n\t\t * NcCounterBubble component\n\t\t */\n\t\t counterNumber: {\n\t\t\t type: [Number, String],\n\t\t\t default: 0,\n\t\t },\n\n\t\t/**\n\t\t * Outlined or highlighted state of the counter\n\t\t */\n\t\tcounterType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['highlighted', 'outlined', ''].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * To be used only when the elements in the actions menu are very important\n\t\t */\n\t\tforceDisplayActions: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the actions to display in a three dot menu\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Show the list component layout\n\t\t */\n\t\toneLine: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'click',\n\t\t'update:menuOpen',\n\t],\n\n\tsetup() {\n\t\tconst [major] = window._oc_config?.version.split('.', 2) ?? []\n\t\tconst isLegacy = major && Number.parseInt(major) < 30\n\n\t\treturn {\n\t\t\tisLegacy,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t\thasActions: false,\n\t\t\thasSubname: false,\n\t\t\tdisplayActionsOnHoverFocus: false,\n\t\t\tmenuOpen: false,\n\t\t\thasIndicator: false,\n\t\t\thasDetails: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tshowAdditionalElements() {\n\t\t\treturn !this.displayActionsOnHoverFocus || this.forceDisplayActions\n\t\t},\n\n\t\tshowDetails() {\n\t\t\treturn (this.details !== '' || this.hasDetails)\n\t\t\t\t&& (!this.displayActionsOnHoverFocus || this.forceDisplayActions)\n\t\t},\n\t},\n\n\twatch: {\n\n\t\tmenuOpen(newValue) {\n\t\t\t// A click outside both the menu and the root element hides the actions again\n\t\t\tif (!newValue && !this.hovered) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkSlots()\n\t},\n\n\tupdated() {\n\t\tthis.checkSlots()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Handle link click\n\t\t *\n\t\t * @param {MouseEvent|KeyboardEvent} event - Native click or keydown event\n\t\t * @param {Function} [navigate] - VueRouter link's navigate if any\n\t\t * @param {string} [routerLinkHref] - VueRouter link's href\n\t\t */\n\t\tonClick(event, navigate, routerLinkHref) {\n\t\t\t// Always forward native event\n\t\t\tthis.$emit('click', event)\n\t\t\t// Do not navigate with control keys - it is opening in a new tab\n\t\t\tif (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Prevent default link behaviour if it's a router-link and navigate manually\n\t\t\tif (routerLinkHref) {\n\t\t\t\tnavigate?.(event)\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\tshowActions() {\n\t\t\tif (this.hasActions) {\n\t\t\t\tthis.displayActionsOnHoverFocus = true\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thideActions() {\n\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t},\n\n\t\t/**\n\t\t * @param {FocusEvent} event UI event\n\t\t */\n\t\thandleBlur(event) {\n\t\t\t// do not hide if open\n\t\t\tif (this.menuOpen) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// do not hide if focus is kept within\n\t\t\tif (this.$refs['list-item'].contains(event.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hideActions()\n\t\t},\n\n\t\t/**\n\t\t * Hide the actions on mouseleave unless the menu is open\n\t\t */\n\t\thandleMouseleave() {\n\t\t\tif (!this.menuOpen) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thandleMouseover() {\n\t\t\tthis.showActions()\n\t\t\tthis.hovered = true\n\t\t},\n\n\t\thandleActionsUpdateOpen(e) {\n\t\t\tthis.menuOpen = e\n\t\t\tthis.$emit('update:menuOpen', e)\n\t\t},\n\n\t\t// Check if subname and actions slots are populated\n\t\tcheckSlots() {\n\t\t\tif (this.hasActions !== !!this.$slots.actions) {\n\t\t\t\tthis.hasActions = !!this.$slots.actions\n\t\t\t}\n\t\t\tif (this.hasSubname !== !!this.$slots.subname) {\n\t\t\t\tthis.hasSubname = !!this.$slots.subname\n\t\t\t}\n\t\t\tif (this.hasIndicator !== !!this.$slots.indicator) {\n\t\t\t\tthis.hasIndicator = !!this.$slots.indicator\n\t\t\t}\n\t\t\tif (this.hasDetails !== !!this.$slots.details) {\n\t\t\t\tthis.hasDetails = !!this.$slots.details\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.list-item__wrapper {\n\tdisplay: flex;\n\tposition: relative;\n\twidth: 100%;\n\t// padding for the focus-visible styles. Width is reduced to compensate it\n\tpadding: 2px 4px;\n\t// The first and lastelement needs also padding for the box shadow of the focus-visible effect\n\t&:first-of-type {\n\t\tpadding-block-start: 4px;\n\t}\n\t&:last-of-type {\n\t\tpadding-block-end: 4px\n\t}\n\n\t&--active,\n\t&.active {\n\t\t.list-item {\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\n\t\t\t&:hover,\n\t\t\t&:focus-within,\n\t\t\t&:has(:focus-visible),\n\t\t\t&:has(:active) {\n\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t}\n\t\t}\n\n\t\t.list-item-content__name,\n\t\t.list-item-content__subname,\n\t\t.list-item-content__details,\n\t\t.list-item-details__details {\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\t\t}\n\t}\n\t.list-item-content__name,\n\t.list-item-content__subname,\n\t.list-item-content__details,\n\t.list-item-details__details {\n\t\twhite-space: nowrap;\n\t\tmargin-block: 0;\n\t\tmargin-inline: 0 auto;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n\n.list-item-content__name {\n\tmin-width: 100px;\n\tflex: 1 1 10%;\n\tfont-weight: 500;\n}\n\n.list-item-content__subname {\n\tflex: 1 0;\n\tmin-width: 0;\n\tcolor: var(--color-text-maxcontrast);\n\t&--bold {\n\t\tfont-weight: 500;\n\t}\n}\n\n// NcListItem\n.list-item {\n\t--list-item-padding: var(--default-grid-baseline);\n\t// The content are two lines of text and respect the 1.5 line height\n\t--list-item-height: 2lh;\n\t--list-item-border-radius: var(--border-radius-element, 32px);\n\t// General styles\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tposition: relative;\n\tflex: 0 0 auto;\n\tjustify-content: flex-start;\n\tpadding: var(--list-item-padding);\n\twidth: 100%;\n\tborder-radius: var(--border-radius-element, 32px);\n\tcursor: pointer;\n\ttransition: background-color var(--animation-quick) ease-in-out;\n\tlist-style: none;\n\n\t&:hover,\n\t&:focus-within,\n\t&:has(:active),\n\t&:has(:focus-visible) {\n\t\tbackground-color: var(--color-background-hover);\n\t}\n\n\t&:has(&__anchor:focus-visible) {\n\t\toutline: 2px solid var(--color-main-text);\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background);\n\t}\n\n\t&--compact {\n\t\t--list-item-padding: calc(0.5 * var(--default-grid-baseline)) var(--default-grid-baseline);\n\n\t\t&:not(:has(.list-item-content__subname)) {\n\t\t\t--list-item-height: var(--default-clickable-area);\n\t\t}\n\t}\n\n\t&--legacy {\n\t\t--list-item-padding: calc(2 * var(--default-grid-baseline));\n\n\t\t&.list-item--compact {\n\t\t\t--list-item-padding: var(--default-grid-baseline) calc(2 * var(--default-grid-baseline));\n\t\t}\n\t}\n\n\t&--one-line {\n\t\t--list-item-height: var(--default-clickable-area);\n\t\t--list-item-border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));\n\t\t--list-item-padding: var(--default-grid-baseline);\n\n\t\t&#{&}--legacy {\n\t\t\t--list-item-padding: 2px calc((var(--list-item-height) - var(--list-item-border-radius)) / 2);\n\t\t}\n\n\t\t.list-item-content__main {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: start;\n\t\t\tgap: 12px;\n\t\t\tmin-width: 0;\n\t\t}\n\t\t.list-item-content__details {\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tjustify-content: end;\n\t\t}\n\t\t.list-item-content__name {\n\t\t\talign-self: center;\n\t\t\tmax-width: 300px;\n\t\t}\n\t}\n\n\t&__anchor {\n\t\tcolor: inherit;\n\t\tdisplay: flex;\n\t\tflex: 1 0 auto;\n\t\talign-items: center;\n\t\theight: var(--list-item-height);\n\t\tmin-width: 0;\n\n\t\t// This is handled by the parent container\n\t\t&:focus-visible {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t&-content {\n\t\tdisplay: flex;\n\t\tflex: 1 0;\n\t\tjustify-content: space-between;\n\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t\tmin-width: 0;\n\n\t\t&__main {\n\t\t\tflex: 1 0;\n\t\t\twidth: 0;\n\t\t\tmargin: auto 0;\n\n\t\t\t&--oneline {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t&__details {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tjustify-content: end;\n\t\t\talign-items: end;\n\t\t}\n\n\t\t&__actions,\n\t\t&__extra-actions {\n\t\t\tflex: 0 0 auto;\n\t\t\talign-self: center;\n\t\t\tjustify-content: center;\n\t\t\tmargin-inline-start: var(--default-grid-baseline);\n\t\t}\n\n\t\t&__extra-actions {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--default-grid-baseline);\n\t\t}\n\t}\n\n\t&-details {\n\t\t&__details {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tmargin: 0 9px !important;\n\t\t\tfont-weight: normal;\n\t\t}\n\t\t&__extra {\n\t\t\tmargin: 2px 4px 0 4px;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\t\t&__indicator {\n\t\t\tmargin: 0 5px;\n\t\t}\n\t}\n\n\t&__extra {\n\t\tmargin-top: var(--default-grid-baseline);\n\t}\n}\n\n</style>\n"],"names":[],"mappings":"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"}

package/dist/chunks/NcListItem-Bs-sl-hH.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcListItem-Bs-sl-hH.cjs","sources":["../../src/components/NcListItem/NcListItem.vue"],"sourcesContent":["\n\n<docs>\n\n### Default Usage\n\n```vue\n<template>\n\t<ul>\n\t\t<NcListItem active\n\t\t\tbold\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"highlighted\"\n\t\t\tdetails=\"1h\"\n\t\t\tname=\"This is an active element with highlighted counter\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with outlined counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with normal counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"123\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with highlighted counter\"\n\t\t\tbold\n\t\t\t:force-display-actions=\"true\"\n\t\t\tdetails=\"1h\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"highlighted\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with outlined counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with normal counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\tdetails=\"1h\"\n\t\t\t:counter-number=\"123\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element\"\n\t\t\t:bold=\"false\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #name>\n\t\t\t\t<span style=\"display: flex; gap: 0.5rem; color: var(--color-warning);\">\n\t\t\t\t\tFlexible styling within the first line of the component\n\t\t\t\t\t<div style=\"color: var(--color-error);\">\n\t\t\t\t\t\tlike this.\n\t\t\t\t\t</div>\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Without subname, Name of the element\"\n\t\t\t:bold=\"false\"\n\t\t\tdetails=\"1h\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n\n<script>\n\timport CheckboxBlankCircle from 'vue-material-design-icons/CheckboxBlankCircle'\n\timport LinkIcon from 'vue-material-design-icons/Link'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheckboxBlankCircle,\n\t\t\tLinkIcon,\n\t\t}\n\t}\n</script>\n\n```\n\n### NcListItem one line mode\n```vue\n<NcListItem active\n\t:bold=\"false\"\n\t:counter-number=\"123\"\n\tcounterType=\"highlighted\"\n\tdetails=\"1h\"\n\tname=\"This is an active element with highlighted counter\"\n\tone-line>\n\t<template #icon>\n\t\t<NcAvatar disable-menu :size=\"34\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t</template>\n\t<template #subname>\n\t\tIn this slot you can put both text and other components such as icons\n\t</template>\n\t<template #indicator>\n\t\t\n\t\t<CheckboxBlankCircle :size=\"20\" fill-color=\"#fff\" />\n\t</template>\n\t<template #actions>\n\t\t<NcActionButton>\n\t\t\tButton one\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\tButton two\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\tButton three\n\t\t</NcActionButton>\n\t</template>\n</NcListItem>\n```\n### NcListItem with extra actions slot and customized icon\n\nThe `extra-actions` slot can be used to add other interactive components.\n\nThe `actions-icon` slot can be used to pass icon to the inner NcActions component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with extra actions slot\"\n\t\t\tbold\n\t\t\t:active=\"true\"\n\t\t\t:force-display-actions=\"true\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #extra-actions>\n\t\t\t\t<NcButton variant=\"primary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCog :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #actions-icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an element with extra actions slot\"\n\t\t\tbold>\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #extra-actions>\n\t\t\t\t<NcButton variant=\"tertiary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconPencil :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton variant=\"tertiary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCog :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #actions-icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t</div>\n</template>\n<script>\n\timport IconCog from 'vue-material-design-icons/Cog.vue'\n\timport IconNoteText from 'vue-material-design-icons/NoteText.vue'\n\timport IconPencil from 'vue-material-design-icons/Pencil.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconCog,\n\t\t\tIconNoteText,\n\t\t\tIconPencil,\n\t\t},\n\t}\n</script>\n```\n### NcListItem compact mode\n```vue\n<template>\n\t<ul style=\"width: 350px;\">\n\t\t<NcListItem active\n\t\t\tcompact\n\t\t\tname=\"Active item\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"1\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"3\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"4\"\n\t\t\thref=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with an external link\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n<script>\n\timport IconNoteText from 'vue-material-design-icons/NoteText.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconNoteText,\n\t\t},\n\t}\n</script>\n```\n</docs>\n\n<template>\n\t\n\t<component :is=\"to ? 'router-link' : 'NcVNodes'\"\n\t\tv-slot=\"{ href: routerLinkHref, navigate, isActive }\"\n\t\t:custom=\"to ? true : null\"\n\t\t:to=\"to\"\n\t\t:exact=\"to ? exact : null\">\n\t\t<li class=\"list-item__wrapper\"\n\t\t\t:class=\"{ 'list-item__wrapper--active' : active ?? isActive }\">\n\t\t\t<div ref=\"list-item\"\n\t\t\t\tclass=\"list-item\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'list-item--compact': compact,\n\t\t\t\t\t'list-item--legacy': isLegacy,\n\t\t\t\t\t'list-item--one-line': oneLine,\n\t\t\t\t}\"\n\t\t\t\t@mouseover=\"handleMouseover\"\n\t\t\t\t@mouseleave=\"handleMouseleave\">\n\t\t\t\t<a :id=\"anchorId || undefined\"\n\t\t\t\t\t:aria-label=\"linkAriaLabel\"\n\t\t\t\t\tclass=\"list-item__anchor\"\n\t\t\t\t\t:href=\"routerLinkHref || href\"\n\t\t\t\t\t:target=\"target || (href === '#' ? undefined : '_blank')\"\n\t\t\t\t\t:rel=\"href === '#' ? undefined : 'noopener noreferrer'\"\n\t\t\t\t\t@focus=\"showActions\"\n\t\t\t\t\t@focusout=\"handleBlur\"\n\t\t\t\t\t@click=\"onClick($event, navigate, routerLinkHref)\"\n\t\t\t\t\t@keydown.esc=\"hideActions\">\n\t\t\t\t\t\n\t\t\t\t\t<slot name=\"icon\" />\n\n\t\t\t\t\t\n\t\t\t\t\t<div class=\"list-item-content\">\n\t\t\t\t\t\t<div class=\"list-item-content__main\">\n\t\t\t\t\t\t\t<div class=\"list-item-content__name\">\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<slot name=\"name\">{{ name }}</slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div v-if=\"hasSubname\"\n\t\t\t\t\t\t\t\tclass=\"list-item-content__subname\"\n\t\t\t\t\t\t\t\t:class=\"{'list-item-content__subname--bold': bold}\">\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<slot name=\"subname\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"list-item-content__details\">\n\t\t\t\t\t\t\t<div v-if=\"showDetails\" class=\"list-item-details__details\">\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<slot name=\"details\">{{ details }}</slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<div v-if=\"counterNumber || hasIndicator\"\n\t\t\t\t\t\t\t\tv-show=\"showAdditionalElements\"\n\t\t\t\t\t\t\t\tclass=\"list-item-details__extra\">\n\t\t\t\t\t\t\t\t<NcCounterBubble v-if=\"counterNumber\"\n\t\t\t\t\t\t\t\t\t:active=\"active ?? isActive\"\n\t\t\t\t\t\t\t\t\tclass=\"list-item-details__counter\"\n\t\t\t\t\t\t\t\t\t:type=\"counterType\">\n\t\t\t\t\t\t\t\t\t{{ counterNumber }}\n\t\t\t\t\t\t\t\t</NcCounterBubble>\n\n\t\t\t\t\t\t\t\t<span v-if=\"hasIndicator\" class=\"list-item-details__indicator\">\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<slot name=\"indicator\" />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\n\t\t\t\t<div v-if=\"$slots['extra-actions']\" class=\"list-item-content__extra-actions\">\n\t\t\t\t\t\n\t\t\t\t\t<slot name=\"extra-actions\" />\n\t\t\t\t</div>\n\n\t\t\t\t\n\t\t\t\t<div v-show=\"forceDisplayActions || displayActionsOnHoverFocus\"\n\t\t\t\t\tclass=\"list-item-content__actions\"\n\t\t\t\t\t@focusout=\"handleBlur\">\n\t\t\t\t\t<NcActions ref=\"actions\"\n\t\t\t\t\t\t:primary=\"active ?? isActive\"\n\t\t\t\t\t\t:force-menu=\"forceMenu\"\n\t\t\t\t\t\t:aria-label=\"actionsAriaLabel\"\n\t\t\t\t\t\t@update:open=\"handleActionsUpdateOpen\">\n\t\t\t\t\t\t<template v-if=\"$slots['actions-icon']\" #icon>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<slot name=\"actions-icon\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\n\t\t\t\t<div v-if=\"$slots.extra\" class=\"list-item__extra\">\n\t\t\t\t\t\n\t\t\t\t\t<slot name=\"extra\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</li>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcCounterBubble from '../NcCounterBubble/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\n\nexport default {\n\tname: 'NcListItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcCounterBubble,\n\t\tNcVNodes,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The details text displayed in the upper right part of the component\n\t\t */\n\t\tdetails: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Name (first line of text)\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Pass in `true` if you want the matching behavior to\n\t\t * be non-inclusive: https://router.vuejs.org/api/#exact\n\t\t */\n\t\texact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The route for the router link.\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The value for the external link\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: '#',\n\t\t},\n\n\t\ttarget: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Id for the `<a>` element\n\t\t */\n\t\tanchorId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Make subname bold\n\t\t */\n\t\tbold: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Show the NcListItem in compact design\n\t\t */\n\t\tcompact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Toggle the active state of the component\n\t\t */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Aria label for the wrapper element\n\t\t */\n\t\tlinkAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Aria label for the actions toggle\n\t\t */\n\t\tactionsAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * If different from 0 this component will display the\n\t\t * NcCounterBubble component\n\t\t */\n\t\t counterNumber: {\n\t\t\t type: [Number, String],\n\t\t\t default: 0,\n\t\t },\n\n\t\t/**\n\t\t * Outlined or highlighted state of the counter\n\t\t */\n\t\tcounterType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['highlighted', 'outlined', ''].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * To be used only when the elements in the actions menu are very important\n\t\t */\n\t\tforceDisplayActions: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the actions to display in a three dot menu\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Show the list component layout\n\t\t */\n\t\toneLine: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'click',\n\t\t'update:menuOpen',\n\t],\n\n\tsetup() {\n\t\tconst [major] = window._oc_config?.version.split('.', 2) ?? []\n\t\tconst isLegacy = major && Number.parseInt(major) < 30\n\n\t\treturn {\n\t\t\tisLegacy,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t\thasActions: false,\n\t\t\thasSubname: false,\n\t\t\tdisplayActionsOnHoverFocus: false,\n\t\t\tmenuOpen: false,\n\t\t\thasIndicator: false,\n\t\t\thasDetails: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tshowAdditionalElements() {\n\t\t\treturn !this.displayActionsOnHoverFocus || this.forceDisplayActions\n\t\t},\n\n\t\tshowDetails() {\n\t\t\treturn (this.details !== '' || this.hasDetails)\n\t\t\t\t&& (!this.displayActionsOnHoverFocus || this.forceDisplayActions)\n\t\t},\n\t},\n\n\twatch: {\n\n\t\tmenuOpen(newValue) {\n\t\t\t// A click outside both the menu and the root element hides the actions again\n\t\t\tif (!newValue && !this.hovered) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkSlots()\n\t},\n\n\tupdated() {\n\t\tthis.checkSlots()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Handle link click\n\t\t *\n\t\t * @param {MouseEvent|KeyboardEvent} event - Native click or keydown event\n\t\t * @param {Function} [navigate] - VueRouter link's navigate if any\n\t\t * @param {string} [routerLinkHref] - VueRouter link's href\n\t\t */\n\t\tonClick(event, navigate, routerLinkHref) {\n\t\t\t// Always forward native event\n\t\t\tthis.$emit('click', event)\n\t\t\t// Do not navigate with control keys - it is opening in a new tab\n\t\t\tif (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Prevent default link behaviour if it's a router-link and navigate manually\n\t\t\tif (routerLinkHref) {\n\t\t\t\tnavigate?.(event)\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\tshowActions() {\n\t\t\tif (this.hasActions) {\n\t\t\t\tthis.displayActionsOnHoverFocus = true\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thideActions() {\n\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t},\n\n\t\t/**\n\t\t * @param {FocusEvent} event UI event\n\t\t */\n\t\thandleBlur(event) {\n\t\t\t// do not hide if open\n\t\t\tif (this.menuOpen) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// do not hide if focus is kept within\n\t\t\tif (this.$refs['list-item'].contains(event.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hideActions()\n\t\t},\n\n\t\t/**\n\t\t * Hide the actions on mouseleave unless the menu is open\n\t\t */\n\t\thandleMouseleave() {\n\t\t\tif (!this.menuOpen) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thandleMouseover() {\n\t\t\tthis.showActions()\n\t\t\tthis.hovered = true\n\t\t},\n\n\t\thandleActionsUpdateOpen(e) {\n\t\t\tthis.menuOpen = e\n\t\t\tthis.$emit('update:menuOpen', e)\n\t\t},\n\n\t\t// Check if subname and actions slots are populated\n\t\tcheckSlots() {\n\t\t\tif (this.hasActions !== !!this.$slots.actions) {\n\t\t\t\tthis.hasActions = !!this.$slots.actions\n\t\t\t}\n\t\t\tif (this.hasSubname !== !!this.$slots.subname) {\n\t\t\t\tthis.hasSubname = !!this.$slots.subname\n\t\t\t}\n\t\t\tif (this.hasIndicator !== !!this.$slots.indicator) {\n\t\t\t\tthis.hasIndicator = !!this.$slots.indicator\n\t\t\t}\n\t\t\tif (this.hasDetails !== !!this.$slots.details) {\n\t\t\t\tthis.hasDetails = !!this.$slots.details\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.list-item__wrapper {\n\tdisplay: flex;\n\tposition: relative;\n\twidth: 100%;\n\t// padding for the focus-visible styles. Width is reduced to compensate it\n\tpadding: 2px 4px;\n\t// The first and lastelement needs also padding for the box shadow of the focus-visible effect\n\t&:first-of-type {\n\t\tpadding-block-start: 4px;\n\t}\n\t&:last-of-type {\n\t\tpadding-block-end: 4px\n\t}\n\n\t&--active,\n\t&.active {\n\t\t.list-item {\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\n\t\t\t&:hover,\n\t\t\t&:focus-within,\n\t\t\t&:has(:focus-visible),\n\t\t\t&:has(:active) {\n\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t}\n\t\t}\n\n\t\t.list-item-content__name,\n\t\t.list-item-content__subname,\n\t\t.list-item-content__details,\n\t\t.list-item-details__details {\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\t\t}\n\t}\n\t.list-item-content__name,\n\t.list-item-content__subname,\n\t.list-item-content__details,\n\t.list-item-details__details {\n\t\twhite-space: nowrap;\n\t\tmargin-block: 0;\n\t\tmargin-inline: 0 auto;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n\n.list-item-content__name {\n\tmin-width: 100px;\n\tflex: 1 1 10%;\n\tfont-weight: 500;\n}\n\n.list-item-content__subname {\n\tflex: 1 0;\n\tmin-width: 0;\n\tcolor: var(--color-text-maxcontrast);\n\t&--bold {\n\t\tfont-weight: 500;\n\t}\n}\n\n// NcListItem\n.list-item {\n\t--list-item-padding: var(--default-grid-baseline);\n\t// The content are two lines of text and respect the 1.5 line height\n\t--list-item-height: 2lh;\n\t--list-item-border-radius: var(--border-radius-element, 32px);\n\t// General styles\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tposition: relative;\n\tflex: 0 0 auto;\n\tjustify-content: flex-start;\n\tpadding: var(--list-item-padding);\n\twidth: 100%;\n\tborder-radius: var(--border-radius-element, 32px);\n\tcursor: pointer;\n\ttransition: background-color var(--animation-quick) ease-in-out;\n\tlist-style: none;\n\n\t&:hover,\n\t&:focus-within,\n\t&:has(:active),\n\t&:has(:focus-visible) {\n\t\tbackground-color: var(--color-background-hover);\n\t}\n\n\t&:has(&__anchor:focus-visible) {\n\t\toutline: 2px solid var(--color-main-text);\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background);\n\t}\n\n\t&--compact {\n\t\t--list-item-padding: calc(0.5 * var(--default-grid-baseline)) var(--default-grid-baseline);\n\n\t\t&:not(:has(.list-item-content__subname)) {\n\t\t\t--list-item-height: var(--default-clickable-area);\n\t\t}\n\t}\n\n\t&--legacy {\n\t\t--list-item-padding: calc(2 * var(--default-grid-baseline));\n\n\t\t&.list-item--compact {\n\t\t\t--list-item-padding: var(--default-grid-baseline) calc(2 * var(--default-grid-baseline));\n\t\t}\n\t}\n\n\t&--one-line {\n\t\t--list-item-height: var(--default-clickable-area);\n\t\t--list-item-border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));\n\t\t--list-item-padding: var(--default-grid-baseline);\n\n\t\t&#{&}--legacy {\n\t\t\t--list-item-padding: 2px calc((var(--list-item-height) - var(--list-item-border-radius)) / 2);\n\t\t}\n\n\t\t.list-item-content__main {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: start;\n\t\t\tgap: 12px;\n\t\t\tmin-width: 0;\n\t\t}\n\t\t.list-item-content__details {\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tjustify-content: end;\n\t\t}\n\t\t.list-item-content__name {\n\t\t\talign-self: center;\n\t\t\tmax-width: 300px;\n\t\t}\n\t}\n\n\t&__anchor {\n\t\tcolor: inherit;\n\t\tdisplay: flex;\n\t\tflex: 1 0 auto;\n\t\talign-items: center;\n\t\theight: var(--list-item-height);\n\t\tmin-width: 0;\n\n\t\t// This is handled by the parent container\n\t\t&:focus-visible {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t&-content {\n\t\tdisplay: flex;\n\t\tflex: 1 0;\n\t\tjustify-content: space-between;\n\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t\tmin-width: 0;\n\n\t\t&__main {\n\t\t\tflex: 1 0;\n\t\t\twidth: 0;\n\t\t\tmargin: auto 0;\n\n\t\t\t&--oneline {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t&__details {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tjustify-content: end;\n\t\t\talign-items: end;\n\t\t}\n\n\t\t&__actions,\n\t\t&__extra-actions {\n\t\t\tflex: 0 0 auto;\n\t\t\talign-self: center;\n\t\t\tjustify-content: center;\n\t\t\tmargin-inline-start: var(--default-grid-baseline);\n\t\t}\n\n\t\t&__extra-actions {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--default-grid-baseline);\n\t\t}\n\t}\n\n\t&-details {\n\t\t&__details {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tmargin: 0 9px !important;\n\t\t\tfont-weight: normal;\n\t\t}\n\t\t&__extra {\n\t\t\tmargin: 2px 4px 0 4px;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\t\t&__indicator {\n\t\t\tmargin: 0 5px;\n\t\t}\n\t}\n\n\t&__extra {\n\t\tmargin-top: var(--default-grid-baseline);\n\t}\n}\n\n</style>\n"],"names":["NcActions","NcCounterBubble","NcVNodes"],"mappings":"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"}