@nextcloud/vue 8.34.0 → 8.35.1

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

@@ -1 +0,0 @@
-{"version":3,"file":"NcAvatar-D5nljVEA.mjs","sources":["../../src/mixins/userStatus.js","../../src/components/NcAvatar/NcAvatar.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { getCurrentUser } from '@nextcloud/auth'\nimport axios from '@nextcloud/axios'\nimport { getCapabilities } from '@nextcloud/capabilities'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport { logger } from '../utils/logger.ts'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\thasStatus: false,\n\t\t\tuserStatus: {\n\t\t\t\tstatus: null,\n\t\t\t\tmessage: null,\n\t\t\t\ticon: null,\n\t\t\t},\n\t\t}\n\t},\n\tmethods: {\n\t\t/**\n\t\t * Fetches the user-status from the server\n\t\t *\n\t\t * @param {string} userId UserId of the user to fetch the status for\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t */\n\t\tasync fetchUserStatus(userId) {\n\t\t\tif (!userId) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst capabilities = getCapabilities()\n\t\t\tif (!Object.hasOwn(capabilities, 'user_status') || !capabilities.user_status.enabled) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// User status endpoint is not available for guests.\n\t\t\tif (!getCurrentUser()) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tconst { data } = await axios.get(generateOcsUrl('apps/user_status/api/v1/statuses/{userId}', { userId }))\n\t\t\t\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 (error) {\n\t\t\t\tif (error.response.status === 404 && error.response.data.ocs?.data?.length === 0) {\n\t\t\t\t\t// User just has no status set, so don't log it\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tlogger.error('Could not fetch user status', { error })\n\t\t\t}\n\t\t},\n\t},\n}\n","<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### Basic user avatar\n\n```vue\n\t<NcAvatar user=\"willywonka\" display-name=\"Willy Wonka\" />\n```\n\n### Avatar with image\n\n```vue\n\t<NcAvatar url=\"favicon-touch.png\" />\n```\n\n### Avatar with material design icon\n\n```\n<template>\n\t<NcAvatar>\n\t\t<template #icon>\n\t\t\t<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\n<template>\n\t<span\n\t\tv-click-outside=\"closeMenu\"\n\t\t:title=\"tooltip\"\n\t\t:class=\"{\n\t\t\t'avatardiv--unknown': userDoesNotExist,\n\t\t\t'avatardiv--with-menu': hasMenu,\n\t\t\t'avatardiv--with-menu-loading': contactsMenuLoading,\n\t\t}\"\n\t\t:style=\"avatarStyle\"\n\t\tclass=\"avatardiv popovermenu-wrapper\">\n\t\t<!-- @slot Icon slot -->\n\t\t<slot name=\"icon\">\n\t\t\t<!-- Avatar icon or image -->\n\t\t\t<span v-if=\"iconClass\" :class=\"iconClass\" class=\"avatar-class-icon\" />\n\t\t\t<img\n\t\t\t\tv-else-if=\"isAvatarLoaded && !userDoesNotExist\"\n\t\t\t\t:src=\"avatarUrlLoaded\"\n\t\t\t\t:srcset=\"avatarSrcSetLoaded\"\n\t\t\t\talt=\"\">\n\t\t</slot>\n\n\t\t<!-- Contact menu -->\n\t\t<!-- We show a button if the menu is not loaded yet. -->\n\t\t<NcButton\n\t\t\tv-if=\"hasMenu && menu.length === 0\"\n\t\t\t:aria-label=\"avatarAriaLabel\"\n\t\t\tclass=\"action-item action-item__menutoggle\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click=\"toggleMenu\">\n\t\t\t<template #icon>\n\t\t\t\t<NcLoadingIcon v-if=\"contactsMenuLoading\" />\n\t\t\t\t<IconDotsHorizontal v-else :size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcActions\n\t\t\tv-else-if=\"hasMenu\"\n\t\t\t:aria-label=\"avatarAriaLabel\"\n\t\t\t:container=\"menuContainer\"\n\t\t\tforce-menu\n\t\t\tmanual-open\n\t\t\t:open.sync=\"contactsMenuOpenState\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click=\"toggleMenu\">\n\t\t\t<component\n\t\t\t\t:is=\"item.ncActionComponent\"\n\t\t\t\tv-for=\"(item, key) in menu\"\n\t\t\t\t:key=\"key\"\n\t\t\t\tv-bind=\"item.ncActionComponentProps\"\n\t\t\t\tv-on=\"item.ncActionComponentHandlers\">\n\t\t\t\t<template v-if=\"item.iconSvg\" #icon>\n\t\t\t\t\t<NcIconSvgWrapper :svg=\"item.iconSvg\" />\n\t\t\t\t</template>\n\t\t\t\t{{ item.text }}\n\t\t\t</component>\n\t\t\t<template v-if=\"contactsMenuLoading\" #icon>\n\t\t\t\t<NcLoadingIcon />\n\t\t\t</template>\n\t\t</NcActions>\n\n\t\t<!-- Avatar status -->\n\t\t<span v-if=\"showUserStatusIconOnAvatar\" class=\"avatardiv__user-status avatardiv__user-status--icon\">\n\t\t\t{{ userStatus.icon }}\n\t\t</span>\n\t\t<NcUserStatusIcon\n\t\t\tv-else-if=\"canDisplayUserStatus\"\n\t\t\tclass=\"avatardiv__user-status\"\n\t\t\t:status=\"userStatus.status\"\n\t\t\t:aria-hidden=\"String(hasMenu)\" />\n\n\t\t<!-- Show the letter if no avatar nor icon class -->\n\t\t<span\n\t\t\tv-if=\"showInitials\"\n\t\t\t:style=\"initialsWrapperStyle\"\n\t\t\tclass=\"avatardiv__initials-wrapper\">\n\t\t\t<span :style=\"initialsStyle\" class=\"avatardiv__initials\">\n\t\t\t\t{{ initials }}\n\t\t\t</span>\n\t\t</span>\n\t</span>\n</template>\n\n<script>\nimport { getCurrentUser } from '@nextcloud/auth'\nimport axios from '@nextcloud/axios'\nimport { getBuilder } from '@nextcloud/browser-storage'\nimport { subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { generateUrl } from '@nextcloud/router'\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport IconDotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\nimport { getRoute } from '../../components/NcRichText/autolink.js'\nimport { useIsDarkTheme } from '../../composables/useIsDarkTheme/index.ts'\nimport { getEnabledContactsMenuActions } from '../../functions/contactsMenu/index.ts'\nimport usernameToColor from '../../functions/usernameToColor/index.js'\nimport { t } from '../../l10n.js'\nimport { userStatus } from '../../mixins/index.js'\nimport { getAvatarUrl } from '../../utils/getAvatarUrl.ts'\nimport { logger } from '../../utils/logger.ts'\nimport { getUserStatusText } from '../../utils/UserStatus.ts'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcActionLink from '../NcActionLink/index.js'\nimport NcActionRouter from '../NcActionRouter/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcActionText from '../NcActionText/index.js'\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport NcUserStatusIcon from '../NcUserStatusIcon/index.js'\n\nconst browserStorage = getBuilder('nextcloud').persist().build()\n\n/**\n * @param {string} userId The id of the user\n */\nfunction getUserHasAvatar(userId) {\n\tconst flag = browserStorage.getItem('user-has-avatar.' + userId)\n\tif (typeof flag === 'string') {\n\t\treturn Boolean(flag)\n\t}\n\treturn null\n}\n\n/**\n * @param {string} userId The id of the user\n * @param {boolean} flag Has the user an avatar\n */\nfunction setUserHasAvatar(userId, flag) {\n\tif (userId) {\n\t\tbrowserStorage.setItem('user-has-avatar.' + userId, flag)\n\t}\n}\n\nexport default {\n\tname: 'NcAvatar',\n\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\n\tcomponents: {\n\t\tIconDotsHorizontal,\n\t\tNcActions,\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t\tNcLoadingIcon,\n\t\tNcUserStatusIcon,\n\t},\n\n\tmixins: [userStatus],\n\tprops: {\n\t\t/**\n\t\t * Set a custom url to the avatar image\n\t\t * either the url, user or displayName property must be defined\n\t\t */\n\t\turl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Set a css icon-class for an icon to be used instead of the avatar.\n\t\t */\n\t\ticonClass: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Set the user id to fetch the avatar\n\t\t * either the url, user or displayName property must be defined\n\t\t */\n\t\tuser: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Do not show the user status on the avatar.\n\t\t */\n\t\thideStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Whether or not to display the user-status.\n\t\t *\n\t\t * @deprecated - Use `hideStatus` instead. Will be removed with v9.\n\t\t */\n\t\tshowUserStatus: {\n\t\t\ttype: Boolean,\n\t\t\t// eslint-disable-next-line vue/no-boolean-default\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Show the verbose user status (e.g. \"online\" / \"away\") instead of just the status icon.\n\t\t */\n\t\tverboseStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Whether or not to the status-icon should be used instead of online/away\n\t\t *\n\t\t * @deprecated - Use `verboseStatus` instead. Will be removed with v9.\n\t\t */\n\t\tshowUserStatusCompact: {\n\t\t\ttype: Boolean,\n\t\t\t// eslint-disable-next-line vue/no-boolean-default\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * When the user status was preloaded via another source it can be handed in with this property to save the request.\n\t\t * If this property is not set the status will be fetched automatically.\n\t\t * If a preloaded no-status is available provide this object with properties \"status\", \"icon\" and \"message\" set to null.\n\t\t */\n\t\tpreloadedUserStatus: {\n\t\t\ttype: Object,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Is the user a guest user (then we have to user a different endpoint)\n\t\t */\n\t\tisGuest: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Set a display name that will be rendered as a tooltip\n\t\t * either the url, user or displayName property must be defined\n\t\t * specify just the displayname to generate a placeholder avatar without\n\t\t * trying to fetch the avatar based on the user id\n\t\t */\n\t\tdisplayName: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Set a size in px for the rendered avatar\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 32,\n\t\t},\n\n\t\t/**\n\t\t * Do not automatically generate a placeholder avatars if there is no real avatar is available.\n\t\t */\n\t\tnoPlaceholder: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Placeholder avatars will be automatically generated when this is set to true.\n\t\t *\n\t\t * @deprecated - Use `noPlaceholder` instead. Will be removed in v9.\n\t\t */\n\t\tallowPlaceholder: {\n\t\t\ttype: Boolean,\n\t\t\t// eslint-disable-next-line vue/no-boolean-default\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Disable the tooltip\n\t\t */\n\t\tdisableTooltip: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Disable the menu\n\t\t */\n\t\tdisableMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Declares a custom tooltip when not null\n\t\t * Fallback will be the displayName\n\t\t *\n\t\t * requires disableTooltip not to be set to true\n\t\t */\n\t\ttooltipMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Declares username is not a user's name, when true.\n\t\t * Prevents loading user's avatar from server and forces generating colored initials,\n\t\t * i.e. if the user is a group\n\t\t */\n\t\tisNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover menu container\n\t\t */\n\t\tmenuContainer: {\n\t\t\ttype: [Boolean, String, Object, Element],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\n\tsetup() {\n\t\tconst isDarkTheme = useIsDarkTheme()\n\n\t\treturn {\n\t\t\tisDarkTheme,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tavatarUrlLoaded: null,\n\t\t\tavatarSrcSetLoaded: null,\n\t\t\tuserDoesNotExist: false,\n\t\t\tisAvatarLoaded: false,\n\t\t\tisMenuLoaded: false,\n\t\t\tcontactsMenuLoading: false,\n\t\t\tcontactsMenuData: {},\n\t\t\tcontactsMenuActions: [],\n\t\t\tcontactsMenuOpenState: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tavatarAriaLabel() {\n\t\t\t// aria-label is only allowed on interactive elements\n\t\t\tif (!this.hasMenu) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.canDisplayUserStatus || this.showUserStatusIconOnAvatar) {\n\t\t\t\treturn t('Avatar of {displayName}, {status}', { displayName: this.displayName ?? this.user, status: getUserStatusText(this.userStatus.status) })\n\t\t\t}\n\t\t\treturn t('Avatar of {displayName}', { displayName: this.displayName ?? this.user })\n\t\t},\n\n\t\tcanDisplayUserStatus() {\n\t\t\treturn !this.hideStatus\n\t\t\t\t&& this.showUserStatus\n\t\t\t\t&& this.hasStatus\n\t\t\t\t&& ['online', 'away', 'busy', 'dnd'].includes(this.userStatus.status)\n\t\t},\n\n\t\tshowUserStatusIconOnAvatar() {\n\t\t\treturn !this.hideStatus\n\t\t\t\t&& this.showUserStatus\n\t\t\t\t&& !this.verboseStatus\n\t\t\t\t&& this.showUserStatusCompact\n\t\t\t\t&& this.hasStatus\n\t\t\t\t&& this.userStatus.status !== 'dnd'\n\t\t\t\t&& this.userStatus.icon\n\t\t},\n\n\t\t/**\n\t\t * The user identifier, either the display name if set or the user property\n\t\t * If both properties are not set an empty string is returned\n\t\t */\n\t\tuserIdentifier() {\n\t\t\tif (this.isDisplayNameDefined) {\n\t\t\t\treturn this.displayName\n\t\t\t}\n\t\t\tif (this.isUserDefined) {\n\t\t\t\treturn this.user\n\t\t\t}\n\t\t\treturn ''\n\t\t},\n\n\t\tisUserDefined() {\n\t\t\treturn typeof this.user !== 'undefined'\n\t\t},\n\n\t\tisDisplayNameDefined() {\n\t\t\treturn typeof this.displayName !== 'undefined'\n\t\t},\n\n\t\tisUrlDefined() {\n\t\t\treturn typeof this.url !== 'undefined'\n\t\t},\n\n\t\thasMenu() {\n\t\t\tif (this.disableMenu) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tif (this.isMenuLoaded) {\n\t\t\t\treturn this.menu.length > 0\n\t\t\t}\n\t\t\treturn !(this.user === getCurrentUser()?.uid || this.userDoesNotExist || this.url)\n\t\t},\n\n\t\t/**\n\t\t * True if initials should be shown as the user icon fallback\n\t\t */\n\t\tshowInitials() {\n\t\t\treturn !this.noPlaceholder && this.allowPlaceholder && this.userDoesNotExist && !(this.iconClass || this.$slots.icon)\n\t\t},\n\n\t\tavatarStyle() {\n\t\t\treturn {\n\t\t\t\t'--avatar-size': this.size + 'px',\n\t\t\t\tlineHeight: this.showInitials ? (this.size + 'px') : 0,\n\t\t\t\tfontSize: Math.round(this.size * 0.45) + 'px',\n\t\t\t}\n\t\t},\n\n\t\tinitialsWrapperStyle() {\n\t\t\tconst { r, g, b } = usernameToColor(this.userIdentifier)\n\t\t\treturn {\n\t\t\t\tbackgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)`,\n\t\t\t}\n\t\t},\n\n\t\tinitialsStyle() {\n\t\t\tconst { r, g, b } = usernameToColor(this.userIdentifier)\n\t\t\treturn {\n\t\t\t\tcolor: `rgb(${r}, ${g}, ${b})`,\n\t\t\t}\n\t\t},\n\n\t\ttooltip() {\n\t\t\tif (this.disableTooltip) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tif (this.tooltipMessage) {\n\t\t\t\treturn this.tooltipMessage\n\t\t\t}\n\n\t\t\treturn this.displayName\n\t\t},\n\n\t\t/**\n\t\t * Get the (max. two) initials of the user as uppcase string\n\t\t */\n\t\tinitials() {\n\t\t\tlet initials = '?'\n\t\t\tif (this.showInitials) {\n\t\t\t\tconst user = this.userIdentifier.trim()\n\t\t\t\tif (user === '') {\n\t\t\t\t\treturn initials\n\t\t\t\t}\n\n\t\t\t\t/**\n\t\t\t\t * Filtered user name, without special characters so only letters and numbers are allowed (prevent e.g. '(' as an initial)\n\t\t\t\t * \\p{L}: Letters of all languages\n\t\t\t\t * \\p{N}: Numbers of all languages\n\t\t\t\t * \\s: White space for breaking the string\n\t\t\t\t *\n\t\t\t\t * @type {string}\n\t\t\t\t */\n\t\t\t\tconst filteredChars = user.match(/[\\p{L}\\p{N}\\s]/gu)\n\t\t\t\tif (!filteredChars) {\n\t\t\t\t\treturn initials\n\t\t\t\t}\n\n\t\t\t\tconst filtered = filteredChars.join('')\n\t\t\t\tconst idx = filtered.lastIndexOf(' ')\n\t\t\t\tinitials = String.fromCodePoint(filtered.codePointAt(0))\n\t\t\t\tif (idx !== -1) {\n\t\t\t\t\tinitials = initials.concat(String.fromCodePoint(filtered.codePointAt(idx + 1)))\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn initials.toLocaleUpperCase()\n\t\t},\n\n\t\tmenu() {\n\t\t\tconst actions = this.contactsMenuActions.map((item) => {\n\t\t\t\tconst route = getRoute(this.$router, item.hyperlink)\n\t\t\t\treturn {\n\t\t\t\t\tncActionComponent: route ? NcActionRouter : NcActionLink,\n\t\t\t\t\tncActionComponentProps: route\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tto: route,\n\t\t\t\t\t\t\t\ticon: item.icon,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\thref: item.hyperlink,\n\t\t\t\t\t\t\t\ticon: item.icon,\n\t\t\t\t\t\t\t},\n\t\t\t\t\ttext: item.title,\n\t\t\t\t}\n\t\t\t})\n\n\t\t\tfor (const action of getEnabledContactsMenuActions(this.contactsMenuData)) {\n\t\t\t\ttry {\n\t\t\t\t\tactions.push({\n\t\t\t\t\t\tncActionComponent: NcActionButton,\n\t\t\t\t\t\tncActionComponentProps: {},\n\t\t\t\t\t\tncActionComponentHandlers: {\n\t\t\t\t\t\t\tclick: () => action.callback(this.contactsMenuData),\n\t\t\t\t\t\t},\n\t\t\t\t\t\ttext: action.displayName(this.contactsMenuData),\n\t\t\t\t\t\ticonSvg: action.iconSvg(this.contactsMenuData),\n\t\t\t\t\t})\n\t\t\t\t} catch (error) {\n\t\t\t\t\tlogger.error(`Failed to render ContactsMenu action ${action.id}`, {\n\t\t\t\t\t\terror,\n\t\t\t\t\t\taction,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * @param {string} html The HTML to escape\n\t\t\t */\n\t\t\tfunction escape(html) {\n\t\t\t\tconst text = document.createTextNode(html)\n\t\t\t\tconst p = document.createElement('p')\n\t\t\t\tp.appendChild(text)\n\t\t\t\treturn p.innerHTML\n\t\t\t}\n\n\t\t\tif (!this.hideStatus && this.showUserStatus && (this.userStatus.icon || this.userStatus.message)) {\n\t\t\t\t// NcAction's URL icons are inverted in dark mode, so we need to pass SVG image in the icon slot\n\t\t\t\tconst emojiIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n\t\t\t\t\t<text x=\"50%\" y=\"50%\" text-anchor=\"middle\" style=\"dominant-baseline: central; font-size: 85%\">${escape(this.userStatus.icon)}</text>\n\t\t\t\t</svg>`\n\t\t\t\treturn [{\n\t\t\t\t\tncActionComponent: NcActionText,\n\t\t\t\t\tncActionComponentProps: {},\n\t\t\t\t\ticonSvg: this.userStatus.icon ? emojiIcon : undefined,\n\t\t\t\t\ttext: `${this.userStatus.message}`,\n\t\t\t\t}].concat(actions)\n\t\t\t}\n\n\t\t\treturn actions\n\t\t},\n\t},\n\n\twatch: {\n\t\turl() {\n\t\t\tthis.userDoesNotExist = false\n\t\t\tthis.loadAvatarUrl()\n\t\t},\n\n\t\tuser() {\n\t\t\tthis.userDoesNotExist = false\n\t\t\tthis.isMenuLoaded = false\n\t\t\tthis.loadAvatarUrl()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.loadAvatarUrl()\n\t\tsubscribe('settings:avatar:updated', this.loadAvatarUrl)\n\t\tsubscribe('settings:display-name:updated', this.loadAvatarUrl)\n\t\tif (!this.hideStatus && this.showUserStatus && this.user && !this.isNoUser) {\n\t\t\tif (!this.preloadedUserStatus) {\n\t\t\t\tthis.fetchUserStatus(this.user)\n\t\t\t} else {\n\t\t\t\tthis.userStatus.status = this.preloadedUserStatus.status || ''\n\t\t\t\tthis.userStatus.message = this.preloadedUserStatus.message || ''\n\t\t\t\tthis.userStatus.icon = this.preloadedUserStatus.icon || ''\n\t\t\t\tthis.hasStatus = this.preloadedUserStatus.status !== null\n\t\t\t}\n\t\t\tsubscribe('user_status:status.updated', this.handleUserStatusUpdated)\n\t\t}\n\t},\n\n\tbeforeDestroy() {\n\t\tunsubscribe('settings:avatar:updated', this.loadAvatarUrl)\n\t\tunsubscribe('settings:display-name:updated', this.loadAvatarUrl)\n\t\tunsubscribe('user_status:status.updated', this.handleUserStatusUpdated)\n\t},\n\n\tmethods: {\n\t\tt,\n\t\thandleUserStatusUpdated(state) {\n\t\t\tif (this.user === state.userId) {\n\t\t\t\tthis.userStatus = {\n\t\t\t\t\tstatus: state.status,\n\t\t\t\t\ticon: state.icon,\n\t\t\t\t\tmessage: state.message,\n\t\t\t\t}\n\t\t\t\tthis.hasStatus = state.status !== null\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Toggle the popover menu on click or enter\n\t\t *\n\t\t * @param {KeyboardEvent|MouseEvent} event the UI event\n\t\t */\n\t\tasync toggleMenu(event) {\n\t\t\tif (event.type === 'keydown' && event.key !== 'Enter') {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (!this.contactsMenuOpenState) {\n\t\t\t\tawait this.fetchContactsMenu()\n\t\t\t}\n\t\t\tthis.contactsMenuOpenState = !this.contactsMenuOpenState\n\t\t},\n\n\t\tcloseMenu() {\n\t\t\tthis.contactsMenuOpenState = false\n\t\t},\n\n\t\tasync fetchContactsMenu() {\n\t\t\tthis.contactsMenuLoading = true\n\t\t\ttry {\n\t\t\t\tconst user = encodeURIComponent(this.user)\n\t\t\t\tconst { data } = await axios.post(generateUrl('contactsmenu/findOne'), `shareType=0&shareWith=${user}`)\n\t\t\t\tthis.contactsMenuData = data\n\t\t\t\tthis.contactsMenuActions = data.topAction ? [data.topAction].concat(data.actions) : data.actions\n\t\t\t} catch {\n\t\t\t\tthis.contactsMenuOpenState = false\n\t\t\t}\n\t\t\tthis.contactsMenuLoading = false\n\t\t\tthis.isMenuLoaded = true\n\t\t},\n\n\t\t/**\n\t\t * Handle avatar loading if user or url defined\n\t\t */\n\t\tloadAvatarUrl() {\n\t\t\tthis.isAvatarLoaded = false\n\n\t\t\t/** Only run avatar image loading if either user or url property is defined */\n\t\t\tif (!this.isUrlDefined && (!this.isUserDefined || this.isNoUser || this.iconClass)) {\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\tif (user === getCurrentUser()?.uid && typeof window.oc_userconfig !== 'undefined') {\n\t\t\t\tavatarUrl += '?v=' + window.oc_userconfig.avatar.version\n\t\t\t}\n\n\t\t\treturn avatarUrl\n\t\t},\n\n\t\t/**\n\t\t * Check if the provided url is valid and update Avatar if so\n\t\t *\n\t\t * @param {string} url the avatar url\n\t\t * @param {Array} srcset the avatar srcset\n\t\t */\n\t\tupdateImageIfValid(url, srcset = null) {\n\t\t\t// skip loading\n\t\t\tconst userHasAvatar = getUserHasAvatar(this.user)\n\t\t\tif (this.isUserDefined && typeof userHasAvatar === 'boolean') {\n\t\t\t\tthis.isAvatarLoaded = true\n\t\t\t\tthis.avatarUrlLoaded = url\n\t\t\t\tif (srcset) {\n\t\t\t\t\tthis.avatarSrcSetLoaded = srcset\n\t\t\t\t}\n\t\t\t\tif (userHasAvatar === false) {\n\t\t\t\t\tthis.userDoesNotExist = true\n\t\t\t\t}\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst img = new Image()\n\t\t\timg.onload = () => {\n\t\t\t\tthis.avatarUrlLoaded = url\n\t\t\t\tif (srcset) {\n\t\t\t\t\tthis.avatarSrcSetLoaded = srcset\n\t\t\t\t}\n\t\t\t\tthis.isAvatarLoaded = true\n\t\t\t\t// re-get to avoid concurrent access\n\t\t\t\tsetUserHasAvatar(this.user, true)\n\t\t\t}\n\t\t\timg.onerror = (error) => {\n\t\t\t\tlogger.debug('Invalid avatar url', { error, url })\n\t\t\t\t// Avatar is invalid, reset\n\t\t\t\tthis.avatarUrlLoaded = null\n\t\t\t\tthis.avatarSrcSetLoaded = null\n\n\t\t\t\tthis.userDoesNotExist = true\n\t\t\t\tthis.isAvatarLoaded = false\n\t\t\t\tsetUserHasAvatar(this.user, false)\n\t\t\t}\n\n\t\t\tif (srcset) {\n\t\t\t\timg.srcset = srcset\n\t\t\t}\n\t\t\timg.src = url\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.avatardiv {\n\tposition: relative;\n\tdisplay: inline-block;\n\twidth: var(--avatar-size);\n\theight: var(--avatar-size);\n\n\t&--unknown {\n\t\tposition: relative;\n\t\tbackground-color: var(--color-main-background);\n\t\twhite-space: normal;\n\t}\n\n\t&:not(&--unknown) {\n\t\t// White/black background for avatars with transparency\n\t\tbackground-color: var(--color-main-background) !important;\n\t\tbox-shadow: 0 0 5px rgba(0, 0, 0, 0.05) inset;\n\t}\n\n\t&--with-menu {\n\t\tcursor: pointer;\n\t\t.action-item {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t}\n\t\t:deep(.action-item__menutoggle) {\n\t\t\tcursor: pointer;\n\t\t\topacity: 0;\n\t\t}\n\t\t&:focus-within,\n\t\t&:hover,\n\t\t&#{&}-loading {\n\t\t\t:deep(.action-item__menutoggle) {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t\timg {\n\t\t\t\topacity: 0.3;\n\t\t\t}\n\t\t}\n\t\t:deep(.action-item__menutoggle),\n\t\timg {\n\t\t\ttransition: opacity var(--animation-quick);\n\t\t}\n\t\t:deep() {\n\t\t\t.button-vue,\n\t\t\t.button-vue__icon {\n\t\t\t\theight: var(--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\tleft: 0;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t\ttext-align: center;\n\t\t\tfont-weight: normal;\n\t\t}\n\t}\n\n\timg {\n\t\t// Cover entire area\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\t// Keep ratio\n\t\tobject-fit: cover;\n\t}\n\n\t.material-design-icon {\n\t\twidth: var(--avatar-size);\n\t\theight: var(--avatar-size);\n\t}\n\n\t.avatardiv__user-status {\n\t\t// Size of the status icon to make it:\n\t\t// - 💫 Orbital: the status icon's center is positioned on the avatar circle\n\t\t// - ⏹️ Best-fit: the status icon is as large as possible without exceeding the avatar box\n\t\t// See PR for math explanation: PR #6004\n\t\t--avatar-status-size-orbital: calc(var(--avatar-size) * (1 - 1 / sqrt(2)));\n\t\t// Limit the status icon size to minimum font size to keep it readable\n\t\t// Ideally avatars with a smaller should not be used with the status icon at all\n\t\t--avatar-status-size-min: var(--font-size-small);\n\t\t--avatar-status-size: max(var(--avatar-status-size-orbital), var(--avatar-status-size-min));\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tinset-inline-end: 0;\n\t\tinset-block-end: 0;\n\t\theight: var(--avatar-status-size);\n\t\twidth: var(--avatar-status-size);\n\t\tline-height: 1;\n\t\tfont-size: calc(var(--avatar-status-size) / 1.2);\n\t\tbackground-color: var(--color-main-background);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: var(--avatar-status-size);\n\t\tbackground-position: center;\n\t\tborder-radius: 50%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t.acli:hover & {\n\t\t\tborder-color: var(--color-background-hover);\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\t\t.acli.active & {\n\t\t\tborder-color: var(--color-primary-element-light);\n\t\t\tbackground-color: var(--color-primary-element-light);\n\t\t}\n\n\t\t&--icon {\n\t\t\tborder: none;\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t.popovermenu-wrapper {\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t}\n}\n\n.avatar-class-icon {\n\tdisplay: block;\n\tborder-radius: calc(var(--avatar-size) / 2);\n\tbackground-color: var(--color-background-darker);\n\theight: 100%;\n}\n\n</style>\n"],"names":["ClickOutside","IconDotsHorizontal"],"mappings":"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"}

package/dist/chunks/NcButton-CJBZrdiL.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcButton-CJBZrdiL.cjs","sources":["../../src/components/NcButton/NcButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\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<!-- Style selector -->\n\t<div class=\"grid\">\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"style\" value=\"text\" name=\"style\" type=\"radio\">Text only</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"style\" value=\"icon\" name=\"style\" type=\"radio\">Icon only</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"style\" value=\"icontext\" name=\"style\" type=\"radio\">Icon and text</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"disabled\" type=\"checkbox\">Disabled</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"size\" value=\"small\" name=\"size\" type=\"radio\">Small</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"size\" value=\"normal\" name=\"size\" type=\"radio\">Normal (default)</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"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=\"disabled\"\n\t\t\t:size=\"size\"\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\t<template v-if=\"style.indexOf('text') !== -1\">Example text</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:size=\"size\"\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\t<template v-if=\"style.indexOf('text') !== -1\">Example text</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:size=\"size\">\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\t<template v-if=\"style.indexOf('text') !== -1\">Example text</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:size=\"size\"\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\t<template v-if=\"style.indexOf('text') !== -1\">Example text</template>\n\t\t</NcButton>\n\t</div>\n\n\t<!-- Wide button -->\n\t<h5>Wide button</h5>\n\t<NcButton\n\t\t:disabled=\"disabled\"\n\t\t:size=\"size\"\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\tExample text\n\t</NcButton>\n\n\t<!-- Special buttons -->\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=\"disabled\"\n\t\t\t:size=\"size\"\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\tExample text\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\t:disabled=\"disabled\"\n\t\t\t:size=\"size\"\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\tExample text\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\t:disabled=\"disabled\"\n\t\t\t:size=\"size\"\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\tExample text\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}\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 aria-label=\"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\tcenter (default)\n\t\t</NcButton>\n\t\t<NcButton alignment=\"center-reverse\" aria-label=\"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\tcenter-reverse\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\" aria-label=\"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\tstart\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton alignment=\"start-reverse\" aria-label=\"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\tstart-reverse\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\" aria-label=\"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\tend\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton alignment=\"end-reverse\" aria-label=\"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\tend-reverse\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 :pressed.sync=\"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\n\t\t\t<NcButton :pressed.sync=\"isFavorite\" 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\tFavorite\n\t\t\t</NcButton>\n\n\t\t\t<NcButton :pressed.sync=\"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: 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\n</docs>\n\n<script>\nimport { isLegacy32 } from '../../utils/legacy.ts'\nimport { logger } from '../../utils/logger.ts'\n\nexport default {\n\tname: 'NcButton',\n\n\tinject: {\n\t\tgetNcPopoverTriggerAttrs: {\n\t\t\tfrom: 'NcPopover:trigger:attrs',\n\t\t\tdefault: () => () => ({}),\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Set the text and icon alignment\n\t\t *\n\t\t * @default 'center'\n\t\t */\n\t\talignment: {\n\t\t\ttype: String,\n\t\t\tdefault: 'center',\n\t\t\tvalidator: (alignment) => ['start', 'start-reverse', 'center', 'center-reverse', 'end', 'end-reverse'].includes(alignment),\n\t\t},\n\n\t\t/**\n\t\t * Toggles the disabled state of the button on and off.\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 * Specify the button size\n\t\t * Accepted values: `'small'`, `'normal'` (default), `'large'`\n\t\t */\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\tdefault: 'normal',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['small', 'normal', 'large'].includes(value)\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Specifies the HTML button type.\n\t\t * Accepted values: submit, reset, button.\n\t\t *\n\t\t * For legacy reasons this can also be used to set the variant of the button (color schema).\n\t\t * This is discouraged but the accepted values are:\n\t\t * primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success.\n\t\t *\n\t\t * @default 'secondary' (will change with v9)\n\t\t * @deprecated The behavior will change in v9 to only allow the native HTML button types - use `variant` instead for setting the appearance of the button.\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].includes(value)\n\t\t\t\t\t|| ['submit', 'reset', 'button'].includes(value)\n\t\t\t},\n\n\t\t\tdefault: 'secondary',\n\t\t},\n\n\t\t/**\n\t\t * Specifies the button native type\n\t\t * Accepted values: submit, reset, button. If left empty,\n\t\t * the default \"button\" type will be used.\n\t\t *\n\t\t * @deprecated use `type` instead - will be removed with v9\n\t\t */\n\t\tnativeType: {\n\t\t\ttype: String,\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['submit', 'reset', 'button'].indexOf(value) !== -1\n\t\t\t},\n\n\t\t\tdefault: 'button',\n\t\t},\n\n\t\t/**\n\t\t * Specifies whether the button should span all the available width.\n\t\t * By default, buttons span the whole width of the container.\n\t\t */\n\t\twide: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Always try to provide an aria-label to your button. Make it more\n\t\t * specific than the button's name by provide some more context. E.g. if\n\t\t * the name of the button is \"send\" in the Mail app, the aria label could\n\t\t * be \"Send email\".\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Providing the href attribute turns the button component into an `a`\n\t\t * element.\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Target for the `a` element if `href` is set.\n\t\t */\n\t\ttarget: {\n\t\t\ttype: String,\n\t\t\tdefault: '_self',\n\t\t},\n\n\t\t/**\n\t\t * Providing the download attribute with href downloads file when clicking.\n\t\t */\n\t\tdownload: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Providing the to attribute turns the button component into a `router-link`\n\t\t * element. Takes precedence over the href attribute.\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Pass in `true` if you want the matching behaviour of `router-link` to\n\t\t * be non-inclusive: https://router.vuejs.org/api/#exact\n\t\t */\n\t\texact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.\n\t\t * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,\n\t\t * otherwise root element will inherit incorrect aria-hidden.\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\t// eslint-disable-next-line vue/no-boolean-default\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The pressed state of the button if it has a checked state\n\t\t * This will add the `aria-pressed` attribute and for the button to have the primary style in checked state.\n\t\t *\n\t\t * Pressed state is not supported for links\n\t\t */\n\t\tpressed: {\n\t\t\ttype: Boolean,\n\t\t\t// eslint-disable-next-line vue/no-boolean-default\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Specifies the button variant.\n\t\t *\n\t\t * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success.\n\t\t *\n\t\t * @default 'secondary'\n\t\t * @since 8.24.0\n\t\t */\n\t\tvariant: {\n\t\t\ttype: String,\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].includes(value)\n\t\t\t},\n\n\t\t\tdefault: 'secondary',\n\t\t},\n\t},\n\n\temits: ['update:pressed', 'click'],\n\n\tcomputed: {\n\t\t/**\n\t\t * The real type to be used for the button, enforces `primary` for pressed state and, if stateful button, any other type for not pressed state\n\t\t * Otherwise the type property is used.\n\t\t *\n\t\t * @return {string}\n\t\t */\n\t\trealVariant() {\n\t\t\t// Force *primary* when pressed\n\t\t\tif (this.pressed) {\n\t\t\t\treturn 'primary'\n\t\t\t}\n\t\t\t// If not pressed but button is configured as stateful button then the type must not be primary\n\t\t\tif (this.pressed === false && (this.type === 'primary' || this.variant === 'primary')) {\n\t\t\t\treturn 'secondary'\n\t\t\t}\n\t\t\t// handle legacy behavior\n\t\t\tif (this.type !== 'secondary' && ['primary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].includes(this.type)) {\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\t// otherwise use the configured variant\n\t\t\treturn this.variant\n\t\t},\n\n\t\t/**\n\t\t * The HTML button type\n\t\t *\n\t\t * @return {string}\n\t\t */\n\t\trealType() {\n\t\t\tif (typeof this.pressed === 'boolean') {\n\t\t\t\treturn 'button'\n\t\t\t}\n\t\t\t// Handle legacy behavior\n\t\t\tif (this.nativeType !== 'button') {\n\t\t\t\treturn this.nativeType\n\t\t\t}\n\t\t\t// Also handling legacy behavior: Ensure we do not conflict here\n\t\t\tif (['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].includes(this.type)) {\n\t\t\t\treturn this.nativeType\n\t\t\t}\n\t\t\t// otherwise use the type\n\t\t\treturn this.type\n\t\t},\n\n\t\t/**\n\t\t * The variant is one of the tertiary- ones\n\t\t */\n\t\tisTertiary() {\n\t\t\treturn this.realVariant.startsWith('tertiary')\n\t\t},\n\n\t\t/**\n\t\t * The flexbox alignment of the button content\n\t\t */\n\t\tflexAlignment() {\n\t\t\treturn this.alignment.split('-')[0]\n\t\t},\n\n\t\t/**\n\t\t * If the button content should be reversed (icon on the end)\n\t\t */\n\t\tisReverseAligned() {\n\t\t\treturn this.alignment.includes('-')\n\t\t},\n\n\t\tncPopoverTriggerAttrs() {\n\t\t\treturn this.getNcPopoverTriggerAttrs()\n\t\t},\n\t},\n\n\t/**\n\t * The render function to display the component\n\t *\n\t * @param {Function} h The function to create VNodes\n\t * @return {object|undefined} The created VNode\n\t */\n\trender(h) {\n\t\tconst hasText = !!this.$slots.default\n\t\tconst hasIcon = this.$slots?.icon\n\n\t\t/**\n\t\t * Always fill either the text prop or the ariaLabel one.\n\t\t */\n\t\tif (!hasText && !this.ariaLabel) {\n\t\t\tlogger.warn('You need to fill either the text or the ariaLabel props in the button component.', {\n\t\t\t\ttext: this.$slots.default?.[0]?.text,\n\t\t\t\tariaLabel: this.ariaLabel,\n\t\t\t\tinstance: this,\n\t\t\t})\n\t\t}\n\n\t\tconst isLink = (this.to || this.href)\n\n\t\tconst hasPressed = !isLink && typeof this.pressed === 'boolean'\n\n\t\tconst renderButton = ({ href, navigate, isActive, isExactActive } = {}) => h(\n\t\t\tisLink ? 'a' : 'button',\n\t\t\t{\n\t\t\t\tclass: [\n\t\t\t\t\t'button-vue',\n\t\t\t\t\t`button-vue--size-${this.size}`,\n\t\t\t\t\t{\n\t\t\t\t\t\t'button-vue--icon-only': hasIcon && !hasText,\n\t\t\t\t\t\t'button-vue--text-only': hasText && !hasIcon,\n\t\t\t\t\t\t'button-vue--icon-and-text': hasIcon && hasText,\n\t\t\t\t\t\t[`button-vue--vue-${this.realVariant}`]: this.realVariant,\n\t\t\t\t\t\t'button-vue--legacy': isLegacy32,\n\t\t\t\t\t\t'button-vue--tertiary': this.isTertiary,\n\t\t\t\t\t\t'button-vue--wide': this.wide,\n\t\t\t\t\t\t[`button-vue--${this.flexAlignment}`]: this.flexAlignment !== 'center',\n\t\t\t\t\t\t'button-vue--reverse': this.isReverseAligned,\n\t\t\t\t\t\tactive: isActive,\n\t\t\t\t\t\t'router-link-exact-active': isExactActive,\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\tattrs: {\n\t\t\t\t\t'aria-label': this.ariaLabel,\n\t\t\t\t\t'aria-pressed': hasPressed ? this.pressed.toString() : undefined,\n\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\ttype: isLink ? null : this.realType,\n\t\t\t\t\trole: isLink ? 'button' : null,\n\t\t\t\t\thref: this.to ? href : (this.href || null),\n\t\t\t\t\ttarget: isLink ? (this.target || '_self') : null,\n\t\t\t\t\trel: isLink ? 'nofollow noreferrer noopener' : null,\n\t\t\t\t\tdownload: (!this.to && this.href && this.download) ? this.download : null,\n\t\t\t\t\t// If this button is used as a popover trigger, we need to apply trigger attrs, e.g. aria attributes\n\t\t\t\t\t...this.ncPopoverTriggerAttrs,\n\t\t\t\t\t// Inherit all the component attrs\n\t\t\t\t\t...this.$attrs,\n\t\t\t\t},\n\t\t\t\ton: {\n\t\t\t\t\t...this.$listeners,\n\t\t\t\t\tclick: ($event) => {\n\t\t\t\t\t\tif (hasPressed) {\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Update the current pressed state of the button (if the `pressed` property was configured)\n\t\t\t\t\t\t\t *\n\t\t\t\t\t\t\t * @property {boolean} newValue The new `pressed`-state\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tthis.$emit('update:pressed', !this.pressed)\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// We have to both navigate and emit the click event\n\t\t\t\t\t\tthis.$emit('click', $event)\n\t\t\t\t\t\tnavigate?.($event)\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t\t[\n\t\t\t\th('span', { class: 'button-vue__wrapper' }, [\n\t\t\t\t\thasIcon\n\t\t\t\t\t\t? h('span', {\n\t\t\t\t\t\t\t\tclass: 'button-vue__icon',\n\t\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\t\t'aria-hidden': 'true',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}, [this.$slots.icon])\n\t\t\t\t\t\t: null,\n\t\t\t\t\thasText ? h('span', { class: 'button-vue__text' }, [this.$slots.default]) : null,\n\t\t\t\t]),\n\t\t\t],\n\t\t)\n\n\t\t// If we have a router-link, we wrap the button in it\n\t\tif (this.to) {\n\t\t\treturn h('router-link', {\n\t\t\t\tprops: {\n\t\t\t\t\tcustom: true,\n\t\t\t\t\tto: this.to,\n\t\t\t\t\texact: this.exact,\n\t\t\t\t},\n\t\t\t\tscopedSlots: {\n\t\t\t\t\tdefault: renderButton,\n\t\t\t\t},\n\t\t\t})\n\t\t}\n\t\t// Otherwise we simply return the button\n\t\treturn renderButton()\n\t},\n}\n\n</script>\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, calc(var(--button-size) / 2));\n\t--button-padding-default: clamp(var(--default-grid-baseline), var(--button-radius), calc(var(--default-grid-baseline) * 4));\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&--size-small {\n\t\t--button-size: var(--clickable-area-small, 24px);\n\t\t--button-radius: var(--border-radius); // 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, 48px);\n\t}\n\n\t// Cursor pointer on element and all children\n\t&,\n\t& :deep(*) {\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 {\n\t\tcursor: default;\n\t\topacity: $opacity_disabled;\n\t\t// Gives a wash out effect\n\t\tfilter: saturate($opacity_normal);\n\n\t\t& :deep(*) {\n\t\t\tcursor: default;\n\t\t}\n\t}\n\n\t// Default button type\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\t&--start &__wrapper {\n\t\tjustify-content: start;\n\t}\n\t&--reverse &__wrapper {\n\t\tflex-direction: row-reverse;\n\t}\n\n\t&--reverse#{&}--icon-and-text {\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); // ensure icons align with current 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\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\t}\n\n\t// Icon-only button\n\t&--icon-only {\n\t\t--button-padding: clamp(var(--default-grid-baseline), var(--button-radius), calc(var(--default-grid-baseline) * 4));\n\t\tline-height: 1;\n\t\twidth: var(--button-size) !important;\n\t}\n\n\t// Text-only button\n\t&--text-only {\n\t\t--button-padding: var(--button-padding-default);\n\n\t\t& .button-vue__text {\n\t\t\tmargin-inline: 4px;\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, var(--border-radius));\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t// Button types\n\n\t// Primary\n\t&--vue-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&--vue-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&--vue-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&--vue-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&--vue-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&--vue-success {\n\t\tbackground-color: var(--color-success);\n\t\tborder-color: var(--color-success-hover);\n\t\tcolor: var(--color-success-text);\n\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&--vue-warning {\n\t\tbackground-color: var(--color-warning);\n\t\tborder-color: var(--color-warning-hover);\n\t\tcolor: var(--color-warning-text);\n\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&--vue-error {\n\t\tbackground-color: var(--color-error);\n\t\tborder-color: var(--color-error-hover);\n\t\tcolor: var(--color-error-text);\n\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\t// before Nextcloud 32\n\t&--legacy {\n\t\t--button-inner-size: var(--button-size);\n\t\tborder: none;\n\t\tpadding-block: 0;\n\n\t\t&.button-vue--vue-error,\n\t\t&.button-vue--vue-success,\n\t\t&.button-vue--vue-warning {\n\t\t\tcolor: white;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["logger","isLegacy32"],"mappings":"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"}

package/dist/chunks/NcButton-DUZTtFhr.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcButton-DUZTtFhr.mjs","sources":["../../src/components/NcButton/NcButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\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<!-- Style selector -->\n\t<div class=\"grid\">\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"style\" value=\"text\" name=\"style\" type=\"radio\">Text only</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"style\" value=\"icon\" name=\"style\" type=\"radio\">Icon only</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"style\" value=\"icontext\" name=\"style\" type=\"radio\">Icon and text</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"disabled\" type=\"checkbox\">Disabled</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"size\" value=\"small\" name=\"size\" type=\"radio\">Small</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"size\" value=\"normal\" name=\"size\" type=\"radio\">Normal (default)</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"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=\"disabled\"\n\t\t\t:size=\"size\"\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\t<template v-if=\"style.indexOf('text') !== -1\">Example text</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:size=\"size\"\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\t<template v-if=\"style.indexOf('text') !== -1\">Example text</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:size=\"size\">\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\t<template v-if=\"style.indexOf('text') !== -1\">Example text</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:size=\"size\"\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\t<template v-if=\"style.indexOf('text') !== -1\">Example text</template>\n\t\t</NcButton>\n\t</div>\n\n\t<!-- Wide button -->\n\t<h5>Wide button</h5>\n\t<NcButton\n\t\t:disabled=\"disabled\"\n\t\t:size=\"size\"\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\tExample text\n\t</NcButton>\n\n\t<!-- Special buttons -->\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=\"disabled\"\n\t\t\t:size=\"size\"\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\tExample text\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\t:disabled=\"disabled\"\n\t\t\t:size=\"size\"\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\tExample text\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\t:disabled=\"disabled\"\n\t\t\t:size=\"size\"\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\tExample text\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}\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 aria-label=\"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\tcenter (default)\n\t\t</NcButton>\n\t\t<NcButton alignment=\"center-reverse\" aria-label=\"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\tcenter-reverse\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\" aria-label=\"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\tstart\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton alignment=\"start-reverse\" aria-label=\"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\tstart-reverse\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\" aria-label=\"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\tend\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton alignment=\"end-reverse\" aria-label=\"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\tend-reverse\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 :pressed.sync=\"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\n\t\t\t<NcButton :pressed.sync=\"isFavorite\" 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\tFavorite\n\t\t\t</NcButton>\n\n\t\t\t<NcButton :pressed.sync=\"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: 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\n</docs>\n\n<script>\nimport { isLegacy32 } from '../../utils/legacy.ts'\nimport { logger } from '../../utils/logger.ts'\n\nexport default {\n\tname: 'NcButton',\n\n\tinject: {\n\t\tgetNcPopoverTriggerAttrs: {\n\t\t\tfrom: 'NcPopover:trigger:attrs',\n\t\t\tdefault: () => () => ({}),\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Set the text and icon alignment\n\t\t *\n\t\t * @default 'center'\n\t\t */\n\t\talignment: {\n\t\t\ttype: String,\n\t\t\tdefault: 'center',\n\t\t\tvalidator: (alignment) => ['start', 'start-reverse', 'center', 'center-reverse', 'end', 'end-reverse'].includes(alignment),\n\t\t},\n\n\t\t/**\n\t\t * Toggles the disabled state of the button on and off.\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 * Specify the button size\n\t\t * Accepted values: `'small'`, `'normal'` (default), `'large'`\n\t\t */\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\tdefault: 'normal',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['small', 'normal', 'large'].includes(value)\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Specifies the HTML button type.\n\t\t * Accepted values: submit, reset, button.\n\t\t *\n\t\t * For legacy reasons this can also be used to set the variant of the button (color schema).\n\t\t * This is discouraged but the accepted values are:\n\t\t * primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success.\n\t\t *\n\t\t * @default 'secondary' (will change with v9)\n\t\t * @deprecated The behavior will change in v9 to only allow the native HTML button types - use `variant` instead for setting the appearance of the button.\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].includes(value)\n\t\t\t\t\t|| ['submit', 'reset', 'button'].includes(value)\n\t\t\t},\n\n\t\t\tdefault: 'secondary',\n\t\t},\n\n\t\t/**\n\t\t * Specifies the button native type\n\t\t * Accepted values: submit, reset, button. If left empty,\n\t\t * the default \"button\" type will be used.\n\t\t *\n\t\t * @deprecated use `type` instead - will be removed with v9\n\t\t */\n\t\tnativeType: {\n\t\t\ttype: String,\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['submit', 'reset', 'button'].indexOf(value) !== -1\n\t\t\t},\n\n\t\t\tdefault: 'button',\n\t\t},\n\n\t\t/**\n\t\t * Specifies whether the button should span all the available width.\n\t\t * By default, buttons span the whole width of the container.\n\t\t */\n\t\twide: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Always try to provide an aria-label to your button. Make it more\n\t\t * specific than the button's name by provide some more context. E.g. if\n\t\t * the name of the button is \"send\" in the Mail app, the aria label could\n\t\t * be \"Send email\".\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Providing the href attribute turns the button component into an `a`\n\t\t * element.\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Target for the `a` element if `href` is set.\n\t\t */\n\t\ttarget: {\n\t\t\ttype: String,\n\t\t\tdefault: '_self',\n\t\t},\n\n\t\t/**\n\t\t * Providing the download attribute with href downloads file when clicking.\n\t\t */\n\t\tdownload: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Providing the to attribute turns the button component into a `router-link`\n\t\t * element. Takes precedence over the href attribute.\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Pass in `true` if you want the matching behaviour of `router-link` to\n\t\t * be non-inclusive: https://router.vuejs.org/api/#exact\n\t\t */\n\t\texact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.\n\t\t * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,\n\t\t * otherwise root element will inherit incorrect aria-hidden.\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\t// eslint-disable-next-line vue/no-boolean-default\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The pressed state of the button if it has a checked state\n\t\t * This will add the `aria-pressed` attribute and for the button to have the primary style in checked state.\n\t\t *\n\t\t * Pressed state is not supported for links\n\t\t */\n\t\tpressed: {\n\t\t\ttype: Boolean,\n\t\t\t// eslint-disable-next-line vue/no-boolean-default\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Specifies the button variant.\n\t\t *\n\t\t * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success.\n\t\t *\n\t\t * @default 'secondary'\n\t\t * @since 8.24.0\n\t\t */\n\t\tvariant: {\n\t\t\ttype: String,\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].includes(value)\n\t\t\t},\n\n\t\t\tdefault: 'secondary',\n\t\t},\n\t},\n\n\temits: ['update:pressed', 'click'],\n\n\tcomputed: {\n\t\t/**\n\t\t * The real type to be used for the button, enforces `primary` for pressed state and, if stateful button, any other type for not pressed state\n\t\t * Otherwise the type property is used.\n\t\t *\n\t\t * @return {string}\n\t\t */\n\t\trealVariant() {\n\t\t\t// Force *primary* when pressed\n\t\t\tif (this.pressed) {\n\t\t\t\treturn 'primary'\n\t\t\t}\n\t\t\t// If not pressed but button is configured as stateful button then the type must not be primary\n\t\t\tif (this.pressed === false && (this.type === 'primary' || this.variant === 'primary')) {\n\t\t\t\treturn 'secondary'\n\t\t\t}\n\t\t\t// handle legacy behavior\n\t\t\tif (this.type !== 'secondary' && ['primary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].includes(this.type)) {\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\t// otherwise use the configured variant\n\t\t\treturn this.variant\n\t\t},\n\n\t\t/**\n\t\t * The HTML button type\n\t\t *\n\t\t * @return {string}\n\t\t */\n\t\trealType() {\n\t\t\tif (typeof this.pressed === 'boolean') {\n\t\t\t\treturn 'button'\n\t\t\t}\n\t\t\t// Handle legacy behavior\n\t\t\tif (this.nativeType !== 'button') {\n\t\t\t\treturn this.nativeType\n\t\t\t}\n\t\t\t// Also handling legacy behavior: Ensure we do not conflict here\n\t\t\tif (['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].includes(this.type)) {\n\t\t\t\treturn this.nativeType\n\t\t\t}\n\t\t\t// otherwise use the type\n\t\t\treturn this.type\n\t\t},\n\n\t\t/**\n\t\t * The variant is one of the tertiary- ones\n\t\t */\n\t\tisTertiary() {\n\t\t\treturn this.realVariant.startsWith('tertiary')\n\t\t},\n\n\t\t/**\n\t\t * The flexbox alignment of the button content\n\t\t */\n\t\tflexAlignment() {\n\t\t\treturn this.alignment.split('-')[0]\n\t\t},\n\n\t\t/**\n\t\t * If the button content should be reversed (icon on the end)\n\t\t */\n\t\tisReverseAligned() {\n\t\t\treturn this.alignment.includes('-')\n\t\t},\n\n\t\tncPopoverTriggerAttrs() {\n\t\t\treturn this.getNcPopoverTriggerAttrs()\n\t\t},\n\t},\n\n\t/**\n\t * The render function to display the component\n\t *\n\t * @param {Function} h The function to create VNodes\n\t * @return {object|undefined} The created VNode\n\t */\n\trender(h) {\n\t\tconst hasText = !!this.$slots.default\n\t\tconst hasIcon = this.$slots?.icon\n\n\t\t/**\n\t\t * Always fill either the text prop or the ariaLabel one.\n\t\t */\n\t\tif (!hasText && !this.ariaLabel) {\n\t\t\tlogger.warn('You need to fill either the text or the ariaLabel props in the button component.', {\n\t\t\t\ttext: this.$slots.default?.[0]?.text,\n\t\t\t\tariaLabel: this.ariaLabel,\n\t\t\t\tinstance: this,\n\t\t\t})\n\t\t}\n\n\t\tconst isLink = (this.to || this.href)\n\n\t\tconst hasPressed = !isLink && typeof this.pressed === 'boolean'\n\n\t\tconst renderButton = ({ href, navigate, isActive, isExactActive } = {}) => h(\n\t\t\tisLink ? 'a' : 'button',\n\t\t\t{\n\t\t\t\tclass: [\n\t\t\t\t\t'button-vue',\n\t\t\t\t\t`button-vue--size-${this.size}`,\n\t\t\t\t\t{\n\t\t\t\t\t\t'button-vue--icon-only': hasIcon && !hasText,\n\t\t\t\t\t\t'button-vue--text-only': hasText && !hasIcon,\n\t\t\t\t\t\t'button-vue--icon-and-text': hasIcon && hasText,\n\t\t\t\t\t\t[`button-vue--vue-${this.realVariant}`]: this.realVariant,\n\t\t\t\t\t\t'button-vue--legacy': isLegacy32,\n\t\t\t\t\t\t'button-vue--tertiary': this.isTertiary,\n\t\t\t\t\t\t'button-vue--wide': this.wide,\n\t\t\t\t\t\t[`button-vue--${this.flexAlignment}`]: this.flexAlignment !== 'center',\n\t\t\t\t\t\t'button-vue--reverse': this.isReverseAligned,\n\t\t\t\t\t\tactive: isActive,\n\t\t\t\t\t\t'router-link-exact-active': isExactActive,\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\tattrs: {\n\t\t\t\t\t'aria-label': this.ariaLabel,\n\t\t\t\t\t'aria-pressed': hasPressed ? this.pressed.toString() : undefined,\n\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\ttype: isLink ? null : this.realType,\n\t\t\t\t\trole: isLink ? 'button' : null,\n\t\t\t\t\thref: this.to ? href : (this.href || null),\n\t\t\t\t\ttarget: isLink ? (this.target || '_self') : null,\n\t\t\t\t\trel: isLink ? 'nofollow noreferrer noopener' : null,\n\t\t\t\t\tdownload: (!this.to && this.href && this.download) ? this.download : null,\n\t\t\t\t\t// If this button is used as a popover trigger, we need to apply trigger attrs, e.g. aria attributes\n\t\t\t\t\t...this.ncPopoverTriggerAttrs,\n\t\t\t\t\t// Inherit all the component attrs\n\t\t\t\t\t...this.$attrs,\n\t\t\t\t},\n\t\t\t\ton: {\n\t\t\t\t\t...this.$listeners,\n\t\t\t\t\tclick: ($event) => {\n\t\t\t\t\t\tif (hasPressed) {\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Update the current pressed state of the button (if the `pressed` property was configured)\n\t\t\t\t\t\t\t *\n\t\t\t\t\t\t\t * @property {boolean} newValue The new `pressed`-state\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tthis.$emit('update:pressed', !this.pressed)\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// We have to both navigate and emit the click event\n\t\t\t\t\t\tthis.$emit('click', $event)\n\t\t\t\t\t\tnavigate?.($event)\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t\t[\n\t\t\t\th('span', { class: 'button-vue__wrapper' }, [\n\t\t\t\t\thasIcon\n\t\t\t\t\t\t? h('span', {\n\t\t\t\t\t\t\t\tclass: 'button-vue__icon',\n\t\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\t\t'aria-hidden': 'true',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}, [this.$slots.icon])\n\t\t\t\t\t\t: null,\n\t\t\t\t\thasText ? h('span', { class: 'button-vue__text' }, [this.$slots.default]) : null,\n\t\t\t\t]),\n\t\t\t],\n\t\t)\n\n\t\t// If we have a router-link, we wrap the button in it\n\t\tif (this.to) {\n\t\t\treturn h('router-link', {\n\t\t\t\tprops: {\n\t\t\t\t\tcustom: true,\n\t\t\t\t\tto: this.to,\n\t\t\t\t\texact: this.exact,\n\t\t\t\t},\n\t\t\t\tscopedSlots: {\n\t\t\t\t\tdefault: renderButton,\n\t\t\t\t},\n\t\t\t})\n\t\t}\n\t\t// Otherwise we simply return the button\n\t\treturn renderButton()\n\t},\n}\n\n</script>\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, calc(var(--button-size) / 2));\n\t--button-padding-default: clamp(var(--default-grid-baseline), var(--button-radius), calc(var(--default-grid-baseline) * 4));\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&--size-small {\n\t\t--button-size: var(--clickable-area-small, 24px);\n\t\t--button-radius: var(--border-radius); // 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, 48px);\n\t}\n\n\t// Cursor pointer on element and all children\n\t&,\n\t& :deep(*) {\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 {\n\t\tcursor: default;\n\t\topacity: $opacity_disabled;\n\t\t// Gives a wash out effect\n\t\tfilter: saturate($opacity_normal);\n\n\t\t& :deep(*) {\n\t\t\tcursor: default;\n\t\t}\n\t}\n\n\t// Default button type\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\t&--start &__wrapper {\n\t\tjustify-content: start;\n\t}\n\t&--reverse &__wrapper {\n\t\tflex-direction: row-reverse;\n\t}\n\n\t&--reverse#{&}--icon-and-text {\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); // ensure icons align with current 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\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\t}\n\n\t// Icon-only button\n\t&--icon-only {\n\t\t--button-padding: clamp(var(--default-grid-baseline), var(--button-radius), calc(var(--default-grid-baseline) * 4));\n\t\tline-height: 1;\n\t\twidth: var(--button-size) !important;\n\t}\n\n\t// Text-only button\n\t&--text-only {\n\t\t--button-padding: var(--button-padding-default);\n\n\t\t& .button-vue__text {\n\t\t\tmargin-inline: 4px;\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, var(--border-radius));\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t// Button types\n\n\t// Primary\n\t&--vue-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&--vue-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&--vue-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&--vue-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&--vue-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&--vue-success {\n\t\tbackground-color: var(--color-success);\n\t\tborder-color: var(--color-success-hover);\n\t\tcolor: var(--color-success-text);\n\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&--vue-warning {\n\t\tbackground-color: var(--color-warning);\n\t\tborder-color: var(--color-warning-hover);\n\t\tcolor: var(--color-warning-text);\n\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&--vue-error {\n\t\tbackground-color: var(--color-error);\n\t\tborder-color: var(--color-error-hover);\n\t\tcolor: var(--color-error-text);\n\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\t// before Nextcloud 32\n\t&--legacy {\n\t\t--button-inner-size: var(--button-size);\n\t\tborder: none;\n\t\tpadding-block: 0;\n\n\t\t&.button-vue--vue-error,\n\t\t&.button-vue--vue-success,\n\t\t&.button-vue--vue-warning {\n\t\t\tcolor: white;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":[],"mappings":"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"}

package/dist/chunks/NcCheckboxRadioSwitch-CC2UI0kG.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcCheckboxRadioSwitch-CC2UI0kG.cjs","sources":["../../node_modules/vue-material-design-icons/CheckboxBlankOutline.vue","../../node_modules/vue-material-design-icons/CheckboxMarked.vue","../../node_modules/vue-material-design-icons/MinusBox.vue","../../node_modules/vue-material-design-icons/RadioboxBlank.vue","../../node_modules/vue-material-design-icons/RadioboxMarked.vue","../../node_modules/vue-material-design-icons/ToggleSwitch.vue","../../node_modules/vue-material-design-icons/ToggleSwitchOff.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 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 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 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 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 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>","<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>","<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<span\n\t\tclass=\"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\tlabel can't be used here because of shift+click firefox bug\n\t\t\thttps://bugzilla.mozilla.org/show_bug.cgi?id=559506\n\t\t-->\n\t\t<span\n\t\t\tclass=\"checkbox-content__icon\"\n\t\t\t:class=\"{\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<!-- @slot The checkbox/radio icon, you can use it for adding an icon to the button variant\n\t\t\t\t\t@binding {bool} checked The input checked state\n\t\t\t\t\t@binding {bool} loading The loading state\n\t\t\t-->\n\t\t\t<slot\n\t\t\t\tname=\"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\n\t\t\t\t\t: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 || $slots.description\" class=\"checkbox-content__wrapper\">\n\t\t\t<span\n\t\t\t\tv-if=\"$slots.default\"\n\t\t\t\t:id=\"labelId\"\n\t\t\t\tclass=\"checkbox-content__text\"\n\t\t\t\t:class=\"textClass\">\n\t\t\t\t<!-- @slot The checkbox/radio label -->\n\t\t\t\t<slot />\n\t\t\t</span>\n\t\t\t<span v-if=\"!isButtonType && $slots.description\" :id=\"descriptionId\" class=\"checkbox-content__description\">\n\t\t\t\t<slot name=\"description\" />\n\t\t\t</span>\n\t\t</span>\n\t</span>\n</template>\n\n<script>\nimport CheckboxBlankOutline from 'vue-material-design-icons/CheckboxBlankOutline.vue'\nimport CheckboxMarked from 'vue-material-design-icons/CheckboxMarked.vue'\nimport MinusBox from 'vue-material-design-icons/MinusBox.vue'\nimport RadioboxBlank from 'vue-material-design-icons/RadioboxBlank.vue'\nimport RadioboxMarked from 'vue-material-design-icons/RadioboxMarked.vue'\nimport ToggleSwitch from 'vue-material-design-icons/ToggleSwitch.vue'\nimport ToggleSwitchOff from 'vue-material-design-icons/ToggleSwitchOff.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\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\n\t\t/**\n\t\t * Label id attribute\n\t\t */\n\t\tlabelId: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Description id attribute\n\t\t */\n\t\tdescriptionId: {\n\t\t\ttype: String,\n\t\t\trequired: true,\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&__wrapper {\n\t\tflex: 1 0;\n\t}\n\n\t&__text {\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&-checkbox:not(&--button-variant) &__icon--has-description,\n\t&-radio:not(&--button-variant) &__icon--has-description,\n\t&-switch:not(&--button-variant) &__icon--has-description {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tmargin-block-end: 0;\n\t\talign-self: start;\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&__description {\n\t\tdisplay: block;\n\t\tcolor: var(--color-text-maxcontrast);\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-right: $icon-margin;\n\t}\n\n\t&, * {\n\t\tcursor: pointer;\n\t\tflex-shrink: 0;\n\t}\n}\n</style>\n","<!--\n  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\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 attributes on the element are passed to the inner input element - except for the button type.\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 v-model=\"sharingEnabled\">Enable sharing (v-model)</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :model-value=\"sharingEnabled\" :loading=\"loading\" @update:modelValue=\"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\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\" description=\"The description\">\n\t\t\tEnable sharing with description\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 checkbox set\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"r\" name=\"sharing_permission\" disabled>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<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"x\" name=\"sharing_permission\">Permission execute</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 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=\"rwx\" name=\"sharing_permission_radio\" type=\"radio\">Default permission read+write+execute</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 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\">Enable sharing (v-model)</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\" type=\"switch\" disabled>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<NcCheckboxRadioSwitch v-model=\"sharingEnabled\" type=\"switch\" description=\"Instead you can use a description as a prop which can also be a long multiline text, that will be wrapped in a second row.\">\n\t\t\tEnable sharing.\n\t\t</NcCheckboxRadioSwitch>\n\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\" type=\"switch\">\n\t\t\tEnable sharing.\n\t\t\t<template #description>\n\t\t\t\tOr you can use a description as slot which can also be a <strong>long multiline text</strong>, that will be wrapped in a second row.\n\t\t\t</template>\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### Deprecated button variants\n⚠️ Warning the button variant is deprecated ⚠️\nThe button variant does not provide proper grouping,\nto overcome this and other limitations we now provide `NcRadioGroup` instead.\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</docs>\n\n<template>\n\t<component\n\t\t:is=\"computedWrapperElement\"\n\t\t:id=\"wrapperId\"\n\t\t:aria-label=\"isButtonType && ariaLabel ? ariaLabel : undefined\"\n\t\tclass=\"checkbox-radio-switch\"\n\t\t:class=\"{\n\t\t\t['checkbox-radio-switch-' + internalType]: internalType,\n\t\t\t'checkbox-radio-switch--checked': isChecked,\n\t\t\t'checkbox-radio-switch--disabled': disabled,\n\t\t\t'checkbox-radio-switch--indeterminate': hasIndeterminate ? indeterminate : false,\n\t\t\t'checkbox-radio-switch--button-variant': buttonVariant,\n\t\t\t'checkbox-radio-switch--button-variant-v-grouped': buttonVariant && buttonVariantGrouped === 'vertical',\n\t\t\t'checkbox-radio-switch--button-variant-h-grouped': buttonVariant && buttonVariantGrouped === 'horizontal',\n\t\t\t'button-vue': isButtonType,\n\t\t}\"\n\t\t:type=\"isButtonType ? 'button' : null\"\n\t\tv-bind=\"isButtonType ? $attrs : dataAttrs\"\n\t\tv-on=\"isButtonType ? listeners : null\">\n\t\t<input\n\t\t\tv-if=\"!isButtonType\"\n\t\t\t:id=\"id\"\n\t\t\t:aria-labelledby=\"!isButtonType && !ariaLabel ? labelId : null\"\n\t\t\t:aria-describedby=\"!isButtonType && (description || $slots.description) ? descriptionId : nonDataAttrs['aria-describedby']\"\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=\"nonDataAttrs\"\n\t\t\tv-on=\"listeners\">\n\t\t<NcCheckboxContent\n\t\t\t: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=\"internalType\"\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:label-id=\"labelId\"\n\t\t\t:description-id=\"descriptionId\"\n\t\t\t:icon-size=\"iconSize\"\n\t\t\t@click.native=\"onToggle\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot The checkbox/radio icon, you can use it for adding an icon to the button variant -->\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</template>\n\t\t\t<template v-if=\"$slots.description || description\" #description>\n\t\t\t\t<!-- @slot The checkbox/radio/switch description, you can use it for adding a more complex description element as opposed to the description prop -->\n\t\t\t\t<slot name=\"description\">\n\t\t\t\t\t{{ description }}\n\t\t\t\t</slot>\n\t\t\t</template>\n\n\t\t\t<!-- @slot The checkbox/radio label -->\n\t\t\t<slot />\n\t\t</NcCheckboxContent>\n\t</component>\n</template>\n\n<script>\nimport { computed, onMounted } from 'vue'\nimport NcCheckboxContent, { TYPE_BUTTON, TYPE_CHECKBOX, TYPE_RADIO, TYPE_SWITCH } from './NcCheckboxContent.vue'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport { n, t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { useInsideRadioGroup } from '../NcRadioGroup/useNcRadioGroup.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\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\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-' + GenRandomId(),\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\t * @deprecated - Use `NcRadioGroup` instead\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 * @deprecated - Use `NcRadioGroup` instead\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 * Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t *\n\t\t * @deprecated\n\t\t */\n\t\tchecked: {\n\t\t\ttype: [Boolean, Array, String],\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Checkbox 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 * Description\n\t\t *\n\t\t * This is unsupported when using button has type\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t *\n\t\t * @deprecated\n\t\t */\n\t\t'update:checked',\n\t\t'update:modelValue',\n\t\t/** Same as update:modelValue for Vue 2 compatibility */\n\t\t'update:model-value',\n\t],\n\n\tsetup(props) {\n\t\tconst radioGroup = useInsideRadioGroup()\n\t\tconst internalType = computed(() => radioGroup?.value ? TYPE_RADIO : props.type)\n\t\tonMounted(() => radioGroup?.value.register(false))\n\n\t\tconst model = useModelMigration('checked', 'update:checked')\n\t\t/**\n\t\t * A wrapper around the model value, if inside a radio group use the injected value otherwise use the prop.\n\t\t */\n\t\tconst internalModelValue = computed({\n\t\t\tget() {\n\t\t\t\tif (radioGroup?.value) {\n\t\t\t\t\treturn radioGroup.value.modelValue\n\t\t\t\t}\n\t\t\t\treturn model.value\n\t\t\t},\n\t\t\tset(value) {\n\t\t\t\tif (radioGroup?.value) {\n\t\t\t\t\tradioGroup.value.onUpdate(value)\n\t\t\t\t} else {\n\t\t\t\t\tmodel.value = value\n\t\t\t\t}\n\t\t\t},\n\t\t})\n\n\t\treturn {\n\t\t\tinternalType,\n\t\t\tinternalModelValue,\n\n\t\t\tlabelId: GenRandomId(),\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tdataAttrs() {\n\t\t\t// filter all data attributes\n\t\t\treturn Object.fromEntries(Object.entries(this.$attrs)\n\t\t\t\t.filter(([key]) => key.startsWith('data-')))\n\t\t},\n\n\t\tnonDataAttrs() {\n\t\t\t// filter all non-data attributes\n\t\t\treturn Object.fromEntries(Object.entries(this.$attrs)\n\t\t\t\t.filter(([key]) => !key.startsWith('data-')))\n\t\t},\n\n\t\tisButtonType() {\n\t\t\treturn this.internalType === 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.internalType === TYPE_SWITCH\n\t\t\t\t? 36\n\t\t\t\t: 24\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.internalType === 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.internalType)) {\n\t\t\t\treturn this.internalType\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 checked state\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.internalModelValue)) {\n\t\t\t\t\treturn [...this.internalModelValue].indexOf(this.value) > -1\n\t\t\t\t}\n\t\t\t\treturn this.internalModelValue === this.value\n\t\t\t}\n\t\t\treturn this.internalModelValue === 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.internalType === TYPE_CHECKBOX) {\n\t\t\tif (!Array.isArray(this.internalModelValue)) {\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.internalType === 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.internalModelValue !== 'boolean' && this.internalType === 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.internalType === TYPE_RADIO) {\n\t\t\t\tthis.internalModelValue = 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.internalType === TYPE_SWITCH) {\n\t\t\t\tthis.internalModelValue = !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.internalModelValue === 'boolean') {\n\t\t\t\tthis.internalModelValue = !this.internalModelValue\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.internalModelValue = values.filter((v) => v !== this.value)\n\t\t\t} else {\n\t\t\t\tthis.internalModelValue = [...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\tdisplay: flex;\n\talign-items: center;\n\tcolor: var(--color-main-text);\n\tbackground-color: transparent;\n\tbox-sizing: border-box;\n\tfont-size: var(--default-font-size);\n\tline-height: var(--default-line-height);\n\tpadding: 0;\n\tposition: relative;\n\n\t* {\n\t\tbox-sizing: border-box;\n\t}\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\t// Same as label padding\n\t\tmargin: 4px $icon-margin;\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: $opacity_disabled;\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--checkbox-radio-switch--border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));\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\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","NcLoadingIcon","GenRandomId","useInsideRadioGroup","computed","onMounted","useModelMigration","t","n"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5,6]}

package/dist/chunks/NcCheckboxRadioSwitch-DAPHFb0L.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcCheckboxRadioSwitch-DAPHFb0L.mjs","sources":["../../node_modules/vue-material-design-icons/CheckboxBlankOutline.vue","../../node_modules/vue-material-design-icons/CheckboxMarked.vue","../../node_modules/vue-material-design-icons/MinusBox.vue","../../node_modules/vue-material-design-icons/RadioboxBlank.vue","../../node_modules/vue-material-design-icons/RadioboxMarked.vue","../../node_modules/vue-material-design-icons/ToggleSwitch.vue","../../node_modules/vue-material-design-icons/ToggleSwitchOff.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 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 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 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 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 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>","<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>","<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<span\n\t\tclass=\"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\tlabel can't be used here because of shift+click firefox bug\n\t\t\thttps://bugzilla.mozilla.org/show_bug.cgi?id=559506\n\t\t-->\n\t\t<span\n\t\t\tclass=\"checkbox-content__icon\"\n\t\t\t:class=\"{\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<!-- @slot The checkbox/radio icon, you can use it for adding an icon to the button variant\n\t\t\t\t\t@binding {bool} checked The input checked state\n\t\t\t\t\t@binding {bool} loading The loading state\n\t\t\t-->\n\t\t\t<slot\n\t\t\t\tname=\"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\n\t\t\t\t\t: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 || $slots.description\" class=\"checkbox-content__wrapper\">\n\t\t\t<span\n\t\t\t\tv-if=\"$slots.default\"\n\t\t\t\t:id=\"labelId\"\n\t\t\t\tclass=\"checkbox-content__text\"\n\t\t\t\t:class=\"textClass\">\n\t\t\t\t<!-- @slot The checkbox/radio label -->\n\t\t\t\t<slot />\n\t\t\t</span>\n\t\t\t<span v-if=\"!isButtonType && $slots.description\" :id=\"descriptionId\" class=\"checkbox-content__description\">\n\t\t\t\t<slot name=\"description\" />\n\t\t\t</span>\n\t\t</span>\n\t</span>\n</template>\n\n<script>\nimport CheckboxBlankOutline from 'vue-material-design-icons/CheckboxBlankOutline.vue'\nimport CheckboxMarked from 'vue-material-design-icons/CheckboxMarked.vue'\nimport MinusBox from 'vue-material-design-icons/MinusBox.vue'\nimport RadioboxBlank from 'vue-material-design-icons/RadioboxBlank.vue'\nimport RadioboxMarked from 'vue-material-design-icons/RadioboxMarked.vue'\nimport ToggleSwitch from 'vue-material-design-icons/ToggleSwitch.vue'\nimport ToggleSwitchOff from 'vue-material-design-icons/ToggleSwitchOff.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\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\n\t\t/**\n\t\t * Label id attribute\n\t\t */\n\t\tlabelId: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Description id attribute\n\t\t */\n\t\tdescriptionId: {\n\t\t\ttype: String,\n\t\t\trequired: true,\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&__wrapper {\n\t\tflex: 1 0;\n\t}\n\n\t&__text {\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&-checkbox:not(&--button-variant) &__icon--has-description,\n\t&-radio:not(&--button-variant) &__icon--has-description,\n\t&-switch:not(&--button-variant) &__icon--has-description {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tmargin-block-end: 0;\n\t\talign-self: start;\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&__description {\n\t\tdisplay: block;\n\t\tcolor: var(--color-text-maxcontrast);\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-right: $icon-margin;\n\t}\n\n\t&, * {\n\t\tcursor: pointer;\n\t\tflex-shrink: 0;\n\t}\n}\n</style>\n","<!--\n  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\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 attributes on the element are passed to the inner input element - except for the button type.\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 v-model=\"sharingEnabled\">Enable sharing (v-model)</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :model-value=\"sharingEnabled\" :loading=\"loading\" @update:modelValue=\"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\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\" description=\"The description\">\n\t\t\tEnable sharing with description\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 checkbox set\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"r\" name=\"sharing_permission\" disabled>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<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"x\" name=\"sharing_permission\">Permission execute</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 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=\"rwx\" name=\"sharing_permission_radio\" type=\"radio\">Default permission read+write+execute</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 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\">Enable sharing (v-model)</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\" type=\"switch\" disabled>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<NcCheckboxRadioSwitch v-model=\"sharingEnabled\" type=\"switch\" description=\"Instead you can use a description as a prop which can also be a long multiline text, that will be wrapped in a second row.\">\n\t\t\tEnable sharing.\n\t\t</NcCheckboxRadioSwitch>\n\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\" type=\"switch\">\n\t\t\tEnable sharing.\n\t\t\t<template #description>\n\t\t\t\tOr you can use a description as slot which can also be a <strong>long multiline text</strong>, that will be wrapped in a second row.\n\t\t\t</template>\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### Deprecated button variants\n⚠️ Warning the button variant is deprecated ⚠️\nThe button variant does not provide proper grouping,\nto overcome this and other limitations we now provide `NcRadioGroup` instead.\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</docs>\n\n<template>\n\t<component\n\t\t:is=\"computedWrapperElement\"\n\t\t:id=\"wrapperId\"\n\t\t:aria-label=\"isButtonType && ariaLabel ? ariaLabel : undefined\"\n\t\tclass=\"checkbox-radio-switch\"\n\t\t:class=\"{\n\t\t\t['checkbox-radio-switch-' + internalType]: internalType,\n\t\t\t'checkbox-radio-switch--checked': isChecked,\n\t\t\t'checkbox-radio-switch--disabled': disabled,\n\t\t\t'checkbox-radio-switch--indeterminate': hasIndeterminate ? indeterminate : false,\n\t\t\t'checkbox-radio-switch--button-variant': buttonVariant,\n\t\t\t'checkbox-radio-switch--button-variant-v-grouped': buttonVariant && buttonVariantGrouped === 'vertical',\n\t\t\t'checkbox-radio-switch--button-variant-h-grouped': buttonVariant && buttonVariantGrouped === 'horizontal',\n\t\t\t'button-vue': isButtonType,\n\t\t}\"\n\t\t:type=\"isButtonType ? 'button' : null\"\n\t\tv-bind=\"isButtonType ? $attrs : dataAttrs\"\n\t\tv-on=\"isButtonType ? listeners : null\">\n\t\t<input\n\t\t\tv-if=\"!isButtonType\"\n\t\t\t:id=\"id\"\n\t\t\t:aria-labelledby=\"!isButtonType && !ariaLabel ? labelId : null\"\n\t\t\t:aria-describedby=\"!isButtonType && (description || $slots.description) ? descriptionId : nonDataAttrs['aria-describedby']\"\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=\"nonDataAttrs\"\n\t\t\tv-on=\"listeners\">\n\t\t<NcCheckboxContent\n\t\t\t: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=\"internalType\"\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:label-id=\"labelId\"\n\t\t\t:description-id=\"descriptionId\"\n\t\t\t:icon-size=\"iconSize\"\n\t\t\t@click.native=\"onToggle\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot The checkbox/radio icon, you can use it for adding an icon to the button variant -->\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</template>\n\t\t\t<template v-if=\"$slots.description || description\" #description>\n\t\t\t\t<!-- @slot The checkbox/radio/switch description, you can use it for adding a more complex description element as opposed to the description prop -->\n\t\t\t\t<slot name=\"description\">\n\t\t\t\t\t{{ description }}\n\t\t\t\t</slot>\n\t\t\t</template>\n\n\t\t\t<!-- @slot The checkbox/radio label -->\n\t\t\t<slot />\n\t\t</NcCheckboxContent>\n\t</component>\n</template>\n\n<script>\nimport { computed, onMounted } from 'vue'\nimport NcCheckboxContent, { TYPE_BUTTON, TYPE_CHECKBOX, TYPE_RADIO, TYPE_SWITCH } from './NcCheckboxContent.vue'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport { n, t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { useInsideRadioGroup } from '../NcRadioGroup/useNcRadioGroup.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\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\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-' + GenRandomId(),\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\t * @deprecated - Use `NcRadioGroup` instead\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 * @deprecated - Use `NcRadioGroup` instead\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 * Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t *\n\t\t * @deprecated\n\t\t */\n\t\tchecked: {\n\t\t\ttype: [Boolean, Array, String],\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Checkbox 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 * Description\n\t\t *\n\t\t * This is unsupported when using button has type\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t *\n\t\t * @deprecated\n\t\t */\n\t\t'update:checked',\n\t\t'update:modelValue',\n\t\t/** Same as update:modelValue for Vue 2 compatibility */\n\t\t'update:model-value',\n\t],\n\n\tsetup(props) {\n\t\tconst radioGroup = useInsideRadioGroup()\n\t\tconst internalType = computed(() => radioGroup?.value ? TYPE_RADIO : props.type)\n\t\tonMounted(() => radioGroup?.value.register(false))\n\n\t\tconst model = useModelMigration('checked', 'update:checked')\n\t\t/**\n\t\t * A wrapper around the model value, if inside a radio group use the injected value otherwise use the prop.\n\t\t */\n\t\tconst internalModelValue = computed({\n\t\t\tget() {\n\t\t\t\tif (radioGroup?.value) {\n\t\t\t\t\treturn radioGroup.value.modelValue\n\t\t\t\t}\n\t\t\t\treturn model.value\n\t\t\t},\n\t\t\tset(value) {\n\t\t\t\tif (radioGroup?.value) {\n\t\t\t\t\tradioGroup.value.onUpdate(value)\n\t\t\t\t} else {\n\t\t\t\t\tmodel.value = value\n\t\t\t\t}\n\t\t\t},\n\t\t})\n\n\t\treturn {\n\t\t\tinternalType,\n\t\t\tinternalModelValue,\n\n\t\t\tlabelId: GenRandomId(),\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tdataAttrs() {\n\t\t\t// filter all data attributes\n\t\t\treturn Object.fromEntries(Object.entries(this.$attrs)\n\t\t\t\t.filter(([key]) => key.startsWith('data-')))\n\t\t},\n\n\t\tnonDataAttrs() {\n\t\t\t// filter all non-data attributes\n\t\t\treturn Object.fromEntries(Object.entries(this.$attrs)\n\t\t\t\t.filter(([key]) => !key.startsWith('data-')))\n\t\t},\n\n\t\tisButtonType() {\n\t\t\treturn this.internalType === 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.internalType === TYPE_SWITCH\n\t\t\t\t? 36\n\t\t\t\t: 24\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.internalType === 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.internalType)) {\n\t\t\t\treturn this.internalType\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 checked state\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.internalModelValue)) {\n\t\t\t\t\treturn [...this.internalModelValue].indexOf(this.value) > -1\n\t\t\t\t}\n\t\t\t\treturn this.internalModelValue === this.value\n\t\t\t}\n\t\t\treturn this.internalModelValue === 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.internalType === TYPE_CHECKBOX) {\n\t\t\tif (!Array.isArray(this.internalModelValue)) {\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.internalType === 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.internalModelValue !== 'boolean' && this.internalType === 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.internalType === TYPE_RADIO) {\n\t\t\t\tthis.internalModelValue = 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.internalType === TYPE_SWITCH) {\n\t\t\t\tthis.internalModelValue = !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.internalModelValue === 'boolean') {\n\t\t\t\tthis.internalModelValue = !this.internalModelValue\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.internalModelValue = values.filter((v) => v !== this.value)\n\t\t\t} else {\n\t\t\t\tthis.internalModelValue = [...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\tdisplay: flex;\n\talign-items: center;\n\tcolor: var(--color-main-text);\n\tbackground-color: transparent;\n\tbox-sizing: border-box;\n\tfont-size: var(--default-font-size);\n\tline-height: var(--default-line-height);\n\tpadding: 0;\n\tposition: relative;\n\n\t* {\n\t\tbox-sizing: border-box;\n\t}\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\t// Same as label padding\n\t\tmargin: 4px $icon-margin;\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: $opacity_disabled;\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--checkbox-radio-switch--border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));\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\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"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5,6]}