@nextcloud/vue 8.30.0 → 8.32.0

package/dist/chunks/NcAppSidebar-CVcOP4bk.mjs

@@ -0,0 +1,831 @@
+import '../assets/NcAppSidebar-Bd2cj1W-.css';
+import { Portal } from "@linusborg/vue-simple-portal";
+import { vOnClickOutside } from "@vueuse/components";
+import { createFocusTrap } from "focus-trap";
+import Vue, { ref, provide } from "vue";
+import { A as ArrowRight } from "./ArrowRight-CY2b9hgN.mjs";
+import { C as Close } from "./Close-BtLPUSdO.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+import { N as NcCheckboxRadioSwitch } from "./NcCheckboxRadioSwitch-ezquUuPz.mjs";
+import NcVNodes from "../Components/NcVNodes.mjs";
+import { useIsSmallMobile } from "../Composables/useIsMobile.mjs";
+import directive from "../Directives/Focus.mjs";
+import { r as register, N as t14, a as t } from "./_l10n-DSLCwJSN.mjs";
+import { g as getTrapStack } from "./focusTrap-BibOtksr.mjs";
+import { G as GenRandomId } from "./GenRandomId-F5ebeBB_.mjs";
+import { l as logger } from "./logger-D3RVzcfQ.mjs";
+import { N as NcActions } from "./NcActions-A918mfXE.mjs";
+import { N as NcAppSidebarHeader } from "./NcAppSidebarHeader-CBE4tNYb.mjs";
+import { N as NcButton } from "./NcButton-D3CaJu1f.mjs";
+import NcEmptyContent from "../Components/NcEmptyContent.mjs";
+import NcLoadingIcon from "../Components/NcLoadingIcon.mjs";
+const _sfc_main$4 = {
+  name: "DockRightIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var _sfc_render$4 = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", _vm._b({ staticClass: "material-design-icon dock-right-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M20 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" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
+};
+var _sfc_staticRenderFns$4 = [];
+var __component__$4 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$4,
+  _sfc_render$4,
+  _sfc_staticRenderFns$4,
+  false,
+  null,
+  null
+);
+const IconDockRight = __component__$4.exports;
+const _sfc_main$3 = {
+  name: "StarIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var _sfc_render$3 = function render2() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", _vm._b({ staticClass: "material-design-icon star-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M12,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" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
+};
+var _sfc_staticRenderFns$3 = [];
+var __component__$3 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$3,
+  _sfc_render$3,
+  _sfc_staticRenderFns$3,
+  false,
+  null,
+  null
+);
+const Star = __component__$3.exports;
+const _sfc_main$2 = {
+  name: "StarOutlineIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var _sfc_render$2 = function render3() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", _vm._b({ staticClass: "material-design-icon star-outline-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M12,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" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
+};
+var _sfc_staticRenderFns$2 = [];
+var __component__$2 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$2,
+  _sfc_render$2,
+  _sfc_staticRenderFns$2,
+  false,
+  null,
+  null
+);
+const StarOutline = __component__$2.exports;
+const _sfc_main$1 = {
+  name: "NcAppSidebarTabs",
+  components: {
+    NcCheckboxRadioSwitch,
+    NcVNodes
+  },
+  provide() {
+    return {
+      registerTab: this.registerTab,
+      unregisterTab: this.unregisterTab,
+      // Getter as an alternative to Vue 2.7 computed(() => this.activeTab)
+      getActiveTab: () => this.activeTab,
+      // Used to check whether the tab header is shown so the tabs can reference the tab header for `aria-labelledby` or not
+      isTablistShown: () => this.hasMultipleTabs
+    };
+  },
+  props: {
+    /**
+     * Id of the tab to activate
+     */
+    active: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Force the tab navigation to display even if there is only one tab
+     */
+    forceTabs: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:active"],
+  data() {
+    return {
+      /**
+       * Tab descriptions from the passed NcSidebarTab components' props to build the tab navbar from.
+       */
+      tabs: [],
+      /**
+       * Local active (open) tab's ID. It allows to use component without active.sync
+       */
+      activeTab: ""
+    };
+  },
+  computed: {
+    /**
+     * Has multiple tabs. If only one tab - its content is shown without navigation
+     *
+     * @return {boolean}
+     */
+    hasMultipleTabs() {
+      return this.tabs.length > 1;
+    },
+    showForSingleTab() {
+      return this.forceTabs && this.tabs.length === 1;
+    },
+    currentTabIndex() {
+      return this.tabs.findIndex((tab) => tab.id === this.activeTab);
+    }
+  },
+  watch: {
+    active(active) {
+      if (active !== this.activeTab) {
+        this.updateActive();
+      }
+    }
+  },
+  methods: {
+    /**
+     * Set the current active tab
+     *
+     * @param {string} id the id of the tab
+     */
+    setActive(id) {
+      this.activeTab = id;
+      this.$emit("update:active", this.activeTab);
+    },
+    /**
+     * Focus the previous tab
+     * and emit to the parent component
+     */
+    focusPreviousTab() {
+      if (this.currentTabIndex > 0) {
+        this.setActive(this.tabs[this.currentTabIndex - 1].id);
+      }
+      this.focusActiveTab();
+    },
+    /**
+     * Focus the next tab
+     * and emit to the parent component
+     */
+    focusNextTab() {
+      if (this.currentTabIndex < this.tabs.length - 1) {
+        this.setActive(this.tabs[this.currentTabIndex + 1].id);
+      }
+      this.focusActiveTab();
+    },
+    /**
+     * Focus the first tab
+     * and emit to the parent component
+     */
+    focusFirstTab() {
+      this.setActive(this.tabs[0].id);
+      this.focusActiveTab();
+    },
+    /**
+     * Focus the last tab
+     * and emit to the parent component
+     */
+    focusLastTab() {
+      this.setActive(this.tabs[this.tabs.length - 1].id);
+      this.focusActiveTab();
+    },
+    /**
+     * Focus the current active tab
+     */
+    focusActiveTab() {
+      this.$el.querySelector("#tab-button-".concat(this.activeTab)).focus();
+    },
+    /**
+     * Focus the content on tab
+     * see aria accessibility guidelines
+     */
+    focusActiveTabContent() {
+      this.$el.querySelector("#tab-" + this.activeTab).focus();
+    },
+    /**
+     * Update the current active tab
+     */
+    updateActive() {
+      this.activeTab = this.active && this.tabs.some((tab) => tab.id === this.active) ? this.active : this.tabs.length > 0 ? this.tabs[0].id : "";
+    },
+    /**
+     * Register child tab in the tabs
+     *
+     * @param {object} tab child tab passed to slot
+     */
+    registerTab(tab) {
+      this.tabs.push(tab);
+      this.tabs.sort((a, b) => {
+        if (a.order === b.order) {
+          return OC.Util.naturalSortCompare(a.name, b.name);
+        }
+        return a.order - b.order;
+      });
+      this.updateActive();
+    },
+    /**
+     * Unregister child tab from the tabs
+     *
+     * @param {string} id tab's id
+     */
+    unregisterTab(id) {
+      const tabIndex = this.tabs.findIndex((tab) => tab.id === id);
+      if (tabIndex !== -1) {
+        this.tabs.splice(tabIndex, 1);
+      }
+      if (this.activeTab === id) {
+        this.updateActive();
+      }
+    }
+  }
+};
+var _sfc_render$1 = function render4() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "app-sidebar-tabs" }, [_vm.hasMultipleTabs || _vm.showForSingleTab ? _c("div", { staticClass: "app-sidebar-tabs__nav", attrs: { "role": "tablist" }, on: { "keydown": [function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "left", 37, $event.key, ["Left", "ArrowLeft"])) return null;
+    if ("button" in $event && $event.button !== 0) return null;
+    if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey) return null;
+    $event.preventDefault();
+    $event.stopPropagation();
+    return _vm.focusPreviousTab.apply(null, arguments);
+  }, function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "right", 39, $event.key, ["Right", "ArrowRight"])) return null;
+    if ("button" in $event && $event.button !== 2) return null;
+    if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey) return null;
+    $event.preventDefault();
+    $event.stopPropagation();
+    return _vm.focusNextTab.apply(null, arguments);
+  }, function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "tab", 9, $event.key, "Tab")) return null;
+    if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey) return null;
+    $event.preventDefault();
+    $event.stopPropagation();
+    return _vm.focusActiveTabContent.apply(null, arguments);
+  }, function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "home", void 0, $event.key, void 0)) return null;
+    if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey) return null;
+    $event.preventDefault();
+    $event.stopPropagation();
+    return _vm.focusFirstTab.apply(null, arguments);
+  }, function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "end", void 0, $event.key, void 0)) return null;
+    if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey) return null;
+    $event.preventDefault();
+    $event.stopPropagation();
+    return _vm.focusLastTab.apply(null, arguments);
+  }, function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "page-up", void 0, $event.key, void 0)) return null;
+    if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey) return null;
+    $event.preventDefault();
+    $event.stopPropagation();
+    return _vm.focusFirstTab.apply(null, arguments);
+  }, function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "page-down", void 0, $event.key, void 0)) return null;
+    if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey) return null;
+    $event.preventDefault();
+    $event.stopPropagation();
+    return _vm.focusLastTab.apply(null, arguments);
+  }] } }, _vm._l(_vm.tabs, function(tab) {
+    return _c("NcCheckboxRadioSwitch", { key: tab.id, staticClass: "app-sidebar-tabs__tab", class: { active: tab.id === _vm.activeTab }, attrs: { "aria-controls": "tab-".concat(tab.id), "aria-selected": String(_vm.activeTab === tab.id), "button-variant": true, "checked": _vm.activeTab === tab.id, "wrapper-id": "tab-button-".concat(tab.id), "tabindex": _vm.activeTab === tab.id ? 0 : -1, "button-variant-grouped": "horizontal", "role": "tab", "type": "button" }, on: { "update:checked": function($event) {
+      return _vm.setActive(tab.id);
+    } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+      return [_c("NcVNodes", { attrs: { "vnodes": tab.renderIcon() } }, [_c("span", { staticClass: "app-sidebar-tabs__tab-icon", class: tab.icon })])];
+    }, proxy: true }], null, true) }, [_c("span", { staticClass: "app-sidebar-tabs__tab-caption" }, [_vm._v(" " + _vm._s(tab.name) + " ")])]);
+  }), 1) : _vm._e(), _c("div", { staticClass: "app-sidebar-tabs__content", class: { "app-sidebar-tabs__content--multiple": _vm.hasMultipleTabs } }, [_vm._t("default")], 2)]);
+};
+var _sfc_staticRenderFns$1 = [];
+var __component__$1 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
+  null,
+  "4e1cbc50"
+);
+const NcAppSidebarTabs = __component__$1.exports;
+register(t14);
+const _sfc_main = {
+  name: "NcAppSidebar",
+  components: {
+    Teleport: Portal,
+    NcActions,
+    NcAppSidebarHeader,
+    NcAppSidebarTabs,
+    ArrowRight,
+    IconDockRight,
+    NcButton,
+    NcLoadingIcon,
+    NcEmptyContent,
+    Close,
+    Star,
+    StarOutline
+  },
+  directives: {
+    focus: directive,
+    ClickOutside: vOnClickOutside
+  },
+  inject: {
+    ncContentSelector: {
+      from: "NcContent:selector",
+      default: void 0
+    }
+  },
+  props: {
+    /**
+     * The active tab
+     */
+    active: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Note: in @nextcloud/vue v9 this prop is required
+     */
+    name: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Allow to edit the sidebar name.
+     */
+    nameEditable: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Placeholder in the edit field if the name is editable.
+     */
+    namePlaceholder: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Secondary name of the sidebar (subline)
+     */
+    subname: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Title to display for the subname.
+     */
+    subtitle: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Url to the top header background image
+     * Applied with css
+     */
+    background: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Enable the favourite icon if not null
+     * See fired events
+     */
+    starred: {
+      type: Boolean,
+      // eslint-disable-next-line vue/no-boolean-default
+      default: null
+    },
+    /**
+     * Show loading spinner instead of the star icon
+     */
+    starLoading: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Show loading spinner instead of tabs
+     */
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Display the sidebar in compact mode
+     */
+    compact: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Only display close button and default slot content.
+     * Don't display other header content and primary and secondary actions.
+     * Useful when showing the EmptyContent component as content.
+     */
+    empty: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Force the actions to display in a three dot menu
+     */
+    forceMenu: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Force the tab navigation to display even if there is only one tab
+     */
+    forceTabs: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Linkify the name
+     */
+    linkifyName: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Title to display for the name.
+     * Can be set to the same text in case it's too long.
+     */
+    title: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Allow to conditionally show the sidebar
+     * You can also use `v-if` on the sidebar, but using the open prop allow to keep
+     * the sidebar inside the DOM for performance if it is opened and closed multiple times.
+     *
+     * When using the `open` property to close the sidebar a built-in toggle button will be shown to reopen it,
+     * similar to the app navigation. You can remove this button with the `no-toggle` prop.
+     */
+    open: {
+      type: Boolean,
+      // eslint-disable-next-line vue/no-boolean-default
+      default: true
+    },
+    /**
+     * Custom classes to assign to the sidebar toggle button.
+     * If needed this can be used to assign styles to the button using `:deep()` selector.
+     */
+    toggleClasses: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Custom attrs to assign to the sidebar toggle button.
+     */
+    toggleAttrs: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Do not add the built-in toggle button with `open` prop.
+     */
+    noToggle: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [
+    "close",
+    "closing",
+    "closed",
+    "opening",
+    "opened",
+    "figure-click",
+    "update:active",
+    "update:name",
+    "update:nameEditable",
+    "update:open",
+    "update:starred",
+    "submit-name",
+    "dismiss-editing"
+  ],
+  setup() {
+    const headerRef = ref(null);
+    provide("NcAppSidebar:header:ref", headerRef);
+    return {
+      uid: GenRandomId(),
+      isMobile: useIsSmallMobile(),
+      headerRef
+    };
+  },
+  data() {
+    return {
+      changeNameTranslated: t("Change name"),
+      closeTranslated: t("Close sidebar"),
+      favoriteTranslated: t("Favorite"),
+      isStarred: this.starred,
+      focusTrap: null,
+      elementToReturnFocus: null
+    };
+  },
+  computed: {
+    canStar() {
+      return this.isStarred !== null;
+    },
+    hasFigure() {
+      return this.$slots.header || this.background;
+    },
+    hasFigureClickListener() {
+      return this.$listeners["figure-click"];
+    }
+  },
+  watch: {
+    starred() {
+      this.isStarred = this.starred;
+    },
+    isMobile() {
+      this.toggleFocusTrap();
+    },
+    open() {
+      this.checkToggleButtonContainerAvailability();
+    }
+  },
+  created() {
+    this.preserveElementToReturnFocus();
+    this.checkToggleButtonContainerAvailability();
+  },
+  beforeDestroy() {
+    var _a;
+    this.$emit("closed");
+    (_a = this.focusTrap) == null ? void 0 : _a.deactivate();
+  },
+  methods: {
+    t,
+    preserveElementToReturnFocus() {
+      if (document.activeElement && document.activeElement !== document.body) {
+        this.elementToReturnFocus = document.activeElement;
+        if (this.elementToReturnFocus.getAttribute("role") === "menuitem") {
+          const menu = this.elementToReturnFocus.closest('[role="menu"]');
+          if (menu) {
+            const menuTrigger = document.querySelector('[aria-controls="'.concat(menu.id, '"]'));
+            this.elementToReturnFocus = menuTrigger;
+          }
+        }
+      }
+    },
+    initFocusTrap() {
+      if (this.focusTrap) {
+        return;
+      }
+      this.focusTrap = createFocusTrap([
+        // The sidebar itself
+        this.$refs.sidebar,
+        // Nextcloud Server header navigarion
+        document.querySelector("#header")
+      ], {
+        allowOutsideClick: true,
+        fallbackFocus: this.$refs.closeButton.$el,
+        trapStack: getTrapStack(),
+        escapeDeactivates: false
+      });
+    },
+    /**
+     * Activate focus trap if it is currently needed, otherwise deactivate
+     */
+    toggleFocusTrap() {
+      var _a;
+      if (this.open && this.isMobile) {
+        this.initFocusTrap();
+        this.focusTrap.activate();
+      } else {
+        (_a = this.focusTrap) == null ? void 0 : _a.deactivate();
+      }
+    },
+    /**
+     * Close the sidebar on pressing the escape key on mobile
+     *
+     * @param {KeyboardEvent} event key down event
+     */
+    onKeydownEsc(event) {
+      if (this.isMobile) {
+        event.stopPropagation();
+        this.closeSidebar();
+      }
+    },
+    onBeforeEnter(element) {
+      this.$emit("opening", element);
+    },
+    onAfterEnter(element) {
+      if (this.elementToReturnFocus) {
+        this.focus();
+      }
+      this.toggleFocusTrap();
+      this.$emit("opened", element);
+    },
+    onBeforeLeave(element) {
+      this.$emit("closing", element);
+    },
+    onAfterLeave(element) {
+      var _a;
+      this.$emit("closed", element);
+      this.toggleFocusTrap();
+      (_a = this.elementToReturnFocus) == null ? void 0 : _a.focus({ focusVisible: true });
+      this.elementToReturnFocus = null;
+    },
+    /**
+     * Used to tell parent component the user asked to close the sidebar
+     *
+     * @param {Event} e close icon click event
+     */
+    closeSidebar(e) {
+      this.$emit("close", e);
+      this.$emit("update:open", false);
+    },
+    /**
+     * Emit figure click event to parent component
+     *
+     * @param {Event} e click event
+     */
+    onFigureClick(e) {
+      this.$emit("figure-click", e);
+    },
+    /**
+     * Toggle the favourite state
+     * and emit to the parent component
+     */
+    toggleStarred() {
+      this.isStarred = !this.isStarred;
+      this.$emit("update:starred", this.isStarred);
+    },
+    editName() {
+      this.$emit("update:nameEditable", true);
+      if (this.nameEditable) {
+        this.$nextTick(() => this.$refs.nameInput.focus());
+      }
+    },
+    /**
+     * Focus the sidebar
+     *
+     * @public
+     */
+    focus() {
+      if (!this.open && !this.noToggle) {
+        this.$refs.toggle.$el.focus();
+        return;
+      }
+      try {
+        this.headerRef.focus();
+      } catch (e) {
+        Vue.util.warn("NcAppSidebar should have focusable header for accessibility reasons. Use NcAppSidebarHeader component.");
+      }
+    },
+    /**
+     * Focus the active tab
+     *
+     * @public
+     */
+    focusActiveTabContent() {
+      this.preserveElementToReturnFocus();
+      this.$refs.tabs.focusActiveTabContent();
+    },
+    /**
+     * Check if the toggle button container is available
+     */
+    checkToggleButtonContainerAvailability() {
+      if (this.open === false && !this.noToggle && !this.ncContentSelector) {
+        logger.warn("[NcAppSidebar] It looks like you want to use NcAppSidebar with the built-in toggle button. This feature is only available when NcAppSidebar is used in NcContent.");
+      }
+    },
+    /**
+     * Emit name change event to parent component
+     *
+     * @param {Event} event input event
+     */
+    onNameInput(event) {
+      this.$emit("update:name", event.target.value);
+    },
+    /**
+     * Emit when the name form edit confirm button is pressed in order
+     * to change the name.
+     *
+     * @param {Event} event submit event
+     */
+    onSubmitName(event) {
+      this.$emit("update:nameEditable", false);
+      this.$emit("submit-name", event);
+    },
+    onDismissEditing() {
+      this.$emit("update:nameEditable", false);
+      this.$emit("dismiss-editing");
+    },
+    onUpdateActive(activeTab) {
+      this.$emit("update:active", activeTab);
+    }
+  }
+};
+var _sfc_render = function render5() {
+  var _vm = this, _c = _vm._self._c;
+  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-".concat(_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({ 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() {
+      return [_c("IconDockRight", { attrs: { "size": 20 } })];
+    })];
+  }, 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
+  } }, [!_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(".concat(_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.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()], 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)]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "1023e7a5"
+);
+const NcAppSidebar = __component__.exports;
+export {
+  NcAppSidebar as N
+};
+//# sourceMappingURL=NcAppSidebar-CVcOP4bk.mjs.map