@nextcloud/vue 8.0.0-beta.7 → 8.0.0-beta.9

package/dist/Components/NcActionTextEditable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcActionTextEditable.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"NcActionTextEditable.cjs","sources":["../../src/components/NcActionTextEditable/NcActionTextEditable.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 [Actions](#Actions) component slots.\nAll undocumented attributes will be bound to the textarea. e.g. `maxlength`\n\n```\n<template>\n\t<NcActions>\n\t\t<NcActionTextEditable value=\"This is a textarea\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t\t<NcActionTextEditable :disabled=\"true\" value=\"This is a disabled textarea\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t\t<NcActionTextEditable name=\"Please edit the text\" value=\"This is a textarea with name\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t</NcActions>\n</template>\n<script>\nimport Pencil from 'vue-material-design-icons/Pencil'\n\nexport default {\n\tcomponents: {\n\t\tPencil,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\">\n\t\t<span class=\"action-text-editable\"\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-text-editable__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\tclass=\"action-text-editable__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- form and input -->\n\t\t\t<form ref=\"form\"\n\t\t\t\tclass=\"action-text-editable__form\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@submit.prevent=\"onSubmit\">\n\t\t\t\t<input :id=\"id\" type=\"submit\" class=\"action-text-editable__submit\">\n\n\t\t\t\t<!-- name -->\n\t\t\t\t<label v-if=\"name\"\n\t\t\t\t\tclass=\"action-text-editable__name\"\n\t\t\t\t\t:for=\"computedId\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</label>\n\n\t\t\t\t<textarea :id=\"computedId\"\n\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t:value=\"value\"\n\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t:class=\"['action-text-editable__textarea', { focusable: isFocusable }]\"\n\t\t\t\t\t@input=\"onInput\" />\n\n\t\t\t\t<!-- allow the custom font to inject a ::before\n\t\t\t\t\tnot possible on input[type=submit] -->\n\t\t\t\t<label v-show=\"!disabled\" :for=\"id\" class=\"action-text-editable__label\">\n\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t</label>\n\t\t\t</form>\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\n\nexport default {\n\tname: 'NcActionTextEditable',\n\n\tcomponents: {\n\t\tArrowRight,\n\t},\n\n\tmixins: [ActionTextMixin],\n\n\tprops: {\n\t\t/**\n\t\t * id attribute of the checkbox element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\t\t/**\n\t\t * disabled state of the text area\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * value attribute of the input field\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'update:value',\n\t\t'submit',\n\t],\n\n\tcomputed: {\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\n\t\tcomputedId() {\n\t\t\treturn GenRandomId()\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonInput(event) {\n\t\t\t/**\n\t\t\t * Emitted on input events of the text field\n\t\t\t *\n\t\t\t * @type {Event|Date}\n\t\t\t */\n\t\t\tthis.$emit('input', event)\n\t\t\t/**\n\t\t\t * Emitted when the inputs value changes\n\t\t\t *\n\t\t\t * @type {string|Date}\n\t\t\t */\n\t\t\tthis.$emit('update:value', event.target.value)\n\t\t},\n\t\tonSubmit(event) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tif (!this.disabled) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on submit of the input field\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('submit', event)\n\t\t\t} else {\n\t\t\t\t// ignore submit\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/inputs';\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n\n$input-margin: 4px;\n\n.action-text-editable {\n\tdisplay: flex;\n\talign-items: flex-start;\n\n\twidth: 100%;\n\theight: auto;\n\tmargin: 0;\n\tpadding: 0;\n\n\tcursor: pointer;\n\twhite-space: nowrap;\n\n\tcolor: var(--color-main-text);\n\tborder: 0;\n\tborder-radius: 0; // otherwise Safari will cut the border-radius area\n\tbackground-color: transparent;\n\tbox-shadow: none;\n\n\tfont-weight: normal;\n\tline-height: $clickable-area;\n\n\t& > span {\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t}\n\n\t&__icon {\n\t\tmin-width: 0; /* Overwrite icons*/\n\t\tmin-height: 0;\n\t\t/* Keep padding to define the width to\n\t\t\tassure correct position of a possible text */\n\t\tpadding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area;\n\n\t\tbackground-position: #{$icon-margin} center;\n\t\tbackground-size: $icon-size;\n\t}\n\n\t&:deep(.material-design-icon) {\n\t\twidth: $clickable-area;\n\t\theight: $clickable-area;\n\t\topacity: $opacity_full;\n\n\t\t.material-design-icon__svg {\n\t\t\tvertical-align: middle;\n\t\t}\n\t}\n\n\t// Forms & text inputs\n\t&__form {\n\t\tdisplay: flex;\n\t\tflex: 1 1 auto;\n\t\tflex-direction: column;\n\n\t\tposition: relative;\n\t\tmargin: $input-margin 0;\n\t\tpadding-right: $icon-margin;\n\t}\n\n\t&__submit {\n\t\tposition: absolute;\n\t\tleft: -10000px;\n\t\ttop: auto;\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\toverflow: hidden;\n\t}\n\n\t&__label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t// bottom-right corner\n\t\tposition: absolute;\n\t\tright: $icon-margin + 1;\n\t\tbottom: 1px;\n\t\twidth: #{$clickable-area - $input-margin * 2};\n\t\theight: #{$clickable-area - $input-margin * 2};\n\t\tbox-sizing: border-box;\n\t\tmargin: 0;\n\t\tpadding: 7px 6px;\n\n\t\tborder: 0;\n\t\tborder-radius: 50%;\n\t\t/* Avoid background under border */\n\t\tbackground-color: var(--color-main-background);\n\t\tbackground-clip: padding-box;\n\n\t\t&, * {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t/* Inputs inside popover supports text, submit & reset */\n\t&__textarea {\n\t\tflex: 1 1 auto;\n\t\tcolor: inherit;\n\t\tborder-color: var(--color-border-maxcontrast);\n\n\t\tmin-height: #{$clickable-area * 2 - $input-margin * 2}; /* twice the element margin-y */\n\t\tmax-height: #{$clickable-area * 3 - $input-margin * 2}; /* twice the element margin-y */\n\t\t// block width widening\n\t\tmin-width: $clickable-area * 4;\n\t\twidth: 100% !important;\n\t\tmargin: 0;\n\n\t\t// if disabled, change cursor\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t/* only show confirm borders if input is not focused */\n\t\t&:not(:active):not(:hover):not(:focus) {\n\t\t\t&:invalid {\n\t\t\t\t& + .action-text-editable__label {\n\t\t\t\t\tbackground-color: var(--color-error);\n\t\t\t\t}\n\t\t\t}\n\t\t\t&:not(:disabled) + .action-text-editable__label {\n\t\t\t\t&:active,\n\t\t\t\t&:hover,\n\t\t\t\t&:focus {\n\t\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\t\tcolor: var(--color-primary-element-text);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t&:active,\n\t\t&:hover,\n\t\t&:focus {\n\t\t\t&:not(:disabled) + .action-text-editable__label {\n\t\t\t\t/* above previous input */\n\t\t\t\tz-index: 2;\n\n\t\t\t\tborder-color: var(--color-primary-element);\n\t\t\t\tborder-left-color: transparent;\n\t\t\t}\n\t\t}\n\t}\n}\n\n// if a form is the last of the list\n// add the same bottomMargin as the right padding\n// for visual balance\nli:last-child > .action-text-editable {\n\tmargin-bottom: $icon-margin - $input-margin;\n}\n\n// same for first item\nli:first-child > .action-text-editable {\n\tmargin-top: $icon-margin - $input-margin;\n}\n</style>\n"],"names":["_sfc_main","ArrowRight__default","actionText","GenRandomId","id","event"],"mappings":";;AA2GA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,YAAAC,EAAA;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,EAAA,eAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,YAAAC,EAAA,YAAA;AAAA,MACA,WAAA,CAAAC,MAAAA,EAAA,KAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AACA,aAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAAD,EAAA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,QAAAE,GAAA;AAMA,WAAA,MAAA,SAAAA,CAAA,GAMA,KAAA,MAAA,gBAAAA,EAAA,OAAA,KAAA;AAAA,IACA;AAAA,IACA,SAAAA,GAAA;AAGA,UAFAA,EAAA,eAAA,GACAA,EAAA,gBAAA,GACA,CAAA,KAAA;AAMA,aAAA,MAAA,UAAAA,CAAA;AAAA;AAGA,eAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcActionTextEditable.mjs

@@ -1,29 +1,86 @@
-import "../assets/index-ecdb616f.css";
-import { A as s } from "../chunks/actionText-6c35d3fc.mjs";
-import { G as e } from "../chunks/GenRandomId-1e1b509a.mjs";
+import "../assets/index-93ad846c.css";
+import { A as n } from "../chunks/actionText-a64be267.mjs";
+import { G as i } from "../chunks/GenRandomId-cb9ccebe.mjs";
 import l from "vue-material-design-icons/ArrowRight.vue";
-import { n as o } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-const n = { name: "NcActionTextEditable", components: { ArrowRight: l }, mixins: [s], props: { id: { type: String, default: () => "action-" + e(), validator: (t) => t.trim() !== "" }, disabled: { type: Boolean, default: !1 }, value: { type: String, default: "" } }, emits: ["input", "update:value", "submit"], computed: { isFocusable() {
-  return !this.disabled;
-}, computedId() {
-  return e();
-} }, methods: { onInput(t) {
-  this.$emit("input", t), this.$emit("update:value", t.target.value);
-}, onSubmit(t) {
-  if (t.preventDefault(), t.stopPropagation(), !this.disabled)
-    this.$emit("submit", t);
-  else
-    return !1;
-} } };
-var r = function() {
+import { n as o } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const r = {
+  name: "NcActionTextEditable",
+  components: {
+    ArrowRight: l
+  },
+  mixins: [n],
+  props: {
+    /**
+     * id attribute of the checkbox element
+     */
+    id: {
+      type: String,
+      default: () => "action-" + i(),
+      validator: (e) => e.trim() !== ""
+    },
+    /**
+     * disabled state of the text area
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * value attribute of the input field
+     */
+    value: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: [
+    "input",
+    "update:value",
+    "submit"
+  ],
+  computed: {
+    /**
+     * determines if the action is focusable
+     *
+     * @return {boolean} is the action focusable ?
+     */
+    isFocusable() {
+      return !this.disabled;
+    },
+    computedId() {
+      return i();
+    }
+  },
+  methods: {
+    onInput(e) {
+      this.$emit("input", e), this.$emit("update:value", e.target.value);
+    },
+    onSubmit(e) {
+      if (e.preventDefault(), e.stopPropagation(), !this.disabled)
+        this.$emit("submit", e);
+      else
+        return !1;
+    }
+  }
+};
+var d = function() {
   var t = this, a = t._self._c;
   return a("li", { staticClass: "action", class: { "action--disabled": t.disabled } }, [a("span", { staticClass: "action-text-editable", on: { click: t.onClick } }, [t._t("icon", function() {
     return [a("span", { staticClass: "action-text-editable__icon", class: [t.isIconUrl ? "action-text-editable__icon--url" : t.icon], style: { backgroundImage: t.isIconUrl ? `url(${t.icon})` : null } })];
-  }), a("form", { ref: "form", staticClass: "action-text-editable__form", attrs: { disabled: t.disabled }, on: { submit: function(i) {
-    return i.preventDefault(), t.onSubmit.apply(null, arguments);
+  }), a("form", { ref: "form", staticClass: "action-text-editable__form", attrs: { disabled: t.disabled }, on: { submit: function(s) {
+    return s.preventDefault(), t.onSubmit.apply(null, arguments);
   } } }, [a("input", { staticClass: "action-text-editable__submit", attrs: { id: t.id, type: "submit" } }), t.name ? a("label", { staticClass: "action-text-editable__name", attrs: { for: t.computedId } }, [t._v(" " + t._s(t.name) + " ")]) : t._e(), a("textarea", t._b({ class: ["action-text-editable__textarea", { focusable: t.isFocusable }], attrs: { id: t.computedId, disabled: t.disabled }, domProps: { value: t.value }, on: { input: t.onInput } }, "textarea", t.$attrs, !1)), a("label", { directives: [{ name: "show", rawName: "v-show", value: !t.disabled, expression: "!disabled" }], staticClass: "action-text-editable__label", attrs: { for: t.id } }, [a("ArrowRight", { attrs: { size: 20 } })], 1)])], 2)]);
-}, d = [], u = o(n, r, d, !1, null, "b0b05af8", null, null);
-const _ = u.exports;
+}, c = [], u = /* @__PURE__ */ o(
+  r,
+  d,
+  c,
+  !1,
+  null,
+  "b0b05af8",
+  null,
+  null
+);
+const x = u.exports;
 export {
-  _ as default
+  x as default
 };

package/dist/Components/NcActionTextEditable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcActionTextEditable.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcActionTextEditable.mjs","sources":["../../src/components/NcActionTextEditable/NcActionTextEditable.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 [Actions](#Actions) component slots.\nAll undocumented attributes will be bound to the textarea. e.g. `maxlength`\n\n```\n<template>\n\t<NcActions>\n\t\t<NcActionTextEditable value=\"This is a textarea\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t\t<NcActionTextEditable :disabled=\"true\" value=\"This is a disabled textarea\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t\t<NcActionTextEditable name=\"Please edit the text\" value=\"This is a textarea with name\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t</NcActions>\n</template>\n<script>\nimport Pencil from 'vue-material-design-icons/Pencil'\n\nexport default {\n\tcomponents: {\n\t\tPencil,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\">\n\t\t<span class=\"action-text-editable\"\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-text-editable__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\tclass=\"action-text-editable__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- form and input -->\n\t\t\t<form ref=\"form\"\n\t\t\t\tclass=\"action-text-editable__form\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@submit.prevent=\"onSubmit\">\n\t\t\t\t<input :id=\"id\" type=\"submit\" class=\"action-text-editable__submit\">\n\n\t\t\t\t<!-- name -->\n\t\t\t\t<label v-if=\"name\"\n\t\t\t\t\tclass=\"action-text-editable__name\"\n\t\t\t\t\t:for=\"computedId\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</label>\n\n\t\t\t\t<textarea :id=\"computedId\"\n\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t:value=\"value\"\n\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t:class=\"['action-text-editable__textarea', { focusable: isFocusable }]\"\n\t\t\t\t\t@input=\"onInput\" />\n\n\t\t\t\t<!-- allow the custom font to inject a ::before\n\t\t\t\t\tnot possible on input[type=submit] -->\n\t\t\t\t<label v-show=\"!disabled\" :for=\"id\" class=\"action-text-editable__label\">\n\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t</label>\n\t\t\t</form>\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\n\nexport default {\n\tname: 'NcActionTextEditable',\n\n\tcomponents: {\n\t\tArrowRight,\n\t},\n\n\tmixins: [ActionTextMixin],\n\n\tprops: {\n\t\t/**\n\t\t * id attribute of the checkbox element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\t\t/**\n\t\t * disabled state of the text area\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * value attribute of the input field\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'update:value',\n\t\t'submit',\n\t],\n\n\tcomputed: {\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\n\t\tcomputedId() {\n\t\t\treturn GenRandomId()\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonInput(event) {\n\t\t\t/**\n\t\t\t * Emitted on input events of the text field\n\t\t\t *\n\t\t\t * @type {Event|Date}\n\t\t\t */\n\t\t\tthis.$emit('input', event)\n\t\t\t/**\n\t\t\t * Emitted when the inputs value changes\n\t\t\t *\n\t\t\t * @type {string|Date}\n\t\t\t */\n\t\t\tthis.$emit('update:value', event.target.value)\n\t\t},\n\t\tonSubmit(event) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tif (!this.disabled) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on submit of the input field\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('submit', event)\n\t\t\t} else {\n\t\t\t\t// ignore submit\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/inputs';\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n\n$input-margin: 4px;\n\n.action-text-editable {\n\tdisplay: flex;\n\talign-items: flex-start;\n\n\twidth: 100%;\n\theight: auto;\n\tmargin: 0;\n\tpadding: 0;\n\n\tcursor: pointer;\n\twhite-space: nowrap;\n\n\tcolor: var(--color-main-text);\n\tborder: 0;\n\tborder-radius: 0; // otherwise Safari will cut the border-radius area\n\tbackground-color: transparent;\n\tbox-shadow: none;\n\n\tfont-weight: normal;\n\tline-height: $clickable-area;\n\n\t& > span {\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t}\n\n\t&__icon {\n\t\tmin-width: 0; /* Overwrite icons*/\n\t\tmin-height: 0;\n\t\t/* Keep padding to define the width to\n\t\t\tassure correct position of a possible text */\n\t\tpadding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area;\n\n\t\tbackground-position: #{$icon-margin} center;\n\t\tbackground-size: $icon-size;\n\t}\n\n\t&:deep(.material-design-icon) {\n\t\twidth: $clickable-area;\n\t\theight: $clickable-area;\n\t\topacity: $opacity_full;\n\n\t\t.material-design-icon__svg {\n\t\t\tvertical-align: middle;\n\t\t}\n\t}\n\n\t// Forms & text inputs\n\t&__form {\n\t\tdisplay: flex;\n\t\tflex: 1 1 auto;\n\t\tflex-direction: column;\n\n\t\tposition: relative;\n\t\tmargin: $input-margin 0;\n\t\tpadding-right: $icon-margin;\n\t}\n\n\t&__submit {\n\t\tposition: absolute;\n\t\tleft: -10000px;\n\t\ttop: auto;\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\toverflow: hidden;\n\t}\n\n\t&__label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t// bottom-right corner\n\t\tposition: absolute;\n\t\tright: $icon-margin + 1;\n\t\tbottom: 1px;\n\t\twidth: #{$clickable-area - $input-margin * 2};\n\t\theight: #{$clickable-area - $input-margin * 2};\n\t\tbox-sizing: border-box;\n\t\tmargin: 0;\n\t\tpadding: 7px 6px;\n\n\t\tborder: 0;\n\t\tborder-radius: 50%;\n\t\t/* Avoid background under border */\n\t\tbackground-color: var(--color-main-background);\n\t\tbackground-clip: padding-box;\n\n\t\t&, * {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t/* Inputs inside popover supports text, submit & reset */\n\t&__textarea {\n\t\tflex: 1 1 auto;\n\t\tcolor: inherit;\n\t\tborder-color: var(--color-border-maxcontrast);\n\n\t\tmin-height: #{$clickable-area * 2 - $input-margin * 2}; /* twice the element margin-y */\n\t\tmax-height: #{$clickable-area * 3 - $input-margin * 2}; /* twice the element margin-y */\n\t\t// block width widening\n\t\tmin-width: $clickable-area * 4;\n\t\twidth: 100% !important;\n\t\tmargin: 0;\n\n\t\t// if disabled, change cursor\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t/* only show confirm borders if input is not focused */\n\t\t&:not(:active):not(:hover):not(:focus) {\n\t\t\t&:invalid {\n\t\t\t\t& + .action-text-editable__label {\n\t\t\t\t\tbackground-color: var(--color-error);\n\t\t\t\t}\n\t\t\t}\n\t\t\t&:not(:disabled) + .action-text-editable__label {\n\t\t\t\t&:active,\n\t\t\t\t&:hover,\n\t\t\t\t&:focus {\n\t\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\t\tcolor: var(--color-primary-element-text);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t&:active,\n\t\t&:hover,\n\t\t&:focus {\n\t\t\t&:not(:disabled) + .action-text-editable__label {\n\t\t\t\t/* above previous input */\n\t\t\t\tz-index: 2;\n\n\t\t\t\tborder-color: var(--color-primary-element);\n\t\t\t\tborder-left-color: transparent;\n\t\t\t}\n\t\t}\n\t}\n}\n\n// if a form is the last of the list\n// add the same bottomMargin as the right padding\n// for visual balance\nli:last-child > .action-text-editable {\n\tmargin-bottom: $icon-margin - $input-margin;\n}\n\n// same for first item\nli:first-child > .action-text-editable {\n\tmargin-top: $icon-margin - $input-margin;\n}\n</style>\n"],"names":["_sfc_main","ArrowRight","ActionTextMixin","GenRandomId","id","event"],"mappings":";;;;;AA2GA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,YAAAC;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,CAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,YAAAC,EAAA;AAAA,MACA,WAAA,CAAAC,MAAAA,EAAA,KAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AACA,aAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAAD,EAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,QAAAE,GAAA;AAMA,WAAA,MAAA,SAAAA,CAAA,GAMA,KAAA,MAAA,gBAAAA,EAAA,OAAA,KAAA;AAAA,IACA;AAAA,IACA,SAAAA,GAAA;AAGA,UAFAA,EAAA,eAAA,GACAA,EAAA,gBAAA,GACA,CAAA,KAAA;AAMA,aAAA,MAAA,UAAAA,CAAA;AAAA;AAGA,eAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcActions.cjs

@@ -1 +1,459 @@
-var U=require("../assets/index-a4a40fa3.css");const _=require("./NcButton.cjs"),z=require("./NcPopover.cjs"),T=require("../chunks/GenRandomId-67df40eb.cjs"),P=require("../chunks/l10n-46d0c1c0.cjs"),R=require("vue"),K=require("vue-material-design-icons/DotsHorizontal.vue"),V=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");const y=".focusable",j={name:"NcActions",components:{NcButton:_,DotsHorizontal:K,NcPopover:z},props:{open:{type:Boolean,default:!1},manualOpen:{type:Boolean,default:!1},forceMenu:{type:Boolean,default:!1},forceName:{type:Boolean,default:!1},menuName:{type:String,default:null},primary:{type:Boolean,default:!1},type:{type:String,validator(e){return["primary","secondary","tertiary","tertiary-no-background","tertiary-on-primary","error","warning","success"].indexOf(e)!==-1},default:null},defaultIcon:{type:String,default:""},ariaLabel:{type:String,default:P.t("Actions")},ariaHidden:{type:Boolean,default:null},placement:{type:String,default:"bottom"},boundariesElement:{type:Element,default:()=>document.querySelector("body")},container:{type:[String,Object,Element,Boolean],default:"body"},disabled:{type:Boolean,default:!1},inline:{type:Number,default:0}},emits:["open","update:open","close","focus","blur"],data(){return{opened:this.open,focusIndex:0,randomId:`menu-${T.GenRandomId()}`}},computed:{triggerBtnType(){return this.type||(this.primary?"primary":this.menuName?"secondary":"tertiary")}},watch:{open(e){e!==this.opened&&(this.opened=e)}},methods:{isValidSingleAction(e){var c,a,r,p,d;const n=(d=(r=(a=(c=e==null?void 0:e.componentOptions)==null?void 0:c.Ctor)==null?void 0:a.extendOptions)==null?void 0:r.name)!=null?d:(p=e==null?void 0:e.componentOptions)==null?void 0:p.tag;return["NcActionButton","NcActionLink","NcActionRouter"].includes(n)},openMenu(e){this.opened||(this.opened=!0,this.$emit("update:open",!0),this.$emit("open"))},closeMenu(e=!0){this.opened&&(this.opened=!1,this.$refs.popover.clearFocusTrap({returnFocus:e}),this.$emit("update:open",!1),this.$emit("close"),this.focusIndex=0,this.$refs.menuButton.$el.focus())},onOpen(e){this.$nextTick(()=>{this.focusFirstAction(e)})},onMouseFocusAction(e){if(document.activeElement===e.target)return;const n=e.target.closest("li");if(n){const c=n.querySelector(y);if(c){const a=[...this.$refs.menu.querySelectorAll(y)].indexOf(c);a>-1&&(this.focusIndex=a,this.focusAction())}}},onKeydown(e){(e.keyCode===38||e.keyCode===9&&e.shiftKey)&&this.focusPreviousAction(e),(e.keyCode===40||e.keyCode===9&&!e.shiftKey)&&this.focusNextAction(e),e.keyCode===33&&this.focusFirstAction(e),e.keyCode===34&&this.focusLastAction(e),e.keyCode===27&&(this.closeMenu(),e.preventDefault())},removeCurrentActive(){const e=this.$refs.menu.querySelector("li.active");e&&e.classList.remove("active")},focusAction(){const e=this.$refs.menu.querySelectorAll(y)[this.focusIndex];if(e){this.removeCurrentActive();const n=e.closest("li.action");e.focus(),n&&n.classList.add("active")}},focusPreviousAction(e){this.opened&&(this.focusIndex===0?this.closeMenu():(this.preventIfEvent(e),this.focusIndex=this.focusIndex-1),this.focusAction())},focusNextAction(e){if(this.opened){const n=this.$refs.menu.querySelectorAll(y).length-1;this.focusIndex===n?this.closeMenu():(this.preventIfEvent(e),this.focusIndex=this.focusIndex+1),this.focusAction()}},focusFirstAction(e){this.opened&&(this.preventIfEvent(e),this.focusIndex=0,this.focusAction())},focusLastAction(e){this.opened&&(this.preventIfEvent(e),this.focusIndex=this.$refs.menu.querySelectorAll(y).length-1,this.focusAction())},preventIfEvent(e){e&&(e.preventDefault(),e.stopPropagation())},onFocus(e){this.$emit("focus",e)},onBlur(e){this.$emit("blur",e)}},render(e){const n=(this.$slots.default||[]).filter(t=>{var i,o,s,l;return((i=t==null?void 0:t.componentOptions)==null?void 0:i.tag)||((l=(s=(o=t==null?void 0:t.componentOptions)==null?void 0:o.Ctor)==null?void 0:s.extendOptions)==null?void 0:l.name)}),c=t=>{var i,o,s,l,h,u,m,f;return((h=(s=(o=(i=t==null?void 0:t.componentOptions)==null?void 0:i.Ctor)==null?void 0:o.extendOptions)==null?void 0:s.name)!=null?h:(l=t==null?void 0:t.componentOptions)==null?void 0:l.tag)==="NcActionLink"&&((f=(m=(u=t==null?void 0:t.componentOptions)==null?void 0:u.propsData)==null?void 0:m.href)==null?void 0:f.startsWith(window.location.origin))},a=n.every(c);let r=n.filter(this.isValidSingleAction);if(this.forceMenu&&r.length>0&&this.inline>0&&(R.util.warn("Specifying forceMenu will ignore any inline actions rendering."),r=[]),n.length===0)return;const p=t=>{var m,f,v,A,b,x,B,I,O,$,g,N,S,C,k,q,w,M,E,F,D,L;const i=((v=(f=(m=t==null?void 0:t.data)==null?void 0:m.scopedSlots)==null?void 0:f.icon())==null?void 0:v[0])||e("span",{class:["icon",(b=(A=t==null?void 0:t.componentOptions)==null?void 0:A.propsData)==null?void 0:b.icon]}),o=(B=(x=t==null?void 0:t.componentOptions)==null?void 0:x.listeners)==null?void 0:B.click,s=(N=(g=($=(O=(I=t==null?void 0:t.componentOptions)==null?void 0:I.children)==null?void 0:O[0])==null?void 0:$.text)==null?void 0:g.trim)==null?void 0:N.call(g),l=((C=(S=t==null?void 0:t.componentOptions)==null?void 0:S.propsData)==null?void 0:C.ariaLabel)||s,h=this.forceName?s:"";let u=(q=(k=t==null?void 0:t.componentOptions)==null?void 0:k.propsData)==null?void 0:q.title;return this.forceName||u||(u=s),e("NcButton",{class:["action-item action-item--single",(w=t==null?void 0:t.data)==null?void 0:w.staticClass,(M=t==null?void 0:t.data)==null?void 0:M.class],attrs:{"aria-label":l,title:u},ref:(E=t==null?void 0:t.data)==null?void 0:E.ref,props:{type:this.type||(h?"secondary":"tertiary"),disabled:this.disabled||((D=(F=t==null?void 0:t.componentOptions)==null?void 0:F.propsData)==null?void 0:D.disabled),ariaHidden:this.ariaHidden,...(L=t==null?void 0:t.componentOptions)==null?void 0:L.propsData},on:{focus:this.onFocus,blur:this.onBlur,...!!o&&{click:H=>{o&&o(H)}}}},[e("template",{slot:"icon"},[i]),h])},d=t=>{var o,s;const i=((o=this.$slots.icon)==null?void 0:o[0])||(this.defaultIcon?e("span",{class:["icon",this.defaultIcon]}):e("DotsHorizontal",{props:{size:20}}));return e("NcPopover",{ref:"popover",props:{delay:0,handleResize:!0,shown:this.opened,placement:this.placement,boundary:this.boundariesElement,container:this.container,popoverBaseClass:"action-item__popper",setReturnFocus:(s=this.$refs.menuButton)==null?void 0:s.$el},attrs:{delay:0,handleResize:!0,shown:this.opened,placement:this.placement,boundary:this.boundariesElement,container:this.container,...this.manualOpen&&{triggers:[]},popoverBaseClass:"action-item__popper"},on:{show:this.openMenu,"after-show":this.onOpen,hide:this.closeMenu}},[e("NcButton",{class:"action-item__menutoggle",props:{type:this.triggerBtnType,disabled:this.disabled,ariaHidden:this.ariaHidden},slot:"trigger",ref:"menuButton",attrs:{"aria-haspopup":a?null:"menu","aria-label":this.menuName?null:this.ariaLabel,"aria-controls":this.opened?this.randomId:null,"aria-expanded":this.opened.toString()},on:{focus:this.onFocus,blur:this.onBlur}},[e("template",{slot:"icon"},[i]),this.menuName]),e("div",{class:{open:this.opened},attrs:{tabindex:"-1"},on:{keydown:this.onKeydown,mousemove:this.onMouseFocusAction},ref:"menu"},[e("ul",{attrs:{id:this.randomId,tabindex:"-1",role:a?null:"menu"}},[t])])])};if(n.length===1&&r.length===1&&!this.forceMenu)return p(r[0]);if(r.length>0&&this.inline>0){const t=r.slice(0,this.inline),i=n.filter(o=>!t.includes(o));return e("div",{class:["action-items",`action-item--${this.triggerBtnType}`]},[...t.map(p),i.length>0?e("div",{class:["action-item",{"action-item--open":this.opened}]},[d(i)]):null])}return e("div",{class:["action-item action-item--default-popover",`action-item--${this.triggerBtnType}`,{"action-item--open":this.opened}]},[d(n)])}},G=null,W=null;var J=V.normalizeComponent(j,G,W,!1,null,"b84866e9",null,null);const Q=J.exports;module.exports=Q;
+var te = require("../assets/index-4b75fe20.css");
+const T = require("./NcButton.cjs"), R = require("./NcPopover.cjs"), V = require("../chunks/GenRandomId-c214d235.cjs"), K = require("../chunks/l10n-b1d264c7.cjs"), G = require("vue"), j = require("vue-material-design-icons/DotsHorizontal.vue"), W = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), H = (e) => e && e.__esModule ? e : { default: e }, J = /* @__PURE__ */ H(G), Q = /* @__PURE__ */ H(j);
+const a = ".focusable", U = {
+  name: "NcActions",
+  components: {
+    NcButton: T,
+    DotsHorizontal: Q.default,
+    NcPopover: R
+  },
+  props: {
+    /**
+     * Specify the open state of the popover menu
+     */
+    open: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * This disables the internal open management,
+     * so the actions menu only respects the `open` prop.
+     * This is e.g. necessary for the NcAvatar component
+     * to only open the actions menu after loading it's entries has finished.
+     */
+    manualOpen: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Force the actions to display in a three dot menu
+     */
+    forceMenu: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Force the name to show for single actions
+     */
+    forceName: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Specify the menu name
+     */
+    menuName: {
+      type: String,
+      default: null
+    },
+    /**
+     * Apply primary styling for this menu
+     */
+    primary: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Specifies the button type used for trigger and single actions buttons
+     * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success. If left empty,
+     * the default button style will be applied.
+     */
+    type: {
+      type: String,
+      validator(e) {
+        return ["primary", "secondary", "tertiary", "tertiary-no-background", "tertiary-on-primary", "error", "warning", "success"].indexOf(e) !== -1;
+      },
+      default: null
+    },
+    /**
+     * Icon to show for the toggle menu button
+     * when more than one action is inside the actions component.
+     * Only replace the default three-dot icon if really necessary.
+     */
+    defaultIcon: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Aria label for the actions menu.
+     *
+     * If `menuName` is defined this will not be used to prevent
+     * any accessible name conflicts. This ensures that the
+     * element can be activated via voice input.
+     */
+    ariaLabel: {
+      type: String,
+      default: K.t("Actions")
+    },
+    /**
+     * aria-hidden attribute for the icon slot
+     */
+    ariaHidden: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * Wanted direction of the menu
+     */
+    placement: {
+      type: String,
+      default: "bottom"
+    },
+    /**
+     * DOM element for the actions' popover boundaries
+     */
+    boundariesElement: {
+      type: Element,
+      default: () => document.querySelector("body")
+    },
+    /**
+     * Selector for the actions' popover container
+     */
+    container: {
+      type: [String, Object, Element, Boolean],
+      default: "body"
+    },
+    /**
+     * Disabled state of the main button (single action or menu toggle)
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Display x items inline out of the dropdown menu
+     * Will be ignored if `forceMenu` is set
+     */
+    inline: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: [
+    "open",
+    "update:open",
+    "close",
+    "focus",
+    "blur"
+  ],
+  data() {
+    return {
+      opened: this.open,
+      focusIndex: 0,
+      randomId: `menu-${V.GenRandomId()}`
+    };
+  },
+  computed: {
+    triggerBtnType() {
+      return this.type || (this.primary ? "primary" : this.menuName ? "secondary" : "tertiary");
+    }
+  },
+  watch: {
+    // Watch parent prop
+    open(e) {
+      e !== this.opened && (this.opened = e);
+    }
+  },
+  methods: {
+    /**
+     * Do we have exactly one Action and
+     * is it allowed as a standalone element?
+     *
+     * @param {Array} action The action to check
+     * @return {boolean}
+     */
+    isValidSingleAction(e) {
+      var u, c, n, d, f;
+      const s = (f = (n = (c = (u = e == null ? void 0 : e.componentOptions) == null ? void 0 : u.Ctor) == null ? void 0 : c.extendOptions) == null ? void 0 : n.name) != null ? f : (d = e == null ? void 0 : e.componentOptions) == null ? void 0 : d.tag;
+      return ["NcActionButton", "NcActionLink", "NcActionRouter"].includes(s);
+    },
+    // MENU STATE MANAGEMENT
+    openMenu(e) {
+      this.opened || (this.opened = !0, this.$emit("update:open", !0), this.$emit("open"));
+    },
+    closeMenu(e = !0) {
+      this.opened && (this.opened = !1, this.$refs.popover.clearFocusTrap({ returnFocus: e }), this.$emit("update:open", !1), this.$emit("close"), this.focusIndex = 0, this.$refs.menuButton.$el.focus());
+    },
+    onOpen(e) {
+      this.$nextTick(() => {
+        this.focusFirstAction(e);
+      });
+    },
+    // MENU KEYS & FOCUS MANAGEMENT
+    // focus nearest focusable item on mouse move
+    // DO NOT change the focus if the target is already focused
+    // this will prevent issues with input being unfocused
+    // on mouse move
+    onMouseFocusAction(e) {
+      if (document.activeElement === e.target)
+        return;
+      const s = e.target.closest("li");
+      if (s) {
+        const u = s.querySelector(a);
+        if (u) {
+          const n = [...this.$refs.menu.querySelectorAll(a)].indexOf(u);
+          n > -1 && (this.focusIndex = n, this.focusAction());
+        }
+      }
+    },
+    /**
+     * Dispatches the keydown listener to different handlers
+     *
+     * @param {object} event The keydown event
+     */
+    onKeydown(e) {
+      (e.keyCode === 38 || e.keyCode === 9 && e.shiftKey) && this.focusPreviousAction(e), (e.keyCode === 40 || e.keyCode === 9 && !e.shiftKey) && this.focusNextAction(e), e.keyCode === 33 && this.focusFirstAction(e), e.keyCode === 34 && this.focusLastAction(e), e.keyCode === 27 && (this.closeMenu(), e.preventDefault());
+    },
+    removeCurrentActive() {
+      const e = this.$refs.menu.querySelector("li.active");
+      e && e.classList.remove("active");
+    },
+    focusAction() {
+      const e = this.$refs.menu.querySelectorAll(a)[this.focusIndex];
+      if (e) {
+        this.removeCurrentActive();
+        const s = e.closest("li.action");
+        e.focus(), s && s.classList.add("active");
+      }
+    },
+    focusPreviousAction(e) {
+      this.opened && (this.focusIndex === 0 ? this.closeMenu() : (this.preventIfEvent(e), this.focusIndex = this.focusIndex - 1), this.focusAction());
+    },
+    focusNextAction(e) {
+      if (this.opened) {
+        const s = this.$refs.menu.querySelectorAll(a).length - 1;
+        this.focusIndex === s ? this.closeMenu() : (this.preventIfEvent(e), this.focusIndex = this.focusIndex + 1), this.focusAction();
+      }
+    },
+    focusFirstAction(e) {
+      if (this.opened) {
+        this.preventIfEvent(e);
+        const s = [...this.$refs.menu.querySelectorAll(a)].findIndex((u) => u.parentElement.getAttribute("aria-selected"));
+        this.focusIndex = s > -1 ? s : 0, this.focusAction();
+      }
+    },
+    focusLastAction(e) {
+      this.opened && (this.preventIfEvent(e), this.focusIndex = this.$refs.menu.querySelectorAll(a).length - 1, this.focusAction());
+    },
+    preventIfEvent(e) {
+      e && (e.preventDefault(), e.stopPropagation());
+    },
+    onFocus(e) {
+      this.$emit("focus", e);
+    },
+    onBlur(e) {
+      this.$emit("blur", e);
+    }
+  },
+  /**
+   * The render function to display the component
+   *
+   * @param {Function} h The function to create VNodes
+   * @return {object|undefined} The created VNode
+   */
+  render(e) {
+    const s = (this.$slots.default || []).filter(
+      (t) => {
+        var l, r, o, i;
+        return ((l = t == null ? void 0 : t.componentOptions) == null ? void 0 : l.tag) || ((i = (o = (r = t == null ? void 0 : t.componentOptions) == null ? void 0 : r.Ctor) == null ? void 0 : o.extendOptions) == null ? void 0 : i.name);
+      }
+    ), u = (t) => {
+      var r, o, i, g, m, p, h, y;
+      return ((m = (i = (o = (r = t == null ? void 0 : t.componentOptions) == null ? void 0 : r.Ctor) == null ? void 0 : o.extendOptions) == null ? void 0 : i.name) != null ? m : (g = t == null ? void 0 : t.componentOptions) == null ? void 0 : g.tag) === "NcActionLink" && ((y = (h = (p = t == null ? void 0 : t.componentOptions) == null ? void 0 : p.propsData) == null ? void 0 : h.href) == null ? void 0 : y.startsWith(window.location.origin));
+    }, c = s.every(u);
+    let n = s.filter(this.isValidSingleAction);
+    if (this.forceMenu && n.length > 0 && this.inline > 0 && (J.default.util.warn("Specifying forceMenu will ignore any inline actions rendering."), n = []), s.length === 0)
+      return;
+    const d = (t) => {
+      var h, y, _, x, b, I, v, N, B, O, $, A, S, C, k, q, E, L, M, w, D, F, z;
+      const l = ((_ = (y = (h = t == null ? void 0 : t.data) == null ? void 0 : h.scopedSlots) == null ? void 0 : y.icon()) == null ? void 0 : _[0]) || e("span", { class: ["icon", (b = (x = t == null ? void 0 : t.componentOptions) == null ? void 0 : x.propsData) == null ? void 0 : b.icon] }), r = ((I = t == null ? void 0 : t.data) == null ? void 0 : I.attrs) || {}, o = (N = (v = t == null ? void 0 : t.componentOptions) == null ? void 0 : v.listeners) == null ? void 0 : N.click, i = (S = (A = ($ = (O = (B = t == null ? void 0 : t.componentOptions) == null ? void 0 : B.children) == null ? void 0 : O[0]) == null ? void 0 : $.text) == null ? void 0 : A.trim) == null ? void 0 : S.call(A), g = ((k = (C = t == null ? void 0 : t.componentOptions) == null ? void 0 : C.propsData) == null ? void 0 : k.ariaLabel) || i, m = this.forceName ? i : "";
+      let p = (E = (q = t == null ? void 0 : t.componentOptions) == null ? void 0 : q.propsData) == null ? void 0 : E.title;
+      return this.forceName || p || (p = i), e(
+        "NcButton",
+        {
+          class: [
+            "action-item action-item--single",
+            (L = t == null ? void 0 : t.data) == null ? void 0 : L.staticClass,
+            (M = t == null ? void 0 : t.data) == null ? void 0 : M.class
+          ],
+          attrs: {
+            ...r,
+            "aria-label": g,
+            title: p
+          },
+          ref: (w = t == null ? void 0 : t.data) == null ? void 0 : w.ref,
+          props: {
+            // If it has a menuName, we use a secondary button
+            type: this.type || (m ? "secondary" : "tertiary"),
+            disabled: this.disabled || ((F = (D = t == null ? void 0 : t.componentOptions) == null ? void 0 : D.propsData) == null ? void 0 : F.disabled),
+            ariaHidden: this.ariaHidden,
+            ...(z = t == null ? void 0 : t.componentOptions) == null ? void 0 : z.propsData
+          },
+          on: {
+            focus: this.onFocus,
+            blur: this.onBlur,
+            // If we have a click listener,
+            // we bind it to execute on click and forward the click event
+            ...!!o && {
+              click: (P) => {
+                o && o(P);
+              }
+            }
+          }
+        },
+        [
+          e("template", { slot: "icon" }, [l]),
+          m
+        ]
+      );
+    }, f = (t) => {
+      var o, i;
+      const l = ((o = this.$slots.icon) == null ? void 0 : o[0]) || (this.defaultIcon ? e("span", { class: ["icon", this.defaultIcon] }) : e("DotsHorizontal", {
+        props: {
+          size: 20
+        }
+      })), r = () => c || this.opened ? this.opened.toString() : null;
+      return e(
+        "NcPopover",
+        {
+          ref: "popover",
+          props: {
+            delay: 0,
+            handleResize: !0,
+            shown: this.opened,
+            placement: this.placement,
+            boundary: this.boundariesElement,
+            container: this.container,
+            popoverBaseClass: "action-item__popper",
+            setReturnFocus: (i = this.$refs.menuButton) == null ? void 0 : i.$el
+          },
+          // For some reason the popover component
+          // does not react to props given under the 'props' key,
+          // so we use both 'attrs' and 'props'
+          attrs: {
+            delay: 0,
+            handleResize: !0,
+            shown: this.opened,
+            placement: this.placement,
+            boundary: this.boundariesElement,
+            container: this.container,
+            ...this.manualOpen && { triggers: [] }
+          },
+          on: {
+            show: this.openMenu,
+            "after-show": this.onOpen,
+            hide: this.closeMenu
+          }
+        },
+        [
+          e("NcButton", {
+            class: "action-item__menutoggle",
+            props: {
+              type: this.triggerBtnType,
+              disabled: this.disabled,
+              ariaHidden: this.ariaHidden
+            },
+            slot: "trigger",
+            ref: "menuButton",
+            attrs: {
+              "aria-haspopup": c ? null : "menu",
+              "aria-label": this.menuName ? null : this.ariaLabel,
+              "aria-controls": this.opened ? this.randomId : null,
+              "aria-expanded": r()
+            },
+            on: {
+              focus: this.onFocus,
+              blur: this.onBlur
+            }
+          }, [
+            e("template", { slot: "icon" }, [l]),
+            this.menuName
+          ]),
+          e("div", {
+            class: {
+              open: this.opened
+            },
+            attrs: {
+              tabindex: "-1"
+            },
+            on: {
+              keydown: this.onKeydown,
+              mousemove: this.onMouseFocusAction
+            },
+            ref: "menu"
+          }, [
+            e("ul", {
+              attrs: {
+                id: this.randomId,
+                tabindex: "-1",
+                role: c ? null : "menu"
+              }
+            }, [
+              t
+            ])
+          ])
+        ]
+      );
+    };
+    if (s.length === 1 && n.length === 1 && !this.forceMenu)
+      return d(n[0]);
+    if (n.length > 0 && this.inline > 0) {
+      const t = n.slice(0, this.inline), l = s.filter((r) => !t.includes(r));
+      return e(
+        "div",
+        {
+          class: [
+            "action-items",
+            `action-item--${this.triggerBtnType}`
+          ]
+        },
+        [
+          // Render inline actions
+          ...t.map(d),
+          // render the rest within the popover menu
+          l.length > 0 ? e(
+            "div",
+            {
+              class: [
+                "action-item",
+                {
+                  "action-item--open": this.opened
+                }
+              ]
+            },
+            [
+              f(l)
+            ]
+          ) : null
+        ]
+      );
+    }
+    return e(
+      "div",
+      {
+        class: [
+          "action-item action-item--default-popover",
+          `action-item--${this.triggerBtnType}`,
+          {
+            "action-item--open": this.opened
+          }
+        ]
+      },
+      [
+        f(s)
+      ]
+    );
+  }
+}, X = null, Y = null;
+var Z = /* @__PURE__ */ W.normalizeComponent(
+  U,
+  X,
+  Y,
+  !1,
+  null,
+  "4a3cc05a",
+  null,
+  null
+);
+const ee = Z.exports;
+module.exports = ee;