@nextcloud/vue 8.30.0 → 8.31.0

package/dist/chunks/{NcAppNavigationItem-BFF0p136.mjs → NcAppNavigationItem-DvVYHshm.mjs}

@@ -1,54 +1,38 @@
-import '../assets/NcAppNavigationItem-DKcGNjYx.css';
-import { N as NcActions } from "./NcActions-DdARGGZ_.mjs";
-import { N as NcActionButton } from "./NcActionButton-DC3oAI2L.mjs";
-import NcLoadingIcon from "../Components/NcLoadingIcon.mjs";
-import NcVNodes from "../Components/NcVNodes.mjs";
-import NcButton from "../Components/NcButton.mjs";
-import { r as register, N as t19, a as t, b as t49, O as t20 } from "./_l10n-CW0YfIWk.mjs";
+import '../assets/NcAppNavigationItem-Kua1hP7u.css';
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 import { C as ChevronDown } from "./ChevronDown-DFQfzh63.mjs";
 import { C as ChevronUp } from "./ChevronUp-C7Dy9Bph.mjs";
-import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+import { r as register, N as t20, a as t, b as t50, O as t21 } from "./_l10n-BEfeU7gr.mjs";
+import { N as NcButton } from "./NcButton-CWPBzbcC.mjs";
+import { N as NcInputConfirmCancel } from "./NcInputConfirmCancel-21vM2JHp.mjs";
 import { useIsMobile } from "../Composables/useIsMobile.mjs";
-import { N as NcInputConfirmCancel } from "./NcInputConfirmCancel-DA740BJ-.mjs";
-import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
-register(t19);
+import { G as GenRandomId } from "./GenRandomId-F5ebeBB_.mjs";
+import { N as NcActionButton } from "./NcActionButton-CVW8aRkE.mjs";
+import { N as NcActions } from "./NcActions-C832pWHO.mjs";
+import NcLoadingIcon from "../Components/NcLoadingIcon.mjs";
+import NcVNodes from "../Components/NcVNodes.mjs";
 const _sfc_main$3 = {
-  name: "NcAppNavigationIconCollapsible",
-  components: {
-    NcButton,
-    ChevronDown,
-    ChevronUp
-  },
+  name: "PencilIcon",
+  emits: ["click"],
   props: {
-    open: {
-      type: Boolean,
-      default: true
+    title: {
+      type: String
     },
-    active: {
-      type: Boolean,
-      required: true
-    }
-  },
-  emits: ["click"],
-  computed: {
-    labelButton() {
-      return this.open ? t("Collapse menu") : t("Open menu");
-    }
-  },
-  methods: {
-    onClick(e) {
-      this.$emit("click", e);
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
     }
   }
 };
 var _sfc_render$3 = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("NcButton", { staticClass: "icon-collapse", class: {
-    "icon-collapse--active": _vm.active,
-    "icon-collapse--open": _vm.open
-  }, attrs: { "aria-label": _vm.labelButton, "variant": _vm.active ? "tertiary-on-primary" : "tertiary" }, on: { "click": _vm.onClick }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_vm.open ? _c("ChevronUp", { attrs: { "size": 20 } }) : _c("ChevronDown", { attrs: { "size": 20 } })];
-  }, proxy: true }]) });
+  return _c("span", _vm._b({ staticClass: "material-design-icon pencil-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
 };
 var _sfc_staticRenderFns$3 = [];
 var __component__$3 = /* @__PURE__ */ normalizeComponent(
@@ -57,12 +41,11 @@ var __component__$3 = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns$3,
   false,
   null,
-  "11ec0ddd"
+  null
 );
-const NcAppNavigationIconCollapsible = __component__$3.exports;
-register(t20, t49);
+const Pencil = __component__$3.exports;
 const _sfc_main$2 = {
-  name: "PencilIcon",
+  name: "UndoIcon",
   emits: ["click"],
   props: {
     title: {
@@ -80,9 +63,9 @@ const _sfc_main$2 = {
 };
 var _sfc_render$2 = function render2() {
   var _vm = this, _c = _vm._self._c;
-  return _c("span", _vm._b({ staticClass: "material-design-icon pencil-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+  return _c("span", _vm._b({ staticClass: "material-design-icon undo-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
     return _vm.$emit("click", $event);
-  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
+  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
 };
 var _sfc_staticRenderFns$2 = [];
 var __component__$2 = /* @__PURE__ */ normalizeComponent(
@@ -93,29 +76,52 @@ var __component__$2 = /* @__PURE__ */ normalizeComponent(
   null,
   null
 );
-const Pencil = __component__$2.exports;
+const Undo = __component__$2.exports;
+register(t20);
 const _sfc_main$1 = {
-  name: "UndoIcon",
-  emits: ["click"],
+  name: "NcAppNavigationIconCollapsible",
+  components: {
+    NcButton,
+    ChevronDown,
+    ChevronUp
+  },
   props: {
-    title: {
-      type: String
-    },
-    fillColor: {
-      type: String,
-      default: "currentColor"
+    /**
+     * Is the list currently open (or collapsed)
+     */
+    open: {
+      type: Boolean,
+      // eslint-disable-next-line vue/no-boolean-default
+      default: true
     },
-    size: {
-      type: Number,
-      default: 24
+    /**
+     * Is the navigation item currently active.
+     */
+    active: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: ["click"],
+  computed: {
+    labelButton() {
+      return this.open ? t("Collapse menu") : t("Open menu");
+    }
+  },
+  methods: {
+    onClick(e) {
+      this.$emit("click", e);
     }
   }
 };
 var _sfc_render$1 = function render3() {
   var _vm = this, _c = _vm._self._c;
-  return _c("span", _vm._b({ staticClass: "material-design-icon undo-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
-    return _vm.$emit("click", $event);
-  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
+  return _c("NcButton", { staticClass: "icon-collapse", class: {
+    "icon-collapse--active": _vm.active,
+    "icon-collapse--open": _vm.open
+  }, attrs: { "aria-label": _vm.labelButton, "variant": _vm.active ? "tertiary-on-primary" : "tertiary" }, on: { "click": _vm.onClick }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_vm.open ? _c("ChevronUp", { attrs: { "size": 20 } }) : _c("ChevronDown", { attrs: { "size": 20 } })];
+  }, proxy: true }]) });
 };
 var _sfc_staticRenderFns$1 = [];
 var __component__$1 = /* @__PURE__ */ normalizeComponent(
@@ -124,9 +130,10 @@ var __component__$1 = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns$1,
   false,
   null,
-  null
+  "c8d5bee5"
 );
-const Undo = __component__$1.exports;
+const NcAppNavigationIconCollapsible = __component__$1.exports;
+register(t21, t50);
 const _sfc_main = {
   name: "NcAppNavigationItem",
   components: {
@@ -479,22 +486,22 @@ var _sfc_render = function render4() {
     return [_c("div", { staticClass: "app-navigation-entry", class: {
       "app-navigation-entry--editing": _vm.editingActive,
       "app-navigation-entry--deleted": _vm.undo,
-      "active": isActive && _vm.to || _vm.active
-    } }, [!_vm.undo ? _c("a", { staticClass: "app-navigation-entry-link", attrs: { "aria-current": _vm.active || isActive && _vm.to ? "page" : void 0, "aria-description": _vm.ariaDescription, "aria-expanded": _vm.$scopedSlots.default ? _vm.opened.toString() : void 0, "href": _vm.href || routerLinkHref || "#", "target": _vm.isExternal(_vm.href) ? "_blank" : void 0, "title": _vm.title || _vm.name }, on: { "blur": _vm.handleBlur, "click": function($event) {
+      active: _vm.to && isActive || _vm.active
+    } }, [!_vm.undo ? _c("a", { staticClass: "app-navigation-entry-link", attrs: { "aria-current": _vm.active || _vm.to && isActive ? "page" : void 0, "aria-description": _vm.ariaDescription, "aria-expanded": _vm.$scopedSlots.default ? _vm.opened.toString() : void 0, "href": _vm.href || routerLinkHref || "#", "target": _vm.isExternal(_vm.href) ? "_blank" : void 0, "title": _vm.title || _vm.name }, on: { "blur": _vm.handleBlur, "click": function($event) {
       return _vm.onClick($event, navigate, routerLinkHref);
     }, "focus": _vm.handleFocus, "keydown": function($event) {
       if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "tab", 9, $event.key, "Tab")) return null;
       if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey) return null;
       return _vm.handleTab.apply(null, arguments);
-    } } }, [_c("div", { staticClass: "app-navigation-entry-icon", class: { [_vm.icon]: _vm.icon } }, [_vm.loading ? _c("NcLoadingIcon") : _vm._t("icon", null, { "active": _vm.active || _vm.to && isActive })], 2), !_vm.editingActive ? _c("span", { staticClass: "app-navigation-entry__name" }, [_vm._v(" " + _vm._s(_vm.name) + " ")]) : _vm._e(), _vm.editingActive ? _c("div", { staticClass: "editingContainer" }, [_c("NcInputConfirmCancel", { ref: "editingInput", attrs: { "placeholder": _vm.editPlaceholder !== "" ? _vm.editPlaceholder : _vm.name, "primary": isActive && _vm.to || _vm.active }, on: { "cancel": _vm.cancelEditing, "confirm": _vm.handleEditingDone }, model: { value: _vm.editingValue, callback: function($$v) {
+    } } }, [_c("div", { staticClass: "app-navigation-entry-icon", class: { [_vm.icon]: _vm.icon } }, [_vm.loading ? _c("NcLoadingIcon") : _vm._t("icon", null, { "active": _vm.active || _vm.to && isActive })], 2), !_vm.editingActive ? _c("span", { staticClass: "app-navigation-entry__name" }, [_vm._v(" " + _vm._s(_vm.name) + " ")]) : _vm._e(), _vm.editingActive ? _c("div", { staticClass: "editingContainer" }, [_c("NcInputConfirmCancel", { ref: "editingInput", attrs: { "placeholder": _vm.editPlaceholder !== "" ? _vm.editPlaceholder : _vm.name, "primary": _vm.to && isActive || _vm.active }, on: { "cancel": _vm.cancelEditing, "confirm": _vm.handleEditingDone }, model: { value: _vm.editingValue, callback: function($$v) {
       _vm.editingValue = $$v;
-    }, expression: "editingValue" } })], 1) : _vm._e()]) : _vm._e(), _vm.undo ? _c("div", { staticClass: "app-navigation-entry__deleted" }, [_c("div", { staticClass: "app-navigation-entry__deleted-description" }, [_vm._v(" " + _vm._s(_vm.name) + " ")])]) : _vm._e(), _vm.hasUtils && !_vm.editingActive ? _c("div", { staticClass: "app-navigation-entry__utils", class: { "app-navigation-entry__utils--display-actions": _vm.forceDisplayActions || _vm.menuOpenLocalValue || _vm.menuOpen } }, [_vm.$scopedSlots.counter ? _c("div", { staticClass: "app-navigation-entry__counter-wrapper" }, [_vm._t("counter")], 2) : _vm._e(), _vm.$scopedSlots.actions || _vm.editable && !_vm.editingActive || _vm.undo ? _c("NcActions", { ref: "actions", staticClass: "app-navigation-entry__actions", attrs: { "inline": _vm.inlineActions, "container": "#app-navigation-vue", "boundaries-element": _vm.actionsBoundariesElement, "placement": _vm.menuPlacement, "open": _vm.menuOpen, "type": isActive && _vm.to || _vm.active ? "tertiary-on-primary" : "tertiary", "force-menu": _vm.forceMenu, "default-icon": _vm.menuIcon }, on: { "update:open": _vm.onMenuToggle }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    }, expression: "editingValue" } })], 1) : _vm._e()]) : _vm._e(), _vm.undo ? _c("div", { staticClass: "app-navigation-entry__deleted" }, [_c("div", { staticClass: "app-navigation-entry__deleted-description" }, [_vm._v(" " + _vm._s(_vm.name) + " ")])]) : _vm._e(), _vm.hasUtils && !_vm.editingActive ? _c("div", { staticClass: "app-navigation-entry__utils", class: { "app-navigation-entry__utils--display-actions": _vm.forceDisplayActions || _vm.menuOpenLocalValue || _vm.menuOpen } }, [_vm.$scopedSlots.counter ? _c("div", { staticClass: "app-navigation-entry__counter-wrapper" }, [_vm._t("counter")], 2) : _vm._e(), _vm.$scopedSlots.actions || _vm.editable && !_vm.editingActive || _vm.undo ? _c("NcActions", { ref: "actions", staticClass: "app-navigation-entry__actions", attrs: { "inline": _vm.inlineActions, "container": "#app-navigation-vue", "boundaries-element": _vm.actionsBoundariesElement, "placement": _vm.menuPlacement, "open": _vm.menuOpen, "type": _vm.to && isActive || _vm.active ? "tertiary-on-primary" : "tertiary", "force-menu": _vm.forceMenu, "default-icon": _vm.menuIcon }, on: { "update:open": _vm.onMenuToggle }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
       return [_vm._t("menu-icon")];
     }, proxy: true }], null, true) }, [_vm.editable && !_vm.editingActive ? _c("NcActionButton", { attrs: { "aria-label": _vm.editButtonAriaLabel }, on: { "click": _vm.handleEdit }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
       return [_c("Pencil", { attrs: { "size": 20 } })];
     }, proxy: true }], null, true) }, [_vm._v(" " + _vm._s(_vm.editLabel) + " ")]) : _vm._e(), _vm.undo ? _c("NcActionButton", { attrs: { "aria-label": _vm.undoButtonAriaLabel }, on: { "click": _vm.handleUndo }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
       return [_c("Undo", { attrs: { "size": 20 } })];
-    }, proxy: true }], null, true) }) : _vm._e(), _vm._t("actions")], 2) : _vm._e()], 1) : _vm._e(), _vm.isCollapsible() ? _c("NcAppNavigationIconCollapsible", { attrs: { "active": isActive && _vm.to || _vm.active, "open": _vm.opened }, on: { "click": function($event) {
+    }, proxy: true }], null, true) }) : _vm._e(), _vm._t("actions")], 2) : _vm._e()], 1) : _vm._e(), _vm.isCollapsible() ? _c("NcAppNavigationIconCollapsible", { attrs: { "active": _vm.to && isActive || _vm.active, "open": _vm.opened }, on: { "click": function($event) {
       $event.preventDefault();
       $event.stopPropagation();
       return _vm.toggleCollapse.apply(null, arguments);
@@ -508,10 +515,10 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "76a56f53"
+  "587932fa"
 );
 const NcAppNavigationItem = __component__.exports;
 export {
   NcAppNavigationItem as N
 };
-//# sourceMappingURL=NcAppNavigationItem-BFF0p136.mjs.map
+//# sourceMappingURL=NcAppNavigationItem-DvVYHshm.mjs.map

package/dist/chunks/NcAppNavigationItem-DvVYHshm.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationItem-DvVYHshm.mjs","sources":["../../node_modules/vue-material-design-icons/Pencil.vue","../../node_modules/vue-material-design-icons/Undo.vue","../../src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue","../../src/components/NcAppNavigationItem/NcAppNavigationItem.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon pencil-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"PencilIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon undo-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"UndoIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<!-- Button to expand or collapse children -->\n\t<NcButton\n\t\tclass=\"icon-collapse\"\n\t\t:class=\"{\n\t\t\t'icon-collapse--active': active,\n\t\t\t'icon-collapse--open': open,\n\t\t}\"\n\t\t:aria-label=\"labelButton\"\n\t\t:variant=\"active ? 'tertiary-on-primary' : 'tertiary'\"\n\t\t@click=\"onClick\">\n\t\t<template #icon>\n\t\t\t<ChevronUp\n\t\t\t\tv-if=\"open\"\n\t\t\t\t:size=\"20\" />\n\t\t\t<ChevronDown\n\t\t\t\tv-else\n\t\t\t\t:size=\"20\" />\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport ChevronDown from 'vue-material-design-icons/ChevronDown.vue'\nimport ChevronUp from 'vue-material-design-icons/ChevronUp.vue'\nimport { t } from '../../l10n.js'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcAppNavigationIconCollapsible',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tChevronDown,\n\t\tChevronUp,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Is the list currently open (or collapsed)\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\t// eslint-disable-next-line vue/no-boolean-default\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Is the navigation item currently active.\n\t\t */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tcomputed: {\n\t\tlabelButton() {\n\t\t\treturn this.open ? t('Collapse menu') : t('Open menu')\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonClick(e) {\n\t\t\tthis.$emit('click', e)\n\t\t},\n\t},\n\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.icon-collapse {\n\tposition: relative;\n\tinset-inline-end: 0;\n\n\t// the whole navigation item is hovered thus will have the hover color - to distinguish we need to set a different color here.\n\t&:hover {\n\t\tbackground-color: var(--color-background-dark) !important;\n\t}\n\t&--active:hover {\n\t\tbackground-color: var(--color-primary-element) !important;\n\t}\n}\n</style>\n","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### Usage\n\n#### Simple element\n\n* With an icon:\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"My name\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Check :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t},\n\t}\n\t</script>\n```\n* With a spinning loader instead of the icon:\n\n```vue\n<ul>\n\t<NcAppNavigationItem name=\"Loading Item\" :loading=\"true\" />\n</ul>\n```\n* With an active state (only needed when not using `vue-router` and the `to` property, otherwise this is set automatically)\n\n```vue\n<ul>\n\t<NcAppNavigationItem name=\"Current page\" :active=\"true\" />\n</ul>\n```\n\n* Using different icons based on the active state (e.g. using vue-router and showing the filled variant for the current route):\n\n```vue\n<template>\n\t<ul>\n\t\t<NcAppNavigationItem name=\"Current page\" :active=\"true\">\n\t\t\t<template #icon=\"{ active }\">\n\t\t\t\t<NcIconSvgWrapper :path=\"active ? mdiFolder : mdiFolderOutline\" />\n\t\t\t</template>\n\t\t</NcAppNavigationItem>\n\t\t<NcAppNavigationItem name=\"Other page\">\n\t\t\t<template #icon=\"{ active }\">\n\t\t\t\t<NcIconSvgWrapper :path=\"active ? mdiFolder : mdiFolderOutline\" />\n\t\t\t</template>\n\t\t</NcAppNavigationItem>\n\t</ul>\n</template>\n<script>\nimport { mdiFolder, mdiFolderOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiFolder,\n\t\t\tmdiFolderOutline,\n\t\t}\n\t},\n}\n</script>\n```\n\n#### Element with actions\nWrap the children in a template. If you have more than 2 actions, a popover menu and a menu\nbutton will be automatically created.\n\n```vue\n\t<template>\n\t\t<div id=\"app-navigation-vue\"><!-- Just a wrapper necessary in the docs. Not needed when NcAppNavigation is correctly used as parent. -->\n\t\t\t<ul>\n\t\t\t\t<NcAppNavigationItem name=\"Item with actions\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Check :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tEdit\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tDelete\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionLink name=\"Link\" href=\"https://nextcloud.com\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcActionLink>\n\t\t\t\t\t</template>\n\t\t\t\t</NcAppNavigationItem>\n\t\t\t</ul>\n\t\t</div>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check.vue'\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\n\timport Pencil from 'vue-material-design-icons/Pencil.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t\tDelete,\n\t\t\tOpenInNew,\n\t\t\tPencil,\n\t\t},\n\t}\n\t</script>\n```\n\n#### Element with counter\nJust nest the counter in a template within `<NcAppNavigationItem>` and add `#counter` to it.\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"Item with counter\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Folder :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #counter>\n\t\t\t\t\t<NcCounterBubble>\n\t\t\t\t\t\t99+\n\t\t\t\t\t</NcCounterBubble>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Folder from 'vue-material-design-icons/Folder.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tFolder,\n\t\t},\n\t}\n\t</script>\n```\n\n#### Element with children\n\nWrap the children in a template with the `slot` property and use the prop `allowCollapse` to choose wether to allow or\nprevent the user from collapsing the items.\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"Item with children\" :allowCollapse=\"true\" :open=\"true\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Folder :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #counter>\n\t\t\t\t\t<NcCounterBubble>\n\t\t\t\t\t\t99+\n\t\t\t\t\t</NcCounterBubble>\n\t\t\t\t</template>\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tEdit\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDelete\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionLink name=\"Link\" href=\"https://nextcloud.com\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcActionLink>\n\t\t\t\t</template>\n\t\t\t\t<template>\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild1\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild2\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild3\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild4\" />\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Folder from 'vue-material-design-icons/Folder.vue'\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\n\timport Pencil from 'vue-material-design-icons/Pencil.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tFolder,\n\t\t\tDelete,\n\t\t\tOpenInNew,\n\t\t\tPencil,\n\t\t},\n\t}\n\t</script>\n```\n\n#### Editable element\nAdd the prop `:editable=true` and an edit placeholder if you need it. By default\nthe placeholder is the previous name of the element.\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"Editable Item\" :editable=\"true\"\n\t\t\t\teditPlaceholder=\"your_placeholder_here\" @update:name=\"function(value){alert(value)}\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Folder :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Folder from 'vue-material-design-icons/Folder.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tFolder,\n\t\t},\n\t}\n\t</script>\n```\n\n#### Undo element\nJust set the `undo` and `name` props. When clicking the undo button, an `undo` event is emitted.\n\n```\n<ul>\n\t<NcAppNavigationItem :undo=\"true\" name=\"Deleted important entry\" @undo=\"alert('undo delete')\"  />\n</ul>\n```\n\n#### Link element\nHref that start by http will be treated as external and opened in a new tab\n```\n<div>\n\t<ul>\n\t\t<NcAppNavigationItem name=\"Files\" href=\"/index.php/apps/files\" />\n\t\t<NcAppNavigationItem name=\"Nextcloud\" href=\"https://nextcloud.com\" />\n\t</ul>\n</div>\n```\n\n#### Custom title\n```\n<ul>\n\t<NcAppNavigationItem name=\"Nextcloud\" title=\"Open the Nextcloud website\" href=\"https://nextcloud.com\" />\n</ul>\n```\n\n#### Pinned element\nJust set the `pinned` prop.\n```\n<ul>\n\t<NcAppNavigationItem name=\"Pinned item\" :pinned=\"true\" />\n</ul>\n```\n</docs>\n\n<template>\n\t<li\n\t\t:id=\"id\"\n\t\t:class=\"{\n\t\t\t'app-navigation-entry--opened': opened,\n\t\t\t'app-navigation-entry--pinned': pinned,\n\t\t\t'app-navigation-entry--collapsible': isCollapsible(),\n\t\t}\"\n\t\tclass=\"app-navigation-entry-wrapper\">\n\t\t<component\n\t\t\t:is=\"isRouterLink ? 'router-link' : 'NcVNodes'\"\n\t\t\tv-slot=\"{ href: routerLinkHref, navigate, isActive }\"\n\t\t\t:custom=\"isRouterLink ? true : false\"\n\t\t\t:to=\"to\"\n\t\t\t:exact=\"isRouterLink ? exact : null\">\n\t\t\t<div\n\t\t\t\t:class=\"{\n\t\t\t\t\t'app-navigation-entry--editing': editingActive,\n\t\t\t\t\t'app-navigation-entry--deleted': undo,\n\t\t\t\t\tactive: (to && isActive) || active,\n\t\t\t\t}\"\n\t\t\t\tclass=\"app-navigation-entry\">\n\t\t\t\t<!-- Icon and name -->\n\t\t\t\t<a\n\t\t\t\t\tv-if=\"!undo\"\n\t\t\t\t\tclass=\"app-navigation-entry-link\"\n\t\t\t\t\t:aria-current=\"active || (to && isActive) ? 'page' : undefined\"\n\t\t\t\t\t:aria-description=\"ariaDescription\"\n\t\t\t\t\t:aria-expanded=\"$scopedSlots.default ? opened.toString() : undefined\"\n\t\t\t\t\t:href=\"href || routerLinkHref || '#'\"\n\t\t\t\t\t:target=\"isExternal(href) ? '_blank' : undefined\"\n\t\t\t\t\t:title=\"title || name\"\n\t\t\t\t\t@blur=\"handleBlur\"\n\t\t\t\t\t@click=\"onClick($event, navigate, routerLinkHref)\"\n\t\t\t\t\t@focus=\"handleFocus\"\n\t\t\t\t\t@keydown.tab.exact=\"handleTab\">\n\n\t\t\t\t\t<!-- icon if not collapsible -->\n\t\t\t\t\t<!-- never show the icon over the collapsible if mobile -->\n\t\t\t\t\t<div\n\t\t\t\t\t\t:class=\"{ [icon]: icon }\"\n\t\t\t\t\t\tclass=\"app-navigation-entry-icon\">\n\t\t\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t\t\t<!-- @slot Slot for the optional leading icon. This slots get the `active`-slot attribute passed which is based on the vue-routers active route or the `active` prop. -->\n\t\t\t\t\t\t<slot v-else name=\"icon\" :active=\"active || (to && isActive)\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<span v-if=\"!editingActive\" class=\"app-navigation-entry__name\">\n\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div v-if=\"editingActive\" class=\"editingContainer\">\n\t\t\t\t\t\t<NcInputConfirmCancel\n\t\t\t\t\t\t\tref=\"editingInput\"\n\t\t\t\t\t\t\tv-model=\"editingValue\"\n\t\t\t\t\t\t\t:placeholder=\"editPlaceholder !== '' ? editPlaceholder : name\"\n\t\t\t\t\t\t\t:primary=\"(to && isActive) || active\"\n\t\t\t\t\t\t\t@cancel=\"cancelEditing\"\n\t\t\t\t\t\t\t@confirm=\"handleEditingDone\" />\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\n\t\t\t\t<!-- undo entry -->\n\t\t\t\t<div v-if=\"undo\" class=\"app-navigation-entry__deleted\">\n\t\t\t\t\t<div class=\"app-navigation-entry__deleted-description\">\n\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Counter and Actions -->\n\t\t\t\t<div\n\t\t\t\t\tv-if=\"hasUtils && !editingActive\"\n\t\t\t\t\tclass=\"app-navigation-entry__utils\"\n\t\t\t\t\t:class=\"{ 'app-navigation-entry__utils--display-actions': forceDisplayActions || menuOpenLocalValue || menuOpen }\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-if=\"$scopedSlots.counter\"\n\t\t\t\t\t\tclass=\"app-navigation-entry__counter-wrapper\">\n\t\t\t\t\t\t<!-- @slot Slot for the `NcCounterBubble` -->\n\t\t\t\t\t\t<slot name=\"counter\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<NcActions\n\t\t\t\t\t\tv-if=\"$scopedSlots.actions || (editable && !editingActive) || undo\"\n\t\t\t\t\t\tref=\"actions\"\n\t\t\t\t\t\t:inline=\"inlineActions\"\n\t\t\t\t\t\tclass=\"app-navigation-entry__actions\"\n\t\t\t\t\t\tcontainer=\"#app-navigation-vue\"\n\t\t\t\t\t\t:boundaries-element=\"actionsBoundariesElement\"\n\t\t\t\t\t\t:placement=\"menuPlacement\"\n\t\t\t\t\t\t:open=\"menuOpen\"\n\t\t\t\t\t\t:type=\"(to && isActive) || active ? 'tertiary-on-primary' : 'tertiary'\"\n\t\t\t\t\t\t:force-menu=\"forceMenu\"\n\t\t\t\t\t\t:default-icon=\"menuIcon\"\n\t\t\t\t\t\t@update:open=\"onMenuToggle\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<!-- @slot Slot for the custom menu icon -->\n\t\t\t\t\t\t\t<slot name=\"menu-icon\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<NcActionButton\n\t\t\t\t\t\t\tv-if=\"editable && !editingActive\"\n\t\t\t\t\t\t\t:aria-label=\"editButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"handleEdit\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ editLabel }}\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionButton\n\t\t\t\t\t\t\tv-if=\"undo\"\n\t\t\t\t\t\t\t:aria-label=\"undoButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"handleUndo\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Undo :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<!-- @slot Slot for additional `NcAction*` -->\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\t\t\t\t<NcAppNavigationIconCollapsible\n\t\t\t\t\tv-if=\"isCollapsible()\"\n\t\t\t\t\t:active=\"(to && isActive) || active\"\n\t\t\t\t\t:open=\"opened\"\n\t\t\t\t\t@click.prevent.stop=\"toggleCollapse\" />\n\n\t\t\t\t<!-- @slot Slot for anything (virtual) that should be mounted in the component, like a related modal -->\n\t\t\t\t<slot name=\"extra\" />\n\t\t\t</div>\n\t\t</component>\n\t\t<!-- Children elements -->\n\t\t<ul v-if=\"canHaveChildren && $scopedSlots.default\" class=\"app-navigation-entry__children\">\n\t\t\t<!-- @slot Slot for children -->\n\t\t\t<slot />\n\t\t</ul>\n\t</li>\n</template>\n\n<script>\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\nimport Undo from 'vue-material-design-icons/Undo.vue'\nimport NcAppNavigationIconCollapsible from './NcAppNavigationIconCollapsible.vue'\nimport NcInputConfirmCancel from './NcInputConfirmCancel.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\n\nexport default {\n\tname: 'NcAppNavigationItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcActionButton,\n\t\tNcAppNavigationIconCollapsible,\n\t\tNcInputConfirmCancel,\n\t\tNcLoadingIcon,\n\t\tNcVNodes,\n\t\tPencil,\n\t\tUndo,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * If you are not using vue-router you can use the property to set this item as the active navigation entry.\n\t\t * When using vue-router and the `to` property this is set automatically.\n\t\t */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The main text content of the entry.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The title attribute of the element.\n\t\t */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the list item element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'app-navigation-item-' + GenRandomId(),\n\t\t\tvalidator: (id) => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * Refers to the icon on the left, this prop accepts a class\n\t\t * like 'icon-category-enabled'.\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Displays a loading animated icon on the left of the element\n\t\t * instead of the icon.\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Passing in a route will make the root element of this\n\t\t * component a `<router-link />` that points to that route.\n\t\t * By leaving this blank, the root element will be a `<li>`.\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * A direct link. This will be used as the `href` attribute.\n\t\t * This will ignore any `to` prop being defined.\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Pass in `true` if you want the matching behaviour to\n\t\t * be non-inclusive: https://router.vuejs.org/api/#exact\n\t\t */\n\t\texact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Gives the possibility to collapse the children elements into the\n\t\t * parent element (true) or expands the children elements (false).\n\t\t */\n\t\tallowCollapse: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Makes the name of the item editable by providing an `ActionButton`\n\t\t * component that toggles a form\n\t\t */\n\t\teditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Only for 'editable' items, sets label for the edit action button.\n\t\t */\n\t\teditLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Only for items in 'editable' mode, sets the placeholder text for the editing form.\n\t\t */\n\t\teditPlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Pins the item to the bottom left area, above the settings. Do not\n\t\t * place 'non-pinned' `AppnavigationItem` components below `pinned`\n\t\t * ones.\n\t\t */\n\t\tpinned: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Puts the item in the 'undo' state.\n\t\t */\n\t\tundo: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The navigation collapsible state (synced)\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 * The actions menu open state (synced)\n\t\t */\n\t\tmenuOpen: {\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 * The action's menu default icon\n\t\t */\n\t\tmenuIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The action's menu direction\n\t\t */\n\t\tmenuPlacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\t/**\n\t\t * Entry aria details\n\t\t */\n\t\tariaDescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * To be used only when the elements in the actions menu are very important\n\t\t */\n\t\tforceDisplayActions: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Number of action items outside the menu\n\t\t */\n\t\tinlineActions: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:menuOpen',\n\t\t'update:open',\n\t\t'update:name',\n\t\t'click',\n\t\t'undo',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\teditingValue: '',\n\t\t\topened: this.open, // Collapsible state\n\t\t\teditingActive: false,\n\t\t\t/**\n\t\t\t * Tracks the open state of the actions menu\n\t\t\t */\n\t\t\tmenuOpenLocalValue: false,\n\t\t\tfocused: false,\n\t\t\tactionsBoundariesElement: undefined,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tisRouterLink() {\n\t\t\treturn this.to && !this.href\n\t\t},\n\n\t\t// Checks if the component is already a children of another\n\t\t// instance of AppNavigationItem\n\t\tcanHaveChildren() {\n\t\t\tif (this.$parent.$options._componentTag === 'AppNavigationItem') {\n\t\t\t\treturn false\n\t\t\t} else {\n\t\t\t\treturn true\n\t\t\t}\n\t\t},\n\n\t\thasUtils() {\n\t\t\tif (this.$scopedSlots.actions || this.$scopedSlots.counter || this.editable || this.undo) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\teditButtonAriaLabel() {\n\t\t\treturn this.editLabel ? this.editLabel : t('Edit item')\n\t\t},\n\n\t\tundoButtonAriaLabel() {\n\t\t\treturn t('Undo changes')\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(newVal) {\n\t\t\tthis.opened = newVal\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.actionsBoundariesElement = document.querySelector('#content-vue') || undefined\n\t},\n\n\tmethods: {\n\t\t// sync opened menu state with prop\n\t\tonMenuToggle(state) {\n\t\t\tthis.$emit('update:menuOpen', state)\n\t\t\tthis.menuOpenLocalValue = state\n\t\t},\n\n\t\t// toggle the collapsible state\n\t\ttoggleCollapse() {\n\t\t\tthis.opened = !this.opened\n\t\t\tthis.$emit('update:open', this.opened)\n\t\t},\n\n\t\t/**\n\t\t * Handle link click\n\t\t *\n\t\t * @param {PointerEvent} event - Native click event\n\t\t * @param {Function} [navigate] - VueRouter link's navigate if any\n\t\t * @param {string} [routerLinkHref] - VueRouter link's href\n\t\t */\n\t\tonClick(event, navigate, routerLinkHref) {\n\t\t\t// Always forward native event\n\t\t\tthis.$emit('click', event)\n\t\t\t// Do not navigate with control keys - it is opening in a new tab\n\t\t\tif (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Prevent default link behaviour if it's a router-link and navigate manually\n\t\t\tif (routerLinkHref) {\n\t\t\t\tnavigate?.(event)\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\t// Edition methods\n\t\thandleEdit() {\n\t\t\tthis.editingValue = this.name\n\t\t\tthis.editingActive = true\n\t\t\tthis.onMenuToggle(false)\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$refs.editingInput.focusInput()\n\t\t\t})\n\t\t},\n\n\t\tcancelEditing() {\n\t\t\tthis.editingActive = false\n\t\t},\n\n\t\thandleEditingDone() {\n\t\t\tthis.$emit('update:name', this.editingValue)\n\t\t\tthis.editingValue = ''\n\t\t\tthis.editingActive = false\n\t\t},\n\n\t\t// Undo methods\n\t\thandleUndo() {\n\t\t\tthis.$emit('undo')\n\t\t},\n\n\t\t/**\n\t\t * Does this item have children and is collapsing allowed via the prop?\n\t\t *\n\t\t * @return {boolean} True, if the item can be collapsed\n\t\t */\n\t\tisCollapsible() {\n\t\t\treturn this.allowCollapse && !!this.$scopedSlots.default\n\t\t},\n\n\t\t/**\n\t\t * Show actions upon focus\n\t\t */\n\t\thandleFocus() {\n\t\t\tthis.focused = true\n\t\t},\n\n\t\thandleBlur() {\n\t\t\tthis.focused = false\n\t\t},\n\n\t\t/**\n\t\t * This method checks if the root element of the component is focused and\n\t\t * if that's the case it focuses the actions button if available\n\t\t *\n\t\t * @param {Event} e the keydown event\n\t\t */\n\t\thandleTab(e) {\n\t\t\t// If there is no actions menu, do nothing.\n\t\t\tif (!this.$refs.actions) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.focused) {\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.$refs.actions.$refs.triggerButton.$el.focus()\n\t\t\t\tthis.focused = false\n\t\t\t} else {\n\t\t\t\tthis.$refs.actions.$refs.triggerButton.$el.blur()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Is this an external link\n\t\t *\n\t\t * @param {string} href The link to check\n\t\t * @return {boolean} Whether it is external or not\n\t\t */\n\t\tisExternal(href) {\n\t\t\t// Match any protocol\n\t\t\treturn href && href.match(/[a-z]+:\\/\\//i)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@import '../../assets/NcAppNavigationItem';\n</style>\n"],"names":["_sfc_main"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/chunks/{NcAppNavigationItem-D1CEGuhm.cjs → NcAppNavigationItem-ZOXUMmX5.cjs}

@@ -1,55 +1,39 @@
-require('../assets/NcAppNavigationItem-DKcGNjYx.css');
+require('../assets/NcAppNavigationItem-Kua1hP7u.css');
 "use strict";
-const NcActions = require("./NcActions-DRCkAU8h.cjs");
-const NcActionButton = require("./NcActionButton-BhSk7AAp.cjs");
-const Components_NcLoadingIcon = require("../Components/NcLoadingIcon.cjs");
-const Components_NcVNodes = require("../Components/NcVNodes.cjs");
-const Components_NcButton = require("../Components/NcButton.cjs");
-const _l10n = require("./_l10n-RKohWu5d.cjs");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const ChevronDown = require("./ChevronDown-BlfyuflD.cjs");
 const ChevronUp = require("./ChevronUp-Bpd__OBZ.cjs");
-const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+const _l10n = require("./_l10n-DM-VRK9x.cjs");
+const NcButton = require("./NcButton-DOsCAjiE.cjs");
+const NcInputConfirmCancel = require("./NcInputConfirmCancel-BqZm3WBG.cjs");
 const Composables_useIsMobile = require("../Composables/useIsMobile.cjs");
-const NcInputConfirmCancel = require("./NcInputConfirmCancel-Dz7-CkOl.cjs");
-const GenRandomId = require("./GenRandomId-BQDud3d4.cjs");
-_l10n.register(_l10n.t19);
+const GenRandomId = require("./GenRandomId-D7iOvpZS.cjs");
+const NcActionButton = require("./NcActionButton-CFXzNoFT.cjs");
+const NcActions = require("./NcActions-B7oXbiVt.cjs");
+const Components_NcLoadingIcon = require("../Components/NcLoadingIcon.cjs");
+const Components_NcVNodes = require("../Components/NcVNodes.cjs");
 const _sfc_main$3 = {
-  name: "NcAppNavigationIconCollapsible",
-  components: {
-    NcButton: Components_NcButton,
-    ChevronDown: ChevronDown.ChevronDown,
-    ChevronUp: ChevronUp.ChevronUp
-  },
+  name: "PencilIcon",
+  emits: ["click"],
   props: {
-    open: {
-      type: Boolean,
-      default: true
+    title: {
+      type: String
     },
-    active: {
-      type: Boolean,
-      required: true
-    }
-  },
-  emits: ["click"],
-  computed: {
-    labelButton() {
-      return this.open ? _l10n.t("Collapse menu") : _l10n.t("Open menu");
-    }
-  },
-  methods: {
-    onClick(e) {
-      this.$emit("click", e);
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
     }
   }
 };
 var _sfc_render$3 = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("NcButton", { staticClass: "icon-collapse", class: {
-    "icon-collapse--active": _vm.active,
-    "icon-collapse--open": _vm.open
-  }, attrs: { "aria-label": _vm.labelButton, "variant": _vm.active ? "tertiary-on-primary" : "tertiary" }, on: { "click": _vm.onClick }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_vm.open ? _c("ChevronUp", { attrs: { "size": 20 } }) : _c("ChevronDown", { attrs: { "size": 20 } })];
-  }, proxy: true }]) });
+  return _c("span", _vm._b({ staticClass: "material-design-icon pencil-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
 };
 var _sfc_staticRenderFns$3 = [];
 var __component__$3 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
@@ -58,12 +42,11 @@ var __component__$3 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns$3,
   false,
   null,
-  "11ec0ddd"
+  null
 );
-const NcAppNavigationIconCollapsible = __component__$3.exports;
-_l10n.register(_l10n.t20, _l10n.t49);
+const Pencil = __component__$3.exports;
 const _sfc_main$2 = {
-  name: "PencilIcon",
+  name: "UndoIcon",
   emits: ["click"],
   props: {
     title: {
@@ -81,9 +64,9 @@ const _sfc_main$2 = {
 };
 var _sfc_render$2 = function render2() {
   var _vm = this, _c = _vm._self._c;
-  return _c("span", _vm._b({ staticClass: "material-design-icon pencil-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+  return _c("span", _vm._b({ staticClass: "material-design-icon undo-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
     return _vm.$emit("click", $event);
-  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
+  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
 };
 var _sfc_staticRenderFns$2 = [];
 var __component__$2 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
@@ -94,29 +77,52 @@ var __component__$2 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   null,
   null
 );
-const Pencil = __component__$2.exports;
+const Undo = __component__$2.exports;
+_l10n.register(_l10n.t20);
 const _sfc_main$1 = {
-  name: "UndoIcon",
-  emits: ["click"],
+  name: "NcAppNavigationIconCollapsible",
+  components: {
+    NcButton: NcButton.NcButton,
+    ChevronDown: ChevronDown.ChevronDown,
+    ChevronUp: ChevronUp.ChevronUp
+  },
   props: {
-    title: {
-      type: String
-    },
-    fillColor: {
-      type: String,
-      default: "currentColor"
+    /**
+     * Is the list currently open (or collapsed)
+     */
+    open: {
+      type: Boolean,
+      // eslint-disable-next-line vue/no-boolean-default
+      default: true
     },
-    size: {
-      type: Number,
-      default: 24
+    /**
+     * Is the navigation item currently active.
+     */
+    active: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: ["click"],
+  computed: {
+    labelButton() {
+      return this.open ? _l10n.t("Collapse menu") : _l10n.t("Open menu");
+    }
+  },
+  methods: {
+    onClick(e) {
+      this.$emit("click", e);
     }
   }
 };
 var _sfc_render$1 = function render3() {
   var _vm = this, _c = _vm._self._c;
-  return _c("span", _vm._b({ staticClass: "material-design-icon undo-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
-    return _vm.$emit("click", $event);
-  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
+  return _c("NcButton", { staticClass: "icon-collapse", class: {
+    "icon-collapse--active": _vm.active,
+    "icon-collapse--open": _vm.open
+  }, attrs: { "aria-label": _vm.labelButton, "variant": _vm.active ? "tertiary-on-primary" : "tertiary" }, on: { "click": _vm.onClick }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_vm.open ? _c("ChevronUp", { attrs: { "size": 20 } }) : _c("ChevronDown", { attrs: { "size": 20 } })];
+  }, proxy: true }]) });
 };
 var _sfc_staticRenderFns$1 = [];
 var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
@@ -125,9 +131,10 @@ var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns$1,
   false,
   null,
-  null
+  "c8d5bee5"
 );
-const Undo = __component__$1.exports;
+const NcAppNavigationIconCollapsible = __component__$1.exports;
+_l10n.register(_l10n.t21, _l10n.t50);
 const _sfc_main = {
   name: "NcAppNavigationItem",
   components: {
@@ -480,22 +487,22 @@ var _sfc_render = function render4() {
     return [_c("div", { staticClass: "app-navigation-entry", class: {
       "app-navigation-entry--editing": _vm.editingActive,
       "app-navigation-entry--deleted": _vm.undo,
-      "active": isActive && _vm.to || _vm.active
-    } }, [!_vm.undo ? _c("a", { staticClass: "app-navigation-entry-link", attrs: { "aria-current": _vm.active || isActive && _vm.to ? "page" : void 0, "aria-description": _vm.ariaDescription, "aria-expanded": _vm.$scopedSlots.default ? _vm.opened.toString() : void 0, "href": _vm.href || routerLinkHref || "#", "target": _vm.isExternal(_vm.href) ? "_blank" : void 0, "title": _vm.title || _vm.name }, on: { "blur": _vm.handleBlur, "click": function($event) {
+      active: _vm.to && isActive || _vm.active
+    } }, [!_vm.undo ? _c("a", { staticClass: "app-navigation-entry-link", attrs: { "aria-current": _vm.active || _vm.to && isActive ? "page" : void 0, "aria-description": _vm.ariaDescription, "aria-expanded": _vm.$scopedSlots.default ? _vm.opened.toString() : void 0, "href": _vm.href || routerLinkHref || "#", "target": _vm.isExternal(_vm.href) ? "_blank" : void 0, "title": _vm.title || _vm.name }, on: { "blur": _vm.handleBlur, "click": function($event) {
       return _vm.onClick($event, navigate, routerLinkHref);
     }, "focus": _vm.handleFocus, "keydown": function($event) {
       if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "tab", 9, $event.key, "Tab")) return null;
       if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey) return null;
       return _vm.handleTab.apply(null, arguments);
-    } } }, [_c("div", { staticClass: "app-navigation-entry-icon", class: { [_vm.icon]: _vm.icon } }, [_vm.loading ? _c("NcLoadingIcon") : _vm._t("icon", null, { "active": _vm.active || _vm.to && isActive })], 2), !_vm.editingActive ? _c("span", { staticClass: "app-navigation-entry__name" }, [_vm._v(" " + _vm._s(_vm.name) + " ")]) : _vm._e(), _vm.editingActive ? _c("div", { staticClass: "editingContainer" }, [_c("NcInputConfirmCancel", { ref: "editingInput", attrs: { "placeholder": _vm.editPlaceholder !== "" ? _vm.editPlaceholder : _vm.name, "primary": isActive && _vm.to || _vm.active }, on: { "cancel": _vm.cancelEditing, "confirm": _vm.handleEditingDone }, model: { value: _vm.editingValue, callback: function($$v) {
+    } } }, [_c("div", { staticClass: "app-navigation-entry-icon", class: { [_vm.icon]: _vm.icon } }, [_vm.loading ? _c("NcLoadingIcon") : _vm._t("icon", null, { "active": _vm.active || _vm.to && isActive })], 2), !_vm.editingActive ? _c("span", { staticClass: "app-navigation-entry__name" }, [_vm._v(" " + _vm._s(_vm.name) + " ")]) : _vm._e(), _vm.editingActive ? _c("div", { staticClass: "editingContainer" }, [_c("NcInputConfirmCancel", { ref: "editingInput", attrs: { "placeholder": _vm.editPlaceholder !== "" ? _vm.editPlaceholder : _vm.name, "primary": _vm.to && isActive || _vm.active }, on: { "cancel": _vm.cancelEditing, "confirm": _vm.handleEditingDone }, model: { value: _vm.editingValue, callback: function($$v) {
       _vm.editingValue = $$v;
-    }, expression: "editingValue" } })], 1) : _vm._e()]) : _vm._e(), _vm.undo ? _c("div", { staticClass: "app-navigation-entry__deleted" }, [_c("div", { staticClass: "app-navigation-entry__deleted-description" }, [_vm._v(" " + _vm._s(_vm.name) + " ")])]) : _vm._e(), _vm.hasUtils && !_vm.editingActive ? _c("div", { staticClass: "app-navigation-entry__utils", class: { "app-navigation-entry__utils--display-actions": _vm.forceDisplayActions || _vm.menuOpenLocalValue || _vm.menuOpen } }, [_vm.$scopedSlots.counter ? _c("div", { staticClass: "app-navigation-entry__counter-wrapper" }, [_vm._t("counter")], 2) : _vm._e(), _vm.$scopedSlots.actions || _vm.editable && !_vm.editingActive || _vm.undo ? _c("NcActions", { ref: "actions", staticClass: "app-navigation-entry__actions", attrs: { "inline": _vm.inlineActions, "container": "#app-navigation-vue", "boundaries-element": _vm.actionsBoundariesElement, "placement": _vm.menuPlacement, "open": _vm.menuOpen, "type": isActive && _vm.to || _vm.active ? "tertiary-on-primary" : "tertiary", "force-menu": _vm.forceMenu, "default-icon": _vm.menuIcon }, on: { "update:open": _vm.onMenuToggle }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    }, expression: "editingValue" } })], 1) : _vm._e()]) : _vm._e(), _vm.undo ? _c("div", { staticClass: "app-navigation-entry__deleted" }, [_c("div", { staticClass: "app-navigation-entry__deleted-description" }, [_vm._v(" " + _vm._s(_vm.name) + " ")])]) : _vm._e(), _vm.hasUtils && !_vm.editingActive ? _c("div", { staticClass: "app-navigation-entry__utils", class: { "app-navigation-entry__utils--display-actions": _vm.forceDisplayActions || _vm.menuOpenLocalValue || _vm.menuOpen } }, [_vm.$scopedSlots.counter ? _c("div", { staticClass: "app-navigation-entry__counter-wrapper" }, [_vm._t("counter")], 2) : _vm._e(), _vm.$scopedSlots.actions || _vm.editable && !_vm.editingActive || _vm.undo ? _c("NcActions", { ref: "actions", staticClass: "app-navigation-entry__actions", attrs: { "inline": _vm.inlineActions, "container": "#app-navigation-vue", "boundaries-element": _vm.actionsBoundariesElement, "placement": _vm.menuPlacement, "open": _vm.menuOpen, "type": _vm.to && isActive || _vm.active ? "tertiary-on-primary" : "tertiary", "force-menu": _vm.forceMenu, "default-icon": _vm.menuIcon }, on: { "update:open": _vm.onMenuToggle }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
       return [_vm._t("menu-icon")];
     }, proxy: true }], null, true) }, [_vm.editable && !_vm.editingActive ? _c("NcActionButton", { attrs: { "aria-label": _vm.editButtonAriaLabel }, on: { "click": _vm.handleEdit }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
       return [_c("Pencil", { attrs: { "size": 20 } })];
     }, proxy: true }], null, true) }, [_vm._v(" " + _vm._s(_vm.editLabel) + " ")]) : _vm._e(), _vm.undo ? _c("NcActionButton", { attrs: { "aria-label": _vm.undoButtonAriaLabel }, on: { "click": _vm.handleUndo }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
       return [_c("Undo", { attrs: { "size": 20 } })];
-    }, proxy: true }], null, true) }) : _vm._e(), _vm._t("actions")], 2) : _vm._e()], 1) : _vm._e(), _vm.isCollapsible() ? _c("NcAppNavigationIconCollapsible", { attrs: { "active": isActive && _vm.to || _vm.active, "open": _vm.opened }, on: { "click": function($event) {
+    }, proxy: true }], null, true) }) : _vm._e(), _vm._t("actions")], 2) : _vm._e()], 1) : _vm._e(), _vm.isCollapsible() ? _c("NcAppNavigationIconCollapsible", { attrs: { "active": _vm.to && isActive || _vm.active, "open": _vm.opened }, on: { "click": function($event) {
       $event.preventDefault();
       $event.stopPropagation();
       return _vm.toggleCollapse.apply(null, arguments);
@@ -509,8 +516,8 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "76a56f53"
+  "587932fa"
 );
 const NcAppNavigationItem = __component__.exports;
 exports.NcAppNavigationItem = NcAppNavigationItem;
-//# sourceMappingURL=NcAppNavigationItem-D1CEGuhm.cjs.map
+//# sourceMappingURL=NcAppNavigationItem-ZOXUMmX5.cjs.map