npm - @nextcloud/vue - Versions diffs - 8.25.1 → 8.26.1 - Mend

@nextcloud/vue 8.25.1 → 8.26.1

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

Files changed (258) hide show

package/dist/chunks/{NcHeaderMenu-Bc1ucNsv.mjs.map → NcHeaderMenu-Dj7jeq88.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcHeaderMenu-Bc1ucNsv.mjs","sources":["../../src/components/NcHeaderMenu/NcHeaderMenu.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used in the Nextcloud top header.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderMenu id=\"search\"\n\t\t\taria-label=\"Search\">\n\t\t\t<template #trigger>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t\t<div>\n\t\t\t\t<NcTextField label=\"Search for files, comments, contacts…\"\n\t\t\t\tstyle=\"padding-inline: 8px;\"\n\t\t\t\ttype=\"search\"\n\t\t\t\t:value.sync=\"query\" />\n\t\t\t\t<NcEmptyContent\n\t\t\t\t\tname=\"Search\"\n\t\t\t\t\t:description=\"query ? `No results for '${query}'` : 'Start typing to search'\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Magnify />\n\t\t\t\t\t</template>\n\t\t\t\t</NcEmptyContent>\n\t\t\t</div>\n\t\t</NcHeaderMenu>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tquery: '',\n\t\t}\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n\theight: var(--header-height, 50px);\n\tpadding-inline-end: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<component :is=\"wrapperTag\"\n\t\t:id=\"id\"\n\t\tref=\"headerMenu\"\n\t\tv-click-outside=\"clickOutsideConfig\"\n\t\t:aria-labelledby=\"isNav ? triggerId : null\"\n\t\t:class=\"{ 'header-menu--opened': opened }\"\n\t\tclass=\"header-menu\"\n\t\tv-on=\"listeners\">\n\t\t<!-- Trigger -->\n\t\t<NcButton :id=\"isNav ? triggerId : null\"\n\t\t\tref=\"trigger\"\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\t:aria-controls=\"`header-menu-${id}`\"\n\t\t\t:aria-describedby=\"description ? descriptionId : null\"\n\t\t\t:aria-expanded=\"opened.toString()\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\tsize=\"large\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click.prevent=\"toggleMenu\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Icon trigger slot. Make sure the svg path\n\t\t\t\tis at least 16px. Usually mdi icon works at 20px -->\n\t\t\t\t<slot name=\"trigger\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span v-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\n\t\t<!-- Visual triangle -->\n\t\t<div v-show=\"opened\" class=\"header-menu__carret\" />\n\n\t\t<!-- Menu opened content -->\n\t\t<div v-show=\"opened\"\n\t\t\t:id=\"`header-menu-${id}`\"\n\t\t\tclass=\"header-menu__wrapper\">\n\t\t\t<div ref=\"content\" class=\"header-menu__content\">\n\t\t\t\t<!-- @slot Main content -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport { createFocusTrap } from 'focus-trap'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { clickOutsideOptions } from '../../mixins/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\n\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcHeaderMenu',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\n\tmixins: [\n\t\tclickOutsideOptions,\n\t],\n\n\tprops: {\n\t\t/*\n\t\t Unique id for this menu\n\t\t /\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/\n\t\t aria-label attribute of the menu open button\n\t\t /\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Current menu open state\n\t\t /\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Pass `true` if the header menu is used for website navigation\n\t\t \n\t\t The wrapper tag will be set to `nav` and its `aria-labelledby`\n\t\t * will be associated with the menu open button\n\t\t /\n\t\tisNav: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Additional visually hidden description text for the menu\n\t\t * open button\n\t\t /\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'close',\n\t\t'closed',\n\t\t'open',\n\t\t'opened',\n\t\t'update:open',\n\t\t'cancel',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tfocusTrap: null,\n\t\t\topened: this.open,\n\t\t\tshortcutsDisabled: window.OCP?.Accessibility?.disableKeyboardShortcuts?.(),\n\t\t\ttriggerId: GenRandomId(),\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\twrapperTag() {\n\t\t\treturn this.isNav ? 'nav' : 'div'\n\t\t},\n\n\t\tclickOutsideConfig() {\n\t\t\treturn [\n\t\t\t\tthis.closeMenu,\n\t\t\t\tthis.clickOutsideOptions,\n\t\t\t]\n\t\t},\n\n\t\tlisteners() {\n\t\t\tif (this.isNav) {\n\t\t\t\treturn {\n\t\t\t\t\tfocusout: this.onFocusOut,\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(open) {\n\t\t\tif (open) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tdocument.addEventListener('keydown', this.onKeyDown)\n\t},\n\tbeforeDestroy() {\n\t\tdocument.removeEventListener('keydown', this.onKeyDown)\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Toggle the current menu open state\n\t\t /\n\t\ttoggleMenu() {\n\t\t\t// Toggling current state\n\t\t\tif (!this.opened) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Close the current menu\n\t\t \n\t\t @param {boolean} cancelled emit a cancel event instead of close\n\t\t /\n\t\tcloseMenu(cancelled = false) {\n\t\t\t// Close the menu\n\t\t\tthis.opened = false\n\t\t\tthis.$emit(cancelled ? 'cancel' : 'close')\n\t\t\tthis.$emit('update:open', false)\n\n\t\t\t// Kill focus trap\n\t\t\tthis.clearFocusTrap()\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$emit('closed')\n\t\t\t})\n\t\t},\n\n\t\t/\n\t\t Open the current menu\n\t\t /\n\t\topenMenu() {\n\t\t\t// Open the menu\n\t\t\tthis.opened = true\n\t\t\tthis.$emit('open')\n\t\t\tthis.$emit('update:open', true)\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.useFocusTrap()\n\t\t\t\tthis.$emit('opened')\n\t\t\t})\n\t\t},\n\n\t\tonKeyDown(event) {\n\t\t\tif (this.shortcutsDisabled \|\| !this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If escape have been pressed, we close\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tevent.preventDefault()\n\n\t\t\t\t/* User cancelled the menu by pressing escape /\n\t\t\t\tthis.closeMenu(true)\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t @param {FocusEvent} event The focus event\n\t\t /\n\t\tonFocusOut(event) {\n\t\t\tif (!this.$refs.headerMenu.contains(event.relatedTarget)) {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Add focus trap for accessibility.\n\t\t * Shall only be used when all children are mounted\n\t\t * and available in the DOM. We use $nextTick for that.\n\t\t /\n\t\tasync useFocusTrap() {\n\t\t\tif (this.isNav \|\| this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Init focus trap\n\t\t\tconst contentContainer = this.$refs.content\n\t\t\tthis.focusTrap = createFocusTrap(contentContainer, {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tfallbackFocus: this.$refs.trigger.$el,\n\t\t\t})\n\t\t\tthis.focusTrap.activate()\n\t\t},\n\t\tclearFocusTrap() {\n\t\t\tthis.focusTrap?.deactivate()\n\t\t\tthis.focusTrap = null\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// content inner and outer margin\n// Also used for menu top-right positioning\n$externalMargin: 8px;\n\n@import './header-menu__trigger';\n\n.header-menu {\n\t&__wrapper {\n\t\tposition: fixed;\n\t\tz-index: 2000;\n\t\ttop: var(--header-height);\n\t\tinset-inline-end: 0;\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $externalMargin;\n\t\tborder-radius: 0 0 var(--border-radius) var(--border-radius);\n\t\tborder-radius: var(--border-radius-large);\n\t\tbackground-color: var(--color-main-background);\n\n\t\tfilter: drop-shadow(0 1px 5px var(--color-box-shadow));\n\t}\n\n\t&__carret {\n\t\tposition: absolute;\n\t\tz-index: 2001; // Because __wrapper is 2000.\n\t\tbottom: 0;\n\t\tinset-inline-start: calc(50% - 10px);\n\t\twidth: 0;\n\t\theight: 0;\n\t\tcontent: ' ';\n\t\tpointer-events: none;\n\t\tborder: 10px solid transparent;\n\t\tborder-bottom-color: var(--color-main-background);\n\t}\n\n\t&__content {\n\t\toverflow: auto;\n\t\twidth: 350px;\n\t\tmax-width: calc(100vw - 2 $externalMargin);\n\t\tmin-height: calc(var(--default-clickable-area) * 1.5);\n\t\tmax-height: calc(100vh - var(--header-height) * 2);\n\t\t:deep(.empty-content) {\n\t\t\tmargin: 12vh 10px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["ClickOutside"],"mappings":"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"}
1	+ {"version":3,"file":"NcHeaderMenu-Dj7jeq88.mjs","sources":["../../src/components/NcHeaderMenu/NcHeaderMenu.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used in the Nextcloud top header.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderMenu id=\"search\"\n\t\t\taria-label=\"Search\">\n\t\t\t<template #trigger>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t\t<div>\n\t\t\t\t<NcTextField label=\"Search for files, comments, contacts…\"\n\t\t\t\tstyle=\"padding-inline: 8px;\"\n\t\t\t\ttype=\"search\"\n\t\t\t\t:value.sync=\"query\" />\n\t\t\t\t<NcEmptyContent\n\t\t\t\t\tname=\"Search\"\n\t\t\t\t\t:description=\"query ? `No results for '${query}'` : 'Start typing to search'\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Magnify />\n\t\t\t\t\t</template>\n\t\t\t\t</NcEmptyContent>\n\t\t\t</div>\n\t\t</NcHeaderMenu>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tquery: '',\n\t\t}\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n\theight: var(--header-height, 50px);\n\tpadding-inline-end: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<component :is=\"wrapperTag\"\n\t\t:id=\"id\"\n\t\tref=\"headerMenu\"\n\t\tv-click-outside=\"clickOutsideConfig\"\n\t\t:aria-labelledby=\"isNav ? triggerId : null\"\n\t\t:class=\"{ 'header-menu--opened': opened }\"\n\t\tclass=\"header-menu\"\n\t\tv-on=\"listeners\">\n\t\t<!-- Trigger -->\n\t\t<NcButton :id=\"isNav ? triggerId : null\"\n\t\t\tref=\"trigger\"\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\t:aria-controls=\"`header-menu-${id}`\"\n\t\t\t:aria-describedby=\"description ? descriptionId : null\"\n\t\t\t:aria-expanded=\"opened.toString()\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\tsize=\"large\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click.prevent=\"toggleMenu\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Icon trigger slot. Make sure the svg path\n\t\t\t\tis at least 16px. Usually mdi icon works at 20px -->\n\t\t\t\t<slot name=\"trigger\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span v-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\n\t\t<!-- Visual triangle -->\n\t\t<div v-show=\"opened\" class=\"header-menu__carret\" />\n\n\t\t<!-- Menu opened content -->\n\t\t<div v-show=\"opened\"\n\t\t\t:id=\"`header-menu-${id}`\"\n\t\t\tclass=\"header-menu__wrapper\">\n\t\t\t<div ref=\"content\" class=\"header-menu__content\">\n\t\t\t\t<!-- @slot Main content -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport { createFocusTrap } from 'focus-trap'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { clickOutsideOptions } from '../../mixins/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\n\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcHeaderMenu',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\n\tmixins: [\n\t\tclickOutsideOptions,\n\t],\n\n\tprops: {\n\t\t/*\n\t\t Unique id for this menu\n\t\t /\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/\n\t\t aria-label attribute of the menu open button\n\t\t /\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Current menu open state\n\t\t /\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Pass `true` if the header menu is used for website navigation\n\t\t \n\t\t The wrapper tag will be set to `nav` and its `aria-labelledby`\n\t\t * will be associated with the menu open button\n\t\t /\n\t\tisNav: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Additional visually hidden description text for the menu\n\t\t * open button\n\t\t /\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'close',\n\t\t'closed',\n\t\t'open',\n\t\t'opened',\n\t\t'update:open',\n\t\t'cancel',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tfocusTrap: null,\n\t\t\topened: this.open,\n\t\t\tshortcutsDisabled: window.OCP?.Accessibility?.disableKeyboardShortcuts?.(),\n\t\t\ttriggerId: GenRandomId(),\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\twrapperTag() {\n\t\t\treturn this.isNav ? 'nav' : 'div'\n\t\t},\n\n\t\tclickOutsideConfig() {\n\t\t\treturn [\n\t\t\t\tthis.closeMenu,\n\t\t\t\tthis.clickOutsideOptions,\n\t\t\t]\n\t\t},\n\n\t\tlisteners() {\n\t\t\tif (this.isNav) {\n\t\t\t\treturn {\n\t\t\t\t\tfocusout: this.onFocusOut,\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(open) {\n\t\t\tif (open) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tdocument.addEventListener('keydown', this.onKeyDown)\n\t},\n\tbeforeDestroy() {\n\t\tdocument.removeEventListener('keydown', this.onKeyDown)\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Toggle the current menu open state\n\t\t /\n\t\ttoggleMenu() {\n\t\t\t// Toggling current state\n\t\t\tif (!this.opened) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Close the current menu\n\t\t \n\t\t @param {boolean} cancelled emit a cancel event instead of close\n\t\t /\n\t\tcloseMenu(cancelled = false) {\n\t\t\t// Close the menu\n\t\t\tthis.opened = false\n\t\t\tthis.$emit(cancelled ? 'cancel' : 'close')\n\t\t\tthis.$emit('update:open', false)\n\n\t\t\t// Kill focus trap\n\t\t\tthis.clearFocusTrap()\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$emit('closed')\n\t\t\t})\n\t\t},\n\n\t\t/\n\t\t Open the current menu\n\t\t /\n\t\topenMenu() {\n\t\t\t// Open the menu\n\t\t\tthis.opened = true\n\t\t\tthis.$emit('open')\n\t\t\tthis.$emit('update:open', true)\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.useFocusTrap()\n\t\t\t\tthis.$emit('opened')\n\t\t\t})\n\t\t},\n\n\t\tonKeyDown(event) {\n\t\t\tif (this.shortcutsDisabled \|\| !this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If escape have been pressed, we close\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tevent.preventDefault()\n\n\t\t\t\t/* User cancelled the menu by pressing escape /\n\t\t\t\tthis.closeMenu(true)\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t @param {FocusEvent} event The focus event\n\t\t /\n\t\tonFocusOut(event) {\n\t\t\tif (!this.$refs.headerMenu.contains(event.relatedTarget)) {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Add focus trap for accessibility.\n\t\t * Shall only be used when all children are mounted\n\t\t * and available in the DOM. We use $nextTick for that.\n\t\t /\n\t\tasync useFocusTrap() {\n\t\t\tif (this.isNav \|\| this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Init focus trap\n\t\t\tconst contentContainer = this.$refs.content\n\t\t\tthis.focusTrap = createFocusTrap(contentContainer, {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tfallbackFocus: this.$refs.trigger.$el,\n\t\t\t})\n\t\t\tthis.focusTrap.activate()\n\t\t},\n\t\tclearFocusTrap() {\n\t\t\tthis.focusTrap?.deactivate()\n\t\t\tthis.focusTrap = null\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// content inner and outer margin\n// Also used for menu top-right positioning\n$externalMargin: 8px;\n\n@import './header-menu__trigger';\n\n.header-menu {\n\t&__wrapper {\n\t\tposition: fixed;\n\t\tz-index: 2000;\n\t\ttop: var(--header-height);\n\t\tinset-inline-end: 0;\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $externalMargin;\n\t\tborder-radius: 0 0 var(--border-radius) var(--border-radius);\n\t\tborder-radius: var(--border-radius-large);\n\t\tbackground-color: var(--color-main-background);\n\n\t\tfilter: drop-shadow(0 1px 5px var(--color-box-shadow));\n\t}\n\n\t&__carret {\n\t\tposition: absolute;\n\t\tz-index: 2001; // Because __wrapper is 2000.\n\t\tbottom: 0;\n\t\tinset-inline-start: calc(50% - 10px);\n\t\twidth: 0;\n\t\theight: 0;\n\t\tcontent: ' ';\n\t\tpointer-events: none;\n\t\tborder: 10px solid transparent;\n\t\tborder-bottom-color: var(--color-main-background);\n\t}\n\n\t&__content {\n\t\toverflow: auto;\n\t\twidth: 350px;\n\t\tmax-width: calc(100vw - 2 $externalMargin);\n\t\tmin-height: calc(var(--default-clickable-area) * 1.5);\n\t\tmax-height: calc(100vh - var(--header-height) * 2);\n\t\t:deep(.empty-content) {\n\t\t\tmargin: 12vh 10px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["ClickOutside"],"mappings":"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"}

package/dist/chunks/{NcIconSvgWrapper-RKuZn260.mjs → NcIconSvgWrapper-Cb-cPj1R.mjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-import '../assets/NcIconSvgWrapper-BiNW6Guv.css';
+import '../assets/NcIconSvgWrapper-DX_XWpAs.css';
 import Vue, { useCssVars } from "vue";
 import DOMPurify from "dompurify";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
@@ -79,7 +79,7 @@ const __default__ = {
 };
 const __injectCSSVars__ = () => {
   useCssVars((_vm, _setup) => ({
-    "298f3b4f": _vm.iconSize
+    "adec40c8": _vm.iconSize
   }));
 };
 const __setup__ = __default__.setup;
@@ -102,10 +102,10 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "fc16f43b"
+  "a4f5b92e"
 );
 const NcIconSvgWrapper = __component__.exports;
 export {
   NcIconSvgWrapper as N
 };
-//# sourceMappingURL=NcIconSvgWrapper-RKuZn260.mjs.map
+//# sourceMappingURL=NcIconSvgWrapper-Cb-cPj1R.mjs.map

package/dist/chunks/{NcIconSvgWrapper-BlucK1g3.cjs.map → NcIconSvgWrapper-Cb-cPj1R.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcIconSvgWrapper-~~BlucK1g3~~.~~cjs~~","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<template>\n\t<span :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<script>\nimport Vue from 'vue'\nimport DOMPurify from 'dompurify'\n\nexport default {\n\tname: 'NcIconSvgWrapper',\n\n\tprops: {\n\t\t/*\n\t\t Make the icon directional, meaning it is langauge direction aware.\n\t\t * If the icon is placed in a right-to-left context it will be mirrored vertically.\n\t\t /\n\t\tdirectional: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Set if the icon should be used as inline content e.g. within text.\n\t\t * By default the icon is made a block element for use inside `icon`-slots.\n\t\t /\n\t\tinline: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Raw SVG string to render\n\t\t /\n\t\tsvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Label of the icon, used in aria-label\n\t\t /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.\n\t\t /\n\t\tpath: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Size of the icon to show. Only use if not using within an icon slot.\n\t\t * Defaults to 20px which is the Nextcloud icon size for all icon slots.\n\t\t * @default 20\n\t\t /\n\t\tsize: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: 20,\n\t\t\tvalidator: (value) => typeof value === 'number' \|\| value === 'auto',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t Icon size used in CSS\n\t\t */\n\t\ticonSize() {\n\t\t\treturn typeof this.size === 'number' ? `${this.size}px` : this.size\n\t\t},\n\n\t\tcleanSvg() {\n\t\t\tif (!this.svg \|\| this.path) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst svg = DOMPurify.sanitize(this.svg)\n\n\t\t\tconst svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml')\n\n\t\t\tif (svgDocument.querySelector('parsererror')) {\n\t\t\t\tVue.util.warn('SVG is not valid')\n\t\t\t\treturn ''\n\t\t\t}\n\n\t\t\tif (svgDocument.documentElement.id) {\n\t\t\t\tsvgDocument.documentElement.removeAttribute('id')\n\t\t\t}\n\n\t\t\treturn svgDocument.documentElement.outerHTML\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.icon-vue {\n\t--icon-size: v-bind('iconSize');\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;\n\t\tmin-width: fit-content;\n\t\tmin-height: fit-content;\n\t\tvertical-align: text-bottom;\n\t}\n\n\t&:deep(svg) {\n\t\tfill: currentColor;\n\t\twidth: var(--icon-size, 20px);\n\t\theight: var(--icon-size, 20px);\n\t\tmax-width: var(--icon-size, 20px);\n\t\tmax-height: var(--icon-size, 20px);\n\t}\n\n\t&--directional:deep(svg:dir(rtl)) {\n\t\ttransform: scaleX(-1);\n\t}\n}\n</style>\n"],"names":[~~"DOMPurify","Vue"~~],"mappings":"~~;;;;;;;~~AAqLA,MAAA,cAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,UAAA,YAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AACA,aAAA,OAAA,KAAA,SAAA,WAAA,GAAA,KAAA,IAAA,OAAA,KAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,UAAA,CAAA,KAAA,OAAA,KAAA,MAAA;AACA;AAAA,MACA;AAEA,YAAA,~~MAAAA~~,~~mBAAAA~~,~~QAAA,~~SAAA,KAAA,GAAA;AAEA,YAAA,cAAA,IAAA,UAAA,EAAA,gBAAA,KAAA,eAAA;AAEA,UAAA,YAAA,cAAA,aAAA,GAAA;~~AACAC~~,~~6BAAA~~,KAAA,KAAA,kBAAA;AACA,eAAA;AAAA,MACA;AAEA,UAAA,YAAA,gBAAA,IAAA;AACA,oBAAA,gBAAA,gBAAA,IAAA;AAAA,MACA;AAEA,aAAA,YAAA,gBAAA;AAAA,IACA;AAAA,EACA;AACA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"NcIconSvgWrapper-Cb-cPj1R.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<template>\n\t<span :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<script>\nimport Vue from 'vue'\nimport DOMPurify from 'dompurify'\n\nexport default {\n\tname: 'NcIconSvgWrapper',\n\n\tprops: {\n\t\t/*\n\t\t Make the icon directional, meaning it is langauge direction aware.\n\t\t * If the icon is placed in a right-to-left context it will be mirrored vertically.\n\t\t /\n\t\tdirectional: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Set if the icon should be used as inline content e.g. within text.\n\t\t * By default the icon is made a block element for use inside `icon`-slots.\n\t\t /\n\t\tinline: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Raw SVG string to render\n\t\t /\n\t\tsvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Label of the icon, used in aria-label\n\t\t /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.\n\t\t /\n\t\tpath: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Size of the icon to show. Only use if not using within an icon slot.\n\t\t * Defaults to 20px which is the Nextcloud icon size for all icon slots.\n\t\t * @default 20\n\t\t /\n\t\tsize: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: 20,\n\t\t\tvalidator: (value) => typeof value === 'number' \|\| value === 'auto',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t Icon size used in CSS\n\t\t */\n\t\ticonSize() {\n\t\t\treturn typeof this.size === 'number' ? `${this.size}px` : this.size\n\t\t},\n\n\t\tcleanSvg() {\n\t\t\tif (!this.svg \|\| this.path) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst svg = DOMPurify.sanitize(this.svg)\n\n\t\t\tconst svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml')\n\n\t\t\tif (svgDocument.querySelector('parsererror')) {\n\t\t\t\tVue.util.warn('SVG is not valid')\n\t\t\t\treturn ''\n\t\t\t}\n\n\t\t\tif (svgDocument.documentElement.id) {\n\t\t\t\tsvgDocument.documentElement.removeAttribute('id')\n\t\t\t}\n\n\t\t\treturn svgDocument.documentElement.outerHTML\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.icon-vue {\n\t--icon-size: v-bind('iconSize');\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;\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: var(--icon-size, 20px);\n\t\theight: var(--icon-size, 20px);\n\t\tmax-width: var(--icon-size, 20px);\n\t\tmax-height: var(--icon-size, 20px);\n\t}\n\n\t&--directional:deep(svg:dir(rtl)) {\n\t\ttransform: scaleX(-1);\n\t}\n}\n</style>\n"],"names":[],"mappings":";;;AAqLA,MAAA,cAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,UAAA,YAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AACA,aAAA,OAAA,KAAA,SAAA,WAAA,GAAA,KAAA,IAAA,OAAA,KAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,UAAA,CAAA,KAAA,OAAA,KAAA,MAAA;AACA;AAAA,MACA;AAEA,YAAA,MAAA,UAAA,SAAA,KAAA,GAAA;AAEA,YAAA,cAAA,IAAA,UAAA,EAAA,gBAAA,KAAA,eAAA;AAEA,UAAA,YAAA,cAAA,aAAA,GAAA;AACA,YAAA,KAAA,KAAA,kBAAA;AACA,eAAA;AAAA,MACA;AAEA,UAAA,YAAA,gBAAA,IAAA;AACA,oBAAA,gBAAA,gBAAA,IAAA;AAAA,MACA;AAEA,aAAA,YAAA,gBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcIconSvgWrapper-BlucK1g3.cjs → NcIconSvgWrapper-CrnN5Sq5.cjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-require('../assets/NcIconSvgWrapper-BiNW6Guv.css');
+require('../assets/NcIconSvgWrapper-DX_XWpAs.css');
 "use strict";
 const Vue = require("vue");
 const DOMPurify = require("dompurify");
@@ -83,7 +83,7 @@ const __default__ = {
 };
 const __injectCSSVars__ = () => {
   Vue.useCssVars((_vm, _setup) => ({
-    "298f3b4f": _vm.iconSize
+    "adec40c8": _vm.iconSize
   }));
 };
 const __setup__ = __default__.setup;
@@ -106,8 +106,8 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "fc16f43b"
+  "a4f5b92e"
 );
 const NcIconSvgWrapper = __component__.exports;
 exports.NcIconSvgWrapper = NcIconSvgWrapper;
-//# sourceMappingURL=NcIconSvgWrapper-BlucK1g3.cjs.map
+//# sourceMappingURL=NcIconSvgWrapper-CrnN5Sq5.cjs.map

package/dist/chunks/{NcIconSvgWrapper-RKuZn260.mjs.map → NcIconSvgWrapper-CrnN5Sq5.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcIconSvgWrapper-~~RKuZn260~~.~~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<template>\n\t<span :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<script>\nimport Vue from 'vue'\nimport DOMPurify from 'dompurify'\n\nexport default {\n\tname: 'NcIconSvgWrapper',\n\n\tprops: {\n\t\t/*\n\t\t Make the icon directional, meaning it is langauge direction aware.\n\t\t * If the icon is placed in a right-to-left context it will be mirrored vertically.\n\t\t /\n\t\tdirectional: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Set if the icon should be used as inline content e.g. within text.\n\t\t * By default the icon is made a block element for use inside `icon`-slots.\n\t\t /\n\t\tinline: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Raw SVG string to render\n\t\t /\n\t\tsvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Label of the icon, used in aria-label\n\t\t /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.\n\t\t /\n\t\tpath: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Size of the icon to show. Only use if not using within an icon slot.\n\t\t * Defaults to 20px which is the Nextcloud icon size for all icon slots.\n\t\t * @default 20\n\t\t /\n\t\tsize: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: 20,\n\t\t\tvalidator: (value) => typeof value === 'number' \|\| value === 'auto',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t Icon size used in CSS\n\t\t */\n\t\ticonSize() {\n\t\t\treturn typeof this.size === 'number' ? `${this.size}px` : this.size\n\t\t},\n\n\t\tcleanSvg() {\n\t\t\tif (!this.svg \|\| this.path) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst svg = DOMPurify.sanitize(this.svg)\n\n\t\t\tconst svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml')\n\n\t\t\tif (svgDocument.querySelector('parsererror')) {\n\t\t\t\tVue.util.warn('SVG is not valid')\n\t\t\t\treturn ''\n\t\t\t}\n\n\t\t\tif (svgDocument.documentElement.id) {\n\t\t\t\tsvgDocument.documentElement.removeAttribute('id')\n\t\t\t}\n\n\t\t\treturn svgDocument.documentElement.outerHTML\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.icon-vue {\n\t--icon-size: v-bind('iconSize');\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;\n\t\tmin-width: fit-content;\n\t\tmin-height: fit-content;\n\t\tvertical-align: text-bottom;\n\t}\n\n\t&:deep(svg) {\n\t\tfill: currentColor;\n\t\twidth: var(--icon-size, 20px);\n\t\theight: var(--icon-size, 20px);\n\t\tmax-width: var(--icon-size, 20px);\n\t\tmax-height: var(--icon-size, 20px);\n\t}\n\n\t&--directional:deep(svg:dir(rtl)) {\n\t\ttransform: scaleX(-1);\n\t}\n}\n</style>\n"],"names":[],"mappings":"~~;;;~~AAqLA,MAAA,cAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,UAAA,YAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AACA,aAAA,OAAA,KAAA,SAAA,WAAA,GAAA,KAAA,IAAA,OAAA,KAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,UAAA,CAAA,KAAA,OAAA,KAAA,MAAA;AACA;AAAA,MACA;AAEA,YAAA,~~MAAA~~,~~UAAA~~,SAAA,KAAA,GAAA;AAEA,YAAA,cAAA,IAAA,UAAA,EAAA,gBAAA,KAAA,eAAA;AAEA,UAAA,YAAA,cAAA,aAAA,GAAA;~~AACA~~,~~YAAA~~,KAAA,KAAA,kBAAA;AACA,eAAA;AAAA,MACA;AAEA,UAAA,YAAA,gBAAA,IAAA;AACA,oBAAA,gBAAA,gBAAA,IAAA;AAAA,MACA;AAEA,aAAA,YAAA,gBAAA;AAAA,IACA;AAAA,EACA;AACA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"NcIconSvgWrapper-CrnN5Sq5.cjs","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<template>\n\t<span :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<script>\nimport Vue from 'vue'\nimport DOMPurify from 'dompurify'\n\nexport default {\n\tname: 'NcIconSvgWrapper',\n\n\tprops: {\n\t\t/*\n\t\t Make the icon directional, meaning it is langauge direction aware.\n\t\t * If the icon is placed in a right-to-left context it will be mirrored vertically.\n\t\t /\n\t\tdirectional: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Set if the icon should be used as inline content e.g. within text.\n\t\t * By default the icon is made a block element for use inside `icon`-slots.\n\t\t /\n\t\tinline: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Raw SVG string to render\n\t\t /\n\t\tsvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Label of the icon, used in aria-label\n\t\t /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.\n\t\t /\n\t\tpath: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Size of the icon to show. Only use if not using within an icon slot.\n\t\t * Defaults to 20px which is the Nextcloud icon size for all icon slots.\n\t\t * @default 20\n\t\t /\n\t\tsize: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: 20,\n\t\t\tvalidator: (value) => typeof value === 'number' \|\| value === 'auto',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t Icon size used in CSS\n\t\t */\n\t\ticonSize() {\n\t\t\treturn typeof this.size === 'number' ? `${this.size}px` : this.size\n\t\t},\n\n\t\tcleanSvg() {\n\t\t\tif (!this.svg \|\| this.path) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst svg = DOMPurify.sanitize(this.svg)\n\n\t\t\tconst svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml')\n\n\t\t\tif (svgDocument.querySelector('parsererror')) {\n\t\t\t\tVue.util.warn('SVG is not valid')\n\t\t\t\treturn ''\n\t\t\t}\n\n\t\t\tif (svgDocument.documentElement.id) {\n\t\t\t\tsvgDocument.documentElement.removeAttribute('id')\n\t\t\t}\n\n\t\t\treturn svgDocument.documentElement.outerHTML\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.icon-vue {\n\t--icon-size: v-bind('iconSize');\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;\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: var(--icon-size, 20px);\n\t\theight: var(--icon-size, 20px);\n\t\tmax-width: var(--icon-size, 20px);\n\t\tmax-height: var(--icon-size, 20px);\n\t}\n\n\t&--directional:deep(svg:dir(rtl)) {\n\t\ttransform: scaleX(-1);\n\t}\n}\n</style>\n"],"names":["DOMPurify","Vue"],"mappings":";;;;;;;AAqLA,MAAA,cAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,UAAA,YAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AACA,aAAA,OAAA,KAAA,SAAA,WAAA,GAAA,KAAA,IAAA,OAAA,KAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,UAAA,CAAA,KAAA,OAAA,KAAA,MAAA;AACA;AAAA,MACA;AAEA,YAAA,MAAAA,mBAAAA,QAAA,SAAA,KAAA,GAAA;AAEA,YAAA,cAAA,IAAA,UAAA,EAAA,gBAAA,KAAA,eAAA;AAEA,UAAA,YAAA,cAAA,aAAA,GAAA;AACAC,6BAAA,KAAA,KAAA,kBAAA;AACA,eAAA;AAAA,MACA;AAEA,UAAA,YAAA,gBAAA,IAAA;AACA,oBAAA,gBAAA,gBAAA,IAAA;AAAA,MACA;AAEA,aAAA,YAAA,gBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcListItem-B1cSkFFh.cjs → NcListItem-BVNMtN9D.cjs} RENAMED Viewed

@@ -1,6 +1,6 @@
 require('../assets/NcListItem-DfaWGP5A.css');
 "use strict";
-const NcActions = require("./NcActions-DEXtGQeq.cjs");
+const NcActions = require("./NcActions-B7DbEbCo.cjs");
 const NcCounterBubble = require("./NcCounterBubble-BRrUO34D.cjs");
 const Components_NcVNodes = require("../Components/NcVNodes.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
@@ -282,4 +282,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcListItem = __component__.exports;
 exports.NcListItem = NcListItem;
-//# sourceMappingURL=NcListItem-B1cSkFFh.cjs.map
+//# sourceMappingURL=NcListItem-BVNMtN9D.cjs.map

package/dist/chunks/{NcListItem-B1cSkFFh.cjs.map → NcListItem-BVNMtN9D.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcListItem-B1cSkFFh.cjs","sources":["../../src/components/NcListItem/NcListItem.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### Default Usage\n\n```vue\n<template>\n\t<ul>\n\t\t<NcListItem active\n\t\t\tbold\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"highlighted\"\n\t\t\tdetails=\"1h\"\n\t\t\tname=\"This is an active element with highlighted counter\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with outlined counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with normal counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"123\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with highlighted counter\"\n\t\t\tbold\n\t\t\t:force-display-actions=\"true\"\n\t\t\tdetails=\"1h\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"highlighted\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with outlined counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with normal counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\tdetails=\"1h\"\n\t\t\t:counter-number=\"123\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element\"\n\t\t\t:bold=\"false\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #name>\n\t\t\t\t<span style=\"display: flex; gap: 0.5rem; color: var(--color-warning);\">\n\t\t\t\t\tFlexible styling within the first line of the component\n\t\t\t\t\t<div style=\"color: var(--color-error);\">\n\t\t\t\t\t\tlike this.\n\t\t\t\t\t</div>\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Without subname, Name of the element\"\n\t\t\t:bold=\"false\"\n\t\t\tdetails=\"1h\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n\n<script>\n\timport CheckboxBlankCircle from 'vue-material-design-icons/CheckboxBlankCircle'\n\timport LinkIcon from 'vue-material-design-icons/Link'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheckboxBlankCircle,\n\t\t\tLinkIcon,\n\t\t}\n\t}\n</script>\n\n```\n\n### NcListItem one line mode\n```vue\n<NcListItem active\n\t:bold=\"false\"\n\t:counter-number=\"123\"\n\tcounterType=\"highlighted\"\n\tdetails=\"1h\"\n\tname=\"This is an active element with highlighted counter\"\n\tone-line>\n\t<template #icon>\n\t\t<NcAvatar disable-menu :size=\"34\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t</template>\n\t<template #subname>\n\t\tIn this slot you can put both text and other components such as icons\n\t</template>\n\t<template #indicator>\n\t\t<!-- Color dot -->\n\t\t<CheckboxBlankCircle :size=\"20\" fill-color=\"#fff\" />\n\t</template>\n\t<template #actions>\n\t\t<NcActionButton>\n\t\t\tButton one\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\tButton two\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\tButton three\n\t\t</NcActionButton>\n\t</template>\n</NcListItem>\n```\n### NcListItem with extra actions slot and customized icon\n\nThe `extra-actions` slot can be used to add other interactive components.\n\nThe `actions-icon` slot can be used to pass icon to the inner NcActions component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with extra actions slot\"\n\t\t\tbold\n\t\t\t:active=\"true\"\n\t\t\t:force-display-actions=\"true\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #extra-actions>\n\t\t\t\t<NcButton variant=\"primary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCog :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #actions-icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an element with extra actions slot\"\n\t\t\tbold>\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #extra-actions>\n\t\t\t\t<NcButton variant=\"tertiary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconPencil :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton variant=\"tertiary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCog :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #actions-icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t</div>\n</template>\n<script>\n\timport IconCog from 'vue-material-design-icons/Cog.vue'\n\timport IconNoteText from 'vue-material-design-icons/NoteText.vue'\n\timport IconPencil from 'vue-material-design-icons/Pencil.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconCog,\n\t\t\tIconNoteText,\n\t\t\tIconPencil,\n\t\t},\n\t}\n</script>\n```\n### NcListItem compact mode\n```vue\n<template>\n\t<ul style=\"width: 350px;\">\n\t\t<NcListItem active\n\t\t\tcompact\n\t\t\tname=\"Active item\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"1\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"3\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"4\"\n\t\t\thref=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with an external link\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n<script>\n\timport IconNoteText from 'vue-material-design-icons/NoteText.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconNoteText,\n\t\t},\n\t}\n</script>\n```\n</docs>\n\n<template>\n\t<!-- This wrapper can be either a router link or a `<li>` -->\n\t<component :is=\"to ? 'router-link' : 'NcVNodes'\"\n\t\tv-slot=\"{ href: routerLinkHref, navigate, isActive }\"\n\t\t:custom=\"to ? true : null\"\n\t\t:to=\"to\"\n\t\t:exact=\"to ? exact : null\">\n\t\t<li class=\"list-item__wrapper\"\n\t\t\t:class=\"{ 'list-item__wrapper--active' : isActive \|\| active }\">\n\t\t\t<div ref=\"list-item\"\n\t\t\t\tclass=\"list-item\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'list-item--compact': compact,\n\t\t\t\t\t'list-item--legacy': isLegacy,\n\t\t\t\t\t'list-item--one-line': oneLine,\n\t\t\t\t}\"\n\t\t\t\t@mouseover=\"handleMouseover\"\n\t\t\t\t@mouseleave=\"handleMouseleave\">\n\t\t\t\t<a :id=\"anchorId \|\| undefined\"\n\t\t\t\t\t:aria-label=\"linkAriaLabel\"\n\t\t\t\t\tclass=\"list-item__anchor\"\n\t\t\t\t\t:href=\"routerLinkHref \|\| href\"\n\t\t\t\t\t:target=\"target \|\| (href === '#' ? undefined : '_blank')\"\n\t\t\t\t\t:rel=\"href === '#' ? undefined : 'noopener noreferrer'\"\n\t\t\t\t\t@focus=\"showActions\"\n\t\t\t\t\t@focusout=\"handleBlur\"\n\t\t\t\t\t@click=\"onClick($event, navigate, routerLinkHref)\"\n\t\t\t\t\t@keydown.esc=\"hideActions\">\n\t\t\t\t\t<!-- @slot This slot is used for the NcAvatar or icon, the content of this slot must not be interactive -->\n\t\t\t\t\t<slot name=\"icon\" />\n\n\t\t\t\t\t<!-- Main content -->\n\t\t\t\t\t<div class=\"list-item-content\">\n\t\t\t\t\t\t<div class=\"list-item-content__main\">\n\t\t\t\t\t\t\t<div class=\"list-item-content__name\">\n\t\t\t\t\t\t\t\t<!-- @slot Slot for the first line of the component. prop 'name' is used as a fallback is no slots are provided -->\n\t\t\t\t\t\t\t\t<slot name=\"name\">{{ name }}</slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div v-if=\"hasSubname\"\n\t\t\t\t\t\t\t\tclass=\"list-item-content__subname\"\n\t\t\t\t\t\t\t\t:class=\"{'list-item-content__subname--bold': bold}\">\n\t\t\t\t\t\t\t\t<!-- @slot Slot for the second line of the component -->\n\t\t\t\t\t\t\t\t<slot name=\"subname\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"list-item-content__details\">\n\t\t\t\t\t\t\t<div v-if=\"showDetails\" class=\"list-item-details__details\">\n\t\t\t\t\t\t\t\t<!-- @slot This slot is used for some details in form of icon (prop `details` as a fallback) -->\n\t\t\t\t\t\t\t\t<slot name=\"details\">{{ details }}</slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<!-- Counter and indicator -->\n\t\t\t\t\t\t\t<div v-if=\"counterNumber \|\| hasIndicator\"\n\t\t\t\t\t\t\t\tv-show=\"showAdditionalElements\"\n\t\t\t\t\t\t\t\tclass=\"list-item-details__extra\">\n\t\t\t\t\t\t\t\t<NcCounterBubble v-if=\"counterNumber\"\n\t\t\t\t\t\t\t\t\t:active=\"isActive \|\| active\"\n\t\t\t\t\t\t\t\t\tclass=\"list-item-details__counter\"\n\t\t\t\t\t\t\t\t\t:type=\"counterType\">\n\t\t\t\t\t\t\t\t\t{{ counterNumber }}\n\t\t\t\t\t\t\t\t</NcCounterBubble>\n\n\t\t\t\t\t\t\t\t<span v-if=\"hasIndicator\" class=\"list-item-details__indicator\">\n\t\t\t\t\t\t\t\t\t<!-- @slot This slot is used for some indicator in form of icon -->\n\t\t\t\t\t\t\t\t\t<slot name=\"indicator\" />\n\t\t\t\t\t\t\t\t</span>\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</a>\n\n\t\t\t\t<div v-if=\"$slots['extra-actions']\" class=\"list-item-content__extra-actions\">\n\t\t\t\t\t<!-- @slot Extra elements next to the right side quick menu -->\n\t\t\t\t\t<slot name=\"extra-actions\" />\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Actions -->\n\t\t\t\t<div v-show=\"forceDisplayActions \|\| displayActionsOnHoverFocus\"\n\t\t\t\t\tclass=\"list-item-content__actions\"\n\t\t\t\t\t@focusout=\"handleBlur\">\n\t\t\t\t\t<NcActions ref=\"actions\"\n\t\t\t\t\t\t:primary=\"isActive \|\| active\"\n\t\t\t\t\t\t:force-menu=\"forceMenu\"\n\t\t\t\t\t\t:aria-label=\"actionsAriaLabel\"\n\t\t\t\t\t\t@update:open=\"handleActionsUpdateOpen\">\n\t\t\t\t\t\t<template v-if=\"$slots['actions-icon']\" #icon>\n\t\t\t\t\t\t\t<!-- @slot Provide the custom icon for the right side quick menu -->\n\t\t\t\t\t\t\t<slot name=\"actions-icon\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<!-- @slot Provide the actions for the right side quick menu -->\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\n\t\t\t\t<div v-if=\"$slots.extra\" class=\"list-item__extra\">\n\t\t\t\t\t<!-- @slot Extra elements below the item -->\n\t\t\t\t\t<slot name=\"extra\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</li>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcCounterBubble from '../NcCounterBubble/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\n\nexport default {\n\tname: 'NcListItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcCounterBubble,\n\t\tNcVNodes,\n\t},\n\n\tprops: {\n\t\t/*\n\t\t The details text displayed in the upper right part of the component\n\t\t /\n\t\tdetails: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Name (first line of text)\n\t\t /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Pass in `true` if you want the matching behavior to\n\t\t * be non-inclusive: https://router.vuejs.org/api/#exact\n\t\t /\n\t\texact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The route for the router link.\n\t\t /\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t The value for the external link\n\t\t /\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: '#',\n\t\t},\n\n\t\ttarget: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Id for the `<a>` element\n\t\t /\n\t\tanchorId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Make subname bold\n\t\t /\n\t\tbold: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Show the NcListItem in compact design\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 Toggle the active state of the component\n\t\t /\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Aria label for the wrapper element\n\t\t /\n\t\tlinkAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Aria label for the actions toggle\n\t\t /\n\t\tactionsAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t If different from 0 this component will display the\n\t\t * NcCounterBubble component\n\t\t /\n\t\t counterNumber: {\n\t\t\t type: [Number, String],\n\t\t\t default: 0,\n\t\t },\n\n\t\t/\n\t\t Outlined or highlighted state of the counter\n\t\t /\n\t\tcounterType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['highlighted', 'outlined', ''].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/\n\t\t To be used only when the elements in the actions menu are very important\n\t\t /\n\t\tforceDisplayActions: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t 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 Show the list component layout\n\t\t /\n\t\toneLine: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'click',\n\t\t'update:menuOpen',\n\t],\n\n\tsetup() {\n\t\tconst [major] = window._oc_config?.version.split('.', 2) ?? []\n\t\tconst isLegacy = major && Number.parseInt(major) < 30\n\n\t\treturn {\n\t\t\tisLegacy,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t\thasActions: false,\n\t\t\thasSubname: false,\n\t\t\tdisplayActionsOnHoverFocus: false,\n\t\t\tmenuOpen: false,\n\t\t\thasIndicator: false,\n\t\t\thasDetails: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tshowAdditionalElements() {\n\t\t\treturn !this.displayActionsOnHoverFocus \|\| this.forceDisplayActions\n\t\t},\n\n\t\tshowDetails() {\n\t\t\treturn (this.details !== '' \|\| this.hasDetails)\n\t\t\t\t&& (!this.displayActionsOnHoverFocus \|\| this.forceDisplayActions)\n\t\t},\n\t},\n\n\twatch: {\n\n\t\tmenuOpen(newValue) {\n\t\t\t// A click outside both the menu and the root element hides the actions again\n\t\t\tif (!newValue && !this.hovered) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkSlots()\n\t},\n\n\tupdated() {\n\t\tthis.checkSlots()\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Handle link click\n\t\t \n\t\t @param {MouseEvent\|KeyboardEvent} event - Native click or keydown event\n\t\t * @param {Function} [navigate] - VueRouter link's navigate if any\n\t\t * @param {string} [routerLinkHref] - VueRouter link's href\n\t\t /\n\t\tonClick(event, navigate, routerLinkHref) {\n\t\t\t// Always forward native event\n\t\t\tthis.$emit('click', event)\n\t\t\t// Do not navigate with control keys - it is opening in a new tab\n\t\t\tif (event.metaKey \|\| event.altKey \|\| event.ctrlKey \|\| event.shiftKey) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Prevent default link behaviour if it's a router-link and navigate manually\n\t\t\tif (routerLinkHref) {\n\t\t\t\tnavigate?.(event)\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\tshowActions() {\n\t\t\tif (this.hasActions) {\n\t\t\t\tthis.displayActionsOnHoverFocus = true\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thideActions() {\n\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t},\n\n\t\t/\n\t\t @param {FocusEvent} event UI event\n\t\t /\n\t\thandleBlur(event) {\n\t\t\t// do not hide if open\n\t\t\tif (this.menuOpen) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// do not hide if focus is kept within\n\t\t\tif (this.$refs['list-item'].contains(event.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hideActions()\n\t\t},\n\n\t\t/\n\t\t Hide the actions on mouseleave unless the menu is open\n\t\t /\n\t\thandleMouseleave() {\n\t\t\tif (!this.menuOpen) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thandleMouseover() {\n\t\t\tthis.showActions()\n\t\t\tthis.hovered = true\n\t\t},\n\n\t\thandleActionsUpdateOpen(e) {\n\t\t\tthis.menuOpen = e\n\t\t\tthis.$emit('update:menuOpen', e)\n\t\t},\n\n\t\t// Check if subname and actions slots are populated\n\t\tcheckSlots() {\n\t\t\tif (this.hasActions !== !!this.$slots.actions) {\n\t\t\t\tthis.hasActions = !!this.$slots.actions\n\t\t\t}\n\t\t\tif (this.hasSubname !== !!this.$slots.subname) {\n\t\t\t\tthis.hasSubname = !!this.$slots.subname\n\t\t\t}\n\t\t\tif (this.hasIndicator !== !!this.$slots.indicator) {\n\t\t\t\tthis.hasIndicator = !!this.$slots.indicator\n\t\t\t}\n\t\t\tif (this.hasDetails !== !!this.$slots.details) {\n\t\t\t\tthis.hasDetails = !!this.$slots.details\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.list-item__wrapper {\n\tdisplay: flex;\n\tposition: relative;\n\twidth: 100%;\n\t// padding for the focus-visible styles. Width is reduced to compensate it\n\tpadding: 2px 4px;\n\t// The first and lastelement needs also padding for the box shadow of the focus-visible effect\n\t&:first-of-type {\n\t\tpadding-block-start: 4px;\n\t}\n\t&:last-of-type {\n\t\tpadding-block-end: 4px\n\t}\n\n\t&--active,\n\t&.active {\n\t\t.list-item {\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\n\t\t\t&:hover,\n\t\t\t&:focus-within,\n\t\t\t&:has(:focus-visible),\n\t\t\t&:has(:active) {\n\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t}\n\t\t}\n\n\t\t.list-item-content__name,\n\t\t.list-item-content__subname,\n\t\t.list-item-content__details,\n\t\t.list-item-details__details {\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\t\t}\n\t}\n\t.list-item-content__name,\n\t.list-item-content__subname,\n\t.list-item-content__details,\n\t.list-item-details__details {\n\t\twhite-space: nowrap;\n\t\tmargin-block: 0;\n\t\tmargin-inline: 0 auto;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n\n.list-item-content__name {\n\tmin-width: 100px;\n\tflex: 1 1 10%;\n\tfont-weight: 500;\n}\n\n.list-item-content__subname {\n\tflex: 1 0;\n\tmin-width: 0;\n\tcolor: var(--color-text-maxcontrast);\n\t&--bold {\n\t\tfont-weight: 500;\n\t}\n}\n\n// NcListItem\n.list-item {\n\t--list-item-padding: var(--default-grid-baseline);\n\t// The content are two lines of text and respect the 1.5 line height\n\t--list-item-height: 2lh;\n\t--list-item-border-radius: var(--border-radius-element, 32px);\n\t// General styles\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tposition: relative;\n\tflex: 0 0 auto;\n\tjustify-content: flex-start;\n\tpadding: var(--list-item-padding);\n\twidth: 100%;\n\tborder-radius: var(--border-radius-element, 32px);\n\tcursor: pointer;\n\ttransition: background-color var(--animation-quick) ease-in-out;\n\tlist-style: none;\n\n\t&:hover,\n\t&:focus-within,\n\t&:has(:active),\n\t&:has(:focus-visible) {\n\t\tbackground-color: var(--color-background-hover);\n\t}\n\n\t&:has(&__anchor:focus-visible) {\n\t\toutline: 2px solid var(--color-main-text);\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background);\n\t}\n\n\t&--compact {\n\t\t--list-item-padding: calc(0.5 var(--default-grid-baseline)) var(--default-grid-baseline);\n\n\t\t&:not(:has(.list-item-content__subname)) {\n\t\t\t--list-item-height: var(--default-clickable-area);\n\t\t}\n\t}\n\n\t&--legacy {\n\t\t--list-item-padding: calc(2 * var(--default-grid-baseline));\n\n\t\t&.list-item--compact {\n\t\t\t--list-item-padding: var(--default-grid-baseline) calc(2 * var(--default-grid-baseline));\n\t\t}\n\t}\n\n\t&--one-line {\n\t\t--list-item-height: var(--default-clickable-area);\n\t\t--list-item-border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));\n\t\t--list-item-padding: var(--default-grid-baseline);\n\n\t\t&#{&}--legacy {\n\t\t\t--list-item-padding: 2px calc((var(--list-item-height) - var(--list-item-border-radius)) / 2);\n\t\t}\n\n\t\t.list-item-content__main {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: start;\n\t\t\tgap: 12px;\n\t\t\tmin-width: 0;\n\t\t}\n\t\t.list-item-content__details {\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tjustify-content: end;\n\t\t}\n\t\t.list-item-content__name {\n\t\t\talign-self: center;\n\t\t\tmax-width: 300px;\n\t\t}\n\t}\n\n\t&__anchor {\n\t\tcolor: inherit;\n\t\tdisplay: flex;\n\t\tflex: 1 0 auto;\n\t\talign-items: center;\n\t\theight: var(--list-item-height);\n\t\tmin-width: 0;\n\n\t\t// This is handled by the parent container\n\t\t&:focus-visible {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t&-content {\n\t\tdisplay: flex;\n\t\tflex: 1 0;\n\t\tjustify-content: space-between;\n\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t\tmin-width: 0;\n\n\t\t&__main {\n\t\t\tflex: 1 0;\n\t\t\twidth: 0;\n\t\t\tmargin: auto 0;\n\n\t\t\t&--oneline {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t&__details {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tjustify-content: end;\n\t\t\talign-items: end;\n\t\t}\n\n\t\t&__actions,\n\t\t&__extra-actions {\n\t\t\tflex: 0 0 auto;\n\t\t\talign-self: center;\n\t\t\tjustify-content: center;\n\t\t\tmargin-inline-start: var(--default-grid-baseline);\n\t\t}\n\n\t\t&__extra-actions {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--default-grid-baseline);\n\t\t}\n\t}\n\n\t&-details {\n\t\t&__details {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tmargin: 0 9px !important;\n\t\t\tfont-weight: normal;\n\t\t}\n\t\t&__extra {\n\t\t\tmargin: 2px 4px 0 4px;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\t\t&__indicator {\n\t\t\tmargin: 0 5px;\n\t\t}\n\t}\n\n\t&__extra {\n\t\tmargin-top: var(--default-grid-baseline);\n\t}\n}\n\n</style>\n"],"names":["NcActions","NcCounterBubble","NcVNodes"],"mappings":"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"}
1	+ {"version":3,"file":"NcListItem-BVNMtN9D.cjs","sources":["../../src/components/NcListItem/NcListItem.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### Default Usage\n\n```vue\n<template>\n\t<ul>\n\t\t<NcListItem active\n\t\t\tbold\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"highlighted\"\n\t\t\tdetails=\"1h\"\n\t\t\tname=\"This is an active element with highlighted counter\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with outlined counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with normal counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"123\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with highlighted counter\"\n\t\t\tbold\n\t\t\t:force-display-actions=\"true\"\n\t\t\tdetails=\"1h\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"highlighted\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with outlined counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with normal counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\tdetails=\"1h\"\n\t\t\t:counter-number=\"123\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element\"\n\t\t\t:bold=\"false\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #name>\n\t\t\t\t<span style=\"display: flex; gap: 0.5rem; color: var(--color-warning);\">\n\t\t\t\t\tFlexible styling within the first line of the component\n\t\t\t\t\t<div style=\"color: var(--color-error);\">\n\t\t\t\t\t\tlike this.\n\t\t\t\t\t</div>\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Without subname, Name of the element\"\n\t\t\t:bold=\"false\"\n\t\t\tdetails=\"1h\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n\n<script>\n\timport CheckboxBlankCircle from 'vue-material-design-icons/CheckboxBlankCircle'\n\timport LinkIcon from 'vue-material-design-icons/Link'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheckboxBlankCircle,\n\t\t\tLinkIcon,\n\t\t}\n\t}\n</script>\n\n```\n\n### NcListItem one line mode\n```vue\n<NcListItem active\n\t:bold=\"false\"\n\t:counter-number=\"123\"\n\tcounterType=\"highlighted\"\n\tdetails=\"1h\"\n\tname=\"This is an active element with highlighted counter\"\n\tone-line>\n\t<template #icon>\n\t\t<NcAvatar disable-menu :size=\"34\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t</template>\n\t<template #subname>\n\t\tIn this slot you can put both text and other components such as icons\n\t</template>\n\t<template #indicator>\n\t\t<!-- Color dot -->\n\t\t<CheckboxBlankCircle :size=\"20\" fill-color=\"#fff\" />\n\t</template>\n\t<template #actions>\n\t\t<NcActionButton>\n\t\t\tButton one\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\tButton two\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\tButton three\n\t\t</NcActionButton>\n\t</template>\n</NcListItem>\n```\n### NcListItem with extra actions slot and customized icon\n\nThe `extra-actions` slot can be used to add other interactive components.\n\nThe `actions-icon` slot can be used to pass icon to the inner NcActions component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with extra actions slot\"\n\t\t\tbold\n\t\t\t:active=\"true\"\n\t\t\t:force-display-actions=\"true\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #extra-actions>\n\t\t\t\t<NcButton variant=\"primary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCog :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #actions-icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an element with extra actions slot\"\n\t\t\tbold>\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #extra-actions>\n\t\t\t\t<NcButton variant=\"tertiary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconPencil :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton variant=\"tertiary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCog :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #actions-icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t</div>\n</template>\n<script>\n\timport IconCog from 'vue-material-design-icons/Cog.vue'\n\timport IconNoteText from 'vue-material-design-icons/NoteText.vue'\n\timport IconPencil from 'vue-material-design-icons/Pencil.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconCog,\n\t\t\tIconNoteText,\n\t\t\tIconPencil,\n\t\t},\n\t}\n</script>\n```\n### NcListItem compact mode\n```vue\n<template>\n\t<ul style=\"width: 350px;\">\n\t\t<NcListItem active\n\t\t\tcompact\n\t\t\tname=\"Active item\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"1\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"3\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"4\"\n\t\t\thref=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with an external link\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n<script>\n\timport IconNoteText from 'vue-material-design-icons/NoteText.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconNoteText,\n\t\t},\n\t}\n</script>\n```\n</docs>\n\n<template>\n\t<!-- This wrapper can be either a router link or a `<li>` -->\n\t<component :is=\"to ? 'router-link' : 'NcVNodes'\"\n\t\tv-slot=\"{ href: routerLinkHref, navigate, isActive }\"\n\t\t:custom=\"to ? true : null\"\n\t\t:to=\"to\"\n\t\t:exact=\"to ? exact : null\">\n\t\t<li class=\"list-item__wrapper\"\n\t\t\t:class=\"{ 'list-item__wrapper--active' : isActive \|\| active }\">\n\t\t\t<div ref=\"list-item\"\n\t\t\t\tclass=\"list-item\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'list-item--compact': compact,\n\t\t\t\t\t'list-item--legacy': isLegacy,\n\t\t\t\t\t'list-item--one-line': oneLine,\n\t\t\t\t}\"\n\t\t\t\t@mouseover=\"handleMouseover\"\n\t\t\t\t@mouseleave=\"handleMouseleave\">\n\t\t\t\t<a :id=\"anchorId \|\| undefined\"\n\t\t\t\t\t:aria-label=\"linkAriaLabel\"\n\t\t\t\t\tclass=\"list-item__anchor\"\n\t\t\t\t\t:href=\"routerLinkHref \|\| href\"\n\t\t\t\t\t:target=\"target \|\| (href === '#' ? undefined : '_blank')\"\n\t\t\t\t\t:rel=\"href === '#' ? undefined : 'noopener noreferrer'\"\n\t\t\t\t\t@focus=\"showActions\"\n\t\t\t\t\t@focusout=\"handleBlur\"\n\t\t\t\t\t@click=\"onClick($event, navigate, routerLinkHref)\"\n\t\t\t\t\t@keydown.esc=\"hideActions\">\n\t\t\t\t\t<!-- @slot This slot is used for the NcAvatar or icon, the content of this slot must not be interactive -->\n\t\t\t\t\t<slot name=\"icon\" />\n\n\t\t\t\t\t<!-- Main content -->\n\t\t\t\t\t<div class=\"list-item-content\">\n\t\t\t\t\t\t<div class=\"list-item-content__main\">\n\t\t\t\t\t\t\t<div class=\"list-item-content__name\">\n\t\t\t\t\t\t\t\t<!-- @slot Slot for the first line of the component. prop 'name' is used as a fallback is no slots are provided -->\n\t\t\t\t\t\t\t\t<slot name=\"name\">{{ name }}</slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div v-if=\"hasSubname\"\n\t\t\t\t\t\t\t\tclass=\"list-item-content__subname\"\n\t\t\t\t\t\t\t\t:class=\"{'list-item-content__subname--bold': bold}\">\n\t\t\t\t\t\t\t\t<!-- @slot Slot for the second line of the component -->\n\t\t\t\t\t\t\t\t<slot name=\"subname\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"list-item-content__details\">\n\t\t\t\t\t\t\t<div v-if=\"showDetails\" class=\"list-item-details__details\">\n\t\t\t\t\t\t\t\t<!-- @slot This slot is used for some details in form of icon (prop `details` as a fallback) -->\n\t\t\t\t\t\t\t\t<slot name=\"details\">{{ details }}</slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<!-- Counter and indicator -->\n\t\t\t\t\t\t\t<div v-if=\"counterNumber \|\| hasIndicator\"\n\t\t\t\t\t\t\t\tv-show=\"showAdditionalElements\"\n\t\t\t\t\t\t\t\tclass=\"list-item-details__extra\">\n\t\t\t\t\t\t\t\t<NcCounterBubble v-if=\"counterNumber\"\n\t\t\t\t\t\t\t\t\t:active=\"isActive \|\| active\"\n\t\t\t\t\t\t\t\t\tclass=\"list-item-details__counter\"\n\t\t\t\t\t\t\t\t\t:type=\"counterType\">\n\t\t\t\t\t\t\t\t\t{{ counterNumber }}\n\t\t\t\t\t\t\t\t</NcCounterBubble>\n\n\t\t\t\t\t\t\t\t<span v-if=\"hasIndicator\" class=\"list-item-details__indicator\">\n\t\t\t\t\t\t\t\t\t<!-- @slot This slot is used for some indicator in form of icon -->\n\t\t\t\t\t\t\t\t\t<slot name=\"indicator\" />\n\t\t\t\t\t\t\t\t</span>\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</a>\n\n\t\t\t\t<div v-if=\"$slots['extra-actions']\" class=\"list-item-content__extra-actions\">\n\t\t\t\t\t<!-- @slot Extra elements next to the right side quick menu -->\n\t\t\t\t\t<slot name=\"extra-actions\" />\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Actions -->\n\t\t\t\t<div v-show=\"forceDisplayActions \|\| displayActionsOnHoverFocus\"\n\t\t\t\t\tclass=\"list-item-content__actions\"\n\t\t\t\t\t@focusout=\"handleBlur\">\n\t\t\t\t\t<NcActions ref=\"actions\"\n\t\t\t\t\t\t:primary=\"isActive \|\| active\"\n\t\t\t\t\t\t:force-menu=\"forceMenu\"\n\t\t\t\t\t\t:aria-label=\"actionsAriaLabel\"\n\t\t\t\t\t\t@update:open=\"handleActionsUpdateOpen\">\n\t\t\t\t\t\t<template v-if=\"$slots['actions-icon']\" #icon>\n\t\t\t\t\t\t\t<!-- @slot Provide the custom icon for the right side quick menu -->\n\t\t\t\t\t\t\t<slot name=\"actions-icon\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<!-- @slot Provide the actions for the right side quick menu -->\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\n\t\t\t\t<div v-if=\"$slots.extra\" class=\"list-item__extra\">\n\t\t\t\t\t<!-- @slot Extra elements below the item -->\n\t\t\t\t\t<slot name=\"extra\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</li>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcCounterBubble from '../NcCounterBubble/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\n\nexport default {\n\tname: 'NcListItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcCounterBubble,\n\t\tNcVNodes,\n\t},\n\n\tprops: {\n\t\t/*\n\t\t The details text displayed in the upper right part of the component\n\t\t /\n\t\tdetails: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Name (first line of text)\n\t\t /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Pass in `true` if you want the matching behavior to\n\t\t * be non-inclusive: https://router.vuejs.org/api/#exact\n\t\t /\n\t\texact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The route for the router link.\n\t\t /\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t The value for the external link\n\t\t /\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: '#',\n\t\t},\n\n\t\ttarget: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Id for the `<a>` element\n\t\t /\n\t\tanchorId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Make subname bold\n\t\t /\n\t\tbold: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Show the NcListItem in compact design\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 Toggle the active state of the component\n\t\t /\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Aria label for the wrapper element\n\t\t /\n\t\tlinkAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Aria label for the actions toggle\n\t\t /\n\t\tactionsAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t If different from 0 this component will display the\n\t\t * NcCounterBubble component\n\t\t /\n\t\t counterNumber: {\n\t\t\t type: [Number, String],\n\t\t\t default: 0,\n\t\t },\n\n\t\t/\n\t\t Outlined or highlighted state of the counter\n\t\t /\n\t\tcounterType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['highlighted', 'outlined', ''].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/\n\t\t To be used only when the elements in the actions menu are very important\n\t\t /\n\t\tforceDisplayActions: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t 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 Show the list component layout\n\t\t /\n\t\toneLine: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'click',\n\t\t'update:menuOpen',\n\t],\n\n\tsetup() {\n\t\tconst [major] = window._oc_config?.version.split('.', 2) ?? []\n\t\tconst isLegacy = major && Number.parseInt(major) < 30\n\n\t\treturn {\n\t\t\tisLegacy,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t\thasActions: false,\n\t\t\thasSubname: false,\n\t\t\tdisplayActionsOnHoverFocus: false,\n\t\t\tmenuOpen: false,\n\t\t\thasIndicator: false,\n\t\t\thasDetails: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tshowAdditionalElements() {\n\t\t\treturn !this.displayActionsOnHoverFocus \|\| this.forceDisplayActions\n\t\t},\n\n\t\tshowDetails() {\n\t\t\treturn (this.details !== '' \|\| this.hasDetails)\n\t\t\t\t&& (!this.displayActionsOnHoverFocus \|\| this.forceDisplayActions)\n\t\t},\n\t},\n\n\twatch: {\n\n\t\tmenuOpen(newValue) {\n\t\t\t// A click outside both the menu and the root element hides the actions again\n\t\t\tif (!newValue && !this.hovered) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkSlots()\n\t},\n\n\tupdated() {\n\t\tthis.checkSlots()\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Handle link click\n\t\t \n\t\t @param {MouseEvent\|KeyboardEvent} event - Native click or keydown event\n\t\t * @param {Function} [navigate] - VueRouter link's navigate if any\n\t\t * @param {string} [routerLinkHref] - VueRouter link's href\n\t\t /\n\t\tonClick(event, navigate, routerLinkHref) {\n\t\t\t// Always forward native event\n\t\t\tthis.$emit('click', event)\n\t\t\t// Do not navigate with control keys - it is opening in a new tab\n\t\t\tif (event.metaKey \|\| event.altKey \|\| event.ctrlKey \|\| event.shiftKey) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Prevent default link behaviour if it's a router-link and navigate manually\n\t\t\tif (routerLinkHref) {\n\t\t\t\tnavigate?.(event)\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\tshowActions() {\n\t\t\tif (this.hasActions) {\n\t\t\t\tthis.displayActionsOnHoverFocus = true\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thideActions() {\n\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t},\n\n\t\t/\n\t\t @param {FocusEvent} event UI event\n\t\t /\n\t\thandleBlur(event) {\n\t\t\t// do not hide if open\n\t\t\tif (this.menuOpen) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// do not hide if focus is kept within\n\t\t\tif (this.$refs['list-item'].contains(event.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hideActions()\n\t\t},\n\n\t\t/\n\t\t Hide the actions on mouseleave unless the menu is open\n\t\t /\n\t\thandleMouseleave() {\n\t\t\tif (!this.menuOpen) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thandleMouseover() {\n\t\t\tthis.showActions()\n\t\t\tthis.hovered = true\n\t\t},\n\n\t\thandleActionsUpdateOpen(e) {\n\t\t\tthis.menuOpen = e\n\t\t\tthis.$emit('update:menuOpen', e)\n\t\t},\n\n\t\t// Check if subname and actions slots are populated\n\t\tcheckSlots() {\n\t\t\tif (this.hasActions !== !!this.$slots.actions) {\n\t\t\t\tthis.hasActions = !!this.$slots.actions\n\t\t\t}\n\t\t\tif (this.hasSubname !== !!this.$slots.subname) {\n\t\t\t\tthis.hasSubname = !!this.$slots.subname\n\t\t\t}\n\t\t\tif (this.hasIndicator !== !!this.$slots.indicator) {\n\t\t\t\tthis.hasIndicator = !!this.$slots.indicator\n\t\t\t}\n\t\t\tif (this.hasDetails !== !!this.$slots.details) {\n\t\t\t\tthis.hasDetails = !!this.$slots.details\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.list-item__wrapper {\n\tdisplay: flex;\n\tposition: relative;\n\twidth: 100%;\n\t// padding for the focus-visible styles. Width is reduced to compensate it\n\tpadding: 2px 4px;\n\t// The first and lastelement needs also padding for the box shadow of the focus-visible effect\n\t&:first-of-type {\n\t\tpadding-block-start: 4px;\n\t}\n\t&:last-of-type {\n\t\tpadding-block-end: 4px\n\t}\n\n\t&--active,\n\t&.active {\n\t\t.list-item {\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\n\t\t\t&:hover,\n\t\t\t&:focus-within,\n\t\t\t&:has(:focus-visible),\n\t\t\t&:has(:active) {\n\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t}\n\t\t}\n\n\t\t.list-item-content__name,\n\t\t.list-item-content__subname,\n\t\t.list-item-content__details,\n\t\t.list-item-details__details {\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\t\t}\n\t}\n\t.list-item-content__name,\n\t.list-item-content__subname,\n\t.list-item-content__details,\n\t.list-item-details__details {\n\t\twhite-space: nowrap;\n\t\tmargin-block: 0;\n\t\tmargin-inline: 0 auto;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n\n.list-item-content__name {\n\tmin-width: 100px;\n\tflex: 1 1 10%;\n\tfont-weight: 500;\n}\n\n.list-item-content__subname {\n\tflex: 1 0;\n\tmin-width: 0;\n\tcolor: var(--color-text-maxcontrast);\n\t&--bold {\n\t\tfont-weight: 500;\n\t}\n}\n\n// NcListItem\n.list-item {\n\t--list-item-padding: var(--default-grid-baseline);\n\t// The content are two lines of text and respect the 1.5 line height\n\t--list-item-height: 2lh;\n\t--list-item-border-radius: var(--border-radius-element, 32px);\n\t// General styles\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tposition: relative;\n\tflex: 0 0 auto;\n\tjustify-content: flex-start;\n\tpadding: var(--list-item-padding);\n\twidth: 100%;\n\tborder-radius: var(--border-radius-element, 32px);\n\tcursor: pointer;\n\ttransition: background-color var(--animation-quick) ease-in-out;\n\tlist-style: none;\n\n\t&:hover,\n\t&:focus-within,\n\t&:has(:active),\n\t&:has(:focus-visible) {\n\t\tbackground-color: var(--color-background-hover);\n\t}\n\n\t&:has(&__anchor:focus-visible) {\n\t\toutline: 2px solid var(--color-main-text);\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background);\n\t}\n\n\t&--compact {\n\t\t--list-item-padding: calc(0.5 var(--default-grid-baseline)) var(--default-grid-baseline);\n\n\t\t&:not(:has(.list-item-content__subname)) {\n\t\t\t--list-item-height: var(--default-clickable-area);\n\t\t}\n\t}\n\n\t&--legacy {\n\t\t--list-item-padding: calc(2 * var(--default-grid-baseline));\n\n\t\t&.list-item--compact {\n\t\t\t--list-item-padding: var(--default-grid-baseline) calc(2 * var(--default-grid-baseline));\n\t\t}\n\t}\n\n\t&--one-line {\n\t\t--list-item-height: var(--default-clickable-area);\n\t\t--list-item-border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));\n\t\t--list-item-padding: var(--default-grid-baseline);\n\n\t\t&#{&}--legacy {\n\t\t\t--list-item-padding: 2px calc((var(--list-item-height) - var(--list-item-border-radius)) / 2);\n\t\t}\n\n\t\t.list-item-content__main {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: start;\n\t\t\tgap: 12px;\n\t\t\tmin-width: 0;\n\t\t}\n\t\t.list-item-content__details {\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tjustify-content: end;\n\t\t}\n\t\t.list-item-content__name {\n\t\t\talign-self: center;\n\t\t\tmax-width: 300px;\n\t\t}\n\t}\n\n\t&__anchor {\n\t\tcolor: inherit;\n\t\tdisplay: flex;\n\t\tflex: 1 0 auto;\n\t\talign-items: center;\n\t\theight: var(--list-item-height);\n\t\tmin-width: 0;\n\n\t\t// This is handled by the parent container\n\t\t&:focus-visible {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t&-content {\n\t\tdisplay: flex;\n\t\tflex: 1 0;\n\t\tjustify-content: space-between;\n\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t\tmin-width: 0;\n\n\t\t&__main {\n\t\t\tflex: 1 0;\n\t\t\twidth: 0;\n\t\t\tmargin: auto 0;\n\n\t\t\t&--oneline {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t&__details {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tjustify-content: end;\n\t\t\talign-items: end;\n\t\t}\n\n\t\t&__actions,\n\t\t&__extra-actions {\n\t\t\tflex: 0 0 auto;\n\t\t\talign-self: center;\n\t\t\tjustify-content: center;\n\t\t\tmargin-inline-start: var(--default-grid-baseline);\n\t\t}\n\n\t\t&__extra-actions {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--default-grid-baseline);\n\t\t}\n\t}\n\n\t&-details {\n\t\t&__details {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tmargin: 0 9px !important;\n\t\t\tfont-weight: normal;\n\t\t}\n\t\t&__extra {\n\t\t\tmargin: 2px 4px 0 4px;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\t\t&__indicator {\n\t\t\tmargin: 0 5px;\n\t\t}\n\t}\n\n\t&__extra {\n\t\tmargin-top: var(--default-grid-baseline);\n\t}\n}\n\n</style>\n"],"names":["NcActions","NcCounterBubble","NcVNodes"],"mappings":"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"}

package/dist/chunks/{NcListItem-BGoyHTZy.mjs → NcListItem-CM-2Sxu0.mjs} RENAMED Viewed

@@ -1,5 +1,5 @@
 import '../assets/NcListItem-DfaWGP5A.css';
-import { N as NcActions } from "./NcActions-CucWK-m-.mjs";
+import { N as NcActions } from "./NcActions-DEZO46mP.mjs";
 import { N as NcCounterBubble } from "./NcCounterBubble-CDfRYl8B.mjs";
 import NcVNodes from "../Components/NcVNodes.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
@@ -283,4 +283,4 @@ const NcListItem = __component__.exports;
 export {
   NcListItem as N
 };
-//# sourceMappingURL=NcListItem-BGoyHTZy.mjs.map
+//# sourceMappingURL=NcListItem-CM-2Sxu0.mjs.map

package/dist/chunks/{NcListItem-BGoyHTZy.mjs.map → NcListItem-CM-2Sxu0.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcListItem-BGoyHTZy.mjs","sources":["../../src/components/NcListItem/NcListItem.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### Default Usage\n\n```vue\n<template>\n\t<ul>\n\t\t<NcListItem active\n\t\t\tbold\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"highlighted\"\n\t\t\tdetails=\"1h\"\n\t\t\tname=\"This is an active element with highlighted counter\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with outlined counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with normal counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"123\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with highlighted counter\"\n\t\t\tbold\n\t\t\t:force-display-actions=\"true\"\n\t\t\tdetails=\"1h\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"highlighted\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with outlined counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with normal counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\tdetails=\"1h\"\n\t\t\t:counter-number=\"123\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element\"\n\t\t\t:bold=\"false\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #name>\n\t\t\t\t<span style=\"display: flex; gap: 0.5rem; color: var(--color-warning);\">\n\t\t\t\t\tFlexible styling within the first line of the component\n\t\t\t\t\t<div style=\"color: var(--color-error);\">\n\t\t\t\t\t\tlike this.\n\t\t\t\t\t</div>\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Without subname, Name of the element\"\n\t\t\t:bold=\"false\"\n\t\t\tdetails=\"1h\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n\n<script>\n\timport CheckboxBlankCircle from 'vue-material-design-icons/CheckboxBlankCircle'\n\timport LinkIcon from 'vue-material-design-icons/Link'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheckboxBlankCircle,\n\t\t\tLinkIcon,\n\t\t}\n\t}\n</script>\n\n```\n\n### NcListItem one line mode\n```vue\n<NcListItem active\n\t:bold=\"false\"\n\t:counter-number=\"123\"\n\tcounterType=\"highlighted\"\n\tdetails=\"1h\"\n\tname=\"This is an active element with highlighted counter\"\n\tone-line>\n\t<template #icon>\n\t\t<NcAvatar disable-menu :size=\"34\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t</template>\n\t<template #subname>\n\t\tIn this slot you can put both text and other components such as icons\n\t</template>\n\t<template #indicator>\n\t\t<!-- Color dot -->\n\t\t<CheckboxBlankCircle :size=\"20\" fill-color=\"#fff\" />\n\t</template>\n\t<template #actions>\n\t\t<NcActionButton>\n\t\t\tButton one\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\tButton two\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\tButton three\n\t\t</NcActionButton>\n\t</template>\n</NcListItem>\n```\n### NcListItem with extra actions slot and customized icon\n\nThe `extra-actions` slot can be used to add other interactive components.\n\nThe `actions-icon` slot can be used to pass icon to the inner NcActions component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with extra actions slot\"\n\t\t\tbold\n\t\t\t:active=\"true\"\n\t\t\t:force-display-actions=\"true\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #extra-actions>\n\t\t\t\t<NcButton variant=\"primary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCog :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #actions-icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an element with extra actions slot\"\n\t\t\tbold>\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #extra-actions>\n\t\t\t\t<NcButton variant=\"tertiary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconPencil :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton variant=\"tertiary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCog :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #actions-icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t</div>\n</template>\n<script>\n\timport IconCog from 'vue-material-design-icons/Cog.vue'\n\timport IconNoteText from 'vue-material-design-icons/NoteText.vue'\n\timport IconPencil from 'vue-material-design-icons/Pencil.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconCog,\n\t\t\tIconNoteText,\n\t\t\tIconPencil,\n\t\t},\n\t}\n</script>\n```\n### NcListItem compact mode\n```vue\n<template>\n\t<ul style=\"width: 350px;\">\n\t\t<NcListItem active\n\t\t\tcompact\n\t\t\tname=\"Active item\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"1\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"3\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"4\"\n\t\t\thref=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with an external link\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n<script>\n\timport IconNoteText from 'vue-material-design-icons/NoteText.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconNoteText,\n\t\t},\n\t}\n</script>\n```\n</docs>\n\n<template>\n\t<!-- This wrapper can be either a router link or a `<li>` -->\n\t<component :is=\"to ? 'router-link' : 'NcVNodes'\"\n\t\tv-slot=\"{ href: routerLinkHref, navigate, isActive }\"\n\t\t:custom=\"to ? true : null\"\n\t\t:to=\"to\"\n\t\t:exact=\"to ? exact : null\">\n\t\t<li class=\"list-item__wrapper\"\n\t\t\t:class=\"{ 'list-item__wrapper--active' : isActive \|\| active }\">\n\t\t\t<div ref=\"list-item\"\n\t\t\t\tclass=\"list-item\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'list-item--compact': compact,\n\t\t\t\t\t'list-item--legacy': isLegacy,\n\t\t\t\t\t'list-item--one-line': oneLine,\n\t\t\t\t}\"\n\t\t\t\t@mouseover=\"handleMouseover\"\n\t\t\t\t@mouseleave=\"handleMouseleave\">\n\t\t\t\t<a :id=\"anchorId \|\| undefined\"\n\t\t\t\t\t:aria-label=\"linkAriaLabel\"\n\t\t\t\t\tclass=\"list-item__anchor\"\n\t\t\t\t\t:href=\"routerLinkHref \|\| href\"\n\t\t\t\t\t:target=\"target \|\| (href === '#' ? undefined : '_blank')\"\n\t\t\t\t\t:rel=\"href === '#' ? undefined : 'noopener noreferrer'\"\n\t\t\t\t\t@focus=\"showActions\"\n\t\t\t\t\t@focusout=\"handleBlur\"\n\t\t\t\t\t@click=\"onClick($event, navigate, routerLinkHref)\"\n\t\t\t\t\t@keydown.esc=\"hideActions\">\n\t\t\t\t\t<!-- @slot This slot is used for the NcAvatar or icon, the content of this slot must not be interactive -->\n\t\t\t\t\t<slot name=\"icon\" />\n\n\t\t\t\t\t<!-- Main content -->\n\t\t\t\t\t<div class=\"list-item-content\">\n\t\t\t\t\t\t<div class=\"list-item-content__main\">\n\t\t\t\t\t\t\t<div class=\"list-item-content__name\">\n\t\t\t\t\t\t\t\t<!-- @slot Slot for the first line of the component. prop 'name' is used as a fallback is no slots are provided -->\n\t\t\t\t\t\t\t\t<slot name=\"name\">{{ name }}</slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div v-if=\"hasSubname\"\n\t\t\t\t\t\t\t\tclass=\"list-item-content__subname\"\n\t\t\t\t\t\t\t\t:class=\"{'list-item-content__subname--bold': bold}\">\n\t\t\t\t\t\t\t\t<!-- @slot Slot for the second line of the component -->\n\t\t\t\t\t\t\t\t<slot name=\"subname\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"list-item-content__details\">\n\t\t\t\t\t\t\t<div v-if=\"showDetails\" class=\"list-item-details__details\">\n\t\t\t\t\t\t\t\t<!-- @slot This slot is used for some details in form of icon (prop `details` as a fallback) -->\n\t\t\t\t\t\t\t\t<slot name=\"details\">{{ details }}</slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<!-- Counter and indicator -->\n\t\t\t\t\t\t\t<div v-if=\"counterNumber \|\| hasIndicator\"\n\t\t\t\t\t\t\t\tv-show=\"showAdditionalElements\"\n\t\t\t\t\t\t\t\tclass=\"list-item-details__extra\">\n\t\t\t\t\t\t\t\t<NcCounterBubble v-if=\"counterNumber\"\n\t\t\t\t\t\t\t\t\t:active=\"isActive \|\| active\"\n\t\t\t\t\t\t\t\t\tclass=\"list-item-details__counter\"\n\t\t\t\t\t\t\t\t\t:type=\"counterType\">\n\t\t\t\t\t\t\t\t\t{{ counterNumber }}\n\t\t\t\t\t\t\t\t</NcCounterBubble>\n\n\t\t\t\t\t\t\t\t<span v-if=\"hasIndicator\" class=\"list-item-details__indicator\">\n\t\t\t\t\t\t\t\t\t<!-- @slot This slot is used for some indicator in form of icon -->\n\t\t\t\t\t\t\t\t\t<slot name=\"indicator\" />\n\t\t\t\t\t\t\t\t</span>\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</a>\n\n\t\t\t\t<div v-if=\"$slots['extra-actions']\" class=\"list-item-content__extra-actions\">\n\t\t\t\t\t<!-- @slot Extra elements next to the right side quick menu -->\n\t\t\t\t\t<slot name=\"extra-actions\" />\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Actions -->\n\t\t\t\t<div v-show=\"forceDisplayActions \|\| displayActionsOnHoverFocus\"\n\t\t\t\t\tclass=\"list-item-content__actions\"\n\t\t\t\t\t@focusout=\"handleBlur\">\n\t\t\t\t\t<NcActions ref=\"actions\"\n\t\t\t\t\t\t:primary=\"isActive \|\| active\"\n\t\t\t\t\t\t:force-menu=\"forceMenu\"\n\t\t\t\t\t\t:aria-label=\"actionsAriaLabel\"\n\t\t\t\t\t\t@update:open=\"handleActionsUpdateOpen\">\n\t\t\t\t\t\t<template v-if=\"$slots['actions-icon']\" #icon>\n\t\t\t\t\t\t\t<!-- @slot Provide the custom icon for the right side quick menu -->\n\t\t\t\t\t\t\t<slot name=\"actions-icon\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<!-- @slot Provide the actions for the right side quick menu -->\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\n\t\t\t\t<div v-if=\"$slots.extra\" class=\"list-item__extra\">\n\t\t\t\t\t<!-- @slot Extra elements below the item -->\n\t\t\t\t\t<slot name=\"extra\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</li>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcCounterBubble from '../NcCounterBubble/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\n\nexport default {\n\tname: 'NcListItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcCounterBubble,\n\t\tNcVNodes,\n\t},\n\n\tprops: {\n\t\t/*\n\t\t The details text displayed in the upper right part of the component\n\t\t /\n\t\tdetails: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Name (first line of text)\n\t\t /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Pass in `true` if you want the matching behavior to\n\t\t * be non-inclusive: https://router.vuejs.org/api/#exact\n\t\t /\n\t\texact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The route for the router link.\n\t\t /\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t The value for the external link\n\t\t /\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: '#',\n\t\t},\n\n\t\ttarget: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Id for the `<a>` element\n\t\t /\n\t\tanchorId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Make subname bold\n\t\t /\n\t\tbold: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Show the NcListItem in compact design\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 Toggle the active state of the component\n\t\t /\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Aria label for the wrapper element\n\t\t /\n\t\tlinkAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Aria label for the actions toggle\n\t\t /\n\t\tactionsAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t If different from 0 this component will display the\n\t\t * NcCounterBubble component\n\t\t /\n\t\t counterNumber: {\n\t\t\t type: [Number, String],\n\t\t\t default: 0,\n\t\t },\n\n\t\t/\n\t\t Outlined or highlighted state of the counter\n\t\t /\n\t\tcounterType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['highlighted', 'outlined', ''].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/\n\t\t To be used only when the elements in the actions menu are very important\n\t\t /\n\t\tforceDisplayActions: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t 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 Show the list component layout\n\t\t /\n\t\toneLine: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'click',\n\t\t'update:menuOpen',\n\t],\n\n\tsetup() {\n\t\tconst [major] = window._oc_config?.version.split('.', 2) ?? []\n\t\tconst isLegacy = major && Number.parseInt(major) < 30\n\n\t\treturn {\n\t\t\tisLegacy,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t\thasActions: false,\n\t\t\thasSubname: false,\n\t\t\tdisplayActionsOnHoverFocus: false,\n\t\t\tmenuOpen: false,\n\t\t\thasIndicator: false,\n\t\t\thasDetails: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tshowAdditionalElements() {\n\t\t\treturn !this.displayActionsOnHoverFocus \|\| this.forceDisplayActions\n\t\t},\n\n\t\tshowDetails() {\n\t\t\treturn (this.details !== '' \|\| this.hasDetails)\n\t\t\t\t&& (!this.displayActionsOnHoverFocus \|\| this.forceDisplayActions)\n\t\t},\n\t},\n\n\twatch: {\n\n\t\tmenuOpen(newValue) {\n\t\t\t// A click outside both the menu and the root element hides the actions again\n\t\t\tif (!newValue && !this.hovered) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkSlots()\n\t},\n\n\tupdated() {\n\t\tthis.checkSlots()\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Handle link click\n\t\t \n\t\t @param {MouseEvent\|KeyboardEvent} event - Native click or keydown event\n\t\t * @param {Function} [navigate] - VueRouter link's navigate if any\n\t\t * @param {string} [routerLinkHref] - VueRouter link's href\n\t\t /\n\t\tonClick(event, navigate, routerLinkHref) {\n\t\t\t// Always forward native event\n\t\t\tthis.$emit('click', event)\n\t\t\t// Do not navigate with control keys - it is opening in a new tab\n\t\t\tif (event.metaKey \|\| event.altKey \|\| event.ctrlKey \|\| event.shiftKey) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Prevent default link behaviour if it's a router-link and navigate manually\n\t\t\tif (routerLinkHref) {\n\t\t\t\tnavigate?.(event)\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\tshowActions() {\n\t\t\tif (this.hasActions) {\n\t\t\t\tthis.displayActionsOnHoverFocus = true\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thideActions() {\n\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t},\n\n\t\t/\n\t\t @param {FocusEvent} event UI event\n\t\t /\n\t\thandleBlur(event) {\n\t\t\t// do not hide if open\n\t\t\tif (this.menuOpen) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// do not hide if focus is kept within\n\t\t\tif (this.$refs['list-item'].contains(event.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hideActions()\n\t\t},\n\n\t\t/\n\t\t Hide the actions on mouseleave unless the menu is open\n\t\t /\n\t\thandleMouseleave() {\n\t\t\tif (!this.menuOpen) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thandleMouseover() {\n\t\t\tthis.showActions()\n\t\t\tthis.hovered = true\n\t\t},\n\n\t\thandleActionsUpdateOpen(e) {\n\t\t\tthis.menuOpen = e\n\t\t\tthis.$emit('update:menuOpen', e)\n\t\t},\n\n\t\t// Check if subname and actions slots are populated\n\t\tcheckSlots() {\n\t\t\tif (this.hasActions !== !!this.$slots.actions) {\n\t\t\t\tthis.hasActions = !!this.$slots.actions\n\t\t\t}\n\t\t\tif (this.hasSubname !== !!this.$slots.subname) {\n\t\t\t\tthis.hasSubname = !!this.$slots.subname\n\t\t\t}\n\t\t\tif (this.hasIndicator !== !!this.$slots.indicator) {\n\t\t\t\tthis.hasIndicator = !!this.$slots.indicator\n\t\t\t}\n\t\t\tif (this.hasDetails !== !!this.$slots.details) {\n\t\t\t\tthis.hasDetails = !!this.$slots.details\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.list-item__wrapper {\n\tdisplay: flex;\n\tposition: relative;\n\twidth: 100%;\n\t// padding for the focus-visible styles. Width is reduced to compensate it\n\tpadding: 2px 4px;\n\t// The first and lastelement needs also padding for the box shadow of the focus-visible effect\n\t&:first-of-type {\n\t\tpadding-block-start: 4px;\n\t}\n\t&:last-of-type {\n\t\tpadding-block-end: 4px\n\t}\n\n\t&--active,\n\t&.active {\n\t\t.list-item {\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\n\t\t\t&:hover,\n\t\t\t&:focus-within,\n\t\t\t&:has(:focus-visible),\n\t\t\t&:has(:active) {\n\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t}\n\t\t}\n\n\t\t.list-item-content__name,\n\t\t.list-item-content__subname,\n\t\t.list-item-content__details,\n\t\t.list-item-details__details {\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\t\t}\n\t}\n\t.list-item-content__name,\n\t.list-item-content__subname,\n\t.list-item-content__details,\n\t.list-item-details__details {\n\t\twhite-space: nowrap;\n\t\tmargin-block: 0;\n\t\tmargin-inline: 0 auto;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n\n.list-item-content__name {\n\tmin-width: 100px;\n\tflex: 1 1 10%;\n\tfont-weight: 500;\n}\n\n.list-item-content__subname {\n\tflex: 1 0;\n\tmin-width: 0;\n\tcolor: var(--color-text-maxcontrast);\n\t&--bold {\n\t\tfont-weight: 500;\n\t}\n}\n\n// NcListItem\n.list-item {\n\t--list-item-padding: var(--default-grid-baseline);\n\t// The content are two lines of text and respect the 1.5 line height\n\t--list-item-height: 2lh;\n\t--list-item-border-radius: var(--border-radius-element, 32px);\n\t// General styles\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tposition: relative;\n\tflex: 0 0 auto;\n\tjustify-content: flex-start;\n\tpadding: var(--list-item-padding);\n\twidth: 100%;\n\tborder-radius: var(--border-radius-element, 32px);\n\tcursor: pointer;\n\ttransition: background-color var(--animation-quick) ease-in-out;\n\tlist-style: none;\n\n\t&:hover,\n\t&:focus-within,\n\t&:has(:active),\n\t&:has(:focus-visible) {\n\t\tbackground-color: var(--color-background-hover);\n\t}\n\n\t&:has(&__anchor:focus-visible) {\n\t\toutline: 2px solid var(--color-main-text);\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background);\n\t}\n\n\t&--compact {\n\t\t--list-item-padding: calc(0.5 var(--default-grid-baseline)) var(--default-grid-baseline);\n\n\t\t&:not(:has(.list-item-content__subname)) {\n\t\t\t--list-item-height: var(--default-clickable-area);\n\t\t}\n\t}\n\n\t&--legacy {\n\t\t--list-item-padding: calc(2 * var(--default-grid-baseline));\n\n\t\t&.list-item--compact {\n\t\t\t--list-item-padding: var(--default-grid-baseline) calc(2 * var(--default-grid-baseline));\n\t\t}\n\t}\n\n\t&--one-line {\n\t\t--list-item-height: var(--default-clickable-area);\n\t\t--list-item-border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));\n\t\t--list-item-padding: var(--default-grid-baseline);\n\n\t\t&#{&}--legacy {\n\t\t\t--list-item-padding: 2px calc((var(--list-item-height) - var(--list-item-border-radius)) / 2);\n\t\t}\n\n\t\t.list-item-content__main {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: start;\n\t\t\tgap: 12px;\n\t\t\tmin-width: 0;\n\t\t}\n\t\t.list-item-content__details {\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tjustify-content: end;\n\t\t}\n\t\t.list-item-content__name {\n\t\t\talign-self: center;\n\t\t\tmax-width: 300px;\n\t\t}\n\t}\n\n\t&__anchor {\n\t\tcolor: inherit;\n\t\tdisplay: flex;\n\t\tflex: 1 0 auto;\n\t\talign-items: center;\n\t\theight: var(--list-item-height);\n\t\tmin-width: 0;\n\n\t\t// This is handled by the parent container\n\t\t&:focus-visible {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t&-content {\n\t\tdisplay: flex;\n\t\tflex: 1 0;\n\t\tjustify-content: space-between;\n\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t\tmin-width: 0;\n\n\t\t&__main {\n\t\t\tflex: 1 0;\n\t\t\twidth: 0;\n\t\t\tmargin: auto 0;\n\n\t\t\t&--oneline {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t&__details {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tjustify-content: end;\n\t\t\talign-items: end;\n\t\t}\n\n\t\t&__actions,\n\t\t&__extra-actions {\n\t\t\tflex: 0 0 auto;\n\t\t\talign-self: center;\n\t\t\tjustify-content: center;\n\t\t\tmargin-inline-start: var(--default-grid-baseline);\n\t\t}\n\n\t\t&__extra-actions {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--default-grid-baseline);\n\t\t}\n\t}\n\n\t&-details {\n\t\t&__details {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tmargin: 0 9px !important;\n\t\t\tfont-weight: normal;\n\t\t}\n\t\t&__extra {\n\t\t\tmargin: 2px 4px 0 4px;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\t\t&__indicator {\n\t\t\tmargin: 0 5px;\n\t\t}\n\t}\n\n\t&__extra {\n\t\tmargin-top: var(--default-grid-baseline);\n\t}\n}\n\n</style>\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"NcListItem-CM-2Sxu0.mjs","sources":["../../src/components/NcListItem/NcListItem.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### Default Usage\n\n```vue\n<template>\n\t<ul>\n\t\t<NcListItem active\n\t\t\tbold\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"highlighted\"\n\t\t\tdetails=\"1h\"\n\t\t\tname=\"This is an active element with highlighted counter\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with outlined counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with normal counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"123\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with highlighted counter\"\n\t\t\tbold\n\t\t\t:force-display-actions=\"true\"\n\t\t\tdetails=\"1h\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"highlighted\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with outlined counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with normal counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\tdetails=\"1h\"\n\t\t\t:counter-number=\"123\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element\"\n\t\t\t:bold=\"false\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #name>\n\t\t\t\t<span style=\"display: flex; gap: 0.5rem; color: var(--color-warning);\">\n\t\t\t\t\tFlexible styling within the first line of the component\n\t\t\t\t\t<div style=\"color: var(--color-error);\">\n\t\t\t\t\t\tlike this.\n\t\t\t\t\t</div>\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Without subname, Name of the element\"\n\t\t\t:bold=\"false\"\n\t\t\tdetails=\"1h\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n\n<script>\n\timport CheckboxBlankCircle from 'vue-material-design-icons/CheckboxBlankCircle'\n\timport LinkIcon from 'vue-material-design-icons/Link'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheckboxBlankCircle,\n\t\t\tLinkIcon,\n\t\t}\n\t}\n</script>\n\n```\n\n### NcListItem one line mode\n```vue\n<NcListItem active\n\t:bold=\"false\"\n\t:counter-number=\"123\"\n\tcounterType=\"highlighted\"\n\tdetails=\"1h\"\n\tname=\"This is an active element with highlighted counter\"\n\tone-line>\n\t<template #icon>\n\t\t<NcAvatar disable-menu :size=\"34\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t</template>\n\t<template #subname>\n\t\tIn this slot you can put both text and other components such as icons\n\t</template>\n\t<template #indicator>\n\t\t<!-- Color dot -->\n\t\t<CheckboxBlankCircle :size=\"20\" fill-color=\"#fff\" />\n\t</template>\n\t<template #actions>\n\t\t<NcActionButton>\n\t\t\tButton one\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\tButton two\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\tButton three\n\t\t</NcActionButton>\n\t</template>\n</NcListItem>\n```\n### NcListItem with extra actions slot and customized icon\n\nThe `extra-actions` slot can be used to add other interactive components.\n\nThe `actions-icon` slot can be used to pass icon to the inner NcActions component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with extra actions slot\"\n\t\t\tbold\n\t\t\t:active=\"true\"\n\t\t\t:force-display-actions=\"true\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #extra-actions>\n\t\t\t\t<NcButton variant=\"primary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCog :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #actions-icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an element with extra actions slot\"\n\t\t\tbold>\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #extra-actions>\n\t\t\t\t<NcButton variant=\"tertiary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconPencil :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton variant=\"tertiary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCog :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #actions-icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t</div>\n</template>\n<script>\n\timport IconCog from 'vue-material-design-icons/Cog.vue'\n\timport IconNoteText from 'vue-material-design-icons/NoteText.vue'\n\timport IconPencil from 'vue-material-design-icons/Pencil.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconCog,\n\t\t\tIconNoteText,\n\t\t\tIconPencil,\n\t\t},\n\t}\n</script>\n```\n### NcListItem compact mode\n```vue\n<template>\n\t<ul style=\"width: 350px;\">\n\t\t<NcListItem active\n\t\t\tcompact\n\t\t\tname=\"Active item\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"1\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"3\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"4\"\n\t\t\thref=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with an external link\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n<script>\n\timport IconNoteText from 'vue-material-design-icons/NoteText.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconNoteText,\n\t\t},\n\t}\n</script>\n```\n</docs>\n\n<template>\n\t<!-- This wrapper can be either a router link or a `<li>` -->\n\t<component :is=\"to ? 'router-link' : 'NcVNodes'\"\n\t\tv-slot=\"{ href: routerLinkHref, navigate, isActive }\"\n\t\t:custom=\"to ? true : null\"\n\t\t:to=\"to\"\n\t\t:exact=\"to ? exact : null\">\n\t\t<li class=\"list-item__wrapper\"\n\t\t\t:class=\"{ 'list-item__wrapper--active' : isActive \|\| active }\">\n\t\t\t<div ref=\"list-item\"\n\t\t\t\tclass=\"list-item\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'list-item--compact': compact,\n\t\t\t\t\t'list-item--legacy': isLegacy,\n\t\t\t\t\t'list-item--one-line': oneLine,\n\t\t\t\t}\"\n\t\t\t\t@mouseover=\"handleMouseover\"\n\t\t\t\t@mouseleave=\"handleMouseleave\">\n\t\t\t\t<a :id=\"anchorId \|\| undefined\"\n\t\t\t\t\t:aria-label=\"linkAriaLabel\"\n\t\t\t\t\tclass=\"list-item__anchor\"\n\t\t\t\t\t:href=\"routerLinkHref \|\| href\"\n\t\t\t\t\t:target=\"target \|\| (href === '#' ? undefined : '_blank')\"\n\t\t\t\t\t:rel=\"href === '#' ? undefined : 'noopener noreferrer'\"\n\t\t\t\t\t@focus=\"showActions\"\n\t\t\t\t\t@focusout=\"handleBlur\"\n\t\t\t\t\t@click=\"onClick($event, navigate, routerLinkHref)\"\n\t\t\t\t\t@keydown.esc=\"hideActions\">\n\t\t\t\t\t<!-- @slot This slot is used for the NcAvatar or icon, the content of this slot must not be interactive -->\n\t\t\t\t\t<slot name=\"icon\" />\n\n\t\t\t\t\t<!-- Main content -->\n\t\t\t\t\t<div class=\"list-item-content\">\n\t\t\t\t\t\t<div class=\"list-item-content__main\">\n\t\t\t\t\t\t\t<div class=\"list-item-content__name\">\n\t\t\t\t\t\t\t\t<!-- @slot Slot for the first line of the component. prop 'name' is used as a fallback is no slots are provided -->\n\t\t\t\t\t\t\t\t<slot name=\"name\">{{ name }}</slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div v-if=\"hasSubname\"\n\t\t\t\t\t\t\t\tclass=\"list-item-content__subname\"\n\t\t\t\t\t\t\t\t:class=\"{'list-item-content__subname--bold': bold}\">\n\t\t\t\t\t\t\t\t<!-- @slot Slot for the second line of the component -->\n\t\t\t\t\t\t\t\t<slot name=\"subname\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"list-item-content__details\">\n\t\t\t\t\t\t\t<div v-if=\"showDetails\" class=\"list-item-details__details\">\n\t\t\t\t\t\t\t\t<!-- @slot This slot is used for some details in form of icon (prop `details` as a fallback) -->\n\t\t\t\t\t\t\t\t<slot name=\"details\">{{ details }}</slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<!-- Counter and indicator -->\n\t\t\t\t\t\t\t<div v-if=\"counterNumber \|\| hasIndicator\"\n\t\t\t\t\t\t\t\tv-show=\"showAdditionalElements\"\n\t\t\t\t\t\t\t\tclass=\"list-item-details__extra\">\n\t\t\t\t\t\t\t\t<NcCounterBubble v-if=\"counterNumber\"\n\t\t\t\t\t\t\t\t\t:active=\"isActive \|\| active\"\n\t\t\t\t\t\t\t\t\tclass=\"list-item-details__counter\"\n\t\t\t\t\t\t\t\t\t:type=\"counterType\">\n\t\t\t\t\t\t\t\t\t{{ counterNumber }}\n\t\t\t\t\t\t\t\t</NcCounterBubble>\n\n\t\t\t\t\t\t\t\t<span v-if=\"hasIndicator\" class=\"list-item-details__indicator\">\n\t\t\t\t\t\t\t\t\t<!-- @slot This slot is used for some indicator in form of icon -->\n\t\t\t\t\t\t\t\t\t<slot name=\"indicator\" />\n\t\t\t\t\t\t\t\t</span>\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</a>\n\n\t\t\t\t<div v-if=\"$slots['extra-actions']\" class=\"list-item-content__extra-actions\">\n\t\t\t\t\t<!-- @slot Extra elements next to the right side quick menu -->\n\t\t\t\t\t<slot name=\"extra-actions\" />\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Actions -->\n\t\t\t\t<div v-show=\"forceDisplayActions \|\| displayActionsOnHoverFocus\"\n\t\t\t\t\tclass=\"list-item-content__actions\"\n\t\t\t\t\t@focusout=\"handleBlur\">\n\t\t\t\t\t<NcActions ref=\"actions\"\n\t\t\t\t\t\t:primary=\"isActive \|\| active\"\n\t\t\t\t\t\t:force-menu=\"forceMenu\"\n\t\t\t\t\t\t:aria-label=\"actionsAriaLabel\"\n\t\t\t\t\t\t@update:open=\"handleActionsUpdateOpen\">\n\t\t\t\t\t\t<template v-if=\"$slots['actions-icon']\" #icon>\n\t\t\t\t\t\t\t<!-- @slot Provide the custom icon for the right side quick menu -->\n\t\t\t\t\t\t\t<slot name=\"actions-icon\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<!-- @slot Provide the actions for the right side quick menu -->\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\n\t\t\t\t<div v-if=\"$slots.extra\" class=\"list-item__extra\">\n\t\t\t\t\t<!-- @slot Extra elements below the item -->\n\t\t\t\t\t<slot name=\"extra\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</li>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcCounterBubble from '../NcCounterBubble/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\n\nexport default {\n\tname: 'NcListItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcCounterBubble,\n\t\tNcVNodes,\n\t},\n\n\tprops: {\n\t\t/*\n\t\t The details text displayed in the upper right part of the component\n\t\t /\n\t\tdetails: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Name (first line of text)\n\t\t /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Pass in `true` if you want the matching behavior to\n\t\t * be non-inclusive: https://router.vuejs.org/api/#exact\n\t\t /\n\t\texact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The route for the router link.\n\t\t /\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t The value for the external link\n\t\t /\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: '#',\n\t\t},\n\n\t\ttarget: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Id for the `<a>` element\n\t\t /\n\t\tanchorId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Make subname bold\n\t\t /\n\t\tbold: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Show the NcListItem in compact design\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 Toggle the active state of the component\n\t\t /\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Aria label for the wrapper element\n\t\t /\n\t\tlinkAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Aria label for the actions toggle\n\t\t /\n\t\tactionsAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t If different from 0 this component will display the\n\t\t * NcCounterBubble component\n\t\t /\n\t\t counterNumber: {\n\t\t\t type: [Number, String],\n\t\t\t default: 0,\n\t\t },\n\n\t\t/\n\t\t Outlined or highlighted state of the counter\n\t\t /\n\t\tcounterType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['highlighted', 'outlined', ''].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/\n\t\t To be used only when the elements in the actions menu are very important\n\t\t /\n\t\tforceDisplayActions: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t 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 Show the list component layout\n\t\t /\n\t\toneLine: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'click',\n\t\t'update:menuOpen',\n\t],\n\n\tsetup() {\n\t\tconst [major] = window._oc_config?.version.split('.', 2) ?? []\n\t\tconst isLegacy = major && Number.parseInt(major) < 30\n\n\t\treturn {\n\t\t\tisLegacy,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t\thasActions: false,\n\t\t\thasSubname: false,\n\t\t\tdisplayActionsOnHoverFocus: false,\n\t\t\tmenuOpen: false,\n\t\t\thasIndicator: false,\n\t\t\thasDetails: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tshowAdditionalElements() {\n\t\t\treturn !this.displayActionsOnHoverFocus \|\| this.forceDisplayActions\n\t\t},\n\n\t\tshowDetails() {\n\t\t\treturn (this.details !== '' \|\| this.hasDetails)\n\t\t\t\t&& (!this.displayActionsOnHoverFocus \|\| this.forceDisplayActions)\n\t\t},\n\t},\n\n\twatch: {\n\n\t\tmenuOpen(newValue) {\n\t\t\t// A click outside both the menu and the root element hides the actions again\n\t\t\tif (!newValue && !this.hovered) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkSlots()\n\t},\n\n\tupdated() {\n\t\tthis.checkSlots()\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Handle link click\n\t\t \n\t\t @param {MouseEvent\|KeyboardEvent} event - Native click or keydown event\n\t\t * @param {Function} [navigate] - VueRouter link's navigate if any\n\t\t * @param {string} [routerLinkHref] - VueRouter link's href\n\t\t /\n\t\tonClick(event, navigate, routerLinkHref) {\n\t\t\t// Always forward native event\n\t\t\tthis.$emit('click', event)\n\t\t\t// Do not navigate with control keys - it is opening in a new tab\n\t\t\tif (event.metaKey \|\| event.altKey \|\| event.ctrlKey \|\| event.shiftKey) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Prevent default link behaviour if it's a router-link and navigate manually\n\t\t\tif (routerLinkHref) {\n\t\t\t\tnavigate?.(event)\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\tshowActions() {\n\t\t\tif (this.hasActions) {\n\t\t\t\tthis.displayActionsOnHoverFocus = true\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thideActions() {\n\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t},\n\n\t\t/\n\t\t @param {FocusEvent} event UI event\n\t\t /\n\t\thandleBlur(event) {\n\t\t\t// do not hide if open\n\t\t\tif (this.menuOpen) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// do not hide if focus is kept within\n\t\t\tif (this.$refs['list-item'].contains(event.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hideActions()\n\t\t},\n\n\t\t/\n\t\t Hide the actions on mouseleave unless the menu is open\n\t\t /\n\t\thandleMouseleave() {\n\t\t\tif (!this.menuOpen) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thandleMouseover() {\n\t\t\tthis.showActions()\n\t\t\tthis.hovered = true\n\t\t},\n\n\t\thandleActionsUpdateOpen(e) {\n\t\t\tthis.menuOpen = e\n\t\t\tthis.$emit('update:menuOpen', e)\n\t\t},\n\n\t\t// Check if subname and actions slots are populated\n\t\tcheckSlots() {\n\t\t\tif (this.hasActions !== !!this.$slots.actions) {\n\t\t\t\tthis.hasActions = !!this.$slots.actions\n\t\t\t}\n\t\t\tif (this.hasSubname !== !!this.$slots.subname) {\n\t\t\t\tthis.hasSubname = !!this.$slots.subname\n\t\t\t}\n\t\t\tif (this.hasIndicator !== !!this.$slots.indicator) {\n\t\t\t\tthis.hasIndicator = !!this.$slots.indicator\n\t\t\t}\n\t\t\tif (this.hasDetails !== !!this.$slots.details) {\n\t\t\t\tthis.hasDetails = !!this.$slots.details\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.list-item__wrapper {\n\tdisplay: flex;\n\tposition: relative;\n\twidth: 100%;\n\t// padding for the focus-visible styles. Width is reduced to compensate it\n\tpadding: 2px 4px;\n\t// The first and lastelement needs also padding for the box shadow of the focus-visible effect\n\t&:first-of-type {\n\t\tpadding-block-start: 4px;\n\t}\n\t&:last-of-type {\n\t\tpadding-block-end: 4px\n\t}\n\n\t&--active,\n\t&.active {\n\t\t.list-item {\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\n\t\t\t&:hover,\n\t\t\t&:focus-within,\n\t\t\t&:has(:focus-visible),\n\t\t\t&:has(:active) {\n\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t}\n\t\t}\n\n\t\t.list-item-content__name,\n\t\t.list-item-content__subname,\n\t\t.list-item-content__details,\n\t\t.list-item-details__details {\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\t\t}\n\t}\n\t.list-item-content__name,\n\t.list-item-content__subname,\n\t.list-item-content__details,\n\t.list-item-details__details {\n\t\twhite-space: nowrap;\n\t\tmargin-block: 0;\n\t\tmargin-inline: 0 auto;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n\n.list-item-content__name {\n\tmin-width: 100px;\n\tflex: 1 1 10%;\n\tfont-weight: 500;\n}\n\n.list-item-content__subname {\n\tflex: 1 0;\n\tmin-width: 0;\n\tcolor: var(--color-text-maxcontrast);\n\t&--bold {\n\t\tfont-weight: 500;\n\t}\n}\n\n// NcListItem\n.list-item {\n\t--list-item-padding: var(--default-grid-baseline);\n\t// The content are two lines of text and respect the 1.5 line height\n\t--list-item-height: 2lh;\n\t--list-item-border-radius: var(--border-radius-element, 32px);\n\t// General styles\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tposition: relative;\n\tflex: 0 0 auto;\n\tjustify-content: flex-start;\n\tpadding: var(--list-item-padding);\n\twidth: 100%;\n\tborder-radius: var(--border-radius-element, 32px);\n\tcursor: pointer;\n\ttransition: background-color var(--animation-quick) ease-in-out;\n\tlist-style: none;\n\n\t&:hover,\n\t&:focus-within,\n\t&:has(:active),\n\t&:has(:focus-visible) {\n\t\tbackground-color: var(--color-background-hover);\n\t}\n\n\t&:has(&__anchor:focus-visible) {\n\t\toutline: 2px solid var(--color-main-text);\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background);\n\t}\n\n\t&--compact {\n\t\t--list-item-padding: calc(0.5 var(--default-grid-baseline)) var(--default-grid-baseline);\n\n\t\t&:not(:has(.list-item-content__subname)) {\n\t\t\t--list-item-height: var(--default-clickable-area);\n\t\t}\n\t}\n\n\t&--legacy {\n\t\t--list-item-padding: calc(2 * var(--default-grid-baseline));\n\n\t\t&.list-item--compact {\n\t\t\t--list-item-padding: var(--default-grid-baseline) calc(2 * var(--default-grid-baseline));\n\t\t}\n\t}\n\n\t&--one-line {\n\t\t--list-item-height: var(--default-clickable-area);\n\t\t--list-item-border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));\n\t\t--list-item-padding: var(--default-grid-baseline);\n\n\t\t&#{&}--legacy {\n\t\t\t--list-item-padding: 2px calc((var(--list-item-height) - var(--list-item-border-radius)) / 2);\n\t\t}\n\n\t\t.list-item-content__main {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: start;\n\t\t\tgap: 12px;\n\t\t\tmin-width: 0;\n\t\t}\n\t\t.list-item-content__details {\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tjustify-content: end;\n\t\t}\n\t\t.list-item-content__name {\n\t\t\talign-self: center;\n\t\t\tmax-width: 300px;\n\t\t}\n\t}\n\n\t&__anchor {\n\t\tcolor: inherit;\n\t\tdisplay: flex;\n\t\tflex: 1 0 auto;\n\t\talign-items: center;\n\t\theight: var(--list-item-height);\n\t\tmin-width: 0;\n\n\t\t// This is handled by the parent container\n\t\t&:focus-visible {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t&-content {\n\t\tdisplay: flex;\n\t\tflex: 1 0;\n\t\tjustify-content: space-between;\n\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t\tmin-width: 0;\n\n\t\t&__main {\n\t\t\tflex: 1 0;\n\t\t\twidth: 0;\n\t\t\tmargin: auto 0;\n\n\t\t\t&--oneline {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t&__details {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tjustify-content: end;\n\t\t\talign-items: end;\n\t\t}\n\n\t\t&__actions,\n\t\t&__extra-actions {\n\t\t\tflex: 0 0 auto;\n\t\t\talign-self: center;\n\t\t\tjustify-content: center;\n\t\t\tmargin-inline-start: var(--default-grid-baseline);\n\t\t}\n\n\t\t&__extra-actions {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--default-grid-baseline);\n\t\t}\n\t}\n\n\t&-details {\n\t\t&__details {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tmargin: 0 9px !important;\n\t\t\tfont-weight: normal;\n\t\t}\n\t\t&__extra {\n\t\t\tmargin: 2px 4px 0 4px;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\t\t&__indicator {\n\t\t\tmargin: 0 5px;\n\t\t}\n\t}\n\n\t&__extra {\n\t\tmargin-top: var(--default-grid-baseline);\n\t}\n}\n\n</style>\n"],"names":[],"mappings":"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"}