@nextcloud/vue 8.33.0 → 8.35.0

package/dist/chunks/{NcAppNavigationToggle-8lSuagjd.cjs.map → NcAppNavigationToggle-Ck-d5mHe.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigationToggle-8lSuagjd.cjs","sources":["../../node_modules/vue-material-design-icons/Menu.vue","../../node_modules/vue-material-design-icons/MenuOpen.vue","../../src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon menu-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=\"M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"MenuIcon\",\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 menu-open-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=\"M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"MenuOpenIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<div class=\"app-navigation-toggle-wrapper\">\n\t\t<NcButton\n\t\t\tclass=\"app-navigation-toggle\"\n\t\t\taria-controls=\"app-navigation-vue\"\n\t\t\t:aria-expanded=\"open ? 'true' : 'false'\"\n\t\t\t:aria-keyshortcuts=\"disableKeyboardShortcuts ? '' : 'n'\"\n\t\t\t:aria-label=\"label\"\n\t\t\t:title=\"label\"\n\t\t\tvariant=\"tertiary\"\n\t\t\t@click=\"toggleNavigation\">\n\t\t\t<template #icon>\n\t\t\t\t<MenuOpenIcon v-if=\"open\" :size=\"20\" />\n\t\t\t\t<MenuIcon v-else :size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport MenuIcon from 'vue-material-design-icons/Menu.vue'\nimport MenuOpenIcon from 'vue-material-design-icons/MenuOpen.vue'\nimport { t } from '../../l10n.js'\nimport NcButton from '../NcButton/index.js'\n\nconst disableKeyboardShortcuts = window.OCP?.Accessibility?.disableKeyboardShortcuts?.()\n\nexport default {\n\tname: 'NcAppNavigationToggle',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tMenuIcon,\n\t\tMenuOpenIcon,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Tracks whether the toggle has been clicked or not.\n\t\t * If it has been clicked, switches between the different MenuIcons\n\t\t * and emits a boolean indicating its opened status\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t},\n\n\temits: ['update:open'],\n\n\tsetup() {\n\t\treturn { disableKeyboardShortcuts }\n\t},\n\n\tcomputed: {\n\t\tlabel() {\n\t\t\treturn this.open\n\t\t\t\t? t('Close navigation')\n\t\t\t\t: t('Open navigation {shortcut}', { shortcut: disableKeyboardShortcuts ? '' : '[n]' }).trim()\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Once the toggle has been clicked, emits the toggle status\n\t\t * so parent components can gauge the status of the navigation button\n\t\t */\n\t\ttoggleNavigation() {\n\t\t\tthis.$emit('update:open', !this.open)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.app-navigation-toggle-wrapper {\n\tposition: absolute;\n\ttop: var(--app-navigation-padding);\n\tinset-inline-end: calc(0px - var(--app-navigation-padding));\n\tmargin-inline-end: calc(-1 * var(--default-clickable-area));\n}\n\nbutton.app-navigation-toggle {\n\tbackground-color: var(--color-main-background);\n}\n</style>\n"],"names":["_sfc_main","NcButton","t"],"mappings":";;;;AAoBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;AChBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;ACNA,MAAA,2BAAA,OAAA,KAAA,eAAA,2BAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC,SAAAA;AAAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,aAAA;AAAA,EAEA,QAAA;AACA,WAAA,EAAA,yBAAA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,QAAA;AACA,aAAA,KAAA,OACAC,MAAAA,EAAA,kBAAA,IACAA,MAAAA,EAAA,8BAAA,EAAA,UAAA,2BAAA,KAAA,MAAA,CAAA,EAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AACA,WAAA,MAAA,eAAA,CAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0,1]}
+{"version":3,"file":"NcAppNavigationToggle-Ck-d5mHe.cjs","sources":["../../node_modules/vue-material-design-icons/Menu.vue","../../node_modules/vue-material-design-icons/MenuOpen.vue","../../src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon menu-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=\"M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"MenuIcon\",\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 menu-open-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=\"M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"MenuOpenIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<div class=\"app-navigation-toggle-wrapper\">\n\t\t<NcButton\n\t\t\tclass=\"app-navigation-toggle\"\n\t\t\taria-controls=\"app-navigation-vue\"\n\t\t\t:aria-expanded=\"open ? 'true' : 'false'\"\n\t\t\t:aria-keyshortcuts=\"disableKeyboardShortcuts ? '' : 'n'\"\n\t\t\t:aria-label=\"label\"\n\t\t\t:title=\"label\"\n\t\t\tvariant=\"tertiary\"\n\t\t\t@click=\"toggleNavigation\">\n\t\t\t<template #icon>\n\t\t\t\t<MenuOpenIcon v-if=\"open\" :size=\"20\" />\n\t\t\t\t<MenuIcon v-else :size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport MenuIcon from 'vue-material-design-icons/Menu.vue'\nimport MenuOpenIcon from 'vue-material-design-icons/MenuOpen.vue'\nimport { t } from '../../l10n.js'\nimport NcButton from '../NcButton/index.js'\n\nconst disableKeyboardShortcuts = window.OCP?.Accessibility?.disableKeyboardShortcuts?.()\n\nexport default {\n\tname: 'NcAppNavigationToggle',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tMenuIcon,\n\t\tMenuOpenIcon,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Tracks whether the toggle has been clicked or not.\n\t\t * If it has been clicked, switches between the different MenuIcons\n\t\t * and emits a boolean indicating its opened status\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t},\n\n\temits: ['update:open'],\n\n\tsetup() {\n\t\treturn { disableKeyboardShortcuts }\n\t},\n\n\tcomputed: {\n\t\tlabel() {\n\t\t\treturn this.open\n\t\t\t\t? t('Close navigation')\n\t\t\t\t: t('Open navigation {shortcut}', { shortcut: disableKeyboardShortcuts ? '' : '[n]' }).trim()\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Once the toggle has been clicked, emits the toggle status\n\t\t * so parent components can gauge the status of the navigation button\n\t\t */\n\t\ttoggleNavigation() {\n\t\t\tthis.$emit('update:open', !this.open)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.app-navigation-toggle-wrapper {\n\tposition: absolute;\n\ttop: var(--app-navigation-padding);\n\tinset-inline-end: calc(0px - var(--app-navigation-padding));\n\tmargin-inline-end: calc(-1 * var(--default-clickable-area));\n}\n\nbutton.app-navigation-toggle {\n\tbackground-color: var(--color-main-background);\n}\n</style>\n"],"names":["_sfc_main","NcButton","t"],"mappings":";;;;AAoBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;AChBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;ACNA,MAAA,2BAAA,OAAA,KAAA,eAAA,2BAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC,SAAAA;AAAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,aAAA;AAAA,EAEA,QAAA;AACA,WAAA,EAAA,yBAAA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,QAAA;AACA,aAAA,KAAA,OACAC,MAAAA,EAAA,kBAAA,IACAA,MAAAA,EAAA,8BAAA,EAAA,UAAA,2BAAA,KAAA,MAAA,CAAA,EAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AACA,WAAA,MAAA,eAAA,CAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0,1]}

package/dist/chunks/{NcAppSettingsDialog-8YaW7ud3.mjs → NcAppSettingsDialog-PRGGDKCy.mjs}

@@ -1,13 +1,51 @@
-import '../assets/NcAppSettingsDialog-2axspyf-.css';
-import Vue, { defineComponent, provide, ref, shallowRef, computed, onBeforeUnmount } from "vue";
-import { useVModel } from "@vueuse/core";
+import '../assets/NcAppSettingsDialog-p8V4OFR1.css';
+import Vue, { defineComponent, inject, provide, ref, shallowRef, computed, onBeforeUnmount } from "vue";
+import { useVModel, toRef } from "@vueuse/core";
 import debounce from "debounce";
-import { N as NcDialog } from "./NcDialog-Bg0hY6TP.mjs";
+import { N as NcDialog } from "./NcDialog-8ipQ69_t.mjs";
 import NcVNodes from "../Components/NcVNodes.mjs";
-import { useIsMobile } from "../Composables/useIsMobile.mjs";
-import { r as register, a as t } from "./_l10n-BWisB7-O.mjs";
-import { A as APP_SETTINGS_REGISTRATION_KEY } from "./useAppSettingsDialog-Dn48dw1k.mjs";
+import { g as getLocalizedAppName, A as APP_VERSION } from "./appName-DA23ARcC.mjs";
+import { A as APP_SETTINGS_LEGACY_DESIGN_KEY, a as APP_SETTINGS_REGISTRATION_KEY } from "./useAppSettingsDialog-DbtEkXa4.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+import { useIsMobile } from "../Composables/useIsMobile.mjs";
+import { r as register, a as t } from "./_l10n-D3tJt_gL.mjs";
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "NcAppSettingsDialogVersion",
+  setup(__props) {
+    const legacy = inject(APP_SETTINGS_LEGACY_DESIGN_KEY);
+    const localizedAppName = getLocalizedAppName();
+    return { __sfc: true, legacy, localizedAppName, APP_VERSION };
+  }
+});
+const appSettingsDialogVersion = "_appSettingsDialogVersion_pq4io_20";
+const appSettingsDialogVersion__legacy = "_appSettingsDialogVersion__legacy_pq4io_27";
+const style0 = {
+  "material-design-icon": "_material-design-icon_pq4io_12",
+  appSettingsDialogVersion,
+  appSettingsDialogVersion__legacy
+};
+var _sfc_render$1 = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c("div", { class: [_vm.$style.appSettingsDialogVersion, { [_vm.$style.appSettingsDialogVersion__legacy]: _setup.legacy }] }, [_vm._v(" " + _vm._s(_setup.localizedAppName) + " " + _vm._s(_setup.APP_VERSION) + " ")]);
+};
+var _sfc_staticRenderFns$1 = [];
+const __cssModules = {
+  "$style": style0
+};
+function _sfc_injectStyles(ctx) {
+  for (var key in __cssModules) {
+    this[key] = __cssModules[key];
+  }
+}
+var __component__$1 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
+  _sfc_injectStyles,
+  null
+);
+const NcAppSettingsDialogVersion = __component__$1.exports;
 register();
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcAppSettingsDialog",
@@ -16,7 +54,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     showNavigation: { type: Boolean },
     container: { default: "body" },
     name: { default: "" },
-    additionalTrapElements: { default: () => [] }
+    additionalTrapElements: { default: () => [] },
+    legacy: { type: Boolean, default: true },
+    noVersion: { type: Boolean, default: false }
   },
   emits: ["update:open"],
   setup(__props, { emit }) {
@@ -26,6 +66,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       registerSection,
       unregisterSection
     });
+    provide(APP_SETTINGS_LEGACY_DESIGN_KEY, toRef(() => props.legacy));
     const settingsScroller = ref();
     const isMobile = useIsMobile();
     const selectedSection = ref("");
@@ -94,12 +135,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         selectedSection.value = registeredSections.value[0]?.id ?? "";
       }
     }
-    return { __sfc: true, props, emit, open, settingsScroller, isMobile, selectedSection, linkClicked, registeredSections, hasNavigation, hasNavigationIcons, unfocusNavigationItem, sectionsOrderMap, handleSettingsNavigationClick, handleCloseModal, handleScroll, registerSection, unregisterSection, NcDialog, NcVNodes, t };
+    return { __sfc: true, props, emit, open, settingsScroller, isMobile, selectedSection, linkClicked, registeredSections, hasNavigation, hasNavigationIcons, unfocusNavigationItem, sectionsOrderMap, handleSettingsNavigationClick, handleCloseModal, handleScroll, registerSection, unregisterSection, NcDialog, NcVNodes, NcAppSettingsDialogVersion, t };
   }
 });
-var _sfc_render = function render() {
+var _sfc_render = function render2() {
   var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
-  return _setup.open ? _c(_setup.NcDialog, { staticClass: "app-settings", attrs: { "content-classes": "app-settings__content", "navigation-classes": "app-settings__navigation", "additional-trap-elements": _vm.additionalTrapElements, "container": _vm.container, "close-on-click-outside": "", "navigation-aria-label": _setup.t("Settings navigation"), "size": "large", "name": _vm.name }, on: { "update:open": _setup.handleCloseModal }, scopedSlots: _vm._u([_setup.hasNavigation ? { key: "navigation", fn: function({ isCollapsed }) {
+  return _setup.open ? _c(_setup.NcDialog, { staticClass: "app-settings", attrs: { "content-classes": ["app-settings__content", { "app-settings__non-legacy": !_vm.legacy }], "navigation-classes": "app-settings__navigation", "additional-trap-elements": _vm.additionalTrapElements, "container": _vm.container, "close-on-click-outside": "", "navigation-aria-label": _setup.t("Settings navigation"), "size": "large", "name": _vm.name }, on: { "update:open": _setup.handleCloseModal }, scopedSlots: _vm._u([_setup.hasNavigation ? { key: "navigation", fn: function({ isCollapsed }) {
     return [!isCollapsed ? _c("ul", { staticClass: "navigation-list" }, _vm._l(_setup.registeredSections, function(section) {
       return _c("li", { key: section.id }, [_c("a", { staticClass: "navigation-list__link", class: {
         "navigation-list__link--active": section.id === _setup.selectedSection,
@@ -112,7 +153,7 @@ var _sfc_render = function render() {
         return _setup.handleSettingsNavigationClick(section.id);
       } } }, [_setup.hasNavigationIcons ? _c("div", { staticClass: "navigation-list__link-icon" }, [section.icon ? _c(_setup.NcVNodes, { attrs: { "vnodes": section.icon } }) : _vm._e()], 1) : _vm._e(), _c("span", { staticClass: "navigation-list__link-text" }, [_vm._v(" " + _vm._s(section.name) + " ")])])]);
     }), 0) : _vm._e()];
-  } } : null], null, true) }, [_c("div", { ref: "settingsScroller", on: { "scroll": _setup.handleScroll } }, [_vm._t("default")], 2)]) : _vm._e();
+  } } : null], null, true) }, [_c("div", { ref: "settingsScroller", on: { "scroll": _setup.handleScroll } }, [_vm._t("default"), !_vm.noVersion ? _c(_setup.NcAppSettingsDialogVersion) : _vm._e()], 2)]) : _vm._e();
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(
@@ -121,10 +162,10 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "5b9532ac"
+  "329ac599"
 );
 const NcAppSettingsDialog = __component__.exports;
 export {
   NcAppSettingsDialog as N
 };
-//# sourceMappingURL=NcAppSettingsDialog-8YaW7ud3.mjs.map
+//# sourceMappingURL=NcAppSettingsDialog-PRGGDKCy.mjs.map

package/dist/chunks/NcAppSettingsDialog-PRGGDKCy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsDialog-PRGGDKCy.mjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialogVersion.vue","../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.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 { inject } from 'vue'\nimport { APP_VERSION, getLocalizedAppName } from '../../utils/appName.ts'\nimport { APP_SETTINGS_LEGACY_DESIGN_KEY } from './useAppSettingsDialog.ts'\n\nconst legacy = inject(APP_SETTINGS_LEGACY_DESIGN_KEY)!\n\nconst localizedAppName = getLocalizedAppName()\n</script>\n\n<template>\n\t<div :class=\"[$style.appSettingsDialogVersion, { [$style.appSettingsDialogVersion__legacy]: legacy }]\">\n\t\t{{ localizedAppName }} {{ APP_VERSION }}\n\t</div>\n</template>\n\n<style lang=\"scss\" module>\n.appSettingsDialogVersion {\n    --form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n    color: var(--color-text-maxcontrast);\n    margin-block-end: calc(8 * var(--default-grid-baseline));\n    margin-inline: var(--form-element-label-offset);\n}\n\n.appSettingsDialogVersion__legacy {\n    margin-inline: 0;\n}\n</style>\n","<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { VNode } from 'vue'\n\nimport { toRef, useVModel } from '@vueuse/core'\nimport debounce from 'debounce'\nimport Vue, { computed, onBeforeUnmount, provide, ref, shallowRef } from 'vue'\nimport NcDialog from '../NcDialog/NcDialog.vue'\nimport NcVNodes from '../NcVNodes/NcVNodes.vue'\nimport NcAppSettingsDialogVersion from './NcAppSettingsDialogVersion.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.ts'\nimport { t } from '../../l10n.js'\nimport { APP_SETTINGS_LEGACY_DESIGN_KEY, APP_SETTINGS_REGISTRATION_KEY } from './useAppSettingsDialog.ts'\n\nexport interface IAppSettingsSection {\n\tid: string\n\tname: string\n\torder?: number\n\ticon?: VNode[]\n}\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Determines the open / closed state of the modal\n\t */\n\topen: boolean\n\n\t/**\n\t * Shows the navigation on desktop if true\n\t */\n\tshowNavigation?: boolean\n\n\t/**\n\t * Selector for the popover container\n\t */\n\tcontainer?: string\n\n\t/**\n\t * Name of the settings\n\t */\n\tname?: string\n\n\t/**\n\t * Additional elements to add to the focus trap\n\t */\n\tadditionalTrapElements?: (string | HTMLElement)[]\n\n\t/**\n\t * Use legacy design without any requirements for the section content\n\t *\n\t * @deprecated The legacy design is disabled by default on v9 and will be removed in future releases\n\t */\n\tlegacy?: boolean\n\n\t/**\n\t * Do not add the application version at the bottom of the dialog\n\t */\n\tnoVersion?: boolean\n}>(), {\n\tcontainer: 'body',\n\tname: '',\n\tadditionalTrapElements: () => [],\n\tlegacy: true, // eslint-disable-line vue/no-boolean-default -- changed to false in v9\n\tnoVersion: false,\n})\n\nconst emit = defineEmits<{\n\t(e: 'update:open', v: boolean): void\n}>()\n\nconst open = useVModel(props, 'open', emit, { passive: true })\n\nprovide(APP_SETTINGS_REGISTRATION_KEY, {\n\tregisterSection,\n\tunregisterSection,\n})\n\nprovide(APP_SETTINGS_LEGACY_DESIGN_KEY, toRef(() => props.legacy))\n\nconst settingsScroller = ref<HTMLDivElement>()\n\nconst isMobile = useIsMobile()\n\nconst selectedSection = ref('')\nconst linkClicked = ref(false)\nconst registeredSections = shallowRef<IAppSettingsSection[]>([])\n\nconst hasNavigation = computed(() => !isMobile.value && props.showNavigation)\n\n/**\n * Check if one or more navigation entries provide icons\n */\nconst hasNavigationIcons = computed(() => registeredSections.value.some(({ icon }) => !!icon))\n\n/**\n * Remove selected section once the user starts scrolling\n */\nconst unfocusNavigationItem = debounce(() => {\n\tselectedSection.value = ''\n\tif (document.activeElement?.className.includes('navigation-list__link')) {\n\t\t(document.activeElement as HTMLElement).blur()\n\t}\n}, 300)\n\n/**\n * Fallback order map to keep track of section orders if not provided by child components\n */\nconst sectionsOrderMap = new Map()\nonBeforeUnmount(() => {\n\tsectionsOrderMap.clear()\n})\n\n/**\n * Scrolls the content to the selected settings section.absolute\n *\n * @param item - the ID of the section\n */\nfunction handleSettingsNavigationClick(item: string) {\n\tlinkClicked.value = true\n\tdocument.getElementById('settings-section_' + item)!.scrollIntoView({\n\t\tbehavior: 'smooth',\n\t\tinline: 'nearest',\n\t})\n\tselectedSection.value = item\n\tsetTimeout(() => {\n\t\tlinkClicked.value = false\n\t}, 1000)\n}\n\n/**\n * Reset the dialog state when closed to have a clean state if re-opened.\n *\n * @param isOpen - The new modal open state\n */\nfunction handleCloseModal(isOpen: boolean) {\n\tif (isOpen) {\n\t\treturn\n\t}\n\n\topen.value = false\n\t// reset the scrolling state if the modal is just hidden\n\tsettingsScroller.value!.scrollTop = 0\n}\n\n/**\n * When scrolled manually we remove the focus from the navigation item.\n */\nfunction handleScroll() {\n\tif (open.value && !linkClicked.value) {\n\t\tunfocusNavigationItem()\n\t}\n}\n\n/**\n * Called when a new section is registered\n *\n * @param id - The section ID\n * @param name - The section name\n * @param order - Optional section order in navigation list\n * @param icon - Optional icon component\n */\nfunction registerSection(id: string, name: string, order?: number, icon?: VNode[]) {\n\t// Check for the uniqueness of section names\n\tif (registeredSections.value.some(({ id: otherId }) => id === otherId)) {\n\t\tthrow new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`)\n\t}\n\tif (registeredSections.value.some(({ name: otherName }) => name === otherName)) {\n\t\tVue.util.warn(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`)\n\t}\n\n\t// Ensure tab order is set\n\tif (order !== undefined) {\n\t\tsectionsOrderMap.set(id, order)\n\t} else if (sectionsOrderMap.has(id)) {\n\t\torder = sectionsOrderMap.get(id)\n\t} else {\n\t\t// Fallback to the closest positive number that isn't already taken\n\t\torder = Math.max(0, ...sectionsOrderMap.values()) + 1\n\t\tsectionsOrderMap.set(id, order)\n\t}\n\n\t// Sort sections by order in slots\n\tregisteredSections.value = [...registeredSections.value, { id, name, order, icon }]\n\t\t.sort(({ order: orderA }, { order: orderB }) => {\n\t\t\treturn orderA! - orderB!\n\t\t})\n\n\t// If this is the first section registered, set it as selected\n\tif (registeredSections.value.length === 1) {\n\t\tselectedSection.value = id\n\t}\n}\n\n/**\n * Called when a section is unregistered to remove it from dialog\n *\n * @param id - The section ID\n */\nfunction unregisterSection(id: string) {\n\tregisteredSections.value = registeredSections.value\n\t\t.filter(({ id: otherId }) => id !== otherId)\n\n\t// If the current section is unregistered, set the first section as selected\n\tif (selectedSection.value === id) {\n\t\tselectedSection.value = registeredSections.value[0]?.id ?? ''\n\t}\n}\n</script>\n\n<template>\n\t<NcDialog\n\t\tv-if=\"open\"\n\t\tclass=\"app-settings\"\n\t\t:content-classes=\"['app-settings__content', { 'app-settings__non-legacy': !legacy }]\"\n\t\tnavigation-classes=\"app-settings__navigation\"\n\t\t:additional-trap-elements=\"additionalTrapElements\"\n\t\t:container=\"container\"\n\t\tclose-on-click-outside\n\t\t:navigation-aria-label=\"t('Settings navigation')\"\n\t\tsize=\"large\"\n\t\t:name=\"name\"\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template v-if=\"hasNavigation\" #navigation=\"{ isCollapsed }\">\n\t\t\t<ul\n\t\t\t\tv-if=\"!isCollapsed\"\n\t\t\t\tclass=\"navigation-list\">\n\t\t\t\t<li v-for=\"section in registeredSections\" :key=\"section.id\">\n\t\t\t\t\t<a\n\t\t\t\t\t\t:aria-current=\"`${section.id === selectedSection}`\"\n\t\t\t\t\t\tclass=\"navigation-list__link\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'navigation-list__link--active': section.id === selectedSection,\n\t\t\t\t\t\t\t'navigation-list__link--icon': hasNavigationIcons,\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\t:href=\"`#settings-section_${section.id}`\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click.prevent=\"handleSettingsNavigationClick(section.id)\"\n\t\t\t\t\t\t@keydown.enter=\"handleSettingsNavigationClick(section.id)\">\n\t\t\t\t\t\t<div v-if=\"hasNavigationIcons\" class=\"navigation-list__link-icon\">\n\t\t\t\t\t\t\t<NcVNodes v-if=\"section.icon\" :vnodes=\"section.icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span class=\"navigation-list__link-text\">\n\t\t\t\t\t\t\t{{ section.name }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</template>\n\t\t<div ref=\"settingsScroller\" @scroll=\"handleScroll\">\n\t\t\t<slot />\n\t\t\t<NcAppSettingsDialogVersion v-if=\"!noVersion\" />\n\t\t</div>\n\t</NcDialog>\n</template>\n\n<style lang=\"scss\" scoped>\n.app-settings {\n\t:deep(.app-settings__navigation) {\n\t\tmin-width: 200px;\n\t\tmargin-right: calc(4 * var(--default-grid-baseline));\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tposition: relative;\n\t}\n\n\t:deep(.app-settings__content) {\n\t\tbox-sizing: border-box;\n\t\tpadding-inline: calc(4 * var(--default-grid-baseline));\n\n\t\t&.app-settings__non-legacy * {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t}\n}\n\n.navigation-list {\n\theight: 100%;\n\tbox-sizing: border-box;\n\toverflow-y: auto;\n\tpadding: calc(3 * var(--default-grid-baseline));\n\n\t&__link {\n\t\tdisplay: flex;\n\t\talign-content: center;\n\t\tfont-size: 16px;\n\t\theight: var(--default-clickable-area);\n\t\tmargin: 4px 0;\n\t\tline-height: var(--default-clickable-area);\n\t\tborder-radius: var(--border-radius-element, var(--border-radius-pill));\n\t\tfont-weight: bold;\n\t\tpadding: 0 calc(4 * var(--default-grid-baseline));\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\toverflow: hidden;\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&--active {\n\t\t\tbackground-color: var(--color-primary-element-light) !important;\n\t\t}\n\n\t\t&--icon {\n\t\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t\t\tgap: var(--default-grid-baseline);\n\t\t}\n\n\t\t&-icon {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-content: center;\n\t\t\twidth: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t\tmax-width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-settings {\n\t\t:deep .dialog__name {\n\t\t\tpadding-inline-start: 16px;\n\t\t}\n\t}\n}\n</style>\n\n<docs>\nJust nest the `AppSettingSections` component into `NcAppSettingsDialog`,\nproviding the section's name prop. You can put your settings within each\n`NcAppSettingsSection` component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog :open.sync=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Example name 1\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Example name 2\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Example name 3\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Example name 4\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-5\" name=\"Example name 5\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-6\" name=\"Example name 6\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-7\" name=\"Example name 7\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-8\" name=\"Example name 8\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-9\" name=\"Example name 9\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-10\" name=\"Example name 10\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also add icons to the section navigation:\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog :open.sync=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Instagram\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Instagram :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tInstagram setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Mastodon\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Mastodon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tMastodon setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Twitch\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitch :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tTwitch setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Twitter\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tTwitter setting\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nimport Instagram from 'vue-material-design-icons/Instagram.vue'\nimport Mastodon from 'vue-material-design-icons/Mastodon.vue'\nimport Twitch from 'vue-material-design-icons/Twitch.vue'\nimport Twitter from 'vue-material-design-icons/Twitter.vue'\n\nexport default {\n\tcomponents: {\n\t\tInstagram,\n\t\tMastodon,\n\t\tTwitch,\n\t\tTwitter,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nSections order in navigation list is defined during initial rendering.\nIn case of dynamic/conditional sections rendering explicit `order` prop must be used for ordering.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog :open.sync=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Example name 1\" :order=\"1\">\n\t\t\t\tSome example content\n\t\t\t\t<NcCheckboxRadioSwitch v-model=\"showExtraSections\">Show section 3</NcCheckboxRadioSwitch>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Example name 2\" :order=\"2\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<template v-if=\"showExtraSections\">\n\t\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Example name 3\" :order=\"3\">\n\t\t\t\t\tSome example content\n\t\t\t\t</NcAppSettingsSection>\n\t\t\t</template>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Example name 4\" :order=\"4\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tsettingsOpen: false,\n\t\t\t\tshowExtraSections: true,\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n### New design\n\n```vue\n<script>\nimport { mdiPlus, mdiDomain, mdiDockLeft, mdiDockBottom, mdiListBoxOutline, mdiPencilOutline, mdiTrashCanOutline, mdiMedalOutline, mdiEmailOutline } from '@mdi/js'\nexport default {\n\tsetup() {\n\t\treturn { mdiPlus, mdiDomain, mdiDockLeft, mdiDockBottom, mdiListBoxOutline, mdiPencilOutline, mdiTrashCanOutline, mdiMedalOutline, mdiEmailOutline }\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t\tswitchValue: true,\n\t\t\tlayout: 'vertical',\n\t\t\tsorting: 'asc',\n\t\t\treply: 'top',\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Mail Settings</NcButton>\n\t\t<NcAppSettingsDialog :open.sync=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\" :legacy=\"false\">\n\t\t\t<NcAppSettingsSection id=\"general\" name=\"General\">\n\t\t\t\t<NcButton wide>Set as default mail app</NcButton>\n\n\t\t\t\t<NcFormGroup label=\"Account settings\">\n\t\t\t\t\t<NcFormBox v-slot=\"{ itemClass }\">\n\t\t\t\t\t\t<NcFormBoxButton href=\"#\">user@example.com</NcFormBoxButton>\n\t\t\t\t\t\t<NcFormBoxButton href=\"#\">sales@example.com</NcFormBoxButton>\n\t\t\t\t\t\t<NcButton :class=\"itemClass\" wide>\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPlus\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tAdd mail account\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t</NcFormBox>\n\t\t\t\t</NcFormGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"appearance\" name=\"Appearance\">\n\t\t\t\t<NcFormBox>\n\t\t\t\t\t<NcFormBoxSwitch\n\t\t\t\t\t\tv-model=\"switchValue\"\n\t\t\t\t\t\tlabel=\"Show all messages in thread\"\n\t\t\t\t\t\tdescription=\"When off, only the selected messages will be shown\" />\n\t\t\t\t</NcFormBox>\n\t\t\t\t<NcRadioGroup v-model=\"layout\" label=\"Layout\">\n\t\t\t\t\t<NcRadioGroupButton label=\"Vertical\" value=\"vertical\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDockLeft\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t\t<NcRadioGroupButton label=\"Horizontal\" value=\"horizontal\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDockBottom\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t\t<NcRadioGroupButton label=\"List\" value=\"list\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiListBoxOutline\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t</NcRadioGroup>\n\t\t\t\t<NcRadioGroup v-model=\"sorting\" label=\"Sorting\">\n\t\t\t\t\t<NcRadioGroupButton label=\"Newest first\" value=\"asc\" />\n\t\t\t\t\t<NcRadioGroupButton label=\"Oldest first\" value=\"desc\" />\n\t\t\t\t</NcRadioGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"messages\" name=\"Messages\">\n\t\t\t\t<NcFormBox>\n\t\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Avatars from Gravatar and favicons\" />\n\t\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Determine importance using machine learning\" />\n\t\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Search the body of messages in Priority inbox\" />\n\t\t\t\t</NcFormBox>\n\t\t\t\t<NcRadioGroup v-model=\"reply\" label=\"Reply position\">\n\t\t\t\t\t<NcRadioGroupButton label=\"Top\" value=\"top\" />\n\t\t\t\t\t<NcRadioGroupButton label=\"Bottom\" value=\"bottom\" />\n\t\t\t\t</NcRadioGroup>\n\t\t\t\t<NcFormGroup\n\t\t\t\t\tlabel=\"Text blocks\"\n\t\t\t\t\tdescription=\"Reusable pieces of text that can be inserted in messages\">\n\t\t\t\t\t<NcListItem name=\"Title\">\n\t\t\t\t\t\t<template #subname>\n\t\t\t\t\t\t\tContent\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPencilOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcListItem name=\"Reply\">\n\t\t\t\t\t\t<template #subname>\n\t\t\t\t\t\t\tThank you for contacting us!\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPencilOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t</NcFormGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"privacy\" name=\"Privacy\">\n\t\t\t\t<NcFormBox>\n\t\t\t\t\t<NcFormBoxSwitch\n\t\t\t\t\t\tv-model=\"switchValue\"\n\t\t\t\t\t\tlabel=\"Data collection\"\n\t\t\t\t\t\tdescription=\"Allow the app to collect and process data locally to adapt to your preferences\" />\n\t\t\t\t</NcFormBox>\n\t\t\t\t<NcFormGroup label=\"Always show images from\">\n\t\t\t\t\t<NcListItem name=\"example.com\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcListItem name=\"example.net\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcListItem name=\"mail@example.org\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiEmailOutline\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t</NcFormGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"security\" name=\"Security\">\n\t\t\t\t<NcFormBox>\n\t\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Highlight external addresses\" />\n\t\t\t\t</NcFormBox>\n\t\t\t\t<NcFormGroup label=\"Internal addresses\">\n\t\t\t\t\t<NcListItem name=\"example.com\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcListItem name=\"example.company@example.net\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiEmailOutline\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcButton wide>Add internal address</NcButton>\n\t\t\t\t</NcFormGroup>\n\t\t\t\t<NcFormGroup label=\"S/MIME\">\n\t\t\t\t\t<NcButton wide>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiMedalOutline\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tManage certificates\n\t\t\t\t\t</NcButton>\n\t\t\t\t</NcFormGroup>\n\t\t\t\t<NcFormGroup label=\"Mailvelope\">\n\t\t\t\t\t<NcFormBox>\n\t\t\t\t\t\t<NcFormBoxButton\n\t\t\t\t\t\t\tlabel=\"Step 1\"\n\t\t\t\t\t\t\tdescription=\"Install the browser extension\"\n\t\t\t\t\t\t\thref=\"https://www.mailvelope.com/\"\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\tinverted-accent />\n\t\t\t\t\t\t<NcFormBoxButton\n\t\t\t\t\t\t\tlabel=\"Step 2\"\n\t\t\t\t\t\t\tdescription=\"Enable the current domain\"\n\t\t\t\t\t\t\tinverted-accent>\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcFormBoxButton>\n\t\t\t\t\t</NcFormBox>\n\t\t\t\t</NcFormGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"about\" name=\"About\">\n\t\t\t\t<NcFormGroup label=\"Acknowledgements\" description=\"This application includes CKEditor, an open-source editor. Copyright (C) CKEditor contributors. Licensed under GPLv2.\" />\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsShortcutsSection>\n\t\t\t\t<NcHotkeyList>\n\t\t\t\t\t<NcHotkey label=\"Compose new message\" hotkey=\"C\" />\n\t\t\t\t\t<NcHotkey label=\"Newer message\" hotkey=\"ArrowLeft\" />\n\t\t\t\t\t<NcHotkey label=\"Older message\" hotkey=\"ArrowRight\" />\n\t\t\t\t\t<NcHotkey label=\"Toggle star\" hotkey=\"S\" />\n\t\t\t\t\t<NcHotkey label=\"Toggle unread\" hotkey=\"U\" />\n\t\t\t\t\t<NcHotkey label=\"Archive\" hotkey=\"A\" />\n\t\t\t\t\t<NcHotkey label=\"Delete\" hotkey=\"Delete\" />\n\t\t\t\t\t<NcHotkey label=\"Search\" hotkey=\"Control F\" />\n\t\t\t\t\t<NcHotkey label=\"Send\" hotkey=\"Control Enter\" />\n\t\t\t\t\t<NcHotkey label=\"Refresh\" hotkey=\"R\" />\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":[],"mappings":"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"}

package/dist/chunks/{NcAppSettingsDialog--RlMIfbo.cjs → NcAppSettingsDialog-fOCnfyD-.cjs}

@@ -1,17 +1,55 @@
-require('../assets/NcAppSettingsDialog-2axspyf-.css');
+require('../assets/NcAppSettingsDialog-p8V4OFR1.css');
 "use strict";
 const Vue = require("vue");
 const core = require("@vueuse/core");
 const debounce = require("debounce");
-const NcDialog = require("./NcDialog-D020rlVy.cjs");
+const NcDialog = require("./NcDialog-WN4eYniZ.cjs");
 const Components_NcVNodes = require("../Components/NcVNodes.cjs");
-const Composables_useIsMobile = require("../Composables/useIsMobile.cjs");
-const _l10n = require("./_l10n-eOBJ3Dwl.cjs");
-const useAppSettingsDialog = require("./useAppSettingsDialog-CPqmms-u.cjs");
+const appName = require("./appName-D8lIU8jk.cjs");
+const useAppSettingsDialog = require("./useAppSettingsDialog-BfnyikIV.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+const Composables_useIsMobile = require("../Composables/useIsMobile.cjs");
+const _l10n = require("./_l10n-DWMcjgRh.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Vue__default = /* @__PURE__ */ _interopDefault(Vue);
 const debounce__default = /* @__PURE__ */ _interopDefault(debounce);
+const _sfc_main$1 = /* @__PURE__ */ Vue.defineComponent({
+  __name: "NcAppSettingsDialogVersion",
+  setup(__props) {
+    const legacy = Vue.inject(useAppSettingsDialog.APP_SETTINGS_LEGACY_DESIGN_KEY);
+    const localizedAppName = appName.getLocalizedAppName();
+    return { __sfc: true, legacy, localizedAppName, APP_VERSION: appName.APP_VERSION };
+  }
+});
+const appSettingsDialogVersion = "_appSettingsDialogVersion_pq4io_20";
+const appSettingsDialogVersion__legacy = "_appSettingsDialogVersion__legacy_pq4io_27";
+const style0 = {
+  "material-design-icon": "_material-design-icon_pq4io_12",
+  appSettingsDialogVersion,
+  appSettingsDialogVersion__legacy
+};
+var _sfc_render$1 = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c("div", { class: [_vm.$style.appSettingsDialogVersion, { [_vm.$style.appSettingsDialogVersion__legacy]: _setup.legacy }] }, [_vm._v(" " + _vm._s(_setup.localizedAppName) + " " + _vm._s(_setup.APP_VERSION) + " ")]);
+};
+var _sfc_staticRenderFns$1 = [];
+const __cssModules = {
+  "$style": style0
+};
+function _sfc_injectStyles(ctx) {
+  for (var key in __cssModules) {
+    this[key] = __cssModules[key];
+  }
+}
+var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
+  _sfc_injectStyles,
+  null
+);
+const NcAppSettingsDialogVersion = __component__$1.exports;
 _l10n.register();
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "NcAppSettingsDialog",
@@ -20,7 +58,9 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     showNavigation: { type: Boolean },
     container: { default: "body" },
     name: { default: "" },
-    additionalTrapElements: { default: () => [] }
+    additionalTrapElements: { default: () => [] },
+    legacy: { type: Boolean, default: true },
+    noVersion: { type: Boolean, default: false }
   },
   emits: ["update:open"],
   setup(__props, { emit }) {
@@ -30,6 +70,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       registerSection,
       unregisterSection
     });
+    Vue.provide(useAppSettingsDialog.APP_SETTINGS_LEGACY_DESIGN_KEY, core.toRef(() => props.legacy));
     const settingsScroller = Vue.ref();
     const isMobile = Composables_useIsMobile.useIsMobile();
     const selectedSection = Vue.ref("");
@@ -98,12 +139,12 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
         selectedSection.value = registeredSections.value[0]?.id ?? "";
       }
     }
-    return { __sfc: true, props, emit, open, settingsScroller, isMobile, selectedSection, linkClicked, registeredSections, hasNavigation, hasNavigationIcons, unfocusNavigationItem, sectionsOrderMap, handleSettingsNavigationClick, handleCloseModal, handleScroll, registerSection, unregisterSection, NcDialog: NcDialog.NcDialog, NcVNodes: Components_NcVNodes, t: _l10n.t };
+    return { __sfc: true, props, emit, open, settingsScroller, isMobile, selectedSection, linkClicked, registeredSections, hasNavigation, hasNavigationIcons, unfocusNavigationItem, sectionsOrderMap, handleSettingsNavigationClick, handleCloseModal, handleScroll, registerSection, unregisterSection, NcDialog: NcDialog.NcDialog, NcVNodes: Components_NcVNodes, NcAppSettingsDialogVersion, t: _l10n.t };
   }
 });
-var _sfc_render = function render() {
+var _sfc_render = function render2() {
   var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
-  return _setup.open ? _c(_setup.NcDialog, { staticClass: "app-settings", attrs: { "content-classes": "app-settings__content", "navigation-classes": "app-settings__navigation", "additional-trap-elements": _vm.additionalTrapElements, "container": _vm.container, "close-on-click-outside": "", "navigation-aria-label": _setup.t("Settings navigation"), "size": "large", "name": _vm.name }, on: { "update:open": _setup.handleCloseModal }, scopedSlots: _vm._u([_setup.hasNavigation ? { key: "navigation", fn: function({ isCollapsed }) {
+  return _setup.open ? _c(_setup.NcDialog, { staticClass: "app-settings", attrs: { "content-classes": ["app-settings__content", { "app-settings__non-legacy": !_vm.legacy }], "navigation-classes": "app-settings__navigation", "additional-trap-elements": _vm.additionalTrapElements, "container": _vm.container, "close-on-click-outside": "", "navigation-aria-label": _setup.t("Settings navigation"), "size": "large", "name": _vm.name }, on: { "update:open": _setup.handleCloseModal }, scopedSlots: _vm._u([_setup.hasNavigation ? { key: "navigation", fn: function({ isCollapsed }) {
     return [!isCollapsed ? _c("ul", { staticClass: "navigation-list" }, _vm._l(_setup.registeredSections, function(section) {
       return _c("li", { key: section.id }, [_c("a", { staticClass: "navigation-list__link", class: {
         "navigation-list__link--active": section.id === _setup.selectedSection,
@@ -116,7 +157,7 @@ var _sfc_render = function render() {
         return _setup.handleSettingsNavigationClick(section.id);
       } } }, [_setup.hasNavigationIcons ? _c("div", { staticClass: "navigation-list__link-icon" }, [section.icon ? _c(_setup.NcVNodes, { attrs: { "vnodes": section.icon } }) : _vm._e()], 1) : _vm._e(), _c("span", { staticClass: "navigation-list__link-text" }, [_vm._v(" " + _vm._s(section.name) + " ")])])]);
     }), 0) : _vm._e()];
-  } } : null], null, true) }, [_c("div", { ref: "settingsScroller", on: { "scroll": _setup.handleScroll } }, [_vm._t("default")], 2)]) : _vm._e();
+  } } : null], null, true) }, [_c("div", { ref: "settingsScroller", on: { "scroll": _setup.handleScroll } }, [_vm._t("default"), !_vm.noVersion ? _c(_setup.NcAppSettingsDialogVersion) : _vm._e()], 2)]) : _vm._e();
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
@@ -125,8 +166,8 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "5b9532ac"
+  "329ac599"
 );
 const NcAppSettingsDialog = __component__.exports;
 exports.NcAppSettingsDialog = NcAppSettingsDialog;
-//# sourceMappingURL=NcAppSettingsDialog--RlMIfbo.cjs.map
+//# sourceMappingURL=NcAppSettingsDialog-fOCnfyD-.cjs.map

package/dist/chunks/NcAppSettingsDialog-fOCnfyD-.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsDialog-fOCnfyD-.cjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialogVersion.vue","../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.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 { inject } from 'vue'\nimport { APP_VERSION, getLocalizedAppName } from '../../utils/appName.ts'\nimport { APP_SETTINGS_LEGACY_DESIGN_KEY } from './useAppSettingsDialog.ts'\n\nconst legacy = inject(APP_SETTINGS_LEGACY_DESIGN_KEY)!\n\nconst localizedAppName = getLocalizedAppName()\n</script>\n\n<template>\n\t<div :class=\"[$style.appSettingsDialogVersion, { [$style.appSettingsDialogVersion__legacy]: legacy }]\">\n\t\t{{ localizedAppName }} {{ APP_VERSION }}\n\t</div>\n</template>\n\n<style lang=\"scss\" module>\n.appSettingsDialogVersion {\n    --form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n    color: var(--color-text-maxcontrast);\n    margin-block-end: calc(8 * var(--default-grid-baseline));\n    margin-inline: var(--form-element-label-offset);\n}\n\n.appSettingsDialogVersion__legacy {\n    margin-inline: 0;\n}\n</style>\n","<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { VNode } from 'vue'\n\nimport { toRef, useVModel } from '@vueuse/core'\nimport debounce from 'debounce'\nimport Vue, { computed, onBeforeUnmount, provide, ref, shallowRef } from 'vue'\nimport NcDialog from '../NcDialog/NcDialog.vue'\nimport NcVNodes from '../NcVNodes/NcVNodes.vue'\nimport NcAppSettingsDialogVersion from './NcAppSettingsDialogVersion.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.ts'\nimport { t } from '../../l10n.js'\nimport { APP_SETTINGS_LEGACY_DESIGN_KEY, APP_SETTINGS_REGISTRATION_KEY } from './useAppSettingsDialog.ts'\n\nexport interface IAppSettingsSection {\n\tid: string\n\tname: string\n\torder?: number\n\ticon?: VNode[]\n}\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Determines the open / closed state of the modal\n\t */\n\topen: boolean\n\n\t/**\n\t * Shows the navigation on desktop if true\n\t */\n\tshowNavigation?: boolean\n\n\t/**\n\t * Selector for the popover container\n\t */\n\tcontainer?: string\n\n\t/**\n\t * Name of the settings\n\t */\n\tname?: string\n\n\t/**\n\t * Additional elements to add to the focus trap\n\t */\n\tadditionalTrapElements?: (string | HTMLElement)[]\n\n\t/**\n\t * Use legacy design without any requirements for the section content\n\t *\n\t * @deprecated The legacy design is disabled by default on v9 and will be removed in future releases\n\t */\n\tlegacy?: boolean\n\n\t/**\n\t * Do not add the application version at the bottom of the dialog\n\t */\n\tnoVersion?: boolean\n}>(), {\n\tcontainer: 'body',\n\tname: '',\n\tadditionalTrapElements: () => [],\n\tlegacy: true, // eslint-disable-line vue/no-boolean-default -- changed to false in v9\n\tnoVersion: false,\n})\n\nconst emit = defineEmits<{\n\t(e: 'update:open', v: boolean): void\n}>()\n\nconst open = useVModel(props, 'open', emit, { passive: true })\n\nprovide(APP_SETTINGS_REGISTRATION_KEY, {\n\tregisterSection,\n\tunregisterSection,\n})\n\nprovide(APP_SETTINGS_LEGACY_DESIGN_KEY, toRef(() => props.legacy))\n\nconst settingsScroller = ref<HTMLDivElement>()\n\nconst isMobile = useIsMobile()\n\nconst selectedSection = ref('')\nconst linkClicked = ref(false)\nconst registeredSections = shallowRef<IAppSettingsSection[]>([])\n\nconst hasNavigation = computed(() => !isMobile.value && props.showNavigation)\n\n/**\n * Check if one or more navigation entries provide icons\n */\nconst hasNavigationIcons = computed(() => registeredSections.value.some(({ icon }) => !!icon))\n\n/**\n * Remove selected section once the user starts scrolling\n */\nconst unfocusNavigationItem = debounce(() => {\n\tselectedSection.value = ''\n\tif (document.activeElement?.className.includes('navigation-list__link')) {\n\t\t(document.activeElement as HTMLElement).blur()\n\t}\n}, 300)\n\n/**\n * Fallback order map to keep track of section orders if not provided by child components\n */\nconst sectionsOrderMap = new Map()\nonBeforeUnmount(() => {\n\tsectionsOrderMap.clear()\n})\n\n/**\n * Scrolls the content to the selected settings section.absolute\n *\n * @param item - the ID of the section\n */\nfunction handleSettingsNavigationClick(item: string) {\n\tlinkClicked.value = true\n\tdocument.getElementById('settings-section_' + item)!.scrollIntoView({\n\t\tbehavior: 'smooth',\n\t\tinline: 'nearest',\n\t})\n\tselectedSection.value = item\n\tsetTimeout(() => {\n\t\tlinkClicked.value = false\n\t}, 1000)\n}\n\n/**\n * Reset the dialog state when closed to have a clean state if re-opened.\n *\n * @param isOpen - The new modal open state\n */\nfunction handleCloseModal(isOpen: boolean) {\n\tif (isOpen) {\n\t\treturn\n\t}\n\n\topen.value = false\n\t// reset the scrolling state if the modal is just hidden\n\tsettingsScroller.value!.scrollTop = 0\n}\n\n/**\n * When scrolled manually we remove the focus from the navigation item.\n */\nfunction handleScroll() {\n\tif (open.value && !linkClicked.value) {\n\t\tunfocusNavigationItem()\n\t}\n}\n\n/**\n * Called when a new section is registered\n *\n * @param id - The section ID\n * @param name - The section name\n * @param order - Optional section order in navigation list\n * @param icon - Optional icon component\n */\nfunction registerSection(id: string, name: string, order?: number, icon?: VNode[]) {\n\t// Check for the uniqueness of section names\n\tif (registeredSections.value.some(({ id: otherId }) => id === otherId)) {\n\t\tthrow new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`)\n\t}\n\tif (registeredSections.value.some(({ name: otherName }) => name === otherName)) {\n\t\tVue.util.warn(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`)\n\t}\n\n\t// Ensure tab order is set\n\tif (order !== undefined) {\n\t\tsectionsOrderMap.set(id, order)\n\t} else if (sectionsOrderMap.has(id)) {\n\t\torder = sectionsOrderMap.get(id)\n\t} else {\n\t\t// Fallback to the closest positive number that isn't already taken\n\t\torder = Math.max(0, ...sectionsOrderMap.values()) + 1\n\t\tsectionsOrderMap.set(id, order)\n\t}\n\n\t// Sort sections by order in slots\n\tregisteredSections.value = [...registeredSections.value, { id, name, order, icon }]\n\t\t.sort(({ order: orderA }, { order: orderB }) => {\n\t\t\treturn orderA! - orderB!\n\t\t})\n\n\t// If this is the first section registered, set it as selected\n\tif (registeredSections.value.length === 1) {\n\t\tselectedSection.value = id\n\t}\n}\n\n/**\n * Called when a section is unregistered to remove it from dialog\n *\n * @param id - The section ID\n */\nfunction unregisterSection(id: string) {\n\tregisteredSections.value = registeredSections.value\n\t\t.filter(({ id: otherId }) => id !== otherId)\n\n\t// If the current section is unregistered, set the first section as selected\n\tif (selectedSection.value === id) {\n\t\tselectedSection.value = registeredSections.value[0]?.id ?? ''\n\t}\n}\n</script>\n\n<template>\n\t<NcDialog\n\t\tv-if=\"open\"\n\t\tclass=\"app-settings\"\n\t\t:content-classes=\"['app-settings__content', { 'app-settings__non-legacy': !legacy }]\"\n\t\tnavigation-classes=\"app-settings__navigation\"\n\t\t:additional-trap-elements=\"additionalTrapElements\"\n\t\t:container=\"container\"\n\t\tclose-on-click-outside\n\t\t:navigation-aria-label=\"t('Settings navigation')\"\n\t\tsize=\"large\"\n\t\t:name=\"name\"\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template v-if=\"hasNavigation\" #navigation=\"{ isCollapsed }\">\n\t\t\t<ul\n\t\t\t\tv-if=\"!isCollapsed\"\n\t\t\t\tclass=\"navigation-list\">\n\t\t\t\t<li v-for=\"section in registeredSections\" :key=\"section.id\">\n\t\t\t\t\t<a\n\t\t\t\t\t\t:aria-current=\"`${section.id === selectedSection}`\"\n\t\t\t\t\t\tclass=\"navigation-list__link\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'navigation-list__link--active': section.id === selectedSection,\n\t\t\t\t\t\t\t'navigation-list__link--icon': hasNavigationIcons,\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\t:href=\"`#settings-section_${section.id}`\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click.prevent=\"handleSettingsNavigationClick(section.id)\"\n\t\t\t\t\t\t@keydown.enter=\"handleSettingsNavigationClick(section.id)\">\n\t\t\t\t\t\t<div v-if=\"hasNavigationIcons\" class=\"navigation-list__link-icon\">\n\t\t\t\t\t\t\t<NcVNodes v-if=\"section.icon\" :vnodes=\"section.icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span class=\"navigation-list__link-text\">\n\t\t\t\t\t\t\t{{ section.name }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</template>\n\t\t<div ref=\"settingsScroller\" @scroll=\"handleScroll\">\n\t\t\t<slot />\n\t\t\t<NcAppSettingsDialogVersion v-if=\"!noVersion\" />\n\t\t</div>\n\t</NcDialog>\n</template>\n\n<style lang=\"scss\" scoped>\n.app-settings {\n\t:deep(.app-settings__navigation) {\n\t\tmin-width: 200px;\n\t\tmargin-right: calc(4 * var(--default-grid-baseline));\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tposition: relative;\n\t}\n\n\t:deep(.app-settings__content) {\n\t\tbox-sizing: border-box;\n\t\tpadding-inline: calc(4 * var(--default-grid-baseline));\n\n\t\t&.app-settings__non-legacy * {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t}\n}\n\n.navigation-list {\n\theight: 100%;\n\tbox-sizing: border-box;\n\toverflow-y: auto;\n\tpadding: calc(3 * var(--default-grid-baseline));\n\n\t&__link {\n\t\tdisplay: flex;\n\t\talign-content: center;\n\t\tfont-size: 16px;\n\t\theight: var(--default-clickable-area);\n\t\tmargin: 4px 0;\n\t\tline-height: var(--default-clickable-area);\n\t\tborder-radius: var(--border-radius-element, var(--border-radius-pill));\n\t\tfont-weight: bold;\n\t\tpadding: 0 calc(4 * var(--default-grid-baseline));\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\toverflow: hidden;\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&--active {\n\t\t\tbackground-color: var(--color-primary-element-light) !important;\n\t\t}\n\n\t\t&--icon {\n\t\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t\t\tgap: var(--default-grid-baseline);\n\t\t}\n\n\t\t&-icon {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-content: center;\n\t\t\twidth: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t\tmax-width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-settings {\n\t\t:deep .dialog__name {\n\t\t\tpadding-inline-start: 16px;\n\t\t}\n\t}\n}\n</style>\n\n<docs>\nJust nest the `AppSettingSections` component into `NcAppSettingsDialog`,\nproviding the section's name prop. You can put your settings within each\n`NcAppSettingsSection` component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog :open.sync=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Example name 1\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Example name 2\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Example name 3\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Example name 4\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-5\" name=\"Example name 5\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-6\" name=\"Example name 6\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-7\" name=\"Example name 7\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-8\" name=\"Example name 8\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-9\" name=\"Example name 9\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-10\" name=\"Example name 10\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also add icons to the section navigation:\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog :open.sync=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Instagram\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Instagram :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tInstagram setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Mastodon\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Mastodon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tMastodon setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Twitch\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitch :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tTwitch setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Twitter\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tTwitter setting\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nimport Instagram from 'vue-material-design-icons/Instagram.vue'\nimport Mastodon from 'vue-material-design-icons/Mastodon.vue'\nimport Twitch from 'vue-material-design-icons/Twitch.vue'\nimport Twitter from 'vue-material-design-icons/Twitter.vue'\n\nexport default {\n\tcomponents: {\n\t\tInstagram,\n\t\tMastodon,\n\t\tTwitch,\n\t\tTwitter,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nSections order in navigation list is defined during initial rendering.\nIn case of dynamic/conditional sections rendering explicit `order` prop must be used for ordering.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog :open.sync=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Example name 1\" :order=\"1\">\n\t\t\t\tSome example content\n\t\t\t\t<NcCheckboxRadioSwitch v-model=\"showExtraSections\">Show section 3</NcCheckboxRadioSwitch>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Example name 2\" :order=\"2\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<template v-if=\"showExtraSections\">\n\t\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Example name 3\" :order=\"3\">\n\t\t\t\t\tSome example content\n\t\t\t\t</NcAppSettingsSection>\n\t\t\t</template>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Example name 4\" :order=\"4\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tsettingsOpen: false,\n\t\t\t\tshowExtraSections: true,\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n### New design\n\n```vue\n<script>\nimport { mdiPlus, mdiDomain, mdiDockLeft, mdiDockBottom, mdiListBoxOutline, mdiPencilOutline, mdiTrashCanOutline, mdiMedalOutline, mdiEmailOutline } from '@mdi/js'\nexport default {\n\tsetup() {\n\t\treturn { mdiPlus, mdiDomain, mdiDockLeft, mdiDockBottom, mdiListBoxOutline, mdiPencilOutline, mdiTrashCanOutline, mdiMedalOutline, mdiEmailOutline }\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t\tswitchValue: true,\n\t\t\tlayout: 'vertical',\n\t\t\tsorting: 'asc',\n\t\t\treply: 'top',\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Mail Settings</NcButton>\n\t\t<NcAppSettingsDialog :open.sync=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\" :legacy=\"false\">\n\t\t\t<NcAppSettingsSection id=\"general\" name=\"General\">\n\t\t\t\t<NcButton wide>Set as default mail app</NcButton>\n\n\t\t\t\t<NcFormGroup label=\"Account settings\">\n\t\t\t\t\t<NcFormBox v-slot=\"{ itemClass }\">\n\t\t\t\t\t\t<NcFormBoxButton href=\"#\">user@example.com</NcFormBoxButton>\n\t\t\t\t\t\t<NcFormBoxButton href=\"#\">sales@example.com</NcFormBoxButton>\n\t\t\t\t\t\t<NcButton :class=\"itemClass\" wide>\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPlus\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tAdd mail account\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t</NcFormBox>\n\t\t\t\t</NcFormGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"appearance\" name=\"Appearance\">\n\t\t\t\t<NcFormBox>\n\t\t\t\t\t<NcFormBoxSwitch\n\t\t\t\t\t\tv-model=\"switchValue\"\n\t\t\t\t\t\tlabel=\"Show all messages in thread\"\n\t\t\t\t\t\tdescription=\"When off, only the selected messages will be shown\" />\n\t\t\t\t</NcFormBox>\n\t\t\t\t<NcRadioGroup v-model=\"layout\" label=\"Layout\">\n\t\t\t\t\t<NcRadioGroupButton label=\"Vertical\" value=\"vertical\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDockLeft\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t\t<NcRadioGroupButton label=\"Horizontal\" value=\"horizontal\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDockBottom\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t\t<NcRadioGroupButton label=\"List\" value=\"list\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiListBoxOutline\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t</NcRadioGroup>\n\t\t\t\t<NcRadioGroup v-model=\"sorting\" label=\"Sorting\">\n\t\t\t\t\t<NcRadioGroupButton label=\"Newest first\" value=\"asc\" />\n\t\t\t\t\t<NcRadioGroupButton label=\"Oldest first\" value=\"desc\" />\n\t\t\t\t</NcRadioGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"messages\" name=\"Messages\">\n\t\t\t\t<NcFormBox>\n\t\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Avatars from Gravatar and favicons\" />\n\t\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Determine importance using machine learning\" />\n\t\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Search the body of messages in Priority inbox\" />\n\t\t\t\t</NcFormBox>\n\t\t\t\t<NcRadioGroup v-model=\"reply\" label=\"Reply position\">\n\t\t\t\t\t<NcRadioGroupButton label=\"Top\" value=\"top\" />\n\t\t\t\t\t<NcRadioGroupButton label=\"Bottom\" value=\"bottom\" />\n\t\t\t\t</NcRadioGroup>\n\t\t\t\t<NcFormGroup\n\t\t\t\t\tlabel=\"Text blocks\"\n\t\t\t\t\tdescription=\"Reusable pieces of text that can be inserted in messages\">\n\t\t\t\t\t<NcListItem name=\"Title\">\n\t\t\t\t\t\t<template #subname>\n\t\t\t\t\t\t\tContent\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPencilOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcListItem name=\"Reply\">\n\t\t\t\t\t\t<template #subname>\n\t\t\t\t\t\t\tThank you for contacting us!\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPencilOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t</NcFormGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"privacy\" name=\"Privacy\">\n\t\t\t\t<NcFormBox>\n\t\t\t\t\t<NcFormBoxSwitch\n\t\t\t\t\t\tv-model=\"switchValue\"\n\t\t\t\t\t\tlabel=\"Data collection\"\n\t\t\t\t\t\tdescription=\"Allow the app to collect and process data locally to adapt to your preferences\" />\n\t\t\t\t</NcFormBox>\n\t\t\t\t<NcFormGroup label=\"Always show images from\">\n\t\t\t\t\t<NcListItem name=\"example.com\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcListItem name=\"example.net\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcListItem name=\"mail@example.org\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiEmailOutline\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t</NcFormGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"security\" name=\"Security\">\n\t\t\t\t<NcFormBox>\n\t\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Highlight external addresses\" />\n\t\t\t\t</NcFormBox>\n\t\t\t\t<NcFormGroup label=\"Internal addresses\">\n\t\t\t\t\t<NcListItem name=\"example.com\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcListItem name=\"example.company@example.net\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiEmailOutline\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcButton wide>Add internal address</NcButton>\n\t\t\t\t</NcFormGroup>\n\t\t\t\t<NcFormGroup label=\"S/MIME\">\n\t\t\t\t\t<NcButton wide>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiMedalOutline\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tManage certificates\n\t\t\t\t\t</NcButton>\n\t\t\t\t</NcFormGroup>\n\t\t\t\t<NcFormGroup label=\"Mailvelope\">\n\t\t\t\t\t<NcFormBox>\n\t\t\t\t\t\t<NcFormBoxButton\n\t\t\t\t\t\t\tlabel=\"Step 1\"\n\t\t\t\t\t\t\tdescription=\"Install the browser extension\"\n\t\t\t\t\t\t\thref=\"https://www.mailvelope.com/\"\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\tinverted-accent />\n\t\t\t\t\t\t<NcFormBoxButton\n\t\t\t\t\t\t\tlabel=\"Step 2\"\n\t\t\t\t\t\t\tdescription=\"Enable the current domain\"\n\t\t\t\t\t\t\tinverted-accent>\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcFormBoxButton>\n\t\t\t\t\t</NcFormBox>\n\t\t\t\t</NcFormGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"about\" name=\"About\">\n\t\t\t\t<NcFormGroup label=\"Acknowledgements\" description=\"This application includes CKEditor, an open-source editor. Copyright (C) CKEditor contributors. Licensed under GPLv2.\" />\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsShortcutsSection>\n\t\t\t\t<NcHotkeyList>\n\t\t\t\t\t<NcHotkey label=\"Compose new message\" hotkey=\"C\" />\n\t\t\t\t\t<NcHotkey label=\"Newer message\" hotkey=\"ArrowLeft\" />\n\t\t\t\t\t<NcHotkey label=\"Older message\" hotkey=\"ArrowRight\" />\n\t\t\t\t\t<NcHotkey label=\"Toggle star\" hotkey=\"S\" />\n\t\t\t\t\t<NcHotkey label=\"Toggle unread\" hotkey=\"U\" />\n\t\t\t\t\t<NcHotkey label=\"Archive\" hotkey=\"A\" />\n\t\t\t\t\t<NcHotkey label=\"Delete\" hotkey=\"Delete\" />\n\t\t\t\t\t<NcHotkey label=\"Search\" hotkey=\"Control F\" />\n\t\t\t\t\t<NcHotkey label=\"Send\" hotkey=\"Control Enter\" />\n\t\t\t\t\t<NcHotkey label=\"Refresh\" hotkey=\"R\" />\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":["inject","APP_SETTINGS_LEGACY_DESIGN_KEY","getLocalizedAppName","useVModel","provide","APP_SETTINGS_REGISTRATION_KEY","toRef","ref","useIsMobile","shallowRef","computed","debounce","onBeforeUnmount","Vue"],"mappings":"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"}

package/dist/chunks/{NcAppSettingsSection-DVrBPuLD.mjs → NcAppSettingsSection-Cq1VIzMR.mjs}

@@ -1,12 +1,13 @@
-import '../assets/NcAppSettingsSection-CLSVNQzv.css';
-import { defineComponent, useSlots, computed, watch, onMounted, onBeforeUnmount } from "vue";
+import '../assets/NcAppSettingsSection-Yg4NYCih.css';
+import { defineComponent, useSlots, inject, computed, watch, onMounted, onBeforeUnmount } from "vue";
 import { l as logger } from "./logger-D3RVzcfQ.mjs";
-import { u as useAppSettingsDialog } from "./useAppSettingsDialog-Dn48dw1k.mjs";
+import { u as useAppSettingsDialog, A as APP_SETTINGS_LEGACY_DESIGN_KEY } from "./useAppSettingsDialog-DbtEkXa4.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcAppSettingsSection",
   props: {
     name: null,
+    description: null,
     id: null,
     order: null
   },
@@ -14,6 +15,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const slots = useSlots();
     const { registerSection, unregisterSection } = useAppSettingsDialog();
+    const legacy = inject(APP_SETTINGS_LEGACY_DESIGN_KEY);
     const htmlId = computed(() => "settings-section_" + props.id);
     watch(() => props.id, () => {
       if (!/^[a-z0-9\-_]+$/.test(props.id)) {
@@ -30,12 +32,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onBeforeUnmount(() => {
       unregisterSection(props.id);
     });
-    return { __sfc: true, props, slots, registerSection, unregisterSection, htmlId };
+    return { __sfc: true, props, slots, registerSection, unregisterSection, legacy, htmlId };
   }
 });
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
-  return _c("section", { staticClass: "app-settings-section", attrs: { "id": _setup.htmlId, "aria-labelledby": `${_setup.htmlId}--label` } }, [_c("h3", { staticClass: "app-settings-section__name", attrs: { "id": `${_setup.htmlId}--label` } }, [_vm._v(" " + _vm._s(_vm.name) + " ")]), _vm._t("default"), _vm._e()], 2);
+  return _c("section", { staticClass: "app-settings-section", class: { "app-settings-section__legacy": _setup.legacy }, attrs: { "id": _setup.htmlId, "aria-labelledby": `${_setup.htmlId}--label` } }, [_c("h3", { staticClass: "app-settings-section__name", attrs: { "id": `${_setup.htmlId}--label` } }, [_vm._v(" " + _vm._s(_vm.name) + " ")]), _c("div", { staticClass: "app-settings-section__description" }, [_vm._v(" " + _vm._s(_vm.description) + " ")]), _c("div", { staticClass: "app-settings-section__content" }, [_vm._t("default")], 2), _vm._e()], 2);
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(
@@ -44,10 +46,10 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "2b30ce44"
+  "06cd755d"
 );
 const NcAppSettingsSection = __component__.exports;
 export {
   NcAppSettingsSection as N
 };
-//# sourceMappingURL=NcAppSettingsSection-DVrBPuLD.mjs.map
+//# sourceMappingURL=NcAppSettingsSection-Cq1VIzMR.mjs.map

package/dist/chunks/NcAppSettingsSection-Cq1VIzMR.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsSection-Cq1VIzMR.mjs","sources":["../../src/components/NcAppSettingsSection/NcAppSettingsSection.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport { computed, inject, onBeforeUnmount, onMounted, useSlots, watch } from 'vue'\nimport { logger } from '../../utils/logger.ts'\nimport { APP_SETTINGS_LEGACY_DESIGN_KEY, useAppSettingsDialog } from '../NcAppSettingsDialog/useAppSettingsDialog.ts'\n\nconst props = defineProps<{\n\t/** Name of the section */\n\tname: string\n\t/** Optional description of the section */\n\tdescription?: string\n\t/** The id of the section */\n\tid: string\n\t/** The id of the section */\n\torder?: number\n}>()\n\nconst slots = useSlots()\nconst { registerSection, unregisterSection } = useAppSettingsDialog()\nconst legacy = inject(APP_SETTINGS_LEGACY_DESIGN_KEY)!\n\nconst htmlId = computed(() => 'settings-section_' + props.id)\n\n// Validate id prop - only alphanumeric, dash and underscore\nwatch(() => props.id, () => {\n\tif (!/^[a-z0-9\\-_]+$/.test(props.id)) {\n\t\tlogger.warn(`Invalid id prop: ${props.id}. Only alphanumeric, dash and underscore are allowed.`)\n\t}\n}, { immediate: true })\n\n// Reactive changes for section navigation\nwatch([() => props.id, () => props.name, () => props.order], (\n\t[newId, newName, newOrder],\n\t[oldId, ,],\n) => {\n\tunregisterSection(oldId)\n\tregisterSection(newId, newName, newOrder, slots?.icon?.())\n})\n\nonMounted(() => {\n\tregisterSection(props.id, props.name, props.order, slots?.icon?.())\n})\n\nonBeforeUnmount(() => {\n\tunregisterSection(props.id)\n})\n</script>\n\n<template>\n\t<section\n\t\t:id=\"htmlId\"\n\t\t:aria-labelledby=\"`${htmlId}--label`\"\n\t\tclass=\"app-settings-section\"\n\t\t:class=\"{ 'app-settings-section__legacy': legacy }\">\n\t\t<h3 :id=\"`${htmlId}--label`\" class=\"app-settings-section__name\">\n\t\t\t{{ name }}\n\t\t</h3>\n\t\t<div class=\"app-settings-section__description\">\n\t\t\t{{ description }}\n\t\t</div>\n\t\t<div class=\"app-settings-section__content\">\n\t\t\t<!-- @slot Section content -->\n\t\t\t<slot />\n\t\t</div>\n\t\t<!-- @slot Optional icon for the section in the navigation -->\n\t\t<slot v-if=\"false\" name=\"icon\" />\n\t</section>\n</template>\n\n<style lang=\"scss\" scoped>\n.app-settings-section {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n\t--app-settings-section-text-offset: var(--form-element-label-offset);\n\t--app-settings-section-content-gap: calc(6 * var(--default-grid-baseline));\n\tmargin-block-end: calc(8 * var(--default-grid-baseline));\n\n\t&__name {\n\t\tmargin: 0;\n\t\tpadding-inline: var(--app-settings-section-text-offset);\n\t\tpadding-block: 0;\n\t\tfont-size: 20px;\n\t\tfont-weight: bold;\n\t}\n\n\t&__description {\n\t\tpadding-inline: var(--app-settings-section-text-offset);\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__content {\n\t\tmargin-block-start: calc(2 * var(--default-grid-baseline));\n\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: stretch;\n\t\tgap: var(--app-settings-section-content-gap);\n\t}\n}\n\n.app-settings-section__legacy {\n\t--app-settings-section-text-offset: 0;\n\t--app-settings-section-content-gap: 0;\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAqBA,UAAM,QAAQ,SAAA;AACd,UAAM,EAAE,iBAAiB,kBAAA,IAAsB,qBAAA;AAC/C,UAAM,SAAS,OAAO,8BAA8B;AAEpD,UAAM,SAAS,SAAS,MAAM,sBAAsB,MAAM,EAAE;AAG5D,UAAM,MAAM,MAAM,IAAI,MAAM;AAC3B,UAAI,CAAC,iBAAiB,KAAK,MAAM,EAAE,GAAG;AACrC,eAAO,KAAK,oBAAoB,MAAM,EAAE,uDAAuD;AAAA,MAChG;AAAA,IACD,GAAG,EAAE,WAAW,MAAM;AAGtB,UAAM,CAAC,MAAM,MAAM,IAAI,MAAM,MAAM,MAAM,MAAM,MAAM,KAAK,GAAG,CAC5D,CAAC,OAAO,SAAS,QAAQ,GACzB,CAAC,cACG;AACJ,wBAAkB,KAAK;AACvB,sBAAgB,OAAO,SAAS,UAAU,OAAO,QAAQ;AAAA,IAC1D,CAAC;AAED,cAAU,MAAM;AACf,sBAAgB,MAAM,IAAI,MAAM,MAAM,MAAM,OAAO,OAAO,QAAQ;AAAA,IACnE,CAAC;AAED,oBAAgB,MAAM;AACrB,wBAAkB,MAAM,EAAE;AAAA,IAC3B,CAAC;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppSettingsSection-OPWPqi2Y.cjs → NcAppSettingsSection-Q5PB51ht.cjs}

@@ -1,13 +1,14 @@
-require('../assets/NcAppSettingsSection-CLSVNQzv.css');
+require('../assets/NcAppSettingsSection-Yg4NYCih.css');
 "use strict";
 const Vue = require("vue");
 const logger = require("./logger-3HuiEIF6.cjs");
-const useAppSettingsDialog = require("./useAppSettingsDialog-CPqmms-u.cjs");
+const useAppSettingsDialog = require("./useAppSettingsDialog-BfnyikIV.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "NcAppSettingsSection",
   props: {
     name: null,
+    description: null,
     id: null,
     order: null
   },
@@ -15,6 +16,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     const props = __props;
     const slots = Vue.useSlots();
     const { registerSection, unregisterSection } = useAppSettingsDialog.useAppSettingsDialog();
+    const legacy = Vue.inject(useAppSettingsDialog.APP_SETTINGS_LEGACY_DESIGN_KEY);
     const htmlId = Vue.computed(() => "settings-section_" + props.id);
     Vue.watch(() => props.id, () => {
       if (!/^[a-z0-9\-_]+$/.test(props.id)) {
@@ -31,12 +33,12 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     Vue.onBeforeUnmount(() => {
       unregisterSection(props.id);
     });
-    return { __sfc: true, props, slots, registerSection, unregisterSection, htmlId };
+    return { __sfc: true, props, slots, registerSection, unregisterSection, legacy, htmlId };
   }
 });
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
-  return _c("section", { staticClass: "app-settings-section", attrs: { "id": _setup.htmlId, "aria-labelledby": `${_setup.htmlId}--label` } }, [_c("h3", { staticClass: "app-settings-section__name", attrs: { "id": `${_setup.htmlId}--label` } }, [_vm._v(" " + _vm._s(_vm.name) + " ")]), _vm._t("default"), _vm._e()], 2);
+  return _c("section", { staticClass: "app-settings-section", class: { "app-settings-section__legacy": _setup.legacy }, attrs: { "id": _setup.htmlId, "aria-labelledby": `${_setup.htmlId}--label` } }, [_c("h3", { staticClass: "app-settings-section__name", attrs: { "id": `${_setup.htmlId}--label` } }, [_vm._v(" " + _vm._s(_vm.name) + " ")]), _c("div", { staticClass: "app-settings-section__description" }, [_vm._v(" " + _vm._s(_vm.description) + " ")]), _c("div", { staticClass: "app-settings-section__content" }, [_vm._t("default")], 2), _vm._e()], 2);
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
@@ -45,8 +47,8 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "2b30ce44"
+  "06cd755d"
 );
 const NcAppSettingsSection = __component__.exports;
 exports.NcAppSettingsSection = NcAppSettingsSection;
-//# sourceMappingURL=NcAppSettingsSection-OPWPqi2Y.cjs.map
+//# sourceMappingURL=NcAppSettingsSection-Q5PB51ht.cjs.map

package/dist/chunks/NcAppSettingsSection-Q5PB51ht.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsSection-Q5PB51ht.cjs","sources":["../../src/components/NcAppSettingsSection/NcAppSettingsSection.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport { computed, inject, onBeforeUnmount, onMounted, useSlots, watch } from 'vue'\nimport { logger } from '../../utils/logger.ts'\nimport { APP_SETTINGS_LEGACY_DESIGN_KEY, useAppSettingsDialog } from '../NcAppSettingsDialog/useAppSettingsDialog.ts'\n\nconst props = defineProps<{\n\t/** Name of the section */\n\tname: string\n\t/** Optional description of the section */\n\tdescription?: string\n\t/** The id of the section */\n\tid: string\n\t/** The id of the section */\n\torder?: number\n}>()\n\nconst slots = useSlots()\nconst { registerSection, unregisterSection } = useAppSettingsDialog()\nconst legacy = inject(APP_SETTINGS_LEGACY_DESIGN_KEY)!\n\nconst htmlId = computed(() => 'settings-section_' + props.id)\n\n// Validate id prop - only alphanumeric, dash and underscore\nwatch(() => props.id, () => {\n\tif (!/^[a-z0-9\\-_]+$/.test(props.id)) {\n\t\tlogger.warn(`Invalid id prop: ${props.id}. Only alphanumeric, dash and underscore are allowed.`)\n\t}\n}, { immediate: true })\n\n// Reactive changes for section navigation\nwatch([() => props.id, () => props.name, () => props.order], (\n\t[newId, newName, newOrder],\n\t[oldId, ,],\n) => {\n\tunregisterSection(oldId)\n\tregisterSection(newId, newName, newOrder, slots?.icon?.())\n})\n\nonMounted(() => {\n\tregisterSection(props.id, props.name, props.order, slots?.icon?.())\n})\n\nonBeforeUnmount(() => {\n\tunregisterSection(props.id)\n})\n</script>\n\n<template>\n\t<section\n\t\t:id=\"htmlId\"\n\t\t:aria-labelledby=\"`${htmlId}--label`\"\n\t\tclass=\"app-settings-section\"\n\t\t:class=\"{ 'app-settings-section__legacy': legacy }\">\n\t\t<h3 :id=\"`${htmlId}--label`\" class=\"app-settings-section__name\">\n\t\t\t{{ name }}\n\t\t</h3>\n\t\t<div class=\"app-settings-section__description\">\n\t\t\t{{ description }}\n\t\t</div>\n\t\t<div class=\"app-settings-section__content\">\n\t\t\t<!-- @slot Section content -->\n\t\t\t<slot />\n\t\t</div>\n\t\t<!-- @slot Optional icon for the section in the navigation -->\n\t\t<slot v-if=\"false\" name=\"icon\" />\n\t</section>\n</template>\n\n<style lang=\"scss\" scoped>\n.app-settings-section {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n\t--app-settings-section-text-offset: var(--form-element-label-offset);\n\t--app-settings-section-content-gap: calc(6 * var(--default-grid-baseline));\n\tmargin-block-end: calc(8 * var(--default-grid-baseline));\n\n\t&__name {\n\t\tmargin: 0;\n\t\tpadding-inline: var(--app-settings-section-text-offset);\n\t\tpadding-block: 0;\n\t\tfont-size: 20px;\n\t\tfont-weight: bold;\n\t}\n\n\t&__description {\n\t\tpadding-inline: var(--app-settings-section-text-offset);\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__content {\n\t\tmargin-block-start: calc(2 * var(--default-grid-baseline));\n\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: stretch;\n\t\tgap: var(--app-settings-section-content-gap);\n\t}\n}\n\n.app-settings-section__legacy {\n\t--app-settings-section-text-offset: 0;\n\t--app-settings-section-content-gap: 0;\n}\n</style>\n"],"names":["useSlots","useAppSettingsDialog","inject","APP_SETTINGS_LEGACY_DESIGN_KEY","computed","watch","logger","onMounted","onBeforeUnmount"],"mappings":";;;;;;;;;;;;;;;AAqBA,UAAM,QAAQA,IAAAA,SAAA;AACd,UAAM,EAAE,iBAAiB,kBAAA,IAAsBC,0CAAA;AAC/C,UAAM,SAASC,IAAAA,OAAOC,mDAA8B;AAEpD,UAAM,SAASC,IAAAA,SAAS,MAAM,sBAAsB,MAAM,EAAE;AAG5DC,cAAM,MAAM,MAAM,IAAI,MAAM;AAC3B,UAAI,CAAC,iBAAiB,KAAK,MAAM,EAAE,GAAG;AACrCC,eAAAA,OAAO,KAAK,oBAAoB,MAAM,EAAE,uDAAuD;AAAA,MAChG;AAAA,IACD,GAAG,EAAE,WAAW,MAAM;AAGtBD,QAAAA,MAAM,CAAC,MAAM,MAAM,IAAI,MAAM,MAAM,MAAM,MAAM,MAAM,KAAK,GAAG,CAC5D,CAAC,OAAO,SAAS,QAAQ,GACzB,CAAC,cACG;AACJ,wBAAkB,KAAK;AACvB,sBAAgB,OAAO,SAAS,UAAU,OAAO,QAAQ;AAAA,IAC1D,CAAC;AAEDE,QAAAA,UAAU,MAAM;AACf,sBAAgB,MAAM,IAAI,MAAM,MAAM,MAAM,OAAO,OAAO,QAAQ;AAAA,IACnE,CAAC;AAEDC,QAAAA,gBAAgB,MAAM;AACrB,wBAAkB,MAAM,EAAE;AAAA,IAC3B,CAAC;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppSettingsSectionShortcuts-CdP-4ktS.mjs → NcAppSettingsShortcutsSection-BGMDhIXI.mjs}

@@ -1,11 +1,11 @@
-import '../assets/NcAppSettingsSectionShortcuts-BuI-s4kd.css';
+import '../assets/NcAppSettingsShortcutsSection-BuI-s4kd.css';
 import { defineComponent } from "vue";
-import { N as NcAppSettingsSection } from "./NcAppSettingsSection-DVrBPuLD.mjs";
-import { r as register, a as t } from "./_l10n-BWisB7-O.mjs";
+import { N as NcAppSettingsSection } from "./NcAppSettingsSection-Cq1VIzMR.mjs";
+import { r as register, a as t } from "./_l10n-D3tJt_gL.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 register();
 const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "NcAppSettingsSectionShortcuts",
+  __name: "NcAppSettingsShortcutsSection",
   setup(__props) {
     return { __sfc: true, NcAppSettingsSection, t };
   }
@@ -36,8 +36,8 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_injectStyles,
   null
 );
-const NcAppSettingsSectionShortcuts = __component__.exports;
+const NcAppSettingsShortcutsSection = __component__.exports;
 export {
-  NcAppSettingsSectionShortcuts as N
+  NcAppSettingsShortcutsSection as N
 };
-//# sourceMappingURL=NcAppSettingsSectionShortcuts-CdP-4ktS.mjs.map
+//# sourceMappingURL=NcAppSettingsShortcutsSection-BGMDhIXI.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsShortcutsSection-BGMDhIXI.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppSettingsSectionShortcuts-CBYgfYGz.cjs → NcAppSettingsShortcutsSection-DI5YBdYf.cjs}

@@ -1,12 +1,12 @@
-require('../assets/NcAppSettingsSectionShortcuts-BuI-s4kd.css');
+require('../assets/NcAppSettingsShortcutsSection-BuI-s4kd.css');
 "use strict";
 const Vue = require("vue");
-const NcAppSettingsSection = require("./NcAppSettingsSection-OPWPqi2Y.cjs");
-const _l10n = require("./_l10n-eOBJ3Dwl.cjs");
+const NcAppSettingsSection = require("./NcAppSettingsSection-Q5PB51ht.cjs");
+const _l10n = require("./_l10n-DWMcjgRh.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 _l10n.register();
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
-  __name: "NcAppSettingsSectionShortcuts",
+  __name: "NcAppSettingsShortcutsSection",
   setup(__props) {
     return { __sfc: true, NcAppSettingsSection: NcAppSettingsSection.NcAppSettingsSection, t: _l10n.t };
   }
@@ -37,6 +37,6 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_injectStyles,
   null
 );
-const NcAppSettingsSectionShortcuts = __component__.exports;
-exports.NcAppSettingsSectionShortcuts = NcAppSettingsSectionShortcuts;
-//# sourceMappingURL=NcAppSettingsSectionShortcuts-CBYgfYGz.cjs.map
+const NcAppSettingsShortcutsSection = __component__.exports;
+exports.NcAppSettingsShortcutsSection = NcAppSettingsShortcutsSection;
+//# sourceMappingURL=NcAppSettingsShortcutsSection-DI5YBdYf.cjs.map