npm - @nextcloud/vue - Versions diffs - 9.8.1 → 9.8.2 - Mend

@nextcloud/vue 9.8.1 → 9.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (162) hide show

package/dist/chunks/{NcAppNavigationItem-BFAIHyTL.mjs.map → NcAppNavigationItem-B0-60shw.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcAppNavigationItem-BFAIHyTL.mjs","sources":["../../node_modules/vue-material-design-icons/Pencil.vue","../../node_modules/vue-material-design-icons/Undo.vue","../../src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue","../../src/components/NcAppNavigationItem/NcAppNavigationItem.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon pencil-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"PencilIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon undo-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"UndoIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<!-- Button to expand or collapse children -->\n\t<NcButton\n\t\tclass=\"icon-collapse\"\n\t\t:class=\"{\n\t\t\t'icon-collapse--active': active,\n\t\t\t'icon-collapse--open': open,\n\t\t}\"\n\t\t:aria-label=\"labelButton\"\n\t\t:variant=\"(active && isLegacy34) ? 'tertiary-on-primary' : 'tertiary'\"\n\t\t@click=\"onClick\">\n\t\t<template #icon>\n\t\t\t<ChevronUp\n\t\t\t\tv-if=\"open\"\n\t\t\t\t:size=\"20\" />\n\t\t\t<ChevronDown\n\t\t\t\tv-else\n\t\t\t\t:size=\"20\" />\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport ChevronDown from 'vue-material-design-icons/ChevronDown.vue'\nimport ChevronUp from 'vue-material-design-icons/ChevronUp.vue'\nimport { t } from '../../l10n.ts'\nimport { isLegacy34 } from '../../utils/legacy.ts'\nimport NcButton from '../NcButton/index.ts'\n\nexport default {\n\tname: 'NcAppNavigationIconCollapsible',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tChevronDown,\n\t\tChevronUp,\n\t},\n\n\tsetup() {\n\t\treturn { isLegacy34 }\n\t},\n\n\tprops: {\n\t\t/*\n\t\t Is the list currently open (or collapsed)\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 Is the navigation item currently active.\n\t\t /\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tcomputed: {\n\t\tlabelButton() {\n\t\t\treturn this.open ? t('Collapse menu') : t('Open menu')\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonClick(e) {\n\t\t\tthis.$emit('click', e)\n\t\t},\n\t},\n\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.icon-collapse {\n\tposition: relative;\n\tinset-inline-end: 0;\n\n\t// the whole navigation item is hovered thus will have the hover color - to distinguish we need to set a different color here.\n\t&:hover {\n\t\tbackground-color: var(--color-background-dark) !important;\n\t}\n\t&--active:hover {\n\t\tbackground-color: var(--color-primary-element) !important;\n\t}\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\n### Usage\n\n#### Simple element\n\n With an icon:\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"My name\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Check :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t},\n\t}\n\t</script>\n```\n* With a spinning loader instead of the icon:\n\n```vue\n<ul>\n\t<NcAppNavigationItem name=\"Loading Item\" :loading=\"true\" />\n</ul>\n```\n* With an active state (only needed when not using `vue-router` and the `to` property, otherwise this is set automatically)\n\n```vue\n<ul>\n\t<NcAppNavigationItem name=\"Current page\" :active=\"true\" />\n</ul>\n```\n\n* Using different icons based on the active state (e.g. using vue-router and showing the filled variant for the current route):\n\n```vue\n<template>\n\t<ul>\n\t\t<NcAppNavigationItem name=\"Current page\" :active=\"true\">\n\t\t\t<template #icon=\"{ active }\">\n\t\t\t\t<NcIconSvgWrapper :path=\"active ? mdiFolder : mdiFolderOutline\" />\n\t\t\t</template>\n\t\t</NcAppNavigationItem>\n\t\t<NcAppNavigationItem name=\"Other page\">\n\t\t\t<template #icon=\"{ active }\">\n\t\t\t\t<NcIconSvgWrapper :path=\"active ? mdiFolder : mdiFolderOutline\" />\n\t\t\t</template>\n\t\t</NcAppNavigationItem>\n\t</ul>\n</template>\n<script>\nimport { mdiFolder, mdiFolderOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiFolder,\n\t\t\tmdiFolderOutline,\n\t\t}\n\t},\n}\n</script>\n```\n\n#### Element with actions\nWrap the children in a template. If you have more than 2 actions, a popover menu and a menu\nbutton will be automatically created.\n\n```vue\n\t<template>\n\t\t<div id=\"app-navigation-vue-action\"><!-- Just a wrapper necessary in the docs. Not needed when NcAppNavigation is correctly used as parent. -->\n\t\t\t<ul>\n\t\t\t\t<NcAppNavigationItem name=\"Item with actions\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Check :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tEdit\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tDelete\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionLink name=\"Link\" href=\"https://nextcloud.com\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcActionLink>\n\t\t\t\t\t</template>\n\t\t\t\t</NcAppNavigationItem>\n\t\t\t</ul>\n\t\t</div>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check.vue'\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\n\timport Pencil from 'vue-material-design-icons/Pencil.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t\tDelete,\n\t\t\tOpenInNew,\n\t\t\tPencil,\n\t\t},\n\t\tmethods: {\n\t\t\talert(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\n#### Element with counter\nJust nest the counter in a template within `<NcAppNavigationItem>` and add `#counter` to it.\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"Item with counter\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFolderOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #counter>\n\t\t\t\t\t<NcCounterBubble :count=\"90\" />\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport IconFolderOutline from 'vue-material-design-icons/FolderOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconFolderOutline,\n\t\t},\n\t}\n\t</script>\n```\n\n#### Element with children\n\nWrap the children in a template with the `slot` property and use the prop `allowCollapse` to choose whether to allow or\nprevent the user from collapsing the items.\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"Item with children\" :allowCollapse=\"true\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFolderOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #counter>\n\t\t\t\t\t<NcCounterBubble :count=\"90\" />\n\t\t\t\t</template>\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tEdit\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDelete\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionLink name=\"Link\" href=\"https://nextcloud.com\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcActionLink>\n\t\t\t\t</template>\n\t\t\t\t<template #default>\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild1\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild2\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild3\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild4\" />\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport IconFolderOutline from 'vue-material-design-icons/FolderOutline.vue'\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\n\timport Pencil from 'vue-material-design-icons/Pencil.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconFolderOutline,\n\t\t\tDelete,\n\t\t\tOpenInNew,\n\t\t\tPencil,\n\t\t},\n\t\tmethods: {\n\t\t\talert(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\n#### Editable element\nAdd the prop `:editable=true` and an edit placeholder if you need it. By default\nthe placeholder is the previous name of the element.\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"Editable Item\" :editable=\"true\"\n\t\t\t\teditPlaceholder=\"your_placeholder_here\" @update:name=\"function(value){alert(value)}\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFolderOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport IconFolderOutline from 'vue-material-design-icons/FolderOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconFolderOutline,\n\t\t},\n\t\tmethods: {\n\t\t\talert(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\n#### Undo element\nJust set the `undo` and `name` props. When clicking the undo button, an `undo` event is emitted.\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem :undo=\"true\" name=\"Deleted important entry\" @undo=\"alert('undo delete')\" />\n\t\t</ul>\n\t</template>\n\t<script>\n\texport default {\n\t\tmethods: {\n\t\t\talert(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\n#### Link element\nHref that start by http will be treated as external and opened in a new tab\n```\n<div>\n\t<ul>\n\t\t<NcAppNavigationItem name=\"Files\" href=\"/index.php/apps/files\" />\n\t\t<NcAppNavigationItem name=\"Nextcloud\" href=\"https://nextcloud.com\" />\n\t</ul>\n</div>\n```\n\n#### Custom title\n```\n<ul>\n\t<NcAppNavigationItem name=\"Nextcloud\" title=\"Open the Nextcloud website\" href=\"https://nextcloud.com\" />\n</ul>\n```\n\n#### Pinned element\nJust set the `pinned` prop.\n```\n<ul>\n\t<NcAppNavigationItem name=\"Pinned item\" :pinned=\"true\" />\n</ul>\n```\n</docs>\n\n<template>\n\t<li\n\t\t:id=\"id\"\n\t\t:class=\"{\n\t\t\t'app-navigation-entry--opened': opened,\n\t\t\t'app-navigation-entry--pinned': pinned,\n\t\t\t'app-navigation-entry--collapsible': allowCollapse && !!$slots.default,\n\t\t}\"\n\t\tclass=\"app-navigation-entry-wrapper\">\n\t\t<component\n\t\t\t:is=\"isRouterLink ? 'router-link' : 'NcVNodes'\"\n\t\t\tv-slot=\"{ href: routerLinkHref, navigate, isActive }\"\n\t\t\tv-bind=\"{ ...isRouterLink && { custom: true, to } }\">\n\t\t\t<div\n\t\t\t\tclass=\"app-navigation-entry\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'app-navigation-entry--editing': editingActive,\n\t\t\t\t\t'app-navigation-entry--deleted': undo,\n\t\t\t\t\t'app-navigation-entry--legacy': isLegacy34,\n\t\t\t\t\tactive: (to && isActive) \|\| active,\n\t\t\t\t}\">\n\t\t\t\t<!-- Icon and name -->\n\t\t\t\t<a\n\t\t\t\t\tv-if=\"!undo\"\n\t\t\t\t\tclass=\"app-navigation-entry-link\"\n\t\t\t\t\t:aria-current=\"active \|\| (to && isActive) ? 'page' : undefined\"\n\t\t\t\t\t:aria-description=\"ariaDescription\"\n\t\t\t\t\t:aria-expanded=\"!!$slots.default ? opened.toString() : undefined\"\n\t\t\t\t\t:href=\"href \|\| routerLinkHref \|\| '#'\"\n\t\t\t\t\t:target=\"isExternal(href) ? '_blank' : undefined\"\n\t\t\t\t\t:title=\"title \|\| name\"\n\t\t\t\t\t@blur=\"handleBlur\"\n\t\t\t\t\t@click=\"onClick($event, navigate, routerLinkHref)\"\n\t\t\t\t\t@focus=\"handleFocus\"\n\t\t\t\t\t@keydown.tab.exact=\"handleTab\">\n\n\t\t\t\t\t<!-- icon if not collapsible -->\n\t\t\t\t\t<!-- never show the icon over the collapsible if mobile -->\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"app-navigation-entry-icon\"\n\t\t\t\t\t\t:class=\"{ [icon]: icon }\">\n\t\t\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t\t\t<!-- @slot Slot for the optional leading icon. This slots get the `active`-slot attribute passed which is based on the vue-routers active route or the `active` prop. -->\n\t\t\t\t\t\t<slot v-else name=\"icon\" :active=\"active \|\| (to && isActive)\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class=\"app-navigation-entry__name\" :class=\"{ 'hidden-visually': editingActive }\">\n\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div v-if=\"editingActive\" class=\"editingContainer\">\n\t\t\t\t\t\t<NcInputConfirmCancel\n\t\t\t\t\t\t\tref=\"editingInput\"\n\t\t\t\t\t\t\tv-model=\"editingValue\"\n\t\t\t\t\t\t\t:placeholder=\"editPlaceholder !== '' ? editPlaceholder : name\"\n\t\t\t\t\t\t\t:primary=\"(to && isActive) \|\| active\"\n\t\t\t\t\t\t\t@cancel=\"cancelEditing\"\n\t\t\t\t\t\t\t@confirm=\"handleEditingDone\" />\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\n\t\t\t\t<!-- undo entry -->\n\t\t\t\t<div v-if=\"undo\" class=\"app-navigation-entry__deleted\">\n\t\t\t\t\t<div class=\"app-navigation-entry__deleted-description\">\n\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Counter and Actions -->\n\t\t\t\t<div\n\t\t\t\t\tv-if=\"(!!$slots.actions \|\| !!$slots.counter \|\| editable \|\| undo) && !editingActive\"\n\t\t\t\t\tclass=\"app-navigation-entry__utils\"\n\t\t\t\t\t:class=\"{ 'app-navigation-entry__utils--display-actions': forceDisplayActions \|\| menuOpenLocalValue \|\| menuOpen }\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-if=\"!!$slots.counter\"\n\t\t\t\t\t\tclass=\"app-navigation-entry__counter-wrapper\">\n\t\t\t\t\t\t<!-- @slot Slot for the `NcCounterBubble` -->\n\t\t\t\t\t\t<slot name=\"counter\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<NcActions\n\t\t\t\t\t\tv-if=\"!!$slots.actions \|\| (editable && !editingActive) \|\| undo\"\n\t\t\t\t\t\tref=\"actions\"\n\t\t\t\t\t\tclass=\"app-navigation-entry__actions\"\n\t\t\t\t\t\tcontainer=\"#app-navigation-vue\"\n\t\t\t\t\t\t:boundariesElement=\"actionsBoundariesElement\"\n\t\t\t\t\t\t:inline=\"inlineActions\"\n\t\t\t\t\t\t:placement=\"menuPlacement\"\n\t\t\t\t\t\t:open=\"menuOpen\"\n\t\t\t\t\t\t:forceMenu=\"forceMenu\"\n\t\t\t\t\t\t:defaultIcon=\"menuIcon\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@update:open=\"onMenuToggle\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<!-- @slot Slot for the custom menu icon -->\n\t\t\t\t\t\t\t<slot name=\"menu-icon\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<NcActionButton\n\t\t\t\t\t\t\tv-if=\"editable && !editingActive\"\n\t\t\t\t\t\t\t:aria-label=\"editButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"handleEdit\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ editLabel }}\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionButton\n\t\t\t\t\t\t\tv-if=\"undo\"\n\t\t\t\t\t\t\t:aria-label=\"undoButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"handleUndo\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Undo :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<!-- @slot Slot for additional `NcAction` -->\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\t\t\t\t<NcAppNavigationIconCollapsible\n\t\t\t\t\tv-if=\"allowCollapse && !!$slots.default\"\n\t\t\t\t\t:active=\"(to && isActive) \|\| active\"\n\t\t\t\t\t:open=\"opened\"\n\t\t\t\t\t@click.prevent.stop=\"toggleCollapse\" />\n\n\t\t\t\t<!-- @slot Slot for anything (virtual) that should be mounted in the component, like a related modal -->\n\t\t\t\t<slot name=\"extra\" />\n\t\t\t</div>\n\t\t</component>\n\t\t<!-- Children elements -->\n\t\t<ul v-if=\"canHaveChildren && !!$slots.default\" class=\"app-navigation-entry__children\">\n\t\t\t<!-- @slot Slot for children -->\n\t\t\t<slot />\n\t\t</ul>\n\t</li>\n</template>\n\n<script>\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\nimport Undo from 'vue-material-design-icons/Undo.vue'\nimport NcAppNavigationIconCollapsible from './NcAppNavigationIconCollapsible.vue'\nimport NcInputConfirmCancel from './NcInputConfirmCancel.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isLegacy34 } from '../../utils/legacy.ts'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.ts'\nimport NcVNodes from '../NcVNodes/index.ts'\n\nexport default {\n\tname: 'NcAppNavigationItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcActionButton,\n\t\tNcAppNavigationIconCollapsible,\n\t\tNcInputConfirmCancel,\n\t\tNcLoadingIcon,\n\t\tNcVNodes,\n\t\tPencil,\n\t\tUndo,\n\t},\n\n\tprops: {\n\t\t/\n\t\t If you are not using vue-router you can use the property to set this item as the active navigation entry.\n\t\t * When using vue-router and the `to` property this is set automatically.\n\t\t /\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The main text content of the entry.\n\t\t /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/\n\t\t The title attribute of the element.\n\t\t /\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t id attribute of the list item element\n\t\t /\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => createElementId(),\n\t\t\tvalidator: (id) => id.trim() !== '',\n\t\t},\n\n\t\t/\n\t\t Refers to the icon on the left, this prop accepts a class\n\t\t * like 'icon-category-enabled'.\n\t\t /\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Displays a loading animated icon on the left of the element\n\t\t * instead of the icon.\n\t\t /\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Passing in a route will make the root element of this\n\t\t * component a `<router-link />` that points to that route.\n\t\t * By leaving this blank, the root element will be a `<li>`.\n\t\t /\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t A direct link. This will be used as the `href` attribute.\n\t\t * This will ignore any `to` prop being defined.\n\t\t /\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Gives the possibility to collapse the children elements into the\n\t\t * parent element (true) or expands the children elements (false).\n\t\t /\n\t\tallowCollapse: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Makes the name of the item editable by providing an `ActionButton`\n\t\t * component that toggles a form\n\t\t /\n\t\teditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Only for 'editable' items, sets label for the edit action button.\n\t\t /\n\t\teditLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Only for items in 'editable' mode, sets the placeholder text for the editing form.\n\t\t /\n\t\teditPlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Pins the item to the bottom left area, above the settings. Do not\n\t\t * place 'non-pinned' `AppnavigationItem` components below `pinned`\n\t\t * ones.\n\t\t /\n\t\tpinned: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Puts the item in the 'undo' state.\n\t\t /\n\t\tundo: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The navigation collapsible state (synced)\n\t\t /\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The actions menu open state (synced)\n\t\t /\n\t\tmenuOpen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Force the actions to display in a three dot menu\n\t\t /\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The action's menu default icon\n\t\t /\n\t\tmenuIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t The action's menu direction\n\t\t /\n\t\tmenuPlacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\t/\n\t\t Entry aria details\n\t\t /\n\t\tariaDescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t To be used only when the elements in the actions menu are very important\n\t\t /\n\t\tforceDisplayActions: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Number of action items outside the menu\n\t\t /\n\t\tinlineActions: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:menuOpen',\n\t\t'update:open',\n\t\t'update:name',\n\t\t'click',\n\t\t'undo',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t\tisLegacy34,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tactionsBoundariesElement: undefined,\n\t\t\teditingValue: '',\n\t\t\topened: this.open, // Collapsible state\n\t\t\teditingActive: false,\n\t\t\t/\n\t\t\t Tracks the open state of the actions menu\n\t\t\t /\n\t\t\tmenuOpenLocalValue: false,\n\t\t\tfocused: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tisRouterLink() {\n\t\t\treturn this.to && !this.href\n\t\t},\n\n\t\t// Checks if the component is already a children of another\n\t\t// instance of AppNavigationItem\n\t\tcanHaveChildren() {\n\t\t\tif (this.$parent.$options._componentTag === 'AppNavigationItem') {\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\teditButtonAriaLabel() {\n\t\t\treturn this.editLabel ? this.editLabel : t('Edit item')\n\t\t},\n\n\t\tundoButtonAriaLabel() {\n\t\t\treturn t('Undo changes')\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(newVal) {\n\t\t\tthis.opened = newVal\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.actionsBoundariesElement = document.querySelector('#content-vue') \|\| undefined\n\t},\n\n\tmethods: {\n\t\t// sync opened menu state with prop\n\t\tonMenuToggle(state) {\n\t\t\tthis.$emit('update:menuOpen', state)\n\t\t\tthis.menuOpenLocalValue = state\n\t\t},\n\n\t\t// toggle the collapsible state\n\t\ttoggleCollapse() {\n\t\t\tthis.opened = !this.opened\n\t\t\tthis.$emit('update:open', this.opened)\n\t\t},\n\n\t\t/\n\t\t Handle link click\n\t\t \n\t\t @param {PointerEvent} event - Native click event\n\t\t * @param {Function} [navigate] - VueRouter link's navigate if any\n\t\t * @param {string} [routerLinkHref] - VueRouter link's href\n\t\t /\n\t\tonClick(event, navigate, routerLinkHref) {\n\t\t\t// Always forward native event\n\t\t\tthis.$emit('click', event)\n\t\t\t// Do not navigate with control keys - it is opening in a new tab\n\t\t\tif (event.metaKey \|\| event.altKey \|\| event.ctrlKey \|\| event.shiftKey) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Prevent default link behaviour if it's a router-link and navigate manually\n\t\t\tif (routerLinkHref) {\n\t\t\t\tnavigate?.(event)\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\t// Edition methods\n\t\thandleEdit() {\n\t\t\tthis.editingValue = this.name\n\t\t\tthis.editingActive = true\n\t\t\tthis.onMenuToggle(false)\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$refs.editingInput.focusInput()\n\t\t\t})\n\t\t},\n\n\t\tcancelEditing() {\n\t\t\tthis.editingActive = false\n\t\t},\n\n\t\thandleEditingDone() {\n\t\t\tthis.$emit('update:name', this.editingValue)\n\t\t\tthis.editingValue = ''\n\t\t\tthis.editingActive = false\n\t\t},\n\n\t\t// Undo methods\n\t\thandleUndo() {\n\t\t\tthis.$emit('undo')\n\t\t},\n\n\t\t/\n\t\t Show actions upon focus\n\t\t /\n\t\thandleFocus() {\n\t\t\tthis.focused = true\n\t\t},\n\n\t\thandleBlur() {\n\t\t\tthis.focused = false\n\t\t},\n\n\t\t/\n\t\t This method checks if the root element of the component is focused and\n\t\t * if that's the case it focuses the actions button if available\n\t\t \n\t\t @param {Event} e the keydown event\n\t\t /\n\t\thandleTab(e) {\n\t\t\t// If there is no actions menu, do nothing.\n\t\t\tif (!this.$refs.actions) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.focused) {\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.$refs.actions.$refs.triggerButton.$el.focus()\n\t\t\t\tthis.focused = false\n\t\t\t} else {\n\t\t\t\tthis.$refs.actions.$refs.triggerButton.$el.blur()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Is this an external link\n\t\t \n\t\t @param {string} href The link to check\n\t\t * @return {boolean} Whether it is external or not\n\t\t */\n\t\tisExternal(href) {\n\t\t\t// Match any protocol\n\t\t\treturn href && href.match(/[a-z]+:\\/\\//i)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@use '../../assets/NcAppNavigationItem.scss';\n</style>\n"],"names":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","_createBlock","NcVNodes","_normalizeClass","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","_withCtx","_renderSlot","_createVNode","_toDisplayString","_createTextVNode"],"mappings":"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","x_google_ignoreList":[0,1]}
1	+ {"version":3,"file":"NcAppNavigationItem-B0-60shw.mjs","sources":["../../node_modules/vue-material-design-icons/Pencil.vue","../../node_modules/vue-material-design-icons/Undo.vue","../../src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue","../../src/components/NcAppNavigationItem/NcAppNavigationItem.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon pencil-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"PencilIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon undo-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"UndoIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<!-- Button to expand or collapse children -->\n\t<NcButton\n\t\tclass=\"icon-collapse\"\n\t\t:class=\"{\n\t\t\t'icon-collapse--active': active,\n\t\t\t'icon-collapse--open': open,\n\t\t}\"\n\t\t:aria-label=\"labelButton\"\n\t\t:variant=\"(active && isLegacy34) ? 'tertiary-on-primary' : 'tertiary'\"\n\t\t@click=\"onClick\">\n\t\t<template #icon>\n\t\t\t<ChevronUp\n\t\t\t\tv-if=\"open\"\n\t\t\t\t:size=\"20\" />\n\t\t\t<ChevronDown\n\t\t\t\tv-else\n\t\t\t\t:size=\"20\" />\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport ChevronDown from 'vue-material-design-icons/ChevronDown.vue'\nimport ChevronUp from 'vue-material-design-icons/ChevronUp.vue'\nimport { t } from '../../l10n.ts'\nimport { isLegacy34 } from '../../utils/legacy.ts'\nimport NcButton from '../NcButton/index.ts'\n\nexport default {\n\tname: 'NcAppNavigationIconCollapsible',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tChevronDown,\n\t\tChevronUp,\n\t},\n\n\tsetup() {\n\t\treturn { isLegacy34 }\n\t},\n\n\tprops: {\n\t\t/*\n\t\t Is the list currently open (or collapsed)\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 Is the navigation item currently active.\n\t\t /\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tcomputed: {\n\t\tlabelButton() {\n\t\t\treturn this.open ? t('Collapse menu') : t('Open menu')\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonClick(e) {\n\t\t\tthis.$emit('click', e)\n\t\t},\n\t},\n\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.icon-collapse {\n\tposition: relative;\n\tinset-inline-end: 0;\n\n\t// the whole navigation item is hovered thus will have the hover color - to distinguish we need to set a different color here.\n\t&:hover {\n\t\tbackground-color: var(--color-background-dark) !important;\n\t}\n\t&--active:hover {\n\t\tbackground-color: var(--color-primary-element) !important;\n\t}\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\n### Usage\n\n#### Simple element\n\n With an icon:\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"My name\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Check :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t},\n\t}\n\t</script>\n```\n* With a spinning loader instead of the icon:\n\n```vue\n<ul>\n\t<NcAppNavigationItem name=\"Loading Item\" :loading=\"true\" />\n</ul>\n```\n* With an active state (only needed when not using `vue-router` and the `to` property, otherwise this is set automatically)\n\n```vue\n<ul>\n\t<NcAppNavigationItem name=\"Current page\" :active=\"true\" />\n</ul>\n```\n\n* Using different icons based on the active state (e.g. using vue-router and showing the filled variant for the current route):\n\n```vue\n<template>\n\t<ul>\n\t\t<NcAppNavigationItem name=\"Current page\" :active=\"true\">\n\t\t\t<template #icon=\"{ active }\">\n\t\t\t\t<NcIconSvgWrapper :path=\"active ? mdiFolder : mdiFolderOutline\" />\n\t\t\t</template>\n\t\t</NcAppNavigationItem>\n\t\t<NcAppNavigationItem name=\"Other page\">\n\t\t\t<template #icon=\"{ active }\">\n\t\t\t\t<NcIconSvgWrapper :path=\"active ? mdiFolder : mdiFolderOutline\" />\n\t\t\t</template>\n\t\t</NcAppNavigationItem>\n\t</ul>\n</template>\n<script>\nimport { mdiFolder, mdiFolderOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiFolder,\n\t\t\tmdiFolderOutline,\n\t\t}\n\t},\n}\n</script>\n```\n\n#### Element with actions\nWrap the children in a template. If you have more than 2 actions, a popover menu and a menu\nbutton will be automatically created.\n\n```vue\n\t<template>\n\t\t<div id=\"app-navigation-vue-action\"><!-- Just a wrapper necessary in the docs. Not needed when NcAppNavigation is correctly used as parent. -->\n\t\t\t<ul>\n\t\t\t\t<NcAppNavigationItem name=\"Item with actions\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Check :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tEdit\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tDelete\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionLink name=\"Link\" href=\"https://nextcloud.com\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcActionLink>\n\t\t\t\t\t</template>\n\t\t\t\t</NcAppNavigationItem>\n\t\t\t</ul>\n\t\t</div>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check.vue'\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\n\timport Pencil from 'vue-material-design-icons/Pencil.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t\tDelete,\n\t\t\tOpenInNew,\n\t\t\tPencil,\n\t\t},\n\t\tmethods: {\n\t\t\talert(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\n#### Element with counter\nJust nest the counter in a template within `<NcAppNavigationItem>` and add `#counter` to it.\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"Item with counter\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFolderOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #counter>\n\t\t\t\t\t<NcCounterBubble :count=\"90\" />\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport IconFolderOutline from 'vue-material-design-icons/FolderOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconFolderOutline,\n\t\t},\n\t}\n\t</script>\n```\n\n#### Element with children\n\nWrap the children in a template with the `slot` property and use the prop `allowCollapse` to choose whether to allow or\nprevent the user from collapsing the items.\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"Item with children\" :allowCollapse=\"true\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFolderOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #counter>\n\t\t\t\t\t<NcCounterBubble :count=\"90\" />\n\t\t\t\t</template>\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tEdit\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDelete\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionLink name=\"Link\" href=\"https://nextcloud.com\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcActionLink>\n\t\t\t\t</template>\n\t\t\t\t<template #default>\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild1\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild2\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild3\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild4\" />\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport IconFolderOutline from 'vue-material-design-icons/FolderOutline.vue'\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\n\timport Pencil from 'vue-material-design-icons/Pencil.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconFolderOutline,\n\t\t\tDelete,\n\t\t\tOpenInNew,\n\t\t\tPencil,\n\t\t},\n\t\tmethods: {\n\t\t\talert(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\n#### Editable element\nAdd the prop `:editable=true` and an edit placeholder if you need it. By default\nthe placeholder is the previous name of the element.\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"Editable Item\" :editable=\"true\"\n\t\t\t\teditPlaceholder=\"your_placeholder_here\" @update:name=\"function(value){alert(value)}\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFolderOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport IconFolderOutline from 'vue-material-design-icons/FolderOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconFolderOutline,\n\t\t},\n\t\tmethods: {\n\t\t\talert(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\n#### Undo element\nJust set the `undo` and `name` props. When clicking the undo button, an `undo` event is emitted.\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem :undo=\"true\" name=\"Deleted important entry\" @undo=\"alert('undo delete')\" />\n\t\t</ul>\n\t</template>\n\t<script>\n\texport default {\n\t\tmethods: {\n\t\t\talert(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\n#### Link element\nHref that start by http will be treated as external and opened in a new tab\n```\n<div>\n\t<ul>\n\t\t<NcAppNavigationItem name=\"Files\" href=\"/index.php/apps/files\" />\n\t\t<NcAppNavigationItem name=\"Nextcloud\" href=\"https://nextcloud.com\" />\n\t</ul>\n</div>\n```\n\n#### Custom title\n```\n<ul>\n\t<NcAppNavigationItem name=\"Nextcloud\" title=\"Open the Nextcloud website\" href=\"https://nextcloud.com\" />\n</ul>\n```\n\n#### Pinned element\nJust set the `pinned` prop.\n```\n<ul>\n\t<NcAppNavigationItem name=\"Pinned item\" :pinned=\"true\" />\n</ul>\n```\n</docs>\n\n<template>\n\t<li\n\t\t:id=\"id\"\n\t\t:class=\"{\n\t\t\t'app-navigation-entry--opened': opened,\n\t\t\t'app-navigation-entry--pinned': pinned,\n\t\t\t'app-navigation-entry--collapsible': allowCollapse && !!$slots.default,\n\t\t}\"\n\t\tclass=\"app-navigation-entry-wrapper\">\n\t\t<component\n\t\t\t:is=\"isRouterLink ? 'router-link' : 'NcVNodes'\"\n\t\t\tv-slot=\"{ href: routerLinkHref, navigate, isActive }\"\n\t\t\tv-bind=\"{ ...isRouterLink && { custom: true, to } }\">\n\t\t\t<div\n\t\t\t\tclass=\"app-navigation-entry\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'app-navigation-entry--editing': editingActive,\n\t\t\t\t\t'app-navigation-entry--deleted': undo,\n\t\t\t\t\t'app-navigation-entry--legacy': isLegacy34,\n\t\t\t\t\tactive: (to && isActive) \|\| active,\n\t\t\t\t}\">\n\t\t\t\t<!-- Icon and name -->\n\t\t\t\t<a\n\t\t\t\t\tv-if=\"!undo\"\n\t\t\t\t\tclass=\"app-navigation-entry-link\"\n\t\t\t\t\t:aria-current=\"active \|\| (to && isActive) ? 'page' : undefined\"\n\t\t\t\t\t:aria-description=\"ariaDescription\"\n\t\t\t\t\t:aria-expanded=\"!!$slots.default ? opened.toString() : undefined\"\n\t\t\t\t\t:href=\"href \|\| routerLinkHref \|\| '#'\"\n\t\t\t\t\t:target=\"isExternal(href) ? '_blank' : undefined\"\n\t\t\t\t\t:title=\"title \|\| name\"\n\t\t\t\t\t@blur=\"handleBlur\"\n\t\t\t\t\t@click=\"onClick($event, navigate, routerLinkHref)\"\n\t\t\t\t\t@focus=\"handleFocus\"\n\t\t\t\t\t@keydown.tab.exact=\"handleTab\">\n\n\t\t\t\t\t<!-- icon if not collapsible -->\n\t\t\t\t\t<!-- never show the icon over the collapsible if mobile -->\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"app-navigation-entry-icon\"\n\t\t\t\t\t\t:class=\"{ [icon]: icon }\">\n\t\t\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t\t\t<!-- @slot Slot for the optional leading icon. This slots get the `active`-slot attribute passed which is based on the vue-routers active route or the `active` prop. -->\n\t\t\t\t\t\t<slot v-else name=\"icon\" :active=\"active \|\| (to && isActive)\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class=\"app-navigation-entry__name\" :class=\"{ 'hidden-visually': editingActive }\">\n\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div v-if=\"editingActive\" class=\"editingContainer\">\n\t\t\t\t\t\t<NcInputConfirmCancel\n\t\t\t\t\t\t\tref=\"editingInput\"\n\t\t\t\t\t\t\tv-model=\"editingValue\"\n\t\t\t\t\t\t\t:placeholder=\"editPlaceholder !== '' ? editPlaceholder : name\"\n\t\t\t\t\t\t\t:primary=\"(to && isActive) \|\| active\"\n\t\t\t\t\t\t\t@cancel=\"cancelEditing\"\n\t\t\t\t\t\t\t@confirm=\"handleEditingDone\" />\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\n\t\t\t\t<!-- undo entry -->\n\t\t\t\t<div v-if=\"undo\" class=\"app-navigation-entry__deleted\">\n\t\t\t\t\t<div class=\"app-navigation-entry__deleted-description\">\n\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Counter and Actions -->\n\t\t\t\t<div\n\t\t\t\t\tv-if=\"(!!$slots.actions \|\| !!$slots.counter \|\| editable \|\| undo) && !editingActive\"\n\t\t\t\t\tclass=\"app-navigation-entry__utils\"\n\t\t\t\t\t:class=\"{ 'app-navigation-entry__utils--display-actions': forceDisplayActions \|\| menuOpenLocalValue \|\| menuOpen }\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-if=\"!!$slots.counter\"\n\t\t\t\t\t\tclass=\"app-navigation-entry__counter-wrapper\">\n\t\t\t\t\t\t<!-- @slot Slot for the `NcCounterBubble` -->\n\t\t\t\t\t\t<slot name=\"counter\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<NcActions\n\t\t\t\t\t\tv-if=\"!!$slots.actions \|\| (editable && !editingActive) \|\| undo\"\n\t\t\t\t\t\tref=\"actions\"\n\t\t\t\t\t\tclass=\"app-navigation-entry__actions\"\n\t\t\t\t\t\tcontainer=\"#app-navigation-vue\"\n\t\t\t\t\t\t:boundariesElement=\"actionsBoundariesElement\"\n\t\t\t\t\t\t:inline=\"inlineActions\"\n\t\t\t\t\t\t:placement=\"menuPlacement\"\n\t\t\t\t\t\t:open=\"menuOpen\"\n\t\t\t\t\t\t:forceMenu=\"forceMenu\"\n\t\t\t\t\t\t:defaultIcon=\"menuIcon\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@update:open=\"onMenuToggle\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<!-- @slot Slot for the custom menu icon -->\n\t\t\t\t\t\t\t<slot name=\"menu-icon\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<NcActionButton\n\t\t\t\t\t\t\tv-if=\"editable && !editingActive\"\n\t\t\t\t\t\t\t:aria-label=\"editButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"handleEdit\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ editLabel }}\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionButton\n\t\t\t\t\t\t\tv-if=\"undo\"\n\t\t\t\t\t\t\t:aria-label=\"undoButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"handleUndo\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Undo :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<!-- @slot Slot for additional `NcAction` -->\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\t\t\t\t<NcAppNavigationIconCollapsible\n\t\t\t\t\tv-if=\"allowCollapse && !!$slots.default\"\n\t\t\t\t\t:active=\"(to && isActive) \|\| active\"\n\t\t\t\t\t:open=\"opened\"\n\t\t\t\t\t@click.prevent.stop=\"toggleCollapse\" />\n\n\t\t\t\t<!-- @slot Slot for anything (virtual) that should be mounted in the component, like a related modal -->\n\t\t\t\t<slot name=\"extra\" />\n\t\t\t</div>\n\t\t</component>\n\t\t<!-- Children elements -->\n\t\t<ul v-if=\"canHaveChildren && !!$slots.default\" class=\"app-navigation-entry__children\">\n\t\t\t<!-- @slot Slot for children -->\n\t\t\t<slot />\n\t\t</ul>\n\t</li>\n</template>\n\n<script>\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\nimport Undo from 'vue-material-design-icons/Undo.vue'\nimport NcAppNavigationIconCollapsible from './NcAppNavigationIconCollapsible.vue'\nimport NcInputConfirmCancel from './NcInputConfirmCancel.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isLegacy34 } from '../../utils/legacy.ts'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.ts'\nimport NcVNodes from '../NcVNodes/index.ts'\n\nexport default {\n\tname: 'NcAppNavigationItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcActionButton,\n\t\tNcAppNavigationIconCollapsible,\n\t\tNcInputConfirmCancel,\n\t\tNcLoadingIcon,\n\t\tNcVNodes,\n\t\tPencil,\n\t\tUndo,\n\t},\n\n\tprops: {\n\t\t/\n\t\t If you are not using vue-router you can use the property to set this item as the active navigation entry.\n\t\t * When using vue-router and the `to` property this is set automatically.\n\t\t /\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The main text content of the entry.\n\t\t /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/\n\t\t The title attribute of the element.\n\t\t /\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t id attribute of the list item element\n\t\t /\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => createElementId(),\n\t\t\tvalidator: (id) => id.trim() !== '',\n\t\t},\n\n\t\t/\n\t\t Refers to the icon on the left, this prop accepts a class\n\t\t * like 'icon-category-enabled'.\n\t\t /\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Displays a loading animated icon on the left of the element\n\t\t * instead of the icon.\n\t\t /\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Passing in a route will make the root element of this\n\t\t * component a `<router-link />` that points to that route.\n\t\t * By leaving this blank, the root element will be a `<li>`.\n\t\t /\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t A direct link. This will be used as the `href` attribute.\n\t\t * This will ignore any `to` prop being defined.\n\t\t /\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Gives the possibility to collapse the children elements into the\n\t\t * parent element (true) or expands the children elements (false).\n\t\t /\n\t\tallowCollapse: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Makes the name of the item editable by providing an `ActionButton`\n\t\t * component that toggles a form\n\t\t /\n\t\teditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Only for 'editable' items, sets label for the edit action button.\n\t\t /\n\t\teditLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Only for items in 'editable' mode, sets the placeholder text for the editing form.\n\t\t /\n\t\teditPlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Pins the item to the bottom left area, above the settings. Do not\n\t\t * place 'non-pinned' `AppnavigationItem` components below `pinned`\n\t\t * ones.\n\t\t /\n\t\tpinned: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Puts the item in the 'undo' state.\n\t\t /\n\t\tundo: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The navigation collapsible state (synced)\n\t\t /\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The actions menu open state (synced)\n\t\t /\n\t\tmenuOpen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Force the actions to display in a three dot menu\n\t\t /\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The action's menu default icon\n\t\t /\n\t\tmenuIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t The action's menu direction\n\t\t /\n\t\tmenuPlacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\t/\n\t\t Entry aria details\n\t\t /\n\t\tariaDescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t To be used only when the elements in the actions menu are very important\n\t\t /\n\t\tforceDisplayActions: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Number of action items outside the menu\n\t\t /\n\t\tinlineActions: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:menuOpen',\n\t\t'update:open',\n\t\t'update:name',\n\t\t'click',\n\t\t'undo',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t\tisLegacy34,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tactionsBoundariesElement: undefined,\n\t\t\teditingValue: '',\n\t\t\topened: this.open, // Collapsible state\n\t\t\teditingActive: false,\n\t\t\t/\n\t\t\t Tracks the open state of the actions menu\n\t\t\t /\n\t\t\tmenuOpenLocalValue: false,\n\t\t\tfocused: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tisRouterLink() {\n\t\t\treturn this.to && !this.href\n\t\t},\n\n\t\t// Checks if the component is already a children of another\n\t\t// instance of AppNavigationItem\n\t\tcanHaveChildren() {\n\t\t\tif (this.$parent.$options._componentTag === 'AppNavigationItem') {\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\teditButtonAriaLabel() {\n\t\t\treturn this.editLabel ? this.editLabel : t('Edit item')\n\t\t},\n\n\t\tundoButtonAriaLabel() {\n\t\t\treturn t('Undo changes')\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(newVal) {\n\t\t\tthis.opened = newVal\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.actionsBoundariesElement = document.querySelector('#content-vue') \|\| undefined\n\t},\n\n\tmethods: {\n\t\t// sync opened menu state with prop\n\t\tonMenuToggle(state) {\n\t\t\tthis.$emit('update:menuOpen', state)\n\t\t\tthis.menuOpenLocalValue = state\n\t\t},\n\n\t\t// toggle the collapsible state\n\t\ttoggleCollapse() {\n\t\t\tthis.opened = !this.opened\n\t\t\tthis.$emit('update:open', this.opened)\n\t\t},\n\n\t\t/\n\t\t Handle link click\n\t\t \n\t\t @param {PointerEvent} event - Native click event\n\t\t * @param {Function} [navigate] - VueRouter link's navigate if any\n\t\t * @param {string} [routerLinkHref] - VueRouter link's href\n\t\t /\n\t\tonClick(event, navigate, routerLinkHref) {\n\t\t\t// Always forward native event\n\t\t\tthis.$emit('click', event)\n\t\t\t// Do not navigate with control keys - it is opening in a new tab\n\t\t\tif (event.metaKey \|\| event.altKey \|\| event.ctrlKey \|\| event.shiftKey) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Prevent default link behaviour if it's a router-link and navigate manually\n\t\t\tif (routerLinkHref) {\n\t\t\t\tnavigate?.(event)\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\t// Edition methods\n\t\thandleEdit() {\n\t\t\tthis.editingValue = this.name\n\t\t\tthis.editingActive = true\n\t\t\tthis.onMenuToggle(false)\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$refs.editingInput.focusInput()\n\t\t\t})\n\t\t},\n\n\t\tcancelEditing() {\n\t\t\tthis.editingActive = false\n\t\t},\n\n\t\thandleEditingDone() {\n\t\t\tthis.$emit('update:name', this.editingValue)\n\t\t\tthis.editingValue = ''\n\t\t\tthis.editingActive = false\n\t\t},\n\n\t\t// Undo methods\n\t\thandleUndo() {\n\t\t\tthis.$emit('undo')\n\t\t},\n\n\t\t/\n\t\t Show actions upon focus\n\t\t /\n\t\thandleFocus() {\n\t\t\tthis.focused = true\n\t\t},\n\n\t\thandleBlur() {\n\t\t\tthis.focused = false\n\t\t},\n\n\t\t/\n\t\t This method checks if the root element of the component is focused and\n\t\t * if that's the case it focuses the actions button if available\n\t\t \n\t\t @param {Event} e the keydown event\n\t\t /\n\t\thandleTab(e) {\n\t\t\t// If there is no actions menu, do nothing.\n\t\t\tif (!this.$refs.actions) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.focused) {\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.$refs.actions.$refs.triggerButton.$el.focus()\n\t\t\t\tthis.focused = false\n\t\t\t} else {\n\t\t\t\tthis.$refs.actions.$refs.triggerButton.$el.blur()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Is this an external link\n\t\t \n\t\t @param {string} href The link to check\n\t\t * @return {boolean} Whether it is external or not\n\t\t */\n\t\tisExternal(href) {\n\t\t\t// Match any protocol\n\t\t\treturn href && href.match(/[a-z]+:\\/\\//i)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@use '../../assets/NcAppNavigationItem.scss';\n</style>\n"],"names":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","_createBlock","NcVNodes","_normalizeClass","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","_withCtx","_renderSlot","_createVNode","_toDisplayString","_createTextVNode"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/chunks/{NcAppNavigationSettings-fbuQmy-q.mjs → NcAppNavigationSettings-1BzAhIDg.mjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-import '../assets/NcAppNavigationSettings-HQEDobBQ.css';
+import '../assets/NcAppNavigationSettings-B4ZZe32B.css';
 import { defineComponent, ref, useTemplateRef, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, unref, withCtx, createTextVNode, toDisplayString, Transition, withDirectives, renderSlot, vShow } from "vue";
 import { C as mdiCog, D as mdiCogOutline } from "./mdi-CpchYUUV.mjs";
 import { onClickOutside } from "@vueuse/core";
@@ -74,12 +74,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container = "_container_RFk6U";
-const header = "_header_2CtDS";
-const button = "_button_tAyis";
-const content = "_content_--KYD";
-const animationActive = "_animationActive_DAG1p";
-const animationStop = "_animationStop_fWYQj";
+const container = "_container_F8eZN";
+const header = "_header_6cJQC";
+const button = "_button_WIBAi";
+const content = "_content_n4gdW";
+const animationActive = "_animationActive_Qy1KZ";
+const animationStop = "_animationStop_xLHlm";
 const style0 = {
   container,
   header,
@@ -95,4 +95,4 @@ const NcAppNavigationSettings = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssM
 export {
   NcAppNavigationSettings as N
 };
-//# sourceMappingURL=NcAppNavigationSettings-fbuQmy-q.mjs.map
+//# sourceMappingURL=NcAppNavigationSettings-1BzAhIDg.mjs.map

package/dist/chunks/{NcAppNavigationSettings-fbuQmy-q.mjs.map → NcAppNavigationSettings-1BzAhIDg.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcAppNavigationSettings-~~fbuQmy-q~~.mjs","sources":["../../src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { mdiCog, mdiCogOutline } from '@mdi/js'\nimport { onClickOutside } from '@vueuse/core'\nimport { computed, ref, useTemplateRef } from 'vue'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.js'\nimport { isLegacy } from '../../utils/legacy.ts'\n\nconst {\n\texcludeClickOutsideSelectors = [],\n\tname = t('Settings'),\n} = defineProps<{\n\t/*\n\t A query-selector or an array of query-selectors\n\t * to be ignored when clicking outside an element\n\t /\n\texcludeClickOutsideSelectors?: string \| string[]\n\n\t/\n\t Text of the button\n\t \n\t @default 'Settings'\n\t /\n\tname?: string\n}>()\n\ndefineSlots<{\n\t/\n\t Content of the accordion button (the settings).\n\t /\n\tdefault: Slot\n}>()\n\nconst contentId = createElementId()\n/\n Are the settings open\n /\nconst open = ref(false)\n\n// Close the menu when the user clicks outside of the container\nconst container = useTemplateRef('wrapperElement')\nconst ignore = computed(() => Array.isArray(excludeClickOutsideSelectors)\n\t? excludeClickOutsideSelectors\n\t: excludeClickOutsideSelectors.split(' '))\nonClickOutside(container, () => {\n\topen.value = false\n}, { ignore })\n</script>\n\n<template>\n\t<div ref=\"wrapperElement\" :class=\"$style.container\">\n\t\t<div :class=\"$style.header\">\n\t\t\t<NcButton\n\t\t\t\t:aria-controls=\"contentId\"\n\t\t\t\t:aria-expanded=\"open ? 'true' : 'false'\"\n\t\t\t\t:class=\"$style.button\"\n\t\t\t\talignment=\"start\"\n\t\t\t\tvariant=\"tertiary\"\n\t\t\t\twide\n\t\t\t\t@click=\"open = !open\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper :path=\"isLegacy ? mdiCog : mdiCogOutline\" />\n\t\t\t\t</template>\n\t\t\t\t{{ name }}\n\t\t\t</NcButton>\n\t\t</div>\n\t\t<Transition\n\t\t\t:enterActiveClass=\"$style.animationActive\"\n\t\t\t:leaveActiveClass=\"$style.animationActive\"\n\t\t\t:enterFromClass=\"$style.animationStop\"\n\t\t\t:leaveToClass=\"$style.animationStop\">\n\t\t\t<div\n\t\t\t\tv-show=\"open\"\n\t\t\t\t:id=\"contentId\"\n\t\t\t\t:class=\"$style.content\">\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</Transition>\n\t</div>\n</template>\n\n<style module>\n.container {\n\tmargin-top: auto;\n\tpadding: var(--default-grid-baseline);\n}\n\n.header {\n\tmargin-block: 0 var(--default-grid-baseline);\n\tmargin-inline: var(--default-grid-baseline);\n}\n\n/ Overwrite the padding to match NcAppNavigationItem /\n.button {\n\tpadding-inline: 0 calc((var(--default-clickable-area) - 16px) / 2) !important;\n\n\t:global(.button-vue__text) {\n\t\tfont-weight: var(--font-weight-default, normal);\n\t}\n}\n\n.content {\n\tdisplay: block;\n\tpadding: 10px;\n\n\t/ prevent scrolled contents from stopping too early /\n\tmargin-bottom: calc(-1 var(--default-grid-baseline));\n\n\t/* restrict height of settings and make scrollable */\n\tmax-height: 300px;\n\toverflow-y: auto;\n}\n\n.animationActive {\n\ttransition-duration: var(--animation-slow);\n\ttransition-property: max-height, padding;\n\toverflow-y: hidden !important;\n}\n\n.animationStop {\n\tmax-height: 0 !important;\n\tpadding: 0 10px !important;\n}\n</style>\n"],"names":["container","_createElementBlock","_normalizeClass","$style","_createElementVNode","_createVNode","_unref","_createTextVNode","_Transition","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;AA0CA,UAAM,YAAY,gBAAA;AAIlB,UAAM,OAAO,IAAI,KAAK;AAGtB,UAAMA,aAAY,eAAe,gBAAgB;AACjD,UAAM,SAAS,SAAS,MAAM,MAAM,QAAQ,QAAA,4BAA4B,IACrE,QAAA,+BACA,QAAA,6BAA6B,MAAM,GAAG,CAAC;AAC1C,mBAAeA,YAAW,MAAM;AAC/B,WAAK,QAAQ;AAAA,IACd,GAAG,EAAE,QAAQ;;0BAIZC,mBA4BM,OAAA;AAAA,QA5BD,KAAI;AAAA,QAAkB,OAAKC,eAAEC,KAAAA,OAAO,SAAS;AAAA,MAAA;QACjDC,mBAcM,OAAA;AAAA,UAdA,OAAKF,eAAEC,KAAAA,OAAO,MAAM;AAAA,QAAA;UACzBE,YAYW,UAAA;AAAA,YAXT,iBAAeC,MAAA,SAAA;AAAA,YACf,iBAAe,KAAA,QAAI,SAAA;AAAA,YACnB,OAAKJ,eAAEC,KAAAA,OAAO,MAAM;AAAA,YACrB,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,MAAA;AAAA,YACC,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,KAAA,QAAI,CAAI,KAAA;AAAA,UAAA;YACL,cACV,MAA8D;AAAA,cAA9DE,YAA8D,kBAAA;AAAA,gBAA3C,MAAMC,MAAA,QAAA,IAAWA,MAAA,MAAA,IAASA,MAAA,aAAA;AAAA,cAAA;;6BACnC,MACX;AAAA,cADWC,gBAAA,sBACR,QAAA,IAAI,GAAA,CAAA;AAAA,YAAA;;;;QAGTF,YAWaG,YAAA;AAAA,UAVX,kBAAkBL,KAAAA,OAAO;AAAA,UACzB,kBAAkBA,KAAAA,OAAO;AAAA,UACzB,gBAAgBA,KAAAA,OAAO;AAAA,UACvB,cAAcA,KAAAA,OAAO;AAAA,QAAA;2BACtB,MAKM;AAAA,2BALNC,mBAKM,OAAA;AAAA,cAHJ,IAAIE,MAAA,SAAA;AAAA,cACJ,OAAKJ,eAAEC,KAAAA,OAAO,OAAO;AAAA,YAAA;cACtBM,WAAQ,KAAA,QAAA,SAAA;AAAA,YAAA;sBAHA,KAAA,KAAI;AAAA,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcAppNavigationSettings-1BzAhIDg.mjs","sources":["../../src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { mdiCog, mdiCogOutline } from '@mdi/js'\nimport { onClickOutside } from '@vueuse/core'\nimport { computed, ref, useTemplateRef } from 'vue'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.js'\nimport { isLegacy } from '../../utils/legacy.ts'\n\nconst {\n\texcludeClickOutsideSelectors = [],\n\tname = t('Settings'),\n} = defineProps<{\n\t/*\n\t A query-selector or an array of query-selectors\n\t * to be ignored when clicking outside an element\n\t /\n\texcludeClickOutsideSelectors?: string \| string[]\n\n\t/\n\t Text of the button\n\t \n\t @default 'Settings'\n\t /\n\tname?: string\n}>()\n\ndefineSlots<{\n\t/\n\t Content of the accordion button (the settings).\n\t /\n\tdefault: Slot\n}>()\n\nconst contentId = createElementId()\n/\n Are the settings open\n /\nconst open = ref(false)\n\n// Close the menu when the user clicks outside of the container\nconst container = useTemplateRef('wrapperElement')\nconst ignore = computed(() => Array.isArray(excludeClickOutsideSelectors)\n\t? excludeClickOutsideSelectors\n\t: excludeClickOutsideSelectors.split(' '))\nonClickOutside(container, () => {\n\topen.value = false\n}, { ignore })\n</script>\n\n<template>\n\t<div ref=\"wrapperElement\" :class=\"$style.container\">\n\t\t<div :class=\"$style.header\">\n\t\t\t<NcButton\n\t\t\t\t:aria-controls=\"contentId\"\n\t\t\t\t:aria-expanded=\"open ? 'true' : 'false'\"\n\t\t\t\t:class=\"$style.button\"\n\t\t\t\talignment=\"start\"\n\t\t\t\tvariant=\"tertiary\"\n\t\t\t\twide\n\t\t\t\t@click=\"open = !open\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper :path=\"isLegacy ? mdiCog : mdiCogOutline\" />\n\t\t\t\t</template>\n\t\t\t\t{{ name }}\n\t\t\t</NcButton>\n\t\t</div>\n\t\t<Transition\n\t\t\t:enterActiveClass=\"$style.animationActive\"\n\t\t\t:leaveActiveClass=\"$style.animationActive\"\n\t\t\t:enterFromClass=\"$style.animationStop\"\n\t\t\t:leaveToClass=\"$style.animationStop\">\n\t\t\t<div\n\t\t\t\tv-show=\"open\"\n\t\t\t\t:id=\"contentId\"\n\t\t\t\t:class=\"$style.content\">\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</Transition>\n\t</div>\n</template>\n\n<style module>\n.container {\n\tmargin-top: auto;\n\tpadding: var(--default-grid-baseline);\n}\n\n.header {\n\tmargin-block: 0 var(--default-grid-baseline);\n\tmargin-inline: var(--default-grid-baseline);\n}\n\n/ Overwrite the padding to match NcAppNavigationItem /\n.button {\n\tpadding-inline: 0 calc((var(--default-clickable-area) - 16px) / 2) !important;\n\n\t:global(.button-vue__text) {\n\t\tfont-weight: var(--font-weight-default, normal);\n\t}\n}\n\n.content {\n\tdisplay: block;\n\tpadding: 10px;\n\n\t/ prevent scrolled contents from stopping too early /\n\tmargin-bottom: calc(-1 var(--default-grid-baseline));\n\n\t/* restrict height of settings and make scrollable */\n\tmax-height: 300px;\n\toverflow-y: auto;\n}\n\n.animationActive {\n\ttransition-duration: var(--animation-slow);\n\ttransition-property: max-height, padding;\n\toverflow-y: hidden !important;\n}\n\n.animationStop {\n\tmax-height: 0 !important;\n\tpadding: 0 10px !important;\n}\n</style>\n"],"names":["container","_createElementBlock","_normalizeClass","$style","_createElementVNode","_createVNode","_unref","_createTextVNode","_Transition","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;AA0CA,UAAM,YAAY,gBAAA;AAIlB,UAAM,OAAO,IAAI,KAAK;AAGtB,UAAMA,aAAY,eAAe,gBAAgB;AACjD,UAAM,SAAS,SAAS,MAAM,MAAM,QAAQ,QAAA,4BAA4B,IACrE,QAAA,+BACA,QAAA,6BAA6B,MAAM,GAAG,CAAC;AAC1C,mBAAeA,YAAW,MAAM;AAC/B,WAAK,QAAQ;AAAA,IACd,GAAG,EAAE,QAAQ;;0BAIZC,mBA4BM,OAAA;AAAA,QA5BD,KAAI;AAAA,QAAkB,OAAKC,eAAEC,KAAAA,OAAO,SAAS;AAAA,MAAA;QACjDC,mBAcM,OAAA;AAAA,UAdA,OAAKF,eAAEC,KAAAA,OAAO,MAAM;AAAA,QAAA;UACzBE,YAYW,UAAA;AAAA,YAXT,iBAAeC,MAAA,SAAA;AAAA,YACf,iBAAe,KAAA,QAAI,SAAA;AAAA,YACnB,OAAKJ,eAAEC,KAAAA,OAAO,MAAM;AAAA,YACrB,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,MAAA;AAAA,YACC,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,KAAA,QAAI,CAAI,KAAA;AAAA,UAAA;YACL,cACV,MAA8D;AAAA,cAA9DE,YAA8D,kBAAA;AAAA,gBAA3C,MAAMC,MAAA,QAAA,IAAWA,MAAA,MAAA,IAASA,MAAA,aAAA;AAAA,cAAA;;6BACnC,MACX;AAAA,cADWC,gBAAA,sBACR,QAAA,IAAI,GAAA,CAAA;AAAA,YAAA;;;;QAGTF,YAWaG,YAAA;AAAA,UAVX,kBAAkBL,KAAAA,OAAO;AAAA,UACzB,kBAAkBA,KAAAA,OAAO;AAAA,UACzB,gBAAgBA,KAAAA,OAAO;AAAA,UACvB,cAAcA,KAAAA,OAAO;AAAA,QAAA;2BACtB,MAKM;AAAA,2BALNC,mBAKM,OAAA;AAAA,cAHJ,IAAIE,MAAA,SAAA;AAAA,cACJ,OAAKJ,eAAEC,KAAAA,OAAO,OAAO;AAAA,YAAA;cACtBM,WAAQ,KAAA,QAAA,SAAA;AAAA,YAAA;sBAHA,KAAA,KAAI;AAAA,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppSettingsDialog-DByPnndK.mjs → NcAppSettingsDialog-BgZCuMK0.mjs} RENAMED Viewed

@@ -1,7 +1,7 @@
-import '../assets/NcAppSettingsDialog-HsZoLuDy.css';
+import '../assets/NcAppSettingsDialog-BPOsEn6K.css';
 import { defineComponent, inject, openBlock, createElementBlock, normalizeClass, unref, toDisplayString, useModel, provide, toRef, useTemplateRef, ref, computed, onBeforeUnmount, warn, createBlock, createSlots, withCtx, createElementVNode, renderSlot, createCommentVNode, Fragment, renderList, withKeys, withModifiers, mergeModels } from "vue";
 import debounce from "debounce";
-import { N as NcDialog } from "./NcDialog-kwzJ3A4X.mjs";
+import { N as NcDialog } from "./NcDialog-D1u-qo74.mjs";
 import { _ as _sfc_main$2 } from "./NcVNodes.vue_vue_type_script_lang-BqUHinRZ.mjs";
 import { u as useLocalizedAppName, A as APP_VERSION } from "./appName-DyNMVZpX.mjs";
 import { A as APP_SETTINGS_LEGACY_DESIGN_KEY, a as APP_SETTINGS_REGISTRATION_KEY } from "./useAppSettingsDialog-C73Wx6iQ.mjs";
@@ -21,10 +21,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const appSettingsDialogVersion = "_appSettingsDialogVersion_8Xr7R";
-const appSettingsDialogVersion__legacy = "_appSettingsDialogVersion__legacy_7MO71";
+const appSettingsDialogVersion = "_appSettingsDialogVersion_cjsRO";
+const appSettingsDialogVersion__legacy = "_appSettingsDialogVersion__legacy_FaQVZ";
 const style0 = {
-  "material-design-icon": "_material-design-icon_qDIHA",
+  "material-design-icon": "_material-design-icon_p1TBV",
   appSettingsDialogVersion,
   appSettingsDialogVersion__legacy
 };
@@ -204,4 +204,4 @@ const NcAppSettingsDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId"
 export {
   NcAppSettingsDialog as N
 };
-//# sourceMappingURL=NcAppSettingsDialog-DByPnndK.mjs.map
+//# sourceMappingURL=NcAppSettingsDialog-BgZCuMK0.mjs.map

package/dist/chunks/{NcAppSettingsDialog-DByPnndK.mjs.map → NcAppSettingsDialog-BgZCuMK0.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcAppSettingsDialog-DByPnndK.mjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialogVersion.vue","../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport { inject } from 'vue'\nimport { APP_VERSION, useLocalizedAppName } from '../../utils/appName.ts'\nimport { APP_SETTINGS_LEGACY_DESIGN_KEY } from './useAppSettingsDialog.ts'\n\nconst legacy = inject(APP_SETTINGS_LEGACY_DESIGN_KEY)!\n\nconst localizedAppName = useLocalizedAppName()\n</script>\n\n<template>\n\t<div :class=\"[$style.appSettingsDialogVersion, { [$style.appSettingsDialogVersion__legacy]: legacy }]\">\n\t\t{{ localizedAppName }} {{ APP_VERSION }}\n\t</div>\n</template>\n\n<style lang=\"scss\" module>\n.appSettingsDialogVersion {\n --form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n color: var(--color-text-maxcontrast);\n margin-block-end: calc(8 * var(--default-grid-baseline));\n margin-inline: var(--form-element-label-offset);\n}\n\n.appSettingsDialogVersion__legacy {\n margin-inline: 0;\n}\n</style>\n","<!--\n - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot, VNode } from 'vue'\n\nimport debounce from 'debounce'\nimport { computed, onBeforeUnmount, provide, ref, toRef, useTemplateRef, warn } from 'vue'\nimport NcDialog from '../NcDialog/NcDialog.vue'\nimport NcVNodes from '../NcVNodes/NcVNodes.vue'\nimport NcAppSettingsDialogVersion from './NcAppSettingsDialogVersion.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.ts'\nimport { t } from '../../l10n.ts'\nimport { isLegacy34 } from '../../utils/legacy.ts'\nimport { APP_SETTINGS_LEGACY_DESIGN_KEY, APP_SETTINGS_REGISTRATION_KEY } from './useAppSettingsDialog.ts'\n\nexport interface IAppSettingsSection {\n\tid: string\n\tname: string\n\torder?: number\n\ticon?: VNode[]\n}\n\n/*\n Determines the open / closed state of the modal\n /\nconst open = defineModel<boolean>('open', { required: true })\n\nconst props = withDefaults(defineProps<{\n\t/\n\t Shows the navigation on desktop if true\n\t /\n\tshowNavigation?: boolean\n\n\t/\n\t Selector for the popover container\n\t /\n\tcontainer?: string\n\n\t/\n\t Name of the settings\n\t /\n\tname?: string\n\n\t/\n\t Additional elements to add to the focus trap\n\t /\n\tadditionalTrapElements?: (string \| HTMLElement)[]\n\n\t/\n\t Use legacy design without any requirements for the section content\n\t \n\t @deprecated The legacy design will be removed\n\t /\n\tlegacy?: boolean\n\n\t/\n\t Do not add the application version at the bottom of the dialog\n\t /\n\tnoVersion?: boolean\n}>(), {\n\tcontainer: 'body',\n\tname: '',\n\tadditionalTrapElements: () => [],\n\tlegacy: false,\n\tnoVersion: false,\n})\n\ndefineSlots<{\n\t/\n\t The NcAppSettingsSections\n\t /\n\tdefault?: Slot\n}>()\n\nprovide(APP_SETTINGS_REGISTRATION_KEY, {\n\tregisterSection,\n\tunregisterSection,\n})\n\nprovide(APP_SETTINGS_LEGACY_DESIGN_KEY, toRef(() => props.legacy))\n\nconst settingsScrollerElement = useTemplateRef('settingsScroller')\n\nconst isMobile = useIsMobile()\n\nconst selectedSection = ref('')\nconst linkClicked = ref(false)\nconst registeredSections = ref<IAppSettingsSection[]>([])\n\nconst hasNavigation = computed(() => !isMobile.value && props.showNavigation)\n\n/\n Check if one or more navigation entries provide icons\n /\nconst hasNavigationIcons = computed(() => registeredSections.value.some(({ icon }) => !!icon))\n\n/\n Remove selected section once the user starts scrolling\n /\nconst unfocusNavigationItem = debounce(() => {\n\tselectedSection.value = ''\n\tif (document.activeElement?.className.includes('navigation-list__link')) {\n\t\t(document.activeElement as HTMLElement).blur()\n\t}\n}, 300)\n\n/\n Fallback order map to keep track of section orders if not provided by child components\n /\nconst sectionsOrderMap = new Map()\nonBeforeUnmount(() => {\n\tsectionsOrderMap.clear()\n})\n\n/\n Scrolls the content to the selected settings section.absolute\n \n @param item - the ID of the section\n /\nfunction handleSettingsNavigationClick(item: string) {\n\tlinkClicked.value = true\n\tdocument.getElementById('settings-section_' + item)!.scrollIntoView({\n\t\tbehavior: 'smooth',\n\t\tinline: 'nearest',\n\t})\n\tselectedSection.value = item\n\tsetTimeout(() => {\n\t\tlinkClicked.value = false\n\t}, 1000)\n}\n\n/\n Reset the dialog state when closed to have a clean state if re-opened.\n \n @param isOpen - The new modal open state\n /\nfunction handleCloseModal(isOpen: boolean) {\n\tif (isOpen) {\n\t\treturn\n\t}\n\n\topen.value = false\n\t// reset the scrolling state if the modal is just hidden\n\tsettingsScrollerElement.value!.scrollTop = 0\n}\n\n/\n When scrolled manually we remove the focus from the navigation item.\n /\nfunction handleScroll() {\n\tif (open.value && !linkClicked.value) {\n\t\tunfocusNavigationItem()\n\t}\n}\n\n/\n Called when a new section is registered\n \n @param id - The section ID\n * @param name - The section name\n * @param order - Optional section order in navigation list\n * @param icon - Optional icon component\n /\nfunction registerSection(id: string, name: string, order?: number, icon?: VNode[]) {\n\t// Check for the uniqueness of section names\n\tif (registeredSections.value.some(({ id: otherId }) => id === otherId)) {\n\t\tthrow new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`)\n\t}\n\tif (registeredSections.value.some(({ name: otherName }) => name === otherName)) {\n\t\twarn(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`)\n\t}\n\n\t// Ensure tab order is set\n\tif (order !== undefined) {\n\t\tsectionsOrderMap.set(id, order)\n\t} else if (sectionsOrderMap.has(id)) {\n\t\torder = sectionsOrderMap.get(id)\n\t} else {\n\t\t// Fallback to the closest positive number that isn't already taken\n\t\torder = Math.max(0, ...sectionsOrderMap.values()) + 1\n\t\tsectionsOrderMap.set(id, order)\n\t}\n\n\t// Sort sections by order in slots\n\tregisteredSections.value = [...registeredSections.value, { id, name, order, icon }]\n\t\t.sort(({ order: orderA }, { order: orderB }) => {\n\t\t\treturn orderA! - orderB!\n\t\t})\n\n\t// If this is the first section registered, set it as selected\n\tif (registeredSections.value.length === 1) {\n\t\tselectedSection.value = id\n\t}\n}\n\n/\n Called when a section is unregistered to remove it from dialog\n \n @param id - The section ID\n /\nfunction unregisterSection(id: string) {\n\tregisteredSections.value = registeredSections.value\n\t\t.filter(({ id: otherId }) => id !== otherId)\n\n\t// If the current section is unregistered, set the first section as selected\n\tif (selectedSection.value === id) {\n\t\tselectedSection.value = registeredSections.value[0]?.id ?? ''\n\t}\n}\n</script>\n\n<template>\n\t<NcDialog\n\t\tv-if=\"open\"\n\t\tclass=\"app-settings\"\n\t\t:class=\"{ 'app-settings--legacy': isLegacy34 }\"\n\t\tcontentClasses=\"app-settings__content\"\n\t\tnavigationClasses=\"app-settings__navigation\"\n\t\t:additionalTrapElements\n\t\t:container\n\t\tcloseOnClickOutside\n\t\t:navigation-aria-label=\"t('Settings navigation')\"\n\t\tsize=\"large\"\n\t\t:name\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template v-if=\"hasNavigation\" #navigation=\"{ isCollapsed }\">\n\t\t\t<div v-if=\"!isLegacy34\" class=\"app-settings__title\">\n\t\t\t\t{{ name }}\n\t\t\t</div>\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 registeredSections\" :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\" @scroll=\"handleScroll\">\n\t\t\t<slot />\n\t\t\t<NcAppSettingsDialogVersion v-if=\"!noVersion\" />\n\t\t</div>\n\t</NcDialog>\n</template>\n\n<style lang=\"scss\" scoped>\n$navigation-width: 200px;\n$content-inset: calc(3 var(--default-grid-baseline));\n\n.app-settings:not(.app-settings--legacy) {\n\t--nav-tint: hsl(from var(--color-primary-element-light) h s calc(l * 1.045));\n\t--nav-tint-strong: var(--color-primary-element-light);\n\n\t:deep(.modal-wrapper .modal-container) {\n\t\tpadding-inline-start: 0 !important;\n\t\tpadding-block-start: 0 !important;\n\t\tbackground-color: var(--nav-tint);\n\t\toverflow: hidden;\n\t\tmax-width: 900px;\n\t}\n\n\t// Title is rendered inside the navigation slot; hide the native h2 but\n\t// keep it in the a11y tree so the modal still has its accessible name.\n\t:deep(.dialog__name) {\n\t\tposition: absolute;\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\tmargin: -1px;\n\t\tpadding: 0;\n\t\toverflow: hidden;\n\t\tclip-path: inset(100%);\n\t\twhite-space: nowrap;\n\t\tborder: 0;\n\t}\n\n\t:deep(.app-settings__navigation) {\n\t\tmin-width: $navigation-width;\n\t\tmax-width: $navigation-width;\n\t\tflex: 0 0 $navigation-width;\n\t\t// Beat NcDialog's default 20px end-margin so the tint meets the content.\n\t\tmargin-inline-end: 0 !important;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tposition: relative;\n\t}\n\n\t:deep(.app-settings__content) {\n\t\tpadding: $content-inset;\n\t\tbackground-color: var(--color-main-background);\n\t\tborder-inline-start: 1px solid var(--color-border-dark);\n\t\tborder-start-start-radius: var(--border-radius-element);\n\t\tborder-end-start-radius: var(--border-radius-element);\n\t}\n\n\t.app-settings__title {\n\t\tbox-sizing: border-box;\n\t\tpadding: $content-inset;\n\t\tmargin: 0;\n\t\tfont-size: 20px;\n\t\tfont-weight: 700;\n\t}\n\n\t.navigation-list {\n\t\theight: 100%;\n\t\toverflow-y: auto;\n\t\tpadding: var(--default-grid-baseline);\n\n\t\t&__link {\n\t\t\tposition: relative;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tfont-size: var(--default-font-size);\n\t\t\tfont-weight: 500;\n\t\t\theight: var(--default-clickable-area);\n\t\t\tmargin: 2px 0;\n\t\t\tline-height: var(--default-clickable-area);\n\t\t\tborder-radius: var(--border-radius-element);\n\t\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\t\tcursor: pointer;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-overflow: ellipsis;\n\t\t\toverflow: hidden;\n\t\t\tbackground-color: transparent;\n\t\t\tborder: none;\n\t\t\tcolor: var(--color-main-text);\n\n\t\t\t&:hover,\n\t\t\t&:focus-visible {\n\t\t\t\tbackground-color: color-mix(in srgb, var(--color-primary-element) 8%, transparent);\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\toutline: 2px solid var(--color-main-text);\n\t\t\t\toutline-offset: -2px;\n\t\t\t}\n\n\t\t\t&--active {\n\t\t\t\tbackground-color: var(--nav-tint-strong);\n\n\t\t\t\t&:hover,\n\t\t\t\t&:focus-visible {\n\t\t\t\t\tbackground-color: var(--color-primary-element-light-hover);\n\t\t\t\t}\n\n\t\t\t\t&::before {\n\t\t\t\t\tcontent: '';\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tinset-block: var(--default-grid-baseline);\n\t\t\t\t\tinset-inline-start: 0;\n\t\t\t\t\twidth: 3px;\n\t\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\t\tborder-radius: 999px;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&--icon {\n\t\t\t\tgap: var(--default-grid-baseline);\n\t\t\t}\n\n\t\t\t&-icon {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t\talign-content: center;\n\t\t\t\twidth: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t\t\tmax-width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t\t}\n\t\t}\n\t}\n\n}\n\n@media only screen and (width < $breakpoint-mobile) {\n\t.app-settings:not(.app-settings--legacy) {\n\t\t:deep(.modal-wrapper .modal-container) {\n\t\t\tpadding-inline-start: 12px !important;\n\t\t\tpadding-block-start: 4px !important;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t}\n\t\t:deep(.dialog__name) {\n\t\t\tposition: static;\n\t\t\twidth: auto;\n\t\t\theight: auto;\n\t\t\tmargin: 0 0 12px 0;\n\t\t\tpadding-inline-end: var(--default-clickable-area);\n\t\t\toverflow: visible;\n\t\t\tclip-path: none;\n\t\t\twhite-space: normal;\n\t\t\tborder: 0;\n\t\t}\n\t\t:deep(.app-settings__content) {\n\t\t\tborder: none;\n\t\t\tborder-radius: 0;\n\t\t}\n\t}\n}\n\n// Legacy design (NC < 34): keep the original centered-title layout.\n.app-settings.app-settings--legacy {\n\t:deep(.app-settings__navigation) {\n\t\tmin-width: 200px;\n\t\tmargin-inline-end: calc(4 * var(--default-grid-baseline));\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tposition: relative;\n\t}\n\n\t:deep(.app-settings__content) {\n\t\tpadding-inline: calc(4 * var(--default-grid-baseline));\n\t}\n\n\t.navigation-list {\n\t\theight: 100%;\n\t\toverflow-y: auto;\n\t\tpadding: calc(3 * var(--default-grid-baseline));\n\n\t\t&__link {\n\t\t\tdisplay: flex;\n\t\t\talign-content: center;\n\t\t\tfont-size: 16px;\n\t\t\theight: var(--default-clickable-area);\n\t\t\tmargin: 4px 0;\n\t\t\tline-height: var(--default-clickable-area);\n\t\t\tborder-radius: var(--border-radius-element);\n\t\t\tfont-weight: var(--font-weight-element, bold);\n\t\t\tpadding: 0 calc(4 * var(--default-grid-baseline));\n\t\t\tcursor: pointer;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-overflow: ellipsis;\n\t\t\toverflow: hidden;\n\t\t\tbackground-color: transparent;\n\t\t\tborder: none;\n\n\t\t\t&:hover,\n\t\t\t&:focus {\n\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t}\n\n\t\t\t&--active {\n\t\t\t\tbackground-color: var(--color-primary-element-light) !important;\n\t\t\t}\n\n\t\t\t&--icon {\n\t\t\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t\t\t\tgap: var(--default-grid-baseline);\n\t\t\t}\n\n\t\t\t&-icon {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t\talign-content: center;\n\t\t\t\twidth: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t\t\tmax-width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t\t}\n\t\t}\n\t}\n\n\t@media only screen and (max-width: $breakpoint-small-mobile) {\n\t\t:deep(.dialog__name) {\n\t\t\tpadding-inline-start: 16px;\n\t\t}\n\t}\n}\n</style>\n\n<docs>\nJust nest the `AppSettingSections` component into `NcAppSettingsDialog`,\nproviding the section's name prop. You can put your settings within each\n`NcAppSettingsSection` component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\" legacy>\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Example name 1\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Example name 2\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Example name 3\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Example name 4\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-5\" name=\"Example name 5\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-6\" name=\"Example name 6\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-7\" name=\"Example name 7\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-8\" name=\"Example name 8\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-9\" name=\"Example name 9\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-10\" name=\"Example name 10\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also add icons to the section navigation:\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\" legacy>\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\nSections order in navigation list is defined during initial rendering.\nIn case of dynamic/conditional sections rendering explicit `order` prop must be used for ordering.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\" legacy>\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Example name 1\" :order=\"1\">\n\t\t\t\tSome example content\n\t\t\t\t<NcCheckboxRadioSwitch v-model=\"showExtraSections\">Show section 3</NcCheckboxRadioSwitch>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Example name 2\" :order=\"2\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<template v-if=\"showExtraSections\">\n\t\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Example name 3\" :order=\"3\">\n\t\t\t\t\tSome example content\n\t\t\t\t</NcAppSettingsSection>\n\t\t\t</template>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Example name 4\" :order=\"4\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tsettingsOpen: false,\n\t\t\t\tshowExtraSections: true,\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n### New design\n\n```vue\n<script>\nimport { mdiArrowRight, mdiPlus, mdiDomain, mdiDockLeft, mdiDockBottom, mdiListBoxOutline, mdiPencilOutline, mdiTrashCanOutline, mdiMedalOutline, mdiEmailOutline } from '@mdi/js'\nexport default {\n\tsetup() {\n\t\treturn { mdiArrowRight, mdiPlus, mdiDomain, mdiDockLeft, mdiDockBottom, mdiListBoxOutline, mdiPencilOutline, mdiTrashCanOutline, mdiMedalOutline, mdiEmailOutline }\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t\tswitchValue: true,\n\t\t\tlayout: 'vertical',\n\t\t\tsorting: 'asc',\n\t\t\treply: 'top',\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Mail Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"general\" name=\"General\">\n\t\t\t\t<NcButton wide>Set as default mail app</NcButton>\n\n\t\t\t\t<NcFormGroup label=\"Account settings\">\n\t\t\t\t\t<NcFormBox>\n\t\t\t\t\t\t<NcFormBoxButton label=\"user@example.com\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcFormBoxButton>\n\t\t\t\t\t\t<NcFormBoxButton label=\"sales@example.com\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcFormBoxButton>\n\t\t\t\t\t\t<NcButton wide>\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPlus\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tAdd mail account\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t</NcFormBox>\n\t\t\t\t</NcFormGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"appearance\" name=\"Appearance\">\n\t\t\t\t<NcFormBox>\n\t\t\t\t\t<NcFormBoxSwitch\n\t\t\t\t\t\tv-model=\"switchValue\"\n\t\t\t\t\t\tlabel=\"Show all messages in thread\"\n\t\t\t\t\t\tdescription=\"When off, only the selected messages will be shown\" />\n\t\t\t\t</NcFormBox>\n\t\t\t\t<NcRadioGroup v-model=\"layout\" label=\"Layout\">\n\t\t\t\t\t<NcRadioGroupButton label=\"Vertical\" value=\"vertical\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDockLeft\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t\t<NcRadioGroupButton label=\"Horizontal\" value=\"horizontal\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDockBottom\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t\t<NcRadioGroupButton label=\"List\" value=\"list\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiListBoxOutline\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t</NcRadioGroup>\n\t\t\t\t<NcRadioGroup v-model=\"sorting\" label=\"Sorting\">\n\t\t\t\t\t<NcRadioGroupButton label=\"Newest first\" value=\"asc\" />\n\t\t\t\t\t<NcRadioGroupButton label=\"Oldest first\" value=\"desc\" />\n\t\t\t\t</NcRadioGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"messages\" name=\"Messages\">\n\t\t\t\t<NcFormBox>\n\t\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Avatars from Gravatar and favicons\" />\n\t\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Determine importance using machine learning\" />\n\t\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Search the body of messages in Priority inbox\" />\n\t\t\t\t</NcFormBox>\n\t\t\t\t<NcRadioGroup v-model=\"reply\" label=\"Reply position\">\n\t\t\t\t\t<NcRadioGroupButton label=\"Top\" value=\"top\" />\n\t\t\t\t\t<NcRadioGroupButton label=\"Bottom\" value=\"bottom\" />\n\t\t\t\t</NcRadioGroup>\n\t\t\t\t<NcFormGroup\n\t\t\t\t\tlabel=\"Text blocks\"\n\t\t\t\t\tdescription=\"Reusable pieces of text that can be inserted in messages\">\n\t\t\t\t\t<NcListItem name=\"Title\">\n\t\t\t\t\t\t<template #subname>\n\t\t\t\t\t\t\tContent\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPencilOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcListItem name=\"Reply\">\n\t\t\t\t\t\t<template #subname>\n\t\t\t\t\t\t\tThank you for contacting us!\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPencilOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t</NcFormGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"privacy\" name=\"Privacy\">\n\t\t\t\t<NcFormBox>\n\t\t\t\t\t<NcFormBoxSwitch\n\t\t\t\t\t\tv-model=\"switchValue\"\n\t\t\t\t\t\tlabel=\"Data collection\"\n\t\t\t\t\t\tdescription=\"Allow the app to collect and process data locally to adapt to your preferences\" />\n\t\t\t\t</NcFormBox>\n\t\t\t\t<NcFormGroup label=\"Always show images from\">\n\t\t\t\t\t<NcListItem name=\"example.com\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcListItem name=\"example.net\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcListItem name=\"mail@example.org\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiEmailOutline\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t</NcFormGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"security\" name=\"Security\">\n\t\t\t\t<NcFormBox>\n\t\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Highlight external addresses\" />\n\t\t\t\t</NcFormBox>\n\t\t\t\t<NcFormGroup label=\"Internal addresses\">\n\t\t\t\t\t<NcListItem name=\"example.com\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcListItem name=\"example.company@example.net\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiEmailOutline\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcButton wide>Add internal address</NcButton>\n\t\t\t\t</NcFormGroup>\n\t\t\t\t<NcFormGroup label=\"S/MIME\">\n\t\t\t\t\t<NcButton wide>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiMedalOutline\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tManage certificates\n\t\t\t\t\t</NcButton>\n\t\t\t\t</NcFormGroup>\n\t\t\t\t<NcFormGroup label=\"Mailvelope\">\n\t\t\t\t\t<NcFormBox>\n\t\t\t\t\t\t<NcFormBoxButton\n\t\t\t\t\t\t\tlabel=\"Step 1\"\n\t\t\t\t\t\t\tdescription=\"Install the browser extension\"\n\t\t\t\t\t\t\thref=\"https://www.mailvelope.com/\"\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\tinverted-accent />\n\t\t\t\t\t\t<NcFormBoxButton\n\t\t\t\t\t\t\tlabel=\"Step 2\"\n\t\t\t\t\t\t\tdescription=\"Enable the current domain\"\n\t\t\t\t\t\t\tinverted-accent>\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcFormBoxButton>\n\t\t\t\t\t</NcFormBox>\n\t\t\t\t</NcFormGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"about\" name=\"About\">\n\t\t\t\t<NcFormGroup label=\"Acknowledgements\" description=\"This application includes CKEditor, an open-source editor. Copyright (C) CKEditor contributors. Licensed under GPLv2.\" />\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsShortcutsSection>\n\t\t\t\t<NcHotkeyList>\n\t\t\t\t\t<NcHotkey label=\"Compose new message\" hotkey=\"C\" />\n\t\t\t\t\t<NcHotkey label=\"Newer message\" hotkey=\"ArrowLeft\" />\n\t\t\t\t\t<NcHotkey label=\"Older message\" hotkey=\"ArrowRight\" />\n\t\t\t\t\t<NcHotkey label=\"Toggle star\" hotkey=\"S\" />\n\t\t\t\t\t<NcHotkey label=\"Toggle unread\" hotkey=\"U\" />\n\t\t\t\t\t<NcHotkey label=\"Archive\" hotkey=\"A\" />\n\t\t\t\t\t<NcHotkey label=\"Delete\" hotkey=\"Delete\" />\n\t\t\t\t\t<NcHotkey label=\"Search\" hotkey=\"Control F\" />\n\t\t\t\t\t<NcHotkey label=\"Send\" hotkey=\"Control Enter\" />\n\t\t\t\t\t<NcHotkey label=\"Refresh\" hotkey=\"R\" />\n\t\t\t\t</NcHotkeyList>\n\t\t\t</NcAppSettingsShortcutsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n```\n</docs>\n"],"names":["_createElementBlock","_normalizeClass","$style","_unref","_toDisplayString","_useModel","_createBlock","_createElementVNode","_renderSlot","_withCtx","_openBlock","_Fragment","_renderList","_withModifiers","_withKeys","NcVNodes"],"mappings":"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"}
1	+ {"version":3,"file":"NcAppSettingsDialog-BgZCuMK0.mjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialogVersion.vue","../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport { inject } from 'vue'\nimport { APP_VERSION, useLocalizedAppName } from '../../utils/appName.ts'\nimport { APP_SETTINGS_LEGACY_DESIGN_KEY } from './useAppSettingsDialog.ts'\n\nconst legacy = inject(APP_SETTINGS_LEGACY_DESIGN_KEY)!\n\nconst localizedAppName = useLocalizedAppName()\n</script>\n\n<template>\n\t<div :class=\"[$style.appSettingsDialogVersion, { [$style.appSettingsDialogVersion__legacy]: legacy }]\">\n\t\t{{ localizedAppName }} {{ APP_VERSION }}\n\t</div>\n</template>\n\n<style lang=\"scss\" module>\n.appSettingsDialogVersion {\n --form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n color: var(--color-text-maxcontrast);\n margin-block-end: calc(8 * var(--default-grid-baseline));\n margin-inline: var(--form-element-label-offset);\n}\n\n.appSettingsDialogVersion__legacy {\n margin-inline: 0;\n}\n</style>\n","<!--\n - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot, VNode } from 'vue'\n\nimport debounce from 'debounce'\nimport { computed, onBeforeUnmount, provide, ref, toRef, useTemplateRef, warn } from 'vue'\nimport NcDialog from '../NcDialog/NcDialog.vue'\nimport NcVNodes from '../NcVNodes/NcVNodes.vue'\nimport NcAppSettingsDialogVersion from './NcAppSettingsDialogVersion.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.ts'\nimport { t } from '../../l10n.ts'\nimport { isLegacy34 } from '../../utils/legacy.ts'\nimport { APP_SETTINGS_LEGACY_DESIGN_KEY, APP_SETTINGS_REGISTRATION_KEY } from './useAppSettingsDialog.ts'\n\nexport interface IAppSettingsSection {\n\tid: string\n\tname: string\n\torder?: number\n\ticon?: VNode[]\n}\n\n/*\n Determines the open / closed state of the modal\n /\nconst open = defineModel<boolean>('open', { required: true })\n\nconst props = withDefaults(defineProps<{\n\t/\n\t Shows the navigation on desktop if true\n\t /\n\tshowNavigation?: boolean\n\n\t/\n\t Selector for the popover container\n\t /\n\tcontainer?: string\n\n\t/\n\t Name of the settings\n\t /\n\tname?: string\n\n\t/\n\t Additional elements to add to the focus trap\n\t /\n\tadditionalTrapElements?: (string \| HTMLElement)[]\n\n\t/\n\t Use legacy design without any requirements for the section content\n\t \n\t @deprecated The legacy design will be removed\n\t /\n\tlegacy?: boolean\n\n\t/\n\t Do not add the application version at the bottom of the dialog\n\t /\n\tnoVersion?: boolean\n}>(), {\n\tcontainer: 'body',\n\tname: '',\n\tadditionalTrapElements: () => [],\n\tlegacy: false,\n\tnoVersion: false,\n})\n\ndefineSlots<{\n\t/\n\t The NcAppSettingsSections\n\t /\n\tdefault?: Slot\n}>()\n\nprovide(APP_SETTINGS_REGISTRATION_KEY, {\n\tregisterSection,\n\tunregisterSection,\n})\n\nprovide(APP_SETTINGS_LEGACY_DESIGN_KEY, toRef(() => props.legacy))\n\nconst settingsScrollerElement = useTemplateRef('settingsScroller')\n\nconst isMobile = useIsMobile()\n\nconst selectedSection = ref('')\nconst linkClicked = ref(false)\nconst registeredSections = ref<IAppSettingsSection[]>([])\n\nconst hasNavigation = computed(() => !isMobile.value && props.showNavigation)\n\n/\n Check if one or more navigation entries provide icons\n /\nconst hasNavigationIcons = computed(() => registeredSections.value.some(({ icon }) => !!icon))\n\n/\n Remove selected section once the user starts scrolling\n /\nconst unfocusNavigationItem = debounce(() => {\n\tselectedSection.value = ''\n\tif (document.activeElement?.className.includes('navigation-list__link')) {\n\t\t(document.activeElement as HTMLElement).blur()\n\t}\n}, 300)\n\n/\n Fallback order map to keep track of section orders if not provided by child components\n /\nconst sectionsOrderMap = new Map()\nonBeforeUnmount(() => {\n\tsectionsOrderMap.clear()\n})\n\n/\n Scrolls the content to the selected settings section.absolute\n \n @param item - the ID of the section\n /\nfunction handleSettingsNavigationClick(item: string) {\n\tlinkClicked.value = true\n\tdocument.getElementById('settings-section_' + item)!.scrollIntoView({\n\t\tbehavior: 'smooth',\n\t\tinline: 'nearest',\n\t})\n\tselectedSection.value = item\n\tsetTimeout(() => {\n\t\tlinkClicked.value = false\n\t}, 1000)\n}\n\n/\n Reset the dialog state when closed to have a clean state if re-opened.\n \n @param isOpen - The new modal open state\n /\nfunction handleCloseModal(isOpen: boolean) {\n\tif (isOpen) {\n\t\treturn\n\t}\n\n\topen.value = false\n\t// reset the scrolling state if the modal is just hidden\n\tsettingsScrollerElement.value!.scrollTop = 0\n}\n\n/\n When scrolled manually we remove the focus from the navigation item.\n /\nfunction handleScroll() {\n\tif (open.value && !linkClicked.value) {\n\t\tunfocusNavigationItem()\n\t}\n}\n\n/\n Called when a new section is registered\n \n @param id - The section ID\n * @param name - The section name\n * @param order - Optional section order in navigation list\n * @param icon - Optional icon component\n /\nfunction registerSection(id: string, name: string, order?: number, icon?: VNode[]) {\n\t// Check for the uniqueness of section names\n\tif (registeredSections.value.some(({ id: otherId }) => id === otherId)) {\n\t\tthrow new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`)\n\t}\n\tif (registeredSections.value.some(({ name: otherName }) => name === otherName)) {\n\t\twarn(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`)\n\t}\n\n\t// Ensure tab order is set\n\tif (order !== undefined) {\n\t\tsectionsOrderMap.set(id, order)\n\t} else if (sectionsOrderMap.has(id)) {\n\t\torder = sectionsOrderMap.get(id)\n\t} else {\n\t\t// Fallback to the closest positive number that isn't already taken\n\t\torder = Math.max(0, ...sectionsOrderMap.values()) + 1\n\t\tsectionsOrderMap.set(id, order)\n\t}\n\n\t// Sort sections by order in slots\n\tregisteredSections.value = [...registeredSections.value, { id, name, order, icon }]\n\t\t.sort(({ order: orderA }, { order: orderB }) => {\n\t\t\treturn orderA! - orderB!\n\t\t})\n\n\t// If this is the first section registered, set it as selected\n\tif (registeredSections.value.length === 1) {\n\t\tselectedSection.value = id\n\t}\n}\n\n/\n Called when a section is unregistered to remove it from dialog\n \n @param id - The section ID\n /\nfunction unregisterSection(id: string) {\n\tregisteredSections.value = registeredSections.value\n\t\t.filter(({ id: otherId }) => id !== otherId)\n\n\t// If the current section is unregistered, set the first section as selected\n\tif (selectedSection.value === id) {\n\t\tselectedSection.value = registeredSections.value[0]?.id ?? ''\n\t}\n}\n</script>\n\n<template>\n\t<NcDialog\n\t\tv-if=\"open\"\n\t\tclass=\"app-settings\"\n\t\t:class=\"{ 'app-settings--legacy': isLegacy34 }\"\n\t\tcontentClasses=\"app-settings__content\"\n\t\tnavigationClasses=\"app-settings__navigation\"\n\t\t:additionalTrapElements\n\t\t:container\n\t\tcloseOnClickOutside\n\t\t:navigation-aria-label=\"t('Settings navigation')\"\n\t\tsize=\"large\"\n\t\t:name\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template v-if=\"hasNavigation\" #navigation=\"{ isCollapsed }\">\n\t\t\t<div v-if=\"!isLegacy34\" class=\"app-settings__title\">\n\t\t\t\t{{ name }}\n\t\t\t</div>\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 registeredSections\" :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\" @scroll=\"handleScroll\">\n\t\t\t<slot />\n\t\t\t<NcAppSettingsDialogVersion v-if=\"!noVersion\" />\n\t\t</div>\n\t</NcDialog>\n</template>\n\n<style lang=\"scss\" scoped>\n$navigation-width: 200px;\n$content-inset: calc(3 var(--default-grid-baseline));\n\n.app-settings:not(.app-settings--legacy) {\n\t--nav-tint: hsl(from var(--color-primary-element-light) h s calc(l * 1.045));\n\t--nav-tint-strong: var(--color-primary-element-light);\n\n\t:deep(.modal-wrapper .modal-container) {\n\t\tpadding-inline-start: 0 !important;\n\t\tpadding-block-start: 0 !important;\n\t\tbackground-color: var(--nav-tint);\n\t\toverflow: hidden;\n\t\tmax-width: 900px;\n\t}\n\n\t// Title is rendered inside the navigation slot; hide the native h2 but\n\t// keep it in the a11y tree so the modal still has its accessible name.\n\t:deep(.dialog__name) {\n\t\tposition: absolute;\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\tmargin: -1px;\n\t\tpadding: 0;\n\t\toverflow: hidden;\n\t\tclip-path: inset(100%);\n\t\twhite-space: nowrap;\n\t\tborder: 0;\n\t}\n\n\t:deep(.app-settings__navigation) {\n\t\tmin-width: $navigation-width;\n\t\tmax-width: $navigation-width;\n\t\tflex: 0 0 $navigation-width;\n\t\t// Beat NcDialog's default 20px end-margin so the tint meets the content.\n\t\tmargin-inline-end: 0 !important;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tposition: relative;\n\t}\n\n\t:deep(.app-settings__content) {\n\t\tpadding: $content-inset;\n\t\tbackground-color: var(--color-main-background);\n\t\tborder-inline-start: 1px solid var(--color-border-dark);\n\t\tborder-start-start-radius: var(--border-radius-element);\n\t\tborder-end-start-radius: var(--border-radius-element);\n\t}\n\n\t.app-settings__title {\n\t\tbox-sizing: border-box;\n\t\tpadding: $content-inset;\n\t\tmargin: 0;\n\t\tfont-size: 20px;\n\t\tfont-weight: 700;\n\t}\n\n\t.navigation-list {\n\t\theight: 100%;\n\t\toverflow-y: auto;\n\t\tpadding: var(--default-grid-baseline);\n\n\t\t&__link {\n\t\t\tposition: relative;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tfont-size: var(--default-font-size);\n\t\t\tfont-weight: 500;\n\t\t\theight: var(--default-clickable-area);\n\t\t\tmargin: 2px 0;\n\t\t\tline-height: var(--default-clickable-area);\n\t\t\tborder-radius: var(--border-radius-element);\n\t\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\t\tcursor: pointer;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-overflow: ellipsis;\n\t\t\toverflow: hidden;\n\t\t\tbackground-color: transparent;\n\t\t\tborder: none;\n\t\t\tcolor: var(--color-main-text);\n\n\t\t\t&:hover,\n\t\t\t&:focus-visible {\n\t\t\t\tbackground-color: color-mix(in srgb, var(--color-primary-element) 8%, transparent);\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\toutline: 2px solid var(--color-main-text);\n\t\t\t\toutline-offset: -2px;\n\t\t\t}\n\n\t\t\t&--active {\n\t\t\t\tbackground-color: var(--nav-tint-strong);\n\n\t\t\t\t&:hover,\n\t\t\t\t&:focus-visible {\n\t\t\t\t\tbackground-color: var(--color-primary-element-light-hover);\n\t\t\t\t}\n\n\t\t\t\t&::before {\n\t\t\t\t\tcontent: '';\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tinset-block: var(--default-grid-baseline);\n\t\t\t\t\tinset-inline-start: 0;\n\t\t\t\t\twidth: 3px;\n\t\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\t\tborder-radius: 999px;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&--icon {\n\t\t\t\tgap: var(--default-grid-baseline);\n\t\t\t}\n\n\t\t\t&-icon {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t\talign-content: center;\n\t\t\t\twidth: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t\t\tmax-width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t\t}\n\t\t}\n\t}\n\n}\n\n@media only screen and (width < $breakpoint-mobile) {\n\t.app-settings:not(.app-settings--legacy) {\n\t\t:deep(.modal-wrapper .modal-container) {\n\t\t\tpadding-inline-start: 12px !important;\n\t\t\tpadding-block-start: 4px !important;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t}\n\t\t:deep(.dialog__name) {\n\t\t\tposition: static;\n\t\t\twidth: auto;\n\t\t\theight: auto;\n\t\t\tmargin: 0 0 12px 0;\n\t\t\tpadding-inline-end: var(--default-clickable-area);\n\t\t\toverflow: visible;\n\t\t\tclip-path: none;\n\t\t\twhite-space: normal;\n\t\t\tborder: 0;\n\t\t}\n\t\t:deep(.app-settings__content) {\n\t\t\tborder: none;\n\t\t\tborder-radius: 0;\n\t\t}\n\t}\n}\n\n// Legacy design (NC < 34): keep the original centered-title layout.\n.app-settings.app-settings--legacy {\n\t:deep(.app-settings__navigation) {\n\t\tmin-width: 200px;\n\t\tmargin-inline-end: calc(4 * var(--default-grid-baseline));\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tposition: relative;\n\t}\n\n\t:deep(.app-settings__content) {\n\t\tpadding-inline: calc(4 * var(--default-grid-baseline));\n\t}\n\n\t.navigation-list {\n\t\theight: 100%;\n\t\toverflow-y: auto;\n\t\tpadding: calc(3 * var(--default-grid-baseline));\n\n\t\t&__link {\n\t\t\tdisplay: flex;\n\t\t\talign-content: center;\n\t\t\tfont-size: 16px;\n\t\t\theight: var(--default-clickable-area);\n\t\t\tmargin: 4px 0;\n\t\t\tline-height: var(--default-clickable-area);\n\t\t\tborder-radius: var(--border-radius-element);\n\t\t\tfont-weight: var(--font-weight-element, bold);\n\t\t\tpadding: 0 calc(4 * var(--default-grid-baseline));\n\t\t\tcursor: pointer;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-overflow: ellipsis;\n\t\t\toverflow: hidden;\n\t\t\tbackground-color: transparent;\n\t\t\tborder: none;\n\n\t\t\t&:hover,\n\t\t\t&:focus {\n\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t}\n\n\t\t\t&--active {\n\t\t\t\tbackground-color: var(--color-primary-element-light) !important;\n\t\t\t}\n\n\t\t\t&--icon {\n\t\t\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t\t\t\tgap: var(--default-grid-baseline);\n\t\t\t}\n\n\t\t\t&-icon {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t\talign-content: center;\n\t\t\t\twidth: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t\t\tmax-width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t\t}\n\t\t}\n\t}\n\n\t@media only screen and (max-width: $breakpoint-small-mobile) {\n\t\t:deep(.dialog__name) {\n\t\t\tpadding-inline-start: 16px;\n\t\t}\n\t}\n}\n</style>\n\n<docs>\nJust nest the `AppSettingSections` component into `NcAppSettingsDialog`,\nproviding the section's name prop. You can put your settings within each\n`NcAppSettingsSection` component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\" legacy>\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Example name 1\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Example name 2\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Example name 3\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Example name 4\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-5\" name=\"Example name 5\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-6\" name=\"Example name 6\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-7\" name=\"Example name 7\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-8\" name=\"Example name 8\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-9\" name=\"Example name 9\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-10\" name=\"Example name 10\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also add icons to the section navigation:\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\" legacy>\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\nSections order in navigation list is defined during initial rendering.\nIn case of dynamic/conditional sections rendering explicit `order` prop must be used for ordering.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\" legacy>\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Example name 1\" :order=\"1\">\n\t\t\t\tSome example content\n\t\t\t\t<NcCheckboxRadioSwitch v-model=\"showExtraSections\">Show section 3</NcCheckboxRadioSwitch>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Example name 2\" :order=\"2\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<template v-if=\"showExtraSections\">\n\t\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Example name 3\" :order=\"3\">\n\t\t\t\t\tSome example content\n\t\t\t\t</NcAppSettingsSection>\n\t\t\t</template>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Example name 4\" :order=\"4\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tsettingsOpen: false,\n\t\t\t\tshowExtraSections: true,\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n### New design\n\n```vue\n<script>\nimport { mdiArrowRight, mdiPlus, mdiDomain, mdiDockLeft, mdiDockBottom, mdiListBoxOutline, mdiPencilOutline, mdiTrashCanOutline, mdiMedalOutline, mdiEmailOutline } from '@mdi/js'\nexport default {\n\tsetup() {\n\t\treturn { mdiArrowRight, mdiPlus, mdiDomain, mdiDockLeft, mdiDockBottom, mdiListBoxOutline, mdiPencilOutline, mdiTrashCanOutline, mdiMedalOutline, mdiEmailOutline }\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t\tswitchValue: true,\n\t\t\tlayout: 'vertical',\n\t\t\tsorting: 'asc',\n\t\t\treply: 'top',\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Mail Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"general\" name=\"General\">\n\t\t\t\t<NcButton wide>Set as default mail app</NcButton>\n\n\t\t\t\t<NcFormGroup label=\"Account settings\">\n\t\t\t\t\t<NcFormBox>\n\t\t\t\t\t\t<NcFormBoxButton label=\"user@example.com\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcFormBoxButton>\n\t\t\t\t\t\t<NcFormBoxButton label=\"sales@example.com\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcFormBoxButton>\n\t\t\t\t\t\t<NcButton wide>\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPlus\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tAdd mail account\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t</NcFormBox>\n\t\t\t\t</NcFormGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"appearance\" name=\"Appearance\">\n\t\t\t\t<NcFormBox>\n\t\t\t\t\t<NcFormBoxSwitch\n\t\t\t\t\t\tv-model=\"switchValue\"\n\t\t\t\t\t\tlabel=\"Show all messages in thread\"\n\t\t\t\t\t\tdescription=\"When off, only the selected messages will be shown\" />\n\t\t\t\t</NcFormBox>\n\t\t\t\t<NcRadioGroup v-model=\"layout\" label=\"Layout\">\n\t\t\t\t\t<NcRadioGroupButton label=\"Vertical\" value=\"vertical\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDockLeft\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t\t<NcRadioGroupButton label=\"Horizontal\" value=\"horizontal\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDockBottom\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t\t<NcRadioGroupButton label=\"List\" value=\"list\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiListBoxOutline\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t</NcRadioGroup>\n\t\t\t\t<NcRadioGroup v-model=\"sorting\" label=\"Sorting\">\n\t\t\t\t\t<NcRadioGroupButton label=\"Newest first\" value=\"asc\" />\n\t\t\t\t\t<NcRadioGroupButton label=\"Oldest first\" value=\"desc\" />\n\t\t\t\t</NcRadioGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"messages\" name=\"Messages\">\n\t\t\t\t<NcFormBox>\n\t\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Avatars from Gravatar and favicons\" />\n\t\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Determine importance using machine learning\" />\n\t\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Search the body of messages in Priority inbox\" />\n\t\t\t\t</NcFormBox>\n\t\t\t\t<NcRadioGroup v-model=\"reply\" label=\"Reply position\">\n\t\t\t\t\t<NcRadioGroupButton label=\"Top\" value=\"top\" />\n\t\t\t\t\t<NcRadioGroupButton label=\"Bottom\" value=\"bottom\" />\n\t\t\t\t</NcRadioGroup>\n\t\t\t\t<NcFormGroup\n\t\t\t\t\tlabel=\"Text blocks\"\n\t\t\t\t\tdescription=\"Reusable pieces of text that can be inserted in messages\">\n\t\t\t\t\t<NcListItem name=\"Title\">\n\t\t\t\t\t\t<template #subname>\n\t\t\t\t\t\t\tContent\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPencilOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcListItem name=\"Reply\">\n\t\t\t\t\t\t<template #subname>\n\t\t\t\t\t\t\tThank you for contacting us!\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPencilOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t</NcFormGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"privacy\" name=\"Privacy\">\n\t\t\t\t<NcFormBox>\n\t\t\t\t\t<NcFormBoxSwitch\n\t\t\t\t\t\tv-model=\"switchValue\"\n\t\t\t\t\t\tlabel=\"Data collection\"\n\t\t\t\t\t\tdescription=\"Allow the app to collect and process data locally to adapt to your preferences\" />\n\t\t\t\t</NcFormBox>\n\t\t\t\t<NcFormGroup label=\"Always show images from\">\n\t\t\t\t\t<NcListItem name=\"example.com\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcListItem name=\"example.net\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcListItem name=\"mail@example.org\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiEmailOutline\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t</NcFormGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"security\" name=\"Security\">\n\t\t\t\t<NcFormBox>\n\t\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Highlight external addresses\" />\n\t\t\t\t</NcFormBox>\n\t\t\t\t<NcFormGroup label=\"Internal addresses\">\n\t\t\t\t\t<NcListItem name=\"example.com\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcListItem name=\"example.company@example.net\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiEmailOutline\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcButton wide>Add internal address</NcButton>\n\t\t\t\t</NcFormGroup>\n\t\t\t\t<NcFormGroup label=\"S/MIME\">\n\t\t\t\t\t<NcButton wide>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiMedalOutline\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tManage certificates\n\t\t\t\t\t</NcButton>\n\t\t\t\t</NcFormGroup>\n\t\t\t\t<NcFormGroup label=\"Mailvelope\">\n\t\t\t\t\t<NcFormBox>\n\t\t\t\t\t\t<NcFormBoxButton\n\t\t\t\t\t\t\tlabel=\"Step 1\"\n\t\t\t\t\t\t\tdescription=\"Install the browser extension\"\n\t\t\t\t\t\t\thref=\"https://www.mailvelope.com/\"\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\tinverted-accent />\n\t\t\t\t\t\t<NcFormBoxButton\n\t\t\t\t\t\t\tlabel=\"Step 2\"\n\t\t\t\t\t\t\tdescription=\"Enable the current domain\"\n\t\t\t\t\t\t\tinverted-accent>\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcFormBoxButton>\n\t\t\t\t\t</NcFormBox>\n\t\t\t\t</NcFormGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"about\" name=\"About\">\n\t\t\t\t<NcFormGroup label=\"Acknowledgements\" description=\"This application includes CKEditor, an open-source editor. Copyright (C) CKEditor contributors. Licensed under GPLv2.\" />\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsShortcutsSection>\n\t\t\t\t<NcHotkeyList>\n\t\t\t\t\t<NcHotkey label=\"Compose new message\" hotkey=\"C\" />\n\t\t\t\t\t<NcHotkey label=\"Newer message\" hotkey=\"ArrowLeft\" />\n\t\t\t\t\t<NcHotkey label=\"Older message\" hotkey=\"ArrowRight\" />\n\t\t\t\t\t<NcHotkey label=\"Toggle star\" hotkey=\"S\" />\n\t\t\t\t\t<NcHotkey label=\"Toggle unread\" hotkey=\"U\" />\n\t\t\t\t\t<NcHotkey label=\"Archive\" hotkey=\"A\" />\n\t\t\t\t\t<NcHotkey label=\"Delete\" hotkey=\"Delete\" />\n\t\t\t\t\t<NcHotkey label=\"Search\" hotkey=\"Control F\" />\n\t\t\t\t\t<NcHotkey label=\"Send\" hotkey=\"Control Enter\" />\n\t\t\t\t\t<NcHotkey label=\"Refresh\" hotkey=\"R\" />\n\t\t\t\t</NcHotkeyList>\n\t\t\t</NcAppSettingsShortcutsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n```\n</docs>\n"],"names":["_createElementBlock","_normalizeClass","$style","_unref","_toDisplayString","_useModel","_createBlock","_createElementVNode","_renderSlot","_withCtx","_openBlock","_Fragment","_renderList","_withModifiers","_withKeys","NcVNodes"],"mappings":";;;;;;;;;;;;;AAUA,UAAM,SAAS,OAAO,8BAA8B;AAEpD,UAAM,mBAAmB,oBAAA;;0BAIxBA,mBAEM,OAAA;AAAA,QAFA,OAAKC,eAAA,CAAGC,YAAO,6BAA6BA,KAAAA,OAAO,gCAAgC,GAAGC,MAAA,MAAA,EAAA,CAAM,CAAA;AAAA,MAAA,mBAC9FA,MAAA,gBAAA,CAAgB,IAAG,MAACC,gBAAGD,MAAA,WAAA,CAAW,GAAA,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACWvC,UAAM,OAAOE,SAAoB,SAAC,MAA0B;AAE5D,UAAM,QAAQ;AA+Cd,YAAQ,+BAA+B;AAAA,MACtC;AAAA,MACA;AAAA,IAAA,CACA;AAED,YAAQ,gCAAgC,MAAM,MAAM,MAAM,MAAM,CAAC;AAEjE,UAAM,0BAA0B,eAAe,kBAAkB;AAEjE,UAAM,WAAW,YAAA;AAEjB,UAAM,kBAAkB,IAAI,EAAE;AAC9B,UAAM,cAAc,IAAI,KAAK;AAC7B,UAAM,qBAAqB,IAA2B,EAAE;AAExD,UAAM,gBAAgB,SAAS,MAAM,CAAC,SAAS,SAAS,MAAM,cAAc;AAK5E,UAAM,qBAAqB,SAAS,MAAM,mBAAmB,MAAM,KAAK,CAAC,EAAE,KAAA,MAAW,CAAC,CAAC,IAAI,CAAC;AAK7F,UAAM,wBAAwB,SAAS,MAAM;AAC5C,sBAAgB,QAAQ;AACxB,UAAI,SAAS,eAAe,UAAU,SAAS,uBAAuB,GAAG;AACvE,iBAAS,cAA8B,KAAA;AAAA,MACzC;AAAA,IACD,GAAG,GAAG;AAKN,UAAM,uCAAuB,IAAA;AAC7B,oBAAgB,MAAM;AACrB,uBAAiB,MAAA;AAAA,IAClB,CAAC;AAOD,aAAS,8BAA8B,MAAc;AACpD,kBAAY,QAAQ;AACpB,eAAS,eAAe,sBAAsB,IAAI,EAAG,eAAe;AAAA,QACnE,UAAU;AAAA,QACV,QAAQ;AAAA,MAAA,CACR;AACD,sBAAgB,QAAQ;AACxB,iBAAW,MAAM;AAChB,oBAAY,QAAQ;AAAA,MACrB,GAAG,GAAI;AAAA,IACR;AAOA,aAAS,iBAAiB,QAAiB;AAC1C,UAAI,QAAQ;AACX;AAAA,MACD;AAEA,WAAK,QAAQ;AAEb,8BAAwB,MAAO,YAAY;AAAA,IAC5C;AAKA,aAAS,eAAe;AACvB,UAAI,KAAK,SAAS,CAAC,YAAY,OAAO;AACrC,8BAAA;AAAA,MACD;AAAA,IACD;AAUA,aAAS,gBAAgB,IAAY,MAAc,OAAgB,MAAgB;AAElF,UAAI,mBAAmB,MAAM,KAAK,CAAC,EAAE,IAAI,QAAA,MAAc,OAAO,OAAO,GAAG;AACvE,cAAM,IAAI,MAAM,+BAA+B,EAAE,8DAA8D;AAAA,MAChH;AACA,UAAI,mBAAmB,MAAM,KAAK,CAAC,EAAE,MAAM,UAAA,MAAgB,SAAS,SAAS,GAAG;AAC/E,aAAK,iCAAiC,IAAI,gEAAgE;AAAA,MAC3G;AAGA,UAAI,UAAU,QAAW;AACxB,yBAAiB,IAAI,IAAI,KAAK;AAAA,MAC/B,WAAW,iBAAiB,IAAI,EAAE,GAAG;AACpC,gBAAQ,iBAAiB,IAAI,EAAE;AAAA,MAChC,OAAO;AAEN,gBAAQ,KAAK,IAAI,GAAG,GAAG,iBAAiB,OAAA,CAAQ,IAAI;AACpD,yBAAiB,IAAI,IAAI,KAAK;AAAA,MAC/B;AAGA,yBAAmB,QAAQ,CAAC,GAAG,mBAAmB,OAAO,EAAE,IAAI,MAAM,OAAO,KAAA,CAAM,EAChF,KAAK,CAAC,EAAE,OAAO,UAAU,EAAE,OAAO,aAAa;AAC/C,eAAO,SAAU;AAAA,MAClB,CAAC;AAGF,UAAI,mBAAmB,MAAM,WAAW,GAAG;AAC1C,wBAAgB,QAAQ;AAAA,MACzB;AAAA,IACD;AAOA,aAAS,kBAAkB,IAAY;AACtC,yBAAmB,QAAQ,mBAAmB,MAC5C,OAAO,CAAC,EAAE,IAAI,QAAA,MAAc,OAAO,OAAO;AAG5C,UAAI,gBAAgB,UAAU,IAAI;AACjC,wBAAgB,QAAQ,mBAAmB,MAAM,CAAC,GAAG,MAAM;AAAA,MAC5D;AAAA,IACD;;aAKQ,KAAA,sBADPC,YA8CW,UAAA;AAAA;QA5CV,OAAKL,eAAA,CAAC,gBAAc,EAAA,wBACcE,MAAA,UAAA,EAAA,CAAU,CAAA;AAAA,QAC5C,gBAAe;AAAA,QACf,mBAAkB;AAAA,QACjB,wBAAA,QAAA;AAAA,QACA,WAAA,QAAA;AAAA,QACD,qBAAA;AAAA,QACC,yBAAuBA,MAAA,CAAA,EAAC,qBAAA;AAAA,QACzB,MAAK;AAAA,QACJ,MAAA,QAAA;AAAA,QACA,iBAAa;AAAA,MAAA;yBA8Bd,MAGM;AAAA,UAHNI,mBAGM,OAAA;AAAA,YAHD,KAAI;AAAA,YAAoB,UAAQ;AAAA,UAAA;YACpCC,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,aAC2B,QAAA,0BAAnCF,YAAgD,4BAAA,EAAA,KAAA,EAAA,CAAA;;;;;QA/BjC,cAAA;gBAAgB;AAAA,UAC/B,IAAAG,QAAA,CAEM,EAHuC,kBAAW;AAAA,aAC5CN,MAAA,UAAA,kBAAZH,mBAEM,OAFN,YAEMI,gBADF,QAAA,IAAI,GAAA,CAAA;aAGA,eADRM,UAAA,GAAAV,mBAuBK,MAvBL,YAuBK;AAAA,gCApBJA,mBAmBKW,UAAA,MAAAC,WAnBiB,mBAAA,OAAkB,CAA7B,YAAO;oCAAlBZ,mBAmBK,MAAA;AAAA,kBAnBsC,KAAK,QAAQ;AAAA,gBAAA;kBACvDO,mBAiBI,KAAA;AAAA,oBAhBF,gBAAY,GAAK,QAAQ,OAAO,gBAAA,KAAe;AAAA,oBAChD,uBAAM,yBAAuB;AAAA,uDACqB,QAAQ,OAAO,gBAAA;AAAA,qDAAuD,mBAAA;AAAA,oBAAA;oBAIvH,MAAI,qBAAuB,QAAQ,EAAE;AAAA,oBACtC,UAAS;AAAA,oBACR,SAAKM,cAAA,CAAA,WAAU,8BAA8B,QAAQ,EAAE,GAAA,CAAA,SAAA,CAAA;AAAA,oBACvD,WAAOC,SAAA,CAAA,WAAQ,8BAA8B,QAAQ,EAAE,GAAA,CAAA,OAAA,CAAA;AAAA,kBAAA;oBAC7C,mBAAA,SAAXJ,UAAA,GAAAV,mBAEM,OAFN,YAEM;AAAA,sBADW,QAAQ,qBAAxBM,YAAuDS,aAAA;AAAA;wBAAxB,QAAQ,QAAQ;AAAA,sBAAA;;oBAEhDR,mBAEO,QAFP,YAEOH,gBADH,QAAQ,IAAI,GAAA,CAAA;AAAA,kBAAA;;;;;;;;;;;;"}

package/dist/chunks/{NcAppSettingsShortcutsSection-DgqVuZGx.mjs → NcAppSettingsShortcutsSection-og6gyYxr.mjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-import '../assets/NcAppSettingsShortcutsSection-BonG0SgH.css';
+import '../assets/NcAppSettingsShortcutsSection-ABRbmy1I.css';
 import { defineComponent, openBlock, createBlock, unref, withCtx, createElementVNode, normalizeClass, renderSlot } from "vue";
 import { N as NcAppSettingsSection } from "./NcAppSettingsSection-BosSmisT.mjs";
 import { r as register, p as t31, a as t } from "./_l10n-CG4CuN3H.mjs";
@@ -24,7 +24,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const appSettingsSectionShortcuts = "_appSettingsSectionShortcuts_RqpkA";
+const appSettingsSectionShortcuts = "_appSettingsSectionShortcuts_5DFzJ";
 const style0 = {
   appSettingsSectionShortcuts
 };
@@ -35,4 +35,4 @@ const NcAppSettingsShortcutsSection = /* @__PURE__ */ _export_sfc(_sfc_main, [["
 export {
   NcAppSettingsShortcutsSection as N
 };
-//# sourceMappingURL=NcAppSettingsShortcutsSection-DgqVuZGx.mjs.map
+//# sourceMappingURL=NcAppSettingsShortcutsSection-og6gyYxr.mjs.map

package/dist/chunks/{NcAppSettingsShortcutsSection-DgqVuZGx.mjs.map → NcAppSettingsShortcutsSection-og6gyYxr.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcAppSettingsShortcutsSection-~~DgqVuZGx~~.mjs","sources":["../../src/components/NcAppSettingsShortcutsSection/NcAppSettingsShortcutsSection.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport NcAppSettingsSection from '../NcAppSettingsSection/NcAppSettingsSection.vue'\nimport { t } from '../../l10n.ts'\n\ndefineSlots<{\n\t/*\n\t Shortcuts described via <NcHotkeyList> components\n\t /\n\tdefault?: Slot\n}>()\n</script>\n\n<template>\n\t<NcAppSettingsSection id=\"keyboard-shortcuts\" :name=\"t('Keyboard shortcuts')\">\n\t\t<div :class=\"$style.appSettingsSectionShortcuts\">\n\t\t\t<slot />\n\t\t</div>\n\t</NcAppSettingsSection>\n</template>\n\n<style module>\n.appSettingsSectionShortcuts {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(4 var(--default-grid-baseline));\n}\n</style>\n\n<docs>\nA special `NcAppSettingsSection` for listing keyboard shortcuts using `<NcHotkeyList>` and `<NcHotkey>` components with predefined heading and gap between hotkey lists.\n\n```vue\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\topen: false,\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<div>\n\t\t<NcButton @click=\"open = true\">App Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"open\" name=\"Application settings\" show-navigation>\n\t\t\t<NcAppSettingsShortcutsSection>\n\t\t\t\t<NcHotkeyList label=\"Actions\">\n\t\t\t\t\t<NcHotkey label=\"File actions\" hotkey=\"A\" />\n\t\t\t\t\t<NcHotkey label=\"Rename\" hotkey=\"F2\" />\n\t\t\t\t\t<NcHotkey label=\"Delete\" hotkey=\"Delete\" />\n\t\t\t\t\t<NcHotkey label=\"Add or remove favorite\" hotkey=\"S\" />\n\t\t\t\t\t<NcHotkey label=\"Manage tags\" hotkey=\"T\" />\n\t\t\t\t</NcHotkeyList>\n\n\t\t\t\t<NcHotkeyList label=\"Selection\">\n\t\t\t\t\t<NcHotkey label=\"Select all files\" hotkey=\"Control A\" />\n\t\t\t\t\t<NcHotkey label=\"Deselect all\" hotkey=\"Escape\" />\n\t\t\t\t\t<NcHotkey label=\"Select or deselect\" hotkey=\"Control Space\" />\n\t\t\t\t\t<NcHotkey label=\"Select a range\" hotkey=\"Control Shift Space\" />\n\t\t\t\t</NcHotkeyList>\n\n\t\t\t\t<NcHotkeyList label=\"Navigation\">\n\t\t\t\t\t<NcHotkey label=\"Go to parent folder\" hotkey=\"Alt ArrowUp\" />\n\t\t\t\t\t<NcHotkey label=\"Go to file above\" hotkey=\"ArrowUp\" />\n\t\t\t\t\t<NcHotkey label=\"Go to file below\" hotkey=\"ArrowDown\" />\n\t\t\t\t\t<NcHotkey label=\"Go left in grid\" hotkey=\"ArrowLeft\" />\n\t\t\t\t\t<NcHotkey label=\"Go right in grid\" hotkey=\"ArrowRight\" />\n\t\t\t\t</NcHotkeyList>\n\n\t\t\t\t<NcHotkeyList label=\"View\">\n\t\t\t\t\t<NcHotkey label=\"Toggle grid view\" hotkey=\"V\" />\n\t\t\t\t\t<NcHotkey label=\"Open file sidebar\" hotkey=\"D\" />\n\t\t\t\t\t<NcHotkey label=\"Show those shortcuts\" hotkey=\"?\" />\n\t\t\t\t</NcHotkeyList>\n\t\t\t</NcAppSettingsShortcutsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n```\n</docs>\n"],"names":["_createBlock","_unref","_createElementVNode","_normalizeClass","$style","_renderSlot"],"mappings":";;;;;;;;;0BAoBCA,YAIuB,sBAAA;AAAA,QAJD,IAAG;AAAA,QAAsB,MAAMC,MAAA,CAAA,EAAC,oBAAA;AAAA,MAAA;yBACrD,MAEM;AAAA,UAFNC,mBAEM,OAAA;AAAA,YAFA,OAAKC,eAAEC,KAAAA,OAAO,2BAA2B;AAAA,UAAA;YAC9CC,WAAQ,KAAA,QAAA,SAAA;AAAA,UAAA;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcAppSettingsShortcutsSection-og6gyYxr.mjs","sources":["../../src/components/NcAppSettingsShortcutsSection/NcAppSettingsShortcutsSection.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport NcAppSettingsSection from '../NcAppSettingsSection/NcAppSettingsSection.vue'\nimport { t } from '../../l10n.ts'\n\ndefineSlots<{\n\t/*\n\t Shortcuts described via <NcHotkeyList> components\n\t /\n\tdefault?: Slot\n}>()\n</script>\n\n<template>\n\t<NcAppSettingsSection id=\"keyboard-shortcuts\" :name=\"t('Keyboard shortcuts')\">\n\t\t<div :class=\"$style.appSettingsSectionShortcuts\">\n\t\t\t<slot />\n\t\t</div>\n\t</NcAppSettingsSection>\n</template>\n\n<style module>\n.appSettingsSectionShortcuts {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(4 var(--default-grid-baseline));\n}\n</style>\n\n<docs>\nA special `NcAppSettingsSection` for listing keyboard shortcuts using `<NcHotkeyList>` and `<NcHotkey>` components with predefined heading and gap between hotkey lists.\n\n```vue\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\topen: false,\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<div>\n\t\t<NcButton @click=\"open = true\">App Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"open\" name=\"Application settings\" show-navigation>\n\t\t\t<NcAppSettingsShortcutsSection>\n\t\t\t\t<NcHotkeyList label=\"Actions\">\n\t\t\t\t\t<NcHotkey label=\"File actions\" hotkey=\"A\" />\n\t\t\t\t\t<NcHotkey label=\"Rename\" hotkey=\"F2\" />\n\t\t\t\t\t<NcHotkey label=\"Delete\" hotkey=\"Delete\" />\n\t\t\t\t\t<NcHotkey label=\"Add or remove favorite\" hotkey=\"S\" />\n\t\t\t\t\t<NcHotkey label=\"Manage tags\" hotkey=\"T\" />\n\t\t\t\t</NcHotkeyList>\n\n\t\t\t\t<NcHotkeyList label=\"Selection\">\n\t\t\t\t\t<NcHotkey label=\"Select all files\" hotkey=\"Control A\" />\n\t\t\t\t\t<NcHotkey label=\"Deselect all\" hotkey=\"Escape\" />\n\t\t\t\t\t<NcHotkey label=\"Select or deselect\" hotkey=\"Control Space\" />\n\t\t\t\t\t<NcHotkey label=\"Select a range\" hotkey=\"Control Shift Space\" />\n\t\t\t\t</NcHotkeyList>\n\n\t\t\t\t<NcHotkeyList label=\"Navigation\">\n\t\t\t\t\t<NcHotkey label=\"Go to parent folder\" hotkey=\"Alt ArrowUp\" />\n\t\t\t\t\t<NcHotkey label=\"Go to file above\" hotkey=\"ArrowUp\" />\n\t\t\t\t\t<NcHotkey label=\"Go to file below\" hotkey=\"ArrowDown\" />\n\t\t\t\t\t<NcHotkey label=\"Go left in grid\" hotkey=\"ArrowLeft\" />\n\t\t\t\t\t<NcHotkey label=\"Go right in grid\" hotkey=\"ArrowRight\" />\n\t\t\t\t</NcHotkeyList>\n\n\t\t\t\t<NcHotkeyList label=\"View\">\n\t\t\t\t\t<NcHotkey label=\"Toggle grid view\" hotkey=\"V\" />\n\t\t\t\t\t<NcHotkey label=\"Open file sidebar\" hotkey=\"D\" />\n\t\t\t\t\t<NcHotkey label=\"Show those shortcuts\" hotkey=\"?\" />\n\t\t\t\t</NcHotkeyList>\n\t\t\t</NcAppSettingsShortcutsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n```\n</docs>\n"],"names":["_createBlock","_unref","_createElementVNode","_normalizeClass","$style","_renderSlot"],"mappings":";;;;;;;;;0BAoBCA,YAIuB,sBAAA;AAAA,QAJD,IAAG;AAAA,QAAsB,MAAMC,MAAA,CAAA,EAAC,oBAAA;AAAA,MAAA;yBACrD,MAEM;AAAA,UAFNC,mBAEM,OAAA;AAAA,YAFA,OAAKC,eAAEC,KAAAA,OAAO,2BAA2B;AAAA,UAAA;YAC9CC,WAAQ,KAAA,QAAA,SAAA;AAAA,UAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppSidebar-Ch7Vp7q5.mjs → NcAppSidebar-DX26aRNB.mjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-import '../assets/NcAppSidebar-dHtSShIl.css';
+import '../assets/NcAppSidebar-TcyGhk0L.css';
 import { vOnClickOutside } from "@vueuse/components";
 import { createFocusTrap } from "focus-trap";
 import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, defineComponent, useModel, normalizeClass, unref, createVNode, withCtx, mergeModels, resolveComponent, withKeys, withModifiers, Fragment, renderList, createBlock, renderSlot, resolveDirective, Transition, withDirectives, Teleport, normalizeStyle, vShow, createTextVNode, warn, ref, provide } from "vue";
@@ -13,7 +13,7 @@ import directive from "../directives/Focus/index.mjs";
 import { r as register, V as t15, a as t } from "./_l10n-CG4CuN3H.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
 import { g as getTrapStack } from "./focusTrap-HJQ4pqHV.mjs";
-import { i as isSlotPopulated, N as NcActions } from "./NcActions-CUmcZ3C3.mjs";
+import { i as isSlotPopulated, N as NcActions } from "./NcActions-DY4GGONi.mjs";
 import { l as logger } from "./logger-D3RVzcfQ.mjs";
 import { _ as _sfc_main$7 } from "./NcAppSidebarHeader.vue_vue_type_script_setup_true_lang-C-QhdyiN.mjs";
 import { N as NcButton } from "./NcButton-QbPBynlU.mjs";
@@ -193,14 +193,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const sidebarTabsButton = "_sidebarTabsButton_6hxfz";
-const sidebarTabsButton_legacy = "_sidebarTabsButton_legacy_Qp20k";
-const sidebarTabsButton_selected = "_sidebarTabsButton_selected_eBHM-";
-const sidebarTabsButton__name = "_sidebarTabsButton__name_YlW5S";
-const sidebarTabsButton__icon = "_sidebarTabsButton__icon_MPS-D";
-const sidebarTabsButton__legacyIcon = "_sidebarTabsButton__legacyIcon_rzPOu";
+const sidebarTabsButton = "_sidebarTabsButton_Uw0-N";
+const sidebarTabsButton_legacy = "_sidebarTabsButton_legacy_FsjhV";
+const sidebarTabsButton_selected = "_sidebarTabsButton_selected_MiFwn";
+const sidebarTabsButton__name = "_sidebarTabsButton__name_Uzc5r";
+const sidebarTabsButton__icon = "_sidebarTabsButton__icon_-Zy-g";
+const sidebarTabsButton__legacyIcon = "_sidebarTabsButton__legacyIcon_svLe8";
 const style0 = {
-  "material-design-icon": "_material-design-icon_m4vbX",
+  "material-design-icon": "_material-design-icon_fPSY2",
   sidebarTabsButton,
   sidebarTabsButton_legacy,
   sidebarTabsButton_selected,
@@ -1048,4 +1048,4 @@ const NcAppSidebar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_ren
 export {
   NcAppSidebar as N
 };
-//# sourceMappingURL=NcAppSidebar-Ch7Vp7q5.mjs.map
+//# sourceMappingURL=NcAppSidebar-DX26aRNB.mjs.map