@nextcloud/vue 8.12.0 → 8.14.0

package/CHANGELOG.md

@@ -1,21 +1,87 @@
+<!--
+  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
 # Changelog
 
 All notable changes to this project will be documented in this file.
 
+<!-- Release notes generated using configuration in .github/release.yml at master -->
+
+## [v8.14.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.14.0) (2024-07-04)
+[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.13.0...v8.14.0)
+
+### 🚀 Enhancements
+* feat(NcAppSidebar): force show navigation for a single tab [\#5740](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5740) \([Antreesy](https://github.com/Antreesy)\)
+* feat(NcButton): Add `size` prop to allow setting the button size to `small`, `normal`, `large` [\#5767](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5767) \([susnux](https://github.com/susnux)\)
+* feat: migrate `NcCollectionList` component from `nextcloud-vue-collections` [\#5757](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5757) \([Antreesy](https://github.com/Antreesy)\)
+* fix(NcDialog): Ensure the dialog is correctly labelled by its name [\#5771](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5771) \([susnux](https://github.com/susnux)\)
+
+### 🐛 Fixed bugs
+* fix: Migrate SCSS `$clickable-area` to CSS `--default-clickable-area` [\#5694](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5694) \([marcoambrosini](https://github.com/marcoambrosini)\)
+* fix(NcMentionBubble): hide selectable mention id from widescreens [\#5753](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5753) \([Antreesy](https://github.com/Antreesy)\)
+* style(NcHeaderMenu): pass text-on-background color for header menu [\#5747](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5747) \([Antreesy](https://github.com/Antreesy)\)
+* Fix input field label alignment [\#5766](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5766) \([marcoambrosini](https://github.com/marcoambrosini)\)
+* fix(NcRichContentEditable): remove overlapping placeholder with tribute trigger [\#5749](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5749) \([DorraJaouad](https://github.com/DorraJaouad)\)
+* fix(NcReferenceWidget): pass elements to intersection observer [\#5754](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5754) \([DorraJaouad](https://github.com/DorraJaouad)\)
+* fix(NcCheckboxRadioSwitch): only bind aria attributes to the input [\#5777](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5777) \([skjnldsv](https://github.com/skjnldsv)\)
+
+### Changed
+* Updated translations
+
+## [v8.13.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.13.0) (2024-06-20)
+[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.12.0...v8.13.0)
+
+### 🚀 Enhancements
+* feat(NcDialogButton): Allow to pass `disabled` prop [\#5679](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5679) \([susnux](https://github.com/susnux)\)
+* feat(NcRichContenteditable): programmatically show tributes [\#5674](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5674) \([DorraJaouad](https://github.com/DorraJaouad)\)
+* feat: Add NcChip component [\#5686](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5686) \([susnux](https://github.com/susnux)\)
+* feat(NcAppSidebar): add `toggleAttrs` prop to pass attributes on the toggle button [\#5695](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5695) \([ShGKme](https://github.com/ShGKme)\)
+* feat(NcAppSidebar): add noToggle prop to hide the built-in toggle button [\#5702](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5702) \([ShGKme](https://github.com/ShGKme)\)
+
+### 🐛 Fixed bugs
+* fix(NcAppSidebar): remove hidden navigation toggle from focus trap [\#5613](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5613) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcAppSidebar): make closing animation less glitchy [\#5608](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5608) \([ShGKme](https://github.com/ShGKme)\)
+* Update temporary border radius variable [\#5639](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5639) \([marcoambrosini](https://github.com/marcoambrosini)\)
+* fix: Adjust license in `package.json` [\#5612](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5612) \([susnux](https://github.com/susnux)\)
+* Use variables for input border width [\#5563](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5563) \([marcoambrosini](https://github.com/marcoambrosini)\)
+* fix: re-export `NcEllipsisedOption` and `NcInputField` in root export [\#5666](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5666) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcVNodes): add re-export in root export and add docs [\#5664](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5664) \([ShGKme](https://github.com/ShGKme)\)
+* fix(richText): do not handle relative links without leading slash as router links [\#5703](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5703) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcModal): Adjust modal header name and actions [\#5656](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5656) \([susnux](https://github.com/susnux)\)
+* fix(NcAppSidebar): apply toggle offset transition only on sidebar transition [\#5720](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5720) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcAppSidebar): make sidebar a single node again to allow v-show, classes and attributes [\#5627](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5627) \([ShGKme](https://github.com/ShGKme)\)
+* fix: Make sidebar buttons pixel perfect [\#3518](https://github.com/nextcloud-libraries/nextcloud-vue/pull/3518) \([CarlSchwan](https://github.com/CarlSchwan)\)
+
+### Changed
+* Reduce border radius of components [\#5483](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5483) \([marcoambrosini](https://github.com/marcoambrosini)\)
+* refactor: Drop unused files from source [\#5645](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5645) \([susnux](https://github.com/susnux)\)
+* refactor: Fix linter issues on test case files [\#5646](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5646) \([susnux](https://github.com/susnux)\)
+* chore(CHANGELOG): correct 8.12.0 [\#5618](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5618) \([ShGKme](https://github.com/ShGKme)\)
+* chore: Update CI workflow files from template [\#5647](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5647) \([susnux](https://github.com/susnux)\)
+* chore(NcEllipsisedOption): add docs [\#5663](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5663) \([ShGKme](https://github.com/ShGKme)\)
+* chore(functions): add docs [\#5669](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5669) \([ShGKme](https://github.com/ShGKme)\)
+* chore: Add SPDX headers and REUSE CI workflow [\#5650](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5650) \([susnux](https://github.com/susnux)\)
+* fix(REUSE): add SPDX header to a new file [\#5709](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5709) \([Antreesy](https://github.com/Antreesy)\)
+* chore(directives): add docs [\#5665](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5665) \([ShGKme](https://github.com/ShGKme)\)
+* chore(NcUserStatusIcon): remove warn if status is not set [\#5715](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5715) \([ShGKme](https://github.com/ShGKme)\)
+* Update translations
+
 ## [v8.12.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.12.0) (2024-05-13)
 [Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.11.2...v8.12.0)
 
 ### 🚀 Enhancements
 * feat(NcAppNavigationCaption): Allow to set heading level [\#5567](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5567) \([susnux](https://github.com/susnux)\)
 * feat(NcAppNavigationCaption): Add `heading-id` prop to allow setting the ID on the caption itself [\#5565](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5565) \([susnux](https://github.com/susnux)\)
+* feat(NcAppSidebar): Allow to set `open` state to prevent focus trap issues on mobile [\#5584](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5584) \([susnux](https://github.com/susnux)\)
 
 ### 🐛 Fixed bugs
 * fix(NcReferenceWidget): use requestAnimationFrame in observers [\#5561](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5561) \([max-nextcloud](https://github.com/max-nextcloud)\)
 * fix(NcAppNavigationCaption): Fix margin [\#5576](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5576) \([Pytal](https://github.com/Pytal)\)
 * fix(NcReferenceWidget): useElementSize [\#5587](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5587) \([max-nextcloud](https://github.com/max-nextcloud)\)
 * fix(docs): Add missing file extensions to vue-material-design-icons imports [\#5581](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5581) \([susnux](https://github.com/susnux)\)
-* feat(NcAppSidebar): Allow to set `open` state to prevent focus trap issues on mobile [\#5584](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5584) \([susnux](https://github.com/susnux)\)
-* feat(mobile): restore hiding the appnavigation on mobile [\#5603](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5603) \([szaimen](https://github.com/szaimen)\)
+* fix(NcAppNavigation): restore hiding toggle on mobile [\#5603](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5603) \([szaimen](https://github.com/szaimen)\)
 * fix(NcSettingSection): Update design and enforce `limitWidth` option [\#5514](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5514) \([marcoambrosini](https://github.com/marcoambrosini)\)
   * Adjusted in [\#5604](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5604)
 

package/README.md

@@ -1,3 +1,8 @@
+<!--
+  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
 # Vue components
 
 [![npm last version](https://img.shields.io/npm/v/@nextcloud/vue.svg?style=flat-square)](https://www.npmjs.com/package/@nextcloud/vue)

package/dist/Components/NcActionButton.cjs

@@ -1,8 +1,8 @@
-require('../assets/NcActionButton-D08gPtwM.css');
+require('../assets/NcActionButton-D90PTEA5.css');
 "use strict";
 const Check = require("../chunks/Check-DZc7keoa.cjs");
 const ChevronRight = require("../chunks/ChevronRight-DVw6mR11.cjs");
-const actionText = require("../chunks/actionText-BnA6RS9I.cjs");
+const actionText = require("../chunks/actionText-BcrK4uH1.cjs");
 const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-DbFIE4_M.cjs");
 const _sfc_main = {
   name: "NcActionButton",
@@ -162,7 +162,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "41f6d0c4",
+  "dba65098",
   null,
   null
 );

package/dist/Components/NcActionButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcActionButton.cjs","sources":["../../src/components/NcActionButton/NcActionButton.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\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<Delete :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<Delete :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<Plus :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<Delete :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 Delete from 'vue-material-design-icons/Delete.vue'\n\timport Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\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\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<Plus :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<Delete :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</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\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<Plus :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 Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\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<HandBackLeft :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<HandBackRight :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 HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'\nimport HandBackRight from 'vue-material-design-icons/HandBackRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tHandBackRight,\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 :model-value.sync=\"fullscreen\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tFullscreen,\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 :model-value.sync=\"handRaised\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise hand\n\t\t</NcActionButton>\n\t\t<NcActionButton :model-value.sync=\"fullscreen\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tFullscreen,\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 :model-value.sync=\"payment\" type=\"radio\" value=\"cash\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cash :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 :model-value.sync=\"payment\" type=\"radio\" value=\"card\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CreditCard :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<FormatAlignLeft :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<FormatAlignCenter :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<FormatAlignRight :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 Cash from 'vue-material-design-icons/Cash.vue'\nimport CreditCard from 'vue-material-design-icons/CreditCard.vue'\nimport FormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'\nimport FormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'\nimport FormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tCash,\n\t\tCreditCard,\n\t\tFormatAlignLeft,\n\t\tFormatAlignCenter,\n\t\tFormatAlignRight,\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 :aria-label=\"ariaLabel\"\n\t\t\t:class=\"['action-button button-vue', {\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 :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 v-if=\"name\"\n\t\t\t\tclass=\"action-button__longtext-wrapper\">\n\t\t\t\t<strong class=\"action-button__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<br>\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 class=\"action-button__longtext\" v-text=\"text\" />\n\t\t\t</span>\n\n\t\t\t<!-- long text only -->\n\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t<span v-else-if=\"isLongText\"\n\t\t\t\tclass=\"action-button__longtext\"\n\t\t\t\tv-text=\"text\" />\n\n\t\t\t<!-- default text display -->\n\t\t\t<span v-else class=\"action-button__text\">{{ text }}</span>\n\n\t\t\t<!-- right arrow icon when there is a sub-menu -->\n\t\t\t<ChevronRightIcon v-if=\"isMenu\" :size=\"20\" class=\"action-button__menu-icon\" />\n\t\t\t<CheckIcon v-else-if=\"isChecked === true\" :size=\"20\" class=\"action-button__pressed-icon\" />\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 CheckIcon from 'vue-material-design-icons/Check.vue'\nimport ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'\nimport ActionTextMixin from '../../mixins/actionText.js'\n\n/**\n * Button component to be used in Actions\n */\nexport default {\n\tname: 'NcActionButton',\n\n\tcomponents: {\n\t\tCheckIcon,\n\t\tChevronRightIcon,\n\t},\n\tmixins: [ActionTextMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.\n\t\t * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,\n\t\t * otherwise root element will inherit incorrect aria-hidden.\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\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\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 * @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@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n@include action-item('button');\n\n.action-button__pressed-icon {\n\tmargin-left: auto;\n\tmargin-right: -$icon-margin;\n}\n</style>\n"],"names":["CheckIcon","ChevronRightIcon","ActionTextMixin"],"mappings":";;;;;AAyYA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAA,MAAA;AAAA,IACA,kBAAAC,aAAA;AAAA,EACA;AAAA,EACA,QAAA,CAAAC,WAAAA,eAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,aAAA,CAAA,UAAA,YAAA,SAAA,SAAA,QAAA,EAAA,SAAA,QAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaA,YAAA;AAAA,MACA,MAAA,CAAA,SAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AACA,aAAA,CAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AACA,UAAA,KAAA,SAAA,WAAA,OAAA,KAAA,eAAA,WAAA;AACA,eAAA,KAAA,eAAA,KAAA;AAAA,MACA;AACA,aAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AACA,UAAA,KAAA,SAAA,YAAA,KAAA,SAAA,SAAA;AACA,eAAA,KAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AACA,YAAA,aAAA,CAAA;AAEA,UAAA,KAAA,kBAAA;AAEA,mBAAA,OAAA;AAEA,YAAA,KAAA,SAAA,SAAA;AACA,qBAAA,OAAA;AACA,qBAAA,cAAA,IAAA,KAAA,YAAA,SAAA;AAAA,QACA,WAAA,KAAA,SAAA,cAAA,KAAA,eAAA,YAAA,KAAA,eAAA,MAAA;AAEA,qBAAA,OAAA;AACA,qBAAA,cAAA,IAAA,KAAA,eAAA,OAAA,UAAA,KAAA,aAAA,SAAA;AAAA,QACA;AAAA,MACA,WAAA,KAAA,eAAA,QAAA,KAAA,eAAA,UAAA;AAEA,mBAAA,cAAA,IAAA,KAAA,aAAA,SAAA;AAAA,MACA;AAEA,aAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA,OAAA;AACA,WAAA,QAAA,KAAA;AAEA,UAAA,KAAA,eAAA,QAAA,KAAA,SAAA,UAAA;AACA,YAAA,KAAA,SAAA,SAAA;AACA,cAAA,OAAA,KAAA,eAAA,WAAA;AAEA,gBAAA,CAAA,KAAA,WAAA;AACA,mBAAA,MAAA,qBAAA,KAAA,KAAA;AAAA,YACA;AAAA,UACA,OAAA;AAEA,iBAAA,MAAA,qBAAA,CAAA,KAAA,SAAA;AAAA,UACA;AAAA,QACA,OAAA;AAEA,eAAA,MAAA,qBAAA,CAAA,KAAA,SAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcActionButton.cjs","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<Delete :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<Delete :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<Plus :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<Delete :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 Delete from 'vue-material-design-icons/Delete.vue'\n\timport Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\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\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<Plus :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<Delete :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</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\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<Plus :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 Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\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<HandBackLeft :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<HandBackRight :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 HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'\nimport HandBackRight from 'vue-material-design-icons/HandBackRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tHandBackRight,\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 :model-value.sync=\"fullscreen\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tFullscreen,\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 :model-value.sync=\"handRaised\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise hand\n\t\t</NcActionButton>\n\t\t<NcActionButton :model-value.sync=\"fullscreen\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tFullscreen,\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 :model-value.sync=\"payment\" type=\"radio\" value=\"cash\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cash :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 :model-value.sync=\"payment\" type=\"radio\" value=\"card\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CreditCard :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<FormatAlignLeft :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<FormatAlignCenter :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<FormatAlignRight :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 Cash from 'vue-material-design-icons/Cash.vue'\nimport CreditCard from 'vue-material-design-icons/CreditCard.vue'\nimport FormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'\nimport FormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'\nimport FormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tCash,\n\t\tCreditCard,\n\t\tFormatAlignLeft,\n\t\tFormatAlignCenter,\n\t\tFormatAlignRight,\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 :aria-label=\"ariaLabel\"\n\t\t\t:class=\"['action-button button-vue', {\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 :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 v-if=\"name\"\n\t\t\t\tclass=\"action-button__longtext-wrapper\">\n\t\t\t\t<strong class=\"action-button__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<br>\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 class=\"action-button__longtext\" v-text=\"text\" />\n\t\t\t</span>\n\n\t\t\t<!-- long text only -->\n\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t<span v-else-if=\"isLongText\"\n\t\t\t\tclass=\"action-button__longtext\"\n\t\t\t\tv-text=\"text\" />\n\n\t\t\t<!-- default text display -->\n\t\t\t<span v-else class=\"action-button__text\">{{ text }}</span>\n\n\t\t\t<!-- right arrow icon when there is a sub-menu -->\n\t\t\t<ChevronRightIcon v-if=\"isMenu\" :size=\"20\" class=\"action-button__menu-icon\" />\n\t\t\t<CheckIcon v-else-if=\"isChecked === true\" :size=\"20\" class=\"action-button__pressed-icon\" />\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 CheckIcon from 'vue-material-design-icons/Check.vue'\nimport ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'\nimport ActionTextMixin from '../../mixins/actionText.js'\n\n/**\n * Button component to be used in Actions\n */\nexport default {\n\tname: 'NcActionButton',\n\n\tcomponents: {\n\t\tCheckIcon,\n\t\tChevronRightIcon,\n\t},\n\tmixins: [ActionTextMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.\n\t\t * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,\n\t\t * otherwise root element will inherit incorrect aria-hidden.\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\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\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 * @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@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n@include action-item('button');\n\n.action-button__pressed-icon {\n\tmargin-left: auto;\n\tmargin-right: calc($icon-margin * -1);\n}\n</style>\n"],"names":["CheckIcon","ChevronRightIcon","ActionTextMixin"],"mappings":";;;;;AAuXA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAA,MAAA;AAAA,IACA,kBAAAC,aAAA;AAAA,EACA;AAAA,EACA,QAAA,CAAAC,WAAAA,eAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,aAAA,CAAA,UAAA,YAAA,SAAA,SAAA,QAAA,EAAA,SAAA,QAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaA,YAAA;AAAA,MACA,MAAA,CAAA,SAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AACA,aAAA,CAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AACA,UAAA,KAAA,SAAA,WAAA,OAAA,KAAA,eAAA,WAAA;AACA,eAAA,KAAA,eAAA,KAAA;AAAA,MACA;AACA,aAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AACA,UAAA,KAAA,SAAA,YAAA,KAAA,SAAA,SAAA;AACA,eAAA,KAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AACA,YAAA,aAAA,CAAA;AAEA,UAAA,KAAA,kBAAA;AAEA,mBAAA,OAAA;AAEA,YAAA,KAAA,SAAA,SAAA;AACA,qBAAA,OAAA;AACA,qBAAA,cAAA,IAAA,KAAA,YAAA,SAAA;AAAA,QACA,WAAA,KAAA,SAAA,cAAA,KAAA,eAAA,YAAA,KAAA,eAAA,MAAA;AAEA,qBAAA,OAAA;AACA,qBAAA,cAAA,IAAA,KAAA,eAAA,OAAA,UAAA,KAAA,aAAA,SAAA;AAAA,QACA;AAAA,MACA,WAAA,KAAA,eAAA,QAAA,KAAA,eAAA,UAAA;AAEA,mBAAA,cAAA,IAAA,KAAA,aAAA,SAAA;AAAA,MACA;AAEA,aAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA,OAAA;AACA,WAAA,QAAA,KAAA;AAEA,UAAA,KAAA,eAAA,QAAA,KAAA,SAAA,UAAA;AACA,YAAA,KAAA,SAAA,SAAA;AACA,cAAA,OAAA,KAAA,eAAA,WAAA;AAEA,gBAAA,CAAA,KAAA,WAAA;AACA,mBAAA,MAAA,qBAAA,KAAA,KAAA;AAAA,YACA;AAAA,UACA,OAAA;AAEA,iBAAA,MAAA,qBAAA,CAAA,KAAA,SAAA;AAAA,UACA;AAAA,QACA,OAAA;AAEA,eAAA,MAAA,qBAAA,CAAA,KAAA,SAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcActionButton.mjs

@@ -1,7 +1,7 @@
-import '../assets/NcActionButton-D08gPtwM.css';
+import '../assets/NcActionButton-D90PTEA5.css';
 import { C as Check } from "../chunks/Check-PawIlCwa.mjs";
 import { C as ChevronRight } from "../chunks/ChevronRight-BNa7yMja.mjs";
-import { A as ActionTextMixin } from "../chunks/actionText-BaGktsVf.mjs";
+import { A as ActionTextMixin } from "../chunks/actionText-fFcUPi2g.mjs";
 import { n as normalizeComponent } from "../chunks/_plugin-vue2_normalizer-D637Qkok.mjs";
 const _sfc_main = {
   name: "NcActionButton",
@@ -161,7 +161,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "41f6d0c4",
+  "dba65098",
   null,
   null
 );

package/dist/Components/NcActionButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcActionButton.mjs","sources":["../../src/components/NcActionButton/NcActionButton.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\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<Delete :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<Delete :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<Plus :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<Delete :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 Delete from 'vue-material-design-icons/Delete.vue'\n\timport Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\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\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<Plus :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<Delete :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</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\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<Plus :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 Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\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<HandBackLeft :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<HandBackRight :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 HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'\nimport HandBackRight from 'vue-material-design-icons/HandBackRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tHandBackRight,\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 :model-value.sync=\"fullscreen\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tFullscreen,\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 :model-value.sync=\"handRaised\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise hand\n\t\t</NcActionButton>\n\t\t<NcActionButton :model-value.sync=\"fullscreen\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tFullscreen,\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 :model-value.sync=\"payment\" type=\"radio\" value=\"cash\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cash :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 :model-value.sync=\"payment\" type=\"radio\" value=\"card\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CreditCard :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<FormatAlignLeft :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<FormatAlignCenter :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<FormatAlignRight :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 Cash from 'vue-material-design-icons/Cash.vue'\nimport CreditCard from 'vue-material-design-icons/CreditCard.vue'\nimport FormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'\nimport FormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'\nimport FormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tCash,\n\t\tCreditCard,\n\t\tFormatAlignLeft,\n\t\tFormatAlignCenter,\n\t\tFormatAlignRight,\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 :aria-label=\"ariaLabel\"\n\t\t\t:class=\"['action-button button-vue', {\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 :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 v-if=\"name\"\n\t\t\t\tclass=\"action-button__longtext-wrapper\">\n\t\t\t\t<strong class=\"action-button__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<br>\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 class=\"action-button__longtext\" v-text=\"text\" />\n\t\t\t</span>\n\n\t\t\t<!-- long text only -->\n\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t<span v-else-if=\"isLongText\"\n\t\t\t\tclass=\"action-button__longtext\"\n\t\t\t\tv-text=\"text\" />\n\n\t\t\t<!-- default text display -->\n\t\t\t<span v-else class=\"action-button__text\">{{ text }}</span>\n\n\t\t\t<!-- right arrow icon when there is a sub-menu -->\n\t\t\t<ChevronRightIcon v-if=\"isMenu\" :size=\"20\" class=\"action-button__menu-icon\" />\n\t\t\t<CheckIcon v-else-if=\"isChecked === true\" :size=\"20\" class=\"action-button__pressed-icon\" />\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 CheckIcon from 'vue-material-design-icons/Check.vue'\nimport ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'\nimport ActionTextMixin from '../../mixins/actionText.js'\n\n/**\n * Button component to be used in Actions\n */\nexport default {\n\tname: 'NcActionButton',\n\n\tcomponents: {\n\t\tCheckIcon,\n\t\tChevronRightIcon,\n\t},\n\tmixins: [ActionTextMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.\n\t\t * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,\n\t\t * otherwise root element will inherit incorrect aria-hidden.\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\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\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 * @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@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n@include action-item('button');\n\n.action-button__pressed-icon {\n\tmargin-left: auto;\n\tmargin-right: -$icon-margin;\n}\n</style>\n"],"names":["CheckIcon","ChevronRightIcon"],"mappings":";;;;AAyYA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAA;AAAAA,IACA,kBAAAC;AAAAA,EACA;AAAA,EACA,QAAA,CAAA,eAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,aAAA,CAAA,UAAA,YAAA,SAAA,SAAA,QAAA,EAAA,SAAA,QAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaA,YAAA;AAAA,MACA,MAAA,CAAA,SAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AACA,aAAA,CAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AACA,UAAA,KAAA,SAAA,WAAA,OAAA,KAAA,eAAA,WAAA;AACA,eAAA,KAAA,eAAA,KAAA;AAAA,MACA;AACA,aAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AACA,UAAA,KAAA,SAAA,YAAA,KAAA,SAAA,SAAA;AACA,eAAA,KAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AACA,YAAA,aAAA,CAAA;AAEA,UAAA,KAAA,kBAAA;AAEA,mBAAA,OAAA;AAEA,YAAA,KAAA,SAAA,SAAA;AACA,qBAAA,OAAA;AACA,qBAAA,cAAA,IAAA,KAAA,YAAA,SAAA;AAAA,QACA,WAAA,KAAA,SAAA,cAAA,KAAA,eAAA,YAAA,KAAA,eAAA,MAAA;AAEA,qBAAA,OAAA;AACA,qBAAA,cAAA,IAAA,KAAA,eAAA,OAAA,UAAA,KAAA,aAAA,SAAA;AAAA,QACA;AAAA,MACA,WAAA,KAAA,eAAA,QAAA,KAAA,eAAA,UAAA;AAEA,mBAAA,cAAA,IAAA,KAAA,aAAA,SAAA;AAAA,MACA;AAEA,aAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA,OAAA;AACA,WAAA,QAAA,KAAA;AAEA,UAAA,KAAA,eAAA,QAAA,KAAA,SAAA,UAAA;AACA,YAAA,KAAA,SAAA,SAAA;AACA,cAAA,OAAA,KAAA,eAAA,WAAA;AAEA,gBAAA,CAAA,KAAA,WAAA;AACA,mBAAA,MAAA,qBAAA,KAAA,KAAA;AAAA,YACA;AAAA,UACA,OAAA;AAEA,iBAAA,MAAA,qBAAA,CAAA,KAAA,SAAA;AAAA,UACA;AAAA,QACA,OAAA;AAEA,eAAA,MAAA,qBAAA,CAAA,KAAA,SAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcActionButton.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<Delete :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<Delete :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<Plus :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<Delete :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 Delete from 'vue-material-design-icons/Delete.vue'\n\timport Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\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\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<Plus :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<Delete :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</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\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<Plus :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 Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\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<HandBackLeft :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<HandBackRight :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 HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'\nimport HandBackRight from 'vue-material-design-icons/HandBackRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tHandBackRight,\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 :model-value.sync=\"fullscreen\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tFullscreen,\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 :model-value.sync=\"handRaised\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise hand\n\t\t</NcActionButton>\n\t\t<NcActionButton :model-value.sync=\"fullscreen\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tFullscreen,\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 :model-value.sync=\"payment\" type=\"radio\" value=\"cash\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cash :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 :model-value.sync=\"payment\" type=\"radio\" value=\"card\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CreditCard :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<FormatAlignLeft :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<FormatAlignCenter :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<FormatAlignRight :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 Cash from 'vue-material-design-icons/Cash.vue'\nimport CreditCard from 'vue-material-design-icons/CreditCard.vue'\nimport FormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'\nimport FormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'\nimport FormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tCash,\n\t\tCreditCard,\n\t\tFormatAlignLeft,\n\t\tFormatAlignCenter,\n\t\tFormatAlignRight,\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 :aria-label=\"ariaLabel\"\n\t\t\t:class=\"['action-button button-vue', {\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 :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 v-if=\"name\"\n\t\t\t\tclass=\"action-button__longtext-wrapper\">\n\t\t\t\t<strong class=\"action-button__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<br>\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 class=\"action-button__longtext\" v-text=\"text\" />\n\t\t\t</span>\n\n\t\t\t<!-- long text only -->\n\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t<span v-else-if=\"isLongText\"\n\t\t\t\tclass=\"action-button__longtext\"\n\t\t\t\tv-text=\"text\" />\n\n\t\t\t<!-- default text display -->\n\t\t\t<span v-else class=\"action-button__text\">{{ text }}</span>\n\n\t\t\t<!-- right arrow icon when there is a sub-menu -->\n\t\t\t<ChevronRightIcon v-if=\"isMenu\" :size=\"20\" class=\"action-button__menu-icon\" />\n\t\t\t<CheckIcon v-else-if=\"isChecked === true\" :size=\"20\" class=\"action-button__pressed-icon\" />\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 CheckIcon from 'vue-material-design-icons/Check.vue'\nimport ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'\nimport ActionTextMixin from '../../mixins/actionText.js'\n\n/**\n * Button component to be used in Actions\n */\nexport default {\n\tname: 'NcActionButton',\n\n\tcomponents: {\n\t\tCheckIcon,\n\t\tChevronRightIcon,\n\t},\n\tmixins: [ActionTextMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.\n\t\t * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,\n\t\t * otherwise root element will inherit incorrect aria-hidden.\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\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\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 * @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@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n@include action-item('button');\n\n.action-button__pressed-icon {\n\tmargin-left: auto;\n\tmargin-right: calc($icon-margin * -1);\n}\n</style>\n"],"names":["CheckIcon","ChevronRightIcon"],"mappings":";;;;AAuXA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAA;AAAAA,IACA,kBAAAC;AAAAA,EACA;AAAA,EACA,QAAA,CAAA,eAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,aAAA,CAAA,UAAA,YAAA,SAAA,SAAA,QAAA,EAAA,SAAA,QAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaA,YAAA;AAAA,MACA,MAAA,CAAA,SAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AACA,aAAA,CAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AACA,UAAA,KAAA,SAAA,WAAA,OAAA,KAAA,eAAA,WAAA;AACA,eAAA,KAAA,eAAA,KAAA;AAAA,MACA;AACA,aAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AACA,UAAA,KAAA,SAAA,YAAA,KAAA,SAAA,SAAA;AACA,eAAA,KAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AACA,YAAA,aAAA,CAAA;AAEA,UAAA,KAAA,kBAAA;AAEA,mBAAA,OAAA;AAEA,YAAA,KAAA,SAAA,SAAA;AACA,qBAAA,OAAA;AACA,qBAAA,cAAA,IAAA,KAAA,YAAA,SAAA;AAAA,QACA,WAAA,KAAA,SAAA,cAAA,KAAA,eAAA,YAAA,KAAA,eAAA,MAAA;AAEA,qBAAA,OAAA;AACA,qBAAA,cAAA,IAAA,KAAA,eAAA,OAAA,UAAA,KAAA,aAAA,SAAA;AAAA,QACA;AAAA,MACA,WAAA,KAAA,eAAA,QAAA,KAAA,eAAA,UAAA;AAEA,mBAAA,cAAA,IAAA,KAAA,aAAA,SAAA;AAAA,MACA;AAEA,aAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA,OAAA;AACA,WAAA,QAAA,KAAA;AAEA,UAAA,KAAA,eAAA,QAAA,KAAA,SAAA,UAAA;AACA,YAAA,KAAA,SAAA,SAAA;AACA,cAAA,OAAA,KAAA,eAAA,WAAA;AAEA,gBAAA,CAAA,KAAA,WAAA;AACA,mBAAA,MAAA,qBAAA,KAAA,KAAA;AAAA,YACA;AAAA,UACA,OAAA;AAEA,iBAAA,MAAA,qBAAA,CAAA,KAAA,SAAA;AAAA,UACA;AAAA,QACA,OAAA;AAEA,eAAA,MAAA,qBAAA,CAAA,KAAA,SAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcActionButtonGroup.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const NcActionButtonGroup = require("../chunks/NcActionButtonGroup-D7hycpXY.cjs");
+const NcActionButtonGroup = require("../chunks/NcActionButtonGroup-DKtkuRy5.cjs");
 module.exports = NcActionButtonGroup.NcActionButtonGroup;

package/dist/Components/NcActionButtonGroup.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcActionButtonGroup-D650-6zv.mjs";
+import { N } from "../chunks/NcActionButtonGroup-B62_HajM.mjs";
 export {
   N as default
 };

package/dist/Components/NcActionCaption.cjs

@@ -1,4 +1,4 @@
-require('../assets/NcActionCaption-sfcjBZnu.css');
+require('../assets/NcActionCaption-B7FZTc3Y.css');
 "use strict";
 const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-DbFIE4_M.cjs");
 const _sfc_main = {
@@ -30,7 +30,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "7c8f7463",
+  "b9668c9e",
   null,
   null
 );

package/dist/Components/NcActionCaption.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcActionCaption.cjs","sources":["../../src/components/NcActionCaption/NcActionCaption.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2021 Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\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>\nexport default {\n\tname: 'NcActionCaption',\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\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: $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-left: 12px;\n\t\tpadding-right: 14px;\n\t\theight: $clickable-area;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n</style>\n"],"names":[],"mappings":";;AAsCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcActionCaption.cjs","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>\nexport default {\n\tname: 'NcActionCaption',\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\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-left: 12px;\n\t\tpadding-right: 14px;\n\t\theight: var(--default-clickable-area);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n</style>\n"],"names":[],"mappings":";;AAuBA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcActionCaption.mjs

@@ -1,4 +1,4 @@
-import '../assets/NcActionCaption-sfcjBZnu.css';
+import '../assets/NcActionCaption-B7FZTc3Y.css';
 import { n as normalizeComponent } from "../chunks/_plugin-vue2_normalizer-D637Qkok.mjs";
 const _sfc_main = {
   name: "NcActionCaption",
@@ -29,7 +29,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "7c8f7463",
+  "b9668c9e",
   null,
   null
 );

package/dist/Components/NcActionCaption.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcActionCaption.mjs","sources":["../../src/components/NcActionCaption/NcActionCaption.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2021 Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\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>\nexport default {\n\tname: 'NcActionCaption',\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\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: $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-left: 12px;\n\t\tpadding-right: 14px;\n\t\theight: $clickable-area;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n</style>\n"],"names":[],"mappings":";AAsCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcActionCaption.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>\nexport default {\n\tname: 'NcActionCaption',\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\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-left: 12px;\n\t\tpadding-right: 14px;\n\t\theight: var(--default-clickable-area);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n</style>\n"],"names":[],"mappings":";AAuBA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcActionCheckbox.cjs

@@ -1,7 +1,7 @@
-require('../assets/NcActionCheckbox-DTlI7y7p.css');
+require('../assets/NcActionCheckbox-C-PJVvtb.css');
 "use strict";
-const actionGlobal = require("../chunks/actionGlobal-BfK-CImU.cjs");
-const GenRandomId = require("../chunks/GenRandomId-kBCcgMJd.cjs");
+const actionGlobal = require("../chunks/actionGlobal-L0Ls8tPJ.cjs");
+const GenRandomId = require("../chunks/GenRandomId-BQDud3d4.cjs");
 const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-DbFIE4_M.cjs");
 const _sfc_main = {
   name: "NcActionCheckbox",
@@ -88,10 +88,8 @@ const _sfc_main = {
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
   return _c("li", { staticClass: "action", class: { "action--disabled": _vm.disabled }, attrs: { "role": _vm.isInSemanticMenu && "presentation" } }, [_c("span", { staticClass: "action-checkbox", attrs: { "role": _vm.isInSemanticMenu && "menuitemcheckbox", "aria-checked": _vm.ariaChecked } }, [_c("input", { ref: "checkbox", staticClass: "checkbox action-checkbox__checkbox", class: { focusable: _vm.isFocusable }, attrs: { "id": _vm.id, "disabled": _vm.disabled, "type": "checkbox" }, domProps: { "checked": _vm.checked, "value": _vm.value }, on: { "keydown": function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
-      return null;
-    if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey)
-      return null;
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
+    if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey) return null;
     $event.preventDefault();
     return _vm.checkInput.apply(null, arguments);
   }, "change": _vm.onChange } }), _c("label", { ref: "label", staticClass: "action-checkbox__label", attrs: { "for": _vm.id } }, [_vm._v(_vm._s(_vm.text))]), _vm._e()], 2)]);
@@ -103,7 +101,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "24834b9f",
+  "4faf73ef",
   null,
   null
 );

package/dist/Components/NcActionCheckbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcActionCheckbox.cjs","sources":["../../src/components/NcActionCheckbox/NcActionCheckbox.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\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=\"alert('(un)checked !')\">First choice</NcActionCheckbox>\n\t\t<NcActionCheckbox value=\"second\" @change=\"alert('(un)checked !')\">Second choice</NcActionCheckbox>\n\t\t<NcActionCheckbox :checked=\"true\" @change=\"alert('(un)checked !')\">Third choice (checked)</NcActionCheckbox>\n\t\t<NcActionCheckbox :disabled=\"true\" @change=\"alert('(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<span class=\"action-checkbox\" :role=\"isInSemanticMenu && 'menuitemcheckbox'\" :aria-checked=\"ariaChecked\">\n\t\t\t<input :id=\"id\"\n\t\t\t\tref=\"checkbox\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:checked=\"checked\"\n\t\t\t\t:value=\"value\"\n\t\t\t\t:class=\"{ focusable: isFocusable }\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclass=\"checkbox action-checkbox__checkbox\"\n\t\t\t\t@keydown.enter.exact.prevent=\"checkInput\"\n\t\t\t\t@change=\"onChange\">\n\t\t\t<label ref=\"label\" :for=\"id\" class=\"action-checkbox__label\">{{ text }}</label>\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default {\n\tname: 'NcActionCheckbox',\n\n\tmixins: [ActionGlobalMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\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-' + GenRandomId(),\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\tchecked: {\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'change',\n\t\t'check',\n\t\t'uncheck',\n\t\t'update:checked',\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 * aria-checked attribute for role=\"menuitemcheckbox\"\n\t\t *\n\t\t * @return {'true'|'false'|undefined} aria-checked value if needed\n\t\t */\n\t\tariaChecked() {\n\t\t\tif (this.isInSemanticMenu) {\n\t\t\t\treturn this.checked ? 'true' : 'false'\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\t},\n\n\tmethods: {\n\t\tcheckInput(event) {\n\t\t\t// by clicking we also trigger the change event\n\t\t\tthis.$refs.label.click()\n\t\t},\n\t\tonChange(event) {\n\t\t\t/**\n\t\t\t * Emitted when the checkbox state is changed\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:checked', this.$refs.checkbox.checked)\n\n\t\t\t/**\n\t\t\t * Emitted when the checkbox state is changed\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('change', event)\n\n\t\t\tif (this.$refs.checkbox.checked) {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the checkbox is checked\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('check')\n\t\t\t} else {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the checkbox is unchecked\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\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@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n\n.action-checkbox {\n\tdisplay: flex;\n\talign-items: flex-start;\n\n\twidth: 100%;\n\theight: auto;\n\tmargin: 0;\n\tpadding: 0;\n\n\tcursor: pointer;\n\twhite-space: nowrap;\n\n\tcolor: var(--color-main-text);\n\tborder: 0;\n\tborder-radius: 0; // otherwise Safari will cut the border-radius area\n\tbackground-color: transparent;\n\tbox-shadow: none;\n\n\tfont-weight: normal;\n\tline-height: $clickable-area;\n\n\t/* checkbox/radio fixes */\n\t&__checkbox {\n\t\tposition: absolute;\n\t\ttop: auto;\n\t\tleft: -10000px;\n\n\t\toverflow: hidden;\n\n\t\twidth: 1px;\n\t\theight: 1px;\n\t}\n\n\t&__label {\n\t\tdisplay: flex;\n\t\talign-items: center; // align checkbox to text\n\n\t\twidth: 100%;\n\t\tpadding: 0 !important;\n\t\tpadding-right: $icon-margin !important;\n\n\t\t// checkbox-width is 12px, border is 2\n\t\t// (44 - 14 - 2) / 2 = 14\n\t\t&::before {\n\t\t\tmargin: 0 14px 0 !important;\n\t\t}\n\t}\n\n\t&--disabled {\n\t\t&,\n\t\t.action-checkbox__label {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["ActionGlobalMixin","GenRandomId"],"mappings":";;;;AA6DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAAA,aAAAA,iBAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,YAAAC,wBAAA;AAAA,MACA,WAAA,QAAA,GAAA,KAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AACA,aAAA,CAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA;AACA,UAAA,KAAA,kBAAA;AACA,eAAA,KAAA,UAAA,SAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,WAAA,OAAA;AAEA,WAAA,MAAA,MAAA,MAAA;AAAA,IACA;AAAA,IACA,SAAA,OAAA;AAMA,WAAA,MAAA,kBAAA,KAAA,MAAA,SAAA,OAAA;AAOA,WAAA,MAAA,UAAA,KAAA;AAEA,UAAA,KAAA,MAAA,SAAA,SAAA;AAMA,aAAA,MAAA,OAAA;AAAA,MACA,OAAA;AAMA,aAAA,MAAA,SAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcActionCheckbox.cjs","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=\"alert('(un)checked !')\">First choice</NcActionCheckbox>\n\t\t<NcActionCheckbox value=\"second\" @change=\"alert('(un)checked !')\">Second choice</NcActionCheckbox>\n\t\t<NcActionCheckbox :checked=\"true\" @change=\"alert('(un)checked !')\">Third choice (checked)</NcActionCheckbox>\n\t\t<NcActionCheckbox :disabled=\"true\" @change=\"alert('(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<span class=\"action-checkbox\" :role=\"isInSemanticMenu && 'menuitemcheckbox'\" :aria-checked=\"ariaChecked\">\n\t\t\t<input :id=\"id\"\n\t\t\t\tref=\"checkbox\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:checked=\"checked\"\n\t\t\t\t:value=\"value\"\n\t\t\t\t:class=\"{ focusable: isFocusable }\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclass=\"checkbox action-checkbox__checkbox\"\n\t\t\t\t@keydown.enter.exact.prevent=\"checkInput\"\n\t\t\t\t@change=\"onChange\">\n\t\t\t<label ref=\"label\" :for=\"id\" class=\"action-checkbox__label\">{{ text }}</label>\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default {\n\tname: 'NcActionCheckbox',\n\n\tmixins: [ActionGlobalMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\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-' + GenRandomId(),\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\tchecked: {\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'change',\n\t\t'check',\n\t\t'uncheck',\n\t\t'update:checked',\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 * aria-checked attribute for role=\"menuitemcheckbox\"\n\t\t *\n\t\t * @return {'true'|'false'|undefined} aria-checked value if needed\n\t\t */\n\t\tariaChecked() {\n\t\t\tif (this.isInSemanticMenu) {\n\t\t\t\treturn this.checked ? 'true' : 'false'\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\t},\n\n\tmethods: {\n\t\tcheckInput(event) {\n\t\t\t// by clicking we also trigger the change event\n\t\t\tthis.$refs.label.click()\n\t\t},\n\t\tonChange(event) {\n\t\t\t/**\n\t\t\t * Emitted when the checkbox state is changed\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:checked', this.$refs.checkbox.checked)\n\n\t\t\t/**\n\t\t\t * Emitted when the checkbox state is changed\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('change', event)\n\n\t\t\tif (this.$refs.checkbox.checked) {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the checkbox is checked\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('check')\n\t\t\t} else {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the checkbox is unchecked\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\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@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n\n.action-checkbox {\n\tdisplay: flex;\n\talign-items: flex-start;\n\n\twidth: 100%;\n\theight: auto;\n\tmargin: 0;\n\tpadding: 0;\n\n\tcursor: pointer;\n\twhite-space: nowrap;\n\n\tcolor: var(--color-main-text);\n\tborder: 0;\n\tborder-radius: 0; // otherwise Safari will cut the border-radius area\n\tbackground-color: transparent;\n\tbox-shadow: none;\n\n\tfont-weight: normal;\n\tline-height: var(--default-clickable-area);\n\n\t/* checkbox/radio fixes */\n\t&__checkbox {\n\t\tposition: absolute;\n\t\ttop: auto;\n\t\tleft: -10000px;\n\n\t\toverflow: hidden;\n\n\t\twidth: 1px;\n\t\theight: 1px;\n\t}\n\n\t&__label {\n\t\tdisplay: flex;\n\t\talign-items: center; // align checkbox to text\n\n\t\twidth: 100%;\n\t\tpadding: 0 !important;\n\t\tpadding-right: $icon-margin !important;\n\n\t\t// checkbox-width is 12px, border is 2\n\t\t// (44 - 14 - 2) / 2 = 14\n\t\t&::before {\n\t\t\tmargin: 0 14px 0 !important;\n\t\t}\n\t}\n\n\t&--disabled {\n\t\t&,\n\t\t.action-checkbox__label {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["ActionGlobalMixin","GenRandomId"],"mappings":";;;;AA2CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAAA,aAAAA,iBAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,YAAAC,wBAAA;AAAA,MACA,WAAA,QAAA,GAAA,KAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AACA,aAAA,CAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA;AACA,UAAA,KAAA,kBAAA;AACA,eAAA,KAAA,UAAA,SAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,WAAA,OAAA;AAEA,WAAA,MAAA,MAAA,MAAA;AAAA,IACA;AAAA,IACA,SAAA,OAAA;AAMA,WAAA,MAAA,kBAAA,KAAA,MAAA,SAAA,OAAA;AAOA,WAAA,MAAA,UAAA,KAAA;AAEA,UAAA,KAAA,MAAA,SAAA,SAAA;AAMA,aAAA,MAAA,OAAA;AAAA,MACA,OAAA;AAMA,aAAA,MAAA,SAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcActionCheckbox.mjs

@@ -1,6 +1,6 @@
-import '../assets/NcActionCheckbox-DTlI7y7p.css';
-import { A as ActionGlobalMixin } from "../chunks/actionGlobal-DV5ZiuS0.mjs";
-import { G as GenRandomId } from "../chunks/GenRandomId-CXkjMlAT.mjs";
+import '../assets/NcActionCheckbox-C-PJVvtb.css';
+import { A as ActionGlobalMixin } from "../chunks/actionGlobal-DqVa7c7G.mjs";
+import { G as GenRandomId } from "../chunks/GenRandomId-CMooMQt0.mjs";
 import { n as normalizeComponent } from "../chunks/_plugin-vue2_normalizer-D637Qkok.mjs";
 const _sfc_main = {
   name: "NcActionCheckbox",
@@ -87,10 +87,8 @@ const _sfc_main = {
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
   return _c("li", { staticClass: "action", class: { "action--disabled": _vm.disabled }, attrs: { "role": _vm.isInSemanticMenu && "presentation" } }, [_c("span", { staticClass: "action-checkbox", attrs: { "role": _vm.isInSemanticMenu && "menuitemcheckbox", "aria-checked": _vm.ariaChecked } }, [_c("input", { ref: "checkbox", staticClass: "checkbox action-checkbox__checkbox", class: { focusable: _vm.isFocusable }, attrs: { "id": _vm.id, "disabled": _vm.disabled, "type": "checkbox" }, domProps: { "checked": _vm.checked, "value": _vm.value }, on: { "keydown": function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
-      return null;
-    if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey)
-      return null;
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
+    if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey) return null;
     $event.preventDefault();
     return _vm.checkInput.apply(null, arguments);
   }, "change": _vm.onChange } }), _c("label", { ref: "label", staticClass: "action-checkbox__label", attrs: { "for": _vm.id } }, [_vm._v(_vm._s(_vm.text))]), _vm._e()], 2)]);
@@ -102,7 +100,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "24834b9f",
+  "4faf73ef",
   null,
   null
 );

package/dist/Components/NcActionCheckbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcActionCheckbox.mjs","sources":["../../src/components/NcActionCheckbox/NcActionCheckbox.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\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=\"alert('(un)checked !')\">First choice</NcActionCheckbox>\n\t\t<NcActionCheckbox value=\"second\" @change=\"alert('(un)checked !')\">Second choice</NcActionCheckbox>\n\t\t<NcActionCheckbox :checked=\"true\" @change=\"alert('(un)checked !')\">Third choice (checked)</NcActionCheckbox>\n\t\t<NcActionCheckbox :disabled=\"true\" @change=\"alert('(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<span class=\"action-checkbox\" :role=\"isInSemanticMenu && 'menuitemcheckbox'\" :aria-checked=\"ariaChecked\">\n\t\t\t<input :id=\"id\"\n\t\t\t\tref=\"checkbox\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:checked=\"checked\"\n\t\t\t\t:value=\"value\"\n\t\t\t\t:class=\"{ focusable: isFocusable }\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclass=\"checkbox action-checkbox__checkbox\"\n\t\t\t\t@keydown.enter.exact.prevent=\"checkInput\"\n\t\t\t\t@change=\"onChange\">\n\t\t\t<label ref=\"label\" :for=\"id\" class=\"action-checkbox__label\">{{ text }}</label>\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default {\n\tname: 'NcActionCheckbox',\n\n\tmixins: [ActionGlobalMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\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-' + GenRandomId(),\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\tchecked: {\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'change',\n\t\t'check',\n\t\t'uncheck',\n\t\t'update:checked',\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 * aria-checked attribute for role=\"menuitemcheckbox\"\n\t\t *\n\t\t * @return {'true'|'false'|undefined} aria-checked value if needed\n\t\t */\n\t\tariaChecked() {\n\t\t\tif (this.isInSemanticMenu) {\n\t\t\t\treturn this.checked ? 'true' : 'false'\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\t},\n\n\tmethods: {\n\t\tcheckInput(event) {\n\t\t\t// by clicking we also trigger the change event\n\t\t\tthis.$refs.label.click()\n\t\t},\n\t\tonChange(event) {\n\t\t\t/**\n\t\t\t * Emitted when the checkbox state is changed\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:checked', this.$refs.checkbox.checked)\n\n\t\t\t/**\n\t\t\t * Emitted when the checkbox state is changed\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('change', event)\n\n\t\t\tif (this.$refs.checkbox.checked) {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the checkbox is checked\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('check')\n\t\t\t} else {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the checkbox is unchecked\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\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@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n\n.action-checkbox {\n\tdisplay: flex;\n\talign-items: flex-start;\n\n\twidth: 100%;\n\theight: auto;\n\tmargin: 0;\n\tpadding: 0;\n\n\tcursor: pointer;\n\twhite-space: nowrap;\n\n\tcolor: var(--color-main-text);\n\tborder: 0;\n\tborder-radius: 0; // otherwise Safari will cut the border-radius area\n\tbackground-color: transparent;\n\tbox-shadow: none;\n\n\tfont-weight: normal;\n\tline-height: $clickable-area;\n\n\t/* checkbox/radio fixes */\n\t&__checkbox {\n\t\tposition: absolute;\n\t\ttop: auto;\n\t\tleft: -10000px;\n\n\t\toverflow: hidden;\n\n\t\twidth: 1px;\n\t\theight: 1px;\n\t}\n\n\t&__label {\n\t\tdisplay: flex;\n\t\talign-items: center; // align checkbox to text\n\n\t\twidth: 100%;\n\t\tpadding: 0 !important;\n\t\tpadding-right: $icon-margin !important;\n\n\t\t// checkbox-width is 12px, border is 2\n\t\t// (44 - 14 - 2) / 2 = 14\n\t\t&::before {\n\t\t\tmargin: 0 14px 0 !important;\n\t\t}\n\t}\n\n\t&--disabled {\n\t\t&,\n\t\t.action-checkbox__label {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":[],"mappings":";;;AA6DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAA,iBAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,YAAA,YAAA;AAAA,MACA,WAAA,QAAA,GAAA,KAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AACA,aAAA,CAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA;AACA,UAAA,KAAA,kBAAA;AACA,eAAA,KAAA,UAAA,SAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,WAAA,OAAA;AAEA,WAAA,MAAA,MAAA,MAAA;AAAA,IACA;AAAA,IACA,SAAA,OAAA;AAMA,WAAA,MAAA,kBAAA,KAAA,MAAA,SAAA,OAAA;AAOA,WAAA,MAAA,UAAA,KAAA;AAEA,UAAA,KAAA,MAAA,SAAA,SAAA;AAMA,aAAA,MAAA,OAAA;AAAA,MACA,OAAA;AAMA,aAAA,MAAA,SAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcActionCheckbox.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=\"alert('(un)checked !')\">First choice</NcActionCheckbox>\n\t\t<NcActionCheckbox value=\"second\" @change=\"alert('(un)checked !')\">Second choice</NcActionCheckbox>\n\t\t<NcActionCheckbox :checked=\"true\" @change=\"alert('(un)checked !')\">Third choice (checked)</NcActionCheckbox>\n\t\t<NcActionCheckbox :disabled=\"true\" @change=\"alert('(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<span class=\"action-checkbox\" :role=\"isInSemanticMenu && 'menuitemcheckbox'\" :aria-checked=\"ariaChecked\">\n\t\t\t<input :id=\"id\"\n\t\t\t\tref=\"checkbox\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:checked=\"checked\"\n\t\t\t\t:value=\"value\"\n\t\t\t\t:class=\"{ focusable: isFocusable }\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclass=\"checkbox action-checkbox__checkbox\"\n\t\t\t\t@keydown.enter.exact.prevent=\"checkInput\"\n\t\t\t\t@change=\"onChange\">\n\t\t\t<label ref=\"label\" :for=\"id\" class=\"action-checkbox__label\">{{ text }}</label>\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default {\n\tname: 'NcActionCheckbox',\n\n\tmixins: [ActionGlobalMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\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-' + GenRandomId(),\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\tchecked: {\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'change',\n\t\t'check',\n\t\t'uncheck',\n\t\t'update:checked',\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 * aria-checked attribute for role=\"menuitemcheckbox\"\n\t\t *\n\t\t * @return {'true'|'false'|undefined} aria-checked value if needed\n\t\t */\n\t\tariaChecked() {\n\t\t\tif (this.isInSemanticMenu) {\n\t\t\t\treturn this.checked ? 'true' : 'false'\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\t},\n\n\tmethods: {\n\t\tcheckInput(event) {\n\t\t\t// by clicking we also trigger the change event\n\t\t\tthis.$refs.label.click()\n\t\t},\n\t\tonChange(event) {\n\t\t\t/**\n\t\t\t * Emitted when the checkbox state is changed\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:checked', this.$refs.checkbox.checked)\n\n\t\t\t/**\n\t\t\t * Emitted when the checkbox state is changed\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('change', event)\n\n\t\t\tif (this.$refs.checkbox.checked) {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the checkbox is checked\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('check')\n\t\t\t} else {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the checkbox is unchecked\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\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@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n\n.action-checkbox {\n\tdisplay: flex;\n\talign-items: flex-start;\n\n\twidth: 100%;\n\theight: auto;\n\tmargin: 0;\n\tpadding: 0;\n\n\tcursor: pointer;\n\twhite-space: nowrap;\n\n\tcolor: var(--color-main-text);\n\tborder: 0;\n\tborder-radius: 0; // otherwise Safari will cut the border-radius area\n\tbackground-color: transparent;\n\tbox-shadow: none;\n\n\tfont-weight: normal;\n\tline-height: var(--default-clickable-area);\n\n\t/* checkbox/radio fixes */\n\t&__checkbox {\n\t\tposition: absolute;\n\t\ttop: auto;\n\t\tleft: -10000px;\n\n\t\toverflow: hidden;\n\n\t\twidth: 1px;\n\t\theight: 1px;\n\t}\n\n\t&__label {\n\t\tdisplay: flex;\n\t\talign-items: center; // align checkbox to text\n\n\t\twidth: 100%;\n\t\tpadding: 0 !important;\n\t\tpadding-right: $icon-margin !important;\n\n\t\t// checkbox-width is 12px, border is 2\n\t\t// (44 - 14 - 2) / 2 = 14\n\t\t&::before {\n\t\t\tmargin: 0 14px 0 !important;\n\t\t}\n\t}\n\n\t&--disabled {\n\t\t&,\n\t\t.action-checkbox__label {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":[],"mappings":";;;AA2CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAA,iBAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,YAAA,YAAA;AAAA,MACA,WAAA,QAAA,GAAA,KAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AACA,aAAA,CAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA;AACA,UAAA,KAAA,kBAAA;AACA,eAAA,KAAA,UAAA,SAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,WAAA,OAAA;AAEA,WAAA,MAAA,MAAA,MAAA;AAAA,IACA;AAAA,IACA,SAAA,OAAA;AAMA,WAAA,MAAA,kBAAA,KAAA,MAAA,SAAA,OAAA;AAOA,WAAA,MAAA,UAAA,KAAA;AAEA,UAAA,KAAA,MAAA,SAAA,SAAA;AAMA,aAAA,MAAA,OAAA;AAAA,MACA,OAAA;AAMA,aAAA,MAAA,SAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcActionInput.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const NcActionInput = require("../chunks/NcActionInput-CHucaM0V.cjs");
+const NcActionInput = require("../chunks/NcActionInput-Dw1TL9ig.cjs");
 module.exports = NcActionInput.NcActionInput;

package/dist/Components/NcActionInput.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcActionInput-BqG7gSLn.mjs";
+import { N } from "../chunks/NcActionInput-DvbN3P1D.mjs";
 export {
   N as default
 };