@nextcloud/vue 9.9.0 → 9.11.0

package/dist/chunks/NcBreadcrumb.mjs.map

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

package/dist/chunks/{NcBreadcrumbs-BaTp3Sya.mjs → NcBreadcrumbs.mjs}

@@ -1,13 +1,13 @@
-import '../assets/NcBreadcrumbs-B4eyDS9i.css';
+import '../assets/NcBreadcrumbs.css';
 import { unsubscribe, subscribe } from "@nextcloud/event-bus";
 import debounce from "debounce";
 import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, Fragment, cloneVNode, h } from "vue";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-import { N as NcActions, i as isSlotPopulated } from "./NcActions-C-wDqSrv.mjs";
-import { N as NcActionButton } from "./NcActionButton-BO5T5ePT.mjs";
-import { N as NcActionLink } from "./NcActionLink-BFiaYt9A.mjs";
-import { N as NcActionRouter } from "./NcActionRouter-vYFtIOzD.mjs";
-import { N as NcBreadcrumb } from "./NcBreadcrumb-3Y5NWXnV.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
+import { N as NcActions, i as isSlotPopulated } from "./NcActions.mjs";
+import { N as NcActionButton } from "./NcActionButton.mjs";
+import { N as NcActionLink } from "./NcActionLink.mjs";
+import { N as NcActionRouter } from "./NcActionRouter.mjs";
+import { N as NcBreadcrumb } from "./NcBreadcrumb.mjs";
 const _sfc_main$1 = {
   name: "FolderIcon",
   emits: ["click"],
@@ -457,4 +457,4 @@ const NcBreadcrumbs = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "dat
 export {
   NcBreadcrumbs as N
 };
-//# sourceMappingURL=NcBreadcrumbs-BaTp3Sya.mjs.map
+//# sourceMappingURL=NcBreadcrumbs.mjs.map

package/dist/chunks/NcBreadcrumbs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcBreadcrumbs.mjs","sources":["../../node_modules/vue-material-design-icons/Folder.vue","../../src/components/NcBreadcrumbs/NcBreadcrumbs.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon folder-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"FolderIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - 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 { subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport debounce from 'debounce'\nimport { cloneVNode, Fragment, h } from 'vue'\nimport IconFolder from 'vue-material-design-icons/Folder.vue'\nimport { isSlotPopulated } from '../../utils/isSlotPopulated.ts'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcActionLink from '../NcActionLink/index.js'\nimport NcActionRouter from '../NcActionRouter/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcBreadcrumb from '../NcBreadcrumb/index.js'\n\nconst crumbClass = 'vue-crumb'\n\nexport default {\n\tname: 'NcBreadcrumbs',\n\tcomponents: {\n\t\tNcActions,\n\t\tNcActionButton,\n\t\tNcActionRouter,\n\t\tNcActionLink,\n\t\tNcBreadcrumb,\n\t\tIconFolder,\n\t},\n\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\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\n\t\t\tbreadcrumbsRefs: [],\n\t\t}\n\t},\n\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\n\tmounted() {\n\t\tthis.handleWindowResize()\n\t},\n\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\n\tbeforeUnmount() {\n\t\twindow.removeEventListener('resize', this.handleWindowResize)\n\t\tunsubscribe('navigation-toggled', this.delayedResize)\n\t},\n\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\n\t\t/**\n\t\t * Call the resize function after a delay\n\t\t */\n\t\tasync delayedResize() {\n\t\t\tawait this.$nextTick()\n\t\t\tthis.handleWindowResize()\n\t\t},\n\n\t\t/**\n\t\t * Check the width of the breadcrumb and hide breadcrumbs\n\t\t * if we overflow otherwise.\n\t\t */\n\t\thandleWindowResize() {\n\t\t\t// If there is no container yet, we cannot determine its size\n\t\t\tif (!this.$refs.container) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst nrCrumbs = this.breadcrumbsRefs.length\n\t\t\tconst hiddenIndices = []\n\t\t\tconst availableWidth = this.$refs.container.offsetWidth\n\t\t\tlet totalWidth = this.getTotalWidth()\n\t\t\t// If we have breadcrumbs actions, we have to take their width into account too.\n\t\t\tif (this.$refs.breadcrumb__actions) {\n\t\t\t\ttotalWidth += this.$refs.breadcrumb__actions.offsetWidth\n\t\t\t}\n\t\t\tlet overflow = totalWidth - availableWidth\n\t\t\t// If we overflow, we have to take the action-item width into account as well.\n\t\t\toverflow += (overflow > 0) ? 64 : 0\n\t\t\tlet i = 0\n\t\t\t// We start hiding the breadcrumb in the center\n\t\t\tconst startIndex = Math.floor(nrCrumbs / 2)\n\t\t\t// Don't hide the first and last breadcrumb\n\t\t\twhile (overflow > 0 && i < nrCrumbs - 2) {\n\t\t\t\t// We hide elements alternating to the left and right\n\t\t\t\tconst currentIndex = startIndex + ((i % 2) ? i + 1 : i) / 2 * Math.pow(-1, i + (nrCrumbs % 2))\n\t\t\t\t// Calculate the remaining overflow width after hiding this breadcrumb\n\t\t\t\toverflow -= this.getWidth(this.breadcrumbsRefs[currentIndex]?.$el, currentIndex === (this.breadcrumbsRefs.length - 1))\n\t\t\t\thiddenIndices.push(currentIndex)\n\t\t\t\ti++\n\t\t\t}\n\t\t\t// We only update the hidden crumbs if they have changed,\n\t\t\t// otherwise we will run into an infinite update loop.\n\t\t\tif (!this.arraysEqual(this.hiddenIndices, hiddenIndices.sort((a, b) => a - b))) {\n\t\t\t\tthis.hiddenIndices = hiddenIndices\n\t\t\t}\n\t\t},\n\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) {\n\t\t\t\treturn false\n\t\t\t} else if (a === b) {\n\t\t\t\treturn true\n\t\t\t} else if (a === null || b === null) {\n\t\t\t\treturn false\n\t\t\t}\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\n\t\t/**\n\t\t * Calculates the total width of all breadcrumbs\n\t\t *\n\t\t * @return {number} The total width\n\t\t */\n\t\tgetTotalWidth() {\n\t\t\treturn this.breadcrumbsRefs.reduce((width, crumb, index) => width + this.getWidth(crumb.$el, index === (this.breadcrumbsRefs.length - 1)), 0)\n\t\t},\n\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) {\n\t\t\t\treturn 0\n\t\t\t}\n\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\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\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\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\tfor (const crumb of crumbs) {\n\t\t\t\tcrumb.classList.remove(`${crumbClass}--hovered`)\n\t\t\t}\n\t\t\treturn this.preventDefault(e)\n\t\t},\n\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\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\tfor (const crumb of crumbs) {\n\t\t\t\t\t\tcrumb.classList.remove(`${crumbClass}--hovered`)\n\t\t\t\t\t}\n\t\t\t\t\ttarget.classList.add(`${crumbClass}--hovered`)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\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\n\t\t/**\n\t\t * Check for each crumb if we have to hide it and\n\t\t * add it to the array of all crumbs.\n\t\t */\n\t\thideCrumbs() {\n\t\t\tthis.breadcrumbsRefs.forEach((crumb, i) => {\n\t\t\t\tif (crumb?.$el?.classList) {\n\t\t\t\t\tif (this.hiddenIndices.includes(i)) {\n\t\t\t\t\t\tcrumb.$el.classList.add(`${crumbClass}--hidden`)\n\t\t\t\t\t} else {\n\t\t\t\t\t\tcrumb.$el.classList.remove(`${crumbClass}--hidden`)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\n\t\tisBreadcrumb(vnode) {\n\t\t\treturn vnode?.type?.name === 'NcBreadcrumb'\n\t\t},\n\t},\n\n\t/**\n\t * The render function to display the component\n\t *\n\t * @return {object|undefined} The created VNode\n\t */\n\trender() {\n\t\t// Get the breadcrumbs\n\t\tlet breadcrumbs = []\n\t\t// We have to iterate over all slot elements\n\t\tthis.$slots.default?.().forEach((vnode) => {\n\t\t\tif (this.isBreadcrumb(vnode)) {\n\t\t\t\tbreadcrumbs.push(vnode)\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// If we encounter a Fragment, we have to check its children too\n\t\t\tif (vnode?.type === Fragment) {\n\t\t\t\tvnode?.children?.forEach?.((child) => {\n\t\t\t\t\tif (this.isBreadcrumb(child)) {\n\t\t\t\t\t\tbreadcrumbs.push(child)\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\n\t\t// Check that we have at least one breadcrumb\n\t\tif (breadcrumbs.length === 0) {\n\t\t\treturn\n\t\t}\n\n\t\t// Add the root icon to the first breadcrumb\n\t\tbreadcrumbs[0] = cloneVNode(breadcrumbs[0], {\n\t\t\ticon: this.rootIcon,\n\t\t\tref: 'breadcrumbs',\n\t\t})\n\n\t\t/**\n\t\t * Use a proxy object to store breadcrumbs refs\n\t\t * and don't write to this.breadcrumbsRefs directly\n\t\t * to not trigger a myriad of re-renders.\n\t\t */\n\t\tconst breadcrumbsRefs = []\n\t\t// Add the breadcrumbs to the array of the created VNodes, check if hiding them is necessary.\n\t\tbreadcrumbs = breadcrumbs.map((crumb, index) => cloneVNode(crumb, {\n\t\t\tref: (crumb) => {\n\t\t\t\tbreadcrumbsRefs[index] = crumb\n\t\t\t},\n\t\t}))\n\n\t\t// The array of all created VNodes\n\t\tconst crumbs = [...breadcrumbs]\n\t\tif (this.hiddenIndices.length) {\n\t\t\t/**\n\t\t\t * We show the first half of the breadcrumbs before the Actions dropdown menu\n\t\t\t * which shows the hidden breadcrumbs.\n\t\t\t */\n\t\t\tcrumbs.splice(\n\t\t\t\tMath.round(breadcrumbs.length / 2),\n\t\t\t\t0,\n\n\t\t\t\t// The Actions menu\n\t\t\t\t// Use a breadcrumb component for the hidden breadcrumbs\n\n\t\t\t\th(NcBreadcrumb, {\n\t\t\t\t\tclass: 'dropdown',\n\t\t\t\t\t...this.menuBreadcrumbProps,\n\t\t\t\t\t// Hide the dropdown menu from screen-readers,\n\t\t\t\t\t// since the crumbs in the menu are still in the list.\n\t\t\t\t\t'aria-hidden': true,\n\t\t\t\t\t// Add a ref to the Actions menu\n\t\t\t\t\tref: 'actionsBreadcrumb',\n\t\t\t\t\tkey: 'actions-breadcrumb-1',\n\t\t\t\t\t// Add handlers so the Actions menu opens on hover\n\t\t\t\t\tonDragenter: () => { this.menuBreadcrumbProps.open = true },\n\t\t\t\t\tonDragleave: this.closeActions,\n\t\t\t\t\t// Make sure we keep the same open state\n\t\t\t\t\t// as the Actions component\n\t\t\t\t\t'onUpdate:open': (open) => {\n\t\t\t\t\t\tthis.menuBreadcrumbProps.open = open\n\t\t\t\t\t},\n\t\t\t\t// Add all hidden breadcrumbs as ActionRouter or ActionLink\n\t\t\t\t}, {\n\t\t\t\t\tdefault: () => this.hiddenIndices.filter((index) => index <= breadcrumbs.length - 1).map((index) => {\n\t\t\t\t\t\tconst crumb = breadcrumbs[index]\n\t\t\t\t\t\tconst {\n\t\t\t\t\t\t\t// Get the parameters from the breadcrumb component props\n\t\t\t\t\t\t\tto,\n\t\t\t\t\t\t\thref,\n\t\t\t\t\t\t\tdisableDrop,\n\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t// Props to forward\n\t\t\t\t\t\t\t...propsToForward\n\t\t\t\t\t\t} = crumb.props\n\t\t\t\t\t\t// Do not forward the ref, otherwise it will be null if the hidden crumb gets destroyed\n\t\t\t\t\t\tdelete propsToForward.ref\n\n\t\t\t\t\t\t// Decide whether to show the breadcrumbs as ActionButton, ActionRouter or ActionLink\n\t\t\t\t\t\tlet element = NcActionButton\n\t\t\t\t\t\tlet path = ''\n\t\t\t\t\t\tif (href) {\n\t\t\t\t\t\t\telement = NcActionLink\n\t\t\t\t\t\t\tpath = href\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (to) {\n\t\t\t\t\t\t\telement = NcActionRouter\n\t\t\t\t\t\t\tpath = to\n\t\t\t\t\t\t}\n\t\t\t\t\t\tconst folderIcon = h(IconFolder, {\n\t\t\t\t\t\t\tsize: 20,\n\t\t\t\t\t\t})\n\t\t\t\t\t\treturn h(element, {\n\t\t\t\t\t\t\t...propsToForward,\n\t\t\t\t\t\t\tclass: crumbClass,\n\t\t\t\t\t\t\thref: href || null,\n\t\t\t\t\t\t\tto: to || null,\n\t\t\t\t\t\t\t// Prevent the breadcrumbs from being draggable\n\t\t\t\t\t\t\tdraggable: false,\n\t\t\t\t\t\t\t// Add the drag and drop handlers\n\t\t\t\t\t\t\tonDragstart: this.dragStart,\n\t\t\t\t\t\t\tonDrop: ($event) => this.dropped($event, path, disableDrop),\n\t\t\t\t\t\t\tonDragover: this.dragOver,\n\t\t\t\t\t\t\tonDragenter: ($event) => this.dragEnter($event, disableDrop),\n\t\t\t\t\t\t\tonDragleave: ($event) => this.dragLeave($event, disableDrop),\n\t\t\t\t\t\t}, {\n\t\t\t\t\t\t\tdefault: () => name,\n\t\t\t\t\t\t\ticon: () => folderIcon,\n\t\t\t\t\t\t})\n\t\t\t\t\t}),\n\t\t\t\t}),\n\t\t\t)\n\t\t}\n\n\t\tconst wrapper = [h('nav', { 'aria-label': this.ariaLabel }, [h('ul', { class: 'breadcrumb__crumbs' }, [crumbs])])]\n\t\t// Append the actions slot if it is populated\n\t\tif (isSlotPopulated(this.$slots.actions?.())) {\n\t\t\twrapper.push(h('div', { class: 'breadcrumb__actions', ref: 'breadcrumb__actions' }, this.$slots.actions?.()))\n\t\t}\n\n\t\tthis.breadcrumbsRefs = breadcrumbsRefs\n\n\t\treturn h('div', { class: ['breadcrumb', { 'breadcrumb--collapsed': (this.hiddenIndices.length === breadcrumbs.length - 2) }], ref: 'container' }, wrapper)\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.breadcrumb {\n\twidth: 100%;\n\tflex-grow: 1;\n\tdisplay: inline-flex;\n\talign-items: center;\n\n\t&--collapsed :deep(.vue-crumb:last-child) {\n\t\tmin-width: 100px;\n\t}\n\n\tnav {\n\t\tflex-shrink: 1;\n\t\tmin-width: 0;\n\t}\n\n\t& #{&}__crumbs {\n\t\tmax-width: 100%;\n\t}\n\n\t& #{&}__crumbs,\n\t& #{&}__actions {\n\t\tdisplay: inline-flex;\n\t}\n}\n</style>\n"],"names":["_sfc_main","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","crumb"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/chunks/{NcButton-jvoYS2my.mjs → NcButton.mjs}

@@ -1,9 +1,9 @@
-import '../assets/NcButton-DOrlC_y5.css';
+import '../assets/NcButton.css';
 import { defineComponent, inject, computed, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, createElementVNode, renderSlot, createTextVNode, toDisplayString } from "vue";
 import { routerKey } from "vue-router";
-import { i as isLegacy34, a as isLegacy } from "./legacy-BoqDmOCa.mjs";
-import { u as useNcFormBox } from "./useNcFormBox-Djlh582y.mjs";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { i as isLegacy34, a as isLegacy } from "./legacy.mjs";
+import { u as useNcFormBox } from "./useNcFormBox.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
 const _hoisted_1 = { class: "button-vue__wrapper" };
 const _hoisted_2 = { class: "button-vue__icon" };
 const _hoisted_3 = { class: "button-vue__text" };
@@ -117,8 +117,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NcButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-00a99684"]]);
+const NcButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-47ce59a3"]]);
 export {
   NcButton as N
 };
-//# sourceMappingURL=NcButton-jvoYS2my.mjs.map
+//# sourceMappingURL=NcButton.mjs.map

package/dist/chunks/NcButton.mjs.map

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

package/dist/chunks/{NcCheckboxRadioSwitch-DVdt5Hkq.mjs → NcCheckboxRadioSwitch.mjs}

@@ -1,11 +1,11 @@
-import '../assets/NcCheckboxRadioSwitch-BlQSZVW0.css';
+import '../assets/NcCheckboxRadioSwitch.css';
 import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, resolveComponent, normalizeClass, renderSlot, createBlock, resolveDynamicComponent, toHandlers, withCtx, createVNode, createSlots, createTextVNode, onMounted, computed, useCssVars } from "vue";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-import { N as NcIconToggleSwitch } from "./NcIconToggleSwitch-CRvGt4su.mjs";
-import { N as NcLoadingIcon } from "./NcLoadingIcon-BOVpFVQz.mjs";
-import { r as register, K as n, a as t } from "./_l10n-wdIzZwir.mjs";
-import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
-import { u as useInsideRadioGroup } from "./useNcRadioGroup-D6llQmAl.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
+import { N as NcIconToggleSwitch } from "./NcIconToggleSwitch.mjs";
+import { N as NcLoadingIcon } from "./NcLoadingIcon.mjs";
+import { r as register, K as n, a as t } from "./_l10n.mjs";
+import { c as createElementId } from "./createElementId.mjs";
+import { u as useInsideRadioGroup } from "./useNcRadioGroup.mjs";
 const _sfc_main$6 = {
   name: "CheckboxBlankOutlineIcon",
   emits: ["click"],
@@ -634,6 +634,15 @@ const _sfc_main = {
       }
       return TYPE_CHECKBOX;
     },
+    /**
+     * ARIA role for the input. A switch renders as a native checkbox, so it
+     * needs an explicit `switch` role to be announced correctly.
+     *
+     * @return {string|undefined}
+     */
+    inputRole() {
+      return this.internalType === TYPE_SWITCH ? "switch" : void 0;
+    },
     /**
      * Check if that entry is checked
      * If value is defined, we use that as the checked value
@@ -699,8 +708,8 @@ const _sfc_main = {
 };
 const __injectCSSVars__ = () => {
   useCssVars((_ctx) => ({
-    "v5ac25550": _ctx.cssIconSize,
-    "d98ce684": _ctx.cssIconHeight
+    "f99d0228": _ctx.cssIconSize,
+    "v69c82152": _ctx.cssIconHeight
   }));
 };
 const __setup__ = _sfc_main.setup;
@@ -708,7 +717,7 @@ _sfc_main.setup = __setup__ ? (props, ctx) => {
   __injectCSSVars__();
   return __setup__(props, ctx);
 } : __injectCSSVars__;
-const _hoisted_1 = ["id", "aria-labelledby", "aria-describedby", "aria-label", "disabled", "type", "value", "checked", ".indeterminate", "required", "name"];
+const _hoisted_1 = ["id", "aria-labelledby", "aria-describedby", "aria-label", "disabled", "type", "role", "value", "checked", ".indeterminate", "required", "name"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_NcCheckboxContent = resolveComponent("NcCheckboxContent");
   return openBlock(), createBlock(resolveDynamicComponent($options.computedWrapperElement), mergeProps({
@@ -740,6 +749,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         class: "checkbox-radio-switch__input",
         disabled: $props.disabled,
         type: $options.inputType,
+        role: $options.inputRole,
         value: $props.value,
         checked: $options.isChecked,
         ".indeterminate": $options.hasIndeterminate ? $props.indeterminate : null,
@@ -787,8 +797,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 16, ["id", "aria-label", "class", "style", "type"]);
 }
-const NcCheckboxRadioSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c34c63a4"]]);
+const NcCheckboxRadioSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-81045d2a"]]);
 export {
   NcCheckboxRadioSwitch as N
 };
-//# sourceMappingURL=NcCheckboxRadioSwitch-DVdt5Hkq.mjs.map
+//# sourceMappingURL=NcCheckboxRadioSwitch.mjs.map

package/dist/chunks/NcCheckboxRadioSwitch.mjs.map

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

package/dist/chunks/{NcChip-DKRlV47q.mjs → NcChip.mjs}

@@ -1,12 +1,12 @@
-import '../assets/NcChip-DbSI4mFP.css';
+import '../assets/NcChip.css';
 import { defineComponent, useSlots, computed, openBlock, createElementBlock, normalizeClass, renderSlot, createBlock, createCommentVNode, createElementVNode, createTextVNode, toDisplayString, withCtx, createVNode, unref } from "vue";
-import { b as mdiClose } from "./mdi-CpchYUUV.mjs";
-import { N as NcActionButton } from "./NcActionButton-BO5T5ePT.mjs";
-import { N as NcActions } from "./NcActions-C-wDqSrv.mjs";
-import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-g8ubWhoz.mjs";
-import { r as register, A as t19, a as t } from "./_l10n-wdIzZwir.mjs";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-register(t19);
+import { b as mdiClose } from "./mdi.mjs";
+import { N as NcActionButton } from "./NcActionButton.mjs";
+import { N as NcActions } from "./NcActions.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper.mjs";
+import { r as register, A as t20, a as t } from "./_l10n.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
+register(t20);
 const _hoisted_1 = {
   key: 0,
   class: "nc-chip__icon"
@@ -91,4 +91,4 @@ const NcChip = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8f5
 export {
   NcChip as N
 };
-//# sourceMappingURL=NcChip-DKRlV47q.mjs.map
+//# sourceMappingURL=NcChip.mjs.map

package/dist/chunks/NcChip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcChip.mjs","sources":["../../src/components/NcChip/NcChip.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n<docs>\n### Basic usage\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 8px; flex-wrap: wrap;\">\n\t\t<NcChip text=\"Notes.txt\" />\n\t\t<NcChip text=\"Files\" :icon-path=\"mdiFileOutline\" />\n\t\t<NcChip text=\"Color\" :icon-path=\"mdiPaletteOutline\" variant=\"tertiary\" />\n\t\t<NcChip text=\"Current time\" :icon-path=\"mdiClock\" no-close variant=\"primary\" />\n\t\t<NcChip text=\"Canceled\" :icon-path=\"mdiCancel\" variant=\"error\" no-close />\n\t\t<NcChip text=\"Open\" :icon-path=\"mdiCircleOutline\" variant=\"success\" no-close />\n\t\t<NcChip text=\"Due tomorrow\" :icon-path=\"mdiAlertCircleOutline\" variant=\"warning\" no-close />\n\t</div>\n</template>\n<script>\nimport { mdiClock, mdiFileOutline, mdiPaletteOutline, mdiCancel, mdiCircleOutline, mdiAlertCircleOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiAlertCircleOutline,\n\t\t\tmdiCancel,\n\t\t\tmdiCircleOutline,\n\t\t\tmdiClock,\n\t\t\tmdiFileOutline,\n\t\t\tmdiPaletteOutline,\n\t\t}\n\t}\n}\n</script>\n```\n\n### Advanced usage\n\nIt is also possible to use custom components for the icon by using the `icon` slot.\nIn this example we are using the `NcAvatar` component to render the users avatar as the icon.\n\n*Hint: If you use round icons like avatars you should set their size to `24px` (or use CSS variable `--chip-size`) to make them fully fill and align with the the chip*\n\nAlso it is possible to pass custom actions.\n\n```vue\n<template>\n\t<NcChip>\n\t\t<!-- The icon slot allow to use custom components as the chip icon -->\n\t\t<template #icon>\n\t\t\t<NcAvatar :size=\"24\" user=\"jdoe\" display-name=\"J. Doe\" />\n\t\t</template>\n\t\t<!-- The actions slot allows to add custom actions -->\n\t\t<template #actions>\n\t\t\t<NcActionButton>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ContactsIcon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd to contacts\n\t\t\t</NcActionButton>\n\t\t</template>\n\t\t<!-- The default slot can be used for add content, just like the `text` prop -->\n\t\tJ. Doe\n\t</NcChip>\n</template>\n<script>\nimport ContactsIcon from 'vue-material-design-icons/Contacts.vue'\nexport default {\n\tcomponents: {\n\t\tContactsIcon,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div\n\t\tclass=\"nc-chip\"\n\t\t:class=\"{\n\t\t\t[`nc-chip--${variant}`]: true,\n\t\t\t'nc-chip--no-actions': noClose && !hasActions(),\n\t\t\t'nc-chip--no-icon': !hasIcon(),\n\t\t}\">\n\t\t<span v-if=\"hasIcon()\" class=\"nc-chip__icon\">\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<!-- The default icon wrapper uses a size of 18px to ensure the icon is not clipped by the round chip style -->\n\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\tv-if=\"iconPath || iconSvg\"\n\t\t\t\t\tinline\n\t\t\t\t\t:path=\"iconPath\"\n\t\t\t\t\t:svg=\"iconPath ? undefined : iconSvg\"\n\t\t\t\t\t:size=\"18\" />\n\t\t\t</slot>\n\t\t</span>\n\t\t<span class=\"nc-chip__text\">\n\t\t\t<slot>{{ text }}</slot>\n\t\t</span>\n\t\t<NcActions\n\t\t\tv-if=\"canClose || hasActions()\"\n\t\t\tclass=\"nc-chip__actions\"\n\t\t\t:container=\"actionsContainer\"\n\t\t\t:forceMenu=\"!canClose\"\n\t\t\tvariant=\"tertiary-no-background\">\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"canClose\"\n\t\t\t\tcloseAfterClick\n\t\t\t\t@click=\"emit('close')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiClose\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ ariaLabelClose }}\n\t\t\t</NcActionButton>\n\t\t\t<slot name=\"actions\" />\n\t\t</NcActions>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { mdiClose } from '@mdi/js'\nimport { computed } from 'vue'\nimport NcActionButton from '../NcActionButton/NcActionButton.vue'\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { t } from '../../l10n.ts'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * aria label to set on the close button\n\t *\n\t * @default 'Close'\n\t */\n\tariaLabelClose?: string\n\n\t/**\n\t * Container for the actions\n\t */\n\tactionsContainer?: string\n\n\t/**\n\t * Main text of the chip.\n\t */\n\ttext?: string\n\n\t/**\n\t * SVG path of the icon to use, this takes precedence over `iconSVG`.\n\t * For example icon paths from `@mdi/js` can be used.\n\t */\n\ticonPath?: string\n\n\t/**\n\t * Inline SVG to use as the icon\n\t */\n\ticonSvg?: string\n\n\t/**\n\t * Set to true to prevent the close button to be shown\n\t */\n\tnoClose?: boolean\n\n\t/**\n\t * Set the chips design variant-\n\t *\n\t * This sets the background style of the chip, similar to NcButton's `variant`.\n\t *\n\t * @default 'secondary'\n\t * @since 8.23.0\n\t */\n\tvariant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'warning' | 'success'\n}>(), {\n\tariaLabelClose: t('Close'),\n\tactionsContainer: 'body',\n\ticonPath: undefined,\n\ticonSvg: undefined,\n\ttext: '',\n\tvariant: 'secondary',\n})\n\nconst emit = defineEmits<{\n\t/**\n\t * Emitted when the close button is clicked\n\t */\n\tclose: []\n}>()\n\nconst slots = defineSlots<{\n\t/**\n\t * The actions slot can be used to add custom actions (`NcAction*`) to the chips actions.\n\t */\n\tactions?: Slot\n\n\t/**\n\t * The default slot can be used to set the text that is shown.\n\t */\n\tdefault?: Slot\n\n\t/**\n\t * The icon slot can be used to set the chip icon.\n\t * Make sure that the icon is not exceeding a height of `--chip-size`.\n\t * For round icons a exact size of `var(--chip-size)` is recommended.\n\t */\n\ticon?: Slot\n}>()\n\nconst canClose = computed(() => !props.noClose)\nconst hasActions = () => !!slots.actions\nconst hasIcon = () => Boolean(props.iconPath || props.iconSvg || !!slots.icon)\n</script>\n\n<style scoped lang=\"scss\">\n.nc-chip {\n\t--chip-size: 24px;\n\t--chip-radius: calc(var(--chip-size) / 2);\n\t// Setup size of wrapper\n\theight: var(--chip-size);\n\tmax-width: fit-content;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tborder-radius: var(--chip-radius);\n\tbackground-color: var(--color-background-hover);\n\n\t&--primary {\n\t\tbackground-color: var(--color-primary-element);\n\t\tcolor: var(--color-primary-element-text);\n\t}\n\n\t&--secondary {\n\t\tbackground-color: var(--color-primary-element-light);\n\t\tcolor: var(--color-primary-element-light-text);\n\t}\n\n\t&--error {\n\t\tbackground-color: var(--color-error);\n\t\tcolor: var(--color-error-text);\n\t}\n\n\t&--warning {\n\t\tbackground-color: var(--color-warning);\n\t\tcolor: var(--color-warning-text);\n\t}\n\n\t&--success {\n\t\tbackground-color: var(--color-success);\n\t\tcolor: var(--color-success-text);\n\t}\n\n\t&--no-actions &__text {\n\t\t// If there are no actions we need to add some padding to ensure the text is not cut-off\n\t\tpadding-inline-end: calc(2 * var(--default-grid-baseline));\n\t}\n\n\t&--no-icon &__text {\n\t\t// Add some more space to the border\n\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t}\n\n\t&__text {\n\t\t// Allow to grow the text\n\t\t// this is only used if an app forces a width of the chip\n\t\tflex: 1 auto;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttext-wrap: nowrap;\n\t}\n\n\t&__icon {\n\t\t// Do neither grow nor shrink, size is fixed\n\t\tflex: 0 0 var(--chip-size);\n\t\tmargin-inline-end: var(--default-grid-baseline);\n\n\t\tline-height: 1;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t// Force size\n\t\toverflow: hidden;\n\t\theight: var(--chip-size);\n\t\twidth: var(--chip-size);\n\t}\n\n\t&__actions {\n\t\t// Do neither grow nor shrink, size is fixed\n\t\tflex: 0 0 var(--chip-size);\n\t\t// Adjust action size to match chip size\n\t\t--default-clickable-area: var(--chip-size);\n\t\t--border-radius-element: var(--chip-radius);\n\t}\n}\n</style>\n"],"names":["_useSlots","_createElementBlock","_openBlock","_renderSlot","_createBlock","_createElementVNode","_createVNode","_unref","_createTextVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiIA,UAAM,QAAQ;AAoDd,UAAM,OAAO;AAOb,UAAM,QAAQA,SAAA;AAmBd,UAAM,WAAW,SAAS,MAAM,CAAC,MAAM,OAAO;AAC9C,UAAM,aAAa,MAAM,CAAC,CAAC,MAAM;AACjC,UAAM,UAAU,MAAM,QAAQ,MAAM,YAAY,MAAM,WAAW,CAAC,CAAC,MAAM,IAAI;;0BAnI5EC,mBAsCM,OAAA;AAAA,QArCL,uBAAM,WAAS;AAAA,uBACW,QAAA,OAAO,EAAA,GAAA;AAAA,UAAqC,uBAAA,QAAA,YAAY,WAAA;AAAA,+BAAsC,QAAA;AAAA,QAAO;;QAKnH,aAAZC,UAAA,GAAAD,mBAUO,QAVP,YAUO;AAAA,UATNE,WAQO,yBARP,MAQO;AAAA,YALC,QAAA,YAAY,QAAA,wBADnBC,YAKc,kBAAA;AAAA;cAHb,QAAA;AAAA,cACC,MAAM,QAAA;AAAA,cACN,KAAK,QAAA,WAAW,SAAY,QAAA;AAAA,cAC5B,MAAM;AAAA,YAAA;;;QAGVC,mBAEO,QAFP,YAEO;AAAA,UADNF,WAAuB,4BAAvB,MAAuB;AAAA,4CAAd,QAAA,IAAI,GAAA,CAAA;AAAA,UAAA;;QAGP,SAAA,SAAY,WAAA,kBADnBC,YAgBY,WAAA;AAAA;UAdX,OAAM;AAAA,UACL,WAAW,QAAA;AAAA,UACX,YAAY,SAAA;AAAA,UACb,SAAQ;AAAA,QAAA;2BACR,MAQiB;AAAA,YAPV,SAAA,sBADPA,YAQiB,gBAAA;AAAA;cANhB,iBAAA;AAAA,cACC,+CAAO,KAAI,OAAA;AAAA,YAAA;cACD,cACV,MAAgD;AAAA,gBAAhDE,YAAgD,kBAAA;AAAA,kBAA7B,MAAMC,MAAA,QAAA;AAAA,kBAAW,MAAM;AAAA,gBAAA;;+BAChC,MACX;AAAA,gBADWC,gBAAA,sBACR,QAAA,cAAc,GAAA,CAAA;AAAA,cAAA;;;YAElBL,WAAuB,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAAA;;;;;;;;"}

package/dist/chunks/{NcCollectionList-B9qCtjJw.mjs → NcCollectionList.mjs}

@@ -1,17 +1,17 @@
-import '../assets/NcCollectionList-e5JFvzqX.css';
+import '../assets/NcCollectionList.css';
 import debounce from "debounce";
 import { resolveComponent, openBlock, createElementBlock, createVNode, toDisplayString, withModifiers, normalizeClass, withDirectives, createElementVNode, vModelText, Fragment, renderList, createBlock, resolveDynamicComponent, withCtx, createCommentVNode, createTextVNode, Transition, ref } from "vue";
-import { r as register, L as t28, a as t, M as t6 } from "./_l10n-wdIzZwir.mjs";
-import { N as NcActionButton } from "./NcActionButton-BO5T5ePT.mjs";
-import { N as NcActions } from "./NcActions-C-wDqSrv.mjs";
-import { N as NcAvatar } from "./NcAvatar-1KxMUN7V.mjs";
-import { g as getRoute } from "./autolink-DrIurosL.mjs";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-import { l as logger } from "./logger-D3RVzcfQ.mjs";
-import { N as NcSelect } from "./NcSelect--kERLlBK.mjs";
+import { r as register, L as t29, a as t, M as t7 } from "./_l10n.mjs";
+import { N as NcActionButton } from "./NcActionButton.mjs";
+import { N as NcActions } from "./NcActions.mjs";
+import { N as NcAvatar } from "./NcAvatar.mjs";
+import { g as getRoute } from "./autolink.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
+import { l as logger } from "./logger.mjs";
+import { N as NcSelect } from "./NcSelect.mjs";
 import axios from "@nextcloud/axios";
 import { generateOcsUrl } from "@nextcloud/router";
-register(t28);
+register(t29);
 const _sfc_main$1 = {
   name: "NcCollectionListItem",
   components: {
@@ -241,7 +241,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   ]);
 }
 const NcCollectionListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-8ebb9fc1"]]);
-register(t6);
+register(t7);
 function extractOcsData(response) {
   return response.data.ocs.data;
 }
@@ -591,4 +591,4 @@ const NcCollectionList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc
 export {
   NcCollectionList as N
 };
-//# sourceMappingURL=NcCollectionList-B9qCtjJw.mjs.map
+//# sourceMappingURL=NcCollectionList.mjs.map