npm - @nextcloud/vue - Versions diffs - 9.0.0-rc.6 → 9.0.0-rc.7 - Mend

@nextcloud/vue 9.0.0-rc.6 → 9.0.0-rc.7

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

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

@@ -1 +0,0 @@

- {"version":3,"file":"NcAvatar-CnRCSalb.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\t<div>\n\t\t<NcAvatar user=\"janedoe\"\n\t\t\tdisplay-name=\"Jane Doe\"\n\t\t\t:preloaded-user-status=\"status.online\">\n\t\t</NcAvatar>\n\t\t<NcAvatar user=\"janedoe\"\n\t\t\tdisplay-name=\"Jane Doe\"\n\t\t\t:preloaded-user-status=\"status.away\">\n\t\t</NcAvatar>\n\t\t<NcAvatar user=\"janedoe\"\n\t\t\tdisplay-name=\"Jane Doe\"\n\t\t\t:preloaded-user-status=\"status.dnd\">\n\t\t</NcAvatar>\n\t\t<NcAvatar user=\"janedoe\"\n\t\t\tdisplay-name=\"Jane Doe\"\n\t\t\t:preloaded-user-status=\"status.custom\">\n\t\t</NcAvatar>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tstatus: {\n\t\t\t\tonline: {\n\t\t\t\t\ticon: '',\n\t\t\t\t\tstatus: 'online',\n\t\t\t\t\tmessage: 'Available',\n\t\t\t\t},\n\t\t\t\taway: {\n\t\t\t\t\ticon: '',\n\t\t\t\t\tstatus: 'away',\n\t\t\t\t\tmessage: 'Away',\n\t\t\t\t},\n\t\t\t\tdnd: {\n\t\t\t\t\ticon: '',\n\t\t\t\t\tstatus: 'dnd',\n\t\t\t\t\tmessage: 'Busy',\n\t\t\t\t},\n\t\t\t\tcustom: {\n\t\t\t\t\ticon: '📆',\n\t\t\t\t\tstatus: 'online',\n\t\t\t\t\tmessage: 'In a meeting',\n\t\t\t\t}\n\t\t\t},\n\t\t}\n\t},\n}\n</script>\n```\n\n### Avatar for non-users\n\n```vue\n\t<NcAvatar display-name=\"Robbie Hyeon-Jeong\" :is-no-user=\"true\" />\n```\n\n### Avatar on complex background\n\n```\n<template>\n\t<div class=\"avatar-background\">\n\t\t<NcAvatar class=\"avatar\" :is-no-user=\"true\" display-name=\"Cecilia Rohese\" />\n\t</div>\n</template>\n<style scoped>\n.avatar-background {\n\twidth: 80px;\n\theight: 60px;\n\tbackground: linear-gradient(to bottom, #0057b8 0%, #0057b8 49.99%, #ffd700 50%, #ffd700 100%);\n}\n\n.avatar {\n\tmargin: 15px 25px;\n}\n</style>\n```\n\n### Avatar size\n\n```vue\n<template>\n\t<div>\n\t\t<div v-for=\"size in [15, 24, 34, 44, 180]\">\n\t\t\t<span>\n\t\t\t\t{{ size }}px\n\t\t\t</span>\n\t\t\t<NcAvatar user=\"alice-smith\"\n\t\t\t\tdisplay-name=\"Alice Smith\"\n\t\t\t\t:size=\"size\"\n\t\t\t\t:preloaded-user-status=\"status.online\" />\n\t\t\t<NcAvatar user=\"bob-doe\"\n\t\t\t\tdisplay-name=\"Bob Doe\"\n\t\t\t\t:size=\"size\"\n\t\t\t\t:preloaded-user-status=\"status.meeting\" />\n\t\t</div>\n\t\t<div>\n\t\t\t<div>\n\t\t\t\tCustom: {{ customSize }}px\n\t\t\t</div>\n\t\t\t<NcAvatar user=\"alice-smith\"\n\t\t\t\tdisplay-name=\"Alice Smith\"\n\t\t\t\t:size=\"customSize\"\n\t\t\t\t:preloaded-user-status=\"status.online\" />\n\t\t\t<NcAvatar user=\"bob-doe\"\n\t\t\t\tdisplay-name=\"Bob Doe\"\n\t\t\t\t:size=\"customSize\"\n\t\t\t\t:preloaded-user-status=\"status.meeting\" />\n\t\t</div>\n\t\t<div>\n\t\t\t<input type=\"range\" v-model=\"customSize\" :min=\"15\" :max=\"180\" step=\"1\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'\n\nexport default {\n\tcomponents: {\n\t\tAccountMultiple,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcustomSize: 20,\n\t\t\tstatus: {\n\t\t\t\tonline: {\n\t\t\t\t\ticon: '',\n\t\t\t\t\tstatus: 'online',\n\t\t\t\t\tmessage: 'Available',\n\t\t\t\t},\n\t\t\t\tmeeting: {\n\t\t\t\t\ticon: '📆',\n\t\t\t\t\tstatus: 'online',\n\t\t\t\t\tmessage: 'In a meeting',\n\t\t\t\t},\n\t\t\t},\n\t\t}\n\t},\n}\n</script>\n```\n\n</docs>\n<template>\n\t<span v-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<IconDotsHorizontal v-else :size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcActions v-else-if=\"hasMenu\"\n\t\t\tv-model:open=\"contactsMenuOpenState\"\n\t\t\t:aria-label=\"avatarAriaLabel\"\n\t\t\t:container=\"menuContainer\"\n\t\t\tforce-menu\n\t\t\tmanual-open\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click=\"toggleMenu\">\n\t\t\t<component :is=\"item.ncActionComponent\"\n\t\t\t\tv-for=\"(item, key) in menu\"\n\t\t\t\t:key=\"key\"\n\t\t\t\tv-bind=\"item.ncActionComponentProps\">\n\t\t\t\t<template v-if=\"item.iconSvg\" #icon>\n\t\t\t\t\t<NcIconSvgWrapper :svg=\"item.iconSvg\" />\n\t\t\t\t</template>\n\t\t\t\t{{ item.text }}\n\t\t\t</component>\n\t\t\t<template v-if=\"contactsMenuLoading\" #icon>\n\t\t\t\t<NcLoadingIcon />\n\t\t\t</template>\n\t\t</NcActions>\n\n\t\t\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 { getCurrentUser } from '@nextcloud/auth'\nimport axios from '@nextcloud/axios'\nimport { getBuilder } from '@nextcloud/browser-storage'\nimport { subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { generateUrl } from '@nextcloud/router'\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\n\nimport IconDotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcActionLink from '../NcActionLink/index.js'\nimport NcActionRouter from '../NcActionRouter/index.js'\nimport NcActionText from '../NcActionText/index.js'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\nimport NcLoadingIcon from '../NcLoadingIcon/index.ts'\nimport NcUserStatusIcon from '../NcUserStatusIcon/index.js'\n\nimport { getRoute } from '../../components/NcRichText/autolink.ts'\nimport { useIsDarkTheme } from '../../composables/index.ts'\nimport { getEnabledContactsMenuActions } from '../../functions/contactsMenu/index.ts'\nimport { usernameToColor } from '../../functions/usernameToColor/index.ts'\nimport { userStatus } from '../../mixins/index.js'\nimport { getAvatarUrl } from '../../utils/getAvatarUrl.ts'\nimport logger from '../../utils/logger.ts'\nimport { getUserStatusText } from '../../utils/UserStatus.ts'\nimport { t } from '../../l10n.ts'\n\nconst browserStorage = getBuilder('nextcloud').persist().build()\n\n/**\n * @param {string} userId The id of the user\n */\nfunction getUserHasAvatar(userId) {\n\tconst flag = browserStorage.getItem('user-has-avatar.' + userId)\n\tif (typeof flag === 'string') {\n\t\treturn Boolean(flag)\n\t}\n\treturn null\n}\n\n/**\n * @param {string} userId The id of the user\n * @param {boolean} flag Has the user an avatar\n */\nfunction setUserHasAvatar(userId, flag) {\n\tif (userId) {\n\t\tbrowserStorage.setItem('user-has-avatar.' + userId, flag)\n\t}\n}\n\nexport default {\n\tname: 'NcAvatar',\n\n\tdirectives: {\n\t\t/** @type {import('vue').ObjectDirective} */\n\t\tClickOutside,\n\t},\n\tcomponents: {\n\t\tIconDotsHorizontal,\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\thideStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\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 * 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\tnoPlaceholder: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\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\n\tsetup() {\n\t\tconst isDarkTheme = useIsDarkTheme()\n\n\t\treturn {\n\t\t\tisDarkTheme,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tavatarUrlLoaded: null,\n\t\t\tavatarSrcSetLoaded: null,\n\t\t\tuserDoesNotExist: false,\n\t\t\tisAvatarLoaded: false,\n\t\t\tisMenuLoaded: false,\n\t\t\tcontactsMenuLoading: false,\n\t\t\tcontactsMenuData: {},\n\t\t\tcontactsMenuActions: [],\n\t\t\tcontactsMenuOpenState: false,\n\t\t}\n\t},\n\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.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.verboseStatus\n\t\t\t\t&& this.hasStatus\n\t\t\t\t&& this.userStatus.status !== 'dnd'\n\t\t\t\t&& this.userStatus.icon\n\t\t},\n\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.userDoesNotExist && !(this.iconClass || this.$slots.icon)\n\t\t},\n\n\t\tavatarStyle() {\n\t\t\treturn {\n\t\t\t\t'--avatar-size': this.size + 'px',\n\t\t\t\tlineHeight: this.showInitials ? (this.size + 'px') : 0,\n\t\t\t\tfontSize: Math.round(this.size * 0.45) + 'px',\n\t\t\t}\n\t\t},\n\t\tinitialsWrapperStyle() {\n\t\t\tconst { r, g, b } = usernameToColor(this.userIdentifier)\n\t\t\treturn {\n\t\t\t\tbackgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)`,\n\t\t\t}\n\t\t},\n\t\tinitialsStyle() {\n\t\t\tconst { r, g, b } = usernameToColor(this.userIdentifier)\n\t\t\treturn {\n\t\t\t\tcolor: `rgb(${r}, ${g}, ${b})`,\n\t\t\t}\n\t\t},\n\t\ttooltip() {\n\t\t\tif (this.disableTooltip) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tif (this.tooltipMessage) {\n\t\t\t\treturn this.tooltipMessage\n\t\t\t}\n\n\t\t\treturn this.displayName\n\t\t},\n\n\t\t/**\n\t\t * Get the (max. two) initials of the user as uppcase string\n\t\t */\n\t\tinitials() {\n\t\t\tlet initials = '?'\n\t\t\tif (this.showInitials) {\n\t\t\t\tconst user = this.userIdentifier.trim()\n\t\t\t\tif (user === '') {\n\t\t\t\t\treturn 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\t\tonClick: () => action.callback(this.contactsMenuData),\n\t\t\t\t\t\t},\n\t\t\t\t\t\ttext: action.displayName(this.contactsMenuData),\n\t\t\t\t\t\ticonSvg: action.iconSvg(this.contactsMenuData),\n\t\t\t\t\t})\n\t\t\t\t} catch (error) {\n\t\t\t\t\tlogger.error(`Failed to render ContactsMenu action ${action.id}`, {\n\t\t\t\t\t\terror,\n\t\t\t\t\t\taction,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * @param {string} html The HTML to escape\n\t\t\t */\n\t\t\tfunction escape(html) {\n\t\t\t\tconst text = document.createTextNode(html)\n\t\t\t\tconst p = document.createElement('p')\n\t\t\t\tp.appendChild(text)\n\t\t\t\treturn p.innerHTML\n\t\t\t}\n\n\t\t\tif (!this.hideStatus && (this.userStatus.icon || this.userStatus.message)) {\n\t\t\t\t// NcAction's URL icons are inverted in dark mode, so we need to pass SVG image in the icon slot\n\t\t\t\tconst emojiIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n\t\t\t\t\t<text x=\"50%\" y=\"50%\" text-anchor=\"middle\" style=\"dominant-baseline: central; font-size: 85%\">${escape(this.userStatus.icon)}</text>\n\t\t\t\t</svg>`\n\t\t\t\treturn [{\n\t\t\t\t\tncActionComponent: NcActionText,\n\t\t\t\t\tncActionComponentProps: {},\n\t\t\t\t\ticonSvg: this.userStatus.icon ? emojiIcon : undefined,\n\t\t\t\t\ttext: `${this.userStatus.message}`,\n\t\t\t\t}].concat(actions)\n\t\t\t}\n\n\t\t\treturn actions\n\t\t},\n\t},\n\n\twatch: {\n\t\turl() {\n\t\t\tthis.userDoesNotExist = false\n\t\t\tthis.loadAvatarUrl()\n\t\t},\n\t\tuser() {\n\t\t\tthis.userDoesNotExist = false\n\t\t\tthis.isMenuLoaded = false\n\t\t\tthis.loadAvatarUrl()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.loadAvatarUrl()\n\t\tsubscribe('settings:avatar:updated', this.loadAvatarUrl)\n\t\tsubscribe('settings:display-name:updated', this.loadAvatarUrl)\n\t\tif (!this.hideStatus && this.user && !this.isNoUser) {\n\t\t\tif (!this.preloadedUserStatus) {\n\t\t\t\tthis.fetchUserStatus(this.user)\n\t\t\t} else {\n\t\t\t\tthis.userStatus.status = this.preloadedUserStatus.status || ''\n\t\t\t\tthis.userStatus.message = this.preloadedUserStatus.message || ''\n\t\t\t\tthis.userStatus.icon = this.preloadedUserStatus.icon || ''\n\t\t\t\tthis.hasStatus = this.preloadedUserStatus.status !== null\n\t\t\t}\n\t\t\tsubscribe('user_status:status.updated', this.handleUserStatusUpdated)\n\t\t}\n\t},\n\n\tbeforeUnmount() {\n\t\tunsubscribe('settings:avatar:updated', this.loadAvatarUrl)\n\t\tunsubscribe('settings:display-name:updated', this.loadAvatarUrl)\n\t\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, {\n\t\t\t\tsize,\n\t\t\t\tisDarkTheme: this.isDarkTheme,\n\t\t\t\tisGuest: this.isGuest,\n\t\t\t})\n\n\t\t\t// eslint-disable-next-line camelcase\n\t\t\tif (user === getCurrentUser()?.uid && typeof oc_userconfig !== 'undefined') {\n\t\t\t\tavatarUrl += '?v=' + 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(--avatar-size);\n\theight: var(--avatar-size);\n\n\t&--unknown {\n\t\tposition: relative;\n\t\tbackground-color: var(--color-main-background);\n\t\twhite-space: normal;\n\t}\n\n\t&:not(&--unknown) {\n\t\t// White/black background for avatars with transparency\n\t\tbackground-color: var(--color-main-background) !important;\n\t\tbox-shadow: 0 0 5px rgba(0, 0, 0, 0.05) inset;\n\t}\n\n\t&--with-menu {\n\t\tcursor: pointer;\n\t\t.action-item {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tinset-inline-start: 0;\n\t\t}\n\t\t:deep(.action-item__menutoggle) {\n\t\t\tcursor: pointer;\n\t\t\topacity: 0;\n\t\t}\n\t\t&:focus-within,\n\t\t&:hover,\n\t\t&#{&}-loading {\n\t\t\t:deep(.action-item__menutoggle) {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t\timg {\n\t\t\t\topacity: 0.3;\n\t\t\t}\n\t\t}\n\t\t:deep(.action-item__menutoggle),\n\t\timg {\n\t\t\ttransition: opacity var(--animation-quick);\n\t\t}\n\t\t:deep() {\n\t\t\t.button-vue,\n\t\t\t.button-vue__icon {\n\t\t\t\theight: var(--avatar-size);\n\t\t\t\tmin-height: var(--avatar-size);\n\t\t\t\twidth: var(--avatar-size) !important;\n\t\t\t\tmin-width: var(--avatar-size);\n\t\t\t}\n\t\t}\n\t\t& > :deep(.button-vue),\n\t\t& > :deep(.action-item .button-vue) {\n\t\t\t--button-radius: calc(var(--avatar-size) / 2);\n\t\t}\n\t}\n\n\t.avatardiv__initials-wrapper {\n\t\tdisplay: block;\n\t\theight: var(--avatar-size);\n\t\twidth: var(--avatar-size);\n\t\tbackground-color: var(--color-main-background);\n\t\tborder-radius: calc(var(--avatar-size) / 2);\n\n\t\t.avatardiv__initials {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tinset-inline-start: 0;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t\ttext-align: center;\n\t\t\tfont-weight: normal;\n\t\t}\n\t}\n\n\timg {\n\t\t// Cover entire area\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\t// Keep ratio\n\t\tobject-fit: cover;\n\t}\n\n\t.material-design-icon {\n\t\twidth: var(--avatar-size);\n\t\theight: var(--avatar-size);\n\t}\n\n\t.avatardiv__user-status {\n\t\t// Size of the status icon to make it:\n\t\t// - 💫 Orbital: the status icon's center is positioned on the avatar circle\n\t\t// - ⏹️ Best-fit: the status icon is as large as possible without exceeding the avatar box\n\t\t// See PR for math explanation: PR #6004\n\t\t--avatar-status-size-orbital: calc(var(--avatar-size) * (1 - 1 / sqrt(2)));\n\t\t// Limit the status icon size to the status of a small clickable avatar\n\t\t// Ideally avatars with a smaller should not be used with the status icon at all\n\t\t--avatar-status-size-min: calc(var(--default-clickable-area) * (1 - 1 / sqrt(2)));\n\t\t--avatar-status-size: max(var(--avatar-status-size-orbital), var(--avatar-status-size-min));\n\t\t// Because the status icon size is limited, smaller avatar requires a position offset to keep the status icon orbital\n\t\t--avatar-status-icon-position: min(0px, (var(--avatar-status-size-orbital) - var(--avatar-status-size)) / 2);\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tinset-inline-end: var(--avatar-status-icon-position);\n\t\tinset-block-end: var(--avatar-status-icon-position);\n\t\theight: var(--avatar-status-size);\n\t\twidth: var(--avatar-status-size);\n\t\tline-height: 1;\n\t\tfont-size: calc(var(--avatar-status-size) / 1.2);\n\t\tbackground-color: var(--color-main-background);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: var(--avatar-status-size);\n\t\tbackground-position: center;\n\t\tborder-radius: 50%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t.acli:hover & {\n\t\t\tborder-color: var(--color-background-hover);\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\t\t.acli.active & {\n\t\t\tborder-color: var(--color-primary-element-light);\n\t\t\tbackground-color: var(--color-primary-element-light);\n\t\t}\n\n\t\t&--icon {\n\t\t\tborder: none;\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t.popovermenu-wrapper {\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t}\n}\n\n.avatar-class-icon {\n\tdisplay: block;\n\tborder-radius: calc(var(--avatar-size) / 2);\n\tbackground-color: var(--color-background-darker);\n\theight: 100%;\n}\n\n</style>\n"],"names":["ClickOutside","_createElementBlock","_normalizeClass","_renderSlot","_createBlock","_openBlock","_Fragment","_renderList","_resolveDynamicComponent","_mergeProps","_createSlots","_toDisplayString","_createVNode","_createElementVNode"],"mappings":"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"}

package/dist/chunks/NcBreadcrumb-B97vQkN2.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcBreadcrumb-B97vQkN2.mjs","sources":["../../node_modules/vue-material-design-icons/ChevronRight.vue","../../src/components/NcBreadcrumb/NcBreadcrumb.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon chevron-right-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"ChevronRightIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","\n\n<docs>\n\n### General description\n\nThis component is meant to be used inside a Breadcrumbs component.\nRenders a button element when given no redirection props, otherwise, renders <a/> or <router-link/> elements\n\n</docs>\n\n<template>\n\t<li ref=\"crumb\"\n\t\tclass=\"vue-crumb\"\n\t\t:class=\"[{'vue-crumb--hovered': hovering}, $props.class]\"\n\t\t:data-crumb-id=\"crumbId\"\n\t\tdraggable=\"false\"\n\t\t@dragstart.prevent=\"() => {/** Prevent the breadcrumb from being draggable. */}\"\n\t\t@drop.prevent=\"dropped\"\n\t\t@dragover.prevent=\"() => {}\"\n\t\t@dragenter=\"dragEnter\"\n\t\t@dragleave=\"dragLeave\">\n\t\t<NcButton v-if=\"(name || icon || $slots.icon) && !$slots.default\"\n\t\t\t:aria-label=\"icon ? name : undefined\"\n\t\t\tvariant=\"tertiary\"\n\t\t\tv-bind=\"linkAttributes\">\n\t\t\t<template v-if=\"$slots.icon || icon\" #icon>\n\t\t\t\t\n\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t<span :class=\"icon\" class=\"icon\" />\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t\t<template v-if=\"!($slots.icon || icon) || forceIconText\" #default>\n\t\t\t\t{{ name }}\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcActions v-if=\"$slots.default\"\n\t\t\tref=\"actions\"\n\t\t\t:container=\"actionsContainer\"\n\t\t\t:force-menu=\"forceMenu\"\n\t\t\tforce-name\n\t\t\t:open=\"open\"\n\t\t\t:menu-name=\"name\"\n\t\t\t:title\n\t\t\tvariant=\"tertiary\"\n\t\t\t@update:open=\"onOpenChange\">\n\t\t\t<template #icon>\n\t\t\t\t\n\t\t\t\t<slot name=\"menu-icon\" />\n\t\t\t</template>\n\t\t\t\n\t\t\t<slot />\n\t\t</NcActions>\n\t\t<ChevronRight class=\"vue-crumb__separator\" :size=\"20\" />\n\t</li>\n</template>\n\n<script>\nimport { createElementId } from '../../utils/createElementId.ts'\nimport NcActions from '../NcActions/index.js'\nimport NcButton from '../NcButton/NcButton.vue'\n\nimport ChevronRight from 'vue-material-design-icons/ChevronRight.vue'\n\nexport default {\n\tname: 'NcBreadcrumb',\n\tcomponents: {\n\t\tNcActions,\n\t\tChevronRight,\n\t\tNcButton,\n\t},\n\tinheritAttrs: false,\n\tprops: {\n\t\t/**\n\t\t * The main text content of the entry.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * The title attribute of the element.\n\t\t */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Route Location the link should navigate to when clicked on.\n\t\t *\n\t\t * @see https://v3.router.vuejs.org/api/#to\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Set this prop if your app doesn't use vue-router, breadcrumbs will show as normal links.\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Set a css icon-class to show an icon along name text (if forceIconText is provided, otherwise just icon).\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Enables text to accompany the icon, if the icon was provided. The text that will be displayed is the name prop.\n\t\t */\n\t\tforceIconText: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Disable dropping on this breadcrumb.\n\t\t */\n\t\tdisableDrop: {\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 * Open state of the Actions menu\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * CSS class to apply to the root element.\n\t\t */\n\t\tclass: {\n\t\t\ttype: [String, Array, Object],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\temits: [\n\t\t'dragenter',\n\t\t'dragleave',\n\t\t'dropped',\n\t\t'update:open',\n\t],\n\n\tsetup() {\n\t\tconst crumbId = createElementId()\n\t\treturn {\n\t\t\tactionsContainer: `.vue-crumb[data-crumb-id=\"${crumbId}\"]`,\n\t\t\tcrumbId,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\t/**\n\t\t\t * Variable to track if we hover over the breadcrumb\n\t\t\t */\n\t\t\thovering: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * The attributes to pass to `router-link` or `a`\n\t\t */\n\t\tlinkAttributes() {\n\t\t\t// If it's a router-link, we pass `to` and `exact`, if its an <a/> element, we pass `href`, otherwise we have a button\n\t\t\treturn this.to\n\t\t\t\t? { to: this.to, ...this.$attrs }\n\t\t\t\t: (this.href\n\t\t\t\t\t? { href: this.href, ...this.$attrs }\n\t\t\t\t\t: this.$attrs\n\t\t\t\t)\n\t\t},\n\t},\n\tmethods: {\n\t\t/**\n\t\t * Function to handle changing the open state of the Actions menu\n\t\t * $emit the open state.\n\t\t *\n\t\t * @param {boolean} open The open state of the Actions menu\n\t\t */\n\t\tonOpenChange(open) {\n\t\t\t/**\n\t\t\t * Event emitted when the open state of the Actions menu changes\n\t\t\t *\n\t\t\t * @type {null}\n\t\t\t */\n\t\t\tthis.$emit('update:open', open)\n\t\t},\n\t\t/**\n\t\t * Function to handle a drop on the breadcrumb.\n\t\t * $emit the event and the path, remove the hovering state.\n\t\t *\n\t\t * @param {object} e The drop event\n\t\t * @return {boolean}\n\t\t */\n\t\tdropped(e) {\n\t\t\t/**\n\t\t\t * Don't do anything if dropping is disabled.\n\t\t\t */\n\t\t\tif (this.disableDrop) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\t/**\n\t\t\t * Event emitted when something is dropped on the breadcrumb.\n\t\t\t *\n\t\t\t * @param {Event} event The DOM drop event\n\t\t\t * @param {(string|object)} to The `to` prop or, if not set, the `href` prop\n\t\t\t */\n\t\t\tthis.$emit('dropped', e, this.to || this.href)\n\t\t\tthis.$parent.$emit('dropped', e, this.to || this.href)\n\t\t\tthis.hovering = false\n\t\t\treturn false\n\t\t},\n\t\t/**\n\t\t * Add the hovering state on drag enter\n\t\t *\n\t\t * @param {DragEvent} e The drag-enter event\n\t\t */\n\t\tdragEnter(e) {\n\t\t\tthis.$emit('dragenter', e)\n\t\t\t/**\n\t\t\t * Don't do anything if dropping is disabled.\n\t\t\t */\n\t\t\tif (this.disableDrop) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hovering = true\n\t\t},\n\t\t/**\n\t\t * Remove the hovering state on drag leave\n\t\t *\n\t\t * @param {DragEvent} e The drag leave event\n\t\t */\n\t\tdragLeave(e) {\n\t\t\tthis.$emit('dragleave', e)\n\t\t\t/**\n\t\t\t * Don't do anything if dropping is disabled.\n\t\t\t */\n\t\t\tif (this.disableDrop) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Don't do anything if we\n\t\t\t// - leave towards a child element.\n\t\t\t// - or are still within the crumb\n\t\t\tif (e.target.contains(e.relatedTarget)\n\t\t\t\t|| this.$refs.crumb.contains(e.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hovering = false\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.vue-crumb {\n\tbackground-image: none;\n\tdisplay: inline-flex;\n\theight: var(--default-clickable-area);\n\tpadding: 0;\n\n\t&:last-child {\n\t\tmin-width: 0;\n\n\t\t// Don't show breadcrumb separator for last crumb\n\t\t.vue-crumb__separator {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t// Necessary to hide hidden crumbs\n\t&--hidden {\n\t\tdisplay: none;\n\t}\n\t&__separator {\n\t\tpadding: 0;\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\t// Necessary for indicating hovering for drag and drop\n\t&#{&}--hovered :deep(.button-vue) {\n\t\tbackground-color: var(--color-background-dark);\n\t\tcolor: var(--color-main-text);\n\t}\n\t// Adjust button style\n\t&:not(:last-child) :deep() .button-vue {\n\t\tcolor: var(--color-text-maxcontrast);\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\n\t\t&__text {\n\t\t\tfont-weight: normal;\n\t\t}\n\t}\n\t:deep(.button-vue__text) {\n\t\tmargin: 0;\n\t}\n\n\t// Adjust action item appearance for crumbs with actions\n\t// to match other crumbs\n\t&:not(.dropdown) :deep(.action-item) {\n\t\t// Adjustments necessary to correctly shrink on small screens\n\t\tmax-width: 100%;\n\n\t\t.button-vue {\n\t\t\tpadding: 0 4px 0 16px;\n\t\t\tmax-width: 100%;\n\n\t\t\t&__wrapper {\n\t\t\t\tflex-direction: row-reverse;\n\t\t\t}\n\t\t}\n\n\t\t// Adjust the background of the last crumb when the action is open\n\t\t&.action-item--open .action-item__menutoggle {\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","_createBlock","_createSlots","_renderSlot","_normalizeClass","_createVNode"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/chunks/NcBreadcrumbs-CvUgliJa.mjs.map DELETED Viewed

@@ -1 +0,0 @@

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

package/dist/chunks/NcButton-BMnvzy1A.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcButton-BMnvzy1A.mjs","sources":["../../src/components/NcButton/NcButton.vue"],"sourcesContent":["\n\n<docs>\n\n### General description\nGeneral purpose button component. See props for different options.\n[Use material design icons only for icons](https://www.npmjs.com/package/vue-material-design-icons) and remember to set their size to 20.\n\n### Usage\n### Custom icon slot\nTo be used with `vue-material-design-icons` only. For icon classes use the `default-icon` slot.\nIt can be used with one or multiple actions.\n```\n<template>\n<div class=\"wrapper\">\n\t\n\t<div class=\"grid\">\n\t\t<NcCheckboxRadioSwitch v-model=\"style\" value=\"text\" name=\"style\" type=\"radio\">Text only</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"style\" value=\"icon\" name=\"style\" type=\"radio\">Icon only</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"style\" value=\"icontext\" name=\"style\" type=\"radio\">Icon and text</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"disabled\" type=\"checkbox\">Disabled</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"size\" value=\"small\" name=\"size\" type=\"radio\">Small</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"size\" value=\"normal\" name=\"size\" type=\"radio\">Normal (default)</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"size\" value=\"large\" name=\"size\" type=\"radio\">Large</NcCheckboxRadioSwitch>\n\t</div>\n\n\t<h5>Standard buttons</h5>\n\t<div class=\"grid\">\n\t\t<p>Tertiary, no background</p>\n\t\t<p>Tertiary</p>\n\t\t<p>Secondary</p>\n\t\t<p>Primary</p>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled\n\t\t\t:size\n\t\t\t:text\n\t\t\tvariant=\"tertiary-no-background\">\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled\n\t\t\t:size\n\t\t\t:text\n\t\t\tvariant=\"tertiary\">\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled\n\t\t\t:size\n\t\t\t:text>\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled\n\t\t\t:size\n\t\t\t:text\n\t\t\tvariant=\"primary\">\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n\n\t\n\t<h5>Wide button</h5>\n\t<NcButton\n\t\t:disabled=\"disabled\"\n\t\t:size=\"size\"\n\t\t:text=\"text\"\n\t\t:wide=\"true\"\n\t\ttext=\"Example text\">\n\t\t<template #icon>\n\t\t\t<Video\n\t\t\t\t:size=\"20\" />\n\t\t</template>\n\t</NcButton>\n\n\t\n\t<h5>Special buttons</h5>\n\t<div class=\"grid\">\n\t\t<p>Success</p>\n\t\t<p>Warning</p>\n\t\t<p>Error</p>\n\t\t<p> - </p>\n\t\t<NcButton\n\t\t\t:disabled\n\t\t\t:size\n\t\t\ttext=\"Example text\"\n\t\t\tvariant=\"success\">\n\t\t\t<template #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\t:disabled\n\t\t\t:size\n\t\t\ttext=\"Example text\"\n\t\t\tvariant=\"warning\">\n\t\t\t<template #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\t:disabled\n\t\t\t:size\n\t\t\ttext=\"Example text\"\n\t\t\tvariant=\"error\">\n\t\t\t<template #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<p> - </p>\n\t</div>\n</div>\n\n</template>\n<script>\nimport Video from 'vue-material-design-icons/Video.vue'\n\nexport default {\n\tcomponents: {\n\t\tVideo,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\ttoggled: false,\n\t\t\tdisabled: false,\n\t\t\tsize: 'normal',\n\t\t\tstyle: 'icontext',\n\t\t}\n\t},\n\tcomputed: {\n\t\ttext() {\n\t\t\tif (this.style.includes('text')) {\n\t\t\t\treturn 'Example text'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.wrapper {\n\tpadding: 0 12px;\n}\n\n.grid {\n\tdisplay: grid;\n\tgap: 12px;\n\tgrid-template-columns: 1fr 1fr 1fr 1fr;\n\tgrid-template-rows: repeat(auto-fill, auto);\n\tposition: relative;\n\tmargin: 12px 0;\n}\n\nh5 {\n\tfont-weight: bold;\n\tmargin: 40px 0 20px 0;\n}\n\np {\n\ttext-align: center;\n\tmargin: 4px 0 12px 0;\n\tcolor: var(--color-text-maxcontrast)\n}\n\nbutton {\n\tmargin: auto;\n}\n</style>\n```\n\n### Alignment\nSometimes it is required to change the icon alignment on the button, like for switching between pages as in following example:\n\n```vue\n<template>\n\t<div style=\"display: flex; flex-direction: column; gap: 12px;\">\n\t\t<NcButton text=\"center (default)\" variant=\"secondary\" wide>\n\t\t\t<template #icon>\n\t\t\t\t<IconLeft :size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton alignment=\"center-reverse\" text=\"center-reverse\" variant=\"secondary\" wide>\n\t\t\t<template #icon>\n\t\t\t\t<IconRight :size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<div style=\"display: flex; gap: 12px;\">\n\t\t\t<div style=\"display: flex; flex-direction: column; gap: 12px; flex: 1\">\n\t\t\t\t<NcButton alignment=\"start\" text=\"start\" variant=\"secondary\" wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton alignment=\"start-reverse\" text=\"start-reverse\" variant=\"secondary\" wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconRight :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t\t<div style=\"display: flex; flex-direction: column; gap: 12px; flex: 1\">\n\t\t\t\t<NcButton alignment=\"end\" text=\"end\" variant=\"secondary\" wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton alignment=\"end-reverse\" text=\"end-reverse\" variant=\"secondary\" wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconRight :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport IconLeft from 'vue-material-design-icons/ArrowLeft.vue'\nimport IconRight from 'vue-material-design-icons/ArrowRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconLeft,\n\t\tIconRight,\n\t},\n}\n</script>\n```\n\n### Pressed state\n\nIt is possible to make the button stateful by adding a pressed state, e.g. if you like to create a favorite button.\nThe button will have the required `aria` attribute for accessibility and visual style (`primary` when pressed, and the configured variant otherwise).\n\nDo not change `text` or `aria-label` of the pressed/unpressed button. See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed\n\n```vue\n<template>\n\t<div>\n\t\t<div style=\"display: flex; gap: 12px;\">\n\t\t\t<NcButton v-model:pressed=\"isFavorite\" aria-label=\"Favorite\" variant=\"tertiary-no-background\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconStar v-if=\"isFavorite\" :size=\"20\" />\n\t\t\t\t\t<IconStarOutline v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t\t<NcButton v-model:pressed=\"isFavorite\" text=\"Favorite\" variant=\"tertiary\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconStar v-if=\"isFavorite\" :size=\"20\" />\n\t\t\t\t\t<IconStarOutline v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t\t<NcButton v-model:pressed=\"isFavorite\" aria-label=\"Favorite\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconStar v-if=\"isFavorite\" :size=\"20\" />\n\t\t\t\t\t<IconStarOutline v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t</div>\n\t\t<div>\n\t\t\tIt is {{ isFavorite ? 'a' : 'not a' }} favorite.\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport IconStar from 'vue-material-design-icons/Star.vue'\nimport IconStarOutline from 'vue-material-design-icons/StarOutline.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconStar,\n\t\tIconStarOutline,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tisFavorite: false,\n\t\t}\n\t},\n\tmethods: {\n\t\ttoggleFavorite() {\n\t\t\tthis.isFavorite = !this.isFavorite\n\t\t},\n\t},\n}\n</script>\n```\n\n### Usage example: Custom content\nSometimes custom content, meaning more than text and icon, is required.\nFor this the `default`-slot can be used.\n\n**Important**: Never include interactive elements inside the button,\nthis results in invalid HTML and is not accessible!\n\n```vue\n<template>\n\t<NcButton>\n\t\tSome <del>formatted</del> content\n\t</NcButton>\n</template>\n```\n\n### Usage example: Sorting table columns\nThe standard way to implement sortable table column headers should be like this:\n\n```vue\n<template>\n\t<table>\n\t\t<thead>\n\t\t\t<tr>\n\t\t\t\t<th :aria-sorted=\"sortedName\" class=\"row-name\">\n\t\t\t\t\t<NcButton alignment=\"start-reverse\"\n\t\t\t\t\t\t:wide=\"true\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"sortName\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconDown v-if=\"sortedName === 'ascending'\" class=\"sort-icon\" :size=\"20\" />\n\t\t\t\t\t\t\t<IconUp v-else-if=\"sortedName === 'descending'\" class=\"sort-icon\" :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<span class=\"table-header\">Name</span>\n\t\t\t\t\t</NcButton>\n\t\t\t\t</th>\n\t\t\t\t<th :aria-sorted=\"sortedSize\" class=\"row-size\">\n\t\t\t\t\t<NcButton alignment=\"end\"\n\t\t\t\t\t\t:wide=\"true\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"sortSize\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconDown v-if=\"sortedSize === 'ascending'\" class=\"sort-icon\" :size=\"20\" />\n\t\t\t\t\t\t\t<IconUp v-else-if=\"sortedSize === 'descending'\" class=\"sort-icon\" :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<span class=\"table-header\">Size</span>\n\t\t\t\t\t</NcButton>\n\t\t\t\t</th>\n\t\t\t</tr>\n\t\t</thead>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t<td class=\"row-name\">Lorem ipsum</td>\n\t\t\t\t<td class=\"row-size\">8 MiB</td>\n\t\t\t</tr>\n\t\t</tbody>\n\t</table>\n</template>\n<script>\nimport IconUp from 'vue-material-design-icons/MenuUp.vue'\nimport IconDown from 'vue-material-design-icons/MenuDown.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconUp,\n\t\tIconDown,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsortedName: null,\n\t\t\tsortedSize: null,\n\t\t}\n\t},\n\tmethods: {\n\t\tsortName() {\n\t\t\tif (this.sortedName === 'ascending') {\n\t\t\t\tthis.sortedName = 'descending'\n\t\t\t} else if (this.sortedName === 'descending') {\n\t\t\t\tthis.sortedName = null\n\t\t\t} else {\n\t\t\t\tthis.sortedName = 'ascending'\n\t\t\t}\n\t\t},\n\t\tsortSize() {\n\t\t\tif (this.sortedSize === 'ascending') {\n\t\t\t\tthis.sortedSize = 'descending'\n\t\t\t} else if (this.sortedSize === 'descending') {\n\t\t\t\tthis.sortedSize = null\n\t\t\t} else {\n\t\t\t\tthis.sortedSize = 'ascending'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n<style>\ntable {\n\ttable-layout: fixed;\n\twidth: 300px;\n}\n\ntd.row-name {\n\tpadding-inline-start: 16px;\n}\n\ntd.row-size {\n\ttext-align: end;\n\tpadding-inline-end: 16px;\n}\n\n.table-header {\n\tfont-weight: normal;\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.sort-icon {\n\tcolor: var(--color-text-maxcontrast);\n\tposition: relative;\n\tinset-inline: -10px;\n}\n\n.row-size .sort-icon {\n\tinset-inline: 10px;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { RouteLocationRaw } from 'vue-router'\n\nimport { computed, inject } from 'vue'\nimport { routerKey } from 'vue-router'\n\nexport type ButtonAlignment = 'start'\n\t| 'start-reverse'\n\t| 'center'\n\t| 'center-reverse'\n\t| 'end'\n\t| 'end-reverse'\n\nexport type ButtonSize = 'small'\n\t| 'normal'\n\t| 'large'\n\nexport type ButtonType =\n\t| 'submit'\n\t| 'reset'\n\t| 'button'\n\nexport type ButtonVariant = 'primary'\n\t| 'secondary'\n\t| 'tertiary'\n\t| 'tertiary-no-background'\n\t| 'tertiary-on-primary'\n\t| 'error'\n\t// Design-wise not recommended for new code\n\t| 'warning'\n\t| 'success'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Set the text and icon alignment\n\t *\n\t * @default 'center'\n\t */\n\talignment?: ButtonAlignment\n\n\t/**\n\t * Always try to provide an aria-label to your button.\n\t *\n\t * Make it more specific than the button's name by provide some more context.\n\t * E.g. if the name of the button is \"send\" in the Mail app,\n\t * the aria label could be \"Send email\".\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * Toggles the disabled state of the button on and off.\n\t * @default false\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * When `href` is set this will make the browser try to download the target.\n\t * If a string is passed the browser will use it as the filename.\n\t *\n\t * Note that the browser might adjust it for allowed characters (e.g. '/' or '\\').\n\t * Also this only works with same-origin URLs and `blob:` or `data:` schemas.\n\t * Moreover a `Content-Disposition` header set by the server will override the filename.\n\t */\n\tdownload?: string|true\n\n\t/**\n\t * Providing the href attribute turns the button component into an `a` element.\n\t */\n\thref?: string\n\n\t/**\n\t * The pressed state of the button if it has a checked state.\n\t * This will add the `aria-pressed` attribute and for the button to have the primary style in checked state.\n\t *\n\t * Note: Pressed state is not supported for links.\n\t */\n\tpressed?: boolean\n\n\t/**\n\t * Specify the button size.\n\t * @default 'normal'\n\t */\n\tsize?: ButtonSize\n\n\t/**\n\t * Target for the `a` element if `href` is set.\n\t * @default '_self'\n\t */\n\ttarget?: string\n\n\t/**\n\t * The main button text.\n\t * This can be overwritten by using the *default* slot.\n\t * @since 9.0.0\n\t */\n\ttext?: string\n\n\t/**\n\t * Providing the to attribute turns the button component into a `router-link` element.\n\t *\n\t * Note: This takes precedence over the href attribute.\n\t */\n\tto?: RouteLocationRaw\n\n\t/**\n\t * Specifies the button native type\n\t * If left empty, the default \"button\" type will be used.\n\t *\n\t * @default 'button'\n\t */\n\ttype?: ButtonType\n\n\t/**\n\t * Specifies the button variant.\n\t * If left empty, the default button style will be applied.\n\t *\n\t * @default 'secondary'\n\t */\n\tvariant?: ButtonVariant\n\n\t/**\n\t * Specifies whether the button should span all the available width.\n\t * By default, buttons span the whole width of the container.\n\t * @default false\n\t */\n\twide?: boolean\n}>(), {\n\tariaLabel: undefined,\n\talignment: 'center',\n\tdownload: undefined,\n\thref: undefined,\n\tpressed: undefined,\n\tsize: 'normal',\n\ttarget: '_self',\n\ttext: undefined,\n\tto: undefined,\n\ttype: 'button',\n\tvariant: 'secondary',\n})\n\nconst emit = defineEmits<{\n\t/**\n\t * Emitted when the button was clicked.\n\t */\n\t click: [e: MouseEvent]\n\n\t/**\n\t * Update the current pressed state of the button (if the `pressed` property was configured).\n\t * If the button is a toggle button (`pressed` state is boolean),\n\t * then this will be emitted if the user toggled the state.\n\t */\n\t'update:pressed': [pressed: boolean]\n}>()\n\ndefineSlots<{\n\t/**\n\t * Custom button content.\n\t * This can be used for custom formatted content, ensure to not include any interactive elements.\n\t * For plain text it is preferred to use the `text` prop instead.\n\t */\n\tdefault?: Slot\n\n\t/**\n\t * Icon (optional) to show within the button\n\t */\n\ticon?: Slot\n}>()\n\nconst hasVueRouterContext = inject(routerKey, null) !== null\n\nconst tag = computed(() => {\n\t// TODO: should we warn if props.to is provided but there is no vue-router?\n\tif (hasVueRouterContext && props.to) {\n\t\t// Note: RouterLink is used as globally registered component (by name) and not imported intentionally\n\t\t// to use injected component from the app and not bundle it to the button\n\t\treturn 'RouterLink'\n\t} else if (props.href) {\n\t\treturn 'a'\n\t} else {\n\t\treturn 'button'\n\t}\n})\n\nconst hasPressedState = computed(() => tag.value === 'button' && typeof props.pressed === 'boolean')\n\nconst variantWithPressed = computed(() => {\n\t// Pressed toggle button forced to be primary\n\tif (props.pressed) {\n\t\treturn 'primary'\n\t}\n\t// Non-pressed toggle button may use passed variant but it cannot be primary\n\tif (props.pressed === false && props.variant === 'primary') {\n\t\treturn 'secondary'\n\t}\n\n\treturn props.variant\n})\nconst isTertiaryVariant = computed(() => variantWithPressed.value.startsWith('tertiary'))\n\nconst flexAlignment = computed(() => props.alignment.split('-')[0])\nconst isReverseAligned = computed(() => props.alignment.includes('-'))\n\nconst getNcPopoverTriggerAttrs = inject<() => Record<string, string|undefined>>('NcPopover:trigger:attrs', () => ({}), false)\nconst ncPopoverTriggerAttrs = computed(() => getNcPopoverTriggerAttrs())\n\nconst attrs = computed(() => {\n\tif (tag.value === 'RouterLink') {\n\t\treturn {\n\t\t\tto: props.to,\n\t\t\tactiveClass: 'active',\n\t\t}\n\t} else if (tag.value === 'a') {\n\t\treturn {\n\t\t\thref: props.href || '#',\n\t\t\ttarget: props.target,\n\t\t\trel: 'nofollow noreferrer noopener',\n\t\t\tdownload: props.download || undefined,\n\t\t}\n\t} else if (tag.value === 'button') {\n\t\treturn {\n\t\t\t...ncPopoverTriggerAttrs.value,\n\t\t\t'aria-pressed': props.pressed,\n\t\t\ttype: props.type,\n\t\t\tdisabled: props.disabled,\n\t\t}\n\t}\n\n\treturn undefined\n})\n\n/**\n * Handle the click on the link / button\n *\n * @param event - Mouse click event\n */\nfunction onClick(event: MouseEvent) {\n\tif (hasPressedState.value) {\n\t\temit('update:pressed', !props.pressed)\n\t}\n\temit('click', event)\n}\n</script>\n\n<template>\n\t<component :is=\"tag\"\n\t\tclass=\"button-vue\"\n\t\t:class=\"[\n\t\t\t`button-vue--size-${size}`,\n\t\t\t{\n\t\t\t\t[`button-vue--${variantWithPressed}`]: variantWithPressed,\n\t\t\t\t'button-vue--tertiary': isTertiaryVariant,\n\t\t\t\t'button-vue--wide': wide,\n\t\t\t\t[`button-vue--${flexAlignment}`]: flexAlignment !== 'center',\n\t\t\t\t'button-vue--reverse': isReverseAligned,\n\t\t\t},\n\t\t]\"\n\t\t:aria-label\n\t\tv-bind=\"attrs\"\n\t\t@click=\"onClick\">\n\t\t<span class=\"button-vue__wrapper\">\n\t\t\t<span class=\"button-vue__icon\">\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</span>\n\t\t\t<span class=\"button-vue__text\">\n\t\t\t\t<slot>\n\t\t\t\t\t{{ text }}\n\t\t\t\t</slot>\n\t\t\t</span>\n\t\t</span>\n\t</component>\n</template>\n\n<style lang=\"scss\" scoped>\n.button-vue {\n\t--button-size: var(--default-clickable-area);\n\t--button-inner-size: calc(var(--button-size) - 4px); // without the outer border\n\t--button-radius: var(--border-radius-element);\n\t--button-padding-default: calc(var(--default-grid-baseline) + var(--button-radius));\n\t--button-padding: var(--default-grid-baseline) var(--button-padding-default);\n\n\t// General styles\n\t// by default use secondary styling\n\tcolor: var(--color-primary-element-light-text);\n\tbackground-color: var(--color-primary-element-light);\n\tborder: 1px solid var(--color-primary-element-light-hover);\n\tborder-bottom-width: 2px;\n\tborder-radius: var(--button-radius);\n\tbox-sizing: border-box;\n\t// adjust position and size\n\tposition: relative;\n\twidth: fit-content;\n\toverflow: hidden;\n\tpadding-block: 1px 0; // center the content as border is 1px top and 2px bottom\n\tpadding-inline: var(--button-padding);\n\tmin-height: var(--button-size);\n\tmin-width: var(--button-size);\n\t// display setup\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\ttransition-property: color, border-color, background-color;\n\ttransition-duration: 0.1s;\n\ttransition-timing-function: linear;\n\tcursor: pointer;\n\tfont-size: var(--default-font-size);\n\tfont-weight: bold;\n\n\t// Setup different button sizes\n\t&--size-small {\n\t\t--button-size: var(--clickable-area-small);\n\t\t--button-radius: var(--border-radius-small); // make the border radius even smaller for small buttons\n\t}\n\n\t&--size-large {\n\t\t--button-size: var(--clickable-area-large);\n\t}\n\n\t// Cursor pointer on element and all children\n\t* {\n\t\tcursor: pointer;\n\t}\n\n\t// No outline feedback for focus. Handled with a toggled class in js (see data)\n\t&:focus {\n\t\toutline: none;\n\t}\n\n\t// Disabled styles\n\t&:disabled {\n\t\t// Gives a wash out effect\n\t\tfilter: saturate($opacity_normal);\n\t\topacity: $opacity_disabled;\n\n\t\t// Reset the cursor\n\t\tcursor: default;\n\t\t* {\n\t\t\tcursor: default;\n\t\t}\n\t}\n\n\t// Hover styles when not disabled (for the default theming of 'secondary')\n\t&:hover:not(:disabled) {\n\t\tbackground-color: var(--color-primary-element-light-hover);\n\t}\n\n\t// Back to the default color for this button when active\n\t// TODO: add ripple effect\n\t&:active {\n\t\tbackground-color: var(--color-primary-element-light);\n\t}\n\n\t&__wrapper {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t}\n\n\t&--end &__wrapper {\n\t\tjustify-content: end;\n\t}\n\n\t&--start &__wrapper {\n\t\tjustify-content: start;\n\t}\n\n\t&--reverse &__wrapper {\n\t\tflex-direction: row-reverse;\n\t}\n\n\t&--reverse {\n\t\t--button-padding: var(--button-padding-default) var(--default-grid-baseline);\n\t}\n\n\t&__icon {\n\t\t--default-clickable-area: var(--button-inner-size); // align icon size with inner button size\n\t\theight: var(--button-inner-size);\n\t\twidth: var(--button-inner-size);\n\t\tmin-height: var(--button-inner-size);\n\t\tmin-width: var(--button-inner-size);\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\n\t\t&:empty {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t// For small buttons we need to adjust the icon size\n\t&--size-small &__icon {\n\t\t:deep(> *) {\n\t\t\tmax-height: 16px;\n\t\t\tmax-width: 16px;\n\t\t}\n\t\t:deep(svg) {\n\t\t\theight: 16px;\n\t\t\twidth: 16px;\n\t\t}\n\t}\n\n\t&__text {\n\t\tfont-weight: bold;\n\t\tmargin-bottom: 1px;\n\t\tpadding: 2px 0;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\toverflow: hidden;\n\n\t\t&:empty {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t// Icon-only button\n\t&:has(#{&}__text:empty) {\n\t\t--button-padding: var(--button-radius);\n\t\tline-height: 1;\n\t\twidth: var(--button-size) !important;\n\t}\n\n\t// Text-only button\n\t&:has(#{&}__icon:empty) {\n\t\t--button-padding: var(--button-padding-default);\n\n\t\t.button-vue__text {\n\t\t\tpadding-inline: var(--default-grid-baseline);\n\t\t}\n\t}\n\n\t// Wide button spans the whole width of the container\n\t&--wide {\n\t\twidth: 100%;\n\t}\n\n\t&:focus-visible {\n\t\toutline: 2px solid var(--color-main-text) !important;\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background) !important;\n\t\t&.button-vue--vue-tertiary-on-primary {\n\t\t\toutline: 2px solid var(--color-primary-element-text);\n\t\t\tborder-radius: var(--border-radius-element);\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t// Button types\n\n\t// Primary\n\t&--primary {\n\t\tbackground-color: var(--color-primary-element);\n\t\tborder-color: var(--color-primary-element-hover);\n\t\tcolor: var(--color-primary-element-text);\n\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// TODO: add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t}\n\t}\n\n\t// Secondary\n\t&--secondary {\n\t\tbackground-color: var(--color-primary-element-light);\n\t\tborder-color: var(--color-primary-element-light-hover);\n\t\tcolor: var(--color-primary-element-light-text);\n\n\t\t&:hover:not(:disabled) {\n\t\t\tcolor: var(--color-primary-element-light-text);\n\t\t\tbackground-color: var(--color-primary-element-light-hover);\n\t\t}\n\t}\n\n\t// Tertiary\n\t&--tertiary {\n\t\tbackground-color: transparent;\n\t\tborder-color: transparent;\n\t\tcolor: var(--color-main-text);\n\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\t}\n\n\t// Tertiary, no background\n\t&--tertiary-no-background {\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t// Tertiary on primary color (like the header)\n\t&--tertiary-on-primary {\n\t\tcolor: var(--color-primary-element-text);\n\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t// Success\n\t&--success {\n\t\tborder-color: var(--color-success-hover);\n\t\tbackground-color: var(--color-success);\n\t\tcolor: var(--color-success-text);\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-success-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// : add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-success);\n\t\t}\n\t}\n\n\t// Warning\n\t&--warning {\n\t\tborder-color: var(--color-warning-hover);\n\t\tbackground-color: var(--color-warning);\n\t\tcolor: var(--color-warning-text);\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-warning-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// TODO: add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-warning);\n\t\t}\n\t}\n\n\t// Error\n\t&--error {\n\t\tborder-color: var(--color-error-hover);\n\t\tbackground-color: var(--color-error);\n\t\tcolor: var(--color-error-text);\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-error-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// TODO: add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-error);\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_createBlock","_resolveDynamicComponent","_mergeProps","size","wide","ariaLabel","_createElementVNode","_renderSlot","text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmdA,UAAM,QAAQ;AA4Gd,UAAM,OAAO;AA4Bb,UAAM,sBAAsB,OAAO,WAAW,IAAI,MAAM;AAExD,UAAM,MAAM,SAAS,MAAM;AAE1B,UAAI,uBAAuB,MAAM,IAAI;AAGpC,eAAO;AAAA,MACR,WAAW,MAAM,MAAM;AACtB,eAAO;AAAA,MACR,OAAO;AACN,eAAO;AAAA,MACR;AAAA,IACD,CAAC;AAED,UAAM,kBAAkB,SAAS,MAAM,IAAI,UAAU,YAAY,OAAO,MAAM,YAAY,SAAS;AAEnG,UAAM,qBAAqB,SAAS,MAAM;AAEzC,UAAI,MAAM,SAAS;AAClB,eAAO;AAAA,MACR;AAEA,UAAI,MAAM,YAAY,SAAS,MAAM,YAAY,WAAW;AAC3D,eAAO;AAAA,MACR;AAEA,aAAO,MAAM;AAAA,IACd,CAAC;AACD,UAAM,oBAAoB,SAAS,MAAM,mBAAmB,MAAM,WAAW,UAAU,CAAC;AAExF,UAAM,gBAAgB,SAAS,MAAM,MAAM,UAAU,MAAM,GAAG,EAAE,CAAC,CAAC;AAClE,UAAM,mBAAmB,SAAS,MAAM,MAAM,UAAU,SAAS,GAAG,CAAC;AAErE,UAAM,2BAA2B,OAA+C,2BAA2B,OAAO,CAAA,IAAK,KAAK;AAC5H,UAAM,wBAAwB,SAAS,MAAM,0BAA0B;AAEvE,UAAM,QAAQ,SAAS,MAAM;AAC5B,UAAI,IAAI,UAAU,cAAc;AAC/B,eAAO;AAAA,UACN,IAAI,MAAM;AAAA,UACV,aAAa;AAAA,QAAA;AAAA,MAEf,WAAW,IAAI,UAAU,KAAK;AAC7B,eAAO;AAAA,UACN,MAAM,MAAM,QAAQ;AAAA,UACpB,QAAQ,MAAM;AAAA,UACd,KAAK;AAAA,UACL,UAAU,MAAM,YAAY;AAAA,QAAA;AAAA,MAE9B,WAAW,IAAI,UAAU,UAAU;AAClC,eAAO;AAAA,UACN,GAAG,sBAAsB;AAAA,UACzB,gBAAgB,MAAM;AAAA,UACtB,MAAM,MAAM;AAAA,UACZ,UAAU,MAAM;AAAA,QAAA;AAAA,MAElB;AAEA,aAAO;AAAA,IACR,CAAC;AAOD,aAAS,QAAQ,OAAmB;AACnC,UAAI,gBAAgB,OAAO;AAC1B,aAAK,kBAAkB,CAAC,MAAM,OAAO;AAAA,MACtC;AACA,WAAK,SAAS,KAAK;AAAA,IACpB;;0BAICA,YAyBYC,wBAzBI,IAAA,KAAG,GAAnBC,WAyBY;AAAA,QAxBX,QAAM,cAAY;AAAA,8BACeC,KAAAA,IAAI;AAAA;YAA6B,CAAA,eAAA,mBAAA,KAAkB,KAAK,mBAAA;AAAA,oCAAgD,kBAAA;AAAA,gCAA2CC,KAAAA;AAAAA,YAA0B,CAAA,eAAA,cAAA,KAAa,KAAK,cAAA,UAAa;AAAA,mCAA0C,iBAAA;AAAA,UAAA;AAAA;QAUtR,cAAAC,KAAAA;AAAAA,MAAAA,GACO,MAAA,OAAK,EACZ,QAAA,CAAc,GAAA;AAAA,yBACf,MASO;AAAA,UATPC,mBASO,QATP,YASO;AAAA,YARNA,mBAEO,QAFP,YAEO;AAAA,cADNC,WAAoB,KAAA,QAAA,QAAA,CAAA,GAAA,QAAA,IAAA;AAAA,YAAA;YAErBD,mBAIO,QAJP,YAIO;AAAA,cAHNC,WAEO,4BAFP,MAEO;AAAA,gDADHC,KAAAA,IAAI,GAAA,CAAA;AAAA,cAAA;;;;;;;;;;"}

package/dist/chunks/NcCheckboxRadioSwitch-Da0F7y0G.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcCheckboxRadioSwitch-Da0F7y0G.mjs","sources":["../../node_modules/vue-material-design-icons/CheckboxBlankOutline.vue","../../node_modules/vue-material-design-icons/MinusBox.vue","../../node_modules/vue-material-design-icons/CheckboxMarked.vue","../../node_modules/vue-material-design-icons/RadioboxMarked.vue","../../node_modules/vue-material-design-icons/RadioboxBlank.vue","../../node_modules/vue-material-design-icons/ToggleSwitchOff.vue","../../node_modules/vue-material-design-icons/ToggleSwitch.vue","../../src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue","../../src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon checkbox-blank-outline-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"CheckboxBlankOutlineIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon minus-box-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"MinusBoxIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon checkbox-marked-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"CheckboxMarkedIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon radiobox-marked-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"RadioboxMarkedIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon radiobox-blank-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"RadioboxBlankIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon toggle-switch-off-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M7,15A3,3 0 0,1 4,12A3,3 0 0,1 7,9A3,3 0 0,1 10,12A3,3 0 0,1 7,15Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"ToggleSwitchOffIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon toggle-switch-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"ToggleSwitchIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","\n\n<template>\n\t<span class=\"checkbox-content\"\n\t\t:class=\"{\n\t\t\t['checkbox-content-' + type]: true,\n\t\t\t'checkbox-content--button-variant': buttonVariant,\n\t\t\t'checkbox-content--has-text': !!$slots.default,\n\t\t}\">\n\t\t\n\t\t<span :class=\"{\n\t\t\t\t'checkbox-content__icon': true,\n\t\t\t\t'checkbox-content__icon--checked': isChecked,\n\t\t\t\t[iconClass]: true\n\t\t\t}\"\n\t\t\t:aria-hidden=\"true\"\n\t\t\tinert>\n\t\t\t\n\t\t\t<slot name=\"icon\"\n\t\t\t\t:checked=\"isChecked\"\n\t\t\t\t:loading=\"loading\">\n\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t<component :is=\"checkboxRadioIconElement\"\n\t\t\t\t\tv-else-if=\"!buttonVariant\"\n\t\t\t\t\t:size=\"iconSize\" />\n\t\t\t</slot>\n\t\t</span>\n\n\t\t<span v-if=\"$slots.default\" :class=\"['checkbox-content__text', textClass]\">\n\t\t\t\n\t\t\t<slot />\n\t\t</span>\n\t</span>\n</template>\n\n<script>\nimport CheckboxBlankOutline from 'vue-material-design-icons/CheckboxBlankOutline.vue'\nimport MinusBox from 'vue-material-design-icons/MinusBox.vue'\nimport CheckboxMarked from 'vue-material-design-icons/CheckboxMarked.vue'\nimport RadioboxMarked from 'vue-material-design-icons/RadioboxMarked.vue'\nimport RadioboxBlank from 'vue-material-design-icons/RadioboxBlank.vue'\nimport ToggleSwitchOff from 'vue-material-design-icons/ToggleSwitchOff.vue'\nimport ToggleSwitch from 'vue-material-design-icons/ToggleSwitch.vue'\n\nimport NcLoadingIcon from '../NcLoadingIcon/index.ts'\n\nexport const TYPE_CHECKBOX = 'checkbox'\nexport const TYPE_RADIO = 'radio'\nexport const TYPE_SWITCH = 'switch'\nexport const TYPE_BUTTON = 'button'\n\nexport default {\n\tname: 'NcCheckboxContent',\n\n\tcomponents: {\n\t\tNcLoadingIcon,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Class for the icon element\n\t\t */\n\t\ticonClass: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Class for the text element\n\t\t */\n\t\ttextClass: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Type of the input. checkbox, radio, switch, or button.\n\t\t *\n\t\t * Only use button when used in a `tablist` container and the\n\t\t * `tab` role is set.\n\t\t *\n\t\t * @type {'checkbox'|'radio'|'switch'|'button'}\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'checkbox',\n\t\t\tvalidator: type => [\n\t\t\t\tTYPE_CHECKBOX,\n\t\t\t\tTYPE_RADIO,\n\t\t\t\tTYPE_SWITCH,\n\t\t\t\tTYPE_BUTTON,\n\t\t\t].includes(type),\n\t\t},\n\n\t\t/**\n\t\t * Toggle the alternative button style\n\t\t */\n\t\tbuttonVariant: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * True if the entry is checked\n\t\t */\n\t\tisChecked: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Indeterminate state\n\t\t */\n\t\tindeterminate: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Loading state\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Icon size\n\t\t */\n\t\ticonSize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 24,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tisButtonType() {\n\t\t\treturn this.type === TYPE_BUTTON\n\t\t},\n\n\t\t/**\n\t\t * Returns the proper Material icon depending on the select case\n\t\t *\n\t\t * @return {object}\n\t\t */\n\t\tcheckboxRadioIconElement() {\n\t\t\tif (this.type === TYPE_RADIO) {\n\t\t\t\tif (this.isChecked) {\n\t\t\t\t\treturn RadioboxMarked\n\t\t\t\t}\n\t\t\t\treturn RadioboxBlank\n\t\t\t}\n\n\t\t\t// Switch\n\t\t\tif (this.type === TYPE_SWITCH) {\n\t\t\t\tif (this.isChecked) {\n\t\t\t\t\treturn ToggleSwitch\n\t\t\t\t}\n\t\t\t\treturn ToggleSwitchOff\n\t\t\t}\n\n\t\t\t// Checkbox\n\t\t\tif (this.indeterminate) {\n\t\t\t\treturn MinusBox\n\t\t\t}\n\t\t\tif (this.isChecked) {\n\t\t\t\treturn CheckboxMarked\n\t\t\t}\n\t\t\treturn CheckboxBlankOutline\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.checkbox-content {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n\tuser-select: none;\n\tmin-height: var(--default-clickable-area);\n\tborder-radius: var(--checkbox-radio-switch--border-radius);\n\tpadding: var(--default-grid-baseline) calc((var(--default-clickable-area) - var(--icon-height)) / 2);\n\t// Set to 100% to make text overflow work on button style\n\twidth: 100%;\n\t// but restrict to content so plain checkboxes / radio switches do not expand\n\tmax-width: fit-content;\n\n\t&__text {\n\t\tflex: 1 0;\n\n\t\t&:empty {\n\t\t\t// hide text if empty to ensure checkbox outline is a circle instead of oval\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t&-checkbox:not(&--button-variant) &__icon,\n\t&-radio:not(&--button-variant) &__icon,\n\t&-switch:not(&--button-variant) &__icon {\n\t\tmargin-block: calc((var(--default-clickable-area) - 2 * var(--default-grid-baseline) - var(--icon-height)) / 2) auto;\n\t}\n\n\t&__icon > * {\n\t\twidth: var(--icon-size);\n\t\theight: var(--icon-height);\n\t\tcolor: var(--color-primary-element);\n\t}\n\n\t&--button-variant {\n\t\t.checkbox-content__icon:not(.checkbox-content__icon--checked) > * {\n\t\t\tcolor: var(--color-primary-element);\n\t\t}\n\n\t\t.checkbox-content__icon--checked > * {\n\t\t\tcolor: var(--color-primary-element-text);\n\t\t}\n\t}\n\n\t&--has-text {\n\t\tpadding-inline-end: $icon-margin;\n\t}\n\n\t&, * {\n\t\tcursor: pointer;\n\t\tflex-shrink: 0;\n\t}\n}\n</style>\n","\n\n<docs>\n\n### General description\n\nThis is a simple input checkbox, radio and switch design.\nPlease have a look at proper usage and recommendations: https://material.io/components/checkboxes\n\nNote: All generic attributes on the component, except `class` and `style`, are passed to the inner `input` element *(for the button type the attributes are passed to the `button` element)*.\n\n### Standard checkbox\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\">Enable sharing</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\" :disabled=\"true\">Enable sharing (disabled)</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :model-value=\"sharingEnabled\" :loading=\"loading\" @update:model-value=\"onToggle\">Enable sharing (with request loading)</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\">\n\t\t\tEnable sharing. This can contain a long multiline text, that will be wrapped in a second row. It is generally not advised to have such long text inside of an element\n\t\t</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingEnabled: {{ sharingEnabled }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tloading: false,\n\t\t\tsharingEnabled: false,\n\t\t}\n\t},\n\tmethods: {\n\t\tonToggle() {\n\t\t\tthis.loading = true\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.sharingEnabled = !this.sharingEnabled\n\t\t\t\tthis.loading = false\n\t\t\t}, 1000)\n\t\t}\n\t}\n}\n</script>\n```\n\n### Standard radio set\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"r\" name=\"sharing_permission_radio\" type=\"radio\">Default permission read</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"rw\" name=\"sharing_permission_radio\" type=\"radio\">Default permission read+write</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"rws\" name=\"sharing_permission_radio\" type=\"radio\">\n\t\t\tDefault permission read+write+share. This can contain a long multiline text, that will be wrapped in a second row. It is generally not advised to have such long text inside of an element\n\t\t</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingPermission: {{ sharingPermission }}\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tsharingPermission: 'r',\n\t\t\t}\n\t\t}\n\t}\n</script>\n```\n\n### Standard radio set with alternative button style\n```vue\n<template>\n\t<div>\n\t\t<h4>Horizontal</h4>\n\t\t<div style=\"display: flex\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"r\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tDefault permission read\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"rw\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tDefault permission read+write\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\t<h4>Vertically</h4>\n\t\t<div style=\"width: fit-content\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"r\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tDefault permission read\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"rw\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tDefault permission read+write\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\tsharingPermission: {{ sharingPermission }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsharingPermission: 'r',\n\t\t}\n\t}\n}\n</script>\n```\n\n### Radio set with button style and icons\n```vue\n<template>\n\t<div>\n\t\t<h4>Horizontal</h4>\n\t\t<div style=\"display: flex\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"y\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tEnable settings\n\t\t\t\t<template #icon><CheckIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"n\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tDisable settings\n\t\t\t\t<template #icon><CancelIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\t<h4>Vertically</h4>\n\t\t<div style=\"width: fit-content\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"y\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tEnable settings\n\t\t\t\t<template #icon><CheckIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"n\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tDisable settings\n\t\t\t\t<template #icon><CancelIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\tSettings enabled: {{ enableSettings === 'y' ? 'yes' : 'no' }}\n\t</div>\n</template>\n<script>\nimport CheckIcon from 'vue-material-design-icons/Check.vue'\nimport CancelIcon from 'vue-material-design-icons/Cancel.vue'\nexport default {\n\tcomponents: {\n\t\tCheckIcon,\n\t\tCancelIcon,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tenableSettings: 'n',\n\t\t}\n\t}\n}\n</script>\n```\n\n### Standard checkbox set\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch :disabled=\"true\" v-model=\"sharingPermission\" value=\"r\" name=\"sharing_permission\">Permission read</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"w\" name=\"sharing_permission\">Permission write</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"d\" name=\"sharing_permission\">Permission delete</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingPermission: {{ sharingPermission }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsharingPermission: ['r', 'd'],\n\t\t}\n\t}\n}\n</script>\n```\n\n### Standard switch\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\" type=\"switch\">Enable sharing</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\" type=\"switch\" :disabled=\"true\">Enable sharing (disabled)</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\" type=\"switch\">\n\t\t\tEnable sharing. This can contain a long multiline text, that will be wrapped in a second row. It is generally not advised to have such long text inside of an element\n\t\t</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingEnabled: {{ sharingEnabled }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsharingEnabled: true,\n\t\t}\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<component :is=\"computedWrapperElement\"\n\t\t:id=\"wrapperId ?? (isButtonType ? id : null)\"\n\t\t:aria-label=\"isButtonType && ariaLabel ? ariaLabel : undefined\"\n\t\tclass=\"checkbox-radio-switch\"\n\t\t:class=\"[\n\t\t\t$props.class,\n\t\t\t{\n\t\t\t\t['checkbox-radio-switch-' + type]: type,\n\t\t\t\t'checkbox-radio-switch--checked': isChecked,\n\t\t\t\t'checkbox-radio-switch--disabled': disabled,\n\t\t\t\t'checkbox-radio-switch--indeterminate': hasIndeterminate ? indeterminate : false,\n\t\t\t\t'checkbox-radio-switch--button-variant': buttonVariant,\n\t\t\t\t'checkbox-radio-switch--button-variant-v-grouped': buttonVariant && buttonVariantGrouped === 'vertical',\n\t\t\t\t'checkbox-radio-switch--button-variant-h-grouped': buttonVariant && buttonVariantGrouped === 'horizontal',\n\t\t\t\t'button-vue': isButtonType,\n\t\t\t},\n\t\t]\"\n\t\t:style\n\t\t:type=\"isButtonType ? 'button' : null\"\n\t\tv-bind=\"isButtonType ? $attrs : {} \"\n\t\tv-on=\"isButtonType ? listeners : {}\">\n\t\t<input v-if=\"!isButtonType\"\n\t\t\t:id=\"id\"\n\t\t\t:aria-labelledby=\"!isButtonType && !ariaLabel ? `${id}-label` : null\"\n\t\t\t:aria-label=\"ariaLabel || undefined\"\n\t\t\tclass=\"checkbox-radio-switch__input\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:type=\"inputType\"\n\t\t\t:value=\"value\"\n\t\t\t:checked=\"isChecked\"\n\t\t\t:indeterminate.prop=\"hasIndeterminate ? indeterminate : null\"\n\t\t\t:required=\"required\"\n\t\t\t:name=\"name\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\tv-on=\"listeners\">\n\t\t<NcCheckboxContent :id=\"!isButtonType ? `${id}-label` : undefined\"\n\t\t\tclass=\"checkbox-radio-switch__content\"\n\t\t\ticon-class=\"checkbox-radio-switch__icon\"\n\t\t\ttext-class=\"checkbox-radio-switch__text\"\n\t\t\t:type=\"type\"\n\t\t\t:indeterminate=\"hasIndeterminate ? indeterminate : false\"\n\t\t\t:button-variant=\"buttonVariant\"\n\t\t\t:is-checked=\"isChecked\"\n\t\t\t:loading=\"loading\"\n\t\t\t:icon-size\n\t\t\t@click=\"onToggle\">\n\t\t\t<template #icon>\n\t\t\t\t\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</template>\n\n\t\t\t<template v-if=\"!!$slots.default\" #default>\n\t\t\t\t\n\t\t\t\t<slot />\n\t\t\t</template>\n\t\t</NcCheckboxContent>\n\t</component>\n</template>\n\n<script>\nimport NcCheckboxContent, { TYPE_BUTTON, TYPE_CHECKBOX, TYPE_RADIO, TYPE_SWITCH } from './NcCheckboxContent.vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { t, n } from '../../l10n.ts'\n\nexport default {\n\tname: 'NcCheckboxRadioSwitch',\n\n\tcomponents: {\n\t\tNcCheckboxContent,\n\t},\n\n\t// We need to pass attributes to the input element\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Unique id attribute of the input\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'checkbox-radio-switch-' + createElementId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * Unique id attribute of the wrapper element\n\t\t */\n\t\twrapperId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Input name. Required for radio, optional for checkbox, and ignored\n\t\t * for button.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Required if no text is set.\n\t\t * The aria-label is forwarded to the input or button.\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Type of the input. checkbox, radio, switch, or button.\n\t\t *\n\t\t * Only use button when used in a `tablist` container and the\n\t\t * `tab` role is set.\n\t\t *\n\t\t * @type {'checkbox'|'radio'|'switch'|'button'}\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'checkbox',\n\t\t\tvalidator: type => [\n\t\t\t\tTYPE_CHECKBOX,\n\t\t\t\tTYPE_RADIO,\n\t\t\t\tTYPE_SWITCH,\n\t\t\t\tTYPE_BUTTON,\n\t\t\t].includes(type),\n\t\t},\n\n\t\t/**\n\t\t * Toggle the alternative button style\n\t\t */\n\t\tbuttonVariant: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Are the elements are all direct siblings?\n\t\t * If so they will be grouped horizontally or vertically\n\t\t *\n\t\t * @type {'no'|'horizontal'|'vertical'}\n\t\t */\n\t\tbuttonVariantGrouped: {\n\t\t\ttype: String,\n\t\t\tdefault: 'no',\n\t\t\tvalidator: v => ['no', 'vertical', 'horizontal'].includes(v),\n\t\t},\n\n\t\t/**\n\t\t * Checked state. To be used with `v-model:value`\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [Boolean, Array, String],\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Value to be synced on check\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Disabled state\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 * Indeterminate state\n\t\t */\n\t\tindeterminate: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Required state\n\t\t */\n\t\trequired: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Loading state\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Wrapping element tag\n\t\t *\n\t\t * When `type` is set to `button` this will be ignored\n\t\t *\n\t\t * Defaults to `span`\n\t\t */\n\t\twrapperElement: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The class(es) to pass to the wrapper / root element of the component\n\t\t */\n\t\tclass: {\n\t\t\ttype: [String, Array, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * The style to pass to the wrapper / root element of the component\n\t\t */\n\t\tstyle: {\n\t\t\ttype: [String, Array, Object],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['update:modelValue'],\n\n\tcomputed: {\n\t\tisButtonType() {\n\t\t\treturn this.type === TYPE_BUTTON\n\t\t},\n\n\t\tcomputedWrapperElement() {\n\t\t\tif (this.isButtonType) {\n\t\t\t\treturn 'button'\n\t\t\t}\n\t\t\tif (this.wrapperElement !== null) {\n\t\t\t\treturn this.wrapperElement\n\t\t\t}\n\t\t\treturn 'span'\n\t\t},\n\n\t\tlisteners() {\n\t\t\tif (this.isButtonType) {\n\t\t\t\treturn {\n\t\t\t\t\tclick: this.onToggle,\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tchange: this.onToggle,\n\t\t\t}\n\t\t},\n\n\t\ticonSize() {\n\t\t\treturn this.type === TYPE_SWITCH\n\t\t\t\t? 36\n\t\t\t\t: 20\n\t\t},\n\n\t\tcssIconSize() {\n\t\t\treturn this.iconSize + 'px'\n\t\t},\n\n\t\tcssIconHeight() {\n\t\t\treturn this.type === TYPE_SWITCH\n\t\t\t\t? '16px'\n\t\t\t\t: this.cssIconSize\n\t\t},\n\n\t\t/**\n\t\t * Return the input type.\n\t\t * Switch is not an official type\n\t\t *\n\t\t * @return {string}\n\t\t */\n\t\tinputType() {\n\t\t\tconst nativeTypes = [\n\t\t\t\tTYPE_CHECKBOX,\n\t\t\t\tTYPE_RADIO,\n\t\t\t\tTYPE_BUTTON,\n\t\t\t]\n\t\t\tif (nativeTypes.includes(this.type)) {\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn TYPE_CHECKBOX\n\t\t},\n\n\t\t/**\n\t\t * Check if that entry is checked\n\t\t * If value is defined, we use that as the checked value\n\t\t * If not, we expect true/false in this.checked\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisChecked() {\n\t\t\tif (this.value !== null) {\n\t\t\t\tif (Array.isArray(this.modelValue)) {\n\t\t\t\t\treturn [...this.modelValue].indexOf(this.value) > -1\n\t\t\t\t}\n\t\t\t\treturn this.modelValue === this.value\n\t\t\t}\n\t\t\treturn this.modelValue === true\n\t\t},\n\n\t\thasIndeterminate() {\n\t\t\treturn [\n\t\t\t\tTYPE_CHECKBOX,\n\t\t\t\tTYPE_RADIO,\n\t\t\t].includes(this.inputType)\n\t\t},\n\t},\n\n\tmounted() {\n\t\tif (this.name && this.type === TYPE_CHECKBOX) {\n\t\t\tif (!Array.isArray(this.modelValue)) {\n\t\t\t\tthrow new Error('When using groups of checkboxes, the updated value will be an array.')\n\t\t\t}\n\t\t}\n\n\t\t// https://material.io/components/checkboxes#usage\n\t\tif (this.name && this.type === TYPE_SWITCH) {\n\t\t\tthrow new Error('Switches are not made to be used for data sets. Please use checkboxes instead.')\n\t\t}\n\n\t\t// https://material.io/components/checkboxes#usage\n\t\tif (typeof this.modelValue !== 'boolean' && this.type === TYPE_SWITCH) {\n\t\t\tthrow new Error('Switches can only be used with boolean as modelValue prop.')\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\n\t\tn,\n\n\t\tonToggle(event) {\n\t\t\tif (this.disabled || event.target.tagName.toLowerCase() === 'a') {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If this is a radio, there can only be one value\n\t\t\tif (this.type === TYPE_RADIO) {\n\t\t\t\tthis.$emit('update:modelValue', this.value)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If this is a radio, there can only be one value\n\t\t\tif (this.type === TYPE_SWITCH) {\n\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If the initial value was a boolean, let's keep it that way\n\t\t\tif (typeof this.modelValue === 'boolean') {\n\t\t\t\tthis.$emit('update:modelValue', !this.modelValue)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Dispatch the checked values as an array if multiple, or single value otherwise\n\t\t\tconst values = this.getInputsSet()\n\t\t\t\t.filter(input => input.checked)\n\t\t\t\t.map(input => input.value)\n\n\t\t\tif (values.includes(this.value)) {\n\t\t\t\tthis.$emit('update:modelValue', values.filter((v) => v !== this.value))\n\t\t\t} else {\n\t\t\t\tthis.$emit('update:modelValue', [...values, this.value])\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Get the input set based on this name\n\t\t *\n\t\t * @return {Node[]}\n\t\t */\n\t\tgetInputsSet() {\n\t\t\treturn [...document.getElementsByName(this.name)]\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.checkbox-radio-switch {\n\t--icon-size: v-bind('cssIconSize');\n\t--icon-height: v-bind('cssIconHeight');\n\t--checkbox-radio-switch--border-radius: var(--border-radius-element);\n\t// keep inner border width in mind\n\t--checkbox-radio-switch--border-radius-outer: calc(var(--checkbox-radio-switch--border-radius) + 2px);\n\t// general setup\n\tdisplay: flex;\n\talign-items: center;\n\tcolor: var(--color-main-text);\n\tbackground-color: transparent;\n\tfont-size: var(--default-font-size);\n\tline-height: var(--default-line-height);\n\tpadding: 0;\n\tposition: relative;\n\n\t&__input {\n\t\tposition: absolute;\n\t\tz-index: -1;\n\t\topacity: 0 !important; // We need !important, or it gets overwritten by server style\n\t\twidth: var(--icon-size);\n\t\theight: var(--icon-size);\n\t}\n\n\t&__input:focus-visible + &__content,\n\t&__input:focus-visible {\n\t\toutline: 2px solid var(--color-main-text);\n\t\tborder-color: var(--color-main-background);\n\t\toutline-offset: -2px;\n\t}\n\n\t&--disabled &__content {\n\t\topacity: .5;\n\n\t\t:deep(.checkbox-radio-switch__icon) > * {\n\t\t\tcolor: var(--color-main-text)\n\t\t}\n\t\t&.checkbox-content,\n\t\t&.checkbox-content :deep(*:not(a)) {\n\t\t\tcursor: default !important;\n\t\t}\n\t}\n\n\t&:not(&--disabled, &--checked):focus-within &__content,\n\t&:not(&--disabled, &--checked) &__content:hover {\n\t\tbackground-color: var(--color-background-hover);\n\t}\n\n\t&--checked:not(&--disabled):focus-within &__content,\n\t&--checked:not(&--disabled) &__content:hover {\n\t\tbackground-color: var(--color-primary-element-hover);\n\t}\n\n\t&--checked:not(&--button-variant):not(&--disabled):focus-within &__content,\n\t&--checked:not(&--button-variant):not(&--disabled) &__content:hover {\n\t\tbackground-color: var(--color-primary-element-light-hover);\n\t}\n\n\t// Switch specific rules\n\t&-switch:not(&--checked) :deep(.checkbox-radio-switch__icon) > * {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t// If switch is checked AND disabled, use the fade primary colour\n\t&-switch.checkbox-radio-switch--disabled.checkbox-radio-switch--checked :deep(.checkbox-radio-switch__icon) > * {\n\t\tcolor: var(--color-primary-element-light);\n\t}\n\n\t&--button-variant.checkbox-radio-switch {\n\t\tbackground-color: var(--color-main-background);\n\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\toverflow: hidden;\n\n\t\t&--checked {\n\t\t\tfont-weight: bold;\n\n\t\t\t.checkbox-radio-switch__content {\n\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\tcolor: var(--color-primary-element-text);\n\t\t\t}\n\t\t}\n\t}\n\n\t// Text overflow of button style\n\t&--button-variant :deep(.checkbox-radio-switch__text) {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\twidth: 100%;\n\t}\n\n\t// Set icon color for non active elements to main text color\n\t&--button-variant:not(&--checked) :deep(.checkbox-radio-switch__icon) > * {\n\t\tcolor: var(--color-main-text);\n\t}\n\n\t// Hide icon container if empty to remove virtual padding\n\t&--button-variant :deep(.checkbox-radio-switch__icon:empty) {\n\t\tdisplay: none;\n\t}\n\n\t&--button-variant:not(&--button-variant-v-grouped):not(&--button-variant-h-grouped),\n\t&--button-variant &__content {\n\t\tborder-radius: var(--checkbox-radio-switch--border-radius);\n\t}\n\n\t/* Special rules for vertical button groups */\n\t&--button-variant-v-grouped &__content {\n\t\tflex-basis: 100%;\n\t\t// vertically grouped buttons should all have the same width\n\t\tmax-width: unset;\n\t}\n\t&--button-variant-v-grouped {\n\t\t&:first-of-type {\n\t\t\tborder-start-start-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t\tborder-start-end-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t}\n\t\t&:last-of-type {\n\t\t\tborder-end-start-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t\tborder-end-end-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t}\n\n\t\t// remove borders between elements\n\t\t&:not(:last-of-type) {\n\t\t\tborder-bottom: 0!important;\n\t\t\t.checkbox-radio-switch__content {\n\t\t\t\tmargin-bottom: 2px;\n\t\t\t}\n\t\t}\n\t\t&:not(:first-of-type) {\n\t\t\tborder-top: 0!important;\n\t\t}\n\t}\n\n\t/* Special rules for horizontal button groups */\n\t&--button-variant-h-grouped {\n\t\t&:first-of-type {\n\t\t\tborder-start-start-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t\tborder-end-start-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t}\n\t\t&:last-of-type {\n\t\t\tborder-start-end-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t\tborder-end-end-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t}\n\n\t\t// remove borders between elements\n\t\t&:not(:last-of-type) {\n\t\t\tborder-inline-end: 0!important;\n\t\t\t.checkbox-radio-switch__content {\n\t\t\t\tmargin-inline-end: 2px;\n\t\t\t}\n\t\t}\n\t\t&:not(:first-of-type) {\n\t\t\tborder-inline-start: 0!important;\n\t\t}\n\t}\n\t&--button-variant-h-grouped :deep(.checkbox-radio-switch__text) {\n\t\ttext-align: center;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\t&--button-variant-h-grouped &__content {\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\tmargin: 0;\n\t\tgap: 0;\n\t}\n}\n</style>\n"],"names":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","_normalizeClass","_renderSlot","_createBlock","_resolveDynamicComponent","_toHandlers","_createVNode"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5,6]}

package/dist/chunks/NcChip-DuaqxToL.mjs.map DELETED Viewed

@@ -1 +0,0 @@

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

package/dist/chunks/NcCollectionList-Cr0T14g-.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcCollectionList-Cr0T14g-.mjs","sources":["../../src/components/NcCollectionList/NcCollectionListItem.vue","../../src/components/NcCollectionList/service.ts","../../src/components/NcCollectionList/useCollections.js","../../src/components/NcCollectionList/NcCollectionList.vue"],"sourcesContent":["\n\n<template>\n\t<li class=\"collection-list-item\">\n\t\t<NcAvatar :display-name=\"collection.name\" allow-placeholder class=\"collection-avatar\" />\n\t\t<span v-if=\"newName === null\"\n\t\t\tclass=\"collection-item-name\"\n\t\t\ttitle=\"\"\n\t\t\t@click=\"showDetails\">{{ collection.name }}</span>\n\t\t<form v-else :class=\"{'should-shake': error }\" @submit.prevent=\"renameCollection\">\n\t\t\t<input v-model=\"newName\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tautocomplete=\"off\"\n\t\t\t\tautocapitalize=\"off\">\n\t\t\t<input type=\"submit\" value=\"\" class=\"icon-confirm\">\n\t\t</form>\n\t\t<div v-if=\"!detailsOpen && newName === null\" class=\"linked-icons\">\n\t\t\t<component :is=\"getComponent(resource).component\"\n\t\t\t\tv-for=\"resource in resources.slice(0, 2)\"\n\t\t\t\t:key=\"resource.type + '|' + resource.id\"\n\t\t\t\t:title=\"resource.name\"\n\t\t\t\t:to=\"getComponent(resource).to\"\n\t\t\t\t:href=\"getComponent(resource).href\"\n\t\t\t\t:class=\"typeClass(resource)\">\n\t\t\t\t<img :src=\"iconUrl(resource)\" :alt=\"resource.name\">\n\t\t\t</component>\n\t\t</div>\n\n\t\t<span v-if=\"newName === null\" class=\"sharingOptionsGroup\">\n\t\t\t<NcActions>\n\t\t\t\t<NcActionButton icon=\"icon-info\"\n\t\t\t\t\t@click.prevent=\"toggleDetails\">\n\t\t\t\t\t{{ detailsOpen ? t('Hide details') : t('Show details') }}\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton icon=\"icon-rename\"\n\t\t\t\t\t@click.prevent=\"openRename\">\n\t\t\t\t\t{{ t('Rename project') }}\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActions>\n\t\t</span>\n\n\t\t<transition name=\"fade\">\n\t\t\t<div v-if=\"error\" class=\"error\">\n\t\t\t\t{{ error }}\n\t\t\t</div>\n\t\t</transition>\n\t\t<transition name=\"fade\">\n\t\t\t<ul v-if=\"detailsOpen\" class=\"resource-list-details\">\n\t\t\t\t<li v-for=\"resource in resources\"\n\t\t\t\t\t:key=\"resource.type + '|' + resource.id\"\n\t\t\t\t\t:class=\"typeClass(resource)\">\n\t\t\t\t\t<component :is=\"getComponent(resource).component\"\n\t\t\t\t\t\t:to=\"getComponent(resource).to\"\n\t\t\t\t\t\t:href=\"getComponent(resource).href\">\n\t\t\t\t\t\t<img :src=\"iconUrl(resource)\" :alt=\"resource.name\">\n\t\t\t\t\t\t<span class=\"resource-name\">{{ resource.name || '' }}</span>\n\t\t\t\t\t</component>\n\t\t\t\t\t<span class=\"icon-close\" @click=\"removeResource(collection, resource)\" />\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</transition>\n\t</li>\n</template>\n\n<script>\nimport { t } from '../../l10n.ts'\nimport { getRoute } from '../NcRichText/autolink.ts'\n\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcAvatar from '../NcAvatar/index.js'\n\nexport default {\n\tname: 'NcCollectionListItem',\n\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcActions,\n\t\tNcActionButton,\n\t},\n\n\tprops: {\n\t\tcollection: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\terror: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\temits: [\n\t\t'removeResource',\n\t\t'renameCollection',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tdetailsOpen: false,\n\t\t\tnewName: null,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tgetIcon() {\n\t\t\treturn (resource) => [resource.iconClass]\n\t\t},\n\n\t\ttypeClass() {\n\t\t\treturn (resource) => 'resource-type-' + resource.type\n\t\t},\n\n\t\tresources() {\n\t\t\t// invalid resources come from server as empty array ([]) and not an object\n\t\t\treturn this.collection.resources?.filter(resource => !Array.isArray(resource)) ?? []\n\t\t},\n\n\t\tgetComponent() {\n\t\t\treturn (resource) => {\n\t\t\t\tconst route = getRoute(this.$router, resource.link)\n\n\t\t\t\treturn route\n\t\t\t\t\t? { component: 'router-link', to: route, href: undefined }\n\t\t\t\t\t: { component: 'a', to: undefined, href: resource.link }\n\t\t\t}\n\t\t},\n\n\t\ticonUrl() {\n\t\t\treturn (resource) => {\n\t\t\t\tif (resource.mimetype) {\n\t\t\t\t\treturn OC.MimeType.getIconUrl(resource.mimetype)\n\t\t\t\t}\n\t\t\t\tif (resource.iconUrl) {\n\t\t\t\t\treturn resource.iconUrl\n\t\t\t\t}\n\t\t\t\treturn ''\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\ttoggleDetails() {\n\t\t\tthis.detailsOpen = !this.detailsOpen\n\t\t},\n\n\t\tshowDetails() {\n\t\t\tthis.detailsOpen = true\n\t\t},\n\n\t\tremoveResource(collection, resource) {\n\t\t\tthis.$emit('removeResource', {\n\t\t\t\tcollectionId: collection.id,\n\t\t\t\tresourceType: resource.type,\n\t\t\t\tresourceId: resource.id,\n\t\t\t})\n\t\t},\n\n\t\topenRename() {\n\t\t\tthis.newName = this.collection.name\n\t\t},\n\n\t\trenameCollection() {\n\t\t\tif (this.newName) {\n\t\t\t\tthis.$emit('renameCollection', {\n\t\t\t\t\tcollectionId: this.collection.id,\n\t\t\t\t\tname: this.newName,\n\t\t\t\t})\n\t\t\t}\n\t\t\tthis.newName = null\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.fade-enter-active, .fade-leave-active {\n\ttransition: opacity .3s ease;\n}\n\n.fade-enter, .fade-leave-to\n\t/* .fade-leave-active below version 2.1.8 */\n{\n\topacity: 0;\n}\n\n.linked-icons {\n\tdisplay: flex;\n\n\timg {\n\t\tpadding: 12px;\n\t\theight: var(--default-clickable-area);\n\t\tdisplay: block;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\topacity: 0.7;\n\n\t\t&:hover {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n\n.popovermenu {\n\tdisplay: none;\n\n\t&.open {\n\t\tdisplay: block;\n\t}\n}\n\nli.collection-list-item {\n\tflex-wrap: wrap;\n\theight: auto;\n\tcursor: pointer;\n\tmargin-bottom: 0 !important;\n\n\t.collection-avatar {\n\t\tmargin-top: 0;\n\t}\n\n\tform, .collection-item-name {\n\t\tflex-basis: 10%;\n\t\tflex-grow: 1;\n\t\tdisplay: flex;\n\t}\n\n\t.collection-item-name {\n\t\tpadding: 12px 9px;\n\t}\n\n\tinput {\n\t\tmargin-top: 4px;\n\t\tborder-color: var(--color-border-maxcontrast);\n\n\t\t&[type=text] {\n\t\t\tflex-grow: 1;\n\t\t}\n\t}\n\n\t.error {\n\t\tflex-basis: 100%;\n\t\twidth: 100%;\n\t}\n\n\t.resource-list-details {\n\t\tflex-basis: 100%;\n\t\twidth: 100%;\n\n\t\tli {\n\t\t\tdisplay: flex;\n\t\t\tmargin-inline-start: var(--default-clickable-area);\n\t\t\tborder-radius: 3px;\n\t\t\tcursor: pointer;\n\n\t\t\t&:hover {\n\t\t\t\tbackground-color: var(--color-background-dark);\n\t\t\t}\n\n\t\t\ta {\n\t\t\t\tflex-grow: 1;\n\t\t\t\tpadding: 3px;\n\t\t\t\tmax-width: calc(100% - 30px);\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\tspan {\n\t\t\tdisplay: inline-block;\n\t\t\tvertical-align: top;\n\t\t\tmargin-inline-end: 10px;\n\t\t}\n\n\t\tspan.resource-name {\n\t\t\ttext-overflow: ellipsis;\n\t\t\toverflow: hidden;\n\t\t\tposition: relative;\n\t\t\tvertical-align: top;\n\t\t\twhite-space: nowrap;\n\t\t\tflex-grow: 1;\n\t\t\tpadding: 4px;\n\t\t}\n\n\t\timg {\n\t\t\twidth: 24px;\n\t\t\theight: 24px;\n\t\t}\n\n\t\t.icon-close {\n\t\t\topacity: .7;\n\n\t\t\t&:hover, &:focus {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.should-shake {\n\tanimation: shake 0.6s 1 linear;\n}\n\n@keyframes shake {\n\t0% {\n\t\ttransform: translate(15px);\n\t}\n\t20% {\n\t\ttransform: translate(-15px);\n\t}\n\t40% {\n\t\ttransform: translate(7px);\n\t}\n\t60% {\n\t\ttransform: translate(-7px);\n\t}\n\t80% {\n\t\ttransform: translate(3px);\n\t}\n\t100% {\n\t\ttransform: translate(0px);\n\t}\n}\n</style>\n","/**\n * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport axios, { type AxiosResponse } from '@nextcloud/axios'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport type { OCSResponse } from '@nextcloud/typings/ocs'\n\n/**\n * Extracts the OCS data from a response\n * @param response OCS response\n */\nfunction extractOcsData(response: AxiosResponse<OCSResponse>) {\n\treturn response.data.ocs.data\n}\n\n/**\n * Lists all collections\n * @param collectionId Collection ID\n */\nexport function listCollectionService(collectionId: number) {\n\treturn axios.get(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId })).then(extractOcsData)\n}\n\n/**\n * Renames a collection\n * @param collectionId Collection ID\n * @param collectionName New collection name\n */\nexport function renameCollectionService(collectionId: number, collectionName: string) {\n\treturn axios.put(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId }), { collectionName }).then(extractOcsData)\n}\n\n/**\n * Lists all collections for a resource\n * @param resourceType Resource type\n * @param resourceId Resource ID\n */\nexport function getCollectionsByResourceService(resourceType: string, resourceId: string) {\n\treturn axios.get(generateOcsUrl('collaboration/resources/{resourceType}/{resourceId}', { resourceType, resourceId })).then(extractOcsData)\n}\n\n/**\n * Creates a collection\n * @param resourceType Resource type\n * @param resourceId Resource ID\n * @param name Collection name\n */\nexport function createCollectionService(resourceType: string, resourceId: string, name: string) {\n\treturn axios.post(generateOcsUrl('collaboration/resources/{resourceType}/{resourceId}', { resourceType, resourceId }), { name }).then(extractOcsData)\n}\n\n/**\n * Adds a resource to a collection\n * @param collectionId Collection ID\n * @param resourceType Resource type\n * @param resourceId Resource ID\n */\nexport function addResourceService(collectionId: number, resourceType: string, resourceId: string) {\n\treturn axios.post(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId }), { resourceType, resourceId }).then(extractOcsData)\n}\n\n/**\n * Removes a resource from a collection\n * @param collectionId Collection ID\n * @param resourceType Resource type\n * @param resourceId Resource ID\n */\nexport function removeResourceService(collectionId: number, resourceType: string, resourceId: string) {\n\treturn axios.delete(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId }), { params: { resourceType, resourceId } }).then(extractOcsData)\n}\n\n/**\n * Searches for collections\n * @param query Search query\n */\nexport function searchService(query: string) {\n\treturn axios.get(generateOcsUrl('collaboration/resources/collections/search/{query}', { query })).then(extractOcsData)\n}\n","/**\n * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { ref } from 'vue'\nimport {\n\trenameCollectionService,\n\tgetCollectionsByResourceService,\n\tcreateCollectionService,\n\taddResourceService,\n\tremoveResourceService,\n} from './service.ts'\n\n/**\n * Use collections composable\n */\nexport function useCollections() {\n\t// State\n\tconst storedCollections = ref([])\n\n\t// Mutations\n\tconst addCollections = (collections) => {\n\t\tstoredCollections.value = collections\n\t}\n\n\tconst addCollection = (collection) => {\n\t\tstoredCollections.value.push(collection)\n\t}\n\n\tconst removeCollection = (collectionId) => {\n\t\tstoredCollections.value = storedCollections.value.filter(item => item.id !== collectionId)\n\t}\n\n\tconst updateCollection = (collection) => {\n\t\tconst index = storedCollections.value.findIndex(item => item.id === collection.id)\n\t\tif (index !== -1) {\n\t\t\tstoredCollections.value[index] = collection\n\t\t} else {\n\t\t\taddCollection(collection)\n\t\t}\n\t}\n\n\t// Actions\n\tconst fetchCollectionsByResource = async ({ resourceType, resourceId }) => {\n\t\tconst collections = await getCollectionsByResourceService(resourceType, resourceId)\n\n\t\taddCollections(collections)\n\t}\n\n\tconst createCollection = async ({ baseResourceType, baseResourceId, resourceType, resourceId, name }) => {\n\t\tconst collection = await createCollectionService(baseResourceType, baseResourceId, name)\n\n\t\taddCollection(collection)\n\t\tawait addResourceToCollection({\n\t\t\tcollectionId: collection.id,\n\t\t\tresourceType,\n\t\t\tresourceId,\n\t\t})\n\t}\n\n\tconst renameCollection = async ({ collectionId, name }) => {\n\t\tconst collection = await renameCollectionService(collectionId, name)\n\n\t\tupdateCollection(collection)\n\t}\n\n\tconst addResourceToCollection = async ({ collectionId, resourceType, resourceId }) => {\n\t\tconst collection = await addResourceService(collectionId, resourceType, String(resourceId))\n\n\t\tupdateCollection(collection)\n\t}\n\n\tconst removeResourceFromCollection = async ({ collectionId, resourceType, resourceId }) => {\n\t\tconst collection = await removeResourceService(collectionId, resourceType, String(resourceId))\n\n\t\tif (collection.resources.length > 0) {\n\t\t\tupdateCollection(collection)\n\t\t} else {\n\t\t\tremoveCollection(collectionId)\n\t\t}\n\t}\n\n\treturn {\n\t\tstoredCollections,\n\t\tfetchCollectionsByResource,\n\t\tcreateCollection,\n\t\trenameCollection,\n\t\taddResourceToCollection,\n\t\tremoveResourceFromCollection,\n\t}\n}\n","\n\n<docs>\nProvides a Vue standalone component for Nextcloud Projects feature introduced in Nextcloud 16. Replaces deprecated `nextcloud-vue-collections` library.\n\nProjects feature is deprecated since Nextcloud 25, and superseded by Related resources. See [NcRelatedResourcesPanel](#/Components/NcRelatedResourcesPanel) documentation for more information.\n\n### Usage\n\nTo enable feature in Nextcloud, run following command:\n```sh\nocc config:system:set --value true 'projects.enabled'\n```\n</docs>\n\n<template>\n\t<ul v-if=\"collections && type && id\" id=\"collection-list\" class=\"collection-list\">\n\t\t<li @click=\"showSelect\">\n\t\t\t<div class=\"avatar\">\n\t\t\t\t<span class=\"icon-projects\" />\n\t\t\t</div>\n\t\t\t<div id=\"collection-select-container\">\n\t\t\t\t<NcSelect ref=\"select\"\n\t\t\t\t\tv-model=\"value\"\n\t\t\t\t\t:aria-label-combobox=\"t('Add to a project')\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t\t:placeholder=\"placeholder\"\n\t\t\t\t\tlabel=\"title\"\n\t\t\t\t\t:limit=\"5\"\n\t\t\t\t\t@close=\"isSelectOpen = false\"\n\t\t\t\t\t@open=\"isSelectOpen = true\"\n\t\t\t\t\t@option:selected=\"select\"\n\t\t\t\t\t@search=\"search\">\n\t\t\t\t\t<template #selected-option=\"option\">\n\t\t\t\t\t\t<span class=\"option__desc\">\n\t\t\t\t\t\t\t<span class=\"option__title\">{{ option.title }}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</template>\n\t\t\t\t\t<template #option=\"option\">\n\t\t\t\t\t\t<span class=\"option__wrapper\">\n\t\t\t\t\t\t\t<span v-if=\"option.class\" :class=\"option.class\" class=\"avatar\" />\n\t\t\t\t\t\t\t<NcAvatar v-else-if=\"option.method !== 2\" allow-placeholder :display-name=\"option.title\" />\n\t\t\t\t\t\t\t<span class=\"option__title\">{{ option.title }}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</template>\n\t\t\t\t\t<p class=\"hint\">\n\t\t\t\t\t\t{{ t('Connect items to a project to make them easier to find') }}\n\t\t\t\t\t</p>\n\t\t\t\t</NcSelect>\n\t\t\t</div>\n\t\t</li>\n\t\t<transition name=\"fade\">\n\t\t\t<li v-if=\"error\" class=\"error\">\n\t\t\t\t{{ error }}\n\t\t\t</li>\n\t\t</transition>\n\t\t<NcCollectionListItem v-for=\"collection in collections\"\n\t\t\t:key=\"collection.id\"\n\t\t\t:collection=\"collection\"\n\t\t\t:error=\"collectionsError[collection.id]\"\n\t\t\t@rename-collection=\"renameCollectionFromItem\"\n\t\t\t@remove-resource=\"removeResourceFromCollection\" />\n\t</ul>\n</template>\n\n<script>\nimport debounce from 'debounce'\nimport { ref } from 'vue'\nimport { t } from '../../l10n.ts'\n\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcSelect from '../NcSelect/index.js'\nimport NcCollectionListItem from './NcCollectionListItem.vue'\n\nimport { useCollections } from './useCollections.js'\nimport { searchService } from './service.ts'\n\nconst METHOD_CREATE_COLLECTION = 0\nconst METHOD_ADD_TO_COLLECTION = 1\n\nexport default {\n\tname: 'NcCollectionList',\n\n\tcomponents: {\n\t\tNcCollectionListItem,\n\t\tNcAvatar,\n\t\tNcSelect,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Resource type identifier\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Unique id of the resource\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Name of the resource\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Whether the component is active (to start fetch resources)\n\t\t */\n\t\tisActive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\tsetup() {\n\t\tconst {\n\t\t\tstoredCollections,\n\t\t\tfetchCollectionsByResource,\n\t\t\tcreateCollection,\n\t\t\taddResourceToCollection,\n\t\t\tremoveResourceFromCollection,\n\t\t\trenameCollection,\n\t\t} = useCollections()\n\n\t\tconst searchCollections = ref([])\n\t\tconst search = debounce(function(query, loading) {\n\t\t\tif (query !== '') {\n\t\t\t\tloading(true)\n\t\t\t\tsearchService(query).then(collections => {\n\t\t\t\t\tsearchCollections.value = collections\n\t\t\t\t}).catch(e => {\n\t\t\t\t\tconsole.error('Failed to search for collections', e)\n\t\t\t\t}).finally(() => {\n\t\t\t\t\tloading(false)\n\t\t\t\t})\n\t\t\t}\n\t\t}, 500)\n\n\t\treturn {\n\t\t\tstoredCollections,\n\t\t\tfetchCollectionsByResource,\n\t\t\tcreateCollection,\n\t\t\taddResourceToCollection,\n\t\t\tremoveResourceFromCollection,\n\t\t\trenameCollection,\n\t\t\tsearchCollections,\n\t\t\tsearch,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tselectIsOpen: false,\n\t\t\tgeneratingCodes: false,\n\t\t\tcodes: undefined,\n\t\t\tvalue: null,\n\t\t\tmodel: {},\n\t\t\tcollectionsError: {},\n\t\t\terror: null,\n\t\t\tisSelectOpen: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcollections() {\n\t\t\treturn this.storedCollections.filter(collection => collection.resources\n\t\t\t\t.some(resource => resource && resource.id === String(this.id) && resource.type === this.type),\n\t\t\t)\n\t\t},\n\n\t\tplaceholder() {\n\t\t\treturn this.isSelectOpen\n\t\t\t\t? t('Type to search for existing projects')\n\t\t\t\t: t('Add to a project')\n\t\t},\n\n\t\toptions() {\n\t\t\tconst options = []\n\t\t\twindow.OCP.Collaboration.getTypes().sort().forEach(type => {\n\t\t\t\toptions.push({\n\t\t\t\t\tmethod: METHOD_CREATE_COLLECTION,\n\t\t\t\t\ttype,\n\t\t\t\t\ttitle: window.OCP.Collaboration.getLabel(type),\n\t\t\t\t\tclass: window.OCP.Collaboration.getIcon(type),\n\t\t\t\t\taction: () => window.OCP.Collaboration.trigger(type),\n\t\t\t\t})\n\t\t\t})\n\t\t\tfor (const index in this.searchCollections) {\n\t\t\t\tif (!this.collections.find(collection => collection.id === this.searchCollections[index].id)) {\n\t\t\t\t\toptions.push({\n\t\t\t\t\t\tmethod: METHOD_ADD_TO_COLLECTION,\n\t\t\t\t\t\ttitle: this.searchCollections[index].name,\n\t\t\t\t\t\tcollectionId: this.searchCollections[index].id,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn options\n\t\t},\n\n\t\tresourceIdentifier() {\n\t\t\treturn {\n\t\t\t\tresourceType: this.type,\n\t\t\t\tresourceId: this.id,\n\t\t\t\tisActive: this.isActive,\n\t\t\t}\n\t\t},\n\t},\n\n\twatch: {\n\t\tresourceIdentifier: {\n\t\t\tdeep: true,\n\t\t\timmediate: true,\n\t\t\thandler(resourceIdentifier) {\n\t\t\t\tif (!resourceIdentifier.isActive || !resourceIdentifier.resourceId || !resourceIdentifier.resourceType) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.fetchCollectionsByResource(resourceIdentifier)\n\t\t\t},\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\tselect(selectedOption) {\n\t\t\tif (selectedOption.method === METHOD_CREATE_COLLECTION) {\n\t\t\t\tselectedOption.action().then(resourceId => {\n\t\t\t\t\tthis.createCollection({\n\t\t\t\t\t\tbaseResourceType: this.type,\n\t\t\t\t\t\tbaseResourceId: this.id,\n\t\t\t\t\t\tresourceType: selectedOption.type,\n\t\t\t\t\t\tresourceId,\n\t\t\t\t\t\tname: this.name,\n\t\t\t\t\t}).catch((e) => {\n\t\t\t\t\t\tthis.setError(t('Failed to create a project'), e)\n\t\t\t\t\t})\n\t\t\t\t}).catch((e) => {\n\t\t\t\t\tconsole.error('No resource selected', e)\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tif (selectedOption.method === METHOD_ADD_TO_COLLECTION) {\n\t\t\t\tthis.addResourceToCollection({\n\t\t\t\t\tcollectionId: selectedOption.collectionId, resourceType: this.type, resourceId: this.id,\n\t\t\t\t}).catch((e) => {\n\t\t\t\t\tthis.setError(t('Failed to add the item to the project'), e)\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tthis.value = null\n\t\t},\n\n\t\tshowSelect() {\n\t\t\tthis.selectIsOpen = true\n\t\t\tthis.$refs.select.$el.focus()\n\t\t},\n\n\t\tsetError(error, e) {\n\t\t\tconsole.error(error, e)\n\t\t\tthis.error = error\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.error = null\n\t\t\t}, 5000)\n\t\t},\n\n\t\trenameCollectionFromItem({ collectionId, name }) {\n\t\t\tthis.renameCollection({ collectionId, name })\n\t\t\t\t.catch((e) => {\n\t\t\t\t\tconsole.error(t('Failed to rename the project'), e)\n\t\t\t\t\tthis.collectionsError[collectionId] = t('Failed to rename the project')\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tthis.collectionsError[collectionId] = null\n\t\t\t\t\t}, 5000)\n\t\t\t\t})\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.collection-list * {\n\tbox-sizing: border-box;\n}\n\n.collection-list > li {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 12px;\n\n\t& > .avatar {\n\t\tmargin-top: 0;\n\t}\n}\n\n#collection-select-container {\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.v-select {\n\t// NcAvatar in the dropdown\n\tspan.avatar {\n\t\tdisplay: block;\n\t\tpadding: 16px;\n\t\topacity: .7;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\n\t\t&:hover {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n\np.hint {\n\tz-index: 1;\n\t// fix alignment\n\tmargin-top: -16px;\n\tpadding: 8px 8px;\n\tcolor: var(--color-text-maxcontrast);\n\tline-height: normal;\n}\n\ndiv.avatar {\n\twidth: 32px;\n\theight: 32px;\n\tmargin: 0;\n\tpadding: 8px;\n\tbackground-color: var(--color-background-dark);\n\tmargin-top: 30px;\n}\n\n/** TODO provide white icon in core */\n.icon-projects {\n\tdisplay: block;\n\tpadding: 8px;\n\tbackground-repeat: no-repeat;\n\tbackground-position: center;\n}\n\n.option__wrapper {\n\tdisplay: flex;\n\n\t.avatar {\n\t\tdisplay: block;\n\t\twidth: 32px;\n\t\theight: 32px;\n\t\tbackground-color: var(--color-background-darker) !important;\n\t}\n\n\t.option__title {\n\t\tpadding: 4px;\n\t}\n}\n\n.fade-enter-active, .fade-leave-active {\n\ttransition: opacity .5s;\n}\n\n.fade-enter, .fade-leave-to {\n\topacity: 0;\n}\n\n</style>\n"],"names":["_sfc_main","_hoisted_1","_hoisted_8","_openBlock","_createElementBlock","_createVNode","_toDisplayString","_createElementVNode","_hoisted_2","_Fragment","_renderList","_createBlock","_resolveDynamicComponent","_normalizeClass","_hoisted_4","_Transition","_hoisted_5","_hoisted_6","_withCtx"],"mappings":";;;;;;;;;;;;;AA2EA,MAAKA,cAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;EAGD,OAAO;AAAA,IACN,YAAY;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;IAGV,OAAO;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA,IACN;AAAA,IACA;AAAA;EAGD,OAAO;AACN,WAAO;AAAA,MACN,aAAa;AAAA,MACb,SAAS;AAAA,IACV;AAAA,EACD;AAAA,EAEA,UAAU;AAAA,IACT,UAAU;AACT,aAAO,CAAC,aAAa,CAAC,SAAS,SAAS;AAAA,IACzC;AAAA,IAEA,YAAY;AACX,aAAO,CAAC,aAAa,mBAAmB,SAAS;AAAA,IAClD;AAAA,IAEA,YAAY;AAEX,aAAO,KAAK,WAAW,WAAW,OAAO,cAAY,CAAC,MAAM,QAAQ,QAAQ,CAAC,KAAK,CAAA;AAAA,IACnF;AAAA,IAEA,eAAe;AACd,aAAO,CAAC,aAAa;AACpB,cAAM,QAAQ,SAAS,KAAK,SAAS,SAAS,IAAI;AAElD,eAAO,QACJ,EAAE,WAAW,eAAe,IAAI,OAAO,MAAM,OAAQ,IACrD,EAAE,WAAW,KAAK,IAAI,QAAW,MAAM,SAAS,KAAG;AAAA,MACvD;AAAA,IACD;AAAA,IAEA,UAAU;AACT,aAAO,CAAC,aAAa;AACpB,YAAI,SAAS,UAAU;AACtB,iBAAO,GAAG,SAAS,WAAW,SAAS,QAAQ;AAAA,QAChD;AACA,YAAI,SAAS,SAAS;AACrB,iBAAO,SAAS;AAAA,QACjB;AACA,eAAO;AAAA,MACR;AAAA,IACD;AAAA;EAGD,SAAS;AAAA,IACR;AAAA,IAEA,gBAAgB;AACf,WAAK,cAAc,CAAC,KAAK;AAAA,IAC1B;AAAA,IAEA,cAAc;AACb,WAAK,cAAc;AAAA,IACpB;AAAA,IAEA,eAAe,YAAY,UAAU;AACpC,WAAK,MAAM,kBAAkB;AAAA,QAC5B,cAAc,WAAW;AAAA,QACzB,cAAc,SAAS;AAAA,QACvB,YAAY,SAAS;AAAA,OACrB;AAAA,IACF;AAAA,IAEA,aAAa;AACZ,WAAK,UAAU,KAAK,WAAW;AAAA,IAChC;AAAA,IAEA,mBAAmB;AAClB,UAAI,KAAK,SAAS;AACjB,aAAK,MAAM,oBAAoB;AAAA,UAC9B,cAAc,KAAK,WAAW;AAAA,UAC9B,MAAM,KAAK;AAAA,SACX;AAAA,MACF;AACA,WAAK,UAAU;AAAA,IAChB;AAAA;AAEF;AA5KK,MAAAC,eAAA,EAAA,OAAM,uBAAsB;;;EAac,OAAM;;;;;EAYrB,OAAM;;;;EAcjB,OAAM;;;;EAKD,OAAM;;;AAQpB,MAAAC,eAAA,EAAA,OAAM,gBAAe;;;;;;AApDhC,SAAAC,UAAA,GAAAC,mBA0DK,MA1DLH,cA0DK;AAAA,IAzDJI,YAAwF,qBAAA;AAAA,MAA7E,gBAAc,OAAA,WAAW;AAAA,MAAM,qBAAA;AAAA,MAAkB,OAAM;AAAA;IACtD,MAAA,YAAO,qBAAnBD,mBAGkD,QAAA;AAAA;MAFjD,OAAM;AAAA,MACN,OAAM;AAAA,MACL,gDAAO,SAAA,eAAA,SAAA,YAAA,GAAA,IAAA;AAAA,IAAgB,GAAAE,gBAAA,OAAA,WAAW,IAAI,GAAA,CAAA,mBACxCF,mBAMO,QAAA;AAAA;MANO,wCAAwB,OAAA,MAAK,CAAA;AAAA,MAAK,+DAAgB,SAAA,oBAAA,SAAA,iBAAA,GAAA,IAAA,GAAgB,CAAA,SAAA,CAAA;AAAA;qBAC/EG,mBAGsB,SAAA;AAAA,qEAHN,MAAA,UAAO;AAAA,QACtB,MAAK;AAAA,QACL,cAAa;AAAA,QACb,gBAAe;AAAA;qBAHA,MAAA,OAAO;AAAA;gCAIvBA,mBAAmD,SAAA;AAAA,QAA5C,MAAK;AAAA,QAAS,OAAM;AAAA,QAAG,OAAM;AAAA;;IAEzB,CAAA,MAAA,eAAe,MAAA,YAAO,QAAlCJ,aAAAC,mBAUM,OAVNI,cAUM;AAAA,OATLL,UAAA,IAAA,GAAAC,mBAQYK,UAAA,MAAAC,WAPQ,SAAA,UAAU,cAAtB,aAAQ;AADhB,eAAAP,UAAA,GAAAQ,YAQYC,wBARI,SAAA,aAAa,QAAQ,EAAE,SAAS,GAAA;AAAA,UAE9C,KAAK,SAAS,OAAI,MAAS,SAAS;AAAA,UACpC,OAAO,SAAS;AAAA,UAChB,IAAI,SAAA,aAAa,QAAQ,EAAE;AAAA,UAC3B,MAAM,SAAA,aAAa,QAAQ,EAAE;AAAA,UAC7B,OAAKC,eAAE,SAAA,UAAU,QAAQ,CAAA;AAAA;2BAC1B,MAAmD;AAAA,YAAnDN,mBAAmD,OAAA;AAAA,cAA7C,KAAK,SAAA,QAAQ,QAAQ;AAAA,cAAI,KAAK,SAAS;AAAA;;;;;;IAInC,MAAA,YAAO,QAAnBJ,aAAAC,mBAWO,QAXPU,cAWO;AAAA,MAVNT,YASY,sBAAA,MAAA;AAAA,yBARX,MAGiB;AAAA,UAHjBA,YAGiB,2BAAA;AAAA,YAHD,MAAK;AAAA,YACnB,uBAAe,SAAA,eAAa,CAAA,SAAA,CAAA;AAAA;6BAC7B,MAAyD;AAAA,8CAAtD,MAAA,cAAc,SAAA,EAAC,cAAA,IAAmB,SAAA,EAAC,cAAA,CAAA,GAAA,CAAA;AAAA;;;UAEvCA,YAGiB,2BAAA;AAAA,YAHD,MAAK;AAAA,YACnB,uBAAe,SAAA,YAAU,CAAA,SAAA,CAAA;AAAA;6BAC1B,MAAyB;AAAA,8CAAtB,SAAA,EAAC,gBAAA,CAAA,GAAA,CAAA;AAAA;;;;;;;IAKPA,YAIaU,YAAA,EAJD,MAAK,OAAM,GAAA;AAAA,uBACtB,MAEM;AAAA,QAFK,OAAA,sBAAXX,mBAEM,OAFNY,cAEMV,gBADF,OAAA,KAAK,GAAA,CAAA;;;;IAGVD,YAcaU,YAAA,EAdD,MAAK,OAAM,GAAA;AAAA,uBACtB,MAYK;AAAA,QAZK,MAAA,eAAVZ,aAAAC,mBAYK,MAZLa,cAYK;AAAA,4BAXJb,mBAUKK,UAAA,MAAAC,WAVkB,SAAA,WAAS,CAArB,aAAQ;gCAAnBN,mBAUK,MAAA;AAAA,cATH,KAAK,SAAS,OAAI,MAAS,SAAS;AAAA,cACpC,OAAKS,eAAE,SAAA,UAAU,QAAQ,CAAA;AAAA;eAC1BV,UAAA,GAAAQ,YAKYC,wBALI,SAAA,aAAa,QAAQ,EAAE,SAAS,GAAA;AAAA,gBAC9C,IAAI,SAAA,aAAa,QAAQ,EAAE;AAAA,gBAC3B,MAAM,SAAA,aAAa,QAAQ,EAAE;AAAA;iCAC9B,MAAmD;AAAA,kBAAnDL,mBAAmD,OAAA;AAAA,oBAA7C,KAAK,SAAA,QAAQ,QAAQ;AAAA,oBAAI,KAAK,SAAS;AAAA;kBAC7CA,mBAA4D,QAA5DL,cAA4DI,gBAA7B,SAAS,QAAI,EAAA,GAAA,CAAA;AAAA;;;cAE7CC,mBAAyE,QAAA;AAAA,gBAAnE,OAAM;AAAA,gBAAc,SAAK,YAAE,SAAA,eAAe,OAAA,YAAY,QAAQ;AAAA;;;;;;;;;;AC/CzE,SAAS,eAAe,UAAsC;AAC7D,SAAO,SAAS,KAAK,IAAI;AAC1B;AAeO,SAAS,wBAAwB,cAAsB,gBAAwB;AACrF,SAAO,MAAM,IAAI,eAAe,sDAAsD,EAAE,cAAc,GAAG,EAAE,eAAA,CAAgB,EAAE,KAAK,cAAc;AACjJ;AAOO,SAAS,gCAAgC,cAAsB,YAAoB;AACzF,SAAO,MAAM,IAAI,eAAe,uDAAuD,EAAE,cAAc,YAAY,CAAC,EAAE,KAAK,cAAc;AAC1I;AAQO,SAAS,wBAAwB,cAAsB,YAAoB,MAAc;AAC/F,SAAO,MAAM,KAAK,eAAe,uDAAuD,EAAE,cAAc,WAAA,CAAY,GAAG,EAAE,KAAA,CAAM,EAAE,KAAK,cAAc;AACrJ;AAQO,SAAS,mBAAmB,cAAsB,cAAsB,YAAoB;AAClG,SAAO,MAAM,KAAK,eAAe,sDAAsD,EAAE,aAAA,CAAc,GAAG,EAAE,cAAc,WAAA,CAAY,EAAE,KAAK,cAAc;AAC5J;AAQO,SAAS,sBAAsB,cAAsB,cAAsB,YAAoB;AACrG,SAAO,MAAM,OAAO,eAAe,sDAAsD,EAAE,cAAc,GAAG,EAAE,QAAQ,EAAE,cAAc,WAAA,GAAc,EAAE,KAAK,cAAc;AAC1K;AAMO,SAAS,cAAc,OAAe;AAC5C,SAAO,MAAM,IAAI,eAAe,sDAAsD,EAAE,OAAO,CAAC,EAAE,KAAK,cAAc;AACtH;AC9DO,SAAS,iBAAiB;AAEhC,QAAM,oBAAoB,IAAI,CAAA,CAAE;AAGhC,QAAM,iBAAiB,CAAC,gBAAgB;AACvC,sBAAkB,QAAQ;AAAA,EAC3B;AAEA,QAAM,gBAAgB,CAAC,eAAe;AACrC,sBAAkB,MAAM,KAAK,UAAU;AAAA,EACxC;AAEA,QAAM,mBAAmB,CAAC,iBAAiB;AAC1C,sBAAkB,QAAQ,kBAAkB,MAAM,OAAO,UAAQ,KAAK,OAAO,YAAY;AAAA,EAC1F;AAEA,QAAM,mBAAmB,CAAC,eAAe;AACxC,UAAM,QAAQ,kBAAkB,MAAM,UAAU,UAAQ,KAAK,OAAO,WAAW,EAAE;AACjF,QAAI,UAAU,IAAI;AACjB,wBAAkB,MAAM,KAAK,IAAI;AAAA,IAClC,OAAO;AACN,oBAAc,UAAU;AAAA,IACzB;AAAA,EACD;AAGA,QAAM,6BAA6B,OAAO,EAAE,cAAc,WAAU,MAAO;AAC1E,UAAM,cAAc,MAAM,gCAAgC,cAAc,UAAU;AAElF,mBAAe,WAAW;AAAA,EAC3B;AAEA,QAAM,mBAAmB,OAAO,EAAE,kBAAkB,gBAAgB,cAAc,YAAY,WAAW;AACxG,UAAM,aAAa,MAAM,wBAAwB,kBAAkB,gBAAgB,IAAI;AAEvF,kBAAc,UAAU;AACxB,UAAM,wBAAwB;AAAA,MAC7B,cAAc,WAAW;AAAA,MACzB;AAAA,MACA;AAAA,IACH,CAAG;AAAA,EACF;AAEA,QAAM,mBAAmB,OAAO,EAAE,cAAc,KAAI,MAAO;AAC1D,UAAM,aAAa,MAAM,wBAAwB,cAAc,IAAI;AAEnE,qBAAiB,UAAU;AAAA,EAC5B;AAEA,QAAM,0BAA0B,OAAO,EAAE,cAAc,cAAc,WAAU,MAAO;AACrF,UAAM,aAAa,MAAM,mBAAmB,cAAc,cAAc,OAAO,UAAU,CAAC;AAE1F,qBAAiB,UAAU;AAAA,EAC5B;AAEA,QAAM,+BAA+B,OAAO,EAAE,cAAc,cAAc,WAAU,MAAO;AAC1F,UAAM,aAAa,MAAM,sBAAsB,cAAc,cAAc,OAAO,UAAU,CAAC;AAE7F,QAAI,WAAW,UAAU,SAAS,GAAG;AACpC,uBAAiB,UAAU;AAAA,IAC5B,OAAO;AACN,uBAAiB,YAAY;AAAA,IAC9B;AAAA,EACD;AAEA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA;ACXA,MAAM,2BAA2B;AACjC,MAAM,2BAA2B;AAEjC,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;EAGD,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAKV,IAAI;AAAA,MACH,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAKV,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAKV,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,QAAQ;AACP,UAAM;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD,IAAI,eAAc;AAElB,UAAM,oBAAoB,IAAI,CAAA,CAAE;AAChC,UAAM,SAAS,SAAS,SAAS,OAAO,SAAS;AAChD,UAAI,UAAU,IAAI;AACjB,gBAAQ,IAAI;AACZ,sBAAc,KAAK,EAAE,KAAK,iBAAe;AACxC,4BAAkB,QAAQ;AAAA,QAC3B,CAAC,EAAE,MAAM,OAAK;AACb,kBAAQ,MAAM,oCAAoC,CAAC;AAAA,QACpD,CAAC,EAAE,QAAQ,MAAM;AAChB,kBAAQ,KAAK;AAAA,QACd,CAAC;AAAA,MACF;AAAA,IACD,GAAG,GAAG;AAEN,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAAA,EAEA,OAAO;AACN,WAAO;AAAA,MACN,cAAc;AAAA,MACd,iBAAiB;AAAA,MACjB,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO,CAAA;AAAA,MACP,kBAAkB,CAAA;AAAA,MAClB,OAAO;AAAA,MACP,cAAc;AAAA,IACf;AAAA,EACD;AAAA,EAEA,UAAU;AAAA,IACT,cAAc;AACb,aAAO,KAAK,kBAAkB;AAAA,QAAO,gBAAc,WAAW,UAC5D,KAAK,cAAY,YAAY,SAAS,OAAO,OAAO,KAAK,EAAE,KAAK,SAAS,SAAS,KAAK,IAAI;AAAA,MAC7F;AAAA,IACD;AAAA,IAEA,cAAc;AACb,aAAO,KAAK,eACT,EAAE,sCAAsC,IACxC,EAAE,kBAAkB;AAAA,IACxB;AAAA,IAEA,UAAU;AACT,YAAM,UAAU,CAAA;AAChB,aAAO,IAAI,cAAc,SAAQ,EAAG,KAAI,EAAG,QAAQ,UAAQ;AAC1D,gBAAQ,KAAK;AAAA,UACZ,QAAQ;AAAA,UACR;AAAA,UACA,OAAO,OAAO,IAAI,cAAc,SAAS,IAAI;AAAA,UAC7C,OAAO,OAAO,IAAI,cAAc,QAAQ,IAAI;AAAA,UAC5C,QAAQ,MAAM,OAAO,IAAI,cAAc,QAAQ,IAAI;AAAA,SACnD;AAAA,MACF,CAAC;AACD,iBAAW,SAAS,KAAK,mBAAmB;AAC3C,YAAI,CAAC,KAAK,YAAY,KAAK,gBAAc,WAAW,OAAO,KAAK,kBAAkB,KAAK,EAAE,EAAE,GAAG;AAC7F,kBAAQ,KAAK;AAAA,YACZ,QAAQ;AAAA,YACR,OAAO,KAAK,kBAAkB,KAAK,EAAE;AAAA,YACrC,cAAc,KAAK,kBAAkB,KAAK,EAAE;AAAA,WAC5C;AAAA,QACF;AAAA,MACD;AACA,aAAO;AAAA,IACR;AAAA,IAEA,qBAAqB;AACpB,aAAO;AAAA,QACN,cAAc,KAAK;AAAA,QACnB,YAAY,KAAK;AAAA,QACjB,UAAU,KAAK;AAAA,MAChB;AAAA,IACD;AAAA;EAGD,OAAO;AAAA,IACN,oBAAoB;AAAA,MACnB,MAAM;AAAA,MACN,WAAW;AAAA,MACX,QAAQ,oBAAoB;AAC3B,YAAI,CAAC,mBAAmB,YAAY,CAAC,mBAAmB,cAAc,CAAC,mBAAmB,cAAc;AACvG;AAAA,QACD;AACA,aAAK,2BAA2B,kBAAkB;AAAA,MACnD;AAAA;;EAIF,SAAS;AAAA,IACR;AAAA,IAEA,OAAO,gBAAgB;AACtB,UAAI,eAAe,WAAW,0BAA0B;AACvD,uBAAe,OAAM,EAAG,KAAK,gBAAc;AAC1C,eAAK,iBAAiB;AAAA,YACrB,kBAAkB,KAAK;AAAA,YACvB,gBAAgB,KAAK;AAAA,YACrB,cAAc,eAAe;AAAA,YAC7B;AAAA,YACA,MAAM,KAAK;AAAA,UACZ,CAAC,EAAE,MAAM,CAAC,MAAM;AACf,iBAAK,SAAS,EAAE,4BAA4B,GAAG,CAAC;AAAA,UACjD,CAAC;AAAA,QACF,CAAC,EAAE,MAAM,CAAC,MAAM;AACf,kBAAQ,MAAM,wBAAwB,CAAC;AAAA,QACxC,CAAC;AAAA,MACF;AAEA,UAAI,eAAe,WAAW,0BAA0B;AACvD,aAAK,wBAAwB;AAAA,UAC5B,cAAc,eAAe;AAAA,UAAc,cAAc,KAAK;AAAA,UAAM,YAAY,KAAK;AAAA,QACtF,CAAC,EAAE,MAAM,CAAC,MAAM;AACf,eAAK,SAAS,EAAE,uCAAuC,GAAG,CAAC;AAAA,QAC5D,CAAC;AAAA,MACF;AAEA,WAAK,QAAQ;AAAA,IACd;AAAA,IAEA,aAAa;AACZ,WAAK,eAAe;AACpB,WAAK,MAAM,OAAO,IAAI,MAAK;AAAA,IAC5B;AAAA,IAEA,SAAS,OAAO,GAAG;AAClB,cAAQ,MAAM,OAAO,CAAC;AACtB,WAAK,QAAQ;AACb,iBAAW,MAAM;AAChB,aAAK,QAAQ;AAAA,MACd,GAAG,GAAI;AAAA,IACR;AAAA,IAEA,yBAAyB,EAAE,cAAc,QAAQ;AAChD,WAAK,iBAAiB,EAAE,cAAc,MAAM,EAC1C,MAAM,CAAC,MAAM;AACb,gBAAQ,MAAM,EAAE,8BAA8B,GAAG,CAAC;AAClD,aAAK,iBAAiB,YAAY,IAAI,EAAE,8BAA8B;AACtE,mBAAW,MAAM;AAChB,eAAK,iBAAiB,YAAY,IAAI;AAAA,QACvC,GAAG,GAAI;AAAA,MACR,CAAC;AAAA,IACH;AAAA;AAEF;;;EA1QsC,IAAG;AAAA,EAAkB,OAAM;;AAKzD,MAAA,aAAA,EAAA,IAAG,8BAA6B;AAa5B,MAAA,aAAA,EAAA,OAAM,eAAc;AACnB,MAAA,aAAA,EAAA,OAAM,gBAAe;AAItB,MAAA,aAAA,EAAA,OAAM,kBAAiB;AAGtB,MAAA,aAAA,EAAA,OAAM,gBAAe;AAG1B,MAAA,aAAA,EAAA,OAAM,OAAM;;;EAOA,OAAM;;;;;;SApCf,SAAA,eAAe,OAAA,QAAQ,OAAA,MAAjCJ,aAAAC,mBA8CK,MA9CL,YA8CK;AAAA,IA7CJG,mBAiCK,MAAA;AAAA,MAjCA,gDAAO,SAAA,cAAA,SAAA,WAAA,GAAA,IAAA;AAAA;gCACXA,mBAEM,OAAA,EAFD,OAAM,YAAQ;AAAA,QAClBA,mBAA8B,QAAA,EAAxB,OAAM,gBAAe,CAAA;AAAA;MAE5BA,mBA4BM,OA5BN,YA4BM;AAAA,QA3BLF,YA0BW,qBAAA;AAAA,UA1BD,KAAI;AAAA,sBACJ,MAAA;AAAA,uEAAA,MAAA,QAAK;AAAA,UACb,uBAAqB,SAAA,EAAC,kBAAA;AAAA,UACtB,SAAS,SAAA;AAAA,UACT,aAAa,SAAA;AAAA,UACd,OAAM;AAAA,UACL,OAAO;AAAA,UACP,+CAAO,MAAA,eAAY;AAAA,UACnB,8CAAM,MAAA,eAAY;AAAA,UAClB,qBAAiB,SAAA;AAAA,UACjB,UAAQ,OAAA;AAAA;UACE,mBAAea,QACzB,CAD2B,WAAM;AAAA,YACjCX,mBAEO,QAFP,YAEO;AAAA,cADNA,mBAAqD,QAArD,YAAqDD,gBAAtB,OAAO,KAAK,GAAA,CAAA;AAAA;;UAGlC,QAAMY,QAChB,CADkB,WAAM;AAAA,YACxBX,mBAIO,QAJP,YAIO;AAAA,cAHM,OAAO,sBAAnBH,mBAAiE,QAAA;AAAA;gBAAtC,OAAKS,eAAA,CAAE,OAAO,OAAa,QAAQ,CAAA;AAAA,6BACzC,OAAO,WAAM,kBAAlCF,YAA2F,qBAAA;AAAA;gBAAjD,qBAAA;AAAA,gBAAmB,gBAAc,OAAO;AAAA;cAClFJ,mBAAqD,QAArD,YAAqDD,gBAAtB,OAAO,KAAK,GAAA,CAAA;AAAA;;2BAG7C,MAEI;AAAA,YAFJC,mBAEI,KAFJ,YAEID,gBADA,SAAA,EAAC,wDAAA,CAAA,GAAA,CAAA;AAAA;;;;;IAKRD,YAIaU,YAAA,EAJD,MAAK,OAAM,GAAA;AAAA,uBACtB,MAEK;AAAA,QAFK,MAAA,sBAAVX,mBAEK,MAFL,YAEKE,gBADD,MAAA,KAAK,GAAA,CAAA;;;;sBAGVF,mBAKmDK,UAAA,MAAAC,WALR,SAAA,aAAW,CAAzB,eAAU;0BAAvCC,YAKmD,iCAAA;AAAA,QAJjD,KAAK,WAAW;AAAA,QAChB;AAAA,QACA,OAAO,MAAA,iBAAiB,WAAW,EAAE;AAAA,QACrC,oBAAmB,SAAA;AAAA,QACnB,kBAAiB,OAAA;AAAA;;;;;"}

package/dist/chunks/NcColorPicker-D6g3v7Qc.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcColorPicker-D6g3v7Qc.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-model 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 v-model=\"color\" v-model:open=\"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}\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<script setup lang=\"ts\">\nimport { Chrome as VueChrome } from '@ckpack/vue-color'\nimport { mdiArrowLeft, mdiCheck, mdiDotsHorizontal } from '@mdi/js'\nimport { computed, ref } from 'vue'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\nimport NcPopover from '../NcPopover/index.js'\nimport { Color, defaultPalette } from '../../utils/colors.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport logger from '../../utils/logger.ts'\nimport { t } from '../../l10n.ts'\n\nconst HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Set to `true` to enable advanced fields including HEX, RGB, and HSL\n\t */\n\tadvancedFields?: boolean\n\n\t/**\n\t * Selector for the popover container\n\t */\n\tcontainer?: string | Element\n\n\t/**\n\t * Provide a custom array of colors to show.\n\t * Can be either an array of string hexadecimal colors,\n\t * or an array of object with a `color` property with hexadecimal color string,\n\t * and a `name` property for accessibility.\n\t *\n\t * @type {string[] | {color: string, name: string}[]}\n\t */\n\tpalette?: string[] | Color[]\n\n\t/**\n\t * Limit selectable colors to only the provided palette\n\t */\n\tpaletteOnly?: boolean\n}>(), {\n\tcontainer: 'body',\n\tpalette: () => [...defaultPalette],\n})\n\n/**\n * A HEX color that represents the initial value of the picker\n */\nconst currentColor = defineModel<string>({ required: true })\n\n/**\n * The open state of the color picker.\n */\nconst open = defineModel<boolean>('open')\n\nconst emit = defineEmits<{\n\t/**\n\t * Emitted when the submit button was pressed.\n\t * The payload is the same as the current modelValue.\n\t */\n\tsubmit: [string]\n\n\t/**\n\t * The color picker was fully closed and all transitions are finished.\n\t */\n\tclosed: []\n}>()\n\n/**\n * Unique id used to identify different color pickers\n */\nconst id = createElementId()\n\n/**\n * Is the advanced picker is open\n */\nconst advanced = ref(false)\n\n/**\n * Normalized palette by converting array of hex colors to color objects\n */\nconst normalizedPalette = computed(() => {\n\tlet palette = props.palette\n\tfor (const color of palette) {\n\t\tif ((typeof color === 'string' && !color.match(HEX_REGEX))\n\t\t\t|| (typeof color === 'object' && !color.color?.match(HEX_REGEX))) {\n\t\t\tlogger.error('[NcColorPicker] Invalid palette passed', { color })\n\t\t\tpalette = [...defaultPalette]\n\t\t\tbreak\n\t\t}\n\t}\n\n\treturn palette.map((item) => ({\n\t\tcolor: typeof item === 'object' ? item.color : item,\n\t\tname: typeof item === 'object' && item.name\n\t\t\t? item.name\n\t\t\t: t('A color with a HEX value {hex}', { hex: item.color }),\n\t}))\n})\n\nconst contrastColor = computed(() => {\n\tconst black = '#000000'\n\tconst white = '#FFFFFF'\n\treturn calculateLuma(currentColor.value) > 0.5 ? black : white\n})\n\n/**\n * Submit a picked colour and close picker\n * @param hideCallback - callback to close popover\n */\nfunction handleConfirm(hideCallback: () => void) {\n\temit('submit', currentColor.value)\n\thideCallback()\n\tadvanced.value = false\n}\n\n/**\n * Pick a colour\n *\n * @param color - The picked color\n */\nfunction pickColor(color: string | Color | { hex: string }) {\n\tif (typeof color !== 'string') {\n\t\tcolor = 'hex' in color ? color.hex : color.color\n\t}\n\tcurrentColor.value = color\n}\n\n/**\n * Calculate luminance of provided hex color\n *\n * @param color - The hex color\n */\nfunction calculateLuma(color: string) {\n\tconst [red, green, blue] = hexToRGB(color)\n\treturn (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255\n}\n\n/**\n * Convert hex color to RGB\n *\n * @param hex - The hex color\n */\nfunction hexToRGB(hex: string): [number, number, number] {\n\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n\tif (!result) {\n\t\treturn [0, 0, 0]\n\t}\n\n\treturn [parseInt(result[1]!, 16), parseInt(result[2]!, 16), parseInt(result[3]!, 16)]\n}\n</script>\n\n<template>\n\t<NcPopover v-model:shown=\"open\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\n\t\t@apply-hide=\"emit('closed')\">\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\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:style=\"{\n\t\t\t\t\t\t\t\tbackgroundColor: color,\n\t\t\t\t\t\t\t\tcolor: contrastColor,\n\t\t\t\t\t\t\t}\">\n\t\t\t\t\t\t\t<NcIconSvgWrapper v-if=\"color === currentColor\" :path=\"mdiCheck\" />\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-${id}`\"\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<VueChrome 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@update:model-value=\"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=\"t('Back')\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"advanced = false\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiArrowLeft\" />\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=\"t('More options')\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"advanced = true\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDotsHorizontal\" />\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<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\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);\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-element) + 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-element) - 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-inline-start: 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-from {\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-from {\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":["_useModel","_createBlock","_unref","container","_withCtx","_renderSlot","_createElementVNode","_normalizeClass","advancedFields","_createVNode","_Transition","_openBlock","_createElementBlock","_Fragment","_normalizeStyle","VueChrome","paletteOnly"],"mappings":"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"}