@nextcloud/vue 8.10.0 → 8.11.1

package/dist/chunks/{NcAppContent-CuOJJPbt.cjs → NcAppContent-CxdfMOVw.cjs}

@@ -1,10 +1,10 @@
-require('../assets/NcAppContent-DcXMrsBz.css');
+require('../assets/NcAppContent-aWiDWWeq.css');
 "use strict";
-const u = require("../Components/NcButton.cjs"), n = require("./_l10n-DZggkcVs.cjs");
+const u = require("../Components/NcButton.cjs"), a = require("./_l10n-BVVVUgGU.cjs");
 require("../Directives/Tooltip.cjs");
-const a = require("@nextcloud/event-bus"), c = require("./ArrowRight-CxzzJJQ6.cjs"), p = require("../Composables/useIsMobile.cjs"), r = require("./_plugin-vue2_normalizer-GXKvuwrq.cjs"), h = require("floating-vue"), g = require("@nextcloud/browser-storage"), d = require("@vueuse/core"), l = require("splitpanes");
+const n = require("@nextcloud/event-bus"), c = require("./ArrowRight-CxzzJJQ6.cjs"), p = require("../Composables/useIsMobile.cjs"), r = require("./_plugin-vue2_normalizer-GXKvuwrq.cjs"), h = require("floating-vue"), g = require("@nextcloud/browser-storage"), d = require("@vueuse/core"), l = require("splitpanes");
 require("splitpanes/dist/splitpanes.css");
-n.register(n.t24);
+a.register(a.t24);
 const f = {
   name: "NcAppDetailsToggle",
   directives: {
@@ -21,7 +21,7 @@ const f = {
   },
   computed: {
     title() {
-      return n.t("Go back to the list");
+      return a.t("Go back to the list");
     }
   },
   watch: {
@@ -36,18 +36,18 @@ const f = {
     this.isMobile && this.toggleAppNavigationButton(!1);
   },
   methods: {
-    toggleAppNavigationButton(t = !0) {
-      const e = document.querySelector(".app-navigation .app-navigation-toggle");
-      e && (e.style.display = t ? "none" : null, t === !0 && a.emit("toggle-navigation", { open: !1 }));
+    toggleAppNavigationButton(e = !0) {
+      const t = document.querySelector(".app-navigation .app-navigation-toggle");
+      t && (t.style.display = e ? "none" : null, e === !0 && n.emit("toggle-navigation", { open: !1 }));
     }
   }
 };
 var m = 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", class: { "app-details-toggle--mobile": e.isMobile }, attrs: { type: "tertiary", "aria-label": e.title }, scopedSlots: e._u([{ key: "icon", fn: function() {
+  var t = this, i = t._self._c;
+  return i("NcButton", { directives: [{ name: "tooltip", rawName: "v-tooltip", value: t.title, expression: "title" }], staticClass: "app-details-toggle", class: { "app-details-toggle--mobile": t.isMobile }, attrs: { type: "tertiary", "aria-label": t.title }, scopedSlots: t._u([{ key: "icon", fn: function() {
     return [i("ArrowRight", { attrs: { size: 20 } })];
   }, proxy: !0 }]) });
-}, _ = [], S = /* @__PURE__ */ r.normalizeComponent(
+}, _ = [], z = /* @__PURE__ */ r.normalizeComponent(
   f,
   m,
   _,
@@ -57,10 +57,10 @@ var m = function() {
   null,
   null
 );
-const w = S.exports, o = g.getBuilder("nextcloud").persist().build(), z = {
+const S = z.exports, o = g.getBuilder("nextcloud").persist().build(), v = {
   name: "NcAppContent",
   components: {
-    NcAppDetailsToggle: w,
+    NcAppDetailsToggle: S,
     Pane: l.Pane,
     Splitpanes: l.Splitpanes
   },
@@ -73,7 +73,8 @@ const w = S.exports, o = g.getBuilder("nextcloud").persist().build(), z = {
       default: !0
     },
     /**
-     * Allows you to set the default width of the resizable list in %
+     * Allows you to set the default width of the resizable list in % on vertical-split
+     * Allows you to set the default height of the resizable list in % on horizontal-split
      * Must be between listMinWidth and listMaxWidth
      */
     listSize: {
@@ -81,14 +82,16 @@ const w = S.exports, o = g.getBuilder("nextcloud").persist().build(), z = {
       default: 20
     },
     /**
-     * Allows you to set the minimum width of the list column in %
+     * Allows you to set the minimum width of the list column in % on vertical-split
+     * Allows you to set the minimum height of the list column in % on horizontal-split
      */
     listMinWidth: {
       type: Number,
       default: 15
     },
     /**
-     * Allows you to set the maximum width of the list column in %
+     * Allows you to set the maximum width of the list column in % on vertical-split
+     * Allows you to set the maximum height of the list column in % on horizontal-split
      */
     listMaxWidth: {
       type: Number,
@@ -124,13 +127,14 @@ const w = S.exports, o = g.getBuilder("nextcloud").persist().build(), z = {
      * Content layout used when there is a list together with content:
      * - `vertical-split` - a 2-column layout with list and default content separated vertically
      * - `no-split` - a single column layout; List is shown when `showDetails` is `false`, otherwise the default slot content is shown with a back button to return to the list.
+     * - 'horizontal-split' - a 2-column layout with list and default content separated horizontally
      * On mobile screen `no-split` layout is forced.
      */
     layout: {
       type: String,
       default: "vertical-split",
-      validator(t) {
-        return ["no-split", "vertical-split"].includes(t);
+      validator(e) {
+        return ["no-split", "vertical-split", "horizontal-split"].includes(e);
       }
     }
   },
@@ -197,16 +201,16 @@ const w = S.exports, o = g.getBuilder("nextcloud").persist().build(), z = {
      * @param {TouchEvent} e The touch event
      * @param {import('@vueuse/core').SwipeDirection} direction The swipe direction of the event
      */
-    handleSwipe(t, e) {
-      Math.abs(this.swiping.lengthX) > 70 && (this.swiping.coordsStart.x < 300 / 2 && e === "right" ? a.emit("toggle-navigation", {
+    handleSwipe(e, t) {
+      Math.abs(this.swiping.lengthX) > 70 && (this.swiping.coordsStart.x < 300 / 2 && t === "right" ? n.emit("toggle-navigation", {
         open: !0
-      }) : this.swiping.coordsStart.x < 300 * 1.5 && e === "left" && a.emit("toggle-navigation", {
+      }) : this.swiping.coordsStart.x < 300 * 1.5 && t === "left" && n.emit("toggle-navigation", {
         open: !1
       }));
     },
-    handlePaneResize(t) {
-      const e = parseInt(t[0].size, 10);
-      o.setItem(this.paneConfigID, JSON.stringify(e)), this.listPaneSize = e, this.$emit("resize:list", { size: e }), console.debug("AppContent pane config", e);
+    handlePaneResize(e) {
+      const t = parseInt(e[0].size, 10);
+      o.setItem(this.paneConfigID, JSON.stringify(t)), this.listPaneSize = t, this.$emit("resize:list", { size: t }), console.debug("AppContent pane config", t);
     },
     // $slots is not reactive, we need to update this manually
     checkSlots() {
@@ -214,9 +218,9 @@ const w = S.exports, o = g.getBuilder("nextcloud").persist().build(), z = {
     },
     // browserStorage is not reactive, we need to update this manually
     restorePaneConfig() {
-      const t = parseInt(o.getItem(this.paneConfigID), 10);
-      if (!isNaN(t) && t !== this.listPaneSize)
-        return console.debug("AppContent pane config", t), this.listPaneSize = t, t;
+      const e = parseInt(o.getItem(this.paneConfigID), 10);
+      if (!isNaN(e) && e !== this.listPaneSize)
+        return console.debug("AppContent pane config", e), this.listPaneSize = e, e;
     },
     /**
      * The user clicked the back arrow from the details view
@@ -226,24 +230,27 @@ const w = S.exports, o = g.getBuilder("nextcloud").persist().build(), z = {
     }
   }
 };
-var v = 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 || e.layout === "no-split" ? i("div", { staticClass: "app-content-wrapper app-content-wrapper--no-split", class: {
-    "app-content-wrapper--show-details": e.showDetails,
-    "app-content-wrapper--show-list": !e.showDetails,
-    "app-content-wrapper--mobile": e.isMobile
-  } }, [e.showDetails ? i("NcAppDetailsToggle", { nativeOn: { click: function(s) {
-    return s.stopPropagation(), s.preventDefault(), e.hideDetails.apply(null, arguments);
-  } } }) : e._e(), e.showDetails ? e._t("default") : e._t("list")], 2) : e.layout === "vertical-split" ? 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._e()] : e._e(), e.hasList ? e._e() : e._t("default")], 2);
-}, b = [], C = /* @__PURE__ */ r.normalizeComponent(
-  z,
+var w = function() {
+  var t = this, i = t._self._c;
+  return i("main", { staticClass: "app-content no-snapper", class: { "app-content--has-list": t.hasList }, attrs: { id: "app-content-vue" } }, [t.pageHeading ? i("h1", { staticClass: "hidden-visually" }, [t._v(" " + t._s(t.pageHeading) + " ")]) : t._e(), t.hasList ? [t.isMobile || t.layout === "no-split" ? i("div", { staticClass: "app-content-wrapper app-content-wrapper--no-split", class: {
+    "app-content-wrapper--show-details": t.showDetails,
+    "app-content-wrapper--show-list": !t.showDetails,
+    "app-content-wrapper--mobile": t.isMobile
+  } }, [t.showDetails ? i("NcAppDetailsToggle", { nativeOn: { click: function(s) {
+    return s.stopPropagation(), s.preventDefault(), t.hideDetails.apply(null, arguments);
+  } } }) : t._e(), t.showDetails ? t._t("default") : t._t("list")], 2) : t.layout === "vertical-split" || t.layout === "horizontal-split" ? i("div", { staticClass: "app-content-wrapper" }, [i("Splitpanes", { staticClass: "default-theme", class: {
+    "splitpanes--horizontal": t.layout === "horizontal-split",
+    "splitpanes--vertical": t.layout === "vertical-split"
+  }, attrs: { horizontal: t.layout === "horizontal-split" }, on: { resized: t.handlePaneResize } }, [i("Pane", { staticClass: "splitpanes__pane-list", attrs: { size: t.listPaneSize || t.paneDefaults.list.size, "min-size": t.paneDefaults.list.min, "max-size": t.paneDefaults.list.max } }, [t._t("list")], 2), i("Pane", { staticClass: "splitpanes__pane-details", attrs: { size: t.detailsPaneSize, "min-size": t.paneDefaults.details.min, "max-size": t.paneDefaults.details.max } }, [t._t("default")], 2)], 1)], 1) : t._e()] : t._e(), t.hasList ? t._e() : t._t("default")], 2);
+}, y = [], b = /* @__PURE__ */ r.normalizeComponent(
   v,
-  b,
+  w,
+  y,
   !1,
   null,
-  "0b75042f",
+  "a284c47e",
   null,
   null
 );
-const y = C.exports;
-exports.NcAppContent = y;
+const C = b.exports;
+exports.NcAppContent = C;

package/dist/chunks/NcAppContent-CxdfMOVw.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppContent-CxdfMOVw.cjs","sources":["../../src/components/NcAppContent/NcAppDetailsToggle.vue","../../src/components/NcAppContent/NcAppContent.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2021 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<template>\n\t<NcButton v-tooltip=\"title\"\n\t\ttype=\"tertiary\"\n\t\t:aria-label=\"title\"\n\t\tclass=\"app-details-toggle\"\n\t\t:class=\"{ 'app-details-toggle--mobile': isMobile }\">\n\t\t<template #icon>\n\t\t\t<ArrowRight :size=\"20\" />\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport { t } from '../../l10n.js'\nimport Tooltip from '../../directives/Tooltip/index.js'\n\nimport { emit } from '@nextcloud/event-bus'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\n\nexport default {\n\tname: 'NcAppDetailsToggle',\n\n\tdirectives: {\n\t\ttooltip: Tooltip,\n\t},\n\n\tcomponents: {\n\t\tNcButton,\n\t\tArrowRight,\n\t},\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\ttitle() {\n\t\t\treturn t('Go back to the list')\n\t\t},\n\t},\n\twatch: {\n\t\tisMobile: {\n\t\t\timmediate: true,\n\t\t\thandler() {\n\t\t\t\tthis.toggleAppNavigationButton(this.isMobile)\n\t\t\t},\n\t\t},\n\t},\n\n\tbeforeDestroy() {\n\t\tif (this.isMobile) {\n\t\t\tthis.toggleAppNavigationButton(false)\n\t\t}\n\t},\n\n\tmethods: {\n\t\ttoggleAppNavigationButton(hide = true) {\n\t\t\tconst appNavigationToggle = document.querySelector('.app-navigation .app-navigation-toggle')\n\t\t\tif (appNavigationToggle) {\n\t\t\t\tappNavigationToggle.style.display = hide ? 'none' : null\n\n\t\t\t\t// If we hide the NavigationToggle, we need to make sure the Navigation is also closed\n\t\t\t\tif (hide === true) {\n\t\t\t\t\temit('toggle-navigation', { open: false })\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.app-details-toggle {\n\tposition: sticky;\n\twidth: $clickable-area;\n\theight: $clickable-area;\n\tpadding: $icon-margin;\n\tcursor: pointer;\n\topacity: .6;\n\ttransform: rotate(180deg);\n\tbackground-color: var(--color-main-background);\n\tz-index: 2000;\n\n\ttop: var(--app-navigation-padding);\n\t// Navigation Toggle button width + 2 paddings around\n\tleft: calc(var(--default-clickable-area) + var(--app-navigation-padding) * 2);\n\t&--mobile {\n\t\t// There is no NavigationToggle button\n\t\tleft: var(--app-navigation-padding);\n\t}\n\n\t&:active,\n\t&:hover,\n\t&:focus {\n\t\topacity: 1;\n\t}\n}\n\n</style>\n","<!--\n - @copyright Copyright (c) 2019 Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @author Christoph Wurst <christoph@winzerhof-wurst.at>\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<docs>\n### General description\n\nThis components provides a wrapper around the main app's content.\n\nSingle-column layouts can just use the default slot. A resizable column\ncan be added by providing content to the named slot `list`.\n\n### CSS variables\nIn the css section some css variables are declared and will be available for\nall the children of the NcAppContent component\n\n### Examples\n\n#### Usage: Single-column content\n```vue\n<template>\n\t<NcAppContent>\n\t\t<h2>Single-column main content</h2>\n\t</NcAppContent>\n</template>\n```\n\n#### Usage: Two resizable columns\n```vue\n<template>\n\t<NcAppContent>\n\t\t<template #list>\n\t\t\t<div>Resizable list content</div>\n\t\t</template>\n\n\t\t<div>Main content</div>\n\t</NcAppContent>\n</template>\n```\n\n#### Overriding Defaults\nThe default, min and max sizes (in percent) of the resizable list column can be overridden.\nThe list size must be between the min and the max width value.\n\n```\n<NcAppContent\n\t:list-size=\"35\"\n\t:list-min-width=\"20\"\n\t:list-max-width=\"45\"\n>...</NcAppContent>\n```\n</docs>\n\n<template>\n\t<main id=\"app-content-vue\" class=\"app-content no-snapper\" :class=\"{ 'app-content--has-list': hasList }\">\n\t\t<h1 v-if=\"pageHeading\" class=\"hidden-visually\">\n\t\t\t{{ pageHeading }}\n\t\t</h1>\n\n\t\t<template v-if=\"hasList\">\n\t\t\t<!-- Mobile view does not allow resizeable panes -->\n\t\t\t<div v-if=\"isMobile || layout === 'no-split'\"\n\t\t\t\tclass=\"app-content-wrapper app-content-wrapper--no-split\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'app-content-wrapper--show-details': showDetails,\n\t\t\t\t\t'app-content-wrapper--show-list': !showDetails,\n\t\t\t\t\t'app-content-wrapper--mobile': isMobile,}\">\n\t\t\t\t<NcAppDetailsToggle v-if=\"showDetails\" @click.native.stop.prevent=\"hideDetails\" />\n\t\t\t\t<slot v-if=\"!showDetails\" name=\"list\" />\n\n\t\t\t\t<slot v-else />\n\t\t\t</div>\n\t\t\t<div v-else-if=\"layout === 'vertical-split' || layout === 'horizontal-split'\" class=\"app-content-wrapper\">\n\t\t\t\t<Splitpanes :horizontal=\"layout === 'horizontal-split'\"\n\t\t\t\t\tclass=\"default-theme\"\n\t\t\t\t\t:class=\"{ 'splitpanes--horizontal': layout === 'horizontal-split',\n\t\t\t\t\t\t'splitpanes--vertical': layout === 'vertical-split'\n\t\t\t\t\t}\"\n\t\t\t\t\t@resized=\"handlePaneResize\">\n\t\t\t\t\t<Pane class=\"splitpanes__pane-list\"\n\t\t\t\t\t\t:size=\"listPaneSize || paneDefaults.list.size\"\n\t\t\t\t\t\t:min-size=\"paneDefaults.list.min\"\n\t\t\t\t\t\t:max-size=\"paneDefaults.list.max\">\n\t\t\t\t\t\t<!-- @slot Provide a list to the app content -->\n\t\t\t\t\t\t<slot name=\"list\" />\n\t\t\t\t\t</Pane>\n\n\t\t\t\t\t<Pane class=\"splitpanes__pane-details\"\n\t\t\t\t\t\t:size=\"detailsPaneSize\"\n\t\t\t\t\t\t:min-size=\"paneDefaults.details.min\"\n\t\t\t\t\t\t:max-size=\"paneDefaults.details.max\">\n\t\t\t\t\t\t<!-- @slot Provide the main content to the app content -->\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</Pane>\n\t\t\t\t</Splitpanes>\n\t\t\t</div>\n\t\t</template>\n\t\t<!-- @slot Provide the main content to the app content -->\n\t\t<slot v-if=\"!hasList\" />\n\t</main>\n</template>\n\n<script>\nimport NcAppDetailsToggle from './NcAppDetailsToggle.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\n\nimport { getBuilder } from '@nextcloud/browser-storage'\nimport { useSwipe } from '@vueuse/core'\nimport { Splitpanes, Pane } from 'splitpanes'\n\nimport 'splitpanes/dist/splitpanes.css'\nimport { emit } from '@nextcloud/event-bus'\n\nconst browserStorage = getBuilder('nextcloud').persist().build()\n\n/**\n * App content container to be used for the main content of your app\n *\n */\nexport default {\n\tname: 'NcAppContent',\n\n\tcomponents: {\n\t\tNcAppDetailsToggle,\n\t\tPane,\n\t\tSplitpanes,\n\t},\n\tprops: {\n\t\t/**\n\t\t * Allows to disable the control by swipe of the app navigation open state\n\t\t */\n\t\tallowSwipeNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the default width of the resizable list in % on vertical-split\n\t\t * Allows you to set the default height of the resizable list in % on horizontal-split\n\t\t * Must be between listMinWidth and listMaxWidth\n\t\t */\n\t\tlistSize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the minimum width of the list column in % on vertical-split\n\t\t * Allows you to set the minimum height of the list column in % on horizontal-split\n\t\t */\n\t\tlistMinWidth: {\n\t\t\ttype: Number,\n\t\t\tdefault: 15,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the maximum width of the list column in % on vertical-split\n\t\t * Allows you to set the maximum height of the list column in % on horizontal-split\n\t\t */\n\t\tlistMaxWidth: {\n\t\t\ttype: Number,\n\t\t\tdefault: 40,\n\t\t},\n\n\t\t/**\n\t\t * Specify the config key for the pane config sizes\n\t\t * Default is the global var appName if you use the webpack-vue-config\n\t\t */\n\t\tpaneConfigKey: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * When in mobile view, only the list or the details are shown\n\t\t * If you provide a list, you need to provide a variable\n\t\t * that will be set to true by the user when an element of\n\t\t * the list gets selected. The details will then show a back\n\t\t * arrow to return to the list that will update this prop to false.\n\t\t */\n\t\tshowDetails: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Specify the `<h1>` page heading\n\t\t */\n\t\tpageHeading: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Content layout used when there is a list together with content:\n\t\t * - `vertical-split` - a 2-column layout with list and default content separated vertically\n\t\t * - `no-split` - a single column layout; List is shown when `showDetails` is `false`, otherwise the default slot content is shown with a back button to return to the list.\n\t\t * - 'horizontal-split' - a 2-column layout with list and default content separated horizontally\n\t\t * On mobile screen `no-split` layout is forced.\n\t\t */\n\t\tlayout: {\n\t\t\ttype: String,\n\t\t\tdefault: 'vertical-split',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['no-split', 'vertical-split', 'horizontal-split'].includes(value)\n\t\t\t},\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:showDetails',\n\t\t'resize:list',\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\tcontentHeight: 0,\n\t\t\thasList: false,\n\t\t\thasContent: false,\n\t\t\tswiping: {},\n\t\t\tlistPaneSize: this.restorePaneConfig(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tpaneConfigID() {\n\t\t\t// If provided, let's use it\n\t\t\tif (this.paneConfigKey !== '') {\n\t\t\t\treturn `pane-list-size-${this.paneConfigKey}`\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\t// Using the webpack-vue-config, appName is a global variable\n\t\t\t\t// This will throw a ReferenceError when the global variable is missing\n\t\t\t\t// In that case either you provide paneConfigKey or else it fallback\n\t\t\t\t// to a global storage key\n\t\t\t\treturn `pane-list-size-${appName}`\n\t\t\t} catch (e) {\n\t\t\t\tconsole.info('[INFO] AppContent:', 'falling back to global nextcloud pane config')\n\t\t\t\treturn 'pane-list-size-nextcloud'\n\t\t\t}\n\t\t},\n\n\t\tdetailsPaneSize() {\n\t\t\tif (this.listPaneSize) {\n\t\t\t\treturn 100 - this.listPaneSize\n\t\t\t}\n\t\t\treturn this.paneDefaults.details.size\n\t\t},\n\n\t\tpaneDefaults() {\n\t\t\treturn {\n\t\t\t\tlist: {\n\t\t\t\t\tsize: this.listSize,\n\t\t\t\t\tmin: this.listMinWidth,\n\t\t\t\t\tmax: this.listMaxWidth,\n\t\t\t\t},\n\n\t\t\t\t// set the inverse values of the details column\n\t\t\t\t// based on the provided (or default) values of the list column\n\t\t\t\tdetails: {\n\t\t\t\t\tsize: 100 - this.listSize,\n\t\t\t\t\tmin: 100 - this.listMaxWidth,\n\t\t\t\t\tmax: 100 - this.listMinWidth,\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t},\n\n\tupdated() {\n\t\tthis.checkSlots()\n\t},\n\n\tmounted() {\n\t\tif (this.allowSwipeNavigation) {\n\t\t\tthis.swiping = useSwipe(this.$el, {\n\t\t\t\tonSwipeEnd: this.handleSwipe,\n\t\t\t})\n\t\t}\n\n\t\tthis.checkSlots()\n\t\tthis.restorePaneConfig()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * handle the swipe event\n\t\t *\n\t\t * @param {TouchEvent} e The touch event\n\t\t * @param {import('@vueuse/core').SwipeDirection} direction The swipe direction of the event\n\t\t */\n\t\thandleSwipe(e, direction) {\n\t\t\tconst minSwipeX = 70\n\t\t\tconst touchZone = 300\n\t\t\tif (Math.abs(this.swiping.lengthX) > minSwipeX) {\n\t\t\t\tif (this.swiping.coordsStart.x < (touchZone / 2) && direction === 'right') {\n\t\t\t\t\temit('toggle-navigation', {\n\t\t\t\t\t\topen: true,\n\t\t\t\t\t})\n\t\t\t\t} else if (this.swiping.coordsStart.x < touchZone * 1.5 && direction === 'left') {\n\t\t\t\t\temit('toggle-navigation', {\n\t\t\t\t\t\topen: false,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\thandlePaneResize(event) {\n\t\t\tconst listPaneSize = parseInt(event[0].size, 10)\n\t\t\tbrowserStorage.setItem(this.paneConfigID, JSON.stringify(listPaneSize))\n\t\t\tthis.listPaneSize = listPaneSize\n\t\t\t/**\n\t\t\t * Emitted when the list pane is resized by the user\n\t\t\t */\n\t\t\tthis.$emit('resize:list', { size: listPaneSize })\n\t\t\tconsole.debug('AppContent pane config', listPaneSize)\n\t\t},\n\n\t\t// $slots is not reactive, we need to update this manually\n\t\tcheckSlots() {\n\t\t\tthis.hasList = !!this.$scopedSlots.list\n\t\t\tthis.hasContent = !!this.$scopedSlots.default\n\t\t},\n\n\t\t// browserStorage is not reactive, we need to update this manually\n\t\trestorePaneConfig() {\n\t\t\tconst listPaneSize = parseInt(browserStorage.getItem(this.paneConfigID), 10)\n\t\t\tif (!isNaN(listPaneSize) && listPaneSize !== this.listPaneSize) {\n\t\t\t\tconsole.debug('AppContent pane config', listPaneSize)\n\t\t\t\tthis.listPaneSize = listPaneSize\n\t\t\t\treturn listPaneSize\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * The user clicked the back arrow from the details view\n\t\t */\n\t\thideDetails() {\n\t\t\tthis.$emit('update:showDetails', false)\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n\n.app-content {\n\tposition: initial;\n\tz-index: 1000;\n\tflex-basis: 100vw;\n\theight: 100%;\n\t// Overriding server styles TODO: cleanup!\n\tmargin: 0 !important;\n\tbackground-color: var(--color-main-background);\n\tmin-width: 0;\n\n\t&:not(.app-content--has-list) {\n\t\toverflow: auto;\n\t}\n}\n\n.app-content-wrapper {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n}\n\n// Mobile list/details handling\n.app-content-wrapper--no-split {\n\t&.app-content-wrapper--show-list :deep() {\n\t\t.app-content-list {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t.app-content-details {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\t&.app-content-wrapper--show-details :deep() {\n\t\t.app-content-list {\n\t\t\tdisplay: none;\n\t\t}\n\t\t.app-content-details {\n\t\t\tdisplay: block;\n\t\t}\n\t}\n}\n\n:deep(.splitpanes.default-theme) {\n\t.app-content-list {\n\t\tmax-width: none;\n\t\t/* Thin scrollbar is hard to catch on resizable columns */\n\t\tscrollbar-width: auto;\n\t}\n\n\t.splitpanes__pane {\n\t\tbackground-color: transparent;\n\t\ttransition: none;\n\n\t\t&-list {\n\t\t\tmin-width: 300px;\n\t\t\tposition: sticky;\n\n\t\t\t@media only screen and (width < $breakpoint-mobile) {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t&-details {\n\t\t\toverflow-y: auto;\n\n\t\t\t@media only screen and (width < $breakpoint-mobile) {\n\t\t\t\tmin-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\t.app-content-wrapper--vertical-split {\n\t\t.splitpanes__splitter {\n\t\t\twidth: 9px;\n\t\t\tmargin-left: -5px;\n\t\t\tbackground-color: transparent;\n\t\t\tborder-left: none;\n\n\t\t\t&:before,\n\t\t\t&:after {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n\t.app-content-wrapper--horizontal-split {\n\t\t.splitpanes__splitter {\n\t\t\theight: 9px;\n\t\t\tmargin-top: -5px;\n\t\t}\n\t}\n}\n\n.app-content-wrapper--show-list {\n\t:deep(.app-content-list) {\n\t\tmax-width: none;\n\t}\n}\n</style>\n"],"names":["_sfc_main","Tooltip","NcButton","ArrowRight","useIsMobile","t","hide","appNavigationToggle","emit","browserStorage","getBuilder","NcAppDetailsToggle","Pane","Splitpanes","value","useSwipe","direction","event","listPaneSize"],"mappings":";;;;;;AA4CA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,SAAAC,EAAA;AAAA,EACA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAAA,IACA,YAAAC,EAAA;AAAA,EACA;AAAA,EACA,QAAA;AACA,WAAA;AAAA,MACA,UAAAC,EAAAA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,QAAA;AACA,aAAAC,EAAAA,EAAA,qBAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACA,UAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AACA,aAAA,0BAAA,KAAA,QAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,gBAAA;AACA,IAAA,KAAA,YACA,KAAA,0BAAA,EAAA;AAAA,EAEA;AAAA,EAEA,SAAA;AAAA,IACA,0BAAAC,IAAA,IAAA;AACA,YAAAC,IAAA,SAAA,cAAA,wCAAA;AACA,MAAAA,MACAA,EAAA,MAAA,UAAAD,IAAA,SAAA,MAGAA,MAAA,MACAE,EAAAA,KAAA,qBAAA,EAAA,MAAA,GAAA,CAAA;AAAA,IAGA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;qBCsCAC,IAAAC,EAAAA,WAAA,WAAA,EAAA,QAAA,EAAA,MAAA,GAMAV,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,oBAAAW;AAAA,IACA,MAAAC,EAAA;AAAA,IACA,YAAAC,EAAA;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAAC,GAAA;AACA,eAAA,CAAA,YAAA,kBAAA,kBAAA,EAAA,SAAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,WAAA;AAAA,MACA,UAAAV,EAAAA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,eAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA,CAAA;AAAA,MACA,cAAA,KAAA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,eAAA;AAEA,UAAA,KAAA,kBAAA;AACA,eAAA,kBAAA,YAAA;AAGA,UAAA;AAKA,eAAA,kBAAA;AAAA,MACA,QAAA;AACA,uBAAA,KAAA,sBAAA,8CAAA,GACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,eACA,MAAA,KAAA,eAEA,KAAA,aAAA,QAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAA;AAAA,QACA,MAAA;AAAA,UACA,MAAA,KAAA;AAAA,UACA,KAAA,KAAA;AAAA,UACA,KAAA,KAAA;AAAA,QACA;AAAA;AAAA;AAAA,QAIA,SAAA;AAAA,UACA,MAAA,MAAA,KAAA;AAAA,UACA,KAAA,MAAA,KAAA;AAAA,UACA,KAAA,MAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,WAAA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,IAAA,KAAA,yBACA,KAAA,UAAAW,WAAA,KAAA,KAAA;AAAA,MACA,YAAA,KAAA;AAAA,IACA,CAAA,IAGA,KAAA,WAAA,GACA,KAAA,kBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA,GAAAC,GAAA;AAGA,MAAA,KAAA,IAAA,KAAA,QAAA,OAAA,IAAA,OACA,KAAA,QAAA,YAAA,IAAA,MAAA,KAAAA,MAAA,UACAR,EAAAA,KAAA,qBAAA;AAAA,QACA,MAAA;AAAA,MACA,CAAA,IACA,KAAA,QAAA,YAAA,IAAA,MAAA,OAAAQ,MAAA,UACAR,EAAAA,KAAA,qBAAA;AAAA,QACA,MAAA;AAAA,MACA,CAAA;AAAA,IAGA;AAAA,IAEA,iBAAAS,GAAA;AACA,YAAAC,IAAA,SAAAD,EAAA,CAAA,EAAA,MAAA,EAAA;AACA,MAAAR,EAAA,QAAA,KAAA,cAAA,KAAA,UAAAS,CAAA,CAAA,GACA,KAAA,eAAAA,GAIA,KAAA,MAAA,eAAA,EAAA,MAAAA,EAAA,CAAA,GACA,QAAA,MAAA,0BAAAA,CAAA;AAAA,IACA;AAAA;AAAA,IAGA,aAAA;AACA,WAAA,UAAA,CAAA,CAAA,KAAA,aAAA,MACA,KAAA,aAAA,CAAA,CAAA,KAAA,aAAA;AAAA,IACA;AAAA;AAAA,IAGA,oBAAA;AACA,YAAAA,IAAA,SAAAT,EAAA,QAAA,KAAA,YAAA,GAAA,EAAA;AACA,UAAA,CAAA,MAAAS,CAAA,KAAAA,MAAA,KAAA;AACA,uBAAA,MAAA,0BAAAA,CAAA,GACA,KAAA,eAAAA,GACAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AACA,WAAA,MAAA,sBAAA,EAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppNavigation-Dl1g_orJ.mjs → NcAppNavigation-BxaQQTmk.mjs}

@@ -1,9 +1,9 @@
-import '../assets/NcAppNavigation-BgGJuJPv.css';
+import '../assets/NcAppNavigation-wkQJnaLW.css';
 import { useIsMobile as n } from "../Composables/useIsMobile.mjs";
 import { g as s } from "./focusTrap-Be9GEB5C.mjs";
 import { subscribe as p, emit as o, unsubscribe as r } from "@nextcloud/event-bus";
 import { createFocusTrap as l } from "focus-trap";
-import { N as g } from "./NcAppNavigationToggle-n8ES2H5d.mjs";
+import { N as g } from "./NcAppNavigationToggle-VDwkZ4nu.mjs";
 import c from "../Components/NcAppNavigationList.mjs";
 import u from "vue";
 import { n as d } from "./_plugin-vue2_normalizer-Bj5bLKV4.mjs";
@@ -114,7 +114,7 @@ var f = function() {
   h,
   !1,
   null,
-  "e7c1d2d1",
+  "42389274",
   null,
   null
 );

package/dist/chunks/{NcAppNavigation-Dl1g_orJ.mjs.map → NcAppNavigation-BxaQQTmk.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigation-Dl1g_orJ.mjs","sources":["../../src/components/NcAppNavigation/NcAppNavigation.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2019 Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @author Christoph Wurst <christoph@winzerhof-wurst.at>\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<docs>\nThe navigation bar can be open and closed from anywhere in the app using the\nnextcloud event bus.\n\n### Install the event bus package\n\n```bash\nnpm i -S @nextcloud/event-bus\n```\n\n### Usage\n\n#### Open the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: true,\n})\n```\n\n#### Close the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: false,\n})\n```\n\n</docs>\n\n<template>\n\t<div ref=\"appNavigationContainer\"\n\t\tclass=\"app-navigation\"\n\t\t:class=\"{'app-navigation--close':!open }\">\n\t\t<nav id=\"app-navigation-vue\"\n\t\t\t:aria-hidden=\"open ? 'false' : 'true'\"\n\t\t\t:aria-label=\"ariaLabel || undefined\"\n\t\t\t:aria-labelledby=\"ariaLabelledby || undefined\"\n\t\t\tclass=\"app-navigation__content\"\n\t\t\t:inert=\"!open || undefined\"\n\t\t\t@keydown.esc=\"handleEsc\">\n\t\t\t<div class=\"app-navigation__body\" :class=\"{ 'app-navigation__body--no-list': !$scopedSlots.list }\">\n\t\t\t\t<!-- The main content of the navigation. If no list is passed to the #list slot, stretched vertically. -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\n\t\t\t<NcAppNavigationList v-if=\"$scopedSlots.list\" class=\"app-navigation__list\">\n\t\t\t\t<!-- List for Navigation list items. Stretched between the main content and the footer -->\n\t\t\t\t<slot name=\"list\" />\n\t\t\t</NcAppNavigationList>\n\n\t\t\t<!-- Footer for e.g. NcAppNavigationSettings -->\n\t\t\t<slot name=\"footer\" />\n\t\t</nav>\n\t\t<NcAppNavigationToggle :open=\"open\" @update:open=\"toggleNavigation\" />\n\t</div>\n</template>\n\n<script>\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.js'\nimport { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { createFocusTrap } from 'focus-trap'\n\nimport NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'\nimport NcAppNavigationList from '../NcAppNavigationList/index.js'\nimport Vue from 'vue'\n\nexport default {\n\tname: 'NcAppNavigation',\n\n\tcomponents: {\n\t\tNcAppNavigationList,\n\t\tNcAppNavigationToggle,\n\t},\n\n\t// Injected from NcContent\n\tinject: {\n\t\tsetHasAppNavigation: {\n\t\t\tdefault: () => () => Vue.util.warn('NcAppNavigation is not mounted inside NcContent, this is probably an error.'),\n\t\t\tfrom: 'NcContent:setHasAppNavigation',\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The aria label to describe the navigation\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * aria-labelledby attribute to describe the navigation\n\t\t */\n\t\tariaLabelledby: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\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\topen: !this.isMobile,\n\t\t\tfocusTrap: null,\n\t\t}\n\t},\n\n\twatch: {\n\t\tisMobile() {\n\t\t\tthis.open = !this.isMobile\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\t\topen() {\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.setHasAppNavigation(true)\n\t\tsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\t// Emit an event with the initial state of the navigation\n\t\temit('navigation-toggled', {\n\t\t\topen: this.open,\n\t\t})\n\n\t\tthis.focusTrap = createFocusTrap(this.$refs.appNavigationContainer, {\n\t\t\tallowOutsideClick: true,\n\t\t\tfallbackFocus: this.$refs.appNavigationContainer,\n\t\t\ttrapStack: getTrapStack(),\n\t\t\tescapeDeactivates: false,\n\t\t})\n\t\tthis.toggleFocusTrap()\n\t},\n\tunmounted() {\n\t\tthis.setHasAppNavigation(false)\n\t\tunsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\tthis.focusTrap.deactivate()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Toggle the navigation\n\t\t *\n\t\t * @param {boolean} [state] set the state instead of inverting the current one\n\t\t */\n\t\ttoggleNavigation(state) {\n\t\t\t// Early return if alreay in that state\n\t\t\tif (this.open === state) {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.open = (typeof state === 'undefined') ? !this.open : state\n\t\t\tconst bodyStyles = getComputedStyle(document.body)\n\t\t\tconst animationLength = parseInt(bodyStyles.getPropertyValue('--animation-quick')) || 100\n\n\t\t\tsetTimeout(() => {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t// We wait for 1.5 times the animation length to give the animation time to really finish.\n\t\t\t}, 1.5 * animationLength)\n\t\t},\n\n\t\ttoggleNavigationByEventBus({ open }) {\n\t\t\tthis.toggleNavigation(open)\n\t\t},\n\n\t\t/**\n\t\t * Activate focus trap if it is currently needed, otherwise deactivate\n\t\t */\n\t\ttoggleFocusTrap() {\n\t\t\tif (this.isMobile && this.open) {\n\t\t\t\tthis.focusTrap.activate()\n\t\t\t} else {\n\t\t\t\tthis.focusTrap.deactivate()\n\t\t\t}\n\t\t},\n\n\t\thandleEsc() {\n\t\t\tif (this.isMobile) {\n\t\t\t\tthis.toggleNavigation(false)\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n.app-navigation,\n.app-content {\n\t/** Distance of the app naviation toggle and the first navigation item to the top edge of the app content container */\n\t--app-navigation-padding: #{$app-navigation-padding};\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.app-navigation {\n\t// Set scoped variable override\n\t// Using --color-text-maxcontrast as a fallback evaluates to an invalid value as it references itself in this scope instead of the variable defined higher up\n\t--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-text-maxcontrast-default));\n\ttransition: transform var(--animation-quick), margin var(--animation-quick);\n\twidth: $navigation-width;\n\t// Left toggle button padding + toggle button + right padding from NcAppContent\n\tmax-width: calc(100vw - (var(--app-navigation-padding) + var(--default-clickable-area) + var(--default-grid-baseline)));\n\tposition: relative;\n\ttop: 0;\n\tleft: 0;\n\tpadding: 0px;\n\t// Above appcontent\n\tz-index: 1800;\n\theight: 100%;\n\tbox-sizing: border-box;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\tflex-grow: 0;\n\tflex-shrink: 0;\n\tbackground-color:  var(--color-main-background-blur, var(--color-main-background));\n\t-webkit-backdrop-filter: var(--filter-background-blur, none);\n\tbackdrop-filter: var(--filter-background-blur, none);\n\n\t&--close {\n\t\ttransform: translateX(-100%);\n\t\tposition: absolute;\n\t}\n\n\t// For legacy purposes support passing a bare list to the content in #default slot and including #footer slot\n\t// Same styles as NcAppNavigationList\n\t&__content > ul {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--default-grid-baseline, 4px);\n\t\tpadding: var(--app-navigation-padding);\n\t}\n\n\t// Always stretch the navigation list\n\t& &__list {\n\t\theight: 100%;\n\t}\n\n\t// Stretch the main content if there is no stretched list\n\t&__body--no-list {\n\t\tflex: 1 1 auto;\n\t\toverflow: auto;\n\t\theight: 100%;\n\t}\n\n\t&__content {\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n}\n\n// add extra border for high contrast mode\n[data-themes*='highcontrast'] {\n\t.app-navigation {\n\t\tborder-right: 1px solid var(--color-border);\n\t}\n}\n\n// When on mobile, we make the navigation slide over the appcontent\n@media only screen and (max-width: $breakpoint-mobile) {\n\t.app-navigation:not(.app-navigation--close) {\n\t\tposition: absolute;\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcAppNavigationList","NcAppNavigationToggle","Vue","useIsMobile","subscribe","emit","createFocusTrap","getTrapStack","unsubscribe","state","bodyStyles","animationLength","open"],"mappings":";;;;;;;;AA6FA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,qBAAAC;AAAA,IACA,uBAAAC;AAAA,EACA;AAAA;AAAA,EAGA,QAAA;AAAA,IACA,qBAAA;AAAA,MACA,SAAA,MAAA,MAAAC,EAAA,KAAA,KAAA,6EAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,WAAA;AAAA,MACA,UAAAC,EAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,MAAA,CAAA,KAAA;AAAA,MACA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,WAAA;AACA,WAAA,OAAA,CAAA,KAAA,UACA,KAAA,gBAAA;AAAA,IACA;AAAA,IACA,OAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,oBAAA,EAAA,GACAC,EAAA,qBAAA,KAAA,0BAAA,GAEAC,EAAA,sBAAA;AAAA,MACA,MAAA,KAAA;AAAA,IACA,CAAA,GAEA,KAAA,YAAAC,EAAA,KAAA,MAAA,wBAAA;AAAA,MACA,mBAAA;AAAA,MACA,eAAA,KAAA,MAAA;AAAA,MACA,WAAAC,EAAA;AAAA,MACA,mBAAA;AAAA,IACA,CAAA,GACA,KAAA,gBAAA;AAAA,EACA;AAAA,EACA,YAAA;AACA,SAAA,oBAAA,EAAA,GACAC,EAAA,qBAAA,KAAA,0BAAA,GACA,KAAA,UAAA,WAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAAC,GAAA;AAEA,UAAA,KAAA,SAAAA,GAAA;AACA,QAAAJ,EAAA,sBAAA;AAAA,UACA,MAAA,KAAA;AAAA,QACA,CAAA;AACA;AAAA,MACA;AAEA,WAAA,OAAA,OAAAI,IAAA,MAAA,CAAA,KAAA,OAAAA;AACA,YAAAC,IAAA,iBAAA,SAAA,IAAA,GACAC,IAAA,SAAAD,EAAA,iBAAA,mBAAA,CAAA,KAAA;AAEA,iBAAA,MAAA;AACA,QAAAL,EAAA,sBAAA;AAAA,UACA,MAAA,KAAA;AAAA,QACA,CAAA;AAAA,MAEA,GAAA,MAAAM,CAAA;AAAA,IACA;AAAA,IAEA,2BAAA,EAAA,MAAAC,KAAA;AACA,WAAA,iBAAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AACA,MAAA,KAAA,YAAA,KAAA,OACA,KAAA,UAAA,SAAA,IAEA,KAAA,UAAA,WAAA;AAAA,IAEA;AAAA,IAEA,YAAA;AACA,MAAA,KAAA,YACA,KAAA,iBAAA,EAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppNavigation-BxaQQTmk.mjs","sources":["../../src/components/NcAppNavigation/NcAppNavigation.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2019 Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @author Christoph Wurst <christoph@winzerhof-wurst.at>\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<docs>\nThe navigation bar can be open and closed from anywhere in the app using the\nnextcloud event bus.\n\n### Install the event bus package\n\n```bash\nnpm i -S @nextcloud/event-bus\n```\n\n### Usage\n\n#### Open the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: true,\n})\n```\n\n#### Close the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: false,\n})\n```\n\n</docs>\n\n<template>\n\t<div ref=\"appNavigationContainer\"\n\t\tclass=\"app-navigation\"\n\t\t:class=\"{'app-navigation--close':!open }\">\n\t\t<nav id=\"app-navigation-vue\"\n\t\t\t:aria-hidden=\"open ? 'false' : 'true'\"\n\t\t\t:aria-label=\"ariaLabel || undefined\"\n\t\t\t:aria-labelledby=\"ariaLabelledby || undefined\"\n\t\t\tclass=\"app-navigation__content\"\n\t\t\t:inert=\"!open || undefined\"\n\t\t\t@keydown.esc=\"handleEsc\">\n\t\t\t<div class=\"app-navigation__body\" :class=\"{ 'app-navigation__body--no-list': !$scopedSlots.list }\">\n\t\t\t\t<!-- The main content of the navigation. If no list is passed to the #list slot, stretched vertically. -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\n\t\t\t<NcAppNavigationList v-if=\"$scopedSlots.list\" class=\"app-navigation__list\">\n\t\t\t\t<!-- List for Navigation list items. Stretched between the main content and the footer -->\n\t\t\t\t<slot name=\"list\" />\n\t\t\t</NcAppNavigationList>\n\n\t\t\t<!-- Footer for e.g. NcAppNavigationSettings -->\n\t\t\t<slot name=\"footer\" />\n\t\t</nav>\n\t\t<NcAppNavigationToggle :open=\"open\" @update:open=\"toggleNavigation\" />\n\t</div>\n</template>\n\n<script>\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.js'\nimport { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { createFocusTrap } from 'focus-trap'\n\nimport NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'\nimport NcAppNavigationList from '../NcAppNavigationList/index.js'\nimport Vue from 'vue'\n\nexport default {\n\tname: 'NcAppNavigation',\n\n\tcomponents: {\n\t\tNcAppNavigationList,\n\t\tNcAppNavigationToggle,\n\t},\n\n\t// Injected from NcContent\n\tinject: {\n\t\tsetHasAppNavigation: {\n\t\t\tdefault: () => () => Vue.util.warn('NcAppNavigation is not mounted inside NcContent, this is probably an error.'),\n\t\t\tfrom: 'NcContent:setHasAppNavigation',\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The aria label to describe the navigation\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * aria-labelledby attribute to describe the navigation\n\t\t */\n\t\tariaLabelledby: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\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\topen: !this.isMobile,\n\t\t\tfocusTrap: null,\n\t\t}\n\t},\n\n\twatch: {\n\t\tisMobile() {\n\t\t\tthis.open = !this.isMobile\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\t\topen() {\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.setHasAppNavigation(true)\n\t\tsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\t// Emit an event with the initial state of the navigation\n\t\temit('navigation-toggled', {\n\t\t\topen: this.open,\n\t\t})\n\n\t\tthis.focusTrap = createFocusTrap(this.$refs.appNavigationContainer, {\n\t\t\tallowOutsideClick: true,\n\t\t\tfallbackFocus: this.$refs.appNavigationContainer,\n\t\t\ttrapStack: getTrapStack(),\n\t\t\tescapeDeactivates: false,\n\t\t})\n\t\tthis.toggleFocusTrap()\n\t},\n\tunmounted() {\n\t\tthis.setHasAppNavigation(false)\n\t\tunsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\tthis.focusTrap.deactivate()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Toggle the navigation\n\t\t *\n\t\t * @param {boolean} [state] set the state instead of inverting the current one\n\t\t */\n\t\ttoggleNavigation(state) {\n\t\t\t// Early return if alreay in that state\n\t\t\tif (this.open === state) {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.open = (typeof state === 'undefined') ? !this.open : state\n\t\t\tconst bodyStyles = getComputedStyle(document.body)\n\t\t\tconst animationLength = parseInt(bodyStyles.getPropertyValue('--animation-quick')) || 100\n\n\t\t\tsetTimeout(() => {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t// We wait for 1.5 times the animation length to give the animation time to really finish.\n\t\t\t}, 1.5 * animationLength)\n\t\t},\n\n\t\ttoggleNavigationByEventBus({ open }) {\n\t\t\tthis.toggleNavigation(open)\n\t\t},\n\n\t\t/**\n\t\t * Activate focus trap if it is currently needed, otherwise deactivate\n\t\t */\n\t\ttoggleFocusTrap() {\n\t\t\tif (this.isMobile && this.open) {\n\t\t\t\tthis.focusTrap.activate()\n\t\t\t} else {\n\t\t\t\tthis.focusTrap.deactivate()\n\t\t\t}\n\t\t},\n\n\t\thandleEsc() {\n\t\t\tif (this.isMobile) {\n\t\t\t\tthis.toggleNavigation(false)\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n.app-navigation,\n.app-content {\n\t/** Distance of the app naviation toggle and the first navigation item to the top edge of the app content container */\n\t--app-navigation-padding: #{$app-navigation-padding};\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.app-navigation {\n\t// Set scoped variable override\n\t// Using --color-text-maxcontrast as a fallback evaluates to an invalid value as it references itself in this scope instead of the variable defined higher up\n\t--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-text-maxcontrast-default));\n\ttransition: transform var(--animation-quick), margin var(--animation-quick);\n\twidth: $navigation-width;\n\t// Left toggle button padding + toggle button + right padding from NcAppContent\n\t--app-navigation-max-width: calc(100vw - (var(--app-navigation-padding) + var(--default-clickable-area) + var(--default-grid-baseline)));\n\tmax-width: var(--app-navigation-max-width);\n\tposition: relative;\n\ttop: 0;\n\tleft: 0;\n\tpadding: 0px;\n\t// Above appcontent\n\tz-index: 1800;\n\theight: 100%;\n\tbox-sizing: border-box;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\tflex-grow: 0;\n\tflex-shrink: 0;\n\tbackground-color: var(--color-main-background-blur, var(--color-main-background));\n\t-webkit-backdrop-filter: var(--filter-background-blur, none);\n\tbackdrop-filter: var(--filter-background-blur, none);\n\n\t&--close {\n\t\tmargin-left: calc(-1 * min($navigation-width, var(--app-navigation-max-width)));\n\t}\n\n\t// For legacy purposes support passing a bare list to the content in #default slot and including #footer slot\n\t// Same styles as NcAppNavigationList\n\t&__content > ul {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--default-grid-baseline, 4px);\n\t\tpadding: var(--app-navigation-padding);\n\t}\n\n\t// Always stretch the navigation list\n\t& &__list {\n\t\theight: 100%;\n\t}\n\n\t// Stretch the main content if there is no stretched list\n\t&__body--no-list {\n\t\tflex: 1 1 auto;\n\t\toverflow: auto;\n\t\theight: 100%;\n\t}\n\n\t&__content {\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n}\n\n// add extra border for high contrast mode\n[data-themes*='highcontrast'] {\n\t.app-navigation {\n\t\tborder-right: 1px solid var(--color-border);\n\t}\n}\n\n// When on mobile, we make the navigation slide over the appcontent\n@media only screen and (max-width: $breakpoint-mobile) {\n\t.app-navigation {\n\t\tposition: absolute;\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcAppNavigationList","NcAppNavigationToggle","Vue","useIsMobile","subscribe","emit","createFocusTrap","getTrapStack","unsubscribe","state","bodyStyles","animationLength","open"],"mappings":";;;;;;;;AA6FA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,qBAAAC;AAAA,IACA,uBAAAC;AAAA,EACA;AAAA;AAAA,EAGA,QAAA;AAAA,IACA,qBAAA;AAAA,MACA,SAAA,MAAA,MAAAC,EAAA,KAAA,KAAA,6EAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,WAAA;AAAA,MACA,UAAAC,EAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,MAAA,CAAA,KAAA;AAAA,MACA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,WAAA;AACA,WAAA,OAAA,CAAA,KAAA,UACA,KAAA,gBAAA;AAAA,IACA;AAAA,IACA,OAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,oBAAA,EAAA,GACAC,EAAA,qBAAA,KAAA,0BAAA,GAEAC,EAAA,sBAAA;AAAA,MACA,MAAA,KAAA;AAAA,IACA,CAAA,GAEA,KAAA,YAAAC,EAAA,KAAA,MAAA,wBAAA;AAAA,MACA,mBAAA;AAAA,MACA,eAAA,KAAA,MAAA;AAAA,MACA,WAAAC,EAAA;AAAA,MACA,mBAAA;AAAA,IACA,CAAA,GACA,KAAA,gBAAA;AAAA,EACA;AAAA,EACA,YAAA;AACA,SAAA,oBAAA,EAAA,GACAC,EAAA,qBAAA,KAAA,0BAAA,GACA,KAAA,UAAA,WAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAAC,GAAA;AAEA,UAAA,KAAA,SAAAA,GAAA;AACA,QAAAJ,EAAA,sBAAA;AAAA,UACA,MAAA,KAAA;AAAA,QACA,CAAA;AACA;AAAA,MACA;AAEA,WAAA,OAAA,OAAAI,IAAA,MAAA,CAAA,KAAA,OAAAA;AACA,YAAAC,IAAA,iBAAA,SAAA,IAAA,GACAC,IAAA,SAAAD,EAAA,iBAAA,mBAAA,CAAA,KAAA;AAEA,iBAAA,MAAA;AACA,QAAAL,EAAA,sBAAA;AAAA,UACA,MAAA,KAAA;AAAA,QACA,CAAA;AAAA,MAEA,GAAA,MAAAM,CAAA;AAAA,IACA;AAAA,IAEA,2BAAA,EAAA,MAAAC,KAAA;AACA,WAAA,iBAAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AACA,MAAA,KAAA,YAAA,KAAA,OACA,KAAA,UAAA,SAAA,IAEA,KAAA,UAAA,WAAA;AAAA,IAEA;AAAA,IAEA,YAAA;AACA,MAAA,KAAA,YACA,KAAA,iBAAA,EAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppNavigation-DtxPGDOf.cjs → NcAppNavigation-CmBNq0sh.cjs}

@@ -1,6 +1,6 @@
-require('../assets/NcAppNavigation-BgGJuJPv.css');
+require('../assets/NcAppNavigation-wkQJnaLW.css');
 "use strict";
-const o = require("../Composables/useIsMobile.cjs"), s = require("./focusTrap-xauhLvvr.cjs"), a = require("@nextcloud/event-bus"), p = require("focus-trap"), l = require("./NcAppNavigationToggle-ACf6tmPq.cjs"), r = require("../Components/NcAppNavigationList.cjs"), g = require("vue"), c = require("./_plugin-vue2_normalizer-GXKvuwrq.cjs"), u = (e) => e && e.__esModule ? e : { default: e }, d = /* @__PURE__ */ u(g), v = {
+const o = require("../Composables/useIsMobile.cjs"), s = require("./focusTrap-xauhLvvr.cjs"), a = require("@nextcloud/event-bus"), p = require("focus-trap"), l = require("./NcAppNavigationToggle-nnE6CrRb.cjs"), r = require("../Components/NcAppNavigationList.cjs"), g = require("vue"), c = require("./_plugin-vue2_normalizer-GXKvuwrq.cjs"), u = (e) => e && e.__esModule ? e : { default: e }, d = /* @__PURE__ */ u(g), v = {
   name: "NcAppNavigation",
   components: {
     NcAppNavigationList: r,
@@ -107,7 +107,7 @@ var f = function() {
   N,
   !1,
   null,
-  "e7c1d2d1",
+  "42389274",
   null,
   null
 );

package/dist/chunks/{NcAppNavigation-DtxPGDOf.cjs.map → NcAppNavigation-CmBNq0sh.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigation-DtxPGDOf.cjs","sources":["../../src/components/NcAppNavigation/NcAppNavigation.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2019 Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @author Christoph Wurst <christoph@winzerhof-wurst.at>\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<docs>\nThe navigation bar can be open and closed from anywhere in the app using the\nnextcloud event bus.\n\n### Install the event bus package\n\n```bash\nnpm i -S @nextcloud/event-bus\n```\n\n### Usage\n\n#### Open the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: true,\n})\n```\n\n#### Close the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: false,\n})\n```\n\n</docs>\n\n<template>\n\t<div ref=\"appNavigationContainer\"\n\t\tclass=\"app-navigation\"\n\t\t:class=\"{'app-navigation--close':!open }\">\n\t\t<nav id=\"app-navigation-vue\"\n\t\t\t:aria-hidden=\"open ? 'false' : 'true'\"\n\t\t\t:aria-label=\"ariaLabel || undefined\"\n\t\t\t:aria-labelledby=\"ariaLabelledby || undefined\"\n\t\t\tclass=\"app-navigation__content\"\n\t\t\t:inert=\"!open || undefined\"\n\t\t\t@keydown.esc=\"handleEsc\">\n\t\t\t<div class=\"app-navigation__body\" :class=\"{ 'app-navigation__body--no-list': !$scopedSlots.list }\">\n\t\t\t\t<!-- The main content of the navigation. If no list is passed to the #list slot, stretched vertically. -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\n\t\t\t<NcAppNavigationList v-if=\"$scopedSlots.list\" class=\"app-navigation__list\">\n\t\t\t\t<!-- List for Navigation list items. Stretched between the main content and the footer -->\n\t\t\t\t<slot name=\"list\" />\n\t\t\t</NcAppNavigationList>\n\n\t\t\t<!-- Footer for e.g. NcAppNavigationSettings -->\n\t\t\t<slot name=\"footer\" />\n\t\t</nav>\n\t\t<NcAppNavigationToggle :open=\"open\" @update:open=\"toggleNavigation\" />\n\t</div>\n</template>\n\n<script>\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.js'\nimport { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { createFocusTrap } from 'focus-trap'\n\nimport NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'\nimport NcAppNavigationList from '../NcAppNavigationList/index.js'\nimport Vue from 'vue'\n\nexport default {\n\tname: 'NcAppNavigation',\n\n\tcomponents: {\n\t\tNcAppNavigationList,\n\t\tNcAppNavigationToggle,\n\t},\n\n\t// Injected from NcContent\n\tinject: {\n\t\tsetHasAppNavigation: {\n\t\t\tdefault: () => () => Vue.util.warn('NcAppNavigation is not mounted inside NcContent, this is probably an error.'),\n\t\t\tfrom: 'NcContent:setHasAppNavigation',\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The aria label to describe the navigation\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * aria-labelledby attribute to describe the navigation\n\t\t */\n\t\tariaLabelledby: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\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\topen: !this.isMobile,\n\t\t\tfocusTrap: null,\n\t\t}\n\t},\n\n\twatch: {\n\t\tisMobile() {\n\t\t\tthis.open = !this.isMobile\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\t\topen() {\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.setHasAppNavigation(true)\n\t\tsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\t// Emit an event with the initial state of the navigation\n\t\temit('navigation-toggled', {\n\t\t\topen: this.open,\n\t\t})\n\n\t\tthis.focusTrap = createFocusTrap(this.$refs.appNavigationContainer, {\n\t\t\tallowOutsideClick: true,\n\t\t\tfallbackFocus: this.$refs.appNavigationContainer,\n\t\t\ttrapStack: getTrapStack(),\n\t\t\tescapeDeactivates: false,\n\t\t})\n\t\tthis.toggleFocusTrap()\n\t},\n\tunmounted() {\n\t\tthis.setHasAppNavigation(false)\n\t\tunsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\tthis.focusTrap.deactivate()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Toggle the navigation\n\t\t *\n\t\t * @param {boolean} [state] set the state instead of inverting the current one\n\t\t */\n\t\ttoggleNavigation(state) {\n\t\t\t// Early return if alreay in that state\n\t\t\tif (this.open === state) {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.open = (typeof state === 'undefined') ? !this.open : state\n\t\t\tconst bodyStyles = getComputedStyle(document.body)\n\t\t\tconst animationLength = parseInt(bodyStyles.getPropertyValue('--animation-quick')) || 100\n\n\t\t\tsetTimeout(() => {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t// We wait for 1.5 times the animation length to give the animation time to really finish.\n\t\t\t}, 1.5 * animationLength)\n\t\t},\n\n\t\ttoggleNavigationByEventBus({ open }) {\n\t\t\tthis.toggleNavigation(open)\n\t\t},\n\n\t\t/**\n\t\t * Activate focus trap if it is currently needed, otherwise deactivate\n\t\t */\n\t\ttoggleFocusTrap() {\n\t\t\tif (this.isMobile && this.open) {\n\t\t\t\tthis.focusTrap.activate()\n\t\t\t} else {\n\t\t\t\tthis.focusTrap.deactivate()\n\t\t\t}\n\t\t},\n\n\t\thandleEsc() {\n\t\t\tif (this.isMobile) {\n\t\t\t\tthis.toggleNavigation(false)\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n.app-navigation,\n.app-content {\n\t/** Distance of the app naviation toggle and the first navigation item to the top edge of the app content container */\n\t--app-navigation-padding: #{$app-navigation-padding};\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.app-navigation {\n\t// Set scoped variable override\n\t// Using --color-text-maxcontrast as a fallback evaluates to an invalid value as it references itself in this scope instead of the variable defined higher up\n\t--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-text-maxcontrast-default));\n\ttransition: transform var(--animation-quick), margin var(--animation-quick);\n\twidth: $navigation-width;\n\t// Left toggle button padding + toggle button + right padding from NcAppContent\n\tmax-width: calc(100vw - (var(--app-navigation-padding) + var(--default-clickable-area) + var(--default-grid-baseline)));\n\tposition: relative;\n\ttop: 0;\n\tleft: 0;\n\tpadding: 0px;\n\t// Above appcontent\n\tz-index: 1800;\n\theight: 100%;\n\tbox-sizing: border-box;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\tflex-grow: 0;\n\tflex-shrink: 0;\n\tbackground-color:  var(--color-main-background-blur, var(--color-main-background));\n\t-webkit-backdrop-filter: var(--filter-background-blur, none);\n\tbackdrop-filter: var(--filter-background-blur, none);\n\n\t&--close {\n\t\ttransform: translateX(-100%);\n\t\tposition: absolute;\n\t}\n\n\t// For legacy purposes support passing a bare list to the content in #default slot and including #footer slot\n\t// Same styles as NcAppNavigationList\n\t&__content > ul {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--default-grid-baseline, 4px);\n\t\tpadding: var(--app-navigation-padding);\n\t}\n\n\t// Always stretch the navigation list\n\t& &__list {\n\t\theight: 100%;\n\t}\n\n\t// Stretch the main content if there is no stretched list\n\t&__body--no-list {\n\t\tflex: 1 1 auto;\n\t\toverflow: auto;\n\t\theight: 100%;\n\t}\n\n\t&__content {\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n}\n\n// add extra border for high contrast mode\n[data-themes*='highcontrast'] {\n\t.app-navigation {\n\t\tborder-right: 1px solid var(--color-border);\n\t}\n}\n\n// When on mobile, we make the navigation slide over the appcontent\n@media only screen and (max-width: $breakpoint-mobile) {\n\t.app-navigation:not(.app-navigation--close) {\n\t\tposition: absolute;\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcAppNavigationList","NcAppNavigationToggle","Vue","useIsMobile","subscribe","emit","createFocusTrap","getTrapStack","unsubscribe","state","bodyStyles","animationLength","open"],"mappings":";iaA6FAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,qBAAAC;AAAAA,IACA,uBAAAC,EAAA;AAAA,EACA;AAAA;AAAA,EAGA,QAAA;AAAA,IACA,qBAAA;AAAA,MACA,SAAA,MAAA,MAAAC,EAAAA,QAAA,KAAA,KAAA,6EAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,WAAA;AAAA,MACA,UAAAC,EAAAA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,MAAA,CAAA,KAAA;AAAA,MACA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,WAAA;AACA,WAAA,OAAA,CAAA,KAAA,UACA,KAAA,gBAAA;AAAA,IACA;AAAA,IACA,OAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,oBAAA,EAAA,GACAC,YAAA,qBAAA,KAAA,0BAAA,GAEAC,EAAAA,KAAA,sBAAA;AAAA,MACA,MAAA,KAAA;AAAA,IACA,CAAA,GAEA,KAAA,YAAAC,EAAAA,gBAAA,KAAA,MAAA,wBAAA;AAAA,MACA,mBAAA;AAAA,MACA,eAAA,KAAA,MAAA;AAAA,MACA,WAAAC,EAAAA,aAAA;AAAA,MACA,mBAAA;AAAA,IACA,CAAA,GACA,KAAA,gBAAA;AAAA,EACA;AAAA,EACA,YAAA;AACA,SAAA,oBAAA,EAAA,GACAC,cAAA,qBAAA,KAAA,0BAAA,GACA,KAAA,UAAA,WAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAAC,GAAA;AAEA,UAAA,KAAA,SAAAA,GAAA;AACAJ,QAAAA,EAAAA,KAAA,sBAAA;AAAA,UACA,MAAA,KAAA;AAAA,QACA,CAAA;AACA;AAAA,MACA;AAEA,WAAA,OAAA,OAAAI,IAAA,MAAA,CAAA,KAAA,OAAAA;AACA,YAAAC,IAAA,iBAAA,SAAA,IAAA,GACAC,IAAA,SAAAD,EAAA,iBAAA,mBAAA,CAAA,KAAA;AAEA,iBAAA,MAAA;AACAL,QAAAA,EAAAA,KAAA,sBAAA;AAAA,UACA,MAAA,KAAA;AAAA,QACA,CAAA;AAAA,MAEA,GAAA,MAAAM,CAAA;AAAA,IACA;AAAA,IAEA,2BAAA,EAAA,MAAAC,KAAA;AACA,WAAA,iBAAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AACA,MAAA,KAAA,YAAA,KAAA,OACA,KAAA,UAAA,SAAA,IAEA,KAAA,UAAA,WAAA;AAAA,IAEA;AAAA,IAEA,YAAA;AACA,MAAA,KAAA,YACA,KAAA,iBAAA,EAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppNavigation-CmBNq0sh.cjs","sources":["../../src/components/NcAppNavigation/NcAppNavigation.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2019 Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @author Christoph Wurst <christoph@winzerhof-wurst.at>\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<docs>\nThe navigation bar can be open and closed from anywhere in the app using the\nnextcloud event bus.\n\n### Install the event bus package\n\n```bash\nnpm i -S @nextcloud/event-bus\n```\n\n### Usage\n\n#### Open the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: true,\n})\n```\n\n#### Close the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: false,\n})\n```\n\n</docs>\n\n<template>\n\t<div ref=\"appNavigationContainer\"\n\t\tclass=\"app-navigation\"\n\t\t:class=\"{'app-navigation--close':!open }\">\n\t\t<nav id=\"app-navigation-vue\"\n\t\t\t:aria-hidden=\"open ? 'false' : 'true'\"\n\t\t\t:aria-label=\"ariaLabel || undefined\"\n\t\t\t:aria-labelledby=\"ariaLabelledby || undefined\"\n\t\t\tclass=\"app-navigation__content\"\n\t\t\t:inert=\"!open || undefined\"\n\t\t\t@keydown.esc=\"handleEsc\">\n\t\t\t<div class=\"app-navigation__body\" :class=\"{ 'app-navigation__body--no-list': !$scopedSlots.list }\">\n\t\t\t\t<!-- The main content of the navigation. If no list is passed to the #list slot, stretched vertically. -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\n\t\t\t<NcAppNavigationList v-if=\"$scopedSlots.list\" class=\"app-navigation__list\">\n\t\t\t\t<!-- List for Navigation list items. Stretched between the main content and the footer -->\n\t\t\t\t<slot name=\"list\" />\n\t\t\t</NcAppNavigationList>\n\n\t\t\t<!-- Footer for e.g. NcAppNavigationSettings -->\n\t\t\t<slot name=\"footer\" />\n\t\t</nav>\n\t\t<NcAppNavigationToggle :open=\"open\" @update:open=\"toggleNavigation\" />\n\t</div>\n</template>\n\n<script>\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.js'\nimport { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { createFocusTrap } from 'focus-trap'\n\nimport NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'\nimport NcAppNavigationList from '../NcAppNavigationList/index.js'\nimport Vue from 'vue'\n\nexport default {\n\tname: 'NcAppNavigation',\n\n\tcomponents: {\n\t\tNcAppNavigationList,\n\t\tNcAppNavigationToggle,\n\t},\n\n\t// Injected from NcContent\n\tinject: {\n\t\tsetHasAppNavigation: {\n\t\t\tdefault: () => () => Vue.util.warn('NcAppNavigation is not mounted inside NcContent, this is probably an error.'),\n\t\t\tfrom: 'NcContent:setHasAppNavigation',\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The aria label to describe the navigation\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * aria-labelledby attribute to describe the navigation\n\t\t */\n\t\tariaLabelledby: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\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\topen: !this.isMobile,\n\t\t\tfocusTrap: null,\n\t\t}\n\t},\n\n\twatch: {\n\t\tisMobile() {\n\t\t\tthis.open = !this.isMobile\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\t\topen() {\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.setHasAppNavigation(true)\n\t\tsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\t// Emit an event with the initial state of the navigation\n\t\temit('navigation-toggled', {\n\t\t\topen: this.open,\n\t\t})\n\n\t\tthis.focusTrap = createFocusTrap(this.$refs.appNavigationContainer, {\n\t\t\tallowOutsideClick: true,\n\t\t\tfallbackFocus: this.$refs.appNavigationContainer,\n\t\t\ttrapStack: getTrapStack(),\n\t\t\tescapeDeactivates: false,\n\t\t})\n\t\tthis.toggleFocusTrap()\n\t},\n\tunmounted() {\n\t\tthis.setHasAppNavigation(false)\n\t\tunsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\tthis.focusTrap.deactivate()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Toggle the navigation\n\t\t *\n\t\t * @param {boolean} [state] set the state instead of inverting the current one\n\t\t */\n\t\ttoggleNavigation(state) {\n\t\t\t// Early return if alreay in that state\n\t\t\tif (this.open === state) {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.open = (typeof state === 'undefined') ? !this.open : state\n\t\t\tconst bodyStyles = getComputedStyle(document.body)\n\t\t\tconst animationLength = parseInt(bodyStyles.getPropertyValue('--animation-quick')) || 100\n\n\t\t\tsetTimeout(() => {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t// We wait for 1.5 times the animation length to give the animation time to really finish.\n\t\t\t}, 1.5 * animationLength)\n\t\t},\n\n\t\ttoggleNavigationByEventBus({ open }) {\n\t\t\tthis.toggleNavigation(open)\n\t\t},\n\n\t\t/**\n\t\t * Activate focus trap if it is currently needed, otherwise deactivate\n\t\t */\n\t\ttoggleFocusTrap() {\n\t\t\tif (this.isMobile && this.open) {\n\t\t\t\tthis.focusTrap.activate()\n\t\t\t} else {\n\t\t\t\tthis.focusTrap.deactivate()\n\t\t\t}\n\t\t},\n\n\t\thandleEsc() {\n\t\t\tif (this.isMobile) {\n\t\t\t\tthis.toggleNavigation(false)\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n.app-navigation,\n.app-content {\n\t/** Distance of the app naviation toggle and the first navigation item to the top edge of the app content container */\n\t--app-navigation-padding: #{$app-navigation-padding};\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.app-navigation {\n\t// Set scoped variable override\n\t// Using --color-text-maxcontrast as a fallback evaluates to an invalid value as it references itself in this scope instead of the variable defined higher up\n\t--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-text-maxcontrast-default));\n\ttransition: transform var(--animation-quick), margin var(--animation-quick);\n\twidth: $navigation-width;\n\t// Left toggle button padding + toggle button + right padding from NcAppContent\n\t--app-navigation-max-width: calc(100vw - (var(--app-navigation-padding) + var(--default-clickable-area) + var(--default-grid-baseline)));\n\tmax-width: var(--app-navigation-max-width);\n\tposition: relative;\n\ttop: 0;\n\tleft: 0;\n\tpadding: 0px;\n\t// Above appcontent\n\tz-index: 1800;\n\theight: 100%;\n\tbox-sizing: border-box;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\tflex-grow: 0;\n\tflex-shrink: 0;\n\tbackground-color: var(--color-main-background-blur, var(--color-main-background));\n\t-webkit-backdrop-filter: var(--filter-background-blur, none);\n\tbackdrop-filter: var(--filter-background-blur, none);\n\n\t&--close {\n\t\tmargin-left: calc(-1 * min($navigation-width, var(--app-navigation-max-width)));\n\t}\n\n\t// For legacy purposes support passing a bare list to the content in #default slot and including #footer slot\n\t// Same styles as NcAppNavigationList\n\t&__content > ul {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--default-grid-baseline, 4px);\n\t\tpadding: var(--app-navigation-padding);\n\t}\n\n\t// Always stretch the navigation list\n\t& &__list {\n\t\theight: 100%;\n\t}\n\n\t// Stretch the main content if there is no stretched list\n\t&__body--no-list {\n\t\tflex: 1 1 auto;\n\t\toverflow: auto;\n\t\theight: 100%;\n\t}\n\n\t&__content {\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n}\n\n// add extra border for high contrast mode\n[data-themes*='highcontrast'] {\n\t.app-navigation {\n\t\tborder-right: 1px solid var(--color-border);\n\t}\n}\n\n// When on mobile, we make the navigation slide over the appcontent\n@media only screen and (max-width: $breakpoint-mobile) {\n\t.app-navigation {\n\t\tposition: absolute;\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcAppNavigationList","NcAppNavigationToggle","Vue","useIsMobile","subscribe","emit","createFocusTrap","getTrapStack","unsubscribe","state","bodyStyles","animationLength","open"],"mappings":";iaA6FAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,qBAAAC;AAAAA,IACA,uBAAAC,EAAA;AAAA,EACA;AAAA;AAAA,EAGA,QAAA;AAAA,IACA,qBAAA;AAAA,MACA,SAAA,MAAA,MAAAC,EAAAA,QAAA,KAAA,KAAA,6EAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,WAAA;AAAA,MACA,UAAAC,EAAAA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,MAAA,CAAA,KAAA;AAAA,MACA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,WAAA;AACA,WAAA,OAAA,CAAA,KAAA,UACA,KAAA,gBAAA;AAAA,IACA;AAAA,IACA,OAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,oBAAA,EAAA,GACAC,YAAA,qBAAA,KAAA,0BAAA,GAEAC,EAAAA,KAAA,sBAAA;AAAA,MACA,MAAA,KAAA;AAAA,IACA,CAAA,GAEA,KAAA,YAAAC,EAAAA,gBAAA,KAAA,MAAA,wBAAA;AAAA,MACA,mBAAA;AAAA,MACA,eAAA,KAAA,MAAA;AAAA,MACA,WAAAC,EAAAA,aAAA;AAAA,MACA,mBAAA;AAAA,IACA,CAAA,GACA,KAAA,gBAAA;AAAA,EACA;AAAA,EACA,YAAA;AACA,SAAA,oBAAA,EAAA,GACAC,cAAA,qBAAA,KAAA,0BAAA,GACA,KAAA,UAAA,WAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAAC,GAAA;AAEA,UAAA,KAAA,SAAAA,GAAA;AACAJ,QAAAA,EAAAA,KAAA,sBAAA;AAAA,UACA,MAAA,KAAA;AAAA,QACA,CAAA;AACA;AAAA,MACA;AAEA,WAAA,OAAA,OAAAI,IAAA,MAAA,CAAA,KAAA,OAAAA;AACA,YAAAC,IAAA,iBAAA,SAAA,IAAA,GACAC,IAAA,SAAAD,EAAA,iBAAA,mBAAA,CAAA,KAAA;AAEA,iBAAA,MAAA;AACAL,QAAAA,EAAAA,KAAA,sBAAA;AAAA,UACA,MAAA,KAAA;AAAA,QACA,CAAA;AAAA,MAEA,GAAA,MAAAM,CAAA;AAAA,IACA;AAAA,IAEA,2BAAA,EAAA,MAAAC,KAAA;AACA,WAAA,iBAAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AACA,MAAA,KAAA,YAAA,KAAA,OACA,KAAA,UAAA,SAAA,IAEA,KAAA,UAAA,WAAA;AAAA,IAEA;AAAA,IAEA,YAAA;AACA,MAAA,KAAA,YACA,KAAA,iBAAA,EAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppNavigationCaption-g4NsNSvL.mjs → NcAppNavigationCaption-BQsUUBUS.mjs}

@@ -1,5 +1,5 @@
 import '../assets/NcAppNavigationCaption-jV1y8HQ1.css';
-import { N as a } from "./NcActions-D2wvJbMw.mjs";
+import { N as a } from "./NcActions-B1Ue3gj8.mjs";
 import { n as i } from "./_plugin-vue2_normalizer-Bj5bLKV4.mjs";
 const s = {
   name: "NcAppNavigationCaption",

package/dist/chunks/{NcAppNavigationCaption-g4NsNSvL.mjs.map → NcAppNavigationCaption-BQsUUBUS.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigationCaption-g4NsNSvL.mjs","sources":["../../src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue"],"sourcesContent":["<docs>\n```vue\n\t<template>\n\t\t<ul class=\"nav\">\n\t\t\t<NcAppNavigationCaption\n\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tThis is an action\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationCaption>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n\t<style scoped>\n\t\t/* mock the appnavigation */\n\t\tul.nav {\n\t\t\tbackground-color: #cce6f4;\n\t\t}\n\t</style>\n```\n\n### Element with a slot for custom actions icon\n```vue\n\t<template>\n\t\t<ul class=\"nav\">\n\t\t\t<NcAppNavigationCaption\n\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t<template #actionsTriggerIcon>\n\t\t\t\t\t<Plus slot=\"icon\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton>\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\tRename\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<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<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tValidate\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Download :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDownload\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationCaption>\n\t\t</ul>\n\t</template>\n\t<script>\n\t\timport ArrowRight from 'vue-material-design-icons/ArrowRight'\n\t\timport Delete from 'vue-material-design-icons/Delete'\n\t\timport Download from 'vue-material-design-icons/Download'\n\t\timport Pencil from 'vue-material-design-icons/Pencil'\n\t\timport Plus from 'vue-material-design-icons/Plus'\n\n\t\texport default {\n\t\t\tcomponents: {\n\t\t\t\tArrowRight,\n\t\t\t\tDelete,\n\t\t\t\tDownload,\n\t\t\t\tPencil,\n\t\t\t\tPlus,\n\t\t\t}\n\t\t}\n\t</script>\n\t<style scoped>\n\t\t/* mock the appnavigation */\n\t\tul.nav {\n\t\t\tbackground-color: #cce6f4;\n\t\t}\n\t</style>\n```\n\n</docs>\n\n<template>\n\t<component :is=\"wrapperTag\"\n\t\tclass=\"app-navigation-caption\"\n\t\t:class=\"{ 'app-navigation-caption--heading': isHeading }\">\n\t\t<!-- Name of the caption -->\n\t\t<component :is=\"captionTag\" class=\"app-navigation-caption__name\">\n\t\t\t{{ name }}\n\t\t</component>\n\n\t\t<!-- Actions -->\n\t\t<div v-if=\"hasActions\"\n\t\t\tclass=\"app-navigation-caption__actions\">\n\t\t\t<NcActions v-bind=\"$attrs\"\n\t\t\t\tv-on=\"$listeners\">\n\t\t\t\t<!-- @slot Slot for the actions menu -->\n\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"actionsTriggerIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcActions>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\n\nexport default {\n\tname: 'NcAppNavigationCaption',\n\n\tcomponents: {\n\t\tNcActions,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Enable when used as a heading\n\t\t * e.g. Before NcAppNavigationList\n\t\t */\n\t\tisHeading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Any [NcActions](#/Components/NcActions?id=ncactions-1) prop\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\t},\n\n\tcomputed: {\n\t\twrapperTag() {\n\t\t\treturn this.isHeading ? 'div' : 'li'\n\t\t},\n\t\tcaptionTag() {\n\t\t\treturn this.isHeading ? 'h2' : 'span'\n\t\t},\n\t\t// Check if the actions slot is populated\n\t\thasActions() {\n\t\t\treturn !!this.$slots.actions\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.app-navigation-caption {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\n\t&--heading {\n\t\tpadding: var(--app-navigation-padding);\n\t\t&:not(:first-child):not(:last-child) {\n\t\t\tpadding: 0 var(--app-navigation-padding);\n\t\t}\n\t}\n\n\t&__name {\n\t\tfont-weight: bold;\n\t\tcolor: var(--color-main-text);\n\t\tfont-size: var(--default-font-size);\n\t\tline-height: $clickable-area;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tbox-shadow: none !important;\n\t\tflex-shrink: 0;\n\t\t// padding to align the name with the icon of app navigation items\n\t\tpadding: 0 calc(var(--default-grid-baseline, 4px) * 2) 0 calc(var(--default-grid-baseline, 4px) * 3);\n\t\tmargin-bottom: 12px;\n\t}\n\n\t&__actions {\n\t\tflex: 0 0 $clickable-area;\n\t}\n}\n\n// extra top space if it's not the first item on the list\n.app-navigation-caption:not(:first-child) {\n\tmargin-top: math.div($clickable-area, 2);\n}\n</style>\n"],"names":["_sfc_main","NcActions"],"mappings":";;AA8HA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAC;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,KAAA,CAAA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,YAAA,QAAA;AAAA,IACA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,YAAA,OAAA;AAAA,IACA;AAAA;AAAA,IAEA,aAAA;AACA,aAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppNavigationCaption-BQsUUBUS.mjs","sources":["../../src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue"],"sourcesContent":["<docs>\n```vue\n\t<template>\n\t\t<ul class=\"nav\">\n\t\t\t<NcAppNavigationCaption\n\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tThis is an action\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationCaption>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n\t<style scoped>\n\t\t/* mock the appnavigation */\n\t\tul.nav {\n\t\t\tbackground-color: #cce6f4;\n\t\t}\n\t</style>\n```\n\n### Element with a slot for custom actions icon\n```vue\n\t<template>\n\t\t<ul class=\"nav\">\n\t\t\t<NcAppNavigationCaption\n\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t<template #actionsTriggerIcon>\n\t\t\t\t\t<Plus slot=\"icon\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton>\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\tRename\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<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<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tValidate\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Download :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDownload\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationCaption>\n\t\t</ul>\n\t</template>\n\t<script>\n\t\timport ArrowRight from 'vue-material-design-icons/ArrowRight'\n\t\timport Delete from 'vue-material-design-icons/Delete'\n\t\timport Download from 'vue-material-design-icons/Download'\n\t\timport Pencil from 'vue-material-design-icons/Pencil'\n\t\timport Plus from 'vue-material-design-icons/Plus'\n\n\t\texport default {\n\t\t\tcomponents: {\n\t\t\t\tArrowRight,\n\t\t\t\tDelete,\n\t\t\t\tDownload,\n\t\t\t\tPencil,\n\t\t\t\tPlus,\n\t\t\t}\n\t\t}\n\t</script>\n\t<style scoped>\n\t\t/* mock the appnavigation */\n\t\tul.nav {\n\t\t\tbackground-color: #cce6f4;\n\t\t}\n\t</style>\n```\n\n</docs>\n\n<template>\n\t<component :is=\"wrapperTag\"\n\t\tclass=\"app-navigation-caption\"\n\t\t:class=\"{ 'app-navigation-caption--heading': isHeading }\">\n\t\t<!-- Name of the caption -->\n\t\t<component :is=\"captionTag\" class=\"app-navigation-caption__name\">\n\t\t\t{{ name }}\n\t\t</component>\n\n\t\t<!-- Actions -->\n\t\t<div v-if=\"hasActions\"\n\t\t\tclass=\"app-navigation-caption__actions\">\n\t\t\t<NcActions v-bind=\"$attrs\"\n\t\t\t\tv-on=\"$listeners\">\n\t\t\t\t<!-- @slot Slot for the actions menu -->\n\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"actionsTriggerIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcActions>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\n\nexport default {\n\tname: 'NcAppNavigationCaption',\n\n\tcomponents: {\n\t\tNcActions,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Enable when used as a heading\n\t\t * e.g. Before NcAppNavigationList\n\t\t */\n\t\tisHeading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Any [NcActions](#/Components/NcActions?id=ncactions-1) prop\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\t},\n\n\tcomputed: {\n\t\twrapperTag() {\n\t\t\treturn this.isHeading ? 'div' : 'li'\n\t\t},\n\t\tcaptionTag() {\n\t\t\treturn this.isHeading ? 'h2' : 'span'\n\t\t},\n\t\t// Check if the actions slot is populated\n\t\thasActions() {\n\t\t\treturn !!this.$slots.actions\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.app-navigation-caption {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\n\t&--heading {\n\t\tpadding: var(--app-navigation-padding);\n\t\t&:not(:first-child):not(:last-child) {\n\t\t\tpadding: 0 var(--app-navigation-padding);\n\t\t}\n\t}\n\n\t&__name {\n\t\tfont-weight: bold;\n\t\tcolor: var(--color-main-text);\n\t\tfont-size: var(--default-font-size);\n\t\tline-height: $clickable-area;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tbox-shadow: none !important;\n\t\tflex-shrink: 0;\n\t\t// padding to align the name with the icon of app navigation items\n\t\tpadding: 0 calc(var(--default-grid-baseline, 4px) * 2) 0 calc(var(--default-grid-baseline, 4px) * 3);\n\t\tmargin-bottom: 12px;\n\t}\n\n\t&__actions {\n\t\tflex: 0 0 $clickable-area;\n\t}\n}\n\n// extra top space if it's not the first item on the list\n.app-navigation-caption:not(:first-child) {\n\tmargin-top: math.div($clickable-area, 2);\n}\n</style>\n"],"names":["_sfc_main","NcActions"],"mappings":";;AA8HA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAC;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,KAAA,CAAA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,YAAA,QAAA;AAAA,IACA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,YAAA,OAAA;AAAA,IACA;AAAA;AAAA,IAEA,aAAA;AACA,aAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppNavigationCaption-BefNtbTx.cjs → NcAppNavigationCaption-CUJSIO54.cjs}

@@ -1,6 +1,6 @@
 require('../assets/NcAppNavigationCaption-jV1y8HQ1.css');
 "use strict";
-const a = require("./NcActions-B049TCK5.cjs"), i = require("./_plugin-vue2_normalizer-GXKvuwrq.cjs"), s = {
+const a = require("./NcActions-X10TnO-4.cjs"), i = require("./_plugin-vue2_normalizer-GXKvuwrq.cjs"), s = {
   name: "NcAppNavigationCaption",
   components: {
     NcActions: a.NcActions

package/dist/chunks/{NcAppNavigationCaption-BefNtbTx.cjs.map → NcAppNavigationCaption-CUJSIO54.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigationCaption-BefNtbTx.cjs","sources":["../../src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue"],"sourcesContent":["<docs>\n```vue\n\t<template>\n\t\t<ul class=\"nav\">\n\t\t\t<NcAppNavigationCaption\n\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tThis is an action\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationCaption>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n\t<style scoped>\n\t\t/* mock the appnavigation */\n\t\tul.nav {\n\t\t\tbackground-color: #cce6f4;\n\t\t}\n\t</style>\n```\n\n### Element with a slot for custom actions icon\n```vue\n\t<template>\n\t\t<ul class=\"nav\">\n\t\t\t<NcAppNavigationCaption\n\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t<template #actionsTriggerIcon>\n\t\t\t\t\t<Plus slot=\"icon\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton>\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\tRename\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<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<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tValidate\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Download :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDownload\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationCaption>\n\t\t</ul>\n\t</template>\n\t<script>\n\t\timport ArrowRight from 'vue-material-design-icons/ArrowRight'\n\t\timport Delete from 'vue-material-design-icons/Delete'\n\t\timport Download from 'vue-material-design-icons/Download'\n\t\timport Pencil from 'vue-material-design-icons/Pencil'\n\t\timport Plus from 'vue-material-design-icons/Plus'\n\n\t\texport default {\n\t\t\tcomponents: {\n\t\t\t\tArrowRight,\n\t\t\t\tDelete,\n\t\t\t\tDownload,\n\t\t\t\tPencil,\n\t\t\t\tPlus,\n\t\t\t}\n\t\t}\n\t</script>\n\t<style scoped>\n\t\t/* mock the appnavigation */\n\t\tul.nav {\n\t\t\tbackground-color: #cce6f4;\n\t\t}\n\t</style>\n```\n\n</docs>\n\n<template>\n\t<component :is=\"wrapperTag\"\n\t\tclass=\"app-navigation-caption\"\n\t\t:class=\"{ 'app-navigation-caption--heading': isHeading }\">\n\t\t<!-- Name of the caption -->\n\t\t<component :is=\"captionTag\" class=\"app-navigation-caption__name\">\n\t\t\t{{ name }}\n\t\t</component>\n\n\t\t<!-- Actions -->\n\t\t<div v-if=\"hasActions\"\n\t\t\tclass=\"app-navigation-caption__actions\">\n\t\t\t<NcActions v-bind=\"$attrs\"\n\t\t\t\tv-on=\"$listeners\">\n\t\t\t\t<!-- @slot Slot for the actions menu -->\n\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"actionsTriggerIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcActions>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\n\nexport default {\n\tname: 'NcAppNavigationCaption',\n\n\tcomponents: {\n\t\tNcActions,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Enable when used as a heading\n\t\t * e.g. Before NcAppNavigationList\n\t\t */\n\t\tisHeading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Any [NcActions](#/Components/NcActions?id=ncactions-1) prop\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\t},\n\n\tcomputed: {\n\t\twrapperTag() {\n\t\t\treturn this.isHeading ? 'div' : 'li'\n\t\t},\n\t\tcaptionTag() {\n\t\t\treturn this.isHeading ? 'h2' : 'span'\n\t\t},\n\t\t// Check if the actions slot is populated\n\t\thasActions() {\n\t\t\treturn !!this.$slots.actions\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.app-navigation-caption {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\n\t&--heading {\n\t\tpadding: var(--app-navigation-padding);\n\t\t&:not(:first-child):not(:last-child) {\n\t\t\tpadding: 0 var(--app-navigation-padding);\n\t\t}\n\t}\n\n\t&__name {\n\t\tfont-weight: bold;\n\t\tcolor: var(--color-main-text);\n\t\tfont-size: var(--default-font-size);\n\t\tline-height: $clickable-area;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tbox-shadow: none !important;\n\t\tflex-shrink: 0;\n\t\t// padding to align the name with the icon of app navigation items\n\t\tpadding: 0 calc(var(--default-grid-baseline, 4px) * 2) 0 calc(var(--default-grid-baseline, 4px) * 3);\n\t\tmargin-bottom: 12px;\n\t}\n\n\t&__actions {\n\t\tflex: 0 0 $clickable-area;\n\t}\n}\n\n// extra top space if it's not the first item on the list\n.app-navigation-caption:not(:first-child) {\n\tmargin-top: math.div($clickable-area, 2);\n}\n</style>\n"],"names":["_sfc_main","NcActions"],"mappings":";sGA8HAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAC,EAAA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,KAAA,CAAA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,YAAA,QAAA;AAAA,IACA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,YAAA,OAAA;AAAA,IACA;AAAA;AAAA,IAEA,aAAA;AACA,aAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppNavigationCaption-CUJSIO54.cjs","sources":["../../src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue"],"sourcesContent":["<docs>\n```vue\n\t<template>\n\t\t<ul class=\"nav\">\n\t\t\t<NcAppNavigationCaption\n\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tThis is an action\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationCaption>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n\t<style scoped>\n\t\t/* mock the appnavigation */\n\t\tul.nav {\n\t\t\tbackground-color: #cce6f4;\n\t\t}\n\t</style>\n```\n\n### Element with a slot for custom actions icon\n```vue\n\t<template>\n\t\t<ul class=\"nav\">\n\t\t\t<NcAppNavigationCaption\n\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t<template #actionsTriggerIcon>\n\t\t\t\t\t<Plus slot=\"icon\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton>\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\tRename\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<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<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tValidate\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Download :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDownload\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationCaption>\n\t\t</ul>\n\t</template>\n\t<script>\n\t\timport ArrowRight from 'vue-material-design-icons/ArrowRight'\n\t\timport Delete from 'vue-material-design-icons/Delete'\n\t\timport Download from 'vue-material-design-icons/Download'\n\t\timport Pencil from 'vue-material-design-icons/Pencil'\n\t\timport Plus from 'vue-material-design-icons/Plus'\n\n\t\texport default {\n\t\t\tcomponents: {\n\t\t\t\tArrowRight,\n\t\t\t\tDelete,\n\t\t\t\tDownload,\n\t\t\t\tPencil,\n\t\t\t\tPlus,\n\t\t\t}\n\t\t}\n\t</script>\n\t<style scoped>\n\t\t/* mock the appnavigation */\n\t\tul.nav {\n\t\t\tbackground-color: #cce6f4;\n\t\t}\n\t</style>\n```\n\n</docs>\n\n<template>\n\t<component :is=\"wrapperTag\"\n\t\tclass=\"app-navigation-caption\"\n\t\t:class=\"{ 'app-navigation-caption--heading': isHeading }\">\n\t\t<!-- Name of the caption -->\n\t\t<component :is=\"captionTag\" class=\"app-navigation-caption__name\">\n\t\t\t{{ name }}\n\t\t</component>\n\n\t\t<!-- Actions -->\n\t\t<div v-if=\"hasActions\"\n\t\t\tclass=\"app-navigation-caption__actions\">\n\t\t\t<NcActions v-bind=\"$attrs\"\n\t\t\t\tv-on=\"$listeners\">\n\t\t\t\t<!-- @slot Slot for the actions menu -->\n\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"actionsTriggerIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcActions>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\n\nexport default {\n\tname: 'NcAppNavigationCaption',\n\n\tcomponents: {\n\t\tNcActions,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Enable when used as a heading\n\t\t * e.g. Before NcAppNavigationList\n\t\t */\n\t\tisHeading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Any [NcActions](#/Components/NcActions?id=ncactions-1) prop\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\t},\n\n\tcomputed: {\n\t\twrapperTag() {\n\t\t\treturn this.isHeading ? 'div' : 'li'\n\t\t},\n\t\tcaptionTag() {\n\t\t\treturn this.isHeading ? 'h2' : 'span'\n\t\t},\n\t\t// Check if the actions slot is populated\n\t\thasActions() {\n\t\t\treturn !!this.$slots.actions\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.app-navigation-caption {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\n\t&--heading {\n\t\tpadding: var(--app-navigation-padding);\n\t\t&:not(:first-child):not(:last-child) {\n\t\t\tpadding: 0 var(--app-navigation-padding);\n\t\t}\n\t}\n\n\t&__name {\n\t\tfont-weight: bold;\n\t\tcolor: var(--color-main-text);\n\t\tfont-size: var(--default-font-size);\n\t\tline-height: $clickable-area;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tbox-shadow: none !important;\n\t\tflex-shrink: 0;\n\t\t// padding to align the name with the icon of app navigation items\n\t\tpadding: 0 calc(var(--default-grid-baseline, 4px) * 2) 0 calc(var(--default-grid-baseline, 4px) * 3);\n\t\tmargin-bottom: 12px;\n\t}\n\n\t&__actions {\n\t\tflex: 0 0 $clickable-area;\n\t}\n}\n\n// extra top space if it's not the first item on the list\n.app-navigation-caption:not(:first-child) {\n\tmargin-top: math.div($clickable-area, 2);\n}\n</style>\n"],"names":["_sfc_main","NcActions"],"mappings":";sGA8HAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAC,EAAA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,KAAA,CAAA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,YAAA,QAAA;AAAA,IACA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,YAAA,OAAA;AAAA,IACA;AAAA;AAAA,IAEA,aAAA;AACA,aAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppNavigationItem-BSV20azN.mjs → NcAppNavigationItem-Cheox0NI.mjs}

@@ -1,15 +1,15 @@
 import '../assets/NcAppNavigationItem-BxoyzD83.css';
-import { N as u } from "./NcActions-D2wvJbMw.mjs";
+import { N as u } from "./NcActions-B1Ue3gj8.mjs";
 import p from "../Components/NcActionButton.mjs";
 import d from "../Components/NcLoadingIcon.mjs";
 import f from "../Components/NcVNodes.mjs";
 import m from "../Components/NcButton.mjs";
-import { r, H as _, a as o, c as h, I as g } from "./_l10n-CAwwH-o2.mjs";
+import { r, H as _, a as o, c as h, I as g } from "./_l10n-BZu8wI2q.mjs";
 import { C as y } from "./ChevronDown-HHJdUMN4.mjs";
 import { C as v } from "./ChevronUp-B6TIgl1a.mjs";
 import { n as s } from "./_plugin-vue2_normalizer-Bj5bLKV4.mjs";
 import { useIsMobile as C } from "../Composables/useIsMobile.mjs";
-import { N as b } from "./NcInputConfirmCancel-fwl4-RD4.mjs";
+import { N as b } from "./NcInputConfirmCancel-D5GYt1Th.mjs";
 import { G as k } from "./GenRandomId-BW3iYFf9.mjs";
 r(_);
 const N = {