@nextcloud/vue 8.0.0-beta.8 → 8.0.0

package/dist/Components/NcActions.mjs

@@ -1,17 +1,17 @@
-import "../assets/index-01e5adf4.css";
-import H from "./NcButton.mjs";
-import P from "./NcPopover.mjs";
-import { G as T } from "../chunks/GenRandomId-cb9ccebe.mjs";
-import { t as z } from "../chunks/l10n-27a75c40.mjs";
-import R from "vue";
-import K from "vue-material-design-icons/DotsHorizontal.vue";
-import { n as V } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-const g = ".focusable", G = {
+import "../assets/index-55600948.css";
+import P from "./NcButton.mjs";
+import R from "./NcPopover.mjs";
+import { G as z } from "../chunks/GenRandomId-cb9ccebe.mjs";
+import { t as K } from "../chunks/l10n-b6d21146.mjs";
+import V from "vue";
+import { D as G } from "../chunks/DotsHorizontal-0ee7d901.mjs";
+import { n as j } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const a = ".focusable", U = {
   name: "NcActions",
   components: {
-    NcButton: H,
-    DotsHorizontal: K,
-    NcPopover: P
+    NcButton: P,
+    DotsHorizontal: G,
+    NcPopover: R
   },
   props: {
     /**
@@ -89,7 +89,7 @@ const g = ".focusable", G = {
      */
     ariaLabel: {
       type: String,
-      default: z("Actions")
+      default: K("Actions")
     },
     /**
      * aria-hidden attribute for the icon slot
@@ -146,7 +146,7 @@ const g = ".focusable", G = {
     return {
       opened: this.open,
       focusIndex: 0,
-      randomId: `menu-${T()}`
+      randomId: `menu-${z()}`
     };
   },
   computed: {
@@ -169,8 +169,8 @@ const g = ".focusable", G = {
      * @return {boolean}
      */
     isValidSingleAction(e) {
-      var l, p, o, a, d;
-      const s = (d = (o = (p = (l = e == null ? void 0 : e.componentOptions) == null ? void 0 : l.Ctor) == null ? void 0 : p.extendOptions) == null ? void 0 : o.name) != null ? d : (a = e == null ? void 0 : e.componentOptions) == null ? void 0 : a.tag;
+      var u, p, o, d, f;
+      const s = (f = (o = (p = (u = e == null ? void 0 : e.componentOptions) == null ? void 0 : u.Ctor) == null ? void 0 : p.extendOptions) == null ? void 0 : o.name) != null ? f : (d = e == null ? void 0 : e.componentOptions) == null ? void 0 : d.tag;
       return ["NcActionButton", "NcActionLink", "NcActionRouter"].includes(s);
     },
     // MENU STATE MANAGEMENT
@@ -195,9 +195,9 @@ const g = ".focusable", G = {
         return;
       const s = e.target.closest("li");
       if (s) {
-        const l = s.querySelector(g);
-        if (l) {
-          const o = [...this.$refs.menu.querySelectorAll(g)].indexOf(l);
+        const u = s.querySelector(a);
+        if (u) {
+          const o = [...this.$refs.menu.querySelectorAll(a)].indexOf(u);
           o > -1 && (this.focusIndex = o, this.focusAction());
         }
       }
@@ -215,7 +215,7 @@ const g = ".focusable", G = {
       e && e.classList.remove("active");
     },
     focusAction() {
-      const e = this.$refs.menu.querySelectorAll(g)[this.focusIndex];
+      const e = this.$refs.menu.querySelectorAll(a)[this.focusIndex];
       if (e) {
         this.removeCurrentActive();
         const s = e.closest("li.action");
@@ -227,15 +227,19 @@ const g = ".focusable", G = {
     },
     focusNextAction(e) {
       if (this.opened) {
-        const s = this.$refs.menu.querySelectorAll(g).length - 1;
+        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) {
-      this.opened && (this.preventIfEvent(e), this.focusIndex = 0, this.focusAction());
+      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(g).length - 1, this.focusAction());
+      this.opened && (this.preventIfEvent(e), this.focusIndex = this.$refs.menu.querySelectorAll(a).length - 1, this.focusAction());
     },
     preventIfEvent(e) {
       e && (e.preventDefault(), e.stopPropagation());
@@ -256,64 +260,66 @@ const g = ".focusable", G = {
   render(e) {
     const s = (this.$slots.default || []).filter(
       (t) => {
-        var r, n, i, u;
-        return ((r = t == null ? void 0 : t.componentOptions) == null ? void 0 : r.tag) || ((u = (i = (n = t == null ? void 0 : t.componentOptions) == null ? void 0 : n.Ctor) == null ? void 0 : i.extendOptions) == null ? void 0 : u.name);
+        var l, n, i, r;
+        return ((l = t == null ? void 0 : t.componentOptions) == null ? void 0 : l.tag) || ((r = (i = (n = t == null ? void 0 : t.componentOptions) == null ? void 0 : n.Ctor) == null ? void 0 : i.extendOptions) == null ? void 0 : r.name);
       }
-    ), l = (t) => {
-      var n, i, u, f, c, m, h, y;
-      return ((c = (u = (i = (n = t == null ? void 0 : t.componentOptions) == null ? void 0 : n.Ctor) == null ? void 0 : i.extendOptions) == null ? void 0 : u.name) != null ? c : (f = t == null ? void 0 : t.componentOptions) == null ? void 0 : f.tag) === "NcActionLink" && ((y = (h = (m = t == null ? void 0 : t.componentOptions) == null ? void 0 : m.propsData) == null ? void 0 : h.href) == null ? void 0 : y.startsWith(window.location.origin));
-    }, p = s.every(l);
+    ), u = (t) => {
+      var i, r, g, m, c, h, y;
+      const l = (c = (g = (r = (i = t == null ? void 0 : t.componentOptions) == null ? void 0 : i.Ctor) == null ? void 0 : r.extendOptions) == null ? void 0 : g.name) != null ? c : (m = t == null ? void 0 : t.componentOptions) == null ? void 0 : m.tag, n = (y = (h = t == null ? void 0 : t.componentOptions) == null ? void 0 : h.propsData) == null ? void 0 : y.href;
+      return l === "NcActionLink" && !(n != null && n.startsWith("#")) && new URL(n, window.location.origin).origin === window.location.origin;
+    }, p = s.every(u);
     let o = s.filter(this.isValidSingleAction);
-    if (this.forceMenu && o.length > 0 && this.inline > 0 && (R.util.warn("Specifying forceMenu will ignore any inline actions rendering."), o = []), s.length === 0)
+    if (this.forceMenu && o.length > 0 && this.inline > 0 && (V.util.warn("Specifying forceMenu will ignore any inline actions rendering."), o = []), s.length === 0)
       return;
-    const a = (t) => {
-      var m, h, y, b, x, _, v, I, N, B, A, O, $, S, k, C, L, M, w, E, F, D;
-      const r = ((y = (h = (m = t == null ? void 0 : t.data) == null ? void 0 : m.scopedSlots) == null ? void 0 : h.icon()) == null ? void 0 : y[0]) || e("span", { class: ["icon", (x = (b = t == null ? void 0 : t.componentOptions) == null ? void 0 : b.propsData) == null ? void 0 : x.icon] }), n = (v = (_ = t == null ? void 0 : t.componentOptions) == null ? void 0 : _.listeners) == null ? void 0 : v.click, i = (O = (A = (B = (N = (I = t == null ? void 0 : t.componentOptions) == null ? void 0 : I.children) == null ? void 0 : N[0]) == null ? void 0 : B.text) == null ? void 0 : A.trim) == null ? void 0 : O.call(A), u = ((S = ($ = t == null ? void 0 : t.componentOptions) == null ? void 0 : $.propsData) == null ? void 0 : S.ariaLabel) || i, f = this.forceName ? i : "";
-      let c = (C = (k = t == null ? void 0 : t.componentOptions) == null ? void 0 : k.propsData) == null ? void 0 : C.title;
-      return this.forceName || c || (c = i), e(
+    const d = (t) => {
+      var h, y, x, b, v, I, _, N, $, O, B, A, S, k, w, L, C, E, M, F, D, q, T;
+      const l = ((x = (y = (h = t == null ? void 0 : t.data) == null ? void 0 : h.scopedSlots) == null ? void 0 : y.icon()) == null ? void 0 : x[0]) || e("span", { class: ["icon", (v = (b = t == null ? void 0 : t.componentOptions) == null ? void 0 : b.propsData) == null ? void 0 : v.icon] }), n = ((I = t == null ? void 0 : t.data) == null ? void 0 : I.attrs) || {}, i = (N = (_ = t == null ? void 0 : t.componentOptions) == null ? void 0 : _.listeners) == null ? void 0 : N.click, r = (S = (A = (B = (O = ($ = t == null ? void 0 : t.componentOptions) == null ? void 0 : $.children) == null ? void 0 : O[0]) == null ? void 0 : B.text) == null ? void 0 : A.trim) == null ? void 0 : S.call(A), g = ((w = (k = t == null ? void 0 : t.componentOptions) == null ? void 0 : k.propsData) == null ? void 0 : w.ariaLabel) || r, m = this.forceName ? r : "";
+      let c = (C = (L = t == null ? void 0 : t.componentOptions) == null ? void 0 : L.propsData) == null ? void 0 : C.title;
+      return this.forceName || c || (c = r), e(
         "NcButton",
         {
           class: [
             "action-item action-item--single",
-            (L = t == null ? void 0 : t.data) == null ? void 0 : L.staticClass,
+            (E = t == null ? void 0 : t.data) == null ? void 0 : E.staticClass,
             (M = t == null ? void 0 : t.data) == null ? void 0 : M.class
           ],
           attrs: {
-            "aria-label": u,
+            ...n,
+            "aria-label": g,
             title: c
           },
-          ref: (w = t == null ? void 0 : t.data) == null ? void 0 : w.ref,
+          ref: (F = t == null ? void 0 : t.data) == null ? void 0 : F.ref,
           props: {
             // If it has a menuName, we use a secondary button
-            type: this.type || (f ? "secondary" : "tertiary"),
-            disabled: this.disabled || ((F = (E = t == null ? void 0 : t.componentOptions) == null ? void 0 : E.propsData) == null ? void 0 : F.disabled),
+            type: this.type || (m ? "secondary" : "tertiary"),
+            disabled: this.disabled || ((q = (D = t == null ? void 0 : t.componentOptions) == null ? void 0 : D.propsData) == null ? void 0 : q.disabled),
             ariaHidden: this.ariaHidden,
-            ...(D = t == null ? void 0 : t.componentOptions) == null ? void 0 : D.propsData
+            ...(T = t == null ? void 0 : t.componentOptions) == null ? void 0 : T.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
-            ...!!n && {
-              click: (q) => {
-                n && n(q);
+            ...!!i && {
+              click: (H) => {
+                i && i(H);
               }
             }
           }
         },
         [
-          e("template", { slot: "icon" }, [r]),
-          f
+          e("template", { slot: "icon" }, [l]),
+          m
         ]
       );
-    }, d = (t) => {
-      var n, i;
-      const r = ((n = this.$slots.icon) == null ? void 0 : n[0]) || (this.defaultIcon ? e("span", { class: ["icon", this.defaultIcon] }) : e("DotsHorizontal", {
+    }, f = (t) => {
+      var i, r;
+      const l = ((i = this.$slots.icon) == null ? void 0 : i[0]) || (this.defaultIcon ? e("span", { class: ["icon", this.defaultIcon] }) : e("DotsHorizontal", {
         props: {
           size: 20
         }
-      }));
+      })), n = () => p || this.opened ? this.opened.toString() : null;
       return e(
         "NcPopover",
         {
@@ -326,7 +332,7 @@ const g = ".focusable", G = {
             boundary: this.boundariesElement,
             container: this.container,
             popoverBaseClass: "action-item__popper",
-            setReturnFocus: (i = this.$refs.menuButton) == null ? void 0 : i.$el
+            setReturnFocus: (r = this.$refs.menuButton) == null ? void 0 : r.$el
           },
           // For some reason the popover component
           // does not react to props given under the 'props' key,
@@ -338,8 +344,7 @@ const g = ".focusable", G = {
             placement: this.placement,
             boundary: this.boundariesElement,
             container: this.container,
-            ...this.manualOpen && { triggers: [] },
-            popoverBaseClass: "action-item__popper"
+            ...this.manualOpen && { triggers: [] }
           },
           on: {
             show: this.openMenu,
@@ -361,14 +366,14 @@ const g = ".focusable", G = {
               "aria-haspopup": p ? null : "menu",
               "aria-label": this.menuName ? null : this.ariaLabel,
               "aria-controls": this.opened ? this.randomId : null,
-              "aria-expanded": this.opened.toString()
+              "aria-expanded": n()
             },
             on: {
               focus: this.onFocus,
               blur: this.onBlur
             }
           }, [
-            e("template", { slot: "icon" }, [r]),
+            e("template", { slot: "icon" }, [l]),
             this.menuName
           ]),
           e("div", {
@@ -398,9 +403,11 @@ const g = ".focusable", G = {
       );
     };
     if (s.length === 1 && o.length === 1 && !this.forceMenu)
-      return a(o[0]);
-    if (o.length > 0 && this.inline > 0) {
-      const t = o.slice(0, this.inline), r = s.filter((n) => !t.includes(n));
+      return d(o[0]);
+    if (this.$nextTick(() => {
+      this.opened && this.$refs.menu && (this.$refs.menu.querySelector("li.active") || []).length === 0 && this.focusFirstAction();
+    }), o.length > 0 && this.inline > 0) {
+      const t = o.slice(0, this.inline), l = s.filter((n) => !t.includes(n));
       return e(
         "div",
         {
@@ -411,9 +418,9 @@ const g = ".focusable", G = {
         },
         [
           // Render inline actions
-          ...t.map(a),
+          ...t.map(d),
           // render the rest within the popover menu
-          r.length > 0 ? e(
+          l.length > 0 ? e(
             "div",
             {
               class: [
@@ -424,7 +431,7 @@ const g = ".focusable", G = {
               ]
             },
             [
-              d(r)
+              f(l)
             ]
           ) : null
         ]
@@ -442,22 +449,22 @@ const g = ".focusable", G = {
         ]
       },
       [
-        d(s)
+        f(s)
       ]
     );
   }
-}, j = null, W = null;
-var J = /* @__PURE__ */ V(
-  G,
-  j,
+}, W = null, J = null;
+var Q = /* @__PURE__ */ j(
+  U,
   W,
+  J,
   !1,
   null,
-  "b84866e9",
+  "f797c400",
   null,
   null
 );
-const ne = J.exports;
+const ie = Q.exports;
 export {
-  ne as default
+  ie as default
 };

package/dist/Components/NcActions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcActions.mjs","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</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 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\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 * aria-hidden attribute for the icon slot\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}\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) {\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\t// Up or Shift+Tab\n\t\t\tif (event.keyCode === 38 || (event.keyCode === 9 && event.shiftKey)) {\n\t\t\t\tthis.focusPreviousAction(event)\n\t\t\t}\n\t\t\t// Down or Tab\n\t\t\tif (event.keyCode === 40 || (event.keyCode === 9 && !event.shiftKey)) {\n\t\t\t\tthis.focusNextAction(event)\n\t\t\t}\n\t\t\t// Page-Up\n\t\t\tif (event.keyCode === 33) {\n\t\t\t\tthis.focusFirstAction(event)\n\t\t\t}\n\t\t\t// Page-Down\n\t\t\tif (event.keyCode === 34) {\n\t\t\t\tthis.focusLastAction(event)\n\t\t\t}\n\t\t\t// Esc\n\t\t\tif (event.keyCode === 27) {\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\t// First element overflows to body-navigation (no preventDefault!) and closes Actions-menu\n\t\t\t\t\tthis.closeMenu()\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\t// Last element overflows to body-navigation (no preventDefault!) and closes Actions-menu\n\t\t\t\t\tthis.closeMenu()\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\tthis.focusIndex = 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 isNavLink = (action) => {\n\t\t\tconst componentName = action?.componentOptions?.Ctor?.extendOptions?.name ?? action?.componentOptions?.tag\n\t\t\treturn (\n\t\t\t\tcomponentName === 'NcActionLink'\n\t\t\t\t&& action?.componentOptions?.propsData?.href?.startsWith(window.location.origin)\n\t\t\t)\n\t\t}\n\t\t// Automatically detect whether all actions are website navigation links\n\t\tconst isNav = actions.every(isNavLink)\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 {object} 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 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'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\tariaHidden: this.ariaHidden,\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\tsetReturnFocus: this.$refs.menuButton?.$el,\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\tpopoverBaseClass: 'action-item__popper',\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\tariaHidden: this.ariaHidden,\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': isNav ? 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'aria-expanded': this.opened.toString(),\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: isNav ? null : 'menu',\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/**\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","NcButton","DotsHorizontal","NcPopover","value","t","GenRandomId","state","action","componentName","_e","_c","_b","_a","_d","returnFocus","event","menuItem","focusableItem","focusIndex","currentActiveElement","focusElement","liMenuParent","indexLength","h","actions","isNavLink","_h","_g","_f","isNav","inlineActions","Vue","renderInlineAction","icon","clickListener","text","_l","_k","_j","_i","ariaLabel","_n","_m","buttonText","title","_p","_o","_q","_r","_s","_u","_t","_v","renderActionsPopover","triggerIcon","renderedInlineActions","menuActions"],"mappings":";;;;;;;;AAikBA,MAAAA,IAAA,cAUAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,WAAAC;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,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,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,CAAA;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,GAAA;AACA,cAAAC,IAAAD,EAAA,cAAAlB,CAAA;AACA,YAAAmB,GAAA;AAEA,gBAAAC,IAAA,CAAA,GADA,KAAA,MAAA,KAAA,iBAAApB,CAAA,CACA,EAAA,QAAAmB,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;AAEA,OAAAA,EAAA,YAAA,MAAAA,EAAA,YAAA,KAAAA,EAAA,aACA,KAAA,oBAAAA,CAAA,IAGAA,EAAA,YAAA,MAAAA,EAAA,YAAA,KAAA,CAAAA,EAAA,aACA,KAAA,gBAAAA,CAAA,GAGAA,EAAA,YAAA,MACA,KAAA,iBAAAA,CAAA,GAGAA,EAAA,YAAA,MACA,KAAA,gBAAAA,CAAA,GAGAA,EAAA,YAAA,OACA,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,iBAAAtB,CAAA,EAAA,KAAA,UAAA;AACA,UAAAsB,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,IAEA,KAAA,UAAA,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,iBAAAxB,CAAA,EAAA,SAAA;AACA,QAAA,KAAA,eAAAwB,IAEA,KAAA,UAAA,KAEA,KAAA,eAAAP,CAAA,GACA,KAAA,aAAA,KAAA,aAAA,IAEA,KAAA,YAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,iBAAAA,GAAA;AACA,MAAA,KAAA,WACA,KAAA,eAAAA,CAAA,GACA,KAAA,aAAA,GACA,KAAA,YAAA;AAAA,IAEA;AAAA,IACA,gBAAAA,GAAA;AACA,MAAA,KAAA,WACA,KAAA,eAAAA,CAAA,GACA,KAAA,aAAA,KAAA,MAAA,KAAA,iBAAAjB,CAAA,EAAA,SAAA,GACA,KAAA,YAAA;AAAA,IAEA;AAAA,IACA,eAAAiB,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,OAAAQ,GAAA;AAMA,UAAAC,KAAA,KAAA,OAAA,WAAA,CAAA,GAAA;AAAA,MACA,CAAAjB,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,GAEAY,IAAA,CAAAlB,MAAA;;AAEA,eADAE,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,SAEA,oBACAa,KAAAC,KAAAC,IAAArB,KAAA,gBAAAA,EAAA,qBAAA,gBAAAqB,EAAA,cAAA,gBAAAD,EAAA,SAAA,gBAAAD,EAAA,WAAA,OAAA,SAAA;AAAA,IAEA,GAEAG,IAAAL,EAAA,MAAAC,CAAA;AAKA,QAAAK,IAAAN,EAAA,OAAA,KAAA,mBAAA;AAOA,QANA,KAAA,aAAAM,EAAA,SAAA,KAAA,KAAA,SAAA,MACAC,EAAA,KAAA,KAAA,gEAAA,GACAD,IAAA,CAAA,IAIAN,EAAA,WAAA;AACA;AASA,UAAAQ,IAAA,CAAAzB,MAAA;;AACA,YAAA0B,MAAAvB,KAAAC,KAAAC,IAAAL,KAAA,gBAAAA,EAAA,SAAA,gBAAAK,EAAA,gBAAA,gBAAAD,EAAA,WAAA,gBAAAD,EAAA,OACAa,EAAA,QAAA,EAAA,OAAA,CAAA,SAAAd,KAAAI,IAAAN,KAAA,gBAAAA,EAAA,qBAAA,gBAAAM,EAAA,cAAA,gBAAAJ,EAAA,IAAA,EAAA,CAAA,GACAyB,KAAAP,KAAAC,IAAArB,KAAA,gBAAAA,EAAA,qBAAA,gBAAAqB,EAAA,cAAA,gBAAAD,EAAA,OAEAQ,KAAAC,KAAAC,KAAAC,KAAAC,KAAAb,IAAAnB,KAAA,gBAAAA,EAAA,qBAAA,gBAAAmB,EAAA,aAAA,gBAAAa,EAAA,OAAA,gBAAAD,EAAA,SAAA,gBAAAD,EAAA,SAAA,gBAAAD,EAAA,KAAAC,IACAG,MAAAC,KAAAC,IAAAnC,KAAA,gBAAAA,EAAA,qBAAA,gBAAAmC,EAAA,cAAA,gBAAAD,EAAA,cAAAN,GACAQ,IAAA,KAAA,YAAAR,IAAA;AAEA,UAAAS,KAAAC,KAAAC,IAAAvC,KAAA,gBAAAA,EAAA,qBAAA,gBAAAuC,EAAA,cAAA,gBAAAD,EAAA;AAEA,aAAA,KAAA,aAAAD,MACAA,IAAAT,IAGAZ;AAAA,QAAA;AAAA,QACA;AAAA,UACA,OAAA;AAAA,YACA;AAAA,aACAwB,IAAAxC,KAAA,gBAAAA,EAAA,SAAA,gBAAAwC,EAAA;AAAA,aACAC,IAAAzC,KAAA,gBAAAA,EAAA,SAAA,gBAAAyC,EAAA;AAAA,UACA;AAAA,UACA,OAAA;AAAA,YACA,cAAAR;AAAA,YACA,OAAAI;AAAA,UACA;AAAA,UACA,MAAAK,IAAA1C,KAAA,gBAAAA,EAAA,SAAA,gBAAA0C,EAAA;AAAA,UACA,OAAA;AAAA;AAAA,YAEA,MAAA,KAAA,SAAAN,IAAA,cAAA;AAAA,YACA,UAAA,KAAA,cAAAO,KAAAC,IAAA5C,KAAA,gBAAAA,EAAA,qBAAA,gBAAA4C,EAAA,cAAA,gBAAAD,EAAA;AAAA,YACA,YAAA,KAAA;AAAA,YACA,IAAAE,IAAA7C,KAAA,gBAAAA,EAAA,qBAAA,gBAAA6C,EAAA;AAAA,UACA;AAAA,UACA,IAAA;AAAA,YACA,OAAA,KAAA;AAAA,YACA,MAAA,KAAA;AAAA;AAAA;AAAA,YAGA,GAAA,CAAA,CAAAlB,KAAA;AAAA,cACA,OAAA,CAAAnB,MAAA;AACA,gBAAAmB,KACAA,EAAAnB,CAAA;AAAA,cAEA;AAAA,YACA;AAAA,UACA;AAAA,QACA;AAAA,QACA;AAAA,UACAQ,EAAA,YAAA,EAAA,MAAA,OAAA,GAAA,CAAAU,CAAA,CAAA;AAAA,UACAU;AAAA,QACA;AAAA,MACA;AAAA,IACA,GAQAU,IAAA,CAAA7B,MAAA;;AACA,YAAA8B,MAAA1C,IAAA,KAAA,OAAA,SAAA,gBAAAA,EAAA,QACA,KAAA,cACAW,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,YACA,iBAAAZ,IAAA,KAAA,MAAA,eAAA,gBAAAA,EAAA;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,YACA,kBAAA;AAAA,UACA;AAAA,UACA,IAAA;AAAA,YACA,MAAA,KAAA;AAAA,YACA,cAAA,KAAA;AAAA,YACA,MAAA,KAAA;AAAA,UACA;AAAA,QACA;AAAA,QACA;AAAA,UACAY,EAAA,YAAA;AAAA,YACA,OAAA;AAAA,YACA,OAAA;AAAA,cACA,MAAA,KAAA;AAAA,cACA,UAAA,KAAA;AAAA,cACA,YAAA,KAAA;AAAA,YACA;AAAA,YACA,MAAA;AAAA,YACA,KAAA;AAAA,YACA,OAAA;AAAA,cACA,iBAAAM,IAAA,OAAA;AAAA,cACA,cAAA,KAAA,WAAA,OAAA,KAAA;AAAA,cACA,iBAAA,KAAA,SAAA,KAAA,WAAA;AAAA,cACA,iBAAA,KAAA,OAAA,SAAA;AAAA,YACA;AAAA,YACA,IAAA;AAAA,cACA,OAAA,KAAA;AAAA,cACA,MAAA,KAAA;AAAA,YACA;AAAA,UACA,GAAA;AAAA,YACAN,EAAA,YAAA,EAAA,MAAA,OAAA,GAAA,CAAA+B,CAAA,CAAA;AAAA,YACA,KAAA;AAAA,UACA,CAAA;AAAA,UACA/B,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,MAAAM,IAAA,OAAA;AAAA,cACA;AAAA,YACA,GAAA;AAAA,cACAL;AAAA,YACA,CAAA;AAAA,UACA,CAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAMA,QAAAA,EAAA,WAAA,KAAAM,EAAA,WAAA,KAAA,CAAA,KAAA;AACA,aAAAE,EAAAF,EAAA,CAAA,CAAA;AAMA,QAAAA,EAAA,SAAA,KAAA,KAAA,SAAA,GAAA;AACA,YAAAyB,IAAAzB,EAAA,MAAA,GAAA,KAAA,MAAA,GAEA0B,IAAAhC,EAAA,OAAA,CAAAjB,MAAA,CAAAgD,EAAA,SAAAhD,CAAA,CAAA;AACA,aAAAgB;AAAA,QAAA;AAAA,QACA;AAAA,UACA,OAAA;AAAA,YACA;AAAA,YACA,gBAAA,KAAA,cAAA;AAAA,UACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,UAEA,GAAAgC,EAAA,IAAAvB,CAAA;AAAA;AAAA,UAEAwB,EAAA,SAAA,IACAjC;AAAA,YAAA;AAAA,YACA;AAAA,cACA,OAAA;AAAA,gBACA;AAAA,gBACA;AAAA,kBACA,qBAAA,KAAA;AAAA,gBACA;AAAA,cACA;AAAA,YACA;AAAA,YACA;AAAA,cACA8B,EAAAG,CAAA;AAAA,YACA;AAAA,UAAA,IACA;AAAA,QACA;AAAA,MAAA;AAAA,IACA;AAKA,WAAAjC;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,QACA8B,EAAA7B,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;"}
+{"version":3,"file":"NcActions.mjs","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</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 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\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 * aria-hidden attribute for the icon slot\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}\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) {\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\t// Up or Shift+Tab\n\t\t\tif (event.keyCode === 38 || (event.keyCode === 9 && event.shiftKey)) {\n\t\t\t\tthis.focusPreviousAction(event)\n\t\t\t}\n\t\t\t// Down or Tab\n\t\t\tif (event.keyCode === 40 || (event.keyCode === 9 && !event.shiftKey)) {\n\t\t\t\tthis.focusNextAction(event)\n\t\t\t}\n\t\t\t// Page-Up\n\t\t\tif (event.keyCode === 33) {\n\t\t\t\tthis.focusFirstAction(event)\n\t\t\t}\n\t\t\t// Page-Down\n\t\t\tif (event.keyCode === 34) {\n\t\t\t\tthis.focusLastAction(event)\n\t\t\t}\n\t\t\t// Esc\n\t\t\tif (event.keyCode === 27) {\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\t// First element overflows to body-navigation (no preventDefault!) and closes Actions-menu\n\t\t\t\t\tthis.closeMenu()\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\t// Last element overflows to body-navigation (no preventDefault!) and closes Actions-menu\n\t\t\t\t\tthis.closeMenu()\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 isNavLink = (action) => {\n\t\t\tconst componentName = action?.componentOptions?.Ctor?.extendOptions?.name ?? action?.componentOptions?.tag\n\t\t\tconst href = action?.componentOptions?.propsData?.href\n\t\t\treturn (\n\t\t\t\tcomponentName === 'NcActionLink'\n\t\t\t\t\t&& !href?.startsWith('#')\n\t\t\t\t\t&& new URL(href, window.location.origin).origin === window.location.origin\n\t\t\t)\n\t\t}\n\t\t// Automatically detect whether all actions are website navigation links\n\t\tconst isNav = actions.every(isNavLink)\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\tariaHidden: this.ariaHidden,\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\tconst ariaExpandedForTrigger = () => {\n\t\t\t\treturn (isNav || this.opened) ? this.opened.toString() : null\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\tsetReturnFocus: this.$refs.menuButton?.$el,\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\tariaHidden: this.ariaHidden,\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': isNav ? 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'aria-expanded': ariaExpandedForTrigger(),\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: isNav ? null : 'menu',\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","NcButton","DotsHorizontal","NcPopover","value","t","GenRandomId","state","action","componentName","_e","_c","_b","_a","_d","returnFocus","event","menuItem","focusableItem","focusIndex","currentActiveElement","focusElement","liMenuParent","indexLength","firstSelectedIndex","button","h","actions","isNavLink","href","_g","_f","isNav","inlineActions","Vue","renderInlineAction","icon","attrs","clickListener","_h","text","_m","_l","_k","_j","_i","ariaLabel","_o","_n","buttonText","title","_q","_p","_r","_s","_t","_v","_u","_w","renderActionsPopover","triggerIcon","ariaExpandedForTrigger","renderedInlineActions","menuActions"],"mappings":"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"}

package/dist/Components/NcAppContent.cjs

@@ -1,17 +1,16 @@
-var P = require("../assets/index-ed4adf1d.css");
-const p = require("./NcButton.cjs"), r = require("../chunks/l10n-903083c4.cjs");
+var x = require("../assets/index-4271da53.css");
+const p = require("./NcButton.cjs"), r = require("../chunks/l10n-9f3afaf5.cjs");
 require("../Directives/Tooltip.cjs");
-const n = require("@nextcloud/event-bus"), c = require("vue-material-design-icons/ArrowRight.vue"), l = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), u = require("floating-vue"), g = require("../Mixins/isMobile.cjs"), h = require("@nextcloud/browser-storage"), d = require("@vueuse/core"), a = require("splitpanes");
+const n = require("@nextcloud/event-bus"), c = require("../chunks/ArrowRight-7315f6c1.cjs"), l = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), u = require("floating-vue"), g = require("../Mixins/isMobile.cjs"), h = require("@nextcloud/browser-storage"), d = require("@vueuse/core"), a = require("splitpanes");
 require("splitpanes/dist/splitpanes.css");
-const f = (t) => t && t.__esModule ? t : { default: t }, _ = /* @__PURE__ */ f(c);
-const m = {
+const f = {
   name: "NcAppDetailsToggle",
   directives: {
     tooltip: u.VTooltip
   },
   components: {
     NcButton: p,
-    ArrowRight: _.default
+    ArrowRight: c.ArrowRight
   },
   computed: {
     title() {
@@ -31,26 +30,26 @@ const m = {
     }
   }
 };
-var z = function() {
+var _ = function() {
   var e = this, i = e._self._c;
   return i("NcButton", { directives: [{ name: "tooltip", rawName: "v-tooltip", value: e.title, expression: "title" }], staticClass: "app-details-toggle", attrs: { "aria-label": e.title }, scopedSlots: e._u([{ key: "icon", fn: function() {
     return [i("ArrowRight", { attrs: { size: 20 } })];
   }, proxy: !0 }]) });
-}, S = [], v = /* @__PURE__ */ l.normalizeComponent(
+}, m = [], z = /* @__PURE__ */ l.normalizeComponent(
+  f,
+  _,
   m,
-  z,
-  S,
   !1,
   null,
   "5244e83e",
   null,
   null
 );
-const w = v.exports;
-const o = h.getBuilder("nextcloud").persist().build(), C = {
+const S = z.exports;
+const o = h.getBuilder("nextcloud").persist().build(), v = {
   name: "NcAppContent",
   components: {
-    NcAppDetailsToggle: w,
+    NcAppDetailsToggle: S,
     Pane: a.Pane,
     Splitpanes: a.Splitpanes
   },
@@ -199,20 +198,20 @@ const o = h.getBuilder("nextcloud").persist().build(), C = {
     }
   }
 };
-var N = function() {
+var w = function() {
   var e = this, i = e._self._c;
   return i("main", { staticClass: "app-content no-snapper", class: { "app-content--has-list": e.hasList }, attrs: { id: "app-content-vue" } }, [e.pageHeading ? i("h1", { staticClass: "hidden-visually" }, [e._v(" " + e._s(e.pageHeading) + " ")]) : e._e(), e.hasList ? [e.isMobile ? i("div", { staticClass: "app-content-wrapper app-content-wrapper--mobile", class: e.showDetails ? "app-content-wrapper--show-details" : "app-content-wrapper--show-list" }, [e.hasList && e.showDetails ? i("NcAppDetailsToggle", { nativeOn: { click: function(s) {
     return s.stopPropagation(), s.preventDefault(), e.hideDetails.apply(null, arguments);
   } } }) : e._e(), e._t("list"), e._t("default")], 2) : i("div", { staticClass: "app-content-wrapper" }, [i("Splitpanes", { staticClass: "default-theme", on: { resized: e.handlePaneResize } }, [i("Pane", { staticClass: "splitpanes__pane-list", attrs: { size: e.listPaneSize || e.paneDefaults.list.size, "min-size": e.paneDefaults.list.min, "max-size": e.paneDefaults.list.max } }, [e._t("list")], 2), i("Pane", { staticClass: "splitpanes__pane-details", attrs: { size: e.detailsPaneSize, "min-size": e.paneDefaults.details.min, "max-size": e.paneDefaults.details.max } }, [e._t("default")], 2)], 1)], 1)] : e._t("default")], 2);
-}, y = [], D = /* @__PURE__ */ l.normalizeComponent(
+}, C = [], N = /* @__PURE__ */ l.normalizeComponent(
+  v,
+  w,
   C,
-  N,
-  y,
   !1,
   null,
-  "9a2b658c",
+  "424ef3d1",
   null,
   null
 );
-const x = D.exports;
-module.exports = x;
+const y = N.exports;
+module.exports = y;