@nextcloud/vue 9.0.0-alpha.0 → 9.0.0-alpha.2

package/dist/chunks/NcAppSidebar-yjd-HiUO.mjs

@@ -1,725 +0,0 @@
-import "../assets/NcAppSidebar-QQPSZPo9.css";
-import O from "../Components/NcVNodes.mjs";
-import { N as U } from "./NcCheckboxRadioSwitch-RgFq8ZUL.mjs";
-import { resolveComponent as u, openBlock as r, createElementBlock as n, withKeys as b, withModifiers as d, Fragment as D, renderList as R, createBlock as p, normalizeClass as g, withCtx as f, createVNode as v, createElementVNode as m, toDisplayString as T, createCommentVNode as c, renderSlot as _, mergeProps as E, resolveDirective as C, Transition as q, normalizeStyle as K, withDirectives as k, createTextVNode as Z, vShow as w } from "vue";
-import { _ as N } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
-import { N as j } from "./NcActions-6Yv0De7D.mjs";
-import { N as G } from "./NcLoadingIcon-DnhhU7Z8.mjs";
-import { N as H, i as J } from "./NcButton-nCkJxwsi.mjs";
-import { N as Q } from "./NcEmptyContent-Dvt4jhjb.mjs";
-import { directive as W } from "../Directives/Focus.mjs";
-import { directive as X } from "../Directives/Linkify.mjs";
-import "../Directives/Tooltip.mjs";
-import { useIsSmallMobile as Y } from "../Composables/useIsMobile.mjs";
-import { g as $ } from "./focusTrap-Py2bQ9-r.mjs";
-import { r as ee, I as te, a as A } from "./_l10n-JmazR_zZ.mjs";
-import { A as ae } from "./ArrowRight-Fk_qtqpW.mjs";
-import { C as ie } from "./Close-4lZze_oD.mjs";
-import { vOnClickOutside as se } from "@vueuse/components";
-import { createFocusTrap as re } from "focus-trap";
-import { VTooltip as ne } from "floating-vue";
-const oe = {
-  name: "NcAppSidebarTabs",
-  components: {
-    NcCheckboxRadioSwitch: U,
-    NcVNodes: O
-  },
-  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: ""
-    }
-  },
-  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 v-model:active
-       */
-      activeTab: ""
-    };
-  },
-  computed: {
-    /**
-     * Has multiple tabs. If only one tab - its content is shown without navigation
-     *
-     * @return {boolean}
-     */
-    hasMultipleTabs() {
-      return this.tabs.length > 1;
-    },
-    currentTabIndex() {
-      return this.tabs.findIndex((a) => a.id === this.activeTab);
-    }
-  },
-  watch: {
-    active(a) {
-      a !== this.activeTab && this.updateActive();
-    }
-  },
-  methods: {
-    /**
-     * Set the current active tab
-     *
-     * @param {string} id the id of the tab
-     */
-    setActive(a) {
-      this.activeTab = a, this.$emit("update:active", this.activeTab);
-    },
-    /**
-     * Focus the previous tab
-     * and emit to the parent component
-     */
-    focusPreviousTab() {
-      this.currentTabIndex > 0 && this.setActive(this.tabs[this.currentTabIndex - 1].id), this.focusActiveTab();
-    },
-    /**
-     * Focus the next tab
-     * and emit to the parent component
-     */
-    focusNextTab() {
-      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-${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((a) => a.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(a) {
-      this.tabs.push(a), this.tabs.sort((i, e) => i.order === e.order ? OC.Util.naturalSortCompare(i.name, e.name) : i.order - e.order), this.updateActive();
-    },
-    /**
-     * Unregister child tab from the tabs
-     *
-     * @param {string} id tab's id
-     */
-    unregisterTab(a) {
-      const i = this.tabs.findIndex((e) => e.id === a);
-      i !== -1 && this.tabs.splice(i, 1), this.activeTab === a && this.updateActive();
-    }
-  }
-}, de = { class: "app-sidebar-tabs" }, le = { class: "app-sidebar-tabs__tab-caption" };
-function ce(a, i, e, y, o, t) {
-  const h = u("NcVNodes"), L = u("NcCheckboxRadioSwitch");
-  return r(), n("div", de, [
-    t.hasMultipleTabs ? (r(), n("div", {
-      key: 0,
-      role: "tablist",
-      class: "app-sidebar-tabs__nav",
-      onKeydown: [
-        i[0] || (i[0] = b(d((...s) => t.focusPreviousTab && t.focusPreviousTab(...s), ["exact", "prevent", "stop"]), ["left"])),
-        i[1] || (i[1] = b(d((...s) => t.focusNextTab && t.focusNextTab(...s), ["exact", "prevent", "stop"]), ["right"])),
-        i[2] || (i[2] = b(d((...s) => t.focusActiveTabContent && t.focusActiveTabContent(...s), ["exact", "prevent", "stop"]), ["tab"])),
-        i[3] || (i[3] = b(d((...s) => t.focusFirstTab && t.focusFirstTab(...s), ["exact", "prevent", "stop"]), ["home"])),
-        i[4] || (i[4] = b(d((...s) => t.focusLastTab && t.focusLastTab(...s), ["exact", "prevent", "stop"]), ["end"])),
-        i[5] || (i[5] = b(d((...s) => t.focusFirstTab && t.focusFirstTab(...s), ["exact", "prevent", "stop"]), ["page-up"])),
-        i[6] || (i[6] = b(d((...s) => t.focusLastTab && t.focusLastTab(...s), ["exact", "prevent", "stop"]), ["page-down"]))
-      ]
-    }, [
-      (r(!0), n(D, null, R(o.tabs, (s) => (r(), p(L, {
-        key: s.id,
-        "aria-controls": `tab-${s.id}`,
-        "aria-selected": String(o.activeTab === s.id),
-        "button-variant": !0,
-        "model-value": o.activeTab === s.id,
-        "wrapper-id": `tab-button-${s.id}`,
-        tabindex: o.activeTab === s.id ? 0 : -1,
-        "button-variant-grouped": "horizontal",
-        class: g(["app-sidebar-tabs__tab", { active: s.id === o.activeTab }]),
-        role: "tab",
-        type: "button",
-        "onUpdate:modelValue": (S) => t.setActive(s.id)
-      }, {
-        icon: f(() => [
-          v(h, {
-            vnodes: s.renderIcon()
-          }, {
-            default: f(() => [
-              m("span", {
-                class: g(["app-sidebar-tabs__tab-icon", s.icon])
-              }, null, 2)
-            ]),
-            _: 2
-          }, 1032, ["vnodes"])
-        ]),
-        default: f(() => [
-          m("span", le, T(s.name), 1)
-        ]),
-        _: 2
-      }, 1032, ["aria-controls", "aria-selected", "model-value", "wrapper-id", "tabindex", "class", "onUpdate:modelValue"]))), 128))
-    ], 32)) : c("", !0),
-    m("div", {
-      class: g([{ "app-sidebar-tabs__content--multiple": t.hasMultipleTabs }, "app-sidebar-tabs__content"])
-    }, [
-      _(a.$slots, "default", {}, void 0, !0)
-    ], 2)
-  ]);
-}
-const ue = /* @__PURE__ */ N(oe, [["render", ce], ["__scopeId", "data-v-be5cc033"]]);
-ee(te);
-const me = {
-  name: "StarIcon",
-  emits: ["click"],
-  props: {
-    title: {
-      type: String
-    },
-    fillColor: {
-      type: String,
-      default: "currentColor"
-    },
-    size: {
-      type: Number,
-      default: 24
-    }
-  }
-}, be = ["aria-hidden", "aria-label"], fe = ["fill", "width", "height"], he = { 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" }, pe = { key: 0 };
-function ve(a, i, e, y, o, t) {
-  return r(), n("span", E(a.$attrs, {
-    "aria-hidden": !e.title,
-    "aria-label": e.title,
-    class: "material-design-icon star-icon",
-    role: "img",
-    onClick: i[0] || (i[0] = (h) => a.$emit("click", h))
-  }), [
-    (r(), n("svg", {
-      fill: e.fillColor,
-      class: "material-design-icon__svg",
-      width: e.size,
-      height: e.size,
-      viewBox: "0 0 24 24"
-    }, [
-      m("path", he, [
-        e.title ? (r(), n("title", pe, T(e.title), 1)) : c("", !0)
-      ])
-    ], 8, fe))
-  ], 16, be);
-}
-const _e = /* @__PURE__ */ N(me, [["render", ve]]), ge = {
-  name: "StarOutlineIcon",
-  emits: ["click"],
-  props: {
-    title: {
-      type: String
-    },
-    fillColor: {
-      type: String,
-      default: "currentColor"
-    },
-    size: {
-      type: Number,
-      default: 24
-    }
-  }
-}, Te = ["aria-hidden", "aria-label"], ye = ["fill", "width", "height"], Se = { 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" }, ke = { key: 0 };
-function Ne(a, i, e, y, o, t) {
-  return r(), n("span", E(a.$attrs, {
-    "aria-hidden": !e.title,
-    "aria-label": e.title,
-    class: "material-design-icon star-outline-icon",
-    role: "img",
-    onClick: i[0] || (i[0] = (h) => a.$emit("click", h))
-  }), [
-    (r(), n("svg", {
-      fill: e.fillColor,
-      class: "material-design-icon__svg",
-      width: e.size,
-      height: e.size,
-      viewBox: "0 0 24 24"
-    }, [
-      m("path", Se, [
-        e.title ? (r(), n("title", ke, T(e.title), 1)) : c("", !0)
-      ])
-    ], 8, ye))
-  ], 16, Te);
-}
-const Le = /* @__PURE__ */ N(ge, [["render", Ne]]), Ce = {
-  name: "NcAppSidebar",
-  components: {
-    NcActions: j,
-    NcAppSidebarTabs: ue,
-    ArrowRight: ae,
-    NcButton: H,
-    NcLoadingIcon: G,
-    NcEmptyContent: Q,
-    Close: ie,
-    Star: _e,
-    StarOutline: Le
-  },
-  directives: {
-    focus: W,
-    linkify: X,
-    ClickOutside: se,
-    Tooltip: ne
-  },
-  props: {
-    active: {
-      type: String,
-      default: ""
-    },
-    name: {
-      type: String,
-      default: "",
-      required: !0
-    },
-    /**
-     * Allow to edit the sidebar name.
-     */
-    nameEditable: {
-      type: Boolean,
-      default: !1
-    },
-    namePlaceholder: {
-      type: String,
-      default: ""
-    },
-    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,
-      default: null
-    },
-    /**
-     * Show loading spinner instead of the star icon
-     */
-    starLoading: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Show loading spinner instead of tabs
-     */
-    loading: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Display the sidebar in compact mode
-     */
-    compact: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * 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: !1
-    },
-    /**
-     * Force the actions to display in a three dot menu
-     */
-    forceMenu: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Linkify the name
-     */
-    linkifyName: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Title to display for the name.
-     * Can be set to the same text in case it's too long.
-     */
-    title: {
-      type: String,
-      default: ""
-    }
-  },
-  emits: [
-    "close",
-    "closing",
-    "closed",
-    "opening",
-    "opened",
-    // 'figure-click', not emitted on purpose to make "hasFigureClickListener" work
-    "update:starred",
-    "update:nameEditable",
-    "update:name",
-    "update:active",
-    "submit-name",
-    "dismiss-editing"
-  ],
-  setup() {
-    return {
-      isMobile: Y()
-    };
-  },
-  data() {
-    return {
-      changeNameTranslated: A("Change name"),
-      closeTranslated: A("Close sidebar"),
-      favoriteTranslated: A("Favorite"),
-      isStarred: this.starred,
-      focusTrap: null
-    };
-  },
-  computed: {
-    canStar() {
-      return this.isStarred !== null;
-    },
-    hasFigureClickListener() {
-      return !!this.$attrs.onFigureClick;
-    }
-  },
-  watch: {
-    starred() {
-      this.isStarred = this.starred;
-    },
-    isMobile() {
-      this.toggleFocusTrap();
-    }
-  },
-  mounted() {
-    this.toggleFocusTrap();
-  },
-  beforeUnmount() {
-    this.$emit("closed"), this.focusTrap?.deactivate();
-  },
-  methods: {
-    isSlotPopulated: J,
-    initFocusTrap() {
-      this.focusTrap || (this.focusTrap = re([
-        // The sidebar itself
-        this.$refs.sidebar,
-        // Nextcloud Server header navigarion
-        document.querySelector("#header"),
-        // The app navigation toggle. Navigation can be opened above the sidebar
-        // Take the parent element, because the focus-trap requires a container with elements, not the element itself
-        document.querySelector('[aria-controls="app-navigation-vue"]')?.parentElement
-      ], {
-        allowOutsideClick: !0,
-        fallbackFocus: this.$refs.closeButton,
-        trapStack: $(),
-        escapeDeactivates: !1
-      }));
-    },
-    /**
-     * Activate focus trap if it is currently needed, otherwise deactivate
-     */
-    toggleFocusTrap() {
-      this.isMobile ? (this.initFocusTrap(), this.focusTrap.activate()) : this.focusTrap?.deactivate();
-    },
-    onBeforeEnter(a) {
-      this.$emit("opening", a);
-    },
-    onAfterEnter(a) {
-      this.$emit("opened", a);
-    },
-    onBeforeLeave(a) {
-      this.$emit("closing", a);
-    },
-    onAfterLeave(a) {
-      this.$emit("closed", a);
-    },
-    /**
-     * Used to tell parent component the user asked to close the sidebar
-     *
-     * @param {Event} e close icon click event
-     */
-    closeSidebar(a) {
-      this.$emit("close", a);
-    },
-    /**
-     * Emit figure click event to parent component
-     *
-     * @param {Event} e click event
-     */
-    onFigureClick(a) {
-      this.$emit("figure-click", a);
-    },
-    /**
-     * Toggle the favourite state
-     * and emit to the parent component
-     */
-    toggleStarred() {
-      this.isStarred = !this.isStarred, this.$emit("update:starred", this.isStarred);
-    },
-    async editName() {
-      this.$emit("update:nameEditable", !0), this.nameEditable && (await this.$nextTick(), this.$refs.nameInput.focus());
-    },
-    /**
-     * Emit name change event to parent component
-     *
-     * @param {Event} event input event
-     */
-    onNameInput(a) {
-      this.$emit("update:name", a.target.value);
-    },
-    /**
-     * Emit when the name form edit confirm button is pressed in order
-     * to change the name.
-     *
-     * @param {Event} event submit event
-     */
-    onSubmitName(a) {
-      this.$emit("update:nameEditable", !1), this.$emit("submit-name", a);
-    },
-    onDismissEditing() {
-      this.$emit("update:nameEditable", !1), this.$emit("dismiss-editing");
-    },
-    onUpdateActive(a) {
-      this.$emit("update:active", a);
-    }
-  }
-}, Ae = { class: "app-sidebar-header__info" }, we = {
-  key: 0,
-  class: "app-sidebar-header__tertiary-actions"
-}, Ee = { class: "app-sidebar-header__name-container" }, Be = { class: "app-sidebar-header__mainname-container" }, Ie = ["aria-label", "title", "tabindex"], xe = ["placeholder", "value"], Fe = ["aria-label", "title"], Me = {
-  key: 0,
-  class: "app-sidebar-header__description"
-};
-function ze(a, i, e, y, o, t) {
-  const h = u("NcLoadingIcon"), L = u("Star"), s = u("StarOutline"), S = u("NcButton"), B = u("ArrowRight"), I = u("NcActions"), x = u("Close"), F = u("NcAppSidebarTabs"), M = u("NcEmptyContent"), z = C("linkify"), P = C("focus"), V = C("click-outside");
-  return r(), p(q, {
-    appear: "",
-    name: "slide-right",
-    onBeforeEnter: t.onBeforeEnter,
-    onAfterEnter: t.onAfterEnter,
-    onBeforeLeave: t.onBeforeLeave,
-    onAfterLeave: t.onAfterLeave
-  }, {
-    default: f(() => [
-      m("aside", {
-        id: "app-sidebar-vue",
-        ref: "sidebar",
-        class: "app-sidebar",
-        onKeydown: i[6] || (i[6] = b(d((l) => y.isMobile && t.closeSidebar(), ["stop"]), ["esc"]))
-      }, [
-        m("header", {
-          class: g([{
-            "app-sidebar-header--with-figure": t.isSlotPopulated(a.$slots.header?.()) || e.background,
-            "app-sidebar-header--compact": e.compact
-          }, "app-sidebar-header"])
-        }, [
-          m("div", Ae, [
-            (t.isSlotPopulated(a.$slots.header?.()) || e.background) && !e.empty ? (r(), n("div", {
-              key: 0,
-              class: g([{
-                "app-sidebar-header__figure--with-action": t.hasFigureClickListener
-              }, "app-sidebar-header__figure"]),
-              style: K({
-                backgroundImage: `url(${e.background})`
-              }),
-              tabindex: "0",
-              onClick: i[0] || (i[0] = (...l) => t.onFigureClick && t.onFigureClick(...l)),
-              onKeydown: i[1] || (i[1] = b((...l) => t.onFigureClick && t.onFigureClick(...l), ["enter"]))
-            }, [
-              _(a.$slots, "header", { class: "app-sidebar-header__background" }, void 0, !0)
-            ], 38)) : c("", !0),
-            e.empty ? c("", !0) : (r(), n("div", {
-              key: 1,
-              class: g([{
-                "app-sidebar-header__desc--with-tertiary-action": t.canStar || t.isSlotPopulated(a.$slots["tertiary-actions"]?.()),
-                "app-sidebar-header__desc--editable": e.nameEditable && !e.subname,
-                "app-sidebar-header__desc--with-subname--editable": e.nameEditable && e.subname,
-                "app-sidebar-header__desc--without-actions": !t.isSlotPopulated(a.$slots["secondary-actions"]?.())
-              }, "app-sidebar-header__desc"])
-            }, [
-              t.canStar || t.isSlotPopulated(a.$slots["tertiary-actions"]?.()) ? (r(), n("div", we, [
-                _(a.$slots, "tertiary-actions", {}, () => [
-                  t.canStar ? (r(), p(S, {
-                    key: 0,
-                    "aria-label": o.favoriteTranslated,
-                    pressed: o.isStarred,
-                    class: "app-sidebar-header__star",
-                    type: "secondary",
-                    onClick: d(t.toggleStarred, ["prevent"])
-                  }, {
-                    icon: f(() => [
-                      e.starLoading ? (r(), p(h, { key: 0 })) : o.isStarred ? (r(), p(L, {
-                        key: 1,
-                        size: 20
-                      })) : (r(), p(s, {
-                        key: 2,
-                        size: 20
-                      }))
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label", "pressed", "onClick"])) : c("", !0)
-                ], !0)
-              ])) : c("", !0),
-              m("div", Ee, [
-                m("div", Be, [
-                  k((r(), n("h2", {
-                    "aria-label": e.title,
-                    title: e.title,
-                    class: "app-sidebar-header__mainname",
-                    tabindex: e.nameEditable ? 0 : void 0,
-                    onClick: i[2] || (i[2] = d((...l) => t.editName && t.editName(...l), ["self"]))
-                  }, [
-                    Z(T(e.name), 1)
-                  ], 8, Ie)), [
-                    [w, !e.nameEditable],
-                    [z, { text: e.name, linkify: e.linkifyName }]
-                  ]),
-                  e.nameEditable ? k((r(), n("form", {
-                    key: 0,
-                    class: "app-sidebar-header__mainname-form",
-                    onSubmit: i[5] || (i[5] = d((...l) => t.onSubmitName && t.onSubmitName(...l), ["prevent"]))
-                  }, [
-                    k(m("input", {
-                      ref: "nameInput",
-                      class: "app-sidebar-header__mainname-input",
-                      type: "text",
-                      placeholder: e.namePlaceholder,
-                      value: e.name,
-                      onKeydown: i[3] || (i[3] = b(d((...l) => t.onDismissEditing && t.onDismissEditing(...l), ["stop"]), ["esc"])),
-                      onInput: i[4] || (i[4] = (...l) => t.onNameInput && t.onNameInput(...l))
-                    }, null, 40, xe), [
-                      [P]
-                    ]),
-                    v(S, {
-                      type: "tertiary-no-background",
-                      "aria-label": o.changeNameTranslated,
-                      "native-type": "submit"
-                    }, {
-                      icon: f(() => [
-                        v(B, { size: 20 })
-                      ]),
-                      _: 1
-                    }, 8, ["aria-label"])
-                  ], 32)), [
-                    [V, () => t.onSubmitName()]
-                  ]) : c("", !0),
-                  t.isSlotPopulated(a.$slots["secondary-actions"]?.()) ? (r(), p(I, {
-                    key: 1,
-                    class: "app-sidebar-header__menu",
-                    "force-menu": e.forceMenu
-                  }, {
-                    default: f(() => [
-                      _(a.$slots, "secondary-actions", {}, void 0, !0)
-                    ]),
-                    _: 3
-                  }, 8, ["force-menu"])) : c("", !0)
-                ]),
-                e.subname.trim() !== "" ? (r(), n("p", {
-                  key: 0,
-                  "aria-label": e.subtitle,
-                  title: e.subtitle,
-                  class: "app-sidebar-header__subname"
-                }, T(e.subname), 9, Fe)) : c("", !0)
-              ])
-            ], 2))
-          ]),
-          v(S, {
-            ref: "closeButton",
-            title: o.closeTranslated,
-            "aria-label": o.closeTranslated,
-            type: "tertiary",
-            class: "app-sidebar__close",
-            onClick: d(t.closeSidebar, ["prevent"])
-          }, {
-            icon: f(() => [
-              v(x, { size: 20 })
-            ]),
-            _: 1
-          }, 8, ["title", "aria-label", "onClick"]),
-          t.isSlotPopulated(a.$slots.description?.()) && !e.empty ? (r(), n("div", Me, [
-            _(a.$slots, "description", {}, void 0, !0)
-          ])) : c("", !0)
-        ], 2),
-        k(v(F, {
-          ref: "tabs",
-          active: e.active,
-          "onUpdate:active": t.onUpdateActive
-        }, {
-          default: f(() => [
-            _(a.$slots, "default", {}, void 0, !0)
-          ]),
-          _: 3
-        }, 8, ["active", "onUpdate:active"]), [
-          [w, !e.loading]
-        ]),
-        e.loading ? (r(), p(M, { key: 0 }, {
-          icon: f(() => [
-            v(h, { size: 64 })
-          ]),
-          _: 1
-        })) : c("", !0)
-      ], 544)
-    ]),
-    _: 3
-  }, 8, ["onBeforeEnter", "onAfterEnter", "onBeforeLeave", "onAfterLeave"]);
-}
-const at = /* @__PURE__ */ N(Ce, [["render", ze], ["__scopeId", "data-v-b1892d2b"]]);
-export {
-  at as N
-};