@nextcloud/vue 8.2.0 → 8.3.0

package/CHANGELOG.md

@@ -6,6 +6,30 @@ All notable changes to this project will be documented in this file.
 
 All notable changes to this project will be documented in this file.
 
+## [v8.3.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.3.0) (2023-11-30)
+[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.3.0...v8.2.0)
+
+### 🚀 Enhancements
+* feat(NcInputField): add optional pill form appearance to the component [\#4876](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4876) \([Antreesy](https://github.com/Antreesy)\)
+
+### 🐛 Fixed bugs
+* fix(NcCheckboxContent): Make sure text can wrap [\#4862](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4862) \([susnux](https://github.com/susnux)\)
+* fix(NcAppNavigation): make toggle button not the first element for focus-trap [\#4864](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4864) \([Antreesy](https://github.com/Antreesy)\)
+* fix(NcAppNavigation): closed on mobile initially [\#4869](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4869) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcAppSettingsDialog): Remove navigation instead of hiding and fix styles [\#4865](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4865) \([susnux](https://github.com/susnux)\)
+* Remove server styles from action menu [\#4875](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4875) \([marcoambrosini](https://github.com/marcoambrosini)\)
+* fix(NcCheckboxRadioSwitch): visually hidden input position [\#4882](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4882) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcDialog): Add slighly more padding on the bottom and fix example button order [\#4881](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4881) \([susnux](https://github.com/susnux)\)
+* docs(NcAppNavigation): Add docs for slots and remove private components from styleguide [\#4883](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4883) \([susnux](https://github.com/susnux)\)
+* fix(NcAppNavigationCaption): Make color `main-text` for accessibility [\#4885](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4885) \([susnux](https://github.com/susnux)\)
+* fix(NcColorPicker): correct aria-label [\#4889](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4889) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcActions): typo in aria-haspopup [\#4887](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4887) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcAppNavigation): replace custom `v-tooltip` with native `title` [\#4888](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4888) \([ShGKme](https://github.com/ShGKme)\)
+
+### Other Changes
+* chore(lint): use valid JSDoc for literal type union [\#4886](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4886) \([ShGKme](https://github.com/ShGKme)\)
+* Update translations
+
 ## [v8.2.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.2.0) (2023-11-17)
 [Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.2.0...v8.1.0)
 

package/dist/Components/NcActionButton.cjs

@@ -1,4 +1,4 @@
-var _ = require("../assets/index-e9fce208.css");
+var _ = require("../assets/index-7868494b.css");
 const e = require("../chunks/ChevronRight-a4c1e0d3.cjs"), s = require("../chunks/actionText-9582810f.cjs"), o = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
 const a = {
   name: "NcActionButton",
@@ -51,7 +51,7 @@ const a = {
 };
 var i = function() {
   var t = this, n = t._self._c;
-  return n("li", { staticClass: "action", class: { "action--disabled": t.disabled }, attrs: { role: t.isInSemanticMenu && "presentation" } }, [n("button", { staticClass: "action-button", class: { focusable: t.isFocusable }, attrs: { "aria-label": t.ariaLabel, title: t.title, role: t.isInSemanticMenu && "menuitem", type: "button" }, on: { click: t.onClick } }, [t._t("icon", function() {
+  return n("li", { staticClass: "action", class: { "action--disabled": t.disabled }, attrs: { role: t.isInSemanticMenu && "presentation" } }, [n("button", { staticClass: "action-button button-vue", class: { focusable: t.isFocusable }, attrs: { "aria-label": t.ariaLabel, title: t.title, role: t.isInSemanticMenu && "menuitem", type: "button" }, on: { click: t.onClick } }, [t._t("icon", function() {
     return [n("span", { staticClass: "action-button__icon", class: [t.isIconUrl ? "action-button__icon--url" : t.icon], style: { backgroundImage: t.isIconUrl ? `url(${t.icon})` : null }, attrs: { "aria-hidden": "true" } })];
   }), t.name ? n("span", { staticClass: "action-button__longtext-wrapper" }, [n("strong", { staticClass: "action-button__name" }, [t._v(" " + t._s(t.name) + " ")]), n("br"), n("span", { staticClass: "action-button__longtext", domProps: { textContent: t._s(t.text) } })]) : t.isLongText ? n("span", { staticClass: "action-button__longtext", domProps: { textContent: t._s(t.text) } }) : n("span", { staticClass: "action-button__text" }, [t._v(t._s(t.text))]), t.isMenu ? n("ChevronRightIcon", { staticClass: "action-button__menu-icon" }) : t._e(), t._e()], 2)]);
 }, c = [], l = /* @__PURE__ */ o.normalizeComponent(
@@ -60,7 +60,7 @@ var i = function() {
   c,
   !1,
   null,
-  "7e49b418",
+  "41ba401e",
   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'\n\timport Plus from 'vue-material-design-icons/Plus'\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'\n\timport Plus from 'vue-material-design-icons/Plus'\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'\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'\nimport HandBackRight from 'vue-material-design-icons/HandBackRight'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tHandBackRight,\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 class=\"action-button\"\n\t\t\t:class=\"{ focusable: isFocusable }\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:title=\"title\"\n\t\t\t:role=\"isInSemanticMenu && 'menuitem'\"\n\t\t\ttype=\"button\"\n\t\t\t@click=\"onClick\">\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\" class=\"action-button__menu-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 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\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 * 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 * @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 * 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\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\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</style>\n"],"names":["_sfc_main","ChevronRight","actionText"],"mappings":";;AAqOA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,kBAAAC,EAAA;AAAA,EACA;AAAA,EACA,QAAA,CAAAC,EAAA,eAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;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,EACA;AACA;;;;;;;;;;;;;;;;;;"}
+{"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'\n\timport Plus from 'vue-material-design-icons/Plus'\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'\n\timport Plus from 'vue-material-design-icons/Plus'\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'\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'\nimport HandBackRight from 'vue-material-design-icons/HandBackRight'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tHandBackRight,\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 class=\"action-button button-vue\"\n\t\t\t:class=\"{ focusable: isFocusable }\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:title=\"title\"\n\t\t\t:role=\"isInSemanticMenu && 'menuitem'\"\n\t\t\ttype=\"button\"\n\t\t\t@click=\"onClick\">\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\" class=\"action-button__menu-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 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\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 * 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 * @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 * 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\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\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</style>\n"],"names":["_sfc_main","ChevronRight","actionText"],"mappings":";;AAqOA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,kBAAAC,EAAA;AAAA,EACA;AAAA,EACA,QAAA,CAAAC,EAAA,eAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;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,EACA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcActionButton.mjs

@@ -1,13 +1,13 @@
-import "../assets/index-e9fce208.css";
+import "../assets/index-7868494b.css";
 import { C as e } from "../chunks/ChevronRight-1a6a6cf2.mjs";
-import { A as o } from "../chunks/actionText-60ff01d1.mjs";
-import { n as s } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-const a = {
+import { A as a } from "../chunks/actionText-60ff01d1.mjs";
+import { n as o } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const s = {
   name: "NcActionButton",
   components: {
     ChevronRightIcon: e
   },
-  mixins: [o],
+  mixins: [a],
   inject: {
     isInSemanticMenu: {
       from: "NcActions:isSemanticMenu",
@@ -53,16 +53,16 @@ const a = {
 };
 var i = function() {
   var t = this, n = t._self._c;
-  return n("li", { staticClass: "action", class: { "action--disabled": t.disabled }, attrs: { role: t.isInSemanticMenu && "presentation" } }, [n("button", { staticClass: "action-button", class: { focusable: t.isFocusable }, attrs: { "aria-label": t.ariaLabel, title: t.title, role: t.isInSemanticMenu && "menuitem", type: "button" }, on: { click: t.onClick } }, [t._t("icon", function() {
+  return n("li", { staticClass: "action", class: { "action--disabled": t.disabled }, attrs: { role: t.isInSemanticMenu && "presentation" } }, [n("button", { staticClass: "action-button button-vue", class: { focusable: t.isFocusable }, attrs: { "aria-label": t.ariaLabel, title: t.title, role: t.isInSemanticMenu && "menuitem", type: "button" }, on: { click: t.onClick } }, [t._t("icon", function() {
     return [n("span", { staticClass: "action-button__icon", class: [t.isIconUrl ? "action-button__icon--url" : t.icon], style: { backgroundImage: t.isIconUrl ? `url(${t.icon})` : null }, attrs: { "aria-hidden": "true" } })];
   }), t.name ? n("span", { staticClass: "action-button__longtext-wrapper" }, [n("strong", { staticClass: "action-button__name" }, [t._v(" " + t._s(t.name) + " ")]), n("br"), n("span", { staticClass: "action-button__longtext", domProps: { textContent: t._s(t.text) } })]) : t.isLongText ? n("span", { staticClass: "action-button__longtext", domProps: { textContent: t._s(t.text) } }) : n("span", { staticClass: "action-button__text" }, [t._v(t._s(t.text))]), t.isMenu ? n("ChevronRightIcon", { staticClass: "action-button__menu-icon" }) : t._e(), t._e()], 2)]);
-}, c = [], l = /* @__PURE__ */ s(
-  a,
+}, c = [], l = /* @__PURE__ */ o(
+  s,
   i,
   c,
   !1,
   null,
-  "7e49b418",
+  "41ba401e",
   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'\n\timport Plus from 'vue-material-design-icons/Plus'\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'\n\timport Plus from 'vue-material-design-icons/Plus'\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'\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'\nimport HandBackRight from 'vue-material-design-icons/HandBackRight'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tHandBackRight,\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 class=\"action-button\"\n\t\t\t:class=\"{ focusable: isFocusable }\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:title=\"title\"\n\t\t\t:role=\"isInSemanticMenu && 'menuitem'\"\n\t\t\ttype=\"button\"\n\t\t\t@click=\"onClick\">\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\" class=\"action-button__menu-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 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\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 * 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 * @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 * 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\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\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</style>\n"],"names":["_sfc_main","ChevronRight","ActionTextMixin"],"mappings":";;;;AAqOA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,kBAAAC;AAAA,EACA;AAAA,EACA,QAAA,CAAAC,CAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;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,EACA;AACA;;;;;;;;;;;;;;;;;"}
+{"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'\n\timport Plus from 'vue-material-design-icons/Plus'\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'\n\timport Plus from 'vue-material-design-icons/Plus'\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'\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'\nimport HandBackRight from 'vue-material-design-icons/HandBackRight'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tHandBackRight,\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 class=\"action-button button-vue\"\n\t\t\t:class=\"{ focusable: isFocusable }\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:title=\"title\"\n\t\t\t:role=\"isInSemanticMenu && 'menuitem'\"\n\t\t\ttype=\"button\"\n\t\t\t@click=\"onClick\">\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\" class=\"action-button__menu-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 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\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 * 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 * @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 * 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\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\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</style>\n"],"names":["_sfc_main","ChevronRight","ActionTextMixin"],"mappings":";;;;AAqOA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,kBAAAC;AAAA,EACA;AAAA,EACA,QAAA,CAAAC,CAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;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,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcActionInput.cjs

@@ -1,5 +1,5 @@
 var v = require("../assets/index-9020d9ca.css");
-const s = require("./NcDateTimePicker.cjs"), n = require("./NcDateTimePickerNative.cjs"), r = require("./NcPasswordField.cjs"), c = require("./NcSelect.cjs"), o = require("./NcTextField.cjs"), u = require("../chunks/actionGlobal-9e29e11b.cjs"), l = require("../chunks/GenRandomId-c214d235.cjs"), d = require("../chunks/l10n-e9ffbe5e.cjs"), p = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+const s = require("./NcDateTimePicker.cjs"), n = require("./NcDateTimePickerNative.cjs"), r = require("./NcPasswordField.cjs"), c = require("./NcSelect.cjs"), o = require("./NcTextField.cjs"), u = require("../chunks/actionGlobal-9e29e11b.cjs"), l = require("../chunks/GenRandomId-c214d235.cjs"), d = require("../chunks/l10n-070da9ad.cjs"), p = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
 const b = {
   name: "NcActionInput",
   components: {

package/dist/Components/NcActionInput.mjs

@@ -6,7 +6,7 @@ import o from "./NcSelect.mjs";
 import c from "./NcTextField.mjs";
 import { A as u } from "../chunks/actionGlobal-8c1c28c9.mjs";
 import { G as l } from "../chunks/GenRandomId-cb9ccebe.mjs";
-import { t as d } from "../chunks/l10n-ef44019c.mjs";
+import { t as d } from "../chunks/l10n-1b905a9a.mjs";
 import { n as p } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
 const b = {
   name: "NcActionInput",

package/dist/Components/NcActions.cjs

@@ -1,5 +1,5 @@
-var oe = require("../assets/index-d1c0876d.css");
-const U = require("./NcButton.cjs"), j = require("./NcPopover.cjs"), J = require("../chunks/GenRandomId-c214d235.cjs"), Q = require("../chunks/l10n-e9ffbe5e.cjs"), V = require("vue"), W = require("../chunks/DotsHorizontal-ac96129a.cjs"), X = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), Y = (e) => e && e.__esModule ? e : { default: e }, Z = /* @__PURE__ */ Y(V);
+var oe = require("../assets/index-b0a8a48c.css");
+const U = require("./NcButton.cjs"), j = require("./NcPopover.cjs"), J = require("../chunks/GenRandomId-c214d235.cjs"), Q = require("../chunks/l10n-070da9ad.cjs"), V = require("vue"), W = require("../chunks/DotsHorizontal-ac96129a.cjs"), X = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), Y = (e) => e && e.__esModule ? e : { default: e }, Z = /* @__PURE__ */ Y(V);
 const a = ".focusable", ee = {
   name: "NcActions",
   components: {
@@ -285,8 +285,8 @@ const a = ".focusable", ee = {
     if (this.forceMenu && l.length > 0 && this.inline > 0 && (Z.default.util.warn("Specifying forceMenu will ignore any inline actions rendering."), l = []), s.length === 0)
       return;
     const g = (t) => {
-      var x, _, I, N, S, $, B, k, O, M, L, h, q, E, w, P, D, F, T, C, z, R, H;
-      const n = ((I = (_ = (x = t == null ? void 0 : t.data) == null ? void 0 : x.scopedSlots) == null ? void 0 : _.icon()) == null ? void 0 : I[0]) || e("span", { class: ["icon", (S = (N = t == null ? void 0 : t.componentOptions) == null ? void 0 : N.propsData) == null ? void 0 : S.icon] }), i = (($ = t == null ? void 0 : t.data) == null ? void 0 : $.attrs) || {}, o = (k = (B = t == null ? void 0 : t.componentOptions) == null ? void 0 : B.listeners) == null ? void 0 : k.click, c = (q = (h = (L = (M = (O = t == null ? void 0 : t.componentOptions) == null ? void 0 : O.children) == null ? void 0 : M[0]) == null ? void 0 : L.text) == null ? void 0 : h.trim) == null ? void 0 : q.call(h), m = ((w = (E = t == null ? void 0 : t.componentOptions) == null ? void 0 : E.propsData) == null ? void 0 : w.ariaLabel) || c, b = this.forceName ? c : "";
+      var _, I, N, b, S, $, B, k, O, M, L, h, q, E, w, P, D, F, T, C, z, R, H;
+      const n = ((N = (I = (_ = t == null ? void 0 : t.data) == null ? void 0 : _.scopedSlots) == null ? void 0 : I.icon()) == null ? void 0 : N[0]) || e("span", { class: ["icon", (S = (b = t == null ? void 0 : t.componentOptions) == null ? void 0 : b.propsData) == null ? void 0 : S.icon] }), i = (($ = t == null ? void 0 : t.data) == null ? void 0 : $.attrs) || {}, o = (k = (B = t == null ? void 0 : t.componentOptions) == null ? void 0 : B.listeners) == null ? void 0 : k.click, c = (q = (h = (L = (M = (O = t == null ? void 0 : t.componentOptions) == null ? void 0 : O.children) == null ? void 0 : M[0]) == null ? void 0 : L.text) == null ? void 0 : h.trim) == null ? void 0 : q.call(h), m = ((w = (E = t == null ? void 0 : t.componentOptions) == null ? void 0 : E.propsData) == null ? void 0 : w.ariaLabel) || c, x = this.forceName ? c : "";
       let y = (D = (P = t == null ? void 0 : t.componentOptions) == null ? void 0 : P.propsData) == null ? void 0 : D.title;
       return this.forceName || y || (y = c), e(
         "NcButton",
@@ -304,7 +304,7 @@ const a = ".focusable", ee = {
           ref: (C = t == null ? void 0 : t.data) == null ? void 0 : C.ref,
           props: {
             // If it has a menuName, we use a secondary button
-            type: this.type || (b ? "secondary" : "tertiary"),
+            type: this.type || (x ? "secondary" : "tertiary"),
             disabled: this.disabled || ((R = (z = t == null ? void 0 : t.componentOptions) == null ? void 0 : z.propsData) == null ? void 0 : R.disabled),
             ...(H = t == null ? void 0 : t.componentOptions) == null ? void 0 : H.propsData
           },
@@ -322,7 +322,7 @@ const a = ".focusable", ee = {
         },
         [
           e("template", { slot: "icon" }, [n]),
-          b
+          x
         ]
       );
     }, v = (t) => {
@@ -377,7 +377,7 @@ const a = ".focusable", ee = {
             slot: "trigger",
             ref: "menuButton",
             attrs: {
-              "aria-haspopup": this.isSemanticMenu ? null : "menu",
+              "aria-haspopup": this.isSemanticMenu ? "menu" : null,
               "aria-label": this.menuName ? null : this.ariaLabel,
               "aria-controls": this.opened ? this.randomId : null,
               // Do not add aria-expanded="true" when it is closed
@@ -475,7 +475,7 @@ var ne = /* @__PURE__ */ X.normalizeComponent(
   se,
   !1,
   null,
-  "7baca6e4",
+  "fd3aaaa4",
   null,
   null
 );

package/dist/Components/NcActions.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcActions.cjs","sources":["../../src/components/NcActions/NcActions.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  - @author Raimund Schlüßler <raimund.schluessler@mailbox.org>\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<!-- Accessibility guidelines:\nhttps://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions.html -->\n\n<docs>\n### Single action\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton @click=\"actionDelete\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t},\n\tmethods: {\n\t\tactionDelete() {\n\t\t\talert('Delete')\n\t\t},\n\t},\n}\n</script>\n```\n\n### Multiple actions\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton @click=\"showMessage('Edit')\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionLink href=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t</template>\n\t\t\tLink\n\t\t</NcActionLink>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew'\nimport Pencil from 'vue-material-design-icons/Pencil'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tOpenInNew,\n\t\tPencil,\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n\n### Multiple actions with 2 items inline\n\n```vue\n<template>\n\t<NcActions :inline=\"2\">\n\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t\tAdd\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Edit')\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionLink href=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t</template>\n\t\t\tLink\n\t\t</NcActionLink>\n\t</NcActions>\n</template>\n<script>\nimport Plus from 'vue-material-design-icons/Plus'\nimport Delete from 'vue-material-design-icons/Delete'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew'\nimport Pencil from 'vue-material-design-icons/Pencil'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tOpenInNew,\n\t\tPencil,\n\t\tPlus,\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n\n### Multiple actions with 2 items inline AND forced names\n\n```vue\n<template>\n\t<NcActions :force-name=\"true\" :inline=\"2\">\n\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t\tAdd\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Edit')\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionLink href=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t</template>\n\t\t\tLink\n\t\t</NcActionLink>\n\t</NcActions>\n</template>\n<script>\nimport Plus from 'vue-material-design-icons/Plus'\nimport Delete from 'vue-material-design-icons/Delete'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew'\nimport Pencil from 'vue-material-design-icons/Pencil'\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tOpenInNew,\n\t\tPencil,\n\t\tPlus,\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n\n### Multiple actions with custom icon\n\n```vue\n<template>\n\t<NcActions>\n\t\t<template #icon>\n\t\t\t<Pencil :size=\"20\" />\n\t\t</template>\n\t\t<NcActionButton @click=\"showMessage('Edit')\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionLink href=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t</template>\n\t\t\tLink\n\t\t</NcActionLink>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew'\nimport Pencil from 'vue-material-design-icons/Pencil'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tOpenInNew,\n\t\tPencil,\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n\n### With menu name\n\n```vue\n<template>\n\t<NcActions menu-name=\"Object management\">\n\t\t<template #icon>\n\t\t\t<Pencil :size=\"20\" />\n\t\t</template>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tRename\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tValidate\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Download :size=\"20\" />\n\t\t\t</template>\n\t\t\tDownload\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport ArrowRight from 'vue-material-design-icons/ArrowRight'\nimport Delete from 'vue-material-design-icons/Delete'\nimport Download from 'vue-material-design-icons/Download'\nimport Pencil from 'vue-material-design-icons/Pencil'\n\nexport default {\n\tcomponents: {\n\t\tArrowRight,\n\t\tDelete,\n\t\tDownload,\n\t\tPencil,\n\t},\n}\n</script>\n```\n\n### Various icons styles\n```vue\n<template>\n\t<NcActions :primary=\"true\">\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete'\nimport Pencil from 'vue-material-design-icons/Pencil'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tPencil,\n\t},\n}\n</script>\n```\n\n```vue\n<template>\n\t<NcActions :primary=\"true\" menu-name=\"Object management\">\n\t\t<template #icon>\n\t\t\t<Plus :size=\"20\" />\n\t\t</template>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tRename\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tValidate\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Download :size=\"20\" />\n\t\t\t</template>\n\t\t\tDownload\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport ArrowRight from 'vue-material-design-icons/ArrowRight'\nimport Delete from 'vue-material-design-icons/Delete'\nimport Download from 'vue-material-design-icons/Download'\nimport Pencil from 'vue-material-design-icons/Pencil'\nimport Plus from 'vue-material-design-icons/Plus'\n\nexport default {\n\tcomponents: {\n\t\tArrowRight,\n\t\tDelete,\n\t\tDownload,\n\t\tPencil,\n\t\tPlus,\n\t},\n}\n</script>\n```\n\n### Custom icon slot\nTo be used with `vue-material-design-icons` only. For icon classes use the `default-icon` slot.\nIt can be used with one or multiple actions.\n```vue\n<template>\n\t<div style=\"display: flex;align-items: center;\">\n\t\t<NcButton @click=\"toggled = !toggled\">Toggle multiple action</NcButton>\n\t\t<NcActions>\n\t\t\t<template #icon>\n\t\t\t\t<DotsHorizontalCircleOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\t<NcActionButton>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<MicrophoneOff :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tMute\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton v-if=\"toggled\">\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</NcActions>\n\t</div>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete'\nimport DotsHorizontalCircleOutline from 'vue-material-design-icons/DotsHorizontalCircleOutline'\nimport MicrophoneOff from 'vue-material-design-icons/MicrophoneOff'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tDotsHorizontalCircleOutline,\n\t\tMicrophoneOff,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\ttoggled: false\n\t\t}\n\t}\n}\n</script>\n```\n\n### Custom icon slot in child elements\n```vue\n<template>\n\t<NcActions :primary=\"true\">\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t\tSearch\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete'\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tMagnify,\n\t},\n}\n</script>\n```\n\n### Type variants\n\n```vue\n<template>\n\t<div>\n\t\t<NcActions :type=\"current\">\n\t\t\t<template #icon>\n\t\t\t\t<SelectColor :size=\"20\" />\n\t\t\t</template>\n\n\t\t\t<NcActionButton v-if=\"current\" close-after-click @click=\"define()\">\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\tRemove\n\t\t\t</NcActionButton>\n\n\t\t\t<NcActionButton v-for=\"row in types\" close-after-click @click=\"define(row)\" :key=\"`type-icon--${row}`\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CheckboxMarkedCircleOutline v-if=\"row === current\" :size=\"20\" />\n\t\t\t\t\t<SelectColor v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ row }}\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\n\t\t<NcActions :type=\"current\" menu-name=\"Choose a type\">\n\t\t\t<NcActionButton v-if=\"current\" close-after-click @click=\"define()\">\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\tRemove\n\t\t\t</NcActionButton>\n\n\t\t\t<NcActionButton v-for=\"row in types\" close-after-click @click=\"define(row)\" :key=\"`type-text--${row}`\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CheckboxMarkedCircleOutline v-if=\"row === current\" :size=\"20\" />\n\t\t\t\t\t<SelectColor v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ row }}\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\n\t\t<NcActions :type=\"current\"  menu-name=\"Choose a type\">\n\t\t\t<template #icon>\n\t\t\t\t<SelectColor :size=\"20\" />\n\t\t\t</template>\n\n\t\t\t<NcActionButton v-if=\"current\" close-after-click @click=\"define()\">\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\tRemove\n\t\t\t</NcActionButton>\n\n\t\t\t<NcActionButton v-for=\"row in types\" close-after-click @click=\"define(row)\" :key=\"`type-icon-text--${row}`\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CheckboxMarkedCircleOutline v-if=\"row === current\" :size=\"20\" />\n\t\t\t\t\t<SelectColor v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ row }}\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</div>\n</template>\n\n<script>\nimport Delete from 'vue-material-design-icons/Delete'\nimport Palette from 'vue-material-design-icons/Palette'\nimport SelectColor from 'vue-material-design-icons/SelectColor'\nimport CheckboxMarkedCircleOutline from 'vue-material-design-icons/CheckboxMarkedCircleOutline'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tPalette,\n\t\tSelectColor,\n\t\tCheckboxMarkedCircleOutline,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tcurrent: 'primary',\n\t\t\ttypes: [\n\t\t\t\t'primary',\n\t\t\t\t'secondary',\n\t\t\t\t'tertiary',\n\t\t\t\t'error',\n\t\t\t\t'warning',\n\t\t\t\t'success'\n\t\t\t]\n\t\t}\n\t},\n\tmethods: {\n\t\tdefine(row = undefined) {\n\t\t\tthis.current = row\n\t\t}\n\t}\n}\n</script>\n```\n\n### Use cases\n\n```vue\n<template>\n\t<div>\n\t\t<h2>Application menu</h2>\n\t\tUses buttons, button groups, links and router links, separators, text. May have checkboxes and radio buttons.\n\t\t<p>\n\t\t\t<NcActions aria-label=\"Email menu\" type=\"tertiary\">\n\t\t\t\t<NcActionButtonGroup>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<StarOutline :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tFavorite\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<EmailUnread :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tUnread\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Bookmark :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tImportant\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</NcActionButtonGroup>\n\t\t\t\t<NcActionText>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<ClockOutlineIcon :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t{{ new Date().toLocaleDateString('en-US') }}\n\t\t\t\t</NcActionText>\n\t\t\t\t<NcActionSeparator />\n\t\t\t\t<NcActionButton>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<AlertOctagonIcon :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tMark as spam\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionCheckbox :checked.sync=\"selected\">\n\t\t\t\t\tSelect\n\t\t\t\t</NcActionCheckbox>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<OpenInNewIcon :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tMove thread\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionLink href=\"#\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<DownloadIcon :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tDownload message\n\t\t\t\t</NcActionLink>\n\t\t\t</NcActions>\n\t\t</p>\n\n\t\t<h2>Menu in menubar</h2>\n\t\tSame as application menu. Separator can be used to make groups of radio buttons as well.\n\t\t<p>\n\t\t\t<NcActions aria-label=\"Text settings\" type=\"tertiary\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatTitle :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<NcActionButtonGroup name=\"Allignment\">\n\t\t\t\t\t<NcActionButton aria-label=\"Left\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<FormatAlignLeft :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton aria-label=\"Center\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<FormatAlignCenter :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton aria-label=\"Right\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<FormatAlignRight :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</NcActionButtonGroup>\n\t\t\t\t<NcActionSeparator />\n\t\t\t\t<NcActionCheckbox :checked.sync=\"checked.bold\" value=\"bold\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<FormatBold :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tBold\n\t\t\t\t</NcActionCheckbox>\n\t\t\t\t<NcActionCheckbox :checked.sync=\"checked.italic\" value=\"italic\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<FormatItalic :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tItalic\n\t\t\t\t</NcActionCheckbox>\n\t\t\t\t<NcActionCheckbox :checked.sync=\"checked.underline\" value=\"underline\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<FormatUnderline :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tUnderline\n\t\t\t\t</NcActionCheckbox>\n\t\t\t\t<NcActionSeparator />\n\t\t\t\t<NcActionRadio name=\"color\" :checked.sync=\"color.black\" value=\"Black\">Black</NcActionRadio>\n\t\t\t\t<NcActionRadio name=\"color\" :checked.sync=\"color.blue\" value=\"Blue\">Blue</NcActionRadio>\n\t\t\t\t<NcActionRadio name=\"color\" :checked.sync=\"color.red\" value=\"Red\">Red</NcActionRadio>\n\t\t\t\t<NcActionRadio name=\"color\" :checked.sync=\"color.green\" value=\"Green\">Green</NcActionRadio>\n\t\t\t</NcActions>\n\t\t</p>\n\n\t\t<h2>Navigation</h2>\n\t\tUses links or router links. May use text elements, captions and separators.\n\t\t<p>\n\t\t\t<NcActions aria-label=\"Applications navigation\" :inline=\"2\" type=\"tertiary\">\n\t\t\t\t<NcActionLink href=\"/apps/dashboard\" icon=\"icon-category-dashboard-white\">\n\t\t\t\t\tDashboard\n\t\t\t\t</NcActionLink>\n\t\t\t\t<NcActionLink href=\"/apps/files\" icon=\"icon-files-white\">\n\t\t\t\t\tFiles\n\t\t\t\t</NcActionLink>\n\t\t\t\t<NcActionLink href=\"/apps/spreed\" icon=\"icon-talk-white\">\n\t\t\t\t\tTalk\n\t\t\t\t</NcActionLink>\n\t\t\t\t<NcActionLink href=\"/apps/contacts\" icon=\"icon-contacts-white\">\n\t\t\t\t\tContacts\n\t\t\t\t</NcActionLink>\n\t\t\t\t<NcActionLink href=\"/apps/spreed\" icon=\"icon-circles-white\">\n\t\t\t\t\tCircles\n\t\t\t\t</NcActionLink>\n\t\t\t</NcActions>\n\t\t</p>\n\n\t\t<h2>Popover</h2>\n\t\tHas any elements, including text input element, or no buttons.\n\t\t<p>\n\t\t\t<NcActions aria-label=\"Group management\">\n\t\t\t\t<NcActionInput trailing-button-label=\"Submit\" label=\"Rename group\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionInput>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tRemove group\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActions>\n\t\t</p>\n\t</div>\n</template>\n\n<script>\n// Common icons\nimport Pencil from 'vue-material-design-icons/Pencil'\nimport Delete from 'vue-material-design-icons/Delete'\n\n// Email icons\nimport StarOutline from 'vue-material-design-icons/StarOutline'\nimport EmailUnread from 'vue-material-design-icons/Email'\nimport Bookmark from 'vue-material-design-icons/Bookmark'\nimport ClockOutlineIcon from 'vue-material-design-icons/ClockOutline'\nimport AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon'\nimport CheckIcon from 'vue-material-design-icons/Check'\nimport OpenInNewIcon from 'vue-material-design-icons/OpenInNew'\nimport DownloadIcon from 'vue-material-design-icons/Download'\n\n// Formating icons\nimport FormatTitle from 'vue-material-design-icons/FormatTitle.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'\nimport FormatBold from 'vue-material-design-icons/FormatBold.vue'\nimport FormatItalic from 'vue-material-design-icons/FormatItalic.vue'\nimport FormatUnderline from 'vue-material-design-icons/FormatUnderline.vue'\n\nexport default {\n\tcomponents: {\n\t\t// Common icons\n\t\tPencil,\n\t\tDelete,\n\n\t\t// Email icons\n\t\tStarOutline,\n\t\tEmailUnread,\n\t\tBookmark,\n\t\tClockOutlineIcon,\n\t\tAlertOctagonIcon,\n\t\tCheckIcon,\n\t\tOpenInNewIcon,\n\t\tDownloadIcon,\n\n\t\t// Formating icons\n\t\tFormatTitle,\n\t\tFormatAlignLeft,\n\t\tFormatAlignCenter,\n\t\tFormatAlignRight,\n\t\tFormatBold,\n\t\tFormatItalic,\n\t\tFormatUnderline,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tselected: false,\n\t\t\t// Formating\n\t\t\tchecked: {\n\t\t\t\tbold: true,\n\t\t\t\titalic: false,\n\t\t\t\tunderline: false,\n\t\t\t},\n\t\t\tcolor: {\n\t\t\t\tblack: true,\n\t\t\t\tblue: false,\n\t\t\t\tred: false,\n\t\t\t\tgreen: false,\n\t\t\t},\n\t\t}\n\t},\n}\n</script>\n\n<style scoped>\np {\n\tmargin: 1rem 0;\n}\n</style>\n```\n\n</docs>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { t } from '../../l10n.js'\n\nimport Vue, { computed } from 'vue'\nimport DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\n\nconst focusableSelector = '.focusable'\n\n/**\n * The Actions component can be used to display one ore more actions.\n * If only a single action is provided, it will be rendered as an inline icon.\n * For more, a menu indicator will be shown and a popovermenu containing the\n * actions will be opened on click.\n *\n * @since 0.10.0\n */\nexport default {\n\tname: 'NcActions',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tDotsHorizontal,\n\t\tNcPopover,\n\t},\n\n\tprovide() {\n\t\treturn {\n\t\t\t/**\n\t\t\t * NcActions can be used as:\n\t\t\t * - Application menu (has menu role)\n\t\t\t * - Navigation (has no specific role, should be used an element with navigation role)\n\t\t\t * - Popover with plain text or text inputs (has no specific role)\n\t\t\t * Depending on the usage (used items), the menu and its items should have different roles for a11y.\n\t\t\t * Provide the role for NcAction* components in the NcActions content.\n\t\t\t * @type {import('vue').ComputedRef<boolean>}\n\t\t\t */\n\t\t\t'NcActions:isSemanticMenu': computed(() => this.isSemanticMenu),\n\t\t}\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Specify the open state of the popover menu\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * This disables the internal open management,\n\t\t * so the actions menu only respects the `open` prop.\n\t\t * This is e.g. necessary for the NcAvatar component\n\t\t * to only open the actions menu after loading it's entries has finished.\n\t\t */\n\t\tmanualOpen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the actions to display in a three dot menu\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the name to show for single actions\n\t\t */\n\t\tforceName: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Specify the menu name\n\t\t */\n\t\tmenuName: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Apply primary styling for this menu\n\t\t */\n\t\tprimary: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Specifies the button type used for trigger and single actions buttons\n\t\t * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success. If left empty,\n\t\t * the default button style will be applied.\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].indexOf(value) !== -1\n\t\t\t},\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Icon to show for the toggle menu button\n\t\t * when more than one action is inside the actions component.\n\t\t * Only replace the default three-dot icon if really necessary.\n\t\t */\n\t\tdefaultIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Aria label for the actions menu.\n\t\t *\n\t\t * If `menuName` is defined this will not be used to prevent\n\t\t * any accessible name conflicts. This ensures that the\n\t\t * element can be activated via voice input.\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Actions'),\n\t\t},\n\n\t\t/**\n\t\t * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.\n\t\t * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,\n\t\t * otherwise root element will inherit incorrect aria-hidden.\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Wanted direction of the menu\n\t\t */\n\t\tplacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\t/**\n\t\t * DOM element for the actions' popover boundaries\n\t\t */\n\t\tboundariesElement: {\n\t\t\ttype: Element,\n\t\t\tdefault: () => document.querySelector('body'),\n\t\t},\n\n\t\t/**\n\t\t * Selector for the actions' popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Disabled state of the main button (single action or menu toggle)\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 * Display x items inline out of the dropdown menu\n\t\t * Will be ignored if `forceMenu` is set\n\t\t */\n\t\tinline: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\t},\n\n\temits: [\n\t\t'open',\n\t\t'update:open',\n\t\t'close',\n\t\t'focus',\n\t\t'blur',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\topened: this.open,\n\t\t\tfocusIndex: 0,\n\t\t\trandomId: `menu-${GenRandomId()}`,\n\t\t\tisSemanticMenu: false,\n\t\t\tisSemanticNavigation: false,\n\t\t\tisSemanticPopoverLike: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\ttriggerBtnType() {\n\t\t\t// If requested, we use a primary button\n\t\t\treturn this.type || (this.primary\n\t\t\t\t? 'primary'\n\t\t\t\t// If it has a name, we use a secondary button\n\t\t\t\t: this.menuName ? 'secondary' : 'tertiary')\n\t\t},\n\t},\n\n\twatch: {\n\t\t// Watch parent prop\n\t\topen(state) {\n\t\t\tif (state === this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.opened = state\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Do we have exactly one Action and\n\t\t * is it allowed as a standalone element?\n\t\t *\n\t\t * @param {Array} action The action to check\n\t\t * @return {boolean}\n\t\t */\n\t\tisValidSingleAction(action) {\n\t\t\tconst componentName = action?.componentOptions?.Ctor?.extendOptions?.name ?? action?.componentOptions?.tag\n\t\t\treturn ['NcActionButton', 'NcActionLink', 'NcActionRouter'].includes(componentName)\n\t\t},\n\n\t\t// MENU STATE MANAGEMENT\n\t\topenMenu(e) {\n\t\t\tif (this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.opened = true\n\n\t\t\t/**\n\t\t\t * Event emitted when the popover menu open state is changed\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:open', true)\n\n\t\t\t/**\n\t\t\t * Event emitted when the popover menu is opened\n\t\t\t */\n\t\t\tthis.$emit('open')\n\t\t},\n\t\tcloseMenu(returnFocus = true) {\n\t\t\tif (!this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.opened = false\n\n\t\t\tthis.$refs.popover.clearFocusTrap({ returnFocus })\n\n\t\t\t/**\n\t\t\t * Event emitted when the popover menu open state is changed\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:open', false)\n\n\t\t\t/**\n\t\t\t * Event emitted when the popover menu is closed\n\t\t\t */\n\t\t\tthis.$emit('close')\n\n\t\t\t// close everything\n\t\t\tthis.focusIndex = 0\n\n\t\t\t// focus back the menu button\n\t\t\tthis.$refs.menuButton.$el.focus()\n\t\t},\n\n\t\tonOpen(event) {\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.focusFirstAction(event)\n\t\t\t})\n\t\t},\n\n\t\t// MENU KEYS & FOCUS MANAGEMENT\n\t\t// focus nearest focusable item on mouse move\n\t\t// DO NOT change the focus if the target is already focused\n\t\t// this will prevent issues with input being unfocused\n\t\t// on mouse move\n\t\tonMouseFocusAction(event) {\n\t\t\tif (document.activeElement === event.target) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst menuItem = event.target.closest('li')\n\t\t\tif (menuItem && this.$refs.menu.contains(menuItem)) {\n\t\t\t\tconst focusableItem = menuItem.querySelector(focusableSelector)\n\t\t\t\tif (focusableItem) {\n\t\t\t\t\tconst focusList = this.$refs.menu.querySelectorAll(focusableSelector)\n\t\t\t\t\tconst focusIndex = [...focusList].indexOf(focusableItem)\n\t\t\t\t\tif (focusIndex > -1) {\n\t\t\t\t\t\tthis.focusIndex = focusIndex\n\t\t\t\t\t\tthis.focusAction()\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Dispatches the keydown listener to different handlers\n\t\t *\n\t\t * @param {object} event The keydown event\n\t\t */\n\t\tonKeydown(event) {\n\t\t\tif (event.key === 'Tab' && !this.isSemanticPopoverLike) {\n\t\t\t\tthis.closeMenu(false)\n\t\t\t}\n\n\t\t\tif (event.key === 'ArrowUp') {\n\t\t\t\tthis.focusPreviousAction(event)\n\t\t\t}\n\n\t\t\tif (event.key === 'ArrowDown') {\n\t\t\t\tthis.focusNextAction(event)\n\t\t\t}\n\n\t\t\tif (event.key === 'PageUp') {\n\t\t\t\tthis.focusFirstAction(event)\n\t\t\t}\n\n\t\t\tif (event.key === 'PageDown') {\n\t\t\t\tthis.focusLastAction(event)\n\t\t\t}\n\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tthis.closeMenu()\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\t\tremoveCurrentActive() {\n\t\t\tconst currentActiveElement = this.$refs.menu.querySelector('li.active')\n\t\t\tif (currentActiveElement) {\n\t\t\t\tcurrentActiveElement.classList.remove('active')\n\t\t\t}\n\t\t},\n\t\tfocusAction() {\n\t\t\t// TODO: have a global disabled state for non input elements\n\t\t\tconst focusElement = this.$refs.menu.querySelectorAll(focusableSelector)[this.focusIndex]\n\t\t\tif (focusElement) {\n\t\t\t\tthis.removeCurrentActive()\n\t\t\t\tconst liMenuParent = focusElement.closest('li.action')\n\t\t\t\tfocusElement.focus()\n\t\t\t\tif (liMenuParent) {\n\t\t\t\t\tliMenuParent.classList.add('active')\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tfocusPreviousAction(event) {\n\t\t\tif (this.opened) {\n\t\t\t\tif (this.focusIndex === 0) {\n\t\t\t\t\tthis.focusLastAction(event)\n\t\t\t\t} else {\n\t\t\t\t\tthis.preventIfEvent(event)\n\t\t\t\t\tthis.focusIndex = this.focusIndex - 1\n\t\t\t\t}\n\t\t\t\tthis.focusAction()\n\t\t\t}\n\t\t},\n\t\tfocusNextAction(event) {\n\t\t\tif (this.opened) {\n\t\t\t\tconst indexLength = this.$refs.menu.querySelectorAll(focusableSelector).length - 1\n\t\t\t\tif (this.focusIndex === indexLength) {\n\t\t\t\t\tthis.focusFirstAction(event)\n\t\t\t\t} else {\n\t\t\t\t\tthis.preventIfEvent(event)\n\t\t\t\t\tthis.focusIndex = this.focusIndex + 1\n\t\t\t\t}\n\t\t\t\tthis.focusAction()\n\t\t\t}\n\t\t},\n\t\tfocusFirstAction(event) {\n\t\t\tif (this.opened) {\n\t\t\t\tthis.preventIfEvent(event)\n\t\t\t\t// In case a button is considered aria-selected we will use this one as a initial focus\n\t\t\t\tconst firstSelectedIndex = [...this.$refs.menu.querySelectorAll(focusableSelector)].findIndex((button) => {\n\t\t\t\t\treturn button.parentElement.getAttribute('aria-selected')\n\t\t\t\t})\n\t\t\t\tthis.focusIndex = firstSelectedIndex > -1 ? firstSelectedIndex : 0\n\t\t\t\tthis.focusAction()\n\t\t\t}\n\t\t},\n\t\tfocusLastAction(event) {\n\t\t\tif (this.opened) {\n\t\t\t\tthis.preventIfEvent(event)\n\t\t\t\tthis.focusIndex = this.$refs.menu.querySelectorAll(focusableSelector).length - 1\n\t\t\t\tthis.focusAction()\n\t\t\t}\n\t\t},\n\t\tpreventIfEvent(event) {\n\t\t\tif (event) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\tevent.stopPropagation()\n\t\t\t}\n\t\t},\n\t\tonFocus(event) {\n\t\t\tthis.$emit('focus', event)\n\t\t},\n\t\tonBlur(event) {\n\t\t\tthis.$emit('blur', event)\n\t\t},\n\t},\n\n\t/**\n\t * The render function to display the component\n\t *\n\t * @param {Function} h The function to create VNodes\n\t * @return {object|undefined} The created VNode\n\t */\n\trender(h) {\n\t\t/**\n\t\t * Filter the Actions, so that we only get allowed components.\n\t\t * This also ensure that we don't get 'text' elements, which would\n\t\t * become problematic later on.\n\t\t */\n\t\tconst actions = (this.$slots.default || []).filter(\n\t\t\taction => action?.componentOptions?.tag || action?.componentOptions?.Ctor?.extendOptions?.name,\n\t\t)\n\n\t\tconst getActionName = (action) => action?.componentOptions?.Ctor?.extendOptions?.name ?? action?.componentOptions?.tag\n\n\t\tconst menuItemsActions = ['NcActionButton', 'NcActionButtonGroup', 'NcActionCheckbox', 'NcActionRadio']\n\t\tconst textInputActions = ['NcActionInput', 'NcActionTextEditable']\n\t\tconst linkActions = ['NcActionLink', 'NcActionRouter']\n\n\t\tconst hasTextInputAction = actions.some(action => textInputActions.includes(getActionName(action)))\n\t\tconst hasMenuItemAction = actions.some(action => menuItemsActions.includes(getActionName(action)))\n\t\tconst hasLinkAction = actions.some(action => linkActions.includes(getActionName(action)))\n\n\t\t// We consider the NcActions to have role=\"menu\" if it consists some button-like action and not text inputs\n\t\tthis.isSemanticMenu = hasMenuItemAction && !hasTextInputAction\n\t\t// We consider the NcActions to be navigation if it consists some link-like action\n\t\tthis.isSemanticNavigation = hasLinkAction && !hasMenuItemAction && !hasTextInputAction\n\t\t// If it is no a manu and not a navigation, it is a popover with items: a form or just a text\n\t\tthis.isSemanticPopoverLike = !this.isSemanticMenu && !this.isSemanticNavigation\n\n\t\t/**\n\t\t * Filter and list actions that are allowed to be displayed inline\n\t\t */\n\t\tlet inlineActions = actions.filter(this.isValidSingleAction)\n\t\tif (this.forceMenu && inlineActions.length > 0 && this.inline > 0) {\n\t\t\tVue.util.warn('Specifying forceMenu will ignore any inline actions rendering.')\n\t\t\tinlineActions = []\n\t\t}\n\n\t\t// Check that we have at least one action\n\t\tif (actions.length === 0) {\n\t\t\treturn\n\t\t}\n\n\t\t/**\n\t\t * Render the provided action\n\t\t *\n\t\t * @param {import('vue').VNode} action the action to render\n\t\t * @return {Function} the vue render function\n\t\t */\n\t\tconst renderInlineAction = (action) => {\n\t\t\tconst icon = action?.data?.scopedSlots?.icon()?.[0]\n\t\t\t\t|| h('span', { class: ['icon', action?.componentOptions?.propsData?.icon] })\n\t\t\tconst attrs = action?.data?.attrs || {}\n\t\t\tconst clickListener = action?.componentOptions?.listeners?.click\n\n\t\t\tconst text = action?.componentOptions?.children?.[0]?.text?.trim?.()\n\t\t\tconst ariaLabel = action?.componentOptions?.propsData?.ariaLabel || text\n\t\t\tconst buttonText = this.forceName ? text : ''\n\n\t\t\tlet title = action?.componentOptions?.propsData?.title\n\t\t\t// Show a default title for single actions if none is present\n\t\t\tif (!(this.forceName || title)) {\n\t\t\t\ttitle = text\n\t\t\t}\n\n\t\t\treturn h('NcButton',\n\t\t\t\t{\n\t\t\t\t\tclass: [\n\t\t\t\t\t\t'action-item action-item--single',\n\t\t\t\t\t\taction?.data?.staticClass,\n\t\t\t\t\t\taction?.data?.class,\n\t\t\t\t\t],\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\t...attrs,\n\t\t\t\t\t\t'aria-label': ariaLabel,\n\t\t\t\t\t\ttitle,\n\t\t\t\t\t},\n\t\t\t\t\tref: action?.data?.ref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t// If it has a menuName, we use a secondary button\n\t\t\t\t\t\ttype: this.type || (buttonText ? 'secondary' : 'tertiary'),\n\t\t\t\t\t\tdisabled: this.disabled || action?.componentOptions?.propsData?.disabled,\n\t\t\t\t\t\t...action?.componentOptions?.propsData,\n\t\t\t\t\t},\n\t\t\t\t\ton: {\n\t\t\t\t\t\tfocus: this.onFocus,\n\t\t\t\t\t\tblur: this.onBlur,\n\t\t\t\t\t\t// If we have a click listener,\n\t\t\t\t\t\t// we bind it to execute on click and forward the click event\n\t\t\t\t\t\t...(!!clickListener && {\n\t\t\t\t\t\t\tclick: (event) => {\n\t\t\t\t\t\t\t\tif (clickListener) {\n\t\t\t\t\t\t\t\t\tclickListener(event)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}),\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t[\n\t\t\t\t\th('template', { slot: 'icon' }, [icon]),\n\t\t\t\t\tbuttonText,\n\t\t\t\t],\n\t\t\t)\n\t\t}\n\n\t\t/**\n\t\t * Render the actions popover\n\t\t *\n\t\t * @param {Array} actions the actions to render within\n\t\t * @return {Function} the vue render function\n\t\t */\n\t\tconst renderActionsPopover = (actions) => {\n\t\t\tconst triggerIcon = this.$slots.icon?.[0] || (\n\t\t\t\tthis.defaultIcon\n\t\t\t\t\t? h('span', { class: ['icon', this.defaultIcon] })\n\t\t\t\t\t: h('DotsHorizontal', {\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tsize: 20,\n\t\t\t\t\t\t},\n\t\t\t\t\t})\n\t\t\t)\n\t\t\treturn h('NcPopover',\n\t\t\t\t{\n\t\t\t\t\tref: 'popover',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdelay: 0,\n\t\t\t\t\t\thandleResize: true,\n\t\t\t\t\t\tshown: this.opened,\n\t\t\t\t\t\tplacement: this.placement,\n\t\t\t\t\t\tboundary: this.boundariesElement,\n\t\t\t\t\t\tcontainer: this.container,\n\t\t\t\t\t\tpopoverBaseClass: 'action-item__popper',\n\t\t\t\t\t\t// Menu and navigation should not have focus trap\n\t\t\t\t\t\t// Tab should close the menu and move focus to the next UI element\n\t\t\t\t\t\tsetReturnFocus: !this.isSemanticPopoverLike ? null : this.$refs.menuButton?.$el,\n\t\t\t\t\t\tfocusTrap: this.isSemanticPopoverLike,\n\t\t\t\t\t},\n\t\t\t\t\t// For some reason the popover component\n\t\t\t\t\t// does not react to props given under the 'props' key,\n\t\t\t\t\t// so we use both 'attrs' and 'props'\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\tdelay: 0,\n\t\t\t\t\t\thandleResize: true,\n\t\t\t\t\t\tshown: this.opened,\n\t\t\t\t\t\tplacement: this.placement,\n\t\t\t\t\t\tboundary: this.boundariesElement,\n\t\t\t\t\t\tcontainer: this.container,\n\t\t\t\t\t\t...this.manualOpen && { triggers: [] },\n\t\t\t\t\t},\n\t\t\t\t\ton: {\n\t\t\t\t\t\tshow: this.openMenu,\n\t\t\t\t\t\t'after-show': this.onOpen,\n\t\t\t\t\t\thide: this.closeMenu,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t[\n\t\t\t\t\th('NcButton', {\n\t\t\t\t\t\tclass: 'action-item__menutoggle',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\ttype: this.triggerBtnType,\n\t\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tslot: 'trigger',\n\t\t\t\t\t\tref: 'menuButton',\n\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t'aria-haspopup': this.isSemanticMenu ? null : 'menu',\n\t\t\t\t\t\t\t'aria-label': this.menuName ? null : this.ariaLabel,\n\t\t\t\t\t\t\t'aria-controls': this.opened ? this.randomId : null,\n\t\t\t\t\t\t\t// Do not add aria-expanded=\"true\" when it is closed\n\t\t\t\t\t\t\t'aria-expanded': this.opened ? 'true' : undefined,\n\t\t\t\t\t\t},\n\t\t\t\t\t\ton: {\n\t\t\t\t\t\t\tfocus: this.onFocus,\n\t\t\t\t\t\t\tblur: this.onBlur,\n\t\t\t\t\t\t},\n\t\t\t\t\t}, [\n\t\t\t\t\t\th('template', { slot: 'icon' }, [triggerIcon]),\n\t\t\t\t\t\tthis.menuName,\n\t\t\t\t\t]),\n\t\t\t\t\th('div', {\n\t\t\t\t\t\tclass: {\n\t\t\t\t\t\t\topen: this.opened,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\ttabindex: '-1',\n\t\t\t\t\t\t},\n\t\t\t\t\t\ton: {\n\t\t\t\t\t\t\tkeydown: this.onKeydown,\n\t\t\t\t\t\t\tmousemove: this.onMouseFocusAction,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tref: 'menu',\n\t\t\t\t\t}, [\n\t\t\t\t\t\th('ul', {\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tid: this.randomId,\n\t\t\t\t\t\t\t\ttabindex: '-1',\n\t\t\t\t\t\t\t\trole: this.isSemanticMenu ? 'menu' : undefined,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}, [\n\t\t\t\t\t\t\tactions,\n\t\t\t\t\t\t]),\n\t\t\t\t\t]),\n\t\t\t\t],\n\t\t\t)\n\t\t}\n\n\t\t/**\n\t\t * If we have a single action only and didn't force a menu,\n\t\t * we render the action as a standalone button\n\t\t */\n\t\tif (actions.length === 1 && inlineActions.length === 1 && !this.forceMenu) {\n\t\t\treturn renderInlineAction(inlineActions[0])\n\t\t}\n\n\t\t// If we completely re-render the children\n\t\t// we need to focus the first action again\n\t\t// Mostly used when clicking a menu item\n\t\tthis.$nextTick(() => {\n\t\t\tif (this.opened && this.$refs.menu) {\n\t\t\t\tconst isAnyActive = this.$refs.menu.querySelector('li.active') || []\n\t\t\t\tif (isAnyActive.length === 0) {\n\t\t\t\t\tthis.focusFirstAction()\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\n\t\t/**\n\t\t * If we some inline actions to render, render them, then the menu\n\t\t */\n\t\tif (inlineActions.length > 0 && this.inline > 0) {\n\t\t\tconst renderedInlineActions = inlineActions.slice(0, this.inline)\n\t\t\t// Filter already rendered actions\n\t\t\tconst menuActions = actions.filter(action => !renderedInlineActions.includes(action))\n\t\t\treturn h('div',\n\t\t\t\t{\n\t\t\t\t\tclass: [\n\t\t\t\t\t\t'action-items',\n\t\t\t\t\t\t`action-item--${this.triggerBtnType}`,\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t[\n\t\t\t\t\t// Render inline actions\n\t\t\t\t\t...renderedInlineActions.map(renderInlineAction),\n\t\t\t\t\t// render the rest within the popover menu\n\t\t\t\t\tmenuActions.length > 0\n\t\t\t\t\t\t? h('div',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tclass: [\n\t\t\t\t\t\t\t\t\t'action-item',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t'action-item--open': this.opened,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\trenderActionsPopover(menuActions),\n\t\t\t\t\t\t\t])\n\t\t\t\t\t\t: null,\n\t\t\t\t])\n\t\t}\n\n\t\t/**\n\t\t * Otherwise, we render the actions in a popover\n\t\t */\n\t\treturn h('div',\n\t\t\t{\n\t\t\t\tclass: [\n\t\t\t\t\t'action-item action-item--default-popover',\n\t\t\t\t\t`action-item--${this.triggerBtnType}`,\n\t\t\t\t\t{\n\t\t\t\t\t\t'action-item--open': this.opened,\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t},\n\t\t\t[\n\t\t\t\trenderActionsPopover(actions),\n\t\t\t],\n\t\t)\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// Inline buttons\n.action-items {\n\tdisplay: flex;\n\talign-items: center;\n\n\t// Spacing between buttons\n\t& > button {\n\t\tmargin-right: math.div($icon-margin, 2);\n\t}\n}\n\n.action-item {\n\t--open-background-color: var(--color-background-hover, $action-background-hover);\n\tposition: relative;\n\tdisplay: inline-block;\n\n\t&.action-item--primary {\n\t\t--open-background-color: var(--color-primary-element-hover);\n\t}\n\n\t&.action-item--secondary {\n\t\t--open-background-color: var(--color-primary-element-light-hover);\n\t}\n\n\t&.action-item--error {\n\t\t--open-background-color: var(--color-error-hover);\n\t}\n\n\t&.action-item--warning {\n\t\t--open-background-color: var(--color-warning-hover);\n\t}\n\n\t&.action-item--success {\n\t\t--open-background-color: var(--color-success-hover);\n\t}\n\n\t&.action-item--tertiary-no-background {\n\t\t--open-background-color: transparent;\n\t}\n\n\t&.action-item--open .action-item__menutoggle {\n\t\tbackground-color: var(--open-background-color);\n\t}\n}\n</style>\n\n<style lang=\"scss\">\n// We overwrote the popover base class, so we can style\n// the popover__inner for actions only.\n.v-popper--theme-dropdown.v-popper__popper.action-item__popper .v-popper__wrapper {\n\tborder-radius: var(--border-radius-large);\n\toverflow:hidden;\n\n\t.v-popper__inner {\n\t\tborder-radius: var(--border-radius-large);\n\t\tpadding: 4px;\n\t\tmax-height: calc(50vh - 16px);\n\t\toverflow: auto;\n\t}\n}\n</style>\n"],"names":["focusableSelector","_sfc_main","Components_NcButton","DotsHorizontal","Components_NcPopover","Vue","value","l10n","GenRandomId","state","action","componentName","_e","_c","_b","_a","_d","returnFocus","event","menuItem","focusableItem","focusIndex","currentActiveElement","focusElement","liMenuParent","indexLength","firstSelectedIndex","button","h","actions","getActionName","menuItemsActions","textInputActions","linkActions","hasTextInputAction","hasMenuItemAction","hasLinkAction","inlineActions","Vue__default","renderInlineAction","icon","attrs","_f","clickListener","_h","_g","text","_m","_l","_k","_j","_i","ariaLabel","_o","_n","buttonText","title","_q","_p","_r","_s","_t","_v","_u","_w","renderActionsPopover","triggerIcon","renderedInlineActions","menuActions"],"mappings":"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"}
+{"version":3,"file":"NcActions.cjs","sources":["../../src/components/NcActions/NcActions.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  - @author Raimund Schlüßler <raimund.schluessler@mailbox.org>\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<!-- Accessibility guidelines:\nhttps://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions.html -->\n\n<docs>\n### Single action\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton @click=\"actionDelete\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t},\n\tmethods: {\n\t\tactionDelete() {\n\t\t\talert('Delete')\n\t\t},\n\t},\n}\n</script>\n```\n\n### Multiple actions\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton @click=\"showMessage('Edit')\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionLink href=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t</template>\n\t\t\tLink\n\t\t</NcActionLink>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew'\nimport Pencil from 'vue-material-design-icons/Pencil'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tOpenInNew,\n\t\tPencil,\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n\n### Multiple actions with 2 items inline\n\n```vue\n<template>\n\t<NcActions :inline=\"2\">\n\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t\tAdd\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Edit')\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionLink href=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t</template>\n\t\t\tLink\n\t\t</NcActionLink>\n\t</NcActions>\n</template>\n<script>\nimport Plus from 'vue-material-design-icons/Plus'\nimport Delete from 'vue-material-design-icons/Delete'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew'\nimport Pencil from 'vue-material-design-icons/Pencil'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tOpenInNew,\n\t\tPencil,\n\t\tPlus,\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n\n### Multiple actions with 2 items inline AND forced names\n\n```vue\n<template>\n\t<NcActions :force-name=\"true\" :inline=\"2\">\n\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t\tAdd\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Edit')\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionLink href=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t</template>\n\t\t\tLink\n\t\t</NcActionLink>\n\t</NcActions>\n</template>\n<script>\nimport Plus from 'vue-material-design-icons/Plus'\nimport Delete from 'vue-material-design-icons/Delete'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew'\nimport Pencil from 'vue-material-design-icons/Pencil'\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tOpenInNew,\n\t\tPencil,\n\t\tPlus,\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n\n### Multiple actions with custom icon\n\n```vue\n<template>\n\t<NcActions>\n\t\t<template #icon>\n\t\t\t<Pencil :size=\"20\" />\n\t\t</template>\n\t\t<NcActionButton @click=\"showMessage('Edit')\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionLink href=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t</template>\n\t\t\tLink\n\t\t</NcActionLink>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew'\nimport Pencil from 'vue-material-design-icons/Pencil'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tOpenInNew,\n\t\tPencil,\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n\n### With menu name\n\n```vue\n<template>\n\t<NcActions menu-name=\"Object management\">\n\t\t<template #icon>\n\t\t\t<Pencil :size=\"20\" />\n\t\t</template>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tRename\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tValidate\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Download :size=\"20\" />\n\t\t\t</template>\n\t\t\tDownload\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport ArrowRight from 'vue-material-design-icons/ArrowRight'\nimport Delete from 'vue-material-design-icons/Delete'\nimport Download from 'vue-material-design-icons/Download'\nimport Pencil from 'vue-material-design-icons/Pencil'\n\nexport default {\n\tcomponents: {\n\t\tArrowRight,\n\t\tDelete,\n\t\tDownload,\n\t\tPencil,\n\t},\n}\n</script>\n```\n\n### Various icons styles\n```vue\n<template>\n\t<NcActions :primary=\"true\">\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete'\nimport Pencil from 'vue-material-design-icons/Pencil'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tPencil,\n\t},\n}\n</script>\n```\n\n```vue\n<template>\n\t<NcActions :primary=\"true\" menu-name=\"Object management\">\n\t\t<template #icon>\n\t\t\t<Plus :size=\"20\" />\n\t\t</template>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tRename\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tValidate\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Download :size=\"20\" />\n\t\t\t</template>\n\t\t\tDownload\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport ArrowRight from 'vue-material-design-icons/ArrowRight'\nimport Delete from 'vue-material-design-icons/Delete'\nimport Download from 'vue-material-design-icons/Download'\nimport Pencil from 'vue-material-design-icons/Pencil'\nimport Plus from 'vue-material-design-icons/Plus'\n\nexport default {\n\tcomponents: {\n\t\tArrowRight,\n\t\tDelete,\n\t\tDownload,\n\t\tPencil,\n\t\tPlus,\n\t},\n}\n</script>\n```\n\n### Custom icon slot\nTo be used with `vue-material-design-icons` only. For icon classes use the `default-icon` slot.\nIt can be used with one or multiple actions.\n```vue\n<template>\n\t<div style=\"display: flex;align-items: center;\">\n\t\t<NcButton @click=\"toggled = !toggled\">Toggle multiple action</NcButton>\n\t\t<NcActions>\n\t\t\t<template #icon>\n\t\t\t\t<DotsHorizontalCircleOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\t<NcActionButton>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<MicrophoneOff :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tMute\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton v-if=\"toggled\">\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</NcActions>\n\t</div>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete'\nimport DotsHorizontalCircleOutline from 'vue-material-design-icons/DotsHorizontalCircleOutline'\nimport MicrophoneOff from 'vue-material-design-icons/MicrophoneOff'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tDotsHorizontalCircleOutline,\n\t\tMicrophoneOff,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\ttoggled: false\n\t\t}\n\t}\n}\n</script>\n```\n\n### Custom icon slot in child elements\n```vue\n<template>\n\t<NcActions :primary=\"true\">\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t\tSearch\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete'\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tMagnify,\n\t},\n}\n</script>\n```\n\n### Type variants\n\n```vue\n<template>\n\t<div>\n\t\t<NcActions :type=\"current\">\n\t\t\t<template #icon>\n\t\t\t\t<SelectColor :size=\"20\" />\n\t\t\t</template>\n\n\t\t\t<NcActionButton v-if=\"current\" close-after-click @click=\"define()\">\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\tRemove\n\t\t\t</NcActionButton>\n\n\t\t\t<NcActionButton v-for=\"row in types\" close-after-click @click=\"define(row)\" :key=\"`type-icon--${row}`\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CheckboxMarkedCircleOutline v-if=\"row === current\" :size=\"20\" />\n\t\t\t\t\t<SelectColor v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ row }}\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\n\t\t<NcActions :type=\"current\" menu-name=\"Choose a type\">\n\t\t\t<NcActionButton v-if=\"current\" close-after-click @click=\"define()\">\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\tRemove\n\t\t\t</NcActionButton>\n\n\t\t\t<NcActionButton v-for=\"row in types\" close-after-click @click=\"define(row)\" :key=\"`type-text--${row}`\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CheckboxMarkedCircleOutline v-if=\"row === current\" :size=\"20\" />\n\t\t\t\t\t<SelectColor v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ row }}\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\n\t\t<NcActions :type=\"current\"  menu-name=\"Choose a type\">\n\t\t\t<template #icon>\n\t\t\t\t<SelectColor :size=\"20\" />\n\t\t\t</template>\n\n\t\t\t<NcActionButton v-if=\"current\" close-after-click @click=\"define()\">\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\tRemove\n\t\t\t</NcActionButton>\n\n\t\t\t<NcActionButton v-for=\"row in types\" close-after-click @click=\"define(row)\" :key=\"`type-icon-text--${row}`\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CheckboxMarkedCircleOutline v-if=\"row === current\" :size=\"20\" />\n\t\t\t\t\t<SelectColor v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ row }}\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</div>\n</template>\n\n<script>\nimport Delete from 'vue-material-design-icons/Delete'\nimport Palette from 'vue-material-design-icons/Palette'\nimport SelectColor from 'vue-material-design-icons/SelectColor'\nimport CheckboxMarkedCircleOutline from 'vue-material-design-icons/CheckboxMarkedCircleOutline'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tPalette,\n\t\tSelectColor,\n\t\tCheckboxMarkedCircleOutline,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tcurrent: 'primary',\n\t\t\ttypes: [\n\t\t\t\t'primary',\n\t\t\t\t'secondary',\n\t\t\t\t'tertiary',\n\t\t\t\t'error',\n\t\t\t\t'warning',\n\t\t\t\t'success'\n\t\t\t]\n\t\t}\n\t},\n\tmethods: {\n\t\tdefine(row = undefined) {\n\t\t\tthis.current = row\n\t\t}\n\t}\n}\n</script>\n```\n\n### Use cases\n\n```vue\n<template>\n\t<div>\n\t\t<h2>Application menu</h2>\n\t\tUses buttons, button groups, links and router links, separators, text. May have checkboxes and radio buttons.\n\t\t<p>\n\t\t\t<NcActions aria-label=\"Email menu\" type=\"tertiary\">\n\t\t\t\t<NcActionButtonGroup>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<StarOutline :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tFavorite\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<EmailUnread :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tUnread\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Bookmark :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tImportant\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</NcActionButtonGroup>\n\t\t\t\t<NcActionText>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<ClockOutlineIcon :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t{{ new Date().toLocaleDateString('en-US') }}\n\t\t\t\t</NcActionText>\n\t\t\t\t<NcActionSeparator />\n\t\t\t\t<NcActionButton>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<AlertOctagonIcon :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tMark as spam\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionCheckbox :checked.sync=\"selected\">\n\t\t\t\t\tSelect\n\t\t\t\t</NcActionCheckbox>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<OpenInNewIcon :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tMove thread\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionLink href=\"#\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<DownloadIcon :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tDownload message\n\t\t\t\t</NcActionLink>\n\t\t\t</NcActions>\n\t\t</p>\n\n\t\t<h2>Menu in menubar</h2>\n\t\tSame as application menu. Separator can be used to make groups of radio buttons as well.\n\t\t<p>\n\t\t\t<NcActions aria-label=\"Text settings\" type=\"tertiary\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatTitle :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<NcActionButtonGroup name=\"Allignment\">\n\t\t\t\t\t<NcActionButton aria-label=\"Left\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<FormatAlignLeft :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton aria-label=\"Center\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<FormatAlignCenter :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton aria-label=\"Right\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<FormatAlignRight :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</NcActionButtonGroup>\n\t\t\t\t<NcActionSeparator />\n\t\t\t\t<NcActionCheckbox :checked.sync=\"checked.bold\" value=\"bold\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<FormatBold :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tBold\n\t\t\t\t</NcActionCheckbox>\n\t\t\t\t<NcActionCheckbox :checked.sync=\"checked.italic\" value=\"italic\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<FormatItalic :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tItalic\n\t\t\t\t</NcActionCheckbox>\n\t\t\t\t<NcActionCheckbox :checked.sync=\"checked.underline\" value=\"underline\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<FormatUnderline :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tUnderline\n\t\t\t\t</NcActionCheckbox>\n\t\t\t\t<NcActionSeparator />\n\t\t\t\t<NcActionRadio name=\"color\" :checked.sync=\"color.black\" value=\"Black\">Black</NcActionRadio>\n\t\t\t\t<NcActionRadio name=\"color\" :checked.sync=\"color.blue\" value=\"Blue\">Blue</NcActionRadio>\n\t\t\t\t<NcActionRadio name=\"color\" :checked.sync=\"color.red\" value=\"Red\">Red</NcActionRadio>\n\t\t\t\t<NcActionRadio name=\"color\" :checked.sync=\"color.green\" value=\"Green\">Green</NcActionRadio>\n\t\t\t</NcActions>\n\t\t</p>\n\n\t\t<h2>Navigation</h2>\n\t\tUses links or router links. May use text elements, captions and separators.\n\t\t<p>\n\t\t\t<NcActions aria-label=\"Applications navigation\" :inline=\"2\" type=\"tertiary\">\n\t\t\t\t<NcActionLink href=\"/apps/dashboard\" icon=\"icon-category-dashboard-white\">\n\t\t\t\t\tDashboard\n\t\t\t\t</NcActionLink>\n\t\t\t\t<NcActionLink href=\"/apps/files\" icon=\"icon-files-white\">\n\t\t\t\t\tFiles\n\t\t\t\t</NcActionLink>\n\t\t\t\t<NcActionLink href=\"/apps/spreed\" icon=\"icon-talk-white\">\n\t\t\t\t\tTalk\n\t\t\t\t</NcActionLink>\n\t\t\t\t<NcActionLink href=\"/apps/contacts\" icon=\"icon-contacts-white\">\n\t\t\t\t\tContacts\n\t\t\t\t</NcActionLink>\n\t\t\t\t<NcActionLink href=\"/apps/spreed\" icon=\"icon-circles-white\">\n\t\t\t\t\tCircles\n\t\t\t\t</NcActionLink>\n\t\t\t</NcActions>\n\t\t</p>\n\n\t\t<h2>Popover</h2>\n\t\tHas any elements, including text input element, or no buttons.\n\t\t<p>\n\t\t\t<NcActions aria-label=\"Group management\">\n\t\t\t\t<NcActionInput trailing-button-label=\"Submit\" label=\"Rename group\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionInput>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tRemove group\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActions>\n\t\t</p>\n\t</div>\n</template>\n\n<script>\n// Common icons\nimport Pencil from 'vue-material-design-icons/Pencil'\nimport Delete from 'vue-material-design-icons/Delete'\n\n// Email icons\nimport StarOutline from 'vue-material-design-icons/StarOutline'\nimport EmailUnread from 'vue-material-design-icons/Email'\nimport Bookmark from 'vue-material-design-icons/Bookmark'\nimport ClockOutlineIcon from 'vue-material-design-icons/ClockOutline'\nimport AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon'\nimport CheckIcon from 'vue-material-design-icons/Check'\nimport OpenInNewIcon from 'vue-material-design-icons/OpenInNew'\nimport DownloadIcon from 'vue-material-design-icons/Download'\n\n// Formating icons\nimport FormatTitle from 'vue-material-design-icons/FormatTitle.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'\nimport FormatBold from 'vue-material-design-icons/FormatBold.vue'\nimport FormatItalic from 'vue-material-design-icons/FormatItalic.vue'\nimport FormatUnderline from 'vue-material-design-icons/FormatUnderline.vue'\n\nexport default {\n\tcomponents: {\n\t\t// Common icons\n\t\tPencil,\n\t\tDelete,\n\n\t\t// Email icons\n\t\tStarOutline,\n\t\tEmailUnread,\n\t\tBookmark,\n\t\tClockOutlineIcon,\n\t\tAlertOctagonIcon,\n\t\tCheckIcon,\n\t\tOpenInNewIcon,\n\t\tDownloadIcon,\n\n\t\t// Formating icons\n\t\tFormatTitle,\n\t\tFormatAlignLeft,\n\t\tFormatAlignCenter,\n\t\tFormatAlignRight,\n\t\tFormatBold,\n\t\tFormatItalic,\n\t\tFormatUnderline,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tselected: false,\n\t\t\t// Formating\n\t\t\tchecked: {\n\t\t\t\tbold: true,\n\t\t\t\titalic: false,\n\t\t\t\tunderline: false,\n\t\t\t},\n\t\t\tcolor: {\n\t\t\t\tblack: true,\n\t\t\t\tblue: false,\n\t\t\t\tred: false,\n\t\t\t\tgreen: false,\n\t\t\t},\n\t\t}\n\t},\n}\n</script>\n\n<style scoped>\np {\n\tmargin: 1rem 0;\n}\n</style>\n```\n\n</docs>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { t } from '../../l10n.js'\n\nimport Vue, { computed } from 'vue'\nimport DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\n\nconst focusableSelector = '.focusable'\n\n/**\n * The Actions component can be used to display one ore more actions.\n * If only a single action is provided, it will be rendered as an inline icon.\n * For more, a menu indicator will be shown and a popovermenu containing the\n * actions will be opened on click.\n *\n * @since 0.10.0\n */\nexport default {\n\tname: 'NcActions',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tDotsHorizontal,\n\t\tNcPopover,\n\t},\n\n\tprovide() {\n\t\treturn {\n\t\t\t/**\n\t\t\t * NcActions can be used as:\n\t\t\t * - Application menu (has menu role)\n\t\t\t * - Navigation (has no specific role, should be used an element with navigation role)\n\t\t\t * - Popover with plain text or text inputs (has no specific role)\n\t\t\t * Depending on the usage (used items), the menu and its items should have different roles for a11y.\n\t\t\t * Provide the role for NcAction* components in the NcActions content.\n\t\t\t * @type {import('vue').ComputedRef<boolean>}\n\t\t\t */\n\t\t\t'NcActions:isSemanticMenu': computed(() => this.isSemanticMenu),\n\t\t}\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Specify the open state of the popover menu\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * This disables the internal open management,\n\t\t * so the actions menu only respects the `open` prop.\n\t\t * This is e.g. necessary for the NcAvatar component\n\t\t * to only open the actions menu after loading it's entries has finished.\n\t\t */\n\t\tmanualOpen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the actions to display in a three dot menu\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the name to show for single actions\n\t\t */\n\t\tforceName: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Specify the menu name\n\t\t */\n\t\tmenuName: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Apply primary styling for this menu\n\t\t */\n\t\tprimary: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Specifies the button type used for trigger and single actions buttons\n\t\t * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success. If left empty,\n\t\t * the default button style will be applied.\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].indexOf(value) !== -1\n\t\t\t},\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Icon to show for the toggle menu button\n\t\t * when more than one action is inside the actions component.\n\t\t * Only replace the default three-dot icon if really necessary.\n\t\t */\n\t\tdefaultIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Aria label for the actions menu.\n\t\t *\n\t\t * If `menuName` is defined this will not be used to prevent\n\t\t * any accessible name conflicts. This ensures that the\n\t\t * element can be activated via voice input.\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Actions'),\n\t\t},\n\n\t\t/**\n\t\t * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.\n\t\t * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,\n\t\t * otherwise root element will inherit incorrect aria-hidden.\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Wanted direction of the menu\n\t\t */\n\t\tplacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\t/**\n\t\t * DOM element for the actions' popover boundaries\n\t\t */\n\t\tboundariesElement: {\n\t\t\ttype: Element,\n\t\t\tdefault: () => document.querySelector('body'),\n\t\t},\n\n\t\t/**\n\t\t * Selector for the actions' popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Disabled state of the main button (single action or menu toggle)\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 * Display x items inline out of the dropdown menu\n\t\t * Will be ignored if `forceMenu` is set\n\t\t */\n\t\tinline: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\t},\n\n\temits: [\n\t\t'open',\n\t\t'update:open',\n\t\t'close',\n\t\t'focus',\n\t\t'blur',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\topened: this.open,\n\t\t\tfocusIndex: 0,\n\t\t\trandomId: `menu-${GenRandomId()}`,\n\t\t\tisSemanticMenu: false,\n\t\t\tisSemanticNavigation: false,\n\t\t\tisSemanticPopoverLike: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\ttriggerBtnType() {\n\t\t\t// If requested, we use a primary button\n\t\t\treturn this.type || (this.primary\n\t\t\t\t? 'primary'\n\t\t\t\t// If it has a name, we use a secondary button\n\t\t\t\t: this.menuName ? 'secondary' : 'tertiary')\n\t\t},\n\t},\n\n\twatch: {\n\t\t// Watch parent prop\n\t\topen(state) {\n\t\t\tif (state === this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.opened = state\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Do we have exactly one Action and\n\t\t * is it allowed as a standalone element?\n\t\t *\n\t\t * @param {Array} action The action to check\n\t\t * @return {boolean}\n\t\t */\n\t\tisValidSingleAction(action) {\n\t\t\tconst componentName = action?.componentOptions?.Ctor?.extendOptions?.name ?? action?.componentOptions?.tag\n\t\t\treturn ['NcActionButton', 'NcActionLink', 'NcActionRouter'].includes(componentName)\n\t\t},\n\n\t\t// MENU STATE MANAGEMENT\n\t\topenMenu(e) {\n\t\t\tif (this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.opened = true\n\n\t\t\t/**\n\t\t\t * Event emitted when the popover menu open state is changed\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:open', true)\n\n\t\t\t/**\n\t\t\t * Event emitted when the popover menu is opened\n\t\t\t */\n\t\t\tthis.$emit('open')\n\t\t},\n\t\tcloseMenu(returnFocus = true) {\n\t\t\tif (!this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.opened = false\n\n\t\t\tthis.$refs.popover.clearFocusTrap({ returnFocus })\n\n\t\t\t/**\n\t\t\t * Event emitted when the popover menu open state is changed\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:open', false)\n\n\t\t\t/**\n\t\t\t * Event emitted when the popover menu is closed\n\t\t\t */\n\t\t\tthis.$emit('close')\n\n\t\t\t// close everything\n\t\t\tthis.focusIndex = 0\n\n\t\t\t// focus back the menu button\n\t\t\tthis.$refs.menuButton.$el.focus()\n\t\t},\n\n\t\tonOpen(event) {\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.focusFirstAction(event)\n\t\t\t})\n\t\t},\n\n\t\t// MENU KEYS & FOCUS MANAGEMENT\n\t\t// focus nearest focusable item on mouse move\n\t\t// DO NOT change the focus if the target is already focused\n\t\t// this will prevent issues with input being unfocused\n\t\t// on mouse move\n\t\tonMouseFocusAction(event) {\n\t\t\tif (document.activeElement === event.target) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst menuItem = event.target.closest('li')\n\t\t\tif (menuItem && this.$refs.menu.contains(menuItem)) {\n\t\t\t\tconst focusableItem = menuItem.querySelector(focusableSelector)\n\t\t\t\tif (focusableItem) {\n\t\t\t\t\tconst focusList = this.$refs.menu.querySelectorAll(focusableSelector)\n\t\t\t\t\tconst focusIndex = [...focusList].indexOf(focusableItem)\n\t\t\t\t\tif (focusIndex > -1) {\n\t\t\t\t\t\tthis.focusIndex = focusIndex\n\t\t\t\t\t\tthis.focusAction()\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Dispatches the keydown listener to different handlers\n\t\t *\n\t\t * @param {object} event The keydown event\n\t\t */\n\t\tonKeydown(event) {\n\t\t\tif (event.key === 'Tab' && !this.isSemanticPopoverLike) {\n\t\t\t\tthis.closeMenu(false)\n\t\t\t}\n\n\t\t\tif (event.key === 'ArrowUp') {\n\t\t\t\tthis.focusPreviousAction(event)\n\t\t\t}\n\n\t\t\tif (event.key === 'ArrowDown') {\n\t\t\t\tthis.focusNextAction(event)\n\t\t\t}\n\n\t\t\tif (event.key === 'PageUp') {\n\t\t\t\tthis.focusFirstAction(event)\n\t\t\t}\n\n\t\t\tif (event.key === 'PageDown') {\n\t\t\t\tthis.focusLastAction(event)\n\t\t\t}\n\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tthis.closeMenu()\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\t\tremoveCurrentActive() {\n\t\t\tconst currentActiveElement = this.$refs.menu.querySelector('li.active')\n\t\t\tif (currentActiveElement) {\n\t\t\t\tcurrentActiveElement.classList.remove('active')\n\t\t\t}\n\t\t},\n\t\tfocusAction() {\n\t\t\t// TODO: have a global disabled state for non input elements\n\t\t\tconst focusElement = this.$refs.menu.querySelectorAll(focusableSelector)[this.focusIndex]\n\t\t\tif (focusElement) {\n\t\t\t\tthis.removeCurrentActive()\n\t\t\t\tconst liMenuParent = focusElement.closest('li.action')\n\t\t\t\tfocusElement.focus()\n\t\t\t\tif (liMenuParent) {\n\t\t\t\t\tliMenuParent.classList.add('active')\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tfocusPreviousAction(event) {\n\t\t\tif (this.opened) {\n\t\t\t\tif (this.focusIndex === 0) {\n\t\t\t\t\tthis.focusLastAction(event)\n\t\t\t\t} else {\n\t\t\t\t\tthis.preventIfEvent(event)\n\t\t\t\t\tthis.focusIndex = this.focusIndex - 1\n\t\t\t\t}\n\t\t\t\tthis.focusAction()\n\t\t\t}\n\t\t},\n\t\tfocusNextAction(event) {\n\t\t\tif (this.opened) {\n\t\t\t\tconst indexLength = this.$refs.menu.querySelectorAll(focusableSelector).length - 1\n\t\t\t\tif (this.focusIndex === indexLength) {\n\t\t\t\t\tthis.focusFirstAction(event)\n\t\t\t\t} else {\n\t\t\t\t\tthis.preventIfEvent(event)\n\t\t\t\t\tthis.focusIndex = this.focusIndex + 1\n\t\t\t\t}\n\t\t\t\tthis.focusAction()\n\t\t\t}\n\t\t},\n\t\tfocusFirstAction(event) {\n\t\t\tif (this.opened) {\n\t\t\t\tthis.preventIfEvent(event)\n\t\t\t\t// In case a button is considered aria-selected we will use this one as a initial focus\n\t\t\t\tconst firstSelectedIndex = [...this.$refs.menu.querySelectorAll(focusableSelector)].findIndex((button) => {\n\t\t\t\t\treturn button.parentElement.getAttribute('aria-selected')\n\t\t\t\t})\n\t\t\t\tthis.focusIndex = firstSelectedIndex > -1 ? firstSelectedIndex : 0\n\t\t\t\tthis.focusAction()\n\t\t\t}\n\t\t},\n\t\tfocusLastAction(event) {\n\t\t\tif (this.opened) {\n\t\t\t\tthis.preventIfEvent(event)\n\t\t\t\tthis.focusIndex = this.$refs.menu.querySelectorAll(focusableSelector).length - 1\n\t\t\t\tthis.focusAction()\n\t\t\t}\n\t\t},\n\t\tpreventIfEvent(event) {\n\t\t\tif (event) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\tevent.stopPropagation()\n\t\t\t}\n\t\t},\n\t\tonFocus(event) {\n\t\t\tthis.$emit('focus', event)\n\t\t},\n\t\tonBlur(event) {\n\t\t\tthis.$emit('blur', event)\n\t\t},\n\t},\n\n\t/**\n\t * The render function to display the component\n\t *\n\t * @param {Function} h The function to create VNodes\n\t * @return {object|undefined} The created VNode\n\t */\n\trender(h) {\n\t\t/**\n\t\t * Filter the Actions, so that we only get allowed components.\n\t\t * This also ensure that we don't get 'text' elements, which would\n\t\t * become problematic later on.\n\t\t */\n\t\tconst actions = (this.$slots.default || []).filter(\n\t\t\taction => action?.componentOptions?.tag || action?.componentOptions?.Ctor?.extendOptions?.name,\n\t\t)\n\n\t\tconst getActionName = (action) => action?.componentOptions?.Ctor?.extendOptions?.name ?? action?.componentOptions?.tag\n\n\t\tconst menuItemsActions = ['NcActionButton', 'NcActionButtonGroup', 'NcActionCheckbox', 'NcActionRadio']\n\t\tconst textInputActions = ['NcActionInput', 'NcActionTextEditable']\n\t\tconst linkActions = ['NcActionLink', 'NcActionRouter']\n\n\t\tconst hasTextInputAction = actions.some(action => textInputActions.includes(getActionName(action)))\n\t\tconst hasMenuItemAction = actions.some(action => menuItemsActions.includes(getActionName(action)))\n\t\tconst hasLinkAction = actions.some(action => linkActions.includes(getActionName(action)))\n\n\t\t// We consider the NcActions to have role=\"menu\" if it consists some button-like action and not text inputs\n\t\tthis.isSemanticMenu = hasMenuItemAction && !hasTextInputAction\n\t\t// We consider the NcActions to be navigation if it consists some link-like action\n\t\tthis.isSemanticNavigation = hasLinkAction && !hasMenuItemAction && !hasTextInputAction\n\t\t// If it is no a manu and not a navigation, it is a popover with items: a form or just a text\n\t\tthis.isSemanticPopoverLike = !this.isSemanticMenu && !this.isSemanticNavigation\n\n\t\t/**\n\t\t * Filter and list actions that are allowed to be displayed inline\n\t\t */\n\t\tlet inlineActions = actions.filter(this.isValidSingleAction)\n\t\tif (this.forceMenu && inlineActions.length > 0 && this.inline > 0) {\n\t\t\tVue.util.warn('Specifying forceMenu will ignore any inline actions rendering.')\n\t\t\tinlineActions = []\n\t\t}\n\n\t\t// Check that we have at least one action\n\t\tif (actions.length === 0) {\n\t\t\treturn\n\t\t}\n\n\t\t/**\n\t\t * Render the provided action\n\t\t *\n\t\t * @param {import('vue').VNode} action the action to render\n\t\t * @return {Function} the vue render function\n\t\t */\n\t\tconst renderInlineAction = (action) => {\n\t\t\tconst icon = action?.data?.scopedSlots?.icon()?.[0]\n\t\t\t\t|| h('span', { class: ['icon', action?.componentOptions?.propsData?.icon] })\n\t\t\tconst attrs = action?.data?.attrs || {}\n\t\t\tconst clickListener = action?.componentOptions?.listeners?.click\n\n\t\t\tconst text = action?.componentOptions?.children?.[0]?.text?.trim?.()\n\t\t\tconst ariaLabel = action?.componentOptions?.propsData?.ariaLabel || text\n\t\t\tconst buttonText = this.forceName ? text : ''\n\n\t\t\tlet title = action?.componentOptions?.propsData?.title\n\t\t\t// Show a default title for single actions if none is present\n\t\t\tif (!(this.forceName || title)) {\n\t\t\t\ttitle = text\n\t\t\t}\n\n\t\t\treturn h('NcButton',\n\t\t\t\t{\n\t\t\t\t\tclass: [\n\t\t\t\t\t\t'action-item action-item--single',\n\t\t\t\t\t\taction?.data?.staticClass,\n\t\t\t\t\t\taction?.data?.class,\n\t\t\t\t\t],\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\t...attrs,\n\t\t\t\t\t\t'aria-label': ariaLabel,\n\t\t\t\t\t\ttitle,\n\t\t\t\t\t},\n\t\t\t\t\tref: action?.data?.ref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t// If it has a menuName, we use a secondary button\n\t\t\t\t\t\ttype: this.type || (buttonText ? 'secondary' : 'tertiary'),\n\t\t\t\t\t\tdisabled: this.disabled || action?.componentOptions?.propsData?.disabled,\n\t\t\t\t\t\t...action?.componentOptions?.propsData,\n\t\t\t\t\t},\n\t\t\t\t\ton: {\n\t\t\t\t\t\tfocus: this.onFocus,\n\t\t\t\t\t\tblur: this.onBlur,\n\t\t\t\t\t\t// If we have a click listener,\n\t\t\t\t\t\t// we bind it to execute on click and forward the click event\n\t\t\t\t\t\t...(!!clickListener && {\n\t\t\t\t\t\t\tclick: (event) => {\n\t\t\t\t\t\t\t\tif (clickListener) {\n\t\t\t\t\t\t\t\t\tclickListener(event)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}),\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t[\n\t\t\t\t\th('template', { slot: 'icon' }, [icon]),\n\t\t\t\t\tbuttonText,\n\t\t\t\t],\n\t\t\t)\n\t\t}\n\n\t\t/**\n\t\t * Render the actions popover\n\t\t *\n\t\t * @param {Array} actions the actions to render within\n\t\t * @return {Function} the vue render function\n\t\t */\n\t\tconst renderActionsPopover = (actions) => {\n\t\t\tconst triggerIcon = this.$slots.icon?.[0] || (\n\t\t\t\tthis.defaultIcon\n\t\t\t\t\t? h('span', { class: ['icon', this.defaultIcon] })\n\t\t\t\t\t: h('DotsHorizontal', {\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tsize: 20,\n\t\t\t\t\t\t},\n\t\t\t\t\t})\n\t\t\t)\n\t\t\treturn h('NcPopover',\n\t\t\t\t{\n\t\t\t\t\tref: 'popover',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdelay: 0,\n\t\t\t\t\t\thandleResize: true,\n\t\t\t\t\t\tshown: this.opened,\n\t\t\t\t\t\tplacement: this.placement,\n\t\t\t\t\t\tboundary: this.boundariesElement,\n\t\t\t\t\t\tcontainer: this.container,\n\t\t\t\t\t\tpopoverBaseClass: 'action-item__popper',\n\t\t\t\t\t\t// Menu and navigation should not have focus trap\n\t\t\t\t\t\t// Tab should close the menu and move focus to the next UI element\n\t\t\t\t\t\tsetReturnFocus: !this.isSemanticPopoverLike ? null : this.$refs.menuButton?.$el,\n\t\t\t\t\t\tfocusTrap: this.isSemanticPopoverLike,\n\t\t\t\t\t},\n\t\t\t\t\t// For some reason the popover component\n\t\t\t\t\t// does not react to props given under the 'props' key,\n\t\t\t\t\t// so we use both 'attrs' and 'props'\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\tdelay: 0,\n\t\t\t\t\t\thandleResize: true,\n\t\t\t\t\t\tshown: this.opened,\n\t\t\t\t\t\tplacement: this.placement,\n\t\t\t\t\t\tboundary: this.boundariesElement,\n\t\t\t\t\t\tcontainer: this.container,\n\t\t\t\t\t\t...this.manualOpen && { triggers: [] },\n\t\t\t\t\t},\n\t\t\t\t\ton: {\n\t\t\t\t\t\tshow: this.openMenu,\n\t\t\t\t\t\t'after-show': this.onOpen,\n\t\t\t\t\t\thide: this.closeMenu,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t[\n\t\t\t\t\th('NcButton', {\n\t\t\t\t\t\tclass: 'action-item__menutoggle',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\ttype: this.triggerBtnType,\n\t\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tslot: 'trigger',\n\t\t\t\t\t\tref: 'menuButton',\n\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t'aria-haspopup': this.isSemanticMenu ? 'menu' : null,\n\t\t\t\t\t\t\t'aria-label': this.menuName ? null : this.ariaLabel,\n\t\t\t\t\t\t\t'aria-controls': this.opened ? this.randomId : null,\n\t\t\t\t\t\t\t// Do not add aria-expanded=\"true\" when it is closed\n\t\t\t\t\t\t\t'aria-expanded': this.opened ? 'true' : undefined,\n\t\t\t\t\t\t},\n\t\t\t\t\t\ton: {\n\t\t\t\t\t\t\tfocus: this.onFocus,\n\t\t\t\t\t\t\tblur: this.onBlur,\n\t\t\t\t\t\t},\n\t\t\t\t\t}, [\n\t\t\t\t\t\th('template', { slot: 'icon' }, [triggerIcon]),\n\t\t\t\t\t\tthis.menuName,\n\t\t\t\t\t]),\n\t\t\t\t\th('div', {\n\t\t\t\t\t\tclass: {\n\t\t\t\t\t\t\topen: this.opened,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\ttabindex: '-1',\n\t\t\t\t\t\t},\n\t\t\t\t\t\ton: {\n\t\t\t\t\t\t\tkeydown: this.onKeydown,\n\t\t\t\t\t\t\tmousemove: this.onMouseFocusAction,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tref: 'menu',\n\t\t\t\t\t}, [\n\t\t\t\t\t\th('ul', {\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tid: this.randomId,\n\t\t\t\t\t\t\t\ttabindex: '-1',\n\t\t\t\t\t\t\t\trole: this.isSemanticMenu ? 'menu' : undefined,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}, [\n\t\t\t\t\t\t\tactions,\n\t\t\t\t\t\t]),\n\t\t\t\t\t]),\n\t\t\t\t],\n\t\t\t)\n\t\t}\n\n\t\t/**\n\t\t * If we have a single action only and didn't force a menu,\n\t\t * we render the action as a standalone button\n\t\t */\n\t\tif (actions.length === 1 && inlineActions.length === 1 && !this.forceMenu) {\n\t\t\treturn renderInlineAction(inlineActions[0])\n\t\t}\n\n\t\t// If we completely re-render the children\n\t\t// we need to focus the first action again\n\t\t// Mostly used when clicking a menu item\n\t\tthis.$nextTick(() => {\n\t\t\tif (this.opened && this.$refs.menu) {\n\t\t\t\tconst isAnyActive = this.$refs.menu.querySelector('li.active') || []\n\t\t\t\tif (isAnyActive.length === 0) {\n\t\t\t\t\tthis.focusFirstAction()\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\n\t\t/**\n\t\t * If we some inline actions to render, render them, then the menu\n\t\t */\n\t\tif (inlineActions.length > 0 && this.inline > 0) {\n\t\t\tconst renderedInlineActions = inlineActions.slice(0, this.inline)\n\t\t\t// Filter already rendered actions\n\t\t\tconst menuActions = actions.filter(action => !renderedInlineActions.includes(action))\n\t\t\treturn h('div',\n\t\t\t\t{\n\t\t\t\t\tclass: [\n\t\t\t\t\t\t'action-items',\n\t\t\t\t\t\t`action-item--${this.triggerBtnType}`,\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t[\n\t\t\t\t\t// Render inline actions\n\t\t\t\t\t...renderedInlineActions.map(renderInlineAction),\n\t\t\t\t\t// render the rest within the popover menu\n\t\t\t\t\tmenuActions.length > 0\n\t\t\t\t\t\t? h('div',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tclass: [\n\t\t\t\t\t\t\t\t\t'action-item',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t'action-item--open': this.opened,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\trenderActionsPopover(menuActions),\n\t\t\t\t\t\t\t])\n\t\t\t\t\t\t: null,\n\t\t\t\t])\n\t\t}\n\n\t\t/**\n\t\t * Otherwise, we render the actions in a popover\n\t\t */\n\t\treturn h('div',\n\t\t\t{\n\t\t\t\tclass: [\n\t\t\t\t\t'action-item action-item--default-popover',\n\t\t\t\t\t`action-item--${this.triggerBtnType}`,\n\t\t\t\t\t{\n\t\t\t\t\t\t'action-item--open': this.opened,\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t},\n\t\t\t[\n\t\t\t\trenderActionsPopover(actions),\n\t\t\t],\n\t\t)\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// Inline buttons\n.action-items {\n\tdisplay: flex;\n\talign-items: center;\n\n\t// Spacing between buttons\n\t& > button {\n\t\tmargin-right: math.div($icon-margin, 2);\n\t}\n}\n\n.action-item {\n\t--open-background-color: var(--color-background-hover, $action-background-hover);\n\tposition: relative;\n\tdisplay: inline-block;\n\n\t&.action-item--primary {\n\t\t--open-background-color: var(--color-primary-element-hover);\n\t}\n\n\t&.action-item--secondary {\n\t\t--open-background-color: var(--color-primary-element-light-hover);\n\t}\n\n\t&.action-item--error {\n\t\t--open-background-color: var(--color-error-hover);\n\t}\n\n\t&.action-item--warning {\n\t\t--open-background-color: var(--color-warning-hover);\n\t}\n\n\t&.action-item--success {\n\t\t--open-background-color: var(--color-success-hover);\n\t}\n\n\t&.action-item--tertiary-no-background {\n\t\t--open-background-color: transparent;\n\t}\n\n\t&.action-item--open .action-item__menutoggle {\n\t\tbackground-color: var(--open-background-color);\n\t}\n}\n</style>\n\n<style lang=\"scss\">\n// We overwrote the popover base class, so we can style\n// the popover__inner for actions only.\n.v-popper--theme-dropdown.v-popper__popper.action-item__popper .v-popper__wrapper {\n\tborder-radius: var(--border-radius-large);\n\toverflow:hidden;\n\n\t.v-popper__inner {\n\t\tborder-radius: var(--border-radius-large);\n\t\tpadding: 4px;\n\t\tmax-height: calc(50vh - 16px);\n\t\toverflow: auto;\n\t}\n}\n</style>\n"],"names":["focusableSelector","_sfc_main","Components_NcButton","DotsHorizontal","Components_NcPopover","Vue","value","l10n","GenRandomId","state","action","componentName","_e","_c","_b","_a","_d","returnFocus","event","menuItem","focusableItem","focusIndex","currentActiveElement","focusElement","liMenuParent","indexLength","firstSelectedIndex","button","h","actions","getActionName","menuItemsActions","textInputActions","linkActions","hasTextInputAction","hasMenuItemAction","hasLinkAction","inlineActions","Vue__default","renderInlineAction","icon","attrs","_f","clickListener","_h","_g","text","_m","_l","_k","_j","_i","ariaLabel","_o","_n","buttonText","title","_q","_p","_r","_s","_t","_v","_u","_w","renderActionsPopover","triggerIcon","renderedInlineActions","menuActions"],"mappings":";;AAuyBA,MAAAA,IAAA,cAUAC,KAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAC,EAAA;AAAA,IACA,WAAAC;AAAA,EACA;AAAA,EAEA,UAAA;AACA,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUA,4BAAAC,EAAA,SAAA,MAAA,KAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAAC,GAAA;AACA,eAAA,CAAA,WAAA,aAAA,YAAA,0BAAA,uBAAA,SAAA,WAAA,SAAA,EAAA,QAAAA,CAAA,MAAA;AAAA,MACA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAC,EAAA,EAAA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,SAAA,cAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,SAAA,OAAA;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,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,QAAA,KAAA;AAAA,MACA,YAAA;AAAA,MACA,UAAA,QAAAC,EAAA,YAAA,CAAA;AAAA,MACA,gBAAA;AAAA,MACA,sBAAA;AAAA,MACA,uBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,iBAAA;AAEA,aAAA,KAAA,SAAA,KAAA,UACA,YAEA,KAAA,WAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA,IAEA,KAAAC,GAAA;AACA,MAAAA,MAAA,KAAA,WAIA,KAAA,SAAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,oBAAAC,GAAA;;AACA,YAAAC,KAAAC,KAAAC,KAAAC,KAAAC,IAAAL,KAAA,gBAAAA,EAAA,qBAAA,gBAAAK,EAAA,SAAA,gBAAAD,EAAA,kBAAA,gBAAAD,EAAA,SAAA,OAAAD,KAAAI,IAAAN,KAAA,gBAAAA,EAAA,qBAAA,gBAAAM,EAAA;AACA,aAAA,CAAA,kBAAA,gBAAA,gBAAA,EAAA,SAAAL,CAAA;AAAA,IACA;AAAA;AAAA,IAGA,SAAA,GAAA;AACA,MAAA,KAAA,WAIA,KAAA,SAAA,IAOA,KAAA,MAAA,eAAA,EAAA,GAKA,KAAA,MAAA,MAAA;AAAA,IACA;AAAA,IACA,UAAAM,IAAA,IAAA;AACA,MAAA,KAAA,WAIA,KAAA,SAAA,IAEA,KAAA,MAAA,QAAA,eAAA,EAAA,aAAAA,EAAA,CAAA,GAOA,KAAA,MAAA,eAAA,EAAA,GAKA,KAAA,MAAA,OAAA,GAGA,KAAA,aAAA,GAGA,KAAA,MAAA,WAAA,IAAA,MAAA;AAAA,IACA;AAAA,IAEA,OAAAC,GAAA;AACA,WAAA,UAAA,MAAA;AACA,aAAA,iBAAAA,CAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,mBAAAA,GAAA;AACA,UAAA,SAAA,kBAAAA,EAAA;AACA;AAGA,YAAAC,IAAAD,EAAA,OAAA,QAAA,IAAA;AACA,UAAAC,KAAA,KAAA,MAAA,KAAA,SAAAA,CAAA,GAAA;AACA,cAAAC,IAAAD,EAAA,cAAAnB,CAAA;AACA,YAAAoB,GAAA;AAEA,gBAAAC,IAAA,CAAA,GADA,KAAA,MAAA,KAAA,iBAAArB,CAAA,CACA,EAAA,QAAAoB,CAAA;AACA,UAAAC,IAAA,OACA,KAAA,aAAAA,GACA,KAAA,YAAA;AAAA,QAEA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAAH,GAAA;AACA,MAAAA,EAAA,QAAA,SAAA,CAAA,KAAA,yBACA,KAAA,UAAA,EAAA,GAGAA,EAAA,QAAA,aACA,KAAA,oBAAAA,CAAA,GAGAA,EAAA,QAAA,eACA,KAAA,gBAAAA,CAAA,GAGAA,EAAA,QAAA,YACA,KAAA,iBAAAA,CAAA,GAGAA,EAAA,QAAA,cACA,KAAA,gBAAAA,CAAA,GAGAA,EAAA,QAAA,aACA,KAAA,UAAA,GACAA,EAAA,eAAA;AAAA,IAEA;AAAA,IACA,sBAAA;AACA,YAAAI,IAAA,KAAA,MAAA,KAAA,cAAA,WAAA;AACA,MAAAA,KACAA,EAAA,UAAA,OAAA,QAAA;AAAA,IAEA;AAAA,IACA,cAAA;AAEA,YAAAC,IAAA,KAAA,MAAA,KAAA,iBAAAvB,CAAA,EAAA,KAAA,UAAA;AACA,UAAAuB,GAAA;AACA,aAAA,oBAAA;AACA,cAAAC,IAAAD,EAAA,QAAA,WAAA;AACA,QAAAA,EAAA,MAAA,GACAC,KACAA,EAAA,UAAA,IAAA,QAAA;AAAA,MAEA;AAAA,IACA;AAAA,IACA,oBAAAN,GAAA;AACA,MAAA,KAAA,WACA,KAAA,eAAA,IACA,KAAA,gBAAAA,CAAA,KAEA,KAAA,eAAAA,CAAA,GACA,KAAA,aAAA,KAAA,aAAA,IAEA,KAAA,YAAA;AAAA,IAEA;AAAA,IACA,gBAAAA,GAAA;AACA,UAAA,KAAA,QAAA;AACA,cAAAO,IAAA,KAAA,MAAA,KAAA,iBAAAzB,CAAA,EAAA,SAAA;AACA,QAAA,KAAA,eAAAyB,IACA,KAAA,iBAAAP,CAAA,KAEA,KAAA,eAAAA,CAAA,GACA,KAAA,aAAA,KAAA,aAAA,IAEA,KAAA,YAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,iBAAAA,GAAA;AACA,UAAA,KAAA,QAAA;AACA,aAAA,eAAAA,CAAA;AAEA,cAAAQ,IAAA,CAAA,GAAA,KAAA,MAAA,KAAA,iBAAA1B,CAAA,CAAA,EAAA,UAAA,CAAA2B,MACAA,EAAA,cAAA,aAAA,eAAA,CACA;AACA,aAAA,aAAAD,IAAA,KAAAA,IAAA,GACA,KAAA,YAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,gBAAAR,GAAA;AACA,MAAA,KAAA,WACA,KAAA,eAAAA,CAAA,GACA,KAAA,aAAA,KAAA,MAAA,KAAA,iBAAAlB,CAAA,EAAA,SAAA,GACA,KAAA,YAAA;AAAA,IAEA;AAAA,IACA,eAAAkB,GAAA;AACA,MAAAA,MACAA,EAAA,eAAA,GACAA,EAAA,gBAAA;AAAA,IAEA;AAAA,IACA,QAAAA,GAAA;AACA,WAAA,MAAA,SAAAA,CAAA;AAAA,IACA;AAAA,IACA,OAAAA,GAAA;AACA,WAAA,MAAA,QAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,OAAAU,GAAA;AAMA,UAAAC,KAAA,KAAA,OAAA,WAAA,CAAA,GAAA;AAAA,MACA,CAAAnB,MAAA;;AAAA,iBAAAK,IAAAL,KAAA,gBAAAA,EAAA,qBAAA,gBAAAK,EAAA,UAAAC,KAAAH,KAAAC,IAAAJ,KAAA,gBAAAA,EAAA,qBAAA,gBAAAI,EAAA,SAAA,gBAAAD,EAAA,kBAAA,gBAAAG,EAAA;AAAA;AAAA,IACA,GAEAc,IAAA,CAAApB,MAAA;;AAAA,cAAAE,KAAAC,KAAAC,KAAAC,IAAAL,KAAA,gBAAAA,EAAA,qBAAA,gBAAAK,EAAA,SAAA,gBAAAD,EAAA,kBAAA,gBAAAD,EAAA,SAAA,OAAAD,KAAAI,IAAAN,KAAA,gBAAAA,EAAA,qBAAA,gBAAAM,EAAA;AAAA,OAEAe,IAAA,CAAA,kBAAA,uBAAA,oBAAA,eAAA,GACAC,IAAA,CAAA,iBAAA,sBAAA,GACAC,IAAA,CAAA,gBAAA,gBAAA,GAEAC,IAAAL,EAAA,KAAA,CAAAnB,MAAAsB,EAAA,SAAAF,EAAApB,CAAA,CAAA,CAAA,GACAyB,IAAAN,EAAA,KAAA,CAAAnB,MAAAqB,EAAA,SAAAD,EAAApB,CAAA,CAAA,CAAA,GACA0B,IAAAP,EAAA,KAAA,CAAAnB,MAAAuB,EAAA,SAAAH,EAAApB,CAAA,CAAA,CAAA;AAGA,SAAA,iBAAAyB,KAAA,CAAAD,GAEA,KAAA,uBAAAE,KAAA,CAAAD,KAAA,CAAAD,GAEA,KAAA,wBAAA,CAAA,KAAA,kBAAA,CAAA,KAAA;AAKA,QAAAG,IAAAR,EAAA,OAAA,KAAA,mBAAA;AAOA,QANA,KAAA,aAAAQ,EAAA,SAAA,KAAA,KAAA,SAAA,MACAC,EAAA,QAAA,KAAA,KAAA,gEAAA,GACAD,IAAA,CAAA,IAIAR,EAAA,WAAA;AACA;AASA,UAAAU,IAAA,CAAA7B,MAAA;;AACA,YAAA8B,MAAA3B,KAAAC,KAAAC,IAAAL,KAAA,gBAAAA,EAAA,SAAA,gBAAAK,EAAA,gBAAA,gBAAAD,EAAA,WAAA,gBAAAD,EAAA,OACAe,EAAA,QAAA,EAAA,OAAA,CAAA,SAAAhB,KAAAI,IAAAN,KAAA,gBAAAA,EAAA,qBAAA,gBAAAM,EAAA,cAAA,gBAAAJ,EAAA,IAAA,EAAA,CAAA,GACA6B,MAAAC,IAAAhC,KAAA,gBAAAA,EAAA,SAAA,gBAAAgC,EAAA,UAAA,CAAA,GACAC,KAAAC,KAAAC,IAAAnC,KAAA,gBAAAA,EAAA,qBAAA,gBAAAmC,EAAA,cAAA,gBAAAD,EAAA,OAEAE,KAAAC,KAAAC,KAAAC,KAAAC,KAAAC,IAAAzC,KAAA,gBAAAA,EAAA,qBAAA,gBAAAyC,EAAA,aAAA,gBAAAD,EAAA,OAAA,gBAAAD,EAAA,SAAA,gBAAAD,EAAA,SAAA,gBAAAD,EAAA,KAAAC,IACAI,MAAAC,KAAAC,IAAA5C,KAAA,gBAAAA,EAAA,qBAAA,gBAAA4C,EAAA,cAAA,gBAAAD,EAAA,cAAAP,GACAS,IAAA,KAAA,YAAAT,IAAA;AAEA,UAAAU,KAAAC,KAAAC,IAAAhD,KAAA,gBAAAA,EAAA,qBAAA,gBAAAgD,EAAA,cAAA,gBAAAD,EAAA;AAEA,aAAA,KAAA,aAAAD,MACAA,IAAAV,IAGAlB;AAAA,QAAA;AAAA,QACA;AAAA,UACA,OAAA;AAAA,YACA;AAAA,aACA+B,IAAAjD,KAAA,gBAAAA,EAAA,SAAA,gBAAAiD,EAAA;AAAA,aACAC,IAAAlD,KAAA,gBAAAA,EAAA,SAAA,gBAAAkD,EAAA;AAAA,UACA;AAAA,UACA,OAAA;AAAA,YACA,GAAAnB;AAAA,YACA,cAAAW;AAAA,YACA,OAAAI;AAAA,UACA;AAAA,UACA,MAAAK,IAAAnD,KAAA,gBAAAA,EAAA,SAAA,gBAAAmD,EAAA;AAAA,UACA,OAAA;AAAA;AAAA,YAEA,MAAA,KAAA,SAAAN,IAAA,cAAA;AAAA,YACA,UAAA,KAAA,cAAAO,KAAAC,IAAArD,KAAA,gBAAAA,EAAA,qBAAA,gBAAAqD,EAAA,cAAA,gBAAAD,EAAA;AAAA,YACA,IAAAE,IAAAtD,KAAA,gBAAAA,EAAA,qBAAA,gBAAAsD,EAAA;AAAA,UACA;AAAA,UACA,IAAA;AAAA,YACA,OAAA,KAAA;AAAA,YACA,MAAA,KAAA;AAAA;AAAA;AAAA,YAGA,GAAA,CAAA,CAAArB,KAAA;AAAA,cACA,OAAA,CAAAzB,MAAA;AACA,gBAAAyB,KACAA,EAAAzB,CAAA;AAAA,cAEA;AAAA,YACA;AAAA,UACA;AAAA,QACA;AAAA,QACA;AAAA,UACAU,EAAA,YAAA,EAAA,MAAA,OAAA,GAAA,CAAAY,CAAA,CAAA;AAAA,UACAe;AAAA,QACA;AAAA,MACA;AAAA,IACA,GAQAU,IAAA,CAAApC,MAAA;;AACA,YAAAqC,MAAAnD,IAAA,KAAA,OAAA,SAAA,gBAAAA,EAAA,QACA,KAAA,cACAa,EAAA,QAAA,EAAA,OAAA,CAAA,QAAA,KAAA,WAAA,EAAA,CAAA,IACAA,EAAA,kBAAA;AAAA,QACA,OAAA;AAAA,UACA,MAAA;AAAA,QACA;AAAA,MACA,CAAA;AAEA,aAAAA;AAAA,QAAA;AAAA,QACA;AAAA,UACA,KAAA;AAAA,UACA,OAAA;AAAA,YACA,OAAA;AAAA,YACA,cAAA;AAAA,YACA,OAAA,KAAA;AAAA,YACA,WAAA,KAAA;AAAA,YACA,UAAA,KAAA;AAAA,YACA,WAAA,KAAA;AAAA,YACA,kBAAA;AAAA;AAAA;AAAA,YAGA,gBAAA,KAAA,yBAAAd,IAAA,KAAA,MAAA,eAAA,gBAAAA,EAAA,MAAA;AAAA,YACA,WAAA,KAAA;AAAA,UACA;AAAA;AAAA;AAAA;AAAA,UAIA,OAAA;AAAA,YACA,OAAA;AAAA,YACA,cAAA;AAAA,YACA,OAAA,KAAA;AAAA,YACA,WAAA,KAAA;AAAA,YACA,UAAA,KAAA;AAAA,YACA,WAAA,KAAA;AAAA,YACA,GAAA,KAAA,cAAA,EAAA,UAAA,CAAA,EAAA;AAAA,UACA;AAAA,UACA,IAAA;AAAA,YACA,MAAA,KAAA;AAAA,YACA,cAAA,KAAA;AAAA,YACA,MAAA,KAAA;AAAA,UACA;AAAA,QACA;AAAA,QACA;AAAA,UACAc,EAAA,YAAA;AAAA,YACA,OAAA;AAAA,YACA,OAAA;AAAA,cACA,MAAA,KAAA;AAAA,cACA,UAAA,KAAA;AAAA,YACA;AAAA,YACA,MAAA;AAAA,YACA,KAAA;AAAA,YACA,OAAA;AAAA,cACA,iBAAA,KAAA,iBAAA,SAAA;AAAA,cACA,cAAA,KAAA,WAAA,OAAA,KAAA;AAAA,cACA,iBAAA,KAAA,SAAA,KAAA,WAAA;AAAA;AAAA,cAEA,iBAAA,KAAA,SAAA,SAAA;AAAA,YACA;AAAA,YACA,IAAA;AAAA,cACA,OAAA,KAAA;AAAA,cACA,MAAA,KAAA;AAAA,YACA;AAAA,UACA,GAAA;AAAA,YACAA,EAAA,YAAA,EAAA,MAAA,OAAA,GAAA,CAAAsC,CAAA,CAAA;AAAA,YACA,KAAA;AAAA,UACA,CAAA;AAAA,UACAtC,EAAA,OAAA;AAAA,YACA,OAAA;AAAA,cACA,MAAA,KAAA;AAAA,YACA;AAAA,YACA,OAAA;AAAA,cACA,UAAA;AAAA,YACA;AAAA,YACA,IAAA;AAAA,cACA,SAAA,KAAA;AAAA,cACA,WAAA,KAAA;AAAA,YACA;AAAA,YACA,KAAA;AAAA,UACA,GAAA;AAAA,YACAA,EAAA,MAAA;AAAA,cACA,OAAA;AAAA,gBACA,IAAA,KAAA;AAAA,gBACA,UAAA;AAAA,gBACA,MAAA,KAAA,iBAAA,SAAA;AAAA,cACA;AAAA,YACA,GAAA;AAAA,cACAC;AAAA,YACA,CAAA;AAAA,UACA,CAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAMA,QAAAA,EAAA,WAAA,KAAAQ,EAAA,WAAA,KAAA,CAAA,KAAA;AACA,aAAAE,EAAAF,EAAA,CAAA,CAAA;AAkBA,QAZA,KAAA,UAAA,MAAA;AACA,MAAA,KAAA,UAAA,KAAA,MAAA,SACA,KAAA,MAAA,KAAA,cAAA,WAAA,KAAA,CAAA,GACA,WAAA,KACA,KAAA,iBAAA;AAAA,IAGA,CAAA,GAKAA,EAAA,SAAA,KAAA,KAAA,SAAA,GAAA;AACA,YAAA8B,IAAA9B,EAAA,MAAA,GAAA,KAAA,MAAA,GAEA+B,IAAAvC,EAAA,OAAA,CAAAnB,MAAA,CAAAyD,EAAA,SAAAzD,CAAA,CAAA;AACA,aAAAkB;AAAA,QAAA;AAAA,QACA;AAAA,UACA,OAAA;AAAA,YACA;AAAA,YACA,gBAAA,KAAA,cAAA;AAAA,UACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,UAEA,GAAAuC,EAAA,IAAA5B,CAAA;AAAA;AAAA,UAEA6B,EAAA,SAAA,IACAxC;AAAA,YAAA;AAAA,YACA;AAAA,cACA,OAAA;AAAA,gBACA;AAAA,gBACA;AAAA,kBACA,qBAAA,KAAA;AAAA,gBACA;AAAA,cACA;AAAA,YACA;AAAA,YACA;AAAA,cACAqC,EAAAG,CAAA;AAAA,YACA;AAAA,UAAA,IACA;AAAA,QACA;AAAA,MAAA;AAAA,IACA;AAKA,WAAAxC;AAAA,MAAA;AAAA,MACA;AAAA,QACA,OAAA;AAAA,UACA;AAAA,UACA,gBAAA,KAAA,cAAA;AAAA,UACA;AAAA,YACA,qBAAA,KAAA;AAAA,UACA;AAAA,QACA;AAAA,MACA;AAAA,MACA;AAAA,QACAqC,EAAApC,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;"}