@nextcloud/vue 8.19.0 → 8.21.0

package/dist/chunks/{NcAppNavigationSettings-C-_G8yUn.cjs → NcAppNavigationSettings-BH5t68oV.cjs}

@@ -1,7 +1,7 @@
-require('../assets/NcMentionBubble-C6t8od-_.css');
-require('../assets/NcAppNavigationSettings-AzpTlUym.css');
+require('../assets/NcMentionBubble-Bt71nB8X.css');
+require('../assets/NcAppNavigationSettings-BV_QS8jh.css');
 "use strict";
-const _l10n = require("./_l10n-Ci9_UR5q.cjs");
+const _l10n = require("./_l10n-Ch5mEdUH.cjs");
 const Mixins_clickOutsideOptions = require("../Mixins/clickOutsideOptions.cjs");
 require("../Composables/useIsFullscreen.cjs");
 require("../Composables/useIsMobile.cjs");
@@ -36,7 +36,7 @@ const _sfc_main$1 = {
 };
 var _sfc_render$1 = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("span", _vm._b({ staticClass: "material-design-icon cog-icon", attrs: { "aria-hidden": _vm.title ? null : true, "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+  return _c("span", _vm._b({ staticClass: "material-design-icon cog-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
     return _vm.$emit("click", $event);
   } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
 };

package/dist/chunks/NcAppNavigationSettings-BH5t68oV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationSettings-BH5t68oV.cjs","sources":["../../node_modules/vue-material-design-icons/Cog.vue","../../src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon cog-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"CogIcon\",\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: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<div id=\"app-settings\"\n\t\tv-click-outside=\"clickOutsideConfig\"\n\t\t:class=\"{ open }\">\n\t\t<div id=\"app-settings__header\">\n\t\t\t<button class=\"settings-button\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t:aria-expanded=\"open ? 'true' : 'false'\"\n\t\t\t\taria-controls=\"app-settings__content\"\n\t\t\t\t@click=\"toggleMenu\">\n\t\t\t\t<Cog class=\"settings-button__icon\" :size=\"20\" />\n\t\t\t\t<span class=\"settings-button__label\">{{ name }}</span>\n\t\t\t</button>\n\t\t</div>\n\t\t<Transition name=\"slide-up\">\n\t\t\t<div v-show=\"open\" id=\"app-settings__content\">\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</Transition>\n\t</div>\n</template>\n\n<script>\nimport { t } from '../../l10n.js'\nimport { clickOutsideOptions } from '../../mixins/index.js'\n\nimport Cog from 'vue-material-design-icons/Cog.vue'\n\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\n\nexport default {\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\tcomponents: {\n\t\tCog,\n\t},\n\tmixins: [\n\t\tclickOutsideOptions,\n\t],\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: t('Settings'),\n\t\t},\n\t},\n\tdata() {\n\t\treturn {\n\t\t\topen: false,\n\t\t}\n\t},\n\tcomputed: {\n\t\tclickOutsideConfig() {\n\t\t\treturn [\n\t\t\t\tthis.closeMenu,\n\t\t\t\tthis.clickOutsideOptions,\n\t\t\t]\n\t\t},\n\t},\n\tmethods: {\n\t\ttoggleMenu() {\n\t\t\tthis.open = !this.open\n\t\t},\n\t\tcloseMenu() {\n\t\t\tthis.open = false\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n#app-settings {\n\tmargin-top: auto;\n\tpadding: $app-navigation-settings-margin;\n\n\t&__header {\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $app-navigation-settings-margin $app-navigation-settings-margin $app-navigation-settings-margin;\n\n\t\t.settings-button {\n\t\t\tdisplay: flex;\n\t\t\tflex: 1 1 0;\n\t\t\theight: var(--default-clickable-area);\n\t\t\twidth: 100%;\n\t\t\tpadding: 0;\n\t\t\tmargin: 0;\n\t\t\tbackground-color: transparent;\n\t\t\tbox-shadow: none;\n\t\t\tborder: 0;\n\t\t\tborder-radius: var(--body-container-radius);\n\t\t\ttext-align: left;\n\t\t\tfont-weight: normal;\n\t\t\tfont-size: 100%;\n\t\t\tcolor: var(--color-main-text);\n\t\t\tpadding-right: 14px;\n\t\t\tline-height: var(--default-clickable-area);\n\n\t\t\t&:hover,\n\t\t\t&:focus {\n\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t}\n\n\t\t\t&__icon {\n\t\t\t\twidth: var(--default-clickable-area);\n\t\t\t\theight: var(--default-clickable-area);\n\t\t\t\tmin-width: var(--default-clickable-area);\n\t\t\t}\n\t\t\t&__label {\n\t\t\t\toverflow: hidden;\n\t\t\t\tmax-width: 100%;\n\t\t\t\twhite-space: nowrap;\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__content {\n\t\tdisplay: block;\n\t\tpadding: 10px;\n\n\t\t/* prevent scrolled contents from stopping too early */\n\t\tmargin-bottom: -$app-navigation-settings-margin;\n\n\t\t/* restrict height of settings and make scrollable */\n\t\tmax-height: 300px;\n\t\toverflow-y: auto;\n\t\tbox-sizing: border-box;\n\t}\n}\n\n.slide-up-leave-active,\n.slide-up-enter-active {\n\ttransition-duration: var(--animation-slow);\n\ttransition-property: max-height, padding;\n\toverflow-y: hidden !important;\n}\n\n.slide-up-enter,\n.slide-up-leave-to {\n\tmax-height: 0 !important;\n\tpadding: 0 10px !important;\n}\n\n</style>\n"],"names":["_sfc_main","ClickOutside","clickOutsideOptions","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;;;;;;;;;;;;;;;;;ACDA,MAAA,YAAA;AAAA,EACA,YAAA;AAAA,IACA,cAAAC,WAAA;AAAA,EACA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,QAAA;AAAA,IACAC;AAAAA,EACA;AAAA,EACA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAAC,MAAA,EAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AACA,WAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA,IACA,qBAAA;AACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EACA,SAAA;AAAA,IACA,aAAA;AACA,WAAA,OAAA,CAAA,KAAA;AAAA,IACA;AAAA,IACA,YAAA;AACA,WAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/{NcAppNavigationSettings-DScz0UWm.mjs → NcAppNavigationSettings-CieV4qU5.mjs}

@@ -1,6 +1,6 @@
-import '../assets/NcMentionBubble-C6t8od-_.css';
-import '../assets/NcAppNavigationSettings-AzpTlUym.css';
-import { r as register, w as t44, a as t } from "./_l10n-JYjUKekn.mjs";
+import '../assets/NcMentionBubble-Bt71nB8X.css';
+import '../assets/NcAppNavigationSettings-BV_QS8jh.css';
+import { r as register, w as t44, a as t } from "./_l10n-B-QPoWAJ.mjs";
 import clickOutsideOptions from "../Mixins/clickOutsideOptions.mjs";
 import "../Composables/useIsFullscreen.mjs";
 import "../Composables/useIsMobile.mjs";
@@ -35,7 +35,7 @@ const _sfc_main$1 = {
 };
 var _sfc_render$1 = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("span", _vm._b({ staticClass: "material-design-icon cog-icon", attrs: { "aria-hidden": _vm.title ? null : true, "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+  return _c("span", _vm._b({ staticClass: "material-design-icon cog-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
     return _vm.$emit("click", $event);
   } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
 };

package/dist/chunks/NcAppNavigationSettings-CieV4qU5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationSettings-CieV4qU5.mjs","sources":["../../node_modules/vue-material-design-icons/Cog.vue","../../src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon cog-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"CogIcon\",\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: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<div id=\"app-settings\"\n\t\tv-click-outside=\"clickOutsideConfig\"\n\t\t:class=\"{ open }\">\n\t\t<div id=\"app-settings__header\">\n\t\t\t<button class=\"settings-button\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t:aria-expanded=\"open ? 'true' : 'false'\"\n\t\t\t\taria-controls=\"app-settings__content\"\n\t\t\t\t@click=\"toggleMenu\">\n\t\t\t\t<Cog class=\"settings-button__icon\" :size=\"20\" />\n\t\t\t\t<span class=\"settings-button__label\">{{ name }}</span>\n\t\t\t</button>\n\t\t</div>\n\t\t<Transition name=\"slide-up\">\n\t\t\t<div v-show=\"open\" id=\"app-settings__content\">\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</Transition>\n\t</div>\n</template>\n\n<script>\nimport { t } from '../../l10n.js'\nimport { clickOutsideOptions } from '../../mixins/index.js'\n\nimport Cog from 'vue-material-design-icons/Cog.vue'\n\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\n\nexport default {\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\tcomponents: {\n\t\tCog,\n\t},\n\tmixins: [\n\t\tclickOutsideOptions,\n\t],\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: t('Settings'),\n\t\t},\n\t},\n\tdata() {\n\t\treturn {\n\t\t\topen: false,\n\t\t}\n\t},\n\tcomputed: {\n\t\tclickOutsideConfig() {\n\t\t\treturn [\n\t\t\t\tthis.closeMenu,\n\t\t\t\tthis.clickOutsideOptions,\n\t\t\t]\n\t\t},\n\t},\n\tmethods: {\n\t\ttoggleMenu() {\n\t\t\tthis.open = !this.open\n\t\t},\n\t\tcloseMenu() {\n\t\t\tthis.open = false\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n#app-settings {\n\tmargin-top: auto;\n\tpadding: $app-navigation-settings-margin;\n\n\t&__header {\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $app-navigation-settings-margin $app-navigation-settings-margin $app-navigation-settings-margin;\n\n\t\t.settings-button {\n\t\t\tdisplay: flex;\n\t\t\tflex: 1 1 0;\n\t\t\theight: var(--default-clickable-area);\n\t\t\twidth: 100%;\n\t\t\tpadding: 0;\n\t\t\tmargin: 0;\n\t\t\tbackground-color: transparent;\n\t\t\tbox-shadow: none;\n\t\t\tborder: 0;\n\t\t\tborder-radius: var(--body-container-radius);\n\t\t\ttext-align: left;\n\t\t\tfont-weight: normal;\n\t\t\tfont-size: 100%;\n\t\t\tcolor: var(--color-main-text);\n\t\t\tpadding-right: 14px;\n\t\t\tline-height: var(--default-clickable-area);\n\n\t\t\t&:hover,\n\t\t\t&:focus {\n\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t}\n\n\t\t\t&__icon {\n\t\t\t\twidth: var(--default-clickable-area);\n\t\t\t\theight: var(--default-clickable-area);\n\t\t\t\tmin-width: var(--default-clickable-area);\n\t\t\t}\n\t\t\t&__label {\n\t\t\t\toverflow: hidden;\n\t\t\t\tmax-width: 100%;\n\t\t\t\twhite-space: nowrap;\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__content {\n\t\tdisplay: block;\n\t\tpadding: 10px;\n\n\t\t/* prevent scrolled contents from stopping too early */\n\t\tmargin-bottom: -$app-navigation-settings-margin;\n\n\t\t/* restrict height of settings and make scrollable */\n\t\tmax-height: 300px;\n\t\toverflow-y: auto;\n\t\tbox-sizing: border-box;\n\t}\n}\n\n.slide-up-leave-active,\n.slide-up-enter-active {\n\ttransition-duration: var(--animation-slow);\n\ttransition-property: max-height, padding;\n\toverflow-y: hidden !important;\n}\n\n.slide-up-enter,\n.slide-up-leave-to {\n\tmax-height: 0 !important;\n\tpadding: 0 10px !important;\n}\n\n</style>\n"],"names":["_sfc_main","ClickOutside"],"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;;;;;;;;;;;;;;;;;ACDA,MAAA,YAAA;AAAA,EACA,YAAA;AAAA,IACA,cAAAC;AAAAA,EACA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA,EAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AACA,WAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA,IACA,qBAAA;AACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EACA,SAAA;AAAA,IACA,aAAA;AACA,WAAA,OAAA,CAAA,KAAA;AAAA,IACA;AAAA,IACA,YAAA;AACA,WAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/{NcAppNavigationToggle-BXainLDc.mjs → NcAppNavigationToggle-Dw0ZPjy2.mjs}

@@ -1,6 +1,6 @@
-import '../assets/NcAppNavigationToggle-DvYpNzHv.css';
+import '../assets/NcAppNavigationToggle-Chtb7sE7.css';
 import NcButton from "../Components/NcButton.mjs";
-import { r as register, C as t19, a as t } from "./_l10n-JYjUKekn.mjs";
+import { r as register, C as t19, a as t } from "./_l10n-B-QPoWAJ.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 register(t19);
 const _sfc_main$2 = {
@@ -22,7 +22,7 @@ const _sfc_main$2 = {
 };
 var _sfc_render$2 = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("span", _vm._b({ staticClass: "material-design-icon menu-icon", attrs: { "aria-hidden": _vm.title ? null : true, "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+  return _c("span", _vm._b({ staticClass: "material-design-icon menu-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
     return _vm.$emit("click", $event);
   } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
 };
@@ -55,7 +55,7 @@ const _sfc_main$1 = {
 };
 var _sfc_render$1 = function render2() {
   var _vm = this, _c = _vm._self._c;
-  return _c("span", _vm._b({ staticClass: "material-design-icon menu-open-icon", attrs: { "aria-hidden": _vm.title ? null : true, "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+  return _c("span", _vm._b({ staticClass: "material-design-icon menu-open-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
     return _vm.$emit("click", $event);
   } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
 };
@@ -116,7 +116,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "b6024aba"
+  "75672696"
 );
 const NcAppNavigationToggle = __component__.exports;
 export {

package/dist/chunks/NcAppNavigationToggle-Dw0ZPjy2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationToggle-Dw0ZPjy2.mjs","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 class=\"app-navigation-toggle\"\n\t\t\ttype=\"tertiary\"\n\t\t\t:aria-expanded=\"open ? 'true' : 'false'\"\n\t\t\t:aria-label=\"label\"\n\t\t\t:title=\"label\"\n\t\t\taria-controls=\"app-navigation-vue\"\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 NcButton from '../NcButton/index.js'\nimport { t } from '../../l10n.js'\n\nimport MenuIcon from 'vue-material-design-icons/Menu.vue'\nimport MenuOpenIcon from 'vue-material-design-icons/MenuOpen.vue'\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\tcomputed: {\n\t\tlabel() {\n\t\t\treturn this.open ? t('Close navigation') : t('Open navigation')\n\t\t},\n\t},\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"],"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;;;;;;;;;;;;;;;;;ACPA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,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,UAAA;AAAA,IACA,QAAA;AACA,aAAA,KAAA,OAAA,EAAA,kBAAA,IAAA,EAAA,iBAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,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/{NcAppNavigationToggle-DAhbqsn_.cjs → NcAppNavigationToggle-Dwg-dMWx.cjs}

@@ -1,7 +1,7 @@
-require('../assets/NcAppNavigationToggle-DvYpNzHv.css');
+require('../assets/NcAppNavigationToggle-Chtb7sE7.css');
 "use strict";
 const Components_NcButton = require("../Components/NcButton.cjs");
-const _l10n = require("./_l10n-Ci9_UR5q.cjs");
+const _l10n = require("./_l10n-Ch5mEdUH.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 _l10n.register(_l10n.t19);
 const _sfc_main$2 = {
@@ -23,7 +23,7 @@ const _sfc_main$2 = {
 };
 var _sfc_render$2 = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("span", _vm._b({ staticClass: "material-design-icon menu-icon", attrs: { "aria-hidden": _vm.title ? null : true, "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+  return _c("span", _vm._b({ staticClass: "material-design-icon menu-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
     return _vm.$emit("click", $event);
   } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
 };
@@ -56,7 +56,7 @@ const _sfc_main$1 = {
 };
 var _sfc_render$1 = function render2() {
   var _vm = this, _c = _vm._self._c;
-  return _c("span", _vm._b({ staticClass: "material-design-icon menu-open-icon", attrs: { "aria-hidden": _vm.title ? null : true, "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+  return _c("span", _vm._b({ staticClass: "material-design-icon menu-open-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
     return _vm.$emit("click", $event);
   } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
 };
@@ -117,7 +117,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "b6024aba"
+  "75672696"
 );
 const NcAppNavigationToggle = __component__.exports;
 exports.NcAppNavigationToggle = NcAppNavigationToggle;

package/dist/chunks/NcAppNavigationToggle-Dwg-dMWx.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationToggle-Dwg-dMWx.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 class=\"app-navigation-toggle\"\n\t\t\ttype=\"tertiary\"\n\t\t\t:aria-expanded=\"open ? 'true' : 'false'\"\n\t\t\t:aria-label=\"label\"\n\t\t\t:title=\"label\"\n\t\t\taria-controls=\"app-navigation-vue\"\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 NcButton from '../NcButton/index.js'\nimport { t } from '../../l10n.js'\n\nimport MenuIcon from 'vue-material-design-icons/Menu.vue'\nimport MenuOpenIcon from 'vue-material-design-icons/MenuOpen.vue'\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\tcomputed: {\n\t\tlabel() {\n\t\t\treturn this.open ? t('Close navigation') : t('Open navigation')\n\t\t},\n\t},\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;;;;;;;;;;;;;;;;;ACPA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;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,UAAA;AAAA,IACA,QAAA;AACA,aAAA,KAAA,OAAAC,MAAAA,EAAA,kBAAA,IAAAA,MAAA,EAAA,iBAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,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-BxDO8Ivr.mjs → NcAppSettingsDialog-B4GS8urN.mjs}

@@ -1,8 +1,8 @@
-import '../assets/NcAppSettingsDialog-QF6aTZ3s.css';
-import { N as NcDialog } from "./NcDialog-DmcKxy4v.mjs";
+import '../assets/NcAppSettingsDialog-kKMMsdb3.css';
+import { N as NcDialog } from "./NcDialog-CzWTz2Qr.mjs";
 import NcVNodes from "../Components/NcVNodes.mjs";
 import { useIsMobile } from "../Composables/useIsMobile.mjs";
-import { r as register, m as t45, a as t } from "./_l10n-JYjUKekn.mjs";
+import { r as register, m as t45, a as t } from "./_l10n-B-QPoWAJ.mjs";
 import debounce from "debounce";
 import Vue from "vue";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
@@ -124,20 +124,14 @@ const _sfc_main = {
      */
     registerSection(id, name, icon) {
       if (this.sections.some(({ id: otherId }) => id === otherId)) {
-        throw new Error("Duplicate section id found: ".concat(id, ". Settings navigation sections must have unique section ids."));
+        throw new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`);
       }
       if (this.sections.some(({ name: otherName }) => name === otherName)) {
-        Vue.util.warn("Duplicate section name found: ".concat(name, ". Settings navigation sections must have unique section names."));
+        Vue.util.warn(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`);
       }
       const newSections = [...this.sections, { id, name, icon }];
       this.sections = newSections.sort(({ id: idA }, { id: idB }) => {
-        const indexOf = (id2) => {
-          var _a, _b, _c;
-          return (_c = (_b = (_a = this.$slots.default) == null ? void 0 : _a.findIndex) == null ? void 0 : _b.call(_a, (vnode) => {
-            var _a2, _b2;
-            return ((_b2 = (_a2 = vnode == null ? void 0 : vnode.componentOptions) == null ? void 0 : _a2.propsData) == null ? void 0 : _b2.id) === id2;
-          })) != null ? _c : -1;
-        };
+        const indexOf = (id2) => this.$slots.default?.findIndex?.((vnode) => vnode?.componentOptions?.propsData?.id === id2) ?? -1;
         return indexOf(idA) - indexOf(idB);
       });
       if (this.sections.length === 1) {
@@ -149,10 +143,9 @@ const _sfc_main = {
      * @param {string} id The section ID
      */
     unregisterSection(id) {
-      var _a, _b;
       this.sections = this.sections.filter(({ id: otherId }) => id !== otherId);
       if (this.selectedSection === id) {
-        this.selectedSection = (_b = (_a = this.sections[0]) == null ? void 0 : _a.id) != null ? _b : "";
+        this.selectedSection = this.sections[0]?.id ?? "";
       }
     },
     /**
@@ -202,7 +195,7 @@ var _sfc_render = function render() {
         "navigation-list__link": true,
         "navigation-list__link--active": section.id === _vm.selectedSection,
         "navigation-list__link--icon": _vm.hasNavigationIcons
-      }, attrs: { "aria-current": "".concat(section.id === _vm.selectedSection), "href": "#settings-section_".concat(section.id), "tabindex": "0" }, on: { "click": function($event) {
+      }, attrs: { "aria-current": `${section.id === _vm.selectedSection}`, "href": `#settings-section_${section.id}`, "tabindex": "0" }, on: { "click": function($event) {
         $event.preventDefault();
         return _vm.handleSettingsNavigationClick(section.id);
       }, "keydown": function($event) {

package/dist/chunks/{NcAppSettingsDialog-BxDO8Ivr.mjs.map → NcAppSettingsDialog-B4GS8urN.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcAppSettingsDialog-BxDO8Ivr.mjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\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</docs>\n\n<template>\n\t<NcDialog v-if=\"open\"\n\t\t:navigation-aria-label=\"settingsNavigationAriaLabel\"\n\t\tv-bind=\"dialogProperties\"\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template v-if=\"hasNavigation\" #navigation=\"{ isCollapsed }\">\n\t\t\t<ul v-if=\"!isCollapsed\"\n\t\t\t\tclass=\"navigation-list\">\n\t\t\t\t<li v-for=\"section in sections\" :key=\"section.id\">\n\t\t\t\t\t<a :aria-current=\"`${section.id === selectedSection}`\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'navigation-list__link': true,\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\">\n\t\t\t<slot />\n\t\t</div>\n\t</NcDialog>\n</template>\n\n<script>\nimport NcDialog from '../NcDialog/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { t } from '../../l10n.js'\n\nimport debounce from 'debounce'\nimport Vue from 'vue'\n\nexport default {\n\n\tname: 'NcAppSettingsDialog',\n\n\tcomponents: {\n\t\tNcDialog,\n\t\tNcVNodes,\n\t},\n\n\tprovide() {\n\t\treturn {\n\t\t\tregisterSection: this.registerSection,\n\t\t\tunregisterSection: this.unregisterSection,\n\t\t}\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Determines the open / closed state of the modal\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Shows the navigation on desktop if true\n\t\t */\n\t\tshowNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Name of the settings\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Additional elements to add to the focus trap\n\t\t */\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t},\n\n\temits: ['update:open'],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tselectedSection: '',\n\t\t\tlinkClicked: false,\n\t\t\taddedScrollListener: false,\n\t\t\tscroller: null,\n\t\t\t/**\n\t\t\t * Currently registered settings sections\n\t\t\t * @type {{ id: string, name: string, icon?: import('vue').VNode[] }[]}\n\t\t\t */\n\t\t\tsections: [],\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tdialogProperties() {\n\t\t\treturn {\n\t\t\t\tadditionalTrapElements: this.additionalTrapElements,\n\t\t\t\tcloseOnClickOutside: true,\n\t\t\t\tclass: 'app-settings',\n\t\t\t\tcontainer: this.container,\n\t\t\t\tcontentClasses: 'app-settings__content',\n\t\t\t\tsize: 'large',\n\t\t\t\tname: this.name,\n\t\t\t\tnavigationClasses: 'app-settings__navigation',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Check if one or more navigation entries provide icons\n\t\t */\n\t\thasNavigationIcons() {\n\t\t\treturn this.sections.some(({ icon }) => !!icon)\n\t\t},\n\n\t\thasNavigation() {\n\t\t\tif (this.isMobile || !this.showNavigation) {\n\t\t\t\treturn false\n\t\t\t} else {\n\t\t\t\treturn true\n\t\t\t}\n\t\t},\n\n\t\tsettingsNavigationAriaLabel() {\n\t\t\treturn t('Settings navigation')\n\t\t},\n\t},\n\n\tupdated() {\n\t\t// Check that the scroller element has been mounted\n\t\tif (!this.$refs.settingsScroller) {\n\t\t\treturn\n\t\t}\n\t\t// Get the scroller element\n\t\tthis.scroller = this.$refs.settingsScroller\n\t\tif (!this.addedScrollListener) {\n\t\t\tthis.scroller.addEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = true\n\t\t}\n\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Called when a new section is registered\n\t\t * @param {string} id The section ID\n\t\t * @param {string} name The section name\n\t\t * @param {import('vue').VNode[]|undefined} icon Optional icon component\n\t\t */\n\t\tregisterSection(id, name, icon) {\n\t\t\t// Check for the uniqueness of section names\n\t\t\tif (this.sections.some(({ id: otherId }) => id === otherId)) {\n\t\t\t\tthrow new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`)\n\t\t\t}\n\t\t\tif (this.sections.some(({ name: otherName }) => name === otherName)) {\n\t\t\t\tVue.util.warn(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`)\n\t\t\t}\n\n\t\t\tconst newSections = [...this.sections, { id, name, icon }]\n\t\t\t// Sort sections by order in slots\n\t\t\tthis.sections = newSections.sort(({ id: idA }, { id: idB }) => {\n\t\t\t\tconst indexOf = (id) => this.$slots.default?.findIndex?.(vnode => vnode?.componentOptions?.propsData?.id === id) ?? -1\n\t\t\t\treturn indexOf(idA) - indexOf(idB)\n\t\t\t})\n\n\t\t\t// If this is the first section registered, set it as selected\n\t\t\tif (this.sections.length === 1) {\n\t\t\t\tthis.selectedSection = id\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Called when a section is unregistered to remove it from dialog\n\t\t * @param {string} id The section ID\n\t\t */\n\t\tunregisterSection(id) {\n\t\t\tthis.sections = this.sections.filter(({ id: otherId }) => id !== otherId)\n\n\t\t\t// If the current section is unregistered, set the first section as selected\n\t\t\tif (this.selectedSection === id) {\n\t\t\t\tthis.selectedSection = this.sections[0]?.id ?? ''\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Scrolls the content to the selected settings section.absolute\n\t\t *\n\t\t * @param {string} item the ID of the section\n\t\t */\n\t\thandleSettingsNavigationClick(item) {\n\t\t\tthis.linkClicked = true\n\t\t\tdocument.getElementById('settings-section_' + item).scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t\tthis.selectedSection = item\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.linkClicked = false\n\t\t\t}, 1000)\n\t\t},\n\n\t\thandleCloseModal(isOpen) {\n\t\t\tif (isOpen) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.$emit('update:open', false)\n\t\t\t// Remove scroll listener each time the modal is closed\n\t\t\tthis.scroller.removeEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = false\n\t\t\tthis.scroller.scrollTop = 0\n\t\t},\n\n\t\thandleScroll() {\n\t\t\tif (!this.linkClicked) {\n\t\t\t\tthis.unfocusNavigationItem()\n\t\t\t}\n\t\t},\n\n\t\t// Remove selected section once the user starts scrolling\n\t\tunfocusNavigationItem: debounce(function() {\n\t\t\tthis.selectedSection = ''\n\t\t\tif (document.activeElement.className.includes('navigation-list__link')) {\n\t\t\t\tdocument.activeElement.blur()\n\t\t\t}\n\t\t}, 300),\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings {\n\t:deep &__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\t:deep &__content {\n\t\tbox-sizing: border-box;\n\t\tpadding-inline: calc(4 * var(--default-grid-baseline));\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"],"names":["id","_b","_a"],"mappings":"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"}
+{"version":3,"file":"NcAppSettingsDialog-B4GS8urN.mjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\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</docs>\n\n<template>\n\t<NcDialog v-if=\"open\"\n\t\t:navigation-aria-label=\"settingsNavigationAriaLabel\"\n\t\tv-bind=\"dialogProperties\"\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template v-if=\"hasNavigation\" #navigation=\"{ isCollapsed }\">\n\t\t\t<ul v-if=\"!isCollapsed\"\n\t\t\t\tclass=\"navigation-list\">\n\t\t\t\t<li v-for=\"section in sections\" :key=\"section.id\">\n\t\t\t\t\t<a :aria-current=\"`${section.id === selectedSection}`\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'navigation-list__link': true,\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\">\n\t\t\t<slot />\n\t\t</div>\n\t</NcDialog>\n</template>\n\n<script>\nimport NcDialog from '../NcDialog/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { t } from '../../l10n.js'\n\nimport debounce from 'debounce'\nimport Vue from 'vue'\n\nexport default {\n\n\tname: 'NcAppSettingsDialog',\n\n\tcomponents: {\n\t\tNcDialog,\n\t\tNcVNodes,\n\t},\n\n\tprovide() {\n\t\treturn {\n\t\t\tregisterSection: this.registerSection,\n\t\t\tunregisterSection: this.unregisterSection,\n\t\t}\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Determines the open / closed state of the modal\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Shows the navigation on desktop if true\n\t\t */\n\t\tshowNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Name of the settings\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Additional elements to add to the focus trap\n\t\t */\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t},\n\n\temits: ['update:open'],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tselectedSection: '',\n\t\t\tlinkClicked: false,\n\t\t\taddedScrollListener: false,\n\t\t\tscroller: null,\n\t\t\t/**\n\t\t\t * Currently registered settings sections\n\t\t\t * @type {{ id: string, name: string, icon?: import('vue').VNode[] }[]}\n\t\t\t */\n\t\t\tsections: [],\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tdialogProperties() {\n\t\t\treturn {\n\t\t\t\tadditionalTrapElements: this.additionalTrapElements,\n\t\t\t\tcloseOnClickOutside: true,\n\t\t\t\tclass: 'app-settings',\n\t\t\t\tcontainer: this.container,\n\t\t\t\tcontentClasses: 'app-settings__content',\n\t\t\t\tsize: 'large',\n\t\t\t\tname: this.name,\n\t\t\t\tnavigationClasses: 'app-settings__navigation',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Check if one or more navigation entries provide icons\n\t\t */\n\t\thasNavigationIcons() {\n\t\t\treturn this.sections.some(({ icon }) => !!icon)\n\t\t},\n\n\t\thasNavigation() {\n\t\t\tif (this.isMobile || !this.showNavigation) {\n\t\t\t\treturn false\n\t\t\t} else {\n\t\t\t\treturn true\n\t\t\t}\n\t\t},\n\n\t\tsettingsNavigationAriaLabel() {\n\t\t\treturn t('Settings navigation')\n\t\t},\n\t},\n\n\tupdated() {\n\t\t// Check that the scroller element has been mounted\n\t\tif (!this.$refs.settingsScroller) {\n\t\t\treturn\n\t\t}\n\t\t// Get the scroller element\n\t\tthis.scroller = this.$refs.settingsScroller\n\t\tif (!this.addedScrollListener) {\n\t\t\tthis.scroller.addEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = true\n\t\t}\n\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Called when a new section is registered\n\t\t * @param {string} id The section ID\n\t\t * @param {string} name The section name\n\t\t * @param {import('vue').VNode[]|undefined} icon Optional icon component\n\t\t */\n\t\tregisterSection(id, name, icon) {\n\t\t\t// Check for the uniqueness of section names\n\t\t\tif (this.sections.some(({ id: otherId }) => id === otherId)) {\n\t\t\t\tthrow new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`)\n\t\t\t}\n\t\t\tif (this.sections.some(({ name: otherName }) => name === otherName)) {\n\t\t\t\tVue.util.warn(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`)\n\t\t\t}\n\n\t\t\tconst newSections = [...this.sections, { id, name, icon }]\n\t\t\t// Sort sections by order in slots\n\t\t\tthis.sections = newSections.sort(({ id: idA }, { id: idB }) => {\n\t\t\t\tconst indexOf = (id) => this.$slots.default?.findIndex?.(vnode => vnode?.componentOptions?.propsData?.id === id) ?? -1\n\t\t\t\treturn indexOf(idA) - indexOf(idB)\n\t\t\t})\n\n\t\t\t// If this is the first section registered, set it as selected\n\t\t\tif (this.sections.length === 1) {\n\t\t\t\tthis.selectedSection = id\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Called when a section is unregistered to remove it from dialog\n\t\t * @param {string} id The section ID\n\t\t */\n\t\tunregisterSection(id) {\n\t\t\tthis.sections = this.sections.filter(({ id: otherId }) => id !== otherId)\n\n\t\t\t// If the current section is unregistered, set the first section as selected\n\t\t\tif (this.selectedSection === id) {\n\t\t\t\tthis.selectedSection = this.sections[0]?.id ?? ''\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Scrolls the content to the selected settings section.absolute\n\t\t *\n\t\t * @param {string} item the ID of the section\n\t\t */\n\t\thandleSettingsNavigationClick(item) {\n\t\t\tthis.linkClicked = true\n\t\t\tdocument.getElementById('settings-section_' + item).scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t\tthis.selectedSection = item\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.linkClicked = false\n\t\t\t}, 1000)\n\t\t},\n\n\t\thandleCloseModal(isOpen) {\n\t\t\tif (isOpen) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.$emit('update:open', false)\n\t\t\t// Remove scroll listener each time the modal is closed\n\t\t\tthis.scroller.removeEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = false\n\t\t\tthis.scroller.scrollTop = 0\n\t\t},\n\n\t\thandleScroll() {\n\t\t\tif (!this.linkClicked) {\n\t\t\t\tthis.unfocusNavigationItem()\n\t\t\t}\n\t\t},\n\n\t\t// Remove selected section once the user starts scrolling\n\t\tunfocusNavigationItem: debounce(function() {\n\t\t\tthis.selectedSection = ''\n\t\t\tif (document.activeElement.className.includes('navigation-list__link')) {\n\t\t\t\tdocument.activeElement.blur()\n\t\t\t}\n\t\t}, 300),\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings {\n\t:deep &__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\t:deep &__content {\n\t\tbox-sizing: border-box;\n\t\tpadding-inline: calc(4 * var(--default-grid-baseline));\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"],"names":["id"],"mappings":";;;;;;;;AAwKA,MAAA,YAAA;AAAA,EAEA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,WAAA;AAAA,MACA,iBAAA,KAAA;AAAA,MACA,mBAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,IACA;AAAA,EAEA;AAAA,EAEA,OAAA,CAAA,aAAA;AAAA,EAEA,QAAA;AACA,WAAA;AAAA,MACA,UAAA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA,aAAA;AAAA,MACA,qBAAA;AAAA,MACA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAKA,UAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,mBAAA;AACA,aAAA;AAAA,QACA,wBAAA,KAAA;AAAA,QACA,qBAAA;AAAA,QACA,OAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,gBAAA;AAAA,QACA,MAAA;AAAA,QACA,MAAA,KAAA;AAAA,QACA,mBAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AACA,aAAA,KAAA,SAAA,KAAA,CAAA,EAAA,KAAA,MAAA,CAAA,CAAA,IAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,UAAA,KAAA,YAAA,CAAA,KAAA,gBAAA;AACA,eAAA;AAAA,MACA,OAAA;AACA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,8BAAA;AACA,aAAA,EAAA,qBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAEA,QAAA,CAAA,KAAA,MAAA,kBAAA;AACA;AAAA,IACA;AAEA,SAAA,WAAA,KAAA,MAAA;AACA,QAAA,CAAA,KAAA,qBAAA;AACA,WAAA,SAAA,iBAAA,UAAA,KAAA,YAAA;AACA,WAAA,sBAAA;AAAA,IACA;AAAA,EAEA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,gBAAA,IAAA,MAAA,MAAA;AAEA,UAAA,KAAA,SAAA,KAAA,CAAA,EAAA,IAAA,QAAA,MAAA,OAAA,OAAA,GAAA;AACA,cAAA,IAAA,MAAA,+BAAA,EAAA,8DAAA;AAAA,MACA;AACA,UAAA,KAAA,SAAA,KAAA,CAAA,EAAA,MAAA,UAAA,MAAA,SAAA,SAAA,GAAA;AACA,YAAA,KAAA,KAAA,iCAAA,IAAA,gEAAA;AAAA,MACA;AAEA,YAAA,cAAA,CAAA,GAAA,KAAA,UAAA,EAAA,IAAA,MAAA,MAAA;AAEA,WAAA,WAAA,YAAA,KAAA,CAAA,EAAA,IAAA,OAAA,EAAA,IAAA,UAAA;AACA,cAAA,UAAA,CAAAA,QAAA,KAAA,OAAA,SAAA,YAAA,WAAA,OAAA,kBAAA,WAAA,OAAAA,GAAA,KAAA;AACA,eAAA,QAAA,GAAA,IAAA,QAAA,GAAA;AAAA,MACA,CAAA;AAGA,UAAA,KAAA,SAAA,WAAA,GAAA;AACA,aAAA,kBAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,kBAAA,IAAA;AACA,WAAA,WAAA,KAAA,SAAA,OAAA,CAAA,EAAA,IAAA,QAAA,MAAA,OAAA,OAAA;AAGA,UAAA,KAAA,oBAAA,IAAA;AACA,aAAA,kBAAA,KAAA,SAAA,CAAA,GAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,8BAAA,MAAA;AACA,WAAA,cAAA;AACA,eAAA,eAAA,sBAAA,IAAA,EAAA,eAAA;AAAA,QACA,UAAA;AAAA,QACA,QAAA;AAAA,MACA,CAAA;AACA,WAAA,kBAAA;AACA,iBAAA,MAAA;AACA,aAAA,cAAA;AAAA,MACA,GAAA,GAAA;AAAA,IACA;AAAA,IAEA,iBAAA,QAAA;AACA,UAAA,QAAA;AACA;AAAA,MACA;AAEA,WAAA,MAAA,eAAA,KAAA;AAEA,WAAA,SAAA,oBAAA,UAAA,KAAA,YAAA;AACA,WAAA,sBAAA;AACA,WAAA,SAAA,YAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,UAAA,CAAA,KAAA,aAAA;AACA,aAAA,sBAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA,IAGA,uBAAA,SAAA,WAAA;AACA,WAAA,kBAAA;AACA,UAAA,SAAA,cAAA,UAAA,SAAA,uBAAA,GAAA;AACA,iBAAA,cAAA,KAAA;AAAA,MACA;AAAA,IACA,GAAA,GAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppSettingsDialog-niXwDCmG.cjs → NcAppSettingsDialog-Dkl3cqU-.cjs}

@@ -1,9 +1,9 @@
-require('../assets/NcAppSettingsDialog-QF6aTZ3s.css');
+require('../assets/NcAppSettingsDialog-kKMMsdb3.css');
 "use strict";
-const NcDialog = require("./NcDialog-D9l7GQQJ.cjs");
+const NcDialog = require("./NcDialog-CWGgSCpv.cjs");
 const Components_NcVNodes = require("../Components/NcVNodes.cjs");
 const Composables_useIsMobile = require("../Composables/useIsMobile.cjs");
-const _l10n = require("./_l10n-Ci9_UR5q.cjs");
+const _l10n = require("./_l10n-Ch5mEdUH.cjs");
 const debounce = require("debounce");
 const Vue = require("vue");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
@@ -128,20 +128,14 @@ const _sfc_main = {
      */
     registerSection(id, name, icon) {
       if (this.sections.some(({ id: otherId }) => id === otherId)) {
-        throw new Error("Duplicate section id found: ".concat(id, ". Settings navigation sections must have unique section ids."));
+        throw new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`);
       }
       if (this.sections.some(({ name: otherName }) => name === otherName)) {
-        Vue__default.default.util.warn("Duplicate section name found: ".concat(name, ". Settings navigation sections must have unique section names."));
+        Vue__default.default.util.warn(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`);
       }
       const newSections = [...this.sections, { id, name, icon }];
       this.sections = newSections.sort(({ id: idA }, { id: idB }) => {
-        const indexOf = (id2) => {
-          var _a, _b, _c;
-          return (_c = (_b = (_a = this.$slots.default) == null ? void 0 : _a.findIndex) == null ? void 0 : _b.call(_a, (vnode) => {
-            var _a2, _b2;
-            return ((_b2 = (_a2 = vnode == null ? void 0 : vnode.componentOptions) == null ? void 0 : _a2.propsData) == null ? void 0 : _b2.id) === id2;
-          })) != null ? _c : -1;
-        };
+        const indexOf = (id2) => this.$slots.default?.findIndex?.((vnode) => vnode?.componentOptions?.propsData?.id === id2) ?? -1;
         return indexOf(idA) - indexOf(idB);
       });
       if (this.sections.length === 1) {
@@ -153,10 +147,9 @@ const _sfc_main = {
      * @param {string} id The section ID
      */
     unregisterSection(id) {
-      var _a, _b;
       this.sections = this.sections.filter(({ id: otherId }) => id !== otherId);
       if (this.selectedSection === id) {
-        this.selectedSection = (_b = (_a = this.sections[0]) == null ? void 0 : _a.id) != null ? _b : "";
+        this.selectedSection = this.sections[0]?.id ?? "";
       }
     },
     /**
@@ -206,7 +199,7 @@ var _sfc_render = function render() {
         "navigation-list__link": true,
         "navigation-list__link--active": section.id === _vm.selectedSection,
         "navigation-list__link--icon": _vm.hasNavigationIcons
-      }, attrs: { "aria-current": "".concat(section.id === _vm.selectedSection), "href": "#settings-section_".concat(section.id), "tabindex": "0" }, on: { "click": function($event) {
+      }, attrs: { "aria-current": `${section.id === _vm.selectedSection}`, "href": `#settings-section_${section.id}`, "tabindex": "0" }, on: { "click": function($event) {
         $event.preventDefault();
         return _vm.handleSettingsNavigationClick(section.id);
       }, "keydown": function($event) {

package/dist/chunks/{NcAppSettingsDialog-niXwDCmG.cjs.map → NcAppSettingsDialog-Dkl3cqU-.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcAppSettingsDialog-niXwDCmG.cjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\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</docs>\n\n<template>\n\t<NcDialog v-if=\"open\"\n\t\t:navigation-aria-label=\"settingsNavigationAriaLabel\"\n\t\tv-bind=\"dialogProperties\"\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template v-if=\"hasNavigation\" #navigation=\"{ isCollapsed }\">\n\t\t\t<ul v-if=\"!isCollapsed\"\n\t\t\t\tclass=\"navigation-list\">\n\t\t\t\t<li v-for=\"section in sections\" :key=\"section.id\">\n\t\t\t\t\t<a :aria-current=\"`${section.id === selectedSection}`\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'navigation-list__link': true,\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\">\n\t\t\t<slot />\n\t\t</div>\n\t</NcDialog>\n</template>\n\n<script>\nimport NcDialog from '../NcDialog/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { t } from '../../l10n.js'\n\nimport debounce from 'debounce'\nimport Vue from 'vue'\n\nexport default {\n\n\tname: 'NcAppSettingsDialog',\n\n\tcomponents: {\n\t\tNcDialog,\n\t\tNcVNodes,\n\t},\n\n\tprovide() {\n\t\treturn {\n\t\t\tregisterSection: this.registerSection,\n\t\t\tunregisterSection: this.unregisterSection,\n\t\t}\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Determines the open / closed state of the modal\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Shows the navigation on desktop if true\n\t\t */\n\t\tshowNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Name of the settings\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Additional elements to add to the focus trap\n\t\t */\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t},\n\n\temits: ['update:open'],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tselectedSection: '',\n\t\t\tlinkClicked: false,\n\t\t\taddedScrollListener: false,\n\t\t\tscroller: null,\n\t\t\t/**\n\t\t\t * Currently registered settings sections\n\t\t\t * @type {{ id: string, name: string, icon?: import('vue').VNode[] }[]}\n\t\t\t */\n\t\t\tsections: [],\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tdialogProperties() {\n\t\t\treturn {\n\t\t\t\tadditionalTrapElements: this.additionalTrapElements,\n\t\t\t\tcloseOnClickOutside: true,\n\t\t\t\tclass: 'app-settings',\n\t\t\t\tcontainer: this.container,\n\t\t\t\tcontentClasses: 'app-settings__content',\n\t\t\t\tsize: 'large',\n\t\t\t\tname: this.name,\n\t\t\t\tnavigationClasses: 'app-settings__navigation',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Check if one or more navigation entries provide icons\n\t\t */\n\t\thasNavigationIcons() {\n\t\t\treturn this.sections.some(({ icon }) => !!icon)\n\t\t},\n\n\t\thasNavigation() {\n\t\t\tif (this.isMobile || !this.showNavigation) {\n\t\t\t\treturn false\n\t\t\t} else {\n\t\t\t\treturn true\n\t\t\t}\n\t\t},\n\n\t\tsettingsNavigationAriaLabel() {\n\t\t\treturn t('Settings navigation')\n\t\t},\n\t},\n\n\tupdated() {\n\t\t// Check that the scroller element has been mounted\n\t\tif (!this.$refs.settingsScroller) {\n\t\t\treturn\n\t\t}\n\t\t// Get the scroller element\n\t\tthis.scroller = this.$refs.settingsScroller\n\t\tif (!this.addedScrollListener) {\n\t\t\tthis.scroller.addEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = true\n\t\t}\n\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Called when a new section is registered\n\t\t * @param {string} id The section ID\n\t\t * @param {string} name The section name\n\t\t * @param {import('vue').VNode[]|undefined} icon Optional icon component\n\t\t */\n\t\tregisterSection(id, name, icon) {\n\t\t\t// Check for the uniqueness of section names\n\t\t\tif (this.sections.some(({ id: otherId }) => id === otherId)) {\n\t\t\t\tthrow new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`)\n\t\t\t}\n\t\t\tif (this.sections.some(({ name: otherName }) => name === otherName)) {\n\t\t\t\tVue.util.warn(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`)\n\t\t\t}\n\n\t\t\tconst newSections = [...this.sections, { id, name, icon }]\n\t\t\t// Sort sections by order in slots\n\t\t\tthis.sections = newSections.sort(({ id: idA }, { id: idB }) => {\n\t\t\t\tconst indexOf = (id) => this.$slots.default?.findIndex?.(vnode => vnode?.componentOptions?.propsData?.id === id) ?? -1\n\t\t\t\treturn indexOf(idA) - indexOf(idB)\n\t\t\t})\n\n\t\t\t// If this is the first section registered, set it as selected\n\t\t\tif (this.sections.length === 1) {\n\t\t\t\tthis.selectedSection = id\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Called when a section is unregistered to remove it from dialog\n\t\t * @param {string} id The section ID\n\t\t */\n\t\tunregisterSection(id) {\n\t\t\tthis.sections = this.sections.filter(({ id: otherId }) => id !== otherId)\n\n\t\t\t// If the current section is unregistered, set the first section as selected\n\t\t\tif (this.selectedSection === id) {\n\t\t\t\tthis.selectedSection = this.sections[0]?.id ?? ''\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Scrolls the content to the selected settings section.absolute\n\t\t *\n\t\t * @param {string} item the ID of the section\n\t\t */\n\t\thandleSettingsNavigationClick(item) {\n\t\t\tthis.linkClicked = true\n\t\t\tdocument.getElementById('settings-section_' + item).scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t\tthis.selectedSection = item\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.linkClicked = false\n\t\t\t}, 1000)\n\t\t},\n\n\t\thandleCloseModal(isOpen) {\n\t\t\tif (isOpen) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.$emit('update:open', false)\n\t\t\t// Remove scroll listener each time the modal is closed\n\t\t\tthis.scroller.removeEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = false\n\t\t\tthis.scroller.scrollTop = 0\n\t\t},\n\n\t\thandleScroll() {\n\t\t\tif (!this.linkClicked) {\n\t\t\t\tthis.unfocusNavigationItem()\n\t\t\t}\n\t\t},\n\n\t\t// Remove selected section once the user starts scrolling\n\t\tunfocusNavigationItem: debounce(function() {\n\t\t\tthis.selectedSection = ''\n\t\t\tif (document.activeElement.className.includes('navigation-list__link')) {\n\t\t\t\tdocument.activeElement.blur()\n\t\t\t}\n\t\t}, 300),\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings {\n\t:deep &__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\t:deep &__content {\n\t\tbox-sizing: border-box;\n\t\tpadding-inline: calc(4 * var(--default-grid-baseline));\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"],"names":["NcDialog","NcVNodes","useIsMobile","t","Vue","id","_b","_a","debounce"],"mappings":"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"}
+{"version":3,"file":"NcAppSettingsDialog-Dkl3cqU-.cjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\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</docs>\n\n<template>\n\t<NcDialog v-if=\"open\"\n\t\t:navigation-aria-label=\"settingsNavigationAriaLabel\"\n\t\tv-bind=\"dialogProperties\"\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template v-if=\"hasNavigation\" #navigation=\"{ isCollapsed }\">\n\t\t\t<ul v-if=\"!isCollapsed\"\n\t\t\t\tclass=\"navigation-list\">\n\t\t\t\t<li v-for=\"section in sections\" :key=\"section.id\">\n\t\t\t\t\t<a :aria-current=\"`${section.id === selectedSection}`\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'navigation-list__link': true,\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\">\n\t\t\t<slot />\n\t\t</div>\n\t</NcDialog>\n</template>\n\n<script>\nimport NcDialog from '../NcDialog/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { t } from '../../l10n.js'\n\nimport debounce from 'debounce'\nimport Vue from 'vue'\n\nexport default {\n\n\tname: 'NcAppSettingsDialog',\n\n\tcomponents: {\n\t\tNcDialog,\n\t\tNcVNodes,\n\t},\n\n\tprovide() {\n\t\treturn {\n\t\t\tregisterSection: this.registerSection,\n\t\t\tunregisterSection: this.unregisterSection,\n\t\t}\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Determines the open / closed state of the modal\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Shows the navigation on desktop if true\n\t\t */\n\t\tshowNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Name of the settings\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Additional elements to add to the focus trap\n\t\t */\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t},\n\n\temits: ['update:open'],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tselectedSection: '',\n\t\t\tlinkClicked: false,\n\t\t\taddedScrollListener: false,\n\t\t\tscroller: null,\n\t\t\t/**\n\t\t\t * Currently registered settings sections\n\t\t\t * @type {{ id: string, name: string, icon?: import('vue').VNode[] }[]}\n\t\t\t */\n\t\t\tsections: [],\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tdialogProperties() {\n\t\t\treturn {\n\t\t\t\tadditionalTrapElements: this.additionalTrapElements,\n\t\t\t\tcloseOnClickOutside: true,\n\t\t\t\tclass: 'app-settings',\n\t\t\t\tcontainer: this.container,\n\t\t\t\tcontentClasses: 'app-settings__content',\n\t\t\t\tsize: 'large',\n\t\t\t\tname: this.name,\n\t\t\t\tnavigationClasses: 'app-settings__navigation',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Check if one or more navigation entries provide icons\n\t\t */\n\t\thasNavigationIcons() {\n\t\t\treturn this.sections.some(({ icon }) => !!icon)\n\t\t},\n\n\t\thasNavigation() {\n\t\t\tif (this.isMobile || !this.showNavigation) {\n\t\t\t\treturn false\n\t\t\t} else {\n\t\t\t\treturn true\n\t\t\t}\n\t\t},\n\n\t\tsettingsNavigationAriaLabel() {\n\t\t\treturn t('Settings navigation')\n\t\t},\n\t},\n\n\tupdated() {\n\t\t// Check that the scroller element has been mounted\n\t\tif (!this.$refs.settingsScroller) {\n\t\t\treturn\n\t\t}\n\t\t// Get the scroller element\n\t\tthis.scroller = this.$refs.settingsScroller\n\t\tif (!this.addedScrollListener) {\n\t\t\tthis.scroller.addEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = true\n\t\t}\n\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Called when a new section is registered\n\t\t * @param {string} id The section ID\n\t\t * @param {string} name The section name\n\t\t * @param {import('vue').VNode[]|undefined} icon Optional icon component\n\t\t */\n\t\tregisterSection(id, name, icon) {\n\t\t\t// Check for the uniqueness of section names\n\t\t\tif (this.sections.some(({ id: otherId }) => id === otherId)) {\n\t\t\t\tthrow new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`)\n\t\t\t}\n\t\t\tif (this.sections.some(({ name: otherName }) => name === otherName)) {\n\t\t\t\tVue.util.warn(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`)\n\t\t\t}\n\n\t\t\tconst newSections = [...this.sections, { id, name, icon }]\n\t\t\t// Sort sections by order in slots\n\t\t\tthis.sections = newSections.sort(({ id: idA }, { id: idB }) => {\n\t\t\t\tconst indexOf = (id) => this.$slots.default?.findIndex?.(vnode => vnode?.componentOptions?.propsData?.id === id) ?? -1\n\t\t\t\treturn indexOf(idA) - indexOf(idB)\n\t\t\t})\n\n\t\t\t// If this is the first section registered, set it as selected\n\t\t\tif (this.sections.length === 1) {\n\t\t\t\tthis.selectedSection = id\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Called when a section is unregistered to remove it from dialog\n\t\t * @param {string} id The section ID\n\t\t */\n\t\tunregisterSection(id) {\n\t\t\tthis.sections = this.sections.filter(({ id: otherId }) => id !== otherId)\n\n\t\t\t// If the current section is unregistered, set the first section as selected\n\t\t\tif (this.selectedSection === id) {\n\t\t\t\tthis.selectedSection = this.sections[0]?.id ?? ''\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Scrolls the content to the selected settings section.absolute\n\t\t *\n\t\t * @param {string} item the ID of the section\n\t\t */\n\t\thandleSettingsNavigationClick(item) {\n\t\t\tthis.linkClicked = true\n\t\t\tdocument.getElementById('settings-section_' + item).scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t\tthis.selectedSection = item\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.linkClicked = false\n\t\t\t}, 1000)\n\t\t},\n\n\t\thandleCloseModal(isOpen) {\n\t\t\tif (isOpen) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.$emit('update:open', false)\n\t\t\t// Remove scroll listener each time the modal is closed\n\t\t\tthis.scroller.removeEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = false\n\t\t\tthis.scroller.scrollTop = 0\n\t\t},\n\n\t\thandleScroll() {\n\t\t\tif (!this.linkClicked) {\n\t\t\t\tthis.unfocusNavigationItem()\n\t\t\t}\n\t\t},\n\n\t\t// Remove selected section once the user starts scrolling\n\t\tunfocusNavigationItem: debounce(function() {\n\t\t\tthis.selectedSection = ''\n\t\t\tif (document.activeElement.className.includes('navigation-list__link')) {\n\t\t\t\tdocument.activeElement.blur()\n\t\t\t}\n\t\t}, 300),\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings {\n\t:deep &__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\t:deep &__content {\n\t\tbox-sizing: border-box;\n\t\tpadding-inline: calc(4 * var(--default-grid-baseline));\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"],"names":["NcDialog","NcVNodes","useIsMobile","t","Vue","id","debounce"],"mappings":"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"}