@nextcloud/vue 9.0.1 → 9.2.0

package/dist/chunks/NcAppSettingsShortcutsSection-o6KPisIT.mjs

@@ -0,0 +1,38 @@
+import '../assets/NcAppSettingsShortcutsSection-CRO4RakN.css';
+import { defineComponent, createBlock, openBlock, unref, withCtx, createElementVNode, normalizeClass, renderSlot } from "vue";
+import { N as NcAppSettingsSection } from "./NcAppSettingsSection-B9R7enkC.mjs";
+import { r as register, a as t } from "./_l10n--WxGDYem.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+register();
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcAppSettingsShortcutsSection",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(NcAppSettingsSection, {
+        id: "keyboard-shortcuts",
+        name: unref(t)("Keyboard shortcuts")
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style.appSettingsSectionShortcuts)
+          }, [
+            renderSlot(_ctx.$slots, "default")
+          ], 2)
+        ]),
+        _: 3
+      }, 8, ["name"]);
+    };
+  }
+});
+const appSettingsSectionShortcuts = "_appSettingsSectionShortcuts_1trvh_2";
+const style0 = {
+  appSettingsSectionShortcuts
+};
+const cssModules = {
+  "$style": style0
+};
+const NcAppSettingsShortcutsSection = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  NcAppSettingsShortcutsSection as N
+};
+//# sourceMappingURL=NcAppSettingsShortcutsSection-o6KPisIT.mjs.map

package/dist/chunks/NcAppSettingsShortcutsSection-o6KPisIT.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsShortcutsSection-o6KPisIT.mjs","sources":["../../src/components/NcAppSettingsShortcutsSection/NcAppSettingsShortcutsSection.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport NcAppSettingsSection from '../NcAppSettingsSection/NcAppSettingsSection.vue'\nimport { t } from '../../l10n.ts'\n\ndefineSlots<{\n\t/**\n\t * Shortcuts described via <NcHotkeyList> components\n\t */\n\tdefault?: Slot\n}>()\n</script>\n\n<template>\n\t<NcAppSettingsSection id=\"keyboard-shortcuts\" :name=\"t('Keyboard shortcuts')\">\n\t\t<div :class=\"$style.appSettingsSectionShortcuts\">\n\t\t\t<slot />\n\t\t</div>\n\t</NcAppSettingsSection>\n</template>\n\n<style module>\n.appSettingsSectionShortcuts {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(4 * var(--default-grid-baseline));\n}\n</style>\n\n<docs>\nA special `NcAppSettingsSection` for listing keyboard shortcuts using `<NcHotkeyList>` and `<NcHotkey>` components with predefined heading and gap between hotkey lists.\n\n```vue\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\topen: false,\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<div>\n\t\t<NcButton @click=\"open = true\">App Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"open\" name=\"Application settings\" show-navigation>\n\t\t\t<NcAppSettingsShortcutsSection>\n\t\t\t\t<NcHotkeyList label=\"Actions\">\n\t\t\t\t\t<NcHotkey label=\"File actions\" hotkey=\"A\" />\n\t\t\t\t\t<NcHotkey label=\"Rename\" hotkey=\"F2\" />\n\t\t\t\t\t<NcHotkey label=\"Delete\" hotkey=\"Delete\" />\n\t\t\t\t\t<NcHotkey label=\"Add or remove favorite\" hotkey=\"S\" />\n\t\t\t\t\t<NcHotkey label=\"Manage tags\" hotkey=\"T\" />\n\t\t\t\t</NcHotkeyList>\n\n\t\t\t\t<NcHotkeyList label=\"Selection\">\n\t\t\t\t\t<NcHotkey label=\"Select all files\" hotkey=\"Control A\" />\n\t\t\t\t\t<NcHotkey label=\"Deselect all\" hotkey=\"Escape\" />\n\t\t\t\t\t<NcHotkey label=\"Select or deselect\" hotkey=\"Control Space\" />\n\t\t\t\t\t<NcHotkey label=\"Select a range\" hotkey=\"Control Shift Space\" />\n\t\t\t\t</NcHotkeyList>\n\n\t\t\t\t<NcHotkeyList label=\"Navigation\">\n\t\t\t\t\t<NcHotkey label=\"Go to parent folder\" hotkey=\"Alt ArrowUp\" />\n\t\t\t\t\t<NcHotkey label=\"Go to file above\" hotkey=\"ArrowUp\" />\n\t\t\t\t\t<NcHotkey label=\"Go to file below\" hotkey=\"ArrowDown\" />\n\t\t\t\t\t<NcHotkey label=\"Go left in grid\" hotkey=\"ArrowLeft\" />\n\t\t\t\t\t<NcHotkey label=\"Go right in grid\" hotkey=\"ArrowRight\" />\n\t\t\t\t</NcHotkeyList>\n\n\t\t\t\t<NcHotkeyList label=\"View\">\n\t\t\t\t\t<NcHotkey label=\"Toggle grid view\" hotkey=\"V\" />\n\t\t\t\t\t<NcHotkey label=\"Open file sidebar\" hotkey=\"D\" />\n\t\t\t\t\t<NcHotkey label=\"Show those shortcuts\" hotkey=\"?\" />\n\t\t\t\t</NcHotkeyList>\n\t\t\t</NcAppSettingsShortcutsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n```\n</docs>\n"],"names":["_createBlock","_unref","_createElementVNode","_normalizeClass","$style","_renderSlot"],"mappings":";;;;;;;;;0BAoBCA,YAIuB,sBAAA;AAAA,QAJD,IAAG;AAAA,QAAsB,MAAMC,MAAA,CAAA,EAAC,oBAAA;AAAA,MAAA;yBACrD,MAEM;AAAA,UAFNC,mBAEM,OAAA;AAAA,YAFA,OAAKC,eAAEC,KAAAA,OAAO,2BAA2B;AAAA,UAAA;YAC9CC,WAAQ,KAAA,QAAA,SAAA;AAAA,UAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppSidebar-CjQtPAhV.mjs → NcAppSidebar-BZh0lWlQ.mjs}

@@ -1,25 +1,25 @@
-import '../assets/NcAppSidebar-RFBRejzg.css';
+import '../assets/NcAppSidebar-aGrIJ9f6.css';
 import { vOnClickOutside } from "@vueuse/components";
 import { createFocusTrap } from "focus-trap";
-import { createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, toDisplayString, resolveComponent, withKeys, withModifiers, Fragment, renderList, createBlock, normalizeClass, withCtx, createVNode, renderSlot, resolveDirective, Transition, withDirectives, Teleport, normalizeStyle, vShow, createTextVNode, warn, ref, provide } from "vue";
+import { createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, toDisplayString, defineComponent, mergeModels, useModel, normalizeClass, createVNode, withCtx, resolveComponent, withKeys, withModifiers, Fragment, renderList, createBlock, renderSlot, resolveDirective, Transition, withDirectives, Teleport, normalizeStyle, vShow, createTextVNode, warn, ref, provide } from "vue";
 import { I as IconArrowRight } from "./ArrowRight-DRKHUZMH.mjs";
 import { I as IconClose } from "./Close-D6ngJ4t9.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-import { N as NcCheckboxRadioSwitch } from "./NcCheckboxRadioSwitch-BWumYbec.mjs";
-import { _ as _sfc_main$5 } from "./NcVNodes.vue_vue_type_script_lang-BqUHinRZ.mjs";
+import { getCanonicalLocale } from "@nextcloud/l10n";
+import { _ as _sfc_main$6 } from "./NcVNodes.vue_vue_type_script_lang-BqUHinRZ.mjs";
 import { useIsSmallMobile } from "../composables/useIsMobile/index.mjs";
 import directive from "../directives/Focus/index.mjs";
-import { r as register, z as t15, a as t } from "./_l10n-BPfpECk_.mjs";
+import { r as register, D as t15, a as t } from "./_l10n--WxGDYem.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
 import { g as getTrapStack } from "./focusTrap-HJQ4pqHV.mjs";
-import { i as isSlotPopulated, N as NcActions } from "./NcActions-Ccr8kkyh.mjs";
+import { i as isSlotPopulated, N as NcActions } from "./NcActions-QtUC1sD3.mjs";
 import { l as logger } from "./logger-D3RVzcfQ.mjs";
-import { _ as _sfc_main$6 } from "./NcAppSidebarHeader.vue_vue_type_script_setup_true_lang-0j0aFDeK.mjs";
+import { _ as _sfc_main$7 } from "./NcAppSidebarHeader.vue_vue_type_script_setup_true_lang-0j0aFDeK.mjs";
 import { N as NcButton } from "./NcButton-DkC5k3Lb.mjs";
 import { C as CONTENT_SELECTOR_KEY } from "./constants-DrSznhwy.mjs";
-import { N as NcEmptyContent } from "./NcEmptyContent-BdOezubv.mjs";
+import { N as NcEmptyContent } from "./NcEmptyContent-B8-90BSI.mjs";
 import { N as NcLoadingIcon } from "./NcLoadingIcon-b_ajZ_nQ.mjs";
-const _sfc_main$4 = {
+const _sfc_main$5 = {
   name: "DockRightIcon",
   emits: ["click"],
   props: {
@@ -36,8 +36,8 @@ const _sfc_main$4 = {
     }
   }
 };
-const _hoisted_1$4 = ["aria-hidden", "aria-label"];
-const _hoisted_2$4 = ["fill", "width", "height"];
+const _hoisted_1$5 = ["aria-hidden", "aria-label"];
+const _hoisted_2$3 = ["fill", "width", "height"];
 const _hoisted_3$3 = { 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" };
 const _hoisted_4$3 = { key: 0 };
 function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
@@ -58,11 +58,11 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
       createElementVNode("path", _hoisted_3$3, [
         $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$3, toDisplayString($props.title), 1)) : createCommentVNode("", true)
       ])
-    ], 8, _hoisted_2$4))
-  ], 16, _hoisted_1$4);
+    ], 8, _hoisted_2$3))
+  ], 16, _hoisted_1$5);
 }
-const IconDockRight = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
-const _sfc_main$3 = {
+const IconDockRight = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$4]]);
+const _sfc_main$4 = {
   name: "StarIcon",
   emits: ["click"],
   props: {
@@ -79,8 +79,8 @@ const _sfc_main$3 = {
     }
   }
 };
-const _hoisted_1$3 = ["aria-hidden", "aria-label"];
-const _hoisted_2$3 = ["fill", "width", "height"];
+const _hoisted_1$4 = ["aria-hidden", "aria-label"];
+const _hoisted_2$2 = ["fill", "width", "height"];
 const _hoisted_3$2 = { 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" };
 const _hoisted_4$2 = { key: 0 };
 function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
@@ -101,11 +101,11 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
       createElementVNode("path", _hoisted_3$2, [
         $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$2, toDisplayString($props.title), 1)) : createCommentVNode("", true)
       ])
-    ], 8, _hoisted_2$3))
-  ], 16, _hoisted_1$3);
+    ], 8, _hoisted_2$2))
+  ], 16, _hoisted_1$4);
 }
-const IconStar = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
-const _sfc_main$2 = {
+const IconStar = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$3]]);
+const _sfc_main$3 = {
   name: "StarOutlineIcon",
   emits: ["click"],
   props: {
@@ -122,8 +122,8 @@ const _sfc_main$2 = {
     }
   }
 };
-const _hoisted_1$2 = ["aria-hidden", "aria-label"];
-const _hoisted_2$2 = ["fill", "width", "height"];
+const _hoisted_1$3 = ["aria-hidden", "aria-label"];
+const _hoisted_2$1 = ["fill", "width", "height"];
 const _hoisted_3$1 = { 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" };
 const _hoisted_4$1 = { key: 0 };
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
@@ -144,15 +144,74 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
       createElementVNode("path", _hoisted_3$1, [
         $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$1, toDisplayString($props.title), 1)) : createCommentVNode("", true)
       ])
-    ], 8, _hoisted_2$2))
-  ], 16, _hoisted_1$2);
+    ], 8, _hoisted_2$1))
+  ], 16, _hoisted_1$3);
 }
-const IconStarOutline = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+const IconStarOutline = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$2]]);
+const _hoisted_1$2 = ["aria-selected", "tabindex"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "NcAppSidebarTabsButton",
+  props: /* @__PURE__ */ mergeModels({
+    tab: {}
+  }, {
+    "selected": { type: Boolean, ...{ required: true } },
+    "selectedModifiers": {}
+  }),
+  emits: ["update:selected"],
+  setup(__props) {
+    const selected = useModel(__props, "selected");
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        class: normalizeClass(["button-vue", [_ctx.$style.sidebarTabsButton, {
+          [_ctx.$style.sidebarTabsButton_selected]: selected.value
+        }]]),
+        role: "tab",
+        "aria-selected": selected.value,
+        tabindex: selected.value ? 0 : -1,
+        onClick: _cache[0] || (_cache[0] = ($event) => selected.value = true)
+      }, [
+        createElementVNode("span", {
+          class: normalizeClass(_ctx.$style.sidebarTabsButton__icon)
+        }, [
+          createVNode(_sfc_main$6, {
+            vnodes: _ctx.tab.renderIcon()
+          }, {
+            default: withCtx(() => [
+              createElementVNode("span", {
+                class: normalizeClass([_ctx.$style.sidebarTabsButton__legacyIcon, _ctx.tab.icon])
+              }, null, 2)
+            ]),
+            _: 1
+          }, 8, ["vnodes"])
+        ], 2),
+        createElementVNode("span", {
+          class: normalizeClass(_ctx.$style.sidebarTabsButton__name)
+        }, toDisplayString(_ctx.tab.name), 3)
+      ], 10, _hoisted_1$2);
+    };
+  }
+});
+const sidebarTabsButton = "_sidebarTabsButton_1y2dv_20";
+const sidebarTabsButton_selected = "_sidebarTabsButton_selected_1y2dv_45";
+const sidebarTabsButton__name = "_sidebarTabsButton__name_1y2dv_59";
+const sidebarTabsButton__icon = "_sidebarTabsButton__icon_1y2dv_70";
+const sidebarTabsButton__legacyIcon = "_sidebarTabsButton__legacyIcon_1y2dv_76";
+const style0 = {
+  "material-design-icon": "_material-design-icon_1y2dv_12",
+  sidebarTabsButton,
+  sidebarTabsButton_selected,
+  sidebarTabsButton__name,
+  sidebarTabsButton__icon,
+  sidebarTabsButton__legacyIcon
+};
+const cssModules = {
+  "$style": style0
+};
+const NcAppSidebarTabsButton = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__cssModules", cssModules]]);
 const _sfc_main$1 = {
   name: "NcAppSidebarTabs",
   components: {
-    NcCheckboxRadioSwitch,
-    NcVNodes: _sfc_main$5
+    NcAppSidebarTabsButton
   },
   provide() {
     return {
@@ -181,7 +240,7 @@ const _sfc_main$1 = {
     }
   },
   emits: ["update:active"],
-  data() {
+  data(props) {
     return {
       /**
        * Tab descriptions from the passed NcSidebarTab components' props to build the tab navbar from.
@@ -190,7 +249,7 @@ const _sfc_main$1 = {
       /**
        * Local active (open) tab's ID. It allows to use component without v-model:active
        */
-      activeTab: ""
+      activeTab: props.active
     };
   },
   computed: {
@@ -210,6 +269,11 @@ const _sfc_main$1 = {
     }
   },
   watch: {
+    tabs() {
+      if (this.active) {
+        this.updateActive();
+      }
+    },
     active(active) {
       if (active !== this.activeTab) {
         this.updateActive();
@@ -279,7 +343,7 @@ const _sfc_main$1 = {
      * 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 : "";
+      this.activeTab = this.active && this.tabs.some(({ id }) => id === this.active) ? this.active : this.tabs[0]?.id ?? "";
     },
     /**
      * Register child tab in the tabs
@@ -290,7 +354,7 @@ const _sfc_main$1 = {
       this.tabs.push(tab);
       this.tabs.sort((a, b) => {
         if (a.order === b.order) {
-          return OC.Util.naturalSortCompare(a.name, b.name);
+          return a.name.localeCompare(b.name, [getCanonicalLocale()]);
         }
         return a.order - b.order;
       });
@@ -313,10 +377,8 @@ const _sfc_main$1 = {
   }
 };
 const _hoisted_1$1 = { class: "app-sidebar-tabs" };
-const _hoisted_2$1 = { class: "app-sidebar-tabs__tab-caption" };
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_NcVNodes = resolveComponent("NcVNodes");
-  const _component_NcCheckboxRadioSwitch = resolveComponent("NcCheckboxRadioSwitch");
+  const _component_NcAppSidebarTabsButton = resolveComponent("NcAppSidebarTabsButton");
   return openBlock(), createElementBlock("div", _hoisted_1$1, [
     $options.hasMultipleTabs || $options.showForSingleTab ? (openBlock(), createElementBlock("div", {
       key: 0,
@@ -333,37 +395,15 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
       ]
     }, [
       (openBlock(true), createElementBlock(Fragment, null, renderList($data.tabs, (tab) => {
-        return openBlock(), createBlock(_component_NcCheckboxRadioSwitch, {
+        return openBlock(), createBlock(_component_NcAppSidebarTabsButton, {
+          id: `tab-button-${tab.id}`,
           key: tab.id,
+          class: "app-sidebar-tabs__tab",
           "aria-controls": `tab-${tab.id}`,
-          "aria-selected": String($data.activeTab === tab.id),
-          "button-variant": true,
-          "model-value": $data.activeTab === tab.id,
-          "wrapper-id": `tab-button-${tab.id}`,
-          tabindex: $data.activeTab === tab.id ? 0 : -1,
-          "button-variant-grouped": "horizontal",
-          class: normalizeClass(["app-sidebar-tabs__tab", { active: tab.id === $data.activeTab }]),
-          role: "tab",
-          type: "button",
-          "onUpdate:modelValue": ($event) => $options.setActive(tab.id)
-        }, {
-          icon: withCtx(() => [
-            createVNode(_component_NcVNodes, {
-              vnodes: tab.renderIcon()
-            }, {
-              default: withCtx(() => [
-                createElementVNode("span", {
-                  class: normalizeClass(["app-sidebar-tabs__tab-icon", tab.icon])
-                }, null, 2)
-              ]),
-              _: 2
-            }, 1032, ["vnodes"])
-          ]),
-          default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$1, toDisplayString(tab.name), 1)
-          ]),
-          _: 2
-        }, 1032, ["aria-controls", "aria-selected", "model-value", "wrapper-id", "tabindex", "class", "onUpdate:modelValue"]);
+          selected: $data.activeTab === tab.id,
+          tab,
+          "onUpdate:selected": ($event) => $options.setActive(tab.id)
+        }, null, 8, ["id", "aria-controls", "selected", "tab", "onUpdate:selected"]);
       }), 128))
     ], 32)) : createCommentVNode("", true),
     createElementVNode("div", {
@@ -373,13 +413,13 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     ], 2)
   ]);
 }
-const NcAppSidebarTabs = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-e06df142"]]);
+const NcAppSidebarTabs = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-1e2d5bfb"]]);
 register(t15);
 const _sfc_main = {
   name: "NcAppSidebar",
   components: {
     NcActions,
-    NcAppSidebarHeader: _sfc_main$6,
+    NcAppSidebarHeader: _sfc_main$7,
     NcAppSidebarTabs,
     NcButton,
     NcLoadingIcon,
@@ -999,8 +1039,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["onAfterEnter", "onAfterLeave"]);
 }
-const NcAppSidebar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3243b41e"]]);
+const NcAppSidebar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-7d816760"]]);
 export {
   NcAppSidebar as N
 };
-//# sourceMappingURL=NcAppSidebar-CjQtPAhV.mjs.map
+//# sourceMappingURL=NcAppSidebar-BZh0lWlQ.mjs.map

package/dist/chunks/NcAppSidebar-BZh0lWlQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSidebar-BZh0lWlQ.mjs","sources":["../../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/NcAppSidebarTabsButton.vue","../../src/components/NcAppSidebar/NcAppSidebarTabs.vue","../../src/components/NcAppSidebar/NcAppSidebar.vue"],"sourcesContent":["<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: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type NcAppSidebarTab from '../NcAppSidebarTab/NcAppSidebarTab.vue'\n\nimport NcVNodes from '../NcVNodes/NcVNodes.vue'\n\nconst selected = defineModel<boolean>('selected', { required: true })\n\ndefineProps<{\n\t/**\n\t * The sidebar tab this button controls\n\t */\n\ttab: InstanceType<typeof NcAppSidebarTab>\n}>()\n</script>\n\n<template>\n\t<button\n\t\tclass=\"button-vue\"\n\t\t:class=\"[$style.sidebarTabsButton, {\n\t\t\t[$style.sidebarTabsButton_selected]: selected,\n\t\t}]\"\n\t\trole=\"tab\"\n\t\t:aria-selected=\"selected\"\n\t\t:tabindex=\"selected ? 0 : -1\"\n\t\t@click=\"selected = true\">\n\t\t<span :class=\"$style.sidebarTabsButton__icon\">\n\t\t\t<NcVNodes :vnodes=\"tab.renderIcon()\">\n\t\t\t\t<span :class=\"[$style.sidebarTabsButton__legacyIcon, tab.icon]\" />\n\t\t\t</NcVNodes>\n\t\t</span>\n\t\t<span :class=\"$style.sidebarTabsButton__name\">\n\t\t\t{{ tab.name }}\n\t\t</span>\n\t</button>\n</template>\n\n<style module lang=\"scss\">\n.sidebarTabsButton {\n\tborder: none;\n\tborder-bottom: var(--default-grid-baseline) solid transparent !important;\n\tborder-radius: var(--border-radius-small);\n\tbackground-color: var(--color-main-background);\n\tcolor: var(--color-main-text);\n\tfont-size: var(--default-font-size);\n\tcursor: pointer;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: var(--default-grid-baseline);\n\tpadding: var(--border-radius-small);\n\ttransition:\n\t\tbackground-color var(--animation-quick),\n\t\tborder-bottom-color var(--animation-quick);\n\tmin-width: var(--default-clickable-area);\n\n\t&:hover {\n\t\tbackground-color: var(--color-background-hover) !important;\n\t}\n\n\t&:active,\n\t&:focus {\n\t\tbackground-color: var(--color-main-background) !important;\n\t}\n\n\t* {\n\t\tcursor: pointer;\n\t}\n}\n\n.sidebarTabsButton_selected {\n\tborder-bottom-color: var(--color-primary-element) !important;\n\tborder-bottom-left-radius: 0px;\n\tborder-bottom-right-radius: 0px;\n\tcursor: default;\n\n\t&:hover {\n\t\tbackground-color: var(--color-primary-element-light-hover) !important;\n\t\tcolor: var(--color-primary-element-light-text) !important;\n\t}\n\n\t* {\n\t\tcursor: default;\n\t}\n}\n\n.sidebarTabsButton__name {\n\tfont-weight: normal;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\ttext-wrap: nowrap;\n}\n\n.sidebarTabsButton_selected .sidebarTabsButton__name {\n\tfont-weight: bold;\n}\n\n.sidebarTabsButton__icon {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.sidebarTabsButton__legacyIcon {\n\tbackground-size: 20px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n</style>\n","<!--\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\n\t\t\tv-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<NcAppSidebarTabsButton\n\t\t\t\tv-for=\"tab in tabs\"\n\t\t\t\t:id=\"`tab-button-${tab.id}`\"\n\t\t\t\t:key=\"tab.id\"\n\t\t\t\tclass=\"app-sidebar-tabs__tab\"\n\t\t\t\t:aria-controls=\"`tab-${tab.id}`\"\n\t\t\t\t:selected=\"activeTab === tab.id\"\n\t\t\t\t:tab\n\t\t\t\t@update:selected=\"setActive(tab.id)\" />\n\t\t</div>\n\n\t\t<!-- tabs content -->\n\t\t<div\n\t\t\tclass=\"app-sidebar-tabs__content\"\n\t\t\t:class=\"{ 'app-sidebar-tabs__content--multiple': hasMultipleTabs }\">\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 { getCanonicalLocale } from '@nextcloud/l10n'\nimport NcAppSidebarTabsButton from './NcAppSidebarTabsButton.vue'\n\nexport default {\n\tname: 'NcAppSidebarTabs',\n\n\tcomponents: {\n\t\tNcAppSidebarTabsButton,\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\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(props) {\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 v-model:active\n\t\t\t */\n\t\t\tactiveTab: props.active,\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\ttabs() {\n\t\t\tif (this.active) {\n\t\t\t\tthis.updateActive()\n\t\t\t}\n\t\t},\n\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 && this.tabs.some(({ id }) => id === this.active))\n\t\t\t\t? this.active\n\t\t\t\t: (this.tabs[0]?.id ?? '')\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 a.name.localeCompare(b.name, [getCanonicalLocale()])\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\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\t}\n\n\t&__tab {\n\t\tflex: 1 1 1px;\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","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Exposed CSS Variables\n\n| Variable                | Description                                                                                                                               |\n|-------------------------|-------------------------------------------------------------------------------------------------------------------------------------------|\n| `--app-sidebar-padding` | The padding between the toggle button and the page border.                                                                                |\n| `--app-sidebar-offset`  | The minimal offset width required to be reserved for the toggle button. <br /> Automatically changes to 0 when there is no toggle button. |\n\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 control 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<div class=\"content-styleguidist\">\n\t\t<main id=\"content-styleguidist-1\" />\n\t\t<NcAppSidebar\n\t\t\tv-model:open=\"open\"\n\t\t\t:starred=\"starred\"\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\"\n\t\t\tbackground=\"https://nextcloud.com/wp-content/uploads/2022/08/nextcloud-logo-icon.svg\"\n\t\t\t@figure-click=\"figureClick\">\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 tab content\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\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\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:selector': '#content-styleguidist-1',\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topen: true,\n\t\t\t\tstarred: false,\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tfigureClick() {\n\t\t\t\talert('figure clicked')\n\t\t\t},\n\t\t},\n\t}\n</script>\n\n<style scoped>\n\t/* This styles just mock NcContent and NcAppContent */\n\t.content-styleguidist {\n\t\t--app-sidebar-padding: 8px;\n\t\t--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));\n\t\tdisplay: flex;\n\t\tposition: relative !important;\n\t\t/* Just to prevent jumping when the sidebar is hidden */\n\t\tmin-height: 360px;\n\t\toverflow: hidden;\n\n\t\tmain {\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\n\t/* Fix styles on this style guide page */\n\t@media only screen and (max-width: 512px) {\n\t\t:deep(aside) {\n\t\t\twidth: calc(100vw - 64px) !important;\n\t\t}\n\t}\n</style>\n```\n\n### Dynamic tabs\n\nSidebar tabs and their content can be changed dynamically.\n\nSingle tab is rendered without navigation, but it is possible to force it.\n\n```vue\n<template>\n\t<div class=\"content-styleguidist\">\n\t\t<main id=\"content-styleguidist-2\">\n\t\t\t<NcCheckboxRadioSwitch v-model=\"forceTabs\">Force tab navigation</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"showTabs[0]\">Show search tab</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"showTabs[1]\">Show settings tab</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"showTabs[2]\">Show sharing tab</NcCheckboxRadioSwitch>\n\t\t</main>\n\t\t<NcAppSidebar\n\t\t\tv-model:open=\"open\"\n\t\t\t:force-tabs=\"forceTabs\"\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\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\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:selector': '#content-styleguidist-2',\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topen: true,\n\t\t\t\tforceTabs: false,\n\t\t\t\tshowTabs: [true, true, false],\n\t\t\t}\n\t\t},\n\t}\n</script>\n\n<style scoped>\n\t/* This styles just mock NcContent and NcAppContent */\n\t.content-styleguidist {\n\t\t--app-sidebar-padding: 8px;\n\t\t--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));\n\t\tdisplay: flex;\n\t\tposition: relative !important;\n\t\t/* Just to prevent jumping when the sidebar is hidden */\n\t\tmin-height: 360px;\n\t\toverflow: hidden;\n\n\t\tmain {\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\n\t/* Fix styles on this style guide page */\n\t@media only screen and (max-width: 512px) {\n\t\t:deep(aside) {\n\t\t\twidth: calc(100vw - 64px) !important;\n\t\t}\n\t}\n</style>\n```\n\n### Tabs order and programmatic activation\n\nTo customize the order of tabs, ``order`` prop can be used on child components.\n\n``active`` prop on NcAppSidebar can be modified to show required tab as active\n\n```vue\n<template>\n\t<div class=\"content-styleguidist\">\n\t\t<main id=\"content-styleguidist-3\">\n\t\t\t<NcSelect v-model=\"active\" :options=\"['search-tab', 'settings-tab', 'share-tab']\"/>\n\t\t</main>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\"\n\t\t\tv-model:open=\"open\"\n\t\t\tv-model:active=\"active\">\n\t\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\" :order=\"3\">\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\" :order=\"2\">\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\" :order=\"1\">\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\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\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:selector': '#content-styleguidist-3',\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topen: true,\n\t\t\t\tactive: 'search-tab',\n\t\t\t}\n\t\t},\n\t}\n</script>\n\n<style scoped>\n\t/* This styles just mock NcContent and NcAppContent */\n\t.content-styleguidist {\n\t\t--app-sidebar-padding: 8px;\n\t\t--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));\n\t\tdisplay: flex;\n\t\tposition: relative !important;\n\t\t/* Just to prevent jumping when the sidebar is hidden */\n\t\tmin-height: 360px;\n\t\toverflow: hidden;\n\n\t\tmain {\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\n\t/* Fix styles on this style guide page */\n\t@media only screen and (max-width: 512px) {\n\t\t:deep(aside) {\n\t\t\twidth: calc(100vw - 64px) !important;\n\t\t}\n\t}\n</style>\n```\n\n### Editable name\n\n```vue\n<template>\n\t<div class=\"content-styleguidist\">\n\t\t<main id=\"content-styleguidist-4\" />\n\t\t<NcAppSidebar\n\t\t\tv-model:open=\"open\"\n\t\t\tv-model:name=\"name\"\n\t\t\t:name-editable=\"true\"\n\t\t\tname-placeholder=\"Filename\"\n\t\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\t<!-- Insert your slots and tabs here -->\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:selector': '#content-styleguidist-4',\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topen: true,\n\t\t\t\tname: 'cat-picture.jpg',\n\t\t\t}\n\t\t},\n\t}\n</script>\n\n<style scoped>\n\t/* This styles just mock NcContent and NcAppContent */\n\t.content-styleguidist {\n\t\t--app-sidebar-padding: 8px;\n\t\t--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));\n\t\tdisplay: flex;\n\t\tposition: relative !important;\n\t\t/* Just to prevent jumping when the sidebar is hidden */\n\t\tmin-height: 360px;\n\t\toverflow: hidden;\n\n\t\tmain {\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\n\t/* Fix styles on this style guide page */\n\t@media only screen and (max-width: 512px) {\n\t\t:deep(aside) {\n\t\t\twidth: calc(100vw - 64px) !important;\n\t\t}\n\t}\n</style>\n```\n\n### Editable name after click with custom tertiary action\n\n```vue\n<template>\n\t<div class=\"content-styleguidist\">\n\t\t<main id=\"content-styleguidist-5\" />\n\t\t<NcAppSidebar\n\t\t\t:name=\"name\"\n\t\t\tv-model:open=\"open\"\n\t\t\tv-model:name-editable=\"nameEditable\"\n\t\t\t:name-placeholder=\"namePlaceholder\"\n\t\t\t:subname=\"subname\"\n\t\t\t@update:name=\"nameUpdate\">\n\t\t\t<template #tertiary-actions>\n\t\t\t\t<form>\n\t\t\t\t\t<input type=\"checkbox\" @click=\"toggledCheckbox\"/>\n\t\t\t\t</form>\n\t\t\t</template>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:selector': '#content-styleguidist-5',\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topen: true,\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<style scoped>\n\t/* This styles just mock NcContent and NcAppContent */\n\t.content-styleguidist {\n\t\t--app-sidebar-padding: 8px;\n\t\t--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));\n\t\tdisplay: flex;\n\t\tposition: relative !important;\n\t\t/* Just to prevent jumping when the sidebar is hidden */\n\t\tmin-height: 360px;\n\t\toverflow: hidden;\n\n\t\tmain {\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\n\t/* Fix styles on this style guide page */\n\t@media only screen and (max-width: 512px) {\n\t\t:deep(aside) {\n\t\t\twidth: calc(100vw - 64px) !important;\n\t\t}\n\t}\n</style>\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.\nSimply 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<template>\n\t<div class=\"content-styleguidist\">\n\t\t<main id=\"content-styleguidist-6\" />\n\t\t<NcAppSidebar\n\t\t\tv-model:open=\"open\"\n\t\t\tname=\"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</div>\n</template>\n\n<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\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:selector': '#content-styleguidist-6',\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topen: true,\n\t\t\t}\n\t\t},\n\t}\n</script>\n\n<style scoped>\n\t/* This styles just mock NcContent and NcAppContent */\n\t.content-styleguidist {\n\t\t--app-sidebar-padding: 8px;\n\t\t--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));\n\t\tdisplay: flex;\n\t\tposition: relative !important;\n\t\t/* Just to prevent jumping when the sidebar is hidden */\n\t\tmin-height: 360px;\n\t\toverflow: hidden;\n\n\t\tmain {\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\n\t/* Fix styles on this style guide page */\n\t@media only screen and (max-width: 512px) {\n\t\t:deep(aside) {\n\t\t\twidth: calc(100vw - 64px) !important;\n\t\t}\n\t}\n</style>\n```\n\n### Empty sidebar for e.g. empty content component.\n\n```vue\n<template>\n\t<div class=\"content-styleguidist\">\n\t\t<main id=\"content-styleguidist-7\" />\n\t\t<NcAppSidebar\n\t\t\tv-model:open=\"open\"\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</div>\n</template>\n\n<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\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:selector': '#content-styleguidist-7',\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topen: true,\n\t\t\t}\n\t\t},\n\t}\n</script>\n\n<style scoped>\n\t/* This styles just mock NcContent and NcAppContent */\n\t.content-styleguidist {\n\t\t--app-sidebar-padding: 8px;\n\t\t--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));\n\t\tdisplay: flex;\n\t\tposition: relative !important;\n\t\t/* Just to prevent jumping when the sidebar is hidden */\n\t\tmin-height: 360px;\n\t\toverflow: hidden;\n\n\t\tmain {\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\n\t/* Fix styles on this style guide page */\n\t@media only screen and (max-width: 512px) {\n\t\t:deep(aside) {\n\t\t\twidth: calc(100vw - 64px) !important;\n\t\t}\n\t}\n</style>\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<div class=\"content-styleguidist\">\n\t\t<main id=\"content-styleguidist-8\">\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</main>\n\t\t<NcAppSidebar\n\t\t\tv-model:open=\"open\"\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</div>\n</template>\n\n<script>\n\timport Cog from 'vue-material-design-icons/Cog'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCog,\n\t\t},\n\t\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:selector': '#content-styleguidist-8',\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topen: true,\n\t\t\t}\n\t\t},\n\t}\n</script>\n\n<style scoped>\n\t/* This styles just mock NcContent and NcAppContent */\n\t.content-styleguidist {\n\t\t--app-sidebar-padding: 8px;\n\t\t--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));\n\t\tdisplay: flex;\n\t\tposition: relative !important;\n\t\t/* Just to prevent jumping when the sidebar is hidden */\n\t\tmin-height: 360px;\n\t\toverflow: hidden;\n\n\t\tmain {\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\n\t/* Fix styles on this style guide page */\n\t@media only screen and (max-width: 512px) {\n\t\t:deep(aside) {\n\t\t\twidth: calc(100vw - 64px) !important;\n\t\t}\n\t}\n\n\t.top-bar {\n\t\tdisplay: flex;\n\t\tjustify-content: flex-end;\n\t\t/* preserve space for toggle button */\n\t\tpadding-inline-end: var(--app-sidebar-offset);\n\t\t/* same as on toggle button, but doesn't have to be the same */\n\t\tmargin: var(--app-sidebar-padding);\n\t}\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<div class=\"content-styleguidist\">\n\t\t<main id=\"content-styleguidist-9\">\n\t\t\t<div class=\"top-bar\">\n\t\t\t\t<NcButton @click.prevent=\"open = !open\">\n\t\t\t\t\tToggle sidebar\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</main>\n\t\t<!-- The sidebar -->\n\t\t<NcAppSidebar\n\t\t\tv-if=\"open\"\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\"\n\t\t\t@close=\"open = 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</div>\n</template>\n\n<script>\n\timport Cog from 'vue-material-design-icons/Cog'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCog,\n\t\t},\n\t\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:selector': '#content-styleguidist-9',\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topen: true,\n\t\t\t}\n\t\t},\n\t}\n</script>\n<style scoped>\n\t/* This styles just mock NcContent and NcAppContent */\n\t.content-styleguidist {\n\t\t--app-sidebar-padding: 8px;\n\t\t--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));\n\t\tdisplay: flex;\n\t\tposition: relative !important;\n\t\t/* Just to prevent jumping when the sidebar is hidden */\n\t\tmin-height: 360px;\n\t\toverflow: hidden;\n\n\t\tmain {\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\n\t/* Fix styles on this style guide page */\n\t@media only screen and (max-width: 512px) {\n\t\t:deep(aside) {\n\t\t\twidth: calc(100vw - 64px) !important;\n\t\t}\n\t}\n\n\t.top-bar {\n\t\tdisplay: flex;\n\t\tjustify-content: flex-end;\n\t\t/* preserve space for toggle button */\n\t\tpadding-inline-end: var(--app-sidebar-offset);\n\t\t/* same as on toggle button, but doesn't have to be the same */\n\t\tmargin: var(--app-sidebar-padding);\n\t}\n</style>\n```\n</docs>\n\n<template>\n\t<transition\n\t\tappear\n\t\tname=\"slide-right\"\n\t\t@after-enter=\"onAfterEnter\"\n\t\t@after-leave=\"onAfterLeave\">\n\t\t<aside\n\t\t\tv-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\" :to=\"ncContentSelector\">\n\t\t\t\t<NcButton\n\t\t\t\t\tref=\"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\n\t\t\t\tclass=\"app-sidebar-header\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'app-sidebar-header--with-figure': isSlotPopulated($slots.header?.()) || background,\n\t\t\t\t\t'app-sidebar-header--compact': compact,\n\t\t\t\t}\">\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\n\t\t\t\t\t\t\tv-if=\"(isSlotPopulated($slots.header?.()) || background)\"\n\t\t\t\t\t\t\tclass=\"app-sidebar-header__figure\"\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\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\n\t\t\t\t\t\t\tclass=\"app-sidebar-header__desc\"\n\t\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t\t'app-sidebar-header__desc--with-tertiary-action': canStar || isSlotPopulated($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': !isSlotPopulated($slots['secondary-actions']?.()),\n\t\t\t\t\t\t\t}\">\n\t\t\t\t\t\t\t<!-- favourite icon -->\n\t\t\t\t\t\t\t<div v-if=\"canStar || isSlotPopulated($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\n\t\t\t\t\t\t\t\t\t\tv-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<IconStar v-else-if=\"isStarred\" :size=\"20\" />\n\t\t\t\t\t\t\t\t\t\t\t<IconStarOutline 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\n\t\t\t\t\t\t\t\t\t\tv-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\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\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=\"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\n\t\t\t\t\t\t\t\t\t\t\tv-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\n\t\t\t\t\t\t\t\t\t\t\t\tref=\"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\n\t\t\t\t\t\t\t\t\t\t\t\t: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<IconArrowRight :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\n\t\t\t\t\t\t\t\t\t\tv-if=\"isSlotPopulated($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\n\t\t\t\t\t\t\t\t\tv-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 content. 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\n\t\t\t\t\tv-else\n\t\t\t\t\tclass=\"app-sidebar-header__mainname--hidden\"\n\t\t\t\t\t:name\n\t\t\t\t\ttabindex=\"-1\" />\n\n\t\t\t\t<NcButton\n\t\t\t\t\tref=\"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<IconClose :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\n\t\t\t\t<div v-if=\"isSlotPopulated($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\n\t\t\t\tv-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>\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport { createFocusTrap } from 'focus-trap'\nimport { provide, ref, warn } from 'vue'\nimport IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport IconClose from 'vue-material-design-icons/Close.vue'\nimport IconDockRight from 'vue-material-design-icons/DockRight.vue'\nimport IconStar from 'vue-material-design-icons/Star.vue'\nimport IconStarOutline from 'vue-material-design-icons/StarOutline.vue'\nimport NcAppSidebarTabs from './NcAppSidebarTabs.vue'\nimport { useIsSmallMobile } from '../../composables/useIsMobile/index.js'\nimport Focus from '../../directives/Focus/index.ts'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { isSlotPopulated } from '../../utils/isSlotPopulated.ts'\nimport { logger } from '../../utils/logger.ts'\nimport NcActions from '../NcActions/index.js'\nimport NcAppSidebarHeader from '../NcAppSidebarHeader/index.ts'\nimport NcButton from '../NcButton/index.ts'\nimport { CONTENT_SELECTOR_KEY } from '../NcContent/constants.ts'\nimport NcEmptyContent from '../NcEmptyContent/index.ts'\nimport NcLoadingIcon from '../NcLoadingIcon/index.ts'\n\nexport default {\n\tname: 'NcAppSidebar',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcAppSidebarHeader,\n\t\tNcAppSidebarTabs,\n\t\tNcButton,\n\t\tNcLoadingIcon,\n\t\tNcEmptyContent,\n\t\tIconArrowRight,\n\t\tIconClose,\n\t\tIconDockRight,\n\t\tIconStar,\n\t\tIconStarOutline,\n\t},\n\n\tdirectives: {\n\t\tFocus,\n\t\t/** @type {import('vue').ObjectDirective} */\n\t\tClickOutside,\n\t},\n\n\tinject: {\n\t\tncContentSelector: {\n\t\t\tfrom: CONTENT_SELECTOR_KEY,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The active tab\n\t\t */\n\t\tactive: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Main text of the sidebar\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\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\n\t\t/**\n\t\t * Placeholder in the edit field if the name is editable.\n\t\t */\n\t\tnamePlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Secondary name of the sidebar (subline)\n\t\t */\n\t\tsubname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\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\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\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\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\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\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'closed',\n\t\t'opened',\n\t\t// 'figureClick', not emitted on purpose to make \"hasFigureClickListener\" work\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'submitName',\n\t\t'dismissEditing',\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: createElementId(),\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\n\t\thasFigureClickListener() {\n\t\t\treturn !!this.$attrs.onFigureClick\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\tbeforeUnmount() {\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\tisSlotPopulated,\n\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 navigation\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\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\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 *\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\t// eslint-disable-next-line vue/require-explicit-emits\n\t\t\tthis.$emit('figureClick', 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\tasync editName() {\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\tawait this.$nextTick()\n\t\t\t\tthis.$refs.nameInput.focus()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Focus the sidebar\n\t\t *\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\twarn('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 *\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\tlogger.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.')\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('submitName', event)\n\t\t},\n\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('dismissEditing')\n\t\t},\n\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\tsyntax: '<length>';\n\tinitial-value: 0;\n\tinherits: true;\n}\n\nbody {\n\t/**\n\t * The padding between the toggle button and the page border\n\t */\n\t--app-sidebar-padding: calc(var(--default-grid-baseline, 4px) * 2);\n\t/**\n\t * The minimal offset width required to be reserved for the toggle button.\n\t * Automatically changes to 0 when there is no toggle button.\n\t */\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\nbody:has(.app-sidebar.slide-right-enter-active),\nbody:has(.app-sidebar.slide-right-leave-active) {\n\ttransition: --app-sidebar-offset var(--animation-quick);\n}\n\nbody: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/*\n\tSidebar: to be used within #content\n\tapp-content will be shrunk properly\n*/\n.app-sidebar {\n\t--app-sidebar-width: clamp(300px, 27vw, 500px);\n\t--app-sidebar-padding: #{$app-navigation-padding};\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) + var(--app-sidebar-padding));\n\n\t\t> .app-sidebar__close {\n\t\t\tposition: absolute;\n\t\t\tz-index: 100;\n\t\t\ttop: var(--app-sidebar-padding);\n\t\t\tinset-inline-end: var(--app-sidebar-padding);\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\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\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\n\t\t\t\t\t.app-sidebar-header__menu {\n\t\t\t\t\t\ttop: var(--app-sidebar-padding);\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: var(--app-sidebar-padding);\n\t\t\t\tinset-inline-end: var(--app-sidebar-close-button-offset);\n\t\t\t}\n\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\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: var(--app-sidebar-padding) 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\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-from,\n.slide-right-leave-to {\n\tmargin-inline-end: calc(-1 * var(--app-sidebar-width));\n}\n</style>\n"],"names":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","_useModel","_normalizeClass","$style","_createVNode","NcVNodes","tab","_hoisted_1","_Fragment","_renderList","_createBlock","_renderSlot","NcAppSidebarHeader","Focus","ClickOutside","_Transition","_Teleport","_normalizeStyle"],"mappings":"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","x_google_ignoreList":[0,1,2]}

package/dist/chunks/{NcAssistantButton-BdYyxDoX.mjs → NcAssistantButton-D3v1Xk22.mjs}

@@ -1,7 +1,7 @@
 import '../assets/NcAssistantButton-owGSr0s0.css';
 import { defineComponent, createElementBlock, openBlock, normalizeClass, createVNode, createSlots, withCtx, createBlock, unref, createElementVNode, renderSlot, createTextVNode, toDisplayString } from "vue";
-import { j as mdiCreation } from "./mdi-Cjx8NyEs.mjs";
-import { N as NcAssistantIcon } from "./NcAssistantIcon-ClJKOiGi.mjs";
+import { n as mdiCreation } from "./mdi-8kZvl9vo.mjs";
+import { N as NcAssistantIcon } from "./NcAssistantIcon-CCdgVDM4.mjs";
 import { N as NcButton } from "./NcButton-DkC5k3Lb.mjs";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-5AA93z-F.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
@@ -76,4 +76,4 @@ const NcAssistantButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules
 export {
   NcAssistantButton as N
 };
-//# sourceMappingURL=NcAssistantButton-BdYyxDoX.mjs.map
+//# sourceMappingURL=NcAssistantButton-D3v1Xk22.mjs.map

package/dist/chunks/{NcAssistantButton-BdYyxDoX.mjs.map → NcAssistantButton-D3v1Xk22.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcAssistantButton-BdYyxDoX.mjs","sources":["../../src/components/NcAssistantButton/NcAssistantButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n```vue\n<template>\n<div class=\"wrapper\">\n\t<!-- Style selector -->\n\t<div class=\"grid grid-3\">\n\t\t<NcCheckboxRadioSwitch v-model=\"style\" value=\"icon\" name=\"style\" type=\"radio\">Icon only</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"style\" value=\"icontext\" name=\"style\" type=\"radio\">Icon and text</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"disabled\" type=\"checkbox\">Disabled</NcCheckboxRadioSwitch>\n\t</div>\n\n\t<h5>Standard buttons</h5>\n\t<div class=\"grid\">\n\t\t<p>Secondary</p>\n\t\t<p>Primary</p>\n\t\t<NcAssistantButton\n\t\t\taria-label=\"Generate content\"\n\t\t\t:disabled\n\t\t\t:text>\n\t\t</NcAssistantButton>\n\t\t<NcAssistantButton\n\t\t\taria-label=\"Generate content\"\n\t\t\t:disabled\n\t\t\t:text\n\t\t\tvariant=\"primary\">\n\t\t</NcAssistantButton>\n\t</div>\n</div>\n\n</template>\n<script>\nimport Video from 'vue-material-design-icons/Video.vue'\n\nexport default {\n\tcomponents: {\n\t\tVideo,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tdisabled: false,\n\t\t\tstyle: 'icontext',\n\t\t}\n\t},\n\tcomputed: {\n\t\ttext() {\n\t\t\tif (this.style.includes('text')) {\n\t\t\t\treturn 'Generate content'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.wrapper {\n\tpadding: 0 12px;\n}\n\n.grid {\n\tdisplay: grid;\n\tgap: 12px;\n\tgrid-template-columns: 1fr 1fr;\n\tgrid-template-rows: repeat(auto-fill, auto);\n\tjustify-items: center;\n\tposition: relative;\n\tmargin: 12px 0;\n}\n\n.grid-3 {\n\tgrid-template-columns: 1fr 1fr 1fr;\n}\n\nh5 {\n\tfont-weight: bold;\n\tmargin: 40px 0 20px 0;\n}\n\np {\n\ttext-align: center;\n\tmargin: 4px 0 12px 0;\n\tcolor: var(--color-text-maxcontrast)\n}\n\nbutton {\n\tmargin: auto;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport { mdiCreation } from '@mdi/js'\nimport NcAssistantIcon from '../NcAssistantIcon/NcAssistantIcon.vue'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\n\nwithDefaults(defineProps<{\n\t/**\n\t * Toggles the disabled state of the button on and off.\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * The readable text of the button.\n\t * Can be overriden by using the `default` slot.\n\t *\n\t * If neither this is set nor the `default` slot is used, you will have to set at least `aria-label` or `aria-labelledby`.\n\t */\n\ttext?: string\n\n\t/**\n\t * The button variant.\n\t * In most cases the `secondary` style should be used.\n\t */\n\tvariant?: 'primary' | 'secondary'\n}>(), {\n\ttext: '',\n\tvariant: 'secondary',\n})\n\ndefineEmits<{\n\t/**\n\t * The mouse click event when the button is triggered.\n\t */\n\tclick: [MouseEvent]\n}>()\n</script>\n\n<template>\n\t<div\n\t\t:class=\"[{\n\t\t\t[$style.assistantButton_disabled!]: disabled,\n\t\t\t[$style.assistantButton_primary!]: variant === 'primary',\n\t\t}, $style.assistantButton]\">\n\t\t<NcButton\n\t\t\t:class=\"$style.assistantButton__button\"\n\t\t\t:disabled\n\t\t\tvariant=\"tertiary\"\n\t\t\t@click=\"$emit('click', $event)\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\tv-if=\"variant === 'primary'\"\n\t\t\t\t\t:class=\"$style.assistantButton__icon\"\n\t\t\t\t\t:path=\"mdiCreation\" />\n\t\t\t\t<NcAssistantIcon v-else />\n\t\t\t</template>\n\t\t\t<template v-if=\"text || $slots.default\" #default>\n\t\t\t\t<div :class=\"$style.assistantButton__text\">\n\t\t\t\t\t<slot>{{ text }}</slot>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n</template>\n\n<style module lang=\"scss\">\n.assistantButton {\n\t--assistant-button-color: var(--color-element-assistant, linear-gradient(238deg, #A569D3 12%, #00679E 39%, #422083 86%));\n\t--assistant-button-background-color: var(--color-background-assistant, #F6F5FF);\n\tbackground-image: var(--color-border-assistant, linear-gradient(125deg, #7398FE 50%, #6104A4 125%));\n\tborder-radius: var(--border-radius-element);\n\theight: var(--default-clickable-area);\n\twidth: fit-content;\n\tpadding-inline: 1px;\n\tpadding-block: 1px 2px;\n\n\t&_disabled {\n\t\tfilter: saturate(0.5);\n\t\topacity: 0.5;\n\t}\n\n\t&_primary {\n\t\t--assistant-button-color: white;\n\t\t--assistant-button-background-color: var(--color-element-assistant,linear-gradient(238deg, #A569D3 12%, #00679E 39%, #422083 86%));\n\n\t\t.assistantButton__icon,\n\t\t.assistantButton__text {\n\t\t\tcolor: white !important;\n\t\t}\n\t}\n\n\t&__button {\n\t\t--button-size: calc(var(--default-clickable-area) - 3px) !important;\n\t\tbackground-color: var(--assistant-button-background-color) !important;\n\t\tbackground-image: var(--assistant-button-background-color) !important;\n\t\tborder: none !important;\n\n\t\t&:hover {\n\t\t\tfilter: brightness(120%);\n\t\t}\n\t}\n\n\t&__text {\n\t\tbackground-image: var(--assistant-button-color);\n\t\tcolor: transparent !important;\n\t\tbackground-clip: text;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","disabled","variant","_createVNode","$emit","_createBlock","_unref","text","$slots","_createElementVNode","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;0BAsICA,mBAuBM,OAAA;AAAA,QAtBJ,OAAKC,eAAA,CAAA;AAAA,WAASC,KAAAA,OAAO,wBAAwB,GAAIC,KAAAA;AAAAA,WAAcD,KAAAA,OAAO,uBAAuB,GAAIE,KAAAA,YAAO;AAAA,QAAA,GAAqBF,KAAAA,OAAO,eAAe,CAAA;AAAA,MAAA;QAIpJG,YAiBW,UAAA;AAAA,UAhBT,OAAKJ,eAAEC,KAAAA,OAAO,uBAAuB;AAAA,UACrC,UAAAC,KAAAA;AAAAA,UACD,SAAQ;AAAA,UACP,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEG,KAAAA,MAAK,SAAU,MAAM;AAAA,QAAA;UAClB,cACV,MAGuB;AAAA,YAFhBF,KAAAA,YAAO,0BADdG,YAGuB,kBAAA;AAAA;cADrB,OAAKN,eAAEC,KAAAA,OAAO,qBAAqB;AAAA,cACnC,MAAMM,MAAA,WAAA;AAAA,YAAA,gDACRD,YAA0B,iBAAA,EAAA,KAAA,GAAA;AAAA,UAAA;;;UAEXE,KAAAA,QAAQC,KAAAA,OAAO;kBAAU;AAAA,wBACxC,MAEM;AAAA,cAFNC,mBAEM,OAAA;AAAA,gBAFA,OAAKV,eAAEC,KAAAA,OAAO,qBAAqB;AAAA,cAAA;gBACxCU,WAAuB,4BAAvB,MAAuB;AAAA,kDAAdH,KAAAA,IAAI,GAAA,CAAA;AAAA,gBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAssistantButton-D3v1Xk22.mjs","sources":["../../src/components/NcAssistantButton/NcAssistantButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n```vue\n<template>\n<div class=\"wrapper\">\n\t<!-- Style selector -->\n\t<div class=\"grid grid-3\">\n\t\t<NcCheckboxRadioSwitch v-model=\"style\" value=\"icon\" name=\"style\" type=\"radio\">Icon only</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"style\" value=\"icontext\" name=\"style\" type=\"radio\">Icon and text</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"disabled\" type=\"checkbox\">Disabled</NcCheckboxRadioSwitch>\n\t</div>\n\n\t<h5>Standard buttons</h5>\n\t<div class=\"grid\">\n\t\t<p>Secondary</p>\n\t\t<p>Primary</p>\n\t\t<NcAssistantButton\n\t\t\taria-label=\"Generate content\"\n\t\t\t:disabled\n\t\t\t:text>\n\t\t</NcAssistantButton>\n\t\t<NcAssistantButton\n\t\t\taria-label=\"Generate content\"\n\t\t\t:disabled\n\t\t\t:text\n\t\t\tvariant=\"primary\">\n\t\t</NcAssistantButton>\n\t</div>\n</div>\n\n</template>\n<script>\nimport Video from 'vue-material-design-icons/Video.vue'\n\nexport default {\n\tcomponents: {\n\t\tVideo,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tdisabled: false,\n\t\t\tstyle: 'icontext',\n\t\t}\n\t},\n\tcomputed: {\n\t\ttext() {\n\t\t\tif (this.style.includes('text')) {\n\t\t\t\treturn 'Generate content'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.wrapper {\n\tpadding: 0 12px;\n}\n\n.grid {\n\tdisplay: grid;\n\tgap: 12px;\n\tgrid-template-columns: 1fr 1fr;\n\tgrid-template-rows: repeat(auto-fill, auto);\n\tjustify-items: center;\n\tposition: relative;\n\tmargin: 12px 0;\n}\n\n.grid-3 {\n\tgrid-template-columns: 1fr 1fr 1fr;\n}\n\nh5 {\n\tfont-weight: bold;\n\tmargin: 40px 0 20px 0;\n}\n\np {\n\ttext-align: center;\n\tmargin: 4px 0 12px 0;\n\tcolor: var(--color-text-maxcontrast)\n}\n\nbutton {\n\tmargin: auto;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport { mdiCreation } from '@mdi/js'\nimport NcAssistantIcon from '../NcAssistantIcon/NcAssistantIcon.vue'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\n\nwithDefaults(defineProps<{\n\t/**\n\t * Toggles the disabled state of the button on and off.\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * The readable text of the button.\n\t * Can be overriden by using the `default` slot.\n\t *\n\t * If neither this is set nor the `default` slot is used, you will have to set at least `aria-label` or `aria-labelledby`.\n\t */\n\ttext?: string\n\n\t/**\n\t * The button variant.\n\t * In most cases the `secondary` style should be used.\n\t */\n\tvariant?: 'primary' | 'secondary'\n}>(), {\n\ttext: '',\n\tvariant: 'secondary',\n})\n\ndefineEmits<{\n\t/**\n\t * The mouse click event when the button is triggered.\n\t */\n\tclick: [MouseEvent]\n}>()\n</script>\n\n<template>\n\t<div\n\t\t:class=\"[{\n\t\t\t[$style.assistantButton_disabled!]: disabled,\n\t\t\t[$style.assistantButton_primary!]: variant === 'primary',\n\t\t}, $style.assistantButton]\">\n\t\t<NcButton\n\t\t\t:class=\"$style.assistantButton__button\"\n\t\t\t:disabled\n\t\t\tvariant=\"tertiary\"\n\t\t\t@click=\"$emit('click', $event)\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\tv-if=\"variant === 'primary'\"\n\t\t\t\t\t:class=\"$style.assistantButton__icon\"\n\t\t\t\t\t:path=\"mdiCreation\" />\n\t\t\t\t<NcAssistantIcon v-else />\n\t\t\t</template>\n\t\t\t<template v-if=\"text || $slots.default\" #default>\n\t\t\t\t<div :class=\"$style.assistantButton__text\">\n\t\t\t\t\t<slot>{{ text }}</slot>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n</template>\n\n<style module lang=\"scss\">\n.assistantButton {\n\t--assistant-button-color: var(--color-element-assistant, linear-gradient(238deg, #A569D3 12%, #00679E 39%, #422083 86%));\n\t--assistant-button-background-color: var(--color-background-assistant, #F6F5FF);\n\tbackground-image: var(--color-border-assistant, linear-gradient(125deg, #7398FE 50%, #6104A4 125%));\n\tborder-radius: var(--border-radius-element);\n\theight: var(--default-clickable-area);\n\twidth: fit-content;\n\tpadding-inline: 1px;\n\tpadding-block: 1px 2px;\n\n\t&_disabled {\n\t\tfilter: saturate(0.5);\n\t\topacity: 0.5;\n\t}\n\n\t&_primary {\n\t\t--assistant-button-color: white;\n\t\t--assistant-button-background-color: var(--color-element-assistant,linear-gradient(238deg, #A569D3 12%, #00679E 39%, #422083 86%));\n\n\t\t.assistantButton__icon,\n\t\t.assistantButton__text {\n\t\t\tcolor: white !important;\n\t\t}\n\t}\n\n\t&__button {\n\t\t--button-size: calc(var(--default-clickable-area) - 3px) !important;\n\t\tbackground-color: var(--assistant-button-background-color) !important;\n\t\tbackground-image: var(--assistant-button-background-color) !important;\n\t\tborder: none !important;\n\n\t\t&:hover {\n\t\t\tfilter: brightness(120%);\n\t\t}\n\t}\n\n\t&__text {\n\t\tbackground-image: var(--assistant-button-color);\n\t\tcolor: transparent !important;\n\t\tbackground-clip: text;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","disabled","variant","_createVNode","$emit","_createBlock","_unref","text","$slots","_createElementVNode","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;0BAsICA,mBAuBM,OAAA;AAAA,QAtBJ,OAAKC,eAAA,CAAA;AAAA,WAASC,KAAAA,OAAO,wBAAwB,GAAIC,KAAAA;AAAAA,WAAcD,KAAAA,OAAO,uBAAuB,GAAIE,KAAAA,YAAO;AAAA,QAAA,GAAqBF,KAAAA,OAAO,eAAe,CAAA;AAAA,MAAA;QAIpJG,YAiBW,UAAA;AAAA,UAhBT,OAAKJ,eAAEC,KAAAA,OAAO,uBAAuB;AAAA,UACrC,UAAAC,KAAAA;AAAAA,UACD,SAAQ;AAAA,UACP,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEG,KAAAA,MAAK,SAAU,MAAM;AAAA,QAAA;UAClB,cACV,MAGuB;AAAA,YAFhBF,KAAAA,YAAO,0BADdG,YAGuB,kBAAA;AAAA;cADrB,OAAKN,eAAEC,KAAAA,OAAO,qBAAqB;AAAA,cACnC,MAAMM,MAAA,WAAA;AAAA,YAAA,gDACRD,YAA0B,iBAAA,EAAA,KAAA,GAAA;AAAA,UAAA;;;UAEXE,KAAAA,QAAQC,KAAAA,OAAO;kBAAU;AAAA,wBACxC,MAEM;AAAA,cAFNC,mBAEM,OAAA;AAAA,gBAFA,OAAKV,eAAEC,KAAAA,OAAO,qBAAqB;AAAA,cAAA;gBACxCU,WAAuB,4BAAvB,MAAuB;AAAA,kDAAdH,KAAAA,IAAI,GAAA,CAAA;AAAA,gBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}