@nextcloud/vue 8.4.0 → 8.5.0

package/dist/Components/NcAppNavigation.cjs

@@ -1,101 +1,3 @@
-var _ = require("../assets/index-5784183b.css");
-const o = require("../chunks/NcAppNavigationToggle-6d192bea.cjs"), s = require("../Composables/useIsMobile.cjs"), p = require("../chunks/focusTrap-14985831.cjs"), i = require("@nextcloud/event-bus"), l = require("focus-trap"), r = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
-const g = {
-  name: "NcAppNavigation",
-  components: {
-    NcAppNavigationToggle: o.NcAppNavigationToggle
-  },
-  props: {
-    /**
-     * The aria label to describe the navigation
-     */
-    ariaLabel: {
-      type: String,
-      default: ""
-    },
-    /**
-     * aria-labelledby attribute to describe the navigation
-     */
-    ariaLabelledby: {
-      type: String,
-      default: ""
-    }
-  },
-  setup() {
-    return {
-      isMobile: s.useIsMobile()
-    };
-  },
-  data() {
-    return {
-      open: !this.isMobile,
-      focusTrap: null
-    };
-  },
-  watch: {
-    isMobile() {
-      this.open = !this.isMobile, this.toggleFocusTrap();
-    },
-    open() {
-      this.toggleFocusTrap();
-    }
-  },
-  mounted() {
-    i.subscribe("toggle-navigation", this.toggleNavigationByEventBus), i.emit("navigation-toggled", {
-      open: this.open
-    }), this.focusTrap = l.createFocusTrap(this.$refs.appNavigationContainer, {
-      allowOutsideClick: !0,
-      fallbackFocus: this.$refs.appNavigationContainer,
-      trapStack: p.getTrapStack(),
-      escapeDeactivates: !1
-    }), this.toggleFocusTrap();
-  },
-  unmounted() {
-    i.unsubscribe("toggle-navigation", this.toggleNavigationByEventBus), this.focusTrap.deactivate();
-  },
-  methods: {
-    /**
-     * Toggle the navigation
-     *
-     * @param {boolean} [state] set the state instead of inverting the current one
-     */
-    toggleNavigation(a) {
-      this.open = typeof a > "u" ? !this.open : a;
-      const e = getComputedStyle(document.body), t = parseInt(e.getPropertyValue("--animation-quick")) || 100;
-      setTimeout(() => {
-        i.emit("navigation-toggled", {
-          open: this.open
-        });
-      }, 1.5 * t);
-    },
-    toggleNavigationByEventBus({ open: a }) {
-      this.toggleNavigation(a);
-    },
-    /**
-     * Activate focus trap if it is currently needed, otherwise deactivate
-     */
-    toggleFocusTrap() {
-      this.isMobile && this.open ? this.focusTrap.activate() : this.focusTrap.deactivate();
-    },
-    handleEsc() {
-      this.isMobile && this.toggleNavigation(!1);
-    }
-  }
-};
-var c = function() {
-  var e = this, t = e._self._c;
-  return t("div", { ref: "appNavigationContainer", staticClass: "app-navigation", class: { "app-navigation--close": !e.open } }, [t("nav", { staticClass: "app-navigation__content", attrs: { id: "app-navigation-vue", "aria-hidden": e.open ? "false" : "true", "aria-label": e.ariaLabel || void 0, "aria-labelledby": e.ariaLabelledby || void 0, inert: !e.open || void 0 }, on: { keydown: function(n) {
-    return !n.type.indexOf("key") && e._k(n.keyCode, "esc", 27, n.key, ["Esc", "Escape"]) ? null : e.handleEsc.apply(null, arguments);
-  } } }, [e._t("default"), t("ul", { staticClass: "app-navigation__list" }, [e._t("list")], 2), e._t("footer")], 2), t("NcAppNavigationToggle", { attrs: { open: e.open }, on: { "update:open": e.toggleNavigation } })], 1);
-}, u = [], d = /* @__PURE__ */ r.normalizeComponent(
-  g,
-  c,
-  u,
-  !1,
-  null,
-  "8c6d0d34",
-  null,
-  null
-);
-const v = d.exports;
-module.exports = v;
+"use strict";
+const i = require("../chunks/NcAppNavigation-oke9RxP6.cjs");
+module.exports = i.NcAppNavigation;

package/dist/Components/NcAppNavigation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigation.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<slot />\n\t\t\t<!-- List for Navigation li-items -->\n\t\t\t<ul class=\"app-navigation__list\">\n\t\t\t\t<slot name=\"list\" />\n\t\t\t</ul>\n\n\t\t\t<!-- Footer for e.g. AppNavigationSettings -->\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 NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.js'\n\nimport { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'\n\nimport { createFocusTrap } from 'focus-trap'\n\nexport default {\n\tname: 'NcAppNavigation',\n\n\tcomponents: {\n\t\tNcAppNavigationToggle,\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\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\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\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&__content > ul,\n\t&__list {\n\t\tposition: relative;\n\t\theight: 100%;\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\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","NcAppNavigationToggle","Composables_useIsMobile","eventBus","focusTrap","focusTrap$1","state","bodyStyles","animationLength","open"],"mappings":";;AAwFA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,uBAAAC,EAAA;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,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,IAAAC,EAAA,UAAA,qBAAA,KAAA,0BAAA,GAEAA,EAAA,KAAA,sBAAA;AAAA,MACA,MAAA,KAAA;AAAA,IACA,CAAA,GAEA,KAAA,YAAAC,EAAA,gBAAA,KAAA,MAAA,wBAAA;AAAA,MACA,mBAAA;AAAA,MACA,eAAA,KAAA,MAAA;AAAA,MACA,WAAAC,EAAA,aAAA;AAAA,MACA,mBAAA;AAAA,IACA,CAAA,GACA,KAAA,gBAAA;AAAA,EACA;AAAA,EACA,YAAA;AACA,IAAAF,EAAA,YAAA,qBAAA,KAAA,0BAAA,GACA,KAAA,UAAA,WAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAAG,GAAA;AACA,WAAA,OAAA,OAAAA,IAAA,MAAA,CAAA,KAAA,OAAAA;AACA,YAAAC,IAAA,iBAAA,SAAA,IAAA,GACAC,IAAA,SAAAD,EAAA,iBAAA,mBAAA,CAAA,KAAA;AAEA,iBAAA,MAAA;AACA,QAAAJ,EAAA,KAAA,sBAAA;AAAA,UACA,MAAA,KAAA;AAAA,QACA,CAAA;AAAA,MAEA,GAAA,MAAAK,CAAA;AAAA,IACA;AAAA,IAEA,2BAAA,EAAA,MAAAC,EAAA,GAAA;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.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/Components/NcAppNavigation.mjs

@@ -1,108 +1,4 @@
-import "../assets/index-5784183b.css";
-import { N as n } from "../chunks/NcAppNavigationToggle-0bc638a8.mjs";
-import { useIsMobile as s } from "../Composables/useIsMobile.mjs";
-import { g as p } from "../chunks/focusTrap-5d0f71d4.mjs";
-import { subscribe as l, emit as o, unsubscribe as r } from "@nextcloud/event-bus";
-import { createFocusTrap as g } from "focus-trap";
-import { n as c } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-const u = {
-  name: "NcAppNavigation",
-  components: {
-    NcAppNavigationToggle: n
-  },
-  props: {
-    /**
-     * The aria label to describe the navigation
-     */
-    ariaLabel: {
-      type: String,
-      default: ""
-    },
-    /**
-     * aria-labelledby attribute to describe the navigation
-     */
-    ariaLabelledby: {
-      type: String,
-      default: ""
-    }
-  },
-  setup() {
-    return {
-      isMobile: s()
-    };
-  },
-  data() {
-    return {
-      open: !this.isMobile,
-      focusTrap: null
-    };
-  },
-  watch: {
-    isMobile() {
-      this.open = !this.isMobile, this.toggleFocusTrap();
-    },
-    open() {
-      this.toggleFocusTrap();
-    }
-  },
-  mounted() {
-    l("toggle-navigation", this.toggleNavigationByEventBus), o("navigation-toggled", {
-      open: this.open
-    }), this.focusTrap = g(this.$refs.appNavigationContainer, {
-      allowOutsideClick: !0,
-      fallbackFocus: this.$refs.appNavigationContainer,
-      trapStack: p(),
-      escapeDeactivates: !1
-    }), this.toggleFocusTrap();
-  },
-  unmounted() {
-    r("toggle-navigation", this.toggleNavigationByEventBus), this.focusTrap.deactivate();
-  },
-  methods: {
-    /**
-     * Toggle the navigation
-     *
-     * @param {boolean} [state] set the state instead of inverting the current one
-     */
-    toggleNavigation(a) {
-      this.open = typeof a > "u" ? !this.open : a;
-      const t = getComputedStyle(document.body), e = parseInt(t.getPropertyValue("--animation-quick")) || 100;
-      setTimeout(() => {
-        o("navigation-toggled", {
-          open: this.open
-        });
-      }, 1.5 * e);
-    },
-    toggleNavigationByEventBus({ open: a }) {
-      this.toggleNavigation(a);
-    },
-    /**
-     * Activate focus trap if it is currently needed, otherwise deactivate
-     */
-    toggleFocusTrap() {
-      this.isMobile && this.open ? this.focusTrap.activate() : this.focusTrap.deactivate();
-    },
-    handleEsc() {
-      this.isMobile && this.toggleNavigation(!1);
-    }
-  }
-};
-var d = function() {
-  var t = this, e = t._self._c;
-  return e("div", { ref: "appNavigationContainer", staticClass: "app-navigation", class: { "app-navigation--close": !t.open } }, [e("nav", { staticClass: "app-navigation__content", attrs: { id: "app-navigation-vue", "aria-hidden": t.open ? "false" : "true", "aria-label": t.ariaLabel || void 0, "aria-labelledby": t.ariaLabelledby || void 0, inert: !t.open || void 0 }, on: { keydown: function(i) {
-    return !i.type.indexOf("key") && t._k(i.keyCode, "esc", 27, i.key, ["Esc", "Escape"]) ? null : t.handleEsc.apply(null, arguments);
-  } } }, [t._t("default"), e("ul", { staticClass: "app-navigation__list" }, [t._t("list")], 2), t._t("footer")], 2), e("NcAppNavigationToggle", { attrs: { open: t.open }, on: { "update:open": t.toggleNavigation } })], 1);
-}, v = [], f = /* @__PURE__ */ c(
-  u,
-  d,
-  v,
-  !1,
-  null,
-  "8c6d0d34",
-  null,
-  null
-);
-const k = f.exports;
+import { N as f } from "../chunks/NcAppNavigation-qUXaV47L.mjs";
 export {
-  k as default
+  f as default
 };

package/dist/Components/NcAppNavigation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigation.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<slot />\n\t\t\t<!-- List for Navigation li-items -->\n\t\t\t<ul class=\"app-navigation__list\">\n\t\t\t\t<slot name=\"list\" />\n\t\t\t</ul>\n\n\t\t\t<!-- Footer for e.g. AppNavigationSettings -->\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 NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.js'\n\nimport { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'\n\nimport { createFocusTrap } from 'focus-trap'\n\nexport default {\n\tname: 'NcAppNavigation',\n\n\tcomponents: {\n\t\tNcAppNavigationToggle,\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\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\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\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&__content > ul,\n\t&__list {\n\t\tposition: relative;\n\t\theight: 100%;\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\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","NcAppNavigationToggle","useIsMobile","subscribe","emit","createFocusTrap","getTrapStack","unsubscribe","state","bodyStyles","animationLength","open"],"mappings":";;;;;;;AAwFA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,uBAAAC;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,IAAAC,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,IAAAC,EAAA,qBAAA,KAAA,0BAAA,GACA,KAAA,UAAA,WAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAAC,GAAA;AACA,WAAA,OAAA,OAAAA,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,EAAA,GAAA;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.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/Components/NcAppNavigationCaption.cjs

@@ -1,44 +1,3 @@
-var p = require("../assets/index-fe84a063.css");
-const s = require("./NcActions.cjs"), i = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
-const e = {
-  name: "NcAppNavigationCaption",
-  components: {
-    NcActions: s
-  },
-  inheritAttrs: !1,
-  props: {
-    name: {
-      type: String,
-      required: !0
-    },
-    /**
-     * Any [NcActions](#/Components/NcActions?id=ncactions-1) prop
-     */
-    // Not an actual prop but needed to show in vue-styleguidist docs
-    // eslint-disable-next-line
-    " ": {}
-  },
-  computed: {
-    // Check if the actions slot is populated
-    hasActions() {
-      return !!this.$slots.actions;
-    }
-  }
-};
-var o = function() {
-  var n = this, t = n._self._c;
-  return t("li", { staticClass: "app-navigation-caption" }, [t("h2", { staticClass: "app-navigation-caption__name" }, [n._v(" " + n._s(n.name) + " ")]), n.hasActions ? t("div", { staticClass: "app-navigation-caption__actions" }, [t("NcActions", n._g(n._b({ scopedSlots: n._u([{ key: "icon", fn: function() {
-    return [n._t("actionsTriggerIcon")];
-  }, proxy: !0 }], null, !0) }, "NcActions", n.$attrs, !1), n.$listeners), [n._t("actions")], 2)], 1) : n._e()]);
-}, a = [], c = /* @__PURE__ */ i.normalizeComponent(
-  e,
-  o,
-  a,
-  !1,
-  null,
-  "3b1f7071",
-  null,
-  null
-);
-const r = c.exports;
-module.exports = r;
+"use strict";
+const i = require("../chunks/NcAppNavigationCaption-hVmjPz-2.cjs");
+module.exports = i.NcAppNavigationCaption;

package/dist/Components/NcAppNavigationCaption.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigationCaption.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<li class=\"app-navigation-caption\">\n\t\t<!-- Name of the caption -->\n\t\t<h2 class=\"app-navigation-caption__name\">\n\t\t\t{{ name }}\n\t\t</h2>\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</li>\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 * 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\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&__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}\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","Components_NcActions"],"mappings":";;AA4HA,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;AAAA,IAOA,KAAA,CAAA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA,IAEA,aAAA;AACA,aAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppNavigationCaption.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/Components/NcAppNavigationCaption.mjs

@@ -1,47 +1,4 @@
-import "../assets/index-fe84a063.css";
-import a from "./NcActions.mjs";
-import { n as i } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-const s = {
-  name: "NcAppNavigationCaption",
-  components: {
-    NcActions: a
-  },
-  inheritAttrs: !1,
-  props: {
-    name: {
-      type: String,
-      required: !0
-    },
-    /**
-     * Any [NcActions](#/Components/NcActions?id=ncactions-1) prop
-     */
-    // Not an actual prop but needed to show in vue-styleguidist docs
-    // eslint-disable-next-line
-    " ": {}
-  },
-  computed: {
-    // Check if the actions slot is populated
-    hasActions() {
-      return !!this.$slots.actions;
-    }
-  }
-};
-var o = function() {
-  var t = this, n = t._self._c;
-  return n("li", { staticClass: "app-navigation-caption" }, [n("h2", { staticClass: "app-navigation-caption__name" }, [t._v(" " + t._s(t.name) + " ")]), t.hasActions ? n("div", { staticClass: "app-navigation-caption__actions" }, [n("NcActions", t._g(t._b({ scopedSlots: t._u([{ key: "icon", fn: function() {
-    return [t._t("actionsTriggerIcon")];
-  }, proxy: !0 }], null, !0) }, "NcActions", t.$attrs, !1), t.$listeners), [t._t("actions")], 2)], 1) : t._e()]);
-}, e = [], c = /* @__PURE__ */ i(
-  s,
-  o,
-  e,
-  !1,
-  null,
-  "3b1f7071",
-  null,
-  null
-);
-const u = c.exports;
+import { N as f } from "../chunks/NcAppNavigationCaption-M-KZKijE.mjs";
 export {
-  u as default
+  f as default
 };

package/dist/Components/NcAppNavigationCaption.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigationCaption.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<li class=\"app-navigation-caption\">\n\t\t<!-- Name of the caption -->\n\t\t<h2 class=\"app-navigation-caption__name\">\n\t\t\t{{ name }}\n\t\t</h2>\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</li>\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 * 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\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&__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}\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":";;;AA4HA,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;AAAA,IAOA,KAAA,CAAA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA,IAEA,aAAA;AACA,aAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppNavigationCaption.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/Components/NcAppNavigationIconBullet.cjs

@@ -1,6 +1,5 @@
-var a = require("../assets/index-fc61f2d8.css");
-const r = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
-const n = {
+var a = require("../assets/NcAppNavigationIconBullet-Nf3ARMLv.css");
+const e = require("../chunks/_plugin-vue2_normalizer-DCfUPqga.cjs"), n = {
   name: "NcAppNavigationIconBullet",
   props: {
     color: {
@@ -24,9 +23,9 @@ const n = {
   }
 };
 var i = function() {
-  var o = this, e = o._self._c;
-  return e("div", { staticClass: "app-navigation-entry__icon-bullet", on: { click: o.onClick } }, [e("div", { style: { backgroundColor: o.formattedColor } })]);
-}, c = [], l = /* @__PURE__ */ r.normalizeComponent(
+  var r = this, o = r._self._c;
+  return o("div", { staticClass: "app-navigation-entry__icon-bullet", on: { click: r.onClick } }, [o("div", { style: { backgroundColor: r.formattedColor } })]);
+}, c = [], l = /* @__PURE__ */ e.normalizeComponent(
   n,
   i,
   c,

package/dist/Components/NcAppNavigationIconBullet.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigationIconBullet.cjs","sources":["../../src/components/NcAppNavigationIconBullet/NcAppNavigationIconBullet.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 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<docs>\n### Bullet\nThis component is made to be used inside of the [NcAppNavigationItem](#NcAppNavigationItem) component slot: `icon`.\n\n```\n<template #icon>\n\t<NcAppNavigationIconBullet color=\"0082c9\" />\n</template>\n<template #icon>\n\t<NcAppNavigationIconBullet color=\"#0082c9\" />\n</template>\n\n```\n\n### AppNavigationItem example\n```\n<NcAppNavigationItem  name=\"Entry 2\" :pinned=\"true\">\n\t<template #icon>\n\t\t<NcAppNavigationIconBullet color=\"0082c9\" />\n\t</template>\n</NcAppNavigationItem>\n```\n</docs>\n\n<template>\n\t<div class=\"app-navigation-entry__icon-bullet\" @click=\"onClick\">\n\t\t<div :style=\"{ backgroundColor: formattedColor }\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppNavigationIconBullet',\n\n\tprops: {\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t\tvalidator(color) {\n\t\t\t\t// #000, 000, #0082c9 and 0082c9\n\t\t\t\treturn /^#?([0-9A-F]{3}){1,2}$/i.test(color)\n\t\t\t},\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tcomputed: {\n\t\tformattedColor() {\n\t\t\tif (this.color.startsWith('#')) {\n\t\t\t\treturn this.color\n\t\t\t}\n\t\t\treturn '#' + this.color\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonClick(e) {\n\t\t\tthis.$emit('click', e)\n\t\t},\n\t},\n\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.app-navigation-entry__icon-bullet {\n\tdisplay: block;\n\t// there is 2 margins\n\tpadding: $icon-margin + 1px;\n\tdiv {\n\t\twidth: $icon-size - 2px;\n\t\theight: $icon-size - 2px;\n\t\tcursor: pointer;\n\t\ttransition: background 100ms ease-in-out;\n\t\tborder: none;\n\t\tborder-radius: 50%;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","color","e"],"mappings":";;AAqDA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAAC,GAAA;AAEA,eAAA,0BAAA,KAAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,OAAA;AAAA,EAEA,UAAA;AAAA,IACA,iBAAA;AACA,aAAA,KAAA,MAAA,WAAA,GAAA,IACA,KAAA,QAEA,MAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,QAAAC,GAAA;AACA,WAAA,MAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAEA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppNavigationIconBullet.cjs","sources":["../../src/components/NcAppNavigationIconBullet/NcAppNavigationIconBullet.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 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<docs>\n### Bullet\nThis component is made to be used inside of the [NcAppNavigationItem](#NcAppNavigationItem) component slot: `icon`.\n\n```\n<template #icon>\n\t<NcAppNavigationIconBullet color=\"0082c9\" />\n</template>\n<template #icon>\n\t<NcAppNavigationIconBullet color=\"#0082c9\" />\n</template>\n\n```\n\n### AppNavigationItem example\n```\n<NcAppNavigationItem  name=\"Entry 2\" :pinned=\"true\">\n\t<template #icon>\n\t\t<NcAppNavigationIconBullet color=\"0082c9\" />\n\t</template>\n</NcAppNavigationItem>\n```\n</docs>\n\n<template>\n\t<div class=\"app-navigation-entry__icon-bullet\" @click=\"onClick\">\n\t\t<div :style=\"{ backgroundColor: formattedColor }\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppNavigationIconBullet',\n\n\tprops: {\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t\tvalidator(color) {\n\t\t\t\t// #000, 000, #0082c9 and 0082c9\n\t\t\t\treturn /^#?([0-9A-F]{3}){1,2}$/i.test(color)\n\t\t\t},\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tcomputed: {\n\t\tformattedColor() {\n\t\t\tif (this.color.startsWith('#')) {\n\t\t\t\treturn this.color\n\t\t\t}\n\t\t\treturn '#' + this.color\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonClick(e) {\n\t\t\tthis.$emit('click', e)\n\t\t},\n\t},\n\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.app-navigation-entry__icon-bullet {\n\tdisplay: block;\n\t// there is 2 margins\n\tpadding: $icon-margin + 1px;\n\tdiv {\n\t\twidth: $icon-size - 2px;\n\t\theight: $icon-size - 2px;\n\t\tcursor: pointer;\n\t\ttransition: background 100ms ease-in-out;\n\t\tborder: none;\n\t\tborder-radius: 50%;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","color","e"],"mappings":";qEAqDAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAAC,GAAA;AAEA,eAAA,0BAAA,KAAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,OAAA;AAAA,EAEA,UAAA;AAAA,IACA,iBAAA;AACA,aAAA,KAAA,MAAA,WAAA,GAAA,IACA,KAAA,QAEA,MAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,QAAAC,GAAA;AACA,WAAA,MAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAEA;;;;;;;;;;;;;;;;"}

package/dist/Components/NcAppNavigationIconBullet.mjs

@@ -1,6 +1,6 @@
-import "../assets/index-fc61f2d8.css";
-import { n } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-const r = {
+import "../assets/NcAppNavigationIconBullet-Nf3ARMLv.css";
+import { n } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.mjs";
+const e = {
   name: "NcAppNavigationIconBullet",
   props: {
     color: {
@@ -24,10 +24,10 @@ const r = {
   }
 };
 var i = function() {
-  var o = this, e = o._self._c;
-  return e("div", { staticClass: "app-navigation-entry__icon-bullet", on: { click: o.onClick } }, [e("div", { style: { backgroundColor: o.formattedColor } })]);
+  var o = this, r = o._self._c;
+  return r("div", { staticClass: "app-navigation-entry__icon-bullet", on: { click: o.onClick } }, [r("div", { style: { backgroundColor: o.formattedColor } })]);
 }, l = [], c = /* @__PURE__ */ n(
-  r,
+  e,
   i,
   l,
   !1,
@@ -36,7 +36,7 @@ var i = function() {
   null,
   null
 );
-const _ = c.exports;
+const p = c.exports;
 export {
-  _ as default
+  p as default
 };