@nextcloud/vue 8.6.0 → 9.0.0-alpha.1

package/dist/chunks/NcAppSettingsDialog-FqEZ3lXG.mjs

@@ -1,184 +0,0 @@
-import '../assets/NcAppSettingsDialog-0eOo3ERv.css';
-import { N as c } from "./NcDialog-652A8lMI.mjs";
-import d from "../Components/NcVNodes.mjs";
-import { useIsMobile as u } from "../Composables/useIsMobile.mjs";
-import { r as g, l as h, a as f } from "./_l10n--bDJ_Qyj.mjs";
-import p from "debounce";
-import m from "vue";
-import { n as v } from "./_plugin-vue2_normalizer-u6G_3nkj.mjs";
-g(h);
-const _ = {
-  name: "NcAppSettingsDialog",
-  components: {
-    NcDialog: c,
-    NcVNodes: d
-  },
-  provide() {
-    return {
-      registerSection: this.registerSection,
-      unregisterSection: this.unregisterSection
-    };
-  },
-  props: {
-    /**
-     * Determines the open / closed state of the modal
-     */
-    open: {
-      type: Boolean,
-      required: !0
-    },
-    /**
-     * Shows the navigation on desktop if true
-     */
-    showNavigation: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Selector for the popover container
-     */
-    container: {
-      type: String,
-      default: "body"
-    },
-    /**
-     * Name of the settings
-     */
-    name: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Additional elements to add to the focus trap
-     */
-    additionalTrapElements: {
-      type: Array,
-      default: () => []
-    }
-  },
-  emits: ["update:open"],
-  setup() {
-    return {
-      isMobile: u()
-    };
-  },
-  data() {
-    return {
-      selectedSection: "",
-      linkClicked: !1,
-      addedScrollListener: !1,
-      scroller: null,
-      /**
-       * Currently registered settings sections
-       * @type {{ id: string, name: string, icon?: import('vue').VNode[] }[]}
-       */
-      sections: []
-    };
-  },
-  computed: {
-    dialogProperties() {
-      return {
-        additionalTrapElements: this.additionalTrapElements,
-        closeOnClickOutside: !0,
-        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: t }) => !!t);
-    },
-    hasNavigation() {
-      return !(this.isMobile || !this.showNavigation);
-    },
-    settingsNavigationAriaLabel() {
-      return f("Settings navigation");
-    }
-  },
-  updated() {
-    this.$refs.settingsScroller && (this.scroller = this.$refs.settingsScroller, this.addedScrollListener || (this.scroller.addEventListener("scroll", this.handleScroll), this.addedScrollListener = !0));
-  },
-  methods: {
-    /**
-     * 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
-     */
-    registerSection(t, e, n) {
-      if (this.sections.some(({ id: i }) => t === i))
-        throw new Error(`Duplicate section id found: ${t}. Settings navigation sections must have unique section ids.`);
-      this.sections.some(({ name: i }) => e === i) && m.util.warn(`Duplicate section name found: ${e}. Settings navigation sections must have unique section names.`);
-      const o = [...this.sections, { id: t, name: e, icon: n }];
-      this.sections = o.sort(({ id: i }, { id: s }) => {
-        const a = (l) => this.$slots.default?.findIndex?.((r) => r?.componentOptions?.propsData?.id === l) ?? -1;
-        return a(i) - a(s);
-      }), this.sections.length === 1 && (this.selectedSection = t);
-    },
-    /**
-     * Called when a section is unregistered to remove it from dialog
-     * @param {string} id The section ID
-     */
-    unregisterSection(t) {
-      this.sections = this.sections.filter(({ id: e }) => t !== e), this.selectedSection === t && (this.selectedSection = this.sections[0]?.id ?? "");
-    },
-    /**
-     * 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({
-        behavior: "smooth",
-        inline: "nearest"
-      }), this.selectedSection = t, setTimeout(() => {
-        this.linkClicked = !1;
-      }, 1e3);
-    },
-    handleCloseModal(t) {
-      t || (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() {
-      this.selectedSection = "", document.activeElement.className.includes("navigation-list__link") && document.activeElement.blur();
-    }, 300)
-  }
-};
-var S = function() {
-  var e = this, n = e._self._c;
-  return e.open ? n("NcDialog", e._b({ attrs: { "navigation-aria-label": e.settingsNavigationAriaLabel }, on: { "update:open": e.handleCloseModal }, scopedSlots: e._u([e.hasNavigation ? { key: "navigation", fn: function({ isCollapsed: o }) {
-    return [o ? e._e() : n("ul", { staticClass: "navigation-list" }, e._l(e.sections, function(i) {
-      return n("li", { key: i.id }, [n("a", { class: {
-        "navigation-list__link": !0,
-        "navigation-list__link--active": i.id === e.selectedSection,
-        "navigation-list__link--icon": e.hasNavigationIcons
-      }, attrs: { "aria-current": `${i.id === e.selectedSection}`, href: `#settings-section_${i.id}`, tabindex: "0" }, on: { click: function(s) {
-        return s.preventDefault(), e.handleSettingsNavigationClick(i.id);
-      }, keydown: function(s) {
-        return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : e.handleSettingsNavigationClick(i.id);
-      } } }, [e.hasNavigationIcons ? n("div", { staticClass: "navigation-list__link-icon" }, [i.icon ? n("NcVNodes", { attrs: { vnodes: i.icon } }) : e._e()], 1) : e._e(), n("span", { staticClass: "navigation-list__link-text" }, [e._v(" " + e._s(i.name) + " ")])])]);
-    }), 0)];
-  } } : null], null, !0) }, "NcDialog", e.dialogProperties, !1), [n("div", { ref: "settingsScroller" }, [e._t("default")], 2)]) : e._e();
-}, k = [], N = /* @__PURE__ */ v(
-  _,
-  S,
-  k,
-  !1,
-  null,
-  "3e0025d1",
-  null,
-  null
-);
-const L = N.exports;
-export {
-  L as N
-};

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

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

package/dist/chunks/NcAppSettingsDialog-tN3bu9XO.cjs

@@ -1,177 +0,0 @@
-require('../assets/NcAppSettingsDialog-0eOo3ERv.css');
-"use strict";
-const u = require("./NcDialog-dPYf81Dr.cjs"), g = require("../Components/NcVNodes.cjs"), h = require("../Composables/useIsMobile.cjs"), a = require("./_l10n-mEcF7TYU.cjs"), f = require("debounce"), p = require("vue"), _ = require("./_plugin-vue2_normalizer-DCfUPqga.cjs"), r = (t) => t && t.__esModule ? t : { default: t }, v = /* @__PURE__ */ r(f), m = /* @__PURE__ */ r(p);
-a.register(a.t38);
-const S = {
-  name: "NcAppSettingsDialog",
-  components: {
-    NcDialog: u.NcDialog,
-    NcVNodes: g
-  },
-  provide() {
-    return {
-      registerSection: this.registerSection,
-      unregisterSection: this.unregisterSection
-    };
-  },
-  props: {
-    /**
-     * Determines the open / closed state of the modal
-     */
-    open: {
-      type: Boolean,
-      required: !0
-    },
-    /**
-     * Shows the navigation on desktop if true
-     */
-    showNavigation: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Selector for the popover container
-     */
-    container: {
-      type: String,
-      default: "body"
-    },
-    /**
-     * Name of the settings
-     */
-    name: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Additional elements to add to the focus trap
-     */
-    additionalTrapElements: {
-      type: Array,
-      default: () => []
-    }
-  },
-  emits: ["update:open"],
-  setup() {
-    return {
-      isMobile: h.useIsMobile()
-    };
-  },
-  data() {
-    return {
-      selectedSection: "",
-      linkClicked: !1,
-      addedScrollListener: !1,
-      scroller: null,
-      /**
-       * Currently registered settings sections
-       * @type {{ id: string, name: string, icon?: import('vue').VNode[] }[]}
-       */
-      sections: []
-    };
-  },
-  computed: {
-    dialogProperties() {
-      return {
-        additionalTrapElements: this.additionalTrapElements,
-        closeOnClickOutside: !0,
-        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: t }) => !!t);
-    },
-    hasNavigation() {
-      return !(this.isMobile || !this.showNavigation);
-    },
-    settingsNavigationAriaLabel() {
-      return a.t("Settings navigation");
-    }
-  },
-  updated() {
-    this.$refs.settingsScroller && (this.scroller = this.$refs.settingsScroller, this.addedScrollListener || (this.scroller.addEventListener("scroll", this.handleScroll), this.addedScrollListener = !0));
-  },
-  methods: {
-    /**
-     * 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
-     */
-    registerSection(t, e, n) {
-      if (this.sections.some(({ id: i }) => t === i))
-        throw new Error(`Duplicate section id found: ${t}. Settings navigation sections must have unique section ids.`);
-      this.sections.some(({ name: i }) => e === i) && m.default.util.warn(`Duplicate section name found: ${e}. Settings navigation sections must have unique section names.`);
-      const o = [...this.sections, { id: t, name: e, icon: n }];
-      this.sections = o.sort(({ id: i }, { id: s }) => {
-        const l = (c) => this.$slots.default?.findIndex?.((d) => d?.componentOptions?.propsData?.id === c) ?? -1;
-        return l(i) - l(s);
-      }), this.sections.length === 1 && (this.selectedSection = t);
-    },
-    /**
-     * Called when a section is unregistered to remove it from dialog
-     * @param {string} id The section ID
-     */
-    unregisterSection(t) {
-      this.sections = this.sections.filter(({ id: e }) => t !== e), this.selectedSection === t && (this.selectedSection = this.sections[0]?.id ?? "");
-    },
-    /**
-     * 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({
-        behavior: "smooth",
-        inline: "nearest"
-      }), this.selectedSection = t, setTimeout(() => {
-        this.linkClicked = !1;
-      }, 1e3);
-    },
-    handleCloseModal(t) {
-      t || (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: v.default(function() {
-      this.selectedSection = "", document.activeElement.className.includes("navigation-list__link") && document.activeElement.blur();
-    }, 300)
-  }
-};
-var N = function() {
-  var e = this, n = e._self._c;
-  return e.open ? n("NcDialog", e._b({ attrs: { "navigation-aria-label": e.settingsNavigationAriaLabel }, on: { "update:open": e.handleCloseModal }, scopedSlots: e._u([e.hasNavigation ? { key: "navigation", fn: function({ isCollapsed: o }) {
-    return [o ? e._e() : n("ul", { staticClass: "navigation-list" }, e._l(e.sections, function(i) {
-      return n("li", { key: i.id }, [n("a", { class: {
-        "navigation-list__link": !0,
-        "navigation-list__link--active": i.id === e.selectedSection,
-        "navigation-list__link--icon": e.hasNavigationIcons
-      }, attrs: { "aria-current": `${i.id === e.selectedSection}`, href: `#settings-section_${i.id}`, tabindex: "0" }, on: { click: function(s) {
-        return s.preventDefault(), e.handleSettingsNavigationClick(i.id);
-      }, keydown: function(s) {
-        return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : e.handleSettingsNavigationClick(i.id);
-      } } }, [e.hasNavigationIcons ? n("div", { staticClass: "navigation-list__link-icon" }, [i.icon ? n("NcVNodes", { attrs: { vnodes: i.icon } }) : e._e()], 1) : e._e(), n("span", { staticClass: "navigation-list__link-text" }, [e._v(" " + e._s(i.name) + " ")])])]);
-    }), 0)];
-  } } : null], null, !0) }, "NcDialog", e.dialogProperties, !1), [n("div", { ref: "settingsScroller" }, [e._t("default")], 2)]) : e._e();
-}, k = [], C = /* @__PURE__ */ _.normalizeComponent(
-  S,
-  N,
-  k,
-  !1,
-  null,
-  "3e0025d1",
-  null,
-  null
-);
-const b = C.exports;
-exports.NcAppSettingsDialog = b;

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

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