@nextcloud/vue 9.3.1 → 9.3.3

package/dist/assets/{NcModal-DLWvQ8EA.css → NcModal-Du-f0B7Y.css}

@@ -9,14 +9,14 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-1639aad0] {
+.material-design-icon[data-v-99ca734a] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.modal-mask[data-v-1639aad0] {
+.modal-mask[data-v-99ca734a] {
   position: fixed;
   z-index: 9998;
   top: 0;
@@ -27,16 +27,16 @@
   --backdrop-color: 0, 0, 0;
   background-color: rgba(var(--backdrop-color), 0.5);
 }
-.modal-mask[data-v-1639aad0], .modal-mask[data-v-1639aad0] * {
+.modal-mask[data-v-99ca734a], .modal-mask[data-v-99ca734a] * {
   box-sizing: border-box;
 }
-.modal-mask--opaque[data-v-1639aad0] {
+.modal-mask--opaque[data-v-99ca734a] {
   background-color: rgba(var(--backdrop-color), 0.92);
 }
-.modal-mask--light[data-v-1639aad0] {
+.modal-mask--light[data-v-99ca734a] {
   --backdrop-color: 255, 255, 255;
 }
-.modal-header[data-v-1639aad0] {
+.modal-header[data-v-99ca734a] {
   position: absolute;
   z-index: 10001;
   top: 0;
@@ -49,7 +49,7 @@
   overflow: hidden;
   transition: opacity 250ms, visibility 250ms;
 }
-.modal-header__name[data-v-1639aad0] {
+.modal-header__name[data-v-99ca734a] {
   overflow-x: hidden;
   width: 100%;
   padding: 0 calc(var(--default-clickable-area) * 3) 0 12px;
@@ -60,26 +60,26 @@
   margin-block: 0;
 }
 @media only screen and (min-width: 1024px) {
-.modal-header__name[data-v-1639aad0] {
+.modal-header__name[data-v-99ca734a] {
     padding-inline-start: calc(var(--default-clickable-area) * 3);
     text-align: center;
 }
 }
-.modal-header .icons-menu[data-v-1639aad0] {
+.modal-header .icons-menu[data-v-99ca734a] {
   position: absolute;
   inset-inline-end: 0;
   display: flex;
   align-items: center;
   justify-content: flex-end;
 }
-.modal-header .icons-menu .header-close[data-v-1639aad0] {
+.modal-header .icons-menu .header-close[data-v-99ca734a] {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: calc((var(--header-height) - var(--default-clickable-area)) / 2);
   padding: 0;
 }
-.modal-header .icons-menu .play-pause-icons[data-v-1639aad0] {
+.modal-header .icons-menu .play-pause-icons[data-v-99ca734a] {
   position: relative;
   width: var(--header-height);
   height: var(--header-height);
@@ -89,33 +89,33 @@
   border: none;
   background-color: transparent;
 }
-.modal-header .icons-menu .play-pause-icons:hover .play-pause-icons__icon[data-v-1639aad0], .modal-header .icons-menu .play-pause-icons:focus .play-pause-icons__icon[data-v-1639aad0] {
+.modal-header .icons-menu .play-pause-icons:hover .play-pause-icons__icon[data-v-99ca734a], .modal-header .icons-menu .play-pause-icons:focus .play-pause-icons__icon[data-v-99ca734a] {
   opacity: 1;
   border-radius: calc(var(--default-clickable-area) / 2);
   background-color: rgba(127, 127, 127, 0.25);
 }
-.modal-header .icons-menu .play-pause-icons__icon[data-v-1639aad0] {
+.modal-header .icons-menu .play-pause-icons__icon[data-v-99ca734a] {
   width: var(--default-clickable-area);
   height: var(--default-clickable-area);
   margin: calc((var(--header-height) - var(--default-clickable-area)) / 2);
   cursor: pointer;
   opacity: 0.7;
 }
-.modal-header .icons-menu[data-v-1639aad0]  .action-item {
+.modal-header .icons-menu[data-v-99ca734a]  .action-item {
   margin: calc((var(--header-height) - var(--default-clickable-area)) / 2);
 }
-.modal-header .icons-menu[data-v-1639aad0]  .action-item--single {
+.modal-header .icons-menu[data-v-99ca734a]  .action-item--single {
   width: var(--default-clickable-area);
   height: var(--default-clickable-area);
   cursor: pointer;
   background-position: center;
   background-size: 22px;
 }
-.modal-header .icons-menu .header-actions[data-v-1639aad0] button:focus-visible {
+.modal-header .icons-menu .header-actions[data-v-99ca734a] button:focus-visible {
   box-shadow: none !important;
   outline: 2px solid #fff !important;
 }
-.modal-wrapper[data-v-1639aad0] {
+.modal-wrapper[data-v-99ca734a] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -123,8 +123,8 @@
   height: 100%;
   /* Navigation buttons */
 }
-.modal-wrapper .prev[data-v-1639aad0],
-.modal-wrapper .next[data-v-1639aad0] {
+.modal-wrapper .prev[data-v-99ca734a],
+.modal-wrapper .next[data-v-99ca734a] {
   z-index: 10000;
   height: 35vh;
   min-height: 300px;
@@ -132,21 +132,21 @@
   transition: opacity 250ms;
   color: white;
 }
-.modal-wrapper .prev[data-v-1639aad0]:focus-visible,
-.modal-wrapper .next[data-v-1639aad0]:focus-visible {
+.modal-wrapper .prev[data-v-99ca734a]:focus-visible,
+.modal-wrapper .next[data-v-99ca734a]:focus-visible {
   box-shadow: 0 0 0 2px var(--color-primary-element-text);
   background-color: var(--color-box-shadow);
 }
-.modal-wrapper .prev[data-v-1639aad0] {
+.modal-wrapper .prev[data-v-99ca734a] {
   inset-inline-start: 2px;
 }
-.modal-wrapper .next[data-v-1639aad0] {
+.modal-wrapper .next[data-v-99ca734a] {
   inset-inline-end: 2px;
 }
-.modal-wrapper[data-v-1639aad0] {
+.modal-wrapper[data-v-99ca734a] {
   /* Content */
 }
-.modal-wrapper .modal-container[data-v-1639aad0] {
+.modal-wrapper .modal-container[data-v-99ca734a] {
   position: relative;
   display: flex;
   padding: 0;
@@ -157,33 +157,33 @@
   box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
   overflow: auto;
 }
-.modal-wrapper .modal-container__close[data-v-1639aad0] {
+.modal-wrapper .modal-container__close[data-v-99ca734a] {
   z-index: 1;
   position: absolute;
   top: 4px;
   inset-inline-end: var(--default-grid-baseline);
 }
-.modal-wrapper .modal-container__content[data-v-1639aad0] {
+.modal-wrapper .modal-container__content[data-v-99ca734a] {
   width: 100%;
   min-height: 52px;
   overflow: auto;
 }
-.modal-wrapper--small > .modal-container[data-v-1639aad0] {
+.modal-wrapper--small > .modal-container[data-v-99ca734a] {
   width: 400px;
   max-width: 90%;
-  max-height: min(90%, 100% - 2 * var(--header-height));
+  max-height: min(90%, 100% - 2 * var(--header-height) - 2 * var(--body-container-margin));
 }
-.modal-wrapper--normal > .modal-container[data-v-1639aad0] {
+.modal-wrapper--normal > .modal-container[data-v-99ca734a] {
   max-width: 90%;
   width: 600px;
-  max-height: min(90%, 100% - 2 * var(--header-height));
+  max-height: min(90%, 100% - 2 * var(--header-height) - 2 * var(--body-container-margin));
 }
-.modal-wrapper--large > .modal-container[data-v-1639aad0] {
+.modal-wrapper--large > .modal-container[data-v-99ca734a] {
   max-width: 90%;
   width: 900px;
-  max-height: min(90%, 100% - 2 * var(--header-height));
+  max-height: min(90%, 100% - 2 * var(--header-height) - 2 * var(--body-container-margin));
 }
-.modal-wrapper--full > .modal-container[data-v-1639aad0] {
+.modal-wrapper--full > .modal-container[data-v-99ca734a] {
   width: 100%;
   height: calc(100% - var(--header-height));
   position: absolute;
@@ -191,7 +191,7 @@
   border-radius: 0;
 }
 @media only screen and ((max-width: 512px) or (max-height: 400px)) {
-.modal-wrapper .modal-container[data-v-1639aad0] {
+.modal-wrapper .modal-container[data-v-99ca734a] {
     max-width: initial;
     width: 100%;
     max-height: initial;
@@ -203,60 +203,60 @@
 }
 
 /* TRANSITIONS */
-.fade-enter-active[data-v-1639aad0],
-.fade-leave-active[data-v-1639aad0] {
+.fade-enter-active[data-v-99ca734a],
+.fade-leave-active[data-v-99ca734a] {
   transition: opacity 250ms;
 }
-.fade-enter-from[data-v-1639aad0],
-.fade-leave-to[data-v-1639aad0] {
+.fade-enter-from[data-v-99ca734a],
+.fade-leave-to[data-v-99ca734a] {
   opacity: 0;
 }
-.fade-visibility-enter-from[data-v-1639aad0],
-.fade-visibility-leave-to[data-v-1639aad0] {
+.fade-visibility-enter-from[data-v-99ca734a],
+.fade-visibility-leave-to[data-v-99ca734a] {
   visibility: hidden;
   opacity: 0;
 }
-.modal-in-enter-active[data-v-1639aad0],
-.modal-in-leave-active[data-v-1639aad0],
-.modal-out-enter-active[data-v-1639aad0],
-.modal-out-leave-active[data-v-1639aad0] {
+.modal-in-enter-active[data-v-99ca734a],
+.modal-in-leave-active[data-v-99ca734a],
+.modal-out-enter-active[data-v-99ca734a],
+.modal-out-leave-active[data-v-99ca734a] {
   transition: opacity 250ms;
 }
-.modal-in-enter-from[data-v-1639aad0],
-.modal-in-leave-to[data-v-1639aad0],
-.modal-out-enter-from[data-v-1639aad0],
-.modal-out-leave-to[data-v-1639aad0] {
+.modal-in-enter-from[data-v-99ca734a],
+.modal-in-leave-to[data-v-99ca734a],
+.modal-out-enter-from[data-v-99ca734a],
+.modal-out-leave-to[data-v-99ca734a] {
   opacity: 0;
 }
-.modal-in-enter .modal-container[data-v-1639aad0],
-.modal-in-leave-to .modal-container[data-v-1639aad0] {
+.modal-in-enter .modal-container[data-v-99ca734a],
+.modal-in-leave-to .modal-container[data-v-99ca734a] {
   transform: scale(0.9);
 }
-.modal-out-enter .modal-container[data-v-1639aad0],
-.modal-out-leave-to .modal-container[data-v-1639aad0] {
+.modal-out-enter .modal-container[data-v-99ca734a],
+.modal-out-leave-to .modal-container[data-v-99ca734a] {
   transform: scale(1.1);
 }
-.modal-mask .play-pause-icons .progress-ring[data-v-1639aad0] {
+.modal-mask .play-pause-icons .progress-ring[data-v-99ca734a] {
   position: absolute;
   top: 0;
   inset-inline-start: 0;
   transform: rotate(-90deg);
 }
-.modal-mask .play-pause-icons .progress-ring .progress-ring__circle[data-v-1639aad0] {
+.modal-mask .play-pause-icons .progress-ring .progress-ring__circle[data-v-99ca734a] {
   transition: 100ms stroke-dashoffset;
   transform-origin: 50% 50%;
-  animation: progressring-1639aad0 linear var(--3caa6a4b) infinite;
+  animation: progressring-99ca734a linear var(--bf9ee90a) infinite;
   stroke-linecap: round;
   stroke-dashoffset: 94.2477796077;
   stroke-dasharray: 94.2477796077;
 }
-.modal-mask .play-pause-icons--paused .play-pause-icons__icon[data-v-1639aad0] {
-  animation: breath-1639aad0 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+.modal-mask .play-pause-icons--paused .play-pause-icons__icon[data-v-99ca734a] {
+  animation: breath-99ca734a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
 }
-.modal-mask .play-pause-icons--paused .progress-ring__circle[data-v-1639aad0] {
+.modal-mask .play-pause-icons--paused .progress-ring__circle[data-v-99ca734a] {
   animation-play-state: paused !important;
 }
-@keyframes progressring-1639aad0 {
+@keyframes progressring-99ca734a {
 from {
     stroke-dashoffset: 94.2477796077;
 }
@@ -264,7 +264,7 @@ to {
     stroke-dashoffset: 0;
 }
 }
-@keyframes breath-1639aad0 {
+@keyframes breath-99ca734a {
 0% {
     opacity: 1;
 }

package/dist/chunks/{NcActionButton-pKOSrlGE.mjs → NcActionButton-DNXoAooH.mjs}

@@ -1,8 +1,8 @@
 import '../assets/NcActionButton-Bb0ihLdt.css';
-import { c as mdiChevronRight, d as mdiCheck } from "./mdi-XFJRiRqJ.mjs";
+import { c as mdiChevronRight, d as mdiCheck } from "./mdi-CpchYUUV.mjs";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.mjs";
-import { A as ActionTextMixin } from "./actionText-DYzDdbVe.mjs";
-import { a as NC_ACTIONS_IS_SEMANTIC_MENU } from "./useNcActions-CiGWxAJE.mjs";
+import { A as ActionTextMixin } from "./actionText-BXR0sWNu.mjs";
+import { a as NC_ACTIONS_IS_SEMANTIC_MENU } from "./useNcActions-BzPO2c4h.mjs";
 import { resolveComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, mergeProps, renderSlot, createBlock, createCommentVNode, normalizeStyle, toDisplayString } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = {
@@ -225,4 +225,4 @@ const NcActionButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_r
 export {
   NcActionButton as N
 };
-//# sourceMappingURL=NcActionButton-pKOSrlGE.mjs.map
+//# sourceMappingURL=NcActionButton-DNXoAooH.mjs.map

package/dist/chunks/{NcActionButton-pKOSrlGE.mjs.map → NcActionButton-DNXoAooH.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcActionButton-pKOSrlGE.mjs","sources":["../../src/components/NcActionButton/NcActionButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconTrashCanOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :close-after-click=\"true\" @click=\"showMessage('Delete and close menu')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconTrashCanOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete and close\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :is-menu=\"true\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tCreate\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :disabled=\"true\" @click=\"showMessage('Disabled')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconTrashCanOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDisabled button\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'\n\timport IconPlus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconTrashCanOutline,\n\t\t\tIconPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\nIf you're using a long text, you can specify a `name` prop.\n\nFor the same purpose, but in a more compact way, `description` prop can be used.\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd new\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton name=\"Long button\" @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconTrashCanOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tThis button is associated with a very long text.\\nAnd with new lines too.\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton description=\"Subline description for the button\" @click=\"showMessage('Edit')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tEdit\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'\n\timport IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'\n\timport IconPlus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconTrashCanOutline,\n\t\t\tIconPencilOutline,\n\t\t\tIconPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nAction icon attribute with a single action\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd new\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport IconPlus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nYou can also use a custom icon, for example from the vue-material-design-icons library:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<IconHandBackLeftOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise left hand\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<IconHandBackRightOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise right hand\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'\nimport IconHandBackRightOutline from 'vue-material-design-icons/HandBackRightOutline.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconHandBackLeftOutline,\n\t\tIconHandBackRightOutline,\n\t},\n}\n</script>\n```\n\n### With different model behavior\nBy default the button will act like a normal button, but it is also possible to change the behavior to a toggle button, checkbox button or radio button.\n\nFor example to have the button act like a toggle button just set the `modelValue` property to the toggle state:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton v-model=\"fullscreen\">\n\t\t\t<template #icon>\n\t\t\t\t<IconFullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport IconFullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconFullscreen,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfullscreen: true,\n\t\t}\n\t},\n}\n</script>\n```\n\nAnother example would be using it with checkbox semantics, to enable or disable features.\nThis also allows tri-state behavior (`true`, `false`, `null`) in which case `aria-checked` will be either `true`, `false` or `mixed`.\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton v-model=\"handRaised\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<IconHandBackLeftOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise hand\n\t\t</NcActionButton>\n\t\t<NcActionButton v-model=\"fullscreen\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<IconFullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'\nimport IconFullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconHandBackLeftOutline,\n\t\tIconFullscreen,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfullscreen: true,\n\t\t\thandRaised: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nIt is also possible to use the button with radio semantics, this is only possible in menus and not for inline actions!\n\nWith a string `modelValue`, checked state is determined by the `value` property and updates `modelValue` with the new `value` string.\n\nWith a boolean `modelValue`, checked state is determined by `modelValue` and updates to `true` on check.\n\nNote: unlike native radio buttons, `NcActionButton` are not grouped by name, so you need to connect them by bind correct `modelValue``.\n\n```vue\n<template>\n\t<div>\n\t\t<NcActions>\n\t\t\t<NcActionButton v-model=\"payment\" type=\"radio\" value=\"cash\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconCash :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPay with cash\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton v-model=\"payment\" type=\"radio\" value=\"card\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconCreditCardOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPay by card\n\t\t\t</NcActionButton>\n\t\t\t<NcActionSeparator />\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isLeft\" @update:modelValue=\"setAlign('Left', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFormatAlignLeft :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tLeft\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isCenter\" @update:modelValue=\"setAlign('Center', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFormatAlignCenter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tCenter\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isRight\" @update:modelValue=\"setAlign('Right', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFormatAlignRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tRight\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t\t<p>payment = \"{{ payment }}\"</p>\n\t\t<p>align.isLeft = {{ align.isLeft }}</p>\n\t\t<p>align.isCenter = {{ align.isCenter }}</p>\n\t\t<p>align.isRight = {{ align.isRight }}</p>\n\t</div>\n</template>\n<script>\nimport IconCash from 'vue-material-design-icons/Cash.vue'\nimport IconCreditCardOutline from 'vue-material-design-icons/CreditCardOutline.vue'\nimport IconFormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'\nimport IconFormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'\nimport IconFormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconCash,\n\t\tIconCreditCardOutline,\n\t\tIconFormatAlignLeft,\n\t\tIconFormatAlignCenter,\n\t\tIconFormatAlignRight,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tpayment: 'card',\n\t\t\talign: {\n\t\t\t\tisLeft: false,\n\t\t\t\tisCenter: true,\n\t\t\t\tisRight: false,\n\t\t\t},\n\t\t}\n\t},\n\tmethods: {\n\t\tsetAlign(direction, value) {\n\t\t\tthis.align.isLeft = false\n\t\t\tthis.align.isCenter = false\n\t\t\tthis.align.isRight = false\n\t\t\tthis.align[`is${direction}`] = value\n\t\t},\n\t}\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<button\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\tclass=\"action-button button-vue\"\n\t\t\t:class=\"{\n\t\t\t\t'action-button--active': isChecked,\n\t\t\t\tfocusable: isFocusable,\n\t\t\t}\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:title=\"title\"\n\t\t\t:type=\"nativeType\"\n\t\t\tv-bind=\"buttonAttributes\"\n\t\t\t@click=\"handleClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span\n\t\t\t\t\t:class=\"[isIconUrl ? 'action-button__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclass=\"action-button__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<span class=\"action-button__longtext-wrapper\">\n\t\t\t\t<strong\n\t\t\t\t\tv-if=\"name\"\n\t\t\t\t\tclass=\"action-button__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t\t<span\n\t\t\t\t\tv-if=\"isLongText\"\n\t\t\t\t\tclass=\"action-button__longtext\"\n\t\t\t\t\tv-text=\"text\" />\n\t\t\t\t<!-- default text display -->\n\t\t\t\t<span\n\t\t\t\t\tv-else\n\t\t\t\t\tclass=\"action-button__text\">\n\t\t\t\t\t{{ text }}\n\t\t\t\t</span>\n\t\t\t\t<span\n\t\t\t\t\tv-if=\"description\"\n\t\t\t\t\tclass=\"action-button__description\"\n\t\t\t\t\tv-text=\"description\" />\n\t\t\t</span>\n\n\t\t\t<!-- right(in LTR) or left(in RTL) arrow icon when there is a sub-menu -->\n\t\t\t<NcIconSvgWrapper\n\t\t\t\tv-if=\"isMenu\"\n\t\t\t\tclass=\"action-button__menu-icon\"\n\t\t\t\tdirectional\n\t\t\t\t:path=\"mdiChevronRight\" />\n\t\t\t<NcIconSvgWrapper v-else-if=\"isChecked\" :path=\"mdiCheck\" class=\"action-button__pressed-icon\" />\n\n\t\t\t<span v-else-if=\"isChecked === false\" class=\"action-button__pressed-icon material-design-icon\" />\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</button>\n\t</li>\n</template>\n\n<script>\nimport { mdiCheck, mdiChevronRight } from '@mdi/js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport { NC_ACTIONS_IS_SEMANTIC_MENU } from '../NcActions/useNcActions.ts'\n\n/**\n * Button component to be used in Actions\n */\nexport default {\n\tname: 'NcActionButton',\n\n\tcomponents: {\n\t\tNcIconSvgWrapper,\n\t},\n\n\tmixins: [ActionTextMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: NC_ACTIONS_IS_SEMANTIC_MENU,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * disabled state of the action button\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 * If this is a menu, a chevron icon will\n\t\t * be added at the end of the line\n\t\t */\n\t\tisMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The button's behavior, by default the button acts like a normal button with optional toggle button behavior if `modelValue` is `true` or `false`.\n\t\t * But you can also set to checkbox button behavior with tri-state or radio button like behavior.\n\t\t * This extends the native HTML button type attribute.\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'button',\n\t\t\tvalidator: (behavior) => ['button', 'checkbox', 'radio', 'reset', 'submit'].includes(behavior),\n\t\t},\n\n\t\t/**\n\t\t * The buttons state if `type` is 'checkbox' or 'radio' (meaning if it is pressed / selected).\n\t\t * For checkbox and toggle button behavior - boolean value.\n\t\t * For radio button behavior - could be a boolean checked or a string with the value of the button.\n\t\t * Note: Unlike native radio buttons, NcActionButton are not grouped by name, so you need to connect them by bind correct modelValue.\n\t\t *\n\t\t *  **This is not availabe for `type='submit'` or `type='reset'`**\n\t\t *\n\t\t * If using `type='checkbox'` a `model-value` of `true` means checked, `false` means unchecked and `null` means indeterminate (tri-state)\n\t\t * For `type='radio'` `null` is equal to `false`\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The value used for the `modelValue` when this component is used with radio behavior\n\t\t * Similar to the `value` attribute of `<input type=\"radio\">`\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 * Small underlying text content of the entry\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['update:modelValue'],\n\n\tsetup() {\n\t\treturn {\n\t\t\tmdiCheck,\n\t\t\tmdiChevronRight,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\n\t\t/**\n\t\t * The current \"checked\" or \"pressed\" state for the model behavior\n\t\t */\n\t\tisChecked() {\n\t\t\tif (this.type === 'radio' && typeof this.modelValue !== 'boolean') {\n\t\t\t\treturn this.modelValue === this.value\n\t\t\t}\n\t\t\treturn this.modelValue\n\t\t},\n\n\t\t/**\n\t\t * The native HTML type to set on the button\n\t\t */\n\t\tnativeType() {\n\t\t\tif (this.type === 'submit' || this.type === 'reset') {\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn 'button'\n\t\t},\n\n\t\t/**\n\t\t * HTML attributes to bind to the <button>\n\t\t */\n\t\tbuttonAttributes() {\n\t\t\tconst attributes = {}\n\n\t\t\tif (this.isInSemanticMenu) {\n\t\t\t\t// By default it needs to be a menu item in semantic menus\n\t\t\t\tattributes.role = 'menuitem'\n\n\t\t\t\tif (this.type === 'radio') {\n\t\t\t\t\tattributes.role = 'menuitemradio'\n\t\t\t\t\tattributes['aria-checked'] = this.isChecked ? 'true' : 'false'\n\t\t\t\t} else if (this.type === 'checkbox' || (this.nativeType === 'button' && this.modelValue !== null)) {\n\t\t\t\t\t// either if checkbox behavior was set or the model value is not unset\n\t\t\t\t\tattributes.role = 'menuitemcheckbox'\n\t\t\t\t\tattributes['aria-checked'] = this.modelValue === null ? 'mixed' : (this.modelValue ? 'true' : 'false')\n\t\t\t\t}\n\t\t\t} else if (this.modelValue !== null && this.nativeType === 'button') {\n\t\t\t\t// In case this has a modelValue it is considered a toggle button, so we need to set the aria-pressed\n\t\t\t\tattributes['aria-pressed'] = this.modelValue ? 'true' : 'false'\n\t\t\t}\n\n\t\t\treturn attributes\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Forward click event, let mixin handle the close-after-click and emit new modelValue if needed\n\t\t *\n\t\t * @param {MouseEvent} event - The click event\n\t\t */\n\t\thandleClick(event) {\n\t\t\tthis.onClick(event)\n\t\t\t// If modelValue or type is set (so modelValue might be null for tri-state) we need to update it\n\t\t\tif (this.modelValue !== null || this.type !== 'button') {\n\t\t\t\tif (this.type === 'radio') {\n\t\t\t\t\tif (typeof this.modelValue !== 'boolean') {\n\t\t\t\t\t\t// String-value radios behavior is similar to native - click on checked radio does nothing\n\t\t\t\t\t\tif (!this.isChecked) {\n\t\t\t\t\t\t\tthis.$emit('update:modelValue', this.value)\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Boolean radio allows to uncheck\n\t\t\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// Checkbox toggles value\n\t\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/action.scss' as *;\n@include action-active;\n@include action--disabled;\n@include action-item('button');\n\n.action-button {\n\t&__pressed-icon {\n\t\tmargin-inline: auto calc($icon-margin * -1);\n\t}\n\n\t* {\n\t\tcursor: pointer;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_mergeProps","_renderSlot","_normalizeStyle","_toDisplayString","_createBlock","_openBlock"],"mappings":";;;;;;AA6YA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA;EAGD,QAAQ,CAAC,eAAe;AAAA,EAExB,QAAQ;AAAA,IACP,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOV,QAAQ;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;IAQV,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,aAAa,CAAC,UAAU,YAAY,SAAS,SAAS,QAAQ,EAAE,SAAS,QAAQ;AAAA;;;;;;;;;;;;IAc9F,YAAY;AAAA,MACX,MAAM,CAAC,SAAS,MAAM;AAAA,MACtB,SAAS;AAAA;;;;;IAOV,OAAO;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO,CAAC,mBAAmB;AAAA,EAE3B,QAAQ;AACP,WAAO;AAAA,MACN;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAAA,EAEA,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMT,cAAc;AACb,aAAO,CAAC,KAAK;AAAA,IACd;AAAA;AAAA;AAAA;AAAA,IAKA,YAAY;AACX,UAAI,KAAK,SAAS,WAAW,OAAO,KAAK,eAAe,WAAW;AAClE,eAAO,KAAK,eAAe,KAAK;AAAA,MACjC;AACA,aAAO,KAAK;AAAA,IACb;AAAA;AAAA;AAAA;AAAA,IAKA,aAAa;AACZ,UAAI,KAAK,SAAS,YAAY,KAAK,SAAS,SAAS;AACpD,eAAO,KAAK;AAAA,MACb;AACA,aAAO;AAAA,IACR;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAmB;AAClB,YAAM,aAAa,CAAA;AAEnB,UAAI,KAAK,kBAAkB;AAE1B,mBAAW,OAAO;AAElB,YAAI,KAAK,SAAS,SAAS;AAC1B,qBAAW,OAAO;AAClB,qBAAW,cAAc,IAAI,KAAK,YAAY,SAAS;AAAA,QACxD,WAAW,KAAK,SAAS,cAAe,KAAK,eAAe,YAAY,KAAK,eAAe,MAAO;AAElG,qBAAW,OAAO;AAClB,qBAAW,cAAc,IAAI,KAAK,eAAe,OAAO,UAAW,KAAK,aAAa,SAAS;AAAA,QAC/F;AAAA,MACD,WAAW,KAAK,eAAe,QAAQ,KAAK,eAAe,UAAU;AAEpE,mBAAW,cAAc,IAAI,KAAK,aAAa,SAAS;AAAA,MACzD;AAEA,aAAO;AAAA,IACR;AAAA;EAGD,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMR,YAAY,OAAO;AAClB,WAAK,QAAQ,KAAK;AAElB,UAAI,KAAK,eAAe,QAAQ,KAAK,SAAS,UAAU;AACvD,YAAI,KAAK,SAAS,SAAS;AAC1B,cAAI,OAAO,KAAK,eAAe,WAAW;AAEzC,gBAAI,CAAC,KAAK,WAAW;AACpB,mBAAK,MAAM,qBAAqB,KAAK,KAAK;AAAA,YAC3C;AAAA,UACD,OAAO;AAEN,iBAAK,MAAM,qBAAqB,CAAC,KAAK,SAAS;AAAA,UAChD;AAAA,QACD,OAAO;AAEN,eAAK,MAAM,qBAAqB,CAAC,KAAK,SAAS;AAAA,QAChD;AAAA,MACD;AAAA,IACD;AAAA;AAEF;;;AA7NS,MAAA,aAAA,EAAA,OAAM,kCAAiC;;;EAG3C,OAAM;;;;;EAYN,OAAM;;;;;EAiB8B,OAAM;;;;sBAvD9CA,mBA4DK,MAAA;AAAA,IA5DD,OAAKC,eAAA,CAAC,UAAQ,EAAA,oBAA+B,OAAA,SAAQ,CAAA,CAAA;AAAA,IAAK,MAAM,SAAA,oBAAgB;AAAA;IACnFC,mBA0DS,UA1DTC,WA0DS;AAAA,MAzDP,cAAY,KAAA;AAAA,MACb,QAAM,4BAA0B;AAAA,iCACO,SAAA;AAAA,mBAA0B,SAAA;AAAA;MAIhE,UAAU,OAAA;AAAA,MACV,OAAO,KAAA;AAAA,MACP,MAAM,SAAA;AAAA,OACC,SAAA,kBAAgB;AAAA,MACvB,gDAAO,SAAA,eAAA,SAAA,YAAA,GAAA,IAAA;AAAA;MAERC,WAMO,yBANP,MAMO;AAAA,QALNF,mBAI+B,QAAA;AAAA,UAH7B,OAAKD,eAAA,CAAA,CAAG,KAAA,YAAS,6BAAgC,KAAA,IAAI,GAGhD,qBAAqB,CAAA;AAAA,UAF1B,OAAKI,eAAA,EAAA,iBAAqB,KAAA,YAAS,OAAU,KAAA,IAAI,MAAA,KAAA,CAAA;AAAA,UAClD,eAAY;AAAA;;MAKdH,mBAsBO,QAtBP,YAsBO;AAAA,QApBC,KAAA,qBADPF,mBAIS,UAJT,YAISM,gBADL,KAAA,IAAI,GAAA,CAAA;QAKD,KAAA,2BADPN,mBAGiB,QAAA;AAAA;UADhB,OAAM;AAAA,UACN,aAAAM,gBAAa,KAAL,IAAI;AAAA,iDAEbN,mBAIO,QAJP,YAIOM,gBADH,KAAA,IAAI,GAAA,CAAA;AAAA,QAGD,OAAA,4BADPN,mBAGwB,QAAA;AAAA;UADvB,OAAM;AAAA,UACN,aAAAM,gBAAoB,OAAZ,WAAW;AAAA;;MAKd,OAAA,uBADPC,YAI2B,6BAAA;AAAA;QAF1B,OAAM;AAAA,QACN,aAAA;AAAA,QACC,MAAM,OAAA;AAAA,+BACqB,SAAA,0BAA7BA,YAA+F,6BAAA;AAAA;QAAtD,MAAM,OAAA;AAAA,QAAU,OAAM;AAAA,+BAE9C,SAAA,cAAS,SAA1BC,aAAAR,mBAAiG,QAAjG,UAAiG;;;;;;"}
+{"version":3,"file":"NcActionButton-DNXoAooH.mjs","sources":["../../src/components/NcActionButton/NcActionButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconTrashCanOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :close-after-click=\"true\" @click=\"showMessage('Delete and close menu')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconTrashCanOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete and close\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :is-menu=\"true\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tCreate\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :disabled=\"true\" @click=\"showMessage('Disabled')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconTrashCanOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDisabled button\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'\n\timport IconPlus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconTrashCanOutline,\n\t\t\tIconPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\nIf you're using a long text, you can specify a `name` prop.\n\nFor the same purpose, but in a more compact way, `description` prop can be used.\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd new\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton name=\"Long button\" @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconTrashCanOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tThis button is associated with a very long text.\\nAnd with new lines too.\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton description=\"Subline description for the button\" @click=\"showMessage('Edit')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tEdit\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'\n\timport IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'\n\timport IconPlus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconTrashCanOutline,\n\t\t\tIconPencilOutline,\n\t\t\tIconPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nAction icon attribute with a single action\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd new\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport IconPlus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nYou can also use a custom icon, for example from the vue-material-design-icons library:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<IconHandBackLeftOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise left hand\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<IconHandBackRightOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise right hand\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'\nimport IconHandBackRightOutline from 'vue-material-design-icons/HandBackRightOutline.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconHandBackLeftOutline,\n\t\tIconHandBackRightOutline,\n\t},\n}\n</script>\n```\n\n### With different model behavior\nBy default the button will act like a normal button, but it is also possible to change the behavior to a toggle button, checkbox button or radio button.\n\nFor example to have the button act like a toggle button just set the `modelValue` property to the toggle state:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton v-model=\"fullscreen\">\n\t\t\t<template #icon>\n\t\t\t\t<IconFullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport IconFullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconFullscreen,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfullscreen: true,\n\t\t}\n\t},\n}\n</script>\n```\n\nAnother example would be using it with checkbox semantics, to enable or disable features.\nThis also allows tri-state behavior (`true`, `false`, `null`) in which case `aria-checked` will be either `true`, `false` or `mixed`.\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton v-model=\"handRaised\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<IconHandBackLeftOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise hand\n\t\t</NcActionButton>\n\t\t<NcActionButton v-model=\"fullscreen\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<IconFullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'\nimport IconFullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconHandBackLeftOutline,\n\t\tIconFullscreen,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfullscreen: true,\n\t\t\thandRaised: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nIt is also possible to use the button with radio semantics, this is only possible in menus and not for inline actions!\n\nWith a string `modelValue`, checked state is determined by the `value` property and updates `modelValue` with the new `value` string.\n\nWith a boolean `modelValue`, checked state is determined by `modelValue` and updates to `true` on check.\n\nNote: unlike native radio buttons, `NcActionButton` are not grouped by name, so you need to connect them by bind correct `modelValue``.\n\n```vue\n<template>\n\t<div>\n\t\t<NcActions>\n\t\t\t<NcActionButton v-model=\"payment\" type=\"radio\" value=\"cash\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconCash :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPay with cash\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton v-model=\"payment\" type=\"radio\" value=\"card\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconCreditCardOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPay by card\n\t\t\t</NcActionButton>\n\t\t\t<NcActionSeparator />\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isLeft\" @update:modelValue=\"setAlign('Left', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFormatAlignLeft :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tLeft\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isCenter\" @update:modelValue=\"setAlign('Center', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFormatAlignCenter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tCenter\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isRight\" @update:modelValue=\"setAlign('Right', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFormatAlignRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tRight\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t\t<p>payment = \"{{ payment }}\"</p>\n\t\t<p>align.isLeft = {{ align.isLeft }}</p>\n\t\t<p>align.isCenter = {{ align.isCenter }}</p>\n\t\t<p>align.isRight = {{ align.isRight }}</p>\n\t</div>\n</template>\n<script>\nimport IconCash from 'vue-material-design-icons/Cash.vue'\nimport IconCreditCardOutline from 'vue-material-design-icons/CreditCardOutline.vue'\nimport IconFormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'\nimport IconFormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'\nimport IconFormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconCash,\n\t\tIconCreditCardOutline,\n\t\tIconFormatAlignLeft,\n\t\tIconFormatAlignCenter,\n\t\tIconFormatAlignRight,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tpayment: 'card',\n\t\t\talign: {\n\t\t\t\tisLeft: false,\n\t\t\t\tisCenter: true,\n\t\t\t\tisRight: false,\n\t\t\t},\n\t\t}\n\t},\n\tmethods: {\n\t\tsetAlign(direction, value) {\n\t\t\tthis.align.isLeft = false\n\t\t\tthis.align.isCenter = false\n\t\t\tthis.align.isRight = false\n\t\t\tthis.align[`is${direction}`] = value\n\t\t},\n\t}\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<button\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\tclass=\"action-button button-vue\"\n\t\t\t:class=\"{\n\t\t\t\t'action-button--active': isChecked,\n\t\t\t\tfocusable: isFocusable,\n\t\t\t}\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:title=\"title\"\n\t\t\t:type=\"nativeType\"\n\t\t\tv-bind=\"buttonAttributes\"\n\t\t\t@click=\"handleClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span\n\t\t\t\t\t:class=\"[isIconUrl ? 'action-button__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclass=\"action-button__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<span class=\"action-button__longtext-wrapper\">\n\t\t\t\t<strong\n\t\t\t\t\tv-if=\"name\"\n\t\t\t\t\tclass=\"action-button__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t\t<span\n\t\t\t\t\tv-if=\"isLongText\"\n\t\t\t\t\tclass=\"action-button__longtext\"\n\t\t\t\t\tv-text=\"text\" />\n\t\t\t\t<!-- default text display -->\n\t\t\t\t<span\n\t\t\t\t\tv-else\n\t\t\t\t\tclass=\"action-button__text\">\n\t\t\t\t\t{{ text }}\n\t\t\t\t</span>\n\t\t\t\t<span\n\t\t\t\t\tv-if=\"description\"\n\t\t\t\t\tclass=\"action-button__description\"\n\t\t\t\t\tv-text=\"description\" />\n\t\t\t</span>\n\n\t\t\t<!-- right(in LTR) or left(in RTL) arrow icon when there is a sub-menu -->\n\t\t\t<NcIconSvgWrapper\n\t\t\t\tv-if=\"isMenu\"\n\t\t\t\tclass=\"action-button__menu-icon\"\n\t\t\t\tdirectional\n\t\t\t\t:path=\"mdiChevronRight\" />\n\t\t\t<NcIconSvgWrapper v-else-if=\"isChecked\" :path=\"mdiCheck\" class=\"action-button__pressed-icon\" />\n\n\t\t\t<span v-else-if=\"isChecked === false\" class=\"action-button__pressed-icon material-design-icon\" />\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</button>\n\t</li>\n</template>\n\n<script>\nimport { mdiCheck, mdiChevronRight } from '@mdi/js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport { NC_ACTIONS_IS_SEMANTIC_MENU } from '../NcActions/useNcActions.ts'\n\n/**\n * Button component to be used in Actions\n */\nexport default {\n\tname: 'NcActionButton',\n\n\tcomponents: {\n\t\tNcIconSvgWrapper,\n\t},\n\n\tmixins: [ActionTextMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: NC_ACTIONS_IS_SEMANTIC_MENU,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * disabled state of the action button\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 * If this is a menu, a chevron icon will\n\t\t * be added at the end of the line\n\t\t */\n\t\tisMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The button's behavior, by default the button acts like a normal button with optional toggle button behavior if `modelValue` is `true` or `false`.\n\t\t * But you can also set to checkbox button behavior with tri-state or radio button like behavior.\n\t\t * This extends the native HTML button type attribute.\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'button',\n\t\t\tvalidator: (behavior) => ['button', 'checkbox', 'radio', 'reset', 'submit'].includes(behavior),\n\t\t},\n\n\t\t/**\n\t\t * The buttons state if `type` is 'checkbox' or 'radio' (meaning if it is pressed / selected).\n\t\t * For checkbox and toggle button behavior - boolean value.\n\t\t * For radio button behavior - could be a boolean checked or a string with the value of the button.\n\t\t * Note: Unlike native radio buttons, NcActionButton are not grouped by name, so you need to connect them by bind correct modelValue.\n\t\t *\n\t\t *  **This is not availabe for `type='submit'` or `type='reset'`**\n\t\t *\n\t\t * If using `type='checkbox'` a `model-value` of `true` means checked, `false` means unchecked and `null` means indeterminate (tri-state)\n\t\t * For `type='radio'` `null` is equal to `false`\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The value used for the `modelValue` when this component is used with radio behavior\n\t\t * Similar to the `value` attribute of `<input type=\"radio\">`\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 * Small underlying text content of the entry\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['update:modelValue'],\n\n\tsetup() {\n\t\treturn {\n\t\t\tmdiCheck,\n\t\t\tmdiChevronRight,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\n\t\t/**\n\t\t * The current \"checked\" or \"pressed\" state for the model behavior\n\t\t */\n\t\tisChecked() {\n\t\t\tif (this.type === 'radio' && typeof this.modelValue !== 'boolean') {\n\t\t\t\treturn this.modelValue === this.value\n\t\t\t}\n\t\t\treturn this.modelValue\n\t\t},\n\n\t\t/**\n\t\t * The native HTML type to set on the button\n\t\t */\n\t\tnativeType() {\n\t\t\tif (this.type === 'submit' || this.type === 'reset') {\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn 'button'\n\t\t},\n\n\t\t/**\n\t\t * HTML attributes to bind to the <button>\n\t\t */\n\t\tbuttonAttributes() {\n\t\t\tconst attributes = {}\n\n\t\t\tif (this.isInSemanticMenu) {\n\t\t\t\t// By default it needs to be a menu item in semantic menus\n\t\t\t\tattributes.role = 'menuitem'\n\n\t\t\t\tif (this.type === 'radio') {\n\t\t\t\t\tattributes.role = 'menuitemradio'\n\t\t\t\t\tattributes['aria-checked'] = this.isChecked ? 'true' : 'false'\n\t\t\t\t} else if (this.type === 'checkbox' || (this.nativeType === 'button' && this.modelValue !== null)) {\n\t\t\t\t\t// either if checkbox behavior was set or the model value is not unset\n\t\t\t\t\tattributes.role = 'menuitemcheckbox'\n\t\t\t\t\tattributes['aria-checked'] = this.modelValue === null ? 'mixed' : (this.modelValue ? 'true' : 'false')\n\t\t\t\t}\n\t\t\t} else if (this.modelValue !== null && this.nativeType === 'button') {\n\t\t\t\t// In case this has a modelValue it is considered a toggle button, so we need to set the aria-pressed\n\t\t\t\tattributes['aria-pressed'] = this.modelValue ? 'true' : 'false'\n\t\t\t}\n\n\t\t\treturn attributes\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Forward click event, let mixin handle the close-after-click and emit new modelValue if needed\n\t\t *\n\t\t * @param {MouseEvent} event - The click event\n\t\t */\n\t\thandleClick(event) {\n\t\t\tthis.onClick(event)\n\t\t\t// If modelValue or type is set (so modelValue might be null for tri-state) we need to update it\n\t\t\tif (this.modelValue !== null || this.type !== 'button') {\n\t\t\t\tif (this.type === 'radio') {\n\t\t\t\t\tif (typeof this.modelValue !== 'boolean') {\n\t\t\t\t\t\t// String-value radios behavior is similar to native - click on checked radio does nothing\n\t\t\t\t\t\tif (!this.isChecked) {\n\t\t\t\t\t\t\tthis.$emit('update:modelValue', this.value)\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Boolean radio allows to uncheck\n\t\t\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// Checkbox toggles value\n\t\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/action.scss' as *;\n@include action-active;\n@include action--disabled;\n@include action-item('button');\n\n.action-button {\n\t&__pressed-icon {\n\t\tmargin-inline: auto calc($icon-margin * -1);\n\t}\n\n\t* {\n\t\tcursor: pointer;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_mergeProps","_renderSlot","_normalizeStyle","_toDisplayString","_createBlock","_openBlock"],"mappings":"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"}

package/dist/chunks/{NcActionButtonGroup-D1cYCNRq.mjs → NcActionButtonGroup-B2MGnwK_.mjs}

@@ -1,8 +1,8 @@
 import '../assets/NcActionButtonGroup-Bt8kRk79.css';
 import { defineComponent, createElementBlock, openBlock, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from "vue";
-import { r as register, a as t } from "./_l10n-DrTiip5c.mjs";
+import { r as register, a as t } from "./_l10n-CgsPi8nC.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
-import { a as NC_ACTIONS_IS_SEMANTIC_MENU } from "./useNcActions-CiGWxAJE.mjs";
+import { a as NC_ACTIONS_IS_SEMANTIC_MENU } from "./useNcActions-BzPO2c4h.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 register();
 const _sfc_main = defineComponent({
@@ -57,4 +57,4 @@ const NcActionButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _
 export {
   NcActionButtonGroup as N
 };
-//# sourceMappingURL=NcActionButtonGroup-D1cYCNRq.mjs.map
+//# sourceMappingURL=NcActionButtonGroup-B2MGnwK_.mjs.map

package/dist/chunks/{NcActionButtonGroup-D1cYCNRq.mjs.map → NcActionButtonGroup-B2MGnwK_.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcActionButtonGroup-D1cYCNRq.mjs","sources":["../../src/components/NcActionButtonGroup/NcActionButtonGroup.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots,\nto group buttons as one visual action, like for text alignment.\nThis should be used sparingly for accessibility.\n\n```vue\n<template>\n\t<div style=\"display: flex; align-items: center;\">\n\t\t<NcActions>\n\t\t\t<NcActionButtonGroup name=\"Text alignment\">\n\t\t\t\t<NcActionButton aria-label=\"Align left\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"l\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconAlignHorizontalLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton aria-label=\"Align center\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"c\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconAlignHorizontalCenter :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton aria-label=\"Align right\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"r\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconAlignHorizontalRight :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActionButtonGroup>\n\t\t\t<NcActionButton :close-after-click=\"true\"\n\t\t\t\t@click=\"showMessage('Some other action')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSome other action\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</div>\n</template>\n<script>\nimport IconAlignHorizontalLeft from 'vue-material-design-icons/AlignHorizontalLeft.vue'\nimport IconAlignHorizontalRight from 'vue-material-design-icons/AlignHorizontalRight.vue'\nimport IconAlignHorizontalCenter from 'vue-material-design-icons/AlignHorizontalCenter.vue'\nimport IconPlus from 'vue-material-design-icons/Plus.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconAlignHorizontalLeft,\n\t\tIconAlignHorizontalRight,\n\t\tIconAlignHorizontalCenter,\n\t\tIconPlus,\n\t},\n\tdata() {\n\t\treturn { alignment: 'l' }\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"nc-button-group-base\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<div v-if=\"name\" :id=\"labelId\">\n\t\t\t{{ name }}\n\t\t</div>\n\t\t<ul class=\"nc-button-group-content\" role=\"group\" :aria-labelledby=\"name ? labelId : undefined\">\n\t\t\t<slot />\n\t\t</ul>\n\t</li>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { NC_ACTIONS_IS_SEMANTIC_MENU } from '../NcActions/useNcActions.ts'\n\n/**\n * A wrapper for allowing inlining NcAction components within the action menu\n */\nexport default defineComponent({\n\tname: 'NcActionButtonGroup',\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: NC_ACTIONS_IS_SEMANTIC_MENU,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Optional text shown below the button group\n\t\t */\n\t\tname: {\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tlabelId: createElementId(),\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\n\t},\n})\n</script>\n\n<style lang=\"scss\" scoped>\n.nc-button-group-base {\n\t>div {\n\t\ttext-align: center;\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\tul.nc-button-group-content {\n\t\tdisplay: flex;\n\t\tgap: 4px; // required for the focus-visible outline\n\t\tjustify-content: space-between;\n\t\t:slotted(li) {\n\t\t\tflex: 1 1;\n\t\t}\n\n\t\t:deep(.action-button) {\n\t\t\t// Fix action buttons beeing shifted to the left (right padding)\n\t\t\tpadding: 0 !important;\n\t\t\twidth: 100%;\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\n\t\t\t&.action-button--active {\n\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\tborder-radius: var(--border-radius-element);\n\t\t\t\tcolor: var(--color-primary-element-text);\n\n\t\t\t\t&:hover, &:focus, &:focus-within {\n\t\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.action-button__pressed-icon {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot"],"mappings":";;;;;;AAgGA,MAAK,YAAa,gBAAa;AAAA,EAC9B,MAAM;AAAA,EAEN,QAAQ;AAAA,IACP,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,MAAM;AAAA;;EAIR,QAAQ;AACP,WAAO;AAAA,MACN,SAAS,gBAAe;AAAA,IACzB;AAAA,EACD;AAAA,EAEA,SAAS;AAAA,IACR;AAAA;AAEF,CAAC;;;;;sBAjDAA,mBAOK,MAAA;AAAA,IAPD,OAAM;AAAA,IAAwB,MAAM,KAAA,oBAAgB;AAAA;IAC5C,KAAA,qBAAXA,mBAEM,OAAA;AAAA;MAFY,IAAI,KAAA;AAAA,uBAClB,KAAA,IAAI,GAAA,GAAA,UAAA;IAERC,mBAEK,MAAA;AAAA,MAFD,OAAM;AAAA,MAA0B,MAAK;AAAA,MAAS,mBAAiB,KAAA,OAAO,KAAA,UAAU;AAAA;MACnFC,WAAQ,KAAA,QAAA,SAAA;AAAA;;;;"}
+{"version":3,"file":"NcActionButtonGroup-B2MGnwK_.mjs","sources":["../../src/components/NcActionButtonGroup/NcActionButtonGroup.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots,\nto group buttons as one visual action, like for text alignment.\nThis should be used sparingly for accessibility.\n\n```vue\n<template>\n\t<div style=\"display: flex; align-items: center;\">\n\t\t<NcActions>\n\t\t\t<NcActionButtonGroup name=\"Text alignment\">\n\t\t\t\t<NcActionButton aria-label=\"Align left\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"l\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconAlignHorizontalLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton aria-label=\"Align center\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"c\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconAlignHorizontalCenter :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton aria-label=\"Align right\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"r\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconAlignHorizontalRight :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActionButtonGroup>\n\t\t\t<NcActionButton :close-after-click=\"true\"\n\t\t\t\t@click=\"showMessage('Some other action')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSome other action\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</div>\n</template>\n<script>\nimport IconAlignHorizontalLeft from 'vue-material-design-icons/AlignHorizontalLeft.vue'\nimport IconAlignHorizontalRight from 'vue-material-design-icons/AlignHorizontalRight.vue'\nimport IconAlignHorizontalCenter from 'vue-material-design-icons/AlignHorizontalCenter.vue'\nimport IconPlus from 'vue-material-design-icons/Plus.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconAlignHorizontalLeft,\n\t\tIconAlignHorizontalRight,\n\t\tIconAlignHorizontalCenter,\n\t\tIconPlus,\n\t},\n\tdata() {\n\t\treturn { alignment: 'l' }\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"nc-button-group-base\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<div v-if=\"name\" :id=\"labelId\">\n\t\t\t{{ name }}\n\t\t</div>\n\t\t<ul class=\"nc-button-group-content\" role=\"group\" :aria-labelledby=\"name ? labelId : undefined\">\n\t\t\t<slot />\n\t\t</ul>\n\t</li>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { NC_ACTIONS_IS_SEMANTIC_MENU } from '../NcActions/useNcActions.ts'\n\n/**\n * A wrapper for allowing inlining NcAction components within the action menu\n */\nexport default defineComponent({\n\tname: 'NcActionButtonGroup',\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: NC_ACTIONS_IS_SEMANTIC_MENU,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Optional text shown below the button group\n\t\t */\n\t\tname: {\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tlabelId: createElementId(),\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\n\t},\n})\n</script>\n\n<style lang=\"scss\" scoped>\n.nc-button-group-base {\n\t>div {\n\t\ttext-align: center;\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\tul.nc-button-group-content {\n\t\tdisplay: flex;\n\t\tgap: 4px; // required for the focus-visible outline\n\t\tjustify-content: space-between;\n\t\t:slotted(li) {\n\t\t\tflex: 1 1;\n\t\t}\n\n\t\t:deep(.action-button) {\n\t\t\t// Fix action buttons beeing shifted to the left (right padding)\n\t\t\tpadding: 0 !important;\n\t\t\twidth: 100%;\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\n\t\t\t&.action-button--active {\n\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\tborder-radius: var(--border-radius-element);\n\t\t\t\tcolor: var(--color-primary-element-text);\n\n\t\t\t\t&:hover, &:focus, &:focus-within {\n\t\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.action-button__pressed-icon {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot"],"mappings":";;;;;;AAgGA,MAAK,YAAa,gBAAa;AAAA,EAC9B,MAAM;AAAA,EAEN,QAAQ;AAAA,IACP,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,MAAM;AAAA;;EAIR,QAAQ;AACP,WAAO;AAAA,MACN,SAAS,gBAAe;AAAA,IACzB;AAAA,EACD;AAAA,EAEA,SAAS;AAAA,IACR;AAAA;AAEF,CAAC;;;;;sBAjDAA,mBAOK,MAAA;AAAA,IAPD,OAAM;AAAA,IAAwB,MAAM,KAAA,oBAAgB;AAAA;IAC5C,KAAA,qBAAXA,mBAEM,OAAA;AAAA;MAFY,IAAI,KAAA;AAAA,uBAClB,KAAA,IAAI,GAAA,GAAA,UAAA;IAERC,mBAEK,MAAA;AAAA,MAFD,OAAM;AAAA,MAA0B,MAAK;AAAA,MAAS,mBAAiB,KAAA,OAAO,KAAA,UAAU;AAAA;MACnFC,WAAQ,KAAA,QAAA,SAAA;AAAA;;;;"}

package/dist/chunks/{NcActionCaption-Fumfjzxj.mjs → NcActionCaption-Cgd3J8jw.mjs}

@@ -1,5 +1,5 @@
 import '../assets/NcActionCaption-DnG2OyWa.css';
-import { a as NC_ACTIONS_IS_SEMANTIC_MENU } from "./useNcActions-CiGWxAJE.mjs";
+import { a as NC_ACTIONS_IS_SEMANTIC_MENU } from "./useNcActions-BzPO2c4h.mjs";
 import { createElementBlock, openBlock, toDisplayString } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = {
@@ -31,4 +31,4 @@ const NcActionCaption = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_
 export {
   NcActionCaption as N
 };
-//# sourceMappingURL=NcActionCaption-Fumfjzxj.mjs.map
+//# sourceMappingURL=NcActionCaption-Cgd3J8jw.mjs.map

package/dist/chunks/{NcActionCaption-Fumfjzxj.mjs.map → NcActionCaption-Cgd3J8jw.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcActionCaption-Fumfjzxj.mjs","sources":["../../src/components/NcActionCaption/NcActionCaption.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<NcActions>\n\t\t<NcActionCaption name=\"Test caption\" />\n\t\t<NcActionCaption name=\"Test caption 2\" />\n\t</NcActions>\n```\n</docs>\n\n<template>\n\t<li class=\"app-navigation-caption\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t{{ name }}\n\t</li>\n</template>\n\n<script>\nimport { NC_ACTIONS_IS_SEMANTIC_MENU } from '../NcActions/useNcActions.ts'\n\nexport default {\n\tname: 'NcActionCaption',\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: NC_ACTIONS_IS_SEMANTIC_MENU,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The caption's text\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\t.app-navigation-caption {\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tline-height: var(--default-clickable-area);\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tbox-shadow: none !important;\n\t\tuser-select: none;\n\t\tpointer-events: none;\n\t\tmargin-inline-start: 12px;\n\t\tpadding-inline-end: 14px;\n\t\theight: var(--default-clickable-area);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n</style>\n"],"names":["_createElementBlock"],"mappings":";;;AAyBA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,QAAQ;AAAA,IACP,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;;AAGb;;;sBA3BCA,mBAEK,MAAA;AAAA,IAFD,OAAM;AAAA,IAA0B,MAAM,SAAA,oBAAgB;AAAA,qBACtD,OAAA,IAAI,GAAA,GAAA,UAAA;;;"}
+{"version":3,"file":"NcActionCaption-Cgd3J8jw.mjs","sources":["../../src/components/NcActionCaption/NcActionCaption.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<NcActions>\n\t\t<NcActionCaption name=\"Test caption\" />\n\t\t<NcActionCaption name=\"Test caption 2\" />\n\t</NcActions>\n```\n</docs>\n\n<template>\n\t<li class=\"app-navigation-caption\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t{{ name }}\n\t</li>\n</template>\n\n<script>\nimport { NC_ACTIONS_IS_SEMANTIC_MENU } from '../NcActions/useNcActions.ts'\n\nexport default {\n\tname: 'NcActionCaption',\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: NC_ACTIONS_IS_SEMANTIC_MENU,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The caption's text\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\t.app-navigation-caption {\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tline-height: var(--default-clickable-area);\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tbox-shadow: none !important;\n\t\tuser-select: none;\n\t\tpointer-events: none;\n\t\tmargin-inline-start: 12px;\n\t\tpadding-inline-end: 14px;\n\t\theight: var(--default-clickable-area);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n</style>\n"],"names":["_createElementBlock"],"mappings":";;;AAyBA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,QAAQ;AAAA,IACP,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;;AAGb;;;sBA3BCA,mBAEK,MAAA;AAAA,IAFD,OAAM;AAAA,IAA0B,MAAM,SAAA,oBAAgB;AAAA,qBACtD,OAAA,IAAI,GAAA,GAAA,UAAA;;;"}

package/dist/chunks/NcActionCheckbox-DeHAMd23.mjs

@@ -0,0 +1,122 @@
+import '../assets/NcActionCheckbox-DLJQfCUI.css';
+import { h as mdiCheckboxMarked, i as mdiCheckboxBlankOutline } from "./mdi-CpchYUUV.mjs";
+import { resolveComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, withDirectives, createVNode, vModelCheckbox, toDisplayString, useModel } from "vue";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.mjs";
+import { A as ActionGlobalMixin } from "./actionGlobal-BZFdtdJL.mjs";
+import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
+import { a as NC_ACTIONS_IS_SEMANTIC_MENU } from "./useNcActions-BzPO2c4h.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcActionCheckbox",
+  components: {
+    NcIconSvgWrapper
+  },
+  mixins: [ActionGlobalMixin],
+  inject: {
+    isInSemanticMenu: {
+      from: NC_ACTIONS_IS_SEMANTIC_MENU,
+      default: false
+    }
+  },
+  props: {
+    /**
+     * id attribute of the checkbox element
+     */
+    id: {
+      type: String,
+      default: () => "action-" + createElementId(),
+      validator: (id) => id.trim() !== ""
+    },
+    /**
+     * checked state of the the checkbox element
+     */
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * value of the checkbox input
+     */
+    value: {
+      type: [String, Number],
+      default: ""
+    },
+    /**
+     * disabled state of the checkbox element
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [
+    /** Native change event */
+    "change",
+    /** Checkbox is checked */
+    "check",
+    /** Checkbox is unchecked */
+    "uncheck",
+    /** Model value changed */
+    "update:modelValue"
+  ],
+  setup(props) {
+    const model = useModel(props, "modelValue");
+    return {
+      model,
+      mdiCheckboxBlankOutline,
+      mdiCheckboxMarked
+    };
+  },
+  methods: {
+    onChange(event) {
+      this.$emit("change", event);
+      if (event.target.checked) {
+        this.$emit("check");
+      } else {
+        this.$emit("uncheck");
+      }
+    }
+  }
+};
+const _hoisted_1 = ["role"];
+const _hoisted_2 = ["role", "aria-checked"];
+const _hoisted_3 = { class: "action-checkbox__icon" };
+const _hoisted_4 = ["id", "value", "disabled"];
+const _hoisted_5 = { class: "action-checkbox__text" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcIconSvgWrapper = resolveComponent("NcIconSvgWrapper");
+  return openBlock(), createElementBlock("li", {
+    class: normalizeClass(["action", { "action--disabled": $props.disabled }]),
+    role: $options.isInSemanticMenu && "presentation"
+  }, [
+    createElementVNode("label", {
+      class: "action-checkbox",
+      role: $options.isInSemanticMenu && "menuitemcheckbox",
+      "aria-checked": $options.isInSemanticMenu && $setup.model.toString()
+    }, [
+      createElementVNode("span", _hoisted_3, [
+        withDirectives(createElementVNode("input", {
+          id: $props.id,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.model = $event),
+          type: "checkbox",
+          class: normalizeClass(["action-checkbox__input", { focusable: !$props.disabled }]),
+          value: $props.value,
+          disabled: $props.disabled,
+          onChange: _cache[1] || (_cache[1] = (...args) => $options.onChange && $options.onChange(...args))
+        }, null, 42, _hoisted_4), [
+          [vModelCheckbox, $setup.model]
+        ]),
+        createVNode(_component_NcIconSvgWrapper, {
+          path: $setup.model ? $setup.mdiCheckboxMarked : $setup.mdiCheckboxBlankOutline,
+          size: 20
+        }, null, 8, ["path"])
+      ]),
+      createElementVNode("span", _hoisted_5, toDisplayString(_ctx.text), 1)
+    ], 8, _hoisted_2)
+  ], 10, _hoisted_1);
+}
+const NcActionCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-2947bc3b"]]);
+export {
+  NcActionCheckbox as N
+};
+//# sourceMappingURL=NcActionCheckbox-DeHAMd23.mjs.map

package/dist/chunks/NcActionCheckbox-DeHAMd23.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionCheckbox-DeHAMd23.mjs","sources":["../../src/components/NcActionCheckbox/NcActionCheckbox.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<NcActions>\n\t\t<NcActionCheckbox @change=\"console.log('(un)checked !')\">First choice</NcActionCheckbox>\n\t\t<NcActionCheckbox value=\"second\" @change=\"console.log('(un)checked !')\">Second choice</NcActionCheckbox>\n\t\t<NcActionCheckbox :model-value=\"true\" @change=\"console.log('(un)checked !')\">Third choice (checked)</NcActionCheckbox>\n\t\t<NcActionCheckbox :disabled=\"true\" @change=\"console.log('(un)checked !')\">Second choice (disabled)</NcActionCheckbox>\n\t</NcActions>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<label class=\"action-checkbox\" :role=\"isInSemanticMenu && 'menuitemcheckbox'\" :aria-checked=\"isInSemanticMenu && model.toString()\">\n\t\t\t<span class=\"action-checkbox__icon\">\n\t\t\t\t<input\n\t\t\t\t\t:id\n\t\t\t\t\tv-model=\"model\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tclass=\"action-checkbox__input\"\n\t\t\t\t\t:class=\"{ focusable: !disabled }\"\n\t\t\t\t\t:value\n\t\t\t\t\t:disabled\n\t\t\t\t\t@change=\"onChange\">\n\t\t\t\t<NcIconSvgWrapper :path=\"model ? mdiCheckboxMarked : mdiCheckboxBlankOutline\" :size=\"20\" />\n\t\t\t</span>\n\t\t\t<span class=\"action-checkbox__text\">{{ text }}</span>\n\t\t</label>\n\t</li>\n</template>\n\n<script>\nimport { mdiCheckboxBlankOutline, mdiCheckboxMarked } from '@mdi/js'\nimport { useModel } from 'vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { NC_ACTIONS_IS_SEMANTIC_MENU } from '../NcActions/useNcActions.ts'\n\nexport default {\n\tname: 'NcActionCheckbox',\n\n\tcomponents: {\n\t\tNcIconSvgWrapper,\n\t},\n\n\tmixins: [ActionGlobalMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: NC_ACTIONS_IS_SEMANTIC_MENU,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * id attribute of the checkbox element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + createElementId(),\n\t\t\tvalidator: (id) => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * checked state of the the checkbox element\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * value of the checkbox input\n\t\t */\n\t\tvalue: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * disabled state of the checkbox element\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t/** Native change event */\n\t\t'change',\n\t\t/** Checkbox is checked */\n\t\t'check',\n\t\t/** Checkbox is unchecked */\n\t\t'uncheck',\n\t\t/** Model value changed */\n\t\t'update:modelValue',\n\t],\n\n\tsetup(props) {\n\t\tconst model = useModel(props, 'modelValue')\n\t\treturn {\n\t\t\tmodel,\n\t\t\tmdiCheckboxBlankOutline,\n\t\t\tmdiCheckboxMarked,\n\t\t}\n\t},\n\n\tmethods: {\n\t\tonChange(event) {\n\t\t\tthis.$emit('change', event)\n\t\t\tif (event.target.checked) {\n\t\t\t\tthis.$emit('check')\n\t\t\t} else {\n\t\t\t\tthis.$emit('uncheck')\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/action.scss' as *;\n@include action-active;\n@include action--disabled;\n@include action-item('checkbox');\n\n.action:has(:focus-visible) {\n\toutline: 2px solid currentColor;\n}\n\n.action-checkbox {\n\t&__icon {\n\t\tcolor: var(--color-primary-element);\n\t}\n\n\t&__input {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tmargin: auto;\n\t\tposition: absolute;\n\t\tz-index: -1;\n\t\topacity: 0 !important;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_createVNode","_toDisplayString"],"mappings":";;;;;;;AA8CA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA;EAGD,QAAQ,CAAC,iBAAiB;AAAA,EAE1B,QAAQ;AAAA,IACP,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,IAAI;AAAA,MACH,MAAM;AAAA,MACN,SAAS,MAAM,YAAY,gBAAe;AAAA,MAC1C,WAAW,CAAC,OAAO,GAAG,KAAI,MAAO;AAAA;;;;IAMlC,YAAY;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,OAAO;AAAA,MACN,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA;;;;IAMV,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA;AAAA,IAEN;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;EAGD,MAAM,OAAO;AACZ,UAAM,QAAQ,SAAS,OAAO,YAAY;AAC1C,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAAA,EAEA,SAAS;AAAA,IACR,SAAS,OAAO;AACf,WAAK,MAAM,UAAU,KAAK;AAC1B,UAAI,MAAM,OAAO,SAAS;AACzB,aAAK,MAAM,OAAO;AAAA,MACnB,OAAO;AACN,aAAK,MAAM,SAAS;AAAA,MACrB;AAAA,IACD;AAAA;AAEF;;;AA1GS,MAAA,aAAA,EAAA,OAAM,wBAAuB;;AAY7B,MAAA,aAAA,EAAA,OAAM,wBAAuB;;;sBAdrCA,mBAgBK,MAAA;AAAA,IAhBD,OAAKC,eAAA,CAAC,UAAQ,EAAA,oBAA+B,OAAA,SAAQ,CAAA,CAAA;AAAA,IAAK,MAAM,SAAA,oBAAgB;AAAA;IACnFC,mBAcQ,SAAA;AAAA,MAdD,OAAM;AAAA,MAAmB,MAAM,SAAA,oBAAgB;AAAA,MAAyB,gBAAc,SAAA,oBAAoB,OAAA,MAAM,SAAQ;AAAA;MAC9HA,mBAWO,QAXP,YAWO;AAAA,uBAVNA,mBAQoB,SAAA;AAAA,UAPlB,IAAA,OAAA;AAAA,uEACQ,OAAA,QAAK;AAAA,UACd,MAAK;AAAA,UACL,OAAKD,eAAA,CAAC,0BAAwB,EAAA,WAAA,CACR,OAAA,SAAQ,CAAA,CAAA;AAAA,UAC7B,OAAA,OAAA;AAAA,UACA,UAAA,OAAA;AAAA,UACA,iDAAQ,SAAA,YAAA,SAAA,SAAA,GAAA,IAAA;AAAA;2BANA,OAAA,KAAK;AAAA;QAOfE,YAA2F,6BAAA;AAAA,UAAxE,MAAM,OAAA,QAAQ,OAAA,oBAAoB,OAAA;AAAA,UAA0B,MAAM;AAAA;;MAEtFD,mBAAqD,QAArD,YAAqDE,gBAAd,KAAA,IAAI,GAAA,CAAA;AAAA;;;;"}