@nextcloud/vue 8.5.0 → 9.0.0-alpha.0

package/dist/chunks/NcAppSidebar-nHbqU8Wl.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcAppSidebar-nHbqU8Wl.mjs","sources":["../../src/components/NcAppSidebar/NcAppSidebarTabs.vue","../../node_modules/vue-material-design-icons/Star.vue","../../node_modules/vue-material-design-icons/StarOutline.vue","../../src/components/NcAppSidebar/NcAppSidebar.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  - @copyright Copyright (c) 2020 Simon Belbeoch <simon.belbeoch@gmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\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\"\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:checked=\"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:checked=\"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 NcVNodes from '../NcVNodes/index.js'\nimport NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/index.js'\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},\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 active.sync\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\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--checked > * {\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","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"!title\"\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\"\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  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\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\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\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'\n\timport Cog from 'vue-material-design-icons/Cog'\n\timport ShareVariant from 'vue-material-design-icons/ShareVariant'\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}\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<NcAppSidebar\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</div>\n</template>\n<script>\nimport Cog from 'vue-material-design-icons/Cog'\n\nexport default {\n\tcomponents: {\n\t\tCog,\n\t},\n}\n</script>\n```\n\n### Dynamic tabs\n\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"showTabs[0]\">Show search tab</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"showTabs[1]\">Show settings tab</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"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'\nimport Cog from 'vue-material-design-icons/Cog'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant'\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'\nimport Cog from 'vue-material-design-icons/Cog'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant'\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\t:active.sync=\"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'\nimport Cog from 'vue-material-design-icons/Cog'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant'\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\t:name.sync=\"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\t:name-editable.sync=\"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### 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'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tMagnify,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<transition appear\n\t\tname=\"slide-right\"\n\t\t@before-enter=\"onBeforeEnter\"\n\t\t@after-enter=\"onAfterEnter\"\n\t\t@before-leave=\"onBeforeLeave\"\n\t\t@after-leave=\"onAfterLeave\">\n\t\t<aside id=\"app-sidebar-vue\"\n\t\t\tref=\"sidebar\"\n\t\t\tclass=\"app-sidebar\"\n\t\t\t@keydown.esc.stop=\"isMobile && closeSidebar()\">\n\t\t\t<header :class=\"{\n\t\t\t\t\t'app-sidebar-header--with-figure': hasFigure,\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<!-- container for figure and description, allows easy switching to compact mode -->\n\t\t\t\t<div class=\"app-sidebar-header__info\">\n\t\t\t\t\t<!-- sidebar header illustration/figure -->\n\t\t\t\t\t<div v-if=\"hasFigure && !empty\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'app-sidebar-header__figure--with-action': hasFigureClickListener\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\tclass=\"app-sidebar-header__figure\"\n\t\t\t\t\t\t:style=\"{\n\t\t\t\t\t\t\tbackgroundImage: `url(${background})`\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click=\"onFigureClick\"\n\t\t\t\t\t\t@keydown.enter=\"onFigureClick\">\n\t\t\t\t\t\t<slot class=\"app-sidebar-header__background\" name=\"header\" />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- sidebar details -->\n\t\t\t\t\t<div v-if=\"!empty\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'app-sidebar-header__desc--with-tertiary-action': canStar || $slots['tertiary-actions'],\n\t\t\t\t\t\t\t'app-sidebar-header__desc--editable': nameEditable && !subname,\n\t\t\t\t\t\t\t'app-sidebar-header__desc--with-subname--editable': nameEditable && subname,\n\t\t\t\t\t\t\t'app-sidebar-header__desc--without-actions': !$slots['secondary-actions'],\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\tclass=\"app-sidebar-header__desc\">\n\t\t\t\t\t\t<!-- favourite icon -->\n\t\t\t\t\t\t<div v-if=\"canStar || $slots['tertiary-actions']\" class=\"app-sidebar-header__tertiary-actions\">\n\t\t\t\t\t\t\t<slot name=\"tertiary-actions\">\n\t\t\t\t\t\t\t\t<NcButton v-if=\"canStar\"\n\t\t\t\t\t\t\t\t\t:aria-label=\"favoriteTranslated\"\n\t\t\t\t\t\t\t\t\t:pressed=\"isStarred\"\n\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__star\"\n\t\t\t\t\t\t\t\t\ttype=\"secondary\"\n\t\t\t\t\t\t\t\t\t@click.prevent=\"toggleStarred\">\n\t\t\t\t\t\t\t\t\t<template #icon>\n\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<Star v-else-if=\"isStarred\" :size=\"20\" />\n\t\t\t\t\t\t\t\t\t\t<StarOutline v-else :size=\"20\" />\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t</slot>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<!-- name -->\n\t\t\t\t\t\t<div class=\"app-sidebar-header__name-container\">\n\t\t\t\t\t\t\t<div class=\"app-sidebar-header__mainname-container\">\n\t\t\t\t\t\t\t\t<!-- main name -->\n\t\t\t\t\t\t\t\t<h2 v-show=\"!nameEditable\"\n\t\t\t\t\t\t\t\t\tv-linkify=\"{text: name, linkify: linkifyName}\"\n\t\t\t\t\t\t\t\t\t:aria-label=\"title\"\n\t\t\t\t\t\t\t\t\t:title=\"title\"\n\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname\"\n\t\t\t\t\t\t\t\t\t:tabindex=\"nameEditable ? 0 : undefined\"\n\t\t\t\t\t\t\t\t\t@click.self=\"editName\">\n\t\t\t\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t\t<template v-if=\"nameEditable\">\n\t\t\t\t\t\t\t\t\t<form v-click-outside=\"() => onSubmitName()\"\n\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@submit.prevent=\"onSubmitName\">\n\t\t\t\t\t\t\t\t\t\t<input ref=\"nameInput\"\n\t\t\t\t\t\t\t\t\t\t\tv-focus\n\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\ttype=\"text\"\n\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:value=\"name\"\n\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@input=\"onNameInput\">\n\t\t\t\t\t\t\t\t\t\t<NcButton type=\"tertiary-no-background\"\n\t\t\t\t\t\t\t\t\t\t\t:aria-label=\"changeNameTranslated\"\n\t\t\t\t\t\t\t\t\t\t\tnative-type=\"submit\">\n\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<ArrowRight :size=\"20\" />\n\t\t\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t\t\t</form>\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t<!-- header main menu -->\n\t\t\t\t\t\t\t\t<NcActions v-if=\"$slots['secondary-actions']\"\n\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__menu\"\n\t\t\t\t\t\t\t\t\t:force-menu=\"forceMenu\">\n\t\t\t\t\t\t\t\t\t<slot name=\"secondary-actions\" />\n\t\t\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<!-- secondary name -->\n\t\t\t\t\t\t\t<p v-if=\"subname.trim() !== ''\"\n\t\t\t\t\t\t\t\t:aria-label=\"subtitle\"\n\t\t\t\t\t\t\t\t:title=\"subtitle\"\n\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__subname\">\n\t\t\t\t\t\t\t\t{{ subname }}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<NcButton ref=\"closeButton\"\n\t\t\t\t\t:title=\"closeTranslated\"\n\t\t\t\t\t:aria-label=\"closeTranslated\"\n\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\tclass=\"app-sidebar__close\"\n\t\t\t\t\t@click.prevent=\"closeSidebar\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Close :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\n\t\t\t\t<div v-if=\"$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@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 NcAppSidebarTabs from './NcAppSidebarTabs.vue'\nimport NcActions from '../NcActions/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport NcButton from '../NcButton/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.js'\nimport Focus from '../../directives/Focus/index.js'\nimport Linkify from '../../directives/Linkify/index.js'\nimport Tooltip from '../../directives/Tooltip/index.js'\nimport { useIsSmallMobile } from '../../composables/useIsMobile/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.js'\nimport { t } from '../../l10n.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\nimport Star from 'vue-material-design-icons/Star.vue'\nimport StarOutline from 'vue-material-design-icons/StarOutline.vue'\n\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport { createFocusTrap } from 'focus-trap'\n\nexport default {\n\tname: 'NcAppSidebar',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcAppSidebarTabs,\n\t\tArrowRight,\n\t\tNcButton,\n\t\tNcLoadingIcon,\n\t\tNcEmptyContent,\n\t\tClose,\n\t\tStar,\n\t\tStarOutline,\n\t},\n\n\tdirectives: {\n\t\tfocus: Focus,\n\t\tlinkify: Linkify,\n\t\tClickOutside,\n\t\tTooltip,\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 * 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\t},\n\n\temits: [\n\t\t'close',\n\t\t'closing',\n\t\t'closed',\n\t\t'opening',\n\t\t'opened',\n\t\t'figure-click',\n\t\t'update:starred',\n\t\t'update:nameEditable',\n\t\t'update:name',\n\t\t'update:active',\n\t\t'submit-name',\n\t\t'dismiss-editing',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsSmallMobile(),\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}\n\t},\n\n\tcomputed: {\n\t\tcanStar() {\n\t\t\treturn this.isStarred !== null\n\t\t},\n\t\thasFigure() {\n\t\t\treturn this.$slots.header || this.background\n\t\t},\n\t\thasFigureClickListener() {\n\t\t\treturn this.$listeners['figure-click']\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\t},\n\n\tmounted() {\n\t\tthis.toggleFocusTrap()\n\t},\n\n\tbeforeDestroy() {\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\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\t// The app navigation toggle. Navigation can be opened above the sidebar\n\t\t\t\t// Take the parent element, because the focus-trap requires a container with elements, not the element itself\n\t\t\t\tdocument.querySelector('[aria-controls=\"app-navigation-vue\"]')?.parentElement,\n\t\t\t], {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\tfallbackFocus: this.$refs.closeButton,\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\t toggleFocusTrap() {\n\t\t\tif (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\tonBeforeEnter(element) {\n\t\t\t/**\n\t\t\t * The sidebar is opening and the transition is in progress\n\t\t\t *\n\t\t\t * @type {HTMLElement}\n\t\t\t */\n\t\t\tthis.$emit('opening', element)\n\t\t},\n\t\tonAfterEnter(element) {\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\tonBeforeLeave(element) {\n\t\t\t/**\n\t\t\t * The sidebar is closing and the transition is in progress\n\t\t\t *\n\t\t\t * @type {HTMLElement}\n\t\t\t */\n\t\t\tthis.$emit('closing', 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\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},\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\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\teditName() {\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\tthis.$nextTick(\n\t\t\t\t\t() => this.$refs.nameInput.focus(),\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<style lang=\"scss\" scoped>\n$sidebar-min-width: 300px;\n$sidebar-max-width: 500px;\n\n$desc-vertical-padding: 18px;\n$desc-vertical-padding-compact: 10px;\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: 6px;\n\n/*\n\tSidebar: to be used within #content\n\tapp-content will be shrinked properly\n*/\n.app-sidebar {\n\tz-index: 1500;\n\ttop: 0;\n\tright: 0;\n\tdisplay: flex;\n\toverflow-x: hidden;\n\toverflow-y: auto;\n\tflex-direction: column;\n\tflex-shrink: 0;\n\twidth: 27vw;\n\tmin-width: $sidebar-min-width;\n\tmax-width: $sidebar-max-width;\n\theight: 100%;\n\tborder-left: 1px solid var(--color-border);\n\tbackground: var(--color-main-background);\n\n\t.app-sidebar-header {\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\tright: $top-buttons-spacing;\n\t\t\twidth: $clickable-area;\n\t\t\theight: $clickable-area;\n\t\t\topacity: $opacity_normal;\n\t\t\tborder-radius: math.div($clickable-area, 2);\n\t\t\t&:hover,\n\t\t\t&:active,\n\t\t\t&:focus {\n\t\t\t\topacity: $opacity_full;\n\t\t\t\tbackground-color: $action-background-hover;\n\t\t\t}\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\tz-index: 2;\n\t\t\t\t\twidth: $desc-height + $desc-vertical-padding;\n\t\t\t\t\theight: $desc-height + $desc-vertical-padding;\n\t\t\t\t\tmargin: math.div($desc-vertical-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-left: 0;\n\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\tmin-width: 0;\n\t\t\t\t\tpadding-right: 2 * $clickable-area + $top-buttons-spacing;\n\t\t\t\t\tpadding-top: $desc-vertical-padding-compact;\n\n\t\t\t\t\t&.app-sidebar-header__desc--without-actions {\n\t\t\t\t\t\tpadding-right: #{$clickable-area + $top-buttons-spacing};\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: math.div($desc-vertical-padding, 2);\n\t\t\t\t\t\tleft: -1 * $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\tright: $clickable-area + $top-buttons-spacing; // left of the close button\n\t\t\t\t\t\tbackground-color: transparent;\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\tright: $top-buttons-spacing + $clickable-area;\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-right: #{$clickable-area * 2 + $top-buttons-spacing};\n\n\t\t\t\t&.app-sidebar-header__desc--without-actions {\n\t\t\t\t\tpadding-right: #{$clickable-area + $top-buttons-spacing};\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: #{$desc-vertical-padding} #{$top-buttons-spacing} #{$desc-vertical-padding} #{math.div($desc-vertical-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-left: 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: $clickable-area;\n\t\t\t\twidth: $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: $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\theight: $clickable-area;\n\t\t\t\t\t\twidth: $clickable-area;\n\t\t\t\t\t\tborder-radius: math.div($clickable-area, 2);\n\t\t\t\t\t\tbackground-color: $action-background-hover;\n\t\t\t\t\t\tmargin-left: 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\tpadding: 0;\n\t\t\t\t\topacity: $opacity_normal;\n\t\t\t\t\tfont-size: var(--default-font-size);\n\t\t\t\t}\n\t\t\t}\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\twidth: 100vw;\n\t\tmax-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: max-width, min-width;\n}\n\n.slide-right-enter-to,\n.slide-right-leave {\n\tmin-width: $sidebar-min-width;\n\tmax-width: $sidebar-max-width;\n}\n\n.slide-right-enter,\n.slide-right-leave-to {\n\tmin-width: 0 !important;\n\tmax-width: 0 !important;\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$3","NcCheckboxRadioSwitch","NcVNodes","tab","active","id","a","b","tabIndex","_sfc_main$2","_sfc_main$1","_sfc_main","NcActions","NcAppSidebarTabs","ArrowRight","NcButton","NcLoadingIcon","NcEmptyContent","Close","Star","StarOutline","directive","directive$1","vOnClickOutside","VTooltip","useIsSmallMobile","t","createFocusTrap","getTrapStack","element","e","event","activeTab"],"mappings":"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","x_google_ignoreList":[1,2]}

package/dist/chunks/NcAvatar-1gX-bnpd.mjs

@@ -1,467 +0,0 @@
-import "../assets/NcAvatar-Vg6Mi1TD.css";
-import { N as m } from "./NcActions-CNDgnRLf.mjs";
-import v from "../Components/NcActionLink.mjs";
-import g from "../Components/NcButton.mjs";
-import S from "../Components/NcLoadingIcon.mjs";
-import { N as y, g as U } from "./NcUserStatusIcon-H5b_e8YL.mjs";
-import { u as l } from "./usernameToColor-pYptUj7i.mjs";
-import "../Composables/useIsFullscreen.mjs";
-import "../Composables/useIsMobile.mjs";
-import { generateOcsUrl as _, generateUrl as d } from "@nextcloud/router";
-/* empty css                                                                          */
-import { n as N } from "./_plugin-vue2_normalizer-u6G_3nkj.mjs";
-import "linkify-string";
-import "escape-html";
-import "striptags";
-import "vue";
-import { getCurrentUser as u } from "@nextcloud/auth";
-import h from "@nextcloud/axios";
-import { getCapabilities as M } from "@nextcloud/capabilities";
-import { r as w, n as A, a as r } from "./_l10n-tZEKUJRj.mjs";
-import { D as b } from "./DotsHorizontal-NssXDZGM.mjs";
-import { subscribe as n, unsubscribe as o } from "@nextcloud/event-bus";
-import { getBuilder as x } from "@nextcloud/browser-storage";
-import { vOnClickOutside as L } from "@vueuse/components";
-/**
- * @copyright Copyright (c) 2020 Georg Ehrke <georg-nextcloud@ehrke.email>
- *
- * @author Georg Ehrke <georg-nextcloud@ehrke.email>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-const C = {
-  data() {
-    return {
-      hasStatus: !1,
-      userStatus: {
-        status: null,
-        message: null,
-        icon: null
-      }
-    };
-  },
-  methods: {
-    /**
-     * Fetches the user-status from the server
-     *
-     * @param {string} userId UserId of the user to fetch the status for
-     *
-     * @return {Promise<void>}
-     */
-    async fetchUserStatus(s) {
-      if (!s)
-        return;
-      const t = M();
-      if (!(!Object.prototype.hasOwnProperty.call(t, "user_status") || !t.user_status.enabled) && u())
-        try {
-          const { data: e } = await h.get(_("apps/user_status/api/v1/statuses/{userId}", { userId: s })), {
-            status: a,
-            message: i,
-            icon: f
-          } = e.ocs.data;
-          this.userStatus.status = a, this.userStatus.message = i || "", this.userStatus.icon = f || "", this.hasStatus = !0;
-        } catch (e) {
-          if (e.response.status === 404 && e.response.data.ocs?.data?.length === 0)
-            return;
-          console.error(e);
-        }
-    }
-  }
-};
-w(A);
-const p = x("nextcloud").persist().build();
-function I(s) {
-  const t = p.getItem("user-has-avatar." + s);
-  return typeof t == "string" ? !!t : null;
-}
-function c(s, t) {
-  s && p.setItem("user-has-avatar." + s, t);
-}
-const D = {
-  name: "NcAvatar",
-  directives: {
-    ClickOutside: L
-  },
-  components: {
-    DotsHorizontal: b,
-    NcActions: m,
-    NcActionLink: v,
-    NcButton: g,
-    NcLoadingIcon: S,
-    NcUserStatusIcon: y
-  },
-  mixins: [C],
-  props: {
-    /**
-     * Set a custom url to the avatar image
-     * either the url, user or displayName property must be defined
-     */
-    url: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Set a css icon-class for an icon to be used instead of the avatar.
-     */
-    iconClass: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Set the user id to fetch the avatar
-     * either the url, user or displayName property must be defined
-     */
-    user: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Whether or not to display the user-status
-     */
-    showUserStatus: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Whether or not to the status-icon should be used instead of online/away
-     */
-    showUserStatusCompact: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * When the user status was preloaded via another source it can be handed in with this property to save the request.
-     * If this property is not set the status will be fetched automatically.
-     * If a preloaded no-status is available provide this object with properties "status", "icon" and "message" set to null.
-     */
-    preloadedUserStatus: {
-      type: Object,
-      default: void 0
-    },
-    /**
-     * Is the user a guest user (then we have to user a different endpoint)
-     */
-    isGuest: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Set a display name that will be rendered as a tooltip
-     * either the url, user or displayName property must be defined
-     * specify just the displayname to generate a placeholder avatar without
-     * trying to fetch the avatar based on the user id
-     */
-    displayName: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Set a size in px for the rendered avatar
-     */
-    size: {
-      type: Number,
-      default: 32
-    },
-    /**
-     * Placeholder avatars will be automatically generated when this is set to true
-     */
-    allowPlaceholder: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Disable the tooltip
-     */
-    disableTooltip: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Disable the menu
-     */
-    disableMenu: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Declares a custom tooltip when not null
-     * Fallback will be the displayName
-     *
-     * requires disableTooltip not to be set to true
-     */
-    tooltipMessage: {
-      type: String,
-      default: null
-    },
-    /**
-     * Declares username is not a user's name, when true.
-     * Prevents loading user's avatar from server and forces generating colored initials,
-     * i.e. if the user is a group
-     */
-    isNoUser: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Selector for the popover menu container
-     */
-    menuContainer: {
-      type: [String, Object, Element, Boolean],
-      default: "body"
-    }
-  },
-  data() {
-    return {
-      avatarUrlLoaded: null,
-      avatarSrcSetLoaded: null,
-      userDoesNotExist: !1,
-      isAvatarLoaded: !1,
-      isMenuLoaded: !1,
-      contactsMenuLoading: !1,
-      contactsMenuActions: [],
-      contactsMenuOpenState: !1
-    };
-  },
-  computed: {
-    avatarAriaLabel() {
-      if (this.hasMenu)
-        return this.canDisplayUserStatus || this.showUserStatusIconOnAvatar ? r("Avatar of {displayName}, {status}", { displayName: this.displayName ?? this.user, status: U(this.userStatus.status) }) : r("Avatar of {displayName}", { displayName: this.displayName ?? this.user });
-    },
-    canDisplayUserStatus() {
-      return this.showUserStatus && this.hasStatus && ["online", "away", "busy", "dnd"].includes(this.userStatus.status);
-    },
-    showUserStatusIconOnAvatar() {
-      return this.showUserStatus && this.showUserStatusCompact && this.hasStatus && this.userStatus.status !== "dnd" && this.userStatus.icon;
-    },
-    /**
-     * The user identifier, either the display name if set or the user property
-     * If both properties are not set an empty string is returned
-     */
-    userIdentifier() {
-      return this.isDisplayNameDefined ? this.displayName : this.isUserDefined ? this.user : "";
-    },
-    isUserDefined() {
-      return typeof this.user < "u";
-    },
-    isDisplayNameDefined() {
-      return typeof this.displayName < "u";
-    },
-    isUrlDefined() {
-      return typeof this.url < "u";
-    },
-    hasMenu() {
-      return this.disableMenu ? !1 : this.isMenuLoaded ? this.menu.length > 0 : !(this.user === u()?.uid || this.userDoesNotExist || this.url);
-    },
-    /**
-     * True if initials should be shown as the user icon fallback
-     */
-    showInitials() {
-      return this.allowPlaceholder && this.userDoesNotExist && !(this.iconClass || this.$slots.icon);
-    },
-    avatarStyle() {
-      return {
-        "--size": this.size + "px",
-        lineHeight: this.size + "px",
-        fontSize: Math.round(this.size * 0.45) + "px"
-      };
-    },
-    initialsWrapperStyle() {
-      const { r: s, g: t, b: e } = l(this.userIdentifier);
-      return {
-        backgroundColor: `rgba(${s}, ${t}, ${e}, 0.1)`
-      };
-    },
-    initialsStyle() {
-      const { r: s, g: t, b: e } = l(this.userIdentifier);
-      return {
-        color: `rgb(${s}, ${t}, ${e})`
-      };
-    },
-    tooltip() {
-      return this.disableTooltip ? !1 : this.tooltipMessage ? this.tooltipMessage : this.displayName;
-    },
-    /**
-     * Get the (max. two) initials of the user as uppcase string
-     */
-    initials() {
-      let s = "?";
-      if (this.showInitials) {
-        const t = this.userIdentifier.trim();
-        if (t === "")
-          return "?";
-        const e = t.match(/[\p{L}\p{N}\s]/gu).join(""), a = e.lastIndexOf(" ");
-        s = String.fromCodePoint(e.codePointAt(0)), a !== -1 && (s = s.concat(String.fromCodePoint(e.codePointAt(a + 1))));
-      }
-      return s.toLocaleUpperCase();
-    },
-    menu() {
-      const s = this.contactsMenuActions.map((e) => ({
-        href: e.hyperlink,
-        icon: e.icon,
-        text: e.title
-      }));
-      function t(e) {
-        const a = document.createTextNode(e), i = document.createElement("p");
-        return i.appendChild(a), i.innerHTML;
-      }
-      return this.showUserStatus && (this.userStatus.icon || this.userStatus.message) ? [{
-        href: "#",
-        icon: `data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='0' y='14' font-size='14'>${t(this.userStatus.icon)}</text></svg>`,
-        text: `${this.userStatus.message}`
-      }].concat(s) : s;
-    }
-  },
-  watch: {
-    url() {
-      this.userDoesNotExist = !1, this.loadAvatarUrl();
-    },
-    user() {
-      this.userDoesNotExist = !1, this.isMenuLoaded = !1, this.loadAvatarUrl();
-    }
-  },
-  mounted() {
-    this.loadAvatarUrl(), n("settings:avatar:updated", this.loadAvatarUrl), n("settings:display-name:updated", this.loadAvatarUrl), this.showUserStatus && this.user && !this.isNoUser && (this.preloadedUserStatus ? (this.userStatus.status = this.preloadedUserStatus.status || "", this.userStatus.message = this.preloadedUserStatus.message || "", this.userStatus.icon = this.preloadedUserStatus.icon || "", this.hasStatus = this.preloadedUserStatus.status !== null) : this.fetchUserStatus(this.user), n("user_status:status.updated", this.handleUserStatusUpdated));
-  },
-  beforeDestroy() {
-    o("settings:avatar:updated", this.loadAvatarUrl), o("settings:display-name:updated", this.loadAvatarUrl), this.showUserStatus && this.user && !this.isNoUser && o("user_status:status.updated", this.handleUserStatusUpdated);
-  },
-  methods: {
-    t: r,
-    handleUserStatusUpdated(s) {
-      this.user === s.userId && (this.userStatus = {
-        status: s.status,
-        icon: s.icon,
-        message: s.message
-      });
-    },
-    /**
-     * Toggle the popover menu on click or enter
-     * @param {KeyboardEvent|MouseEvent} event the UI event
-     */
-    async toggleMenu(s) {
-      s.type === "keydown" && s.key !== "Enter" || (this.contactsMenuOpenState || await this.fetchContactsMenu(), this.contactsMenuOpenState = !this.contactsMenuOpenState);
-    },
-    closeMenu() {
-      this.contactsMenuOpenState = !1;
-    },
-    async fetchContactsMenu() {
-      this.contactsMenuLoading = !0;
-      try {
-        const s = encodeURIComponent(this.user), { data: t } = await h.post(d("contactsmenu/findOne"), `shareType=0&shareWith=${s}`);
-        this.contactsMenuActions = t.topAction ? [t.topAction].concat(t.actions) : t.actions;
-      } catch {
-        this.contactsMenuOpenState = !1;
-      }
-      this.contactsMenuLoading = !1, this.isMenuLoaded = !0;
-    },
-    /**
-     * Handle avatar loading if user or url defined
-     */
-    loadAvatarUrl() {
-      if (this.isAvatarLoaded = !1, !this.isUrlDefined && (!this.isUserDefined || this.isNoUser)) {
-        this.isAvatarLoaded = !0, this.userDoesNotExist = !0;
-        return;
-      }
-      if (this.isUrlDefined) {
-        this.updateImageIfValid(this.url);
-        return;
-      }
-      if (this.size <= 64) {
-        const s = this.avatarUrlGenerator(this.user, 64), t = [
-          s + " 1x",
-          this.avatarUrlGenerator(this.user, 512) + " 8x"
-        ].join(", ");
-        this.updateImageIfValid(s, t);
-      } else {
-        const s = this.avatarUrlGenerator(this.user, 512);
-        this.updateImageIfValid(s);
-      }
-    },
-    /**
-     * Generate an avatar url from the server's avatar endpoint
-     *
-     * @param {string} user the user id
-     * @param {number} size the desired size
-     * @return {string}
-     */
-    avatarUrlGenerator(s, t) {
-      const e = window.getComputedStyle(document.body).getPropertyValue("--background-invert-if-dark") === "invert(100%)";
-      let a = "/avatar/{user}/{size}" + (e ? "/dark" : "");
-      this.isGuest && (a = "/avatar/guest/{user}/{size}" + (e ? "/dark" : ""));
-      let i = d(
-        a,
-        {
-          user: s,
-          size: t
-        }
-      );
-      return s === u()?.uid && typeof oc_userconfig < "u" && (i += "?v=" + oc_userconfig.avatar.version), i;
-    },
-    /**
-     * Check if the provided url is valid and update Avatar if so
-     *
-     * @param {string} url the avatar url
-     * @param {Array} srcset the avatar srcset
-     */
-    updateImageIfValid(s, t = null) {
-      const e = I(this.user);
-      if (this.isUserDefined && typeof e == "boolean") {
-        this.isAvatarLoaded = !0, this.avatarUrlLoaded = s, t && (this.avatarSrcSetLoaded = t), e === !1 && (this.userDoesNotExist = !0);
-        return;
-      }
-      const a = new Image();
-      a.onload = () => {
-        this.avatarUrlLoaded = s, t && (this.avatarSrcSetLoaded = t), this.isAvatarLoaded = !0, c(this.user, !0);
-      }, a.onerror = () => {
-        console.debug("Invalid avatar url", s), this.avatarUrlLoaded = null, this.avatarSrcSetLoaded = null, this.userDoesNotExist = !0, this.isAvatarLoaded = !1, c(this.user, !1);
-      }, t && (a.srcset = t), a.src = s;
-    }
-  }
-};
-var k = function() {
-  var t = this, e = t._self._c;
-  return e("span", t._g({ directives: [{ name: "click-outside", rawName: "v-click-outside", value: t.closeMenu, expression: "closeMenu" }], ref: "main", staticClass: "avatardiv popovermenu-wrapper", class: {
-    "avatardiv--unknown": t.userDoesNotExist,
-    "avatardiv--with-menu": t.hasMenu,
-    "avatardiv--with-menu-loading": t.contactsMenuLoading
-  }, style: t.avatarStyle, attrs: { title: t.tooltip, tabindex: t.hasMenu ? "0" : void 0, "aria-label": t.avatarAriaLabel, role: t.hasMenu ? "button" : void 0 } }, t.hasMenu ? {
-    click: t.toggleMenu,
-    keydown: t.toggleMenu
-  } : null), [t._t("icon", function() {
-    return [t.iconClass ? e("span", { staticClass: "avatar-class-icon", class: t.iconClass }) : t.isAvatarLoaded && !t.userDoesNotExist ? e("img", { attrs: { src: t.avatarUrlLoaded, srcset: t.avatarSrcSetLoaded, alt: "" } }) : t._e()];
-  }), t.hasMenu && !t.menu.length ? e("NcButton", { staticClass: "action-item action-item__menutoggle", attrs: { "aria-label": t.t("Open contact menu"), type: "tertiary-no-background" }, scopedSlots: t._u([{ key: "icon", fn: function() {
-    return [t.contactsMenuLoading ? e("NcLoadingIcon") : e("DotsHorizontal", { attrs: { size: 20 } })];
-  }, proxy: !0 }], null, !1, 2617833509) }) : t.hasMenu ? e("NcActions", { attrs: { "force-menu": "", "manual-open": "", type: "tertiary-no-background", container: t.menuContainer, open: t.contactsMenuOpenState }, scopedSlots: t._u([t.contactsMenuLoading ? { key: "icon", fn: function() {
-    return [e("NcLoadingIcon")];
-  }, proxy: !0 } : null], null, !0) }, t._l(t.menu, function(a, i) {
-    return e("NcActionLink", { key: i, attrs: { href: a.href, icon: a.icon } }, [t._v(" " + t._s(a.text) + " ")]);
-  }), 1) : t._e(), t.showUserStatusIconOnAvatar ? e("span", { staticClass: "avatardiv__user-status avatardiv__user-status--icon" }, [t._v(" " + t._s(t.userStatus.icon) + " ")]) : t.canDisplayUserStatus ? e("NcUserStatusIcon", { staticClass: "avatardiv__user-status", attrs: { status: t.userStatus.status, "aria-hidden": String(t.hasMenu) } }) : t._e(), t.showInitials ? e("span", { staticClass: "avatardiv__initials-wrapper", style: t.initialsWrapperStyle }, [e("span", { staticClass: "avatardiv__initials", style: t.initialsStyle }, [t._v(" " + t._s(t.initials) + " ")])]) : t._e()], 2);
-}, O = [], z = /* @__PURE__ */ N(
-  D,
-  k,
-  O,
-  !1,
-  null,
-  "914298d1",
-  null,
-  null
-);
-const rt = z.exports;
-export {
-  rt as N,
-  C as u
-};