@nextcloud/vue 8.0.0-beta.8 → 8.0.0

package/dist/Components/NcAppSettingsDialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppSettingsDialog.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 -\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<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</docs>\n\n<script>\nimport NcModal from '../NcModal/index.js'\nimport isMobile from '../../mixins/isMobile/index.js'\nimport { t } from '../../l10n.js'\n\nimport debounce from 'debounce'\n\nexport default {\n\n\tname: 'NcAppSettingsDialog',\n\n\tcomponents: {\n\t\tNcModal,\n\t},\n\n\tmixins: [isMobile],\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\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}\n\t},\n\n\tcomputed: {\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\tmounted() {\n\t\t// Select first settings section\n\t\tthis.selectedSection = this.$slots.default[0].componentOptions.propsData.id\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\n\t\t/**\n\t\t * Builds the settings navigation menu\n\t\t *\n\t\t * @param {object} slots The default slots object passed from the render function.\n\t\t * @return {Array} the navigation items\n\t\t */\n\t\tgetSettingsNavigation(slots) {\n\t\t\t// Array of navigationitems strings\n\t\t\tconst navigationItems = slots.filter(vNode => vNode.componentOptions).map(vNode => {\n\t\t\t\treturn {\n\t\t\t\t\tid: vNode.componentOptions.propsData?.id,\n\t\t\t\t\tname: vNode.componentOptions.propsData?.name,\n\t\t\t\t}\n\t\t\t})\n\t\t\tconst navigationNames = slots.map(item => item.name)\n\t\t\tconst navigationIds = slots.map(item => item.id)\n\n\t\t\t// Check for the uniqueness of section names\n\t\t\tnavigationItems.forEach((element, index) => {\n\t\t\t\tconst newNamesArray = [...navigationNames]\n\t\t\t\tconst newIdArray = [...navigationIds]\n\t\t\t\tnewNamesArray.splice(index, 1)\n\t\t\t\tnewIdArray.splice(index, 1)\n\t\t\t\tif (newNamesArray.includes(element.name)) {\n\t\t\t\t\tthrow new Error(`Duplicate section name found: ${element}. Settings navigation sections must have unique section names.`)\n\t\t\t\t}\n\t\t\t\tif (newIdArray.includes(element.id)) {\n\t\t\t\t\tthrow new Error(`Duplicate section id found: ${element}. Settings navigation sections must have unique section ids.`)\n\t\t\t\t}\n\t\t\t})\n\t\t\treturn navigationItems\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() {\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\n\t\thandleLinkKeydown(keyDownEvent, item) {\n\t\t\tif (keyDownEvent.code === 'Enter') {\n\t\t\t\tthis.handleSettingsNavigationClick(item)\n\t\t\t}\n\t\t},\n\t},\n\n\trender(h) {\n\t\t/**\n\t\t * Build the navigation\n\t\t *\n\t\t * @return {object} the navigation\n\t\t */\n\t\tconst createAppSettingsNavigation = () => {\n\t\t\tif (this.hasNavigation) {\n\t\t\t\treturn [h('div', {\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\tclass: 'app-settings__navigation',\n\t\t\t\t\t\trole: 'tablist',\n\t\t\t\t\t\t'aria-label': this.settingsNavigationAriaLabel,\n\t\t\t\t\t},\n\t\t\t\t}, [h('ul', {\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\tclass: 'navigation-list',\n\t\t\t\t\t\trole: 'tablist',\n\t\t\t\t\t},\n\t\t\t\t}, this.getSettingsNavigation(this.$slots.default).map(item => {\n\t\t\t\t\treturn createListElement(item)\n\t\t\t\t}))])]\n\t\t\t} else {\n\t\t\t\treturn []\n\t\t\t}\n\t\t}\n\n\t\t/**\n\t\t * Build each list element in the navigation\n\t\t *\n\t\t * @param {object} item the navigation item\n\t\t * @return {object} the list element\n\t\t */\n\t\tconst createListElement = (item) => h('li', {}, [h('a', {\n\t\t\tclass: {\n\t\t\t\t'navigation-list__link': true,\n\t\t\t\t'navigation-list__link--active': item.id === this.selectedSection,\n\t\t\t},\n\n\t\t\tattrs: {\n\t\t\t\trole: 'tab',\n\t\t\t\t'aria-selected': item.id === this.selectedSection,\n\t\t\t\ttabindex: '0',\n\t\t\t},\n\n\t\t\ton: {\n\t\t\t\tclick: () => this.handleSettingsNavigationClick(item.id),\n\t\t\t\tkeydown: () => this.handleLinkKeydown(event, item.id),\n\t\t\t},\n\t\t}, item.name)])\n\n\t\t// Return value of the render function\n\t\tif (this.open) {\n\t\t\treturn h('NcModal', {\n\t\t\t\tclass: [\n\t\t\t\t\t'app-settings-modal',\n\t\t\t\t],\n\t\t\t\tattrs: {\n\t\t\t\t\tcontainer: this.container,\n\t\t\t\t\tsize: 'large',\n\t\t\t\t\tadditionalTrapElements: this.additionalTrapElements,\n\t\t\t\t},\n\t\t\t\ton: {\n\t\t\t\t\tclose: () => { this.handleCloseModal() },\n\t\t\t\t},\n\t\t\t}, [\n\t\t\t\t// main app-settings root element\n\t\t\t\th('div', {\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\tclass: 'app-settings',\n\t\t\t\t\t},\n\t\t\t\t}, [\n\t\t\t\t\t// app-settings name\n\t\t\t\t\th('h2', {\n\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\tclass: 'app-settings__name',\n\t\t\t\t\t\t},\n\t\t\t\t\t}, this.name),\n\n\t\t\t\t\t// app-settings navigation + content\n\t\t\t\t\th(\n\t\t\t\t\t\t'div',\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tclass: 'app-settings__wrapper',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t...createAppSettingsNavigation(),\n\t\t\t\t\t\t\th('div', {\n\t\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\t\tclass: 'app-settings__content',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tref: 'settingsScroller',\n\t\t\t\t\t\t\t}, this.$slots.default),\n\t\t\t\t\t\t],\n\t\t\t\t\t),\n\t\t\t\t]),\n\t\t\t])\n\t\t} else {\n\t\t\treturn undefined\n\t\t}\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n\n.app-settings-modal :deep(.modal-wrapper .modal-container) {\n\tdisplay: flex;\n\toverflow: hidden;\n}\n\n.app-settings {\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-width: 0;\n\t&__name {\n\t\tmin-height: $clickable-area;\n\t\theight: $clickable-area;\n\t\tline-height: $clickable-area;\n\t\tpadding-top: 4px; // Same as the close button top spacing\n\t\ttext-align: center;\n\t}\n\t&__wrapper {\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\t\toverflow: hidden;\n\t\theight: 100%;\n\t\tposition: relative;\n\t}\n\t&__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\theight: 100%;\n\t}\n\t&__content {\n\t\tmax-width: 100vw;\n\t\toverflow-y: auto;\n\t\toverflow-x: hidden;\n\t\tpadding: 24px;\n\t\twidth: 100%;\n\t}\n}\n\n.navigation-list {\n\theight: 100%;\n\tbox-sizing: border-box;\n\toverflow-y: auto;\n\tpadding: 12px;\n\t&__link {\n\t\tdisplay: block;\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\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\t\t&--active {\n\t\t\tbackground-color: var(--color-primary-element-light) !important;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","Components_NcModal","Mixins_isMobile","l10n","slots","navigationItems","vNode","_a","_b","navigationNames","item","navigationIds","element","index","newNamesArray","newIdArray","debounce__default","keyDownEvent","h","createAppSettingsNavigation","createListElement"],"mappings":"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"}
+{"version":3,"file":"NcAppSettingsDialog.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 :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\tv-bind=\"dialogProperties\"\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template #navigation=\"{ isCollapsed }\">\n\t\t\t<ul :aria-label=\"settingsNavigationAriaLabel\"\n\t\t\t\t:class=\"{ 'navigation-list': true, 'navigation-list--collapsed': isCollapsed }\"\n\t\t\t\trole=\"tablist\">\n\t\t\t\t<li v-for=\"section in sections\" :key=\"section.id\">\n\t\t\t\t\t<a :aria-selected=\"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\trole=\"tab\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click=\"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 isMobile from '../../mixins/isMobile/index.js'\nimport { t } from '../../l10n.js'\n\nimport debounce from 'debounce'\n\nexport default {\n\n\tname: 'NcAppSettingsDialog',\n\n\tcomponents: {\n\t\tNcDialog,\n\t\tNcVNodes,\n\t},\n\n\tmixins: [isMobile],\n\tprovide() {\n\t\treturn {\n\t\t\tregisterSection: this.registerSection,\n\t\t\tunregisterSection: this.registerSection,\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\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?: 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\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\tmounted() {\n\t\t// Select first settings section\n\t\tthis.selectedSection = this.$slots.default[0].componentOptions.propsData.id\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\tthrow new Error(`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?.componentOptions?.propsData?.id === id)\n\t\t\t\treturn indexOf(idA) - indexOf(idB)\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * Called when a new section is unregistered\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\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&__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\theight: 100%;\n\t}\n\t&__content {\n\t\tmax-width: 100vw;\n\t\toverflow-y: auto;\n\t\toverflow-x: hidden;\n\t\tpadding: 24px;\n\t\twidth: 100%;\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&--collapsed {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tgap: 6px;\n\t}\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","Components_NcDialog","Components_NcVNodes","Mixins_isMobile","icon","l10n","id","name","otherId","otherName","newSections","idA","idB","indexOf","vnode","_b","_a","item","isOpen","debounce__default"],"mappings":"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"}

package/dist/Components/NcAppSettingsDialog.mjs

@@ -1,15 +1,23 @@
-import "../assets/index-1cf8eeb4.css";
-import r from "./NcModal.mjs";
-import c from "../Mixins/isMobile.mjs";
-import { t as d } from "../chunks/l10n-27a75c40.mjs";
-import p from "debounce";
-import { n as u } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-const g = {
+import "../assets/index-db5a8b1c.css";
+import u from "./NcDialog.mjs";
+import g from "./NcVNodes.mjs";
+import p from "../Mixins/isMobile.mjs";
+import { t as h } from "../chunks/l10n-b6d21146.mjs";
+import f from "debounce";
+import { n as m } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const _ = {
   name: "NcAppSettingsDialog",
   components: {
-    NcModal: r
+    NcDialog: u,
+    NcVNodes: g
+  },
+  mixins: [p],
+  provide() {
+    return {
+      registerSection: this.registerSection,
+      unregisterSection: this.registerSection
+    };
   },
-  mixins: [c],
   props: {
     /**
      * Determines the open / closed state of the modal
@@ -53,15 +61,37 @@ const g = {
       selectedSection: "",
       linkClicked: !1,
       addedScrollListener: !1,
-      scroller: null
+      scroller: null,
+      /**
+       * Currently registered settings sections
+       * @type {{ id: string, name: string, icon?: VNode[]  }}
+       */
+      sections: []
     };
   },
   computed: {
+    dialogProperties() {
+      return {
+        additionalTrapElements: this.additionalTrapElements,
+        class: "app-settings",
+        container: this.container,
+        contentClasses: "app-settings__content",
+        size: "large",
+        name: this.name,
+        navigationClasses: "app-settings__navigation"
+      };
+    },
+    /**
+     * Check if one or more navigation entries provide icons
+     */
+    hasNavigationIcons() {
+      return this.sections.some(({ icon: i }) => !!i);
+    },
     hasNavigation() {
       return !(this.isMobile || !this.showNavigation);
     },
     settingsNavigationAriaLabel() {
-      return d("Settings navigation");
+      return h("Settings navigation");
     }
   },
   mounted() {
@@ -72,142 +102,83 @@ const g = {
   },
   methods: {
     /**
-     * Builds the settings navigation menu
-     *
-     * @param {object} slots The default slots object passed from the render function.
-     * @return {Array} the navigation items
+     * Called when a new section is registered
+     * @param {string} id The section ID
+     * @param {string} name The section name
+     * @param {import('vue').VNode[]|undefined} icon Optional icon component
      */
-    getSettingsNavigation(t) {
-      const n = t.filter((e) => e.componentOptions).map((e) => {
-        var s, a;
-        return {
-          id: (s = e.componentOptions.propsData) == null ? void 0 : s.id,
-          name: (a = e.componentOptions.propsData) == null ? void 0 : a.name
-        };
-      }), o = t.map((e) => e.name), i = t.map((e) => e.id);
-      return n.forEach((e, s) => {
-        const a = [...o], l = [...i];
-        if (a.splice(s, 1), l.splice(s, 1), a.includes(e.name))
-          throw new Error(`Duplicate section name found: ${e}. Settings navigation sections must have unique section names.`);
-        if (l.includes(e.id))
-          throw new Error(`Duplicate section id found: ${e}. Settings navigation sections must have unique section ids.`);
-      }), n;
+    registerSection(i, e, n) {
+      if (this.sections.some(({ id: t }) => i === t))
+        throw new Error(`Duplicate section id found: ${i}. Settings navigation sections must have unique section ids.`);
+      if (this.sections.some(({ name: t }) => e === t))
+        throw new Error(`Duplicate section name found: ${e}. Settings navigation sections must have unique section names.`);
+      const o = [...this.sections, { id: i, name: e, icon: n }];
+      this.sections = o.sort(({ id: t }, { id: s }) => {
+        const l = (d) => this.$slots.default.indexOf((a) => {
+          var r, c;
+          return ((c = (r = a == null ? void 0 : a.componentOptions) == null ? void 0 : r.propsData) == null ? void 0 : c.id) === d;
+        });
+        return l(t) - l(s);
+      });
+    },
+    /**
+     * Called when a new section is unregistered
+     * @param {string} id The section ID
+     */
+    unregisterSection(i) {
+      this.sections = this.sections.filter(({ id: e }) => i === e);
     },
     /**
      * Scrolls the content to the selected settings section.absolute
      *
      * @param {string} item the ID of the section
      */
-    handleSettingsNavigationClick(t) {
-      this.linkClicked = !0, document.getElementById("settings-section_" + t).scrollIntoView({
+    handleSettingsNavigationClick(i) {
+      this.linkClicked = !0, document.getElementById("settings-section_" + i).scrollIntoView({
         behavior: "smooth",
         inline: "nearest"
-      }), this.selectedSection = t, setTimeout(() => {
+      }), this.selectedSection = i, setTimeout(() => {
         this.linkClicked = !1;
       }, 1e3);
     },
-    handleCloseModal() {
-      this.$emit("update:open", !1), this.scroller.removeEventListener("scroll", this.handleScroll), this.addedScrollListener = !1, this.scroller.scrollTop = 0;
+    handleCloseModal(i) {
+      i || (this.$emit("update:open", !1), this.scroller.removeEventListener("scroll", this.handleScroll), this.addedScrollListener = !1, this.scroller.scrollTop = 0);
     },
     handleScroll() {
       this.linkClicked || this.unfocusNavigationItem();
     },
     // Remove selected section once the user starts scrolling
-    unfocusNavigationItem: p(function() {
+    unfocusNavigationItem: f(function() {
       this.selectedSection = "", document.activeElement.className.includes("navigation-list__link") && document.activeElement.blur();
-    }, 300),
-    handleLinkKeydown(t, n) {
-      t.code === "Enter" && this.handleSettingsNavigationClick(n);
-    }
-  },
-  render(t) {
-    const n = () => this.hasNavigation ? [t("div", {
-      attrs: {
-        class: "app-settings__navigation",
-        role: "tablist",
-        "aria-label": this.settingsNavigationAriaLabel
-      }
-    }, [t("ul", {
-      attrs: {
-        class: "navigation-list",
-        role: "tablist"
-      }
-    }, this.getSettingsNavigation(this.$slots.default).map((i) => o(i)))])] : [], o = (i) => t("li", {}, [t("a", {
-      class: {
-        "navigation-list__link": !0,
-        "navigation-list__link--active": i.id === this.selectedSection
-      },
-      attrs: {
-        role: "tab",
-        "aria-selected": i.id === this.selectedSection,
-        tabindex: "0"
-      },
-      on: {
-        click: () => this.handleSettingsNavigationClick(i.id),
-        keydown: () => this.handleLinkKeydown(event, i.id)
-      }
-    }, i.name)]);
-    if (this.open)
-      return t("NcModal", {
-        class: [
-          "app-settings-modal"
-        ],
-        attrs: {
-          container: this.container,
-          size: "large",
-          additionalTrapElements: this.additionalTrapElements
-        },
-        on: {
-          close: () => {
-            this.handleCloseModal();
-          }
-        }
-      }, [
-        // main app-settings root element
-        t("div", {
-          attrs: {
-            class: "app-settings"
-          }
-        }, [
-          // app-settings name
-          t("h2", {
-            attrs: {
-              class: "app-settings__name"
-            }
-          }, this.name),
-          // app-settings navigation + content
-          t(
-            "div",
-            {
-              attrs: {
-                class: "app-settings__wrapper"
-              }
-            },
-            [
-              ...n(),
-              t("div", {
-                attrs: {
-                  class: "app-settings__content"
-                },
-                ref: "settingsScroller"
-              }, this.$slots.default)
-            ]
-          )
-        ])
-      ]);
+    }, 300)
   }
-}, m = null, h = null;
-var f = /* @__PURE__ */ u(
-  g,
-  m,
-  h,
+};
+var v = function() {
+  var e = this, n = e._self._c;
+  return e.open ? n("NcDialog", e._b({ on: { "update:open": e.handleCloseModal }, scopedSlots: e._u([{ key: "navigation", fn: function({ isCollapsed: o }) {
+    return [n("ul", { class: { "navigation-list": !0, "navigation-list--collapsed": o }, attrs: { "aria-label": e.settingsNavigationAriaLabel, role: "tablist" } }, e._l(e.sections, function(t) {
+      return n("li", { key: t.id }, [n("a", { class: {
+        "navigation-list__link": !0,
+        "navigation-list__link--active": t.id === e.selectedSection,
+        "navigation-list__link--icon": e.hasNavigationIcons
+      }, attrs: { "aria-selected": t.id === e.selectedSection, role: "tab", tabindex: "0" }, on: { click: function(s) {
+        return e.handleSettingsNavigationClick(t.id);
+      }, keydown: function(s) {
+        return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : e.handleSettingsNavigationClick(t.id);
+      } } }, [e.hasNavigationIcons ? n("div", { staticClass: "navigation-list__link-icon" }, [t.icon ? n("NcVNodes", { attrs: { vnodes: t.icon } }) : e._e()], 1) : e._e(), n("span", { staticClass: "navigation-list__link-text" }, [e._v(" " + e._s(t.name) + " ")])])]);
+    }), 0)];
+  } }], null, !1, 1562656468) }, "NcDialog", e.dialogProperties, !1), [n("div", { ref: "settingsScroller" }, [e._t("default")], 2)]) : e._e();
+}, S = [], k = /* @__PURE__ */ m(
+  _,
+  v,
+  S,
   !1,
   null,
-  "0ff961d8",
+  "b5b2caa2",
   null,
   null
 );
-const b = f.exports;
+const x = k.exports;
 export {
-  b as default
+  x as default
 };

package/dist/Components/NcAppSettingsDialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppSettingsDialog.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 -\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<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</docs>\n\n<script>\nimport NcModal from '../NcModal/index.js'\nimport isMobile from '../../mixins/isMobile/index.js'\nimport { t } from '../../l10n.js'\n\nimport debounce from 'debounce'\n\nexport default {\n\n\tname: 'NcAppSettingsDialog',\n\n\tcomponents: {\n\t\tNcModal,\n\t},\n\n\tmixins: [isMobile],\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\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}\n\t},\n\n\tcomputed: {\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\tmounted() {\n\t\t// Select first settings section\n\t\tthis.selectedSection = this.$slots.default[0].componentOptions.propsData.id\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\n\t\t/**\n\t\t * Builds the settings navigation menu\n\t\t *\n\t\t * @param {object} slots The default slots object passed from the render function.\n\t\t * @return {Array} the navigation items\n\t\t */\n\t\tgetSettingsNavigation(slots) {\n\t\t\t// Array of navigationitems strings\n\t\t\tconst navigationItems = slots.filter(vNode => vNode.componentOptions).map(vNode => {\n\t\t\t\treturn {\n\t\t\t\t\tid: vNode.componentOptions.propsData?.id,\n\t\t\t\t\tname: vNode.componentOptions.propsData?.name,\n\t\t\t\t}\n\t\t\t})\n\t\t\tconst navigationNames = slots.map(item => item.name)\n\t\t\tconst navigationIds = slots.map(item => item.id)\n\n\t\t\t// Check for the uniqueness of section names\n\t\t\tnavigationItems.forEach((element, index) => {\n\t\t\t\tconst newNamesArray = [...navigationNames]\n\t\t\t\tconst newIdArray = [...navigationIds]\n\t\t\t\tnewNamesArray.splice(index, 1)\n\t\t\t\tnewIdArray.splice(index, 1)\n\t\t\t\tif (newNamesArray.includes(element.name)) {\n\t\t\t\t\tthrow new Error(`Duplicate section name found: ${element}. Settings navigation sections must have unique section names.`)\n\t\t\t\t}\n\t\t\t\tif (newIdArray.includes(element.id)) {\n\t\t\t\t\tthrow new Error(`Duplicate section id found: ${element}. Settings navigation sections must have unique section ids.`)\n\t\t\t\t}\n\t\t\t})\n\t\t\treturn navigationItems\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() {\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\n\t\thandleLinkKeydown(keyDownEvent, item) {\n\t\t\tif (keyDownEvent.code === 'Enter') {\n\t\t\t\tthis.handleSettingsNavigationClick(item)\n\t\t\t}\n\t\t},\n\t},\n\n\trender(h) {\n\t\t/**\n\t\t * Build the navigation\n\t\t *\n\t\t * @return {object} the navigation\n\t\t */\n\t\tconst createAppSettingsNavigation = () => {\n\t\t\tif (this.hasNavigation) {\n\t\t\t\treturn [h('div', {\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\tclass: 'app-settings__navigation',\n\t\t\t\t\t\trole: 'tablist',\n\t\t\t\t\t\t'aria-label': this.settingsNavigationAriaLabel,\n\t\t\t\t\t},\n\t\t\t\t}, [h('ul', {\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\tclass: 'navigation-list',\n\t\t\t\t\t\trole: 'tablist',\n\t\t\t\t\t},\n\t\t\t\t}, this.getSettingsNavigation(this.$slots.default).map(item => {\n\t\t\t\t\treturn createListElement(item)\n\t\t\t\t}))])]\n\t\t\t} else {\n\t\t\t\treturn []\n\t\t\t}\n\t\t}\n\n\t\t/**\n\t\t * Build each list element in the navigation\n\t\t *\n\t\t * @param {object} item the navigation item\n\t\t * @return {object} the list element\n\t\t */\n\t\tconst createListElement = (item) => h('li', {}, [h('a', {\n\t\t\tclass: {\n\t\t\t\t'navigation-list__link': true,\n\t\t\t\t'navigation-list__link--active': item.id === this.selectedSection,\n\t\t\t},\n\n\t\t\tattrs: {\n\t\t\t\trole: 'tab',\n\t\t\t\t'aria-selected': item.id === this.selectedSection,\n\t\t\t\ttabindex: '0',\n\t\t\t},\n\n\t\t\ton: {\n\t\t\t\tclick: () => this.handleSettingsNavigationClick(item.id),\n\t\t\t\tkeydown: () => this.handleLinkKeydown(event, item.id),\n\t\t\t},\n\t\t}, item.name)])\n\n\t\t// Return value of the render function\n\t\tif (this.open) {\n\t\t\treturn h('NcModal', {\n\t\t\t\tclass: [\n\t\t\t\t\t'app-settings-modal',\n\t\t\t\t],\n\t\t\t\tattrs: {\n\t\t\t\t\tcontainer: this.container,\n\t\t\t\t\tsize: 'large',\n\t\t\t\t\tadditionalTrapElements: this.additionalTrapElements,\n\t\t\t\t},\n\t\t\t\ton: {\n\t\t\t\t\tclose: () => { this.handleCloseModal() },\n\t\t\t\t},\n\t\t\t}, [\n\t\t\t\t// main app-settings root element\n\t\t\t\th('div', {\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\tclass: 'app-settings',\n\t\t\t\t\t},\n\t\t\t\t}, [\n\t\t\t\t\t// app-settings name\n\t\t\t\t\th('h2', {\n\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\tclass: 'app-settings__name',\n\t\t\t\t\t\t},\n\t\t\t\t\t}, this.name),\n\n\t\t\t\t\t// app-settings navigation + content\n\t\t\t\t\th(\n\t\t\t\t\t\t'div',\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tclass: 'app-settings__wrapper',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t...createAppSettingsNavigation(),\n\t\t\t\t\t\t\th('div', {\n\t\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\t\tclass: 'app-settings__content',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tref: 'settingsScroller',\n\t\t\t\t\t\t\t}, this.$slots.default),\n\t\t\t\t\t\t],\n\t\t\t\t\t),\n\t\t\t\t]),\n\t\t\t])\n\t\t} else {\n\t\t\treturn undefined\n\t\t}\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n\n.app-settings-modal :deep(.modal-wrapper .modal-container) {\n\tdisplay: flex;\n\toverflow: hidden;\n}\n\n.app-settings {\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-width: 0;\n\t&__name {\n\t\tmin-height: $clickable-area;\n\t\theight: $clickable-area;\n\t\tline-height: $clickable-area;\n\t\tpadding-top: 4px; // Same as the close button top spacing\n\t\ttext-align: center;\n\t}\n\t&__wrapper {\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\t\toverflow: hidden;\n\t\theight: 100%;\n\t\tposition: relative;\n\t}\n\t&__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\theight: 100%;\n\t}\n\t&__content {\n\t\tmax-width: 100vw;\n\t\toverflow-y: auto;\n\t\toverflow-x: hidden;\n\t\tpadding: 24px;\n\t\twidth: 100%;\n\t}\n}\n\n.navigation-list {\n\theight: 100%;\n\tbox-sizing: border-box;\n\toverflow-y: auto;\n\tpadding: 12px;\n\t&__link {\n\t\tdisplay: block;\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\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\t\t&--active {\n\t\t\tbackground-color: var(--color-primary-element-light) !important;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","NcModal","isMobile","t","slots","navigationItems","vNode","_a","_b","navigationNames","item","navigationIds","element","index","newNamesArray","newIdArray","debounce","keyDownEvent","h","createAppSettingsNavigation","createListElement"],"mappings":"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"}
+{"version":3,"file":"NcAppSettingsDialog.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 :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\tv-bind=\"dialogProperties\"\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template #navigation=\"{ isCollapsed }\">\n\t\t\t<ul :aria-label=\"settingsNavigationAriaLabel\"\n\t\t\t\t:class=\"{ 'navigation-list': true, 'navigation-list--collapsed': isCollapsed }\"\n\t\t\t\trole=\"tablist\">\n\t\t\t\t<li v-for=\"section in sections\" :key=\"section.id\">\n\t\t\t\t\t<a :aria-selected=\"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\trole=\"tab\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click=\"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 isMobile from '../../mixins/isMobile/index.js'\nimport { t } from '../../l10n.js'\n\nimport debounce from 'debounce'\n\nexport default {\n\n\tname: 'NcAppSettingsDialog',\n\n\tcomponents: {\n\t\tNcDialog,\n\t\tNcVNodes,\n\t},\n\n\tmixins: [isMobile],\n\tprovide() {\n\t\treturn {\n\t\t\tregisterSection: this.registerSection,\n\t\t\tunregisterSection: this.registerSection,\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\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?: 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\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\tmounted() {\n\t\t// Select first settings section\n\t\tthis.selectedSection = this.$slots.default[0].componentOptions.propsData.id\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\tthrow new Error(`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?.componentOptions?.propsData?.id === id)\n\t\t\t\treturn indexOf(idA) - indexOf(idB)\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * Called when a new section is unregistered\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\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&__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\theight: 100%;\n\t}\n\t&__content {\n\t\tmax-width: 100vw;\n\t\toverflow-y: auto;\n\t\toverflow-x: hidden;\n\t\tpadding: 24px;\n\t\twidth: 100%;\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&--collapsed {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tgap: 6px;\n\t}\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","NcVNodes","isMobile","icon","t","id","name","otherId","otherName","newSections","idA","idB","indexOf","vnode","_b","_a","item","isOpen","debounce"],"mappings":"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"}

package/dist/Components/NcAppSettingsSection.cjs

@@ -1,7 +1,8 @@
-var o = require("../assets/index-1151d229.css");
+var a = require("../assets/index-1f25a3c0.css");
 const s = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
-const i = {
+const n = {
   name: "NcAppSettingsSection",
+  inject: ["registerSection", "unregisterSection"],
   props: {
     name: {
       type: String,
@@ -20,20 +21,38 @@ const i = {
     htmlId() {
       return "settings-section_" + this.id;
     }
+  },
+  // Reactive changes for section navigation
+  watch: {
+    id(e, t) {
+      var i;
+      this.unregisterSection(t), this.registerSection(e, this.name, (i = this.$slots) == null ? void 0 : i.icon);
+    },
+    name(e) {
+      var t;
+      this.unregisterSection(this.id), this.registerSection(this.id, e, (t = this.$slots) == null ? void 0 : t.icon);
+    }
+  },
+  mounted() {
+    var e;
+    this.registerSection(this.id, this.name, (e = this.$slots) == null ? void 0 : e.icon);
+  },
+  beforeDestroy() {
+    this.unregisterSection(this.id);
   }
 };
 var r = function() {
-  var t = this, n = t._self._c;
-  return n("div", { staticClass: "app-settings-section", attrs: { id: t.htmlId } }, [n("h3", { staticClass: "app-settings-section__name" }, [t._v(" " + t._s(t.name) + " ")]), t._t("default")], 2);
-}, _ = [], a = /* @__PURE__ */ s.normalizeComponent(
-  i,
+  var t = this, i = t._self._c;
+  return i("div", { staticClass: "app-settings-section", attrs: { id: t.htmlId } }, [i("h3", { staticClass: "app-settings-section__name" }, [t._v(" " + t._s(t.name) + " ")]), t._t("default"), t._e()], 2);
+}, o = [], c = /* @__PURE__ */ s.normalizeComponent(
+  n,
   r,
-  _,
+  o,
   !1,
   null,
-  "a8066fd5",
+  "5162e6df",
   null,
   null
 );
-const c = a.exports;
-module.exports = c;
+const _ = c.exports;
+module.exports = _;

package/dist/Components/NcAppSettingsSection.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppSettingsSection.cjs","sources":["../../src/components/NcAppSettingsSection/NcAppSettingsSection.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com>\n -\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\n<template>\n\t<div :id=\"htmlId\" class=\"app-settings-section\">\n\t\t<h3 class=\"app-settings-section__name\">\n\t\t\t{{ name }}\n\t\t</h3>\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppSettingsSection',\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t\tvalidator(id) {\n\t\t\t\t// Only alphanumeric, dash and underscore\n\t\t\t\treturn /^[a-z0-9\\-_]+$/.test(id)\n\t\t\t},\n\t\t},\n\t},\n\tcomputed: {\n\t\t// generate an id for each settingssection based on the name without whitespaces\n\t\thtmlId() {\n\t\t\treturn 'settings-section_' + this.id\n\t\t},\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings-section {\n\tmargin-bottom: 80px;\n\t&__name {\n\t\tfont-size: 20px;\n\t\tmargin: 0;\n\t\tpadding: 20px 0;\n\t\tfont-weight: bold;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n</style>\n"],"names":["_sfc_main","id"],"mappings":";;AAgCA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAAC,GAAA;AAEA,eAAA,iBAAA,KAAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA;AAAA,IAEA,SAAA;AACA,aAAA,sBAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppSettingsSection.cjs","sources":["../../src/components/NcAppSettingsSection/NcAppSettingsSection.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com>\n -\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\n<template>\n\t<div :id=\"htmlId\" class=\"app-settings-section\">\n\t\t<h3 class=\"app-settings-section__name\">\n\t\t\t{{ name }}\n\t\t</h3>\n\t\t<slot />\n\t\t<!-- @slot Optonal icon to for the secion in the navigation -->\n\t\t<slot v-if=\"false\" name=\"icon\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppSettingsSection',\n\tinject: ['registerSection', 'unregisterSection'],\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t\tvalidator(id) {\n\t\t\t\t// Only alphanumeric, dash and underscore\n\t\t\t\treturn /^[a-z0-9\\-_]+$/.test(id)\n\t\t\t},\n\t\t},\n\t},\n\tcomputed: {\n\t\t// generate an id for each settingssection based on the name without whitespaces\n\t\thtmlId() {\n\t\t\treturn 'settings-section_' + this.id\n\t\t},\n\t},\n\t// Reactive changes for section navigation\n\twatch: {\n\t\tid(newId, oldId) {\n\t\t\tthis.unregisterSection(oldId)\n\t\t\tthis.registerSection(newId, this.name, this.$slots?.icon)\n\t\t},\n\t\tname(newName) {\n\t\t\tthis.unregisterSection(this.id)\n\t\t\tthis.registerSection(this.id, newName, this.$slots?.icon)\n\t\t},\n\t},\n\tmounted() {\n\t\t// register section for navigation\n\t\tthis.registerSection(this.id, this.name, this.$slots?.icon)\n\t},\n\tbeforeDestroy() {\n\t\tthis.unregisterSection(this.id)\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings-section {\n\tmargin-bottom: 80px;\n\t&__name {\n\t\tfont-size: 20px;\n\t\tmargin: 0;\n\t\tpadding: 20px 0;\n\t\tfont-weight: bold;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n</style>\n"],"names":["_sfc_main","id","newId","oldId","_a","newName"],"mappings":";;AAkCA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA,CAAA,mBAAA,mBAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAAC,GAAA;AAEA,eAAA,iBAAA,KAAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA;AAAA,IAEA,SAAA;AACA,aAAA,sBAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA;AAAA,EAEA,OAAA;AAAA,IACA,GAAAC,GAAAC,GAAA;;AACA,WAAA,kBAAAA,CAAA,GACA,KAAA,gBAAAD,GAAA,KAAA,OAAAE,IAAA,KAAA,WAAA,gBAAAA,EAAA,IAAA;AAAA,IACA;AAAA,IACA,KAAAC,GAAA;;AACA,WAAA,kBAAA,KAAA,EAAA,GACA,KAAA,gBAAA,KAAA,IAAAA,IAAAD,IAAA,KAAA,WAAA,gBAAAA,EAAA,IAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;;AAEA,SAAA,gBAAA,KAAA,IAAA,KAAA,OAAAA,IAAA,KAAA,WAAA,gBAAAA,EAAA,IAAA;AAAA,EACA;AAAA,EACA,gBAAA;AACA,SAAA,kBAAA,KAAA,EAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}

package/dist/Components/NcAppSettingsSection.mjs

@@ -1,7 +1,8 @@
-import "../assets/index-1151d229.css";
+import "../assets/index-1f25a3c0.css";
 import { n as s } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-const i = {
+const n = {
   name: "NcAppSettingsSection",
+  inject: ["registerSection", "unregisterSection"],
   props: {
     name: {
       type: String,
@@ -20,22 +21,40 @@ const i = {
     htmlId() {
       return "settings-section_" + this.id;
     }
+  },
+  // Reactive changes for section navigation
+  watch: {
+    id(e, t) {
+      var i;
+      this.unregisterSection(t), this.registerSection(e, this.name, (i = this.$slots) == null ? void 0 : i.icon);
+    },
+    name(e) {
+      var t;
+      this.unregisterSection(this.id), this.registerSection(this.id, e, (t = this.$slots) == null ? void 0 : t.icon);
+    }
+  },
+  mounted() {
+    var e;
+    this.registerSection(this.id, this.name, (e = this.$slots) == null ? void 0 : e.icon);
+  },
+  beforeDestroy() {
+    this.unregisterSection(this.id);
   }
 };
 var r = function() {
-  var t = this, n = t._self._c;
-  return n("div", { staticClass: "app-settings-section", attrs: { id: t.htmlId } }, [n("h3", { staticClass: "app-settings-section__name" }, [t._v(" " + t._s(t.name) + " ")]), t._t("default")], 2);
-}, _ = [], a = /* @__PURE__ */ s(
-  i,
+  var t = this, i = t._self._c;
+  return i("div", { staticClass: "app-settings-section", attrs: { id: t.htmlId } }, [i("h3", { staticClass: "app-settings-section__name" }, [t._v(" " + t._s(t.name) + " ")]), t._t("default"), t._e()], 2);
+}, o = [], c = /* @__PURE__ */ s(
+  n,
   r,
-  _,
+  o,
   !1,
   null,
-  "a8066fd5",
+  "5162e6df",
   null,
   null
 );
-const p = a.exports;
+const d = c.exports;
 export {
-  p as default
+  d as default
 };

package/dist/Components/NcAppSettingsSection.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppSettingsSection.mjs","sources":["../../src/components/NcAppSettingsSection/NcAppSettingsSection.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com>\n -\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\n<template>\n\t<div :id=\"htmlId\" class=\"app-settings-section\">\n\t\t<h3 class=\"app-settings-section__name\">\n\t\t\t{{ name }}\n\t\t</h3>\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppSettingsSection',\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t\tvalidator(id) {\n\t\t\t\t// Only alphanumeric, dash and underscore\n\t\t\t\treturn /^[a-z0-9\\-_]+$/.test(id)\n\t\t\t},\n\t\t},\n\t},\n\tcomputed: {\n\t\t// generate an id for each settingssection based on the name without whitespaces\n\t\thtmlId() {\n\t\t\treturn 'settings-section_' + this.id\n\t\t},\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings-section {\n\tmargin-bottom: 80px;\n\t&__name {\n\t\tfont-size: 20px;\n\t\tmargin: 0;\n\t\tpadding: 20px 0;\n\t\tfont-weight: bold;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n</style>\n"],"names":["_sfc_main","id"],"mappings":";;AAgCA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAAC,GAAA;AAEA,eAAA,iBAAA,KAAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA;AAAA,IAEA,SAAA;AACA,aAAA,sBAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppSettingsSection.mjs","sources":["../../src/components/NcAppSettingsSection/NcAppSettingsSection.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com>\n -\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\n<template>\n\t<div :id=\"htmlId\" class=\"app-settings-section\">\n\t\t<h3 class=\"app-settings-section__name\">\n\t\t\t{{ name }}\n\t\t</h3>\n\t\t<slot />\n\t\t<!-- @slot Optonal icon to for the secion in the navigation -->\n\t\t<slot v-if=\"false\" name=\"icon\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppSettingsSection',\n\tinject: ['registerSection', 'unregisterSection'],\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t\tvalidator(id) {\n\t\t\t\t// Only alphanumeric, dash and underscore\n\t\t\t\treturn /^[a-z0-9\\-_]+$/.test(id)\n\t\t\t},\n\t\t},\n\t},\n\tcomputed: {\n\t\t// generate an id for each settingssection based on the name without whitespaces\n\t\thtmlId() {\n\t\t\treturn 'settings-section_' + this.id\n\t\t},\n\t},\n\t// Reactive changes for section navigation\n\twatch: {\n\t\tid(newId, oldId) {\n\t\t\tthis.unregisterSection(oldId)\n\t\t\tthis.registerSection(newId, this.name, this.$slots?.icon)\n\t\t},\n\t\tname(newName) {\n\t\t\tthis.unregisterSection(this.id)\n\t\t\tthis.registerSection(this.id, newName, this.$slots?.icon)\n\t\t},\n\t},\n\tmounted() {\n\t\t// register section for navigation\n\t\tthis.registerSection(this.id, this.name, this.$slots?.icon)\n\t},\n\tbeforeDestroy() {\n\t\tthis.unregisterSection(this.id)\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings-section {\n\tmargin-bottom: 80px;\n\t&__name {\n\t\tfont-size: 20px;\n\t\tmargin: 0;\n\t\tpadding: 20px 0;\n\t\tfont-weight: bold;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n</style>\n"],"names":["_sfc_main","id","newId","oldId","_a","newName"],"mappings":";;AAkCA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA,CAAA,mBAAA,mBAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAAC,GAAA;AAEA,eAAA,iBAAA,KAAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA;AAAA,IAEA,SAAA;AACA,aAAA,sBAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA;AAAA,EAEA,OAAA;AAAA,IACA,GAAAC,GAAAC,GAAA;;AACA,WAAA,kBAAAA,CAAA,GACA,KAAA,gBAAAD,GAAA,KAAA,OAAAE,IAAA,KAAA,WAAA,gBAAAA,EAAA,IAAA;AAAA,IACA;AAAA,IACA,KAAAC,GAAA;;AACA,WAAA,kBAAA,KAAA,EAAA,GACA,KAAA,gBAAA,KAAA,IAAAA,IAAAD,IAAA,KAAA,WAAA,gBAAAA,EAAA,IAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;;AAEA,SAAA,gBAAA,KAAA,IAAA,KAAA,OAAAA,IAAA,KAAA,WAAA,gBAAAA,EAAA,IAAA;AAAA,EACA;AAAA,EACA,gBAAA;AACA,SAAA,kBAAA,KAAA,EAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}