@nextcloud/vue 9.1.0 → 9.3.0

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

@@ -1 +0,0 @@
-{"version":3,"file":"NcAppSettingsDialog-BZzj8jNU.mjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot, VNode } from 'vue'\n\nimport debounce from 'debounce'\nimport { computed, onBeforeUnmount, provide, ref, useTemplateRef, warn } from 'vue'\nimport NcDialog from '../NcDialog/NcDialog.vue'\nimport NcVNodes from '../NcVNodes/NcVNodes.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.ts'\nimport { t } from '../../l10n.ts'\nimport { APP_SETTINGS_REGISTRATION_KEY } from './useAppSettingsDialog.ts'\n\nexport interface IAppSettingsSection {\n\tid: string\n\tname: string\n\torder?: number\n\ticon?: VNode[]\n}\n\n/**\n * Determines the open / closed state of the modal\n */\nconst open = defineModel<boolean>('open', { required: true })\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Shows the navigation on desktop if true\n\t */\n\tshowNavigation?: boolean\n\n\t/**\n\t * Selector for the popover container\n\t */\n\tcontainer?: string\n\n\t/**\n\t * Name of the settings\n\t */\n\tname?: string\n\n\t/**\n\t * Additional elements to add to the focus trap\n\t */\n\tadditionalTrapElements?: (string | HTMLElement)[]\n}>(), {\n\tcontainer: 'body',\n\tname: '',\n\tadditionalTrapElements: () => [],\n})\n\ndefineSlots<{\n\t/**\n\t * The NcAppSettingsSections\n\t */\n\tdefault?: Slot\n}>()\n\nprovide(APP_SETTINGS_REGISTRATION_KEY, {\n\tregisterSection,\n\tunregisterSection,\n})\n\nconst settingsScrollerElement = useTemplateRef('settingsScroller')\n\nconst isMobile = useIsMobile()\n\nconst selectedSection = ref('')\nconst linkClicked = ref(false)\nconst registeredSections = ref<IAppSettingsSection[]>([])\n\nconst hasNavigation = computed(() => !isMobile.value && props.showNavigation)\n\n/**\n * Check if one or more navigation entries provide icons\n */\nconst hasNavigationIcons = computed(() => registeredSections.value.some(({ icon }) => !!icon))\n\n/**\n * Remove selected section once the user starts scrolling\n */\nconst unfocusNavigationItem = debounce(() => {\n\tselectedSection.value = ''\n\tif (document.activeElement?.className.includes('navigation-list__link')) {\n\t\t(document.activeElement as HTMLElement).blur()\n\t}\n}, 300)\n\n/**\n * Fallback order map to keep track of section orders if not provided by child components\n */\nconst sectionsOrderMap = new Map()\nonBeforeUnmount(() => {\n\tsectionsOrderMap.clear()\n})\n\n/**\n * Scrolls the content to the selected settings section.absolute\n *\n * @param item - the ID of the section\n */\nfunction handleSettingsNavigationClick(item: string) {\n\tlinkClicked.value = true\n\tdocument.getElementById('settings-section_' + item)!.scrollIntoView({\n\t\tbehavior: 'smooth',\n\t\tinline: 'nearest',\n\t})\n\tselectedSection.value = item\n\tsetTimeout(() => {\n\t\tlinkClicked.value = false\n\t}, 1000)\n}\n\n/**\n * Reset the dialog state when closed to have a clean state if re-opened.\n *\n * @param isOpen - The new modal open state\n */\nfunction handleCloseModal(isOpen: boolean) {\n\tif (isOpen) {\n\t\treturn\n\t}\n\n\topen.value = false\n\t// reset the scrolling state if the modal is just hidden\n\tsettingsScrollerElement.value!.scrollTop = 0\n}\n\n/**\n * When scrolled manually we remove the focus from the navigation item.\n */\nfunction handleScroll() {\n\tif (open.value && !linkClicked.value) {\n\t\tunfocusNavigationItem()\n\t}\n}\n\n/**\n * Called when a new section is registered\n *\n * @param id - The section ID\n * @param name - The section name\n * @param order - Optional section order in navigation list\n * @param icon - Optional icon component\n */\nfunction registerSection(id: string, name: string, order?: number, icon?: VNode[]) {\n\t// Check for the uniqueness of section names\n\tif (registeredSections.value.some(({ id: otherId }) => id === otherId)) {\n\t\tthrow new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`)\n\t}\n\tif (registeredSections.value.some(({ name: otherName }) => name === otherName)) {\n\t\twarn(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`)\n\t}\n\n\t// Ensure tab order is set\n\tif (order !== undefined) {\n\t\tsectionsOrderMap.set(id, order)\n\t} else if (sectionsOrderMap.has(id)) {\n\t\torder = sectionsOrderMap.get(id)\n\t} else {\n\t\t// Fallback to the closest positive number that isn't already taken\n\t\torder = Math.max(0, ...sectionsOrderMap.values()) + 1\n\t\tsectionsOrderMap.set(id, order)\n\t}\n\n\t// Sort sections by order in slots\n\tregisteredSections.value = [...registeredSections.value, { id, name, order, icon }]\n\t\t.sort(({ order: orderA }, { order: orderB }) => {\n\t\t\treturn orderA! - orderB!\n\t\t})\n\n\t// If this is the first section registered, set it as selected\n\tif (registeredSections.value.length === 1) {\n\t\tselectedSection.value = id\n\t}\n}\n\n/**\n * Called when a section is unregistered to remove it from dialog\n *\n * @param id - The section ID\n */\nfunction unregisterSection(id: string) {\n\tregisteredSections.value = registeredSections.value\n\t\t.filter(({ id: otherId }) => id !== otherId)\n\n\t// If the current section is unregistered, set the first section as selected\n\tif (selectedSection.value === id) {\n\t\tselectedSection.value = registeredSections.value[0]?.id ?? ''\n\t}\n}\n</script>\n\n<template>\n\t<NcDialog\n\t\tv-if=\"open\"\n\t\tclass=\"app-settings\"\n\t\tcontent-classes=\"app-settings__content\"\n\t\tnavigation-classes=\"app-settings__navigation\"\n\t\t:additional-trap-elements\n\t\t:container\n\t\tclose-on-click-outside\n\t\t:navigation-aria-label=\"t('Settings navigation')\"\n\t\tsize=\"large\"\n\t\t:name\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template v-if=\"hasNavigation\" #navigation=\"{ isCollapsed }\">\n\t\t\t<ul\n\t\t\t\tv-if=\"!isCollapsed\"\n\t\t\t\tclass=\"navigation-list\">\n\t\t\t\t<li v-for=\"section in registeredSections\" :key=\"section.id\">\n\t\t\t\t\t<a\n\t\t\t\t\t\t:aria-current=\"`${section.id === selectedSection}`\"\n\t\t\t\t\t\tclass=\"navigation-list__link\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'navigation-list__link--active': section.id === selectedSection,\n\t\t\t\t\t\t\t'navigation-list__link--icon': hasNavigationIcons,\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\t:href=\"`#settings-section_${section.id}`\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click.prevent=\"handleSettingsNavigationClick(section.id)\"\n\t\t\t\t\t\t@keydown.enter=\"handleSettingsNavigationClick(section.id)\">\n\t\t\t\t\t\t<div v-if=\"hasNavigationIcons\" class=\"navigation-list__link-icon\">\n\t\t\t\t\t\t\t<NcVNodes v-if=\"section.icon\" :vnodes=\"section.icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span class=\"navigation-list__link-text\">\n\t\t\t\t\t\t\t{{ section.name }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</template>\n\t\t<div ref=\"settingsScroller\" @scroll=\"handleScroll\">\n\t\t\t<slot />\n\t\t</div>\n\t</NcDialog>\n</template>\n\n<style lang=\"scss\" scoped>\n.app-settings {\n\t:deep &__navigation {\n\t\tmin-width: 200px;\n\t\tmargin-inline-end: calc(4 * var(--default-grid-baseline));\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tposition: relative;\n\t}\n\t:deep &__content {\n\t\tpadding-inline: calc(4 * var(--default-grid-baseline));\n\t}\n}\n\n.navigation-list {\n\theight: 100%;\n\toverflow-y: auto;\n\tpadding: calc(3 * var(--default-grid-baseline));\n\n\t&__link {\n\t\tdisplay: flex;\n\t\talign-content: center;\n\t\tfont-size: 16px;\n\t\theight: var(--default-clickable-area);\n\t\tmargin: 4px 0;\n\t\tline-height: var(--default-clickable-area);\n\t\tborder-radius: var(--border-radius-element);\n\t\tfont-weight: bold;\n\t\tpadding: 0 calc(4 * var(--default-grid-baseline));\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\toverflow: hidden;\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&--active {\n\t\t\tbackground-color: var(--color-primary-element-light) !important;\n\t\t}\n\n\t\t&--icon {\n\t\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t\t\tgap: var(--default-grid-baseline);\n\t\t}\n\n\t\t&-icon {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-content: center;\n\t\t\twidth: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t\tmax-width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-settings {\n\t\t:deep .dialog__name {\n\t\t\tpadding-inline-start: 16px;\n\t\t}\n\t}\n}\n</style>\n\n<docs>\nJust nest the `AppSettingSections` component into `NcAppSettingsDialog`,\nproviding the section's name prop. You can put your settings within each\n`NcAppSettingsSection` component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Example name 1\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Example name 2\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Example name 3\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Example name 4\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-5\" name=\"Example name 5\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-6\" name=\"Example name 6\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-7\" name=\"Example name 7\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-8\" name=\"Example name 8\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-9\" name=\"Example name 9\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-10\" name=\"Example name 10\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also add icons to the section navigation:\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Instagram\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Instagram :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tInstagram setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Mastodon\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Mastodon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tMastodon setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Twitch\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitch :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tTwitch setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Twitter\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tTwitter setting\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nimport Instagram from 'vue-material-design-icons/Instagram.vue'\nimport Mastodon from 'vue-material-design-icons/Mastodon.vue'\nimport Twitch from 'vue-material-design-icons/Twitch.vue'\nimport Twitter from 'vue-material-design-icons/Twitter.vue'\n\nexport default {\n\tcomponents: {\n\t\tInstagram,\n\t\tMastodon,\n\t\tTwitch,\n\t\tTwitter,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nSections order in navigation list is defined during initial rendering.\nIn case of dynamic/conditional sections rendering explicit `order` prop must be used for ordering.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Example name 1\" :order=\"1\">\n\t\t\t\tSome example content\n\t\t\t\t<NcCheckboxRadioSwitch v-model=\"showExtraSections\">Show section 3</NcCheckboxRadioSwitch>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Example name 2\" :order=\"2\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<template v-if=\"showExtraSections\">\n\t\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Example name 3\" :order=\"3\">\n\t\t\t\t\tSome example content\n\t\t\t\t</NcAppSettingsSection>\n\t\t\t</template>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Example name 4\" :order=\"4\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tsettingsOpen: false,\n\t\t\t\tshowExtraSections: true,\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n</docs>\n"],"names":["_useModel","_createBlock","additionalTrapElements","container","_unref","name","_createElementVNode","_renderSlot","_withCtx","_openBlock","_createElementBlock","_Fragment","_renderList","_withModifiers","_withKeys","NcVNodes","_toDisplayString"],"mappings":"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"}

package/dist/chunks/NcAppSettingsSection-urZiy9aH.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcAppSettingsSection-urZiy9aH.mjs","sources":["../../src/components/NcAppSettingsSection/NcAppSettingsSection.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { computed, onBeforeUnmount, onMounted, watch } from 'vue'\nimport { logger } from '../../utils/logger.ts'\nimport { useAppSettingsDialog } from '../NcAppSettingsDialog/useAppSettingsDialog.ts'\n\nconst props = defineProps<{\n\t/** Name of the section */\n\tname: string\n\t/** The id of the section */\n\tid: string\n\t/** The id of the section */\n\torder?: number\n}>()\n\nconst slots = defineSlots<{\n\t/** Section content */\n\tdefault?: Slot\n\t/** Optional icon for the section in the navigation */\n\ticon?: Slot\n}>()\n\nconst { registerSection, unregisterSection } = useAppSettingsDialog()\n\nconst htmlId = computed(() => 'settings-section_' + props.id)\n\n// Validate id prop - only alphanumeric, dash and underscore\nwatch(() => props.id, () => {\n\tif (!/^[a-z0-9\\-_]+$/.test(props.id)) {\n\t\tlogger.warn(`Invalid id prop: ${props.id}. Only alphanumeric, dash and underscore are allowed.`)\n\t}\n}, { immediate: true })\n\n// Reactive changes for section navigation\nwatch([() => props.id, () => props.name, () => props.order], (\n\t[newId, newName, newOrder],\n\t[oldId, ,],\n) => {\n\tunregisterSection(oldId)\n\tregisterSection(newId, newName, newOrder, slots?.icon?.())\n})\n\nonMounted(() => {\n\tregisterSection(props.id, props.name, props.order, slots?.icon?.())\n})\n\nonBeforeUnmount(() => {\n\tunregisterSection(props.id)\n})\n</script>\n\n<template>\n\t<section :id=\"htmlId\" :aria-labelledby=\"`${htmlId}--label`\" class=\"app-settings-section\">\n\t\t<h3 :id=\"`${htmlId}--label`\" class=\"app-settings-section__name\">\n\t\t\t{{ name }}\n\t\t</h3>\n\t\t<slot />\n\t</section>\n</template>\n\n<style lang=\"scss\" scoped>\n.app-settings-section {\n\tmargin-bottom: 80px;\n\t&__name {\n\t\tfont-size: 1.6em;\n\t\tmargin: 0;\n\t\tpadding: 20px 0;\n\t\tfont-weight: bold;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n</style>\n"],"names":["_useSlots","_createElementBlock","_createElementVNode","name","_renderSlot"],"mappings":";;;;;;;;;;;;;;AAYA,UAAM,QAAQ;AASd,UAAM,QAAQA,SAAA;AAOd,UAAM,EAAE,iBAAiB,kBAAA,IAAsB,qBAAA;AAE/C,UAAM,SAAS,SAAS,MAAM,sBAAsB,MAAM,EAAE;AAG5D,UAAM,MAAM,MAAM,IAAI,MAAM;AAC3B,UAAI,CAAC,iBAAiB,KAAK,MAAM,EAAE,GAAG;AACrC,eAAO,KAAK,oBAAoB,MAAM,EAAE,uDAAuD;AAAA,MAChG;AAAA,IACD,GAAG,EAAE,WAAW,MAAM;AAGtB,UAAM,CAAC,MAAM,MAAM,IAAI,MAAM,MAAM,MAAM,MAAM,MAAM,KAAK,GAAG,CAC5D,CAAC,OAAO,SAAS,QAAQ,GACzB,CAAC,cACG;AACJ,wBAAkB,KAAK;AACvB,sBAAgB,OAAO,SAAS,UAAU,OAAO,QAAQ;AAAA,IAC1D,CAAC;AAED,cAAU,MAAM;AACf,sBAAgB,MAAM,IAAI,MAAM,MAAM,MAAM,OAAO,OAAO,QAAQ;AAAA,IACnE,CAAC;AAED,oBAAgB,MAAM;AACrB,wBAAkB,MAAM,EAAE;AAAA,IAC3B,CAAC;;0BAIAC,mBAKU,WAAA;AAAA,QALA,IAAI,OAAA;AAAA,QAAS,sBAAoB,OAAA,KAAM;AAAA,QAAW,OAAM;AAAA,MAAA;QACjEC,mBAEK,MAAA;AAAA,UAFA,OAAO,OAAA,KAAM;AAAA,UAAW,OAAM;AAAA,QAAA,mBAC/BC,KAAAA,IAAI,GAAA,GAAA,UAAA;AAAA,QAERC,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,MAAA;;;;;"}

package/dist/chunks/NcAppSidebar-Du9lcG-G.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcAppSidebar-Du9lcG-G.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/NcAppSidebarTabsButton.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: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type NcAppSidebarTab from '../NcAppSidebarTab/NcAppSidebarTab.vue'\n\nimport NcVNodes from '../NcVNodes/NcVNodes.vue'\n\nconst selected = defineModel<boolean>('selected', { required: true })\n\ndefineProps<{\n\t/**\n\t * The sidebar tab this button controls\n\t */\n\ttab: InstanceType<typeof NcAppSidebarTab>\n}>()\n</script>\n\n<template>\n\t<button\n\t\tclass=\"button-vue\"\n\t\t:class=\"[$style.sidebarTabsButton, {\n\t\t\t[$style.sidebarTabsButton_selected]: selected,\n\t\t}]\"\n\t\trole=\"tab\"\n\t\t:aria-selected=\"selected\"\n\t\t:tabindex=\"selected ? 0 : -1\"\n\t\t@click=\"selected = true\">\n\t\t<span :class=\"$style.sidebarTabsButton__icon\">\n\t\t\t<NcVNodes :vnodes=\"tab.renderIcon()\">\n\t\t\t\t<span :class=\"[$style.sidebarTabsButton__legacyIcon, tab.icon]\" />\n\t\t\t</NcVNodes>\n\t\t</span>\n\t\t<span :class=\"$style.sidebarTabsButton__name\">\n\t\t\t{{ tab.name }}\n\t\t</span>\n\t</button>\n</template>\n\n<style module lang=\"scss\">\n.sidebarTabsButton {\n\tborder: none;\n\tborder-bottom: var(--default-grid-baseline) solid transparent !important;\n\tborder-radius: var(--border-radius-small);\n\tbackground-color: var(--color-main-background);\n\tcolor: var(--color-main-text);\n\tfont-size: var(--default-font-size);\n\tcursor: pointer;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: var(--default-grid-baseline);\n\tpadding: var(--border-radius-small);\n\ttransition:\n\t\tbackground-color var(--animation-quick),\n\t\tborder-bottom-color var(--animation-quick);\n\tmin-width: var(--default-clickable-area);\n\n\t&:hover {\n\t\tbackground-color: var(--color-background-hover) !important;\n\t}\n\n\t&:active,\n\t&:focus {\n\t\tbackground-color: var(--color-main-background) !important;\n\t}\n\n\t* {\n\t\tcursor: pointer;\n\t}\n}\n\n.sidebarTabsButton_selected {\n\tborder-bottom-color: var(--color-primary-element) !important;\n\tborder-bottom-left-radius: 0px;\n\tborder-bottom-right-radius: 0px;\n\tcursor: default;\n\n\t&:hover {\n\t\tbackground-color: var(--color-primary-element-light-hover) !important;\n\t\tcolor: var(--color-primary-element-light-text) !important;\n\t}\n\n\t* {\n\t\tcursor: default;\n\t}\n}\n\n.sidebarTabsButton__name {\n\tfont-weight: normal;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\ttext-wrap: nowrap;\n}\n\n.sidebarTabsButton_selected .sidebarTabsButton__name {\n\tfont-weight: bold;\n}\n\n.sidebarTabsButton__icon {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.sidebarTabsButton__legacyIcon {\n\tbackground-size: 20px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\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<!-- 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\n\t\t\tv-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<NcAppSidebarTabsButton\n\t\t\t\tv-for=\"tab in tabs\"\n\t\t\t\t:id=\"`tab-button-${tab.id}`\"\n\t\t\t\t:key=\"tab.id\"\n\t\t\t\tclass=\"app-sidebar-tabs__tab\"\n\t\t\t\t:aria-controls=\"`tab-${tab.id}`\"\n\t\t\t\t:selected=\"activeTab === tab.id\"\n\t\t\t\t:tab\n\t\t\t\t@update:selected=\"setActive(tab.id)\" />\n\t\t</div>\n\n\t\t<!-- tabs content -->\n\t\t<div\n\t\t\tclass=\"app-sidebar-tabs__content\"\n\t\t\t:class=\"{ 'app-sidebar-tabs__content--multiple': hasMultipleTabs }\">\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 { getCanonicalLocale } from '@nextcloud/l10n'\nimport NcAppSidebarTabsButton from './NcAppSidebarTabsButton.vue'\n\nexport default {\n\tname: 'NcAppSidebarTabs',\n\n\tcomponents: {\n\t\tNcAppSidebarTabsButton,\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\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(props) {\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: props.active,\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\ttabs() {\n\t\t\tif (this.active) {\n\t\t\t\tthis.updateActive()\n\t\t\t}\n\t\t},\n\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 && this.tabs.some(({ id }) => id === this.active))\n\t\t\t\t? this.active\n\t\t\t\t: (this.tabs[0]?.id ?? '')\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 a.name.localeCompare(b.name, [getCanonicalLocale()])\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\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\t}\n\n\t&__tab {\n\t\tflex: 1 1 1px;\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### Exposed CSS Variables\n\n| Variable                | Description                                                                                                                               |\n|-------------------------|-------------------------------------------------------------------------------------------------------------------------------------------|\n| `--app-sidebar-padding` | The padding between the toggle button and the page border.                                                                                |\n| `--app-sidebar-offset`  | The minimal offset width required to be reserved for the toggle button. <br /> Automatically changes to 0 when there is no toggle button. |\n\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 control 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<div class=\"content-styleguidist\">\n\t\t<main id=\"content-styleguidist-1\" />\n\t\t<NcAppSidebar\n\t\t\tv-model:open=\"open\"\n\t\t\t:starred=\"starred\"\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\"\n\t\t\tbackground=\"https://nextcloud.com/wp-content/uploads/2022/08/nextcloud-logo-icon.svg\"\n\t\t\t@figure-click=\"figureClick\">\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 tab content\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\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\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:selector': '#content-styleguidist-1',\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topen: true,\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<style scoped>\n\t/* This styles just mock NcContent and NcAppContent */\n\t.content-styleguidist {\n\t\t--app-sidebar-padding: 8px;\n\t\t--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));\n\t\tdisplay: flex;\n\t\tposition: relative !important;\n\t\t/* Just to prevent jumping when the sidebar is hidden */\n\t\tmin-height: 360px;\n\t\toverflow: hidden;\n\n\t\tmain {\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\n\t/* Fix styles on this style guide page */\n\t@media only screen and (max-width: 512px) {\n\t\t:deep(aside) {\n\t\t\twidth: calc(100vw - 64px) !important;\n\t\t}\n\t}\n</style>\n```\n\n### Dynamic tabs\n\nSidebar tabs and their content can be changed dynamically.\n\nSingle tab is rendered without navigation, but it is possible to force it.\n\n```vue\n<template>\n\t<div class=\"content-styleguidist\">\n\t\t<main id=\"content-styleguidist-2\">\n\t\t\t<NcCheckboxRadioSwitch v-model=\"forceTabs\">Force tab navigation</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"showTabs[0]\">Show search tab</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"showTabs[1]\">Show settings tab</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"showTabs[2]\">Show sharing tab</NcCheckboxRadioSwitch>\n\t\t</main>\n\t\t<NcAppSidebar\n\t\t\tv-model:open=\"open\"\n\t\t\t:force-tabs=\"forceTabs\"\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\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\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:selector': '#content-styleguidist-2',\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topen: true,\n\t\t\t\tforceTabs: false,\n\t\t\t\tshowTabs: [true, true, false],\n\t\t\t}\n\t\t},\n\t}\n</script>\n\n<style scoped>\n\t/* This styles just mock NcContent and NcAppContent */\n\t.content-styleguidist {\n\t\t--app-sidebar-padding: 8px;\n\t\t--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));\n\t\tdisplay: flex;\n\t\tposition: relative !important;\n\t\t/* Just to prevent jumping when the sidebar is hidden */\n\t\tmin-height: 360px;\n\t\toverflow: hidden;\n\n\t\tmain {\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\n\t/* Fix styles on this style guide page */\n\t@media only screen and (max-width: 512px) {\n\t\t:deep(aside) {\n\t\t\twidth: calc(100vw - 64px) !important;\n\t\t}\n\t}\n</style>\n```\n\n### Tabs order and programmatic activation\n\nTo customize the order of tabs, ``order`` prop can be used on child components.\n\n``active`` prop on NcAppSidebar can be modified to show required tab as active\n\n```vue\n<template>\n\t<div class=\"content-styleguidist\">\n\t\t<main id=\"content-styleguidist-3\">\n\t\t\t<NcSelect v-model=\"active\" :options=\"['search-tab', 'settings-tab', 'share-tab']\"/>\n\t\t</main>\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:open=\"open\"\n\t\t\tv-model:active=\"active\">\n\t\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\" :order=\"3\">\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\" :order=\"2\">\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\" :order=\"1\">\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\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\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:selector': '#content-styleguidist-3',\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topen: true,\n\t\t\t\tactive: 'search-tab',\n\t\t\t}\n\t\t},\n\t}\n</script>\n\n<style scoped>\n\t/* This styles just mock NcContent and NcAppContent */\n\t.content-styleguidist {\n\t\t--app-sidebar-padding: 8px;\n\t\t--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));\n\t\tdisplay: flex;\n\t\tposition: relative !important;\n\t\t/* Just to prevent jumping when the sidebar is hidden */\n\t\tmin-height: 360px;\n\t\toverflow: hidden;\n\n\t\tmain {\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\n\t/* Fix styles on this style guide page */\n\t@media only screen and (max-width: 512px) {\n\t\t:deep(aside) {\n\t\t\twidth: calc(100vw - 64px) !important;\n\t\t}\n\t}\n</style>\n```\n\n### Editable name\n\n```vue\n<template>\n\t<div class=\"content-styleguidist\">\n\t\t<main id=\"content-styleguidist-4\" />\n\t\t<NcAppSidebar\n\t\t\tv-model:open=\"open\"\n\t\t\tv-model:name=\"name\"\n\t\t\t:name-editable=\"true\"\n\t\t\tname-placeholder=\"Filename\"\n\t\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\t<!-- Insert your slots and tabs here -->\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:selector': '#content-styleguidist-4',\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topen: true,\n\t\t\t\tname: 'cat-picture.jpg',\n\t\t\t}\n\t\t},\n\t}\n</script>\n\n<style scoped>\n\t/* This styles just mock NcContent and NcAppContent */\n\t.content-styleguidist {\n\t\t--app-sidebar-padding: 8px;\n\t\t--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));\n\t\tdisplay: flex;\n\t\tposition: relative !important;\n\t\t/* Just to prevent jumping when the sidebar is hidden */\n\t\tmin-height: 360px;\n\t\toverflow: hidden;\n\n\t\tmain {\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\n\t/* Fix styles on this style guide page */\n\t@media only screen and (max-width: 512px) {\n\t\t:deep(aside) {\n\t\t\twidth: calc(100vw - 64px) !important;\n\t\t}\n\t}\n</style>\n```\n\n### Editable name after click with custom tertiary action\n\n```vue\n<template>\n\t<div class=\"content-styleguidist\">\n\t\t<main id=\"content-styleguidist-5\" />\n\t\t<NcAppSidebar\n\t\t\t:name=\"name\"\n\t\t\tv-model:open=\"open\"\n\t\t\tv-model:name-editable=\"nameEditable\"\n\t\t\t:name-placeholder=\"namePlaceholder\"\n\t\t\t:subname=\"subname\"\n\t\t\t@update:name=\"nameUpdate\">\n\t\t\t<template #tertiary-actions>\n\t\t\t\t<form>\n\t\t\t\t\t<input type=\"checkbox\" @click=\"toggledCheckbox\"/>\n\t\t\t\t</form>\n\t\t\t</template>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:selector': '#content-styleguidist-5',\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topen: true,\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<style scoped>\n\t/* This styles just mock NcContent and NcAppContent */\n\t.content-styleguidist {\n\t\t--app-sidebar-padding: 8px;\n\t\t--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));\n\t\tdisplay: flex;\n\t\tposition: relative !important;\n\t\t/* Just to prevent jumping when the sidebar is hidden */\n\t\tmin-height: 360px;\n\t\toverflow: hidden;\n\n\t\tmain {\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\n\t/* Fix styles on this style guide page */\n\t@media only screen and (max-width: 512px) {\n\t\t:deep(aside) {\n\t\t\twidth: calc(100vw - 64px) !important;\n\t\t}\n\t}\n</style>\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.\nSimply 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<template>\n\t<div class=\"content-styleguidist\">\n\t\t<main id=\"content-styleguidist-6\" />\n\t\t<NcAppSidebar\n\t\t\tv-model:open=\"open\"\n\t\t\tname=\"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</div>\n</template>\n\n<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\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:selector': '#content-styleguidist-6',\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topen: true,\n\t\t\t}\n\t\t},\n\t}\n</script>\n\n<style scoped>\n\t/* This styles just mock NcContent and NcAppContent */\n\t.content-styleguidist {\n\t\t--app-sidebar-padding: 8px;\n\t\t--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));\n\t\tdisplay: flex;\n\t\tposition: relative !important;\n\t\t/* Just to prevent jumping when the sidebar is hidden */\n\t\tmin-height: 360px;\n\t\toverflow: hidden;\n\n\t\tmain {\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\n\t/* Fix styles on this style guide page */\n\t@media only screen and (max-width: 512px) {\n\t\t:deep(aside) {\n\t\t\twidth: calc(100vw - 64px) !important;\n\t\t}\n\t}\n</style>\n```\n\n### Empty sidebar for e.g. empty content component.\n\n```vue\n<template>\n\t<div class=\"content-styleguidist\">\n\t\t<main id=\"content-styleguidist-7\" />\n\t\t<NcAppSidebar\n\t\t\tv-model:open=\"open\"\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</div>\n</template>\n\n<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\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:selector': '#content-styleguidist-7',\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topen: true,\n\t\t\t}\n\t\t},\n\t}\n</script>\n\n<style scoped>\n\t/* This styles just mock NcContent and NcAppContent */\n\t.content-styleguidist {\n\t\t--app-sidebar-padding: 8px;\n\t\t--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));\n\t\tdisplay: flex;\n\t\tposition: relative !important;\n\t\t/* Just to prevent jumping when the sidebar is hidden */\n\t\tmin-height: 360px;\n\t\toverflow: hidden;\n\n\t\tmain {\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\n\t/* Fix styles on this style guide page */\n\t@media only screen and (max-width: 512px) {\n\t\t:deep(aside) {\n\t\t\twidth: calc(100vw - 64px) !important;\n\t\t}\n\t}\n</style>\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<div class=\"content-styleguidist\">\n\t\t<main id=\"content-styleguidist-8\">\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</main>\n\t\t<NcAppSidebar\n\t\t\tv-model:open=\"open\"\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\n<script>\n\timport Cog from 'vue-material-design-icons/Cog'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCog,\n\t\t},\n\t\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:selector': '#content-styleguidist-8',\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topen: true,\n\t\t\t}\n\t\t},\n\t}\n</script>\n\n<style scoped>\n\t/* This styles just mock NcContent and NcAppContent */\n\t.content-styleguidist {\n\t\t--app-sidebar-padding: 8px;\n\t\t--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));\n\t\tdisplay: flex;\n\t\tposition: relative !important;\n\t\t/* Just to prevent jumping when the sidebar is hidden */\n\t\tmin-height: 360px;\n\t\toverflow: hidden;\n\n\t\tmain {\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\n\t/* Fix styles on this style guide page */\n\t@media only screen and (max-width: 512px) {\n\t\t:deep(aside) {\n\t\t\twidth: calc(100vw - 64px) !important;\n\t\t}\n\t}\n\n\t.top-bar {\n\t\tdisplay: flex;\n\t\tjustify-content: flex-end;\n\t\t/* preserve space for toggle button */\n\t\tpadding-inline-end: var(--app-sidebar-offset);\n\t\t/* same as on toggle button, but doesn't have to be the same */\n\t\tmargin: var(--app-sidebar-padding);\n\t}\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\n**Note about performance**: using `v-if` might result in bad performance and loosing sidebar content state.\n\n**Note 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<div class=\"content-styleguidist\">\n\t\t<main id=\"content-styleguidist-9\">\n\t\t\t<div class=\"top-bar\">\n\t\t\t\t<NcButton @click.prevent=\"open = !open\">\n\t\t\t\t\tToggle sidebar\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</main>\n\t\t<!-- The sidebar -->\n\t\t<NcAppSidebar\n\t\t\tv-if=\"open\"\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\"\n\t\t\t@close=\"open = 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</div>\n</template>\n\n<script>\n\timport Cog from 'vue-material-design-icons/Cog'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCog,\n\t\t},\n\t\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:selector': '#content-styleguidist-9',\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topen: true,\n\t\t\t}\n\t\t},\n\t}\n</script>\n<style scoped>\n\t/* This styles just mock NcContent and NcAppContent */\n\t.content-styleguidist {\n\t\t--app-sidebar-padding: 8px;\n\t\t--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));\n\t\tdisplay: flex;\n\t\tposition: relative !important;\n\t\t/* Just to prevent jumping when the sidebar is hidden */\n\t\tmin-height: 360px;\n\t\toverflow: hidden;\n\n\t\tmain {\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\n\t/* Fix styles on this style guide page */\n\t@media only screen and (max-width: 512px) {\n\t\t:deep(aside) {\n\t\t\twidth: calc(100vw - 64px) !important;\n\t\t}\n\t}\n\n\t.top-bar {\n\t\tdisplay: flex;\n\t\tjustify-content: flex-end;\n\t\t/* preserve space for toggle button */\n\t\tpadding-inline-end: var(--app-sidebar-offset);\n\t\t/* same as on toggle button, but doesn't have to be the same */\n\t\tmargin: var(--app-sidebar-padding);\n\t}\n</style>\n```\n</docs>\n\n<template>\n\t<transition\n\t\tappear\n\t\tname=\"slide-right\"\n\t\t@after-enter=\"onAfterEnter\"\n\t\t@after-leave=\"onAfterLeave\">\n\t\t<aside\n\t\t\tv-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\n\t\t\t\t\tref=\"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\n\t\t\t\tclass=\"app-sidebar-header\"\n\t\t\t\t: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\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\n\t\t\t\t\t\t\tv-if=\"(isSlotPopulated($slots.header?.()) || background)\"\n\t\t\t\t\t\t\tclass=\"app-sidebar-header__figure\"\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\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\n\t\t\t\t\t\t\tclass=\"app-sidebar-header__desc\"\n\t\t\t\t\t\t\t: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\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\n\t\t\t\t\t\t\t\t\t\tv-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\n\t\t\t\t\t\t\t\t\t\tv-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\n\t\t\t\t\t\t\t\t\t\t\tv-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\n\t\t\t\t\t\t\t\t\t\t\t\tref=\"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\n\t\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\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\n\t\t\t\t\t\t\t\t\t\tv-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\n\t\t\t\t\t\t\t\t\tv-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 content. 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\n\t\t\t\t\tv-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\n\t\t\t\t\tref=\"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\n\t\t\t\tv-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 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'\nimport NcAppSidebarTabs from './NcAppSidebarTabs.vue'\nimport { useIsSmallMobile } from '../../composables/useIsMobile/index.js'\nimport Focus from '../../directives/Focus/index.ts'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { isSlotPopulated } from '../../utils/isSlotPopulated.ts'\nimport { logger } from '../../utils/logger.ts'\nimport NcActions from '../NcActions/index.js'\nimport NcAppSidebarHeader from '../NcAppSidebarHeader/index.ts'\nimport NcButton from '../NcButton/index.ts'\nimport { CONTENT_SELECTOR_KEY } from '../NcContent/constants.ts'\nimport NcEmptyContent from '../NcEmptyContent/index.ts'\nimport NcLoadingIcon from '../NcLoadingIcon/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\t/** @type {import('vue').ObjectDirective} */\n\t\tClickOutside,\n\t},\n\n\tinject: {\n\t\tncContentSelector: {\n\t\t\tfrom: CONTENT_SELECTOR_KEY,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The active tab\n\t\t */\n\t\tactive: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Main text of the sidebar\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 * 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\n\t\t/**\n\t\t * Placeholder in the edit field if the name is editable.\n\t\t */\n\t\tnamePlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Secondary name of the sidebar (subline)\n\t\t */\n\t\tsubname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\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\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\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\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\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\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\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 navigation\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\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 *\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 *\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 *\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\tlogger.warn('[NcAppSidebar] It looks like you want to use NcAppSidebar with the built-in toggle button. This feature is only available when NcAppSidebar is used in NcContent.')\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\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\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\tsyntax: '<length>';\n\tinitial-value: 0;\n\tinherits: true;\n}\n\nbody {\n\t/**\n\t * The padding between the toggle button and the page border\n\t */\n\t--app-sidebar-padding: calc(var(--default-grid-baseline, 4px) * 2);\n\t/**\n\t * The minimal offset width required to be reserved for the toggle button.\n\t * Automatically changes to 0 when there is no toggle button.\n\t */\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\nbody:has(.app-sidebar.slide-right-enter-active),\nbody:has(.app-sidebar.slide-right-leave-active) {\n\ttransition: --app-sidebar-offset var(--animation-quick);\n}\n\nbody: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/*\n\tSidebar: to be used within #content\n\tapp-content will be shrunk 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) + var(--app-sidebar-padding));\n\n\t\t> .app-sidebar__close {\n\t\t\tposition: absolute;\n\t\t\tz-index: 100;\n\t\t\ttop: var(--app-sidebar-padding);\n\t\t\tinset-inline-end: var(--app-sidebar-padding);\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\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\n\t\t\t\t\t.app-sidebar-header__menu {\n\t\t\t\t\t\ttop: var(--app-sidebar-padding);\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: var(--app-sidebar-padding);\n\t\t\t\tinset-inline-end: var(--app-sidebar-close-button-offset);\n\t\t\t}\n\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\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: var(--app-sidebar-padding) 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\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"],"names":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","_useModel","_normalizeClass","$style","_createVNode","NcVNodes","tab","_hoisted_1","_Fragment","_renderList","_createBlock","_renderSlot","NcAppSidebarHeader","Focus","ClickOutside","_Transition","_Teleport","_normalizeStyle"],"mappings":"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","x_google_ignoreList":[0,1,2]}

package/dist/chunks/NcAvatar-CZVJYWdr.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcAvatar-CZVJYWdr.mjs","sources":["../../src/mixins/userStatus.js","../../src/components/NcAvatar/NcAvatar.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { getCurrentUser } from '@nextcloud/auth'\nimport axios from '@nextcloud/axios'\nimport { getCapabilities } from '@nextcloud/capabilities'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport { logger } from '../utils/logger.ts'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\thasStatus: false,\n\t\t\tuserStatus: {\n\t\t\t\tstatus: null,\n\t\t\t\tmessage: null,\n\t\t\t\ticon: null,\n\t\t\t},\n\t\t}\n\t},\n\tmethods: {\n\t\t/**\n\t\t * Fetches the user-status from the server\n\t\t *\n\t\t * @param {string} userId UserId of the user to fetch the status for\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t */\n\t\tasync fetchUserStatus(userId) {\n\t\t\tif (!userId) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst capabilities = getCapabilities()\n\t\t\tif (!Object.hasOwn(capabilities, 'user_status') || !capabilities.user_status.enabled) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// User status endpoint is not available for guests.\n\t\t\tif (!getCurrentUser()) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tconst { data } = await axios.get(generateOcsUrl('apps/user_status/api/v1/statuses/{userId}', { userId }))\n\t\t\t\tconst {\n\t\t\t\t\tstatus,\n\t\t\t\t\tmessage,\n\t\t\t\t\ticon,\n\t\t\t\t} = data.ocs.data\n\t\t\t\tthis.userStatus.status = status\n\t\t\t\tthis.userStatus.message = message || ''\n\t\t\t\tthis.userStatus.icon = icon || ''\n\t\t\t\tthis.hasStatus = true\n\t\t\t} catch (e) {\n\t\t\t\tif (e.response.status === 404 && e.response.data.ocs?.data?.length === 0) {\n\t\t\t\t\t// User just has no status set, so don't log it\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tlogger.error('Failed to fetch user status', { error: e })\n\t\t\t}\n\t\t},\n\t},\n}\n","<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### Basic user avatar\n\n```vue\n\t<NcAvatar user=\"willywonka\" display-name=\"Willy Wonka\" />\n```\n\n### Avatar with image\n\n```vue\n\t<NcAvatar url=\"favicon-touch.png\" />\n```\n\n### Avatar with material design icon\n\n```\n<template>\n\t<NcAvatar>\n\t\t<template #icon>\n\t\t\t<AccountMultiple :size=\"20\" />\n\t\t</template>\n\t</NcAvatar>\n</template>\n<script>\nimport AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'\n\nexport default {\n\tcomponents: {\n\t\tAccountMultiple,\n\t},\n}\n</script>\n```\n\n### Avatar with preloaded status\n```\n<template>\n\t<div>\n\t\t<NcAvatar user=\"janedoe\"\n\t\t\tdisplay-name=\"Jane Doe\"\n\t\t\t:preloaded-user-status=\"status.online\">\n\t\t</NcAvatar>\n\t\t<NcAvatar user=\"janedoe\"\n\t\t\tdisplay-name=\"Jane Doe\"\n\t\t\t:preloaded-user-status=\"status.away\">\n\t\t</NcAvatar>\n\t\t<NcAvatar user=\"janedoe\"\n\t\t\tdisplay-name=\"Jane Doe\"\n\t\t\t:preloaded-user-status=\"status.dnd\">\n\t\t</NcAvatar>\n\t\t<NcAvatar user=\"janedoe\"\n\t\t\tdisplay-name=\"Jane Doe\"\n\t\t\t:preloaded-user-status=\"status.custom\">\n\t\t</NcAvatar>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tstatus: {\n\t\t\t\tonline: {\n\t\t\t\t\ticon: '',\n\t\t\t\t\tstatus: 'online',\n\t\t\t\t\tmessage: 'Available',\n\t\t\t\t},\n\t\t\t\taway: {\n\t\t\t\t\ticon: '',\n\t\t\t\t\tstatus: 'away',\n\t\t\t\t\tmessage: 'Away',\n\t\t\t\t},\n\t\t\t\tdnd: {\n\t\t\t\t\ticon: '',\n\t\t\t\t\tstatus: 'dnd',\n\t\t\t\t\tmessage: 'Busy',\n\t\t\t\t},\n\t\t\t\tcustom: {\n\t\t\t\t\ticon: '📆',\n\t\t\t\t\tstatus: 'online',\n\t\t\t\t\tmessage: 'In a meeting',\n\t\t\t\t}\n\t\t\t},\n\t\t}\n\t},\n}\n</script>\n```\n\n### Avatar for non-users\n\n```vue\n\t<NcAvatar display-name=\"Robbie Hyeon-Jeong\" :is-no-user=\"true\" />\n```\n\n### Avatar on complex background\n\n```\n<template>\n\t<div class=\"avatar-background\">\n\t\t<NcAvatar class=\"avatar\" :is-no-user=\"true\" display-name=\"Cecilia Rohese\" />\n\t</div>\n</template>\n<style scoped>\n.avatar-background {\n\twidth: 80px;\n\theight: 60px;\n\tbackground: linear-gradient(to bottom, #0057b8 0%, #0057b8 49.99%, #ffd700 50%, #ffd700 100%);\n}\n\n.avatar {\n\tmargin: 15px 25px;\n}\n</style>\n```\n\n### Avatar size\n\n```vue\n<template>\n\t<div>\n\t\t<div v-for=\"size in [15, 24, 34, 44, 180]\">\n\t\t\t<span>\n\t\t\t\t{{ size }}px\n\t\t\t</span>\n\t\t\t<NcAvatar user=\"alice-smith\"\n\t\t\t\tdisplay-name=\"Alice Smith\"\n\t\t\t\t:size=\"size\"\n\t\t\t\t:preloaded-user-status=\"status.online\" />\n\t\t\t<NcAvatar user=\"bob-doe\"\n\t\t\t\tdisplay-name=\"Bob Doe\"\n\t\t\t\t:size=\"size\"\n\t\t\t\t:preloaded-user-status=\"status.meeting\" />\n\t\t</div>\n\t\t<div>\n\t\t\t<div>\n\t\t\t\tCustom: {{ customSize }}px\n\t\t\t</div>\n\t\t\t<NcAvatar user=\"alice-smith\"\n\t\t\t\tdisplay-name=\"Alice Smith\"\n\t\t\t\t:size=\"customSize\"\n\t\t\t\t:preloaded-user-status=\"status.online\" />\n\t\t\t<NcAvatar user=\"bob-doe\"\n\t\t\t\tdisplay-name=\"Bob Doe\"\n\t\t\t\t:size=\"customSize\"\n\t\t\t\t:preloaded-user-status=\"status.meeting\" />\n\t\t</div>\n\t\t<div>\n\t\t\t<input type=\"range\" v-model=\"customSize\" :min=\"15\" :max=\"180\" step=\"1\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'\n\nexport default {\n\tcomponents: {\n\t\tAccountMultiple,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcustomSize: 20,\n\t\t\tstatus: {\n\t\t\t\tonline: {\n\t\t\t\t\ticon: '',\n\t\t\t\t\tstatus: 'online',\n\t\t\t\t\tmessage: 'Available',\n\t\t\t\t},\n\t\t\t\tmeeting: {\n\t\t\t\t\ticon: '📆',\n\t\t\t\t\tstatus: 'online',\n\t\t\t\t\tmessage: 'In a meeting',\n\t\t\t\t},\n\t\t\t},\n\t\t}\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<span\n\t\tv-click-outside=\"closeMenu\"\n\t\tclass=\"avatardiv popovermenu-wrapper\"\n\t\t:class=\"{\n\t\t\t'avatardiv--unknown': userDoesNotExist,\n\t\t\t'avatardiv--with-menu': hasMenu,\n\t\t\t'avatardiv--with-menu-loading': contactsMenuLoading,\n\t\t}\"\n\t\t:style=\"avatarStyle\"\n\t\t:title=\"tooltip\">\n\t\t<!-- @slot Icon slot -->\n\t\t<slot name=\"icon\">\n\t\t\t<!-- Avatar icon or image -->\n\t\t\t<span v-if=\"iconClass\" :class=\"iconClass\" class=\"avatar-class-icon\" />\n\t\t\t<img\n\t\t\t\tv-else-if=\"isAvatarLoaded && !userDoesNotExist\"\n\t\t\t\t:src=\"avatarUrlLoaded\"\n\t\t\t\t:srcset=\"avatarSrcSetLoaded\"\n\t\t\t\talt=\"\">\n\t\t</slot>\n\n\t\t<!-- Contact menu -->\n\t\t<!-- We show a button if the menu is not loaded yet. -->\n\t\t<NcButton\n\t\t\tv-if=\"hasMenu && menu.length === 0\"\n\t\t\t:aria-label=\"avatarAriaLabel\"\n\t\t\tclass=\"action-item action-item__menutoggle\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click=\"toggleMenu\">\n\t\t\t<template #icon>\n\t\t\t\t<NcLoadingIcon v-if=\"contactsMenuLoading\" />\n\t\t\t\t<IconDotsHorizontal v-else :size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcActions\n\t\t\tv-else-if=\"hasMenu\"\n\t\t\tv-model:open=\"contactsMenuOpenState\"\n\t\t\t:aria-label=\"avatarAriaLabel\"\n\t\t\t:container=\"menuContainer\"\n\t\t\tforce-menu\n\t\t\tmanual-open\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click=\"toggleMenu\">\n\t\t\t<component\n\t\t\t\t:is=\"item.ncActionComponent\"\n\t\t\t\tv-for=\"(item, key) in menu\"\n\t\t\t\t:key=\"key\"\n\t\t\t\tv-bind=\"item.ncActionComponentProps\">\n\t\t\t\t<template v-if=\"item.iconSvg\" #icon>\n\t\t\t\t\t<NcIconSvgWrapper :svg=\"item.iconSvg\" />\n\t\t\t\t</template>\n\t\t\t\t{{ item.text }}\n\t\t\t</component>\n\t\t\t<template v-if=\"contactsMenuLoading\" #icon>\n\t\t\t\t<NcLoadingIcon />\n\t\t\t</template>\n\t\t</NcActions>\n\n\t\t<!-- Avatar status -->\n\t\t<span v-if=\"showUserStatusIconOnAvatar\" class=\"avatardiv__user-status avatardiv__user-status--icon\">\n\t\t\t{{ userStatus.icon }}\n\t\t</span>\n\t\t<NcUserStatusIcon\n\t\t\tv-else-if=\"canDisplayUserStatus\"\n\t\t\tclass=\"avatardiv__user-status\"\n\t\t\t:status=\"userStatus.status\"\n\t\t\t:aria-hidden=\"String(hasMenu)\" />\n\n\t\t<!-- Show the letter if no avatar nor icon class -->\n\t\t<span\n\t\t\tv-if=\"showInitials\"\n\t\t\t:style=\"initialsWrapperStyle\"\n\t\t\tclass=\"avatardiv__initials-wrapper\">\n\t\t\t<span :style=\"initialsStyle\" class=\"avatardiv__initials\">\n\t\t\t\t{{ initials }}\n\t\t\t</span>\n\t\t</span>\n\t</span>\n</template>\n\n<script>\nimport { getCurrentUser } from '@nextcloud/auth'\nimport axios from '@nextcloud/axios'\nimport { getBuilder } from '@nextcloud/browser-storage'\nimport { subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { generateUrl } from '@nextcloud/router'\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport IconDotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\nimport { getRoute } from '../../components/NcRichText/autolink.ts'\nimport { useIsDarkTheme } from '../../composables/index.ts'\nimport { getEnabledContactsMenuActions } from '../../functions/contactsMenu/index.ts'\nimport { usernameToColor } from '../../functions/usernameToColor/index.ts'\nimport { t } from '../../l10n.ts'\nimport { userStatus } from '../../mixins/index.js'\nimport { getAvatarUrl } from '../../utils/getAvatarUrl.ts'\nimport { logger } from '../../utils/logger.ts'\nimport { getUserStatusText } from '../../utils/UserStatus.ts'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcActionLink from '../NcActionLink/index.js'\nimport NcActionRouter from '../NcActionRouter/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcActionText from '../NcActionText/index.js'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\nimport NcLoadingIcon from '../NcLoadingIcon/index.ts'\nimport NcUserStatusIcon from '../NcUserStatusIcon/index.js'\n\nconst browserStorage = getBuilder('nextcloud').persist().build()\n\n/**\n * @param {string} userId The id of the user\n */\nfunction getUserHasAvatar(userId) {\n\tconst flag = browserStorage.getItem('user-has-avatar.' + userId)\n\tif (typeof flag === 'string') {\n\t\treturn Boolean(flag)\n\t}\n\treturn null\n}\n\n/**\n * @param {string} userId The id of the user\n * @param {boolean} flag Has the user an avatar\n */\nfunction setUserHasAvatar(userId, flag) {\n\tif (userId) {\n\t\tbrowserStorage.setItem('user-has-avatar.' + userId, flag)\n\t}\n}\n\nexport default {\n\tname: 'NcAvatar',\n\n\tdirectives: {\n\t\t/** @type {import('vue').ObjectDirective} */\n\t\tClickOutside,\n\t},\n\n\tcomponents: {\n\t\tIconDotsHorizontal,\n\t\tNcActions,\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t\tNcLoadingIcon,\n\t\tNcUserStatusIcon,\n\t},\n\n\tmixins: [userStatus],\n\tprops: {\n\t\t/**\n\t\t * Set a custom url to the avatar image\n\t\t * either the url, user or displayName property must be defined\n\t\t */\n\t\turl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Set a css icon-class for an icon to be used instead of the avatar.\n\t\t */\n\t\ticonClass: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Set the user id to fetch the avatar\n\t\t * either the url, user or displayName property must be defined\n\t\t */\n\t\tuser: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Do not show the user status on the avatar.\n\t\t */\n\t\thideStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Show the verbose user status (e.g. \"online\" / \"away\") instead of just the status icon.\n\t\t */\n\t\tverboseStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * When the user status was preloaded via another source it can be handed in with this property to save the request.\n\t\t * If this property is not set the status will be fetched automatically.\n\t\t * If a preloaded no-status is available provide this object with properties \"status\", \"icon\" and \"message\" set to null.\n\t\t */\n\t\tpreloadedUserStatus: {\n\t\t\ttype: Object,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Is the user a guest user (then we have to user a different endpoint)\n\t\t */\n\t\tisGuest: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Set a display name that will be rendered as a tooltip\n\t\t * either the url, user or displayName property must be defined\n\t\t * specify just the displayname to generate a placeholder avatar without\n\t\t * trying to fetch the avatar based on the user id\n\t\t */\n\t\tdisplayName: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Set a size in px for the rendered avatar\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 32,\n\t\t},\n\n\t\t/**\n\t\t * Do not automatically generate a placeholder avatars if there is no real avatar is available.\n\t\t */\n\t\tnoPlaceholder: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Disable the tooltip\n\t\t */\n\t\tdisableTooltip: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Disable the menu\n\t\t */\n\t\tdisableMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Declares a custom tooltip when not null\n\t\t * Fallback will be the displayName\n\t\t *\n\t\t * requires disableTooltip not to be set to true\n\t\t */\n\t\ttooltipMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Declares username is not a user's name, when true.\n\t\t * Prevents loading user's avatar from server and forces generating colored initials,\n\t\t * i.e. if the user is a group\n\t\t */\n\t\tisNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover menu container\n\t\t */\n\t\tmenuContainer: {\n\t\t\ttype: [Boolean, String, Object, Element],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\n\tsetup() {\n\t\tconst isDarkTheme = useIsDarkTheme()\n\n\t\treturn {\n\t\t\tisDarkTheme,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tavatarUrlLoaded: null,\n\t\t\tavatarSrcSetLoaded: null,\n\t\t\tuserDoesNotExist: false,\n\t\t\tisAvatarLoaded: false,\n\t\t\tisMenuLoaded: false,\n\t\t\tcontactsMenuLoading: false,\n\t\t\tcontactsMenuData: {},\n\t\t\tcontactsMenuActions: [],\n\t\t\tcontactsMenuOpenState: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tavatarAriaLabel() {\n\t\t\t// aria-label is only allowed on interactive elements\n\t\t\tif (!this.hasMenu) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.canDisplayUserStatus || this.showUserStatusIconOnAvatar) {\n\t\t\t\treturn t('Avatar of {displayName}, {status}', { displayName: this.displayName ?? this.user, status: getUserStatusText(this.userStatus.status) })\n\t\t\t}\n\t\t\treturn t('Avatar of {displayName}', { displayName: this.displayName ?? this.user })\n\t\t},\n\n\t\tcanDisplayUserStatus() {\n\t\t\treturn !this.hideStatus\n\t\t\t\t&& this.hasStatus\n\t\t\t\t&& ['online', 'away', 'busy', 'dnd'].includes(this.userStatus.status)\n\t\t},\n\n\t\tshowUserStatusIconOnAvatar() {\n\t\t\treturn !this.hideStatus\n\t\t\t\t&& !this.verboseStatus\n\t\t\t\t&& this.hasStatus\n\t\t\t\t&& this.userStatus.status !== 'dnd'\n\t\t\t\t&& this.userStatus.icon\n\t\t},\n\n\t\t/**\n\t\t * The user identifier, either the display name if set or the user property\n\t\t * If both properties are not set an empty string is returned\n\t\t */\n\t\tuserIdentifier() {\n\t\t\tif (this.isDisplayNameDefined) {\n\t\t\t\treturn this.displayName\n\t\t\t}\n\t\t\tif (this.isUserDefined) {\n\t\t\t\treturn this.user\n\t\t\t}\n\t\t\treturn ''\n\t\t},\n\n\t\tisUserDefined() {\n\t\t\treturn typeof this.user !== 'undefined'\n\t\t},\n\n\t\tisDisplayNameDefined() {\n\t\t\treturn typeof this.displayName !== 'undefined'\n\t\t},\n\n\t\tisUrlDefined() {\n\t\t\treturn typeof this.url !== 'undefined'\n\t\t},\n\n\t\thasMenu() {\n\t\t\tif (this.disableMenu) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tif (this.isMenuLoaded) {\n\t\t\t\treturn this.menu.length > 0\n\t\t\t}\n\t\t\treturn !(this.user === getCurrentUser()?.uid || this.userDoesNotExist || this.url)\n\t\t},\n\n\t\t/**\n\t\t * True if initials should be shown as the user icon fallback\n\t\t */\n\t\tshowInitials() {\n\t\t\treturn !this.noPlaceholder && this.userDoesNotExist && !(this.iconClass || this.$slots.icon)\n\t\t},\n\n\t\tavatarStyle() {\n\t\t\treturn {\n\t\t\t\t'--avatar-size': this.size + 'px',\n\t\t\t\tlineHeight: this.showInitials ? (this.size + 'px') : 0,\n\t\t\t\tfontSize: Math.round(this.size * 0.45) + 'px',\n\t\t\t}\n\t\t},\n\n\t\tinitialsWrapperStyle() {\n\t\t\tconst { r, g, b } = usernameToColor(this.userIdentifier)\n\t\t\treturn {\n\t\t\t\tbackgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)`,\n\t\t\t}\n\t\t},\n\n\t\tinitialsStyle() {\n\t\t\tconst { r, g, b } = usernameToColor(this.userIdentifier)\n\t\t\treturn {\n\t\t\t\tcolor: `rgb(${r}, ${g}, ${b})`,\n\t\t\t}\n\t\t},\n\n\t\ttooltip() {\n\t\t\tif (this.disableTooltip) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tif (this.tooltipMessage) {\n\t\t\t\treturn this.tooltipMessage\n\t\t\t}\n\n\t\t\treturn this.displayName\n\t\t},\n\n\t\t/**\n\t\t * Get the (max. two) initials of the user as uppcase string\n\t\t */\n\t\tinitials() {\n\t\t\tlet initials = '?'\n\t\t\tif (this.showInitials) {\n\t\t\t\tconst user = this.userIdentifier.trim()\n\t\t\t\tif (user === '') {\n\t\t\t\t\treturn initials\n\t\t\t\t}\n\n\t\t\t\t/**\n\t\t\t\t * Filtered user name, without special characters so only letters and numbers are allowed (prevent e.g. '(' as an initial)\n\t\t\t\t * \\p{L}: Letters of all languages\n\t\t\t\t * \\p{N}: Numbers of all languages\n\t\t\t\t * \\s: White space for breaking the string\n\t\t\t\t *\n\t\t\t\t * @type {string}\n\t\t\t\t */\n\t\t\t\tconst filteredChars = user.match(/[\\p{L}\\p{N}\\s]/gu)\n\t\t\t\tif (!filteredChars) {\n\t\t\t\t\treturn initials\n\t\t\t\t}\n\n\t\t\t\tconst filtered = filteredChars.join('')\n\t\t\t\tconst idx = filtered.lastIndexOf(' ')\n\t\t\t\tinitials = String.fromCodePoint(filtered.codePointAt(0))\n\t\t\t\tif (idx !== -1) {\n\t\t\t\t\tinitials = initials.concat(String.fromCodePoint(filtered.codePointAt(idx + 1)))\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn initials.toLocaleUpperCase()\n\t\t},\n\n\t\tmenu() {\n\t\t\tconst actions = this.contactsMenuActions.map((item) => {\n\t\t\t\tconst route = getRoute(this.$router, item.hyperlink)\n\t\t\t\treturn {\n\t\t\t\t\tncActionComponent: route ? NcActionRouter : NcActionLink,\n\t\t\t\t\tncActionComponentProps: route\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tto: route,\n\t\t\t\t\t\t\t\ticon: item.icon,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\thref: item.hyperlink,\n\t\t\t\t\t\t\t\ticon: item.icon,\n\t\t\t\t\t\t\t},\n\t\t\t\t\ttext: item.title,\n\t\t\t\t}\n\t\t\t})\n\n\t\t\tfor (const action of getEnabledContactsMenuActions(this.contactsMenuData)) {\n\t\t\t\ttry {\n\t\t\t\t\tactions.push({\n\t\t\t\t\t\tncActionComponent: NcActionButton,\n\t\t\t\t\t\tncActionComponentProps: {\n\t\t\t\t\t\t\tonClick: () => action.callback(this.contactsMenuData),\n\t\t\t\t\t\t},\n\t\t\t\t\t\ttext: action.displayName(this.contactsMenuData),\n\t\t\t\t\t\ticonSvg: action.iconSvg(this.contactsMenuData),\n\t\t\t\t\t})\n\t\t\t\t} catch (error) {\n\t\t\t\t\tlogger.error(`Failed to render ContactsMenu action ${action.id}`, {\n\t\t\t\t\t\terror,\n\t\t\t\t\t\taction,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * @param {string} html The HTML to escape\n\t\t\t */\n\t\t\tfunction escape(html) {\n\t\t\t\tconst text = document.createTextNode(html)\n\t\t\t\tconst p = document.createElement('p')\n\t\t\t\tp.appendChild(text)\n\t\t\t\treturn p.innerHTML\n\t\t\t}\n\n\t\t\tif (!this.hideStatus && (this.userStatus.icon || this.userStatus.message)) {\n\t\t\t\t// NcAction's URL icons are inverted in dark mode, so we need to pass SVG image in the icon slot\n\t\t\t\tconst emojiIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n\t\t\t\t\t<text x=\"50%\" y=\"50%\" text-anchor=\"middle\" style=\"dominant-baseline: central; font-size: 85%\">${escape(this.userStatus.icon)}</text>\n\t\t\t\t</svg>`\n\t\t\t\treturn [{\n\t\t\t\t\tncActionComponent: NcActionText,\n\t\t\t\t\tncActionComponentProps: {},\n\t\t\t\t\ticonSvg: this.userStatus.icon ? emojiIcon : undefined,\n\t\t\t\t\ttext: `${this.userStatus.message}`,\n\t\t\t\t}].concat(actions)\n\t\t\t}\n\n\t\t\treturn actions\n\t\t},\n\t},\n\n\twatch: {\n\t\turl() {\n\t\t\tthis.userDoesNotExist = false\n\t\t\tthis.loadAvatarUrl()\n\t\t},\n\n\t\tuser() {\n\t\t\tthis.userDoesNotExist = false\n\t\t\tthis.isMenuLoaded = false\n\t\t\tthis.loadAvatarUrl()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.loadAvatarUrl()\n\t\tsubscribe('settings:avatar:updated', this.loadAvatarUrl)\n\t\tsubscribe('settings:display-name:updated', this.loadAvatarUrl)\n\t\tif (!this.hideStatus && this.user && !this.isNoUser) {\n\t\t\tif (!this.preloadedUserStatus) {\n\t\t\t\tthis.fetchUserStatus(this.user)\n\t\t\t} else {\n\t\t\t\tthis.userStatus.status = this.preloadedUserStatus.status || ''\n\t\t\t\tthis.userStatus.message = this.preloadedUserStatus.message || ''\n\t\t\t\tthis.userStatus.icon = this.preloadedUserStatus.icon || ''\n\t\t\t\tthis.hasStatus = this.preloadedUserStatus.status !== null\n\t\t\t}\n\t\t\tsubscribe('user_status:status.updated', this.handleUserStatusUpdated)\n\t\t}\n\t},\n\n\tbeforeUnmount() {\n\t\tunsubscribe('settings:avatar:updated', this.loadAvatarUrl)\n\t\tunsubscribe('settings:display-name:updated', this.loadAvatarUrl)\n\t\tunsubscribe('user_status:status.updated', this.handleUserStatusUpdated)\n\t},\n\n\tmethods: {\n\t\tt,\n\t\thandleUserStatusUpdated(state) {\n\t\t\tif (this.user === state.userId) {\n\t\t\t\tthis.userStatus = {\n\t\t\t\t\tstatus: state.status,\n\t\t\t\t\ticon: state.icon,\n\t\t\t\t\tmessage: state.message,\n\t\t\t\t}\n\t\t\t\tthis.hasStatus = state.status !== null\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Toggle the popover menu on click or enter\n\t\t *\n\t\t * @param {KeyboardEvent|MouseEvent} event the UI event\n\t\t */\n\t\tasync toggleMenu(event) {\n\t\t\tif (event.type === 'keydown' && event.key !== 'Enter') {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (!this.contactsMenuOpenState) {\n\t\t\t\tawait this.fetchContactsMenu()\n\t\t\t}\n\t\t\tthis.contactsMenuOpenState = !this.contactsMenuOpenState\n\t\t},\n\n\t\tcloseMenu() {\n\t\t\tthis.contactsMenuOpenState = false\n\t\t},\n\n\t\tasync fetchContactsMenu() {\n\t\t\tthis.contactsMenuLoading = true\n\t\t\ttry {\n\t\t\t\tconst user = encodeURIComponent(this.user)\n\t\t\t\tconst { data } = await axios.post(generateUrl('contactsmenu/findOne'), `shareType=0&shareWith=${user}`)\n\t\t\t\tthis.contactsMenuData = data\n\t\t\t\tthis.contactsMenuActions = data.topAction ? [data.topAction].concat(data.actions) : data.actions\n\t\t\t} catch {\n\t\t\t\tthis.contactsMenuOpenState = false\n\t\t\t}\n\t\t\tthis.contactsMenuLoading = false\n\t\t\tthis.isMenuLoaded = true\n\t\t},\n\n\t\t/**\n\t\t * Handle avatar loading if user or url defined\n\t\t */\n\t\tloadAvatarUrl() {\n\t\t\tthis.isAvatarLoaded = false\n\n\t\t\t/** Only run avatar image loading if either user or url property is defined */\n\t\t\tif (!this.isUrlDefined && (!this.isUserDefined || this.isNoUser || this.iconClass)) {\n\t\t\t\tthis.isAvatarLoaded = true\n\t\t\t\tthis.userDoesNotExist = true\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Directly use the url if defined\n\t\t\tif (this.isUrlDefined) {\n\t\t\t\tthis.updateImageIfValid(this.url)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tif (this.size <= 64) {\n\t\t\t\tconst avatarUrl = this.avatarUrlGenerator(this.user, 64)\n\t\t\t\tconst srcset = [\n\t\t\t\t\tavatarUrl + ' 1x',\n\t\t\t\t\tthis.avatarUrlGenerator(this.user, 512) + ' 8x',\n\t\t\t\t].join(', ')\n\n\t\t\t\tthis.updateImageIfValid(avatarUrl, srcset)\n\t\t\t} else {\n\t\t\t\tconst avatarUrl = this.avatarUrlGenerator(this.user, 512)\n\t\t\t\tthis.updateImageIfValid(avatarUrl)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Generate an avatar url from the server's avatar endpoint\n\t\t *\n\t\t * @param {string} user the user id\n\t\t * @param {number} size the desired size\n\t\t * @return {string}\n\t\t */\n\t\tavatarUrlGenerator(user, size) {\n\t\t\tlet avatarUrl = getAvatarUrl(user, {\n\t\t\t\tsize,\n\t\t\t\tisDarkTheme: this.isDarkTheme,\n\t\t\t\tisGuest: this.isGuest,\n\t\t\t})\n\n\t\t\t// eslint-disable-next-line camelcase\n\t\t\tif (user === getCurrentUser()?.uid && typeof oc_userconfig !== 'undefined') {\n\t\t\t\tavatarUrl += '?v=' + window.oc_userconfig.avatar.version\n\t\t\t}\n\n\t\t\treturn avatarUrl\n\t\t},\n\n\t\t/**\n\t\t * Check if the provided url is valid and update Avatar if so\n\t\t *\n\t\t * @param {string} url the avatar url\n\t\t * @param {Array} srcset the avatar srcset\n\t\t */\n\t\tupdateImageIfValid(url, srcset = null) {\n\t\t\t// skip loading\n\t\t\tconst userHasAvatar = getUserHasAvatar(this.user)\n\t\t\tif (this.isUserDefined && typeof userHasAvatar === 'boolean') {\n\t\t\t\tthis.isAvatarLoaded = true\n\t\t\t\tthis.avatarUrlLoaded = url\n\t\t\t\tif (srcset) {\n\t\t\t\t\tthis.avatarSrcSetLoaded = srcset\n\t\t\t\t}\n\t\t\t\tif (userHasAvatar === false) {\n\t\t\t\t\tthis.userDoesNotExist = true\n\t\t\t\t}\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst img = new Image()\n\t\t\timg.onload = () => {\n\t\t\t\tthis.avatarUrlLoaded = url\n\t\t\t\tif (srcset) {\n\t\t\t\t\tthis.avatarSrcSetLoaded = srcset\n\t\t\t\t}\n\t\t\t\tthis.isAvatarLoaded = true\n\t\t\t\t// re-get to avoid concurrent access\n\t\t\t\tsetUserHasAvatar(this.user, true)\n\t\t\t}\n\t\t\timg.onerror = (error) => {\n\t\t\t\tlogger.debug('[NcAvatar] Invalid avatar url', { error, url })\n\t\t\t\t// Avatar is invalid, reset\n\t\t\t\tthis.avatarUrlLoaded = null\n\t\t\t\tthis.avatarSrcSetLoaded = null\n\n\t\t\t\tthis.userDoesNotExist = true\n\t\t\t\tthis.isAvatarLoaded = false\n\t\t\t\tsetUserHasAvatar(this.user, false)\n\t\t\t}\n\n\t\t\tif (srcset) {\n\t\t\t\timg.srcset = srcset\n\t\t\t}\n\t\t\timg.src = url\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.avatardiv {\n\tposition: relative;\n\tdisplay: inline-block;\n\twidth: var(--avatar-size);\n\theight: var(--avatar-size);\n\n\t&--unknown {\n\t\tposition: relative;\n\t\tbackground-color: var(--color-main-background);\n\t\twhite-space: normal;\n\t}\n\n\t&:not(&--unknown) {\n\t\t// White/black background for avatars with transparency\n\t\tbackground-color: var(--color-main-background) !important;\n\t\tbox-shadow: 0 0 5px rgba(0, 0, 0, 0.05) inset;\n\t}\n\n\t&--with-menu {\n\t\tcursor: pointer;\n\t\t.action-item {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tinset-inline-start: 0;\n\t\t}\n\t\t:deep(.action-item__menutoggle) {\n\t\t\tcursor: pointer;\n\t\t\topacity: 0;\n\t\t}\n\t\t&:focus-within,\n\t\t&:hover,\n\t\t&#{&}-loading {\n\t\t\t:deep(.action-item__menutoggle) {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t\timg {\n\t\t\t\topacity: 0.3;\n\t\t\t}\n\t\t}\n\t\t:deep(.action-item__menutoggle),\n\t\timg {\n\t\t\ttransition: opacity var(--animation-quick);\n\t\t}\n\t\t:deep() {\n\t\t\t.button-vue,\n\t\t\t.button-vue__icon {\n\t\t\t\theight: var(--avatar-size);\n\t\t\t\tmin-height: var(--avatar-size);\n\t\t\t\twidth: var(--avatar-size) !important;\n\t\t\t\tmin-width: var(--avatar-size);\n\t\t\t}\n\t\t}\n\t\t& > :deep(.button-vue),\n\t\t& > :deep(.action-item .button-vue) {\n\t\t\t--button-radius: calc(var(--avatar-size) / 2);\n\t\t}\n\t}\n\n\t.avatardiv__initials-wrapper {\n\t\tdisplay: block;\n\t\theight: var(--avatar-size);\n\t\twidth: var(--avatar-size);\n\t\tbackground-color: var(--color-main-background);\n\t\tborder-radius: calc(var(--avatar-size) / 2);\n\n\t\t.avatardiv__initials {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tinset-inline-start: 0;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t\ttext-align: center;\n\t\t\tfont-weight: normal;\n\t\t}\n\t}\n\n\timg {\n\t\t// Cover entire area\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\t// Keep ratio\n\t\tobject-fit: cover;\n\t}\n\n\t.material-design-icon {\n\t\twidth: var(--avatar-size);\n\t\theight: var(--avatar-size);\n\t}\n\n\t.avatardiv__user-status {\n\t\t// Size of the status icon to make it:\n\t\t// - 💫 Orbital: the status icon's center is positioned on the avatar circle\n\t\t// - ⏹️ Best-fit: the status icon is as large as possible without exceeding the avatar box\n\t\t// See PR for math explanation: PR #6004\n\t\t--avatar-status-size-orbital: calc(var(--avatar-size) * (1 - 1 / sqrt(2)));\n\t\t// Limit the status icon size to minimum font size to keep it readable\n\t\t// Ideally avatars with a smaller should not be used with the status icon at all\n\t\t--avatar-status-size-min: var(--font-size-small);\n\t\t--avatar-status-size: max(var(--avatar-status-size-orbital), var(--avatar-status-size-min));\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tinset-inline-end: 0;\n\t\tinset-block-end: 0;\n\t\theight: var(--avatar-status-size);\n\t\twidth: var(--avatar-status-size);\n\t\tline-height: 1;\n\t\tfont-size: calc(var(--avatar-status-size) / 1.2);\n\t\tbackground-color: var(--color-main-background);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: var(--avatar-status-size);\n\t\tbackground-position: center;\n\t\tborder-radius: 50%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t.acli:hover & {\n\t\t\tborder-color: var(--color-background-hover);\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\t\t.acli.active & {\n\t\t\tborder-color: var(--color-primary-element-light);\n\t\t\tbackground-color: var(--color-primary-element-light);\n\t\t}\n\n\t\t&--icon {\n\t\t\tborder: none;\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t.popovermenu-wrapper {\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t}\n}\n\n.avatar-class-icon {\n\tdisplay: block;\n\tborder-radius: calc(var(--avatar-size) / 2);\n\tbackground-color: var(--color-background-darker);\n\theight: 100%;\n}\n\n</style>\n"],"names":["ClickOutside","_createElementBlock","_renderSlot","_normalizeClass","_createBlock","_openBlock","_Fragment","_renderList","_resolveDynamicComponent","_mergeProps","_createSlots","_toDisplayString","_createVNode","_createElementVNode"],"mappings":"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"}

package/dist/chunks/NcButton-DkC5k3Lb.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcButton-DkC5k3Lb.mjs","sources":["../../src/components/NcButton/NcButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\nGeneral purpose button component. See props for different options.\n[Use material design icons only for icons](https://www.npmjs.com/package/vue-material-design-icons) and remember to set their size to 20.\n\n### Usage\n### Custom icon slot\nTo be used with `vue-material-design-icons` only. For icon classes use the `default-icon` slot.\nIt can be used with one or multiple actions.\n```\n<template>\n<div class=\"wrapper\">\n\t<!-- Style selector -->\n\t<div class=\"grid\">\n\t\t<NcCheckboxRadioSwitch v-model=\"style\" value=\"text\" name=\"style\" type=\"radio\">Text only</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"style\" value=\"icon\" name=\"style\" type=\"radio\">Icon only</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"style\" value=\"icontext\" name=\"style\" type=\"radio\">Icon and text</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"disabled\" type=\"checkbox\">Disabled</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"size\" value=\"small\" name=\"size\" type=\"radio\">Small</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"size\" value=\"normal\" name=\"size\" type=\"radio\">Normal (default)</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"size\" value=\"large\" name=\"size\" type=\"radio\">Large</NcCheckboxRadioSwitch>\n\t</div>\n\n\t<h5>Standard buttons</h5>\n\t<div class=\"grid\">\n\t\t<p>Tertiary, no background</p>\n\t\t<p>Tertiary</p>\n\t\t<p>Secondary</p>\n\t\t<p>Primary</p>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled\n\t\t\t:size\n\t\t\t:text\n\t\t\tvariant=\"tertiary-no-background\">\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled\n\t\t\t:size\n\t\t\t:text\n\t\t\tvariant=\"tertiary\">\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled\n\t\t\t:size\n\t\t\t:text>\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled\n\t\t\t:size\n\t\t\t:text\n\t\t\tvariant=\"primary\">\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n\n\t<!-- Wide button -->\n\t<h5>Wide button</h5>\n\t<NcButton\n\t\t:disabled=\"disabled\"\n\t\t:size=\"size\"\n\t\t:text=\"text\"\n\t\t:wide=\"true\"\n\t\ttext=\"Example text\">\n\t\t<template #icon>\n\t\t\t<Video\n\t\t\t\t:size=\"20\" />\n\t\t</template>\n\t</NcButton>\n\n\t<!-- Special buttons -->\n\t<h5>Special buttons</h5>\n\t<div class=\"grid\">\n\t\t<p>Success</p>\n\t\t<p>Warning</p>\n\t\t<p>Error</p>\n\t\t<p> - </p>\n\t\t<NcButton\n\t\t\t:disabled\n\t\t\t:size\n\t\t\ttext=\"Example text\"\n\t\t\tvariant=\"success\">\n\t\t\t<template #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\t:disabled\n\t\t\t:size\n\t\t\ttext=\"Example text\"\n\t\t\tvariant=\"warning\">\n\t\t\t<template #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\t:disabled\n\t\t\t:size\n\t\t\ttext=\"Example text\"\n\t\t\tvariant=\"error\">\n\t\t\t<template #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<p> - </p>\n\t</div>\n</div>\n\n</template>\n<script>\nimport Video from 'vue-material-design-icons/Video.vue'\n\nexport default {\n\tcomponents: {\n\t\tVideo,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\ttoggled: false,\n\t\t\tdisabled: false,\n\t\t\tsize: 'normal',\n\t\t\tstyle: 'icontext',\n\t\t}\n\t},\n\tcomputed: {\n\t\ttext() {\n\t\t\tif (this.style.includes('text')) {\n\t\t\t\treturn 'Example text'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.wrapper {\n\tpadding: 0 12px;\n}\n\n.grid {\n\tdisplay: grid;\n\tgap: 12px;\n\tgrid-template-columns: 1fr 1fr 1fr 1fr;\n\tgrid-template-rows: repeat(auto-fill, auto);\n\tposition: relative;\n\tmargin: 12px 0;\n}\n\nh5 {\n\tfont-weight: bold;\n\tmargin: 40px 0 20px 0;\n}\n\np {\n\ttext-align: center;\n\tmargin: 4px 0 12px 0;\n\tcolor: var(--color-text-maxcontrast)\n}\n\nbutton {\n\tmargin: auto;\n}\n</style>\n```\n\n### Alignment\nSometimes it is required to change the icon alignment on the button, like for switching between pages as in following example:\n\n```vue\n<template>\n\t<div style=\"display: flex; flex-direction: column; gap: 12px;\">\n\t\t<NcButton text=\"center (default)\" variant=\"secondary\" wide>\n\t\t\t<template #icon>\n\t\t\t\t<IconLeft :size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton alignment=\"center-reverse\" text=\"center-reverse\" variant=\"secondary\" wide>\n\t\t\t<template #icon>\n\t\t\t\t<IconRight :size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<div style=\"display: flex; gap: 12px;\">\n\t\t\t<div style=\"display: flex; flex-direction: column; gap: 12px; flex: 1\">\n\t\t\t\t<NcButton alignment=\"start\" text=\"start\" variant=\"secondary\" wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton alignment=\"start-reverse\" text=\"start-reverse\" variant=\"secondary\" wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconRight :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t\t<div style=\"display: flex; flex-direction: column; gap: 12px; flex: 1\">\n\t\t\t\t<NcButton alignment=\"end\" text=\"end\" variant=\"secondary\" wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton alignment=\"end-reverse\" text=\"end-reverse\" variant=\"secondary\" wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconRight :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport IconLeft from 'vue-material-design-icons/ArrowLeft.vue'\nimport IconRight from 'vue-material-design-icons/ArrowRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconLeft,\n\t\tIconRight,\n\t},\n}\n</script>\n```\n\n### Pressed state\n\nIt is possible to make the button stateful by adding a pressed state, e.g. if you like to create a favorite button.\nThe button will have the required `aria` attribute for accessibility and visual style (`primary` when pressed, and the configured variant otherwise).\n\nDo not change `text` or `aria-label` of the pressed/unpressed button. See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed\n\n```vue\n<template>\n\t<div>\n\t\t<div style=\"display: flex; gap: 12px;\">\n\t\t\t<NcButton v-model:pressed=\"isFavorite\" aria-label=\"Favorite\" variant=\"tertiary-no-background\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconStar v-if=\"isFavorite\" :size=\"20\" />\n\t\t\t\t\t<IconStarOutline v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t\t<NcButton v-model:pressed=\"isFavorite\" text=\"Favorite\" variant=\"tertiary\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconStar v-if=\"isFavorite\" :size=\"20\" />\n\t\t\t\t\t<IconStarOutline v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t\t<NcButton v-model:pressed=\"isFavorite\" aria-label=\"Favorite\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconStar v-if=\"isFavorite\" :size=\"20\" />\n\t\t\t\t\t<IconStarOutline v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t</div>\n\t\t<div>\n\t\t\tIt is {{ isFavorite ? 'a' : 'not a' }} favorite.\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport IconStar from 'vue-material-design-icons/Star.vue'\nimport IconStarOutline from 'vue-material-design-icons/StarOutline.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconStar,\n\t\tIconStarOutline,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tisFavorite: false,\n\t\t}\n\t},\n\tmethods: {\n\t\ttoggleFavorite() {\n\t\t\tthis.isFavorite = !this.isFavorite\n\t\t},\n\t},\n}\n</script>\n```\n\n### Usage example: Custom content\nSometimes custom content, meaning more than text and icon, is required.\nFor this the `default`-slot can be used.\n\n**Important**: Never include interactive elements inside the button,\nthis results in invalid HTML and is not accessible!\n\n```vue\n<template>\n\t<NcButton>\n\t\tSome <del>formatted</del> content\n\t</NcButton>\n</template>\n```\n\n### Usage example: Sorting table columns\nThe standard way to implement sortable table column headers should be like this:\n\n```vue\n<template>\n\t<table>\n\t\t<thead>\n\t\t\t<tr>\n\t\t\t\t<th :aria-sorted=\"sortedName\" class=\"row-name\">\n\t\t\t\t\t<NcButton alignment=\"start-reverse\"\n\t\t\t\t\t\t:wide=\"true\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"sortName\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconDown v-if=\"sortedName === 'ascending'\" class=\"sort-icon\" :size=\"20\" />\n\t\t\t\t\t\t\t<IconUp v-else-if=\"sortedName === 'descending'\" class=\"sort-icon\" :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<span class=\"table-header\">Name</span>\n\t\t\t\t\t</NcButton>\n\t\t\t\t</th>\n\t\t\t\t<th :aria-sorted=\"sortedSize\" class=\"row-size\">\n\t\t\t\t\t<NcButton alignment=\"end\"\n\t\t\t\t\t\t:wide=\"true\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"sortSize\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconDown v-if=\"sortedSize === 'ascending'\" class=\"sort-icon\" :size=\"20\" />\n\t\t\t\t\t\t\t<IconUp v-else-if=\"sortedSize === 'descending'\" class=\"sort-icon\" :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<span class=\"table-header\">Size</span>\n\t\t\t\t\t</NcButton>\n\t\t\t\t</th>\n\t\t\t</tr>\n\t\t</thead>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t<td class=\"row-name\">Lorem ipsum</td>\n\t\t\t\t<td class=\"row-size\">8 MiB</td>\n\t\t\t</tr>\n\t\t</tbody>\n\t</table>\n</template>\n<script>\nimport IconUp from 'vue-material-design-icons/MenuUp.vue'\nimport IconDown from 'vue-material-design-icons/MenuDown.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconUp,\n\t\tIconDown,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsortedName: null,\n\t\t\tsortedSize: null,\n\t\t}\n\t},\n\tmethods: {\n\t\tsortName() {\n\t\t\tif (this.sortedName === 'ascending') {\n\t\t\t\tthis.sortedName = 'descending'\n\t\t\t} else if (this.sortedName === 'descending') {\n\t\t\t\tthis.sortedName = null\n\t\t\t} else {\n\t\t\t\tthis.sortedName = 'ascending'\n\t\t\t}\n\t\t},\n\t\tsortSize() {\n\t\t\tif (this.sortedSize === 'ascending') {\n\t\t\t\tthis.sortedSize = 'descending'\n\t\t\t} else if (this.sortedSize === 'descending') {\n\t\t\t\tthis.sortedSize = null\n\t\t\t} else {\n\t\t\t\tthis.sortedSize = 'ascending'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n<style>\ntable {\n\ttable-layout: fixed;\n\twidth: 300px;\n}\n\ntd.row-name {\n\tpadding-inline-start: 16px;\n}\n\ntd.row-size {\n\ttext-align: end;\n\tpadding-inline-end: 16px;\n}\n\n.table-header {\n\tfont-weight: normal;\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.sort-icon {\n\tcolor: var(--color-text-maxcontrast);\n\tposition: relative;\n\tinset-inline: -10px;\n}\n\n.row-size .sort-icon {\n\tinset-inline: 10px;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { RouteLocationRaw } from 'vue-router'\n\nimport { computed, inject } from 'vue'\nimport { routerKey } from 'vue-router'\nimport { isLegacy } from '../../utils/legacy.ts'\n\nexport type ButtonAlignment = 'start'\n\t| 'start-reverse'\n\t| 'center'\n\t| 'center-reverse'\n\t| 'end'\n\t| 'end-reverse'\n\nexport type ButtonSize = 'small'\n\t| 'normal'\n\t| 'large'\n\nexport type ButtonType = 'submit'\n\t| 'reset'\n\t| 'button'\n\nexport type ButtonVariant = 'primary'\n\t| 'secondary'\n\t| 'tertiary'\n\t| 'tertiary-no-background'\n\t| 'tertiary-on-primary'\n\t| 'error'\n\t// Design-wise not recommended for new code\n\t| 'warning'\n\t| 'success'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Set the text and icon alignment\n\t *\n\t * @default 'center'\n\t */\n\talignment?: ButtonAlignment\n\n\t/**\n\t * Always try to provide an aria-label to your button.\n\t *\n\t * Make it more specific than the button's name by provide some more context.\n\t * E.g. if the name of the button is \"send\" in the Mail app,\n\t * the aria label could be \"Send email\".\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * Toggles the disabled state of the button on and off.\n\t *\n\t * @default false\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * When `href` is set this will make the browser try to download the target.\n\t * If a string is passed the browser will use it as the filename.\n\t *\n\t * Note that the browser might adjust it for allowed characters (e.g. '/' or '\\').\n\t * Also this only works with same-origin URLs and `blob:` or `data:` schemas.\n\t * Moreover a `Content-Disposition` header set by the server will override the filename.\n\t */\n\tdownload?: string | true\n\n\t/**\n\t * Providing the href attribute turns the button component into an `a` element.\n\t */\n\thref?: string\n\n\t/**\n\t * The pressed state of the button if it has a checked state.\n\t * This will add the `aria-pressed` attribute and for the button to have the primary style in checked state.\n\t *\n\t * Note: Pressed state is not supported for links.\n\t */\n\tpressed?: boolean | undefined\n\n\t/**\n\t * Specify the button size.\n\t *\n\t * @default 'normal'\n\t */\n\tsize?: ButtonSize\n\n\t/**\n\t * Target for the `a` element if `href` is set.\n\t *\n\t * @default '_self'\n\t */\n\ttarget?: string\n\n\t/**\n\t * The main button text.\n\t * This can be overwritten by using the *default* slot.\n\t *\n\t * @since 9.0.0\n\t */\n\ttext?: string\n\n\t/**\n\t * Providing the to attribute turns the button component into a `router-link` element.\n\t *\n\t * Note: This takes precedence over the href attribute.\n\t */\n\tto?: RouteLocationRaw\n\n\t/**\n\t * Specifies the button native type\n\t * If left empty, the default \"button\" type will be used.\n\t *\n\t * @default 'button'\n\t */\n\ttype?: ButtonType\n\n\t/**\n\t * Specifies the button variant.\n\t * If left empty, the default button style will be applied.\n\t *\n\t * @default 'secondary'\n\t */\n\tvariant?: ButtonVariant\n\n\t/**\n\t * Specifies whether the button should span all the available width.\n\t * By default, buttons span the whole width of the container.\n\t *\n\t * @default false\n\t */\n\twide?: boolean\n}>(), {\n\tariaLabel: undefined,\n\talignment: 'center',\n\tdownload: undefined,\n\thref: undefined,\n\tpressed: undefined,\n\tsize: 'normal',\n\ttarget: '_self',\n\ttext: undefined,\n\tto: undefined,\n\ttype: 'button',\n\tvariant: 'secondary',\n})\n\nconst emit = defineEmits<{\n\t/**\n\t * Emitted when the button was clicked.\n\t */\n\tclick: [e: MouseEvent]\n\n\t/**\n\t * Update the current pressed state of the button (if the `pressed` property was configured).\n\t * If the button is a toggle button (`pressed` state is boolean),\n\t * then this will be emitted if the user toggled the state.\n\t */\n\t'update:pressed': [pressed: boolean]\n}>()\n\ndefineSlots<{\n\t/**\n\t * Custom button content.\n\t * This can be used for custom formatted content, ensure to not include any interactive elements.\n\t * For plain text it is preferred to use the `text` prop instead.\n\t */\n\tdefault?: Slot\n\n\t/**\n\t * Icon (optional) to show within the button\n\t */\n\ticon?: Slot\n}>()\n\nconst hasVueRouterContext = inject(routerKey, null) !== null\n\nconst tag = computed(() => {\n\t// TODO: should we warn if props.to is provided but there is no vue-router?\n\tif (hasVueRouterContext && props.to) {\n\t\t// Note: RouterLink is used as globally registered component (by name) and not imported intentionally\n\t\t// to use injected component from the app and not bundle it to the button\n\t\treturn 'RouterLink'\n\t} else if (props.href) {\n\t\treturn 'a'\n\t} else {\n\t\treturn 'button'\n\t}\n})\n\nconst hasPressedState = computed(() => tag.value === 'button' && typeof props.pressed === 'boolean')\n\nconst variantWithPressed = computed(() => {\n\t// Pressed toggle button forced to be primary\n\tif (props.pressed) {\n\t\treturn 'primary'\n\t}\n\t// Non-pressed toggle button may use passed variant but it cannot be primary\n\tif (props.pressed === false && props.variant === 'primary') {\n\t\treturn 'secondary'\n\t}\n\n\treturn props.variant\n})\nconst isTertiaryVariant = computed(() => variantWithPressed.value.startsWith('tertiary'))\n\nconst flexAlignment = computed(() => props.alignment.split('-')[0])\nconst isReverseAligned = computed(() => props.alignment.includes('-'))\n\nconst getNcPopoverTriggerAttrs = inject<() => Record<string, string | undefined>>('NcPopover:trigger:attrs', () => ({}), false)\nconst ncPopoverTriggerAttrs = computed(() => getNcPopoverTriggerAttrs())\n\nconst attrs = computed(() => {\n\tif (tag.value === 'RouterLink') {\n\t\treturn {\n\t\t\tto: props.to,\n\t\t\tactiveClass: 'active',\n\t\t}\n\t} else if (tag.value === 'a') {\n\t\treturn {\n\t\t\thref: props.href || '#',\n\t\t\ttarget: props.target,\n\t\t\trel: 'nofollow noreferrer noopener',\n\t\t\tdownload: props.download || undefined,\n\t\t}\n\t} else if (tag.value === 'button') {\n\t\treturn {\n\t\t\t...ncPopoverTriggerAttrs.value,\n\t\t\t'aria-pressed': props.pressed,\n\t\t\ttype: props.type,\n\t\t\tdisabled: props.disabled,\n\t\t}\n\t}\n\n\treturn undefined\n})\n\n/**\n * Handle the click on the link / button\n *\n * @param event - Mouse click event\n */\nfunction onClick(event: MouseEvent) {\n\tif (hasPressedState.value) {\n\t\temit('update:pressed', !props.pressed)\n\t}\n\temit('click', event)\n}\n</script>\n\n<template>\n\t<component\n\t\t:is=\"tag\"\n\t\tclass=\"button-vue\"\n\t\t:class=\"[\n\t\t\t`button-vue--size-${size}`,\n\t\t\t{\n\t\t\t\t[`button-vue--${variantWithPressed}`]: variantWithPressed,\n\t\t\t\t'button-vue--tertiary': isTertiaryVariant,\n\t\t\t\t'button-vue--wide': wide,\n\t\t\t\t[`button-vue--${flexAlignment}`]: flexAlignment !== 'center',\n\t\t\t\t'button-vue--reverse': isReverseAligned,\n\t\t\t\t'button-vue--legacy': isLegacy,\n\t\t\t},\n\t\t]\"\n\t\t:aria-label\n\t\tv-bind=\"attrs\"\n\t\t@click=\"onClick\">\n\t\t<span class=\"button-vue__wrapper\">\n\t\t\t<span class=\"button-vue__icon\">\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</span>\n\t\t\t<span class=\"button-vue__text\">\n\t\t\t\t<slot>\n\t\t\t\t\t{{ text }}\n\t\t\t\t</slot>\n\t\t\t</span>\n\t\t</span>\n\t</component>\n</template>\n\n<style lang=\"scss\" scoped>\n.button-vue {\n\t--button-size: var(--default-clickable-area);\n\t--button-inner-size: calc(var(--button-size) - 4px); // without the outer border\n\t--button-radius: var(--border-radius-element);\n\t--button-padding-default: calc(var(--default-grid-baseline) + var(--button-radius));\n\t--button-padding: var(--default-grid-baseline) var(--button-padding-default);\n\n\t// General styles\n\t// by default use secondary styling\n\tcolor: var(--color-primary-element-light-text);\n\tbackground-color: var(--color-primary-element-light);\n\tborder: 1px solid var(--color-primary-element-light-hover);\n\tborder-bottom-width: 2px;\n\tborder-radius: var(--button-radius);\n\tbox-sizing: border-box;\n\t// adjust position and size\n\tposition: relative;\n\twidth: fit-content;\n\toverflow: hidden;\n\tpadding-block: 1px 0; // center the content as border is 1px top and 2px bottom\n\tpadding-inline: var(--button-padding);\n\tmin-height: var(--button-size);\n\tmin-width: var(--button-size);\n\t// display setup\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\ttransition-property: color, border-color, background-color;\n\ttransition-duration: 0.1s;\n\ttransition-timing-function: linear;\n\tcursor: pointer;\n\tfont-size: var(--default-font-size);\n\tfont-weight: bold;\n\n\t// Setup different button sizes\n\t&--size-small {\n\t\t--button-size: var(--clickable-area-small);\n\t\t--button-radius: var(--border-radius-small); // make the border radius even smaller for small buttons\n\t}\n\n\t&--size-large {\n\t\t--button-size: var(--clickable-area-large);\n\t}\n\n\t// Cursor pointer on element and all children\n\t* {\n\t\tcursor: pointer;\n\t}\n\n\t// No outline feedback for focus. Handled with a toggled class in js (see data)\n\t&:focus {\n\t\toutline: none;\n\t}\n\n\t// Disabled styles\n\t&:disabled {\n\t\t// Gives a wash out effect\n\t\tfilter: saturate($opacity_normal);\n\t\topacity: $opacity_disabled;\n\n\t\t// Reset the cursor\n\t\tcursor: default;\n\t\t* {\n\t\t\tcursor: default;\n\t\t}\n\t}\n\n\t// Hover styles when not disabled (for the default theming of 'secondary')\n\t&:hover:not(:disabled) {\n\t\tbackground-color: var(--color-primary-element-light-hover);\n\t}\n\n\t// Back to the default color for this button when active\n\t// TODO: add ripple effect\n\t&:active {\n\t\tbackground-color: var(--color-primary-element-light);\n\t}\n\n\t&__wrapper {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t}\n\n\t&--end &__wrapper {\n\t\tjustify-content: end;\n\t}\n\n\t&--start &__wrapper {\n\t\tjustify-content: start;\n\t}\n\n\t&--reverse &__wrapper {\n\t\tflex-direction: row-reverse;\n\t}\n\n\t&--reverse {\n\t\t--button-padding: var(--button-padding-default) var(--default-grid-baseline);\n\t}\n\n\t&__icon {\n\t\t--default-clickable-area: var(--button-inner-size); // align icon size with inner button size\n\t\theight: var(--button-inner-size);\n\t\twidth: var(--button-inner-size);\n\t\tmin-height: var(--button-inner-size);\n\t\tmin-width: var(--button-inner-size);\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\n\t\t&:empty {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t// For small buttons we need to adjust the icon size\n\t&--size-small &__icon {\n\t\t:deep(> *) {\n\t\t\tmax-height: 16px;\n\t\t\tmax-width: 16px;\n\t\t}\n\t\t:deep(svg) {\n\t\t\theight: 16px;\n\t\t\twidth: 16px;\n\t\t}\n\t}\n\n\t&__text {\n\t\tfont-weight: bold;\n\t\tmargin-bottom: 1px;\n\t\tpadding: 2px 0;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\toverflow: hidden;\n\n\t\t&:empty {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t// Icon-only button\n\t&:has(#{&}__text:empty) {\n\t\t--button-padding: var(--button-radius);\n\t\tline-height: 1;\n\t\twidth: var(--button-size) !important;\n\t}\n\n\t// Text-only button\n\t&:has(#{&}__icon:empty) {\n\t\t--button-padding: var(--button-padding-default);\n\n\t\t.button-vue__text {\n\t\t\tpadding-inline: var(--default-grid-baseline);\n\t\t}\n\t}\n\n\t// Wide button spans the whole width of the container\n\t&--wide {\n\t\twidth: 100%;\n\t}\n\n\t&:focus-visible {\n\t\toutline: 2px solid var(--color-main-text) !important;\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background) !important;\n\t\t&.button-vue--vue-tertiary-on-primary {\n\t\t\toutline: 2px solid var(--color-primary-element-text);\n\t\t\tborder-radius: var(--border-radius-element);\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t// Button types\n\n\t// Primary\n\t&--primary {\n\t\tbackground-color: var(--color-primary-element);\n\t\tborder-color: var(--color-primary-element-hover);\n\t\tcolor: var(--color-primary-element-text);\n\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// TODO: add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t}\n\t}\n\n\t// Secondary\n\t&--secondary {\n\t\tbackground-color: var(--color-primary-element-light);\n\t\tborder-color: var(--color-primary-element-light-hover);\n\t\tcolor: var(--color-primary-element-light-text);\n\n\t\t&:hover:not(:disabled) {\n\t\t\tcolor: var(--color-primary-element-light-text);\n\t\t\tbackground-color: var(--color-primary-element-light-hover);\n\t\t}\n\t}\n\n\t// Tertiary\n\t&--tertiary {\n\t\tbackground-color: transparent;\n\t\tborder-color: transparent;\n\t\tcolor: var(--color-main-text);\n\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\t}\n\n\t// Tertiary, no background\n\t&--tertiary-no-background {\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t// Tertiary on primary color (like the header)\n\t&--tertiary-on-primary {\n\t\tcolor: var(--color-primary-element-text);\n\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t// Success\n\t&--success {\n\t\tborder-color: var(--color-success-hover);\n\t\tbackground-color: var(--color-success);\n\t\tcolor: var(--color-success-text);\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-success-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// : add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-success);\n\t\t}\n\t}\n\n\t// Warning\n\t&--warning {\n\t\tborder-color: var(--color-warning-hover);\n\t\tbackground-color: var(--color-warning);\n\t\tcolor: var(--color-warning-text);\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-warning-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// TODO: add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-warning);\n\t\t}\n\t}\n\n\t// Error\n\t&--error {\n\t\tborder-color: var(--color-error-hover);\n\t\tbackground-color: var(--color-error);\n\t\tcolor: var(--color-error-text);\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-error-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// TODO: add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-error);\n\t\t}\n\t}\n\n\t// before Nextcloud 32\n\t&--legacy {\n\t\t--button-inner-size: var(--button-size);\n\t\t// no border\n\t\tborder: none;\n\t\tpadding-block: 0;\n\t}\n\t&--legacy#{&}--error,\n\t&--legacy#{&}--success,\n\t&--legacy#{&}--warning {\n\t\tcolor: white;\n\t}\n}\n\n</style>\n"],"names":["_createBlock","_resolveDynamicComponent","_mergeProps","size","wide","_unref","ariaLabel","_createElementVNode","_renderSlot","text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAmdA,UAAM,QAAQ;AAiHd,UAAM,OAAO;AA4Bb,UAAM,sBAAsB,OAAO,WAAW,IAAI,MAAM;AAExD,UAAM,MAAM,SAAS,MAAM;AAE1B,UAAI,uBAAuB,MAAM,IAAI;AAGpC,eAAO;AAAA,MACR,WAAW,MAAM,MAAM;AACtB,eAAO;AAAA,MACR,OAAO;AACN,eAAO;AAAA,MACR;AAAA,IACD,CAAC;AAED,UAAM,kBAAkB,SAAS,MAAM,IAAI,UAAU,YAAY,OAAO,MAAM,YAAY,SAAS;AAEnG,UAAM,qBAAqB,SAAS,MAAM;AAEzC,UAAI,MAAM,SAAS;AAClB,eAAO;AAAA,MACR;AAEA,UAAI,MAAM,YAAY,SAAS,MAAM,YAAY,WAAW;AAC3D,eAAO;AAAA,MACR;AAEA,aAAO,MAAM;AAAA,IACd,CAAC;AACD,UAAM,oBAAoB,SAAS,MAAM,mBAAmB,MAAM,WAAW,UAAU,CAAC;AAExF,UAAM,gBAAgB,SAAS,MAAM,MAAM,UAAU,MAAM,GAAG,EAAE,CAAC,CAAC;AAClE,UAAM,mBAAmB,SAAS,MAAM,MAAM,UAAU,SAAS,GAAG,CAAC;AAErE,UAAM,2BAA2B,OAAiD,2BAA2B,OAAO,CAAA,IAAK,KAAK;AAC9H,UAAM,wBAAwB,SAAS,MAAM,0BAA0B;AAEvE,UAAM,QAAQ,SAAS,MAAM;AAC5B,UAAI,IAAI,UAAU,cAAc;AAC/B,eAAO;AAAA,UACN,IAAI,MAAM;AAAA,UACV,aAAa;AAAA,QAAA;AAAA,MAEf,WAAW,IAAI,UAAU,KAAK;AAC7B,eAAO;AAAA,UACN,MAAM,MAAM,QAAQ;AAAA,UACpB,QAAQ,MAAM;AAAA,UACd,KAAK;AAAA,UACL,UAAU,MAAM,YAAY;AAAA,QAAA;AAAA,MAE9B,WAAW,IAAI,UAAU,UAAU;AAClC,eAAO;AAAA,UACN,GAAG,sBAAsB;AAAA,UACzB,gBAAgB,MAAM;AAAA,UACtB,MAAM,MAAM;AAAA,UACZ,UAAU,MAAM;AAAA,QAAA;AAAA,MAElB;AAEA,aAAO;AAAA,IACR,CAAC;AAOD,aAAS,QAAQ,OAAmB;AACnC,UAAI,gBAAgB,OAAO;AAC1B,aAAK,kBAAkB,CAAC,MAAM,OAAO;AAAA,MACtC;AACA,WAAK,SAAS,KAAK;AAAA,IACpB;;0BAICA,YA2BYC,wBA1BN,IAAA,KAAG,GADTC,WA2BY;AAAA,QAzBX,QAAM,cAAY;AAAA,8BACeC,KAAAA,IAAI;AAAA;YAA6B,CAAA,eAAA,mBAAA,KAAkB,KAAK,mBAAA;AAAA,oCAAgD,kBAAA;AAAA,gCAA2CC,KAAAA;AAAAA,YAA0B,CAAA,eAAA,cAAA,KAAa,KAAK,cAAA,UAAa;AAAA,mCAA0C,iBAAA;AAAA,kCAA4CC,MAAA,QAAA;AAAA,UAAA;AAAA;QAWlU,cAAAC,KAAAA;AAAAA,MAAAA,GACO,MAAA,OAAK,EACZ,QAAA,CAAc,GAAA;AAAA,yBACf,MASO;AAAA,UATPC,mBASO,QATP,YASO;AAAA,YARNA,mBAEO,QAFP,YAEO;AAAA,cADNC,WAAoB,KAAA,QAAA,QAAA,CAAA,GAAA,QAAA,IAAA;AAAA,YAAA;YAErBD,mBAIO,QAJP,YAIO;AAAA,cAHNC,WAEO,4BAFP,MAEO;AAAA,gDADHC,KAAAA,IAAI,GAAA,CAAA;AAAA,cAAA;;;;;;;;;;"}

package/dist/chunks/NcChip-CIjgDRrf.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcChip-CIjgDRrf.mjs","sources":["../../src/components/NcChip/NcChip.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n<docs>\n### Basic usage\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 8px; flex-wrap: wrap;\">\n\t\t<NcChip text=\"Notes.txt\" />\n\t\t<NcChip text=\"Files\" :icon-path=\"mdiFile\" />\n\t\t<NcChip text=\"Color\" :icon-path=\"mdiPalette\" variant=\"tertiary\" />\n\t\t<NcChip text=\"Current time\" :icon-path=\"mdiClock\" no-close variant=\"primary\" />\n\t\t<NcChip text=\"Canceled\" :icon-path=\"mdiCancel\" variant=\"error\" no-close />\n\t\t<NcChip text=\"Open\" :icon-path=\"mdiCircle\" variant=\"success\" no-close />\n\t\t<NcChip text=\"Due tomorrow\" :icon-path=\"mdiAlertCircleOutline\" variant=\"warning\" no-close />\n\t</div>\n</template>\n<script>\nimport { mdiClock, mdiFile, mdiPalette, mdiCancel, mdiCircle, mdiAlertCircleOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiAlertCircleOutline,\n\t\t\tmdiCancel,\n\t\t\tmdiCircle,\n\t\t\tmdiClock,\n\t\t\tmdiFile,\n\t\t\tmdiPalette,\n\t\t}\n\t}\n}\n</script>\n```\n\n### Advanced usage\n\nIt is also possible to use custom components for the icon by using the `icon` slot.\nIn this example we are using the `NcAvatar` component to render the users avatar as the icon.\n\n*Hint: If you use round icons like avatars you should set their size to `24px` (or use CSS variable `--chip-size`) to make them fully fill and align with the the chip*\n\nAlso it is possible to pass custom actions.\n\n```vue\n<template>\n\t<NcChip>\n\t\t<!-- The icon slot allow to use custom components as the chip icon -->\n\t\t<template #icon>\n\t\t\t<NcAvatar :size=\"24\" user=\"jdoe\" display-name=\"J. Doe\" />\n\t\t</template>\n\t\t<!-- The actions slot allows to add custom actions -->\n\t\t<template #actions>\n\t\t\t<NcActionButton>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ContactsIcon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd to contacts\n\t\t\t</NcActionButton>\n\t\t</template>\n\t\t<!-- The default slot can be used for add content, just like the `text` prop -->\n\t\tJ. Doe\n\t</NcChip>\n</template>\n<script>\nimport ContactsIcon from 'vue-material-design-icons/Contacts.vue'\nexport default {\n\tcomponents: {\n\t\tContactsIcon,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div\n\t\tclass=\"nc-chip\"\n\t\t:class=\"{\n\t\t\t[`nc-chip--${variant}`]: true,\n\t\t\t'nc-chip--no-actions': noClose && !hasActions(),\n\t\t\t'nc-chip--no-icon': !hasIcon(),\n\t\t}\">\n\t\t<span v-if=\"hasIcon()\" class=\"nc-chip__icon\">\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<!-- The default icon wrapper uses a size of 18px to ensure the icon is not clipped by the round chip style -->\n\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\tv-if=\"iconPath || iconSvg\"\n\t\t\t\t\tinline\n\t\t\t\t\t:path=\"iconPath\"\n\t\t\t\t\t:svg=\"iconPath ? undefined : iconSvg\"\n\t\t\t\t\t:size=\"18\" />\n\t\t\t</slot>\n\t\t</span>\n\t\t<span class=\"nc-chip__text\">\n\t\t\t<slot>{{ text }}</slot>\n\t\t</span>\n\t\t<NcActions\n\t\t\tv-if=\"canClose || hasActions()\"\n\t\t\tclass=\"nc-chip__actions\"\n\t\t\t:container=\"actionsContainer\"\n\t\t\t:force-menu=\"!canClose\"\n\t\t\tvariant=\"tertiary-no-background\">\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"canClose\"\n\t\t\t\tclose-after-click\n\t\t\t\t@click=\"emit('close')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiClose\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ ariaLabelClose }}\n\t\t\t</NcActionButton>\n\t\t\t<slot name=\"actions\" />\n\t\t</NcActions>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { mdiClose } from '@mdi/js'\nimport { computed } from 'vue'\nimport NcActionButton from '../NcActionButton/NcActionButton.vue'\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { t } from '../../l10n.ts'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * aria label to set on the close button\n\t *\n\t * @default 'Close'\n\t */\n\tariaLabelClose?: string\n\n\t/**\n\t * Container for the actions\n\t */\n\tactionsContainer?: string\n\n\t/**\n\t * Main text of the chip.\n\t */\n\ttext?: string\n\n\t/**\n\t * SVG path of the icon to use, this takes precedence over `iconSVG`.\n\t * For example icon paths from `@mdi/js` can be used.\n\t */\n\ticonPath?: string\n\n\t/**\n\t * Inline SVG to use as the icon\n\t */\n\ticonSvg?: string\n\n\t/**\n\t * Set to true to prevent the close button to be shown\n\t */\n\tnoClose?: boolean\n\n\t/**\n\t * Set the chips design variant-\n\t *\n\t * This sets the background style of the chip, similar to NcButton's `variant`.\n\t *\n\t * @default 'secondary'\n\t * @since 8.23.0\n\t */\n\tvariant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'warning' | 'success'\n}>(), {\n\tariaLabelClose: t('Close'),\n\tactionsContainer: 'body',\n\ticonPath: undefined,\n\ticonSvg: undefined,\n\ttext: '',\n\tvariant: 'secondary',\n})\n\nconst emit = defineEmits<{\n\t/**\n\t * Emitted when the close button is clicked\n\t */\n\tclose: []\n}>()\n\nconst slots = defineSlots<{\n\t/**\n\t * The actions slot can be used to add custom actions (`NcAction*`) to the chips actions.\n\t */\n\tactions?: Slot\n\n\t/**\n\t * The default slot can be used to set the text that is shown.\n\t */\n\tdefault?: Slot\n\n\t/**\n\t * The icon slot can be used to set the chip icon.\n\t * Make sure that the icon is not exceeding a height of `--chip-size`.\n\t * For round icons a exact size of `var(--chip-size)` is recommended.\n\t */\n\ticon?: Slot\n}>()\n\nconst canClose = computed(() => !props.noClose)\nconst hasActions = () => !!slots.actions\nconst hasIcon = () => Boolean(props.iconPath || props.iconSvg || !!slots.icon)\n</script>\n\n<style scoped lang=\"scss\">\n.nc-chip {\n\t--chip-size: 24px;\n\t--chip-radius: calc(var(--chip-size) / 2);\n\t// Setup size of wrapper\n\theight: var(--chip-size);\n\tmax-width: fit-content;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tborder-radius: var(--chip-radius);\n\tbackground-color: var(--color-background-hover);\n\n\t&--primary {\n\t\tbackground-color: var(--color-primary-element);\n\t\tcolor: var(--color-primary-element-text);\n\t}\n\n\t&--secondary {\n\t\tbackground-color: var(--color-primary-element-light);\n\t\tcolor: var(--color-primary-element-light-text);\n\t}\n\n\t&--error {\n\t\tbackground-color: var(--color-error);\n\t\tcolor: var(--color-error-text);\n\t}\n\n\t&--warning {\n\t\tbackground-color: var(--color-warning);\n\t\tcolor: var(--color-warning-text);\n\t}\n\n\t&--success {\n\t\tbackground-color: var(--color-success);\n\t\tcolor: var(--color-success-text);\n\t}\n\n\t&--no-actions &__text {\n\t\t// If there are no actions we need to add some padding to ensure the text is not cut-off\n\t\tpadding-inline-end: calc(2 * var(--default-grid-baseline));\n\t}\n\n\t&--no-icon &__text {\n\t\t// Add some more space to the border\n\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t}\n\n\t&__text {\n\t\t// Allow to grow the text\n\t\t// this is only used if an app forces a width of the chip\n\t\tflex: 1 auto;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttext-wrap: nowrap;\n\t}\n\n\t&__icon {\n\t\t// Do neither grow nor shrink, size is fixed\n\t\tflex: 0 0 var(--chip-size);\n\t\tmargin-inline-end: var(--default-grid-baseline);\n\n\t\tline-height: 1;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t// Force size\n\t\toverflow: hidden;\n\t\theight: var(--chip-size);\n\t\twidth: var(--chip-size);\n\t}\n\n\t&__actions {\n\t\t// Do neither grow nor shrink, size is fixed\n\t\tflex: 0 0 var(--chip-size);\n\t\t// Adjust action size to match chip size\n\t\t--default-clickable-area: var(--chip-size);\n\t\t--border-radius-element: var(--chip-radius);\n\t}\n}\n</style>\n"],"names":["_useSlots","_createElementBlock","variant","noClose","_openBlock","_renderSlot","iconPath","iconSvg","_createBlock","_createElementVNode","text","actionsContainer","_createVNode","_unref","_createTextVNode","ariaLabelClose"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiIA,UAAM,QAAQ;AAoDd,UAAM,OAAO;AAOb,UAAM,QAAQA,SAAA;AAmBd,UAAM,WAAW,SAAS,MAAM,CAAC,MAAM,OAAO;AAC9C,UAAM,aAAa,MAAM,CAAC,CAAC,MAAM;AACjC,UAAM,UAAU,MAAM,QAAQ,MAAM,YAAY,MAAM,WAAW,CAAC,CAAC,MAAM,IAAI;;0BAnI5EC,mBAsCM,OAAA;AAAA,QArCL,uBAAM,WAAS;AAAA,uBACWC,KAAAA,OAAO,EAAA,GAAA;AAAA,UAAqCC,uBAAAA,KAAAA,YAAY,WAAA;AAAA,+BAAsC,QAAA;AAAA,QAAO;;QAKnH,aAAZC,UAAA,GAAAH,mBAUO,QAVP,YAUO;AAAA,UATNI,WAQO,yBARP,MAQO;AAAA,YALCC,KAAAA,YAAYC,KAAAA,wBADnBC,YAKc,kBAAA;AAAA;cAHb,QAAA;AAAA,cACC,MAAMF,KAAAA;AAAAA,cACN,KAAKA,KAAAA,WAAW,SAAYC,KAAAA;AAAAA,cAC5B,MAAM;AAAA,YAAA;;;QAGVE,mBAEO,QAFP,YAEO;AAAA,UADNJ,WAAuB,4BAAvB,MAAuB;AAAA,4CAAdK,KAAAA,IAAI,GAAA,CAAA;AAAA,UAAA;;QAGP,SAAA,SAAY,WAAA,kBADnBF,YAgBY,WAAA;AAAA;UAdX,OAAM;AAAA,UACL,WAAWG,KAAAA;AAAAA,UACX,eAAa,SAAA;AAAA,UACd,SAAQ;AAAA,QAAA;2BACR,MAQiB;AAAA,YAPV,SAAA,sBADPH,YAQiB,gBAAA;AAAA;cANhB,qBAAA;AAAA,cACC,+CAAO,KAAI,OAAA;AAAA,YAAA;cACD,cACV,MAAgD;AAAA,gBAAhDI,YAAgD,kBAAA;AAAA,kBAA7B,MAAMC,MAAA,QAAA;AAAA,kBAAW,MAAM;AAAA,gBAAA;;+BAChC,MACX;AAAA,gBADWC,gBAAA,sBACRC,KAAAA,cAAc,GAAA,CAAA;AAAA,cAAA;;;YAElBV,WAAuB,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAAA;;;;;;;;"}

package/dist/chunks/NcDashboardWidget-Bu7bWoUK.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcDashboardWidget-Bu7bWoUK.mjs","sources":["../../node_modules/vue-material-design-icons/Check.vue","../../src/components/NcDashboardWidget/NcDashboardWidget.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon check-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=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"CheckIcon\",\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: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n## Usage\n\n### Simplest example with custom item\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Showing items and a half empty content message\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-items-and-empty-content=\"true\"\n\t\t:half-empty-content-message=\"'No unread items'\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Complete example using NcDashboardWidgetItem\n\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-more-url=\"'https://nextcloud.com'\"\n\t\t:item-menu=\"itemMenu\"\n\t\t@hide=\"onHide\"\n\t\t@markDone=\"onMarkDone\">\n\n\t\t<template #empty-content>\n\t\t\tNothing to display\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tid: '1',\n\t\ttargetUrl: 'https://target.org',\n\t\tavatarUrl: 'https://avatar.url/img.png',\n\t\tavatarUsername: 'Robert',\n\t\tavatarIsNoUser: true,\n\t\toverlayIconUrl: '/svg/core/actions/sound?color=000',\n\t\tmainText: 'First item text',\n\t\tsubText: 'First item subtext',\n\t},\n\t{\n\t\tid: '2',\n\t\ttargetUrl: 'https://other-target.org',\n\t\tavatarUrl: 'https://other-avatar.url/img.png',\n\t\toverlayIconUrl: '/svg/core/actions/add?color=000',\n\t\tmainText: 'Second item text',\n\t\tsubText: 'Second item subtext',\n\t},\n]\nconst myItemMenu = {\n\t// triggers an event named \"markDone\" when clicked\n\t'markDone': {\n\t\ttext: 'Mark as done',\n\t\ticon: 'icon-checkmark',\n\t},\n\t// triggers an event named \"hide\" when clicked\n\t'hide': {\n\t\ttext: 'Hide',\n\t\ticon: 'icon-toggle',\n\t},\n}\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems,\n\t\t\titemMenu: myItemMenu,\n\t\t\tloading: true,\n\t\t}\n\t},\n\tmethods: {\n\t\tonMoreClick() {\n\t\t\tconsole.log('more clicked')\n\t\t\tconst win = window.open('https://wherever.you.want', '_blank')\n\t\t\twin.focus()\n\t\t},\n\t\tonHide(item) {\n\t\t\tconsole.log('user wants to hide item ' + item.id)\n\t\t\t// do what you want\n\t\t},\n\t\tonMarkDone(item) {\n\t\t\tconsole.log('user wants to mark item ' + item.id + ' as done')\n\t\t\t// do what you want\n\t\t},\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"dashboard-widget\">\n\t\t<!-- This element is shown if we have items, but want to show a general message as well.\n\t\tCan be used e.g. to show \"No mentions\" on top of the item list. -->\n\t\t<NcEmptyContent\n\t\t\tv-if=\"showHalfEmptyContentArea\"\n\t\t\t:description=\"halfEmptyContentString\"\n\t\t\tclass=\"half-screen\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot The icon to show in the half empty content area. -->\n\t\t\t\t<slot name=\"halfEmptyContentIcon\">\n\t\t\t\t\t<Check />\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t</NcEmptyContent>\n\t\t<!-- The list of items to show. -->\n\t\t<ul>\n\t\t\t<li v-for=\"item in displayedItems\" :key=\"item.id\">\n\t\t\t\t<!-- @slot The default slot can be optionally overridden. It contains the template of one item. -->\n\t\t\t\t<slot name=\"default\" :item=\"item\">\n\t\t\t\t\t<NcDashboardWidgetItem\n\t\t\t\t\t\tv-bind=\"item\"\n\t\t\t\t\t\t:item-menu=\"itemMenu\"\n\t\t\t\t\t\tv-on=\"handlers\" />\n\t\t\t\t</slot>\n\t\t\t</li>\n\t\t</ul>\n\t\t<!-- While the widget is loading, we show a list of placeholder items. -->\n\t\t<div v-if=\"loading\">\n\t\t\t<div v-for=\"i in 7\" :key=\"i\" class=\"item-list__entry\">\n\t\t\t\t<NcAvatar class=\"item-avatar\" :size=\"44\" />\n\t\t\t\t<div class=\"item__details\">\n\t\t\t\t\t<h3>&nbsp;</h3>\n\t\t\t\t\t<p class=\"message\">\n&nbsp;\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<!-- @slot Slot for showing information in case of an empty item list. -->\n\t\t<slot v-else-if=\"items.length === 0\" name=\"empty-content\">\n\t\t\t<NcEmptyContent\n\t\t\t\tv-if=\"emptyContentMessage\"\n\t\t\t\t:description=\"emptyContentMessage\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<!-- @slot The icon to show in the empty content area. -->\n\t\t\t\t\t<slot name=\"emptyContentIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</slot>\n\t\t<!-- A \"show more\" link, e.g. to navigate to the main app belonging to this widget. -->\n\t\t<a\n\t\t\tv-else-if=\"showMore\"\n\t\t\t:href=\"showMoreUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tclass=\"more\"\n\t\t\ttabindex=\"0\">\n\t\t\t{{ showMoreLabel }}\n\t\t</a>\n\t</div>\n</template>\n\n<script>\nimport Check from 'vue-material-design-icons/Check.vue'\nimport { t } from '../../l10n.ts'\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcDashboardWidgetItem from '../NcDashboardWidgetItem/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.ts'\n\nexport default {\n\tname: 'NcDashboardWidget',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcDashboardWidgetItem,\n\t\tNcEmptyContent,\n\t\tCheck,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * An array containing the items to show (specific structure must be respected,\n\t\t * except if you override item rendering in the default slot).\n\t\t */\n\t\titems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => { return [] },\n\t\t},\n\n\t\t/**\n\t\t * If this is set, a \"show more\" text is displayed on the widget's bottom.\n\t\t * It's a link pointing to this URL.\n\t\t */\n\t\tshowMoreUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * The text of show more button.\n\t\t *\n\t\t * Expected to be in the form \"More {itemName} …\"\n\t\t */\n\t\tshowMoreLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('More items …'),\n\t\t},\n\n\t\t/**\n\t\t * A boolean to put the widget in a loading state.\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 * An object containing context menu entries that will be displayed for each item.\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\n\t\t/**\n\t\t * Whether both the items and the empty content message are shown.\n\t\t * Usefull for e.g. showing \"No mentions\" and a list of elements.\n\t\t */\n\t\tshowItemsAndEmptyContent: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The text to show in the empty content area.\n\t\t */\n\t\temptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * The text to show in the half empty content area.\n\t\t */\n\t\thalfEmptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t// forward menu events to my parent\n\t\thandlers() {\n\t\t\tconst h = {}\n\t\t\tfor (const evName in this.itemMenu) {\n\t\t\t\th[evName] = (it) => {\n\t\t\t\t\tthis.$emit(evName, it)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn h\n\t\t},\n\n\t\tdisplayedItems() {\n\t\t\tconst nbItems = (this.showMoreUrl && this.items.length >= this.maxItemNumber)\n\t\t\t\t? this.maxItemNumber - 1\n\t\t\t\t: this.maxItemNumber\n\t\t\treturn this.items.slice(0, nbItems)\n\t\t},\n\n\t\tshowHalfEmptyContentArea() {\n\t\t\treturn this.showItemsAndEmptyContent && this.halfEmptyContentString && this.items.length !== 0\n\t\t},\n\n\t\thalfEmptyContentString() {\n\t\t\treturn this.halfEmptyContentMessage || this.emptyContentMessage\n\t\t},\n\n\t\tmaxItemNumber() {\n\t\t\treturn this.showItemsAndEmptyContent ? 5 : 7\n\t\t},\n\n\t\tshowMore() {\n\t\t\treturn this.showMoreUrl && this.items.length >= this.maxItemNumber\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.dashboard-widget :deep(.empty-content) {\n\ttext-align: center;\n\tpadding-top: 5vh;\n\t&.half-screen {\n\t\tpadding-top: 0;\n\t\tmargin-bottom: 1vh;\n\t}\n}\n\n.more {\n\tdisplay: block;\n\ttext-align: center;\n\tcolor: var(--color-text-maxcontrast);\n\tline-height: 60px;\n\tcursor: pointer;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-element);\n\t\tcolor: var(--color-main-text);\n\t}\n}\n\n/* skeleton */\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tpadding: 8px;\n\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-block: auto;\n\t\tbackground-color: var(--color-background-dark) !important;\n\t}\n\t.item__details {\n\t\tpadding-inline-start: 8px;\n\t\tmax-height: var(--default-clickable-area);\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 80%;\n\t\t\theight: 15px;\n\t\t\tmargin-top: 5px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","_createBlock","_renderSlot","_createVNode","_Fragment","_renderList","_toHandlers"],"mappings":";;;;;;AAoBA,MAAKA,cAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO,CAAC,OAAO;AAAA,EACf,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA;IAER,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;IAEX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;;;AAxBY,MAAAC,eAAA,EAAA,GAAE,0DAAyD;;;sBAXrEC,mBAeO,QAfPC,WAAc,KAAA,QAAM;AAAA,IACb,eAAa,OAAA,QAAK,OAAA;AAAA,IAClB,cAAY,OAAA;AAAA,IACb,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAA,MAAK,SAAU,MAAM;AAAA;kBACjCD,mBAQM,OAAA;AAAA,MARA,MAAM,OAAA;AAAA,MACP,OAAM;AAAA,MACL,OAAO,OAAA;AAAA,MACP,QAAQ,OAAA;AAAA,MACT,SAAQ;AAAA;MACXE,mBAEO,QAFPH,cAEO;AAAA,QADQ,OAAA,SAAbI,UAAA,GAAAH,mBAAuC,qCAAhB,OAAA,KAAK,GAAA,CAAA;;;;;;;ACoNpC,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EACN,YAAY;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;EAGD,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKN,OAAO;AAAA,MACN,MAAM;AAAA,MACN,SAAS,MAAM;AAAE,eAAO,CAAA;AAAA,MAAG;AAAA;;;;;IAO5B,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;IAQV,eAAe;AAAA,MACd,MAAM;AAAA,MACN,SAAS,EAAE,cAAc;AAAA;;;;IAM1B,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS,MAAM;AAAE,eAAO,CAAA;AAAA,MAAG;AAAA;;;;;IAO5B,0BAA0B;AAAA,MACzB,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,qBAAqB;AAAA,MACpB,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,yBAAyB;AAAA,MACxB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,UAAU;AAAA;AAAA,IAET,WAAW;AACV,YAAM,IAAI,CAAA;AACV,iBAAW,UAAU,KAAK,UAAU;AACnC,UAAE,MAAM,IAAI,CAAC,OAAO;AACnB,eAAK,MAAM,QAAQ,EAAE;AAAA,QACtB;AAAA,MACD;AACA,aAAO;AAAA,IACR;AAAA,IAEA,iBAAiB;AAChB,YAAM,UAAW,KAAK,eAAe,KAAK,MAAM,UAAU,KAAK,gBAC5D,KAAK,gBAAgB,IACrB,KAAK;AACR,aAAO,KAAK,MAAM,MAAM,GAAG,OAAO;AAAA,IACnC;AAAA,IAEA,2BAA2B;AAC1B,aAAO,KAAK,4BAA4B,KAAK,0BAA0B,KAAK,MAAM,WAAW;AAAA,IAC9F;AAAA,IAEA,yBAAyB;AACxB,aAAO,KAAK,2BAA2B,KAAK;AAAA,IAC7C;AAAA,IAEA,gBAAgB;AACf,aAAO,KAAK,2BAA2B,IAAI;AAAA,IAC5C;AAAA,IAEA,WAAW;AACV,aAAO,KAAK,eAAe,KAAK,MAAM,UAAU,KAAK;AAAA,IACtD;AAAA;AAEF;AAvLM,MAAA,aAAA,EAAA,OAAM,mBAAkB;;;;;;;;AAA7B,SAAAG,UAAA,GAAAH,mBA0DM,OA1DN,YA0DM;AAAA,IAtDE,SAAA,yCADPI,YAUiB,2BAAA;AAAA;MARf,aAAa,SAAA;AAAA,MACd,OAAM;AAAA;MACK,cAEV,MAEO;AAAA,QAFPC,WAEO,yCAFP,MAEO;AAAA,UADNC,YAAS,gBAAA;AAAA;;;;IAKZJ,mBAUK,MAAA,MAAA;AAAA,wBATJF,mBAQKO,UAAA,MAAAC,WARc,SAAA,gBAAc,CAAtB,SAAI;4BAAfR,mBAQK,MAAA;AAAA,UAR+B,KAAK,KAAK;AAAA;UAE7CK,WAKO,KAAA,QAAA,WAAA,EALe,KAAU,GAAhC,MAKO;AAAA,YAJNC,YAGmB,kCAHnBL,WAGmB,EAAA,SAAA,QAFV,MAAI,EACX,aAAW,OAAA,YACZQ,WAAM,SAAA,QAAQ,CAAA,GAAA,MAAA,IAAA,CAAA,WAAA,CAAA;AAAA;;;;IAKP,OAAA,wBAAXT,mBAUM,OAAA,YAAA;AAAA,oBATLA,mBAQMO,UAAA,MAAAC,WARW,GAAC,CAAN,MAAC;eAAbN,mBAQM,OAAA;AAAA,UARe,KAAK;AAAA,UAAG,OAAM;AAAA;UAClCI,YAA2C,qBAAA;AAAA,YAAjC,OAAM;AAAA,YAAe,MAAM;AAAA;oCACrCJ,mBAKM,OAAA,EALD,OAAM,mBAAe;AAAA,YACzBA,mBAAe,YAAX,GAAM;AAAA,YACVA,mBAEI,KAAA,EAFD,OAAM,UAAS,GAAC,KAEnB;AAAA;;;UAKc,OAAA,MAAM,WAAM,IAA7BG,WASO,0CATP,MASO;AAAA,MAPC,OAAA,oCADPD,YAOiB,2BAAA;AAAA;QALf,aAAa,OAAA;AAAA;QACH,cAEV,MAAgC;AAAA,UAAhCC,WAAgC,KAAA,QAAA,oBAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;;eAMvB,SAAA,yBADZL,mBAOI,KAAA;AAAA;MALF,MAAM,OAAA;AAAA,MACP,QAAO;AAAA,MACP,OAAM;AAAA,MACN,UAAS;AAAA,uBACN,OAAA,aAAa,GAAA,GAAA,UAAA;;;;","x_google_ignoreList":[0]}

package/dist/chunks/NcHotkey-V6s3DXUs.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcHotkey-V6s3DXUs.mjs","sources":["../../src/components/NcHotkey/NcHotkey.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { computed } from 'vue'\nimport NcKbd from '../NcKbd/NcKbd.vue'\n\nconst {\n\tlabel = undefined,\n\thotkey = undefined,\n} = defineProps<{\n\t/**\n\t * Label for the hotkey\n\t */\n\tlabel?: string\n\t/**\n\t * Hotkey combination string separated by space, for example, `Control Alt T` or `F2` (see `<NcKbd>` for supported key names)\n\t */\n\thotkey?: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * Custom label content\n\t */\n\tdefault?: Slot\n\t/**\n\t * Custom hotkey content for an advanced hotkey layout with <NcKbd> components or other custom content\n\t */\n\thotkey?: Slot\n}>()\n\nconst symbols = computed(() => {\n\treturn hotkey?.split(/\\s+/).map((s) => s.trim())\n})\n\nconst NO_LABEL_WARNING = '⚠️ NcHotKey must have a label or slot content'\n</script>\n\n<template>\n\t<li :class=\"$style.hotkey\">\n\t\t<span role=\"term\" :class=\"$style.hotkey__keys\">\n\t\t\t<slot name=\"hotkey\">\n\t\t\t\t<NcKbd v-for=\"(symbol, index) in symbols\" :key=\"index\" :symbol />\n\t\t\t</slot>\n\t\t</span>\n\t\t<span role=\"definition\" :class=\"$style.hotkey__label\">\n\t\t\t<slot>\n\t\t\t\t{{ label || NO_LABEL_WARNING }}\n\t\t\t</slot>\n\t\t</span>\n\t</li>\n</template>\n\n<style lang=\"scss\" module>\n.hotkey {\n\tdisplay: flex;\n\tflex-direction: row-reverse;\n\talign-items: stretch;\n\tpadding-inline: var(--border-radius-element); /* Align with form group */\n\n\t&:first-child {\n\t\t.hotkey__label,\n\t\t.hotkey__keys {\n\t\t\tborder-block-start: none;\n\t\t}\n\t}\n\n}\n\n.hotkey__label,\n.hotkey__keys {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding-block: calc(2 * var(--default-grid-baseline));\n\tborder-block-start: 1px solid var(--color-border);\n}\n\n.hotkey__label {\n\tflex: 1 1 200px;\n}\n\n.hotkey__keys {\n\tflex: 1 1 auto;\n\tflex-wrap: wrap;\n\tjustify-content: end;\n\trow-gap: calc(1 * var(--default-grid-baseline));\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_createElementVNode","_renderSlot","_openBlock","_Fragment","_renderList","_createBlock","label"],"mappings":";;;AAwCA,MAAM,mBAAmB;;;;;;;;AAJzB,UAAM,UAAU,SAAS,MAAM;AAC9B,aAAO,QAAA,QAAQ,MAAM,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM;AAAA,IAChD,CAAC;;0BAMAA,mBAWK,MAAA;AAAA,QAXA,OAAKC,eAAEC,KAAAA,OAAO,MAAM;AAAA,MAAA;QACxBC,mBAIO,QAAA;AAAA,UAJD,MAAK;AAAA,UAAQ,OAAKF,eAAEC,KAAAA,OAAO,YAAY;AAAA,QAAA;UAC5CE,WAEO,2BAFP,MAEO;AAAA,aADNC,UAAA,IAAA,GAAAL,mBAAiEM,UAAA,MAAAC,WAAhC,QAAA,OAAO,CAAzB,QAAQ,UAAK;kCAA5BC,YAAiE,OAAA;AAAA,gBAAtB,KAAK;AAAA,gBAAQ;AAAA,cAAA;;;;QAG1DL,mBAIO,QAAA;AAAA,UAJD,MAAK;AAAA,UAAc,OAAKF,eAAEC,KAAAA,OAAO,aAAa;AAAA,QAAA;UACnDE,WAEO,4BAFP,MAEO;AAAA,YADHK,gBAAAA,gBAAAA,KAAAA,SAAS,gBAAgB,GAAA,CAAA;AAAA,UAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcHotkeyList-Ck87UwvW.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcHotkeyList-Ck87UwvW.mjs","sources":["../../src/components/NcHotkeyList/NcHotkeyList.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\n\nconst {\n\tlabel = undefined,\n} = defineProps<{\n\t/**\n\t * Heading list label to use when there are multiple lists of shortcuts\n\t */\n\tlabel?: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * Shortcuts described via <NcHotkey> components\n\t */\n\tdefault?: Slot\n}>()\n\nconst labelId = `NcHotkeyList_${createElementId()}`\n</script>\n\n<template>\n\t<div :class=\"$style.hotkeyList\">\n\t\t<div :id=\"labelId\" :class=\"[$style.hotkeyList__heading, { 'hidden-visually': !label }]\">\n\t\t\t{{ label || t('Keyboard shortcuts') }}\n\t\t</div>\n\t\t<ul :aria-labelledby=\"labelId\">\n\t\t\t<slot />\n\t\t</ul>\n\t</div>\n</template>\n\n<style module>\n.hotkeyList {\n\t/* Too wide list is less readable - 400px seems a good width */\n\tmax-width: 400px;\n}\n\n.hotkeyList__heading {\n\tfont-weight: bold;\n\tmargin-inline: var(--border-radius-element); /* Align with form group */\n}\n</style>\n\n<docs>\n## General\n\nList of keyboard shortcuts for the `<NcAppSettingsSectionShortcuts>`.\n\n```vue\n<template>\n\t<NcHotkeyList>\n\t\t<NcHotkey label=\"New File\" hotkey=\"Ctrl N\" />\n\t\t<NcHotkey label=\"Open File\" hotkey=\"Ctrl O\" />\n\t\t<NcHotkey label=\"Save File\" hotkey=\"Ctrl S\" />\n\t</NcHotkeyList>\n</template>\n```\n\n## Groups\n\nThe hotkey list can have an optional heading label. This is useful when there are multiple groups of shortcuts in an app with many shortcuts.\n\n```vue\n<template>\n\t<section>\n\t\t<NcHotkeyList label=\"Actions\">\n\t\t\t<NcHotkey label=\"File actions\" hotkey=\"A\" />\n\t\t\t<NcHotkey label=\"Rename\" hotkey=\"F2\" />\n\t\t\t<NcHotkey label=\"Delete\" hotkey=\"Delete\" />\n\t\t\t<NcHotkey label=\"Add or remove favorite\" hotkey=\"S\" />\n\t\t\t<NcHotkey label=\"Manage tags\" hotkey=\"T\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"Selection\">\n\t\t\t<NcHotkey label=\"Select all files\" hotkey=\"Control A\" />\n\t\t\t<NcHotkey label=\"Deselect all\" hotkey=\"Escape\" />\n\t\t\t<NcHotkey label=\"Select or deselect\" hotkey=\"Control Space\" />\n\t\t\t<NcHotkey label=\"Select a range\" hotkey=\"Control Shift Space\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"Navigation\">\n\t\t\t<NcHotkey label=\"Go to parent folder\" hotkey=\"Alt ArrowUp\" />\n\t\t\t<NcHotkey label=\"Go to file above\" hotkey=\"ArrowUp\" />\n\t\t\t<NcHotkey label=\"Go to file below\" hotkey=\"ArrowDown\" />\n\t\t\t<NcHotkey label=\"Go left in grid\" hotkey=\"ArrowLeft\" />\n\t\t\t<NcHotkey label=\"Go right in grid\" hotkey=\"ArrowRight\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"View\">\n\t\t\t<NcHotkey label=\"Toggle grid view\" hotkey=\"V\" />\n\t\t\t<NcHotkey label=\"Open file sidebar\" hotkey=\"D\" />\n\t\t\t<NcHotkey label=\"Show those shortcuts\" hotkey=\"?\" />\n\t\t</NcHotkeyList>\n\t</section>\n</template>\n```\n</docs>\n"],"names":["_createElementBlock","_normalizeClass","$style","_createElementVNode","label","_unref","_renderSlot"],"mappings":";;;;;;;;;;;AA2BA,UAAM,UAAU,gBAAgB,gBAAA,CAAiB;;0BAIhDA,mBAOM,OAAA;AAAA,QAPA,OAAKC,eAAEC,KAAAA,OAAO,UAAU;AAAA,MAAA;QAC7BC,mBAEM,OAAA;AAAA,UAFA,IAAI;AAAA,UAAU,OAAKF,eAAA,CAAGC,KAAAA,OAAO,2CAA2CE,KAAAA,OAAK,CAAA;AAAA,QAAA,GAC/EA,gBAAAA,KAAAA,SAASC,MAAA,CAAA,EAAC,oBAAA,CAAA,GAAA,CAAA;AAAA,QAEdF,mBAEK,MAAA,EAFA,mBAAiB,WAAO;AAAA,UAC5BG,WAAQ,KAAA,QAAA,SAAA;AAAA,QAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/NcIconSvgWrapper-5AA93z-F.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcIconSvgWrapper-5AA93z-F.mjs","sources":["../../src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\n\nRender raw SVG string icons.\n\n### Usage within `icon`-slot\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<NcButton aria-label=\"Close\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"closeSvg\" name=\"Close\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Settings\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"cogSvg\" name=\"Cog\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Add\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"plusSvg\" name=\"Plus\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Send\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiSend\" name=\"Send\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Star\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiStar\" name=\"Star\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport closeSvg from '@mdi/svg/svg/close.svg?raw'\nimport cogSvg from '@mdi/svg/svg/cog.svg?raw'\nimport plusSvg from '@mdi/svg/svg/plus.svg?raw'\nimport { mdiSend } from '@mdi/js'\nimport { mdiStar } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\t// This icons are static data, so you do not need to put them into `data` which will make them reactive\n\t\treturn {\n\t\t\tcloseSvg,\n\t\t\tcogSvg,\n\t\t\tplusSvg,\n\t\t\tmdiSend,\n\t\t\tmdiStar,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(5, max-content);\n\tgap: 10px;\n}\n</style>\n```\n\n### Inline usage inside text\n\n```vue\n<template>\n\t<p>\n\t\tThis is my <NcIconSvgWrapper inline :path=\"mdiStar\" /> Favorite\n\t</p>\n</template>\n<script>\nimport { mdiStar } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiStar,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Directional usage\n\nThe `directional` property allows to enable a language direction aware icon.\nThis icon component can be used in places where an language direction aware icon should be used,\nfor example if an arrow pointing to the left it used it often points in the wrong direction for right-to-left languages.\nIn this cases this icon can be used which will always point into the logical \"start\" direction.\n\n```vue\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcButton @click=\"isRtl = !isRtl\">Toggle RTL</NcButton>\n\t\t<div class=\"directional\" :dir=\"isRtl ? 'rtl' : 'ltr'\">\n\t\t\t<NcButton alignment=\"start\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiChevronLeft\" />\n\t\t\t\t</template>\n\t\t\t\tPrevious\n\t\t\t</NcButton>\n\t\t\t<NcButton alignment=\"end-reverse\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiChevronRight\" />\n\t\t\t\t</template>\n\t\t\t\tNext\n\t\t\t</NcButton>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { mdiChevronLeft, mdiChevronRight } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiChevronLeft,\n\t\t\tmdiChevronRight,\n\t\t}\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tisRtl: false\n\t\t}\n\t},\n}\n</script>\n<style scoped>\n.wrapper {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(2 * var(--default-grid-baseline));\n\tmax-width: 300px;\n}\n\n.directional {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: calc(2 * var(--default-grid-baseline));\n}\n\n.directional * {\n\tflex: 1 50%;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport DOMPurify from 'dompurify'\nimport { computed, warn } from 'vue'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Make the icon directional, meaning it is langauge direction aware.\n\t * If the icon is placed in a right-to-left context it will be mirrored vertically.\n\t */\n\tdirectional?: boolean\n\n\t/**\n\t * Set if the icon should be used as inline content e.g. within text.\n\t * By default the icon is made a block element for use inside `icon`-slots.\n\t */\n\tinline?: boolean\n\n\t/**\n\t * Raw SVG string to render\n\t */\n\tsvg?: string\n\n\t/**\n\t * Label of the icon, used in aria-label\n\t */\n\tname?: string\n\n\t/**\n\t * Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.\n\t */\n\tpath?: string\n\n\t/**\n\t * Size of the icon to show. Only use if not using within an icon slot.\n\t * Defaults to 20px which is the Nextcloud icon size for all icon slots.\n\t */\n\tsize?: number | 'auto'\n}>(), {\n\tname: undefined,\n\tpath: '',\n\tsize: 20,\n\tsvg: '',\n})\n\n/**\n * Icon size used in CSS\n */\nconst iconSize = computed(() => typeof props.size === 'number' ? `${props.size}px` : props.size)\n\n/**\n * The sanitized SVG or undefined if path shall be used\n */\nconst cleanSvg = computed(() => {\n\tif (!props.svg || props.path) {\n\t\treturn\n\t}\n\n\tconst svg = DOMPurify.sanitize(props.svg)\n\n\tconst svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml')\n\n\tif (svgDocument.querySelector('parsererror')) {\n\t\twarn('SVG is not valid')\n\t\treturn ''\n\t}\n\n\tif (svgDocument.documentElement.id) {\n\t\tsvgDocument.documentElement.removeAttribute('id')\n\t}\n\n\treturn svgDocument.documentElement.outerHTML\n})\n</script>\n\n<template>\n\t<span\n\t\t:aria-hidden=\"name ? undefined : 'true'\"\n\t\t:aria-label=\"name || undefined\"\n\t\tclass=\"icon-vue\"\n\t\t:class=\"{\n\t\t\t'icon-vue--directional': directional,\n\t\t\t'icon-vue--inline': inline,\n\t\t}\"\n\t\trole=\"img\">\n\t\t<svg v-if=\"!cleanSvg\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<path :d=\"path\" />\n\t\t</svg>\n\t\t<!-- eslint-disable-next-line vue/no-v-text-v-html-on-component,vue/no-v-html -->\n\t\t<span v-else v-html=\"cleanSvg\" />\n\t</span>\n</template>\n\n<style lang=\"scss\" scoped>\n.icon-vue {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tmin-width: var(--default-clickable-area);\n\tmin-height: var(--default-clickable-area);\n\topacity: 1;\n\n\t&#{&}--inline {\n\t\tdisplay: inline-flex !important;\n\t\tmin-width: fit-content;\n\t\tmin-height: fit-content;\n\t\tvertical-align: text-bottom;\n\t}\n\n\t// Icon svg wrapper\n\tspan {\n\t\tline-height: 0;\n\t}\n\n\t&:deep(svg) {\n\t\tfill: currentColor;\n\t\twidth: v-bind('iconSize');\n\t\theight: v-bind('iconSize');\n\t\tmax-width: v-bind('iconSize');\n\t\tmax-height: v-bind('iconSize');\n\t}\n\n\t&--directional:deep(svg:dir(rtl)) {\n\t\ttransform: scaleX(-1);\n\t}\n}\n</style>\n"],"names":["_createElementBlock","name","directional","inline","_openBlock","_createElementVNode","path"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAoKA,UAAM,QAAQ;AA2Cd,UAAM,WAAW,SAAS,MAAM,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM,IAAI;AAK/F,UAAM,WAAW,SAAS,MAAM;AAC/B,UAAI,CAAC,MAAM,OAAO,MAAM,MAAM;AAC7B;AAAA,MACD;AAEA,YAAM,MAAM,UAAU,SAAS,MAAM,GAAG;AAExC,YAAM,cAAc,IAAI,UAAA,EAAY,gBAAgB,KAAK,eAAe;AAExE,UAAI,YAAY,cAAc,aAAa,GAAG;AAC7C,aAAK,kBAAkB;AACvB,eAAO;AAAA,MACR;AAEA,UAAI,YAAY,gBAAgB,IAAI;AACnC,oBAAY,gBAAgB,gBAAgB,IAAI;AAAA,MACjD;AAEA,aAAO,YAAY,gBAAgB;AAAA,IACpC,CAAC;;0BAIAA,mBAcO,QAAA;AAAA,QAbL,eAAaC,KAAAA,OAAO,SAAS;AAAA,QAC7B,cAAYA,KAAAA,QAAQ;AAAA,QACrB,uBAAM,YAAU;AAAA,mCACsBC,KAAAA;AAAAA,8BAAoCC,KAAAA;AAAAA,QAAAA;QAI1E,MAAK;AAAA,MAAA;SACO,SAAA,SAAZC,aAAAJ,mBAEM,OAFN,YAEM;AAAA,UADLK,mBAAkB,QAAA,EAAX,GAAGC,KAAAA,QAAI,MAAA,GAAA,UAAA;AAAA,QAAA,oBAGfN,mBAAiC,QAAA;AAAA;UAApB,WAAQ,SAAA;AAAA,QAAA;;;;;;"}