@nextcloud/vue 8.26.1 → 8.27.0

package/dist/chunks/{NcBreadcrumbs-CPmhYEn-.mjs.map → NcBreadcrumbs-B1LdRe5_.mjs.map}

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

package/dist/chunks/{NcCheckboxRadioSwitch-Di9rSADK.mjs → NcCheckboxRadioSwitch-VeztTzpz.mjs}

@@ -1,5 +1,5 @@
 import '../assets/NcCheckboxRadioSwitch-DlEieXCj.css';
-import { r as register, H as n, a as t } from "./_l10n-Dt0m9Fxw.mjs";
+import { r as register, G as n, a as t } from "./_l10n-DQgzdF9S.mjs";
 import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 import NcLoadingIcon from "../Components/NcLoadingIcon.mjs";
@@ -694,4 +694,4 @@ const NcCheckboxRadioSwitch = __component__.exports;
 export {
   NcCheckboxRadioSwitch as N
 };
-//# sourceMappingURL=NcCheckboxRadioSwitch-Di9rSADK.mjs.map
+//# sourceMappingURL=NcCheckboxRadioSwitch-VeztTzpz.mjs.map

package/dist/chunks/{NcCheckboxRadioSwitch-Di9rSADK.mjs.map → NcCheckboxRadioSwitch-VeztTzpz.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcCheckboxRadioSwitch-Di9rSADK.mjs","sources":["../../node_modules/vue-material-design-icons/CheckboxBlankOutline.vue","../../node_modules/vue-material-design-icons/MinusBox.vue","../../node_modules/vue-material-design-icons/CheckboxMarked.vue","../../node_modules/vue-material-design-icons/RadioboxMarked.vue","../../node_modules/vue-material-design-icons/RadioboxBlank.vue","../../node_modules/vue-material-design-icons/ToggleSwitchOff.vue","../../node_modules/vue-material-design-icons/ToggleSwitch.vue","../../src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue","../../src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon checkbox-blank-outline-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"CheckboxBlankOutlineIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon minus-box-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"MinusBoxIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon checkbox-marked-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"CheckboxMarkedIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon radiobox-marked-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"RadioboxMarkedIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon radiobox-blank-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"RadioboxBlankIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon toggle-switch-off-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M7,15A3,3 0 0,1 4,12A3,3 0 0,1 7,9A3,3 0 0,1 10,12A3,3 0 0,1 7,15Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"ToggleSwitchOffIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon toggle-switch-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"ToggleSwitchIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<span class=\"checkbox-content\"\n\t\t:class=\"{\n\t\t\t['checkbox-content-' + type]: true,\n\t\t\t'checkbox-content--button-variant': buttonVariant,\n\t\t\t'checkbox-content--has-text': !!$slots.default,\n\t\t}\">\n\t\t<!--\n\t\t\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 :class=\"{\n\t\t\t\t'checkbox-content__icon': true,\n\t\t\t\t'checkbox-content__icon--checked': isChecked,\n\t\t\t\t[iconClass]: true\n\t\t\t}\"\n\t\t\t:aria-hidden=\"true\"\n\t\t\tinert>\n\t\t\t<!-- @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 name=\"icon\"\n\t\t\t\t:checked=\"isChecked\"\n\t\t\t\t:loading=\"loading\">\n\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t<component :is=\"checkboxRadioIconElement\"\n\t\t\t\t\tv-else-if=\"!buttonVariant\"\n\t\t\t\t\t:size=\"size\" />\n\t\t\t</slot>\n\t\t</span>\n\n\t\t<span v-if=\"$slots.default\" :class=\"['checkbox-content__text', textClass]\">\n\t\t\t<!-- @slot The checkbox/radio label -->\n\t\t\t<slot />\n\t\t</span>\n\t</span>\n</template>\n\n<script>\nimport CheckboxBlankOutline from 'vue-material-design-icons/CheckboxBlankOutline.vue'\nimport MinusBox from 'vue-material-design-icons/MinusBox.vue'\nimport CheckboxMarked from 'vue-material-design-icons/CheckboxMarked.vue'\nimport RadioboxMarked from 'vue-material-design-icons/RadioboxMarked.vue'\nimport RadioboxBlank from 'vue-material-design-icons/RadioboxBlank.vue'\nimport ToggleSwitchOff from 'vue-material-design-icons/ToggleSwitchOff.vue'\nimport ToggleSwitch from 'vue-material-design-icons/ToggleSwitch.vue'\n\nimport NcLoadingIcon from '../NcLoadingIcon/index.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\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 24,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tisButtonType() {\n\t\t\treturn this.type === TYPE_BUTTON\n\t\t},\n\n\t\t/**\n\t\t * Returns the proper Material icon depending on the select case\n\t\t *\n\t\t * @return {object}\n\t\t */\n\t\tcheckboxRadioIconElement() {\n\t\t\tif (this.type === TYPE_RADIO) {\n\t\t\t\tif (this.isChecked) {\n\t\t\t\t\treturn RadioboxMarked\n\t\t\t\t}\n\t\t\t\treturn RadioboxBlank\n\t\t\t}\n\n\t\t\t// Switch\n\t\t\tif (this.type === TYPE_SWITCH) {\n\t\t\t\tif (this.isChecked) {\n\t\t\t\t\treturn ToggleSwitch\n\t\t\t\t}\n\t\t\t\treturn ToggleSwitchOff\n\t\t\t}\n\n\t\t\t// Checkbox\n\t\t\tif (this.indeterminate) {\n\t\t\t\treturn MinusBox\n\t\t\t}\n\t\t\tif (this.isChecked) {\n\t\t\t\treturn CheckboxMarked\n\t\t\t}\n\t\t\treturn CheckboxBlankOutline\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.checkbox-content {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n\tuser-select: none;\n\tmin-height: var(--default-clickable-area);\n\tborder-radius: var(--checkbox-radio-switch--border-radius);\n\tpadding: var(--default-grid-baseline) calc((var(--default-clickable-area) - var(--icon-height)) / 2);\n\t// Set to 100% to make text overflow work on button style\n\twidth: 100%;\n\t// but restrict to content so plain checkboxes / radio switches do not expand\n\tmax-width: fit-content;\n\n\t&__text {\n\t\tflex: 1 0;\n\n\t\t&:empty {\n\t\t\t// hide text if empty to ensure checkbox outline is a circle instead of oval\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t&__icon > * {\n\t\twidth: var(--icon-size);\n\t\theight: var(--icon-size);\n\t\tcolor: var(--color-primary-element);\n\t}\n\n\t&--button-variant {\n\t\t.checkbox-content__icon:not(.checkbox-content__icon--checked) > * {\n\t\t\tcolor: var(--color-primary-element);\n\t\t}\n\n\t\t.checkbox-content__icon--checked > * {\n\t\t\tcolor: var(--color-primary-element-text);\n\t\t}\n\t}\n\n\t&--has-text {\n\t\tpadding-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<br>\n\t\tsharingEnabled: {{ sharingEnabled }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tloading: false,\n\t\t\tsharingEnabled: false,\n\t\t}\n\t},\n\tmethods: {\n\t\tonToggle() {\n\t\t\tthis.loading = true\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.sharingEnabled = !this.sharingEnabled\n\t\t\t\tthis.loading = false\n\t\t\t}, 1000)\n\t\t}\n\t}\n}\n</script>\n```\n\n### Standard radio set\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"r\" name=\"sharing_permission_radio\" type=\"radio\">Default permission read</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"rw\" name=\"sharing_permission_radio\" type=\"radio\">Default permission read+write</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"rwx\" name=\"sharing_permission_radio\" type=\"radio\">Default permission read+write+execute</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingPermission: {{ sharingPermission }}\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tsharingPermission: 'r',\n\t\t\t}\n\t\t}\n\t}\n</script>\n```\n\n### Standard radio set with alternative button style\n```vue\n<template>\n\t<div>\n\t\t<h4>Horizontal</h4>\n\t\t<div style=\"display: flex\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"r\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tDefault permission read\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"rw\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tDefault permission read+write\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\t<h4>Vertically</h4>\n\t\t<div style=\"width: fit-content\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"r\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tDefault permission read\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"rw\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tDefault permission read+write\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\tsharingPermission: {{ sharingPermission }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsharingPermission: 'r',\n\t\t}\n\t}\n}\n</script>\n```\n\n### Radio set with button style and icons\n```vue\n<template>\n\t<div>\n\t\t<h4>Horizontal</h4>\n\t\t<div style=\"display: flex\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"y\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tEnable settings\n\t\t\t\t<template #icon><CheckIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"n\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tDisable settings\n\t\t\t\t<template #icon><CancelIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\t<h4>Vertically</h4>\n\t\t<div style=\"width: fit-content\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"y\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tEnable settings\n\t\t\t\t<template #icon><CheckIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"n\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tDisable settings\n\t\t\t\t<template #icon><CancelIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\tSettings enabled: {{ enableSettings === 'y' ? 'yes' : 'no' }}\n\t</div>\n</template>\n<script>\nimport CheckIcon from 'vue-material-design-icons/Check.vue'\nimport CancelIcon from 'vue-material-design-icons/Cancel.vue'\nexport default {\n\tcomponents: {\n\t\tCheckIcon,\n\t\tCancelIcon,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tenableSettings: 'n',\n\t\t}\n\t}\n}\n</script>\n```\n\n### Standard checkbox set\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch :disabled=\"true\" v-model=\"sharingPermission\" value=\"r\" name=\"sharing_permission\">Permission read</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"w\" name=\"sharing_permission\">Permission write</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"d\" name=\"sharing_permission\">Permission delete</NcCheckboxRadioSwitch>\n\t\t<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 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=\"true\">Enable sharing (disabled)</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingEnabled: {{ sharingEnabled }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsharingEnabled: true,\n\t\t}\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<component :is=\"computedWrapperElement\"\n\t\t:id=\"wrapperId\"\n\t\t:aria-label=\"isButtonType && ariaLabel ? ariaLabel : undefined\"\n\t\t:class=\"{\n\t\t\t['checkbox-radio-switch-' + type]: type,\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\tclass=\"checkbox-radio-switch\"\n\t\t:style=\"cssVars\"\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 v-if=\"!isButtonType\"\n\t\t\t:id=\"id\"\n\t\t\t:aria-labelledby=\"!isButtonType && !ariaLabel ? `${id}-label` : null\"\n\t\t\t:aria-label=\"ariaLabel || undefined\"\n\t\t\tclass=\"checkbox-radio-switch__input\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:type=\"inputType\"\n\t\t\t:value=\"value\"\n\t\t\t:checked=\"isChecked\"\n\t\t\t:indeterminate.prop=\"hasIndeterminate ? indeterminate : null\"\n\t\t\t:required=\"required\"\n\t\t\t:name=\"name\"\n\t\t\tv-bind=\"nonDataAttrs\"\n\t\t\tv-on=\"listeners\">\n\t\t<NcCheckboxContent :id=\"!isButtonType ? `${id}-label` : undefined\"\n\t\t\tclass=\"checkbox-radio-switch__content\"\n\t\t\ticon-class=\"checkbox-radio-switch__icon\"\n\t\t\ttext-class=\"checkbox-radio-switch__text\"\n\t\t\t:type=\"type\"\n\t\t\t:indeterminate=\"hasIndeterminate ? indeterminate : false\"\n\t\t\t:button-variant=\"buttonVariant\"\n\t\t\t:is-checked=\"isChecked\"\n\t\t\t:loading=\"loading\"\n\t\t\t:size=\"size\"\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\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 { n, t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcCheckboxContent, { TYPE_BUTTON, TYPE_CHECKBOX, TYPE_RADIO, TYPE_SWITCH } from './NcCheckboxContent.vue'\nimport { useModelMigration } from '../../composables/useModelMigration.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\tbuttonVariant: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Are the elements are all direct siblings?\n\t\t * If so they will be grouped horizontally or vertically\n\t\t *\n\t\t * @type {'no'|'horizontal'|'vertical'}\n\t\t */\n\t\tbuttonVariantGrouped: {\n\t\t\ttype: String,\n\t\t\tdefault: 'no',\n\t\t\tvalidator: v => ['no', 'vertical', 'horizontal'].includes(v),\n\t\t},\n\n\t\t/**\n\t\t * Removed in v9 - use `modelValue` (`v-model`) instead\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\t},\n\n\temits: [\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\t'update: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() {\n\t\tconst model = useModelMigration('checked', 'update:checked')\n\t\treturn {\n\t\t\tmodel,\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.type === TYPE_BUTTON\n\t\t},\n\n\t\tcomputedWrapperElement() {\n\t\t\tif (this.isButtonType) {\n\t\t\t\treturn 'button'\n\t\t\t}\n\t\t\tif (this.wrapperElement !== null) {\n\t\t\t\treturn this.wrapperElement\n\t\t\t}\n\t\t\treturn 'span'\n\t\t},\n\n\t\tlisteners() {\n\t\t\tif (this.isButtonType) {\n\t\t\t\treturn {\n\t\t\t\t\tclick: this.onToggle,\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tchange: this.onToggle,\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Icon size\n\t\t *\n\t\t * @return {number}\n\t\t */\n\t\tsize() {\n\t\t\treturn this.type === TYPE_SWITCH\n\t\t\t\t? 36\n\t\t\t\t: 24\n\t\t},\n\n\t\t/**\n\t\t * Css local variables for this component\n\t\t *\n\t\t * @return {object}\n\t\t */\n\t\tcssVars() {\n\t\t\treturn {\n\t\t\t\t'--icon-size': this.size + 'px',\n\t\t\t\t'--icon-height': (this.type === TYPE_SWITCH ? 16 : this.size) + 'px',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Return the input type.\n\t\t * Switch is not an official type\n\t\t *\n\t\t * @return {string}\n\t\t */\n\t\tinputType() {\n\t\t\tconst nativeTypes = [\n\t\t\t\tTYPE_CHECKBOX,\n\t\t\t\tTYPE_RADIO,\n\t\t\t\tTYPE_BUTTON,\n\t\t\t]\n\t\t\tif (nativeTypes.includes(this.type)) {\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn TYPE_CHECKBOX\n\t\t},\n\n\t\t/**\n\t\t * Check if that entry is checked\n\t\t * If value is defined, we use that as the checked value\n\t\t * If not, we expect true/false in 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.model)) {\n\t\t\t\t\treturn [...this.model].indexOf(this.value) > -1\n\t\t\t\t}\n\t\t\t\treturn this.model === this.value\n\t\t\t}\n\t\t\treturn this.model === true\n\t\t},\n\n\t\thasIndeterminate() {\n\t\t\treturn [\n\t\t\t\tTYPE_CHECKBOX,\n\t\t\t\tTYPE_RADIO,\n\t\t\t].includes(this.inputType)\n\t\t},\n\t},\n\n\tmounted() {\n\t\tif (this.name && this.type === TYPE_CHECKBOX) {\n\t\t\tif (!Array.isArray(this.model)) {\n\t\t\t\tthrow new Error('When using groups of checkboxes, the updated value will be an array.')\n\t\t\t}\n\t\t}\n\n\t\t// https://material.io/components/checkboxes#usage\n\t\tif (this.name && this.type === TYPE_SWITCH) {\n\t\t\tthrow new Error('Switches are not made to be used for data sets. Please use checkboxes instead.')\n\t\t}\n\n\t\t// https://material.io/components/checkboxes#usage\n\t\tif (typeof this.model !== 'boolean' && this.type === TYPE_SWITCH) {\n\t\t\tthrow new Error('Switches can only be used with boolean as checked prop.')\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\n\t\tn,\n\n\t\tonToggle(event) {\n\t\t\tif (this.disabled || event.target.tagName.toLowerCase() === 'a') {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If this is a radio, there can only be one value\n\t\t\tif (this.type === TYPE_RADIO) {\n\t\t\t\tthis.model = this.value\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If this is a radio, there can only be one value\n\t\t\tif (this.type === TYPE_SWITCH) {\n\t\t\t\tthis.model = !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.model === 'boolean') {\n\t\t\t\tthis.model = !this.model\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.model = values.filter((v) => v !== this.value)\n\t\t\t} else {\n\t\t\t\tthis.model = [...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\tdisplay: flex;\n\talign-items: center;\n\tcolor: var(--color-main-text);\n\tbackground-color: transparent;\n\tfont-size: var(--default-font-size);\n\tline-height: var(--default-line-height);\n\tpadding: 0;\n\tposition: relative;\n\n\t&__input {\n\t\tposition: absolute;\n\t\tz-index: -1;\n\t\topacity: 0 !important; // We need !important, or it gets overwritten by server style\n\t\twidth: var(--icon-size);\n\t\theight: var(--icon-size);\n\t\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":";;;;;;AAoBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;AChBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;AChBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;AChBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;AChBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;AChBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;AChBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;ACmBA,MAAA,gBAAA;AACA,MAAA,aAAA;AACA,MAAA,cAAA;AACA,MAAA,cAAA;AAEA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,UAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACA,EAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,eAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,2BAAA;AACA,UAAA,KAAA,SAAA,YAAA;AACA,YAAA,KAAA,WAAA;AACA,iBAAA;AAAA,QACA;AACA,eAAA;AAAA,MACA;AAGA,UAAA,KAAA,SAAA,aAAA;AACA,YAAA,KAAA,WAAA;AACA,iBAAA;AAAA,QACA;AACA,eAAA;AAAA,MACA;AAGA,UAAA,KAAA,eAAA;AACA,eAAA;AAAA,MACA;AACA,UAAA,KAAA,WAAA;AACA,eAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;ACgIA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA;AAAA,EAGA,cAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,2BAAA,YAAA;AAAA,MACA,WAAA,QAAA,GAAA,KAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,UAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACA,EAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,OAAA,CAAA,MAAA,YAAA,YAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA,CAAA,SAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA,CAAA,SAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,UAAA,QAAA,kBAAA,WAAA,gBAAA;AACA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AAEA,aAAA,OAAA,YAAA,OAAA,QAAA,KAAA,MAAA,EACA,OAAA,CAAA,CAAA,GAAA,MAAA,IAAA,WAAA,OAAA,CAAA,CAAA;AAAA,IACA;AAAA,IAEA,eAAA;AAEA,aAAA,OAAA,YAAA,OAAA,QAAA,KAAA,MAAA,EACA,OAAA,CAAA,CAAA,GAAA,MAAA,CAAA,IAAA,WAAA,OAAA,CAAA,CAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,UAAA,KAAA,cAAA;AACA,eAAA;AAAA,MACA;AACA,UAAA,KAAA,mBAAA,MAAA;AACA,eAAA,KAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,UAAA,KAAA,cAAA;AACA,eAAA;AAAA,UACA,OAAA,KAAA;AAAA,QACA;AAAA,MACA;AACA,aAAA;AAAA,QACA,QAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,OAAA;AACA,aAAA,KAAA,SAAA,cACA,KACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AACA,aAAA;AAAA,QACA,eAAA,KAAA,OAAA;AAAA,QACA,kBAAA,KAAA,SAAA,cAAA,KAAA,KAAA,QAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,YAAA;AACA,YAAA,cAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACA;AACA,UAAA,YAAA,SAAA,KAAA,IAAA,GAAA;AACA,eAAA,KAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,YAAA;AACA,UAAA,KAAA,UAAA,MAAA;AACA,YAAA,MAAA,QAAA,KAAA,KAAA,GAAA;AACA,iBAAA,CAAA,GAAA,KAAA,KAAA,EAAA,QAAA,KAAA,KAAA,IAAA;AAAA,QACA;AACA,eAAA,KAAA,UAAA,KAAA;AAAA,MACA;AACA,aAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAA;AAAA,QACA;AAAA,QACA;AAAA,MACA,EAAA,SAAA,KAAA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,QAAA,KAAA,QAAA,KAAA,SAAA,eAAA;AACA,UAAA,CAAA,MAAA,QAAA,KAAA,KAAA,GAAA;AACA,cAAA,IAAA,MAAA,sEAAA;AAAA,MACA;AAAA,IACA;AAGA,QAAA,KAAA,QAAA,KAAA,SAAA,aAAA;AACA,YAAA,IAAA,MAAA,gFAAA;AAAA,IACA;AAGA,QAAA,OAAA,KAAA,UAAA,aAAA,KAAA,SAAA,aAAA;AACA,YAAA,IAAA,MAAA,yDAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,SAAA,OAAA;AACA,UAAA,KAAA,YAAA,MAAA,OAAA,QAAA,YAAA,MAAA,KAAA;AACA;AAAA,MACA;AAGA,UAAA,KAAA,SAAA,YAAA;AACA,aAAA,QAAA,KAAA;AACA;AAAA,MACA;AAGA,UAAA,KAAA,SAAA,aAAA;AACA,aAAA,QAAA,CAAA,KAAA;AACA;AAAA,MACA;AAGA,UAAA,OAAA,KAAA,UAAA,WAAA;AACA,aAAA,QAAA,CAAA,KAAA;AACA;AAAA,MACA;AAGA,YAAA,SAAA,KAAA,aAAA,EACA,OAAA,WAAA,MAAA,OAAA,EACA,IAAA,WAAA,MAAA,KAAA;AAEA,UAAA,OAAA,SAAA,KAAA,KAAA,GAAA;AACA,aAAA,QAAA,OAAA,OAAA,CAAA,MAAA,MAAA,KAAA,KAAA;AAAA,MACA,OAAA;AACA,aAAA,QAAA,CAAA,GAAA,QAAA,KAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,eAAA;AACA,aAAA,CAAA,GAAA,SAAA,kBAAA,KAAA,IAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0,1,2,3,4,5,6]}
+{"version":3,"file":"NcCheckboxRadioSwitch-VeztTzpz.mjs","sources":["../../node_modules/vue-material-design-icons/CheckboxBlankOutline.vue","../../node_modules/vue-material-design-icons/MinusBox.vue","../../node_modules/vue-material-design-icons/CheckboxMarked.vue","../../node_modules/vue-material-design-icons/RadioboxMarked.vue","../../node_modules/vue-material-design-icons/RadioboxBlank.vue","../../node_modules/vue-material-design-icons/ToggleSwitchOff.vue","../../node_modules/vue-material-design-icons/ToggleSwitch.vue","../../src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue","../../src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon checkbox-blank-outline-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"CheckboxBlankOutlineIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon minus-box-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"MinusBoxIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon checkbox-marked-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"CheckboxMarkedIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon radiobox-marked-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"RadioboxMarkedIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon radiobox-blank-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"RadioboxBlankIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon toggle-switch-off-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M7,15A3,3 0 0,1 4,12A3,3 0 0,1 7,9A3,3 0 0,1 10,12A3,3 0 0,1 7,15Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"ToggleSwitchOffIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon toggle-switch-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"ToggleSwitchIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<span class=\"checkbox-content\"\n\t\t:class=\"{\n\t\t\t['checkbox-content-' + type]: true,\n\t\t\t'checkbox-content--button-variant': buttonVariant,\n\t\t\t'checkbox-content--has-text': !!$slots.default,\n\t\t}\">\n\t\t<!--\n\t\t\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 :class=\"{\n\t\t\t\t'checkbox-content__icon': true,\n\t\t\t\t'checkbox-content__icon--checked': isChecked,\n\t\t\t\t[iconClass]: true\n\t\t\t}\"\n\t\t\t:aria-hidden=\"true\"\n\t\t\tinert>\n\t\t\t<!-- @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 name=\"icon\"\n\t\t\t\t:checked=\"isChecked\"\n\t\t\t\t:loading=\"loading\">\n\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t<component :is=\"checkboxRadioIconElement\"\n\t\t\t\t\tv-else-if=\"!buttonVariant\"\n\t\t\t\t\t:size=\"size\" />\n\t\t\t</slot>\n\t\t</span>\n\n\t\t<span v-if=\"$slots.default\" :class=\"['checkbox-content__text', textClass]\">\n\t\t\t<!-- @slot The checkbox/radio label -->\n\t\t\t<slot />\n\t\t</span>\n\t</span>\n</template>\n\n<script>\nimport CheckboxBlankOutline from 'vue-material-design-icons/CheckboxBlankOutline.vue'\nimport MinusBox from 'vue-material-design-icons/MinusBox.vue'\nimport CheckboxMarked from 'vue-material-design-icons/CheckboxMarked.vue'\nimport RadioboxMarked from 'vue-material-design-icons/RadioboxMarked.vue'\nimport RadioboxBlank from 'vue-material-design-icons/RadioboxBlank.vue'\nimport ToggleSwitchOff from 'vue-material-design-icons/ToggleSwitchOff.vue'\nimport ToggleSwitch from 'vue-material-design-icons/ToggleSwitch.vue'\n\nimport NcLoadingIcon from '../NcLoadingIcon/index.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\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 24,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tisButtonType() {\n\t\t\treturn this.type === TYPE_BUTTON\n\t\t},\n\n\t\t/**\n\t\t * Returns the proper Material icon depending on the select case\n\t\t *\n\t\t * @return {object}\n\t\t */\n\t\tcheckboxRadioIconElement() {\n\t\t\tif (this.type === TYPE_RADIO) {\n\t\t\t\tif (this.isChecked) {\n\t\t\t\t\treturn RadioboxMarked\n\t\t\t\t}\n\t\t\t\treturn RadioboxBlank\n\t\t\t}\n\n\t\t\t// Switch\n\t\t\tif (this.type === TYPE_SWITCH) {\n\t\t\t\tif (this.isChecked) {\n\t\t\t\t\treturn ToggleSwitch\n\t\t\t\t}\n\t\t\t\treturn ToggleSwitchOff\n\t\t\t}\n\n\t\t\t// Checkbox\n\t\t\tif (this.indeterminate) {\n\t\t\t\treturn MinusBox\n\t\t\t}\n\t\t\tif (this.isChecked) {\n\t\t\t\treturn CheckboxMarked\n\t\t\t}\n\t\t\treturn CheckboxBlankOutline\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.checkbox-content {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n\tuser-select: none;\n\tmin-height: var(--default-clickable-area);\n\tborder-radius: var(--checkbox-radio-switch--border-radius);\n\tpadding: var(--default-grid-baseline) calc((var(--default-clickable-area) - var(--icon-height)) / 2);\n\t// Set to 100% to make text overflow work on button style\n\twidth: 100%;\n\t// but restrict to content so plain checkboxes / radio switches do not expand\n\tmax-width: fit-content;\n\n\t&__text {\n\t\tflex: 1 0;\n\n\t\t&:empty {\n\t\t\t// hide text if empty to ensure checkbox outline is a circle instead of oval\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t&__icon > * {\n\t\twidth: var(--icon-size);\n\t\theight: var(--icon-size);\n\t\tcolor: var(--color-primary-element);\n\t}\n\n\t&--button-variant {\n\t\t.checkbox-content__icon:not(.checkbox-content__icon--checked) > * {\n\t\t\tcolor: var(--color-primary-element);\n\t\t}\n\n\t\t.checkbox-content__icon--checked > * {\n\t\t\tcolor: var(--color-primary-element-text);\n\t\t}\n\t}\n\n\t&--has-text {\n\t\tpadding-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<br>\n\t\tsharingEnabled: {{ sharingEnabled }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tloading: false,\n\t\t\tsharingEnabled: false,\n\t\t}\n\t},\n\tmethods: {\n\t\tonToggle() {\n\t\t\tthis.loading = true\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.sharingEnabled = !this.sharingEnabled\n\t\t\t\tthis.loading = false\n\t\t\t}, 1000)\n\t\t}\n\t}\n}\n</script>\n```\n\n### Standard radio set\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"r\" name=\"sharing_permission_radio\" type=\"radio\">Default permission read</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"rw\" name=\"sharing_permission_radio\" type=\"radio\">Default permission read+write</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"rwx\" name=\"sharing_permission_radio\" type=\"radio\">Default permission read+write+execute</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingPermission: {{ sharingPermission }}\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tsharingPermission: 'r',\n\t\t\t}\n\t\t}\n\t}\n</script>\n```\n\n### Standard radio set with alternative button style\n```vue\n<template>\n\t<div>\n\t\t<h4>Horizontal</h4>\n\t\t<div style=\"display: flex\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"r\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tDefault permission read\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"rw\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tDefault permission read+write\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\t<h4>Vertically</h4>\n\t\t<div style=\"width: fit-content\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"r\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tDefault permission read\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"rw\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tDefault permission read+write\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\tsharingPermission: {{ sharingPermission }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsharingPermission: 'r',\n\t\t}\n\t}\n}\n</script>\n```\n\n### Radio set with button style and icons\n```vue\n<template>\n\t<div>\n\t\t<h4>Horizontal</h4>\n\t\t<div style=\"display: flex\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"y\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tEnable settings\n\t\t\t\t<template #icon><CheckIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"n\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tDisable settings\n\t\t\t\t<template #icon><CancelIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\t<h4>Vertically</h4>\n\t\t<div style=\"width: fit-content\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"y\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tEnable settings\n\t\t\t\t<template #icon><CheckIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"n\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tDisable settings\n\t\t\t\t<template #icon><CancelIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\tSettings enabled: {{ enableSettings === 'y' ? 'yes' : 'no' }}\n\t</div>\n</template>\n<script>\nimport CheckIcon from 'vue-material-design-icons/Check.vue'\nimport CancelIcon from 'vue-material-design-icons/Cancel.vue'\nexport default {\n\tcomponents: {\n\t\tCheckIcon,\n\t\tCancelIcon,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tenableSettings: 'n',\n\t\t}\n\t}\n}\n</script>\n```\n\n### Standard checkbox set\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch :disabled=\"true\" v-model=\"sharingPermission\" value=\"r\" name=\"sharing_permission\">Permission read</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"w\" name=\"sharing_permission\">Permission write</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"d\" name=\"sharing_permission\">Permission delete</NcCheckboxRadioSwitch>\n\t\t<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 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=\"true\">Enable sharing (disabled)</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingEnabled: {{ sharingEnabled }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsharingEnabled: true,\n\t\t}\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<component :is=\"computedWrapperElement\"\n\t\t:id=\"wrapperId\"\n\t\t:aria-label=\"isButtonType && ariaLabel ? ariaLabel : undefined\"\n\t\t:class=\"{\n\t\t\t['checkbox-radio-switch-' + type]: type,\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\tclass=\"checkbox-radio-switch\"\n\t\t:style=\"cssVars\"\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 v-if=\"!isButtonType\"\n\t\t\t:id=\"id\"\n\t\t\t:aria-labelledby=\"!isButtonType && !ariaLabel ? `${id}-label` : null\"\n\t\t\t:aria-label=\"ariaLabel || undefined\"\n\t\t\tclass=\"checkbox-radio-switch__input\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:type=\"inputType\"\n\t\t\t:value=\"value\"\n\t\t\t:checked=\"isChecked\"\n\t\t\t:indeterminate.prop=\"hasIndeterminate ? indeterminate : null\"\n\t\t\t:required=\"required\"\n\t\t\t:name=\"name\"\n\t\t\tv-bind=\"nonDataAttrs\"\n\t\t\tv-on=\"listeners\">\n\t\t<NcCheckboxContent :id=\"!isButtonType ? `${id}-label` : undefined\"\n\t\t\tclass=\"checkbox-radio-switch__content\"\n\t\t\ticon-class=\"checkbox-radio-switch__icon\"\n\t\t\ttext-class=\"checkbox-radio-switch__text\"\n\t\t\t:type=\"type\"\n\t\t\t:indeterminate=\"hasIndeterminate ? indeterminate : false\"\n\t\t\t:button-variant=\"buttonVariant\"\n\t\t\t:is-checked=\"isChecked\"\n\t\t\t:loading=\"loading\"\n\t\t\t:size=\"size\"\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\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 { n, t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcCheckboxContent, { TYPE_BUTTON, TYPE_CHECKBOX, TYPE_RADIO, TYPE_SWITCH } from './NcCheckboxContent.vue'\nimport { useModelMigration } from '../../composables/useModelMigration.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\tbuttonVariant: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Are the elements are all direct siblings?\n\t\t * If so they will be grouped horizontally or vertically\n\t\t *\n\t\t * @type {'no'|'horizontal'|'vertical'}\n\t\t */\n\t\tbuttonVariantGrouped: {\n\t\t\ttype: String,\n\t\t\tdefault: 'no',\n\t\t\tvalidator: v => ['no', 'vertical', 'horizontal'].includes(v),\n\t\t},\n\n\t\t/**\n\t\t * Removed in v9 - use `modelValue` (`v-model`) instead\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\t},\n\n\temits: [\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\t'update: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() {\n\t\tconst model = useModelMigration('checked', 'update:checked')\n\t\treturn {\n\t\t\tmodel,\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.type === TYPE_BUTTON\n\t\t},\n\n\t\tcomputedWrapperElement() {\n\t\t\tif (this.isButtonType) {\n\t\t\t\treturn 'button'\n\t\t\t}\n\t\t\tif (this.wrapperElement !== null) {\n\t\t\t\treturn this.wrapperElement\n\t\t\t}\n\t\t\treturn 'span'\n\t\t},\n\n\t\tlisteners() {\n\t\t\tif (this.isButtonType) {\n\t\t\t\treturn {\n\t\t\t\t\tclick: this.onToggle,\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tchange: this.onToggle,\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Icon size\n\t\t *\n\t\t * @return {number}\n\t\t */\n\t\tsize() {\n\t\t\treturn this.type === TYPE_SWITCH\n\t\t\t\t? 36\n\t\t\t\t: 24\n\t\t},\n\n\t\t/**\n\t\t * Css local variables for this component\n\t\t *\n\t\t * @return {object}\n\t\t */\n\t\tcssVars() {\n\t\t\treturn {\n\t\t\t\t'--icon-size': this.size + 'px',\n\t\t\t\t'--icon-height': (this.type === TYPE_SWITCH ? 16 : this.size) + 'px',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Return the input type.\n\t\t * Switch is not an official type\n\t\t *\n\t\t * @return {string}\n\t\t */\n\t\tinputType() {\n\t\t\tconst nativeTypes = [\n\t\t\t\tTYPE_CHECKBOX,\n\t\t\t\tTYPE_RADIO,\n\t\t\t\tTYPE_BUTTON,\n\t\t\t]\n\t\t\tif (nativeTypes.includes(this.type)) {\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn TYPE_CHECKBOX\n\t\t},\n\n\t\t/**\n\t\t * Check if that entry is checked\n\t\t * If value is defined, we use that as the checked value\n\t\t * If not, we expect true/false in 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.model)) {\n\t\t\t\t\treturn [...this.model].indexOf(this.value) > -1\n\t\t\t\t}\n\t\t\t\treturn this.model === this.value\n\t\t\t}\n\t\t\treturn this.model === true\n\t\t},\n\n\t\thasIndeterminate() {\n\t\t\treturn [\n\t\t\t\tTYPE_CHECKBOX,\n\t\t\t\tTYPE_RADIO,\n\t\t\t].includes(this.inputType)\n\t\t},\n\t},\n\n\tmounted() {\n\t\tif (this.name && this.type === TYPE_CHECKBOX) {\n\t\t\tif (!Array.isArray(this.model)) {\n\t\t\t\tthrow new Error('When using groups of checkboxes, the updated value will be an array.')\n\t\t\t}\n\t\t}\n\n\t\t// https://material.io/components/checkboxes#usage\n\t\tif (this.name && this.type === TYPE_SWITCH) {\n\t\t\tthrow new Error('Switches are not made to be used for data sets. Please use checkboxes instead.')\n\t\t}\n\n\t\t// https://material.io/components/checkboxes#usage\n\t\tif (typeof this.model !== 'boolean' && this.type === TYPE_SWITCH) {\n\t\t\tthrow new Error('Switches can only be used with boolean as checked prop.')\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\n\t\tn,\n\n\t\tonToggle(event) {\n\t\t\tif (this.disabled || event.target.tagName.toLowerCase() === 'a') {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If this is a radio, there can only be one value\n\t\t\tif (this.type === TYPE_RADIO) {\n\t\t\t\tthis.model = this.value\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If this is a radio, there can only be one value\n\t\t\tif (this.type === TYPE_SWITCH) {\n\t\t\t\tthis.model = !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.model === 'boolean') {\n\t\t\t\tthis.model = !this.model\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.model = values.filter((v) => v !== this.value)\n\t\t\t} else {\n\t\t\t\tthis.model = [...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\tdisplay: flex;\n\talign-items: center;\n\tcolor: var(--color-main-text);\n\tbackground-color: transparent;\n\tfont-size: var(--default-font-size);\n\tline-height: var(--default-line-height);\n\tpadding: 0;\n\tposition: relative;\n\n\t&__input {\n\t\tposition: absolute;\n\t\tz-index: -1;\n\t\topacity: 0 !important; // We need !important, or it gets overwritten by server style\n\t\twidth: var(--icon-size);\n\t\theight: var(--icon-size);\n\t\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]}

package/dist/chunks/{NcCollectionList-0Jx-DWg2.cjs → NcCollectionList-BStYmq4u.cjs}

@@ -3,11 +3,11 @@ require('../assets/NcCollectionList-yjTCAR46.css');
 const debounce = require("debounce");
 const Vue = require("vue");
 const _l10n = require("./_l10n-BiiXtYiP.cjs");
-const NcAvatar = require("./NcAvatar-B8FOIz7P.cjs");
-const NcSelect = require("./NcSelect-ByaW3kG-.cjs");
+const NcAvatar = require("./NcAvatar-D_1clyWB.cjs");
+const NcSelect = require("./NcSelect-D2xnxw4_.cjs");
 const autolink = require("./autolink-BAgL31EZ.cjs");
 const NcActions = require("./NcActions-B7DbEbCo.cjs");
-const NcActionButton = require("./NcActionButton-CXeEXQLT.cjs");
+const NcActionButton = require("./NcActionButton-CD87AU6W.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const axios = require("@nextcloud/axios");
 const router = require("@nextcloud/router");
@@ -423,4 +423,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcCollectionList = __component__.exports;
 exports.NcCollectionList = NcCollectionList;
-//# sourceMappingURL=NcCollectionList-0Jx-DWg2.cjs.map
+//# sourceMappingURL=NcCollectionList-BStYmq4u.cjs.map

package/dist/chunks/{NcCollectionList-0Jx-DWg2.cjs.map → NcCollectionList-BStYmq4u.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcCollectionList-0Jx-DWg2.cjs","sources":["../../src/components/NcCollectionList/NcCollectionListItem.vue","../../src/components/NcCollectionList/service.ts","../../src/components/NcCollectionList/useCollections.js","../../src/components/NcCollectionList/NcCollectionList.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<li class=\"collection-list-item\">\n\t\t<NcAvatar :display-name=\"collection.name\" allow-placeholder class=\"collection-avatar\" />\n\t\t<span v-if=\"newName === null\"\n\t\t\tclass=\"collection-item-name\"\n\t\t\ttitle=\"\"\n\t\t\t@click=\"showDetails\">{{ collection.name }}</span>\n\t\t<form v-else :class=\"{'should-shake': error }\" @submit.prevent=\"renameCollection\">\n\t\t\t<input v-model=\"newName\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tautocomplete=\"off\"\n\t\t\t\tautocapitalize=\"off\">\n\t\t\t<input type=\"submit\" value=\"\" class=\"icon-confirm\">\n\t\t</form>\n\t\t<div v-if=\"!detailsOpen && newName === null\" class=\"linked-icons\">\n\t\t\t<component :is=\"getComponent(resource).component\"\n\t\t\t\tv-for=\"resource in resources.slice(0, 2)\"\n\t\t\t\t:key=\"resource.type + '|' + resource.id\"\n\t\t\t\t:title=\"resource.name\"\n\t\t\t\t:to=\"getComponent(resource).to\"\n\t\t\t\t:href=\"getComponent(resource).href\"\n\t\t\t\t:class=\"typeClass(resource)\">\n\t\t\t\t<img :src=\"iconUrl(resource)\" :alt=\"resource.name\">\n\t\t\t</component>\n\t\t</div>\n\n\t\t<span v-if=\"newName === null\" class=\"sharingOptionsGroup\">\n\t\t\t<NcActions>\n\t\t\t\t<NcActionButton icon=\"icon-info\"\n\t\t\t\t\t@click.prevent=\"toggleDetails\">\n\t\t\t\t\t{{ detailsOpen ? t('Hide details') : t('Show details') }}\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton icon=\"icon-rename\"\n\t\t\t\t\t@click.prevent=\"openRename\">\n\t\t\t\t\t{{ t('Rename project') }}\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActions>\n\t\t</span>\n\n\t\t<transition name=\"fade\">\n\t\t\t<div v-if=\"error\" class=\"error\">\n\t\t\t\t{{ error }}\n\t\t\t</div>\n\t\t</transition>\n\t\t<transition name=\"fade\">\n\t\t\t<ul v-if=\"detailsOpen\" class=\"resource-list-details\">\n\t\t\t\t<li v-for=\"resource in resources\"\n\t\t\t\t\t:key=\"resource.type + '|' + resource.id\"\n\t\t\t\t\t:class=\"typeClass(resource)\">\n\t\t\t\t\t<component :is=\"getComponent(resource).component\"\n\t\t\t\t\t\t:to=\"getComponent(resource).to\"\n\t\t\t\t\t\t:href=\"getComponent(resource).href\">\n\t\t\t\t\t\t<img :src=\"iconUrl(resource)\" :alt=\"resource.name\">\n\t\t\t\t\t\t<span class=\"resource-name\">{{ resource.name || '' }}</span>\n\t\t\t\t\t</component>\n\t\t\t\t\t<span class=\"icon-close\" @click=\"removeResource(collection, resource)\" />\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</transition>\n\t</li>\n</template>\n\n<script>\nimport { t } from '../../l10n.js'\nimport { getRoute } from '../NcRichText/autolink.js'\n\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcAvatar from '../NcAvatar/index.js'\n\nexport default {\n\tname: 'NcCollectionListItem',\n\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcActions,\n\t\tNcActionButton,\n\t},\n\n\tprops: {\n\t\tcollection: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\terror: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\temits: ['remove-resource', 'rename-collection'],\n\n\tdata() {\n\t\treturn {\n\t\t\tdetailsOpen: false,\n\t\t\tnewName: null,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tgetIcon() {\n\t\t\treturn (resource) => [resource.iconClass]\n\t\t},\n\n\t\ttypeClass() {\n\t\t\treturn (resource) => 'resource-type-' + resource.type\n\t\t},\n\n\t\tresources() {\n\t\t\t// invalid resources come from server as empty array ([]) and not an object\n\t\t\treturn this.collection.resources?.filter(resource => !Array.isArray(resource)) ?? []\n\t\t},\n\n\t\tgetComponent() {\n\t\t\treturn (resource) => {\n\t\t\t\tconst route = getRoute(this.$router, resource.link)\n\n\t\t\t\treturn route\n\t\t\t\t\t? { component: 'router-link', to: route, href: undefined }\n\t\t\t\t\t: { component: 'a', to: undefined, href: resource.link }\n\t\t\t}\n\t\t},\n\n\t\ticonUrl() {\n\t\t\treturn (resource) => {\n\t\t\t\tif (resource.mimetype) {\n\t\t\t\t\treturn OC.MimeType.getIconUrl(resource.mimetype)\n\t\t\t\t}\n\t\t\t\tif (resource.iconUrl) {\n\t\t\t\t\treturn resource.iconUrl\n\t\t\t\t}\n\t\t\t\treturn ''\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\ttoggleDetails() {\n\t\t\tthis.detailsOpen = !this.detailsOpen\n\t\t},\n\n\t\tshowDetails() {\n\t\t\tthis.detailsOpen = true\n\t\t},\n\n\t\tremoveResource(collection, resource) {\n\t\t\tthis.$emit('remove-resource', {\n\t\t\t\tcollectionId: collection.id,\n\t\t\t\tresourceType: resource.type,\n\t\t\t\tresourceId: resource.id,\n\t\t\t})\n\t\t},\n\n\t\topenRename() {\n\t\t\tthis.newName = this.collection.name\n\t\t},\n\n\t\trenameCollection() {\n\t\t\tif (this.newName) {\n\t\t\t\tthis.$emit('rename-collection', {\n\t\t\t\t\tcollectionId: this.collection.id,\n\t\t\t\t\tname: this.newName,\n\t\t\t\t})\n\t\t\t}\n\t\t\tthis.newName = null\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.fade-enter-active, .fade-leave-active {\n\ttransition: opacity .3s ease;\n}\n\n.fade-enter, .fade-leave-to\n\t/* .fade-leave-active below version 2.1.8 */\n{\n\topacity: 0;\n}\n\n.linked-icons {\n\tdisplay: flex;\n\n\timg {\n\t\tpadding: 12px;\n\t\theight: 44px;\n\t\tdisplay: block;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\topacity: 0.7;\n\n\t\t&:hover {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n\n.popovermenu {\n\tdisplay: none;\n\n\t&.open {\n\t\tdisplay: block;\n\t}\n}\n\nli.collection-list-item {\n\tflex-wrap: wrap;\n\theight: auto;\n\tcursor: pointer;\n\tmargin-bottom: 0 !important;\n\n\t.collection-avatar {\n\t\tmargin-top: 0;\n\t}\n\n\tform, .collection-item-name {\n\t\tflex-basis: 10%;\n\t\tflex-grow: 1;\n\t\tdisplay: flex;\n\t}\n\n\t.collection-item-name {\n\t\tpadding: 12px 9px;\n\t}\n\n\tinput {\n\t\tmargin-top: 4px;\n\t\tborder-color: var(--color-border-maxcontrast);\n\n\t\t&[type=text] {\n\t\t\tflex-grow: 1;\n\t\t}\n\t}\n\n\t.error {\n\t\tflex-basis: 100%;\n\t\twidth: 100%;\n\t}\n\n\t.resource-list-details {\n\t\tflex-basis: 100%;\n\t\twidth: 100%;\n\n\t\tli {\n\t\t\tdisplay: flex;\n\t\t\tmargin-left: 44px;\n\t\t\tborder-radius: 3px;\n\t\t\tcursor: pointer;\n\n\t\t\t&:hover {\n\t\t\t\tbackground-color: var(--color-background-dark);\n\t\t\t}\n\n\t\t\ta {\n\t\t\t\tflex-grow: 1;\n\t\t\t\tpadding: 3px;\n\t\t\t\tmax-width: calc(100% - 30px);\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\tspan {\n\t\t\tdisplay: inline-block;\n\t\t\tvertical-align: top;\n\t\t\tmargin-right: 10px;\n\t\t}\n\n\t\tspan.resource-name {\n\t\t\ttext-overflow: ellipsis;\n\t\t\toverflow: hidden;\n\t\t\tposition: relative;\n\t\t\tvertical-align: top;\n\t\t\twhite-space: nowrap;\n\t\t\tflex-grow: 1;\n\t\t\tpadding: 4px;\n\t\t}\n\n\t\timg {\n\t\t\twidth: 24px;\n\t\t\theight: 24px;\n\t\t}\n\n\t\t.icon-close {\n\t\t\topacity: .7;\n\n\t\t\t&:hover, &:focus {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.should-shake {\n\tanimation: shake 0.6s 1 linear;\n}\n\n@keyframes shake {\n\t0% {\n\t\ttransform: translate(15px);\n\t}\n\t20% {\n\t\ttransform: translate(-15px);\n\t}\n\t40% {\n\t\ttransform: translate(7px);\n\t}\n\t60% {\n\t\ttransform: translate(-7px);\n\t}\n\t80% {\n\t\ttransform: translate(3px);\n\t}\n\t100% {\n\t\ttransform: translate(0px);\n\t}\n}\n</style>\n","/**\n * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport axios, { type AxiosResponse } from '@nextcloud/axios'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport type { OCSResponse } from '@nextcloud/typings/ocs'\n\n/**\n * Extracts the OCS data from a response\n * @param response OCS response\n */\nfunction extractOcsData(response: AxiosResponse<OCSResponse>) {\n\treturn response.data.ocs.data\n}\n\n/**\n * Lists all collections\n * @param collectionId Collection ID\n */\nexport function listCollectionService(collectionId: number) {\n\treturn axios.get(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId })).then(extractOcsData)\n}\n\n/**\n * Renames a collection\n * @param collectionId Collection ID\n * @param collectionName New collection name\n */\nexport function renameCollectionService(collectionId: number, collectionName: string) {\n\treturn axios.put(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId }), { collectionName }).then(extractOcsData)\n}\n\n/**\n * Lists all collections for a resource\n * @param resourceType Resource type\n * @param resourceId Resource ID\n */\nexport function getCollectionsByResourceService(resourceType: string, resourceId: string) {\n\treturn axios.get(generateOcsUrl('collaboration/resources/{resourceType}/{resourceId}', { resourceType, resourceId })).then(extractOcsData)\n}\n\n/**\n * Creates a collection\n * @param resourceType Resource type\n * @param resourceId Resource ID\n * @param name Collection name\n */\nexport function createCollectionService(resourceType: string, resourceId: string, name: string) {\n\treturn axios.post(generateOcsUrl('collaboration/resources/{resourceType}/{resourceId}', { resourceType, resourceId }), { name }).then(extractOcsData)\n}\n\n/**\n * Adds a resource to a collection\n * @param collectionId Collection ID\n * @param resourceType Resource type\n * @param resourceId Resource ID\n */\nexport function addResourceService(collectionId: number, resourceType: string, resourceId: string) {\n\treturn axios.post(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId }), { resourceType, resourceId }).then(extractOcsData)\n}\n\n/**\n * Removes a resource from a collection\n * @param collectionId Collection ID\n * @param resourceType Resource type\n * @param resourceId Resource ID\n */\nexport function removeResourceService(collectionId: number, resourceType: string, resourceId: string) {\n\treturn axios.delete(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId }), { params: { resourceType, resourceId } }).then(extractOcsData)\n}\n\n/**\n * Searches for collections\n * @param query Search query\n */\nexport function searchService(query: string) {\n\treturn axios.get(generateOcsUrl('collaboration/resources/collections/search/{query}', { query })).then(extractOcsData)\n}\n","/**\n * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { ref, set } from 'vue'\nimport {\n\trenameCollectionService,\n\tgetCollectionsByResourceService,\n\tcreateCollectionService,\n\taddResourceService,\n\tremoveResourceService,\n} from './service.ts'\n\n/**\n * Use collections composable\n */\nexport function useCollections() {\n\t// State\n\tconst storedCollections = ref([])\n\n\t// Mutations\n\tconst addCollections = (collections) => {\n\t\tset(storedCollections, 'value', collections)\n\t}\n\n\tconst addCollection = (collection) => {\n\t\tset(storedCollections, 'value', [...storedCollections.value, collection])\n\t}\n\n\tconst removeCollection = (collectionId) => {\n\t\tset(storedCollections, 'value', storedCollections.value.filter(item => item.id !== collectionId))\n\t}\n\n\tconst updateCollection = (collection) => {\n\t\tconst index = storedCollections.value.findIndex(item => item.id === collection.id)\n\t\tif (index !== -1) {\n\t\t\tset(storedCollections.value, index, collection)\n\t\t} else {\n\t\t\taddCollection(collection)\n\t\t}\n\t}\n\n\t// Actions\n\tconst fetchCollectionsByResource = async ({ resourceType, resourceId }) => {\n\t\tconst collections = await getCollectionsByResourceService(resourceType, resourceId)\n\n\t\taddCollections(collections)\n\t}\n\n\tconst createCollection = async ({ baseResourceType, baseResourceId, resourceType, resourceId, name }) => {\n\t\tconst collection = await createCollectionService(baseResourceType, baseResourceId, name)\n\n\t\taddCollection(collection)\n\t\tawait addResourceToCollection({\n\t\t\tcollectionId: collection.id,\n\t\t\tresourceType,\n\t\t\tresourceId,\n\t\t})\n\t}\n\n\tconst renameCollection = async ({ collectionId, name }) => {\n\t\tconst collection = await renameCollectionService(collectionId, name)\n\n\t\tupdateCollection(collection)\n\t}\n\n\tconst addResourceToCollection = async ({ collectionId, resourceType, resourceId }) => {\n\t\tconst collection = await addResourceService(collectionId, resourceType, String(resourceId))\n\n\t\tupdateCollection(collection)\n\t}\n\n\tconst removeResourceFromCollection = async ({ collectionId, resourceType, resourceId }) => {\n\t\tconst collection = await removeResourceService(collectionId, resourceType, String(resourceId))\n\n\t\tif (collection.resources.length > 0) {\n\t\t\tupdateCollection(collection)\n\t\t} else {\n\t\t\tremoveCollection(collectionId)\n\t\t}\n\t}\n\n\treturn {\n\t\tstoredCollections,\n\t\tfetchCollectionsByResource,\n\t\tcreateCollection,\n\t\trenameCollection,\n\t\taddResourceToCollection,\n\t\tremoveResourceFromCollection,\n\t}\n}\n","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nProvides a Vue standalone component for Nextcloud Projects feature introduced in Nextcloud 16. Replaces deprecated `nextcloud-vue-collections` library.\n\nProjects feature is deprecated since Nextcloud 25, and superseded by Related resources. See [NcRelatedResourcesPanel](#/Components/NcRelatedResourcesPanel) documentation for more information.\n\n### Usage\n\nTo enable feature in Nextcloud, run following command:\n```sh\nocc config:system:set --value true 'projects.enabled'\n```\n</docs>\n\n<template>\n\t<ul v-if=\"collections && type && id\" id=\"collection-list\" class=\"collection-list\">\n\t\t<li @click=\"showSelect\">\n\t\t\t<div class=\"avatar\">\n\t\t\t\t<span class=\"icon-projects\" />\n\t\t\t</div>\n\t\t\t<div id=\"collection-select-container\">\n\t\t\t\t<NcSelect ref=\"select\"\n\t\t\t\t\tv-model=\"value\"\n\t\t\t\t\t:aria-label-combobox=\"t('Add to a project')\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t\t:placeholder=\"placeholder\"\n\t\t\t\t\tlabel=\"title\"\n\t\t\t\t\t:limit=\"5\"\n\t\t\t\t\t@close=\"isSelectOpen = false\"\n\t\t\t\t\t@open=\"isSelectOpen = true\"\n\t\t\t\t\t@option:selected=\"select\"\n\t\t\t\t\t@search=\"search\">\n\t\t\t\t\t<template #selected-option=\"option\">\n\t\t\t\t\t\t<span class=\"option__desc\">\n\t\t\t\t\t\t\t<span class=\"option__title\">{{ option.title }}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</template>\n\t\t\t\t\t<template #option=\"option\">\n\t\t\t\t\t\t<span class=\"option__wrapper\">\n\t\t\t\t\t\t\t<span v-if=\"option.class\" :class=\"option.class\" class=\"avatar\" />\n\t\t\t\t\t\t\t<NcAvatar v-else-if=\"option.method !== 2\" allow-placeholder :display-name=\"option.title\" />\n\t\t\t\t\t\t\t<span class=\"option__title\">{{ option.title }}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</template>\n\t\t\t\t\t<p class=\"hint\">\n\t\t\t\t\t\t{{ t('Connect items to a project to make them easier to find') }}\n\t\t\t\t\t</p>\n\t\t\t\t</NcSelect>\n\t\t\t</div>\n\t\t</li>\n\t\t<transition name=\"fade\">\n\t\t\t<li v-if=\"error\" class=\"error\">\n\t\t\t\t{{ error }}\n\t\t\t</li>\n\t\t</transition>\n\t\t<NcCollectionListItem v-for=\"collection in collections\"\n\t\t\t:key=\"collection.id\"\n\t\t\t:collection=\"collection\"\n\t\t\t:error=\"collectionsError[collection.id]\"\n\t\t\t@rename-collection=\"renameCollectionFromItem\"\n\t\t\t@remove-resource=\"removeResourceFromCollection\" />\n\t</ul>\n</template>\n\n<script>\nimport debounce from 'debounce'\nimport { ref } from 'vue'\nimport { t } from '../../l10n.js'\n\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcSelect from '../NcSelect/index.js'\nimport NcCollectionListItem from './NcCollectionListItem.vue'\n\nimport { useCollections } from './useCollections.js'\nimport { searchService } from './service.ts'\n\nconst METHOD_CREATE_COLLECTION = 0\nconst METHOD_ADD_TO_COLLECTION = 1\n\nexport default {\n\tname: 'NcCollectionList',\n\n\tcomponents: {\n\t\tNcCollectionListItem,\n\t\tNcAvatar,\n\t\tNcSelect,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Resource type identifier\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Unique id of the resource\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Name of the resource\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Whether the component is active (to start fetch resources)\n\t\t */\n\t\tisActive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\tsetup() {\n\t\tconst {\n\t\t\tstoredCollections,\n\t\t\tfetchCollectionsByResource,\n\t\t\tcreateCollection,\n\t\t\taddResourceToCollection,\n\t\t\tremoveResourceFromCollection,\n\t\t\trenameCollection,\n\t\t} = useCollections()\n\n\t\tconst searchCollections = ref([])\n\t\tconst search = debounce(function(query, loading) {\n\t\t\tif (query !== '') {\n\t\t\t\tloading(true)\n\t\t\t\tsearchService(query).then(collections => {\n\t\t\t\t\tsearchCollections.value = collections\n\t\t\t\t}).catch(e => {\n\t\t\t\t\tconsole.error('Failed to search for collections', e)\n\t\t\t\t}).finally(() => {\n\t\t\t\t\tloading(false)\n\t\t\t\t})\n\t\t\t}\n\t\t}, 500)\n\n\t\treturn {\n\t\t\tstoredCollections,\n\t\t\tfetchCollectionsByResource,\n\t\t\tcreateCollection,\n\t\t\taddResourceToCollection,\n\t\t\tremoveResourceFromCollection,\n\t\t\trenameCollection,\n\t\t\tsearchCollections,\n\t\t\tsearch,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tselectIsOpen: false,\n\t\t\tgeneratingCodes: false,\n\t\t\tcodes: undefined,\n\t\t\tvalue: null,\n\t\t\tmodel: {},\n\t\t\tcollectionsError: {},\n\t\t\terror: null,\n\t\t\tisSelectOpen: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcollections() {\n\t\t\treturn this.storedCollections.filter(collection => collection.resources\n\t\t\t\t.some(resource => resource && resource.id === String(this.id) && resource.type === this.type),\n\t\t\t)\n\t\t},\n\n\t\tplaceholder() {\n\t\t\treturn this.isSelectOpen\n\t\t\t\t? t('Type to search for existing projects')\n\t\t\t\t: t('Add to a project')\n\t\t},\n\n\t\toptions() {\n\t\t\tconst options = []\n\t\t\twindow.OCP.Collaboration.getTypes().sort().forEach(type => {\n\t\t\t\toptions.push({\n\t\t\t\t\tmethod: METHOD_CREATE_COLLECTION,\n\t\t\t\t\ttype,\n\t\t\t\t\ttitle: window.OCP.Collaboration.getLabel(type),\n\t\t\t\t\tclass: window.OCP.Collaboration.getIcon(type),\n\t\t\t\t\taction: () => window.OCP.Collaboration.trigger(type),\n\t\t\t\t})\n\t\t\t})\n\t\t\tfor (const index in this.searchCollections) {\n\t\t\t\tif (!this.collections.find(collection => collection.id === this.searchCollections[index].id)) {\n\t\t\t\t\toptions.push({\n\t\t\t\t\t\tmethod: METHOD_ADD_TO_COLLECTION,\n\t\t\t\t\t\ttitle: this.searchCollections[index].name,\n\t\t\t\t\t\tcollectionId: this.searchCollections[index].id,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn options\n\t\t},\n\n\t\tresourceIdentifier() {\n\t\t\treturn {\n\t\t\t\tresourceType: this.type,\n\t\t\t\tresourceId: this.id,\n\t\t\t\tisActive: this.isActive,\n\t\t\t}\n\t\t},\n\t},\n\n\twatch: {\n\t\tresourceIdentifier: {\n\t\t\tdeep: true,\n\t\t\timmediate: true,\n\t\t\thandler(resourceIdentifier) {\n\t\t\t\tif (!resourceIdentifier.isActive || !resourceIdentifier.resourceId || !resourceIdentifier.resourceType) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.fetchCollectionsByResource(resourceIdentifier)\n\t\t\t},\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\tselect(selectedOption) {\n\t\t\tif (selectedOption.method === METHOD_CREATE_COLLECTION) {\n\t\t\t\tselectedOption.action().then(resourceId => {\n\t\t\t\t\tthis.createCollection({\n\t\t\t\t\t\tbaseResourceType: this.type,\n\t\t\t\t\t\tbaseResourceId: this.id,\n\t\t\t\t\t\tresourceType: selectedOption.type,\n\t\t\t\t\t\tresourceId,\n\t\t\t\t\t\tname: this.name,\n\t\t\t\t\t}).catch((e) => {\n\t\t\t\t\t\tthis.setError(t('Failed to create a project'), e)\n\t\t\t\t\t})\n\t\t\t\t}).catch((e) => {\n\t\t\t\t\tconsole.error('No resource selected', e)\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tif (selectedOption.method === METHOD_ADD_TO_COLLECTION) {\n\t\t\t\tthis.addResourceToCollection({\n\t\t\t\t\tcollectionId: selectedOption.collectionId, resourceType: this.type, resourceId: this.id,\n\t\t\t\t}).catch((e) => {\n\t\t\t\t\tthis.setError(t('Failed to add the item to the project'), e)\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tthis.value = null\n\t\t},\n\n\t\tshowSelect() {\n\t\t\tthis.selectIsOpen = true\n\t\t\tthis.$refs.select.$el.focus()\n\t\t},\n\n\t\tsetError(error, e) {\n\t\t\tconsole.error(error, e)\n\t\t\tthis.error = error\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.error = null\n\t\t\t}, 5000)\n\t\t},\n\n\t\trenameCollectionFromItem({ collectionId, name }) {\n\t\t\tthis.renameCollection({ collectionId, name })\n\t\t\t\t.catch((e) => {\n\t\t\t\t\tconsole.error(t('Failed to rename the project'), e)\n\t\t\t\t\tthis.collectionsError[collectionId] = t('Failed to rename the project')\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tthis.collectionsError[collectionId] = null\n\t\t\t\t\t}, 5000)\n\t\t\t\t})\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.collection-list * {\n\tbox-sizing: border-box;\n}\n\n.collection-list > li {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 12px;\n\n\t& > .avatar {\n\t\tmargin-top: 0;\n\t}\n}\n\n#collection-select-container {\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.v-select {\n\t// NcAvatar in the dropdown\n\tspan.avatar {\n\t\tdisplay: block;\n\t\tpadding: 16px;\n\t\topacity: .7;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\n\t\t&:hover {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n\np.hint {\n\tz-index: 1;\n\t// fix alignment\n\tmargin-top: -16px;\n\tpadding: 8px 8px;\n\tcolor: var(--color-text-maxcontrast);\n\tline-height: normal;\n}\n\ndiv.avatar {\n\twidth: 32px;\n\theight: 32px;\n\tmargin: 0;\n\tpadding: 8px;\n\tbackground-color: var(--color-background-dark);\n\tmargin-top: 30px;\n}\n\n/** TODO provide white icon in core */\n.icon-projects {\n\tdisplay: block;\n\tpadding: 8px;\n\tbackground-repeat: no-repeat;\n\tbackground-position: center;\n}\n\n.option__wrapper {\n\tdisplay: flex;\n\n\t.avatar {\n\t\tdisplay: block;\n\t\twidth: 32px;\n\t\theight: 32px;\n\t\tbackground-color: var(--color-background-darker) !important;\n\t}\n\n\t.option__title {\n\t\tpadding: 4px;\n\t}\n}\n\n.fade-enter-active, .fade-leave-active {\n\ttransition: opacity .5s;\n}\n\n.fade-enter, .fade-leave-to {\n\topacity: 0;\n}\n\n</style>\n"],"names":["_sfc_main","NcAvatar","NcActions","NcActionButton","getRoute","t","axios","generateOcsUrl","ref","set","NcSelect","debounce"],"mappings":"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"}
+{"version":3,"file":"NcCollectionList-BStYmq4u.cjs","sources":["../../src/components/NcCollectionList/NcCollectionListItem.vue","../../src/components/NcCollectionList/service.ts","../../src/components/NcCollectionList/useCollections.js","../../src/components/NcCollectionList/NcCollectionList.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<li class=\"collection-list-item\">\n\t\t<NcAvatar :display-name=\"collection.name\" allow-placeholder class=\"collection-avatar\" />\n\t\t<span v-if=\"newName === null\"\n\t\t\tclass=\"collection-item-name\"\n\t\t\ttitle=\"\"\n\t\t\t@click=\"showDetails\">{{ collection.name }}</span>\n\t\t<form v-else :class=\"{'should-shake': error }\" @submit.prevent=\"renameCollection\">\n\t\t\t<input v-model=\"newName\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tautocomplete=\"off\"\n\t\t\t\tautocapitalize=\"off\">\n\t\t\t<input type=\"submit\" value=\"\" class=\"icon-confirm\">\n\t\t</form>\n\t\t<div v-if=\"!detailsOpen && newName === null\" class=\"linked-icons\">\n\t\t\t<component :is=\"getComponent(resource).component\"\n\t\t\t\tv-for=\"resource in resources.slice(0, 2)\"\n\t\t\t\t:key=\"resource.type + '|' + resource.id\"\n\t\t\t\t:title=\"resource.name\"\n\t\t\t\t:to=\"getComponent(resource).to\"\n\t\t\t\t:href=\"getComponent(resource).href\"\n\t\t\t\t:class=\"typeClass(resource)\">\n\t\t\t\t<img :src=\"iconUrl(resource)\" :alt=\"resource.name\">\n\t\t\t</component>\n\t\t</div>\n\n\t\t<span v-if=\"newName === null\" class=\"sharingOptionsGroup\">\n\t\t\t<NcActions>\n\t\t\t\t<NcActionButton icon=\"icon-info\"\n\t\t\t\t\t@click.prevent=\"toggleDetails\">\n\t\t\t\t\t{{ detailsOpen ? t('Hide details') : t('Show details') }}\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton icon=\"icon-rename\"\n\t\t\t\t\t@click.prevent=\"openRename\">\n\t\t\t\t\t{{ t('Rename project') }}\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActions>\n\t\t</span>\n\n\t\t<transition name=\"fade\">\n\t\t\t<div v-if=\"error\" class=\"error\">\n\t\t\t\t{{ error }}\n\t\t\t</div>\n\t\t</transition>\n\t\t<transition name=\"fade\">\n\t\t\t<ul v-if=\"detailsOpen\" class=\"resource-list-details\">\n\t\t\t\t<li v-for=\"resource in resources\"\n\t\t\t\t\t:key=\"resource.type + '|' + resource.id\"\n\t\t\t\t\t:class=\"typeClass(resource)\">\n\t\t\t\t\t<component :is=\"getComponent(resource).component\"\n\t\t\t\t\t\t:to=\"getComponent(resource).to\"\n\t\t\t\t\t\t:href=\"getComponent(resource).href\">\n\t\t\t\t\t\t<img :src=\"iconUrl(resource)\" :alt=\"resource.name\">\n\t\t\t\t\t\t<span class=\"resource-name\">{{ resource.name || '' }}</span>\n\t\t\t\t\t</component>\n\t\t\t\t\t<span class=\"icon-close\" @click=\"removeResource(collection, resource)\" />\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</transition>\n\t</li>\n</template>\n\n<script>\nimport { t } from '../../l10n.js'\nimport { getRoute } from '../NcRichText/autolink.js'\n\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcAvatar from '../NcAvatar/index.js'\n\nexport default {\n\tname: 'NcCollectionListItem',\n\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcActions,\n\t\tNcActionButton,\n\t},\n\n\tprops: {\n\t\tcollection: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\terror: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\temits: ['remove-resource', 'rename-collection'],\n\n\tdata() {\n\t\treturn {\n\t\t\tdetailsOpen: false,\n\t\t\tnewName: null,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tgetIcon() {\n\t\t\treturn (resource) => [resource.iconClass]\n\t\t},\n\n\t\ttypeClass() {\n\t\t\treturn (resource) => 'resource-type-' + resource.type\n\t\t},\n\n\t\tresources() {\n\t\t\t// invalid resources come from server as empty array ([]) and not an object\n\t\t\treturn this.collection.resources?.filter(resource => !Array.isArray(resource)) ?? []\n\t\t},\n\n\t\tgetComponent() {\n\t\t\treturn (resource) => {\n\t\t\t\tconst route = getRoute(this.$router, resource.link)\n\n\t\t\t\treturn route\n\t\t\t\t\t? { component: 'router-link', to: route, href: undefined }\n\t\t\t\t\t: { component: 'a', to: undefined, href: resource.link }\n\t\t\t}\n\t\t},\n\n\t\ticonUrl() {\n\t\t\treturn (resource) => {\n\t\t\t\tif (resource.mimetype) {\n\t\t\t\t\treturn OC.MimeType.getIconUrl(resource.mimetype)\n\t\t\t\t}\n\t\t\t\tif (resource.iconUrl) {\n\t\t\t\t\treturn resource.iconUrl\n\t\t\t\t}\n\t\t\t\treturn ''\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\ttoggleDetails() {\n\t\t\tthis.detailsOpen = !this.detailsOpen\n\t\t},\n\n\t\tshowDetails() {\n\t\t\tthis.detailsOpen = true\n\t\t},\n\n\t\tremoveResource(collection, resource) {\n\t\t\tthis.$emit('remove-resource', {\n\t\t\t\tcollectionId: collection.id,\n\t\t\t\tresourceType: resource.type,\n\t\t\t\tresourceId: resource.id,\n\t\t\t})\n\t\t},\n\n\t\topenRename() {\n\t\t\tthis.newName = this.collection.name\n\t\t},\n\n\t\trenameCollection() {\n\t\t\tif (this.newName) {\n\t\t\t\tthis.$emit('rename-collection', {\n\t\t\t\t\tcollectionId: this.collection.id,\n\t\t\t\t\tname: this.newName,\n\t\t\t\t})\n\t\t\t}\n\t\t\tthis.newName = null\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.fade-enter-active, .fade-leave-active {\n\ttransition: opacity .3s ease;\n}\n\n.fade-enter, .fade-leave-to\n\t/* .fade-leave-active below version 2.1.8 */\n{\n\topacity: 0;\n}\n\n.linked-icons {\n\tdisplay: flex;\n\n\timg {\n\t\tpadding: 12px;\n\t\theight: 44px;\n\t\tdisplay: block;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\topacity: 0.7;\n\n\t\t&:hover {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n\n.popovermenu {\n\tdisplay: none;\n\n\t&.open {\n\t\tdisplay: block;\n\t}\n}\n\nli.collection-list-item {\n\tflex-wrap: wrap;\n\theight: auto;\n\tcursor: pointer;\n\tmargin-bottom: 0 !important;\n\n\t.collection-avatar {\n\t\tmargin-top: 0;\n\t}\n\n\tform, .collection-item-name {\n\t\tflex-basis: 10%;\n\t\tflex-grow: 1;\n\t\tdisplay: flex;\n\t}\n\n\t.collection-item-name {\n\t\tpadding: 12px 9px;\n\t}\n\n\tinput {\n\t\tmargin-top: 4px;\n\t\tborder-color: var(--color-border-maxcontrast);\n\n\t\t&[type=text] {\n\t\t\tflex-grow: 1;\n\t\t}\n\t}\n\n\t.error {\n\t\tflex-basis: 100%;\n\t\twidth: 100%;\n\t}\n\n\t.resource-list-details {\n\t\tflex-basis: 100%;\n\t\twidth: 100%;\n\n\t\tli {\n\t\t\tdisplay: flex;\n\t\t\tmargin-left: 44px;\n\t\t\tborder-radius: 3px;\n\t\t\tcursor: pointer;\n\n\t\t\t&:hover {\n\t\t\t\tbackground-color: var(--color-background-dark);\n\t\t\t}\n\n\t\t\ta {\n\t\t\t\tflex-grow: 1;\n\t\t\t\tpadding: 3px;\n\t\t\t\tmax-width: calc(100% - 30px);\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\tspan {\n\t\t\tdisplay: inline-block;\n\t\t\tvertical-align: top;\n\t\t\tmargin-right: 10px;\n\t\t}\n\n\t\tspan.resource-name {\n\t\t\ttext-overflow: ellipsis;\n\t\t\toverflow: hidden;\n\t\t\tposition: relative;\n\t\t\tvertical-align: top;\n\t\t\twhite-space: nowrap;\n\t\t\tflex-grow: 1;\n\t\t\tpadding: 4px;\n\t\t}\n\n\t\timg {\n\t\t\twidth: 24px;\n\t\t\theight: 24px;\n\t\t}\n\n\t\t.icon-close {\n\t\t\topacity: .7;\n\n\t\t\t&:hover, &:focus {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.should-shake {\n\tanimation: shake 0.6s 1 linear;\n}\n\n@keyframes shake {\n\t0% {\n\t\ttransform: translate(15px);\n\t}\n\t20% {\n\t\ttransform: translate(-15px);\n\t}\n\t40% {\n\t\ttransform: translate(7px);\n\t}\n\t60% {\n\t\ttransform: translate(-7px);\n\t}\n\t80% {\n\t\ttransform: translate(3px);\n\t}\n\t100% {\n\t\ttransform: translate(0px);\n\t}\n}\n</style>\n","/**\n * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport axios, { type AxiosResponse } from '@nextcloud/axios'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport type { OCSResponse } from '@nextcloud/typings/ocs'\n\n/**\n * Extracts the OCS data from a response\n * @param response OCS response\n */\nfunction extractOcsData(response: AxiosResponse<OCSResponse>) {\n\treturn response.data.ocs.data\n}\n\n/**\n * Lists all collections\n * @param collectionId Collection ID\n */\nexport function listCollectionService(collectionId: number) {\n\treturn axios.get(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId })).then(extractOcsData)\n}\n\n/**\n * Renames a collection\n * @param collectionId Collection ID\n * @param collectionName New collection name\n */\nexport function renameCollectionService(collectionId: number, collectionName: string) {\n\treturn axios.put(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId }), { collectionName }).then(extractOcsData)\n}\n\n/**\n * Lists all collections for a resource\n * @param resourceType Resource type\n * @param resourceId Resource ID\n */\nexport function getCollectionsByResourceService(resourceType: string, resourceId: string) {\n\treturn axios.get(generateOcsUrl('collaboration/resources/{resourceType}/{resourceId}', { resourceType, resourceId })).then(extractOcsData)\n}\n\n/**\n * Creates a collection\n * @param resourceType Resource type\n * @param resourceId Resource ID\n * @param name Collection name\n */\nexport function createCollectionService(resourceType: string, resourceId: string, name: string) {\n\treturn axios.post(generateOcsUrl('collaboration/resources/{resourceType}/{resourceId}', { resourceType, resourceId }), { name }).then(extractOcsData)\n}\n\n/**\n * Adds a resource to a collection\n * @param collectionId Collection ID\n * @param resourceType Resource type\n * @param resourceId Resource ID\n */\nexport function addResourceService(collectionId: number, resourceType: string, resourceId: string) {\n\treturn axios.post(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId }), { resourceType, resourceId }).then(extractOcsData)\n}\n\n/**\n * Removes a resource from a collection\n * @param collectionId Collection ID\n * @param resourceType Resource type\n * @param resourceId Resource ID\n */\nexport function removeResourceService(collectionId: number, resourceType: string, resourceId: string) {\n\treturn axios.delete(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId }), { params: { resourceType, resourceId } }).then(extractOcsData)\n}\n\n/**\n * Searches for collections\n * @param query Search query\n */\nexport function searchService(query: string) {\n\treturn axios.get(generateOcsUrl('collaboration/resources/collections/search/{query}', { query })).then(extractOcsData)\n}\n","/**\n * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { ref, set } from 'vue'\nimport {\n\trenameCollectionService,\n\tgetCollectionsByResourceService,\n\tcreateCollectionService,\n\taddResourceService,\n\tremoveResourceService,\n} from './service.ts'\n\n/**\n * Use collections composable\n */\nexport function useCollections() {\n\t// State\n\tconst storedCollections = ref([])\n\n\t// Mutations\n\tconst addCollections = (collections) => {\n\t\tset(storedCollections, 'value', collections)\n\t}\n\n\tconst addCollection = (collection) => {\n\t\tset(storedCollections, 'value', [...storedCollections.value, collection])\n\t}\n\n\tconst removeCollection = (collectionId) => {\n\t\tset(storedCollections, 'value', storedCollections.value.filter(item => item.id !== collectionId))\n\t}\n\n\tconst updateCollection = (collection) => {\n\t\tconst index = storedCollections.value.findIndex(item => item.id === collection.id)\n\t\tif (index !== -1) {\n\t\t\tset(storedCollections.value, index, collection)\n\t\t} else {\n\t\t\taddCollection(collection)\n\t\t}\n\t}\n\n\t// Actions\n\tconst fetchCollectionsByResource = async ({ resourceType, resourceId }) => {\n\t\tconst collections = await getCollectionsByResourceService(resourceType, resourceId)\n\n\t\taddCollections(collections)\n\t}\n\n\tconst createCollection = async ({ baseResourceType, baseResourceId, resourceType, resourceId, name }) => {\n\t\tconst collection = await createCollectionService(baseResourceType, baseResourceId, name)\n\n\t\taddCollection(collection)\n\t\tawait addResourceToCollection({\n\t\t\tcollectionId: collection.id,\n\t\t\tresourceType,\n\t\t\tresourceId,\n\t\t})\n\t}\n\n\tconst renameCollection = async ({ collectionId, name }) => {\n\t\tconst collection = await renameCollectionService(collectionId, name)\n\n\t\tupdateCollection(collection)\n\t}\n\n\tconst addResourceToCollection = async ({ collectionId, resourceType, resourceId }) => {\n\t\tconst collection = await addResourceService(collectionId, resourceType, String(resourceId))\n\n\t\tupdateCollection(collection)\n\t}\n\n\tconst removeResourceFromCollection = async ({ collectionId, resourceType, resourceId }) => {\n\t\tconst collection = await removeResourceService(collectionId, resourceType, String(resourceId))\n\n\t\tif (collection.resources.length > 0) {\n\t\t\tupdateCollection(collection)\n\t\t} else {\n\t\t\tremoveCollection(collectionId)\n\t\t}\n\t}\n\n\treturn {\n\t\tstoredCollections,\n\t\tfetchCollectionsByResource,\n\t\tcreateCollection,\n\t\trenameCollection,\n\t\taddResourceToCollection,\n\t\tremoveResourceFromCollection,\n\t}\n}\n","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nProvides a Vue standalone component for Nextcloud Projects feature introduced in Nextcloud 16. Replaces deprecated `nextcloud-vue-collections` library.\n\nProjects feature is deprecated since Nextcloud 25, and superseded by Related resources. See [NcRelatedResourcesPanel](#/Components/NcRelatedResourcesPanel) documentation for more information.\n\n### Usage\n\nTo enable feature in Nextcloud, run following command:\n```sh\nocc config:system:set --value true 'projects.enabled'\n```\n</docs>\n\n<template>\n\t<ul v-if=\"collections && type && id\" id=\"collection-list\" class=\"collection-list\">\n\t\t<li @click=\"showSelect\">\n\t\t\t<div class=\"avatar\">\n\t\t\t\t<span class=\"icon-projects\" />\n\t\t\t</div>\n\t\t\t<div id=\"collection-select-container\">\n\t\t\t\t<NcSelect ref=\"select\"\n\t\t\t\t\tv-model=\"value\"\n\t\t\t\t\t:aria-label-combobox=\"t('Add to a project')\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t\t:placeholder=\"placeholder\"\n\t\t\t\t\tlabel=\"title\"\n\t\t\t\t\t:limit=\"5\"\n\t\t\t\t\t@close=\"isSelectOpen = false\"\n\t\t\t\t\t@open=\"isSelectOpen = true\"\n\t\t\t\t\t@option:selected=\"select\"\n\t\t\t\t\t@search=\"search\">\n\t\t\t\t\t<template #selected-option=\"option\">\n\t\t\t\t\t\t<span class=\"option__desc\">\n\t\t\t\t\t\t\t<span class=\"option__title\">{{ option.title }}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</template>\n\t\t\t\t\t<template #option=\"option\">\n\t\t\t\t\t\t<span class=\"option__wrapper\">\n\t\t\t\t\t\t\t<span v-if=\"option.class\" :class=\"option.class\" class=\"avatar\" />\n\t\t\t\t\t\t\t<NcAvatar v-else-if=\"option.method !== 2\" allow-placeholder :display-name=\"option.title\" />\n\t\t\t\t\t\t\t<span class=\"option__title\">{{ option.title }}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</template>\n\t\t\t\t\t<p class=\"hint\">\n\t\t\t\t\t\t{{ t('Connect items to a project to make them easier to find') }}\n\t\t\t\t\t</p>\n\t\t\t\t</NcSelect>\n\t\t\t</div>\n\t\t</li>\n\t\t<transition name=\"fade\">\n\t\t\t<li v-if=\"error\" class=\"error\">\n\t\t\t\t{{ error }}\n\t\t\t</li>\n\t\t</transition>\n\t\t<NcCollectionListItem v-for=\"collection in collections\"\n\t\t\t:key=\"collection.id\"\n\t\t\t:collection=\"collection\"\n\t\t\t:error=\"collectionsError[collection.id]\"\n\t\t\t@rename-collection=\"renameCollectionFromItem\"\n\t\t\t@remove-resource=\"removeResourceFromCollection\" />\n\t</ul>\n</template>\n\n<script>\nimport debounce from 'debounce'\nimport { ref } from 'vue'\nimport { t } from '../../l10n.js'\n\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcSelect from '../NcSelect/index.js'\nimport NcCollectionListItem from './NcCollectionListItem.vue'\n\nimport { useCollections } from './useCollections.js'\nimport { searchService } from './service.ts'\n\nconst METHOD_CREATE_COLLECTION = 0\nconst METHOD_ADD_TO_COLLECTION = 1\n\nexport default {\n\tname: 'NcCollectionList',\n\n\tcomponents: {\n\t\tNcCollectionListItem,\n\t\tNcAvatar,\n\t\tNcSelect,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Resource type identifier\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Unique id of the resource\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Name of the resource\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Whether the component is active (to start fetch resources)\n\t\t */\n\t\tisActive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\tsetup() {\n\t\tconst {\n\t\t\tstoredCollections,\n\t\t\tfetchCollectionsByResource,\n\t\t\tcreateCollection,\n\t\t\taddResourceToCollection,\n\t\t\tremoveResourceFromCollection,\n\t\t\trenameCollection,\n\t\t} = useCollections()\n\n\t\tconst searchCollections = ref([])\n\t\tconst search = debounce(function(query, loading) {\n\t\t\tif (query !== '') {\n\t\t\t\tloading(true)\n\t\t\t\tsearchService(query).then(collections => {\n\t\t\t\t\tsearchCollections.value = collections\n\t\t\t\t}).catch(e => {\n\t\t\t\t\tconsole.error('Failed to search for collections', e)\n\t\t\t\t}).finally(() => {\n\t\t\t\t\tloading(false)\n\t\t\t\t})\n\t\t\t}\n\t\t}, 500)\n\n\t\treturn {\n\t\t\tstoredCollections,\n\t\t\tfetchCollectionsByResource,\n\t\t\tcreateCollection,\n\t\t\taddResourceToCollection,\n\t\t\tremoveResourceFromCollection,\n\t\t\trenameCollection,\n\t\t\tsearchCollections,\n\t\t\tsearch,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tselectIsOpen: false,\n\t\t\tgeneratingCodes: false,\n\t\t\tcodes: undefined,\n\t\t\tvalue: null,\n\t\t\tmodel: {},\n\t\t\tcollectionsError: {},\n\t\t\terror: null,\n\t\t\tisSelectOpen: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcollections() {\n\t\t\treturn this.storedCollections.filter(collection => collection.resources\n\t\t\t\t.some(resource => resource && resource.id === String(this.id) && resource.type === this.type),\n\t\t\t)\n\t\t},\n\n\t\tplaceholder() {\n\t\t\treturn this.isSelectOpen\n\t\t\t\t? t('Type to search for existing projects')\n\t\t\t\t: t('Add to a project')\n\t\t},\n\n\t\toptions() {\n\t\t\tconst options = []\n\t\t\twindow.OCP.Collaboration.getTypes().sort().forEach(type => {\n\t\t\t\toptions.push({\n\t\t\t\t\tmethod: METHOD_CREATE_COLLECTION,\n\t\t\t\t\ttype,\n\t\t\t\t\ttitle: window.OCP.Collaboration.getLabel(type),\n\t\t\t\t\tclass: window.OCP.Collaboration.getIcon(type),\n\t\t\t\t\taction: () => window.OCP.Collaboration.trigger(type),\n\t\t\t\t})\n\t\t\t})\n\t\t\tfor (const index in this.searchCollections) {\n\t\t\t\tif (!this.collections.find(collection => collection.id === this.searchCollections[index].id)) {\n\t\t\t\t\toptions.push({\n\t\t\t\t\t\tmethod: METHOD_ADD_TO_COLLECTION,\n\t\t\t\t\t\ttitle: this.searchCollections[index].name,\n\t\t\t\t\t\tcollectionId: this.searchCollections[index].id,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn options\n\t\t},\n\n\t\tresourceIdentifier() {\n\t\t\treturn {\n\t\t\t\tresourceType: this.type,\n\t\t\t\tresourceId: this.id,\n\t\t\t\tisActive: this.isActive,\n\t\t\t}\n\t\t},\n\t},\n\n\twatch: {\n\t\tresourceIdentifier: {\n\t\t\tdeep: true,\n\t\t\timmediate: true,\n\t\t\thandler(resourceIdentifier) {\n\t\t\t\tif (!resourceIdentifier.isActive || !resourceIdentifier.resourceId || !resourceIdentifier.resourceType) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.fetchCollectionsByResource(resourceIdentifier)\n\t\t\t},\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\tselect(selectedOption) {\n\t\t\tif (selectedOption.method === METHOD_CREATE_COLLECTION) {\n\t\t\t\tselectedOption.action().then(resourceId => {\n\t\t\t\t\tthis.createCollection({\n\t\t\t\t\t\tbaseResourceType: this.type,\n\t\t\t\t\t\tbaseResourceId: this.id,\n\t\t\t\t\t\tresourceType: selectedOption.type,\n\t\t\t\t\t\tresourceId,\n\t\t\t\t\t\tname: this.name,\n\t\t\t\t\t}).catch((e) => {\n\t\t\t\t\t\tthis.setError(t('Failed to create a project'), e)\n\t\t\t\t\t})\n\t\t\t\t}).catch((e) => {\n\t\t\t\t\tconsole.error('No resource selected', e)\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tif (selectedOption.method === METHOD_ADD_TO_COLLECTION) {\n\t\t\t\tthis.addResourceToCollection({\n\t\t\t\t\tcollectionId: selectedOption.collectionId, resourceType: this.type, resourceId: this.id,\n\t\t\t\t}).catch((e) => {\n\t\t\t\t\tthis.setError(t('Failed to add the item to the project'), e)\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tthis.value = null\n\t\t},\n\n\t\tshowSelect() {\n\t\t\tthis.selectIsOpen = true\n\t\t\tthis.$refs.select.$el.focus()\n\t\t},\n\n\t\tsetError(error, e) {\n\t\t\tconsole.error(error, e)\n\t\t\tthis.error = error\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.error = null\n\t\t\t}, 5000)\n\t\t},\n\n\t\trenameCollectionFromItem({ collectionId, name }) {\n\t\t\tthis.renameCollection({ collectionId, name })\n\t\t\t\t.catch((e) => {\n\t\t\t\t\tconsole.error(t('Failed to rename the project'), e)\n\t\t\t\t\tthis.collectionsError[collectionId] = t('Failed to rename the project')\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tthis.collectionsError[collectionId] = null\n\t\t\t\t\t}, 5000)\n\t\t\t\t})\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.collection-list * {\n\tbox-sizing: border-box;\n}\n\n.collection-list > li {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 12px;\n\n\t& > .avatar {\n\t\tmargin-top: 0;\n\t}\n}\n\n#collection-select-container {\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.v-select {\n\t// NcAvatar in the dropdown\n\tspan.avatar {\n\t\tdisplay: block;\n\t\tpadding: 16px;\n\t\topacity: .7;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\n\t\t&:hover {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n\np.hint {\n\tz-index: 1;\n\t// fix alignment\n\tmargin-top: -16px;\n\tpadding: 8px 8px;\n\tcolor: var(--color-text-maxcontrast);\n\tline-height: normal;\n}\n\ndiv.avatar {\n\twidth: 32px;\n\theight: 32px;\n\tmargin: 0;\n\tpadding: 8px;\n\tbackground-color: var(--color-background-dark);\n\tmargin-top: 30px;\n}\n\n/** TODO provide white icon in core */\n.icon-projects {\n\tdisplay: block;\n\tpadding: 8px;\n\tbackground-repeat: no-repeat;\n\tbackground-position: center;\n}\n\n.option__wrapper {\n\tdisplay: flex;\n\n\t.avatar {\n\t\tdisplay: block;\n\t\twidth: 32px;\n\t\theight: 32px;\n\t\tbackground-color: var(--color-background-darker) !important;\n\t}\n\n\t.option__title {\n\t\tpadding: 4px;\n\t}\n}\n\n.fade-enter-active, .fade-leave-active {\n\ttransition: opacity .5s;\n}\n\n.fade-enter, .fade-leave-to {\n\topacity: 0;\n}\n\n</style>\n"],"names":["_sfc_main","NcAvatar","NcActions","NcActionButton","getRoute","t","axios","generateOcsUrl","ref","set","NcSelect","debounce"],"mappings":"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"}