@nextcloud/vue 8.25.0 → 8.26.0

package/dist/chunks/{NcAppSidebar-Bmlid_Pa.cjs → NcAppSidebar-C8jffFJX.cjs}

@@ -1,15 +1,15 @@
-require('../assets/NcAppSidebar-Dun97zcC.css');
+require('../assets/NcAppSidebar-DVDDtSbA.css');
 "use strict";
 const vueSimplePortal = require("@linusborg/vue-simple-portal");
 const Components_NcVNodes = require("../Components/NcVNodes.cjs");
 const NcCheckboxRadioSwitch = require("./NcCheckboxRadioSwitch-DbK49DI7.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
-const NcActions = require("./NcActions-DFHXBqKC.cjs");
+const NcActions = require("./NcActions-B7DbEbCo.cjs");
+const NcAppSidebarHeader = require("./NcAppSidebarHeader-BUXD8c9i.cjs");
 const Components_NcButton = require("../Components/NcButton.cjs");
 const Components_NcEmptyContent = require("../Components/NcEmptyContent.cjs");
 const Components_NcLoadingIcon = require("../Components/NcLoadingIcon.cjs");
 const Directives_Focus = require("../Directives/Focus.cjs");
-const Directives_Linkify = require("../Directives/Linkify.cjs");
 const Composables_useIsMobile = require("../Composables/useIsMobile.cjs");
 const GenRandomId = require("./GenRandomId-BQDud3d4.cjs");
 const focusTrap$1 = require("./focusTrap-Vbgxe8ZX.cjs");
@@ -18,6 +18,9 @@ const ArrowRight = require("./ArrowRight-DPARnmu3.cjs");
 const Close = require("./Close-CqmXxEKi.cjs");
 const components = require("@vueuse/components");
 const focusTrap = require("focus-trap");
+const Vue = require("vue");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const Vue__default = /* @__PURE__ */ _interopDefault(Vue);
 const _sfc_main$4 = {
   name: "NcAppSidebarTabs",
   components: {
@@ -351,6 +354,7 @@ const _sfc_main = {
   components: {
     Teleport: vueSimplePortal.Portal,
     NcActions: NcActions.NcActions,
+    NcAppSidebarHeader: NcAppSidebarHeader.NcAppSidebarHeader,
     NcAppSidebarTabs,
     ArrowRight: ArrowRight.ArrowRight,
     IconDockRight,
@@ -363,7 +367,6 @@ const _sfc_main = {
   },
   directives: {
     focus: Directives_Focus.directive,
-    linkify: Directives_Linkify.directive,
     ClickOutside: components.vOnClickOutside
   },
   inject: {
@@ -530,9 +533,12 @@ const _sfc_main = {
     "dismiss-editing"
   ],
   setup() {
+    const headerRef = Vue.ref(null);
+    Vue.provide("NcAppSidebar:header:ref", headerRef);
     return {
       uid: GenRandomId.GenRandomId(),
-      isMobile: Composables_useIsMobile.useIsSmallMobile()
+      isMobile: Composables_useIsMobile.useIsSmallMobile(),
+      headerRef
     };
   },
   data() {
@@ -684,7 +690,15 @@ const _sfc_main = {
      * @public
      */
     focus() {
-      this.$refs.header.focus();
+      if (!this.open && !this.noToggle) {
+        this.$refs.toggle.$el.focus();
+        return;
+      }
+      try {
+        this.headerRef.focus();
+      } catch {
+        Vue__default.default.util.warn("NcAppSidebar should have focusable header for accessibility reasons. Use NcAppSidebarHeader component.");
+      }
     },
     /**
      * Focus the active tab
@@ -736,7 +750,7 @@ var _sfc_render = function render5() {
   return _c("transition", { attrs: { "appear": "", "name": "slide-right" }, on: { "before-enter": _vm.onBeforeEnter, "after-enter": _vm.onAfterEnter, "before-leave": _vm.onBeforeLeave, "after-leave": _vm.onAfterLeave } }, [_c("aside", { directives: [{ name: "show", rawName: "v-show", value: _vm.open, expression: "open" }], ref: "sidebar", staticClass: "app-sidebar", attrs: { "id": "app-sidebar-vue", "aria-labelledby": `app-sidebar-vue-${_vm.uid}__header` }, on: { "keydown": function($event) {
     if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) return null;
     return _vm.onKeydownEsc.apply(null, arguments);
-  } } }, [_vm.ncContentSelector && !_vm.open && !_vm.noToggle ? _c("Teleport", { attrs: { "selector": _vm.ncContentSelector } }, [_c("NcButton", _vm._b({ staticClass: "app-sidebar__toggle", class: _vm.toggleClasses, attrs: { "aria-label": _vm.t("Open sidebar"), "variant": "tertiary" }, on: { "click": function($event) {
+  } } }, [_vm.ncContentSelector && !_vm.open && !_vm.noToggle ? _c("Teleport", { attrs: { "selector": _vm.ncContentSelector } }, [_c("NcButton", _vm._b({ ref: "toggle", staticClass: "app-sidebar__toggle", class: _vm.toggleClasses, attrs: { "aria-label": _vm.t("Open sidebar"), "variant": "tertiary" }, on: { "click": function($event) {
     return _vm.$emit("update:open", true);
   } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
     return [_vm._t("toggle-icon", function() {
@@ -745,45 +759,47 @@ var _sfc_render = function render5() {
   }, proxy: true }], null, true) }, "NcButton", _vm.toggleAttrs, false))], 1) : _vm._e(), _c("header", { staticClass: "app-sidebar-header", class: {
     "app-sidebar-header--with-figure": _vm.hasFigure,
     "app-sidebar-header--compact": _vm.compact
-  } }, [_c("div", { staticClass: "app-sidebar-header__info" }, [_vm.hasFigure && !_vm.empty ? _c("div", { staticClass: "app-sidebar-header__figure", class: {
-    "app-sidebar-header__figure--with-action": _vm.hasFigureClickListener
-  }, style: {
-    backgroundImage: `url(${_vm.background})`
-  }, attrs: { "tabindex": "0" }, on: { "click": _vm.onFigureClick, "keydown": function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
-    return _vm.onFigureClick.apply(null, arguments);
-  } } }, [_vm._t("header")], 2) : _vm._e(), !_vm.empty ? _c("div", { staticClass: "app-sidebar-header__desc", class: {
-    "app-sidebar-header__desc--with-tertiary-action": _vm.canStar || _vm.$slots["tertiary-actions"],
-    "app-sidebar-header__desc--editable": _vm.nameEditable && !_vm.subname,
-    "app-sidebar-header__desc--with-subname--editable": _vm.nameEditable && _vm.subname,
-    "app-sidebar-header__desc--without-actions": !_vm.$slots["secondary-actions"]
-  } }, [_vm.canStar || _vm.$slots["tertiary-actions"] ? _c("div", { staticClass: "app-sidebar-header__tertiary-actions" }, [_vm._t("tertiary-actions", function() {
-    return [_vm.canStar ? _c("NcButton", { staticClass: "app-sidebar-header__star", attrs: { "aria-label": _vm.favoriteTranslated, "pressed": _vm.isStarred, "variant": "secondary" }, on: { "click": function($event) {
+  } }, [!_vm.empty ? _vm._t("info", function() {
+    return [_c("div", { staticClass: "app-sidebar-header__info" }, [_vm.hasFigure ? _c("div", { staticClass: "app-sidebar-header__figure", class: {
+      "app-sidebar-header__figure--with-action": _vm.hasFigureClickListener
+    }, style: {
+      backgroundImage: `url(${_vm.background})`
+    }, attrs: { "tabindex": "0" }, on: { "click": _vm.onFigureClick, "keydown": function($event) {
+      if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
+      return _vm.onFigureClick.apply(null, arguments);
+    } } }, [_vm._t("header")], 2) : _vm._e(), _c("div", { staticClass: "app-sidebar-header__desc", class: {
+      "app-sidebar-header__desc--with-tertiary-action": _vm.canStar || _vm.$slots["tertiary-actions"],
+      "app-sidebar-header__desc--editable": _vm.nameEditable && !_vm.subname,
+      "app-sidebar-header__desc--with-subname--editable": _vm.nameEditable && _vm.subname,
+      "app-sidebar-header__desc--without-actions": !_vm.$slots["secondary-actions"]
+    } }, [_vm.canStar || _vm.$slots["tertiary-actions"] ? _c("div", { staticClass: "app-sidebar-header__tertiary-actions" }, [_vm._t("tertiary-actions", function() {
+      return [_vm.canStar ? _c("NcButton", { staticClass: "app-sidebar-header__star", attrs: { "aria-label": _vm.favoriteTranslated, "pressed": _vm.isStarred, "variant": "secondary" }, on: { "click": function($event) {
+        $event.preventDefault();
+        return _vm.toggleStarred.apply(null, arguments);
+      } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+        return [_vm.starLoading ? _c("NcLoadingIcon") : _vm.isStarred ? _c("Star", { attrs: { "size": 20 } }) : _c("StarOutline", { attrs: { "size": 20 } })];
+      }, proxy: true }], null, false, 2575459756) }) : _vm._e()];
+    })], 2) : _vm._e(), _c("div", { staticClass: "app-sidebar-header__name-container" }, [_c("div", { staticClass: "app-sidebar-header__mainname-container" }, [_c("NcAppSidebarHeader", { directives: [{ name: "show", rawName: "v-show", value: !_vm.nameEditable, expression: "!nameEditable" }], staticClass: "app-sidebar-header__mainname", attrs: { "name": _vm.name, "linkify": _vm.linkifyName, "title": _vm.title, "tabindex": _vm.nameEditable ? 0 : -1 }, nativeOn: { "click": function($event) {
+      if ($event.target !== $event.currentTarget) return null;
+      return _vm.editName.apply(null, arguments);
+    } } }), _vm.nameEditable ? [_c("form", { directives: [{ name: "click-outside", rawName: "v-click-outside", value: () => _vm.onSubmitName(), expression: "() => onSubmitName()" }], staticClass: "app-sidebar-header__mainname-form", on: { "submit": function($event) {
       $event.preventDefault();
-      return _vm.toggleStarred.apply(null, arguments);
-    } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-      return [_vm.starLoading ? _c("NcLoadingIcon") : _vm.isStarred ? _c("Star", { attrs: { "size": 20 } }) : _c("StarOutline", { attrs: { "size": 20 } })];
-    }, proxy: true }], null, false, 2575459756) }) : _vm._e()];
-  })], 2) : _vm._e(), _c("div", { staticClass: "app-sidebar-header__name-container" }, [_c("div", { staticClass: "app-sidebar-header__mainname-container" }, [_c("h2", { directives: [{ name: "show", rawName: "v-show", value: !_vm.nameEditable, expression: "!nameEditable" }, { name: "linkify", rawName: "v-linkify", value: { text: _vm.name, linkify: _vm.linkifyName }, expression: "{text: name, linkify: linkifyName}" }], ref: "header", staticClass: "app-sidebar-header__mainname", attrs: { "id": `app-sidebar-vue-${_vm.uid}__header`, "aria-label": _vm.title, "title": _vm.title, "tabindex": _vm.nameEditable ? 0 : -1 }, on: { "click": function($event) {
-    if ($event.target !== $event.currentTarget) return null;
-    return _vm.editName.apply(null, arguments);
-  } } }, [_vm._v(" " + _vm._s(_vm.name) + " ")]), _vm.nameEditable ? [_c("form", { directives: [{ name: "click-outside", rawName: "v-click-outside", value: () => _vm.onSubmitName(), expression: "() => onSubmitName()" }], staticClass: "app-sidebar-header__mainname-form", on: { "submit": function($event) {
-    $event.preventDefault();
-    return _vm.onSubmitName.apply(null, arguments);
-  } } }, [_c("input", { directives: [{ name: "focus", rawName: "v-focus" }], ref: "nameInput", staticClass: "app-sidebar-header__mainname-input", attrs: { "type": "text", "placeholder": _vm.namePlaceholder }, domProps: { "value": _vm.name }, on: { "keydown": function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) return null;
-    $event.stopPropagation();
-    return _vm.onDismissEditing.apply(null, arguments);
-  }, "input": _vm.onNameInput } }), _c("NcButton", { attrs: { "aria-label": _vm.changeNameTranslated, "type": "submit", "variant": "tertiary-no-background" }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_c("ArrowRight", { attrs: { "size": 20 } })];
-  }, proxy: true }], null, false, 1252225425) })], 1)] : _vm._e(), _vm.$slots["secondary-actions"] ? _c("NcActions", { staticClass: "app-sidebar-header__menu", attrs: { "force-menu": _vm.forceMenu } }, [_vm._t("secondary-actions")], 2) : _vm._e()], 2), _vm.subname.trim() !== "" || _vm.$slots["subname"] ? _c("p", { staticClass: "app-sidebar-header__subname", attrs: { "title": _vm.subtitle || void 0 } }, [_vm._t("subname", function() {
-    return [_vm._v(" " + _vm._s(_vm.subname) + " ")];
-  })], 2) : _vm._e()])]) : _vm._e()]), _c("NcButton", { ref: "closeButton", staticClass: "app-sidebar__close", attrs: { "aria-label": _vm.closeTranslated, "title": _vm.closeTranslated, "variant": "tertiary" }, on: { "click": function($event) {
+      return _vm.onSubmitName.apply(null, arguments);
+    } } }, [_c("input", { directives: [{ name: "focus", rawName: "v-focus" }], ref: "nameInput", staticClass: "app-sidebar-header__mainname-input", attrs: { "type": "text", "placeholder": _vm.namePlaceholder }, domProps: { "value": _vm.name }, on: { "keydown": function($event) {
+      if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) return null;
+      $event.stopPropagation();
+      return _vm.onDismissEditing.apply(null, arguments);
+    }, "input": _vm.onNameInput } }), _c("NcButton", { attrs: { "aria-label": _vm.changeNameTranslated, "type": "submit", "variant": "tertiary-no-background" }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+      return [_c("ArrowRight", { attrs: { "size": 20 } })];
+    }, proxy: true }], null, false, 1252225425) })], 1)] : _vm._e(), _vm.$slots["secondary-actions"] ? _c("NcActions", { staticClass: "app-sidebar-header__menu", attrs: { "force-menu": _vm.forceMenu } }, [_vm._t("secondary-actions")], 2) : _vm._e()], 2), _vm.subname.trim() !== "" || _vm.$slots["subname"] ? _c("p", { staticClass: "app-sidebar-header__subname", attrs: { "title": _vm.subtitle || void 0 } }, [_vm._t("subname", function() {
+      return [_vm._v(" " + _vm._s(_vm.subname) + " ")];
+    })], 2) : _vm._e()])])])];
+  }) : _c("NcAppSidebarHeader", { staticClass: "app-sidebar-header__mainname--hidden", attrs: { "name": _vm.name, "tabindex": "-1" } }), _c("NcButton", { ref: "closeButton", staticClass: "app-sidebar__close", attrs: { "aria-label": _vm.closeTranslated, "title": _vm.closeTranslated, "variant": "tertiary" }, on: { "click": function($event) {
     $event.preventDefault();
     return _vm.closeSidebar.apply(null, arguments);
   } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
     return [_c("Close", { attrs: { "size": 20 } })];
-  }, proxy: true }]) }), _vm.$slots["description"] && !_vm.empty ? _c("div", { staticClass: "app-sidebar-header__description" }, [_vm._t("description")], 2) : _vm._e()], 1), _c("NcAppSidebarTabs", { directives: [{ name: "show", rawName: "v-show", value: !_vm.loading, expression: "!loading" }], ref: "tabs", attrs: { "active": _vm.active, "force-tabs": _vm.forceTabs }, on: { "update:active": _vm.onUpdateActive } }, [_vm._t("default")], 2), _vm.loading ? _c("NcEmptyContent", { scopedSlots: _vm._u([{ key: "icon", fn: function() {
+  }, proxy: true }]) }), _vm.$slots["description"] && !_vm.empty ? _c("div", { staticClass: "app-sidebar-header__description" }, [_vm._t("description")], 2) : _vm._e()], 2), _c("NcAppSidebarTabs", { directives: [{ name: "show", rawName: "v-show", value: !_vm.loading, expression: "!loading" }], ref: "tabs", attrs: { "active": _vm.active, "force-tabs": _vm.forceTabs }, on: { "update:active": _vm.onUpdateActive } }, [_vm._t("default")], 2), _vm.loading ? _c("NcEmptyContent", { scopedSlots: _vm._u([{ key: "icon", fn: function() {
     return [_c("NcLoadingIcon", { attrs: { "size": 64 } })];
   }, proxy: true }], null, false, 826850984) }) : _vm._e()], 1)]);
 };
@@ -794,8 +810,8 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "478c9d0b"
+  "d114a7f1"
 );
 const NcAppSidebar = __component__.exports;
 exports.NcAppSidebar = NcAppSidebar;
-//# sourceMappingURL=NcAppSidebar-Bmlid_Pa.cjs.map
+//# sourceMappingURL=NcAppSidebar-C8jffFJX.cjs.map

package/dist/chunks/NcAppSidebar-C8jffFJX.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSidebar-C8jffFJX.cjs","sources":["../../src/components/NcAppSidebar/NcAppSidebarTabs.vue","../../node_modules/vue-material-design-icons/DockRight.vue","../../node_modules/vue-material-design-icons/Star.vue","../../node_modules/vue-material-design-icons/StarOutline.vue","../../src/components/NcAppSidebar/NcAppSidebar.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<!-- Follows the tab aria guidelines\n\thttps://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html -->\n<template>\n\t<div class=\"app-sidebar-tabs\">\n\t\t<!-- tabs navigation -->\n\t\t<!-- 33 and 34 code is for page up and page down -->\n\t\t<div v-if=\"hasMultipleTabs || showForSingleTab\"\n\t\t\trole=\"tablist\"\n\t\t\tclass=\"app-sidebar-tabs__nav\"\n\t\t\t@keydown.left.exact.prevent.stop=\"focusPreviousTab\"\n\t\t\t@keydown.right.exact.prevent.stop=\"focusNextTab\"\n\t\t\t@keydown.tab.exact.prevent.stop=\"focusActiveTabContent\"\n\t\t\t@keydown.home.exact.prevent.stop=\"focusFirstTab\"\n\t\t\t@keydown.end.exact.prevent.stop=\"focusLastTab\"\n\t\t\t@keydown.page-up.exact.prevent.stop=\"focusFirstTab\"\n\t\t\t@keydown.page-down.exact.prevent.stop=\"focusLastTab\">\n\t\t\t<NcCheckboxRadioSwitch v-for=\"tab in tabs\"\n\t\t\t\t:key=\"tab.id\"\n\t\t\t\t:aria-controls=\"`tab-${tab.id}`\"\n\t\t\t\t:aria-selected=\"String(activeTab === tab.id)\"\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\t:checked=\"activeTab === tab.id\"\n\t\t\t\t:wrapper-id=\"`tab-button-${tab.id}`\"\n\t\t\t\t:tabindex=\"activeTab === tab.id ? 0 : -1\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\"\n\t\t\t\tclass=\"app-sidebar-tabs__tab\"\n\t\t\t\t:class=\"{ active: tab.id === activeTab }\"\n\t\t\t\trole=\"tab\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t@update:checked=\"setActive(tab.id)\">\n\t\t\t\t<span class=\"app-sidebar-tabs__tab-caption\">\n\t\t\t\t\t{{ tab.name }}\n\t\t\t\t</span>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcVNodes :vnodes=\"tab.renderIcon()\">\n\t\t\t\t\t\t<span class=\"app-sidebar-tabs__tab-icon\" :class=\"tab.icon\" />\n\t\t\t\t\t</NcVNodes>\n\t\t\t\t</template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\n\t\t<!-- tabs content -->\n\t\t<div :class=\"{'app-sidebar-tabs__content--multiple': hasMultipleTabs}\"\n\t\t\tclass=\"app-sidebar-tabs__content\">\n\t\t\t<!-- @slot Tabs content - NcAppSidebarTab components or any content if there is no tabs -->\n\t\t\t<slot />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport NcVNodes from '../NcVNodes/index.js'\nimport NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/index.js'\n\nexport default {\n\tname: 'NcAppSidebarTabs',\n\n\tcomponents: {\n\t\tNcCheckboxRadioSwitch,\n\t\tNcVNodes,\n\t},\n\n\tprovide() {\n\t\treturn {\n\t\t\tregisterTab: this.registerTab,\n\t\t\tunregisterTab: this.unregisterTab,\n\t\t\t// Getter as an alternative to Vue 2.7 computed(() => this.activeTab)\n\t\t\tgetActiveTab: () => this.activeTab,\n\t\t\t// Used to check whether the tab header is shown so the tabs can reference the tab header for `aria-labelledby` or not\n\t\t\tisTablistShown: () => this.hasMultipleTabs,\n\t\t}\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Id of the tab to activate\n\t\t */\n\t\tactive: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Force the tab navigation to display even if there is only one tab\n\t\t */\n\t\tforceTabs: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: ['update:active'],\n\n\tdata() {\n\t\treturn {\n\t\t\t/**\n\t\t\t * Tab descriptions from the passed NcSidebarTab components' props to build the tab navbar from.\n\t\t\t */\n\t\t\ttabs: [],\n\t\t\t/**\n\t\t\t * Local active (open) tab's ID. It allows to use component without active.sync\n\t\t\t */\n\t\t\tactiveTab: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Has multiple tabs. If only one tab - its content is shown without navigation\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\thasMultipleTabs() {\n\t\t\treturn this.tabs.length > 1\n\t\t},\n\n\t\tshowForSingleTab() {\n\t\t\treturn this.forceTabs && this.tabs.length === 1\n\t\t},\n\n\t\tcurrentTabIndex() {\n\t\t\treturn this.tabs.findIndex((tab) => tab.id === this.activeTab)\n\t\t},\n\t},\n\n\twatch: {\n\t\tactive(active) {\n\t\t\t// Prevent running it twice\n\t\t\tif (active !== this.activeTab) {\n\t\t\t\tthis.updateActive()\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\n\t\t/**\n\t\t * Set the current active tab\n\t\t *\n\t\t * @param {string} id the id of the tab\n\t\t */\n\t\tsetActive(id) {\n\t\t\tthis.activeTab = id\n\t\t\t/**\n\t\t\t * @property {string} active - active tab's id\n\t\t\t */\n\t\t\tthis.$emit('update:active', this.activeTab)\n\t\t},\n\n\t\t/**\n\t\t * Focus the previous tab\n\t\t * and emit to the parent component\n\t\t */\n\t\tfocusPreviousTab() {\n\t\t\tif (this.currentTabIndex > 0) {\n\t\t\t\tthis.setActive(this.tabs[this.currentTabIndex - 1].id)\n\t\t\t}\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/**\n\t\t * Focus the next tab\n\t\t * and emit to the parent component\n\t\t */\n\t\tfocusNextTab() {\n\t\t\tif (this.currentTabIndex < this.tabs.length - 1) {\n\t\t\t\tthis.setActive(this.tabs[this.currentTabIndex + 1].id)\n\t\t\t}\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/**\n\t\t * Focus the first tab\n\t\t * and emit to the parent component\n\t\t */\n\t\tfocusFirstTab() {\n\t\t\tthis.setActive(this.tabs[0].id)\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/**\n\t\t * Focus the last tab\n\t\t * and emit to the parent component\n\t\t */\n\t\tfocusLastTab() {\n\t\t\tthis.setActive(this.tabs[this.tabs.length - 1].id)\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/**\n\t\t * Focus the current active tab\n\t\t */\n\t\tfocusActiveTab() {\n\t\t\tthis.$el.querySelector(`#tab-button-${this.activeTab}`).focus()\n\t\t},\n\n\t\t/**\n\t\t * Focus the content on tab\n\t\t * see aria accessibility guidelines\n\t\t */\n\t\tfocusActiveTabContent() {\n\t\t\tthis.$el.querySelector('#tab-' + this.activeTab).focus()\n\t\t},\n\n\t\t/**\n\t\t * Update the current active tab\n\t\t */\n\t\tupdateActive() {\n\t\t\tthis.activeTab = this.active\n\t\t\t&& this.tabs.some(tab => tab.id === this.active)\n\t\t\t\t? this.active\n\t\t\t\t: this.tabs.length > 0\n\t\t\t\t\t? this.tabs[0].id\n\t\t\t\t\t: ''\n\t\t},\n\n\t\t/**\n\t\t * Register child tab in the tabs\n\t\t *\n\t\t * @param {object} tab child tab passed to slot\n\t\t */\n\t\tregisterTab(tab) {\n\t\t\tthis.tabs.push(tab)\n\t\t\tthis.tabs.sort((a, b) => {\n\t\t\t\tif (a.order === b.order) {\n\t\t\t\t\treturn OC.Util.naturalSortCompare(a.name, b.name)\n\t\t\t\t}\n\t\t\t\treturn a.order - b.order\n\t\t\t})\n\t\t\tthis.updateActive()\n\t\t},\n\n\t\t/**\n\t\t * Unregister child tab from the tabs\n\t\t *\n\t\t * @param {string} id tab's id\n\t\t */\n\t\tunregisterTab(id) {\n\t\t\tconst tabIndex = this.tabs.findIndex((tab) => tab.id === id)\n\t\t\tif (tabIndex !== -1) {\n\t\t\t\tthis.tabs.splice(tabIndex, 1)\n\t\t\t}\n\t\t\tif (this.activeTab === id) {\n\t\t\t\tthis.updateActive()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.app-sidebar-tabs {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 0;\n\tflex: 1 1 100%;\n\n\t&__nav {\n\t\tdisplay: flex;\n\t\tjustify-content: stretch;\n\t\tmargin: 10px 8px 0 8px;\n\t\tborder-bottom: 1px solid var(--color-border);\n\n\t\t// Override checkbox-radio-switch styles so that it looks like tabs\n\t\t& :deep(.checkbox-radio-switch--button-variant) {\n\t\t\tborder: unset !important;\n\t\t\tborder-radius: 0 !important;\n\t\t\t.checkbox-content {\n\t\t\t\tpadding: var(--default-grid-baseline);\n\t\t\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0 !important;\n\t\t\t\tmargin: 0 !important;\n\t\t\t\tborder-bottom: var(--default-grid-baseline) solid transparent !important;\n\t\t\t\t.checkbox-content__icon > * {\n\t\t\t\t\tcolor: var(--color-main-text) !important;\n\t\t\t\t}\n\t\t\t}\n\t\t\t&.checkbox-radio-switch--checked .checkbox-radio-switch__content{\n\t\t\t\tbackground: transparent !important;\n\t\t\t\tcolor: var(--color-main-text) !important;\n\t\t\t\tborder-bottom: var(--default-grid-baseline) solid var(--color-primary-element) !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__tab {\n\t\tflex: 1 1;\n\t\t&.active {\n\t\t\tcolor: var(--color-primary-element);\n\t\t}\n\n\t\t&-caption {\n\t\t\tflex: 0 1 100%;\n\t\t\twidth: 100%;\n\t\t\toverflow: hidden;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-overflow: ellipsis;\n\t\t\ttext-align: center;\n\t\t}\n\n\t\t&-icon {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tbackground-size: 20px;\n\t\t}\n\n\t\t// Override max-width to use all available space\n\t\t:deep(.checkbox-radio-switch__content) {\n\t\t\tmax-width: unset;\n\t\t}\n\t}\n\n\t&__content {\n\t\tposition: relative;\n\t\tmin-height: 256px;\n\t\theight: 100%;\n\t\t// force the use of the tab component if more than one tab\n\t\t// you can just put raw content if you don't use tabs\n\t\t&--multiple > :not(section) {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n</style>\n","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon dock-right-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V6A2 2 0 0 0 20 4M15 18H4V6H15Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"DockRightIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon star-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"StarIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon star-outline-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"StarOutlineIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component provides a way to include the standardised sidebar.\nThe standard properties like name, subname, starred, etc. allow to automatically\ninclude a standard-header like it's used by the files app.\n\nTo conditionally show the sidebar either use `v-if` on the sidebar component,\nor use the `open` property of the component to controll the state.\nUsing `v-show` directly will result in usability issues due to internal focus trap handling.\n\n### Standard usage\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\t:starred=\"starred\"\n\t\tname=\"cat-picture.jpg\"\n\t\tsubname=\"last edited 3 weeks ago\">\n\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t\tSearch tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<Cog :size=\"20\" />\n\t\t\t</template>\n\t\t\tSettings tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t</template>\n\t\t\tSharing tab content\n\t\t</NcAppSidebarTab>\n\t</NcAppSidebar>\n</template>\n<script>\n\timport Magnify from 'vue-material-design-icons/Magnify.vue'\n\timport Cog from 'vue-material-design-icons/Cog.vue'\n\timport ShareVariant from 'vue-material-design-icons/ShareVariant.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tMagnify,\n\t\t\tCog,\n\t\t\tShareVariant,\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tstarred: false,\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n### One tab\n\nSingle tab is rendered without navigation.\n\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"forceTabs\">Force tab navigation</NcCheckboxRadioSwitch>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\t:force-tabs=\"forceTabs\"\n\t\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSingle tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Cog from 'vue-material-design-icons/Cog.vue'\n\nexport default {\n\tcomponents: {\n\t\tCog,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tforceTabs: false,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Dynamic tabs\n\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"showTabs[0]\">Show search tab</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"showTabs[1]\">Show settings tab</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"showTabs[2]\">Show sharing tab</NcCheckboxRadioSwitch>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[0]\" name=\"Search\" id=\"search-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSearch tab content\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[1]\" name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSettings\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[2]\" name=\"Sharing\" id=\"share-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSharing tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify.vue'\nimport Cog from 'vue-material-design-icons/Cog.vue'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant.vue'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tshowTabs: [true, true, false],\n\t\t}\n\t},\n}\n</script>\n```\n\n### Custom order\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\tname=\"cat-picture.jpg\"\n\t\tsubname=\"last edited 3 weeks ago\">\n\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\" :order=\"3\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t\tSearch tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\" :order=\"2\">\n\t\t\t<template #icon>\n\t\t\t\t<Cog :size=\"20\" />\n\t\t\t</template>\n\t\t\tSettings tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\" :order=\"1\">\n\t\t\t<template #icon>\n\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t</template>\n\t\t\tSharing tab content\n\t\t</NcAppSidebarTab>\n\t</NcAppSidebar>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify.vue'\nimport Cog from 'vue-material-design-icons/Cog.vue'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant.vue'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n}\n</script>\n```\n\n### Activating tab programmatically\n\n```vue\n<template>\n\t<div>\n\t\t<NcSelect v-model=\"active\" :options=\"['search-tab', 'settings-tab', 'share-tab']\" />\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\"\n\t\t\t:active.sync=\"active\">\n\t\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSearch tab content\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSettings\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSharing tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify.vue'\nimport Cog from 'vue-material-design-icons/Cog.vue'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant.vue'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tactive: 'search-tab',\n\t\t}\n\t},\n}\n</script>\n```\n\n### Editable name\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\t:name.sync=\"name\"\n\t\t:name-editable=\"true\"\n\t\tname-placeholder=\"Filename\"\n\t\tsubname=\"last edited 3 weeks ago\">\n\t\t<!-- Insert your slots and tabs here -->\n\t</NcAppSidebar>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tname: 'cat-picture.jpg',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n### Editable name after click with custom tertiary action\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\t:name=\"name\"\n\t\t:name-editable.sync=\"nameEditable\"\n\t\t:name-placeholder=\"namePlaceholder\"\n\t\t:subname=\"subname\"\n\t\t@update:name=\"nameUpdate\">\n\t\t<template #tertiary-actions>\n\t\t\t<form>\n\t\t\t\t<input type=\"checkbox\" @click=\"toggledCheckbox\"/>\n\t\t\t</form>\n\t\t</template>\n\t</NcAppSidebar>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tname: 'cat-picture.jpg',\n\t\t\t\tnamePlaceholder: 'Filename',\n\t\t\t\tsubname: 'last edited 3 weeks ago',\n\t\t\t\tnameEditable: false\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tnameUpdate(e) {\n\t\t\t\tthis.name = e\n\t\t\t},\n\t\t\ttoggledCheckbox() {\n\t\t\t\talert('toggle')\n\t\t\t}\n\t\t}\n\t}\n</script>\n```\n\n### Custom subname\n\nInstead of using the `subname` prop you can use the same called slot. This is handy if you need to add accessible information.\nLike in the following example where the goal is to show a star icon to mark the file a favorite.\nSimplying adding `★` would not work as screen readers might not or wrongly announce the icon meaning this information is lost.\n\nA working alternative would be using an icon together with an `aria-label`:\n\n```vue\n\t<template>\n\t\t<NcAppSidebar name=\"cat-picture.jpg\">\n\t\t\t<template #subname>\n\t\t\t\t<NcIconSvgWrapper inline :path=\"mdiStar\" name=\"Favorite\" />\n\t\t\t\t123 KiB, a month ago\n\t\t\t</template>\n\t\t</NcAppSidebar>\n\t</template>\n\t<script>\n\timport { mdiStar } from '@mdi/js'\n\n\texport default {\n\t\tsetup() {\n\t\t\treturn {\n\t\t\t\tmdiStar,\n\t\t\t}\n\t\t}\n\t}\n\t</script>\n```\n\n### Empty sidebar for e.g. empty content component.\n\n```vue\n\t<template>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\t:empty=\"true\">\n\t\t\t<NcEmptyContent name=\"Content not found.\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</NcAppSidebar>\n\t</template>\n\t<script>\n\timport Magnify from 'vue-material-design-icons/Magnify.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tMagnify,\n\t\t},\n\t}\n\t</script>\n```\n\n### Conditionally show the sidebar with `open`\n\nIf the sidebar should be shown conditionally, you can use `open` prop to define sidebar visibility.\nIt automatically shows a toggle button to open the sidebar if it is closed.\n\nYou can also use `--app-sidebar-offset` CSS variable to preserve space\nfor the toggle button, for example, in top bar of `NcAppContent`.\n\nThe built-in toggle button can be removed with `no-toggle` prop.\n\nNote: the built-in toggle button is only available then NcAppSidebar is used in NcContent.\n\n```vue\n<template>\n\t<!-- This is in most cases NcContent -->\n\t<NcContent app-name=\"styleguidist\" class=\"content-styleguidist\">\n\t\t<NcAppContent>\n\t\t\t<div class=\"top-bar\">\n\t\t\t\t<NcButton variant=\"primary\">Start a call</NcButton>\n\t\t\t</div>\n\t\t</NcAppContent>\n\t\t<!-- The sidebar -->\n\t\t<NcAppSidebar\n\t\t\t:open.sync=\"showSidebar\"\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSingle tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</NcContent>\n</template>\n\n<script>\nimport Cog from 'vue-material-design-icons/Cog.vue'\n\nexport default {\n\tcomponents: {\n\t\tCog,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tshowSidebar: true,\n\t\t}\n\t},\n}\n</script>\n<style scoped>\n/* This styles just mock NcContent and NcAppContent */\n.content-styleguidist {\n\tposition: relative !important;\n\t/* Just to prevent jumping when the sidebar is hidden */\n\tmin-height: 360px;\n}\n\n.main-content {\n\tposition: absolute;\n\theight: 100%;\n\twidth: 100%;\n}\n\n/* Fix styles on this style guide page */\n@media only screen and (max-width: 512px) {\n\t:deep(aside) {\n\t\twidth: calc(100vw - 64px) !important;\n\t}\n}\n\n.top-bar {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\t/* preserve space for toggle button */\n\tpadding-inline-end: var(--app-sidebar-offset);\n\t/* same as on toggle button, but doesn't have to be the same */\n\tmargin: var(--app-sidebar-padding);\n}\n</style>\n```\n\n### Conditionally show the sidebar programmatically with `v-if`\n\nIf the sidebar should be shown conditionally without any explicit toggle button, you can use `v-if`.\n\n**Note about performance**: using `v-if` might result in bad performance and loosing sidebar content state.\n\n**Note about `v-show`**: using `v-show` to hide sidebar will result in usability issues due to active focus trap on mobile.\n\n```vue\n<template>\n\t<!-- This is in most cases NcContent -->\n\t<NcContent app-name=\"styleguidist\" class=\"content-styleguidist\">\n\t\t<NcAppContent>\n\t\t\t<div class=\"top-bar\">\n\t\t\t\t<NcButton @click.prevent=\"showSidebar = true\">\n\t\t\t\t\tToggle sidebar\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</NcAppContent>\n\t\t<!-- The sidebar -->\n\t\t<NcAppSidebar\n\t\t\tv-if=\"showSidebar\"\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\"\n\t\t\t@close=\"showSidebar = false\">\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSingle tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</NcContent>\n</template>\n\n<script>\nimport Cog from 'vue-material-design-icons/Cog.vue'\n\nexport default {\n\tcomponents: {\n\t\tCog,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tshowSidebar: true,\n\t\t}\n\t},\n}\n</script>\n<style scoped>\n/* This styles just mock NcContent and NcAppContent */\n.content-styleguidist {\n\tposition: relative !important;\n\t/* Just to prevent jumping when the sidebar is hidden */\n\tmin-height: 360px;\n}\n\n.main-content {\n\tposition: absolute;\n\theight: 100%;\n\twidth: 100%;\n}\n\n/* Fix styles on this style guide page */\n@media only screen and (max-width: 512px) {\n\t:deep(aside) {\n\t\twidth: calc(100vw - 64px) !important;\n\t}\n}\n\n.top-bar {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\t/* preserve space for toggle button */\n\tpadding-inline-end: var(--app-sidebar-offset);\n\t/* same as on toggle button, but doesn't have to be the same */\n\tmargin: var(--app-sidebar-padding);\n}\n</style>\n```\n</docs>\n\n<template>\n\t<transition appear\n\t\tname=\"slide-right\"\n\t\t@before-enter=\"onBeforeEnter\"\n\t\t@after-enter=\"onAfterEnter\"\n\t\t@before-leave=\"onBeforeLeave\"\n\t\t@after-leave=\"onAfterLeave\">\n\t\t<aside v-show=\"open\"\n\t\t\tid=\"app-sidebar-vue\"\n\t\t\tref=\"sidebar\"\n\t\t\tclass=\"app-sidebar\"\n\t\t\t:aria-labelledby=\"`app-sidebar-vue-${uid}__header`\"\n\t\t\t@keydown.esc=\"onKeydownEsc\">\n\t\t\t<!--\n\t\t\t\tWe cannot render toggle button inside sidebar (aside#app-sidebar-vue), because it is hidden then the toggle is needed.\n\t\t\t\tBut we also need transition with the sidebar to be the root of this component to use it as a single UI element, allowing to use `v-show`.\n\t\t\t\tSo we cannot render the toggle button directly in this component.\n\t\t\t\tAs a simple solution - render it in the content to keep correct position.\n\t\t\t-->\n\t\t\t<Teleport v-if=\"ncContentSelector && !open && !noToggle\" :selector=\"ncContentSelector\">\n\t\t\t\t<NcButton ref=\"toggle\"\n\t\t\t\t\t:aria-label=\"t('Open sidebar')\"\n\t\t\t\t\tclass=\"app-sidebar__toggle\"\n\t\t\t\t\t:class=\"toggleClasses\"\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tv-bind=\"toggleAttrs\"\n\t\t\t\t\t@click=\"$emit('update:open', true)\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<!-- @slot Custom icon for the toggle button, defaults to the dock-right icon from MDI -->\n\t\t\t\t\t\t<slot name=\"toggle-icon\">\n\t\t\t\t\t\t\t<IconDockRight :size=\"20\" />\n\t\t\t\t\t\t</slot>\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</Teleport>\n\n\t\t\t<header :class=\"{\n\t\t\t\t\t'app-sidebar-header--with-figure': hasFigure,\n\t\t\t\t\t'app-sidebar-header--compact': compact,\n\t\t\t\t}\"\n\t\t\t\tclass=\"app-sidebar-header\">\n\t\t\t\t<!-- @slot Alternative to the default header info: use for bare NcAppSidebar with tabs.\n\t\t\t\t\tNcAppSidebarHeader would be required to use for accessibility reasons.\n\t\t\t\t\tThis will be overridden by `empty` prop.\n\t\t\t\t-->\n\t\t\t\t<slot v-if=\"!empty\" name=\"info\">\n\t\t\t\t\t<!-- container for figure and description, allows easy switching to compact mode -->\n\t\t\t\t\t<div class=\"app-sidebar-header__info\">\n\t\t\t\t\t\t<!-- sidebar header illustration/figure -->\n\t\t\t\t\t\t<div v-if=\"hasFigure\"\n\t\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t\t'app-sidebar-header__figure--with-action': hasFigureClickListener\n\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\tclass=\"app-sidebar-header__figure\"\n\t\t\t\t\t\t\t:style=\"{\n\t\t\t\t\t\t\t\tbackgroundImage: `url(${background})`\n\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t@click=\"onFigureClick\"\n\t\t\t\t\t\t\t@keydown.enter=\"onFigureClick\">\n\t\t\t\t\t\t\t<slot class=\"app-sidebar-header__background\" name=\"header\" />\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<!-- sidebar details -->\n\t\t\t\t\t\t<div :class=\"{\n\t\t\t\t\t\t\t\t'app-sidebar-header__desc--with-tertiary-action': canStar || $slots['tertiary-actions'],\n\t\t\t\t\t\t\t\t'app-sidebar-header__desc--editable': nameEditable && !subname,\n\t\t\t\t\t\t\t\t'app-sidebar-header__desc--with-subname--editable': nameEditable && subname,\n\t\t\t\t\t\t\t\t'app-sidebar-header__desc--without-actions': !$slots['secondary-actions'],\n\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\tclass=\"app-sidebar-header__desc\">\n\t\t\t\t\t\t\t<!-- favourite icon -->\n\t\t\t\t\t\t\t<div v-if=\"canStar || $slots['tertiary-actions']\" class=\"app-sidebar-header__tertiary-actions\">\n\t\t\t\t\t\t\t\t<slot name=\"tertiary-actions\">\n\t\t\t\t\t\t\t\t\t<NcButton v-if=\"canStar\"\n\t\t\t\t\t\t\t\t\t\t:aria-label=\"favoriteTranslated\"\n\t\t\t\t\t\t\t\t\t\t:pressed=\"isStarred\"\n\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__star\"\n\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t@click.prevent=\"toggleStarred\">\n\t\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t\t<NcLoadingIcon v-if=\"starLoading\" />\n\t\t\t\t\t\t\t\t\t\t\t<Star v-else-if=\"isStarred\" :size=\"20\" />\n\t\t\t\t\t\t\t\t\t\t\t<StarOutline v-else :size=\"20\" />\n\t\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t\t</slot>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<!-- name -->\n\t\t\t\t\t\t\t<div class=\"app-sidebar-header__name-container\">\n\t\t\t\t\t\t\t\t<div class=\"app-sidebar-header__mainname-container\">\n\t\t\t\t\t\t\t\t\t<!-- main name -->\n\t\t\t\t\t\t\t\t\t<NcAppSidebarHeader v-show=\"!nameEditable\"\n\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname\"\n\t\t\t\t\t\t\t\t\t\t:name=\"name\"\n\t\t\t\t\t\t\t\t\t\t:linkify=\"linkifyName\"\n\t\t\t\t\t\t\t\t\t\t:title=\"title\"\n\t\t\t\t\t\t\t\t\t\t:tabindex=\"nameEditable ? 0 : -1\"\n\t\t\t\t\t\t\t\t\t\t@click.self.native=\"editName\" />\n\t\t\t\t\t\t\t\t\t<template v-if=\"nameEditable\">\n\t\t\t\t\t\t\t\t\t\t<form v-click-outside=\"() => onSubmitName()\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname-form\"\n\t\t\t\t\t\t\t\t\t\t\t@submit.prevent=\"onSubmitName\">\n\t\t\t\t\t\t\t\t\t\t\t<input ref=\"nameInput\"\n\t\t\t\t\t\t\t\t\t\t\t\tv-focus\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname-input\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t\t:placeholder=\"namePlaceholder\"\n\t\t\t\t\t\t\t\t\t\t\t\t:value=\"name\"\n\t\t\t\t\t\t\t\t\t\t\t\t@keydown.esc.stop=\"onDismissEditing\"\n\t\t\t\t\t\t\t\t\t\t\t\t@input=\"onNameInput\">\n\t\t\t\t\t\t\t\t\t\t\t<NcButton :aria-label=\"changeNameTranslated\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary-no-background\">\n\t\t\t\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t\t\t\t</form>\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t<!-- header main menu -->\n\t\t\t\t\t\t\t\t\t<NcActions v-if=\"$slots['secondary-actions']\"\n\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__menu\"\n\t\t\t\t\t\t\t\t\t\t:force-menu=\"forceMenu\">\n\t\t\t\t\t\t\t\t\t\t<slot name=\"secondary-actions\" />\n\t\t\t\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<!-- secondary name -->\n\t\t\t\t\t\t\t\t<p v-if=\"subname.trim() !== '' || $slots['subname']\"\n\t\t\t\t\t\t\t\t\t:title=\"subtitle || undefined\"\n\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__subname\">\n\t\t\t\t\t\t\t\t\t<!-- @slot Alternative to the `subname` prop can be used for more complex conent. It will be rendered within a `p` tag. -->\n\t\t\t\t\t\t\t\t\t<slot name=\"subname\">\n\t\t\t\t\t\t\t\t\t\t{{ subname }}\n\t\t\t\t\t\t\t\t\t</slot>\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</slot>\n\t\t\t\t<!-- a11y fallback for empty content -->\n\t\t\t\t<NcAppSidebarHeader v-else\n\t\t\t\t\tclass=\"app-sidebar-header__mainname--hidden\"\n\t\t\t\t\t:name=\"name\"\n\t\t\t\t\ttabindex=\"-1\" />\n\n\t\t\t\t<NcButton ref=\"closeButton\"\n\t\t\t\t\t:aria-label=\"closeTranslated\"\n\t\t\t\t\t:title=\"closeTranslated\"\n\t\t\t\t\tclass=\"app-sidebar__close\"\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t@click.prevent=\"closeSidebar\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Close :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\n\t\t\t\t<div v-if=\"$slots['description'] && !empty\" class=\"app-sidebar-header__description\">\n\t\t\t\t\t<slot name=\"description\" />\n\t\t\t\t</div>\n\t\t\t</header>\n\n\t\t\t<NcAppSidebarTabs v-show=\"!loading\"\n\t\t\t\tref=\"tabs\"\n\t\t\t\t:active=\"active\"\n\t\t\t\t:force-tabs=\"forceTabs\"\n\t\t\t\t@update:active=\"onUpdateActive\">\n\t\t\t\t<slot />\n\t\t\t</NcAppSidebarTabs>\n\n\t\t\t<NcEmptyContent v-if=\"loading\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcLoadingIcon :size=\"64\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</aside>\n\t</transition>\n</template>\n\n<script>\n// TODO: This is built-in for vue3 just drop the import\nimport { Portal as Teleport } from '@linusborg/vue-simple-portal'\n\nimport NcAppSidebarTabs from './NcAppSidebarTabs.vue'\nimport NcActions from '../NcActions/index.js'\nimport NcAppSidebarHeader from '../NcAppSidebarHeader/index.ts'\nimport NcButton from '../NcButton/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport Focus from '../../directives/Focus/index.js'\nimport { useIsSmallMobile } from '../../composables/useIsMobile/index.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { t } from '../../l10n.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\nimport IconDockRight from 'vue-material-design-icons/DockRight.vue'\nimport Star from 'vue-material-design-icons/Star.vue'\nimport StarOutline from 'vue-material-design-icons/StarOutline.vue'\n\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport { createFocusTrap } from 'focus-trap'\nimport Vue, { provide, ref } from 'vue'\n\nexport default {\n\tname: 'NcAppSidebar',\n\n\tcomponents: {\n\t\tTeleport,\n\t\tNcActions,\n\t\tNcAppSidebarHeader,\n\t\tNcAppSidebarTabs,\n\t\tArrowRight,\n\t\tIconDockRight,\n\t\tNcButton,\n\t\tNcLoadingIcon,\n\t\tNcEmptyContent,\n\t\tClose,\n\t\tStar,\n\t\tStarOutline,\n\t},\n\n\tdirectives: {\n\t\tfocus: Focus,\n\t\tClickOutside,\n\t},\n\n\tinject: {\n\t\tncContentSelector: {\n\t\t\tfrom: 'NcContent:selector',\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tprops: {\n\t\tactive: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Allow to edit the sidebar name.\n\t\t */\n\t\tnameEditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\tnamePlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\tsubname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Title to display for the subname.\n\t\t */\n\t\tsubtitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Url to the top header background image\n\t\t * Applied with css\n\t\t */\n\t\tbackground: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Enable the favourite icon if not null\n\t\t * See fired events\n\t\t */\n\t\tstarred: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Show loading spinner instead of the star icon\n\t\t */\n\t\tstarLoading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Show loading spinner instead of tabs\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Display the sidebar in compact mode\n\t\t */\n\t\tcompact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Only display close button and default slot content.\n\t\t * Don't display other header content and primary and secondary actions.\n\t\t * Useful when showing the EmptyContent component as content.\n\t\t */\n\t\tempty: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the actions to display in a three dot menu\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Force the tab navigation to display even if there is only one tab\n\t\t */\n\t\tforceTabs: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Linkify the name\n\t\t */\n\t\tlinkifyName: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Title to display for the name.\n\t\t * Can be set to the same text in case it's too long.\n\t\t */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Allow to conditionally show the sidebar\n\t\t * You can also use `v-if` on the sidebar, but using the open prop allow to keep\n\t\t * the sidebar inside the DOM for performance if it is opened and closed multiple times.\n\t\t *\n\t\t * When using the `open` property to close the sidebar a built-in toggle button will be shown to reopen it,\n\t\t * similar to the app navigation. You can remove this button with the `no-toggle` prop.\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Custom classes to assign to the sidebar toggle button.\n\t\t * If needed this can be used to assign styles to the button using `:deep()` selector.\n\t\t */\n\t\ttoggleClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Custom attrs to assign to the sidebar toggle button.\n\t\t */\n\t\ttoggleAttrs: {\n\t\t\ttype: Object,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Do not add the built-in toggle button with `open` prop.\n\t\t */\n\t\tnoToggle: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'close',\n\t\t'closing',\n\t\t'closed',\n\t\t'opening',\n\t\t'opened',\n\t\t'figure-click',\n\t\t'update:active',\n\t\t'update:name',\n\t\t'update:nameEditable',\n\t\t'update:open',\n\t\t'update:starred',\n\t\t'submit-name',\n\t\t'dismiss-editing',\n\t],\n\n\tsetup() {\n\t\tconst headerRef = ref(null)\n\t\tprovide('NcAppSidebar:header:ref', headerRef)\n\n\t\treturn {\n\t\t\tuid: GenRandomId(),\n\t\t\tisMobile: useIsSmallMobile(),\n\t\t\theaderRef,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tchangeNameTranslated: t('Change name'),\n\t\t\tcloseTranslated: t('Close sidebar'),\n\t\t\tfavoriteTranslated: t('Favorite'),\n\t\t\tisStarred: this.starred,\n\t\t\tfocusTrap: null,\n\t\t\telementToReturnFocus: null,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcanStar() {\n\t\t\treturn this.isStarred !== null\n\t\t},\n\t\thasFigure() {\n\t\t\treturn this.$slots.header || this.background\n\t\t},\n\t\thasFigureClickListener() {\n\t\t\treturn this.$listeners['figure-click']\n\t\t},\n\t},\n\n\twatch: {\n\t\tstarred() {\n\t\t\tthis.isStarred = this.starred\n\t\t},\n\n\t\tisMobile() {\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\n\t\topen() {\n\t\t\tthis.checkToggleButtonContainerAvailability()\n\t\t},\n\t},\n\n\tcreated() {\n\t\tthis.preserveElementToReturnFocus()\n\n\t\tthis.checkToggleButtonContainerAvailability()\n\t},\n\n\tbeforeDestroy() {\n\t\t// Make sure that the 'closed' event is dispatched even if this element is destroyed before the 'after-leave' event is received.\n\t\tthis.$emit('closed')\n\t\tthis.focusTrap?.deactivate()\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\tpreserveElementToReturnFocus() {\n\t\t\t// Save the element that had focus before the sidebar was opened to return back on close\n\t\t\tif (document.activeElement && document.activeElement !== document.body) {\n\t\t\t\tthis.elementToReturnFocus = document.activeElement\n\n\t\t\t\t// Special case for menus (NcActions)\n\t\t\t\t// If a sidebar was opened from a menu item, we want to return focus to the menu trigger instead of the item\n\t\t\t\tif (this.elementToReturnFocus.getAttribute('role') === 'menuitem') {\n\t\t\t\t\tconst menu = this.elementToReturnFocus.closest('[role=\"menu\"]')\n\t\t\t\t\tif (menu) {\n\t\t\t\t\t\tconst menuTrigger = document.querySelector(`[aria-controls=\"${menu.id}\"]`)\n\t\t\t\t\t\tthis.elementToReturnFocus = menuTrigger\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\tinitFocusTrap() {\n\t\t\tif (this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.focusTrap = createFocusTrap([\n\t\t\t\t// The sidebar itself\n\t\t\t\tthis.$refs.sidebar,\n\t\t\t\t// Nextcloud Server header navigarion\n\t\t\t\tdocument.querySelector('#header'),\n\t\t\t], {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\tfallbackFocus: this.$refs.closeButton.$el,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tescapeDeactivates: false,\n\t\t\t})\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.open && this.isMobile) {\n\t\t\t\tthis.initFocusTrap()\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\t/**\n\t\t * Close the sidebar on pressing the escape key on mobile\n\t\t *\n\t\t * @param {KeyboardEvent} event key down event\n\t\t */\n\t\tonKeydownEsc(event) {\n\t\t\tif (this.isMobile) {\n\t\t\t\tevent.stopPropagation()\n\t\t\t\tthis.closeSidebar()\n\t\t\t}\n\t\t},\n\n\t\tonBeforeEnter(element) {\n\t\t\t/**\n\t\t\t * The sidebar is opening and the transition is in progress\n\t\t\t *\n\t\t\t * @type {HTMLElement}\n\t\t\t * @deprecated\n\t\t\t */\n\t\t\tthis.$emit('opening', element)\n\t\t},\n\t\tonAfterEnter(element) {\n\t\t\t// Focus sidebar on open only if it was opened by a user interaction\n\t\t\tif (this.elementToReturnFocus) {\n\t\t\t\tthis.focus()\n\t\t\t}\n\n\t\t\tthis.toggleFocusTrap()\n\n\t\t\t/**\n\t\t\t * The sidebar is opened and the transition is complete\n\t\t\t *\n\t\t\t * @type {HTMLElement}\n\t\t\t */\n\t\t\tthis.$emit('opened', element)\n\t\t},\n\t\tonBeforeLeave(element) {\n\t\t\t/**\n\t\t\t * The sidebar is closing and the transition is in progress\n\t\t\t *\n\t\t\t * @type {HTMLElement}\n\t\t\t * @deprecated\n\t\t\t */\n\t\t\tthis.$emit('closing', element)\n\t\t},\n\t\tonAfterLeave(element) {\n\t\t\t/**\n\t\t\t * The sidebar is closed and the transition is complete\n\t\t\t *\n\t\t\t * @type {HTMLElement}\n\t\t\t */\n\t\t\tthis.$emit('closed', element)\n\n\t\t\tthis.toggleFocusTrap()\n\n\t\t\t// Return focus to the element that had focus before the sidebar was opened\n\t\t\tthis.elementToReturnFocus?.focus({ focusVisible: true })\n\t\t\tthis.elementToReturnFocus = null\n\t\t},\n\n\t\t/**\n\t\t * Used to tell parent component the user asked to close the sidebar\n\t\t *\n\t\t * @param {Event} e close icon click event\n\t\t */\n\t\tcloseSidebar(e) {\n\t\t\t/**\n\t\t\t * The user clicked to closed the sidebar\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('close', e)\n\t\t\t/**\n\t\t\t * Current open state emitted after the transitions are finished\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:open', false)\n\t\t},\n\n\t\t/**\n\t\t * Emit figure click event to parent component\n\t\t *\n\t\t * @param {Event} e click event\n\t\t */\n\t\tonFigureClick(e) {\n\t\t\t/**\n\t\t\t * The figure/background header has been clicked\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('figure-click', e)\n\t\t},\n\n\t\t/**\n\t\t * Toggle the favourite state\n\t\t * and emit to the parent component\n\t\t */\n\t\ttoggleStarred() {\n\t\t\tthis.isStarred = !this.isStarred\n\t\t\t/**\n\t\t\t * Emitted when the starred value changes\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:starred', this.isStarred)\n\t\t},\n\n\t\teditName() {\n\t\t\t/**\n\t\t\t * Emitted when the nameEditable value changes\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:nameEditable', true)\n\t\t\t// Focus the name input\n\t\t\tif (this.nameEditable) {\n\t\t\t\tthis.$nextTick(\n\t\t\t\t\t() => this.$refs.nameInput.focus(),\n\t\t\t\t)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Focus the sidebar\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tif (!this.open && !this.noToggle) {\n\t\t\t\tthis.$refs.toggle.$el.focus()\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tthis.headerRef.focus()\n\t\t\t} catch {\n\t\t\t\tVue.util.warn('NcAppSidebar should have focusable header for accessibility reasons. Use NcAppSidebarHeader component.')\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Focus the active tab\n\t\t * @public\n\t\t */\n\t\tfocusActiveTabContent() {\n\t\t\t// If a tab is focused then probably a new trigger element moved the focus to the sidebar\n\t\t\tthis.preserveElementToReturnFocus()\n\n\t\t\tthis.$refs.tabs.focusActiveTabContent()\n\t\t},\n\n\t\t/**\n\t\t * Check if the toggle button container is available\n\t\t */\n\t\tcheckToggleButtonContainerAvailability() {\n\t\t\t// Toggle button must be rendered, but there is no element to teleport it to\n\t\t\tif (this.open === false && !this.noToggle && !this.ncContentSelector) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t'[NcAppSidebar] It looks like you want to use NcAppSidebar with the built-in toggle button. '\n\t\t\t\t\t+ 'This feature is only available when NcAppSidebar is used in NcContent.',\n\t\t\t\t)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Emit name change event to parent component\n\t\t *\n\t\t * @param {Event} event input event\n\t\t */\n\t\tonNameInput(event) {\n\t\t\t/**\n\t\t\t * Emitted when the name value changes\n\t\t\t *\n\t\t\t * @type {string|Date}\n\t\t\t */\n\t\t\tthis.$emit('update:name', event.target.value)\n\t\t},\n\n\t\t/**\n\t\t * Emit when the name form edit confirm button is pressed in order\n\t\t * to change the name.\n\t\t *\n\t\t * @param {Event} event submit event\n\t\t */\n\t\tonSubmitName(event) {\n\t\t\t// Disable editing\n\t\t\tthis.$emit('update:nameEditable', false)\n\t\t\t/**\n\t\t\t * Emitted when the name edit input has been submitted\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('submit-name', event)\n\t\t},\n\t\tonDismissEditing() {\n\t\t\t// Disable editing\n\t\t\tthis.$emit('update:nameEditable', false)\n\t\t\t/**\n\t\t\t * Emitted when the name edit has been cancelled\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('dismiss-editing')\n\t\t},\n\t\tonUpdateActive(activeTab) {\n\t\t\t/**\n\t\t\t * The active tab changed\n\t\t\t *\n\t\t\t * @type {string}\n\t\t\t */\n\t\t\tthis.$emit('update:active', activeTab)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n// Allows to use transition over a custom CSS property (CSS Variable)\n// Ignored on old browsers resulting in slightly noticeable jump\n@property --app-sidebar-offset {\n  syntax: '<length>';\n  initial-value: 0;\n  inherits: true;\n}\n\n.content {\n\t// A padding between the toggle button and the page border\n\t--app-sidebar-padding: #{$app-navigation-padding};\n\t// A padding between the toggle button and the page border\n\t--app-sidebar-offset: 0;\n\t// Explicitly disable transition by default to enable it only when sidebar animation is active\n\t// !important to override styles from an older version, because it's global non-scoped styles\n\ttransition: --app-sidebar-offset 0ms !important;\n}\n\n// When AppSidebar is animation is active - also apply transition for the toggle button offset\n.content:has(.app-sidebar.slide-right-enter-active),\n.content:has(.app-sidebar.slide-right-leave-active) {\n\ttransition: --app-sidebar-offset var(--animation-quick);\n}\n\n.content:has(.app-sidebar__toggle) {\n\t--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));\n}\n</style>\n\n<style lang=\"scss\" scoped>\n$desc-input-padding: 7px;\n\n// name and subname\n$desc-name-height: 30px;\n$desc-subname-height: 22px;\n$desc-height: $desc-name-height + $desc-subname-height;\n\n$top-buttons-spacing: $app-navigation-padding; // align with app navigation\n\n/*\n\tSidebar: to be used within #content\n\tapp-content will be shrinked properly\n*/\n.app-sidebar {\n\t--app-sidebar-width: clamp(300px, 27vw, 500px);\n\twidth: var(--app-sidebar-width);\n\n\tz-index: 1500;\n\ttop: 0;\n\tinset-inline-end: 0;\n\tdisplay: flex;\n\toverflow-x: hidden;\n\toverflow-y: auto;\n\tflex-direction: column;\n\tflex-shrink: 0;\n\theight: 100%;\n\tborder-inline-start: 1px solid var(--color-border);\n\tbackground: var(--color-main-background);\n\t// Make close button positioned relative to the header\n\tposition: relative;\n\n\t&__toggle {\n\t\tposition: absolute !important;\n\t\tinset-block-start: var(--app-sidebar-padding);\n\t\tinset-inline-end: var(--app-sidebar-padding);\n\t\t// app-content has z-index 1000 so we need 1001\n\t\tz-index: 1001;\n\t}\n\n\t.app-sidebar-header {\n\t\t// Variable for custom content to be aware of space taken by close button (from top-right corner)\n\t\t--app-sidebar-close-button-offset: calc(var(--default-clickable-area) + #{$top-buttons-spacing});\n\n\t\t> .app-sidebar__close {\n\t\t\tposition: absolute;\n\t\t\tz-index: 100;\n\t\t\ttop: $top-buttons-spacing;\n\t\t\tinset-inline-end: $top-buttons-spacing;\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\topacity: $opacity_normal;\n\t\t\tborder-radius: calc(var(--default-clickable-area) / 2);\n\t\t\t&:hover,\n\t\t\t&:active,\n\t\t\t&:focus {\n\t\t\t\topacity: $opacity_full;\n\t\t\t\tbackground-color: $action-background-hover;\n\t\t\t}\n\t\t}\n\n\t\t// Compact mode only affects a sidebar with a figure\n\t\t&--compact.app-sidebar-header--with-figure {\n\t\t\t.app-sidebar-header__info {\n\t\t\t\tflex-direction: row;\n\n\t\t\t\t.app-sidebar-header__figure {\n\t\t\t\t\t--figure-size: calc($desc-height + var(--app-sidebar-padding));\n\t\t\t\t\tz-index: 2;\n\t\t\t\t\twidth: var(--figure-size);\n\t\t\t\t\theight: var(--figure-size);\n\t\t\t\t\tmargin: calc(var(--app-sidebar-padding) / 2);\n\t\t\t\t\tborder-radius: 3px;\n\t\t\t\t\tflex: 0 0 auto;\n\t\t\t\t}\n\t\t\t\t.app-sidebar-header__desc {\n\t\t\t\t\tpadding-inline-start: 0;\n\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\tmin-width: 0;\n\t\t\t\t\tpadding-inline-end: calc(var(--default-clickable-area) + var(--app-sidebar-close-button-offset));\n\t\t\t\t\tpadding-top: var(--app-sidebar-padding);\n\n\t\t\t\t\t&.app-sidebar-header__desc--without-actions {\n\t\t\t\t\t\tpadding-inline-end: var(--app-sidebar-close-button-offset);\n\t\t\t\t\t}\n\n\t\t\t\t\t.app-sidebar-header__tertiary-actions {\n\t\t\t\t\t\tz-index: 3; // above star\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\ttop: calc(var(--app-sidebar-padding) / 2);\n\t\t\t\t\t\tinset-inline-start: calc(-1 * var(--default-clickable-area));\n\t\t\t\t\t\tgap: 0; // override gap\n\t\t\t\t\t}\n\t\t\t\t\t.app-sidebar-header__menu {\n\t\t\t\t\t\ttop: $top-buttons-spacing;\n\t\t\t\t\t\tinset-inline-end: var(--app-sidebar-close-button-offset); // left of the close button\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// sidebar without figure\n\t\t&:not(.app-sidebar-header--with-figure) {\n\t\t\t// align the menu with the close button\n\t\t\t.app-sidebar-header__menu {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: $top-buttons-spacing;\n\t\t\t\tinset-inline-end: var(--app-sidebar-close-button-offset);\n\t\t\t}\n\t\t\t// increase the padding to not overlap the menu\n\t\t\t.app-sidebar-header__desc {\n\t\t\t\tpadding-inline-end: calc(var(--default-clickable-area) + var(--app-sidebar-close-button-offset));\n\n\t\t\t\t&.app-sidebar-header__desc--without-actions {\n\t\t\t\t\tpadding-inline-end: var(--app-sidebar-close-button-offset);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// the container with the figure and the description\n\t\t.app-sidebar-header__info {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\n\t\t// header background\n\t\t&__figure {\n\t\t\twidth: 100%;\n\t\t\theight: 250px;\n\t\t\tmax-height: 250px;\n\t\t\tbackground-repeat: no-repeat;\n\t\t\tbackground-position: center;\n\t\t\tbackground-size: contain;\n\t\t\t&--with-action {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\t\t}\n\n\t\t// description\n\t\t&__desc {\n\t\t\tposition: relative;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\tpadding-inline: var(--app-sidebar-padding);\n\t\t\tpadding-block: #{$top-buttons-spacing} calc(var(--app-sidebar-padding) / 2);\n\t\t\tgap: 0 4px;\n\n\t\t\t// custom overrides\n\t\t\t&--with-tertiary-action {\n\t\t\t\tpadding-inline-start: 6px;\n\t\t\t}\n\n\t\t\t&--editable .app-sidebar-header__mainname-form,\n\t\t\t&--with-subname--editable .app-sidebar-header__mainname-form {\n\t\t\t\tmargin-top: -2px;\n\t\t\t\tmargin-bottom: -2px;\n\t\t\t}\n\n\t\t\t&--with-subname--editable .app-sidebar-header__subname {\n\t\t\t\tmargin-top: -2px;\n\t\t\t}\n\n\t\t\t.app-sidebar-header__tertiary-actions {\n\t\t\t\tdisplay: flex;\n\t\t\t\theight: var(--default-clickable-area);\n\t\t\t\twidth: var(--default-clickable-area);\n\t\t\t\tjustify-content: center;\n\t\t\t\tflex: 0 0 auto;\n\n\t\t\t\t.app-sidebar-header__star {\n\t\t\t\t\t// Override default Button component styles\n\t\t\t\t\tbox-shadow: none;\n\t\t\t\t\t&:not([aria-pressed='true']):hover {\n\t\t\t\t\t\tbox-shadow: none;\n\t\t\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// names\n\t\t\t.app-sidebar-header__name-container {\n\t\t\t\tflex: 1 1 auto;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tjustify-content: center;\n\t\t\t\tmin-width: 0;\n\n\t\t\t\t.app-sidebar-header__mainname-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tmin-height: var(--default-clickable-area);\n\n\t\t\t\t\t// main name\n\t\t\t\t\t.app-sidebar-header__mainname {\n\t\t\t\t\t\tpadding: 0;\n\t\t\t\t\t\tmin-height: 30px;\n\t\t\t\t\t\tfont-size: 20px;\n\t\t\t\t\t\tline-height: $desc-name-height;\n\n\t\t\t\t\t\t// Needs 'deep' as the link is generated by the linkify directive\n\t\t\t\t\t\t&:deep(.linkified) {\n\t\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t\t\ttext-decoration: underline;\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.app-sidebar-header__mainname-form {\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\t\talign-items: center;\n\n\t\t\t\t\t\tinput.app-sidebar-header__mainname-input {\n\t\t\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\tpadding: $desc-input-padding;\n\t\t\t\t\t\t\tfont-size: 20px;\n\t\t\t\t\t\t\tfont-weight: bold;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t// main menu\n\t\t\t\t\t.app-sidebar-header__menu {\n\t\t\t\t\t\tmargin-inline-start: 5px;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// shared between main and subname\n\t\t\t\t.app-sidebar-header__mainname,\n\t\t\t\t.app-sidebar-header__subname {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\t}\n\n\t\t\t\t// subname\n\t\t\t\t.app-sidebar-header__subname {\n\t\t\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\t\t\tfont-size: var(--default-font-size);\n\t\t\t\t\tpadding: 0;\n\n\t\t\t\t\t* {\n\t\t\t\t\t\tvertical-align: text-bottom;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// Hidden a11y fallback\n\t\t.app-sidebar-header__mainname--hidden {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tinset-inline-start: 0;\n\t\t\tmargin: 0;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\t// sidebar description slot\n\t\t&__description {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tmargin: 0 10px;\n\t\t}\n\t}\n}\n\n// Make the sidebar full-width on small screens\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-sidebar {\n\t\tposition: absolute;\n\t\t--app-sidebar-width: 100vw;\n\t}\n}\n\n.slide-right-leave-active,\n.slide-right-enter-active {\n\ttransition-duration: var(--animation-quick);\n\ttransition-property: margin-inline-end;\n}\n\n.slide-right-enter-to,\n.slide-right-leave {\n\tmargin-inline-end: 0;\n}\n\n.slide-right-enter,\n.slide-right-leave-to {\n\tmargin-inline-end: calc(-1 * var(--app-sidebar-width));\n}\n</style>\n\n<style lang=\"scss\">\n// ! slots specific designs, cannot be scoped\n// if any button inside the description slot, increase visual padding\n.app-sidebar-header__description {\n\tbutton, .button,\n\tinput[type='button'],\n\tinput[type='submit'],\n\tinput[type='reset'] {\n\t\tpadding: 6px 22px;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","NcCheckboxRadioSwitch","NcVNodes","Teleport","NcActions","NcAppSidebarHeader","ArrowRight","NcButton","NcLoadingIcon","NcEmptyContent","Close","Focus","ClickOutside","ref","provide","GenRandomId","useIsSmallMobile","t","createFocusTrap","getTrapStack","Vue"],"mappings":"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","x_google_ignoreList":[1,2,3]}

package/dist/chunks/{NcAppSidebar-DOJNq1iG.mjs → NcAppSidebar-C_C76E_8.mjs}

@@ -1,14 +1,14 @@
-import '../assets/NcAppSidebar-Dun97zcC.css';
+import '../assets/NcAppSidebar-DVDDtSbA.css';
 import { Portal } from "@linusborg/vue-simple-portal";
 import NcVNodes from "../Components/NcVNodes.mjs";
 import { N as NcCheckboxRadioSwitch } from "./NcCheckboxRadioSwitch-Di9rSADK.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
-import { N as NcActions } from "./NcActions-Bkh3UMs3.mjs";
+import { N as NcActions } from "./NcActions-DEZO46mP.mjs";
+import { N as NcAppSidebarHeader } from "./NcAppSidebarHeader-G2VD8Nfl.mjs";
 import NcButton from "../Components/NcButton.mjs";
 import NcEmptyContent from "../Components/NcEmptyContent.mjs";
 import NcLoadingIcon from "../Components/NcLoadingIcon.mjs";
-import { directive as directive$1 } from "../Directives/Focus.mjs";
-import { directive } from "../Directives/Linkify.mjs";
+import { directive } from "../Directives/Focus.mjs";
 import { useIsSmallMobile } from "../Composables/useIsMobile.mjs";
 import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
 import { g as getTrapStack } from "./focusTrap-DmkaYJTC.mjs";
@@ -17,6 +17,7 @@ import { A as ArrowRight } from "./ArrowRight-CY2b9hgN.mjs";
 import { C as Close } from "./Close-BtLPUSdO.mjs";
 import { vOnClickOutside } from "@vueuse/components";
 import { createFocusTrap } from "focus-trap";
+import Vue, { ref, provide } from "vue";
 const _sfc_main$4 = {
   name: "NcAppSidebarTabs",
   components: {
@@ -350,6 +351,7 @@ const _sfc_main = {
   components: {
     Teleport: Portal,
     NcActions,
+    NcAppSidebarHeader,
     NcAppSidebarTabs,
     ArrowRight,
     IconDockRight,
@@ -361,8 +363,7 @@ const _sfc_main = {
     StarOutline
   },
   directives: {
-    focus: directive$1,
-    linkify: directive,
+    focus: directive,
     ClickOutside: vOnClickOutside
   },
   inject: {
@@ -529,9 +530,12 @@ const _sfc_main = {
     "dismiss-editing"
   ],
   setup() {
+    const headerRef = ref(null);
+    provide("NcAppSidebar:header:ref", headerRef);
     return {
       uid: GenRandomId(),
-      isMobile: useIsSmallMobile()
+      isMobile: useIsSmallMobile(),
+      headerRef
     };
   },
   data() {
@@ -683,7 +687,15 @@ const _sfc_main = {
      * @public
      */
     focus() {
-      this.$refs.header.focus();
+      if (!this.open && !this.noToggle) {
+        this.$refs.toggle.$el.focus();
+        return;
+      }
+      try {
+        this.headerRef.focus();
+      } catch {
+        Vue.util.warn("NcAppSidebar should have focusable header for accessibility reasons. Use NcAppSidebarHeader component.");
+      }
     },
     /**
      * Focus the active tab
@@ -735,7 +747,7 @@ var _sfc_render = function render5() {
   return _c("transition", { attrs: { "appear": "", "name": "slide-right" }, on: { "before-enter": _vm.onBeforeEnter, "after-enter": _vm.onAfterEnter, "before-leave": _vm.onBeforeLeave, "after-leave": _vm.onAfterLeave } }, [_c("aside", { directives: [{ name: "show", rawName: "v-show", value: _vm.open, expression: "open" }], ref: "sidebar", staticClass: "app-sidebar", attrs: { "id": "app-sidebar-vue", "aria-labelledby": `app-sidebar-vue-${_vm.uid}__header` }, on: { "keydown": function($event) {
     if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) return null;
     return _vm.onKeydownEsc.apply(null, arguments);
-  } } }, [_vm.ncContentSelector && !_vm.open && !_vm.noToggle ? _c("Teleport", { attrs: { "selector": _vm.ncContentSelector } }, [_c("NcButton", _vm._b({ staticClass: "app-sidebar__toggle", class: _vm.toggleClasses, attrs: { "aria-label": _vm.t("Open sidebar"), "variant": "tertiary" }, on: { "click": function($event) {
+  } } }, [_vm.ncContentSelector && !_vm.open && !_vm.noToggle ? _c("Teleport", { attrs: { "selector": _vm.ncContentSelector } }, [_c("NcButton", _vm._b({ ref: "toggle", staticClass: "app-sidebar__toggle", class: _vm.toggleClasses, attrs: { "aria-label": _vm.t("Open sidebar"), "variant": "tertiary" }, on: { "click": function($event) {
     return _vm.$emit("update:open", true);
   } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
     return [_vm._t("toggle-icon", function() {
@@ -744,45 +756,47 @@ var _sfc_render = function render5() {
   }, proxy: true }], null, true) }, "NcButton", _vm.toggleAttrs, false))], 1) : _vm._e(), _c("header", { staticClass: "app-sidebar-header", class: {
     "app-sidebar-header--with-figure": _vm.hasFigure,
     "app-sidebar-header--compact": _vm.compact
-  } }, [_c("div", { staticClass: "app-sidebar-header__info" }, [_vm.hasFigure && !_vm.empty ? _c("div", { staticClass: "app-sidebar-header__figure", class: {
-    "app-sidebar-header__figure--with-action": _vm.hasFigureClickListener
-  }, style: {
-    backgroundImage: `url(${_vm.background})`
-  }, attrs: { "tabindex": "0" }, on: { "click": _vm.onFigureClick, "keydown": function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
-    return _vm.onFigureClick.apply(null, arguments);
-  } } }, [_vm._t("header")], 2) : _vm._e(), !_vm.empty ? _c("div", { staticClass: "app-sidebar-header__desc", class: {
-    "app-sidebar-header__desc--with-tertiary-action": _vm.canStar || _vm.$slots["tertiary-actions"],
-    "app-sidebar-header__desc--editable": _vm.nameEditable && !_vm.subname,
-    "app-sidebar-header__desc--with-subname--editable": _vm.nameEditable && _vm.subname,
-    "app-sidebar-header__desc--without-actions": !_vm.$slots["secondary-actions"]
-  } }, [_vm.canStar || _vm.$slots["tertiary-actions"] ? _c("div", { staticClass: "app-sidebar-header__tertiary-actions" }, [_vm._t("tertiary-actions", function() {
-    return [_vm.canStar ? _c("NcButton", { staticClass: "app-sidebar-header__star", attrs: { "aria-label": _vm.favoriteTranslated, "pressed": _vm.isStarred, "variant": "secondary" }, on: { "click": function($event) {
+  } }, [!_vm.empty ? _vm._t("info", function() {
+    return [_c("div", { staticClass: "app-sidebar-header__info" }, [_vm.hasFigure ? _c("div", { staticClass: "app-sidebar-header__figure", class: {
+      "app-sidebar-header__figure--with-action": _vm.hasFigureClickListener
+    }, style: {
+      backgroundImage: `url(${_vm.background})`
+    }, attrs: { "tabindex": "0" }, on: { "click": _vm.onFigureClick, "keydown": function($event) {
+      if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
+      return _vm.onFigureClick.apply(null, arguments);
+    } } }, [_vm._t("header")], 2) : _vm._e(), _c("div", { staticClass: "app-sidebar-header__desc", class: {
+      "app-sidebar-header__desc--with-tertiary-action": _vm.canStar || _vm.$slots["tertiary-actions"],
+      "app-sidebar-header__desc--editable": _vm.nameEditable && !_vm.subname,
+      "app-sidebar-header__desc--with-subname--editable": _vm.nameEditable && _vm.subname,
+      "app-sidebar-header__desc--without-actions": !_vm.$slots["secondary-actions"]
+    } }, [_vm.canStar || _vm.$slots["tertiary-actions"] ? _c("div", { staticClass: "app-sidebar-header__tertiary-actions" }, [_vm._t("tertiary-actions", function() {
+      return [_vm.canStar ? _c("NcButton", { staticClass: "app-sidebar-header__star", attrs: { "aria-label": _vm.favoriteTranslated, "pressed": _vm.isStarred, "variant": "secondary" }, on: { "click": function($event) {
+        $event.preventDefault();
+        return _vm.toggleStarred.apply(null, arguments);
+      } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+        return [_vm.starLoading ? _c("NcLoadingIcon") : _vm.isStarred ? _c("Star", { attrs: { "size": 20 } }) : _c("StarOutline", { attrs: { "size": 20 } })];
+      }, proxy: true }], null, false, 2575459756) }) : _vm._e()];
+    })], 2) : _vm._e(), _c("div", { staticClass: "app-sidebar-header__name-container" }, [_c("div", { staticClass: "app-sidebar-header__mainname-container" }, [_c("NcAppSidebarHeader", { directives: [{ name: "show", rawName: "v-show", value: !_vm.nameEditable, expression: "!nameEditable" }], staticClass: "app-sidebar-header__mainname", attrs: { "name": _vm.name, "linkify": _vm.linkifyName, "title": _vm.title, "tabindex": _vm.nameEditable ? 0 : -1 }, nativeOn: { "click": function($event) {
+      if ($event.target !== $event.currentTarget) return null;
+      return _vm.editName.apply(null, arguments);
+    } } }), _vm.nameEditable ? [_c("form", { directives: [{ name: "click-outside", rawName: "v-click-outside", value: () => _vm.onSubmitName(), expression: "() => onSubmitName()" }], staticClass: "app-sidebar-header__mainname-form", on: { "submit": function($event) {
       $event.preventDefault();
-      return _vm.toggleStarred.apply(null, arguments);
-    } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-      return [_vm.starLoading ? _c("NcLoadingIcon") : _vm.isStarred ? _c("Star", { attrs: { "size": 20 } }) : _c("StarOutline", { attrs: { "size": 20 } })];
-    }, proxy: true }], null, false, 2575459756) }) : _vm._e()];
-  })], 2) : _vm._e(), _c("div", { staticClass: "app-sidebar-header__name-container" }, [_c("div", { staticClass: "app-sidebar-header__mainname-container" }, [_c("h2", { directives: [{ name: "show", rawName: "v-show", value: !_vm.nameEditable, expression: "!nameEditable" }, { name: "linkify", rawName: "v-linkify", value: { text: _vm.name, linkify: _vm.linkifyName }, expression: "{text: name, linkify: linkifyName}" }], ref: "header", staticClass: "app-sidebar-header__mainname", attrs: { "id": `app-sidebar-vue-${_vm.uid}__header`, "aria-label": _vm.title, "title": _vm.title, "tabindex": _vm.nameEditable ? 0 : -1 }, on: { "click": function($event) {
-    if ($event.target !== $event.currentTarget) return null;
-    return _vm.editName.apply(null, arguments);
-  } } }, [_vm._v(" " + _vm._s(_vm.name) + " ")]), _vm.nameEditable ? [_c("form", { directives: [{ name: "click-outside", rawName: "v-click-outside", value: () => _vm.onSubmitName(), expression: "() => onSubmitName()" }], staticClass: "app-sidebar-header__mainname-form", on: { "submit": function($event) {
-    $event.preventDefault();
-    return _vm.onSubmitName.apply(null, arguments);
-  } } }, [_c("input", { directives: [{ name: "focus", rawName: "v-focus" }], ref: "nameInput", staticClass: "app-sidebar-header__mainname-input", attrs: { "type": "text", "placeholder": _vm.namePlaceholder }, domProps: { "value": _vm.name }, on: { "keydown": function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) return null;
-    $event.stopPropagation();
-    return _vm.onDismissEditing.apply(null, arguments);
-  }, "input": _vm.onNameInput } }), _c("NcButton", { attrs: { "aria-label": _vm.changeNameTranslated, "type": "submit", "variant": "tertiary-no-background" }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_c("ArrowRight", { attrs: { "size": 20 } })];
-  }, proxy: true }], null, false, 1252225425) })], 1)] : _vm._e(), _vm.$slots["secondary-actions"] ? _c("NcActions", { staticClass: "app-sidebar-header__menu", attrs: { "force-menu": _vm.forceMenu } }, [_vm._t("secondary-actions")], 2) : _vm._e()], 2), _vm.subname.trim() !== "" || _vm.$slots["subname"] ? _c("p", { staticClass: "app-sidebar-header__subname", attrs: { "title": _vm.subtitle || void 0 } }, [_vm._t("subname", function() {
-    return [_vm._v(" " + _vm._s(_vm.subname) + " ")];
-  })], 2) : _vm._e()])]) : _vm._e()]), _c("NcButton", { ref: "closeButton", staticClass: "app-sidebar__close", attrs: { "aria-label": _vm.closeTranslated, "title": _vm.closeTranslated, "variant": "tertiary" }, on: { "click": function($event) {
+      return _vm.onSubmitName.apply(null, arguments);
+    } } }, [_c("input", { directives: [{ name: "focus", rawName: "v-focus" }], ref: "nameInput", staticClass: "app-sidebar-header__mainname-input", attrs: { "type": "text", "placeholder": _vm.namePlaceholder }, domProps: { "value": _vm.name }, on: { "keydown": function($event) {
+      if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) return null;
+      $event.stopPropagation();
+      return _vm.onDismissEditing.apply(null, arguments);
+    }, "input": _vm.onNameInput } }), _c("NcButton", { attrs: { "aria-label": _vm.changeNameTranslated, "type": "submit", "variant": "tertiary-no-background" }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+      return [_c("ArrowRight", { attrs: { "size": 20 } })];
+    }, proxy: true }], null, false, 1252225425) })], 1)] : _vm._e(), _vm.$slots["secondary-actions"] ? _c("NcActions", { staticClass: "app-sidebar-header__menu", attrs: { "force-menu": _vm.forceMenu } }, [_vm._t("secondary-actions")], 2) : _vm._e()], 2), _vm.subname.trim() !== "" || _vm.$slots["subname"] ? _c("p", { staticClass: "app-sidebar-header__subname", attrs: { "title": _vm.subtitle || void 0 } }, [_vm._t("subname", function() {
+      return [_vm._v(" " + _vm._s(_vm.subname) + " ")];
+    })], 2) : _vm._e()])])])];
+  }) : _c("NcAppSidebarHeader", { staticClass: "app-sidebar-header__mainname--hidden", attrs: { "name": _vm.name, "tabindex": "-1" } }), _c("NcButton", { ref: "closeButton", staticClass: "app-sidebar__close", attrs: { "aria-label": _vm.closeTranslated, "title": _vm.closeTranslated, "variant": "tertiary" }, on: { "click": function($event) {
     $event.preventDefault();
     return _vm.closeSidebar.apply(null, arguments);
   } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
     return [_c("Close", { attrs: { "size": 20 } })];
-  }, proxy: true }]) }), _vm.$slots["description"] && !_vm.empty ? _c("div", { staticClass: "app-sidebar-header__description" }, [_vm._t("description")], 2) : _vm._e()], 1), _c("NcAppSidebarTabs", { directives: [{ name: "show", rawName: "v-show", value: !_vm.loading, expression: "!loading" }], ref: "tabs", attrs: { "active": _vm.active, "force-tabs": _vm.forceTabs }, on: { "update:active": _vm.onUpdateActive } }, [_vm._t("default")], 2), _vm.loading ? _c("NcEmptyContent", { scopedSlots: _vm._u([{ key: "icon", fn: function() {
+  }, proxy: true }]) }), _vm.$slots["description"] && !_vm.empty ? _c("div", { staticClass: "app-sidebar-header__description" }, [_vm._t("description")], 2) : _vm._e()], 2), _c("NcAppSidebarTabs", { directives: [{ name: "show", rawName: "v-show", value: !_vm.loading, expression: "!loading" }], ref: "tabs", attrs: { "active": _vm.active, "force-tabs": _vm.forceTabs }, on: { "update:active": _vm.onUpdateActive } }, [_vm._t("default")], 2), _vm.loading ? _c("NcEmptyContent", { scopedSlots: _vm._u([{ key: "icon", fn: function() {
     return [_c("NcLoadingIcon", { attrs: { "size": 64 } })];
   }, proxy: true }], null, false, 826850984) }) : _vm._e()], 1)]);
 };
@@ -793,10 +807,10 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "478c9d0b"
+  "d114a7f1"
 );
 const NcAppSidebar = __component__.exports;
 export {
   NcAppSidebar as N
 };
-//# sourceMappingURL=NcAppSidebar-DOJNq1iG.mjs.map
+//# sourceMappingURL=NcAppSidebar-C_C76E_8.mjs.map