@nextcloud/vue 9.0.0-alpha.1 → 9.0.0-alpha.2

package/dist/chunks/NcListItem-BNvxfN1S.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcListItem-BNvxfN1S.mjs","sources":["../../src/components/NcListItem/NcListItem.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2021 Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n-->\n<docs>\n\n### Default Usage\n\n```vue\n<template>\n\t<ul>\n\t\t<NcListItem\n\t\t\t:name=\"'This is an active element with highlighted counter'\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:details=\"'1h'\"\n\t\t\t:counter-number=\"44\"\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 #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\t:name=\"'This is an active element with outlined counter'\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:details=\"'1h'\"\n\t\t\t:counter-number=\"44\"\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\t:name=\"'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=\"44\">\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\t:name=\"'Name of the element with highlighted counter'\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:details=\"'1h'\"\n\t\t\t:counter-number=\"44\"\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\t:name=\"'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:details=\"'1h'\"\n\t\t\t:counter-number=\"44\"\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\t:name=\"'Name of the element with normal counter'\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:details=\"'1h'\"\n\t\t\t:counter-number=\"44\">\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\t:name=\"'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 #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\t:name=\"'Name of the element'\"\n\t\t\t:bold=\"false\"\n\t\t\t:details=\"'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 #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=\"#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 compact mode\n```vue\n<template>\n\t<ul style=\"width: 350px;\">\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:counter-number=\"1\"\n\t\t\t:compact=\"true\" >\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\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:compact=\"true\" >\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\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:counter-number=\"3\"\n\t\t\t:compact=\"true\" >\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\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:compact=\"true\"\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\tv-bind=\"{ ...to && { custom: true, to } }\">\n\t\t<li class=\"list-item__wrapper\"\n\t\t\t:class=\"{ 'list-item__wrapper--active' : isActive || active }\"\n\t\t\tv-bind=\"$attrs\">\n\t\t\t<div ref=\"list-item\"\n\t\t\t\tclass=\"list-item\"\n\t\t\t\t:class=\"{ 'list-item--compact': compact }\"\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.enter=\"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:class=\"{ 'list-item-content__main--oneline': oneLine }\">\n\n\t\t\t\t\t\t\t<!-- First line, name and details -->\n\t\t\t\t\t\t\t<div class=\"line-one\">\n\t\t\t\t\t\t\t\t<span class=\"line-one__name\">\n\t\t\t\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<span v-if=\"showDetails\"\n\t\t\t\t\t\t\t\t\tclass=\"line-one__details\">\n\t\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\t<slot name=\"details\">{{ details }}</slot>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<!-- Second line, subname and counter -->\n\t\t\t\t\t\t\t<div class=\"line-two\"\n\t\t\t\t\t\t\t\t:class=\"{'line-two--bold': bold}\">\n\t\t\t\t\t\t\t\t<span v-if=\"hasSubname\" class=\"line-two__subname\">\n\t\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\t<slot name=\"subname\" />\n\t\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t\t<!-- Counter and indicator -->\n\t\t\t\t\t\t\t\t<span v-if=\"counterNumber != 0 || hasIndicator\"\n\t\t\t\t\t\t\t\t\tv-show=\"showAdditionalElements\"\n\t\t\t\t\t\t\t\t\tclass=\"line-two__additional_elements\">\n\t\t\t\t\t\t\t\t\t<NcCounterBubble v-if=\"counterNumber != 0\"\n\t\t\t\t\t\t\t\t\t\t:active=\"isActive || active\"\n\t\t\t\t\t\t\t\t\t\tclass=\"line-two__counter\"\n\t\t\t\t\t\t\t\t\t\t:type=\"counterType\">\n\t\t\t\t\t\t\t\t\t\t{{ counterNumber }}\n\t\t\t\t\t\t\t\t\t</NcCounterBubble>\n\n\t\t\t\t\t\t\t\t\t<span v-if=\"hasIndicator\" class=\"line-two__indicator\">\n\t\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\t<slot name=\"indicator\" />\n\t\t\t\t\t\t\t\t\t</span>\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<!-- 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:aria-label=\"computedActionsAriaLabel\"\n\t\t\t\t\t\t@update:open=\"handleActionsUpdateOpen\">\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<!-- @slot Extra elements below the item -->\n\t\t\t\t<div v-if=\"$slots.extra\" class=\"list-item__extra\">\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'\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcListItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcCounterBubble,\n\t\tNcVNodes,\n\t},\n\n\tinheritAttrs: false,\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\trequired: true,\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: '',\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\t},\n\n\temits: [\n\t\t'click',\n\t\t'update:menuOpen',\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\toneLine() {\n\t\t\treturn !this.hasSubname && !this.showDetails\n\t\t},\n\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\n\t\tcomputedActionsAriaLabel() {\n\t\t\treturn this.actionsAriaLabel || t('Actions for item with name \"{name}\"', { name: this.name })\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} else {\n\t\t\t\twindow.location = this.href\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\n\t&--active,\n\t&.active {\n\t\t.list-item {\n\t\t\tbackground-color: var(--color-primary-element);\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.line-one__name, .line-one__details {\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\t\t}\n\n\t\t.line-two__subname {\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\t\t}\n\t}\n}\n\n// NcListItem\n.list-item {\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tposition: relative;\n\tflex: 0 0 auto;\n\tjustify-content: flex-start;\n\tpadding: 8px 10px;\n\t// 4px padding for the focus-visible styles. Width is reduced to compensate it\n\tmargin: 4px;\n\twidth: calc(100% - 8px);\n\t// Fix for border-radius being too large for 3-line entries like in Mail\n\t// 44px avatar size / 2 + 8px padding, and 2px for better visual quality\n\tborder-radius: 32px;\n\tcursor: pointer;\n\ttransition: background-color var(--animation-quick) ease-in-out;\n\tlist-style: none;\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\tpadding: 4px 10px;\n\n\t\t.list-item__anchor {\n\t\t\t.line-one, .line-two {\n\t\t\t\tmargin-block: -4px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__anchor {\n\t\tdisplay: flex;\n\t\tflex: 1 0 auto;\n\t\talign-items: center;\n\t\theight: var(--default-clickable-area);\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 1 auto;\n\t\tjustify-content: space-between;\n\t\tpadding-left: 8px;\n\n\t\t&__main {\n\t\t\tflex: 1 1 auto;\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&__actions {\n\t\t\tflex: 0 0 auto;\n\t\t\talign-self: center;\n\t\t\tjustify-content: center;\n\t\t\tmargin-left: 4px;\n\t\t}\n\t}\n\n\t&__extra {\n\t\tmargin-top: 4px;\n\t}\n}\n\n.line-one {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\twhite-space: nowrap;\n\tmargin: 0 auto 0 0;\n\toverflow: hidden;\n\n\t&__name {\n\t\toverflow: hidden;\n\t\tflex-grow: 1;\n\t\tcursor: pointer;\n\t\ttext-overflow: ellipsis;\n\t\tcolor: var(--color-main-text);\n\t\tfont-weight: bold;\n\t}\n\n\t&__details {\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tmargin: 0 9px;\n\t\tfont-weight: normal;\n\t}\n}\n\n.line-two {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tjustify-content: space-between;\n\twhite-space: nowrap;\n\t&--bold {\n\t\tfont-weight: bold;\n\t}\n\n\t&__subname {\n\t\toverflow: hidden;\n\t\tflex-grow: 1;\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__additional_elements {\n\t\tmargin: 2px 4px 0 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t&__indicator {\n\t\tmargin: 0 5px;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","NcActions","NcCounterBubble","_sfc_main$1","value","t","newValue","event","navigate","routerLinkHref","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","withCtx","isActive","createElementVNode","mergeProps","$props","normalizeClass","_cache","args","$options","$event","withKeys","openBlock","createElementBlock","_hoisted_5","renderSlot","_ctx","createTextVNode","toDisplayString","createCommentVNode","_hoisted_6","$data","withDirectives","_hoisted_7","_hoisted_8","vShow","_hoisted_9"],"mappings":"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"}

package/dist/chunks/NcListItem-DMxuTt4N.cjs

@@ -0,0 +1,306 @@
+var D = require("../assets/NcListItem-CIIpz4DX.css");
+const m = require("./NcActions-Bj5vZPRQ.cjs"), f = require("./NcCounterBubble-CsG1KK6d.cjs"), y = require("../Components/NcVNodes.cjs"), c = require("./_l10n-CEec8lDL.cjs"), e = require("vue"), _ = require("./_plugin-vue_export-helper-CTzpuyvq.cjs");
+c.register(c.t5);
+const N = {
+  name: "NcListItem",
+  components: {
+    NcActions: m.NcActions,
+    NcCounterBubble: f.NcCounterBubble,
+    NcVNodes: y
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * The details text displayed in the upper right part of the component
+     */
+    details: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Name (first line of text)
+     */
+    name: {
+      type: String,
+      required: !0
+    },
+    /**
+     * The route for the router link.
+     */
+    to: {
+      type: [String, Object],
+      default: null
+    },
+    /**
+     * The value for the external link
+     */
+    href: {
+      type: String,
+      default: "#"
+    },
+    target: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Id for the `<a>` element
+     */
+    anchorId: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Make subname bold
+     */
+    bold: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Show the NcListItem in compact design
+     */
+    compact: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Toggle the active state of the component
+     */
+    active: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Aria label for the wrapper element
+     */
+    linkAriaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Aria label for the actions toggle
+     */
+    actionsAriaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * If different from 0 this component will display the
+     * NcCounterBubble component
+     */
+    counterNumber: {
+      type: [Number, String],
+      default: 0
+    },
+    /**
+     * Outlined or highlighted state of the counter
+     */
+    counterType: {
+      type: String,
+      default: "",
+      validator(t) {
+        return ["highlighted", "outlined", ""].indexOf(t) !== -1;
+      }
+    },
+    /**
+     * To be used only when the elements in the actions menu are very important
+     */
+    forceDisplayActions: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "click",
+    "update:menuOpen"
+  ],
+  data() {
+    return {
+      hovered: !1,
+      hasActions: !1,
+      hasSubname: !1,
+      displayActionsOnHoverFocus: !1,
+      menuOpen: !1,
+      hasIndicator: !1,
+      hasDetails: !1
+    };
+  },
+  computed: {
+    oneLine() {
+      return !this.hasSubname && !this.showDetails;
+    },
+    showAdditionalElements() {
+      return !this.displayActionsOnHoverFocus || this.forceDisplayActions;
+    },
+    showDetails() {
+      return (this.details !== "" || this.hasDetails) && (!this.displayActionsOnHoverFocus || this.forceDisplayActions);
+    },
+    computedActionsAriaLabel() {
+      return this.actionsAriaLabel || c.t('Actions for item with name "{name}"', { name: this.name });
+    }
+  },
+  watch: {
+    menuOpen(t) {
+      !t && !this.hovered && (this.displayActionsOnHoverFocus = !1);
+    }
+  },
+  mounted() {
+    this.checkSlots();
+  },
+  updated() {
+    this.checkSlots();
+  },
+  methods: {
+    /**
+     * Handle link click
+     *
+     * @param {MouseEvent|KeyboardEvent} event - Native click or keydown event
+     * @param {Function} [navigate] - VueRouter link's navigate if any
+     * @param {string} [routerLinkHref] - VueRouter link's href
+     */
+    onClick(t, i, s) {
+      this.$emit("click", t), !(t.metaKey || t.altKey || t.ctrlKey || t.shiftKey) && (s ? (i == null || i(t), t.preventDefault()) : window.location = this.href);
+    },
+    showActions() {
+      this.hasActions && (this.displayActionsOnHoverFocus = !0), this.hovered = !1;
+    },
+    hideActions() {
+      this.displayActionsOnHoverFocus = !1;
+    },
+    /**
+     * @param {FocusEvent} event UI event
+     */
+    handleBlur(t) {
+      this.menuOpen || this.$refs["list-item"].contains(t.relatedTarget) || this.hideActions();
+    },
+    /**
+     * Hide the actions on mouseleave unless the menu is open
+     */
+    handleMouseleave() {
+      this.menuOpen || (this.displayActionsOnHoverFocus = !1), this.hovered = !1;
+    },
+    handleMouseover() {
+      this.showActions(), this.hovered = !0;
+    },
+    handleActionsUpdateOpen(t) {
+      this.menuOpen = t, this.$emit("update:menuOpen", t);
+    },
+    // Check if subname and actions slots are populated
+    checkSlots() {
+      this.hasActions !== !!this.$slots.actions && (this.hasActions = !!this.$slots.actions), this.hasSubname !== !!this.$slots.subname && (this.hasSubname = !!this.$slots.subname), this.hasIndicator !== !!this.$slots.indicator && (this.hasIndicator = !!this.$slots.indicator), this.hasDetails !== !!this.$slots.details && (this.hasDetails = !!this.$slots.details);
+    }
+  }
+}, A = ["id", "aria-label", "href", "target", "rel", "onClick", "onKeydown"], b = { class: "list-item-content" }, p = { class: "line-one" }, v = { class: "line-one__name" }, k = {
+  key: 0,
+  class: "line-one__details"
+}, w = {
+  key: 0,
+  class: "line-two__subname"
+}, S = {
+  key: 1,
+  class: "line-two__additional_elements"
+}, B = {
+  key: 1,
+  class: "line-two__indicator"
+}, C = {
+  key: 0,
+  class: "list-item__extra"
+};
+function V(t, i, s, O, l, n) {
+  const u = e.resolveComponent("NcCounterBubble"), h = e.resolveComponent("NcActions");
+  return e.openBlock(), e.createBlock(e.resolveDynamicComponent(s.to ? "router-link" : "NcVNodes"), e.normalizeProps(e.guardReactiveProps({ ...s.to && { custom: !0, to: s.to } })), {
+    default: e.withCtx(({ href: a, navigate: d, isActive: r }) => [
+      e.createElementVNode("li", e.mergeProps({
+        class: ["list-item__wrapper", { "list-item__wrapper--active": r || s.active }]
+      }, t.$attrs), [
+        e.createElementVNode("div", {
+          ref: "list-item",
+          class: e.normalizeClass(["list-item", { "list-item--compact": s.compact }]),
+          onMouseover: i[4] || (i[4] = (...o) => n.handleMouseover && n.handleMouseover(...o)),
+          onMouseleave: i[5] || (i[5] = (...o) => n.handleMouseleave && n.handleMouseleave(...o))
+        }, [
+          e.createElementVNode("a", {
+            id: s.anchorId || void 0,
+            "aria-label": s.linkAriaLabel,
+            class: "list-item__anchor",
+            href: a || s.href,
+            target: s.target || (s.href === "#" ? void 0 : "_blank"),
+            rel: s.href === "#" ? void 0 : "noopener noreferrer",
+            onFocus: i[0] || (i[0] = (...o) => n.showActions && n.showActions(...o)),
+            onFocusout: i[1] || (i[1] = (...o) => n.handleBlur && n.handleBlur(...o)),
+            onClick: (o) => n.onClick(o, d, a),
+            onKeydown: [
+              e.withKeys((o) => n.onClick(o, d, a), ["enter"]),
+              i[2] || (i[2] = e.withKeys((...o) => n.hideActions && n.hideActions(...o), ["esc"]))
+            ]
+          }, [
+            e.renderSlot(t.$slots, "icon", {}, void 0, !0),
+            e.createElementVNode("div", b, [
+              e.createElementVNode("div", {
+                class: e.normalizeClass(["list-item-content__main", { "list-item-content__main--oneline": n.oneLine }])
+              }, [
+                e.createElementVNode("div", p, [
+                  e.createElementVNode("span", v, e.toDisplayString(s.name), 1),
+                  n.showDetails ? (e.openBlock(), e.createElementBlock("span", k, [
+                    e.renderSlot(t.$slots, "details", {}, () => [
+                      e.createTextVNode(e.toDisplayString(s.details), 1)
+                    ], !0)
+                  ])) : e.createCommentVNode("", !0)
+                ]),
+                e.createElementVNode("div", {
+                  class: e.normalizeClass(["line-two", { "line-two--bold": s.bold }])
+                }, [
+                  l.hasSubname ? (e.openBlock(), e.createElementBlock("span", w, [
+                    e.renderSlot(t.$slots, "subname", {}, void 0, !0)
+                  ])) : e.createCommentVNode("", !0),
+                  s.counterNumber != 0 || l.hasIndicator ? e.withDirectives((e.openBlock(), e.createElementBlock("span", S, [
+                    s.counterNumber != 0 ? (e.openBlock(), e.createBlock(u, {
+                      key: 0,
+                      active: r || s.active,
+                      class: "line-two__counter",
+                      type: s.counterType
+                    }, {
+                      default: e.withCtx(() => [
+                        e.createTextVNode(e.toDisplayString(s.counterNumber), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["active", "type"])) : e.createCommentVNode("", !0),
+                    l.hasIndicator ? (e.openBlock(), e.createElementBlock("span", B, [
+                      e.renderSlot(t.$slots, "indicator", {}, void 0, !0)
+                    ])) : e.createCommentVNode("", !0)
+                  ], 512)), [
+                    [e.vShow, n.showAdditionalElements]
+                  ]) : e.createCommentVNode("", !0)
+                ], 2)
+              ], 2)
+            ])
+          ], 40, A),
+          e.withDirectives(e.createElementVNode("div", {
+            class: "list-item-content__actions",
+            onFocusout: i[3] || (i[3] = (...o) => n.handleBlur && n.handleBlur(...o))
+          }, [
+            e.createVNode(h, {
+              ref: "actions",
+              primary: r || s.active,
+              "aria-label": n.computedActionsAriaLabel,
+              "onUpdate:open": n.handleActionsUpdateOpen
+            }, {
+              default: e.withCtx(() => [
+                e.renderSlot(t.$slots, "actions", {}, void 0, !0)
+              ]),
+              _: 2
+            }, 1032, ["primary", "aria-label", "onUpdate:open"])
+          ], 544), [
+            [e.vShow, s.forceDisplayActions || l.displayActionsOnHoverFocus]
+          ]),
+          t.$slots.extra ? (e.openBlock(), e.createElementBlock("div", C, [
+            e.renderSlot(t.$slots, "extra", {}, void 0, !0)
+          ])) : e.createCommentVNode("", !0)
+        ], 34)
+      ], 16)
+    ]),
+    _: 3
+  }, 16);
+}
+const g = /* @__PURE__ */ _._export_sfc(N, [["render", V], ["__scopeId", "data-v-44cc705f"]]);
+exports.NcListItem = g;

package/dist/chunks/NcListItem-DMxuTt4N.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcListItem-DMxuTt4N.cjs","sources":["../../src/components/NcListItem/NcListItem.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2021 Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n-->\n<docs>\n\n### Default Usage\n\n```vue\n<template>\n\t<ul>\n\t\t<NcListItem\n\t\t\t:name=\"'This is an active element with highlighted counter'\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:details=\"'1h'\"\n\t\t\t:counter-number=\"44\"\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 #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\t:name=\"'This is an active element with outlined counter'\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:details=\"'1h'\"\n\t\t\t:counter-number=\"44\"\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\t:name=\"'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=\"44\">\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\t:name=\"'Name of the element with highlighted counter'\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:details=\"'1h'\"\n\t\t\t:counter-number=\"44\"\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\t:name=\"'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:details=\"'1h'\"\n\t\t\t:counter-number=\"44\"\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\t:name=\"'Name of the element with normal counter'\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:details=\"'1h'\"\n\t\t\t:counter-number=\"44\">\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\t:name=\"'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 #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\t:name=\"'Name of the element'\"\n\t\t\t:bold=\"false\"\n\t\t\t:details=\"'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 #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=\"#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 compact mode\n```vue\n<template>\n\t<ul style=\"width: 350px;\">\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:counter-number=\"1\"\n\t\t\t:compact=\"true\" >\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\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:compact=\"true\" >\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\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:counter-number=\"3\"\n\t\t\t:compact=\"true\" >\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\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:compact=\"true\"\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\tv-bind=\"{ ...to && { custom: true, to } }\">\n\t\t<li class=\"list-item__wrapper\"\n\t\t\t:class=\"{ 'list-item__wrapper--active' : isActive || active }\"\n\t\t\tv-bind=\"$attrs\">\n\t\t\t<div ref=\"list-item\"\n\t\t\t\tclass=\"list-item\"\n\t\t\t\t:class=\"{ 'list-item--compact': compact }\"\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.enter=\"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:class=\"{ 'list-item-content__main--oneline': oneLine }\">\n\n\t\t\t\t\t\t\t<!-- First line, name and details -->\n\t\t\t\t\t\t\t<div class=\"line-one\">\n\t\t\t\t\t\t\t\t<span class=\"line-one__name\">\n\t\t\t\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<span v-if=\"showDetails\"\n\t\t\t\t\t\t\t\t\tclass=\"line-one__details\">\n\t\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\t<slot name=\"details\">{{ details }}</slot>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<!-- Second line, subname and counter -->\n\t\t\t\t\t\t\t<div class=\"line-two\"\n\t\t\t\t\t\t\t\t:class=\"{'line-two--bold': bold}\">\n\t\t\t\t\t\t\t\t<span v-if=\"hasSubname\" class=\"line-two__subname\">\n\t\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\t<slot name=\"subname\" />\n\t\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t\t<!-- Counter and indicator -->\n\t\t\t\t\t\t\t\t<span v-if=\"counterNumber != 0 || hasIndicator\"\n\t\t\t\t\t\t\t\t\tv-show=\"showAdditionalElements\"\n\t\t\t\t\t\t\t\t\tclass=\"line-two__additional_elements\">\n\t\t\t\t\t\t\t\t\t<NcCounterBubble v-if=\"counterNumber != 0\"\n\t\t\t\t\t\t\t\t\t\t:active=\"isActive || active\"\n\t\t\t\t\t\t\t\t\t\tclass=\"line-two__counter\"\n\t\t\t\t\t\t\t\t\t\t:type=\"counterType\">\n\t\t\t\t\t\t\t\t\t\t{{ counterNumber }}\n\t\t\t\t\t\t\t\t\t</NcCounterBubble>\n\n\t\t\t\t\t\t\t\t\t<span v-if=\"hasIndicator\" class=\"line-two__indicator\">\n\t\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\t<slot name=\"indicator\" />\n\t\t\t\t\t\t\t\t\t</span>\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<!-- 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:aria-label=\"computedActionsAriaLabel\"\n\t\t\t\t\t\t@update:open=\"handleActionsUpdateOpen\">\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<!-- @slot Extra elements below the item -->\n\t\t\t\t<div v-if=\"$slots.extra\" class=\"list-item__extra\">\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'\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcListItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcCounterBubble,\n\t\tNcVNodes,\n\t},\n\n\tinheritAttrs: false,\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\trequired: true,\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: '',\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\t},\n\n\temits: [\n\t\t'click',\n\t\t'update:menuOpen',\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\toneLine() {\n\t\t\treturn !this.hasSubname && !this.showDetails\n\t\t},\n\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\n\t\tcomputedActionsAriaLabel() {\n\t\t\treturn this.actionsAriaLabel || t('Actions for item with name \"{name}\"', { name: this.name })\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} else {\n\t\t\t\twindow.location = this.href\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\n\t&--active,\n\t&.active {\n\t\t.list-item {\n\t\t\tbackground-color: var(--color-primary-element);\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.line-one__name, .line-one__details {\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\t\t}\n\n\t\t.line-two__subname {\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\t\t}\n\t}\n}\n\n// NcListItem\n.list-item {\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tposition: relative;\n\tflex: 0 0 auto;\n\tjustify-content: flex-start;\n\tpadding: 8px 10px;\n\t// 4px padding for the focus-visible styles. Width is reduced to compensate it\n\tmargin: 4px;\n\twidth: calc(100% - 8px);\n\t// Fix for border-radius being too large for 3-line entries like in Mail\n\t// 44px avatar size / 2 + 8px padding, and 2px for better visual quality\n\tborder-radius: 32px;\n\tcursor: pointer;\n\ttransition: background-color var(--animation-quick) ease-in-out;\n\tlist-style: none;\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\tpadding: 4px 10px;\n\n\t\t.list-item__anchor {\n\t\t\t.line-one, .line-two {\n\t\t\t\tmargin-block: -4px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__anchor {\n\t\tdisplay: flex;\n\t\tflex: 1 0 auto;\n\t\talign-items: center;\n\t\theight: var(--default-clickable-area);\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 1 auto;\n\t\tjustify-content: space-between;\n\t\tpadding-left: 8px;\n\n\t\t&__main {\n\t\t\tflex: 1 1 auto;\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&__actions {\n\t\t\tflex: 0 0 auto;\n\t\t\talign-self: center;\n\t\t\tjustify-content: center;\n\t\t\tmargin-left: 4px;\n\t\t}\n\t}\n\n\t&__extra {\n\t\tmargin-top: 4px;\n\t}\n}\n\n.line-one {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\twhite-space: nowrap;\n\tmargin: 0 auto 0 0;\n\toverflow: hidden;\n\n\t&__name {\n\t\toverflow: hidden;\n\t\tflex-grow: 1;\n\t\tcursor: pointer;\n\t\ttext-overflow: ellipsis;\n\t\tcolor: var(--color-main-text);\n\t\tfont-weight: bold;\n\t}\n\n\t&__details {\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tmargin: 0 9px;\n\t\tfont-weight: normal;\n\t}\n}\n\n.line-two {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tjustify-content: space-between;\n\twhite-space: nowrap;\n\t&--bold {\n\t\tfont-weight: bold;\n\t}\n\n\t&__subname {\n\t\toverflow: hidden;\n\t\tflex-grow: 1;\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__additional_elements {\n\t\tmargin: 2px 4px 0 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t&__indicator {\n\t\tmargin: 0 5px;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","NcActions","NcCounterBubble","Components_NcVNodes","value","_l10n","newValue","event","navigate","routerLinkHref","e","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","vue","isActive","$props","_cache","args","$options","$event","_hoisted_5","_ctx","_hoisted_6","$data","_hoisted_7","_hoisted_8","_hoisted_9"],"mappings":"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"}

package/dist/chunks/NcListItemIcon-BkAwX75l.cjs

@@ -0,0 +1,189 @@
+var k = require("../assets/NcListItemIcon-CaURDugr.css");
+const i = require("./NcAvatar-B3R0ACOT.cjs"), u = require("./NcHighlight-DlBY2lba.cjs"), m = require("./NcIconSvgWrapper-LZxj_D6o.cjs");
+require("@nextcloud/router");
+const e = require("vue");
+;/* empty css                                                                           */
+const h = require("./_plugin-vue_export-helper-CTzpuyvq.cjs");
+require("linkify-string");
+require("escape-html");
+require("striptags");
+const d = 8, c = 32, g = {
+  name: "NcListItemIcon",
+  components: {
+    NcAvatar: i.NcAvatar,
+    NcHighlight: u._sfc_main,
+    NcIconSvgWrapper: m.NcIconSvgWrapper
+  },
+  mixins: [
+    i.userStatus
+  ],
+  props: {
+    /**
+     * Default first line text
+     */
+    name: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Secondary optional line
+     * Only visible on size of 32 and above
+     */
+    subname: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Icon class to be displayed at the end of the component
+     */
+    icon: {
+      type: String,
+      default: ""
+    },
+    /**
+     * SVG icon to be displayed at the end of the component
+     */
+    iconSvg: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Descriptive name for the icon
+     */
+    iconName: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Search within the highlight of name/subname
+     */
+    search: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set a size in px that will define the avatar height/width
+     * and therefore, the height of the component
+     */
+    avatarSize: {
+      type: Number,
+      default: c
+    },
+    /**
+     * Disable the margins of this component.
+     * Useful for integration in `NcSelect` for example
+     */
+    noMargin: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * See the [Avatar](#Avatar) displayName prop
+     * Fallback to name
+     */
+    displayName: {
+      type: String,
+      default: null
+    },
+    /**
+     * See the [Avatar](#Avatar) isNoUser prop
+     * Enable/disable the UserStatus fetching
+     */
+    isNoUser: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Unique list item ID
+     */
+    id: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      margin: d
+    };
+  },
+  computed: {
+    hasIcon() {
+      return this.icon !== "";
+    },
+    hasIconSvg() {
+      return this.iconSvg !== "";
+    },
+    isValidSubname() {
+      var t, n;
+      return ((n = (t = this.subname) == null ? void 0 : t.trim) == null ? void 0 : n.call(t)) !== "";
+    },
+    isSizeBigEnough() {
+      return this.avatarSize >= c;
+    },
+    cssVars() {
+      const t = this.noMargin ? 0 : this.margin;
+      return {
+        "--height": this.avatarSize + 2 * t + "px",
+        "--margin": this.margin + "px"
+      };
+    },
+    /**
+     * Seperates the search property into two parts, the first one is the search part on the name, the second on the subname.
+     * @return {[string, string]}
+     */
+    searchParts() {
+      const t = /^([^<]*)<([^>]+)>?$/, n = this.search.match(t);
+      return this.isNoUser || !n ? [this.search, this.search] : [n[1].trim(), n[2]];
+    }
+  },
+  beforeMount() {
+    !this.isNoUser && !this.subname && this.fetchUserStatus(this.user);
+  }
+}, p = ["id"], N = { class: "option__details" }, S = { key: 1 }, _ = ["aria-label"];
+function v(t, n, a, y, I, r) {
+  const o = e.resolveComponent("NcAvatar"), s = e.resolveComponent("NcHighlight"), l = e.resolveComponent("NcIconSvgWrapper");
+  return e.openBlock(), e.createElementBlock("span", {
+    id: a.id,
+    class: "option",
+    style: e.normalizeStyle(r.cssVars)
+  }, [
+    e.createVNode(o, e.mergeProps(t.$attrs, {
+      "disable-menu": !0,
+      "disable-tooltip": !0,
+      "display-name": a.displayName || a.name,
+      "is-no-user": a.isNoUser,
+      size: a.avatarSize,
+      class: "option__avatar"
+    }), null, 16, ["display-name", "is-no-user", "size"]),
+    e.createElementVNode("div", N, [
+      e.createVNode(s, {
+        class: "option__lineone",
+        text: a.name,
+        search: r.searchParts[0]
+      }, null, 8, ["text", "search"]),
+      r.isValidSubname && r.isSizeBigEnough ? (e.openBlock(), e.createBlock(s, {
+        key: 0,
+        class: "option__linetwo",
+        text: a.subname,
+        search: r.searchParts[1]
+      }, null, 8, ["text", "search"])) : t.hasStatus ? (e.openBlock(), e.createElementBlock("span", S, [
+        e.createElementVNode("span", null, e.toDisplayString(t.userStatus.icon), 1),
+        e.createElementVNode("span", null, e.toDisplayString(t.userStatus.message), 1)
+      ])) : e.createCommentVNode("", !0)
+    ]),
+    e.renderSlot(t.$slots, "default", {}, () => [
+      r.hasIconSvg ? (e.openBlock(), e.createBlock(l, {
+        key: 0,
+        class: "option__icon",
+        svg: a.iconSvg,
+        name: a.iconName
+      }, null, 8, ["svg", "name"])) : r.hasIcon ? (e.openBlock(), e.createElementBlock("span", {
+        key: 1,
+        class: e.normalizeClass(["icon option__icon", a.icon]),
+        "aria-label": a.iconName
+      }, null, 10, _)) : e.createCommentVNode("", !0)
+    ], !0)
+  ], 12, p);
+}
+const f = /* @__PURE__ */ h._export_sfc(g, [["render", v], ["__scopeId", "data-v-467f3287"]]);
+exports.NcListItemIcon = f;