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

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationSettings-DPeH305A.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 - @copyright Copyright (c) 2018 Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @author Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\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: $clickable-area;\n\t\t\twidth: 100%;\n\t\t\tpadding: 0;\n\t\t\tmargin: 0;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\tbox-shadow: none;\n\t\t\tborder: 0;\n\t\t\tborder-radius: var(--border-radius-pill);\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: $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: $clickable-area;\n\t\t\t\theight: $clickable-area;\n\t\t\t\tmin-width: $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-from,\n.slide-up-leave-to {\n\tmax-height: 0 !important;\n\tpadding: 0 10px !important;\n}\n\n</style>\n"],"names":["_sfc_main$1","_hoisted_1$1","_hoisted_2$1","_hoisted_3$1","$props","vue","_sfc_main","Cog","Mixins_clickOutsideOptions","_l10n","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","$data","_cache","args","$options"],"mappings":";;;;;;;;;;;;;;AAoBA,MAAAA,IAAA;AAAA,EACE,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACE,OAAA;AAAA;;;;MAKE,SAAA;AAAA;;;MAIA,SAAA;AAAA,IACF;AAAA,EACF;AACF,GApCAC,IAAA,CAAA,eAAA,YAAA,GAAAC,IAAA,CAAA,QAAA,SAAA,QAAA,GAYYC,IAAA,EAAA,GAAA,84BAAA;;;IAVH,eAAAC,EAAA,QAAA,OAAA;AAAA,IACA,cAAAA,EAAA;AAAA,IACD,OAAA;AAAA,IACA,MAAA;AAAA;;;MAEE,MAAAA,EAAA;AAAA,MACD,OAAA;AAAA,MACC,OAAAA,EAAA;AAAA,MACA,QAAAA,EAAA;AAAA,MACD,SAAA;AAAA;MACHC,EAAA,mBAAA,QAAAF,GAAA;AAAA,qGAZNE,EAAA,mBAAA,IAAA,EAAA;AAAA;IAAA,GAAA,GAAAH,CAAA;AAAA,EAAA,GAAA,IAAAD,CAAA;;6DCoDAK,IAAA;AAAA;;;;IAKE,KAAAC;AAAA;EAED,QAAA;AAAA,IACCC;AAAA;EAED,OAAA;AAAA;;MAGE,UAAA;AAAA,MACA,SAAAC,EAAA,EAAA,UAAA;AAAA;;EAGF,OAAA;AACC,WAAA;AAAA;IAEA;AAAA;EAED,UAAA;AAAA,IACC,qBAAA;AACC,aAAA;AAAA,QACC,KAAA;AAAA;MAED;AAAA;;EAGF,SAAA;AAAA;AAEE,WAAA,OAAA,CAAA,KAAA;AAAA;;AAGA,WAAA,OAAA;AAAA;;AAGH,GAhEOC,IAAA,EAAA,IAAA,uBAAA,GA1BPC,IAAA,CAAA,eAAA,GAiCUC,IAAA,EAAA,OAAA,yBAAA,GAIYC,IAAA,EAAA,IAAA,wBAAA;;;;IAdhB,IAAA;AAAA;;IAGJR,EAAA,mBAAA,OAAAK,GAAA;AAAA;QACS,OAAA;AAAA,QACP,MAAA;AAAA,QACC,iBAAAI,EAAA,OAAA,SAAA;AAAA,QACD,iBAAA;AAAA,QACC,SAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAC,EAAA,cAAAA,EAAA,WAAA,GAAAD,CAAA;AAAA;;UACI,OAAA;AAAA,UAA+B,MAAA;AAAA;;MAhCxC,GAAA,GAAAL,CAAA;AAAA;;MAAA,SAAAN,EAAA,QAAA,MAAA;AAAA,QAqCGA,EAAA,eAAAA,EAAA,mBAAA,OAAAQ,GAAA;AAAA;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/{NcAppNavigationSettings-giVx2sHN.mjs → NcAppNavigationSettings-LR3QCvNr.mjs}

@@ -1,5 +1,5 @@
 import "../assets/NcAppNavigationSettings-Q_od5CcP.css";
-import { r as g, s as f, a as h } from "./_l10n-JmazR_zZ.mjs";
+import { r as g, s as f, a as h } from "./_l10n-uuAvfQgY.mjs";
 import v from "../Mixins/clickOutsideOptions.mjs";
 import "@nextcloud/router";
 import { openBlock as r, createElementBlock as l, mergeProps as L, createElementVNode as i, toDisplayString as p, createCommentVNode as k, resolveComponent as b, resolveDirective as O, withDirectives as c, normalizeClass as S, createVNode as d, Transition as y, withCtx as M, renderSlot as N, vShow as w } from "vue";
@@ -32,7 +32,7 @@ const z = {
 }, A = ["aria-hidden", "aria-label"], B = ["fill", "width", "height"], D = { 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" }, V = { key: 0 };
 function $(o, e, t, m, s, n) {
   return r(), l("span", L(o.$attrs, {
-    "aria-hidden": !t.title,
+    "aria-hidden": t.title ? null : !0,
     "aria-label": t.title,
     class: "material-design-icon cog-icon",
     role: "img",

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationSettings-LR3QCvNr.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 - @copyright Copyright (c) 2018 Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @author Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\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: $clickable-area;\n\t\t\twidth: 100%;\n\t\t\tpadding: 0;\n\t\t\tmargin: 0;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\tbox-shadow: none;\n\t\t\tborder: 0;\n\t\t\tborder-radius: var(--border-radius-pill);\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: $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: $clickable-area;\n\t\t\t\theight: $clickable-area;\n\t\t\t\tmin-width: $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-from,\n.slide-up-leave-to {\n\tmax-height: 0 !important;\n\tpadding: 0 10px !important;\n}\n\n</style>\n"],"names":["_sfc_main$1","_hoisted_1$1","_hoisted_2$1","_hoisted_3$1","$props","createElementVNode","createCommentVNode","_sfc_main","Cog","clickOutsideOptions","t","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","$data","_cache","args","$options","withCtx","withDirectives"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAAA,IAAA;AAAA,EACE,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACE,OAAA;AAAA;;;;MAKE,SAAA;AAAA;;;MAIA,SAAA;AAAA,IACF;AAAA,EACF;AACF,GApCAC,IAAA,CAAA,eAAA,YAAA,GAAAC,IAAA,CAAA,QAAA,SAAA,QAAA,GAYYC,IAAA,EAAA,GAAA,84BAAA;;;IAVH,eAAAC,EAAA,QAAA,OAAA;AAAA,IACA,cAAAA,EAAA;AAAA,IACD,OAAA;AAAA,IACA,MAAA;AAAA;;;MAEE,MAAAA,EAAA;AAAA,MACD,OAAA;AAAA,MACC,OAAAA,EAAA;AAAA,MACA,QAAAA,EAAA;AAAA,MACD,SAAA;AAAA;MACHC,EAAA,QAAAF,GAAA;AAAA,wDAZNG,EAAA,IAAA,EAAA;AAAA;IAAA,GAAA,GAAAJ,CAAA;AAAA,EAAA,GAAA,IAAAD,CAAA;;iDCoDAM,IAAA;AAAA;;;;IAKE,KAAAC;AAAA;EAED,QAAA;AAAA,IACCC;AAAA;EAED,OAAA;AAAA;;MAGE,UAAA;AAAA,MACA,SAAAC,EAAA,UAAA;AAAA;;EAGF,OAAA;AACC,WAAA;AAAA;IAEA;AAAA;EAED,UAAA;AAAA,IACC,qBAAA;AACC,aAAA;AAAA,QACC,KAAA;AAAA;MAED;AAAA;;EAGF,SAAA;AAAA;AAEE,WAAA,OAAA,CAAA,KAAA;AAAA;;AAGA,WAAA,OAAA;AAAA;;AAGH,GAhEOC,IAAA,EAAA,IAAA,uBAAA,GA1BPC,IAAA,CAAA,eAAA,GAiCUC,IAAA,EAAA,OAAA,yBAAA,GAIYC,IAAA,EAAA,IAAA,wBAAA;;;;IAdhB,IAAA;AAAA;;IAGJT,EAAA,OAAAM,GAAA;AAAA;QACS,OAAA;AAAA,QACP,MAAA;AAAA,QACC,iBAAAI,EAAA,OAAA,SAAA;AAAA,QACD,iBAAA;AAAA,QACC,SAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAC,EAAA,cAAAA,EAAA,WAAA,GAAAD,CAAA;AAAA;;UACI,OAAA;AAAA,UAA+B,MAAA;AAAA;;MAhCxC,GAAA,GAAAL,CAAA;AAAA;;MAAA,SAAAO,EAAA,MAAA;AAAA,QAqCGC,EAAAf,EAAA,OAAAS,GAAA;AAAA;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/{NcAppNavigationToggle-DBCPaseG.mjs → NcAppNavigationToggle-SEvIEY16.mjs}

@@ -1,8 +1,8 @@
-import "../assets/NcAppNavigationToggle-egZffUzR.css";
-import { N } from "./NcButton-nCkJxwsi.mjs";
-import { r as k, x as M, a as _ } from "./_l10n-JmazR_zZ.mjs";
-import { openBlock as t, createElementBlock as i, mergeProps as g, createElementVNode as p, toDisplayString as u, createCommentVNode as h, resolveComponent as c, createVNode as V, withCtx as y, createBlock as m } from "vue";
-import { _ as r } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+import "../assets/NcAppNavigationToggle-VrntFGdJ.css";
+import { N } from "./NcButton-YOXv3gFY.mjs";
+import { r as k, x as M, a as u } from "./_l10n-uuAvfQgY.mjs";
+import { openBlock as t, createElementBlock as i, mergeProps as m, createElementVNode as g, toDisplayString as p, createCommentVNode as h, resolveComponent as r, createVNode as V, withCtx as y, createBlock as _ } from "vue";
+import { _ as c } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
 k(M);
 const C = {
   name: "MenuIcon",
@@ -22,8 +22,8 @@ const C = {
   }
 }, b = ["aria-hidden", "aria-label"], H = ["fill", "width", "height"], B = { d: "M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" }, I = { key: 0 };
 function w(n, o, e, s, d, a) {
-  return t(), i("span", g(n.$attrs, {
-    "aria-hidden": !e.title,
+  return t(), i("span", m(n.$attrs, {
+    "aria-hidden": e.title ? null : !0,
     "aria-label": e.title,
     class: "material-design-icon menu-icon",
     role: "img",
@@ -36,13 +36,13 @@ function w(n, o, e, s, d, a) {
       height: e.size,
       viewBox: "0 0 24 24"
     }, [
-      p("path", B, [
-        e.title ? (t(), i("title", I, u(e.title), 1)) : h("", !0)
+      g("path", B, [
+        e.title ? (t(), i("title", I, p(e.title), 1)) : h("", !0)
       ])
     ], 8, H))
   ], 16, b);
 }
-const z = /* @__PURE__ */ r(C, [["render", w]]), x = {
+const z = /* @__PURE__ */ c(C, [["render", w]]), x = {
   name: "MenuOpenIcon",
   emits: ["click"],
   props: {
@@ -60,8 +60,8 @@ const z = /* @__PURE__ */ r(C, [["render", w]]), x = {
   }
 }, $ = ["aria-hidden", "aria-label"], L = ["fill", "width", "height"], O = { d: "M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z" }, S = { key: 0 };
 function A(n, o, e, s, d, a) {
-  return t(), i("span", g(n.$attrs, {
-    "aria-hidden": !e.title,
+  return t(), i("span", m(n.$attrs, {
+    "aria-hidden": e.title ? null : !0,
     "aria-label": e.title,
     class: "material-design-icon menu-open-icon",
     role: "img",
@@ -74,13 +74,13 @@ function A(n, o, e, s, d, a) {
       height: e.size,
       viewBox: "0 0 24 24"
     }, [
-      p("path", O, [
-        e.title ? (t(), i("title", S, u(e.title), 1)) : h("", !0)
+      g("path", O, [
+        e.title ? (t(), i("title", S, p(e.title), 1)) : h("", !0)
       ])
     ], 8, L))
   ], 16, $);
 }
-const E = /* @__PURE__ */ r(x, [["render", A]]), T = {
+const E = /* @__PURE__ */ c(x, [["render", A]]), T = {
   name: "NcAppNavigationToggle",
   components: {
     NcButton: N,
@@ -88,6 +88,11 @@ const E = /* @__PURE__ */ r(x, [["render", A]]), T = {
     MenuOpenIcon: E
   },
   props: {
+    /**
+     * Tracks whether the toggle has been clicked or not.
+     * If it has been clicked, switches between the different MenuIcons
+     * and emits a boolean indicating its opened status
+     */
     open: {
       type: Boolean,
       required: !0
@@ -96,17 +101,21 @@ const E = /* @__PURE__ */ r(x, [["render", A]]), T = {
   emits: ["update:open"],
   computed: {
     label() {
-      return this.open ? _("Close navigation") : _("Open navigation");
+      return this.open ? u("Close navigation") : u("Open navigation");
     }
   },
   methods: {
+    /**
+     * Once the toggle has been clicked, emits the toggle status
+     * so parent components can gauge the status of the navigation button
+     */
     toggleNavigation() {
       this.$emit("update:open", !this.open);
     }
   }
 }, Z = { class: "app-navigation-toggle-wrapper" };
 function q(n, o, e, s, d, a) {
-  const l = c("MenuOpenIcon"), f = c("MenuIcon"), v = c("NcButton");
+  const l = r("MenuOpenIcon"), f = r("MenuIcon"), v = r("NcButton");
   return t(), i("div", Z, [
     V(v, {
       class: "app-navigation-toggle",
@@ -118,10 +127,10 @@ function q(n, o, e, s, d, a) {
       onClick: a.toggleNavigation
     }, {
       icon: y(() => [
-        e.open ? (t(), m(l, {
+        e.open ? (t(), _(l, {
           key: 0,
           size: 20
-        })) : (t(), m(f, {
+        })) : (t(), _(f, {
           key: 1,
           size: 20
         }))
@@ -130,7 +139,7 @@ function q(n, o, e, s, d, a) {
     }, 8, ["aria-expanded", "aria-label", "title", "onClick"])
   ]);
 }
-const J = /* @__PURE__ */ r(T, [["render", q], ["__scopeId", "data-v-6469b4ce"]]);
+const J = /* @__PURE__ */ c(T, [["render", q], ["__scopeId", "data-v-fcf552fb"]]);
 export {
   J as N
 };

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationToggle-SEvIEY16.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 - @copyright Copyright (c) 2019 Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @author Christoph Wurst <christoph@winzerhof-wurst.at>\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\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.ts'\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\tright: calc(0px - var(--app-navigation-padding));\n\tmargin-right: - $clickable-area;\n}\n\nbutton.app-navigation-toggle {\n\tbackground-color: var(--color-main-background);\n}\n</style>\n"],"names":["_sfc_main$2","_hoisted_1$2","_hoisted_2$1","_hoisted_3$1","$props","createElementVNode","createCommentVNode","_sfc_main$1","_hoisted_1$1","_hoisted_2","_hoisted_3","_sfc_main","NcButton","MenuIcon","_hoisted_1","openBlock","createElementBlock","$options","withCtx"],"mappings":";;;;;;AAoBA,MAAAA,IAAA;AAAA,EACE,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACE,OAAA;AAAA;;;;MAKE,SAAA;AAAA;;;MAIA,SAAA;AAAA,IACF;AAAA,EACF;AACF,GApCAC,IAAA,CAAA,eAAA,YAAA,GAAAC,IAAA,CAAA,QAAA,SAAA,QAAA,GAYYC,IAAA,EAAA,GAAA,iDAAA;;;IAVH,eAAAC,EAAA,QAAA,OAAA;AAAA,IACA,cAAAA,EAAA;AAAA,IACD,OAAA;AAAA,IACA,MAAA;AAAA;;;MAEE,MAAAA,EAAA;AAAA,MACD,OAAA;AAAA,MACC,OAAAA,EAAA;AAAA,MACA,QAAAA,EAAA;AAAA,MACD,SAAA;AAAA;MACHC,EAAA,QAAAF,GAAA;AAAA,wDAZNG,EAAA,IAAA,EAAA;AAAA;IAAA,GAAA,GAAAJ,CAAA;AAAA,EAAA,GAAA,IAAAD,CAAA;;iDCoBAM,IAAA;AAAA,EACE,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACE,OAAA;AAAA;;;;MAKE,SAAA;AAAA;;;MAIA,SAAA;AAAA,IACF;AAAA,EACF;AACF,GApCAC,IAAA,CAAA,eAAA,YAAA,GAAAC,IAAA,CAAA,QAAA,SAAA,QAAA,GAYYC,IAAA,EAAA,GAAA,8GAAA;;;IAVH,eAAAN,EAAA,QAAA,OAAA;AAAA,IACA,cAAAA,EAAA;AAAA,IACD,OAAA;AAAA,IACA,MAAA;AAAA;;;MAEE,MAAAA,EAAA;AAAA,MACD,OAAA;AAAA,MACC,OAAAA,EAAA;AAAA,MACA,QAAAA,EAAA;AAAA,MACD,SAAA;AAAA;MACHC,EAAA,QAAAK,GAAA;AAAA,wDAZNJ,EAAA,IAAA,EAAA;AAAA;IAAA,GAAA,GAAAG,CAAA;AAAA,EAAA,GAAA,IAAAD,CAAA;;iDC+CAG,IAAA;AAAA;;IAIE,UAAAC;AAAA,IACA,UAAAC;AAAA;;EAID,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;EAYA,OAAA,CAAA,aAAA;AAAA,EAEA,UAAA;AAAA,IACC,QAAA;;;;EAID,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKC,mBAAA;AACC,WAAA,MAAA,eAAA,CAAA,KAAA,IAAA;AAAA;;AAGH,GA5DMC,IAAA,EAAA,OAAA,gCAAA;;;AAAL,SAAAC,EAAA,GAAAC,EAAA,OAAAF,GAAA;AAAA;MACW,OAAA;AAAA,MACT,MAAA;AAAA,MACC,iBAAAV,EAAA,OAAA,SAAA;AAAA,MACA,cAAAa,EAAA;AAAA,MACA,OAAAA,EAAA;AAAA,MACD,iBAAA;AAAA,MACC,SAAAA,EAAA;AAAA;MACU,MAAAC,EAAA,MAAA;AAAA;;UACiB,MAAA;AAAA;;UACT,MAAA;AAAA;;;;;;;","x_google_ignoreList":[0,1]}

package/dist/chunks/{NcAppNavigationToggle-cRUPsHZH.cjs → NcAppNavigationToggle-sXvQDqok.cjs}

@@ -1,5 +1,5 @@
-var x = require("../assets/NcAppNavigationToggle-egZffUzR.css");
-const u = require("./NcButton-Uxh-oARg.cjs"), a = require("./_l10n-wK0o0jNS.cjs"), e = require("vue"), c = require("./_plugin-vue_export-helper-xG2iG1wl.cjs");
+var x = require("../assets/NcAppNavigationToggle-VrntFGdJ.css");
+const u = require("./NcButton-7UKtzkX5.cjs"), a = require("./_l10n-Fl7RzbcZ.cjs"), e = require("vue"), c = require("./_plugin-vue_export-helper-xG2iG1wl.cjs");
 a.register(a.t17);
 const _ = {
   name: "MenuIcon",
@@ -18,9 +18,9 @@ const _ = {
     }
   }
 }, g = ["aria-hidden", "aria-label"], m = ["fill", "width", "height"], h = { d: "M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" }, k = { key: 0 };
-function B(n, o, t, r, s, i) {
+function f(n, o, t, r, s, i) {
   return e.openBlock(), e.createElementBlock("span", e.mergeProps(n.$attrs, {
-    "aria-hidden": !t.title,
+    "aria-hidden": t.title ? null : !0,
     "aria-label": t.title,
     class: "material-design-icon menu-icon",
     role: "img",
@@ -39,7 +39,7 @@ function B(n, o, t, r, s, i) {
     ], 8, m))
   ], 16, g);
 }
-const f = /* @__PURE__ */ c._export_sfc(_, [["render", B]]), v = {
+const B = /* @__PURE__ */ c._export_sfc(_, [["render", f]]), v = {
   name: "MenuOpenIcon",
   emits: ["click"],
   props: {
@@ -58,7 +58,7 @@ const f = /* @__PURE__ */ c._export_sfc(_, [["render", B]]), v = {
 }, N = ["aria-hidden", "aria-label"], V = ["fill", "width", "height"], C = { d: "M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z" }, y = { key: 0 };
 function M(n, o, t, r, s, i) {
   return e.openBlock(), e.createElementBlock("span", e.mergeProps(n.$attrs, {
-    "aria-hidden": !t.title,
+    "aria-hidden": t.title ? null : !0,
     "aria-label": t.title,
     class: "material-design-icon menu-open-icon",
     role: "img",
@@ -81,10 +81,15 @@ const H = /* @__PURE__ */ c._export_sfc(v, [["render", M]]), b = {
   name: "NcAppNavigationToggle",
   components: {
     NcButton: u.NcButton,
-    MenuIcon: f,
+    MenuIcon: B,
     MenuOpenIcon: H
   },
   props: {
+    /**
+     * Tracks whether the toggle has been clicked or not.
+     * If it has been clicked, switches between the different MenuIcons
+     * and emits a boolean indicating its opened status
+     */
     open: {
       type: Boolean,
       required: !0
@@ -97,6 +102,10 @@ const H = /* @__PURE__ */ c._export_sfc(v, [["render", M]]), b = {
     }
   },
   methods: {
+    /**
+     * Once the toggle has been clicked, emits the toggle status
+     * so parent components can gauge the status of the navigation button
+     */
     toggleNavigation() {
       this.$emit("update:open", !this.open);
     }
@@ -127,5 +136,5 @@ function I(n, o, t, r, s, i) {
     }, 8, ["aria-expanded", "aria-label", "title", "onClick"])
   ]);
 }
-const w = /* @__PURE__ */ c._export_sfc(b, [["render", I], ["__scopeId", "data-v-6469b4ce"]]);
+const w = /* @__PURE__ */ c._export_sfc(b, [["render", I], ["__scopeId", "data-v-fcf552fb"]]);
 exports.NcAppNavigationToggle = w;

package/dist/chunks/NcAppNavigationToggle-sXvQDqok.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationToggle-sXvQDqok.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 - @copyright Copyright (c) 2019 Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @author Christoph Wurst <christoph@winzerhof-wurst.at>\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\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.ts'\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\tright: calc(0px - var(--app-navigation-padding));\n\tmargin-right: - $clickable-area;\n}\n\nbutton.app-navigation-toggle {\n\tbackground-color: var(--color-main-background);\n}\n</style>\n"],"names":["_sfc_main$2","_hoisted_1$2","_hoisted_2$1","_hoisted_3$1","$props","vue","_sfc_main$1","_hoisted_1$1","_hoisted_2","_hoisted_3","_sfc_main","NcButton","MenuIcon","_hoisted_1","$options"],"mappings":";;;AAoBA,MAAAA,IAAA;AAAA,EACE,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACE,OAAA;AAAA;;;;MAKE,SAAA;AAAA;;;MAIA,SAAA;AAAA,IACF;AAAA,EACF;AACF,GApCAC,IAAA,CAAA,eAAA,YAAA,GAAAC,IAAA,CAAA,QAAA,SAAA,QAAA,GAYYC,IAAA,EAAA,GAAA,iDAAA;;;IAVH,eAAAC,EAAA,QAAA,OAAA;AAAA,IACA,cAAAA,EAAA;AAAA,IACD,OAAA;AAAA,IACA,MAAA;AAAA;;;MAEE,MAAAA,EAAA;AAAA,MACD,OAAA;AAAA,MACC,OAAAA,EAAA;AAAA,MACA,QAAAA,EAAA;AAAA,MACD,SAAA;AAAA;MACHC,EAAA,mBAAA,QAAAF,GAAA;AAAA,qGAZNE,EAAA,mBAAA,IAAA,EAAA;AAAA;IAAA,GAAA,GAAAH,CAAA;AAAA,EAAA,GAAA,IAAAD,CAAA;;6DCoBAK,IAAA;AAAA,EACE,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACE,OAAA;AAAA;;;;MAKE,SAAA;AAAA;;;MAIA,SAAA;AAAA,IACF;AAAA,EACF;AACF,GApCAC,IAAA,CAAA,eAAA,YAAA,GAAAC,IAAA,CAAA,QAAA,SAAA,QAAA,GAYYC,IAAA,EAAA,GAAA,8GAAA;;;IAVH,eAAAL,EAAA,QAAA,OAAA;AAAA,IACA,cAAAA,EAAA;AAAA,IACD,OAAA;AAAA,IACA,MAAA;AAAA;;;MAEE,MAAAA,EAAA;AAAA,MACD,OAAA;AAAA,MACC,OAAAA,EAAA;AAAA,MACA,QAAAA,EAAA;AAAA,MACD,SAAA;AAAA;MACHC,EAAA,mBAAA,QAAAI,GAAA;AAAA,qGAZNJ,EAAA,mBAAA,IAAA,EAAA;AAAA;IAAA,GAAA,GAAAG,CAAA;AAAA,EAAA,GAAA,IAAAD,CAAA;;6DC+CAG,IAAA;AAAA;;IAIE,UAAAC,EAAA;AAAA,IACA,UAAAC;AAAA;;EAID,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;EAYA,OAAA,CAAA,aAAA;AAAA,EAEA,UAAA;AAAA,IACC,QAAA;;;;EAID,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKC,mBAAA;AACC,WAAA,MAAA,eAAA,CAAA,KAAA,IAAA;AAAA;;AAGH,GA5DMC,IAAA,EAAA,OAAA,gCAAA;;;AAAL,SAAAR,EAAA,UAAA,GAAAA,EAAA,mBAAA,OAAAQ,GAAA;AAAA;MACW,OAAA;AAAA,MACT,MAAA;AAAA,MACC,iBAAAT,EAAA,OAAA,SAAA;AAAA,MACA,cAAAU,EAAA;AAAA,MACA,OAAAA,EAAA;AAAA,MACD,iBAAA;AAAA,MACC,SAAAA,EAAA;AAAA;MACU,MAAAT,EAAA,QAAA,MAAA;AAAA;;UACiB,MAAA;AAAA;;UACT,MAAA;AAAA;;;;;;;;","x_google_ignoreList":[0,1]}

package/dist/chunks/{NcAppSettingsDialog-WvDTWMwC.cjs → NcAppSettingsDialog-HnYa47vg.cjs}

@@ -1,11 +1,11 @@
-var V = require("../assets/NcAppSettingsDialog-F29bz2Yx.css");
-const h = require("./NcDialog-qsI2VY8S.cjs"), p = require("../Components/NcVNodes.cjs"), m = require("../Composables/useIsMobile.cjs"), d = require("./_l10n-wK0o0jNS.cjs"), _ = require("debounce"), e = require("vue"), f = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), v = (t) => t && t.__esModule ? t : { default: t }, S = /* @__PURE__ */ v(_);
-d.register(d.t38);
-const k = {
+var q = require("../assets/NcAppSettingsDialog-HOydlmNi.css");
+const m = require("./NcDialog-BYXi2emF.cjs"), _ = require("../Components/NcVNodes.cjs"), f = require("../Composables/useIsMobile.cjs"), h = require("./_l10n-Fl7RzbcZ.cjs"), v = require("debounce"), e = require("vue"), S = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), k = (t) => t && t.__esModule ? t : { default: t }, N = /* @__PURE__ */ k(v);
+h.register(h.t38);
+const C = {
   name: "NcAppSettingsDialog",
   components: {
-    NcDialog: h.NcDialog,
-    NcVNodes: p
+    NcDialog: m.NcDialog,
+    NcVNodes: _
   },
   provide() {
     return {
@@ -53,7 +53,7 @@ const k = {
   emits: ["update:open"],
   setup() {
     return {
-      isMobile: m.useIsMobile()
+      isMobile: f.useIsMobile()
     };
   },
   data() {
@@ -92,7 +92,7 @@ const k = {
       return !(this.isMobile || !this.showNavigation);
     },
     settingsNavigationAriaLabel() {
-      return d.t("Settings navigation");
+      return h.t("Settings navigation");
     }
   },
   updated() {
@@ -105,14 +105,20 @@ const k = {
      * @param {string} name The section name
      * @param {import('vue').VNode[]|undefined} icon Optional icon component
      */
-    registerSection(t, o, l) {
-      if (this.sections.some(({ id: n }) => t === n))
-        throw new Error(`Duplicate section id found: ${t}. Settings navigation sections must have unique section ids.`);
-      this.sections.some(({ name: n }) => o === n) && e.warn(`Duplicate section name found: ${o}. Settings navigation sections must have unique section names.`);
-      const u = [...this.sections, { id: t, name: o, icon: l }];
-      this.sections = u.sort(({ id: n }, { id: i }) => {
-        const a = (r) => this.$slots.default?.().indexOf((c) => c?.props?.id === r) ?? -1;
-        return a(n) - a(i);
+    registerSection(t, o, a) {
+      if (this.sections.some(({ id: s }) => t === s))
+        throw new Error("Duplicate section id found: ".concat(t, ". Settings navigation sections must have unique section ids."));
+      this.sections.some(({ name: s }) => o === s) && e.warn("Duplicate section name found: ".concat(o, ". Settings navigation sections must have unique section names."));
+      const l = [...this.sections, { id: t, name: o, icon: a }];
+      this.sections = l.sort(({ id: s }, { id: n }) => {
+        const r = (u) => {
+          var c, i, d;
+          return (d = (i = (c = this.$slots).default) == null ? void 0 : i.call(c).indexOf((g) => {
+            var p;
+            return ((p = g == null ? void 0 : g.props) == null ? void 0 : p.id) === u;
+          })) != null ? d : -1;
+        };
+        return r(s) - r(n);
       }), this.sections.length === 1 && (this.selectedSection = t);
     },
     /**
@@ -120,7 +126,8 @@ const k = {
      * @param {string} id The section ID
      */
     unregisterSection(t) {
-      this.sections = this.sections.filter(({ id: o }) => t !== o), this.selectedSection === t && (this.selectedSection = this.sections[0]?.id ?? "");
+      var o, a;
+      this.sections = this.sections.filter(({ id: l }) => t !== l), this.selectedSection === t && (this.selectedSection = (a = (o = this.sections[0]) == null ? void 0 : o.id) != null ? a : "");
     },
     /**
      * Scrolls the content to the selected settings section.absolute
@@ -142,57 +149,57 @@ const k = {
       this.linkClicked || this.unfocusNavigationItem();
     },
     // Remove selected section once the user starts scrolling
-    unfocusNavigationItem: S.default(function() {
+    unfocusNavigationItem: N.default(function() {
       this.selectedSection = "", document.activeElement.className.includes("navigation-list__link") && document.activeElement.blur();
     }, 300)
   }
-}, N = {
+}, y = {
   key: 0,
   class: "navigation-list"
-}, C = ["aria-current", "href", "onClick", "onKeydown"], y = {
+}, b = ["aria-current", "href", "onClick", "onKeydown"], E = {
   key: 0,
   class: "navigation-list__link-icon"
-}, E = { class: "navigation-list__link-text" }, b = { ref: "settingsScroller" };
-function B(t, o, l, u, n, i) {
-  const a = e.resolveComponent("NcVNodes"), r = e.resolveComponent("NcDialog");
-  return l.open ? (e.openBlock(), e.createBlock(r, e.mergeProps({
+}, B = { class: "navigation-list__link-text" }, w = { ref: "settingsScroller" };
+function V(t, o, a, l, s, n) {
+  const r = e.resolveComponent("NcVNodes"), u = e.resolveComponent("NcDialog");
+  return a.open ? (e.openBlock(), e.createBlock(u, e.mergeProps({
     key: 0,
-    "navigation-aria-label": i.settingsNavigationAriaLabel
-  }, i.dialogProperties, { "onUpdate:open": i.handleCloseModal }), e.createSlots({
+    "navigation-aria-label": n.settingsNavigationAriaLabel
+  }, n.dialogProperties, { "onUpdate:open": n.handleCloseModal }), e.createSlots({
     default: e.withCtx(() => [
-      e.createElementVNode("div", b, [
+      e.createElementVNode("div", w, [
         e.renderSlot(t.$slots, "default", {}, void 0, !0)
       ], 512)
     ]),
     _: 2
   }, [
-    i.hasNavigation ? {
+    n.hasNavigation ? {
       name: "navigation",
       fn: e.withCtx(({ isCollapsed: c }) => [
-        c ? e.createCommentVNode("", !0) : (e.openBlock(), e.createElementBlock("ul", N, [
-          (e.openBlock(!0), e.createElementBlock(e.Fragment, null, e.renderList(n.sections, (s) => (e.openBlock(), e.createElementBlock("li", {
-            key: s.id
+        c ? e.createCommentVNode("", !0) : (e.openBlock(), e.createElementBlock("ul", y, [
+          (e.openBlock(!0), e.createElementBlock(e.Fragment, null, e.renderList(s.sections, (i) => (e.openBlock(), e.createElementBlock("li", {
+            key: i.id
           }, [
             e.createElementVNode("a", {
-              "aria-current": `${s.id === n.selectedSection}`,
+              "aria-current": "".concat(i.id === s.selectedSection),
               class: e.normalizeClass({
                 "navigation-list__link": !0,
-                "navigation-list__link--active": s.id === n.selectedSection,
-                "navigation-list__link--icon": i.hasNavigationIcons
+                "navigation-list__link--active": i.id === s.selectedSection,
+                "navigation-list__link--icon": n.hasNavigationIcons
               }),
-              href: `#settings-section_${s.id}`,
+              href: "#settings-section_".concat(i.id),
               tabindex: "0",
-              onClick: e.withModifiers((g) => i.handleSettingsNavigationClick(s.id), ["prevent"]),
-              onKeydown: e.withKeys((g) => i.handleSettingsNavigationClick(s.id), ["enter"])
+              onClick: e.withModifiers((d) => n.handleSettingsNavigationClick(i.id), ["prevent"]),
+              onKeydown: e.withKeys((d) => n.handleSettingsNavigationClick(i.id), ["enter"])
             }, [
-              i.hasNavigationIcons ? (e.openBlock(), e.createElementBlock("div", y, [
-                s.icon ? (e.openBlock(), e.createBlock(a, {
+              n.hasNavigationIcons ? (e.openBlock(), e.createElementBlock("div", E, [
+                i.icon ? (e.openBlock(), e.createBlock(r, {
                   key: 0,
-                  vnodes: s.icon
+                  vnodes: i.icon
                 }, null, 8, ["vnodes"])) : e.createCommentVNode("", !0)
               ])) : e.createCommentVNode("", !0),
-              e.createElementVNode("span", E, e.toDisplayString(s.name), 1)
-            ], 42, C)
+              e.createElementVNode("span", B, e.toDisplayString(i.name), 1)
+            ], 42, b)
           ]))), 128))
         ]))
       ]),
@@ -200,5 +207,5 @@ function B(t, o, l, u, n, i) {
     } : void 0
   ]), 1040, ["navigation-aria-label", "onUpdate:open"])) : e.createCommentVNode("", !0);
 }
-const w = /* @__PURE__ */ f._export_sfc(k, [["render", B], ["__scopeId", "data-v-054c81f6"]]);
-exports.NcAppSettingsDialog = w;
+const D = /* @__PURE__ */ S._export_sfc(C, [["render", V], ["__scopeId", "data-v-69d574b6"]]);
+exports.NcAppSettingsDialog = D;

package/dist/chunks/{NcAppSettingsDialog-90cJBaTf.mjs.map → NcAppSettingsDialog-HnYa47vg.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcAppSettingsDialog-90cJBaTf.mjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n - @author Ferdinand Thiessen <opensource@fthiessen.de>\n -\n - @license AGPL-3.0-or-later\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\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 v-model:open=\"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 v-model:open=\"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 { warn } 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\twarn(`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?.().indexOf(vnode => vnode?.props?.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(.dialog) {\n\t\tmin-height: 256px;\n\t}\n\t:deep &__navigation {\n\t\tmin-width: 200px;\n\t\tmargin-right: 20px;\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\n\t\toverflow-y: auto;\n\t\toverflow-x: hidden;\n\t\tpadding-inline: 20px;\n\t\tmin-height: 256px;\n\t}\n}\n\n.navigation-list {\n\theight: 100%;\n\tbox-sizing: border-box;\n\toverflow-y: auto;\n\tpadding: 12px;\n\n\t&__link {\n\t\tdisplay: flex;\n\t\talign-content: center;\n\t\tfont-size: 16px;\n\t\theight: $clickable-area;\n\t\tmargin: 4px 0;\n\t\tline-height: $clickable-area;\n\t\tborder-radius: var(--border-radius-pill);\n\t\tfont-weight: bold;\n\t\tpadding: 0 20px;\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: 8px;\n\t\t\tgap: 4px;\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: 36px;\n\t\t\tmax-width: 36px;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","NcDialog","_sfc_main$1","icon","indexOf","id","vnode","idA","idB","otherId","item","debounce","_hoisted_2","_hoisted_4","_hoisted_5","openBlock","createBlock","_component_NcDialog","mergeProps","$options","createSlots","withCtx","createElementVNode","createCommentVNode","createElementBlock","_hoisted_1","Fragment","renderList","$data","section","normalizeClass","withModifiers","$event","withKeys","_hoisted_3","toDisplayString"],"mappings":"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"}
+{"version":3,"file":"NcAppSettingsDialog-HnYa47vg.cjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n - @author Ferdinand Thiessen <opensource@fthiessen.de>\n -\n - @license AGPL-3.0-or-later\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\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 v-model:open=\"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 v-model:open=\"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 { warn } 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\twarn(`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?.().indexOf(vnode => vnode?.props?.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: 20px;\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: 16px;\n\t}\n}\n\n.navigation-list {\n\theight: 100%;\n\tbox-sizing: border-box;\n\toverflow-y: auto;\n\tpadding: 12px;\n\n\t&__link {\n\t\tdisplay: flex;\n\t\talign-content: center;\n\t\tfont-size: 16px;\n\t\theight: $clickable-area;\n\t\tmargin: 4px 0;\n\t\tline-height: $clickable-area;\n\t\tborder-radius: var(--border-radius-pill);\n\t\tfont-weight: bold;\n\t\tpadding: 0 20px;\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: 8px;\n\t\t\tgap: 4px;\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: 36px;\n\t\t\tmax-width: 36px;\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":["_sfc_main","NcDialog","Components_NcVNodes","icon","indexOf","id","_c","_b","_a","vnode","idA","idB","otherId","item","debounce__default","_hoisted_2","_hoisted_4","_hoisted_5","vue","_component_NcDialog","$options","_hoisted_1","$data","section","$event","_hoisted_3"],"mappings":"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"}