npm - @nextcloud/vue - Versions diffs - 8.35.0 → 8.35.2 - Mend

@nextcloud/vue 8.35.0 → 8.35.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 (444) hide show

package/dist/chunks/{NcAppContent-CMntmSFj.cjs.map → NcAppContent-cKOp687H.cjs.map} RENAMED Viewed

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

package/dist/chunks/{NcAppNavigation-DgekTp_z.mjs → NcAppNavigation-BGc7ks7G.mjs} RENAMED Viewed

@@ -8,7 +8,7 @@ import { useIsMobile } from "../Composables/useIsMobile.mjs";
 import { g as getTrapStack } from "./focusTrap-HJQ4pqHV.mjs";
 import { l as logger } from "./logger-D3RVzcfQ.mjs";
 import NcAppNavigationList from "../Components/NcAppNavigationList.mjs";
-import { N as NcAppNavigationToggle } from "./NcAppNavigationToggle-B0N05AxP.mjs";
+import { N as NcAppNavigationToggle } from "./NcAppNavigationToggle-phm-tyID.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const _sfc_main = {
   name: "NcAppNavigation",
@@ -170,4 +170,4 @@ const NcAppNavigation = __component__.exports;
 export {
   NcAppNavigation as N
 };
-//# sourceMappingURL=NcAppNavigation-DgekTp_z.mjs.map
+//# sourceMappingURL=NcAppNavigation-BGc7ks7G.mjs.map

package/dist/chunks/{NcAppNavigation-DgekTp_z.mjs.map → NcAppNavigation-BGc7ks7G.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcAppNavigation-DgekTp_z.mjs","sources":["../../src/components/NcAppNavigation/NcAppNavigation.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n```vue\n<template>\n\t<div class=\"styleguide-nc-content\">\n\t\t<NcAppNavigation>\n\t\t\t<template #search>\n\t\t\t\t<NcAppNavigationSearch v-model=\"searchValue\">\n\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t<NcActions>\n\t\t\t\t\t\t\t<NcActionButton close-after-click @click=\"showModal = true\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconCogOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tApp settings (close after click)\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton @click=\"showModal = true\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconCogOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tApp settings (handle only click)\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t</template>\n\t\t\t\t</NcAppNavigationSearch>\n\t\t\t</template>\n\t\t\t<template #list>\n\t\t\t\t<NcAppNavigationItem v-for=\"item in items\" :key=\"item\" :name=\"item\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCheck :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcAppNavigationItem>\n\t\t\t</template>\n\t\t\t<template #footer>\n\t\t\t\t<div class=\"navigation__footer\">\n\t\t\t\t\t<NcButton wide @click=\"showModal = true\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconCogOutline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tApp settings\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcModal v-if=\"showModal\" name=\"Modal for focus-trap check\" @close=\"showModal = false\">\n\t\t\t\t\t\t<div class=\"modal-content\">\n\t\t\t\t\t\t\t<h4>Focus-trap should be locked inside the modal</h4>\n\t\t\t\t\t\t\t<NcTextField :value.sync=\"modalValue\" label=\"Focus me\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</NcModal>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</NcAppNavigation>\n\t</div>\n</template>\n\n<script>\n\timport IconCheck from 'vue-material-design-icons/Check.vue'\n\timport IconCogOutline from 'vue-material-design-icons/CogOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconCheck,\n\t\t\tIconCogOutline,\n\t\t},\n\t\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:setHasAppNavigation': () => {},\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\titems: Array.from({ length: 5 }, (v, i) => `Item ${i+1}`),\n\t\t\t\tsearchValue: '',\n\t\t\t\tmodalValue: '',\n\t\t\t\tshowModal: false,\n\t\t\t}\n\t\t},\n\t}\n</script>\n\n<style scoped>\n\t/* Mock NcContent /\n\t.styleguide-nc-content {\n\t\tposition: relative;\n\t\theight: 300px;\n\t\tbackground-color: var(--color-background-plain);\n\t\toverflow: hidden;\n\t}\n\n\t.navigation__header,\n\t.navigation__footer {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\tpadding: 4px;\n\t}\n\n\t.modal-content {\n\t\theight: 120px;\n\t\tpadding: 10px;\n\t}\n</style>\n```\n\nThe navigation bar can be open and closed from anywhere in the app using the\nnextcloud event bus.\n\n### Install the event bus package\n\n```bash\nnpm i -S @nextcloud/event-bus\n```\n\n### Usage\n\n#### Open the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: true,\n})\n```\n\n#### Close the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: false,\n})\n```\n\n</docs>\n\n<template>\n\t<div\n\t\tref=\"appNavigationContainer\"\n\t\tclass=\"app-navigation\"\n\t\t:class=\"{ 'app-navigation--close': !open }\">\n\t\t<nav\n\t\t\tid=\"app-navigation-vue\"\n\t\t\t:aria-hidden=\"open ? 'false' : 'true'\"\n\t\t\t:aria-label=\"ariaLabel \|\| undefined\"\n\t\t\t:aria-labelledby=\"ariaLabelledby \|\| undefined\"\n\t\t\tclass=\"app-navigation__content\"\n\t\t\t:inert=\"!open \|\| undefined\"\n\t\t\t@keydown.esc=\"handleEsc\">\n\t\t\t<div class=\"app-navigation__search\">\n\t\t\t\t<!-- @slot For in-app search you can pass a `NcAppNavigationSearch` component as the slot content. -->\n\t\t\t\t<slot name=\"search\" />\n\t\t\t</div>\n\t\t\t<div class=\"app-navigation__body\" :class=\"{ 'app-navigation__body--no-list': !$scopedSlots.list }\">\n\t\t\t\t<!-- @slot The main content of the navigation. If no list is passed to the #list slot, stretched vertically. -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\n\t\t\t<NcAppNavigationList v-if=\"$scopedSlots.list\" class=\"app-navigation__list\">\n\t\t\t\t<!-- @slot List for Navigation list items. Stretched between the main content and the footer -->\n\t\t\t\t<slot name=\"list\" />\n\t\t\t</NcAppNavigationList>\n\n\t\t\t<!-- @slot Footer for e.g. NcAppNavigationSettings -->\n\t\t\t<slot name=\"footer\" />\n\t\t</nav>\n\t\t<NcAppNavigationToggle :open=\"open\" @update:open=\"toggleNavigation\" />\n\t</div>\n</template>\n\n<script>\nimport { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { createFocusTrap } from 'focus-trap'\nimport { tabbable } from 'tabbable'\nimport Vue from 'vue'\nimport { useHotKey } from '../../composables/useHotKey/index.ts'\nimport { useIsMobile } from '../../composables/useIsMobile/index.ts'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { logger } from '../../utils/logger.ts'\nimport NcAppNavigationList from '../NcAppNavigationList/index.js'\nimport NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'\n\nexport default {\n\tname: 'NcAppNavigation',\n\n\tcomponents: {\n\t\tNcAppNavigationList,\n\t\tNcAppNavigationToggle,\n\t},\n\n\t// Injected from NcContent\n\tinject: {\n\t\tsetHasAppNavigation: {\n\t\t\tdefault: () => () => Vue.util.warn('NcAppNavigation is not mounted inside NcContent, this is probably an error.'),\n\t\t\tfrom: 'NcContent:setHasAppNavigation',\n\t\t},\n\t},\n\n\tprops: {\n\t\t/\n\t\t The aria label to describe the navigation\n\t\t /\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t aria-labelledby attribute to describe the navigation\n\t\t /\n\t\tariaLabelledby: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\topen: !this.isMobile,\n\t\t\tfocusTrap: null,\n\t\t}\n\t},\n\n\twatch: {\n\t\tisMobile() {\n\t\t\tthis.open = !this.isMobile\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\n\t\topen() {\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.setHasAppNavigation(true)\n\t\tsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\t// Emit an event with the initial state of the navigation\n\t\temit('navigation-toggled', {\n\t\t\topen: this.open,\n\t\t})\n\n\t\tthis.focusTrap = createFocusTrap(this.$refs.appNavigationContainer, {\n\t\t\tallowOutsideClick: true,\n\t\t\tfallbackFocus: this.$refs.appNavigationContainer,\n\t\t\ttrapStack: getTrapStack(),\n\t\t\tescapeDeactivates: false,\n\t\t})\n\t\tthis.toggleFocusTrap()\n\n\t\t// N opens + focuses the navigation\n\t\tuseHotKey('n', this.onKeyDown, {\n\t\t\tprevent: true,\n\t\t\tstop: true,\n\t\t})\n\t},\n\n\tunmounted() {\n\t\tthis.setHasAppNavigation(false)\n\t\tunsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\tthis.focusTrap.deactivate()\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Toggle the navigation\n\t\t \n\t\t @param {boolean} [state] set the state instead of inverting the current one\n\t\t /\n\t\tasync toggleNavigation(state) {\n\t\t\t// Early return if already in that state\n\t\t\tif (this.open === state) {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.open = (typeof state === 'undefined') ? !this.open : state\n\t\t\tconst bodyStyles = getComputedStyle(document.body)\n\t\t\tconst animationLength = parseInt(bodyStyles.getPropertyValue('--animation-quick')) \|\| 100\n\n\t\t\t// If we just opened, we focus the first element\n\t\t\tif (this.open) {\n\t\t\t\tawait this.$nextTick()\n\t\t\t\tthis.focusFirstElement()\n\t\t\t}\n\n\t\t\tsetTimeout(() => {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t// We wait for 1.5 times the animation length to give the animation time to really finish.\n\t\t\t}, 1.5 animationLength)\n\t\t},\n\n\t\ttoggleNavigationByEventBus({ open }) {\n\t\t\tthis.toggleNavigation(open)\n\t\t},\n\n\t\t/*\n\t\t Activate focus trap if it is currently needed, otherwise deactivate\n\t\t /\n\t\ttoggleFocusTrap() {\n\t\t\tif (this.isMobile && this.open) {\n\t\t\t\tthis.focusTrap.activate()\n\t\t\t} else {\n\t\t\t\tthis.focusTrap.deactivate()\n\t\t\t}\n\t\t},\n\n\t\thandleEsc() {\n\t\t\tif (this.isMobile && this.open) {\n\t\t\t\tthis.toggleNavigation(false)\n\t\t\t}\n\t\t},\n\n\t\tfocusFirstElement() {\n\t\t\tconst element = tabbable(this.$refs.appNavigationContainer)[0]\n\t\t\tif (element) {\n\t\t\t\telement.focus()\n\t\t\t\tlogger.debug('Focusing first element in the navigation', { element })\n\t\t\t}\n\t\t},\n\n\t\tonKeyDown(event) {\n\t\t\t// toggle the navigation on 'n' key\n\t\t\tif (event.key === 'n') {\n\t\t\t\t// If the navigation is closed, open it\n\t\t\t\tif (!this.open) {\n\t\t\t\t\tthis.toggleNavigation(true)\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\t// If the navigation is open and the focus is within the navigation, close it\n\t\t\t\tif (this.isFocusWithinNavigation()) {\n\t\t\t\t\tthis.toggleNavigation(false)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\tisFocusWithinNavigation() {\n\t\t\tconst activeElement = document.activeElement\n\t\t\treturn this.$refs.appNavigationContainer?.contains(activeElement)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n.app-navigation,\n.app-content {\n\t/* Distance of the app navigation toggle and the first navigation item to the top edge of the app content container /\n\t--app-navigation-padding: #{$app-navigation-padding};\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.app-navigation {\n\t// Set scoped variable override\n\t// Using --color-text-maxcontrast as a fallback evaluates to an invalid value as it references itself in this scope instead of the variable defined higher up\n\t--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-text-maxcontrast-default));\n\ttransition: transform var(--animation-quick), margin var(--animation-quick);\n\twidth: $navigation-width;\n\t// Left toggle button padding + toggle button + right padding from NcAppContent\n\t--app-navigation-max-width: calc(100vw - (var(--app-navigation-padding) + var(--default-clickable-area) + var(--default-grid-baseline)));\n\tmax-width: var(--app-navigation-max-width);\n\tposition: relative;\n\ttop: 0;\n\tinset-inline-start: 0;\n\tpadding: 0px;\n\t// Above NcAppContent\n\tz-index: 1800;\n\theight: 100%;\n\tbox-sizing: border-box;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\tflex-grow: 0;\n\tflex-shrink: 0;\n\tbackground-color: var(--color-main-background-blur, var(--color-main-background));\n\t-webkit-backdrop-filter: var(--filter-background-blur, none);\n\tbackdrop-filter: var(--filter-background-blur, none);\n\n\t&--close {\n\t\tmargin-inline-start: calc(-1 min($navigation-width, var(--app-navigation-max-width)));\n\t}\n\n\t&__search {\n\t\twidth: 100%;\n\t}\n\n\t&__body {\n\t\toverflow-y: scroll;\n\t}\n\n\t// For legacy purposes support passing a bare list to the content in #default slot and including #footer slot\n\t// Same styles as NcAppNavigationList\n\t&__content > ul {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--default-grid-baseline, 4px);\n\t\tpadding: var(--app-navigation-padding);\n\t}\n\n\t// Always stretch the navigation list\n\t& &__list {\n\t\theight: 100%;\n\t}\n\n\t// Stretch the main content if there is no stretched list\n\t&__body--no-list {\n\t\tflex: 1 1 auto;\n\t\toverflow: auto;\n\t\theight: 100%;\n\t}\n\n\t&__content {\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n}\n\n// Add extra border for high contrast mode\n[data-themes*=\"highcontrast\"] {\n\t.app-navigation {\n\t\tborder-inline-end: 1px solid var(--color-border);\n\t}\n}\n\n// When on mobile, we make the navigation slide over the NcAppContent\n@media only screen and (max-width: $breakpoint-mobile) {\n\t.app-navigation {\n\t\tposition: absolute;\n\t\tborder-inline-end: 1px solid var(--color-border);\n\t}\n}\n\n// Put the toggle behind NcAppSidebar on small screens\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-navigation {\n\t\tz-index: 1400;\n\t}\n}\n\n</style>\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"NcAppNavigation-BGc7ks7G.mjs","sources":["../../src/components/NcAppNavigation/NcAppNavigation.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n```vue\n<template>\n\t<div class=\"styleguide-nc-content\">\n\t\t<NcAppNavigation>\n\t\t\t<template #search>\n\t\t\t\t<NcAppNavigationSearch v-model=\"searchValue\">\n\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t<NcActions>\n\t\t\t\t\t\t\t<NcActionButton close-after-click @click=\"showModal = true\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconCogOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tApp settings (close after click)\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton @click=\"showModal = true\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconCogOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tApp settings (handle only click)\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t</template>\n\t\t\t\t</NcAppNavigationSearch>\n\t\t\t</template>\n\t\t\t<template #list>\n\t\t\t\t<NcAppNavigationItem v-for=\"item in items\" :key=\"item\" :name=\"item\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCheck :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcAppNavigationItem>\n\t\t\t</template>\n\t\t\t<template #footer>\n\t\t\t\t<div class=\"navigation__footer\">\n\t\t\t\t\t<NcButton wide @click=\"showModal = true\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconCogOutline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tApp settings\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcModal v-if=\"showModal\" name=\"Modal for focus-trap check\" @close=\"showModal = false\">\n\t\t\t\t\t\t<div class=\"modal-content\">\n\t\t\t\t\t\t\t<h4>Focus-trap should be locked inside the modal</h4>\n\t\t\t\t\t\t\t<NcTextField :value.sync=\"modalValue\" label=\"Focus me\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</NcModal>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</NcAppNavigation>\n\t</div>\n</template>\n\n<script>\n\timport IconCheck from 'vue-material-design-icons/Check.vue'\n\timport IconCogOutline from 'vue-material-design-icons/CogOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconCheck,\n\t\t\tIconCogOutline,\n\t\t},\n\t\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:setHasAppNavigation': () => {},\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\titems: Array.from({ length: 5 }, (v, i) => `Item ${i+1}`),\n\t\t\t\tsearchValue: '',\n\t\t\t\tmodalValue: '',\n\t\t\t\tshowModal: false,\n\t\t\t}\n\t\t},\n\t}\n</script>\n\n<style scoped>\n\t/* Mock NcContent /\n\t.styleguide-nc-content {\n\t\tposition: relative;\n\t\theight: 300px;\n\t\tbackground-color: var(--color-background-plain);\n\t\toverflow: hidden;\n\t}\n\n\t.navigation__header,\n\t.navigation__footer {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\tpadding: 4px;\n\t}\n\n\t.modal-content {\n\t\theight: 120px;\n\t\tpadding: 10px;\n\t}\n</style>\n```\n\nThe navigation bar can be open and closed from anywhere in the app using the\nnextcloud event bus.\n\n### Install the event bus package\n\n```bash\nnpm i -S @nextcloud/event-bus\n```\n\n### Usage\n\n#### Open the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: true,\n})\n```\n\n#### Close the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: false,\n})\n```\n\n</docs>\n\n<template>\n\t<div\n\t\tref=\"appNavigationContainer\"\n\t\tclass=\"app-navigation\"\n\t\t:class=\"{ 'app-navigation--close': !open }\">\n\t\t<nav\n\t\t\tid=\"app-navigation-vue\"\n\t\t\t:aria-hidden=\"open ? 'false' : 'true'\"\n\t\t\t:aria-label=\"ariaLabel \|\| undefined\"\n\t\t\t:aria-labelledby=\"ariaLabelledby \|\| undefined\"\n\t\t\tclass=\"app-navigation__content\"\n\t\t\t:inert=\"!open \|\| undefined\"\n\t\t\t@keydown.esc=\"handleEsc\">\n\t\t\t<div class=\"app-navigation__search\">\n\t\t\t\t<!-- @slot For in-app search you can pass a `NcAppNavigationSearch` component as the slot content. -->\n\t\t\t\t<slot name=\"search\" />\n\t\t\t</div>\n\t\t\t<div class=\"app-navigation__body\" :class=\"{ 'app-navigation__body--no-list': !$scopedSlots.list }\">\n\t\t\t\t<!-- @slot The main content of the navigation. If no list is passed to the #list slot, stretched vertically. -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\n\t\t\t<NcAppNavigationList v-if=\"$scopedSlots.list\" class=\"app-navigation__list\">\n\t\t\t\t<!-- @slot List for Navigation list items. Stretched between the main content and the footer -->\n\t\t\t\t<slot name=\"list\" />\n\t\t\t</NcAppNavigationList>\n\n\t\t\t<!-- @slot Footer for e.g. NcAppNavigationSettings -->\n\t\t\t<slot name=\"footer\" />\n\t\t</nav>\n\t\t<NcAppNavigationToggle :open=\"open\" @update:open=\"toggleNavigation\" />\n\t</div>\n</template>\n\n<script>\nimport { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { createFocusTrap } from 'focus-trap'\nimport { tabbable } from 'tabbable'\nimport Vue from 'vue'\nimport { useHotKey } from '../../composables/useHotKey/index.ts'\nimport { useIsMobile } from '../../composables/useIsMobile/index.ts'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { logger } from '../../utils/logger.ts'\nimport NcAppNavigationList from '../NcAppNavigationList/index.js'\nimport NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'\n\nexport default {\n\tname: 'NcAppNavigation',\n\n\tcomponents: {\n\t\tNcAppNavigationList,\n\t\tNcAppNavigationToggle,\n\t},\n\n\t// Injected from NcContent\n\tinject: {\n\t\tsetHasAppNavigation: {\n\t\t\tdefault: () => () => Vue.util.warn('NcAppNavigation is not mounted inside NcContent, this is probably an error.'),\n\t\t\tfrom: 'NcContent:setHasAppNavigation',\n\t\t},\n\t},\n\n\tprops: {\n\t\t/\n\t\t The aria label to describe the navigation\n\t\t /\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t aria-labelledby attribute to describe the navigation\n\t\t /\n\t\tariaLabelledby: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\topen: !this.isMobile,\n\t\t\tfocusTrap: null,\n\t\t}\n\t},\n\n\twatch: {\n\t\tisMobile() {\n\t\t\tthis.open = !this.isMobile\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\n\t\topen() {\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.setHasAppNavigation(true)\n\t\tsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\t// Emit an event with the initial state of the navigation\n\t\temit('navigation-toggled', {\n\t\t\topen: this.open,\n\t\t})\n\n\t\tthis.focusTrap = createFocusTrap(this.$refs.appNavigationContainer, {\n\t\t\tallowOutsideClick: true,\n\t\t\tfallbackFocus: this.$refs.appNavigationContainer,\n\t\t\ttrapStack: getTrapStack(),\n\t\t\tescapeDeactivates: false,\n\t\t})\n\t\tthis.toggleFocusTrap()\n\n\t\t// N opens + focuses the navigation\n\t\tuseHotKey('n', this.onKeyDown, {\n\t\t\tprevent: true,\n\t\t\tstop: true,\n\t\t})\n\t},\n\n\tunmounted() {\n\t\tthis.setHasAppNavigation(false)\n\t\tunsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\tthis.focusTrap.deactivate()\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Toggle the navigation\n\t\t \n\t\t @param {boolean} [state] set the state instead of inverting the current one\n\t\t /\n\t\tasync toggleNavigation(state) {\n\t\t\t// Early return if already in that state\n\t\t\tif (this.open === state) {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.open = (typeof state === 'undefined') ? !this.open : state\n\t\t\tconst bodyStyles = getComputedStyle(document.body)\n\t\t\tconst animationLength = parseInt(bodyStyles.getPropertyValue('--animation-quick')) \|\| 100\n\n\t\t\t// If we just opened, we focus the first element\n\t\t\tif (this.open) {\n\t\t\t\tawait this.$nextTick()\n\t\t\t\tthis.focusFirstElement()\n\t\t\t}\n\n\t\t\tsetTimeout(() => {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t// We wait for 1.5 times the animation length to give the animation time to really finish.\n\t\t\t}, 1.5 animationLength)\n\t\t},\n\n\t\ttoggleNavigationByEventBus({ open }) {\n\t\t\tthis.toggleNavigation(open)\n\t\t},\n\n\t\t/*\n\t\t Activate focus trap if it is currently needed, otherwise deactivate\n\t\t /\n\t\ttoggleFocusTrap() {\n\t\t\tif (this.isMobile && this.open) {\n\t\t\t\tthis.focusTrap.activate()\n\t\t\t} else {\n\t\t\t\tthis.focusTrap.deactivate()\n\t\t\t}\n\t\t},\n\n\t\thandleEsc() {\n\t\t\tif (this.isMobile && this.open) {\n\t\t\t\tthis.toggleNavigation(false)\n\t\t\t}\n\t\t},\n\n\t\tfocusFirstElement() {\n\t\t\tconst element = tabbable(this.$refs.appNavigationContainer)[0]\n\t\t\tif (element) {\n\t\t\t\telement.focus()\n\t\t\t\tlogger.debug('Focusing first element in the navigation', { element })\n\t\t\t}\n\t\t},\n\n\t\tonKeyDown(event) {\n\t\t\t// toggle the navigation on 'n' key\n\t\t\tif (event.key === 'n') {\n\t\t\t\t// If the navigation is closed, open it\n\t\t\t\tif (!this.open) {\n\t\t\t\t\tthis.toggleNavigation(true)\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\t// If the navigation is open and the focus is within the navigation, close it\n\t\t\t\tif (this.isFocusWithinNavigation()) {\n\t\t\t\t\tthis.toggleNavigation(false)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\tisFocusWithinNavigation() {\n\t\t\tconst activeElement = document.activeElement\n\t\t\treturn this.$refs.appNavigationContainer?.contains(activeElement)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n.app-navigation,\n.app-content {\n\t/* Distance of the app navigation toggle and the first navigation item to the top edge of the app content container /\n\t--app-navigation-padding: #{$app-navigation-padding};\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.app-navigation {\n\t// Set scoped variable override\n\t// Using --color-text-maxcontrast as a fallback evaluates to an invalid value as it references itself in this scope instead of the variable defined higher up\n\t--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-text-maxcontrast-default));\n\ttransition: transform var(--animation-quick), margin var(--animation-quick);\n\twidth: $navigation-width;\n\t// Left toggle button padding + toggle button + right padding from NcAppContent\n\t--app-navigation-max-width: calc(100vw - (var(--app-navigation-padding) + var(--default-clickable-area) + var(--default-grid-baseline)));\n\tmax-width: var(--app-navigation-max-width);\n\tposition: relative;\n\ttop: 0;\n\tinset-inline-start: 0;\n\tpadding: 0px;\n\t// Above NcAppContent\n\tz-index: 1800;\n\theight: 100%;\n\tbox-sizing: border-box;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\tflex-grow: 0;\n\tflex-shrink: 0;\n\tbackground-color: var(--color-main-background-blur, var(--color-main-background));\n\t-webkit-backdrop-filter: var(--filter-background-blur, none);\n\tbackdrop-filter: var(--filter-background-blur, none);\n\n\t&--close {\n\t\tmargin-inline-start: calc(-1 min($navigation-width, var(--app-navigation-max-width)));\n\t}\n\n\t&__search {\n\t\twidth: 100%;\n\t}\n\n\t&__body {\n\t\toverflow-y: scroll;\n\t}\n\n\t// For legacy purposes support passing a bare list to the content in #default slot and including #footer slot\n\t// Same styles as NcAppNavigationList\n\t&__content > ul {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--default-grid-baseline, 4px);\n\t\tpadding: var(--app-navigation-padding);\n\t}\n\n\t// Always stretch the navigation list\n\t& &__list {\n\t\theight: 100%;\n\t}\n\n\t// Stretch the main content if there is no stretched list\n\t&__body--no-list {\n\t\tflex: 1 1 auto;\n\t\toverflow: auto;\n\t\theight: 100%;\n\t}\n\n\t&__content {\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n}\n\n// Add extra border for high contrast mode\n[data-themes*=\"highcontrast\"] {\n\t.app-navigation {\n\t\tborder-inline-end: 1px solid var(--color-border);\n\t}\n}\n\n// When on mobile, we make the navigation slide over the NcAppContent\n@media only screen and (max-width: $breakpoint-mobile) {\n\t.app-navigation {\n\t\tposition: absolute;\n\t\tborder-inline-end: 1px solid var(--color-border);\n\t}\n}\n\n// Put the toggle behind NcAppSidebar on small screens\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-navigation {\n\t\tz-index: 1400;\n\t}\n}\n\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;AAuLA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA;AAAA,EAGA,QAAA;AAAA,IACA,qBAAA;AAAA,MACA,SAAA,MAAA,MAAA,IAAA,KAAA,KAAA,6EAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,WAAA;AAAA,MACA,UAAA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,MAAA,CAAA,KAAA;AAAA,MACA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,WAAA;AACA,WAAA,OAAA,CAAA,KAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,IAEA,OAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,oBAAA,IAAA;AACA,cAAA,qBAAA,KAAA,0BAAA;AAEA,SAAA,sBAAA;AAAA,MACA,MAAA,KAAA;AAAA,IACA,CAAA;AAEA,SAAA,YAAA,gBAAA,KAAA,MAAA,wBAAA;AAAA,MACA,mBAAA;AAAA,MACA,eAAA,KAAA,MAAA;AAAA,MACA,WAAA,aAAA;AAAA,MACA,mBAAA;AAAA,IACA,CAAA;AACA,SAAA,gBAAA;AAGA,cAAA,KAAA,KAAA,WAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA,CAAA;AAAA,EACA;AAAA,EAEA,YAAA;AACA,SAAA,oBAAA,KAAA;AACA,gBAAA,qBAAA,KAAA,0BAAA;AACA,SAAA,UAAA,WAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA,iBAAA,OAAA;AAEA,UAAA,KAAA,SAAA,OAAA;AACA,aAAA,sBAAA;AAAA,UACA,MAAA,KAAA;AAAA,QACA,CAAA;AACA;AAAA,MACA;AAEA,WAAA,OAAA,OAAA,UAAA,cAAA,CAAA,KAAA,OAAA;AACA,YAAA,aAAA,iBAAA,SAAA,IAAA;AACA,YAAA,kBAAA,SAAA,WAAA,iBAAA,mBAAA,CAAA,KAAA;AAGA,UAAA,KAAA,MAAA;AACA,cAAA,KAAA,UAAA;AACA,aAAA,kBAAA;AAAA,MACA;AAEA,iBAAA,MAAA;AACA,aAAA,sBAAA;AAAA,UACA,MAAA,KAAA;AAAA,QACA,CAAA;AAAA,MAEA,GAAA,MAAA,eAAA;AAAA,IACA;AAAA,IAEA,2BAAA,EAAA,QAAA;AACA,WAAA,iBAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AACA,UAAA,KAAA,YAAA,KAAA,MAAA;AACA,aAAA,UAAA,SAAA;AAAA,MACA,OAAA;AACA,aAAA,UAAA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,UAAA,KAAA,YAAA,KAAA,MAAA;AACA,aAAA,iBAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,YAAA,UAAA,SAAA,KAAA,MAAA,sBAAA,EAAA,CAAA;AACA,UAAA,SAAA;AACA,gBAAA,MAAA;AACA,eAAA,MAAA,4CAAA,EAAA,QAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,UAAA,OAAA;AAEA,UAAA,MAAA,QAAA,KAAA;AAEA,YAAA,CAAA,KAAA,MAAA;AACA,eAAA,iBAAA,IAAA;AACA;AAAA,QACA;AAGA,YAAA,KAAA,2BAAA;AACA,eAAA,iBAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,0BAAA;AACA,YAAA,gBAAA,SAAA;AACA,aAAA,KAAA,MAAA,wBAAA,SAAA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppNavigation-BcFTYsgM.cjs → NcAppNavigation-Ce5BoTSG.cjs} RENAMED Viewed

@@ -9,7 +9,7 @@ const Composables_useIsMobile = require("../Composables/useIsMobile.cjs");
 const focusTrap$1 = require("./focusTrap-DUTqW_IG.cjs");
 const logger = require("./logger-3HuiEIF6.cjs");
 const Components_NcAppNavigationList = require("../Components/NcAppNavigationList.cjs");
-const NcAppNavigationToggle = require("./NcAppNavigationToggle-Ck-d5mHe.cjs");
+const NcAppNavigationToggle = require("./NcAppNavigationToggle-C0Kc4R9v.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Vue__default = /* @__PURE__ */ _interopDefault(Vue);
@@ -171,4 +171,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcAppNavigation = __component__.exports;
 exports.NcAppNavigation = NcAppNavigation;
-//# sourceMappingURL=NcAppNavigation-BcFTYsgM.cjs.map
+//# sourceMappingURL=NcAppNavigation-Ce5BoTSG.cjs.map

package/dist/chunks/{NcAppNavigation-BcFTYsgM.cjs.map → NcAppNavigation-Ce5BoTSG.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcAppNavigation-BcFTYsgM.cjs","sources":["../../src/components/NcAppNavigation/NcAppNavigation.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n```vue\n<template>\n\t<div class=\"styleguide-nc-content\">\n\t\t<NcAppNavigation>\n\t\t\t<template #search>\n\t\t\t\t<NcAppNavigationSearch v-model=\"searchValue\">\n\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t<NcActions>\n\t\t\t\t\t\t\t<NcActionButton close-after-click @click=\"showModal = true\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconCogOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tApp settings (close after click)\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton @click=\"showModal = true\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconCogOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tApp settings (handle only click)\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t</template>\n\t\t\t\t</NcAppNavigationSearch>\n\t\t\t</template>\n\t\t\t<template #list>\n\t\t\t\t<NcAppNavigationItem v-for=\"item in items\" :key=\"item\" :name=\"item\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCheck :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcAppNavigationItem>\n\t\t\t</template>\n\t\t\t<template #footer>\n\t\t\t\t<div class=\"navigation__footer\">\n\t\t\t\t\t<NcButton wide @click=\"showModal = true\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconCogOutline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tApp settings\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcModal v-if=\"showModal\" name=\"Modal for focus-trap check\" @close=\"showModal = false\">\n\t\t\t\t\t\t<div class=\"modal-content\">\n\t\t\t\t\t\t\t<h4>Focus-trap should be locked inside the modal</h4>\n\t\t\t\t\t\t\t<NcTextField :value.sync=\"modalValue\" label=\"Focus me\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</NcModal>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</NcAppNavigation>\n\t</div>\n</template>\n\n<script>\n\timport IconCheck from 'vue-material-design-icons/Check.vue'\n\timport IconCogOutline from 'vue-material-design-icons/CogOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconCheck,\n\t\t\tIconCogOutline,\n\t\t},\n\t\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:setHasAppNavigation': () => {},\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\titems: Array.from({ length: 5 }, (v, i) => `Item ${i+1}`),\n\t\t\t\tsearchValue: '',\n\t\t\t\tmodalValue: '',\n\t\t\t\tshowModal: false,\n\t\t\t}\n\t\t},\n\t}\n</script>\n\n<style scoped>\n\t/* Mock NcContent /\n\t.styleguide-nc-content {\n\t\tposition: relative;\n\t\theight: 300px;\n\t\tbackground-color: var(--color-background-plain);\n\t\toverflow: hidden;\n\t}\n\n\t.navigation__header,\n\t.navigation__footer {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\tpadding: 4px;\n\t}\n\n\t.modal-content {\n\t\theight: 120px;\n\t\tpadding: 10px;\n\t}\n</style>\n```\n\nThe navigation bar can be open and closed from anywhere in the app using the\nnextcloud event bus.\n\n### Install the event bus package\n\n```bash\nnpm i -S @nextcloud/event-bus\n```\n\n### Usage\n\n#### Open the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: true,\n})\n```\n\n#### Close the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: false,\n})\n```\n\n</docs>\n\n<template>\n\t<div\n\t\tref=\"appNavigationContainer\"\n\t\tclass=\"app-navigation\"\n\t\t:class=\"{ 'app-navigation--close': !open }\">\n\t\t<nav\n\t\t\tid=\"app-navigation-vue\"\n\t\t\t:aria-hidden=\"open ? 'false' : 'true'\"\n\t\t\t:aria-label=\"ariaLabel \|\| undefined\"\n\t\t\t:aria-labelledby=\"ariaLabelledby \|\| undefined\"\n\t\t\tclass=\"app-navigation__content\"\n\t\t\t:inert=\"!open \|\| undefined\"\n\t\t\t@keydown.esc=\"handleEsc\">\n\t\t\t<div class=\"app-navigation__search\">\n\t\t\t\t<!-- @slot For in-app search you can pass a `NcAppNavigationSearch` component as the slot content. -->\n\t\t\t\t<slot name=\"search\" />\n\t\t\t</div>\n\t\t\t<div class=\"app-navigation__body\" :class=\"{ 'app-navigation__body--no-list': !$scopedSlots.list }\">\n\t\t\t\t<!-- @slot The main content of the navigation. If no list is passed to the #list slot, stretched vertically. -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\n\t\t\t<NcAppNavigationList v-if=\"$scopedSlots.list\" class=\"app-navigation__list\">\n\t\t\t\t<!-- @slot List for Navigation list items. Stretched between the main content and the footer -->\n\t\t\t\t<slot name=\"list\" />\n\t\t\t</NcAppNavigationList>\n\n\t\t\t<!-- @slot Footer for e.g. NcAppNavigationSettings -->\n\t\t\t<slot name=\"footer\" />\n\t\t</nav>\n\t\t<NcAppNavigationToggle :open=\"open\" @update:open=\"toggleNavigation\" />\n\t</div>\n</template>\n\n<script>\nimport { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { createFocusTrap } from 'focus-trap'\nimport { tabbable } from 'tabbable'\nimport Vue from 'vue'\nimport { useHotKey } from '../../composables/useHotKey/index.ts'\nimport { useIsMobile } from '../../composables/useIsMobile/index.ts'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { logger } from '../../utils/logger.ts'\nimport NcAppNavigationList from '../NcAppNavigationList/index.js'\nimport NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'\n\nexport default {\n\tname: 'NcAppNavigation',\n\n\tcomponents: {\n\t\tNcAppNavigationList,\n\t\tNcAppNavigationToggle,\n\t},\n\n\t// Injected from NcContent\n\tinject: {\n\t\tsetHasAppNavigation: {\n\t\t\tdefault: () => () => Vue.util.warn('NcAppNavigation is not mounted inside NcContent, this is probably an error.'),\n\t\t\tfrom: 'NcContent:setHasAppNavigation',\n\t\t},\n\t},\n\n\tprops: {\n\t\t/\n\t\t The aria label to describe the navigation\n\t\t /\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t aria-labelledby attribute to describe the navigation\n\t\t /\n\t\tariaLabelledby: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\topen: !this.isMobile,\n\t\t\tfocusTrap: null,\n\t\t}\n\t},\n\n\twatch: {\n\t\tisMobile() {\n\t\t\tthis.open = !this.isMobile\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\n\t\topen() {\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.setHasAppNavigation(true)\n\t\tsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\t// Emit an event with the initial state of the navigation\n\t\temit('navigation-toggled', {\n\t\t\topen: this.open,\n\t\t})\n\n\t\tthis.focusTrap = createFocusTrap(this.$refs.appNavigationContainer, {\n\t\t\tallowOutsideClick: true,\n\t\t\tfallbackFocus: this.$refs.appNavigationContainer,\n\t\t\ttrapStack: getTrapStack(),\n\t\t\tescapeDeactivates: false,\n\t\t})\n\t\tthis.toggleFocusTrap()\n\n\t\t// N opens + focuses the navigation\n\t\tuseHotKey('n', this.onKeyDown, {\n\t\t\tprevent: true,\n\t\t\tstop: true,\n\t\t})\n\t},\n\n\tunmounted() {\n\t\tthis.setHasAppNavigation(false)\n\t\tunsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\tthis.focusTrap.deactivate()\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Toggle the navigation\n\t\t \n\t\t @param {boolean} [state] set the state instead of inverting the current one\n\t\t /\n\t\tasync toggleNavigation(state) {\n\t\t\t// Early return if already in that state\n\t\t\tif (this.open === state) {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.open = (typeof state === 'undefined') ? !this.open : state\n\t\t\tconst bodyStyles = getComputedStyle(document.body)\n\t\t\tconst animationLength = parseInt(bodyStyles.getPropertyValue('--animation-quick')) \|\| 100\n\n\t\t\t// If we just opened, we focus the first element\n\t\t\tif (this.open) {\n\t\t\t\tawait this.$nextTick()\n\t\t\t\tthis.focusFirstElement()\n\t\t\t}\n\n\t\t\tsetTimeout(() => {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t// We wait for 1.5 times the animation length to give the animation time to really finish.\n\t\t\t}, 1.5 animationLength)\n\t\t},\n\n\t\ttoggleNavigationByEventBus({ open }) {\n\t\t\tthis.toggleNavigation(open)\n\t\t},\n\n\t\t/*\n\t\t Activate focus trap if it is currently needed, otherwise deactivate\n\t\t /\n\t\ttoggleFocusTrap() {\n\t\t\tif (this.isMobile && this.open) {\n\t\t\t\tthis.focusTrap.activate()\n\t\t\t} else {\n\t\t\t\tthis.focusTrap.deactivate()\n\t\t\t}\n\t\t},\n\n\t\thandleEsc() {\n\t\t\tif (this.isMobile && this.open) {\n\t\t\t\tthis.toggleNavigation(false)\n\t\t\t}\n\t\t},\n\n\t\tfocusFirstElement() {\n\t\t\tconst element = tabbable(this.$refs.appNavigationContainer)[0]\n\t\t\tif (element) {\n\t\t\t\telement.focus()\n\t\t\t\tlogger.debug('Focusing first element in the navigation', { element })\n\t\t\t}\n\t\t},\n\n\t\tonKeyDown(event) {\n\t\t\t// toggle the navigation on 'n' key\n\t\t\tif (event.key === 'n') {\n\t\t\t\t// If the navigation is closed, open it\n\t\t\t\tif (!this.open) {\n\t\t\t\t\tthis.toggleNavigation(true)\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\t// If the navigation is open and the focus is within the navigation, close it\n\t\t\t\tif (this.isFocusWithinNavigation()) {\n\t\t\t\t\tthis.toggleNavigation(false)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\tisFocusWithinNavigation() {\n\t\t\tconst activeElement = document.activeElement\n\t\t\treturn this.$refs.appNavigationContainer?.contains(activeElement)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n.app-navigation,\n.app-content {\n\t/* Distance of the app navigation toggle and the first navigation item to the top edge of the app content container /\n\t--app-navigation-padding: #{$app-navigation-padding};\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.app-navigation {\n\t// Set scoped variable override\n\t// Using --color-text-maxcontrast as a fallback evaluates to an invalid value as it references itself in this scope instead of the variable defined higher up\n\t--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-text-maxcontrast-default));\n\ttransition: transform var(--animation-quick), margin var(--animation-quick);\n\twidth: $navigation-width;\n\t// Left toggle button padding + toggle button + right padding from NcAppContent\n\t--app-navigation-max-width: calc(100vw - (var(--app-navigation-padding) + var(--default-clickable-area) + var(--default-grid-baseline)));\n\tmax-width: var(--app-navigation-max-width);\n\tposition: relative;\n\ttop: 0;\n\tinset-inline-start: 0;\n\tpadding: 0px;\n\t// Above NcAppContent\n\tz-index: 1800;\n\theight: 100%;\n\tbox-sizing: border-box;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\tflex-grow: 0;\n\tflex-shrink: 0;\n\tbackground-color: var(--color-main-background-blur, var(--color-main-background));\n\t-webkit-backdrop-filter: var(--filter-background-blur, none);\n\tbackdrop-filter: var(--filter-background-blur, none);\n\n\t&--close {\n\t\tmargin-inline-start: calc(-1 min($navigation-width, var(--app-navigation-max-width)));\n\t}\n\n\t&__search {\n\t\twidth: 100%;\n\t}\n\n\t&__body {\n\t\toverflow-y: scroll;\n\t}\n\n\t// For legacy purposes support passing a bare list to the content in #default slot and including #footer slot\n\t// Same styles as NcAppNavigationList\n\t&__content > ul {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--default-grid-baseline, 4px);\n\t\tpadding: var(--app-navigation-padding);\n\t}\n\n\t// Always stretch the navigation list\n\t& &__list {\n\t\theight: 100%;\n\t}\n\n\t// Stretch the main content if there is no stretched list\n\t&__body--no-list {\n\t\tflex: 1 1 auto;\n\t\toverflow: auto;\n\t\theight: 100%;\n\t}\n\n\t&__content {\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n}\n\n// Add extra border for high contrast mode\n[data-themes*=\"highcontrast\"] {\n\t.app-navigation {\n\t\tborder-inline-end: 1px solid var(--color-border);\n\t}\n}\n\n// When on mobile, we make the navigation slide over the NcAppContent\n@media only screen and (max-width: $breakpoint-mobile) {\n\t.app-navigation {\n\t\tposition: absolute;\n\t\tborder-inline-end: 1px solid var(--color-border);\n\t}\n}\n\n// Put the toggle behind NcAppSidebar on small screens\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-navigation {\n\t\tz-index: 1400;\n\t}\n}\n\n</style>\n"],"names":["NcAppNavigationList","NcAppNavigationToggle","Vue","useIsMobile","subscribe","emit","createFocusTrap","getTrapStack","useHotKey","unsubscribe","tabbable","logger"],"mappings":"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"}
1	+ {"version":3,"file":"NcAppNavigation-Ce5BoTSG.cjs","sources":["../../src/components/NcAppNavigation/NcAppNavigation.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n```vue\n<template>\n\t<div class=\"styleguide-nc-content\">\n\t\t<NcAppNavigation>\n\t\t\t<template #search>\n\t\t\t\t<NcAppNavigationSearch v-model=\"searchValue\">\n\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t<NcActions>\n\t\t\t\t\t\t\t<NcActionButton close-after-click @click=\"showModal = true\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconCogOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tApp settings (close after click)\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton @click=\"showModal = true\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconCogOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tApp settings (handle only click)\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t</template>\n\t\t\t\t</NcAppNavigationSearch>\n\t\t\t</template>\n\t\t\t<template #list>\n\t\t\t\t<NcAppNavigationItem v-for=\"item in items\" :key=\"item\" :name=\"item\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCheck :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcAppNavigationItem>\n\t\t\t</template>\n\t\t\t<template #footer>\n\t\t\t\t<div class=\"navigation__footer\">\n\t\t\t\t\t<NcButton wide @click=\"showModal = true\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconCogOutline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tApp settings\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcModal v-if=\"showModal\" name=\"Modal for focus-trap check\" @close=\"showModal = false\">\n\t\t\t\t\t\t<div class=\"modal-content\">\n\t\t\t\t\t\t\t<h4>Focus-trap should be locked inside the modal</h4>\n\t\t\t\t\t\t\t<NcTextField :value.sync=\"modalValue\" label=\"Focus me\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</NcModal>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</NcAppNavigation>\n\t</div>\n</template>\n\n<script>\n\timport IconCheck from 'vue-material-design-icons/Check.vue'\n\timport IconCogOutline from 'vue-material-design-icons/CogOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconCheck,\n\t\t\tIconCogOutline,\n\t\t},\n\t\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:setHasAppNavigation': () => {},\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\titems: Array.from({ length: 5 }, (v, i) => `Item ${i+1}`),\n\t\t\t\tsearchValue: '',\n\t\t\t\tmodalValue: '',\n\t\t\t\tshowModal: false,\n\t\t\t}\n\t\t},\n\t}\n</script>\n\n<style scoped>\n\t/* Mock NcContent /\n\t.styleguide-nc-content {\n\t\tposition: relative;\n\t\theight: 300px;\n\t\tbackground-color: var(--color-background-plain);\n\t\toverflow: hidden;\n\t}\n\n\t.navigation__header,\n\t.navigation__footer {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\tpadding: 4px;\n\t}\n\n\t.modal-content {\n\t\theight: 120px;\n\t\tpadding: 10px;\n\t}\n</style>\n```\n\nThe navigation bar can be open and closed from anywhere in the app using the\nnextcloud event bus.\n\n### Install the event bus package\n\n```bash\nnpm i -S @nextcloud/event-bus\n```\n\n### Usage\n\n#### Open the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: true,\n})\n```\n\n#### Close the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: false,\n})\n```\n\n</docs>\n\n<template>\n\t<div\n\t\tref=\"appNavigationContainer\"\n\t\tclass=\"app-navigation\"\n\t\t:class=\"{ 'app-navigation--close': !open }\">\n\t\t<nav\n\t\t\tid=\"app-navigation-vue\"\n\t\t\t:aria-hidden=\"open ? 'false' : 'true'\"\n\t\t\t:aria-label=\"ariaLabel \|\| undefined\"\n\t\t\t:aria-labelledby=\"ariaLabelledby \|\| undefined\"\n\t\t\tclass=\"app-navigation__content\"\n\t\t\t:inert=\"!open \|\| undefined\"\n\t\t\t@keydown.esc=\"handleEsc\">\n\t\t\t<div class=\"app-navigation__search\">\n\t\t\t\t<!-- @slot For in-app search you can pass a `NcAppNavigationSearch` component as the slot content. -->\n\t\t\t\t<slot name=\"search\" />\n\t\t\t</div>\n\t\t\t<div class=\"app-navigation__body\" :class=\"{ 'app-navigation__body--no-list': !$scopedSlots.list }\">\n\t\t\t\t<!-- @slot The main content of the navigation. If no list is passed to the #list slot, stretched vertically. -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\n\t\t\t<NcAppNavigationList v-if=\"$scopedSlots.list\" class=\"app-navigation__list\">\n\t\t\t\t<!-- @slot List for Navigation list items. Stretched between the main content and the footer -->\n\t\t\t\t<slot name=\"list\" />\n\t\t\t</NcAppNavigationList>\n\n\t\t\t<!-- @slot Footer for e.g. NcAppNavigationSettings -->\n\t\t\t<slot name=\"footer\" />\n\t\t</nav>\n\t\t<NcAppNavigationToggle :open=\"open\" @update:open=\"toggleNavigation\" />\n\t</div>\n</template>\n\n<script>\nimport { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { createFocusTrap } from 'focus-trap'\nimport { tabbable } from 'tabbable'\nimport Vue from 'vue'\nimport { useHotKey } from '../../composables/useHotKey/index.ts'\nimport { useIsMobile } from '../../composables/useIsMobile/index.ts'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { logger } from '../../utils/logger.ts'\nimport NcAppNavigationList from '../NcAppNavigationList/index.js'\nimport NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'\n\nexport default {\n\tname: 'NcAppNavigation',\n\n\tcomponents: {\n\t\tNcAppNavigationList,\n\t\tNcAppNavigationToggle,\n\t},\n\n\t// Injected from NcContent\n\tinject: {\n\t\tsetHasAppNavigation: {\n\t\t\tdefault: () => () => Vue.util.warn('NcAppNavigation is not mounted inside NcContent, this is probably an error.'),\n\t\t\tfrom: 'NcContent:setHasAppNavigation',\n\t\t},\n\t},\n\n\tprops: {\n\t\t/\n\t\t The aria label to describe the navigation\n\t\t /\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t aria-labelledby attribute to describe the navigation\n\t\t /\n\t\tariaLabelledby: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\topen: !this.isMobile,\n\t\t\tfocusTrap: null,\n\t\t}\n\t},\n\n\twatch: {\n\t\tisMobile() {\n\t\t\tthis.open = !this.isMobile\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\n\t\topen() {\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.setHasAppNavigation(true)\n\t\tsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\t// Emit an event with the initial state of the navigation\n\t\temit('navigation-toggled', {\n\t\t\topen: this.open,\n\t\t})\n\n\t\tthis.focusTrap = createFocusTrap(this.$refs.appNavigationContainer, {\n\t\t\tallowOutsideClick: true,\n\t\t\tfallbackFocus: this.$refs.appNavigationContainer,\n\t\t\ttrapStack: getTrapStack(),\n\t\t\tescapeDeactivates: false,\n\t\t})\n\t\tthis.toggleFocusTrap()\n\n\t\t// N opens + focuses the navigation\n\t\tuseHotKey('n', this.onKeyDown, {\n\t\t\tprevent: true,\n\t\t\tstop: true,\n\t\t})\n\t},\n\n\tunmounted() {\n\t\tthis.setHasAppNavigation(false)\n\t\tunsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\tthis.focusTrap.deactivate()\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Toggle the navigation\n\t\t \n\t\t @param {boolean} [state] set the state instead of inverting the current one\n\t\t /\n\t\tasync toggleNavigation(state) {\n\t\t\t// Early return if already in that state\n\t\t\tif (this.open === state) {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.open = (typeof state === 'undefined') ? !this.open : state\n\t\t\tconst bodyStyles = getComputedStyle(document.body)\n\t\t\tconst animationLength = parseInt(bodyStyles.getPropertyValue('--animation-quick')) \|\| 100\n\n\t\t\t// If we just opened, we focus the first element\n\t\t\tif (this.open) {\n\t\t\t\tawait this.$nextTick()\n\t\t\t\tthis.focusFirstElement()\n\t\t\t}\n\n\t\t\tsetTimeout(() => {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t// We wait for 1.5 times the animation length to give the animation time to really finish.\n\t\t\t}, 1.5 animationLength)\n\t\t},\n\n\t\ttoggleNavigationByEventBus({ open }) {\n\t\t\tthis.toggleNavigation(open)\n\t\t},\n\n\t\t/*\n\t\t Activate focus trap if it is currently needed, otherwise deactivate\n\t\t /\n\t\ttoggleFocusTrap() {\n\t\t\tif (this.isMobile && this.open) {\n\t\t\t\tthis.focusTrap.activate()\n\t\t\t} else {\n\t\t\t\tthis.focusTrap.deactivate()\n\t\t\t}\n\t\t},\n\n\t\thandleEsc() {\n\t\t\tif (this.isMobile && this.open) {\n\t\t\t\tthis.toggleNavigation(false)\n\t\t\t}\n\t\t},\n\n\t\tfocusFirstElement() {\n\t\t\tconst element = tabbable(this.$refs.appNavigationContainer)[0]\n\t\t\tif (element) {\n\t\t\t\telement.focus()\n\t\t\t\tlogger.debug('Focusing first element in the navigation', { element })\n\t\t\t}\n\t\t},\n\n\t\tonKeyDown(event) {\n\t\t\t// toggle the navigation on 'n' key\n\t\t\tif (event.key === 'n') {\n\t\t\t\t// If the navigation is closed, open it\n\t\t\t\tif (!this.open) {\n\t\t\t\t\tthis.toggleNavigation(true)\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\t// If the navigation is open and the focus is within the navigation, close it\n\t\t\t\tif (this.isFocusWithinNavigation()) {\n\t\t\t\t\tthis.toggleNavigation(false)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\tisFocusWithinNavigation() {\n\t\t\tconst activeElement = document.activeElement\n\t\t\treturn this.$refs.appNavigationContainer?.contains(activeElement)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n.app-navigation,\n.app-content {\n\t/* Distance of the app navigation toggle and the first navigation item to the top edge of the app content container /\n\t--app-navigation-padding: #{$app-navigation-padding};\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.app-navigation {\n\t// Set scoped variable override\n\t// Using --color-text-maxcontrast as a fallback evaluates to an invalid value as it references itself in this scope instead of the variable defined higher up\n\t--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-text-maxcontrast-default));\n\ttransition: transform var(--animation-quick), margin var(--animation-quick);\n\twidth: $navigation-width;\n\t// Left toggle button padding + toggle button + right padding from NcAppContent\n\t--app-navigation-max-width: calc(100vw - (var(--app-navigation-padding) + var(--default-clickable-area) + var(--default-grid-baseline)));\n\tmax-width: var(--app-navigation-max-width);\n\tposition: relative;\n\ttop: 0;\n\tinset-inline-start: 0;\n\tpadding: 0px;\n\t// Above NcAppContent\n\tz-index: 1800;\n\theight: 100%;\n\tbox-sizing: border-box;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\tflex-grow: 0;\n\tflex-shrink: 0;\n\tbackground-color: var(--color-main-background-blur, var(--color-main-background));\n\t-webkit-backdrop-filter: var(--filter-background-blur, none);\n\tbackdrop-filter: var(--filter-background-blur, none);\n\n\t&--close {\n\t\tmargin-inline-start: calc(-1 min($navigation-width, var(--app-navigation-max-width)));\n\t}\n\n\t&__search {\n\t\twidth: 100%;\n\t}\n\n\t&__body {\n\t\toverflow-y: scroll;\n\t}\n\n\t// For legacy purposes support passing a bare list to the content in #default slot and including #footer slot\n\t// Same styles as NcAppNavigationList\n\t&__content > ul {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--default-grid-baseline, 4px);\n\t\tpadding: var(--app-navigation-padding);\n\t}\n\n\t// Always stretch the navigation list\n\t& &__list {\n\t\theight: 100%;\n\t}\n\n\t// Stretch the main content if there is no stretched list\n\t&__body--no-list {\n\t\tflex: 1 1 auto;\n\t\toverflow: auto;\n\t\theight: 100%;\n\t}\n\n\t&__content {\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n}\n\n// Add extra border for high contrast mode\n[data-themes*=\"highcontrast\"] {\n\t.app-navigation {\n\t\tborder-inline-end: 1px solid var(--color-border);\n\t}\n}\n\n// When on mobile, we make the navigation slide over the NcAppContent\n@media only screen and (max-width: $breakpoint-mobile) {\n\t.app-navigation {\n\t\tposition: absolute;\n\t\tborder-inline-end: 1px solid var(--color-border);\n\t}\n}\n\n// Put the toggle behind NcAppSidebar on small screens\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-navigation {\n\t\tz-index: 1400;\n\t}\n}\n\n</style>\n"],"names":["NcAppNavigationList","NcAppNavigationToggle","Vue","useIsMobile","subscribe","emit","createFocusTrap","getTrapStack","useHotKey","unsubscribe","tabbable","logger"],"mappings":"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"}

package/dist/chunks/{NcAppNavigationCaption-1-KiRt-N.cjs → NcAppNavigationCaption-C8SUVqGR.cjs} RENAMED Viewed

@@ -1,6 +1,6 @@
 require('../assets/NcAppNavigationCaption-C7GtQb_y.css');
 "use strict";
-const NcActions = require("./NcActions-S-0Ec5lH.cjs");
+const NcActions = require("./NcActions-DhEGso92.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const _sfc_main = {
   name: "NcAppNavigationCaption",
@@ -77,4 +77,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcAppNavigationCaption = __component__.exports;
 exports.NcAppNavigationCaption = NcAppNavigationCaption;
-//# sourceMappingURL=NcAppNavigationCaption-1-KiRt-N.cjs.map
+//# sourceMappingURL=NcAppNavigationCaption-C8SUVqGR.cjs.map

package/dist/chunks/{NcAppNavigationCaption-1-KiRt-N.cjs.map → NcAppNavigationCaption-C8SUVqGR.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcAppNavigationCaption-~~1-KiRt-N~~.cjs","sources":["../../src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Basic usage\n\n```vue\n\t<template>\n\t\t<div class=\"styleguide-nc-content\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationCaption\n\t\t\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tThis is an action\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationCaption>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t</div>\n\t</template>\n\t<script>\n\timport IconPlus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconPlus,\n\t\t},\n\t}\n\t</script>\n\t<style scoped>\n\t\t/* Mock NcContent /\n\t\t.styleguide-nc-content {\n\t\t\tbackground-color: var(--color-background-plain);\n\t\t\toverflow: hidden;\n\t\t}\n\t</style>\n```\n\n### Element with a slot for custom actions icon\n```vue\n\t<template>\n\t\t<div class=\"styleguide-nc-content\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationCaption\n\t\t\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t\t\t<template #actionsTriggerIcon>\n\t\t\t\t\t\t\t<IconPlus slot=\"icon\" :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconPencil :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tRename\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconDelete :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tDelete\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconArrowRight :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tValidate\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconDownload :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tDownload\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationCaption>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t</div>\n\t</template>\n\t<script>\n\t\timport IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'\n\t\timport IconDelete from 'vue-material-design-icons/Delete.vue'\n\t\timport IconDownload from 'vue-material-design-icons/Download.vue'\n\t\timport IconPencil from 'vue-material-design-icons/Pencil.vue'\n\t\timport IconPlus from 'vue-material-design-icons/Plus.vue'\n\n\t\texport default {\n\t\t\tcomponents: {\n\t\t\t\tIconArrowRight,\n\t\t\t\tIconDelete,\n\t\t\t\tIconDownload,\n\t\t\t\tIconPencil,\n\t\t\t\tIconPlus,\n\t\t\t}\n\t\t}\n\t</script>\n\t<style scoped>\n\t\t/ Mock NcContent /\n\t\t.styleguide-nc-content {\n\t\t\tbackground-color: var(--color-background-plain);\n\t\t\toverflow: hidden;\n\t\t}\n\t</style>\n```\n\n### Element used as a heading\n```vue\n\t<template>\n\t\t<div class=\"styleguide-nc-content\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<!-- if you need multiple lists you can use it in the default slot like this: -->\n\t\t\t\t<NcAppNavigationCaption heading-id=\"people-heading\"\n\t\t\t\t\tis-heading\n\t\t\t\t\tname=\"People\" />\n\t\t\t\t<NcAppNavigationList aria-labelledby=\"people-heading\">\n\t\t\t\t\t<NcAppNavigationItem name=\"Emma\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Jane\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Jake\" />\n\t\t\t\t</NcAppNavigationList>\n\t\t\t\t<NcAppNavigationCaption heading-id=\"places-heading\"\n\t\t\t\t\tis-heading\n\t\t\t\t\tname=\"Places\" />\n\t\t\t\t<NcAppNavigationList aria-labelledby=\"places-heading\">\n\t\t\t\t\t<NcAppNavigationItem name=\"America\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Australia\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Europe\" />\n\t\t\t\t</NcAppNavigationList>\n\t\t\t</NcAppNavigation>\n\t\t</div>\n\t</template>\n\t<style scoped>\n\t\t/ Mock NcContent /\n\t\t.styleguide-nc-content {\n\t\t\tbackground-color: var(--color-background-plain);\n\t\t\toverflow: hidden;\n\t\t}\n\t</style>\n```\n\n</docs>\n\n<template>\n\t<component\n\t\t:is=\"wrapperTag\"\n\t\tclass=\"app-navigation-caption\"\n\t\t:class=\"{ 'app-navigation-caption--heading': isHeading }\">\n\t\t<!-- Name of the caption -->\n\t\t<component\n\t\t\t:is=\"captionTag\"\n\t\t\t:id=\"headingId\"\n\t\t\tclass=\"app-navigation-caption__name\">\n\t\t\t{{ name }}\n\t\t</component>\n\n\t\t<!-- Actions -->\n\t\t<div\n\t\t\tv-if=\"hasActions\"\n\t\t\tclass=\"app-navigation-caption__actions\">\n\t\t\t<NcActions\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\tv-on=\"$listeners\">\n\t\t\t\t<!-- @slot Slot for the actions menu -->\n\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"actionsTriggerIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcActions>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\n\nexport default {\n\tname: 'NcAppNavigationCaption',\n\n\tcomponents: {\n\t\tNcActions,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/\n\t\t The text of the caption\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 `id` to set on the inner caption\n\t\t * Can be used for connecting the `NcActionCaption` with `NcActionList` using `aria-labelledby`.\n\t\t /\n\t\theadingId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Enable when used as a heading\n\t\t * e.g. Before NcAppNavigationList\n\t\t /\n\t\tisHeading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t If `isHeading` is set, this defines the heading level that should be used\n\t\t /\n\t\theadingLevel: {\n\t\t\ttype: Number,\n\t\t\tdefault: 2,\n\t\t},\n\n\t\t/\n\t\t Any [NcActions](#/Components/NcActions?id=ncactions-1) prop\n\t\t /\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\t},\n\n\tcomputed: {\n\t\twrapperTag() {\n\t\t\treturn this.isHeading ? 'div' : 'li'\n\t\t},\n\n\t\tcaptionTag() {\n\t\t\t// Limit to at least h2 as h1 is considered invalid and reserved\n\t\t\tconst headingLevel = Math.max(2, this.headingLevel)\n\t\t\treturn this.isHeading ? `h${headingLevel}` : 'span'\n\t\t},\n\n\t\t// Check if the actions slot is populated\n\t\thasActions() {\n\t\t\treturn !!this.$slots.actions\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.app-navigation-caption {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\n\t&--heading {\n\t\tpadding: var(--app-navigation-padding);\n\t\t&:not(:first-child):not(:last-child) {\n\t\t\tpadding: 0 var(--app-navigation-padding);\n\t\t}\n\t}\n\n\t&__name {\n\t\tfont-weight: bold;\n\t\tcolor: var(--color-main-text);\n\t\tfont-size: var(--default-font-size);\n\t\tline-height: var(--default-clickable-area);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tbox-shadow: none !important;\n\t\tflex-shrink: 1;\n\t\t// padding to align the name with the icon of app navigation items\n\t\tpadding-block: 0;\n\t\tpadding-inline: calc(var(--default-grid-baseline, 4px) 2) 0;\n\t\tmargin-top: 0px;\n\t\tmargin-bottom: var(--default-grid-baseline);\n\t}\n\n\t&__actions {\n\t\tflex: 0 0 var(--default-clickable-area);\n\t}\n}\n\n// extra top space if it's not the first item on the list\n.app-navigation-caption:not(:first-child) {\n\tmargin-top: calc(var(--default-clickable-area) / 2);\n}\n</style>\n"],"names":["NcActions"],"mappings":";;;AAuLA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAA,UAAAA;AAAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,KAAA,CAAA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,YAAA,QAAA;AAAA,IACA;AAAA,IAEA,aAAA;AAEA,YAAA,eAAA,KAAA,IAAA,GAAA,KAAA,YAAA;AACA,aAAA,KAAA,YAAA,IAAA,YAAA,KAAA;AAAA,IACA;AAAA;AAAA,IAGA,aAAA;AACA,aAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcAppNavigationCaption-C8SUVqGR.cjs","sources":["../../src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Basic usage\n\n```vue\n\t<template>\n\t\t<div class=\"styleguide-nc-content\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationCaption\n\t\t\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tThis is an action\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationCaption>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t</div>\n\t</template>\n\t<script>\n\timport IconPlus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconPlus,\n\t\t},\n\t}\n\t</script>\n\t<style scoped>\n\t\t/* Mock NcContent /\n\t\t.styleguide-nc-content {\n\t\t\tbackground-color: var(--color-background-plain);\n\t\t\toverflow: hidden;\n\t\t}\n\t</style>\n```\n\n### Element with a slot for custom actions icon\n```vue\n\t<template>\n\t\t<div class=\"styleguide-nc-content\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationCaption\n\t\t\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t\t\t<template #actionsTriggerIcon>\n\t\t\t\t\t\t\t<IconPlus slot=\"icon\" :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconPencil :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tRename\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconDelete :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tDelete\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconArrowRight :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tValidate\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconDownload :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tDownload\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationCaption>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t</div>\n\t</template>\n\t<script>\n\t\timport IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'\n\t\timport IconDelete from 'vue-material-design-icons/Delete.vue'\n\t\timport IconDownload from 'vue-material-design-icons/Download.vue'\n\t\timport IconPencil from 'vue-material-design-icons/Pencil.vue'\n\t\timport IconPlus from 'vue-material-design-icons/Plus.vue'\n\n\t\texport default {\n\t\t\tcomponents: {\n\t\t\t\tIconArrowRight,\n\t\t\t\tIconDelete,\n\t\t\t\tIconDownload,\n\t\t\t\tIconPencil,\n\t\t\t\tIconPlus,\n\t\t\t}\n\t\t}\n\t</script>\n\t<style scoped>\n\t\t/ Mock NcContent /\n\t\t.styleguide-nc-content {\n\t\t\tbackground-color: var(--color-background-plain);\n\t\t\toverflow: hidden;\n\t\t}\n\t</style>\n```\n\n### Element used as a heading\n```vue\n\t<template>\n\t\t<div class=\"styleguide-nc-content\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<!-- if you need multiple lists you can use it in the default slot like this: -->\n\t\t\t\t<NcAppNavigationCaption heading-id=\"people-heading\"\n\t\t\t\t\tis-heading\n\t\t\t\t\tname=\"People\" />\n\t\t\t\t<NcAppNavigationList aria-labelledby=\"people-heading\">\n\t\t\t\t\t<NcAppNavigationItem name=\"Emma\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Jane\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Jake\" />\n\t\t\t\t</NcAppNavigationList>\n\t\t\t\t<NcAppNavigationCaption heading-id=\"places-heading\"\n\t\t\t\t\tis-heading\n\t\t\t\t\tname=\"Places\" />\n\t\t\t\t<NcAppNavigationList aria-labelledby=\"places-heading\">\n\t\t\t\t\t<NcAppNavigationItem name=\"America\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Australia\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Europe\" />\n\t\t\t\t</NcAppNavigationList>\n\t\t\t</NcAppNavigation>\n\t\t</div>\n\t</template>\n\t<style scoped>\n\t\t/ Mock NcContent /\n\t\t.styleguide-nc-content {\n\t\t\tbackground-color: var(--color-background-plain);\n\t\t\toverflow: hidden;\n\t\t}\n\t</style>\n```\n\n</docs>\n\n<template>\n\t<component\n\t\t:is=\"wrapperTag\"\n\t\tclass=\"app-navigation-caption\"\n\t\t:class=\"{ 'app-navigation-caption--heading': isHeading }\">\n\t\t<!-- Name of the caption -->\n\t\t<component\n\t\t\t:is=\"captionTag\"\n\t\t\t:id=\"headingId\"\n\t\t\tclass=\"app-navigation-caption__name\">\n\t\t\t{{ name }}\n\t\t</component>\n\n\t\t<!-- Actions -->\n\t\t<div\n\t\t\tv-if=\"hasActions\"\n\t\t\tclass=\"app-navigation-caption__actions\">\n\t\t\t<NcActions\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\tv-on=\"$listeners\">\n\t\t\t\t<!-- @slot Slot for the actions menu -->\n\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"actionsTriggerIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcActions>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\n\nexport default {\n\tname: 'NcAppNavigationCaption',\n\n\tcomponents: {\n\t\tNcActions,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/\n\t\t The text of the caption\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 `id` to set on the inner caption\n\t\t * Can be used for connecting the `NcActionCaption` with `NcActionList` using `aria-labelledby`.\n\t\t /\n\t\theadingId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Enable when used as a heading\n\t\t * e.g. Before NcAppNavigationList\n\t\t /\n\t\tisHeading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t If `isHeading` is set, this defines the heading level that should be used\n\t\t /\n\t\theadingLevel: {\n\t\t\ttype: Number,\n\t\t\tdefault: 2,\n\t\t},\n\n\t\t/\n\t\t Any [NcActions](#/Components/NcActions?id=ncactions-1) prop\n\t\t /\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\t},\n\n\tcomputed: {\n\t\twrapperTag() {\n\t\t\treturn this.isHeading ? 'div' : 'li'\n\t\t},\n\n\t\tcaptionTag() {\n\t\t\t// Limit to at least h2 as h1 is considered invalid and reserved\n\t\t\tconst headingLevel = Math.max(2, this.headingLevel)\n\t\t\treturn this.isHeading ? `h${headingLevel}` : 'span'\n\t\t},\n\n\t\t// Check if the actions slot is populated\n\t\thasActions() {\n\t\t\treturn !!this.$slots.actions\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.app-navigation-caption {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\n\t&--heading {\n\t\tpadding: var(--app-navigation-padding);\n\t\t&:not(:first-child):not(:last-child) {\n\t\t\tpadding: 0 var(--app-navigation-padding);\n\t\t}\n\t}\n\n\t&__name {\n\t\tfont-weight: bold;\n\t\tcolor: var(--color-main-text);\n\t\tfont-size: var(--default-font-size);\n\t\tline-height: var(--default-clickable-area);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tbox-shadow: none !important;\n\t\tflex-shrink: 1;\n\t\t// padding to align the name with the icon of app navigation items\n\t\tpadding-block: 0;\n\t\tpadding-inline: calc(var(--default-grid-baseline, 4px) 2) 0;\n\t\tmargin-top: 0px;\n\t\tmargin-bottom: var(--default-grid-baseline);\n\t}\n\n\t&__actions {\n\t\tflex: 0 0 var(--default-clickable-area);\n\t}\n}\n\n// extra top space if it's not the first item on the list\n.app-navigation-caption:not(:first-child) {\n\tmargin-top: calc(var(--default-clickable-area) / 2);\n}\n</style>\n"],"names":["NcActions"],"mappings":";;;AAuLA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAA,UAAAA;AAAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,KAAA,CAAA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,YAAA,QAAA;AAAA,IACA;AAAA,IAEA,aAAA;AAEA,YAAA,eAAA,KAAA,IAAA,GAAA,KAAA,YAAA;AACA,aAAA,KAAA,YAAA,IAAA,YAAA,KAAA;AAAA,IACA;AAAA;AAAA,IAGA,aAAA;AACA,aAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppNavigationCaption-D7mH8K7B.mjs → NcAppNavigationCaption-oRJEZSTQ.mjs} RENAMED Viewed

@@ -1,5 +1,5 @@
 import '../assets/NcAppNavigationCaption-C7GtQb_y.css';
-import { N as NcActions } from "./NcActions-C-CwY6XQ.mjs";
+import { N as NcActions } from "./NcActions-DXfOYf3w.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const _sfc_main = {
   name: "NcAppNavigationCaption",
@@ -78,4 +78,4 @@ const NcAppNavigationCaption = __component__.exports;
 export {
   NcAppNavigationCaption as N
 };
-//# sourceMappingURL=NcAppNavigationCaption-D7mH8K7B.mjs.map
+//# sourceMappingURL=NcAppNavigationCaption-oRJEZSTQ.mjs.map

package/dist/chunks/{NcAppNavigationCaption-D7mH8K7B.mjs.map → NcAppNavigationCaption-oRJEZSTQ.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcAppNavigationCaption-~~D7mH8K7B~~.mjs","sources":["../../src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Basic usage\n\n```vue\n\t<template>\n\t\t<div class=\"styleguide-nc-content\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationCaption\n\t\t\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tThis is an action\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationCaption>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t</div>\n\t</template>\n\t<script>\n\timport IconPlus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconPlus,\n\t\t},\n\t}\n\t</script>\n\t<style scoped>\n\t\t/* Mock NcContent /\n\t\t.styleguide-nc-content {\n\t\t\tbackground-color: var(--color-background-plain);\n\t\t\toverflow: hidden;\n\t\t}\n\t</style>\n```\n\n### Element with a slot for custom actions icon\n```vue\n\t<template>\n\t\t<div class=\"styleguide-nc-content\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationCaption\n\t\t\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t\t\t<template #actionsTriggerIcon>\n\t\t\t\t\t\t\t<IconPlus slot=\"icon\" :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconPencil :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tRename\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconDelete :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tDelete\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconArrowRight :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tValidate\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconDownload :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tDownload\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationCaption>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t</div>\n\t</template>\n\t<script>\n\t\timport IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'\n\t\timport IconDelete from 'vue-material-design-icons/Delete.vue'\n\t\timport IconDownload from 'vue-material-design-icons/Download.vue'\n\t\timport IconPencil from 'vue-material-design-icons/Pencil.vue'\n\t\timport IconPlus from 'vue-material-design-icons/Plus.vue'\n\n\t\texport default {\n\t\t\tcomponents: {\n\t\t\t\tIconArrowRight,\n\t\t\t\tIconDelete,\n\t\t\t\tIconDownload,\n\t\t\t\tIconPencil,\n\t\t\t\tIconPlus,\n\t\t\t}\n\t\t}\n\t</script>\n\t<style scoped>\n\t\t/ Mock NcContent /\n\t\t.styleguide-nc-content {\n\t\t\tbackground-color: var(--color-background-plain);\n\t\t\toverflow: hidden;\n\t\t}\n\t</style>\n```\n\n### Element used as a heading\n```vue\n\t<template>\n\t\t<div class=\"styleguide-nc-content\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<!-- if you need multiple lists you can use it in the default slot like this: -->\n\t\t\t\t<NcAppNavigationCaption heading-id=\"people-heading\"\n\t\t\t\t\tis-heading\n\t\t\t\t\tname=\"People\" />\n\t\t\t\t<NcAppNavigationList aria-labelledby=\"people-heading\">\n\t\t\t\t\t<NcAppNavigationItem name=\"Emma\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Jane\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Jake\" />\n\t\t\t\t</NcAppNavigationList>\n\t\t\t\t<NcAppNavigationCaption heading-id=\"places-heading\"\n\t\t\t\t\tis-heading\n\t\t\t\t\tname=\"Places\" />\n\t\t\t\t<NcAppNavigationList aria-labelledby=\"places-heading\">\n\t\t\t\t\t<NcAppNavigationItem name=\"America\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Australia\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Europe\" />\n\t\t\t\t</NcAppNavigationList>\n\t\t\t</NcAppNavigation>\n\t\t</div>\n\t</template>\n\t<style scoped>\n\t\t/ Mock NcContent /\n\t\t.styleguide-nc-content {\n\t\t\tbackground-color: var(--color-background-plain);\n\t\t\toverflow: hidden;\n\t\t}\n\t</style>\n```\n\n</docs>\n\n<template>\n\t<component\n\t\t:is=\"wrapperTag\"\n\t\tclass=\"app-navigation-caption\"\n\t\t:class=\"{ 'app-navigation-caption--heading': isHeading }\">\n\t\t<!-- Name of the caption -->\n\t\t<component\n\t\t\t:is=\"captionTag\"\n\t\t\t:id=\"headingId\"\n\t\t\tclass=\"app-navigation-caption__name\">\n\t\t\t{{ name }}\n\t\t</component>\n\n\t\t<!-- Actions -->\n\t\t<div\n\t\t\tv-if=\"hasActions\"\n\t\t\tclass=\"app-navigation-caption__actions\">\n\t\t\t<NcActions\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\tv-on=\"$listeners\">\n\t\t\t\t<!-- @slot Slot for the actions menu -->\n\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"actionsTriggerIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcActions>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\n\nexport default {\n\tname: 'NcAppNavigationCaption',\n\n\tcomponents: {\n\t\tNcActions,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/\n\t\t The text of the caption\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 `id` to set on the inner caption\n\t\t * Can be used for connecting the `NcActionCaption` with `NcActionList` using `aria-labelledby`.\n\t\t /\n\t\theadingId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Enable when used as a heading\n\t\t * e.g. Before NcAppNavigationList\n\t\t /\n\t\tisHeading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t If `isHeading` is set, this defines the heading level that should be used\n\t\t /\n\t\theadingLevel: {\n\t\t\ttype: Number,\n\t\t\tdefault: 2,\n\t\t},\n\n\t\t/\n\t\t Any [NcActions](#/Components/NcActions?id=ncactions-1) prop\n\t\t /\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\t},\n\n\tcomputed: {\n\t\twrapperTag() {\n\t\t\treturn this.isHeading ? 'div' : 'li'\n\t\t},\n\n\t\tcaptionTag() {\n\t\t\t// Limit to at least h2 as h1 is considered invalid and reserved\n\t\t\tconst headingLevel = Math.max(2, this.headingLevel)\n\t\t\treturn this.isHeading ? `h${headingLevel}` : 'span'\n\t\t},\n\n\t\t// Check if the actions slot is populated\n\t\thasActions() {\n\t\t\treturn !!this.$slots.actions\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.app-navigation-caption {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\n\t&--heading {\n\t\tpadding: var(--app-navigation-padding);\n\t\t&:not(:first-child):not(:last-child) {\n\t\t\tpadding: 0 var(--app-navigation-padding);\n\t\t}\n\t}\n\n\t&__name {\n\t\tfont-weight: bold;\n\t\tcolor: var(--color-main-text);\n\t\tfont-size: var(--default-font-size);\n\t\tline-height: var(--default-clickable-area);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tbox-shadow: none !important;\n\t\tflex-shrink: 1;\n\t\t// padding to align the name with the icon of app navigation items\n\t\tpadding-block: 0;\n\t\tpadding-inline: calc(var(--default-grid-baseline, 4px) 2) 0;\n\t\tmargin-top: 0px;\n\t\tmargin-bottom: var(--default-grid-baseline);\n\t}\n\n\t&__actions {\n\t\tflex: 0 0 var(--default-clickable-area);\n\t}\n}\n\n// extra top space if it's not the first item on the list\n.app-navigation-caption:not(:first-child) {\n\tmargin-top: calc(var(--default-clickable-area) / 2);\n}\n</style>\n"],"names":[],"mappings":";;AAuLA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,KAAA,CAAA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,YAAA,QAAA;AAAA,IACA;AAAA,IAEA,aAAA;AAEA,YAAA,eAAA,KAAA,IAAA,GAAA,KAAA,YAAA;AACA,aAAA,KAAA,YAAA,IAAA,YAAA,KAAA;AAAA,IACA;AAAA;AAAA,IAGA,aAAA;AACA,aAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcAppNavigationCaption-oRJEZSTQ.mjs","sources":["../../src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Basic usage\n\n```vue\n\t<template>\n\t\t<div class=\"styleguide-nc-content\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationCaption\n\t\t\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tThis is an action\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationCaption>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t</div>\n\t</template>\n\t<script>\n\timport IconPlus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconPlus,\n\t\t},\n\t}\n\t</script>\n\t<style scoped>\n\t\t/* Mock NcContent /\n\t\t.styleguide-nc-content {\n\t\t\tbackground-color: var(--color-background-plain);\n\t\t\toverflow: hidden;\n\t\t}\n\t</style>\n```\n\n### Element with a slot for custom actions icon\n```vue\n\t<template>\n\t\t<div class=\"styleguide-nc-content\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationCaption\n\t\t\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t\t\t<template #actionsTriggerIcon>\n\t\t\t\t\t\t\t<IconPlus slot=\"icon\" :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconPencil :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tRename\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconDelete :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tDelete\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconArrowRight :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tValidate\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconDownload :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tDownload\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationCaption>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t</div>\n\t</template>\n\t<script>\n\t\timport IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'\n\t\timport IconDelete from 'vue-material-design-icons/Delete.vue'\n\t\timport IconDownload from 'vue-material-design-icons/Download.vue'\n\t\timport IconPencil from 'vue-material-design-icons/Pencil.vue'\n\t\timport IconPlus from 'vue-material-design-icons/Plus.vue'\n\n\t\texport default {\n\t\t\tcomponents: {\n\t\t\t\tIconArrowRight,\n\t\t\t\tIconDelete,\n\t\t\t\tIconDownload,\n\t\t\t\tIconPencil,\n\t\t\t\tIconPlus,\n\t\t\t}\n\t\t}\n\t</script>\n\t<style scoped>\n\t\t/ Mock NcContent /\n\t\t.styleguide-nc-content {\n\t\t\tbackground-color: var(--color-background-plain);\n\t\t\toverflow: hidden;\n\t\t}\n\t</style>\n```\n\n### Element used as a heading\n```vue\n\t<template>\n\t\t<div class=\"styleguide-nc-content\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<!-- if you need multiple lists you can use it in the default slot like this: -->\n\t\t\t\t<NcAppNavigationCaption heading-id=\"people-heading\"\n\t\t\t\t\tis-heading\n\t\t\t\t\tname=\"People\" />\n\t\t\t\t<NcAppNavigationList aria-labelledby=\"people-heading\">\n\t\t\t\t\t<NcAppNavigationItem name=\"Emma\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Jane\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Jake\" />\n\t\t\t\t</NcAppNavigationList>\n\t\t\t\t<NcAppNavigationCaption heading-id=\"places-heading\"\n\t\t\t\t\tis-heading\n\t\t\t\t\tname=\"Places\" />\n\t\t\t\t<NcAppNavigationList aria-labelledby=\"places-heading\">\n\t\t\t\t\t<NcAppNavigationItem name=\"America\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Australia\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Europe\" />\n\t\t\t\t</NcAppNavigationList>\n\t\t\t</NcAppNavigation>\n\t\t</div>\n\t</template>\n\t<style scoped>\n\t\t/ Mock NcContent /\n\t\t.styleguide-nc-content {\n\t\t\tbackground-color: var(--color-background-plain);\n\t\t\toverflow: hidden;\n\t\t}\n\t</style>\n```\n\n</docs>\n\n<template>\n\t<component\n\t\t:is=\"wrapperTag\"\n\t\tclass=\"app-navigation-caption\"\n\t\t:class=\"{ 'app-navigation-caption--heading': isHeading }\">\n\t\t<!-- Name of the caption -->\n\t\t<component\n\t\t\t:is=\"captionTag\"\n\t\t\t:id=\"headingId\"\n\t\t\tclass=\"app-navigation-caption__name\">\n\t\t\t{{ name }}\n\t\t</component>\n\n\t\t<!-- Actions -->\n\t\t<div\n\t\t\tv-if=\"hasActions\"\n\t\t\tclass=\"app-navigation-caption__actions\">\n\t\t\t<NcActions\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\tv-on=\"$listeners\">\n\t\t\t\t<!-- @slot Slot for the actions menu -->\n\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"actionsTriggerIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcActions>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\n\nexport default {\n\tname: 'NcAppNavigationCaption',\n\n\tcomponents: {\n\t\tNcActions,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/\n\t\t The text of the caption\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 `id` to set on the inner caption\n\t\t * Can be used for connecting the `NcActionCaption` with `NcActionList` using `aria-labelledby`.\n\t\t /\n\t\theadingId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Enable when used as a heading\n\t\t * e.g. Before NcAppNavigationList\n\t\t /\n\t\tisHeading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t If `isHeading` is set, this defines the heading level that should be used\n\t\t /\n\t\theadingLevel: {\n\t\t\ttype: Number,\n\t\t\tdefault: 2,\n\t\t},\n\n\t\t/\n\t\t Any [NcActions](#/Components/NcActions?id=ncactions-1) prop\n\t\t /\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\t},\n\n\tcomputed: {\n\t\twrapperTag() {\n\t\t\treturn this.isHeading ? 'div' : 'li'\n\t\t},\n\n\t\tcaptionTag() {\n\t\t\t// Limit to at least h2 as h1 is considered invalid and reserved\n\t\t\tconst headingLevel = Math.max(2, this.headingLevel)\n\t\t\treturn this.isHeading ? `h${headingLevel}` : 'span'\n\t\t},\n\n\t\t// Check if the actions slot is populated\n\t\thasActions() {\n\t\t\treturn !!this.$slots.actions\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.app-navigation-caption {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\n\t&--heading {\n\t\tpadding: var(--app-navigation-padding);\n\t\t&:not(:first-child):not(:last-child) {\n\t\t\tpadding: 0 var(--app-navigation-padding);\n\t\t}\n\t}\n\n\t&__name {\n\t\tfont-weight: bold;\n\t\tcolor: var(--color-main-text);\n\t\tfont-size: var(--default-font-size);\n\t\tline-height: var(--default-clickable-area);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tbox-shadow: none !important;\n\t\tflex-shrink: 1;\n\t\t// padding to align the name with the icon of app navigation items\n\t\tpadding-block: 0;\n\t\tpadding-inline: calc(var(--default-grid-baseline, 4px) 2) 0;\n\t\tmargin-top: 0px;\n\t\tmargin-bottom: var(--default-grid-baseline);\n\t}\n\n\t&__actions {\n\t\tflex: 0 0 var(--default-clickable-area);\n\t}\n}\n\n// extra top space if it's not the first item on the list\n.app-navigation-caption:not(:first-child) {\n\tmargin-top: calc(var(--default-clickable-area) / 2);\n}\n</style>\n"],"names":[],"mappings":";;AAuLA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,KAAA,CAAA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,YAAA,QAAA;AAAA,IACA;AAAA,IAEA,aAAA;AAEA,YAAA,eAAA,KAAA,IAAA,GAAA,KAAA,YAAA;AACA,aAAA,KAAA,YAAA,IAAA,YAAA,KAAA;AAAA,IACA;AAAA;AAAA,IAGA,aAAA;AACA,aAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppNavigationItem-CkAgsU6p.cjs → NcAppNavigationItem-DyMBscJd.cjs} RENAMED Viewed

@@ -3,13 +3,13 @@ require('../assets/NcAppNavigationItem-De04deJW.css');
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const ChevronDown = require("./ChevronDown-BlfyuflD.cjs");
 const ChevronUp = require("./ChevronUp-Bpd__OBZ.cjs");
-const _l10n = require("./_l10n-DWMcjgRh.cjs");
+const _l10n = require("./_l10n-IBFNlYqh.cjs");
 const NcButton = require("./NcButton-CuFElrFD.cjs");
-const NcInputConfirmCancel = require("./NcInputConfirmCancel-lLiyPQvo.cjs");
+const NcInputConfirmCancel = require("./NcInputConfirmCancel-BAM7SUH2.cjs");
 const Composables_useIsMobile = require("../Composables/useIsMobile.cjs");
 const GenRandomId = require("./GenRandomId-D7iOvpZS.cjs");
-const NcActionButton = require("./NcActionButton-BS9Mv3XD.cjs");
-const NcActions = require("./NcActions-S-0Ec5lH.cjs");
+const NcActionButton = require("./NcActionButton-jtEEPXw2.cjs");
+const NcActions = require("./NcActions-DhEGso92.cjs");
 const Components_NcLoadingIcon = require("../Components/NcLoadingIcon.cjs");
 const Components_NcVNodes = require("../Components/NcVNodes.cjs");
 const _sfc_main$3 = {
@@ -520,4 +520,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcAppNavigationItem = __component__.exports;
 exports.NcAppNavigationItem = NcAppNavigationItem;
-//# sourceMappingURL=NcAppNavigationItem-CkAgsU6p.cjs.map
+//# sourceMappingURL=NcAppNavigationItem-DyMBscJd.cjs.map