@nextcloud/vue 8.25.0 → 8.26.0

package/dist/chunks/{NcListItem-BBTd7BLc.mjs → NcListItem-CM-2Sxu0.mjs}

@@ -1,5 +1,5 @@
 import '../assets/NcListItem-DfaWGP5A.css';
-import { N as NcActions } from "./NcActions-Bkh3UMs3.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-BBTd7BLc.mjs.map
+//# sourceMappingURL=NcListItem-CM-2Sxu0.mjs.map

package/dist/chunks/{NcListItem-BBTd7BLc.mjs.map → NcListItem-CM-2Sxu0.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcListItem-BBTd7BLc.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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"}
+{"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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"}

package/dist/chunks/{NcListItemIcon-COUzDQI5.cjs → NcListItemIcon-BxBLI3Cf.cjs}

@@ -1,7 +1,7 @@
-require('../assets/NcMentionBubble-BL05HUeF.css');
+require('../assets/NcMentionBubble-CB5c5ue2.css');
 require('../assets/NcListItemIcon-UmX9YoH3.css');
 "use strict";
-const NcAvatar = require("./NcAvatar-Bp1wPu2I.cjs");
+const NcAvatar = require("./NcAvatar-CwEPANj3.cjs");
 const Components_NcHighlight = require("./index-DIJxEozm.cjs");
 const NcIconSvgWrapper = require("./NcIconSvgWrapper-BlucK1g3.cjs");
 require("../Composables/useIsFullscreen.cjs");
@@ -170,4 +170,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcListItemIcon = __component__.exports;
 exports.NcListItemIcon = NcListItemIcon;
-//# sourceMappingURL=NcListItemIcon-COUzDQI5.cjs.map
+//# sourceMappingURL=NcListItemIcon-BxBLI3Cf.cjs.map

package/dist/chunks/{NcListItemIcon-COUzDQI5.cjs.map → NcListItemIcon-BxBLI3Cf.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcListItemIcon-COUzDQI5.cjs","sources":["../../src/components/NcListItemIcon/NcListItemIcon.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n## This is used to display a avatar-name/subname + icon layout\nIt might be used for list rendering or within the multiselect for example\n\n> **Note:** Any binding will be forwarded on the Avatar component root\n\n```vue\n<NcListItemIcon name=\"User 1\" />\n<NcListItemIcon name=\"User 1\" subname=\"Hidden subname because size is too small\" :avatar-size=\"24\" />\n```\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"User 1\" :avatar-size=\"44\">\n\t\t\t<template>\n\t\t\t\t<Account :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport Account from 'vue-material-design-icons/Account.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccount,\n\t\t},\n\t}\n\t</script>\n```\n\n### With icon\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Group 1\" subname=\"13 members\" :is-no-user=\"true\">\n\t\t\t<template>\n\t\t\t\t<AccountMultiple :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccountMultiple,\n\t\t},\n\t}\n\t</script>\n```\n\n### Searching\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Test user 1\" subname=\"callmetest@domain.com\" search=\"test\" />\n\t\t<NcListItemIcon name=\"Testing admin\" subname=\"testme@example.com\" search=\"test\" />\n\t\t<NcListItemIcon name=\"Test group 2\" subname=\"loremipsum@domain.com\" :is-no-user=\"true\" search=\"test\">\n\t\t\t<template>\n\t\t\t\t<AccountMultiple :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccountMultiple,\n\t\t},\n\t}\n\t</script>\n```\n\n### With actions\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Test user 1\" subname=\"callmetest@domain.com\">\n\t\t\t<NcActions>\n\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tEdit\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tDelete\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActions>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport Pencil from 'vue-material-design-icons/Pencil.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPencil,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<span :id=\"id\"\n\t\tclass=\"option\"\n\t\t:class=\"{ 'option--compact': avatarSize < defaultSize }\"\n\t\t:style=\"cssVars\"\n\t\tv-on=\"$listeners\">\n\t\t<NcAvatar v-bind=\"$attrs\"\n\t\t\t:disable-menu=\"true\"\n\t\t\t:disable-tooltip=\"true\"\n\t\t\t:display-name=\"displayName || name\"\n\t\t\t:is-no-user=\"isNoUser\"\n\t\t\t:size=\"avatarSize\"\n\t\t\tclass=\"option__avatar\" />\n\t\t<div class=\"option__details\">\n\t\t\t<NcHighlight class=\"option__lineone\"\n\t\t\t\t:text=\"name\"\n\t\t\t\t:search=\"searchParts[0]\" />\n\t\t\t<NcHighlight v-if=\"isValidSubname && isSizeBigEnough\"\n\t\t\t\tclass=\"option__linetwo\"\n\t\t\t\t:text=\"subname\"\n\t\t\t\t:search=\"searchParts[1]\" />\n\t\t\t<span v-else-if=\"hasStatus\">\n\t\t\t\t<span>{{ userStatus.icon }}</span>\n\t\t\t\t<span>{{ userStatus.message }}</span>\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- @slot use this slot to add a custom icon or actions -->\n\t\t<slot>\n\t\t\t<NcIconSvgWrapper v-if=\"hasIconSvg\"\n\t\t\t\tclass=\"option__icon\"\n\t\t\t\t:svg=\"iconSvg\"\n\t\t\t\t:name=\"iconName\" />\n\t\t\t<span v-else-if=\"hasIcon\"\n\t\t\t\tclass=\"icon option__icon\"\n\t\t\t\t:class=\"icon\"\n\t\t\t\t:aria-label=\"iconName\" />\n\t\t</slot>\n\t</span>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcHighlight from '../NcHighlight/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nimport { userStatus } from '../../mixins/index.js'\n\n// global margin, ^2 ratio\nconst margin = 8\nconst defaultSize = 32\n\nexport default {\n\tname: 'NcListItemIcon',\n\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcHighlight,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tmixins: [\n\t\tuserStatus,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Default first line 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 * Secondary optional line\n\t\t * Only visible on size of 32 and above\n\t\t */\n\t\tsubname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Icon class to be displayed at the end of the component\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * SVG icon to be displayed at the end of the component\n\t\t */\n\t\ticonSvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Descriptive name for the icon\n\t\t */\n\t\ticonName: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Search within the highlight of name/subname\n\t\t */\n\t\tsearch: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Set a size in px that will define the avatar height/width\n\t\t * and therefore, the height of the component\n\t\t */\n\t\tavatarSize: {\n\t\t\ttype: Number,\n\t\t\tdefault: defaultSize,\n\t\t},\n\n\t\t/**\n\t\t * Disable the margins of this component.\n\t\t * Useful for integration in `NcSelect` for example\n\t\t */\n\t\tnoMargin: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * See the [Avatar](#Avatar) displayName prop\n\t\t * Fallback to name\n\t\t */\n\t\tdisplayName: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * See the [Avatar](#Avatar) isNoUser prop\n\t\t * Enable/disable the UserStatus fetching\n\t\t */\n\t\tisNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Unique list item ID\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tmargin,\n\t\t\tdefaultSize,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\thasIcon() {\n\t\t\treturn this.icon !== ''\n\t\t},\n\n\t\thasIconSvg() {\n\t\t\treturn this.iconSvg !== ''\n\t\t},\n\n\t\tisValidSubname() {\n\t\t\treturn this.subname?.trim?.() !== ''\n\t\t},\n\n\t\tisSizeBigEnough() {\n\t\t\treturn this.avatarSize >= 26 // the font sizes\n\t\t},\n\n\t\tcssVars() {\n\t\t\t// Don't use margin to calculate the height if noMargin\n\t\t\tconst margin = this.noMargin ? 0 : this.margin\n\n\t\t\treturn {\n\t\t\t\t'--height': this.avatarSize + 2 * margin + 'px',\n\t\t\t\t'--margin': this.margin + 'px',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Seperates the search property into two parts, the first one is the search part on the name, the second on the subname.\n\t\t * @return {[string, string]}\n\t\t */\n\t\tsearchParts() {\n\t\t\t// Match the email notation like \"Jane <j.doe@example.com>\" with the email address as matching group\n\t\t\tconst EMAIL_NOTATION = /^([^<]*)<([^>]+)>?$/\n\n\t\t\tconst match = this.search.match(EMAIL_NOTATION)\n\t\t\tif (this.isNoUser || !match) {\n\t\t\t\treturn [this.search, this.search]\n\t\t\t}\n\t\t\treturn [match[1].trim(), match[2]]\n\t\t},\n\t},\n\n\tbeforeMount() {\n\t\t// If we don't have a subname and if this is a user\n\t\tif (!this.isNoUser && !this.subname) {\n\t\t\tthis.fetchUserStatus(this.user)\n\t\t}\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.option {\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 100%;\n\theight: var(--height);\n\tcursor: inherit;\n\n\t&__avatar {\n\t\tmargin-right: var(--margin);\n\t}\n\n\t&__details {\n\t\tdisplay: flex;\n\t\tflex: 1 1;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-width: 0;\n\t}\n\n\t&__lineone {\n\t\tcolor: var(--color-main-text);\n\t}\n\n\t&__linetwo {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__lineone,\n\t&__linetwo {\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tline-height: 1.2;\n\t\tstrong {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n\n\t&--compact {\n\t\t.option {\n\t\t\t&__lineone {\n\t\t\t\tfont-size: 14px;\n\t\t\t}\n\t\t\t&__linetwo {\n\t\t\t\tfont-size: 11px;\n\t\t\t\tline-height: 1.5;\n\t\t\t\tmargin-top: -4px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__icon {\n\t\twidth: var(--default-clickable-area);\n\t\theight: var(--default-clickable-area);\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t&.icon {\n\t\t\tflex: 0 0 var(--default-clickable-area);\n\t\t\topacity: $opacity_normal;\n\t\t\tbackground-position: center;\n\t\t\tbackground-size: 16px;\n\t\t}\n\t}\n\n\t&__details,\n\t&__lineone,\n\t&__linetwo,\n\t&__icon {\n\t\tcursor: inherit;\n\t}\n}\n</style>\n"],"names":["NcAvatar","NcHighlight","NcIconSvgWrapper","userStatus","margin"],"mappings":";;;;;;;;;;;;AA+JA,MAAA,SAAA;AACA,MAAA,cAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAA,SAAA;AAAA,IACA,aAAAC,uBAAA;AAAA,IACA,kBAAAC,iBAAA;AAAA,EACA;AAAA,EAEA,QAAA;AAAA,IACAC,SAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;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,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,WAAA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,YAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,KAAA,SAAA,aAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,cAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAEA,YAAAC,UAAA,KAAA,WAAA,IAAA,KAAA;AAEA,aAAA;AAAA,QACA,YAAA,KAAA,aAAA,IAAAA,UAAA;AAAA,QACA,YAAA,KAAA,SAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAEA,YAAA,iBAAA;AAEA,YAAA,QAAA,KAAA,OAAA,MAAA,cAAA;AACA,UAAA,KAAA,YAAA,CAAA,OAAA;AACA,eAAA,CAAA,KAAA,QAAA,KAAA,MAAA;AAAA,MACA;AACA,aAAA,CAAA,MAAA,CAAA,EAAA,KAAA,GAAA,MAAA,CAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AAEA,QAAA,CAAA,KAAA,YAAA,CAAA,KAAA,SAAA;AACA,WAAA,gBAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcListItemIcon-BxBLI3Cf.cjs","sources":["../../src/components/NcListItemIcon/NcListItemIcon.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n## This is used to display a avatar-name/subname + icon layout\nIt might be used for list rendering or within the multiselect for example\n\n> **Note:** Any binding will be forwarded on the Avatar component root\n\n```vue\n<NcListItemIcon name=\"User 1\" />\n<NcListItemIcon name=\"User 1\" subname=\"Hidden subname because size is too small\" :avatar-size=\"24\" />\n```\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"User 1\" :avatar-size=\"44\">\n\t\t\t<template>\n\t\t\t\t<Account :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport Account from 'vue-material-design-icons/Account.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccount,\n\t\t},\n\t}\n\t</script>\n```\n\n### With icon\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Group 1\" subname=\"13 members\" :is-no-user=\"true\">\n\t\t\t<template>\n\t\t\t\t<AccountMultiple :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccountMultiple,\n\t\t},\n\t}\n\t</script>\n```\n\n### Searching\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Test user 1\" subname=\"callmetest@domain.com\" search=\"test\" />\n\t\t<NcListItemIcon name=\"Testing admin\" subname=\"testme@example.com\" search=\"test\" />\n\t\t<NcListItemIcon name=\"Test group 2\" subname=\"loremipsum@domain.com\" :is-no-user=\"true\" search=\"test\">\n\t\t\t<template>\n\t\t\t\t<AccountMultiple :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccountMultiple,\n\t\t},\n\t}\n\t</script>\n```\n\n### With actions\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Test user 1\" subname=\"callmetest@domain.com\">\n\t\t\t<NcActions>\n\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tEdit\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tDelete\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActions>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport Pencil from 'vue-material-design-icons/Pencil.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPencil,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<span :id=\"id\"\n\t\tclass=\"option\"\n\t\t:class=\"{ 'option--compact': avatarSize < defaultSize }\"\n\t\t:style=\"cssVars\"\n\t\tv-on=\"$listeners\">\n\t\t<NcAvatar v-bind=\"$attrs\"\n\t\t\t:disable-menu=\"true\"\n\t\t\t:disable-tooltip=\"true\"\n\t\t\t:display-name=\"displayName || name\"\n\t\t\t:is-no-user=\"isNoUser\"\n\t\t\t:size=\"avatarSize\"\n\t\t\tclass=\"option__avatar\" />\n\t\t<div class=\"option__details\">\n\t\t\t<NcHighlight class=\"option__lineone\"\n\t\t\t\t:text=\"name\"\n\t\t\t\t:search=\"searchParts[0]\" />\n\t\t\t<NcHighlight v-if=\"isValidSubname && isSizeBigEnough\"\n\t\t\t\tclass=\"option__linetwo\"\n\t\t\t\t:text=\"subname\"\n\t\t\t\t:search=\"searchParts[1]\" />\n\t\t\t<span v-else-if=\"hasStatus\">\n\t\t\t\t<span>{{ userStatus.icon }}</span>\n\t\t\t\t<span>{{ userStatus.message }}</span>\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- @slot use this slot to add a custom icon or actions -->\n\t\t<slot>\n\t\t\t<NcIconSvgWrapper v-if=\"hasIconSvg\"\n\t\t\t\tclass=\"option__icon\"\n\t\t\t\t:svg=\"iconSvg\"\n\t\t\t\t:name=\"iconName\" />\n\t\t\t<span v-else-if=\"hasIcon\"\n\t\t\t\tclass=\"icon option__icon\"\n\t\t\t\t:class=\"icon\"\n\t\t\t\t:aria-label=\"iconName\" />\n\t\t</slot>\n\t</span>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcHighlight from '../NcHighlight/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nimport { userStatus } from '../../mixins/index.js'\n\n// global margin, ^2 ratio\nconst margin = 8\nconst defaultSize = 32\n\nexport default {\n\tname: 'NcListItemIcon',\n\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcHighlight,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tmixins: [\n\t\tuserStatus,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Default first line 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 * Secondary optional line\n\t\t * Only visible on size of 32 and above\n\t\t */\n\t\tsubname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Icon class to be displayed at the end of the component\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * SVG icon to be displayed at the end of the component\n\t\t */\n\t\ticonSvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Descriptive name for the icon\n\t\t */\n\t\ticonName: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Search within the highlight of name/subname\n\t\t */\n\t\tsearch: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Set a size in px that will define the avatar height/width\n\t\t * and therefore, the height of the component\n\t\t */\n\t\tavatarSize: {\n\t\t\ttype: Number,\n\t\t\tdefault: defaultSize,\n\t\t},\n\n\t\t/**\n\t\t * Disable the margins of this component.\n\t\t * Useful for integration in `NcSelect` for example\n\t\t */\n\t\tnoMargin: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * See the [Avatar](#Avatar) displayName prop\n\t\t * Fallback to name\n\t\t */\n\t\tdisplayName: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * See the [Avatar](#Avatar) isNoUser prop\n\t\t * Enable/disable the UserStatus fetching\n\t\t */\n\t\tisNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Unique list item ID\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tmargin,\n\t\t\tdefaultSize,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\thasIcon() {\n\t\t\treturn this.icon !== ''\n\t\t},\n\n\t\thasIconSvg() {\n\t\t\treturn this.iconSvg !== ''\n\t\t},\n\n\t\tisValidSubname() {\n\t\t\treturn this.subname?.trim?.() !== ''\n\t\t},\n\n\t\tisSizeBigEnough() {\n\t\t\treturn this.avatarSize >= 26 // the font sizes\n\t\t},\n\n\t\tcssVars() {\n\t\t\t// Don't use margin to calculate the height if noMargin\n\t\t\tconst margin = this.noMargin ? 0 : this.margin\n\n\t\t\treturn {\n\t\t\t\t'--height': this.avatarSize + 2 * margin + 'px',\n\t\t\t\t'--margin': this.margin + 'px',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Seperates the search property into two parts, the first one is the search part on the name, the second on the subname.\n\t\t * @return {[string, string]}\n\t\t */\n\t\tsearchParts() {\n\t\t\t// Match the email notation like \"Jane <j.doe@example.com>\" with the email address as matching group\n\t\t\tconst EMAIL_NOTATION = /^([^<]*)<([^>]+)>?$/\n\n\t\t\tconst match = this.search.match(EMAIL_NOTATION)\n\t\t\tif (this.isNoUser || !match) {\n\t\t\t\treturn [this.search, this.search]\n\t\t\t}\n\t\t\treturn [match[1].trim(), match[2]]\n\t\t},\n\t},\n\n\tbeforeMount() {\n\t\t// If we don't have a subname and if this is a user\n\t\tif (!this.isNoUser && !this.subname) {\n\t\t\tthis.fetchUserStatus(this.user)\n\t\t}\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.option {\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 100%;\n\theight: var(--height);\n\tcursor: inherit;\n\n\t&__avatar {\n\t\tmargin-right: var(--margin);\n\t}\n\n\t&__details {\n\t\tdisplay: flex;\n\t\tflex: 1 1;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-width: 0;\n\t}\n\n\t&__lineone {\n\t\tcolor: var(--color-main-text);\n\t}\n\n\t&__linetwo {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__lineone,\n\t&__linetwo {\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tline-height: 1.2;\n\t\tstrong {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n\n\t&--compact {\n\t\t.option {\n\t\t\t&__lineone {\n\t\t\t\tfont-size: 14px;\n\t\t\t}\n\t\t\t&__linetwo {\n\t\t\t\tfont-size: 11px;\n\t\t\t\tline-height: 1.5;\n\t\t\t\tmargin-top: -4px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__icon {\n\t\twidth: var(--default-clickable-area);\n\t\theight: var(--default-clickable-area);\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t&.icon {\n\t\t\tflex: 0 0 var(--default-clickable-area);\n\t\t\topacity: $opacity_normal;\n\t\t\tbackground-position: center;\n\t\t\tbackground-size: 16px;\n\t\t}\n\t}\n\n\t&__details,\n\t&__lineone,\n\t&__linetwo,\n\t&__icon {\n\t\tcursor: inherit;\n\t}\n}\n</style>\n"],"names":["NcAvatar","NcHighlight","NcIconSvgWrapper","userStatus","margin"],"mappings":";;;;;;;;;;;;AA+JA,MAAA,SAAA;AACA,MAAA,cAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAA,SAAA;AAAA,IACA,aAAAC,uBAAA;AAAA,IACA,kBAAAC,iBAAA;AAAA,EACA;AAAA,EAEA,QAAA;AAAA,IACAC,SAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;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,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,WAAA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,YAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,KAAA,SAAA,aAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,cAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAEA,YAAAC,UAAA,KAAA,WAAA,IAAA,KAAA;AAEA,aAAA;AAAA,QACA,YAAA,KAAA,aAAA,IAAAA,UAAA;AAAA,QACA,YAAA,KAAA,SAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAEA,YAAA,iBAAA;AAEA,YAAA,QAAA,KAAA,OAAA,MAAA,cAAA;AACA,UAAA,KAAA,YAAA,CAAA,OAAA;AACA,eAAA,CAAA,KAAA,QAAA,KAAA,MAAA;AAAA,MACA;AACA,aAAA,CAAA,MAAA,CAAA,EAAA,KAAA,GAAA,MAAA,CAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AAEA,QAAA,CAAA,KAAA,YAAA,CAAA,KAAA,SAAA;AACA,WAAA,gBAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcListItemIcon-B16M-aHV.mjs → NcListItemIcon-qx58XY9w.mjs}

@@ -1,6 +1,6 @@
-import '../assets/NcMentionBubble-BL05HUeF.css';
+import '../assets/NcMentionBubble-CB5c5ue2.css';
 import '../assets/NcListItemIcon-UmX9YoH3.css';
-import { u as userStatus, N as NcAvatar } from "./NcAvatar-DOvpF1gr.mjs";
+import { u as userStatus, N as NcAvatar } from "./NcAvatar-C7__uk4K.mjs";
 import { N as NcHighlight } from "./index-Bz6q9mZw.mjs";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-RKuZn260.mjs";
 import "../Composables/useIsFullscreen.mjs";
@@ -171,4 +171,4 @@ const NcListItemIcon = __component__.exports;
 export {
   NcListItemIcon as N
 };
-//# sourceMappingURL=NcListItemIcon-B16M-aHV.mjs.map
+//# sourceMappingURL=NcListItemIcon-qx58XY9w.mjs.map

package/dist/chunks/{NcListItemIcon-B16M-aHV.mjs.map → NcListItemIcon-qx58XY9w.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcListItemIcon-B16M-aHV.mjs","sources":["../../src/components/NcListItemIcon/NcListItemIcon.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n## This is used to display a avatar-name/subname + icon layout\nIt might be used for list rendering or within the multiselect for example\n\n> **Note:** Any binding will be forwarded on the Avatar component root\n\n```vue\n<NcListItemIcon name=\"User 1\" />\n<NcListItemIcon name=\"User 1\" subname=\"Hidden subname because size is too small\" :avatar-size=\"24\" />\n```\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"User 1\" :avatar-size=\"44\">\n\t\t\t<template>\n\t\t\t\t<Account :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport Account from 'vue-material-design-icons/Account.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccount,\n\t\t},\n\t}\n\t</script>\n```\n\n### With icon\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Group 1\" subname=\"13 members\" :is-no-user=\"true\">\n\t\t\t<template>\n\t\t\t\t<AccountMultiple :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccountMultiple,\n\t\t},\n\t}\n\t</script>\n```\n\n### Searching\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Test user 1\" subname=\"callmetest@domain.com\" search=\"test\" />\n\t\t<NcListItemIcon name=\"Testing admin\" subname=\"testme@example.com\" search=\"test\" />\n\t\t<NcListItemIcon name=\"Test group 2\" subname=\"loremipsum@domain.com\" :is-no-user=\"true\" search=\"test\">\n\t\t\t<template>\n\t\t\t\t<AccountMultiple :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccountMultiple,\n\t\t},\n\t}\n\t</script>\n```\n\n### With actions\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Test user 1\" subname=\"callmetest@domain.com\">\n\t\t\t<NcActions>\n\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tEdit\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tDelete\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActions>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport Pencil from 'vue-material-design-icons/Pencil.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPencil,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<span :id=\"id\"\n\t\tclass=\"option\"\n\t\t:class=\"{ 'option--compact': avatarSize < defaultSize }\"\n\t\t:style=\"cssVars\"\n\t\tv-on=\"$listeners\">\n\t\t<NcAvatar v-bind=\"$attrs\"\n\t\t\t:disable-menu=\"true\"\n\t\t\t:disable-tooltip=\"true\"\n\t\t\t:display-name=\"displayName || name\"\n\t\t\t:is-no-user=\"isNoUser\"\n\t\t\t:size=\"avatarSize\"\n\t\t\tclass=\"option__avatar\" />\n\t\t<div class=\"option__details\">\n\t\t\t<NcHighlight class=\"option__lineone\"\n\t\t\t\t:text=\"name\"\n\t\t\t\t:search=\"searchParts[0]\" />\n\t\t\t<NcHighlight v-if=\"isValidSubname && isSizeBigEnough\"\n\t\t\t\tclass=\"option__linetwo\"\n\t\t\t\t:text=\"subname\"\n\t\t\t\t:search=\"searchParts[1]\" />\n\t\t\t<span v-else-if=\"hasStatus\">\n\t\t\t\t<span>{{ userStatus.icon }}</span>\n\t\t\t\t<span>{{ userStatus.message }}</span>\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- @slot use this slot to add a custom icon or actions -->\n\t\t<slot>\n\t\t\t<NcIconSvgWrapper v-if=\"hasIconSvg\"\n\t\t\t\tclass=\"option__icon\"\n\t\t\t\t:svg=\"iconSvg\"\n\t\t\t\t:name=\"iconName\" />\n\t\t\t<span v-else-if=\"hasIcon\"\n\t\t\t\tclass=\"icon option__icon\"\n\t\t\t\t:class=\"icon\"\n\t\t\t\t:aria-label=\"iconName\" />\n\t\t</slot>\n\t</span>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcHighlight from '../NcHighlight/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nimport { userStatus } from '../../mixins/index.js'\n\n// global margin, ^2 ratio\nconst margin = 8\nconst defaultSize = 32\n\nexport default {\n\tname: 'NcListItemIcon',\n\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcHighlight,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tmixins: [\n\t\tuserStatus,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Default first line 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 * Secondary optional line\n\t\t * Only visible on size of 32 and above\n\t\t */\n\t\tsubname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Icon class to be displayed at the end of the component\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * SVG icon to be displayed at the end of the component\n\t\t */\n\t\ticonSvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Descriptive name for the icon\n\t\t */\n\t\ticonName: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Search within the highlight of name/subname\n\t\t */\n\t\tsearch: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Set a size in px that will define the avatar height/width\n\t\t * and therefore, the height of the component\n\t\t */\n\t\tavatarSize: {\n\t\t\ttype: Number,\n\t\t\tdefault: defaultSize,\n\t\t},\n\n\t\t/**\n\t\t * Disable the margins of this component.\n\t\t * Useful for integration in `NcSelect` for example\n\t\t */\n\t\tnoMargin: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * See the [Avatar](#Avatar) displayName prop\n\t\t * Fallback to name\n\t\t */\n\t\tdisplayName: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * See the [Avatar](#Avatar) isNoUser prop\n\t\t * Enable/disable the UserStatus fetching\n\t\t */\n\t\tisNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Unique list item ID\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tmargin,\n\t\t\tdefaultSize,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\thasIcon() {\n\t\t\treturn this.icon !== ''\n\t\t},\n\n\t\thasIconSvg() {\n\t\t\treturn this.iconSvg !== ''\n\t\t},\n\n\t\tisValidSubname() {\n\t\t\treturn this.subname?.trim?.() !== ''\n\t\t},\n\n\t\tisSizeBigEnough() {\n\t\t\treturn this.avatarSize >= 26 // the font sizes\n\t\t},\n\n\t\tcssVars() {\n\t\t\t// Don't use margin to calculate the height if noMargin\n\t\t\tconst margin = this.noMargin ? 0 : this.margin\n\n\t\t\treturn {\n\t\t\t\t'--height': this.avatarSize + 2 * margin + 'px',\n\t\t\t\t'--margin': this.margin + 'px',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Seperates the search property into two parts, the first one is the search part on the name, the second on the subname.\n\t\t * @return {[string, string]}\n\t\t */\n\t\tsearchParts() {\n\t\t\t// Match the email notation like \"Jane <j.doe@example.com>\" with the email address as matching group\n\t\t\tconst EMAIL_NOTATION = /^([^<]*)<([^>]+)>?$/\n\n\t\t\tconst match = this.search.match(EMAIL_NOTATION)\n\t\t\tif (this.isNoUser || !match) {\n\t\t\t\treturn [this.search, this.search]\n\t\t\t}\n\t\t\treturn [match[1].trim(), match[2]]\n\t\t},\n\t},\n\n\tbeforeMount() {\n\t\t// If we don't have a subname and if this is a user\n\t\tif (!this.isNoUser && !this.subname) {\n\t\t\tthis.fetchUserStatus(this.user)\n\t\t}\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.option {\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 100%;\n\theight: var(--height);\n\tcursor: inherit;\n\n\t&__avatar {\n\t\tmargin-right: var(--margin);\n\t}\n\n\t&__details {\n\t\tdisplay: flex;\n\t\tflex: 1 1;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-width: 0;\n\t}\n\n\t&__lineone {\n\t\tcolor: var(--color-main-text);\n\t}\n\n\t&__linetwo {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__lineone,\n\t&__linetwo {\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tline-height: 1.2;\n\t\tstrong {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n\n\t&--compact {\n\t\t.option {\n\t\t\t&__lineone {\n\t\t\t\tfont-size: 14px;\n\t\t\t}\n\t\t\t&__linetwo {\n\t\t\t\tfont-size: 11px;\n\t\t\t\tline-height: 1.5;\n\t\t\t\tmargin-top: -4px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__icon {\n\t\twidth: var(--default-clickable-area);\n\t\theight: var(--default-clickable-area);\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t&.icon {\n\t\t\tflex: 0 0 var(--default-clickable-area);\n\t\t\topacity: $opacity_normal;\n\t\t\tbackground-position: center;\n\t\t\tbackground-size: 16px;\n\t\t}\n\t}\n\n\t&__details,\n\t&__lineone,\n\t&__linetwo,\n\t&__icon {\n\t\tcursor: inherit;\n\t}\n}\n</style>\n"],"names":["margin"],"mappings":";;;;;;;;;;;AA+JA,MAAA,SAAA;AACA,MAAA,cAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;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,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,WAAA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,YAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,KAAA,SAAA,aAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,cAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAEA,YAAAA,UAAA,KAAA,WAAA,IAAA,KAAA;AAEA,aAAA;AAAA,QACA,YAAA,KAAA,aAAA,IAAAA,UAAA;AAAA,QACA,YAAA,KAAA,SAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAEA,YAAA,iBAAA;AAEA,YAAA,QAAA,KAAA,OAAA,MAAA,cAAA;AACA,UAAA,KAAA,YAAA,CAAA,OAAA;AACA,eAAA,CAAA,KAAA,QAAA,KAAA,MAAA;AAAA,MACA;AACA,aAAA,CAAA,MAAA,CAAA,EAAA,KAAA,GAAA,MAAA,CAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AAEA,QAAA,CAAA,KAAA,YAAA,CAAA,KAAA,SAAA;AACA,WAAA,gBAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcListItemIcon-qx58XY9w.mjs","sources":["../../src/components/NcListItemIcon/NcListItemIcon.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n## This is used to display a avatar-name/subname + icon layout\nIt might be used for list rendering or within the multiselect for example\n\n> **Note:** Any binding will be forwarded on the Avatar component root\n\n```vue\n<NcListItemIcon name=\"User 1\" />\n<NcListItemIcon name=\"User 1\" subname=\"Hidden subname because size is too small\" :avatar-size=\"24\" />\n```\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"User 1\" :avatar-size=\"44\">\n\t\t\t<template>\n\t\t\t\t<Account :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport Account from 'vue-material-design-icons/Account.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccount,\n\t\t},\n\t}\n\t</script>\n```\n\n### With icon\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Group 1\" subname=\"13 members\" :is-no-user=\"true\">\n\t\t\t<template>\n\t\t\t\t<AccountMultiple :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccountMultiple,\n\t\t},\n\t}\n\t</script>\n```\n\n### Searching\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Test user 1\" subname=\"callmetest@domain.com\" search=\"test\" />\n\t\t<NcListItemIcon name=\"Testing admin\" subname=\"testme@example.com\" search=\"test\" />\n\t\t<NcListItemIcon name=\"Test group 2\" subname=\"loremipsum@domain.com\" :is-no-user=\"true\" search=\"test\">\n\t\t\t<template>\n\t\t\t\t<AccountMultiple :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccountMultiple,\n\t\t},\n\t}\n\t</script>\n```\n\n### With actions\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Test user 1\" subname=\"callmetest@domain.com\">\n\t\t\t<NcActions>\n\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tEdit\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tDelete\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActions>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport Pencil from 'vue-material-design-icons/Pencil.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPencil,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<span :id=\"id\"\n\t\tclass=\"option\"\n\t\t:class=\"{ 'option--compact': avatarSize < defaultSize }\"\n\t\t:style=\"cssVars\"\n\t\tv-on=\"$listeners\">\n\t\t<NcAvatar v-bind=\"$attrs\"\n\t\t\t:disable-menu=\"true\"\n\t\t\t:disable-tooltip=\"true\"\n\t\t\t:display-name=\"displayName || name\"\n\t\t\t:is-no-user=\"isNoUser\"\n\t\t\t:size=\"avatarSize\"\n\t\t\tclass=\"option__avatar\" />\n\t\t<div class=\"option__details\">\n\t\t\t<NcHighlight class=\"option__lineone\"\n\t\t\t\t:text=\"name\"\n\t\t\t\t:search=\"searchParts[0]\" />\n\t\t\t<NcHighlight v-if=\"isValidSubname && isSizeBigEnough\"\n\t\t\t\tclass=\"option__linetwo\"\n\t\t\t\t:text=\"subname\"\n\t\t\t\t:search=\"searchParts[1]\" />\n\t\t\t<span v-else-if=\"hasStatus\">\n\t\t\t\t<span>{{ userStatus.icon }}</span>\n\t\t\t\t<span>{{ userStatus.message }}</span>\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- @slot use this slot to add a custom icon or actions -->\n\t\t<slot>\n\t\t\t<NcIconSvgWrapper v-if=\"hasIconSvg\"\n\t\t\t\tclass=\"option__icon\"\n\t\t\t\t:svg=\"iconSvg\"\n\t\t\t\t:name=\"iconName\" />\n\t\t\t<span v-else-if=\"hasIcon\"\n\t\t\t\tclass=\"icon option__icon\"\n\t\t\t\t:class=\"icon\"\n\t\t\t\t:aria-label=\"iconName\" />\n\t\t</slot>\n\t</span>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcHighlight from '../NcHighlight/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nimport { userStatus } from '../../mixins/index.js'\n\n// global margin, ^2 ratio\nconst margin = 8\nconst defaultSize = 32\n\nexport default {\n\tname: 'NcListItemIcon',\n\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcHighlight,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tmixins: [\n\t\tuserStatus,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Default first line 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 * Secondary optional line\n\t\t * Only visible on size of 32 and above\n\t\t */\n\t\tsubname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Icon class to be displayed at the end of the component\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * SVG icon to be displayed at the end of the component\n\t\t */\n\t\ticonSvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Descriptive name for the icon\n\t\t */\n\t\ticonName: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Search within the highlight of name/subname\n\t\t */\n\t\tsearch: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Set a size in px that will define the avatar height/width\n\t\t * and therefore, the height of the component\n\t\t */\n\t\tavatarSize: {\n\t\t\ttype: Number,\n\t\t\tdefault: defaultSize,\n\t\t},\n\n\t\t/**\n\t\t * Disable the margins of this component.\n\t\t * Useful for integration in `NcSelect` for example\n\t\t */\n\t\tnoMargin: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * See the [Avatar](#Avatar) displayName prop\n\t\t * Fallback to name\n\t\t */\n\t\tdisplayName: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * See the [Avatar](#Avatar) isNoUser prop\n\t\t * Enable/disable the UserStatus fetching\n\t\t */\n\t\tisNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Unique list item ID\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tmargin,\n\t\t\tdefaultSize,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\thasIcon() {\n\t\t\treturn this.icon !== ''\n\t\t},\n\n\t\thasIconSvg() {\n\t\t\treturn this.iconSvg !== ''\n\t\t},\n\n\t\tisValidSubname() {\n\t\t\treturn this.subname?.trim?.() !== ''\n\t\t},\n\n\t\tisSizeBigEnough() {\n\t\t\treturn this.avatarSize >= 26 // the font sizes\n\t\t},\n\n\t\tcssVars() {\n\t\t\t// Don't use margin to calculate the height if noMargin\n\t\t\tconst margin = this.noMargin ? 0 : this.margin\n\n\t\t\treturn {\n\t\t\t\t'--height': this.avatarSize + 2 * margin + 'px',\n\t\t\t\t'--margin': this.margin + 'px',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Seperates the search property into two parts, the first one is the search part on the name, the second on the subname.\n\t\t * @return {[string, string]}\n\t\t */\n\t\tsearchParts() {\n\t\t\t// Match the email notation like \"Jane <j.doe@example.com>\" with the email address as matching group\n\t\t\tconst EMAIL_NOTATION = /^([^<]*)<([^>]+)>?$/\n\n\t\t\tconst match = this.search.match(EMAIL_NOTATION)\n\t\t\tif (this.isNoUser || !match) {\n\t\t\t\treturn [this.search, this.search]\n\t\t\t}\n\t\t\treturn [match[1].trim(), match[2]]\n\t\t},\n\t},\n\n\tbeforeMount() {\n\t\t// If we don't have a subname and if this is a user\n\t\tif (!this.isNoUser && !this.subname) {\n\t\t\tthis.fetchUserStatus(this.user)\n\t\t}\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.option {\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 100%;\n\theight: var(--height);\n\tcursor: inherit;\n\n\t&__avatar {\n\t\tmargin-right: var(--margin);\n\t}\n\n\t&__details {\n\t\tdisplay: flex;\n\t\tflex: 1 1;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-width: 0;\n\t}\n\n\t&__lineone {\n\t\tcolor: var(--color-main-text);\n\t}\n\n\t&__linetwo {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__lineone,\n\t&__linetwo {\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tline-height: 1.2;\n\t\tstrong {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n\n\t&--compact {\n\t\t.option {\n\t\t\t&__lineone {\n\t\t\t\tfont-size: 14px;\n\t\t\t}\n\t\t\t&__linetwo {\n\t\t\t\tfont-size: 11px;\n\t\t\t\tline-height: 1.5;\n\t\t\t\tmargin-top: -4px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__icon {\n\t\twidth: var(--default-clickable-area);\n\t\theight: var(--default-clickable-area);\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t&.icon {\n\t\t\tflex: 0 0 var(--default-clickable-area);\n\t\t\topacity: $opacity_normal;\n\t\t\tbackground-position: center;\n\t\t\tbackground-size: 16px;\n\t\t}\n\t}\n\n\t&__details,\n\t&__lineone,\n\t&__linetwo,\n\t&__icon {\n\t\tcursor: inherit;\n\t}\n}\n</style>\n"],"names":["margin"],"mappings":";;;;;;;;;;;AA+JA,MAAA,SAAA;AACA,MAAA,cAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;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,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,WAAA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,YAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,KAAA,SAAA,aAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,cAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAEA,YAAAA,UAAA,KAAA,WAAA,IAAA,KAAA;AAEA,aAAA;AAAA,QACA,YAAA,KAAA,aAAA,IAAAA,UAAA;AAAA,QACA,YAAA,KAAA,SAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAEA,YAAA,iBAAA;AAEA,YAAA,QAAA,KAAA,OAAA,MAAA,cAAA;AACA,UAAA,KAAA,YAAA,CAAA,OAAA;AACA,eAAA,CAAA,KAAA,QAAA,KAAA,MAAA;AAAA,MACA;AACA,aAAA,CAAA,MAAA,CAAA,EAAA,KAAA,GAAA,MAAA,CAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AAEA,QAAA,CAAA,KAAA,YAAA,CAAA,KAAA,SAAA;AACA,WAAA,gBAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcPopover-BxLo6SFb.cjs → NcPopover-B2z7TwNr.cjs}

@@ -1,4 +1,4 @@
-require('../assets/NcPopover-CWwUNpmE.css');
+require('../assets/NcPopover-Dx28oc68.css');
 "use strict";
 const Vue = require("vue");
 const floatingVue = require("floating-vue");
@@ -81,11 +81,20 @@ const _sfc_main = {
     },
     /**
      * Enable popover focus trap
+     *
+     * @deprecated use noFocusTrap instead
      */
     focusTrap: {
       type: Boolean,
       default: true
     },
+    /**
+     * Disable the popover focus trap.
+     */
+    noFocusTrap: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Set element to return focus to after focus trap deactivation
      *
@@ -166,7 +175,7 @@ const _sfc_main = {
      */
     async useFocusTrap() {
       await this.$nextTick();
-      if (!this.focusTrap) {
+      if (this.noFocusTrap || !this.focusTrap) {
         return;
       }
       const el = this.getPopoverContentElement();
@@ -263,4 +272,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcPopover = __component__.exports;
 exports.NcPopover = NcPopover;
-//# sourceMappingURL=NcPopover-BxLo6SFb.cjs.map
+//# sourceMappingURL=NcPopover-B2z7TwNr.cjs.map

package/dist/chunks/NcPopover-B2z7TwNr.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcPopover-B2z7TwNr.cjs","sources":["../../src/components/NcPopover/NcPopoverTriggerProvider.vue","../../src/components/NcPopover/NcPopover.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script>\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n\tname: 'NcPopoverTriggerProvider',\n\n\tprovide() {\n\t\treturn {\n\t\t\t'NcPopover:trigger:shown': () => this.shown,\n\t\t\t'NcPopover:trigger:attrs': () => this.triggerAttrs,\n\t\t}\n\t},\n\n\tprops: {\n\t\tshown: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t\tpopupRole: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\ttriggerAttrs() {\n\t\t\treturn {\n\t\t\t\t'aria-haspopup': this.popupRole,\n\t\t\t\t'aria-expanded': this.shown.toString(),\n\t\t\t}\n\t\t},\n\t},\n\n\trender() {\n\t\t// TODO: Vue 3 - replace with $slots\n\t\treturn this.$scopedSlots.default?.({\n\t\t\tattrs: this.triggerAttrs,\n\t\t})\n\t},\n})\n</script>\n","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component is just a wrapper for the floating-vue plugin by Akryum,\nplease refer to this documentation for customization:\nhttps://github.com/Akryum/floating-vue\n\nThis components has two slots:\n* 'trigger' which can be any html element and it will trigger the popover\nthis slot is optional since you can toggle the popover also by updating the\nopen prop on this component;\n\n* a default slot that is for the content of the popover.\n\n### Examples\n\n#### With a `<NcButton>` as a trigger:\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>I am the trigger</NcButton>\n\t\t\t</template>\n\t\t\t<template>\n\t\t\t\t<form tabindex=\"0\" role=\"dialog\" aria-labelledby=\"popover-example-dialog-header-1\" @submit.prevent>\n\t\t\t\t\t<h2 id=\"popover-example-dialog-header-1\">this is some content</h2>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>\n\t\t\t\t\t\tVestibulum eget placerat velit.\n\t\t\t\t\t</p>\n\t\t\t\t\t<label>\n\t\t\t\t\t\tLabel element\n\t\t\t\t\t\t<input type=\"text\" placeholder=\"input element\"/>\n\t\t\t\t\t</label>\n\t\t\t\t</form>\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### Without focus trap:\n\nThe [`focus-trap`](https://github.com/focus-trap/focus-trap) emits an error when used in a non-focusable element tree.\n\nThe prop `:focus-trap=\"false\"` help to prevent it when the default behavior is not relevant.\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover :focus-trap=\"false\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>Click me!</NcButton>\n\t\t\t</template>\n\t\t\t<template>\n\t\t\t\tHi! 🚀\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### With passing props to `floating-vue`'s `Dropdown`:\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover container=\"body\" :popper-hide-triggers=\"(triggers) => [...triggers, 'click']\" popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>I am the trigger</NcButton>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<NcButton>Click on the button will close NcPopover</NcButton>\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### With a custom button in as a trigger:\n\nWhen `<NcButton>` is used as a `<NcPopover>` trigger, it injects required for a11y attributes to the button.\n\nIf you are using your own custom button as a trigger make sure to bind `attrs` from the trigger slot props.\nSee code example below.\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover>\n\t\t\t<!-- Take \"attrs\" from the slot props -->\n\t\t\t<template #trigger=\"{ attrs }\">\n\t\t\t\t<!-- Bind attrs as the button attrs -->\n\t\t\t\t<button v-bind=\"attrs\">\n\t\t\t\t\tI am a custom button in the trigger\n\t\t\t\t</button>\n\t\t\t</template>\n\n\t\t\tHi! 🚀\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### Provide role for the popover content\n\nFor accessibility reasons, popover should have a role. Provide it to the `popup-role` and make sure that the popover content is an element with the same role.\n\nSee: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<!-- Provide popup role -->\n\t\t<NcPopover popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>Delete</NcButton>\n\t\t\t</template>\n\n\t\t\t<!-- Popover content should has the same role -->\n\t\t\t<div role=\"dialog\" aria-labelledby=\"popover-example-custom-role-1\" aria-modal=\"true\">\n\t\t\t\t<!-- This is not required but better to provide a label -->\n\t\t\t\t<header id=\"popover-example-custom-role-1\">\n\t\t\t\t\t<strong>Confirm remove</strong>\n\t\t\t\t</header>\n\t\t\t\t<NcButton type=\"danger\">Delete</NcButton>\n\t\t\t</div>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n</docs>\n\n<template>\n\t<Dropdown ref=\"popover\"\n\t\t:distance=\"10\"\n\t\t:arrow-padding=\"10\"\n\t\tv-bind=\"$attrs\"\n\t\t:no-auto-focus=\"true /* Handled by the focus trap */\"\n\t\t:popper-class=\"popoverBaseClass\"\n\t\t:shown=\"internalShown\"\n\t\tv-on=\"$listeners\"\n\t\t@update:shown=\"internalShown = $event\"\n\t\t@apply-show=\"afterShow\"\n\t\t@apply-hide=\"afterHide\">\n\t\t<NcPopoverTriggerProvider v-slot=\"slotProps\" :shown=\"internalShown\" :popup-role=\"popupRole\">\n\t\t\t<!-- This will be the popover target (for the events and position) -->\n\t\t\t<slot name=\"trigger\" v-bind=\"slotProps\" />\n\t\t</NcPopoverTriggerProvider>\n\n\t\t<!-- This will be the content of the popover -->\n\t\t<template #popper=\"slotProps\">\n\t\t\t<slot name=\"default\" v-bind=\"slotProps\" />\n\t\t</template>\n\t</Dropdown>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { Dropdown } from 'floating-vue'\nimport { createFocusTrap } from 'focus-trap'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport NcPopoverTriggerProvider from './NcPopoverTriggerProvider.vue'\n\n/**\n * @typedef {import('focus-trap').FocusTargetValueOrFalse} FocusTargetValueOrFalse\n * @typedef {FocusTargetValueOrFalse|() => FocusTargetValueOrFalse} SetReturnFocus\n */\nexport default {\n\tname: 'NcPopover',\n\n\tcomponents: {\n\t\tDropdown,\n\t\tNcPopoverTriggerProvider,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Show or hide the popper\n\t\t * @see https://floating-vue.starpad.dev/api/#shown\n\t\t */\n\t\tshown: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Popup role\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#values\n\t\t */\n\t\tpopupRole: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (value) => ['menu', 'listbox', 'tree', 'grid', 'dialog', 'true'].includes(value),\n\t\t},\n\n\t\tpopoverBaseClass: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Enable popover focus trap\n\t\t *\n\t\t * @deprecated use noFocusTrap instead\n\t\t */\n\t\tfocusTrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Disable the popover focus trap.\n\t\t */\n\t\tnoFocusTrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Set element to return focus to after focus trap deactivation\n\t\t *\n\t\t * @type {SetReturnFocus}\n\t\t */\n\t\tsetReturnFocus: {\n\t\t\tdefault: undefined,\n\t\t\ttype: [HTMLElement, SVGElement, String, Boolean, Function],\n\t\t},\n\t},\n\n\temits: [\n\t\t'after-show',\n\t\t'after-hide',\n\t\t/**\n\t\t * @see https://floating-vue.starpad.dev/api/#update-shown\n\t\t */\n\t\t'update:shown',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tinternalShown: this.shown,\n\t\t}\n\t},\n\n\twatch: {\n\t\tshown(value) {\n\t\t\tthis.internalShown = value\n\t\t},\n\n\t\tinternalShown(value) {\n\t\t\tthis.$emit('update:shown', value)\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkTriggerA11y()\n\t},\n\n\tbeforeDestroy() {\n\t\tthis.clearFocusTrap()\n\t\tthis.clearEscapeStopPropagation()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Check if the trigger has all required a11y attributes.\n\t\t * Important to check custom trigger button.\n\t\t */\n\t\tcheckTriggerA11y() {\n\t\t\tif (window.OC?.debug) {\n\t\t\t\tconst triggerContainer = this.getPopoverTriggerContainerElement()\n\t\t\t\tconst requiredTriggerButton = triggerContainer.querySelector('[aria-expanded]')\n\t\t\t\tif (!requiredTriggerButton) {\n\t\t\t\t\tVue.util.warn('It looks like you are using a custom button as a <NcPopover> or other popover #trigger. If you are not using <NcButton> as a trigger, you need to bind attrs from the #trigger slot props to your custom button. See <NcPopover> docs for an example.')\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Remove incorrect aria-describedby attribute from the trigger.\n\t\t * @see https://github.com/Akryum/floating-vue/blob/8d4f7125aae0e3ea00ba4093d6d2001ab15058f1/packages/floating-vue/src/components/Popper.ts#L734\n\t\t */\n\t\tremoveFloatingVueAriaDescribedBy() {\n\t\t\t// When the popover is shown, floating-vue mutates the root elements of the trigger adding data-popper-shown and incorrect aria-describedby attributes.\n\t\t\tconst triggerContainer = this.getPopoverTriggerContainerElement()\n\t\t\tconst triggerElements = triggerContainer.querySelectorAll('[data-popper-shown]')\n\t\t\tfor (const el of triggerElements) {\n\t\t\t\tel.removeAttribute('aria-describedby')\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @return {HTMLElement|undefined}\n\t\t */\n\t\tgetPopoverContentElement() {\n\t\t\treturn this.$refs.popover?.$refs.popperContent?.$el\n\t\t},\n\n\t\t/**\n\t\t * @return {HTMLElement|undefined}\n\t\t */\n\t\tgetPopoverTriggerContainerElement() {\n\t\t\t// TODO: Vue 3: should be\n\t\t\t// this.$refs.popover.$refs.popper.$refs.reference\n\t\t\treturn this.$refs.popover.$refs.reference\n\t\t},\n\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\tawait this.$nextTick()\n\n\t\t\tif (this.noFocusTrap || !this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel.tabIndex = -1\n\n\t\t\tif (!el) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Init focus trap\n\t\t\tthis.$focusTrap = createFocusTrap(el, {\n\t\t\t\t// Prevents to lose focus using esc key\n\t\t\t\t// Focus will be release when popover be hide\n\t\t\t\tescapeDeactivates: false,\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\tsetReturnFocus: this.setReturnFocus,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tfallBackFocus: el,\n\t\t\t})\n\t\t\tthis.$focusTrap.activate()\n\t\t},\n\n\t\t/**\n\t\t * Remove focus trap\n\t\t *\n\t\t * @param {object} options The configuration options for focusTrap\n\t\t */\n\t\tclearFocusTrap(options = {}) {\n\t\t\ttry {\n\t\t\t\tthis.$focusTrap?.deactivate(options)\n\t\t\t\tthis.$focusTrap = null\n\t\t\t} catch (err) {\n\t\t\t\tconsole.warn(err)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Add stopPropagation for Escape.\n\t\t * It prevents global Escape handling after closing popover.\n\t\t *\n\t\t * Manual event handling is used here instead of v-on because there is no direct access to the node.\n\t\t * Alternative - wrap <template #popover> in a div wrapper.\n\t\t */\n\t\taddEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.addEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * Remove stop Escape handler\n\t\t */\n\t\tclearEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.removeEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * @param {KeyboardEvent} event - native keydown event\n\t\t */\n\t\tstopKeydownEscapeHandler(event) {\n\t\t\tif (event.type === 'keydown' && event.key === 'Escape') {\n\t\t\t\tevent.stopPropagation()\n\t\t\t}\n\t\t},\n\n\t\tasync afterShow() {\n\t\t\tthis.getPopoverContentElement().addEventListener('transitionend', () => {\n\t\t\t\t/**\n\t\t\t\t * Triggered after the tooltip was visually displayed.\n\t\t\t\t *\n\t\t\t\t * This is different from the 'show' and 'apply-show' which\n\t\t\t\t * run earlier than this where there is no guarantee that the\n\t\t\t\t * tooltip is already visible and in the DOM.\n\t\t\t\t */\n\t\t\t\tthis.$emit('after-show')\n\t\t\t}, { once: true, passive: true })\n\n\t\t\tthis.removeFloatingVueAriaDescribedBy()\n\n\t\t\tawait this.$nextTick()\n\t\t\tawait this.useFocusTrap()\n\t\t\tthis.addEscapeStopPropagation()\n\t\t},\n\t\tafterHide() {\n\t\t\tthis.getPopoverContentElement().addEventListener('transitionend', () => {\n\t\t\t\t/**\n\t\t\t\t * Triggered after the tooltip was visually hidden.\n\t\t\t\t *\n\t\t\t\t * This is different from the 'hide' and 'apply-hide' which\n\t\t\t\t * run earlier than this where there is no guarantee that the\n\t\t\t\t * tooltip is already visible and in the DOM.\n\t\t\t\t */\n\t\t\t\tthis.$emit('after-hide')\n\t\t\t}, { once: true, passive: true })\n\n\t\t\tthis.clearFocusTrap()\n\t\t\tthis.clearEscapeStopPropagation()\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n$arrow-width: 10px;\n// Move the arrow just slightly inside the popover\n// To prevent a visual gap on page scaling\n$arrow-position: $arrow-width - 1px;\n\n// Size class comes from the floating-vue library we use\n.resize-observer {\n\tposition: absolute;\n\ttop: 0;\n\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\tleft: 0;\n\tz-index: -1;\n\twidth: 100%;\n\theight: 100%;\n\tborder: none;\n\tbackground-color: transparent;\n\tpointer-events: none;\n\tdisplay: block;\n\toverflow: hidden;\n\topacity: 0;\n\n\tobject {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\tleft: 0;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\toverflow: hidden;\n\t\tpointer-events: none;\n\t\tz-index: -1;\n\t}\n}\n\n.v-popper--theme-dropdown {\n\t&.v-popper__popper {\n\t\tz-index: 100000;\n\t\ttop: 0;\n\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\tleft: 0;\n\t\tdisplay: block !important;\n\n\t\t.v-popper__wrapper {\n\t\t\t/*\n\t\t\t * In theory, \"filter: drop-shadow\" would look better here with arrow shadow.\n\t\t\t * In fact, in results in a blurry popover in Chromium on scaling.\n\t\t\t * The hypothesis is that \"filter\" creates a new composition layer,\n\t\t\t * and with GPU acceleration requires the previous layers content to be rasterized.\n\t\t\t * In combination with translate3d from floating-vue, it makes Chromium to first render and rasterize the popover\n\t\t\t * and then apply scaling, which results in a blurry popover.\n\t\t\t */\n\t\t\tbox-shadow: 0 1px 10px var(--color-box-shadow);\n\t\t\tborder-radius: var(--border-radius-large);\n\t\t}\n\n\t\t.v-popper__inner {\n\t\t\tpadding: 0;\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-radius: var(--border-radius-large);\n\t\t\toverflow: hidden;\n\t\t\tbackground: var(--color-main-background);\n\t\t}\n\n\t\t.v-popper__arrow-container {\n\t\t\tposition: absolute;\n\t\t\tz-index: 1;\n\t\t\twidth: 0;\n\t\t\theight: 0;\n\t\t\tborder-style: solid;\n\t\t\tborder-color: transparent;\n\t\t\tborder-width: $arrow-width;\n\t\t}\n\n\t\t&[data-popper-placement^='top'] .v-popper__arrow-container {\n\t\t\tbottom: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-bottom-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-top-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='bottom'] .v-popper__arrow-container {\n\t\t\ttop: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-top-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-bottom-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='right'] .v-popper__arrow-container {\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tleft: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-left-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-right-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='left'] .v-popper__arrow-container {\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tright: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-right-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-left-color: var(--color-main-background);\n\t\t}\n\n\t\t&[aria-hidden='true'] {\n\t\t\tvisibility: hidden;\n\t\t\ttransition: opacity var(--animation-quick), visibility var(--animation-quick);\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&[aria-hidden='false'] {\n\t\t\tvisibility: visible;\n\t\t\ttransition: opacity var(--animation-quick);\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","defineComponent","Dropdown","Vue","createFocusTrap","getTrapStack"],"mappings":"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"}

package/dist/chunks/{NcPopover-w98cBbbF.mjs → NcPopover-kYsewfff.mjs}

@@ -1,4 +1,4 @@
-import '../assets/NcPopover-CWwUNpmE.css';
+import '../assets/NcPopover-Dx28oc68.css';
 import Vue, { defineComponent } from "vue";
 import { Dropdown } from "floating-vue";
 import { createFocusTrap } from "focus-trap";
@@ -78,11 +78,20 @@ const _sfc_main = {
     },
     /**
      * Enable popover focus trap
+     *
+     * @deprecated use noFocusTrap instead
      */
     focusTrap: {
       type: Boolean,
       default: true
     },
+    /**
+     * Disable the popover focus trap.
+     */
+    noFocusTrap: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Set element to return focus to after focus trap deactivation
      *
@@ -163,7 +172,7 @@ const _sfc_main = {
      */
     async useFocusTrap() {
       await this.$nextTick();
-      if (!this.focusTrap) {
+      if (this.noFocusTrap || !this.focusTrap) {
         return;
       }
       const el = this.getPopoverContentElement();
@@ -262,4 +271,4 @@ const NcPopover = __component__.exports;
 export {
   NcPopover as N
 };
-//# sourceMappingURL=NcPopover-w98cBbbF.mjs.map
+//# sourceMappingURL=NcPopover-kYsewfff.mjs.map

package/dist/chunks/NcPopover-kYsewfff.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcPopover-kYsewfff.mjs","sources":["../../src/components/NcPopover/NcPopoverTriggerProvider.vue","../../src/components/NcPopover/NcPopover.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script>\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n\tname: 'NcPopoverTriggerProvider',\n\n\tprovide() {\n\t\treturn {\n\t\t\t'NcPopover:trigger:shown': () => this.shown,\n\t\t\t'NcPopover:trigger:attrs': () => this.triggerAttrs,\n\t\t}\n\t},\n\n\tprops: {\n\t\tshown: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t\tpopupRole: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\ttriggerAttrs() {\n\t\t\treturn {\n\t\t\t\t'aria-haspopup': this.popupRole,\n\t\t\t\t'aria-expanded': this.shown.toString(),\n\t\t\t}\n\t\t},\n\t},\n\n\trender() {\n\t\t// TODO: Vue 3 - replace with $slots\n\t\treturn this.$scopedSlots.default?.({\n\t\t\tattrs: this.triggerAttrs,\n\t\t})\n\t},\n})\n</script>\n","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component is just a wrapper for the floating-vue plugin by Akryum,\nplease refer to this documentation for customization:\nhttps://github.com/Akryum/floating-vue\n\nThis components has two slots:\n* 'trigger' which can be any html element and it will trigger the popover\nthis slot is optional since you can toggle the popover also by updating the\nopen prop on this component;\n\n* a default slot that is for the content of the popover.\n\n### Examples\n\n#### With a `<NcButton>` as a trigger:\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>I am the trigger</NcButton>\n\t\t\t</template>\n\t\t\t<template>\n\t\t\t\t<form tabindex=\"0\" role=\"dialog\" aria-labelledby=\"popover-example-dialog-header-1\" @submit.prevent>\n\t\t\t\t\t<h2 id=\"popover-example-dialog-header-1\">this is some content</h2>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>\n\t\t\t\t\t\tVestibulum eget placerat velit.\n\t\t\t\t\t</p>\n\t\t\t\t\t<label>\n\t\t\t\t\t\tLabel element\n\t\t\t\t\t\t<input type=\"text\" placeholder=\"input element\"/>\n\t\t\t\t\t</label>\n\t\t\t\t</form>\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### Without focus trap:\n\nThe [`focus-trap`](https://github.com/focus-trap/focus-trap) emits an error when used in a non-focusable element tree.\n\nThe prop `:focus-trap=\"false\"` help to prevent it when the default behavior is not relevant.\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover :focus-trap=\"false\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>Click me!</NcButton>\n\t\t\t</template>\n\t\t\t<template>\n\t\t\t\tHi! 🚀\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### With passing props to `floating-vue`'s `Dropdown`:\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover container=\"body\" :popper-hide-triggers=\"(triggers) => [...triggers, 'click']\" popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>I am the trigger</NcButton>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<NcButton>Click on the button will close NcPopover</NcButton>\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### With a custom button in as a trigger:\n\nWhen `<NcButton>` is used as a `<NcPopover>` trigger, it injects required for a11y attributes to the button.\n\nIf you are using your own custom button as a trigger make sure to bind `attrs` from the trigger slot props.\nSee code example below.\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover>\n\t\t\t<!-- Take \"attrs\" from the slot props -->\n\t\t\t<template #trigger=\"{ attrs }\">\n\t\t\t\t<!-- Bind attrs as the button attrs -->\n\t\t\t\t<button v-bind=\"attrs\">\n\t\t\t\t\tI am a custom button in the trigger\n\t\t\t\t</button>\n\t\t\t</template>\n\n\t\t\tHi! 🚀\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### Provide role for the popover content\n\nFor accessibility reasons, popover should have a role. Provide it to the `popup-role` and make sure that the popover content is an element with the same role.\n\nSee: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<!-- Provide popup role -->\n\t\t<NcPopover popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>Delete</NcButton>\n\t\t\t</template>\n\n\t\t\t<!-- Popover content should has the same role -->\n\t\t\t<div role=\"dialog\" aria-labelledby=\"popover-example-custom-role-1\" aria-modal=\"true\">\n\t\t\t\t<!-- This is not required but better to provide a label -->\n\t\t\t\t<header id=\"popover-example-custom-role-1\">\n\t\t\t\t\t<strong>Confirm remove</strong>\n\t\t\t\t</header>\n\t\t\t\t<NcButton type=\"danger\">Delete</NcButton>\n\t\t\t</div>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n</docs>\n\n<template>\n\t<Dropdown ref=\"popover\"\n\t\t:distance=\"10\"\n\t\t:arrow-padding=\"10\"\n\t\tv-bind=\"$attrs\"\n\t\t:no-auto-focus=\"true /* Handled by the focus trap */\"\n\t\t:popper-class=\"popoverBaseClass\"\n\t\t:shown=\"internalShown\"\n\t\tv-on=\"$listeners\"\n\t\t@update:shown=\"internalShown = $event\"\n\t\t@apply-show=\"afterShow\"\n\t\t@apply-hide=\"afterHide\">\n\t\t<NcPopoverTriggerProvider v-slot=\"slotProps\" :shown=\"internalShown\" :popup-role=\"popupRole\">\n\t\t\t<!-- This will be the popover target (for the events and position) -->\n\t\t\t<slot name=\"trigger\" v-bind=\"slotProps\" />\n\t\t</NcPopoverTriggerProvider>\n\n\t\t<!-- This will be the content of the popover -->\n\t\t<template #popper=\"slotProps\">\n\t\t\t<slot name=\"default\" v-bind=\"slotProps\" />\n\t\t</template>\n\t</Dropdown>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { Dropdown } from 'floating-vue'\nimport { createFocusTrap } from 'focus-trap'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport NcPopoverTriggerProvider from './NcPopoverTriggerProvider.vue'\n\n/**\n * @typedef {import('focus-trap').FocusTargetValueOrFalse} FocusTargetValueOrFalse\n * @typedef {FocusTargetValueOrFalse|() => FocusTargetValueOrFalse} SetReturnFocus\n */\nexport default {\n\tname: 'NcPopover',\n\n\tcomponents: {\n\t\tDropdown,\n\t\tNcPopoverTriggerProvider,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Show or hide the popper\n\t\t * @see https://floating-vue.starpad.dev/api/#shown\n\t\t */\n\t\tshown: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Popup role\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#values\n\t\t */\n\t\tpopupRole: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (value) => ['menu', 'listbox', 'tree', 'grid', 'dialog', 'true'].includes(value),\n\t\t},\n\n\t\tpopoverBaseClass: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Enable popover focus trap\n\t\t *\n\t\t * @deprecated use noFocusTrap instead\n\t\t */\n\t\tfocusTrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Disable the popover focus trap.\n\t\t */\n\t\tnoFocusTrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Set element to return focus to after focus trap deactivation\n\t\t *\n\t\t * @type {SetReturnFocus}\n\t\t */\n\t\tsetReturnFocus: {\n\t\t\tdefault: undefined,\n\t\t\ttype: [HTMLElement, SVGElement, String, Boolean, Function],\n\t\t},\n\t},\n\n\temits: [\n\t\t'after-show',\n\t\t'after-hide',\n\t\t/**\n\t\t * @see https://floating-vue.starpad.dev/api/#update-shown\n\t\t */\n\t\t'update:shown',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tinternalShown: this.shown,\n\t\t}\n\t},\n\n\twatch: {\n\t\tshown(value) {\n\t\t\tthis.internalShown = value\n\t\t},\n\n\t\tinternalShown(value) {\n\t\t\tthis.$emit('update:shown', value)\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkTriggerA11y()\n\t},\n\n\tbeforeDestroy() {\n\t\tthis.clearFocusTrap()\n\t\tthis.clearEscapeStopPropagation()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Check if the trigger has all required a11y attributes.\n\t\t * Important to check custom trigger button.\n\t\t */\n\t\tcheckTriggerA11y() {\n\t\t\tif (window.OC?.debug) {\n\t\t\t\tconst triggerContainer = this.getPopoverTriggerContainerElement()\n\t\t\t\tconst requiredTriggerButton = triggerContainer.querySelector('[aria-expanded]')\n\t\t\t\tif (!requiredTriggerButton) {\n\t\t\t\t\tVue.util.warn('It looks like you are using a custom button as a <NcPopover> or other popover #trigger. If you are not using <NcButton> as a trigger, you need to bind attrs from the #trigger slot props to your custom button. See <NcPopover> docs for an example.')\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Remove incorrect aria-describedby attribute from the trigger.\n\t\t * @see https://github.com/Akryum/floating-vue/blob/8d4f7125aae0e3ea00ba4093d6d2001ab15058f1/packages/floating-vue/src/components/Popper.ts#L734\n\t\t */\n\t\tremoveFloatingVueAriaDescribedBy() {\n\t\t\t// When the popover is shown, floating-vue mutates the root elements of the trigger adding data-popper-shown and incorrect aria-describedby attributes.\n\t\t\tconst triggerContainer = this.getPopoverTriggerContainerElement()\n\t\t\tconst triggerElements = triggerContainer.querySelectorAll('[data-popper-shown]')\n\t\t\tfor (const el of triggerElements) {\n\t\t\t\tel.removeAttribute('aria-describedby')\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @return {HTMLElement|undefined}\n\t\t */\n\t\tgetPopoverContentElement() {\n\t\t\treturn this.$refs.popover?.$refs.popperContent?.$el\n\t\t},\n\n\t\t/**\n\t\t * @return {HTMLElement|undefined}\n\t\t */\n\t\tgetPopoverTriggerContainerElement() {\n\t\t\t// TODO: Vue 3: should be\n\t\t\t// this.$refs.popover.$refs.popper.$refs.reference\n\t\t\treturn this.$refs.popover.$refs.reference\n\t\t},\n\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\tawait this.$nextTick()\n\n\t\t\tif (this.noFocusTrap || !this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel.tabIndex = -1\n\n\t\t\tif (!el) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Init focus trap\n\t\t\tthis.$focusTrap = createFocusTrap(el, {\n\t\t\t\t// Prevents to lose focus using esc key\n\t\t\t\t// Focus will be release when popover be hide\n\t\t\t\tescapeDeactivates: false,\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\tsetReturnFocus: this.setReturnFocus,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tfallBackFocus: el,\n\t\t\t})\n\t\t\tthis.$focusTrap.activate()\n\t\t},\n\n\t\t/**\n\t\t * Remove focus trap\n\t\t *\n\t\t * @param {object} options The configuration options for focusTrap\n\t\t */\n\t\tclearFocusTrap(options = {}) {\n\t\t\ttry {\n\t\t\t\tthis.$focusTrap?.deactivate(options)\n\t\t\t\tthis.$focusTrap = null\n\t\t\t} catch (err) {\n\t\t\t\tconsole.warn(err)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Add stopPropagation for Escape.\n\t\t * It prevents global Escape handling after closing popover.\n\t\t *\n\t\t * Manual event handling is used here instead of v-on because there is no direct access to the node.\n\t\t * Alternative - wrap <template #popover> in a div wrapper.\n\t\t */\n\t\taddEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.addEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * Remove stop Escape handler\n\t\t */\n\t\tclearEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.removeEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * @param {KeyboardEvent} event - native keydown event\n\t\t */\n\t\tstopKeydownEscapeHandler(event) {\n\t\t\tif (event.type === 'keydown' && event.key === 'Escape') {\n\t\t\t\tevent.stopPropagation()\n\t\t\t}\n\t\t},\n\n\t\tasync afterShow() {\n\t\t\tthis.getPopoverContentElement().addEventListener('transitionend', () => {\n\t\t\t\t/**\n\t\t\t\t * Triggered after the tooltip was visually displayed.\n\t\t\t\t *\n\t\t\t\t * This is different from the 'show' and 'apply-show' which\n\t\t\t\t * run earlier than this where there is no guarantee that the\n\t\t\t\t * tooltip is already visible and in the DOM.\n\t\t\t\t */\n\t\t\t\tthis.$emit('after-show')\n\t\t\t}, { once: true, passive: true })\n\n\t\t\tthis.removeFloatingVueAriaDescribedBy()\n\n\t\t\tawait this.$nextTick()\n\t\t\tawait this.useFocusTrap()\n\t\t\tthis.addEscapeStopPropagation()\n\t\t},\n\t\tafterHide() {\n\t\t\tthis.getPopoverContentElement().addEventListener('transitionend', () => {\n\t\t\t\t/**\n\t\t\t\t * Triggered after the tooltip was visually hidden.\n\t\t\t\t *\n\t\t\t\t * This is different from the 'hide' and 'apply-hide' which\n\t\t\t\t * run earlier than this where there is no guarantee that the\n\t\t\t\t * tooltip is already visible and in the DOM.\n\t\t\t\t */\n\t\t\t\tthis.$emit('after-hide')\n\t\t\t}, { once: true, passive: true })\n\n\t\t\tthis.clearFocusTrap()\n\t\t\tthis.clearEscapeStopPropagation()\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n$arrow-width: 10px;\n// Move the arrow just slightly inside the popover\n// To prevent a visual gap on page scaling\n$arrow-position: $arrow-width - 1px;\n\n// Size class comes from the floating-vue library we use\n.resize-observer {\n\tposition: absolute;\n\ttop: 0;\n\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\tleft: 0;\n\tz-index: -1;\n\twidth: 100%;\n\theight: 100%;\n\tborder: none;\n\tbackground-color: transparent;\n\tpointer-events: none;\n\tdisplay: block;\n\toverflow: hidden;\n\topacity: 0;\n\n\tobject {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\tleft: 0;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\toverflow: hidden;\n\t\tpointer-events: none;\n\t\tz-index: -1;\n\t}\n}\n\n.v-popper--theme-dropdown {\n\t&.v-popper__popper {\n\t\tz-index: 100000;\n\t\ttop: 0;\n\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\tleft: 0;\n\t\tdisplay: block !important;\n\n\t\t.v-popper__wrapper {\n\t\t\t/*\n\t\t\t * In theory, \"filter: drop-shadow\" would look better here with arrow shadow.\n\t\t\t * In fact, in results in a blurry popover in Chromium on scaling.\n\t\t\t * The hypothesis is that \"filter\" creates a new composition layer,\n\t\t\t * and with GPU acceleration requires the previous layers content to be rasterized.\n\t\t\t * In combination with translate3d from floating-vue, it makes Chromium to first render and rasterize the popover\n\t\t\t * and then apply scaling, which results in a blurry popover.\n\t\t\t */\n\t\t\tbox-shadow: 0 1px 10px var(--color-box-shadow);\n\t\t\tborder-radius: var(--border-radius-large);\n\t\t}\n\n\t\t.v-popper__inner {\n\t\t\tpadding: 0;\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-radius: var(--border-radius-large);\n\t\t\toverflow: hidden;\n\t\t\tbackground: var(--color-main-background);\n\t\t}\n\n\t\t.v-popper__arrow-container {\n\t\t\tposition: absolute;\n\t\t\tz-index: 1;\n\t\t\twidth: 0;\n\t\t\theight: 0;\n\t\t\tborder-style: solid;\n\t\t\tborder-color: transparent;\n\t\t\tborder-width: $arrow-width;\n\t\t}\n\n\t\t&[data-popper-placement^='top'] .v-popper__arrow-container {\n\t\t\tbottom: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-bottom-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-top-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='bottom'] .v-popper__arrow-container {\n\t\t\ttop: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-top-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-bottom-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='right'] .v-popper__arrow-container {\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tleft: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-left-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-right-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='left'] .v-popper__arrow-container {\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tright: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-right-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-left-color: var(--color-main-background);\n\t\t}\n\n\t\t&[aria-hidden='true'] {\n\t\t\tvisibility: hidden;\n\t\t\ttransition: opacity var(--animation-quick), visibility var(--animation-quick);\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&[aria-hidden='false'] {\n\t\t\tvisibility: visible;\n\t\t\ttransition: opacity var(--animation-quick);\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main"],"mappings":"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"}