@nextcloud/vue 8.31.0 → 8.32.0

package/dist/chunks/NcAppContent-C9NGJE6n.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcAppContent-C9NGJE6n.mjs","sources":["../../src/utils/rtl.ts","../../src/components/NcAppContent/NcAppContentDetailsToggle.vue","../../src/components/NcAppContent/NcAppContent.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { isRTL } from '@nextcloud/l10n'\n\nexport const isRtl = isRTL()\n","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<NcButton\n\t\t:aria-label=\"title\"\n\t\tclass=\"app-details-toggle\"\n\t\t:class=\"{ 'app-details-toggle--mobile': isMobile }\"\n\t\t:title=\"title\"\n\t\tvariant=\"tertiary\">\n\t\t<template #icon>\n\t\t\t<ArrowLeft v-if=\"isRtl\" :size=\"20\" />\n\t\t\t<ArrowRight v-else :size=\"20\" />\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport { emit } from '@nextcloud/event-bus'\nimport ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { t } from '../../l10n.js'\nimport { isRtl } from '../../utils/rtl.ts'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcAppContentDetailsToggle',\n\n\tcomponents: {\n\t\tArrowRight,\n\t\tArrowLeft,\n\t\tNcButton,\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tisRtl,\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\ttitle() {\n\t\t\treturn t('Go back to the list')\n\t\t},\n\t},\n\n\twatch: {\n\t\tisMobile: {\n\t\t\timmediate: true,\n\t\t\thandler() {\n\t\t\t\tthis.toggleAppNavigationButton(this.isMobile)\n\t\t\t},\n\t\t},\n\t},\n\n\tbeforeDestroy() {\n\t\tif (this.isMobile) {\n\t\t\tthis.toggleAppNavigationButton(false)\n\t\t}\n\t},\n\n\tmethods: {\n\t\ttoggleAppNavigationButton(hide = true) {\n\t\t\tconst appNavigationToggle = document.querySelector('.app-navigation .app-navigation-toggle')\n\t\t\tif (appNavigationToggle) {\n\t\t\t\tappNavigationToggle.style.display = hide ? 'none' : null\n\n\t\t\t\t// If we hide the NavigationToggle, we need to make sure the Navigation is also closed\n\t\t\t\tif (hide === true) {\n\t\t\t\t\temit('toggle-navigation', { open: false })\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.app-details-toggle {\n\tposition: sticky;\n\twidth: var(--default-clickable-area);\n\theight: var(--default-clickable-area);\n\tpadding: $icon-margin;\n\tcursor: pointer;\n\topacity: .6;\n\ttransform: rotate(180deg);\n\tbackground-color: var(--color-main-background);\n\tz-index: 2000;\n\n\ttop: var(--app-navigation-padding);\n\t// Navigation Toggle button width + 2 paddings around\n\tinset-inline-start: calc(var(--default-clickable-area) + var(--app-navigation-padding) * 2);\n\t&--mobile {\n\t\t// There is no NavigationToggle button\n\t\tinset-inline-start: var(--app-navigation-padding);\n\t}\n\n\t&:active,\n\t&:hover,\n\t&:focus {\n\t\topacity: 1;\n\t}\n}\n\n</style>\n","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis components provides a wrapper around the main app's content.\n\nSingle-column layouts can just use the default slot. A resizable column\ncan be added by providing content to the named slot `list`.\n\n### CSS variables\nIn the css section some css variables are declared and will be available for\nall the children of the NcAppContent component\n\n### Examples\n\n#### Usage: Single-column content\n```vue\n<template>\n\t<NcAppContent>\n\t\t<h2>Single-column main content</h2>\n\t</NcAppContent>\n</template>\n```\n\n#### Usage: Two resizable columns\n```vue\n<template>\n\t<NcAppContent>\n\t\t<template #list>\n\t\t\t<div>Resizable list content</div>\n\t\t</template>\n\n\t\t<div>Main content</div>\n\t</NcAppContent>\n</template>\n```\n\n#### Overriding Defaults\nThe default, min and max sizes (in percent) of the resizable list column can be overridden.\nThe list size must be between the min and the max width value.\n\n```\n<NcAppContent\n\t:list-size=\"35\"\n\t:list-min-width=\"20\"\n\t:list-max-width=\"45\"\n>...</NcAppContent>\n```\n\n#### Usage: Custom document title\nFor accessibility reasons every document should have a `h1` heading,\nthis is visually hidden, but required for a semantically correct document.\nYou can use your app name or current view for the heading.\n\nAdditionally you can set a custom document title, e.g. to show the current status.\n\n```vue\n<template>\n\t<NcAppContent :pageHeading=\"heading ? 'Heading' : undefined\" :pageTitle=\"title ? 'Title' : undefined\" >\n\t\t<NcCheckboxRadioSwitch type=\"switch\" :checked.sync=\"title\">\n\t\t\tToggle title\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch type=\"switch\" :checked.sync=\"heading\">\n\t\t\tToggle Heading\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcButton @click=\"reset\">Reset</NcButton>\n\t</NcAppContent>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\theading: false,\n\t\t\ttitle: false,\n\t\t}\n\t},\n\tmethods: {\n\t\treset() {\n\t\t\tthis.heading = false\n\t\t\tthis.title = false\n\t\t\tdocument.title = ''\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<main id=\"app-content-vue\" class=\"app-content no-snapper\" :class=\"{ 'app-content--has-list': hasList }\">\n\t\t<h1 v-if=\"pageHeading\" class=\"hidden-visually\">\n\t\t\t{{ pageHeading }}\n\t\t</h1>\n\n\t\t<template v-if=\"hasList\">\n\t\t\t<!-- Mobile view does not allow resizeable panes -->\n\t\t\t<div\n\t\t\t\tv-if=\"isMobile || layout === 'no-split'\"\n\t\t\t\tclass=\"app-content-wrapper app-content-wrapper--no-split\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'app-content-wrapper--show-details': showDetails,\n\t\t\t\t\t'app-content-wrapper--show-list': !showDetails,\n\t\t\t\t\t'app-content-wrapper--mobile': isMobile,\n\t\t\t\t}\">\n\t\t\t\t<NcAppContentDetailsToggle v-if=\"showDetails\" @click.native.stop.prevent=\"hideDetails\" />\n\n\t\t\t\t<div v-show=\"!showDetails\">\n\t\t\t\t\t<slot name=\"list\" />\n\t\t\t\t</div>\n\t\t\t\t<slot v-if=\"showDetails\" />\n\t\t\t</div>\n\t\t\t<div v-else-if=\"layout === 'vertical-split' || layout === 'horizontal-split'\" class=\"app-content-wrapper\">\n\t\t\t\t<Splitpanes\n\t\t\t\t\t:horizontal=\"layout === 'horizontal-split'\"\n\t\t\t\t\tclass=\"default-theme\"\n\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t'splitpanes--horizontal': layout === 'horizontal-split',\n\t\t\t\t\t\t'splitpanes--vertical': layout === 'vertical-split',\n\t\t\t\t\t}\"\n\t\t\t\t\t:rtl=\"isRtl\"\n\t\t\t\t\t@resized=\"handlePaneResize\">\n\t\t\t\t\t<Pane\n\t\t\t\t\t\tclass=\"splitpanes__pane-list\"\n\t\t\t\t\t\t:size=\"listPaneSize || paneDefaults.list.size\"\n\t\t\t\t\t\t:min-size=\"paneDefaults.list.min\"\n\t\t\t\t\t\t:max-size=\"paneDefaults.list.max\">\n\t\t\t\t\t\t<!-- @slot Provide a list to the app content -->\n\t\t\t\t\t\t<slot name=\"list\" />\n\t\t\t\t\t</Pane>\n\n\t\t\t\t\t<Pane\n\t\t\t\t\t\tclass=\"splitpanes__pane-details\"\n\t\t\t\t\t\t:size=\"detailsPaneSize\"\n\t\t\t\t\t\t:min-size=\"paneDefaults.details.min\"\n\t\t\t\t\t\t:max-size=\"paneDefaults.details.max\">\n\t\t\t\t\t\t<!-- @slot Provide the main content to the app content -->\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</Pane>\n\t\t\t\t</Splitpanes>\n\t\t\t</div>\n\t\t</template>\n\t\t<!-- @slot Provide the main content to the app content -->\n\t\t<slot v-if=\"!hasList\" />\n\t</main>\n</template>\n\n<script>\nimport { getBuilder } from '@nextcloud/browser-storage'\nimport { getCapabilities } from '@nextcloud/capabilities'\nimport { emit } from '@nextcloud/event-bus'\nimport { loadState } from '@nextcloud/initial-state'\nimport { useSwipe } from '@vueuse/core'\nimport { Pane, Splitpanes } from 'splitpanes'\nimport NcAppContentDetailsToggle from './NcAppContentDetailsToggle.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { logger } from '../../utils/logger.ts'\nimport { isRtl } from '../../utils/rtl.ts'\n\nimport 'splitpanes/dist/splitpanes.css'\n\nconst browserStorage = getBuilder('nextcloud').persist().build()\nconst instanceName = getCapabilities().theming?.name ?? 'Nextcloud'\nconst activeApp = loadState('core', 'active-app', appName)\nconst localizedAppNameState = loadState('core', 'apps', {})\nconst localizedAppName = (Array.isArray(localizedAppNameState)\n\t? localizedAppNameState.find((app) => app.id === activeApp)?.name\n\t: localizedAppNameState[activeApp]?.name\n) ?? appName\n\n/**\n * App content container to be used for the main content of your app\n *\n */\nexport default {\n\tname: 'NcAppContent',\n\n\tcomponents: {\n\t\tNcAppContentDetailsToggle,\n\t\tPane,\n\t\tSplitpanes,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Allows to disable the control by swipe of the app navigation open state\n\t\t *\n\t\t * @deprecated will be removed with the next version - use `disableSwipe` instead\n\t\t */\n\t\tallowSwipeNavigation: {\n\t\t\ttype: Boolean,\n\t\t\t// eslint-disable-next-line vue/no-boolean-default\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Allows to disable the control by swipe of the app navigation open state.\n\t\t */\n\t\tdisableSwipe: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the default width of the resizable list in % on vertical-split\n\t\t * or respectively the default height on horizontal-split.\n\t\t *\n\t\t * Must be between `listMinWidth` and `listMaxWidth`.\n\t\t */\n\t\tlistSize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the minimum width of the list column in % on vertical-split\n\t\t * or respectively the minimum height on horizontal-split.\n\t\t */\n\t\tlistMinWidth: {\n\t\t\ttype: Number,\n\t\t\tdefault: 15,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the maximum width of the list column in % on vertical-split\n\t\t * or respectively the maximum height on horizontal-split.\n\t\t */\n\t\tlistMaxWidth: {\n\t\t\ttype: Number,\n\t\t\tdefault: 40,\n\t\t},\n\n\t\t/**\n\t\t * Specify the config key for the pane config sizes\n\t\t * Default is the global var appName if you use the webpack-vue-config\n\t\t */\n\t\tpaneConfigKey: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * When in mobile view, only the list or the details are shown.\n\t\t *\n\t\t * If you provide a list, you need to provide a variable\n\t\t * that will be set to true by the user when an element of\n\t\t * the list gets selected. The details will then show a back\n\t\t * arrow to return to the list that will update this prop to false.\n\t\t */\n\t\tshowDetails: {\n\t\t\ttype: Boolean,\n\t\t\t// eslint-disable-next-line vue/no-boolean-default\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Content layout used when there is a list together with content:\n\t\t * - `vertical-split` - a 2-column layout with list and default content separated vertically\n\t\t * - `no-split` - a single column layout; List is shown when `showDetails` is `false`, otherwise the default slot content is shown with a back button to return to the list.\n\t\t * - 'horizontal-split' - a 2-column layout with list and default content separated horizontally\n\t\t * On mobile screen `no-split` layout is forced.\n\t\t */\n\t\tlayout: {\n\t\t\ttype: String,\n\t\t\tdefault: 'vertical-split',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['no-split', 'vertical-split', 'horizontal-split'].includes(value)\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Specify the `<h1>` page heading\n\t\t */\n\t\tpageHeading: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Allow setting the page's `<title>`\n\t\t *\n\t\t * If a page heading is set it defaults to `{pageHeading} - {appName} - {instanceName}` e.g. `Favorites - Files - MyPersonalCloud`.\n\t\t * When the page heading and the app name is the same only one is used, e.g. `Files - Files - MyPersonalCloud` is shown as `Files - MyPersonalCloud`.\n\t\t * When setting the prop then the following format will be used: `{pageTitle} - {instanceName}`\n\t\t */\n\t\tpageTitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:showDetails',\n\t\t'resize-list',\n\t\t'resize:list',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t\tisRtl,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcontentHeight: 0,\n\t\t\thasList: false,\n\t\t\thasContent: false,\n\t\t\tswiping: {},\n\t\t\tlistPaneSize: this.restorePaneConfig(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tpaneConfigID() {\n\t\t\t// If provided, let's use it\n\t\t\tif (this.paneConfigKey !== '') {\n\t\t\t\treturn `pane-list-size-${this.paneConfigKey}`\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\t// Using the webpack-vue-config, appName is a global variable\n\t\t\t\t// This will throw a ReferenceError when the global variable is missing\n\t\t\t\t// In that case either you provide paneConfigKey or else it fallback\n\t\t\t\t// to a global storage key\n\t\t\t\treturn `pane-list-size-${appName}`\n\t\t\t} catch {\n\t\t\t\tlogger.info('[NcAppContent]: falling back to global nextcloud pane config')\n\t\t\t\treturn 'pane-list-size-nextcloud'\n\t\t\t}\n\t\t},\n\n\t\tdetailsPaneSize() {\n\t\t\tif (this.listPaneSize) {\n\t\t\t\treturn 100 - this.listPaneSize\n\t\t\t}\n\t\t\treturn this.paneDefaults.details.size\n\t\t},\n\n\t\tpaneDefaults() {\n\t\t\treturn {\n\t\t\t\tlist: {\n\t\t\t\t\tsize: this.listSize,\n\t\t\t\t\tmin: this.listMinWidth,\n\t\t\t\t\tmax: this.listMaxWidth,\n\t\t\t\t},\n\n\t\t\t\t// set the inverse values of the details column\n\t\t\t\t// based on the provided (or default) values of the list column\n\t\t\t\tdetails: {\n\t\t\t\t\tsize: 100 - this.listSize,\n\t\t\t\t\tmin: 100 - this.listMaxWidth,\n\t\t\t\t\tmax: 100 - this.listMinWidth,\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\n\t\trealPageTitle() {\n\t\t\tconst entries = new Set()\n\t\t\tif (this.pageTitle) {\n\t\t\t\t// when page title is set we only use that\n\t\t\t\t// we still split to remove duplicated instanceName\n\t\t\t\tfor (const part of this.pageTitle.split(' - ')) {\n\t\t\t\t\tentries.add(part)\n\t\t\t\t}\n\t\t\t} else if (this.pageHeading) {\n\t\t\t\t// when the page heading is provided but not the title\n\t\t\t\t// then we split to remove duplicates\n\t\t\t\t// but also add the localized app name\n\t\t\t\tfor (const part of this.pageHeading.split(' - ')) {\n\t\t\t\t\tentries.add(part)\n\t\t\t\t}\n\n\t\t\t\tif (entries.size > 0) {\n\t\t\t\t\tentries.add(localizedAppName)\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\treturn null\n\t\t\t}\n\n\t\t\tentries.add(instanceName)\n\t\t\treturn [...entries.values()].join(' - ')\n\t\t},\n\t},\n\n\twatch: {\n\t\trealPageTitle: {\n\t\t\timmediate: true,\n\t\t\thandler() {\n\t\t\t\tif (this.realPageTitle !== null) {\n\t\t\t\t\tdocument.title = this.realPageTitle\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t},\n\n\tupdated() {\n\t\tthis.checkSlots()\n\t},\n\n\tmounted() {\n\t\tif (this.allowSwipeNavigation && !this.disableSwipe) {\n\t\t\tthis.swiping = useSwipe(this.$el, {\n\t\t\t\tonSwipeEnd: this.handleSwipe,\n\t\t\t})\n\t\t}\n\n\t\tthis.checkSlots()\n\t\tthis.restorePaneConfig()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * handle the swipe event\n\t\t *\n\t\t * @param {TouchEvent} e The touch event\n\t\t * @param {import('@vueuse/core').SwipeDirection} direction The swipe direction of the event\n\t\t */\n\t\thandleSwipe(e, direction) {\n\t\t\tconst minSwipeX = 70\n\t\t\tconst touchZone = 300\n\t\t\tif (Math.abs(this.swiping.lengthX) > minSwipeX) {\n\t\t\t\tif (this.swiping.coordsStart.x < (touchZone / 2) && direction === 'right') {\n\t\t\t\t\temit('toggle-navigation', {\n\t\t\t\t\t\topen: true,\n\t\t\t\t\t})\n\t\t\t\t} else if (this.swiping.coordsStart.x < touchZone * 1.5 && direction === 'left') {\n\t\t\t\t\temit('toggle-navigation', {\n\t\t\t\t\t\topen: false,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\thandlePaneResize(event) {\n\t\t\tconst listPaneSize = parseInt(event[0].size, 10)\n\t\t\tbrowserStorage.setItem(this.paneConfigID, JSON.stringify(listPaneSize))\n\t\t\tthis.listPaneSize = listPaneSize\n\t\t\t/**\n\t\t\t * Emitted when the list pane is resized by the user\n\t\t\t *\n\t\t\t * @deprecated listen on `resize-list` instead\n\t\t\t */\n\t\t\tthis.$emit('resize:list', { size: listPaneSize })\n\t\t\t/**\n\t\t\t * Emitted when the list pane is resized by the user\n\t\t\t */\n\t\t\tthis.$emit('resize-list', { size: listPaneSize })\n\t\t\tlogger.debug('AppContent pane config', listPaneSize)\n\t\t},\n\n\t\t// $slots is not reactive, we need to update this manually\n\t\tcheckSlots() {\n\t\t\tthis.hasList = !!this.$scopedSlots.list\n\t\t\tthis.hasContent = !!this.$scopedSlots.default\n\t\t},\n\n\t\t// browserStorage is not reactive, we need to update this manually\n\t\trestorePaneConfig() {\n\t\t\tconst listPaneSize = parseInt(browserStorage.getItem(this.paneConfigID), 10)\n\t\t\tif (!isNaN(listPaneSize) && listPaneSize !== this.listPaneSize) {\n\t\t\t\tlogger.debug('AppContent pane config', listPaneSize)\n\t\t\t\tthis.listPaneSize = listPaneSize\n\t\t\t\treturn listPaneSize\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * The user clicked the back arrow from the details view\n\t\t */\n\t\thideDetails() {\n\t\t\tthis.$emit('update:showDetails', false)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.app-content {\n\tposition: initial;\n\tz-index: 1000;\n\tflex-basis: 100vw;\n\theight: 100%;\n\t// Overriding server styles TODO: cleanup!\n\tmargin: 0 !important;\n\tbackground-color: var(--color-main-background);\n\tmin-width: 0;\n\n\t&:not(.app-content--has-list) {\n\t\toverflow: auto;\n\t}\n}\n\n.app-content-wrapper {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n}\n\n// Mobile list/details handling\n.app-content-wrapper--no-split {\n\t&.app-content-wrapper--show-list :deep() {\n\t\t.app-content-list {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t.app-content-details {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\t&.app-content-wrapper--show-details :deep() {\n\t\t.app-content-list {\n\t\t\tdisplay: none;\n\t\t}\n\t\t.app-content-details {\n\t\t\tdisplay: block;\n\t\t}\n\t}\n}\n\n:deep(.splitpanes.default-theme) {\n\t.app-content-list {\n\t\tmax-width: none;\n\t\t/* Thin scrollbar is hard to catch on resizable columns */\n\t\tscrollbar-width: auto;\n\t}\n\n\t.splitpanes__pane {\n\t\tbackground-color: transparent;\n\t\ttransition: none;\n\n\t\t&-list {\n\t\t\tmin-width: 300px;\n\t\t\tposition: sticky;\n\n\t\t\t@media only screen and (width < $breakpoint-mobile) {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t&-details {\n\t\t\toverflow-y: auto;\n\n\t\t\t@media only screen and (width < $breakpoint-mobile) {\n\t\t\t\tmin-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.splitpanes__splitter {\n\t\tbackground-color: var(--color-main-background);\n\t\t&::before, &::after {\n\t\t\tbackground-color: var(--color-border);\n\t\t}\n\t}\n\n\t&.splitpanes--vertical .splitpanes__splitter {\n\t\tborder-left: 1px solid var(--color-border);\n\t}\n\n\t&.splitpanes--horizontal .splitpanes__splitter {\n\t\tborder-top: 1px solid var(--color-border);\n\t}\n}\n\n.app-content-wrapper--show-list {\n\t:deep(.app-content-list) {\n\t\tmax-width: none;\n\t}\n}\n</style>\n"],"names":["_sfc_main"],"mappings":"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"}

package/dist/chunks/NcAppContent-Djy38ou2.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcAppContent-Djy38ou2.cjs","sources":["../../src/utils/rtl.ts","../../src/components/NcAppContent/NcAppContentDetailsToggle.vue","../../src/components/NcAppContent/NcAppContent.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { isRTL } from '@nextcloud/l10n'\n\nexport const isRtl = isRTL()\n","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<NcButton\n\t\t:aria-label=\"title\"\n\t\tclass=\"app-details-toggle\"\n\t\t:class=\"{ 'app-details-toggle--mobile': isMobile }\"\n\t\t:title=\"title\"\n\t\tvariant=\"tertiary\">\n\t\t<template #icon>\n\t\t\t<ArrowLeft v-if=\"isRtl\" :size=\"20\" />\n\t\t\t<ArrowRight v-else :size=\"20\" />\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport { emit } from '@nextcloud/event-bus'\nimport ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { t } from '../../l10n.js'\nimport { isRtl } from '../../utils/rtl.ts'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcAppContentDetailsToggle',\n\n\tcomponents: {\n\t\tArrowRight,\n\t\tArrowLeft,\n\t\tNcButton,\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tisRtl,\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\ttitle() {\n\t\t\treturn t('Go back to the list')\n\t\t},\n\t},\n\n\twatch: {\n\t\tisMobile: {\n\t\t\timmediate: true,\n\t\t\thandler() {\n\t\t\t\tthis.toggleAppNavigationButton(this.isMobile)\n\t\t\t},\n\t\t},\n\t},\n\n\tbeforeDestroy() {\n\t\tif (this.isMobile) {\n\t\t\tthis.toggleAppNavigationButton(false)\n\t\t}\n\t},\n\n\tmethods: {\n\t\ttoggleAppNavigationButton(hide = true) {\n\t\t\tconst appNavigationToggle = document.querySelector('.app-navigation .app-navigation-toggle')\n\t\t\tif (appNavigationToggle) {\n\t\t\t\tappNavigationToggle.style.display = hide ? 'none' : null\n\n\t\t\t\t// If we hide the NavigationToggle, we need to make sure the Navigation is also closed\n\t\t\t\tif (hide === true) {\n\t\t\t\t\temit('toggle-navigation', { open: false })\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.app-details-toggle {\n\tposition: sticky;\n\twidth: var(--default-clickable-area);\n\theight: var(--default-clickable-area);\n\tpadding: $icon-margin;\n\tcursor: pointer;\n\topacity: .6;\n\ttransform: rotate(180deg);\n\tbackground-color: var(--color-main-background);\n\tz-index: 2000;\n\n\ttop: var(--app-navigation-padding);\n\t// Navigation Toggle button width + 2 paddings around\n\tinset-inline-start: calc(var(--default-clickable-area) + var(--app-navigation-padding) * 2);\n\t&--mobile {\n\t\t// There is no NavigationToggle button\n\t\tinset-inline-start: var(--app-navigation-padding);\n\t}\n\n\t&:active,\n\t&:hover,\n\t&:focus {\n\t\topacity: 1;\n\t}\n}\n\n</style>\n","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis components provides a wrapper around the main app's content.\n\nSingle-column layouts can just use the default slot. A resizable column\ncan be added by providing content to the named slot `list`.\n\n### CSS variables\nIn the css section some css variables are declared and will be available for\nall the children of the NcAppContent component\n\n### Examples\n\n#### Usage: Single-column content\n```vue\n<template>\n\t<NcAppContent>\n\t\t<h2>Single-column main content</h2>\n\t</NcAppContent>\n</template>\n```\n\n#### Usage: Two resizable columns\n```vue\n<template>\n\t<NcAppContent>\n\t\t<template #list>\n\t\t\t<div>Resizable list content</div>\n\t\t</template>\n\n\t\t<div>Main content</div>\n\t</NcAppContent>\n</template>\n```\n\n#### Overriding Defaults\nThe default, min and max sizes (in percent) of the resizable list column can be overridden.\nThe list size must be between the min and the max width value.\n\n```\n<NcAppContent\n\t:list-size=\"35\"\n\t:list-min-width=\"20\"\n\t:list-max-width=\"45\"\n>...</NcAppContent>\n```\n\n#### Usage: Custom document title\nFor accessibility reasons every document should have a `h1` heading,\nthis is visually hidden, but required for a semantically correct document.\nYou can use your app name or current view for the heading.\n\nAdditionally you can set a custom document title, e.g. to show the current status.\n\n```vue\n<template>\n\t<NcAppContent :pageHeading=\"heading ? 'Heading' : undefined\" :pageTitle=\"title ? 'Title' : undefined\" >\n\t\t<NcCheckboxRadioSwitch type=\"switch\" :checked.sync=\"title\">\n\t\t\tToggle title\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch type=\"switch\" :checked.sync=\"heading\">\n\t\t\tToggle Heading\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcButton @click=\"reset\">Reset</NcButton>\n\t</NcAppContent>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\theading: false,\n\t\t\ttitle: false,\n\t\t}\n\t},\n\tmethods: {\n\t\treset() {\n\t\t\tthis.heading = false\n\t\t\tthis.title = false\n\t\t\tdocument.title = ''\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<main id=\"app-content-vue\" class=\"app-content no-snapper\" :class=\"{ 'app-content--has-list': hasList }\">\n\t\t<h1 v-if=\"pageHeading\" class=\"hidden-visually\">\n\t\t\t{{ pageHeading }}\n\t\t</h1>\n\n\t\t<template v-if=\"hasList\">\n\t\t\t<!-- Mobile view does not allow resizeable panes -->\n\t\t\t<div\n\t\t\t\tv-if=\"isMobile || layout === 'no-split'\"\n\t\t\t\tclass=\"app-content-wrapper app-content-wrapper--no-split\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'app-content-wrapper--show-details': showDetails,\n\t\t\t\t\t'app-content-wrapper--show-list': !showDetails,\n\t\t\t\t\t'app-content-wrapper--mobile': isMobile,\n\t\t\t\t}\">\n\t\t\t\t<NcAppContentDetailsToggle v-if=\"showDetails\" @click.native.stop.prevent=\"hideDetails\" />\n\n\t\t\t\t<div v-show=\"!showDetails\">\n\t\t\t\t\t<slot name=\"list\" />\n\t\t\t\t</div>\n\t\t\t\t<slot v-if=\"showDetails\" />\n\t\t\t</div>\n\t\t\t<div v-else-if=\"layout === 'vertical-split' || layout === 'horizontal-split'\" class=\"app-content-wrapper\">\n\t\t\t\t<Splitpanes\n\t\t\t\t\t:horizontal=\"layout === 'horizontal-split'\"\n\t\t\t\t\tclass=\"default-theme\"\n\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t'splitpanes--horizontal': layout === 'horizontal-split',\n\t\t\t\t\t\t'splitpanes--vertical': layout === 'vertical-split',\n\t\t\t\t\t}\"\n\t\t\t\t\t:rtl=\"isRtl\"\n\t\t\t\t\t@resized=\"handlePaneResize\">\n\t\t\t\t\t<Pane\n\t\t\t\t\t\tclass=\"splitpanes__pane-list\"\n\t\t\t\t\t\t:size=\"listPaneSize || paneDefaults.list.size\"\n\t\t\t\t\t\t:min-size=\"paneDefaults.list.min\"\n\t\t\t\t\t\t:max-size=\"paneDefaults.list.max\">\n\t\t\t\t\t\t<!-- @slot Provide a list to the app content -->\n\t\t\t\t\t\t<slot name=\"list\" />\n\t\t\t\t\t</Pane>\n\n\t\t\t\t\t<Pane\n\t\t\t\t\t\tclass=\"splitpanes__pane-details\"\n\t\t\t\t\t\t:size=\"detailsPaneSize\"\n\t\t\t\t\t\t:min-size=\"paneDefaults.details.min\"\n\t\t\t\t\t\t:max-size=\"paneDefaults.details.max\">\n\t\t\t\t\t\t<!-- @slot Provide the main content to the app content -->\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</Pane>\n\t\t\t\t</Splitpanes>\n\t\t\t</div>\n\t\t</template>\n\t\t<!-- @slot Provide the main content to the app content -->\n\t\t<slot v-if=\"!hasList\" />\n\t</main>\n</template>\n\n<script>\nimport { getBuilder } from '@nextcloud/browser-storage'\nimport { getCapabilities } from '@nextcloud/capabilities'\nimport { emit } from '@nextcloud/event-bus'\nimport { loadState } from '@nextcloud/initial-state'\nimport { useSwipe } from '@vueuse/core'\nimport { Pane, Splitpanes } from 'splitpanes'\nimport NcAppContentDetailsToggle from './NcAppContentDetailsToggle.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { logger } from '../../utils/logger.ts'\nimport { isRtl } from '../../utils/rtl.ts'\n\nimport 'splitpanes/dist/splitpanes.css'\n\nconst browserStorage = getBuilder('nextcloud').persist().build()\nconst instanceName = getCapabilities().theming?.name ?? 'Nextcloud'\nconst activeApp = loadState('core', 'active-app', appName)\nconst localizedAppNameState = loadState('core', 'apps', {})\nconst localizedAppName = (Array.isArray(localizedAppNameState)\n\t? localizedAppNameState.find((app) => app.id === activeApp)?.name\n\t: localizedAppNameState[activeApp]?.name\n) ?? appName\n\n/**\n * App content container to be used for the main content of your app\n *\n */\nexport default {\n\tname: 'NcAppContent',\n\n\tcomponents: {\n\t\tNcAppContentDetailsToggle,\n\t\tPane,\n\t\tSplitpanes,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Allows to disable the control by swipe of the app navigation open state\n\t\t *\n\t\t * @deprecated will be removed with the next version - use `disableSwipe` instead\n\t\t */\n\t\tallowSwipeNavigation: {\n\t\t\ttype: Boolean,\n\t\t\t// eslint-disable-next-line vue/no-boolean-default\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Allows to disable the control by swipe of the app navigation open state.\n\t\t */\n\t\tdisableSwipe: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the default width of the resizable list in % on vertical-split\n\t\t * or respectively the default height on horizontal-split.\n\t\t *\n\t\t * Must be between `listMinWidth` and `listMaxWidth`.\n\t\t */\n\t\tlistSize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the minimum width of the list column in % on vertical-split\n\t\t * or respectively the minimum height on horizontal-split.\n\t\t */\n\t\tlistMinWidth: {\n\t\t\ttype: Number,\n\t\t\tdefault: 15,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the maximum width of the list column in % on vertical-split\n\t\t * or respectively the maximum height on horizontal-split.\n\t\t */\n\t\tlistMaxWidth: {\n\t\t\ttype: Number,\n\t\t\tdefault: 40,\n\t\t},\n\n\t\t/**\n\t\t * Specify the config key for the pane config sizes\n\t\t * Default is the global var appName if you use the webpack-vue-config\n\t\t */\n\t\tpaneConfigKey: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * When in mobile view, only the list or the details are shown.\n\t\t *\n\t\t * If you provide a list, you need to provide a variable\n\t\t * that will be set to true by the user when an element of\n\t\t * the list gets selected. The details will then show a back\n\t\t * arrow to return to the list that will update this prop to false.\n\t\t */\n\t\tshowDetails: {\n\t\t\ttype: Boolean,\n\t\t\t// eslint-disable-next-line vue/no-boolean-default\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Content layout used when there is a list together with content:\n\t\t * - `vertical-split` - a 2-column layout with list and default content separated vertically\n\t\t * - `no-split` - a single column layout; List is shown when `showDetails` is `false`, otherwise the default slot content is shown with a back button to return to the list.\n\t\t * - 'horizontal-split' - a 2-column layout with list and default content separated horizontally\n\t\t * On mobile screen `no-split` layout is forced.\n\t\t */\n\t\tlayout: {\n\t\t\ttype: String,\n\t\t\tdefault: 'vertical-split',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['no-split', 'vertical-split', 'horizontal-split'].includes(value)\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Specify the `<h1>` page heading\n\t\t */\n\t\tpageHeading: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Allow setting the page's `<title>`\n\t\t *\n\t\t * If a page heading is set it defaults to `{pageHeading} - {appName} - {instanceName}` e.g. `Favorites - Files - MyPersonalCloud`.\n\t\t * When the page heading and the app name is the same only one is used, e.g. `Files - Files - MyPersonalCloud` is shown as `Files - MyPersonalCloud`.\n\t\t * When setting the prop then the following format will be used: `{pageTitle} - {instanceName}`\n\t\t */\n\t\tpageTitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:showDetails',\n\t\t'resize-list',\n\t\t'resize:list',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t\tisRtl,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcontentHeight: 0,\n\t\t\thasList: false,\n\t\t\thasContent: false,\n\t\t\tswiping: {},\n\t\t\tlistPaneSize: this.restorePaneConfig(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tpaneConfigID() {\n\t\t\t// If provided, let's use it\n\t\t\tif (this.paneConfigKey !== '') {\n\t\t\t\treturn `pane-list-size-${this.paneConfigKey}`\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\t// Using the webpack-vue-config, appName is a global variable\n\t\t\t\t// This will throw a ReferenceError when the global variable is missing\n\t\t\t\t// In that case either you provide paneConfigKey or else it fallback\n\t\t\t\t// to a global storage key\n\t\t\t\treturn `pane-list-size-${appName}`\n\t\t\t} catch {\n\t\t\t\tlogger.info('[NcAppContent]: falling back to global nextcloud pane config')\n\t\t\t\treturn 'pane-list-size-nextcloud'\n\t\t\t}\n\t\t},\n\n\t\tdetailsPaneSize() {\n\t\t\tif (this.listPaneSize) {\n\t\t\t\treturn 100 - this.listPaneSize\n\t\t\t}\n\t\t\treturn this.paneDefaults.details.size\n\t\t},\n\n\t\tpaneDefaults() {\n\t\t\treturn {\n\t\t\t\tlist: {\n\t\t\t\t\tsize: this.listSize,\n\t\t\t\t\tmin: this.listMinWidth,\n\t\t\t\t\tmax: this.listMaxWidth,\n\t\t\t\t},\n\n\t\t\t\t// set the inverse values of the details column\n\t\t\t\t// based on the provided (or default) values of the list column\n\t\t\t\tdetails: {\n\t\t\t\t\tsize: 100 - this.listSize,\n\t\t\t\t\tmin: 100 - this.listMaxWidth,\n\t\t\t\t\tmax: 100 - this.listMinWidth,\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\n\t\trealPageTitle() {\n\t\t\tconst entries = new Set()\n\t\t\tif (this.pageTitle) {\n\t\t\t\t// when page title is set we only use that\n\t\t\t\t// we still split to remove duplicated instanceName\n\t\t\t\tfor (const part of this.pageTitle.split(' - ')) {\n\t\t\t\t\tentries.add(part)\n\t\t\t\t}\n\t\t\t} else if (this.pageHeading) {\n\t\t\t\t// when the page heading is provided but not the title\n\t\t\t\t// then we split to remove duplicates\n\t\t\t\t// but also add the localized app name\n\t\t\t\tfor (const part of this.pageHeading.split(' - ')) {\n\t\t\t\t\tentries.add(part)\n\t\t\t\t}\n\n\t\t\t\tif (entries.size > 0) {\n\t\t\t\t\tentries.add(localizedAppName)\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\treturn null\n\t\t\t}\n\n\t\t\tentries.add(instanceName)\n\t\t\treturn [...entries.values()].join(' - ')\n\t\t},\n\t},\n\n\twatch: {\n\t\trealPageTitle: {\n\t\t\timmediate: true,\n\t\t\thandler() {\n\t\t\t\tif (this.realPageTitle !== null) {\n\t\t\t\t\tdocument.title = this.realPageTitle\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t},\n\n\tupdated() {\n\t\tthis.checkSlots()\n\t},\n\n\tmounted() {\n\t\tif (this.allowSwipeNavigation && !this.disableSwipe) {\n\t\t\tthis.swiping = useSwipe(this.$el, {\n\t\t\t\tonSwipeEnd: this.handleSwipe,\n\t\t\t})\n\t\t}\n\n\t\tthis.checkSlots()\n\t\tthis.restorePaneConfig()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * handle the swipe event\n\t\t *\n\t\t * @param {TouchEvent} e The touch event\n\t\t * @param {import('@vueuse/core').SwipeDirection} direction The swipe direction of the event\n\t\t */\n\t\thandleSwipe(e, direction) {\n\t\t\tconst minSwipeX = 70\n\t\t\tconst touchZone = 300\n\t\t\tif (Math.abs(this.swiping.lengthX) > minSwipeX) {\n\t\t\t\tif (this.swiping.coordsStart.x < (touchZone / 2) && direction === 'right') {\n\t\t\t\t\temit('toggle-navigation', {\n\t\t\t\t\t\topen: true,\n\t\t\t\t\t})\n\t\t\t\t} else if (this.swiping.coordsStart.x < touchZone * 1.5 && direction === 'left') {\n\t\t\t\t\temit('toggle-navigation', {\n\t\t\t\t\t\topen: false,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\thandlePaneResize(event) {\n\t\t\tconst listPaneSize = parseInt(event[0].size, 10)\n\t\t\tbrowserStorage.setItem(this.paneConfigID, JSON.stringify(listPaneSize))\n\t\t\tthis.listPaneSize = listPaneSize\n\t\t\t/**\n\t\t\t * Emitted when the list pane is resized by the user\n\t\t\t *\n\t\t\t * @deprecated listen on `resize-list` instead\n\t\t\t */\n\t\t\tthis.$emit('resize:list', { size: listPaneSize })\n\t\t\t/**\n\t\t\t * Emitted when the list pane is resized by the user\n\t\t\t */\n\t\t\tthis.$emit('resize-list', { size: listPaneSize })\n\t\t\tlogger.debug('AppContent pane config', listPaneSize)\n\t\t},\n\n\t\t// $slots is not reactive, we need to update this manually\n\t\tcheckSlots() {\n\t\t\tthis.hasList = !!this.$scopedSlots.list\n\t\t\tthis.hasContent = !!this.$scopedSlots.default\n\t\t},\n\n\t\t// browserStorage is not reactive, we need to update this manually\n\t\trestorePaneConfig() {\n\t\t\tconst listPaneSize = parseInt(browserStorage.getItem(this.paneConfigID), 10)\n\t\t\tif (!isNaN(listPaneSize) && listPaneSize !== this.listPaneSize) {\n\t\t\t\tlogger.debug('AppContent pane config', listPaneSize)\n\t\t\t\tthis.listPaneSize = listPaneSize\n\t\t\t\treturn listPaneSize\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * The user clicked the back arrow from the details view\n\t\t */\n\t\thideDetails() {\n\t\t\tthis.$emit('update:showDetails', false)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.app-content {\n\tposition: initial;\n\tz-index: 1000;\n\tflex-basis: 100vw;\n\theight: 100%;\n\t// Overriding server styles TODO: cleanup!\n\tmargin: 0 !important;\n\tbackground-color: var(--color-main-background);\n\tmin-width: 0;\n\n\t&:not(.app-content--has-list) {\n\t\toverflow: auto;\n\t}\n}\n\n.app-content-wrapper {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n}\n\n// Mobile list/details handling\n.app-content-wrapper--no-split {\n\t&.app-content-wrapper--show-list :deep() {\n\t\t.app-content-list {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t.app-content-details {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\t&.app-content-wrapper--show-details :deep() {\n\t\t.app-content-list {\n\t\t\tdisplay: none;\n\t\t}\n\t\t.app-content-details {\n\t\t\tdisplay: block;\n\t\t}\n\t}\n}\n\n:deep(.splitpanes.default-theme) {\n\t.app-content-list {\n\t\tmax-width: none;\n\t\t/* Thin scrollbar is hard to catch on resizable columns */\n\t\tscrollbar-width: auto;\n\t}\n\n\t.splitpanes__pane {\n\t\tbackground-color: transparent;\n\t\ttransition: none;\n\n\t\t&-list {\n\t\t\tmin-width: 300px;\n\t\t\tposition: sticky;\n\n\t\t\t@media only screen and (width < $breakpoint-mobile) {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t&-details {\n\t\t\toverflow-y: auto;\n\n\t\t\t@media only screen and (width < $breakpoint-mobile) {\n\t\t\t\tmin-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.splitpanes__splitter {\n\t\tbackground-color: var(--color-main-background);\n\t\t&::before, &::after {\n\t\t\tbackground-color: var(--color-border);\n\t\t}\n\t}\n\n\t&.splitpanes--vertical .splitpanes__splitter {\n\t\tborder-left: 1px solid var(--color-border);\n\t}\n\n\t&.splitpanes--horizontal .splitpanes__splitter {\n\t\tborder-top: 1px solid var(--color-border);\n\t}\n}\n\n.app-content-wrapper--show-list {\n\t:deep(.app-content-list) {\n\t\tmax-width: none;\n\t}\n}\n</style>\n"],"names":["isRTL","_sfc_main","ArrowRight","ArrowLeft","NcButton","useIsMobile","t","emit","getBuilder","getCapabilities","loadState","Pane","Splitpanes","logger","useSwipe"],"mappings":"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"}

package/dist/chunks/NcAppSettingsDialog-DVFw09eD.mjs

@@ -1,223 +0,0 @@
-import '../assets/NcAppSettingsDialog-DiJpVNeb.css';
-import debounce from "debounce";
-import Vue from "vue";
-import { useIsMobile } from "../Composables/useIsMobile.mjs";
-import { r as register, o as t47, a as t } from "./_l10n-BEfeU7gr.mjs";
-import { N as NcDialog } from "./NcDialog-Du-BeUCp.mjs";
-import NcVNodes from "../Components/NcVNodes.mjs";
-import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
-register(t47);
-const _sfc_main = {
-  name: "NcAppSettingsDialog",
-  components: {
-    NcDialog,
-    NcVNodes
-  },
-  provide() {
-    return {
-      registerSection: this.registerSection,
-      unregisterSection: this.unregisterSection
-    };
-  },
-  props: {
-    /**
-     * Determines the open / closed state of the modal
-     */
-    open: {
-      type: Boolean,
-      required: true
-    },
-    /**
-     * Shows the navigation on desktop if true
-     */
-    showNavigation: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * 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: useIsMobile()
-    };
-  },
-  data() {
-    return {
-      selectedSection: "",
-      linkClicked: false,
-      addedScrollListener: false,
-      scroller: null,
-      /**
-       * Currently registered settings sections
-       *
-       * @type {{ id: string, name: string, icon?: import('vue').VNode[] }[]}
-       */
-      sections: []
-    };
-  },
-  computed: {
-    dialogProperties() {
-      return {
-        additionalTrapElements: this.additionalTrapElements,
-        closeOnClickOutside: true,
-        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 }) => !!icon);
-    },
-    hasNavigation() {
-      if (this.isMobile || !this.showNavigation) {
-        return false;
-      } else {
-        return true;
-      }
-    },
-    settingsNavigationAriaLabel() {
-      return t("Settings navigation");
-    }
-  },
-  updated() {
-    if (!this.$refs.settingsScroller) {
-      return;
-    }
-    this.scroller = this.$refs.settingsScroller;
-    if (!this.addedScrollListener) {
-      this.scroller.addEventListener("scroll", this.handleScroll);
-      this.addedScrollListener = true;
-    }
-  },
-  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(id, name, icon) {
-      if (this.sections.some(({ id: otherId }) => id === otherId)) {
-        throw new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`);
-      }
-      if (this.sections.some(({ name: otherName }) => name === otherName)) {
-        Vue.util.warn(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`);
-      }
-      const newSections = [...this.sections, { id, name, icon }];
-      this.sections = newSections.sort(({ id: idA }, { id: idB }) => {
-        const indexOf = (id2) => this.$slots.default?.findIndex?.((vnode) => vnode?.componentOptions?.propsData?.id === id2) ?? -1;
-        return indexOf(idA) - indexOf(idB);
-      });
-      if (this.sections.length === 1) {
-        this.selectedSection = id;
-      }
-    },
-    /**
-     * Called when a section is unregistered to remove it from dialog
-     *
-     * @param {string} id The section ID
-     */
-    unregisterSection(id) {
-      this.sections = this.sections.filter(({ id: otherId }) => id !== otherId);
-      if (this.selectedSection === id) {
-        this.selectedSection = this.sections[0]?.id ?? "";
-      }
-    },
-    /**
-     * Scrolls the content to the selected settings section.absolute
-     *
-     * @param {string} item the ID of the section
-     */
-    handleSettingsNavigationClick(item) {
-      this.linkClicked = true;
-      document.getElementById("settings-section_" + item).scrollIntoView({
-        behavior: "smooth",
-        inline: "nearest"
-      });
-      this.selectedSection = item;
-      setTimeout(() => {
-        this.linkClicked = false;
-      }, 1e3);
-    },
-    handleCloseModal(isOpen) {
-      if (isOpen) {
-        return;
-      }
-      this.$emit("update:open", false);
-      this.scroller.removeEventListener("scroll", this.handleScroll);
-      this.addedScrollListener = false;
-      this.scroller.scrollTop = 0;
-    },
-    handleScroll() {
-      if (!this.linkClicked) {
-        this.unfocusNavigationItem();
-      }
-    },
-    // Remove selected section once the user starts scrolling
-    unfocusNavigationItem: debounce(function() {
-      this.selectedSection = "";
-      if (document.activeElement.className.includes("navigation-list__link")) {
-        document.activeElement.blur();
-      }
-    }, 300)
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _vm.open ? _c("NcDialog", _vm._b({ attrs: { "navigation-aria-label": _vm.settingsNavigationAriaLabel }, on: { "update:open": _vm.handleCloseModal }, scopedSlots: _vm._u([_vm.hasNavigation ? { key: "navigation", fn: function({ isCollapsed }) {
-    return [!isCollapsed ? _c("ul", { staticClass: "navigation-list" }, _vm._l(_vm.sections, function(section) {
-      return _c("li", { key: section.id }, [_c("a", { staticClass: "navigation-list__link", class: {
-        "navigation-list__link--active": section.id === _vm.selectedSection,
-        "navigation-list__link--icon": _vm.hasNavigationIcons
-      }, attrs: { "aria-current": `${section.id === _vm.selectedSection}`, "href": `#settings-section_${section.id}`, "tabindex": "0" }, on: { "click": function($event) {
-        $event.preventDefault();
-        return _vm.handleSettingsNavigationClick(section.id);
-      }, "keydown": function($event) {
-        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
-        return _vm.handleSettingsNavigationClick(section.id);
-      } } }, [_vm.hasNavigationIcons ? _c("div", { staticClass: "navigation-list__link-icon" }, [section.icon ? _c("NcVNodes", { attrs: { "vnodes": section.icon } }) : _vm._e()], 1) : _vm._e(), _c("span", { staticClass: "navigation-list__link-text" }, [_vm._v(" " + _vm._s(section.name) + " ")])])]);
-    }), 0) : _vm._e()];
-  } } : null], null, true) }, "NcDialog", _vm.dialogProperties, false), [_c("div", { ref: "settingsScroller" }, [_vm._t("default")], 2)]) : _vm._e();
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  "dd3489b8"
-);
-const NcAppSettingsDialog = __component__.exports;
-export {
-  NcAppSettingsDialog as N
-};
-//# sourceMappingURL=NcAppSettingsDialog-DVFw09eD.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"NcAppSettingsDialog-DVFw09eD.mjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nJust nest the `AppSettingSections` component into `NcAppSettingsDialog`,\nproviding the section's name prop. You can put your settings within each\n`NcAppSettingsSection` component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog :open.sync=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Example name 1\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Example name 2\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Example name 3\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Example name 4\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-5\" name=\"Example name 5\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-6\" name=\"Example name 6\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-7\" name=\"Example name 7\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-8\" name=\"Example name 8\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-9\" name=\"Example name 9\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-10\" name=\"Example name 10\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also add icons to the section navigation:\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog :open.sync=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Instagram\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Instagram :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tInstagram setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Mastodon\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Mastodon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tMastodon setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Twitch\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitch :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tTwitch setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Twitter\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tTwitter setting\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nimport Instagram from 'vue-material-design-icons/Instagram.vue'\nimport Mastodon from 'vue-material-design-icons/Mastodon.vue'\nimport Twitch from 'vue-material-design-icons/Twitch.vue'\nimport Twitter from 'vue-material-design-icons/Twitter.vue'\n\nexport default {\n\tcomponents: {\n\t\tInstagram,\n\t\tMastodon,\n\t\tTwitch,\n\t\tTwitter,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcDialog\n\t\tv-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\n\t\t\t\tv-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\n\t\t\t\t\t\t:aria-current=\"`${section.id === selectedSection}`\"\n\t\t\t\t\t\tclass=\"navigation-list__link\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'navigation-list__link--active': section.id === selectedSection,\n\t\t\t\t\t\t\t'navigation-list__link--icon': hasNavigationIcons,\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\t:href=\"`#settings-section_${section.id}`\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click.prevent=\"handleSettingsNavigationClick(section.id)\"\n\t\t\t\t\t\t@keydown.enter=\"handleSettingsNavigationClick(section.id)\">\n\t\t\t\t\t\t<div v-if=\"hasNavigationIcons\" class=\"navigation-list__link-icon\">\n\t\t\t\t\t\t\t<NcVNodes v-if=\"section.icon\" :vnodes=\"section.icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span class=\"navigation-list__link-text\">\n\t\t\t\t\t\t\t{{ section.name }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</template>\n\t\t<div ref=\"settingsScroller\">\n\t\t\t<slot />\n\t\t</div>\n\t</NcDialog>\n</template>\n\n<script>\nimport debounce from 'debounce'\nimport Vue from 'vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { t } from '../../l10n.js'\nimport NcDialog from '../NcDialog/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\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\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 *\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\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Called when a new section is registered\n\t\t *\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 *\n\t\t * @param {string} id The section ID\n\t\t */\n\t\tunregisterSection(id) {\n\t\t\tthis.sections = this.sections.filter(({ id: otherId }) => id !== otherId)\n\n\t\t\t// If the current section is unregistered, set the first section as selected\n\t\t\tif (this.selectedSection === id) {\n\t\t\t\tthis.selectedSection = this.sections[0]?.id ?? ''\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Scrolls the content to the selected settings section.absolute\n\t\t *\n\t\t * @param {string} item the ID of the section\n\t\t */\n\t\thandleSettingsNavigationClick(item) {\n\t\t\tthis.linkClicked = true\n\t\t\tdocument.getElementById('settings-section_' + item).scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t\tthis.selectedSection = item\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.linkClicked = false\n\t\t\t}, 1000)\n\t\t},\n\n\t\thandleCloseModal(isOpen) {\n\t\t\tif (isOpen) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.$emit('update:open', false)\n\t\t\t// Remove scroll listener each time the modal is closed\n\t\t\tthis.scroller.removeEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = false\n\t\t\tthis.scroller.scrollTop = 0\n\t\t},\n\n\t\thandleScroll() {\n\t\t\tif (!this.linkClicked) {\n\t\t\t\tthis.unfocusNavigationItem()\n\t\t\t}\n\t\t},\n\n\t\t// Remove selected section once the user starts scrolling\n\t\tunfocusNavigationItem: debounce(function() {\n\t\t\tthis.selectedSection = ''\n\t\t\tif (document.activeElement.className.includes('navigation-list__link')) {\n\t\t\t\tdocument.activeElement.blur()\n\t\t\t}\n\t\t}, 300),\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings {\n\t:deep &__navigation {\n\t\tmin-width: 200px;\n\t\tmargin-right: calc(4 * var(--default-grid-baseline));\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tposition: relative;\n\t}\n\t:deep &__content {\n\t\tbox-sizing: border-box;\n\t\tpadding-inline: calc(4 * var(--default-grid-baseline));\n\t}\n}\n\n.navigation-list {\n\theight: 100%;\n\tbox-sizing: border-box;\n\toverflow-y: auto;\n\tpadding: calc(3 * var(--default-grid-baseline));\n\n\t&__link {\n\t\tdisplay: flex;\n\t\talign-content: center;\n\t\tfont-size: 16px;\n\t\theight: var(--default-clickable-area);\n\t\tmargin: 4px 0;\n\t\tline-height: var(--default-clickable-area);\n\t\tborder-radius: var(--border-radius-element, var(--border-radius-pill));\n\t\tfont-weight: bold;\n\t\tpadding: 0 calc(4 * var(--default-grid-baseline));\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\toverflow: hidden;\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&--active {\n\t\t\tbackground-color: var(--color-primary-element-light) !important;\n\t\t}\n\n\t\t&--icon {\n\t\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t\t\tgap: var(--default-grid-baseline);\n\t\t}\n\n\t\t&-icon {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-content: center;\n\t\t\twidth: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t\tmax-width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-settings {\n\t\t:deep .dialog__name {\n\t\t\tpadding-inline-start: 16px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["id"],"mappings":"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"}

package/dist/chunks/NcAppSettingsDialog-DalEoC9H.cjs

@@ -1,225 +0,0 @@
-require('../assets/NcAppSettingsDialog-DiJpVNeb.css');
-"use strict";
-const debounce = require("debounce");
-const Vue = require("vue");
-const Composables_useIsMobile = require("../Composables/useIsMobile.cjs");
-const _l10n = require("./_l10n-DM-VRK9x.cjs");
-const NcDialog = require("./NcDialog-B2tW1DtP.cjs");
-const Components_NcVNodes = require("../Components/NcVNodes.cjs");
-const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const debounce__default = /* @__PURE__ */ _interopDefault(debounce);
-const Vue__default = /* @__PURE__ */ _interopDefault(Vue);
-_l10n.register(_l10n.t47);
-const _sfc_main = {
-  name: "NcAppSettingsDialog",
-  components: {
-    NcDialog: NcDialog.NcDialog,
-    NcVNodes: Components_NcVNodes
-  },
-  provide() {
-    return {
-      registerSection: this.registerSection,
-      unregisterSection: this.unregisterSection
-    };
-  },
-  props: {
-    /**
-     * Determines the open / closed state of the modal
-     */
-    open: {
-      type: Boolean,
-      required: true
-    },
-    /**
-     * Shows the navigation on desktop if true
-     */
-    showNavigation: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * 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: Composables_useIsMobile.useIsMobile()
-    };
-  },
-  data() {
-    return {
-      selectedSection: "",
-      linkClicked: false,
-      addedScrollListener: false,
-      scroller: null,
-      /**
-       * Currently registered settings sections
-       *
-       * @type {{ id: string, name: string, icon?: import('vue').VNode[] }[]}
-       */
-      sections: []
-    };
-  },
-  computed: {
-    dialogProperties() {
-      return {
-        additionalTrapElements: this.additionalTrapElements,
-        closeOnClickOutside: true,
-        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 }) => !!icon);
-    },
-    hasNavigation() {
-      if (this.isMobile || !this.showNavigation) {
-        return false;
-      } else {
-        return true;
-      }
-    },
-    settingsNavigationAriaLabel() {
-      return _l10n.t("Settings navigation");
-    }
-  },
-  updated() {
-    if (!this.$refs.settingsScroller) {
-      return;
-    }
-    this.scroller = this.$refs.settingsScroller;
-    if (!this.addedScrollListener) {
-      this.scroller.addEventListener("scroll", this.handleScroll);
-      this.addedScrollListener = true;
-    }
-  },
-  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(id, name, icon) {
-      if (this.sections.some(({ id: otherId }) => id === otherId)) {
-        throw new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`);
-      }
-      if (this.sections.some(({ name: otherName }) => name === otherName)) {
-        Vue__default.default.util.warn(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`);
-      }
-      const newSections = [...this.sections, { id, name, icon }];
-      this.sections = newSections.sort(({ id: idA }, { id: idB }) => {
-        const indexOf = (id2) => this.$slots.default?.findIndex?.((vnode) => vnode?.componentOptions?.propsData?.id === id2) ?? -1;
-        return indexOf(idA) - indexOf(idB);
-      });
-      if (this.sections.length === 1) {
-        this.selectedSection = id;
-      }
-    },
-    /**
-     * Called when a section is unregistered to remove it from dialog
-     *
-     * @param {string} id The section ID
-     */
-    unregisterSection(id) {
-      this.sections = this.sections.filter(({ id: otherId }) => id !== otherId);
-      if (this.selectedSection === id) {
-        this.selectedSection = this.sections[0]?.id ?? "";
-      }
-    },
-    /**
-     * Scrolls the content to the selected settings section.absolute
-     *
-     * @param {string} item the ID of the section
-     */
-    handleSettingsNavigationClick(item) {
-      this.linkClicked = true;
-      document.getElementById("settings-section_" + item).scrollIntoView({
-        behavior: "smooth",
-        inline: "nearest"
-      });
-      this.selectedSection = item;
-      setTimeout(() => {
-        this.linkClicked = false;
-      }, 1e3);
-    },
-    handleCloseModal(isOpen) {
-      if (isOpen) {
-        return;
-      }
-      this.$emit("update:open", false);
-      this.scroller.removeEventListener("scroll", this.handleScroll);
-      this.addedScrollListener = false;
-      this.scroller.scrollTop = 0;
-    },
-    handleScroll() {
-      if (!this.linkClicked) {
-        this.unfocusNavigationItem();
-      }
-    },
-    // Remove selected section once the user starts scrolling
-    unfocusNavigationItem: debounce__default.default(function() {
-      this.selectedSection = "";
-      if (document.activeElement.className.includes("navigation-list__link")) {
-        document.activeElement.blur();
-      }
-    }, 300)
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _vm.open ? _c("NcDialog", _vm._b({ attrs: { "navigation-aria-label": _vm.settingsNavigationAriaLabel }, on: { "update:open": _vm.handleCloseModal }, scopedSlots: _vm._u([_vm.hasNavigation ? { key: "navigation", fn: function({ isCollapsed }) {
-    return [!isCollapsed ? _c("ul", { staticClass: "navigation-list" }, _vm._l(_vm.sections, function(section) {
-      return _c("li", { key: section.id }, [_c("a", { staticClass: "navigation-list__link", class: {
-        "navigation-list__link--active": section.id === _vm.selectedSection,
-        "navigation-list__link--icon": _vm.hasNavigationIcons
-      }, attrs: { "aria-current": `${section.id === _vm.selectedSection}`, "href": `#settings-section_${section.id}`, "tabindex": "0" }, on: { "click": function($event) {
-        $event.preventDefault();
-        return _vm.handleSettingsNavigationClick(section.id);
-      }, "keydown": function($event) {
-        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
-        return _vm.handleSettingsNavigationClick(section.id);
-      } } }, [_vm.hasNavigationIcons ? _c("div", { staticClass: "navigation-list__link-icon" }, [section.icon ? _c("NcVNodes", { attrs: { "vnodes": section.icon } }) : _vm._e()], 1) : _vm._e(), _c("span", { staticClass: "navigation-list__link-text" }, [_vm._v(" " + _vm._s(section.name) + " ")])])]);
-    }), 0) : _vm._e()];
-  } } : null], null, true) }, "NcDialog", _vm.dialogProperties, false), [_c("div", { ref: "settingsScroller" }, [_vm._t("default")], 2)]) : _vm._e();
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  "dd3489b8"
-);
-const NcAppSettingsDialog = __component__.exports;
-exports.NcAppSettingsDialog = NcAppSettingsDialog;
-//# sourceMappingURL=NcAppSettingsDialog-DalEoC9H.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"NcAppSettingsDialog-DalEoC9H.cjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nJust nest the `AppSettingSections` component into `NcAppSettingsDialog`,\nproviding the section's name prop. You can put your settings within each\n`NcAppSettingsSection` component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog :open.sync=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Example name 1\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Example name 2\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Example name 3\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Example name 4\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-5\" name=\"Example name 5\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-6\" name=\"Example name 6\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-7\" name=\"Example name 7\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-8\" name=\"Example name 8\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-9\" name=\"Example name 9\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-10\" name=\"Example name 10\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also add icons to the section navigation:\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog :open.sync=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Instagram\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Instagram :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tInstagram setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Mastodon\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Mastodon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tMastodon setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Twitch\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitch :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tTwitch setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Twitter\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tTwitter setting\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nimport Instagram from 'vue-material-design-icons/Instagram.vue'\nimport Mastodon from 'vue-material-design-icons/Mastodon.vue'\nimport Twitch from 'vue-material-design-icons/Twitch.vue'\nimport Twitter from 'vue-material-design-icons/Twitter.vue'\n\nexport default {\n\tcomponents: {\n\t\tInstagram,\n\t\tMastodon,\n\t\tTwitch,\n\t\tTwitter,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcDialog\n\t\tv-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\n\t\t\t\tv-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\n\t\t\t\t\t\t:aria-current=\"`${section.id === selectedSection}`\"\n\t\t\t\t\t\tclass=\"navigation-list__link\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'navigation-list__link--active': section.id === selectedSection,\n\t\t\t\t\t\t\t'navigation-list__link--icon': hasNavigationIcons,\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\t:href=\"`#settings-section_${section.id}`\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click.prevent=\"handleSettingsNavigationClick(section.id)\"\n\t\t\t\t\t\t@keydown.enter=\"handleSettingsNavigationClick(section.id)\">\n\t\t\t\t\t\t<div v-if=\"hasNavigationIcons\" class=\"navigation-list__link-icon\">\n\t\t\t\t\t\t\t<NcVNodes v-if=\"section.icon\" :vnodes=\"section.icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span class=\"navigation-list__link-text\">\n\t\t\t\t\t\t\t{{ section.name }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</template>\n\t\t<div ref=\"settingsScroller\">\n\t\t\t<slot />\n\t\t</div>\n\t</NcDialog>\n</template>\n\n<script>\nimport debounce from 'debounce'\nimport Vue from 'vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { t } from '../../l10n.js'\nimport NcDialog from '../NcDialog/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\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\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 *\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\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Called when a new section is registered\n\t\t *\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 *\n\t\t * @param {string} id The section ID\n\t\t */\n\t\tunregisterSection(id) {\n\t\t\tthis.sections = this.sections.filter(({ id: otherId }) => id !== otherId)\n\n\t\t\t// If the current section is unregistered, set the first section as selected\n\t\t\tif (this.selectedSection === id) {\n\t\t\t\tthis.selectedSection = this.sections[0]?.id ?? ''\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Scrolls the content to the selected settings section.absolute\n\t\t *\n\t\t * @param {string} item the ID of the section\n\t\t */\n\t\thandleSettingsNavigationClick(item) {\n\t\t\tthis.linkClicked = true\n\t\t\tdocument.getElementById('settings-section_' + item).scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t\tthis.selectedSection = item\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.linkClicked = false\n\t\t\t}, 1000)\n\t\t},\n\n\t\thandleCloseModal(isOpen) {\n\t\t\tif (isOpen) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.$emit('update:open', false)\n\t\t\t// Remove scroll listener each time the modal is closed\n\t\t\tthis.scroller.removeEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = false\n\t\t\tthis.scroller.scrollTop = 0\n\t\t},\n\n\t\thandleScroll() {\n\t\t\tif (!this.linkClicked) {\n\t\t\t\tthis.unfocusNavigationItem()\n\t\t\t}\n\t\t},\n\n\t\t// Remove selected section once the user starts scrolling\n\t\tunfocusNavigationItem: debounce(function() {\n\t\t\tthis.selectedSection = ''\n\t\t\tif (document.activeElement.className.includes('navigation-list__link')) {\n\t\t\t\tdocument.activeElement.blur()\n\t\t\t}\n\t\t}, 300),\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings {\n\t:deep &__navigation {\n\t\tmin-width: 200px;\n\t\tmargin-right: calc(4 * var(--default-grid-baseline));\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tposition: relative;\n\t}\n\t:deep &__content {\n\t\tbox-sizing: border-box;\n\t\tpadding-inline: calc(4 * var(--default-grid-baseline));\n\t}\n}\n\n.navigation-list {\n\theight: 100%;\n\tbox-sizing: border-box;\n\toverflow-y: auto;\n\tpadding: calc(3 * var(--default-grid-baseline));\n\n\t&__link {\n\t\tdisplay: flex;\n\t\talign-content: center;\n\t\tfont-size: 16px;\n\t\theight: var(--default-clickable-area);\n\t\tmargin: 4px 0;\n\t\tline-height: var(--default-clickable-area);\n\t\tborder-radius: var(--border-radius-element, var(--border-radius-pill));\n\t\tfont-weight: bold;\n\t\tpadding: 0 calc(4 * var(--default-grid-baseline));\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\toverflow: hidden;\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&--active {\n\t\t\tbackground-color: var(--color-primary-element-light) !important;\n\t\t}\n\n\t\t&--icon {\n\t\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t\t\tgap: var(--default-grid-baseline);\n\t\t}\n\n\t\t&-icon {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-content: center;\n\t\t\twidth: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t\tmax-width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-settings {\n\t\t:deep .dialog__name {\n\t\t\tpadding-inline-start: 16px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["NcDialog","NcVNodes","useIsMobile","t","Vue","id","debounce"],"mappings":"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"}