npm - @nextcloud/vue - Versions diffs - 9.0.0-rc.2 → 9.0.0-rc.4 - Mend

@nextcloud/vue 9.0.0-rc.2 → 9.0.0-rc.4

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 (397) hide show

package/dist/chunks/{NcAppSidebar-BomlW59S.mjs.map → NcAppSidebar-DWRmX_-Y.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcAppSidebar-BomlW59S.mjs","sources":["../../node_modules/vue-material-design-icons/DockRight.vue","../../node_modules/vue-material-design-icons/Star.vue","../../node_modules/vue-material-design-icons/StarOutline.vue","../../src/components/NcAppSidebar/NcAppSidebarTabs.vue","../../src/components/NcAppSidebar/NcAppSidebar.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon dock-right-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V6A2 2 0 0 0 20 4M15 18H4V6H15Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"DockRightIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon star-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"StarIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon star-outline-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"StarOutlineIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<!-- Follows the tab aria guidelines\n\thttps://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html -->\n<template>\n\t<div class=\"app-sidebar-tabs\">\n\t\t<!-- tabs navigation -->\n\t\t<!-- 33 and 34 code is for page up and page down -->\n\t\t<div v-if=\"hasMultipleTabs \|\| showForSingleTab\"\n\t\t\trole=\"tablist\"\n\t\t\tclass=\"app-sidebar-tabs__nav\"\n\t\t\t@keydown.left.exact.prevent.stop=\"focusPreviousTab\"\n\t\t\t@keydown.right.exact.prevent.stop=\"focusNextTab\"\n\t\t\t@keydown.tab.exact.prevent.stop=\"focusActiveTabContent\"\n\t\t\t@keydown.home.exact.prevent.stop=\"focusFirstTab\"\n\t\t\t@keydown.end.exact.prevent.stop=\"focusLastTab\"\n\t\t\t@keydown.page-up.exact.prevent.stop=\"focusFirstTab\"\n\t\t\t@keydown.page-down.exact.prevent.stop=\"focusLastTab\">\n\t\t\t<NcCheckboxRadioSwitch v-for=\"tab in tabs\"\n\t\t\t\t:key=\"tab.id\"\n\t\t\t\t:aria-controls=\"`tab-${tab.id}`\"\n\t\t\t\t:aria-selected=\"String(activeTab === tab.id)\"\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\t:model-value=\"activeTab === tab.id\"\n\t\t\t\t:wrapper-id=\"`tab-button-${tab.id}`\"\n\t\t\t\t:tabindex=\"activeTab === tab.id ? 0 : -1\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\"\n\t\t\t\tclass=\"app-sidebar-tabs__tab\"\n\t\t\t\t:class=\"{ active: tab.id === activeTab }\"\n\t\t\t\trole=\"tab\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t@update:model-value=\"setActive(tab.id)\">\n\t\t\t\t<span class=\"app-sidebar-tabs__tab-caption\">\n\t\t\t\t\t{{ tab.name }}\n\t\t\t\t</span>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcVNodes :vnodes=\"tab.renderIcon()\">\n\t\t\t\t\t\t<span class=\"app-sidebar-tabs__tab-icon\" :class=\"tab.icon\" />\n\t\t\t\t\t</NcVNodes>\n\t\t\t\t</template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\n\t\t<!-- tabs content -->\n\t\t<div :class=\"{'app-sidebar-tabs__content--multiple': hasMultipleTabs}\"\n\t\t\tclass=\"app-sidebar-tabs__content\">\n\t\t\t<!-- @slot Tabs content - NcAppSidebarTab components or any content if there is no tabs -->\n\t\t\t<slot />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/index.js'\nimport NcVNodes from '../NcVNodes/index.ts'\n\nexport default {\n\tname: 'NcAppSidebarTabs',\n\n\tcomponents: {\n\t\tNcCheckboxRadioSwitch,\n\t\tNcVNodes,\n\t},\n\n\tprovide() {\n\t\treturn {\n\t\t\tregisterTab: this.registerTab,\n\t\t\tunregisterTab: this.unregisterTab,\n\t\t\t// Getter as an alternative to Vue 2.7 computed(() => this.activeTab)\n\t\t\tgetActiveTab: () => this.activeTab,\n\t\t\t// Used to check whether the tab header is shown so the tabs can reference the tab header for `aria-labelledby` or not\n\t\t\tisTablistShown: () => this.hasMultipleTabs,\n\t\t}\n\t},\n\n\tprops: {\n\t\t/*\n\t\t Id of the tab to activate\n\t\t /\n\t\tactive: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/\n\t\t Force the tab navigation to display even if there is only one tab\n\t\t /\n\t\tforceTabs: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: ['update:active'],\n\n\tdata() {\n\t\treturn {\n\t\t\t/\n\t\t\t Tab descriptions from the passed NcSidebarTab components' props to build the tab navbar from.\n\t\t\t /\n\t\t\ttabs: [],\n\t\t\t/\n\t\t\t Local active (open) tab's ID. It allows to use component without v-model:active\n\t\t\t /\n\t\t\tactiveTab: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t Has multiple tabs. If only one tab - its content is shown without navigation\n\t\t \n\t\t @return {boolean}\n\t\t /\n\t\thasMultipleTabs() {\n\t\t\treturn this.tabs.length > 1\n\t\t},\n\n\t\tshowForSingleTab() {\n\t\t\treturn this.forceTabs && this.tabs.length === 1\n\t\t},\n\n\t\tcurrentTabIndex() {\n\t\t\treturn this.tabs.findIndex((tab) => tab.id === this.activeTab)\n\t\t},\n\t},\n\n\twatch: {\n\t\tactive(active) {\n\t\t\t// Prevent running it twice\n\t\t\tif (active !== this.activeTab) {\n\t\t\t\tthis.updateActive()\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\n\t\t/\n\t\t Set the current active tab\n\t\t \n\t\t @param {string} id the id of the tab\n\t\t /\n\t\tsetActive(id) {\n\t\t\tthis.activeTab = id\n\t\t\t/\n\t\t\t @property {string} active - active tab's id\n\t\t\t /\n\t\t\tthis.$emit('update:active', this.activeTab)\n\t\t},\n\n\t\t/\n\t\t Focus the previous tab\n\t\t * and emit to the parent component\n\t\t /\n\t\tfocusPreviousTab() {\n\t\t\tif (this.currentTabIndex > 0) {\n\t\t\t\tthis.setActive(this.tabs[this.currentTabIndex - 1].id)\n\t\t\t}\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/\n\t\t Focus the next tab\n\t\t * and emit to the parent component\n\t\t /\n\t\tfocusNextTab() {\n\t\t\tif (this.currentTabIndex < this.tabs.length - 1) {\n\t\t\t\tthis.setActive(this.tabs[this.currentTabIndex + 1].id)\n\t\t\t}\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/\n\t\t Focus the first tab\n\t\t * and emit to the parent component\n\t\t /\n\t\tfocusFirstTab() {\n\t\t\tthis.setActive(this.tabs[0].id)\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/\n\t\t Focus the last tab\n\t\t * and emit to the parent component\n\t\t /\n\t\tfocusLastTab() {\n\t\t\tthis.setActive(this.tabs[this.tabs.length - 1].id)\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/\n\t\t Focus the current active tab\n\t\t /\n\t\tfocusActiveTab() {\n\t\t\tthis.$el.querySelector(`#tab-button-${this.activeTab}`).focus()\n\t\t},\n\n\t\t/\n\t\t Focus the content on tab\n\t\t * see aria accessibility guidelines\n\t\t /\n\t\tfocusActiveTabContent() {\n\t\t\tthis.$el.querySelector('#tab-' + this.activeTab).focus()\n\t\t},\n\n\t\t/\n\t\t Update the current active tab\n\t\t /\n\t\tupdateActive() {\n\t\t\tthis.activeTab = this.active\n\t\t\t&& this.tabs.some(tab => tab.id === this.active)\n\t\t\t\t? this.active\n\t\t\t\t: this.tabs.length > 0\n\t\t\t\t\t? this.tabs[0].id\n\t\t\t\t\t: ''\n\t\t},\n\n\t\t/\n\t\t Register child tab in the tabs\n\t\t \n\t\t @param {object} tab child tab passed to slot\n\t\t /\n\t\tregisterTab(tab) {\n\t\t\tthis.tabs.push(tab)\n\t\t\tthis.tabs.sort((a, b) => {\n\t\t\t\tif (a.order === b.order) {\n\t\t\t\t\treturn OC.Util.naturalSortCompare(a.name, b.name)\n\t\t\t\t}\n\t\t\t\treturn a.order - b.order\n\t\t\t})\n\t\t\tthis.updateActive()\n\t\t},\n\n\t\t/\n\t\t Unregister child tab from the tabs\n\t\t \n\t\t @param {string} id tab's id\n\t\t /\n\t\tunregisterTab(id) {\n\t\t\tconst tabIndex = this.tabs.findIndex((tab) => tab.id === id)\n\t\t\tif (tabIndex !== -1) {\n\t\t\t\tthis.tabs.splice(tabIndex, 1)\n\t\t\t}\n\t\t\tif (this.activeTab === id) {\n\t\t\t\tthis.updateActive()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.app-sidebar-tabs {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 0;\n\tflex: 1 1 100%;\n\n\t&__nav {\n\t\tdisplay: flex;\n\t\tjustify-content: stretch;\n\t\tmargin: 10px 8px 0 8px;\n\t\tborder-bottom: 1px solid var(--color-border);\n\n\t\t// Override checkbox-radio-switch styles so that it looks like tabs\n\t\t& :deep(.checkbox-radio-switch--button-variant) {\n\t\t\tborder: unset !important;\n\t\t\tborder-radius: 0 !important;\n\t\t\t.checkbox-content {\n\t\t\t\tpadding: var(--default-grid-baseline);\n\t\t\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0 !important;\n\t\t\t\tmargin: 0 !important;\n\t\t\t\tborder-bottom: var(--default-grid-baseline) solid transparent !important;\n\t\t\t\t.checkbox-content__icon > {\n\t\t\t\t\tcolor: var(--color-main-text) !important;\n\t\t\t\t}\n\t\t\t}\n\t\t\t&.checkbox-radio-switch--checked .checkbox-radio-switch__content{\n\t\t\t\tbackground: transparent !important;\n\t\t\t\tcolor: var(--color-main-text) !important;\n\t\t\t\tborder-bottom: var(--default-grid-baseline) solid var(--color-primary-element) !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__tab {\n\t\tflex: 1 1;\n\t\t&.active {\n\t\t\tcolor: var(--color-primary-element);\n\t\t}\n\n\t\t&-caption {\n\t\t\tflex: 0 1 100%;\n\t\t\twidth: 100%;\n\t\t\toverflow: hidden;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-overflow: ellipsis;\n\t\t\ttext-align: center;\n\t\t}\n\n\t\t&-icon {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tbackground-size: 20px;\n\t\t}\n\n\t\t// Override max-width to use all available space\n\t\t:deep(.checkbox-radio-switch__content) {\n\t\t\tmax-width: unset;\n\t\t}\n\t}\n\n\t&__content {\n\t\tposition: relative;\n\t\tmin-height: 256px;\n\t\theight: 100%;\n\t\t// force the use of the tab component if more than one tab\n\t\t// you can just put raw content if you don't use tabs\n\t\t&--multiple > :not(section) {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n</style>\n","<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component provides a way to include the standardised sidebar.\nThe standard properties like name, subname, starred, etc. allow to automatically\ninclude a standard-header like it's used by the files app.\n\nTo conditionally show the sidebar either use `v-if` on the sidebar component,\nor use the `open` property of the component to controll the state.\nUsing `v-show` directly will result in usability issues due to internal focus trap handling.\n\n### Standard usage\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\t:starred=\"starred\"\n\t\tname=\"cat-picture.jpg\"\n\t\tsubname=\"last edited 3 weeks ago\"\n\t\tbackground=\"https://nextcloud.com/wp-content/uploads/2022/08/nextcloud-logo-icon.svg\"\n\t\t@figure-click=\"figureClick\">\n\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t\tSearch tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<Cog :size=\"20\" />\n\t\t\t</template>\n\t\t\tSettings tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t</template>\n\t\t\tSharing tab content\n\t\t</NcAppSidebarTab>\n\t</NcAppSidebar>\n</template>\n<script>\n\timport Magnify from 'vue-material-design-icons/Magnify.vue'\n\timport Cog from 'vue-material-design-icons/Cog.vue'\n\timport ShareVariant from 'vue-material-design-icons/ShareVariant.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tMagnify,\n\t\t\tCog,\n\t\t\tShareVariant,\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tstarred: false,\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tfigureClick() {\n\t\t\t\talert('figure clicked')\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n### One tab\n\nSingle tab is rendered without navigation.\n\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch v-model=\"forceTabs\">Force tab navigation</NcCheckboxRadioSwitch>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\t:force-tabs=\"forceTabs\"\n\t\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSingle tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Cog from 'vue-material-design-icons/Cog.vue'\n\nexport default {\n\tcomponents: {\n\t\tCog,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tforceTabs: false,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Dynamic tabs\n\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch v-model=\"showTabs[0]\">Show search tab</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"showTabs[1]\">Show settings tab</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"showTabs[2]\">Show sharing tab</NcCheckboxRadioSwitch>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[0]\" name=\"Search\" id=\"search-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSearch tab content\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[1]\" name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSettings\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[2]\" name=\"Sharing\" id=\"share-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSharing tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify.vue'\nimport Cog from 'vue-material-design-icons/Cog.vue'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant.vue'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tshowTabs: [true, true, false],\n\t\t}\n\t},\n}\n</script>\n```\n\n### Custom order\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\tname=\"cat-picture.jpg\"\n\t\tsubname=\"last edited 3 weeks ago\">\n\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\" :order=\"3\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t\tSearch tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\" :order=\"2\">\n\t\t\t<template #icon>\n\t\t\t\t<Cog :size=\"20\" />\n\t\t\t</template>\n\t\t\tSettings tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\" :order=\"1\">\n\t\t\t<template #icon>\n\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t</template>\n\t\t\tSharing tab content\n\t\t</NcAppSidebarTab>\n\t</NcAppSidebar>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify.vue'\nimport Cog from 'vue-material-design-icons/Cog.vue'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant.vue'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n}\n</script>\n```\n\n### Activating tab programmatically\n\n```vue\n<template>\n\t<div>\n\t\t<NcSelect v-model=\"active\" :options=\"['search-tab', 'settings-tab', 'share-tab']\" />\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\"\n\t\t\tv-model:active=\"active\">\n\t\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSearch tab content\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSettings\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSharing tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify.vue'\nimport Cog from 'vue-material-design-icons/Cog.vue'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant.vue'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tactive: 'search-tab',\n\t\t}\n\t},\n}\n</script>\n```\n\n### Editable name\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\tv-model:name=\"name\"\n\t\t:name-editable=\"true\"\n\t\tname-placeholder=\"Filename\"\n\t\tsubname=\"last edited 3 weeks ago\">\n\t\t<!-- Insert your slots and tabs here -->\n\t</NcAppSidebar>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tname: 'cat-picture.jpg',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n### Editable name after click with custom tertiary action\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\t:name=\"name\"\n\t\tv-model:name-editable=\"nameEditable\"\n\t\t:name-placeholder=\"namePlaceholder\"\n\t\t:subname=\"subname\"\n\t\t@update:name=\"nameUpdate\">\n\t\t<template #tertiary-actions>\n\t\t\t<form>\n\t\t\t\t<input type=\"checkbox\" @click=\"toggledCheckbox\"/>\n\t\t\t</form>\n\t\t</template>\n\t</NcAppSidebar>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tname: 'cat-picture.jpg',\n\t\t\t\tnamePlaceholder: 'Filename',\n\t\t\t\tsubname: 'last edited 3 weeks ago',\n\t\t\t\tnameEditable: false\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tnameUpdate(e) {\n\t\t\t\tthis.name = e\n\t\t\t},\n\t\t\ttoggledCheckbox() {\n\t\t\t\talert('toggle')\n\t\t\t}\n\t\t}\n\t}\n</script>\n```\n\n### Custom subname\n\nInstead of using the `subname` prop you can use the same called slot. This is handy if you need to add accessible information.\nLike in the following example where the goal is to show a star icon to mark the file a favorite.\nSimplying adding `★` would not work as screen readers might not or wrongly announce the icon meaning this information is lost.\n\nA working alternative would be using an icon together with an `aria-label`:\n\n```vue\n\t<template>\n\t\t<NcAppSidebar name=\"cat-picture.jpg\">\n\t\t\t<template #subname>\n\t\t\t\t<NcIconSvgWrapper inline :path=\"mdiStar\" name=\"Favorite\" />\n\t\t\t\t123 KiB, a month ago\n\t\t\t</template>\n\t\t</NcAppSidebar>\n\t</template>\n\t<script>\n\timport { mdiStar } from '@mdi/js'\n\n\texport default {\n\t\tsetup() {\n\t\t\treturn {\n\t\t\t\tmdiStar,\n\t\t\t}\n\t\t}\n\t}\n\t</script>\n```\n\n### Empty sidebar for e.g. empty content component.\n\n```vue\n\t<template>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\t:empty=\"true\">\n\t\t\t<NcEmptyContent name=\"Content not found.\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</NcAppSidebar>\n\t</template>\n\t<script>\n\timport Magnify from 'vue-material-design-icons/Magnify.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tMagnify,\n\t\t},\n\t}\n\t</script>\n```\n\n### Conditionally show the sidebar with `open`\n\nIf the sidebar should be shown conditionally, you can use `open` prop to define sidebar visibility.\nIt automatically shows a toggle button to open the sidebar if it is closed.\n\nYou can also use `--app-sidebar-offset` CSS variable to preserve space\nfor the toggle button, for example, in top bar of `NcAppContent`.\n\nThe built-in toggle button can be removed with `no-toggle` prop.\n\nNote: the built-in toggle button is only available then NcAppSidebar is used in NcContent.\n\n```vue\n<template>\n\t<!-- This is in most cases NcContent -->\n\t<NcContent app-name=\"styleguidist\" class=\"content-styleguidist\">\n\t\t<NcAppContent>\n\t\t\t<div class=\"top-bar\">\n\t\t\t\t<NcButton variant=\"primary\">Start a call</NcButton>\n\t\t\t</div>\n\t\t</NcAppContent>\n\t\t<!-- The sidebar -->\n\t\t<NcAppSidebar\n\t\t\tv-model:open=\"showSidebar\"\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSingle tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</NcContent>\n</template>\n\n<script>\nimport Cog from 'vue-material-design-icons/Cog'\n\nexport default {\n\tcomponents: {\n\t\tCog,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tshowSidebar: true,\n\t\t}\n\t},\n}\n</script>\n<style scoped>\n/* This styles just mock NcContent and NcAppContent /\n.content-styleguidist {\n\tposition: relative !important;\n\t/ Just to prevent jumping when the sidebar is hidden /\n\tmin-height: 360px;\n}\n\n.main-content {\n\tposition: absolute;\n\theight: 100%;\n\twidth: 100%;\n}\n\n/ Fix styles on this style guide page /\n@media only screen and (max-width: 512px) {\n\t:deep(aside) {\n\t\twidth: calc(100vw - 64px) !important;\n\t}\n}\n\n.top-bar {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\t/ preserve space for toggle button /\n\tpadding-inline-end: var(--app-sidebar-offset);\n\t/ same as on toggle button, but doesn't have to be the same /\n\tmargin: var(--app-sidebar-padding);\n}\n</style>\n```\n\n### Conditionally show the sidebar programmatically with `v-if`\n\nIf the sidebar should be shown conditionally without any explicit toggle button, you can use `v-if`.\n\nNote about performance: using `v-if` might result in bad performance and loosing sidebar content state.\n\nNote about `v-show`: using `v-show` to hide sidebar will result in usability issues due to active focus trap on mobile.\n\n```vue\n<template>\n\t<!-- This is in most cases NcContent -->\n\t<NcContent app-name=\"styleguidist\" class=\"content-styleguidist\">\n\t\t<NcAppContent>\n\t\t\t<div class=\"top-bar\">\n\t\t\t\t<NcButton @click.prevent=\"showSidebar = true\">\n\t\t\t\t\tToggle sidebar\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</NcAppContent>\n\t\t<!-- The sidebar -->\n\t\t<NcAppSidebar\n\t\t\tv-if=\"showSidebar\"\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\"\n\t\t\t@close=\"showSidebar = false\">\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSingle tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</NcContent>\n</template>\n\n<script>\nimport Cog from 'vue-material-design-icons/Cog'\n\nexport default {\n\tcomponents: {\n\t\tCog,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tshowSidebar: true,\n\t\t}\n\t},\n}\n</script>\n<style scoped>\n/ This styles just mock NcContent and NcAppContent /\n.content-styleguidist {\n\tposition: relative !important;\n\t/ Just to prevent jumping when the sidebar is hidden /\n\tmin-height: 360px;\n}\n\n.main-content {\n\tposition: absolute;\n\theight: 100%;\n\twidth: 100%;\n}\n\n/ Fix styles on this style guide page /\n@media only screen and (max-width: 512px) {\n\t:deep(aside) {\n\t\twidth: calc(100vw - 64px) !important;\n\t}\n}\n\n.top-bar {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\t/ preserve space for toggle button /\n\tpadding-inline-end: var(--app-sidebar-offset);\n\t/ same as on toggle button, but doesn't have to be the same /\n\tmargin: var(--app-sidebar-padding);\n}\n</style>\n```\n</docs>\n\n<template>\n\t<transition appear\n\t\tname=\"slide-right\"\n\t\t@after-enter=\"onAfterEnter\"\n\t\t@after-leave=\"onAfterLeave\">\n\t\t<aside v-show=\"open\"\n\t\t\tid=\"app-sidebar-vue\"\n\t\t\tref=\"sidebar\"\n\t\t\tclass=\"app-sidebar\"\n\t\t\t:aria-labelledby=\"`app-sidebar-vue-${uid}__header`\"\n\t\t\t@keydown.esc=\"onKeydownEsc\">\n\t\t\t<!--\n\t\t\t\tWe cannot render toggle button inside sidebar (aside#app-sidebar-vue), because it is hidden then the toggle is needed.\n\t\t\t\tBut we also need transition with the sidebar to be the root of this component to use it as a single UI element, allowing to use `v-show`.\n\t\t\t\tSo we cannot render the toggle button directly in this component.\n\t\t\t\tAs a simple solution - render it in the content to keep correct position.\n\t\t\t-->\n\t\t\t<Teleport v-if=\"ncContentSelector && !open && !noToggle\" :to=\"ncContentSelector\">\n\t\t\t\t<NcButton ref=\"toggle\"\n\t\t\t\t\t:aria-label=\"t('Open sidebar')\"\n\t\t\t\t\tclass=\"app-sidebar__toggle\"\n\t\t\t\t\t:class=\"toggleClasses\"\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tv-bind=\"toggleAttrs\"\n\t\t\t\t\t@click=\"$emit('update:open', true)\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<!-- @slot Custom icon for the toggle button, defaults to the dock-right icon from MDI -->\n\t\t\t\t\t\t<slot name=\"toggle-icon\">\n\t\t\t\t\t\t\t<IconDockRight :size=\"20\" />\n\t\t\t\t\t\t</slot>\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</Teleport>\n\n\t\t\t<header :class=\"{\n\t\t\t\t\t'app-sidebar-header--with-figure': isSlotPopulated($slots.header?.()) \|\| background,\n\t\t\t\t\t'app-sidebar-header--compact': compact,\n\t\t\t\t}\"\n\t\t\t\tclass=\"app-sidebar-header\">\n\t\t\t\t<!-- @slot Alternative to the default header info: use for bare NcAppSidebar with tabs.\n\t\t\t\t\tNcAppSidebarHeader would be required to use for accessibility reasons.\n\t\t\t\t\tThis will be overridden by `empty` prop.\n\t\t\t\t-->\n\t\t\t\t<slot v-if=\"!empty\" name=\"info\">\n\t\t\t\t\t<!-- container for figure and description, allows easy switching to compact mode -->\n\t\t\t\t\t<div class=\"app-sidebar-header__info\">\n\t\t\t\t\t\t<!-- sidebar header illustration/figure -->\n\t\t\t\t\t\t<div v-if=\"(isSlotPopulated($slots.header?.()) \|\| background)\"\n\t\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t\t'app-sidebar-header__figure--with-action': hasFigureClickListener\n\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\tclass=\"app-sidebar-header__figure\"\n\t\t\t\t\t\t\t:style=\"{\n\t\t\t\t\t\t\t\tbackgroundImage: `url(${background})`\n\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t@click=\"onFigureClick\"\n\t\t\t\t\t\t\t@keydown.enter=\"onFigureClick\">\n\t\t\t\t\t\t\t<slot class=\"app-sidebar-header__background\" name=\"header\" />\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<!-- sidebar details -->\n\t\t\t\t\t\t<div :class=\"{\n\t\t\t\t\t\t\t\t'app-sidebar-header__desc--with-tertiary-action': canStar \|\| isSlotPopulated($slots['tertiary-actions']?.()),\n\t\t\t\t\t\t\t\t'app-sidebar-header__desc--editable': nameEditable && !subname,\n\t\t\t\t\t\t\t\t'app-sidebar-header__desc--with-subname--editable': nameEditable && subname,\n\t\t\t\t\t\t\t\t'app-sidebar-header__desc--without-actions': !isSlotPopulated($slots['secondary-actions']?.()),\n\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\tclass=\"app-sidebar-header__desc\">\n\t\t\t\t\t\t\t<!-- favourite icon -->\n\t\t\t\t\t\t\t<div v-if=\"canStar \|\| isSlotPopulated($slots['tertiary-actions']?.())\" class=\"app-sidebar-header__tertiary-actions\">\n\t\t\t\t\t\t\t\t<slot name=\"tertiary-actions\">\n\t\t\t\t\t\t\t\t\t<NcButton v-if=\"canStar\"\n\t\t\t\t\t\t\t\t\t\t:aria-label=\"favoriteTranslated\"\n\t\t\t\t\t\t\t\t\t\t:pressed=\"isStarred\"\n\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__star\"\n\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t@click.prevent=\"toggleStarred\">\n\t\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t\t<NcLoadingIcon v-if=\"starLoading\" />\n\t\t\t\t\t\t\t\t\t\t\t<IconStar v-else-if=\"isStarred\" :size=\"20\" />\n\t\t\t\t\t\t\t\t\t\t\t<IconStarOutline v-else :size=\"20\" />\n\t\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t\t</slot>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<!-- name -->\n\t\t\t\t\t\t\t<div class=\"app-sidebar-header__name-container\">\n\t\t\t\t\t\t\t\t<div class=\"app-sidebar-header__mainname-container\">\n\t\t\t\t\t\t\t\t\t<!-- main name -->\n\t\t\t\t\t\t\t\t\t<NcAppSidebarHeader v-show=\"!nameEditable\"\n\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname\"\n\t\t\t\t\t\t\t\t\t\t:name\n\t\t\t\t\t\t\t\t\t\t:linkify=\"linkifyName\"\n\t\t\t\t\t\t\t\t\t\t:title\n\t\t\t\t\t\t\t\t\t\t:tabindex=\"nameEditable ? 0 : -1\"\n\t\t\t\t\t\t\t\t\t\t@click.self=\"editName\" />\n\t\t\t\t\t\t\t\t\t<template v-if=\"nameEditable\">\n\t\t\t\t\t\t\t\t\t\t<form v-click-outside=\"() => onSubmitName()\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname-form\"\n\t\t\t\t\t\t\t\t\t\t\t@submit.prevent=\"onSubmitName\">\n\t\t\t\t\t\t\t\t\t\t\t<input ref=\"nameInput\"\n\t\t\t\t\t\t\t\t\t\t\t\tv-focus\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname-input\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t\t:placeholder=\"namePlaceholder\"\n\t\t\t\t\t\t\t\t\t\t\t\t:value=\"name\"\n\t\t\t\t\t\t\t\t\t\t\t\t@keydown.esc.stop=\"onDismissEditing\"\n\t\t\t\t\t\t\t\t\t\t\t\t@input=\"onNameInput\">\n\t\t\t\t\t\t\t\t\t\t\t<NcButton :aria-label=\"changeNameTranslated\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary-no-background\">\n\t\t\t\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<IconArrowRight :size=\"20\" />\n\t\t\t\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t\t\t\t</form>\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t<!-- header main menu -->\n\t\t\t\t\t\t\t\t\t<NcActions v-if=\"isSlotPopulated($slots['secondary-actions']?.())\"\n\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__menu\"\n\t\t\t\t\t\t\t\t\t\t:force-menu=\"forceMenu\">\n\t\t\t\t\t\t\t\t\t\t<slot name=\"secondary-actions\" />\n\t\t\t\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<!-- secondary name -->\n\t\t\t\t\t\t\t\t<p v-if=\"subname.trim() !== '' \|\| $slots['subname']\"\n\t\t\t\t\t\t\t\t\t:title=\"subtitle \|\| undefined\"\n\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__subname\">\n\t\t\t\t\t\t\t\t\t<!-- @slot Alternative to the `subname` prop can be used for more complex conent. It will be rendered within a `p` tag. -->\n\t\t\t\t\t\t\t\t\t<slot name=\"subname\">\n\t\t\t\t\t\t\t\t\t\t{{ subname }}\n\t\t\t\t\t\t\t\t\t</slot>\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</slot>\n\t\t\t\t<!-- a11y fallback for empty content -->\n\t\t\t\t<NcAppSidebarHeader v-else\n\t\t\t\t\tclass=\"app-sidebar-header__mainname--hidden\"\n\t\t\t\t\t:name\n\t\t\t\t\ttabindex=\"-1\" />\n\n\t\t\t\t<NcButton ref=\"closeButton\"\n\t\t\t\t\t:aria-label=\"closeTranslated\"\n\t\t\t\t\t:title=\"closeTranslated\"\n\t\t\t\t\tclass=\"app-sidebar__close\"\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t@click.prevent=\"closeSidebar\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconClose :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\n\t\t\t\t<div v-if=\"isSlotPopulated($slots.description?.()) && !empty\" class=\"app-sidebar-header__description\">\n\t\t\t\t\t<slot name=\"description\" />\n\t\t\t\t</div>\n\t\t\t</header>\n\n\t\t\t<NcAppSidebarTabs v-show=\"!loading\"\n\t\t\t\tref=\"tabs\"\n\t\t\t\t:active=\"active\"\n\t\t\t\t:force-tabs=\"forceTabs\"\n\t\t\t\t@update:active=\"onUpdateActive\">\n\t\t\t\t<slot />\n\t\t\t</NcAppSidebarTabs>\n\n\t\t\t<NcEmptyContent v-if=\"loading\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcLoadingIcon :size=\"64\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</aside>\n\t</transition>\n</template>\n\n<script>\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport { createFocusTrap } from 'focus-trap'\nimport { provide, ref, warn } from 'vue'\nimport { useIsSmallMobile } from '../../composables/useIsMobile/index.js'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { isSlotPopulated } from '../../utils/isSlotPopulated.ts'\nimport { t } from '../../l10n.js'\n\nimport IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport IconClose from 'vue-material-design-icons/Close.vue'\nimport IconDockRight from 'vue-material-design-icons/DockRight.vue'\nimport IconStar from 'vue-material-design-icons/Star.vue'\nimport IconStarOutline from 'vue-material-design-icons/StarOutline.vue'\n\nimport NcAppSidebarTabs from './NcAppSidebarTabs.vue'\nimport NcActions from '../NcActions/index.js'\nimport NcButton from '../NcButton/index.ts'\nimport NcEmptyContent from '../NcEmptyContent/index.ts'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport NcAppSidebarHeader from '../NcAppSidebarHeader/index.ts'\nimport Focus from '../../directives/Focus/index.ts'\n\nexport default {\n\tname: 'NcAppSidebar',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcAppSidebarHeader,\n\t\tNcAppSidebarTabs,\n\t\tNcButton,\n\t\tNcLoadingIcon,\n\t\tNcEmptyContent,\n\t\tIconArrowRight,\n\t\tIconClose,\n\t\tIconDockRight,\n\t\tIconStar,\n\t\tIconStarOutline,\n\t},\n\n\tdirectives: {\n\t\tFocus,\n\t\tClickOutside,\n\t},\n\n\tinject: {\n\t\tncContentSelector: {\n\t\t\tfrom: 'NcContent:selector',\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tprops: {\n\t\tactive: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\trequired: true,\n\t\t},\n\n\t\t/\n\t\t Allow to edit the sidebar name.\n\t\t /\n\t\tnameEditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\tnamePlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\tsubname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/\n\t\t Title to display for the subname.\n\t\t /\n\t\tsubtitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Url to the top header background image\n\t\t * Applied with css\n\t\t /\n\t\tbackground: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Enable the favourite icon if not null\n\t\t * See fired events\n\t\t /\n\t\tstarred: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\t\t/\n\t\t Show loading spinner instead of the star icon\n\t\t /\n\t\tstarLoading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Show loading spinner instead of tabs\n\t\t /\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Display the sidebar in compact mode\n\t\t /\n\t\tcompact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Only display close button and default slot content.\n\t\t * Don't display other header content and primary and secondary actions.\n\t\t * Useful when showing the EmptyContent component as content.\n\t\t /\n\t\tempty: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Force the actions to display in a three dot menu\n\t\t /\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Force the tab navigation to display even if there is only one tab\n\t\t /\n\t\tforceTabs: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Linkify the name\n\t\t /\n\t\tlinkifyName: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Title to display for the name.\n\t\t * Can be set to the same text in case it's too long.\n\t\t /\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Allow to conditionally show the sidebar\n\t\t * You can also use `v-if` on the sidebar, but using the open prop allow to keep\n\t\t * the sidebar inside the DOM for performance if it is opened and closed multiple times.\n\t\t \n\t\t When using the `open` property to close the sidebar a built-in toggle button will be shown to reopen it,\n\t\t * similar to the app navigation. You can remove this button with the `no-toggle` prop.\n\t\t /\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Custom classes to assign to the sidebar toggle button.\n\t\t * If needed this can be used to assign styles to the button using `:deep()` selector.\n\t\t /\n\t\ttoggleClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Custom attrs to assign to the sidebar toggle button.\n\t\t /\n\t\ttoggleAttrs: {\n\t\t\ttype: Object,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Do not add the built-in toggle button with `open` prop.\n\t\t /\n\t\tnoToggle: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'close',\n\t\t'closed',\n\t\t'opened',\n\t\t// 'figure-click', not emitted on purpose to make \"hasFigureClickListener\" work\n\t\t'update:active',\n\t\t'update:name',\n\t\t'update:nameEditable',\n\t\t'update:open',\n\t\t'update:starred',\n\t\t'submit-name',\n\t\t'dismiss-editing',\n\t],\n\n\tsetup() {\n\t\tconst headerRef = ref(null)\n\t\tprovide('NcAppSidebar:header:ref', headerRef)\n\n\t\treturn {\n\t\t\tuid: createElementId(),\n\t\t\tisMobile: useIsSmallMobile(),\n\t\t\theaderRef,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tchangeNameTranslated: t('Change name'),\n\t\t\tcloseTranslated: t('Close sidebar'),\n\t\t\tfavoriteTranslated: t('Favorite'),\n\t\t\tisStarred: this.starred,\n\t\t\tfocusTrap: null,\n\t\t\telementToReturnFocus: null,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcanStar() {\n\t\t\treturn this.isStarred !== null\n\t\t},\n\t\thasFigureClickListener() {\n\t\t\treturn !!this.$attrs.onFigureClick\n\t\t},\n\t},\n\n\twatch: {\n\t\tstarred() {\n\t\t\tthis.isStarred = this.starred\n\t\t},\n\n\t\tisMobile() {\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\n\t\topen() {\n\t\t\tthis.checkToggleButtonContainerAvailability()\n\t\t},\n\t},\n\n\tcreated() {\n\t\tthis.preserveElementToReturnFocus()\n\n\t\tthis.checkToggleButtonContainerAvailability()\n\t},\n\n\tbeforeUnmount() {\n\t\t// Make sure that the 'closed' event is dispatched even if this element is destroyed before the 'after-leave' event is received.\n\t\tthis.$emit('closed')\n\t\tthis.focusTrap?.deactivate()\n\t},\n\n\tmethods: {\n\t\tisSlotPopulated,\n\n\t\tt,\n\n\t\tpreserveElementToReturnFocus() {\n\t\t\t// Save the element that had focus before the sidebar was opened to return back on close\n\t\t\tif (document.activeElement && document.activeElement !== document.body) {\n\t\t\t\tthis.elementToReturnFocus = document.activeElement\n\n\t\t\t\t// Special case for menus (NcActions)\n\t\t\t\t// If a sidebar was opened from a menu item, we want to return focus to the menu trigger instead of the item\n\t\t\t\tif (this.elementToReturnFocus.getAttribute('role') === 'menuitem') {\n\t\t\t\t\tconst menu = this.elementToReturnFocus.closest('[role=\"menu\"]')\n\t\t\t\t\tif (menu) {\n\t\t\t\t\t\tconst menuTrigger = document.querySelector(`[aria-controls=\"${menu.id}\"]`)\n\t\t\t\t\t\tthis.elementToReturnFocus = menuTrigger\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\tinitFocusTrap() {\n\t\t\tif (this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.focusTrap = createFocusTrap([\n\t\t\t\t// The sidebar itself\n\t\t\t\tthis.$refs.sidebar,\n\t\t\t\t// Nextcloud Server header navigarion\n\t\t\t\tdocument.querySelector('#header'),\n\t\t\t], {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\tfallbackFocus: this.$refs.closeButton.$el,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tescapeDeactivates: false,\n\t\t\t})\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.open && this.isMobile) {\n\t\t\t\tthis.initFocusTrap()\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\t/\n\t\t Close the sidebar on pressing the escape key on mobile\n\t\t \n\t\t @param {KeyboardEvent} event key down event\n\t\t /\n\t\tonKeydownEsc(event) {\n\t\t\tif (this.isMobile) {\n\t\t\t\tevent.stopPropagation()\n\t\t\t\tthis.closeSidebar()\n\t\t\t}\n\t\t},\n\n\t\tonAfterEnter(element) {\n\t\t\t// Focus sidebar on open only if it was opened by a user interaction\n\t\t\tif (this.elementToReturnFocus) {\n\t\t\t\tthis.focus()\n\t\t\t}\n\n\t\t\tthis.toggleFocusTrap()\n\n\t\t\t/\n\t\t\t The sidebar is opened and the transition is complete\n\t\t\t \n\t\t\t @type {HTMLElement}\n\t\t\t /\n\t\t\tthis.$emit('opened', element)\n\t\t},\n\t\tonAfterLeave(element) {\n\t\t\t/\n\t\t\t The sidebar is closed and the transition is complete\n\t\t\t \n\t\t\t @type {HTMLElement}\n\t\t\t /\n\t\t\tthis.$emit('closed', element)\n\n\t\t\tthis.toggleFocusTrap()\n\n\t\t\t// Return focus to the element that had focus before the sidebar was opened\n\t\t\tthis.elementToReturnFocus?.focus({ focusVisible: true })\n\t\t\tthis.elementToReturnFocus = null\n\t\t},\n\n\t\t/\n\t\t Used to tell parent component the user asked to close the sidebar\n\t\t \n\t\t @param {Event} e close icon click event\n\t\t /\n\t\tcloseSidebar(e) {\n\t\t\t/\n\t\t\t The user clicked to closed the sidebar\n\t\t\t \n\t\t\t @type {Event}\n\t\t\t /\n\t\t\tthis.$emit('close', e)\n\t\t\t/\n\t\t\t Current open state emitted after the transitions are finished\n\t\t\t * @type {boolean}\n\t\t\t /\n\t\t\tthis.$emit('update:open', false)\n\t\t},\n\n\t\t/\n\t\t Emit figure click event to parent component\n\t\t \n\t\t @param {Event} e click event\n\t\t /\n\t\tonFigureClick(e) {\n\t\t\t/\n\t\t\t The figure/background header has been clicked\n\t\t\t \n\t\t\t @type {Event}\n\t\t\t /\n\t\t\t// eslint-disable-next-line vue/require-explicit-emits\n\t\t\tthis.$emit('figure-click', e)\n\t\t},\n\n\t\t/\n\t\t Toggle the favourite state\n\t\t * and emit to the parent component\n\t\t /\n\t\ttoggleStarred() {\n\t\t\tthis.isStarred = !this.isStarred\n\t\t\t/\n\t\t\t Emitted when the starred value changes\n\t\t\t \n\t\t\t @type {boolean}\n\t\t\t /\n\t\t\tthis.$emit('update:starred', this.isStarred)\n\t\t},\n\n\t\tasync editName() {\n\t\t\t/\n\t\t\t Emitted when the nameEditable value changes\n\t\t\t \n\t\t\t @type {boolean}\n\t\t\t /\n\t\t\tthis.$emit('update:nameEditable', true)\n\t\t\t// Focus the name input\n\t\t\tif (this.nameEditable) {\n\t\t\t\tawait this.$nextTick()\n\t\t\t\tthis.$refs.nameInput.focus()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Focus the sidebar\n\t\t * @public\n\t\t /\n\t\tfocus() {\n\t\t\tif (!this.open && !this.noToggle) {\n\t\t\t\tthis.$refs.toggle.$el.focus()\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tthis.headerRef.focus()\n\t\t\t} catch {\n\t\t\t\twarn('NcAppSidebar should have focusable header for accessibility reasons. Use NcAppSidebarHeader component.')\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Focus the active tab\n\t\t * @public\n\t\t /\n\t\tfocusActiveTabContent() {\n\t\t\t// If a tab is focused then probably a new trigger element moved the focus to the sidebar\n\t\t\tthis.preserveElementToReturnFocus()\n\n\t\t\tthis.$refs.tabs.focusActiveTabContent()\n\t\t},\n\n\t\t/\n\t\t Check if the toggle button container is available\n\t\t /\n\t\tcheckToggleButtonContainerAvailability() {\n\t\t\t// Toggle button must be rendered, but there is no element to teleport it to\n\t\t\tif (this.open === false && !this.noToggle && !this.ncContentSelector) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t'[NcAppSidebar] It looks like you want to use NcAppSidebar with the built-in toggle button. '\n\t\t\t\t\t+ 'This feature is only available when NcAppSidebar is used in NcContent.',\n\t\t\t\t)\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Emit name change event to parent component\n\t\t \n\t\t @param {Event} event input event\n\t\t /\n\t\tonNameInput(event) {\n\t\t\t/\n\t\t\t Emitted when the name value changes\n\t\t\t \n\t\t\t @type {string\|Date}\n\t\t\t /\n\t\t\tthis.$emit('update:name', event.target.value)\n\t\t},\n\n\t\t/\n\t\t Emit when the name form edit confirm button is pressed in order\n\t\t * to change the name.\n\t\t \n\t\t @param {Event} event submit event\n\t\t /\n\t\tonSubmitName(event) {\n\t\t\t// Disable editing\n\t\t\tthis.$emit('update:nameEditable', false)\n\t\t\t/\n\t\t\t Emitted when the name edit input has been submitted\n\t\t\t \n\t\t\t @type {Event}\n\t\t\t /\n\t\t\tthis.$emit('submit-name', event)\n\t\t},\n\t\tonDismissEditing() {\n\t\t\t// Disable editing\n\t\t\tthis.$emit('update:nameEditable', false)\n\t\t\t/\n\t\t\t Emitted when the name edit has been cancelled\n\t\t\t \n\t\t\t @type {Event}\n\t\t\t /\n\t\t\tthis.$emit('dismiss-editing')\n\t\t},\n\t\tonUpdateActive(activeTab) {\n\t\t\t/\n\t\t\t The active tab changed\n\t\t\t \n\t\t\t @type {string}\n\t\t\t /\n\t\t\tthis.$emit('update:active', activeTab)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n// Allows to use transition over a custom CSS property (CSS Variable)\n// Ignored on old browsers resulting in slightly noticeable jump\n@property --app-sidebar-offset {\n syntax: '<length>';\n initial-value: 0;\n inherits: true;\n}\n\n.content {\n\t// A padding between the toggle button and the page border\n\t--app-sidebar-padding: #{$app-navigation-padding};\n\t// A padding between the toggle button and the page border\n\t--app-sidebar-offset: 0;\n\t// Explicitly disable transition by default to enable it only when sidebar animation is active\n\t// !important to override styles from an older version, because it's global non-scoped styles\n\ttransition: --app-sidebar-offset 0ms !important;\n}\n\n// When AppSidebar is animation is active - also apply transition for the toggle button offset\n.content:has(.app-sidebar.slide-right-enter-active),\n.content:has(.app-sidebar.slide-right-leave-active) {\n\ttransition: --app-sidebar-offset var(--animation-quick);\n}\n\n.content:has(.app-sidebar__toggle) {\n\t--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));\n}\n</style>\n\n<style lang=\"scss\" scoped>\n$desc-input-padding: 7px;\n\n// name and subname\n$desc-name-height: 30px;\n$desc-subname-height: 22px;\n$desc-height: $desc-name-height + $desc-subname-height;\n\n$top-buttons-spacing: $app-navigation-padding; // align with app navigation\n\n/\n\tSidebar: to be used within #content\n\tapp-content will be shrinked properly\n/\n.app-sidebar {\n\t--app-sidebar-width: clamp(300px, 27vw, 500px);\n\t--app-sidebar-padding: #{$app-navigation-padding};\n\twidth: var(--app-sidebar-width);\n\n\tz-index: 1500;\n\ttop: 0;\n\tinset-inline-end: 0;\n\tdisplay: flex;\n\toverflow-x: hidden;\n\toverflow-y: auto;\n\tflex-direction: column;\n\tflex-shrink: 0;\n\theight: 100%;\n\tborder-inline-start: 1px solid var(--color-border);\n\tbackground: var(--color-main-background);\n\t// Make close button positioned relative to the header\n\tposition: relative;\n\n\t&__toggle {\n\t\tposition: absolute !important;\n\t\tinset-block-start: var(--app-sidebar-padding);\n\t\tinset-inline-end: var(--app-sidebar-padding);\n\t\t// app-content has z-index 1000 so we need 1001\n\t\tz-index: 1001;\n\t}\n\n\t.app-sidebar-header {\n\t\t// Variable for custom content to be aware of space taken by close button (from top-right corner)\n\t\t--app-sidebar-close-button-offset: calc(var(--default-clickable-area) + #{$top-buttons-spacing});\n\n\t\t> .app-sidebar__close {\n\t\t\tposition: absolute;\n\t\t\tz-index: 100;\n\t\t\ttop: $top-buttons-spacing;\n\t\t\tinset-inline-end: $top-buttons-spacing;\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t}\n\n\t\t// Compact mode only affects a sidebar with a figure\n\t\t&--compact.app-sidebar-header--with-figure {\n\t\t\t.app-sidebar-header__info {\n\t\t\t\tflex-direction: row;\n\n\t\t\t\t.app-sidebar-header__figure {\n\t\t\t\t\t--figure-size: calc($desc-height + var(--app-sidebar-padding));\n\t\t\t\t\tz-index: 2;\n\t\t\t\t\twidth: var(--figure-size);\n\t\t\t\t\theight: var(--figure-size);\n\t\t\t\t\tmargin: calc(var(--app-sidebar-padding) / 2);\n\t\t\t\t\tborder-radius: 3px;\n\t\t\t\t\tflex: 0 0 auto;\n\t\t\t\t}\n\t\t\t\t.app-sidebar-header__desc {\n\t\t\t\t\tpadding-inline-start: 0;\n\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\tmin-width: 0;\n\t\t\t\t\tpadding-inline-end: calc(var(--default-clickable-area) + var(--app-sidebar-close-button-offset));\n\t\t\t\t\tpadding-top: var(--app-sidebar-padding);\n\n\t\t\t\t\t&.app-sidebar-header__desc--without-actions {\n\t\t\t\t\t\tpadding-inline-end: var(--app-sidebar-close-button-offset);\n\t\t\t\t\t}\n\n\t\t\t\t\t.app-sidebar-header__tertiary-actions {\n\t\t\t\t\t\tz-index: 3; // above star\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\ttop: calc(var(--app-sidebar-padding) / 2);\n\t\t\t\t\t\tinset-inline-start: calc(-1 var(--default-clickable-area));\n\t\t\t\t\t\tgap: 0; // override gap\n\t\t\t\t\t}\n\t\t\t\t\t.app-sidebar-header__menu {\n\t\t\t\t\t\ttop: $top-buttons-spacing;\n\t\t\t\t\t\tinset-inline-end: var(--app-sidebar-close-button-offset); // left of the close button\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// sidebar without figure\n\t\t&:not(.app-sidebar-header--with-figure) {\n\t\t\t// align the menu with the close button\n\t\t\t.app-sidebar-header__menu {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: $top-buttons-spacing;\n\t\t\t\tinset-inline-end: var(--app-sidebar-close-button-offset);\n\t\t\t}\n\t\t\t// increase the padding to not overlap the menu\n\t\t\t.app-sidebar-header__desc {\n\t\t\t\tpadding-inline-end: calc(var(--default-clickable-area) + var(--app-sidebar-close-button-offset));\n\n\t\t\t\t&.app-sidebar-header__desc--without-actions {\n\t\t\t\t\tpadding-inline-end: var(--app-sidebar-close-button-offset);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// the container with the figure and the description\n\t\t.app-sidebar-header__info {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\n\t\t// header background\n\t\t&__figure {\n\t\t\twidth: 100%;\n\t\t\theight: 250px;\n\t\t\tmax-height: 250px;\n\t\t\tbackground-repeat: no-repeat;\n\t\t\tbackground-position: center;\n\t\t\tbackground-size: contain;\n\t\t\t&--with-action {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\t\t}\n\n\t\t// description\n\t\t&__desc {\n\t\t\tposition: relative;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\tpadding-inline: var(--app-sidebar-padding);\n\t\t\tpadding-block: #{$top-buttons-spacing} calc(var(--app-sidebar-padding) / 2);\n\t\t\tgap: 0 4px;\n\n\t\t\t// custom overrides\n\t\t\t&--with-tertiary-action {\n\t\t\t\tpadding-inline-start: 6px;\n\t\t\t}\n\n\t\t\t&--editable .app-sidebar-header__mainname-form,\n\t\t\t&--with-subname--editable .app-sidebar-header__mainname-form {\n\t\t\t\tmargin-top: -2px;\n\t\t\t\tmargin-bottom: -2px;\n\t\t\t}\n\n\t\t\t&--with-subname--editable .app-sidebar-header__subname {\n\t\t\t\tmargin-top: -2px;\n\t\t\t}\n\n\t\t\t.app-sidebar-header__tertiary-actions {\n\t\t\t\tdisplay: flex;\n\t\t\t\theight: var(--default-clickable-area);\n\t\t\t\twidth: var(--default-clickable-area);\n\t\t\t\tjustify-content: center;\n\t\t\t\tflex: 0 0 auto;\n\n\t\t\t\t.app-sidebar-header__star {\n\t\t\t\t\t// Override default Button component styles\n\t\t\t\t\tbox-shadow: none;\n\t\t\t\t\t&:not([aria-pressed='true']):hover {\n\t\t\t\t\t\tbox-shadow: none;\n\t\t\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// names\n\t\t\t.app-sidebar-header__name-container {\n\t\t\t\tflex: 1 1 auto;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tjustify-content: center;\n\t\t\t\tmin-width: 0;\n\n\t\t\t\t.app-sidebar-header__mainname-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tmin-height: var(--default-clickable-area);\n\n\t\t\t\t\t// main name\n\t\t\t\t\t.app-sidebar-header__mainname {\n\t\t\t\t\t\tpadding: 0;\n\t\t\t\t\t\tmin-height: 30px;\n\t\t\t\t\t\tfont-size: 20px;\n\t\t\t\t\t\tline-height: $desc-name-height;\n\n\t\t\t\t\t\t// Needs 'deep' as the link is generated by the linkify directive\n\t\t\t\t\t\t&:deep(.linkified) {\n\t\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t\t\ttext-decoration: underline;\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.app-sidebar-header__mainname-form {\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\t\talign-items: center;\n\n\t\t\t\t\t\tinput.app-sidebar-header__mainname-input {\n\t\t\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\tpadding: $desc-input-padding;\n\t\t\t\t\t\t\tfont-size: 20px;\n\t\t\t\t\t\t\tfont-weight: bold;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t// main menu\n\t\t\t\t\t.app-sidebar-header__menu {\n\t\t\t\t\t\tmargin-inline-start: 5px;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// shared between main and subname\n\t\t\t\t.app-sidebar-header__mainname,\n\t\t\t\t.app-sidebar-header__subname {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\t}\n\n\t\t\t\t// subname\n\t\t\t\t.app-sidebar-header__subname {\n\t\t\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\t\t\tfont-size: var(--default-font-size);\n\t\t\t\t\tpadding: 0;\n\n\t\t\t\t\t* {\n\t\t\t\t\t\tvertical-align: text-bottom;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// Hidden a11y fallback\n\t\t.app-sidebar-header__mainname--hidden {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tinset-inline-start: 0;\n\t\t\tmargin: 0;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\t// sidebar description slot\n\t\t&__description {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tmargin: 0 10px;\n\t\t}\n\t}\n}\n\n// Make the sidebar full-width on small screens\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-sidebar {\n\t\tposition: absolute;\n\t\t--app-sidebar-width: 100vw;\n\t}\n}\n\n.slide-right-leave-active,\n.slide-right-enter-active {\n\ttransition-duration: var(--animation-quick);\n\ttransition-property: margin-inline-end;\n}\n\n.slide-right-enter-to,\n.slide-right-leave {\n\tmargin-inline-end: 0;\n}\n\n.slide-right-enter-from,\n.slide-right-leave-to {\n\tmargin-inline-end: calc(-1 * var(--app-sidebar-width));\n}\n</style>\n\n<style lang=\"scss\">\n// ! slots specific designs, cannot be scoped\n// if any button inside the description slot, increase visual padding\n.app-sidebar-header__description {\n\tbutton, .button,\n\tinput[type='button'],\n\tinput[type='submit'],\n\tinput[type='reset'] {\n\t\tpadding: 6px 22px;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","_hoisted_1","_hoisted_2","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_hoisted_4","_createCommentVNode","NcVNodes","_openBlock","_withKeys","_withModifiers","_Fragment","_renderList","_createBlock","_normalizeClass","_createVNode","_withCtx","_toDisplayString","_renderSlot","NcAppSidebarHeader","Focus","ClickOutside","_Transition","_Teleport","_normalizeStyle","_createTextVNode"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBA,MAAKA,cAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO,CAAC,OAAO;AAAA,EACf,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,IACP;AAAA,IACD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IACD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;AApCA,MAAAC,eAAA,CAAA,eAAA,YAAA;AAAA,MAAAC,eAAA,CAAA,QAAA,SAAA,QAAA;AAYY,MAAAC,eAAA,EAAA,GAAE,4FAA2F;uBAZzG,KAAA,EAAA;;sBACEC,mBAeO,QAfPC,WAAc,KAAM,QAAA;AAAA,IACb,eAAa,OAAK,QAAA,OAAA;AAAA,IAClB,cAAY,OAAK;AAAA,IAClB,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAK,MAAA,SAAU,MAAM;AAAA;kBACjCD,mBAQM,OAAA;AAAA,MARA,MAAM,OAAS;AAAA,MAChB,OAAM;AAAA,MACL,OAAO,OAAI;AAAA,MACX,QAAQ,OAAI;AAAA,MACb,SAAQ;AAAA;MACXE,mBAEO,QAFPH,cAEO;AAAA,QADQ,OAAK,sBAAlBC,mBAAuC,SAb/CG,8BAa+B,OAAK,KAAA,GAAA,CAAA,KAbpCC,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA,GAAAN,YAAA;AAAA,EAAA,GAAA,IAAAD,YAAA;;;ACoBA,MAAKD,cAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO,CAAC,OAAO;AAAA,EACf,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,IACP;AAAA,IACD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IACD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;AApCA,MAAAC,eAAA,CAAA,eAAA,YAAA;AAAA,MAAAC,eAAA,CAAA,QAAA,SAAA,QAAA;AAYY,MAAAC,eAAA,EAAA,GAAE,uGAAsG;uBAZpH,KAAA,EAAA;;sBACEC,mBAeO,QAfPC,WAAc,KAAM,QAAA;AAAA,IACb,eAAa,OAAK,QAAA,OAAA;AAAA,IAClB,cAAY,OAAK;AAAA,IAClB,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAK,MAAA,SAAU,MAAM;AAAA;kBACjCD,mBAQM,OAAA;AAAA,MARA,MAAM,OAAS;AAAA,MAChB,OAAM;AAAA,MACL,OAAO,OAAI;AAAA,MACX,QAAQ,OAAI;AAAA,MACb,SAAQ;AAAA;MACXE,mBAEO,QAFPH,cAEO;AAAA,QADQ,OAAK,sBAAlBC,mBAAuC,SAb/CG,8BAa+B,OAAK,KAAA,GAAA,CAAA,KAbpCC,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA,GAAAN,YAAA;AAAA,EAAA,GAAA,IAAAD,YAAA;;;ACoBA,MAAKD,cAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO,CAAC,OAAO;AAAA,EACf,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,IACP;AAAA,IACD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IACD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;AApCA,MAAAC,eAAA,CAAA,eAAA,YAAA;AAAA,MAAAC,eAAA,CAAA,QAAA,SAAA,QAAA;AAYY,MAAAC,eAAA,EAAA,GAAE,kNAAiN;uBAZ/N,KAAA,EAAA;;sBACEC,mBAeO,QAfPC,WAAc,KAAM,QAAA;AAAA,IACb,eAAa,OAAK,QAAA,OAAA;AAAA,IAClB,cAAY,OAAK;AAAA,IAClB,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAK,MAAA,SAAU,MAAM;AAAA;kBACjCD,mBAQM,OAAA;AAAA,MARA,MAAM,OAAS;AAAA,MAChB,OAAM;AAAA,MACL,OAAO,OAAI;AAAA,MACX,QAAQ,OAAI;AAAA,MACb,SAAQ;AAAA;MACXE,mBAEO,QAFPH,cAEO;AAAA,QADQ,OAAK,sBAAlBC,mBAAuC,SAb/CG,8BAa+B,OAAK,KAAA,GAAA,CAAA,KAbpCC,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA,GAAAN,YAAA;AAAA,EAAA,GAAA,IAAAD,YAAA;;;AC2DA,MAAKD,cAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA,UAAAS;AAAAA,EACA;AAAA,EAED,UAAU;AACT,WAAO;AAAA,MACN,aAAa,KAAK;AAAA,MAClB,eAAe,KAAK;AAAA;AAAA,MAEpB,cAAc,MAAM,KAAK;AAAA;AAAA,MAEzB,gBAAgB,MAAM,KAAK;AAAA,IAC5B;AAAA,EACA;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,QAAQ;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,OAAO,CAAC,eAAe;AAAA,EAEvB,OAAO;AACN,WAAO;AAAA;AAAA;AAAA;AAAA,MAIN,MAAM,CAAE;AAAA;AAAA;AAAA;AAAA,MAIR,WAAW;AAAA,IACZ;AAAA,EACA;AAAA,EAED,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMT,kBAAkB;AACjB,aAAO,KAAK,KAAK,SAAS;AAAA,IAC1B;AAAA,IAED,mBAAmB;AAClB,aAAO,KAAK,aAAa,KAAK,KAAK,WAAW;AAAA,IAC9C;AAAA,IAED,kBAAkB;AACjB,aAAO,KAAK,KAAK,UAAU,CAAC,QAAQ,IAAI,OAAO,KAAK,SAAS;AAAA,IAC7D;AAAA,EACD;AAAA,EAED,OAAO;AAAA,IACN,OAAO,QAAQ;AAEd,UAAI,WAAW,KAAK,WAAW;AAC9B,aAAK,aAAY;AAAA,MAClB;AAAA,IACA;AAAA,EACD;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOR,UAAU,IAAI;AACb,WAAK,YAAY;AAIjB,WAAK,MAAM,iBAAiB,KAAK,SAAS;AAAA,IAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,mBAAmB;AAClB,UAAI,KAAK,kBAAkB,GAAG;AAC7B,aAAK,UAAU,KAAK,KAAK,KAAK,kBAAkB,CAAC,EAAE,EAAE;AAAA,MACtD;AACA,WAAK,eAAc;AAAA,IACnB;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,eAAe;AACd,UAAI,KAAK,kBAAkB,KAAK,KAAK,SAAS,GAAG;AAChD,aAAK,UAAU,KAAK,KAAK,KAAK,kBAAkB,CAAC,EAAE,EAAE;AAAA,MACtD;AACA,WAAK,eAAc;AAAA,IACnB;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,gBAAgB;AACf,WAAK,UAAU,KAAK,KAAK,CAAC,EAAE,EAAE;AAC9B,WAAK,eAAc;AAAA,IACnB;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,eAAe;AACd,WAAK,UAAU,KAAK,KAAK,KAAK,KAAK,SAAS,CAAC,EAAE,EAAE;AACjD,WAAK,eAAc;AAAA,IACnB;AAAA;AAAA;AAAA;AAAA,IAKD,iBAAiB;AAChB,WAAK,IAAI,cAAc,eAAe,KAAK,SAAS,EAAE,EAAE,MAAK;AAAA,IAC7D;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,wBAAwB;AACvB,WAAK,IAAI,cAAc,UAAU,KAAK,SAAS,EAAE,MAAK;AAAA,IACtD;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AACd,WAAK,YAAY,KAAK,UACnB,KAAK,KAAK,KAAK,SAAO,IAAI,OAAO,KAAK,MAAM,IAC5C,KAAK,SACL,KAAK,KAAK,SAAS,IAClB,KAAK,KAAK,CAAC,EAAE,KACb;AAAA,IACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,YAAY,KAAK;AAChB,WAAK,KAAK,KAAK,GAAG;AAClB,WAAK,KAAK,KAAK,CAAC,GAAG,MAAM;AACxB,YAAI,EAAE,UAAU,EAAE,OAAO;AACxB,iBAAO,GAAG,KAAK,mBAAmB,EAAE,MAAM,EAAE,IAAI;AAAA,QACjD;AACA,eAAO,EAAE,QAAQ,EAAE;AAAA,MACnB,CAAA;AACD,WAAK,aAAY;AAAA,IACjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,cAAc,IAAI;AACjB,YAAM,WAAW,KAAK,KAAK,UAAU,CAAC,QAAQ,IAAI,OAAO,EAAE;AAC3D,UAAI,aAAa,IAAI;AACpB,aAAK,KAAK,OAAO,UAAU,CAAC;AAAA,MAC7B;AACA,UAAI,KAAK,cAAc,IAAI;AAC1B,aAAK,aAAY;AAAA,MAClB;AAAA,IACA;AAAA,EACD;AACF;AAnPM,MAAAR,eAAA,EAAA,OAAM,mBAAkB;AA2BpB,MAAAC,eAAA,EAAA,OAAM,gCAA+B;;;;AA3B9C,SAAAQ,UAAA,GAAAN,mBA4CM,OA5CNH,cA4CM;AAAA,IAzCM,SAAA,mBAAmB,SAAgB,iCAA9CG,mBAiCM,OAAA;AAAA,MA5CR,KAAA;AAAA,MAYG,MAAK;AAAA,MACL,OAAM;AAAA,MACL,WAAO;AAAA,QAdX,OAAA,CAAA,MAAA,OAAA,CAAA,IAAAO,SAAAC,2BAcqC,SAAgB,oBAAA,SAAA,iBAAA,GAAA,IAAA,GAAA,CAAA,SAAA,WAAA,MAAA,CAAA,GAAA,CAAA,MAAA,CAAA;AAAA,QAdrD,OAAA,CAAA,MAAA,OAAA,CAAA,IAAAD,SAAAC,2BAesC,SAAY,gBAAA,SAAA,aAAA,GAAA,IAAA,GAAA,CAAA,SAAA,WAAA,MAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA,QAflD,OAAA,CAAA,MAAA,OAAA,CAAA,IAAAD,SAAAC,2BAgBoC,SAAqB,yBAAA,SAAA,sBAAA,GAAA,IAAA,GAAA,CAAA,SAAA,WAAA,MAAA,CAAA,GAAA,CAAA,KAAA,CAAA;AAAA,QAhBzD,OAAA,CAAA,MAAA,OAAA,CAAA,IAAAD,SAAAC,2BAiBqC,SAAa,iBAAA,SAAA,cAAA,GAAA,IAAA,GAAA,CAAA,SAAA,WAAA,MAAA,CAAA,GAAA,CAAA,MAAA,CAAA;AAAA,QAjBlD,OAAA,CAAA,MAAA,OAAA,CAAA,IAAAD,SAAAC,2BAkBoC,SAAY,gBAAA,SAAA,aAAA,GAAA,IAAA,GAAA,CAAA,SAAA,WAAA,MAAA,CAAA,GAAA,CAAA,KAAA,CAAA;AAAA,QAlBhD,OAAA,CAAA,MAAA,OAAA,CAAA,IAAAD,SAAAC,2BAmBwC,SAAa,iBAAA,SAAA,cAAA,GAAA,IAAA,GAAA,CAAA,SAAA,WAAA,MAAA,CAAA,GAAA,CAAA,SAAA,CAAA;AAAA,QAnBrD,OAAA,CAAA,MAAA,OAAA,CAAA,IAAAD,SAAAC,2BAoB0C,SAAY,gBAAA,SAAA,aAAA,GAAA,IAAA,GAAA,CAAA,SAAA,WAAA,MAAA,CAAA,GAAA,CAAA,WAAA,CAAA;AAAA;;OACnDF,UAAA,IAAA,GAAAN,mBAsBwBS,UA3C3B,MAAAC,WAqBwC,MAAI,MArB5C,CAqBiC,QAAG;4BAAjCC,YAsBwB,kCAAA;AAAA,UArBtB,KAAK,IAAI;AAAA,UACT,iBAAa,OAAS,IAAI,EAAE;AAAA,UAC5B,iBAAe,OAAO,oBAAc,IAAI,EAAE;AAAA,UAC1C,kBAAgB;AAAA,UAChB,eAAa,MAAA,cAAc,IAAI;AAAA,UAC/B,cAAU,cAAgB,IAAI,EAAE;AAAA,UAChC,UAAU,MAAA,cAAc,IAAI,KAAE,IAAA;AAAA,UAC/B,0BAAuB;AAAA,UACvB,OA9BJC,gBA8BU,yBAAuB,EAAA,QACX,IAAI,OAAO,MAAS,UAAA,CAAA,CAAA;AAAA,UACtC,MAAK;AAAA,UACL,MAAK;AAAA,UACJ,uBAAoB,YAAA,SAAA,UAAU,IAAI,EAAE;AAAA;UAI1B,cACV,MAEW;AAAA,YAFXC,YAEW,qBAAA;AAAA,cAFA,QAAQ,IAAI,WAAU;AAAA;cAvCtC,SAAAC,QAwCM,MAA6D;AAAA,gBAA7DZ,mBAA6D,QAAA;AAAA,kBAAvD,OAxCZU,eAwCkB,CAAA,8BAAqC,IAAI,IAAI,CAAA;AAAA;;cAxC/D,GAAA;AAAA;;UAAA,SAAAE,QAmCI,MAEO;AAAA,YAFPZ,mBAEO,QAFPJ,cACIiB,gBAAA,IAAI,IAAI,GAAA,CAAA;AAAA;UApChB,GAAA;AAAA;;cAAAX,mBAAA,IAAA,IAAA;AAAA,IA+CEF,mBAIM,OAAA;AAAA,MAJA,OA/CRU,eAAA,CAAA,EAAA,uCA+CuD,SAAe,gBAAA,GAC7D,2BAA2B,CAAA;AAAA;MAEjCI,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;;;AC8qBX,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA,oBAAAC;AAAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAED,YAAY;AAAA,WACXC;AAAAA,kBACAC;AAAAA,EACA;AAAA,EAED,QAAQ;AAAA,IACP,mBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,OAAO;AAAA,IACN,QAAQ;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,IACD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,IACD,iBAAiB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,IACD,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,OAAO;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,eAAe;AAAA,MACd,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,OAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAED,QAAQ;AACP,UAAM,YAAY,IAAI,IAAI;AAC1B,YAAQ,2BAA2B,SAAS;AAE5C,WAAO;AAAA,MACN,KAAK,gBAAiB;AAAA,MACtB,UAAU,iBAAkB;AAAA,MAC5B;AAAA,IACD;AAAA,EACA;AAAA,EAED,OAAO;AACN,WAAO;AAAA,MACN,sBAAsB,EAAE,aAAa;AAAA,MACrC,iBAAiB,EAAE,eAAe;AAAA,MAClC,oBAAoB,EAAE,UAAU;AAAA,MAChC,WAAW,KAAK;AAAA,MAChB,WAAW;AAAA,MACX,sBAAsB;AAAA,IACvB;AAAA,EACA;AAAA,EAED,UAAU;AAAA,IACT,UAAU;AACT,aAAO,KAAK,cAAc;AAAA,IAC1B;AAAA,IACD,yBAAyB;AACxB,aAAO,CAAC,CAAC,KAAK,OAAO;AAAA,IACrB;AAAA,EACD;AAAA,EAED,OAAO;AAAA,IACN,UAAU;AACT,WAAK,YAAY,KAAK;AAAA,IACtB;AAAA,IAED,WAAW;AACV,WAAK,gBAAe;AAAA,IACpB;AAAA,IAED,OAAO;AACN,WAAK,uCAAsC;AAAA,IAC3C;AAAA,EACD;AAAA,EAED,UAAU;AACT,SAAK,6BAA4B;AAEjC,SAAK,uCAAsC;AAAA,EAC3C;AAAA,EAED,gBAAgB;AAEf,SAAK,MAAM,QAAQ;AACnB,SAAK,WAAW,WAAU;AAAA,EAC1B;AAAA,EAED,SAAS;AAAA,IACR;AAAA,IAEA;AAAA,IAEA,+BAA+B;AAE9B,UAAI,SAAS,iBAAiB,SAAS,kBAAkB,SAAS,MAAM;AACvE,aAAK,uBAAuB,SAAS;AAIrC,YAAI,KAAK,qBAAqB,aAAa,MAAM,MAAM,YAAY;AAClE,gBAAM,OAAO,KAAK,qBAAqB,QAAQ,eAAe;AAC9D,cAAI,MAAM;AACT,kBAAM,cAAc,SAAS,cAAc,mBAAmB,KAAK,EAAE,IAAI;AACzE,iBAAK,uBAAuB;AAAA,UAC7B;AAAA,QACD;AAAA,MACD;AAAA,IACA;AAAA,IAED,gBAAgB;AACf,UAAI,KAAK,WAAW;AACnB;AAAA,MACD;AAEA,WAAK,YAAY,gBAAgB;AAAA;AAAA,QAEhC,KAAK,MAAM;AAAA;AAAA,QAEX,SAAS,cAAc,SAAS;AAAA,MACjC,GAAG;AAAA,QACF,mBAAmB;AAAA,QACnB,eAAe,KAAK,MAAM,YAAY;AAAA,QACtC,WAAW,aAAc;AAAA,QACzB,mBAAmB;AAAA,MACnB,CAAA;AAAA,IACD;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AACjB,UAAI,KAAK,QAAQ,KAAK,UAAU;AAC/B,aAAK,cAAa;AAClB,aAAK,UAAU,SAAQ;AAAA,aACjB;AACN,aAAK,WAAW,WAAU;AAAA,MAC3B;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAa,OAAO;AACnB,UAAI,KAAK,UAAU;AAClB,cAAM,gBAAe;AACrB,aAAK,aAAY;AAAA,MAClB;AAAA,IACA;AAAA,IAED,aAAa,SAAS;AAErB,UAAI,KAAK,sBAAsB;AAC9B,aAAK,MAAK;AAAA,MACX;AAEA,WAAK,gBAAe;AAOpB,WAAK,MAAM,UAAU,OAAO;AAAA,IAC5B;AAAA,IACD,aAAa,SAAS;AAMrB,WAAK,MAAM,UAAU,OAAO;AAE5B,WAAK,gBAAe;AAGpB,WAAK,sBAAsB,MAAM,EAAE,cAAc,KAAM,CAAA;AACvD,WAAK,uBAAuB;AAAA,IAC5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAa,GAAG;AAMf,WAAK,MAAM,SAAS,CAAC;AAKrB,WAAK,MAAM,eAAe,KAAK;AAAA,IAC/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,cAAc,GAAG;AAOhB,WAAK,MAAM,gBAAgB,CAAC;AAAA,IAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,gBAAgB;AACf,WAAK,YAAY,CAAC,KAAK;AAMvB,WAAK,MAAM,kBAAkB,KAAK,SAAS;AAAA,IAC3C;AAAA,IAED,MAAM,WAAW;AAMhB,WAAK,MAAM,uBAAuB,IAAI;AAEtC,UAAI,KAAK,cAAc;AACtB,cAAM,KAAK,UAAS;AACpB,aAAK,MAAM,UAAU,MAAK;AAAA,MAC3B;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AACP,UAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,UAAU;AACjC,aAAK,MAAM,OAAO,IAAI,MAAK;AAC3B;AAAA,MACD;AAEA,UAAI;AACH,aAAK,UAAU,MAAK;AAAA,MACrB,QAAQ;AACP,aAAK,wGAAwG;AAAA,MAC9G;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,wBAAwB;AAEvB,WAAK,6BAA4B;AAEjC,WAAK,MAAM,KAAK,sBAAqB;AAAA,IACrC;AAAA;AAAA;AAAA;AAAA,IAKD,yCAAyC;AAExC,UAAI,KAAK,SAAS,SAAS,CAAC,KAAK,YAAY,CAAC,KAAK,mBAAmB;AACrE,gBAAQ;AAAA,UACP;AAAA,QAED;AAAA,MACD;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,YAAY,OAAO;AAMlB,WAAK,MAAM,eAAe,MAAM,OAAO,KAAK;AAAA,IAC5C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,aAAa,OAAO;AAEnB,WAAK,MAAM,uBAAuB,KAAK;AAMvC,WAAK,MAAM,eAAe,KAAK;AAAA,IAC/B;AAAA,IACD,mBAAmB;AAElB,WAAK,MAAM,uBAAuB,KAAK;AAMvC,WAAK,MAAM,iBAAiB;AAAA,IAC5B;AAAA,IACD,eAAe,WAAW;AAMzB,WAAK,MAAM,iBAAiB,SAAS;AAAA,IACrC;AAAA,EACD;AACF;AAntCA,MAAA,aAAA,CAAA,iBAAA;AAmkBU,MAAA,aAAA,EAAA,OAAM,2BAA0B;;EAnkB1C,KAAA;AAAA,EA4lB8E,OAAM;;AAkBxE,MAAA,aAAA,EAAA,OAAM,qCAAoC;AACzC,MAAA,aAAA,EAAA,OAAM,yCAAwC;AA/mB3D,MAAA,aAAA,CAAA,eAAA,OAAA;AAAA,MAAA,aAAA,CAAA,OAAA;;EAAA,KAAA;AAAA,EAkrBkE,OAAM;;;;;;;;;;;;;;;;sBA3JvER,YA8KaS,YAAA;AAAA,IA9KD,QAAA;AAAA,IACX,MAAK;AAAA,IACJ,cAAa,SAAY;AAAA,IACzB,cAAa,SAAY;AAAA;IA1hB5B,SAAAN,QA2hBE,MAyKQ;AAAA,qBAzKRZ,mBAyKQ,SAAA;AAAA,QAxKP,IAAG;AAAA,QACH,KAAI;AAAA,QACJ,OAAM;AAAA,QACL,sCAAoC,OAAG,GAAA;AAAA,QACvC,WAAO,OAAA,CAAA,MAAA,OAAA,CAAA,IAhiBXK,sBAgiBiB,SAAY,gBAAA,SAAA,aAAA,GAAA,IAAA,GAAA,CAAA,KAAA,CAAA;AAAA;QAOV,SAAiB,qBAAA,CAAK,OAAI,QAAA,CAAK,OAAQ,yBAAvDI,YAeWU,UAAA;AAAA,UAtjBd,KAAA;AAAA,UAuiB6D,IAAI,SAAiB;AAAA;UAC9ER,YAaW,qBAbXZ,WAaW;AAAA,YAbD,KAAI;AAAA,YACZ,cAAY,SAAC,EAAA,cAAA;AAAA,YACd,OAAK,CAAC,uBACE,OAAa,aAAA;AAAA,YACrB,SAAQ;AAAA,aACA,OAAW,aAAA;AAAA,YAClB,+CAAO,KAAK,MAAA,eAAA,IAAA;AAAA;YACF,cAEV,MAEO;AAAA,cAFPe,WAEO,gCAFP,MAEO;AAAA,gBADNH,YAA4B,0BAAA,EAAZ,MAAM,GAAE,CAAA;AAAA;;YAljB/B,GAAA;AAAA;yBAAAT,mBAAA,IAAA,IAAA;AAAA,QAwjBGF,mBA6HS,UAAA;AAAA,UA7HA,OAxjBZU,eAAA,CAAA;AAAA,YAwjB6D,mCAAA,SAAA,gBAAgB,KAAA,OAAO,eAAe,OAAU;AAAA,2CAAsC,OAAO;AAAA,aAIhJ,oBAAoB,CAAA;AAAA;WAKb,OAAK,QAAlBI,WA+FO,KAAA,QAAA,QAAA,EAhqBX,KAAA,EAAA,GAikBI,MA+FO;AAAA,YA7FNd,mBA4FM,OA5FN,YA4FM;AAAA,cA1FO,SAAA,gBAAgB,KAAA,OAAO,eAAe,OAAU,2BAA5DF,mBAYM,OAAA;AAAA,gBAjlBZ,KAAA;AAAA,gBAskBQ,OAtkBRY,eAAA,CAAA;AAAA,6DAskBoE,SAAsB;AAAA,mBAG7E,4BAA4B,CAAA;AAAA,gBACjC,OA1kBRU,eAAA;AAAA,0CA0kBiD,OAAU,UAAA;AAAA;gBAGpD,UAAS;AAAA,gBACR,gDAAO,SAAa,iBAAA,SAAA,cAAA,GAAA,IAAA;AAAA,gBACpB,WAAO,OAAA,CAAA,MAAA,OAAA,CAAA,IA/kBff,sBA+kBuB,SAAa,iBAAA,SAAA,cAAA,GAAA,IAAA,GAAA,CAAA,OAAA,CAAA;AAAA;gBAC7BS,WAA6D,KAAA,QAAA,UAAA,EAAvD,OAAM,iCAAgC,GAAA,QAAA,IAAA;AAAA,wBAhlBnDZ,mBAAA,IAAA,IAAA;AAAA,cAolBMF,mBA0EM,OAAA;AAAA,gBA1EA,OAplBZU,eAAA,CAAA;AAAA,oEAolB+E,SAAO,WAAI,SAAe,gBAAC,KAAM,OAAA,kBAAA,KAAA;AAAA,kBAAyE,sCAAA,OAAA,iBAAiB,OAAO;AAAA,kBAA8D,oDAAA,OAAA,gBAAgB,OAAO;AAAA,kBAAwD,6CAAA,CAAA,SAAA,gBAAgB,KAAM,OAAA,mBAAA,KAAA;AAAA,mBAMvW,0BAA0B,CAAA;AAAA;gBAErB,SAAO,WAAI,SAAe,gBAAC,KAAM,OAAA,kBAAA,KAAA,KAA5CN,aAAAN,mBAeM,OAfN,YAeM;AAAA,kBAdLgB,WAaO,qCAbP,MAaO;AAAA,oBAZU,SAAO,wBAAvBL,YAWW,qBAAA;AAAA,sBAzmBpB,KAAA;AAAA,sBA+lBW,cAAY,MAAkB;AAAA,sBAC9B,SAAS,MAAS;AAAA,sBACnB,OAAM;AAAA,sBACN,SAAQ;AAAA,sBACP,SAnmBXH,cAmmB0B,SAAa,eAAA,CAAA,SAAA,CAAA;AAAA;sBAClB,cACV,MAAoC;AAAA,wBAAf,OAAW,eAAhCF,UAAA,GAAAK,YAAoC,4BArmB/C,KAAA,EAAA,CAAA,KAsmBgC,MAAS,0BAA9BA,YAA6C,qBAAA;AAAA,0BAtmBxD,KAAA;AAAA,0BAsmB4C,MAAM;AAAA,4CACvCA,YAAqC,4BAAA;AAAA,0BAvmBhD,KAAA;AAAA,0BAumBoC,MAAM;AAAA;;sBAvmB1C,GAAA;AAAA,mEAAAP,mBAAA,IAAA,IAAA;AAAA;sBAAAA,mBAAA,IAAA,IAAA;AAAA,gBA8mBOF,mBA+CM,OA/CN,YA+CM;AAAA,kBA9CLA,mBAoCM,OApCN,YAoCM;AAAA,mCAlCLW,YAM0B,+BAAA;AAAA,sBALzB,OAAM;AAAA,sBACL,MAAA,OAAI;AAAA,sBACJ,SAAS,OAAW;AAAA,sBACpB,OAAA,OAAK;AAAA,sBACL,UAAU,OAAY,eAAA,IAAA;AAAA,sBACtB,SAvnBXL,cAunBuB,SAAQ,UAAA,CAAA,MAAA,CAAA;AAAA;+BANO,OAAY,YAAA;AAAA;oBAOzB,OAAY,4CAC3BR,mBAkBO,QAAA;AAAA,sBA3oBjB,KAAA;AAAA,sBA0nBW,OAAM;AAAA,sBACL,UAAM,OAAA,CAAA,MAAA,OAAA,CAAA,IA3nBlBQ,2BA2nB4B,SAAY,gBAAA,SAAA,aAAA,GAAA,IAAA,GAAA,CAAA,SAAA,CAAA;AAAA;qCAC7BN,mBAOsB,SAAA;AAAA,wBAPf,KAAI;AAAA,wBAEV,OAAM;AAAA,wBACN,MAAK;AAAA,wBACJ,aAAa,OAAe;AAAA,wBAC5B,OAAO,OAAI;AAAA,wBACX,WAAO,OAAA,CAAA,MAAA,OAAA,CAAA,IAloBpBK,SAAAC,cAAA,IAAA,SAkoB+B,SAAgB,oBAAA,SAAA,iBAAA,GAAA,IAAA,GAAA,CAAA,MAAA,CAAA,GAAA,CAAA,KAAA,CAAA;AAAA,wBAClC,gDAAO,SAAW,eAAA,SAAA,YAAA,GAAA,IAAA;AAAA,sBAnoB/B,GAAA,MAAA,IAAA,UAAA,GAAA;AAAA;;sBAooBWK,YAMW,qBAAA;AAAA,wBANA,cAAY,MAAoB;AAAA,wBAC1C,MAAK;AAAA,wBACL,SAAQ;AAAA;wBACG,cACV,MAA6B;AAAA,0BAA7BA,YAA6B,2BAAA,EAAZ,MAAM,GAAE,CAAA;AAAA;wBAxoBtC,GAAA;AAAA;;uDAynBuC,SAAY,aAAA,CAAA;AAAA,yBAznBnDT,mBAAA,IAAA,IAAA;AAAA,oBA8oB0B,SAAA,gBAAgB,KAAM,OAAA,mBAAA,IAAA,CAAA,kBAAvCO,YAIY,sBAAA;AAAA,sBAlpBrB,KAAA;AAAA,sBA+oBU,OAAM;AAAA,sBACL,cAAY,OAAS;AAAA;sBAhpBhC,SAAAG,QAipBU,MAAiC;AAAA,wBAAjCE,WAAiC,KAAA,QAAA,qBAAA,CAAA,GAAA,QAAA,IAAA;AAAA;sBAjpB3C,GAAA;AAAA,6CAAAZ,mBAAA,IAAA,IAAA;AAAA;kBAqpBiB,OAAO,QAAC,KAAI,MAAA,MAAa,KAAM,OAAA,SAAA,kBAAxCJ,mBAOI,KAAA;AAAA,oBA5pBZ,KAAA;AAAA,oBAspBU,OAAO,OAAQ,YAAI;AAAA,oBACpB,OAAM;AAAA;oBAENgB,WAEO,4BAFP,MAEO;AAAA,sBA3pBhBO,gBAAAR,gBA0pBa,OAAO,OAAA,GAAA,CAAA;AAAA;kBA1pBpB,GAAA,GAAA,UAAA,KAAAX,mBAAA,IAAA,IAAA;AAAA;;;mCAkqBIO,YAGiB,+BAAA;AAAA,YArqBrB,KAAA;AAAA,YAmqBK,OAAM;AAAA,YACL,MAAA,OAAI;AAAA,YACL,UAAS;AAAA;UAEVE,YASW,qBAAA;AAAA,YATD,KAAI;AAAA,YACZ,cAAY,MAAe;AAAA,YAC3B,OAAO,MAAe;AAAA,YACvB,OAAM;AAAA,YACN,SAAQ;AAAA,YACP,SA5qBNL,cA4qBqB,SAAY,cAAA,CAAA,SAAA,CAAA;AAAA;YACjB,cACV,MAAwB;AAAA,cAAxBK,YAAwB,sBAAA,EAAZ,MAAM,GAAE,CAAA;AAAA;YA9qB1B,GAAA;AAAA;UAkrBe,SAAA,gBAAgB,KAAA,OAAO,qBAAqB,OAAK,SAA5DP,aAAAN,mBAEM,OAFN,YAEM;AAAA,YADLgB,WAA2B,KAAA,QAAA,eAAA,CAAA,GAAA,QAAA,IAAA;AAAA,gBAnrBhCZ,mBAAA,IAAA,IAAA;AAAA;uBAurBGS,YAMmB,6BAAA;AAAA,UALlB,KAAI;AAAA,UACH,QAAQ,OAAM;AAAA,UACd,cAAY,OAAS;AAAA,UACrB,mBAAe,SAAc;AAAA;UA3rBlC,SAAAC,QA4rBI,MAAQ;AAAA,YAARE,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA;UA5rBZ,GAAA;AAAA;mBAurB8B,OAAO,OAAA;AAAA;QAQZ,OAAO,WAA7BV,UAAA,GAAAK,YAIiB,6BAnsBpB,KAAA,EAAA,GAAA;AAAA,UAgsBe,cACV,MAA4B;AAAA,YAA5BE,YAA4B,0BAAA,EAAZ,MAAM,GAAE,CAAA;AAAA;UAjsB7B,GAAA;AAAA,cAAAT,mBAAA,IAAA,IAAA;AAAA,MAAA,GAAA,IAAA,UAAA,GAAA;AAAA,gBA2hBiB,OAAI,IAAA;AAAA;;IA3hBrB,GAAA;AAAA;;;","x_google_ignoreList":[0,1,2]}
1	+ {"version":3,"file":"NcAppSidebar-DWRmX_-Y.mjs","sources":["../../node_modules/vue-material-design-icons/DockRight.vue","../../node_modules/vue-material-design-icons/Star.vue","../../node_modules/vue-material-design-icons/StarOutline.vue","../../src/components/NcAppSidebar/NcAppSidebarTabs.vue","../../src/components/NcAppSidebar/NcAppSidebar.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon dock-right-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V6A2 2 0 0 0 20 4M15 18H4V6H15Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"DockRightIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon star-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"StarIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon star-outline-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"StarOutlineIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<!-- Follows the tab aria guidelines\n\thttps://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html -->\n<template>\n\t<div class=\"app-sidebar-tabs\">\n\t\t<!-- tabs navigation -->\n\t\t<!-- 33 and 34 code is for page up and page down -->\n\t\t<div v-if=\"hasMultipleTabs \|\| showForSingleTab\"\n\t\t\trole=\"tablist\"\n\t\t\tclass=\"app-sidebar-tabs__nav\"\n\t\t\t@keydown.left.exact.prevent.stop=\"focusPreviousTab\"\n\t\t\t@keydown.right.exact.prevent.stop=\"focusNextTab\"\n\t\t\t@keydown.tab.exact.prevent.stop=\"focusActiveTabContent\"\n\t\t\t@keydown.home.exact.prevent.stop=\"focusFirstTab\"\n\t\t\t@keydown.end.exact.prevent.stop=\"focusLastTab\"\n\t\t\t@keydown.page-up.exact.prevent.stop=\"focusFirstTab\"\n\t\t\t@keydown.page-down.exact.prevent.stop=\"focusLastTab\">\n\t\t\t<NcCheckboxRadioSwitch v-for=\"tab in tabs\"\n\t\t\t\t:key=\"tab.id\"\n\t\t\t\t:aria-controls=\"`tab-${tab.id}`\"\n\t\t\t\t:aria-selected=\"String(activeTab === tab.id)\"\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\t:model-value=\"activeTab === tab.id\"\n\t\t\t\t:wrapper-id=\"`tab-button-${tab.id}`\"\n\t\t\t\t:tabindex=\"activeTab === tab.id ? 0 : -1\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\"\n\t\t\t\tclass=\"app-sidebar-tabs__tab\"\n\t\t\t\t:class=\"{ active: tab.id === activeTab }\"\n\t\t\t\trole=\"tab\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t@update:model-value=\"setActive(tab.id)\">\n\t\t\t\t<span class=\"app-sidebar-tabs__tab-caption\">\n\t\t\t\t\t{{ tab.name }}\n\t\t\t\t</span>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcVNodes :vnodes=\"tab.renderIcon()\">\n\t\t\t\t\t\t<span class=\"app-sidebar-tabs__tab-icon\" :class=\"tab.icon\" />\n\t\t\t\t\t</NcVNodes>\n\t\t\t\t</template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\n\t\t<!-- tabs content -->\n\t\t<div :class=\"{'app-sidebar-tabs__content--multiple': hasMultipleTabs}\"\n\t\t\tclass=\"app-sidebar-tabs__content\">\n\t\t\t<!-- @slot Tabs content - NcAppSidebarTab components or any content if there is no tabs -->\n\t\t\t<slot />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/index.js'\nimport NcVNodes from '../NcVNodes/index.ts'\n\nexport default {\n\tname: 'NcAppSidebarTabs',\n\n\tcomponents: {\n\t\tNcCheckboxRadioSwitch,\n\t\tNcVNodes,\n\t},\n\n\tprovide() {\n\t\treturn {\n\t\t\tregisterTab: this.registerTab,\n\t\t\tunregisterTab: this.unregisterTab,\n\t\t\t// Getter as an alternative to Vue 2.7 computed(() => this.activeTab)\n\t\t\tgetActiveTab: () => this.activeTab,\n\t\t\t// Used to check whether the tab header is shown so the tabs can reference the tab header for `aria-labelledby` or not\n\t\t\tisTablistShown: () => this.hasMultipleTabs,\n\t\t}\n\t},\n\n\tprops: {\n\t\t/*\n\t\t Id of the tab to activate\n\t\t /\n\t\tactive: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/\n\t\t Force the tab navigation to display even if there is only one tab\n\t\t /\n\t\tforceTabs: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: ['update:active'],\n\n\tdata() {\n\t\treturn {\n\t\t\t/\n\t\t\t Tab descriptions from the passed NcSidebarTab components' props to build the tab navbar from.\n\t\t\t /\n\t\t\ttabs: [],\n\t\t\t/\n\t\t\t Local active (open) tab's ID. It allows to use component without v-model:active\n\t\t\t /\n\t\t\tactiveTab: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t Has multiple tabs. If only one tab - its content is shown without navigation\n\t\t \n\t\t @return {boolean}\n\t\t /\n\t\thasMultipleTabs() {\n\t\t\treturn this.tabs.length > 1\n\t\t},\n\n\t\tshowForSingleTab() {\n\t\t\treturn this.forceTabs && this.tabs.length === 1\n\t\t},\n\n\t\tcurrentTabIndex() {\n\t\t\treturn this.tabs.findIndex((tab) => tab.id === this.activeTab)\n\t\t},\n\t},\n\n\twatch: {\n\t\tactive(active) {\n\t\t\t// Prevent running it twice\n\t\t\tif (active !== this.activeTab) {\n\t\t\t\tthis.updateActive()\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\n\t\t/\n\t\t Set the current active tab\n\t\t \n\t\t @param {string} id the id of the tab\n\t\t /\n\t\tsetActive(id) {\n\t\t\tthis.activeTab = id\n\t\t\t/\n\t\t\t @property {string} active - active tab's id\n\t\t\t /\n\t\t\tthis.$emit('update:active', this.activeTab)\n\t\t},\n\n\t\t/\n\t\t Focus the previous tab\n\t\t * and emit to the parent component\n\t\t /\n\t\tfocusPreviousTab() {\n\t\t\tif (this.currentTabIndex > 0) {\n\t\t\t\tthis.setActive(this.tabs[this.currentTabIndex - 1].id)\n\t\t\t}\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/\n\t\t Focus the next tab\n\t\t * and emit to the parent component\n\t\t /\n\t\tfocusNextTab() {\n\t\t\tif (this.currentTabIndex < this.tabs.length - 1) {\n\t\t\t\tthis.setActive(this.tabs[this.currentTabIndex + 1].id)\n\t\t\t}\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/\n\t\t Focus the first tab\n\t\t * and emit to the parent component\n\t\t /\n\t\tfocusFirstTab() {\n\t\t\tthis.setActive(this.tabs[0].id)\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/\n\t\t Focus the last tab\n\t\t * and emit to the parent component\n\t\t /\n\t\tfocusLastTab() {\n\t\t\tthis.setActive(this.tabs[this.tabs.length - 1].id)\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/\n\t\t Focus the current active tab\n\t\t /\n\t\tfocusActiveTab() {\n\t\t\tthis.$el.querySelector(`#tab-button-${this.activeTab}`).focus()\n\t\t},\n\n\t\t/\n\t\t Focus the content on tab\n\t\t * see aria accessibility guidelines\n\t\t /\n\t\tfocusActiveTabContent() {\n\t\t\tthis.$el.querySelector('#tab-' + this.activeTab).focus()\n\t\t},\n\n\t\t/\n\t\t Update the current active tab\n\t\t /\n\t\tupdateActive() {\n\t\t\tthis.activeTab = this.active\n\t\t\t&& this.tabs.some(tab => tab.id === this.active)\n\t\t\t\t? this.active\n\t\t\t\t: this.tabs.length > 0\n\t\t\t\t\t? this.tabs[0].id\n\t\t\t\t\t: ''\n\t\t},\n\n\t\t/\n\t\t Register child tab in the tabs\n\t\t \n\t\t @param {object} tab child tab passed to slot\n\t\t /\n\t\tregisterTab(tab) {\n\t\t\tthis.tabs.push(tab)\n\t\t\tthis.tabs.sort((a, b) => {\n\t\t\t\tif (a.order === b.order) {\n\t\t\t\t\treturn OC.Util.naturalSortCompare(a.name, b.name)\n\t\t\t\t}\n\t\t\t\treturn a.order - b.order\n\t\t\t})\n\t\t\tthis.updateActive()\n\t\t},\n\n\t\t/\n\t\t Unregister child tab from the tabs\n\t\t \n\t\t @param {string} id tab's id\n\t\t /\n\t\tunregisterTab(id) {\n\t\t\tconst tabIndex = this.tabs.findIndex((tab) => tab.id === id)\n\t\t\tif (tabIndex !== -1) {\n\t\t\t\tthis.tabs.splice(tabIndex, 1)\n\t\t\t}\n\t\t\tif (this.activeTab === id) {\n\t\t\t\tthis.updateActive()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.app-sidebar-tabs {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 0;\n\tflex: 1 1 100%;\n\n\t&__nav {\n\t\tdisplay: flex;\n\t\tjustify-content: stretch;\n\t\tmargin: 10px 8px 0 8px;\n\t\tborder-bottom: 1px solid var(--color-border);\n\n\t\t// Override checkbox-radio-switch styles so that it looks like tabs\n\t\t& :deep(.checkbox-radio-switch--button-variant) {\n\t\t\tborder: unset !important;\n\t\t\tborder-radius: 0 !important;\n\t\t\t.checkbox-content {\n\t\t\t\tpadding: var(--default-grid-baseline);\n\t\t\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0 !important;\n\t\t\t\tmargin: 0 !important;\n\t\t\t\tborder-bottom: var(--default-grid-baseline) solid transparent !important;\n\t\t\t\t.checkbox-content__icon > {\n\t\t\t\t\tcolor: var(--color-main-text) !important;\n\t\t\t\t}\n\t\t\t}\n\t\t\t&.checkbox-radio-switch--checked .checkbox-radio-switch__content{\n\t\t\t\tbackground: transparent !important;\n\t\t\t\tcolor: var(--color-main-text) !important;\n\t\t\t\tborder-bottom: var(--default-grid-baseline) solid var(--color-primary-element) !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__tab {\n\t\tflex: 1 1;\n\t\t&.active {\n\t\t\tcolor: var(--color-primary-element);\n\t\t}\n\n\t\t&-caption {\n\t\t\tflex: 0 1 100%;\n\t\t\twidth: 100%;\n\t\t\toverflow: hidden;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-overflow: ellipsis;\n\t\t\ttext-align: center;\n\t\t}\n\n\t\t&-icon {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tbackground-size: 20px;\n\t\t}\n\n\t\t// Override max-width to use all available space\n\t\t:deep(.checkbox-radio-switch__content) {\n\t\t\tmax-width: unset;\n\t\t}\n\t}\n\n\t&__content {\n\t\tposition: relative;\n\t\tmin-height: 256px;\n\t\theight: 100%;\n\t\t// force the use of the tab component if more than one tab\n\t\t// you can just put raw content if you don't use tabs\n\t\t&--multiple > :not(section) {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n</style>\n","<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component provides a way to include the standardised sidebar.\nThe standard properties like name, subname, starred, etc. allow to automatically\ninclude a standard-header like it's used by the files app.\n\nTo conditionally show the sidebar either use `v-if` on the sidebar component,\nor use the `open` property of the component to controll the state.\nUsing `v-show` directly will result in usability issues due to internal focus trap handling.\n\n### Standard usage\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\t:starred=\"starred\"\n\t\tname=\"cat-picture.jpg\"\n\t\tsubname=\"last edited 3 weeks ago\"\n\t\tbackground=\"https://nextcloud.com/wp-content/uploads/2022/08/nextcloud-logo-icon.svg\"\n\t\t@figure-click=\"figureClick\">\n\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t\tSearch tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<Cog :size=\"20\" />\n\t\t\t</template>\n\t\t\tSettings tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t</template>\n\t\t\tSharing tab content\n\t\t</NcAppSidebarTab>\n\t</NcAppSidebar>\n</template>\n<script>\n\timport Magnify from 'vue-material-design-icons/Magnify.vue'\n\timport Cog from 'vue-material-design-icons/Cog.vue'\n\timport ShareVariant from 'vue-material-design-icons/ShareVariant.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tMagnify,\n\t\t\tCog,\n\t\t\tShareVariant,\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tstarred: false,\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tfigureClick() {\n\t\t\t\talert('figure clicked')\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n### One tab\n\nSingle tab is rendered without navigation.\n\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch v-model=\"forceTabs\">Force tab navigation</NcCheckboxRadioSwitch>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\t:force-tabs=\"forceTabs\"\n\t\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSingle tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Cog from 'vue-material-design-icons/Cog.vue'\n\nexport default {\n\tcomponents: {\n\t\tCog,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tforceTabs: false,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Dynamic tabs\n\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch v-model=\"showTabs[0]\">Show search tab</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"showTabs[1]\">Show settings tab</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"showTabs[2]\">Show sharing tab</NcCheckboxRadioSwitch>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[0]\" name=\"Search\" id=\"search-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSearch tab content\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[1]\" name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSettings\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[2]\" name=\"Sharing\" id=\"share-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSharing tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify.vue'\nimport Cog from 'vue-material-design-icons/Cog.vue'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant.vue'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tshowTabs: [true, true, false],\n\t\t}\n\t},\n}\n</script>\n```\n\n### Custom order\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\tname=\"cat-picture.jpg\"\n\t\tsubname=\"last edited 3 weeks ago\">\n\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\" :order=\"3\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t\tSearch tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\" :order=\"2\">\n\t\t\t<template #icon>\n\t\t\t\t<Cog :size=\"20\" />\n\t\t\t</template>\n\t\t\tSettings tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\" :order=\"1\">\n\t\t\t<template #icon>\n\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t</template>\n\t\t\tSharing tab content\n\t\t</NcAppSidebarTab>\n\t</NcAppSidebar>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify.vue'\nimport Cog from 'vue-material-design-icons/Cog.vue'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant.vue'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n}\n</script>\n```\n\n### Activating tab programmatically\n\n```vue\n<template>\n\t<div>\n\t\t<NcSelect v-model=\"active\" :options=\"['search-tab', 'settings-tab', 'share-tab']\" />\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\"\n\t\t\tv-model:active=\"active\">\n\t\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSearch tab content\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSettings\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSharing tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify.vue'\nimport Cog from 'vue-material-design-icons/Cog.vue'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant.vue'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tactive: 'search-tab',\n\t\t}\n\t},\n}\n</script>\n```\n\n### Editable name\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\tv-model:name=\"name\"\n\t\t:name-editable=\"true\"\n\t\tname-placeholder=\"Filename\"\n\t\tsubname=\"last edited 3 weeks ago\">\n\t\t<!-- Insert your slots and tabs here -->\n\t</NcAppSidebar>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tname: 'cat-picture.jpg',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n### Editable name after click with custom tertiary action\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\t:name=\"name\"\n\t\tv-model:name-editable=\"nameEditable\"\n\t\t:name-placeholder=\"namePlaceholder\"\n\t\t:subname=\"subname\"\n\t\t@update:name=\"nameUpdate\">\n\t\t<template #tertiary-actions>\n\t\t\t<form>\n\t\t\t\t<input type=\"checkbox\" @click=\"toggledCheckbox\"/>\n\t\t\t</form>\n\t\t</template>\n\t</NcAppSidebar>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tname: 'cat-picture.jpg',\n\t\t\t\tnamePlaceholder: 'Filename',\n\t\t\t\tsubname: 'last edited 3 weeks ago',\n\t\t\t\tnameEditable: false\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tnameUpdate(e) {\n\t\t\t\tthis.name = e\n\t\t\t},\n\t\t\ttoggledCheckbox() {\n\t\t\t\talert('toggle')\n\t\t\t}\n\t\t}\n\t}\n</script>\n```\n\n### Custom subname\n\nInstead of using the `subname` prop you can use the same called slot. This is handy if you need to add accessible information.\nLike in the following example where the goal is to show a star icon to mark the file a favorite.\nSimplying adding `★` would not work as screen readers might not or wrongly announce the icon meaning this information is lost.\n\nA working alternative would be using an icon together with an `aria-label`:\n\n```vue\n\t<template>\n\t\t<NcAppSidebar name=\"cat-picture.jpg\">\n\t\t\t<template #subname>\n\t\t\t\t<NcIconSvgWrapper inline :path=\"mdiStar\" name=\"Favorite\" />\n\t\t\t\t123 KiB, a month ago\n\t\t\t</template>\n\t\t</NcAppSidebar>\n\t</template>\n\t<script>\n\timport { mdiStar } from '@mdi/js'\n\n\texport default {\n\t\tsetup() {\n\t\t\treturn {\n\t\t\t\tmdiStar,\n\t\t\t}\n\t\t}\n\t}\n\t</script>\n```\n\n### Empty sidebar for e.g. empty content component.\n\n```vue\n\t<template>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\t:empty=\"true\">\n\t\t\t<NcEmptyContent name=\"Content not found.\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</NcAppSidebar>\n\t</template>\n\t<script>\n\timport Magnify from 'vue-material-design-icons/Magnify.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tMagnify,\n\t\t},\n\t}\n\t</script>\n```\n\n### Conditionally show the sidebar with `open`\n\nIf the sidebar should be shown conditionally, you can use `open` prop to define sidebar visibility.\nIt automatically shows a toggle button to open the sidebar if it is closed.\n\nYou can also use `--app-sidebar-offset` CSS variable to preserve space\nfor the toggle button, for example, in top bar of `NcAppContent`.\n\nThe built-in toggle button can be removed with `no-toggle` prop.\n\nNote: the built-in toggle button is only available then NcAppSidebar is used in NcContent.\n\n```vue\n<template>\n\t<!-- This is in most cases NcContent -->\n\t<NcContent app-name=\"styleguidist\" class=\"content-styleguidist\">\n\t\t<NcAppContent>\n\t\t\t<div class=\"top-bar\">\n\t\t\t\t<NcButton variant=\"primary\">Start a call</NcButton>\n\t\t\t</div>\n\t\t</NcAppContent>\n\t\t<!-- The sidebar -->\n\t\t<NcAppSidebar\n\t\t\tv-model:open=\"showSidebar\"\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSingle tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</NcContent>\n</template>\n\n<script>\nimport Cog from 'vue-material-design-icons/Cog'\n\nexport default {\n\tcomponents: {\n\t\tCog,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tshowSidebar: true,\n\t\t}\n\t},\n}\n</script>\n<style scoped>\n/* This styles just mock NcContent and NcAppContent /\n.content-styleguidist {\n\tposition: relative !important;\n\t/ Just to prevent jumping when the sidebar is hidden /\n\tmin-height: 360px;\n}\n\n.main-content {\n\tposition: absolute;\n\theight: 100%;\n\twidth: 100%;\n}\n\n/ Fix styles on this style guide page /\n@media only screen and (max-width: 512px) {\n\t:deep(aside) {\n\t\twidth: calc(100vw - 64px) !important;\n\t}\n}\n\n.top-bar {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\t/ preserve space for toggle button /\n\tpadding-inline-end: var(--app-sidebar-offset);\n\t/ same as on toggle button, but doesn't have to be the same /\n\tmargin: var(--app-sidebar-padding);\n}\n</style>\n```\n\n### Conditionally show the sidebar programmatically with `v-if`\n\nIf the sidebar should be shown conditionally without any explicit toggle button, you can use `v-if`.\n\nNote about performance: using `v-if` might result in bad performance and loosing sidebar content state.\n\nNote about `v-show`: using `v-show` to hide sidebar will result in usability issues due to active focus trap on mobile.\n\n```vue\n<template>\n\t<!-- This is in most cases NcContent -->\n\t<NcContent app-name=\"styleguidist\" class=\"content-styleguidist\">\n\t\t<NcAppContent>\n\t\t\t<div class=\"top-bar\">\n\t\t\t\t<NcButton @click.prevent=\"showSidebar = true\">\n\t\t\t\t\tToggle sidebar\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</NcAppContent>\n\t\t<!-- The sidebar -->\n\t\t<NcAppSidebar\n\t\t\tv-if=\"showSidebar\"\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\"\n\t\t\t@close=\"showSidebar = false\">\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSingle tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</NcContent>\n</template>\n\n<script>\nimport Cog from 'vue-material-design-icons/Cog'\n\nexport default {\n\tcomponents: {\n\t\tCog,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tshowSidebar: true,\n\t\t}\n\t},\n}\n</script>\n<style scoped>\n/ This styles just mock NcContent and NcAppContent /\n.content-styleguidist {\n\tposition: relative !important;\n\t/ Just to prevent jumping when the sidebar is hidden /\n\tmin-height: 360px;\n}\n\n.main-content {\n\tposition: absolute;\n\theight: 100%;\n\twidth: 100%;\n}\n\n/ Fix styles on this style guide page /\n@media only screen and (max-width: 512px) {\n\t:deep(aside) {\n\t\twidth: calc(100vw - 64px) !important;\n\t}\n}\n\n.top-bar {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\t/ preserve space for toggle button /\n\tpadding-inline-end: var(--app-sidebar-offset);\n\t/ same as on toggle button, but doesn't have to be the same /\n\tmargin: var(--app-sidebar-padding);\n}\n</style>\n```\n</docs>\n\n<template>\n\t<transition appear\n\t\tname=\"slide-right\"\n\t\t@after-enter=\"onAfterEnter\"\n\t\t@after-leave=\"onAfterLeave\">\n\t\t<aside v-show=\"open\"\n\t\t\tid=\"app-sidebar-vue\"\n\t\t\tref=\"sidebar\"\n\t\t\tclass=\"app-sidebar\"\n\t\t\t:aria-labelledby=\"`app-sidebar-vue-${uid}__header`\"\n\t\t\t@keydown.esc=\"onKeydownEsc\">\n\t\t\t<!--\n\t\t\t\tWe cannot render toggle button inside sidebar (aside#app-sidebar-vue), because it is hidden then the toggle is needed.\n\t\t\t\tBut we also need transition with the sidebar to be the root of this component to use it as a single UI element, allowing to use `v-show`.\n\t\t\t\tSo we cannot render the toggle button directly in this component.\n\t\t\t\tAs a simple solution - render it in the content to keep correct position.\n\t\t\t-->\n\t\t\t<Teleport v-if=\"ncContentSelector && !open && !noToggle\" :to=\"ncContentSelector\">\n\t\t\t\t<NcButton ref=\"toggle\"\n\t\t\t\t\t:aria-label=\"t('Open sidebar')\"\n\t\t\t\t\tclass=\"app-sidebar__toggle\"\n\t\t\t\t\t:class=\"toggleClasses\"\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tv-bind=\"toggleAttrs\"\n\t\t\t\t\t@click=\"$emit('update:open', true)\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<!-- @slot Custom icon for the toggle button, defaults to the dock-right icon from MDI -->\n\t\t\t\t\t\t<slot name=\"toggle-icon\">\n\t\t\t\t\t\t\t<IconDockRight :size=\"20\" />\n\t\t\t\t\t\t</slot>\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</Teleport>\n\n\t\t\t<header :class=\"{\n\t\t\t\t\t'app-sidebar-header--with-figure': isSlotPopulated($slots.header?.()) \|\| background,\n\t\t\t\t\t'app-sidebar-header--compact': compact,\n\t\t\t\t}\"\n\t\t\t\tclass=\"app-sidebar-header\">\n\t\t\t\t<!-- @slot Alternative to the default header info: use for bare NcAppSidebar with tabs.\n\t\t\t\t\tNcAppSidebarHeader would be required to use for accessibility reasons.\n\t\t\t\t\tThis will be overridden by `empty` prop.\n\t\t\t\t-->\n\t\t\t\t<slot v-if=\"!empty\" name=\"info\">\n\t\t\t\t\t<!-- container for figure and description, allows easy switching to compact mode -->\n\t\t\t\t\t<div class=\"app-sidebar-header__info\">\n\t\t\t\t\t\t<!-- sidebar header illustration/figure -->\n\t\t\t\t\t\t<div v-if=\"(isSlotPopulated($slots.header?.()) \|\| background)\"\n\t\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t\t'app-sidebar-header__figure--with-action': hasFigureClickListener\n\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\tclass=\"app-sidebar-header__figure\"\n\t\t\t\t\t\t\t:style=\"{\n\t\t\t\t\t\t\t\tbackgroundImage: `url(${background})`\n\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t@click=\"onFigureClick\"\n\t\t\t\t\t\t\t@keydown.enter=\"onFigureClick\">\n\t\t\t\t\t\t\t<slot class=\"app-sidebar-header__background\" name=\"header\" />\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<!-- sidebar details -->\n\t\t\t\t\t\t<div :class=\"{\n\t\t\t\t\t\t\t\t'app-sidebar-header__desc--with-tertiary-action': canStar \|\| isSlotPopulated($slots['tertiary-actions']?.()),\n\t\t\t\t\t\t\t\t'app-sidebar-header__desc--editable': nameEditable && !subname,\n\t\t\t\t\t\t\t\t'app-sidebar-header__desc--with-subname--editable': nameEditable && subname,\n\t\t\t\t\t\t\t\t'app-sidebar-header__desc--without-actions': !isSlotPopulated($slots['secondary-actions']?.()),\n\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\tclass=\"app-sidebar-header__desc\">\n\t\t\t\t\t\t\t<!-- favourite icon -->\n\t\t\t\t\t\t\t<div v-if=\"canStar \|\| isSlotPopulated($slots['tertiary-actions']?.())\" class=\"app-sidebar-header__tertiary-actions\">\n\t\t\t\t\t\t\t\t<slot name=\"tertiary-actions\">\n\t\t\t\t\t\t\t\t\t<NcButton v-if=\"canStar\"\n\t\t\t\t\t\t\t\t\t\t:aria-label=\"favoriteTranslated\"\n\t\t\t\t\t\t\t\t\t\t:pressed=\"isStarred\"\n\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__star\"\n\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t@click.prevent=\"toggleStarred\">\n\t\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t\t<NcLoadingIcon v-if=\"starLoading\" />\n\t\t\t\t\t\t\t\t\t\t\t<IconStar v-else-if=\"isStarred\" :size=\"20\" />\n\t\t\t\t\t\t\t\t\t\t\t<IconStarOutline v-else :size=\"20\" />\n\t\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t\t</slot>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<!-- name -->\n\t\t\t\t\t\t\t<div class=\"app-sidebar-header__name-container\">\n\t\t\t\t\t\t\t\t<div class=\"app-sidebar-header__mainname-container\">\n\t\t\t\t\t\t\t\t\t<!-- main name -->\n\t\t\t\t\t\t\t\t\t<NcAppSidebarHeader v-show=\"!nameEditable\"\n\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname\"\n\t\t\t\t\t\t\t\t\t\t:name\n\t\t\t\t\t\t\t\t\t\t:linkify=\"linkifyName\"\n\t\t\t\t\t\t\t\t\t\t:title\n\t\t\t\t\t\t\t\t\t\t:tabindex=\"nameEditable ? 0 : -1\"\n\t\t\t\t\t\t\t\t\t\t@click.self=\"editName\" />\n\t\t\t\t\t\t\t\t\t<template v-if=\"nameEditable\">\n\t\t\t\t\t\t\t\t\t\t<form v-click-outside=\"() => onSubmitName()\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname-form\"\n\t\t\t\t\t\t\t\t\t\t\t@submit.prevent=\"onSubmitName\">\n\t\t\t\t\t\t\t\t\t\t\t<input ref=\"nameInput\"\n\t\t\t\t\t\t\t\t\t\t\t\tv-focus\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname-input\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t\t:placeholder=\"namePlaceholder\"\n\t\t\t\t\t\t\t\t\t\t\t\t:value=\"name\"\n\t\t\t\t\t\t\t\t\t\t\t\t@keydown.esc.stop=\"onDismissEditing\"\n\t\t\t\t\t\t\t\t\t\t\t\t@input=\"onNameInput\">\n\t\t\t\t\t\t\t\t\t\t\t<NcButton :aria-label=\"changeNameTranslated\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary-no-background\">\n\t\t\t\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<IconArrowRight :size=\"20\" />\n\t\t\t\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t\t\t\t</form>\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t<!-- header main menu -->\n\t\t\t\t\t\t\t\t\t<NcActions v-if=\"isSlotPopulated($slots['secondary-actions']?.())\"\n\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__menu\"\n\t\t\t\t\t\t\t\t\t\t:force-menu=\"forceMenu\">\n\t\t\t\t\t\t\t\t\t\t<slot name=\"secondary-actions\" />\n\t\t\t\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<!-- secondary name -->\n\t\t\t\t\t\t\t\t<p v-if=\"subname.trim() !== '' \|\| $slots['subname']\"\n\t\t\t\t\t\t\t\t\t:title=\"subtitle \|\| undefined\"\n\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__subname\">\n\t\t\t\t\t\t\t\t\t<!-- @slot Alternative to the `subname` prop can be used for more complex conent. It will be rendered within a `p` tag. -->\n\t\t\t\t\t\t\t\t\t<slot name=\"subname\">\n\t\t\t\t\t\t\t\t\t\t{{ subname }}\n\t\t\t\t\t\t\t\t\t</slot>\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</slot>\n\t\t\t\t<!-- a11y fallback for empty content -->\n\t\t\t\t<NcAppSidebarHeader v-else\n\t\t\t\t\tclass=\"app-sidebar-header__mainname--hidden\"\n\t\t\t\t\t:name\n\t\t\t\t\ttabindex=\"-1\" />\n\n\t\t\t\t<NcButton ref=\"closeButton\"\n\t\t\t\t\t:aria-label=\"closeTranslated\"\n\t\t\t\t\t:title=\"closeTranslated\"\n\t\t\t\t\tclass=\"app-sidebar__close\"\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t@click.prevent=\"closeSidebar\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconClose :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\n\t\t\t\t<div v-if=\"isSlotPopulated($slots.description?.()) && !empty\" class=\"app-sidebar-header__description\">\n\t\t\t\t\t<slot name=\"description\" />\n\t\t\t\t</div>\n\t\t\t</header>\n\n\t\t\t<NcAppSidebarTabs v-show=\"!loading\"\n\t\t\t\tref=\"tabs\"\n\t\t\t\t:active=\"active\"\n\t\t\t\t:force-tabs=\"forceTabs\"\n\t\t\t\t@update:active=\"onUpdateActive\">\n\t\t\t\t<slot />\n\t\t\t</NcAppSidebarTabs>\n\n\t\t\t<NcEmptyContent v-if=\"loading\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcLoadingIcon :size=\"64\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</aside>\n\t</transition>\n</template>\n\n<script>\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport { createFocusTrap } from 'focus-trap'\nimport { provide, ref, warn } from 'vue'\nimport { useIsSmallMobile } from '../../composables/useIsMobile/index.js'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { isSlotPopulated } from '../../utils/isSlotPopulated.ts'\nimport { t } from '../../l10n.js'\n\nimport IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport IconClose from 'vue-material-design-icons/Close.vue'\nimport IconDockRight from 'vue-material-design-icons/DockRight.vue'\nimport IconStar from 'vue-material-design-icons/Star.vue'\nimport IconStarOutline from 'vue-material-design-icons/StarOutline.vue'\n\nimport NcAppSidebarTabs from './NcAppSidebarTabs.vue'\nimport NcActions from '../NcActions/index.js'\nimport NcButton from '../NcButton/index.ts'\nimport NcEmptyContent from '../NcEmptyContent/index.ts'\nimport NcLoadingIcon from '../NcLoadingIcon/index.ts'\nimport NcAppSidebarHeader from '../NcAppSidebarHeader/index.ts'\nimport Focus from '../../directives/Focus/index.ts'\n\nexport default {\n\tname: 'NcAppSidebar',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcAppSidebarHeader,\n\t\tNcAppSidebarTabs,\n\t\tNcButton,\n\t\tNcLoadingIcon,\n\t\tNcEmptyContent,\n\t\tIconArrowRight,\n\t\tIconClose,\n\t\tIconDockRight,\n\t\tIconStar,\n\t\tIconStarOutline,\n\t},\n\n\tdirectives: {\n\t\tFocus,\n\t\tClickOutside,\n\t},\n\n\tinject: {\n\t\tncContentSelector: {\n\t\t\tfrom: 'NcContent:selector',\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tprops: {\n\t\tactive: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\trequired: true,\n\t\t},\n\n\t\t/\n\t\t Allow to edit the sidebar name.\n\t\t /\n\t\tnameEditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\tnamePlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\tsubname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/\n\t\t Title to display for the subname.\n\t\t /\n\t\tsubtitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Url to the top header background image\n\t\t * Applied with css\n\t\t /\n\t\tbackground: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Enable the favourite icon if not null\n\t\t * See fired events\n\t\t /\n\t\tstarred: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\t\t/\n\t\t Show loading spinner instead of the star icon\n\t\t /\n\t\tstarLoading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Show loading spinner instead of tabs\n\t\t /\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Display the sidebar in compact mode\n\t\t /\n\t\tcompact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Only display close button and default slot content.\n\t\t * Don't display other header content and primary and secondary actions.\n\t\t * Useful when showing the EmptyContent component as content.\n\t\t /\n\t\tempty: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Force the actions to display in a three dot menu\n\t\t /\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Force the tab navigation to display even if there is only one tab\n\t\t /\n\t\tforceTabs: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Linkify the name\n\t\t /\n\t\tlinkifyName: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Title to display for the name.\n\t\t * Can be set to the same text in case it's too long.\n\t\t /\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Allow to conditionally show the sidebar\n\t\t * You can also use `v-if` on the sidebar, but using the open prop allow to keep\n\t\t * the sidebar inside the DOM for performance if it is opened and closed multiple times.\n\t\t \n\t\t When using the `open` property to close the sidebar a built-in toggle button will be shown to reopen it,\n\t\t * similar to the app navigation. You can remove this button with the `no-toggle` prop.\n\t\t /\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Custom classes to assign to the sidebar toggle button.\n\t\t * If needed this can be used to assign styles to the button using `:deep()` selector.\n\t\t /\n\t\ttoggleClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Custom attrs to assign to the sidebar toggle button.\n\t\t /\n\t\ttoggleAttrs: {\n\t\t\ttype: Object,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Do not add the built-in toggle button with `open` prop.\n\t\t /\n\t\tnoToggle: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'close',\n\t\t'closed',\n\t\t'opened',\n\t\t// 'figureClick', not emitted on purpose to make \"hasFigureClickListener\" work\n\t\t'update:active',\n\t\t'update:name',\n\t\t'update:nameEditable',\n\t\t'update:open',\n\t\t'update:starred',\n\t\t'submitName',\n\t\t'dismissEditing',\n\t],\n\n\tsetup() {\n\t\tconst headerRef = ref(null)\n\t\tprovide('NcAppSidebar:header:ref', headerRef)\n\n\t\treturn {\n\t\t\tuid: createElementId(),\n\t\t\tisMobile: useIsSmallMobile(),\n\t\t\theaderRef,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tchangeNameTranslated: t('Change name'),\n\t\t\tcloseTranslated: t('Close sidebar'),\n\t\t\tfavoriteTranslated: t('Favorite'),\n\t\t\tisStarred: this.starred,\n\t\t\tfocusTrap: null,\n\t\t\telementToReturnFocus: null,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcanStar() {\n\t\t\treturn this.isStarred !== null\n\t\t},\n\t\thasFigureClickListener() {\n\t\t\treturn !!this.$attrs.onFigureClick\n\t\t},\n\t},\n\n\twatch: {\n\t\tstarred() {\n\t\t\tthis.isStarred = this.starred\n\t\t},\n\n\t\tisMobile() {\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\n\t\topen() {\n\t\t\tthis.checkToggleButtonContainerAvailability()\n\t\t},\n\t},\n\n\tcreated() {\n\t\tthis.preserveElementToReturnFocus()\n\n\t\tthis.checkToggleButtonContainerAvailability()\n\t},\n\n\tbeforeUnmount() {\n\t\t// Make sure that the 'closed' event is dispatched even if this element is destroyed before the 'after-leave' event is received.\n\t\tthis.$emit('closed')\n\t\tthis.focusTrap?.deactivate()\n\t},\n\n\tmethods: {\n\t\tisSlotPopulated,\n\n\t\tt,\n\n\t\tpreserveElementToReturnFocus() {\n\t\t\t// Save the element that had focus before the sidebar was opened to return back on close\n\t\t\tif (document.activeElement && document.activeElement !== document.body) {\n\t\t\t\tthis.elementToReturnFocus = document.activeElement\n\n\t\t\t\t// Special case for menus (NcActions)\n\t\t\t\t// If a sidebar was opened from a menu item, we want to return focus to the menu trigger instead of the item\n\t\t\t\tif (this.elementToReturnFocus.getAttribute('role') === 'menuitem') {\n\t\t\t\t\tconst menu = this.elementToReturnFocus.closest('[role=\"menu\"]')\n\t\t\t\t\tif (menu) {\n\t\t\t\t\t\tconst menuTrigger = document.querySelector(`[aria-controls=\"${menu.id}\"]`)\n\t\t\t\t\t\tthis.elementToReturnFocus = menuTrigger\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\tinitFocusTrap() {\n\t\t\tif (this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.focusTrap = createFocusTrap([\n\t\t\t\t// The sidebar itself\n\t\t\t\tthis.$refs.sidebar,\n\t\t\t\t// Nextcloud Server header navigarion\n\t\t\t\tdocument.querySelector('#header'),\n\t\t\t], {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\tfallbackFocus: this.$refs.closeButton.$el,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tescapeDeactivates: false,\n\t\t\t})\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.open && this.isMobile) {\n\t\t\t\tthis.initFocusTrap()\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\t/\n\t\t Close the sidebar on pressing the escape key on mobile\n\t\t \n\t\t @param {KeyboardEvent} event key down event\n\t\t /\n\t\tonKeydownEsc(event) {\n\t\t\tif (this.isMobile) {\n\t\t\t\tevent.stopPropagation()\n\t\t\t\tthis.closeSidebar()\n\t\t\t}\n\t\t},\n\n\t\tonAfterEnter(element) {\n\t\t\t// Focus sidebar on open only if it was opened by a user interaction\n\t\t\tif (this.elementToReturnFocus) {\n\t\t\t\tthis.focus()\n\t\t\t}\n\n\t\t\tthis.toggleFocusTrap()\n\n\t\t\t/\n\t\t\t The sidebar is opened and the transition is complete\n\t\t\t \n\t\t\t @type {HTMLElement}\n\t\t\t /\n\t\t\tthis.$emit('opened', element)\n\t\t},\n\t\tonAfterLeave(element) {\n\t\t\t/\n\t\t\t The sidebar is closed and the transition is complete\n\t\t\t \n\t\t\t @type {HTMLElement}\n\t\t\t /\n\t\t\tthis.$emit('closed', element)\n\n\t\t\tthis.toggleFocusTrap()\n\n\t\t\t// Return focus to the element that had focus before the sidebar was opened\n\t\t\tthis.elementToReturnFocus?.focus({ focusVisible: true })\n\t\t\tthis.elementToReturnFocus = null\n\t\t},\n\n\t\t/\n\t\t Used to tell parent component the user asked to close the sidebar\n\t\t \n\t\t @param {Event} e close icon click event\n\t\t /\n\t\tcloseSidebar(e) {\n\t\t\t/\n\t\t\t The user clicked to closed the sidebar\n\t\t\t \n\t\t\t @type {Event}\n\t\t\t /\n\t\t\tthis.$emit('close', e)\n\t\t\t/\n\t\t\t Current open state emitted after the transitions are finished\n\t\t\t * @type {boolean}\n\t\t\t /\n\t\t\tthis.$emit('update:open', false)\n\t\t},\n\n\t\t/\n\t\t Emit figure click event to parent component\n\t\t \n\t\t @param {Event} e click event\n\t\t /\n\t\tonFigureClick(e) {\n\t\t\t/\n\t\t\t The figure/background header has been clicked\n\t\t\t \n\t\t\t @type {Event}\n\t\t\t /\n\t\t\t// eslint-disable-next-line vue/require-explicit-emits\n\t\t\tthis.$emit('figureClick', e)\n\t\t},\n\n\t\t/\n\t\t Toggle the favourite state\n\t\t * and emit to the parent component\n\t\t /\n\t\ttoggleStarred() {\n\t\t\tthis.isStarred = !this.isStarred\n\t\t\t/\n\t\t\t Emitted when the starred value changes\n\t\t\t \n\t\t\t @type {boolean}\n\t\t\t /\n\t\t\tthis.$emit('update:starred', this.isStarred)\n\t\t},\n\n\t\tasync editName() {\n\t\t\t/\n\t\t\t Emitted when the nameEditable value changes\n\t\t\t \n\t\t\t @type {boolean}\n\t\t\t /\n\t\t\tthis.$emit('update:nameEditable', true)\n\t\t\t// Focus the name input\n\t\t\tif (this.nameEditable) {\n\t\t\t\tawait this.$nextTick()\n\t\t\t\tthis.$refs.nameInput.focus()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Focus the sidebar\n\t\t * @public\n\t\t /\n\t\tfocus() {\n\t\t\tif (!this.open && !this.noToggle) {\n\t\t\t\tthis.$refs.toggle.$el.focus()\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tthis.headerRef.focus()\n\t\t\t} catch {\n\t\t\t\twarn('NcAppSidebar should have focusable header for accessibility reasons. Use NcAppSidebarHeader component.')\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Focus the active tab\n\t\t * @public\n\t\t /\n\t\tfocusActiveTabContent() {\n\t\t\t// If a tab is focused then probably a new trigger element moved the focus to the sidebar\n\t\t\tthis.preserveElementToReturnFocus()\n\n\t\t\tthis.$refs.tabs.focusActiveTabContent()\n\t\t},\n\n\t\t/\n\t\t Check if the toggle button container is available\n\t\t /\n\t\tcheckToggleButtonContainerAvailability() {\n\t\t\t// Toggle button must be rendered, but there is no element to teleport it to\n\t\t\tif (this.open === false && !this.noToggle && !this.ncContentSelector) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t'[NcAppSidebar] It looks like you want to use NcAppSidebar with the built-in toggle button. '\n\t\t\t\t\t+ 'This feature is only available when NcAppSidebar is used in NcContent.',\n\t\t\t\t)\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Emit name change event to parent component\n\t\t \n\t\t @param {Event} event input event\n\t\t /\n\t\tonNameInput(event) {\n\t\t\t/\n\t\t\t Emitted when the name value changes\n\t\t\t \n\t\t\t @type {string\|Date}\n\t\t\t /\n\t\t\tthis.$emit('update:name', event.target.value)\n\t\t},\n\n\t\t/\n\t\t Emit when the name form edit confirm button is pressed in order\n\t\t * to change the name.\n\t\t \n\t\t @param {Event} event submit event\n\t\t /\n\t\tonSubmitName(event) {\n\t\t\t// Disable editing\n\t\t\tthis.$emit('update:nameEditable', false)\n\t\t\t/\n\t\t\t Emitted when the name edit input has been submitted\n\t\t\t \n\t\t\t @type {Event}\n\t\t\t /\n\t\t\tthis.$emit('submitName', event)\n\t\t},\n\t\tonDismissEditing() {\n\t\t\t// Disable editing\n\t\t\tthis.$emit('update:nameEditable', false)\n\t\t\t/\n\t\t\t Emitted when the name edit has been cancelled\n\t\t\t \n\t\t\t @type {Event}\n\t\t\t /\n\t\t\tthis.$emit('dismissEditing')\n\t\t},\n\t\tonUpdateActive(activeTab) {\n\t\t\t/\n\t\t\t The active tab changed\n\t\t\t \n\t\t\t @type {string}\n\t\t\t /\n\t\t\tthis.$emit('update:active', activeTab)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n// Allows to use transition over a custom CSS property (CSS Variable)\n// Ignored on old browsers resulting in slightly noticeable jump\n@property --app-sidebar-offset {\n syntax: '<length>';\n initial-value: 0;\n inherits: true;\n}\n\n.content {\n\t// A padding between the toggle button and the page border\n\t--app-sidebar-padding: #{$app-navigation-padding};\n\t// A padding between the toggle button and the page border\n\t--app-sidebar-offset: 0;\n\t// Explicitly disable transition by default to enable it only when sidebar animation is active\n\t// !important to override styles from an older version, because it's global non-scoped styles\n\ttransition: --app-sidebar-offset 0ms !important;\n}\n\n// When AppSidebar is animation is active - also apply transition for the toggle button offset\n.content:has(.app-sidebar.slide-right-enter-active),\n.content:has(.app-sidebar.slide-right-leave-active) {\n\ttransition: --app-sidebar-offset var(--animation-quick);\n}\n\n.content:has(.app-sidebar__toggle) {\n\t--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));\n}\n</style>\n\n<style lang=\"scss\" scoped>\n$desc-input-padding: 7px;\n\n// name and subname\n$desc-name-height: 30px;\n$desc-subname-height: 22px;\n$desc-height: $desc-name-height + $desc-subname-height;\n\n$top-buttons-spacing: $app-navigation-padding; // align with app navigation\n\n/\n\tSidebar: to be used within #content\n\tapp-content will be shrinked properly\n/\n.app-sidebar {\n\t--app-sidebar-width: clamp(300px, 27vw, 500px);\n\t--app-sidebar-padding: #{$app-navigation-padding};\n\twidth: var(--app-sidebar-width);\n\n\tz-index: 1500;\n\ttop: 0;\n\tinset-inline-end: 0;\n\tdisplay: flex;\n\toverflow-x: hidden;\n\toverflow-y: auto;\n\tflex-direction: column;\n\tflex-shrink: 0;\n\theight: 100%;\n\tborder-inline-start: 1px solid var(--color-border);\n\tbackground: var(--color-main-background);\n\t// Make close button positioned relative to the header\n\tposition: relative;\n\n\t&__toggle {\n\t\tposition: absolute !important;\n\t\tinset-block-start: var(--app-sidebar-padding);\n\t\tinset-inline-end: var(--app-sidebar-padding);\n\t\t// app-content has z-index 1000 so we need 1001\n\t\tz-index: 1001;\n\t}\n\n\t.app-sidebar-header {\n\t\t// Variable for custom content to be aware of space taken by close button (from top-right corner)\n\t\t--app-sidebar-close-button-offset: calc(var(--default-clickable-area) + #{$top-buttons-spacing});\n\n\t\t> .app-sidebar__close {\n\t\t\tposition: absolute;\n\t\t\tz-index: 100;\n\t\t\ttop: $top-buttons-spacing;\n\t\t\tinset-inline-end: $top-buttons-spacing;\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t}\n\n\t\t// Compact mode only affects a sidebar with a figure\n\t\t&--compact.app-sidebar-header--with-figure {\n\t\t\t.app-sidebar-header__info {\n\t\t\t\tflex-direction: row;\n\n\t\t\t\t.app-sidebar-header__figure {\n\t\t\t\t\t--figure-size: calc($desc-height + var(--app-sidebar-padding));\n\t\t\t\t\tz-index: 2;\n\t\t\t\t\twidth: var(--figure-size);\n\t\t\t\t\theight: var(--figure-size);\n\t\t\t\t\tmargin: calc(var(--app-sidebar-padding) / 2);\n\t\t\t\t\tborder-radius: 3px;\n\t\t\t\t\tflex: 0 0 auto;\n\t\t\t\t}\n\t\t\t\t.app-sidebar-header__desc {\n\t\t\t\t\tpadding-inline-start: 0;\n\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\tmin-width: 0;\n\t\t\t\t\tpadding-inline-end: calc(var(--default-clickable-area) + var(--app-sidebar-close-button-offset));\n\t\t\t\t\tpadding-top: var(--app-sidebar-padding);\n\n\t\t\t\t\t&.app-sidebar-header__desc--without-actions {\n\t\t\t\t\t\tpadding-inline-end: var(--app-sidebar-close-button-offset);\n\t\t\t\t\t}\n\n\t\t\t\t\t.app-sidebar-header__tertiary-actions {\n\t\t\t\t\t\tz-index: 3; // above star\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\ttop: calc(var(--app-sidebar-padding) / 2);\n\t\t\t\t\t\tinset-inline-start: calc(-1 var(--default-clickable-area));\n\t\t\t\t\t\tgap: 0; // override gap\n\t\t\t\t\t}\n\t\t\t\t\t.app-sidebar-header__menu {\n\t\t\t\t\t\ttop: $top-buttons-spacing;\n\t\t\t\t\t\tinset-inline-end: var(--app-sidebar-close-button-offset); // left of the close button\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// sidebar without figure\n\t\t&:not(.app-sidebar-header--with-figure) {\n\t\t\t// align the menu with the close button\n\t\t\t.app-sidebar-header__menu {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: $top-buttons-spacing;\n\t\t\t\tinset-inline-end: var(--app-sidebar-close-button-offset);\n\t\t\t}\n\t\t\t// increase the padding to not overlap the menu\n\t\t\t.app-sidebar-header__desc {\n\t\t\t\tpadding-inline-end: calc(var(--default-clickable-area) + var(--app-sidebar-close-button-offset));\n\n\t\t\t\t&.app-sidebar-header__desc--without-actions {\n\t\t\t\t\tpadding-inline-end: var(--app-sidebar-close-button-offset);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// the container with the figure and the description\n\t\t.app-sidebar-header__info {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\n\t\t// header background\n\t\t&__figure {\n\t\t\twidth: 100%;\n\t\t\theight: 250px;\n\t\t\tmax-height: 250px;\n\t\t\tbackground-repeat: no-repeat;\n\t\t\tbackground-position: center;\n\t\t\tbackground-size: contain;\n\t\t\t&--with-action {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\t\t}\n\n\t\t// description\n\t\t&__desc {\n\t\t\tposition: relative;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\tpadding-inline: var(--app-sidebar-padding);\n\t\t\tpadding-block: #{$top-buttons-spacing} calc(var(--app-sidebar-padding) / 2);\n\t\t\tgap: 0 4px;\n\n\t\t\t// custom overrides\n\t\t\t&--with-tertiary-action {\n\t\t\t\tpadding-inline-start: 6px;\n\t\t\t}\n\n\t\t\t&--editable .app-sidebar-header__mainname-form,\n\t\t\t&--with-subname--editable .app-sidebar-header__mainname-form {\n\t\t\t\tmargin-top: -2px;\n\t\t\t\tmargin-bottom: -2px;\n\t\t\t}\n\n\t\t\t&--with-subname--editable .app-sidebar-header__subname {\n\t\t\t\tmargin-top: -2px;\n\t\t\t}\n\n\t\t\t.app-sidebar-header__tertiary-actions {\n\t\t\t\tdisplay: flex;\n\t\t\t\theight: var(--default-clickable-area);\n\t\t\t\twidth: var(--default-clickable-area);\n\t\t\t\tjustify-content: center;\n\t\t\t\tflex: 0 0 auto;\n\n\t\t\t\t.app-sidebar-header__star {\n\t\t\t\t\t// Override default Button component styles\n\t\t\t\t\tbox-shadow: none;\n\t\t\t\t\t&:not([aria-pressed='true']):hover {\n\t\t\t\t\t\tbox-shadow: none;\n\t\t\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// names\n\t\t\t.app-sidebar-header__name-container {\n\t\t\t\tflex: 1 1 auto;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tjustify-content: center;\n\t\t\t\tmin-width: 0;\n\n\t\t\t\t.app-sidebar-header__mainname-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tmin-height: var(--default-clickable-area);\n\n\t\t\t\t\t// main name\n\t\t\t\t\t.app-sidebar-header__mainname {\n\t\t\t\t\t\tpadding: 0;\n\t\t\t\t\t\tmin-height: 30px;\n\t\t\t\t\t\tfont-size: 20px;\n\t\t\t\t\t\tline-height: $desc-name-height;\n\n\t\t\t\t\t\t// Needs 'deep' as the link is generated by the linkify directive\n\t\t\t\t\t\t&:deep(.linkified) {\n\t\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t\t\ttext-decoration: underline;\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.app-sidebar-header__mainname-form {\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\t\talign-items: center;\n\n\t\t\t\t\t\tinput.app-sidebar-header__mainname-input {\n\t\t\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\tpadding: $desc-input-padding;\n\t\t\t\t\t\t\tfont-size: 20px;\n\t\t\t\t\t\t\tfont-weight: bold;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t// main menu\n\t\t\t\t\t.app-sidebar-header__menu {\n\t\t\t\t\t\tmargin-inline-start: 5px;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// shared between main and subname\n\t\t\t\t.app-sidebar-header__mainname,\n\t\t\t\t.app-sidebar-header__subname {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\t}\n\n\t\t\t\t// subname\n\t\t\t\t.app-sidebar-header__subname {\n\t\t\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\t\t\tfont-size: var(--default-font-size);\n\t\t\t\t\tpadding: 0;\n\n\t\t\t\t\t* {\n\t\t\t\t\t\tvertical-align: text-bottom;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// Hidden a11y fallback\n\t\t.app-sidebar-header__mainname--hidden {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tinset-inline-start: 0;\n\t\t\tmargin: 0;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\t// sidebar description slot\n\t\t&__description {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tmargin: 0 10px;\n\t\t}\n\t}\n}\n\n// Make the sidebar full-width on small screens\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-sidebar {\n\t\tposition: absolute;\n\t\t--app-sidebar-width: 100vw;\n\t}\n}\n\n.slide-right-leave-active,\n.slide-right-enter-active {\n\ttransition-duration: var(--animation-quick);\n\ttransition-property: margin-inline-end;\n}\n\n.slide-right-enter-to,\n.slide-right-leave {\n\tmargin-inline-end: 0;\n}\n\n.slide-right-enter-from,\n.slide-right-leave-to {\n\tmargin-inline-end: calc(-1 * var(--app-sidebar-width));\n}\n</style>\n\n<style lang=\"scss\">\n// ! slots specific designs, cannot be scoped\n// if any button inside the description slot, increase visual padding\n.app-sidebar-header__description {\n\tbutton, .button,\n\tinput[type='button'],\n\tinput[type='submit'],\n\tinput[type='reset'] {\n\t\tpadding: 6px 22px;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","_hoisted_1","_hoisted_2","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_hoisted_4","_createCommentVNode","NcVNodes","_openBlock","_withKeys","_withModifiers","_Fragment","_renderList","_createBlock","_normalizeClass","_createVNode","_withCtx","_toDisplayString","_renderSlot","NcAppSidebarHeader","Focus","ClickOutside","_Transition","_Teleport","_normalizeStyle","_createTextVNode"],"mappings":"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","x_google_ignoreList":[0,1,2]}

package/dist/chunks/{NcAppSidebarTab-DG51ajic.mjs → NcAppSidebarTab-D1RmFRTu.mjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-import '../assets/NcAppSidebarTab-BFy7uyWe.css';
+import '../assets/NcAppSidebarTab-cWhpTGp7.css';
 import { createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot, toDisplayString } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = {
@@ -32,7 +32,7 @@ const _sfc_main = {
     }
   },
   emits: [
-    "bottom-reached",
+    "bottomReached",
     "scroll"
   ],
   expose: ["id", "name", "icon", "order", "renderIcon"],
@@ -55,7 +55,7 @@ const _sfc_main = {
   methods: {
     onScroll(event) {
       if (this.$el.scrollHeight - this.$el.scrollTop === this.$el.clientHeight) {
-        this.$emit("bottom-reached", event);
+        this.$emit("bottomReached", event);
       }
       this.$emit("scroll", event);
     },
@@ -86,8 +86,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ], 42, _hoisted_1);
 }
-const NcAppSidebarTab = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3738f8d6"]]);
+const NcAppSidebarTab = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-9d737d13"]]);
 export {
   NcAppSidebarTab as N
 };
-//# sourceMappingURL=NcAppSidebarTab-DG51ajic.mjs.map
+//# sourceMappingURL=NcAppSidebarTab-D1RmFRTu.mjs.map

package/dist/chunks/NcAppSidebarTab-D1RmFRTu.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcAppSidebarTab-D1RmFRTu.mjs","sources":["../../src/components/NcAppSidebarTab/NcAppSidebarTab.vue"],"sourcesContent":["\n\n\n\n<template>\n\t<section :id=\"`tab-${id}`\"\n\t\t:class=\"{'app-sidebar__tab--active': isActive}\"\n\t\t:aria-hidden=\"!isActive\"\n\t\t:aria-label=\"isTablistShown() ? undefined : name\"\n\t\t:aria-labelledby=\"isTablistShown() ? `tab-button-${id}` : undefined\"\n\t\tclass=\"app-sidebar__tab\"\n\t\t:tabindex=\"isTablistShown() ? 0 : -1\"\n\t\t:role=\"isTablistShown() ? 'tabpanel' : undefined\"\n\t\t@scroll=\"onScroll\">\n\t\t<h3 class=\"hidden-visually\">\n\t\t\t{{ name }}\n\t\t</h3>\n\t\t\n\t\t<slot />\n\t</section>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppSidebarTab',\n\n\tinject: ['registerTab', 'unregisterTab', 'getActiveTab', 'isTablistShown'],\n\n\tprops: {\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Tab name in navigation\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 * Tab icon's html class in navigation. Used if #icon slot is not provided\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Tab order in navigation. If not provided, name is used.\n\t\t */\n\t\torder: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\t},\n\n\temits: [\n\t\t'bottomReached',\n\t\t'scroll',\n\t],\n\n\texpose: ['id', 'name', 'icon', 'order', 'renderIcon'],\n\n\tcomputed: {\n\t\t/**\n\t\t * Is the current tab an active tab, that should be shown?\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisActive() {\n\t\t\treturn this.getActiveTab() === this.id\n\t\t},\n\t},\n\n\tcreated() {\n\t\t// As the tab is created - register it in the tabs component\n\t\t// It's better to provide computed tab object, not component instance as it easy\n\t\tthis.registerTab(this)\n\t},\n\n\tbeforeUnmount() {\n\t\t// Unregister the tab from tabs\n\t\tthis.unregisterTab(this.id)\n\t},\n\n\tmethods: {\n\t\tonScroll(event) {\n\t\t\t// Are we scrolled to the very bottom ?\n\t\t\tif (this.$el.scrollHeight - this.$el.scrollTop === this.$el.clientHeight) {\n\t\t\t\t/**\n\t\t\t\t * Bottom scroll is reached\n\t\t\t\t *\n\t\t\t\t * @property {Event} event Native scroll event\n\t\t\t\t */\n\t\t\t\tthis.$emit('bottomReached', event)\n\t\t\t}\n\t\t\t/**\n\t\t\t * @property {Event} event Native scroll event\n\t\t\t */\n\t\t\tthis.$emit('scroll', event)\n\t\t},\n\n\t\t/**\n\t\t * Render tab's icon slot if any\n\t\t *\n\t\t * @return {import('vue').VNode[]}\n\t\t */\n\t\trenderIcon() {\n\t\t\treturn this.$slots.icon?.()\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.app-sidebar__tab {\n\tdisplay: none;\n\tpadding: 10px;\n\tmin-height: 100%; // fill available height\n\tmax-height: 100%; // scroll inside\n\theight: 100%;\n\toverflow: auto;\n\n\t&:focus {\n\t\tborder-color: var(--color-primary-element);\n\t\tbox-shadow: 0 0 0.2em var(--color-primary-element);\n\t\toutline: 0;\n\t}\n\n\t&--active {\n\t\tdisplay: block;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString","_renderSlot"],"mappings":";;AA2BA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,QAAQ,CAAC,eAAe,iBAAiB,gBAAgB,gBAAgB;AAAA,EAEzE,OAAO;AAAA,IACN,IAAI;AAAA,MACH,MAAM;AAAA,MACN,UAAU;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,OAAO;AAAA,IACN;AAAA,IACA;AAAA,EACA;AAAA,EAED,QAAQ,CAAC,MAAM,QAAQ,QAAQ,SAAS,YAAY;AAAA,EAEpD,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMT,WAAW;AACV,aAAO,KAAK,aAAe,MAAI,KAAK;AAAA,IACpC;AAAA,EACD;AAAA,EAED,UAAU;AAGT,SAAK,YAAY,IAAI;AAAA,EACrB;AAAA,EAED,gBAAgB;AAEf,SAAK,cAAc,KAAK,EAAE;AAAA,EAC1B;AAAA,EAED,SAAS;AAAA,IACR,SAAS,OAAO;AAEf,UAAI,KAAK,IAAI,eAAe,KAAK,IAAI,cAAc,KAAK,IAAI,cAAc;AAMzE,aAAK,MAAM,iBAAiB,KAAK;AAAA,MAClC;AAIA,WAAK,MAAM,UAAU,KAAK;AAAA,IAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAa;AACZ,aAAO,KAAK,OAAO,OAAI;AAAA,IACvB;AAAA,EACD;AACF;AAtHA,MAAA,aAAA,CAAA,MAAA,eAAA,cAAA,mBAAA,YAAA,MAAA;AAkBM,MAAA,aAAA,EAAA,OAAM,kBAAiB;;sBAT5BA,mBAcU,WAAA;AAAA,IAdA,WAAW,OAAE,EAAA;AAAA,IACrB,OAVHC,eAAA,CAAA,EAAA,4BAUuC,SAAQ,SAAA,GAIvC,kBAAkB,CAAA;AAAA,IAHvB,gBAAc,SAAQ;AAAA,IACtB,cAAY,SAAA,eAAmB,IAAA,SAAY,OAAI;AAAA,IAC/C,mBAAiB,SAAA,mBAAiC,cAAA,OAAA,EAAE,KAAK;AAAA,IAEzD,UAAU,SAAc,eAAA,IAAA,IAAA;AAAA,IACxB,MAAM,SAAc,eAAA,IAAA,aAAkB;AAAA,IACtC,iDAAQ,SAAQ,YAAA,SAAA,SAAA,GAAA,IAAA;AAAA;IACjBC,mBAEK,MAFL,YAEKC,gBADD,OAAI,IAAA,GAAA,CAAA;AAAA,IAGRC,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,EAtBV,GAAA,IAAA,UAAA;;;"}

package/dist/chunks/{NcAvatar-CSk-1oFe.mjs → NcAvatar-PCbT0J_-.mjs} RENAMED Viewed

@@ -1,31 +1,34 @@
-import '../assets/NcAvatar-B3wk2Xxl.css';
-import { N as NcActions } from "./NcActions-DS88I6qk.mjs";
+import '../assets/NcAvatar-g7MoHyFd.css';
+import { getCurrentUser } from "@nextcloud/auth";
+import axios from "@nextcloud/axios";
+import { getBuilder } from "@nextcloud/browser-storage";
+import { unsubscribe, subscribe } from "@nextcloud/event-bus";
+import { generateOcsUrl, generateUrl } from "@nextcloud/router";
+import { vOnClickOutside } from "@vueuse/components";
+import { useTemplateRef, resolveComponent, resolveDirective, withDirectives, createElementBlock, openBlock, mergeProps, toHandlers, renderSlot, createBlock, createCommentVNode, normalizeClass, withCtx, createSlots, Fragment, renderList, resolveDynamicComponent, createTextVNode, toDisplayString, createVNode, normalizeStyle, createElementVNode } from "vue";
+import { I as IconDotsHorizontal } from "./DotsHorizontal-BJ_GCGpi.mjs";
+import { N as NcActions } from "./NcActions-BM3DmGLW.mjs";
 import { N as NcActionLink } from "./NcActionLink-BEo7zmXX.mjs";
 import { N as NcActionRouter } from "./NcActionRouter-ERoQjJKv.mjs";
-import { N as NcActionText } from "./NcActionText-DJWBefhJ.mjs";
-import { N as NcButton } from "./NcButton-Byg8-ta1.mjs";
-import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BOiCKv0b.mjs";
-import { N as NcLoadingIcon } from "./NcLoadingIcon-CsMn1bFR.mjs";
-import { N as NcUserStatusIcon, g as getUserStatusText } from "./NcUserStatusIcon-CtOZd90o.mjs";
-import { N as NcActionButton } from "./NcActionButton-CnX0dQzz.mjs";
-import { u as usernameToColor } from "./usernameToColor-CuTR6O_B.mjs";
+import { N as NcActionText } from "./NcActionText-16Mj4-P1.mjs";
+import { N as NcButton } from "./NcButton-yN4vYgXb.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-CprKb_SE.mjs";
+import { N as NcLoadingIcon } from "./NcLoadingIcon-Dm3kRPrf.mjs";
+import { N as NcUserStatusIcon, g as getUserStatusText } from "./NcUserStatusIcon-DqQYA-EE.mjs";
+import { g as getRoute } from "./autolink-CKPk5rzg.mjs";
+import "../composables/useFormatDateTime/index.mjs";
+import "../composables/useHotKey/index.mjs";
+import { useIsDarkThemeElement } from "../composables/useIsDarkTheme/index.mjs";
+import "../composables/useIsFullscreen/index.mjs";
+import "../composables/useIsMobile/index.mjs";
+import { u as usernameToColor } from "./usernameToColor-2yV_Zdvb.mjs";
 import { getEnabledContactsMenuActions } from "../functions/contactsMenu/index.mjs";
-import { g as getAvatarUrl } from "./NcMentionBubble.vue_vue_type_style_index_0_scoped_c29760cd_lang-CZdrlInz.mjs";
-import { resolveComponent, resolveDirective, withDirectives, createElementBlock, openBlock, mergeProps, toHandlers, renderSlot, createBlock, createCommentVNode, normalizeClass, withCtx, createSlots, Fragment, renderList, resolveDynamicComponent, createTextVNode, toDisplayString, createVNode, normalizeStyle, createElementVNode } from "vue";
+import { g as getAvatarUrl } from "./NcMentionBubble.vue_vue_type_style_index_0_scoped_25f4d6e1_lang-aMwzB20D.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 import "escape-html";
 import "striptags";
-import { getCurrentUser } from "@nextcloud/auth";
-import axios from "@nextcloud/axios";
 import { getCapabilities } from "@nextcloud/capabilities";
-import { generateOcsUrl, generateUrl } from "@nextcloud/router";
-import { r as register, m as t9, a as t } from "./_l10n-Bg-fZ9R0.mjs";
-import { g as getRoute } from "./autolink-CKPk5rzg.mjs";
-import { l as logger } from "./logger-D3RVzcfQ.mjs";
-import { D as DotsHorizontal } from "./DotsHorizontal-AMVAlTNH.mjs";
-import { unsubscribe, subscribe } from "@nextcloud/event-bus";
-import { getBuilder } from "@nextcloud/browser-storage";
-import { vOnClickOutside } from "@vueuse/components";
+import { r as register, j as t9, a as t } from "./_l10n-tXci8WM1.mjs";
 const userStatus = {
   data() {
     return {
@@ -96,7 +99,7 @@ const _sfc_main = {
     ClickOutside: vOnClickOutside
   },
   components: {
-    DotsHorizontal,
+    IconDotsHorizontal,
     NcActions,
     NcButton,
     NcIconSvgWrapper,
@@ -223,6 +226,13 @@ const _sfc_main = {
       default: "body"
     }
   },
+  setup() {
+    const root = useTemplateRef("main");
+    const isDarkTheme = useIsDarkThemeElement(root);
+    return {
+      isDarkTheme
+    };
+  },
   data() {
     return {
       avatarUrlLoaded: null,
@@ -435,6 +445,7 @@ const _sfc_main = {
           icon: state.icon,
           message: state.message
         };
+        this.hasStatus = state.status !== null;
       }
     },
     /**
@@ -500,7 +511,11 @@ const _sfc_main = {
      * @return {string}
      */
     avatarUrlGenerator(user, size) {
-      let avatarUrl = getAvatarUrl(user, size, this.isGuest);
+      let avatarUrl = getAvatarUrl(user, {
+        size,
+        isDarkTheme: this.isDarkTheme,
+        isGuest: this.isGuest
+      });
       if (user === getCurrentUser()?.uid && typeof oc_userconfig !== "undefined") {
         avatarUrl += "?v=" + oc_userconfig.avatar.version;
       }
@@ -557,7 +572,7 @@ const _hoisted_3 = {
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_NcLoadingIcon = resolveComponent("NcLoadingIcon");
-  const _component_DotsHorizontal = resolveComponent("DotsHorizontal");
+  const _component_IconDotsHorizontal = resolveComponent("IconDotsHorizontal");
   const _component_NcButton = resolveComponent("NcButton");
   const _component_NcIconSvgWrapper = resolveComponent("NcIconSvgWrapper");
   const _component_NcActions = resolveComponent("NcActions");
@@ -598,7 +613,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: $options.toggleMenu
     }, {
       icon: withCtx(() => [
-        $data.contactsMenuLoading ? (openBlock(), createBlock(_component_NcLoadingIcon, { key: 0 })) : (openBlock(), createBlock(_component_DotsHorizontal, {
+        $data.contactsMenuLoading ? (openBlock(), createBlock(_component_NcLoadingIcon, { key: 0 })) : (openBlock(), createBlock(_component_IconDotsHorizontal, {
           key: 1,
           size: 20
         }))
@@ -668,9 +683,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     [_directive_click_outside, $options.closeMenu]
   ]);
 }
-const NcAvatar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-af2d3203"]]);
+const NcAvatar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-885e80e8"]]);
 export {
   NcAvatar as N,
   userStatus as u
 };
-//# sourceMappingURL=NcAvatar-CSk-1oFe.mjs.map
+//# sourceMappingURL=NcAvatar-PCbT0J_-.mjs.map