@nextcloud/vue 8.11.3 → 8.13.0

package/dist/chunks/{NcListItem-DwXB_QT2.cjs.map → NcListItem-PX9C1UU4.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcListItem-DwXB_QT2.cjs","sources":["../../src/components/NcListItem/NcListItem.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2021 Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n-->\n<docs>\n\n### Default Usage\n\n```vue\n<template>\n\t<ul>\n\t\t<NcListItem\n\t\t\t:name=\"'This is an active element with highlighted counter'\"\n\t\t\t:bold=\"true\"\n\t\t\t:active=\"true\"\n\t\t\t:details=\"'1h'\"\n\t\t\t:counter-number=\"44\"\n\t\t\tcounterType=\"highlighted\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #name>\n\t\t\t\t<span style=\"display: flex; color: var(--color-primary);\">\n\t\t\t\t\tName of the element with content\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 #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'This is an active element with outlined counter'\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"44\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'This is an active element with normal counter'\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"44\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element with highlighted counter'\"\n\t\t\t:bold=\"true\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:details=\"'1h'\"\n\t\t\t:counter-number=\"44\"\n\t\t\tcounterType=\"highlighted\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element with outlined counter'\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:counter-number=\"44\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element with normal counter'\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:details=\"'1h'\"\n\t\t\t:counter-number=\"44\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:bold=\"false\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #name>\n\t\t\t\t<span style=\"display: flex; gap: 0.5rem; color: var(--color-primary);\">\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-secondary);\">\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\t:name=\"'Without subname, Name of the element'\"\n\t\t\t:bold=\"false\"\n\t\t\t:details=\"'1h'\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #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\n\t:name=\"'This is an active element with highlighted counter'\"\n\t:bold=\"false\"\n\t:active=\"true\"\n\t:details=\"'1h'\"\n\t:counter-number=\"44\"\n\tone-line\n\tcounterType=\"highlighted\">\n\t<template #icon>\n\t\t<NcAvatar disable-menu :size=\"44\" 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=\"16\" 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 compact mode\n```vue\n<template>\n\t<ul style=\"width: 350px;\">\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:counter-number=\"1\"\n\t\t\t:compact=\"true\" >\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:compact=\"true\" >\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:counter-number=\"3\"\n\t\t\t:compact=\"true\" >\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:compact=\"true\"\n\t\t\t:counter-number=\"4\"\n\t\t\thref=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with an external link\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n<script>\n\timport IconNoteText from 'vue-material-design-icons/NoteText.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconNoteText,\n\t\t},\n\t}\n</script>\n```\n</docs>\n\n<template>\n\t<!-- This wrapper can be either a router link or a `<li>` -->\n\t<component :is=\"to ? 'router-link' : 'NcVNodes'\"\n\t\tv-slot=\"{ href: routerLinkHref, navigate, isActive }\"\n\t\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--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 != 0 || 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 != 0\"\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<!-- Actions -->\n\t\t\t\t<div v-show=\"forceDisplayActions || displayActionsOnHoverFocus\"\n\t\t\t\t\tclass=\"list-item-content__actions\"\n\t\t\t\t\t@focusout=\"handleBlur\">\n\t\t\t\t\t<NcActions ref=\"actions\"\n\t\t\t\t\t\t:primary=\"isActive || active\"\n\t\t\t\t\t\t:aria-label=\"computedActionsAriaLabel\"\n\t\t\t\t\t\t@update:open=\"handleActionsUpdateOpen\">\n\t\t\t\t\t\t<!-- @slot Provide the actions for the right side quick menu -->\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- @slot Extra elements below the item -->\n\t\t\t\t<div v-if=\"$slots.extra\" class=\"list-item__extra\">\n\t\t\t\t\t<slot name=\"extra\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</li>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcCounterBubble from '../NcCounterBubble/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcListItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcCounterBubble,\n\t\tNcVNodes,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The details text displayed in the upper right part of the component\n\t\t */\n\t\tdetails: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Name (first line of text)\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * 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: '',\n\t\t},\n\n\t\t/**\n\t\t * If different from 0 this component will display the\n\t\t * NcCounterBubble component\n\t\t */\n\t\t counterNumber: {\n\t\t\t type: [Number, String],\n\t\t\t default: 0,\n\t\t },\n\n\t\t/**\n\t\t * Outlined or highlighted state of the counter\n\t\t */\n\t\tcounterType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['highlighted', 'outlined', ''].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * To be used only when the elements in the actions menu are very important\n\t\t */\n\t\tforceDisplayActions: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\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\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\n\t\tcomputedActionsAriaLabel() {\n\t\t\treturn this.actionsAriaLabel || t('Actions for item with name \"{name}\"', { name: this.name })\n\t\t},\n\t},\n\n\twatch: {\n\n\t\tmenuOpen(newValue) {\n\t\t\t// A click outside both the menu and the root element hides the actions again\n\t\t\tif (!newValue && !this.hovered) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkSlots()\n\t},\n\n\tupdated() {\n\t\tthis.checkSlots()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Handle link click\n\t\t *\n\t\t * @param {MouseEvent|KeyboardEvent} event - Native click or keydown event\n\t\t * @param {Function} [navigate] - VueRouter link's navigate if any\n\t\t * @param {string} [routerLinkHref] - VueRouter link's href\n\t\t */\n\t\tonClick(event, navigate, routerLinkHref) {\n\t\t\t// Always forward native event\n\t\t\tthis.$emit('click', event)\n\t\t\t// Do not navigate with control keys - it is opening in a new tab\n\t\t\tif (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Prevent default link behaviour if it's a router-link and navigate manually\n\t\t\tif (routerLinkHref) {\n\t\t\t\tnavigate?.(event)\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\tshowActions() {\n\t\t\tif (this.hasActions) {\n\t\t\t\tthis.displayActionsOnHoverFocus = true\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thideActions() {\n\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t},\n\n\t\t/**\n\t\t * @param {FocusEvent} event UI event\n\t\t */\n\t\thandleBlur(event) {\n\t\t\t// do not hide if open\n\t\t\tif (this.menuOpen) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// do not hide if focus is kept within\n\t\t\tif (this.$refs['list-item'].contains(event.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hideActions()\n\t\t},\n\n\t\t/**\n\t\t * Hide the actions on mouseleave unless the menu is open\n\t\t */\n\t\thandleMouseleave() {\n\t\t\tif (!this.menuOpen) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thandleMouseover() {\n\t\t\tthis.showActions()\n\t\t\tthis.hovered = true\n\t\t},\n\n\t\thandleActionsUpdateOpen(e) {\n\t\t\tthis.menuOpen = e\n\t\t\tthis.$emit('update:menuOpen', e)\n\t\t},\n\n\t\t// Check if subname and actions slots are populated\n\t\tcheckSlots() {\n\t\t\tif (this.hasActions !== !!this.$slots.actions) {\n\t\t\t\tthis.hasActions = !!this.$slots.actions\n\t\t\t}\n\t\t\tif (this.hasSubname !== !!this.$slots.subname) {\n\t\t\t\tthis.hasSubname = !!this.$slots.subname\n\t\t\t}\n\t\t\tif (this.hasIndicator !== !!this.$slots.indicator) {\n\t\t\t\tthis.hasIndicator = !!this.$slots.indicator\n\t\t\t}\n\t\t\tif (this.hasDetails !== !!this.$slots.details) {\n\t\t\t\tthis.hasDetails = !!this.$slots.details\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.list-item__wrapper {\n\tdisplay: flex;\n\tposition: relative;\n\twidth: 100%;\n\n\t&--active,\n\t&.active {\n\t\t.list-item {\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t&:hover,\n\t\t\t&:focus-within,\n\t\t\t&:has(:focus-visible),\n\t\t\t&:has(:active) {\n\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t}\n\t\t}\n\n\t\t.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: 0 auto 0 0;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n\n.list-item-content__name {\n\tmin-width: 100px;\n\tmax-width: 300px;\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\tbox-sizing: border-box;\n\tdisplay: flex;\n\tposition: relative;\n\tflex: 0 0 auto;\n\tjustify-content: flex-start;\n\tpadding: 8px 10px;\n\t// 4px padding for the focus-visible styles. Width is reduced to compensate it\n\tmargin: 4px;\n\twidth: calc(100% - 8px);\n\t// Fix for border-radius being too large for 3-line entries like in Mail\n\t// 44px avatar size / 2 + 8px padding, and 2px for better visual quality\n\tborder-radius: 32px;\n\tcursor: pointer;\n\ttransition: background-color var(--animation-quick) ease-in-out;\n\tlist-style: none;\n\t&:hover,\n\t&:focus-within,\n\t&:has(:active),\n\t&:has(:focus-visible) {\n\t\tbackground-color: var(--color-background-hover);\n\t}\n\n\t&:has(&__anchor:focus-visible) {\n\t\toutline: 2px solid var(--color-main-text);\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background);\n\t}\n\n\t&--compact {\n\t\tpadding: 4px 10px;\n\n\t\t.list-item__anchor {\n\t\t\t.line-one, .line-two {\n\t\t\t\tmargin-block: -4px;\n\t\t\t}\n\t\t}\n\t}\n\t.list-item-content__details {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: end;\n\t\talign-items: end;\n\t}\n\t&--one-line {\n\t\tpadding: 0 9px;\n\t\tmargin: 2px;\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: unset;\n\t\t\tjustify-content: end;\n\t\t}\n\t}\n\n\t&__anchor {\n\t\tdisplay: flex;\n\t\tflex: 1 0 auto;\n\t\talign-items: center;\n\t\theight: var(--default-clickable-area);\n\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-left: 8px;\n\t\tmin-width: 0;\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&__actions {\n\t\t\tflex: 0 0 auto;\n\t\t\talign-self: center;\n\t\t\tjustify-content: center;\n\t\t\tmargin-left: 4px;\n\t\t}\n\t}\n\n\t&-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\t&__extra {\n\t\tmargin-top: 4px;\n\t}\n}\n\n</style>\n"],"names":["NcActions","NcCounterBubble","NcVNodes","t"],"mappings":"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"}
+{"version":3,"file":"NcListItem-PX9C1UU4.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\n\t\t\t:name=\"'This is an active element with highlighted counter'\"\n\t\t\t:bold=\"true\"\n\t\t\t:active=\"true\"\n\t\t\t:details=\"'1h'\"\n\t\t\t:counter-number=\"44\"\n\t\t\tcounterType=\"highlighted\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #name>\n\t\t\t\t<span style=\"display: flex; color: var(--color-primary);\">\n\t\t\t\t\tName of the element with content\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 #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'This is an active element with outlined counter'\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"44\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'This is an active element with normal counter'\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"44\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element with highlighted counter'\"\n\t\t\t:bold=\"true\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:details=\"'1h'\"\n\t\t\t:counter-number=\"44\"\n\t\t\tcounterType=\"highlighted\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element with outlined counter'\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:counter-number=\"44\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element with normal counter'\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:details=\"'1h'\"\n\t\t\t:counter-number=\"44\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:bold=\"false\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #name>\n\t\t\t\t<span style=\"display: flex; gap: 0.5rem; color: var(--color-primary);\">\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-secondary);\">\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\t:name=\"'Without subname, Name of the element'\"\n\t\t\t:bold=\"false\"\n\t\t\t:details=\"'1h'\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #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\n\t:name=\"'This is an active element with highlighted counter'\"\n\t:bold=\"false\"\n\t:active=\"true\"\n\t:details=\"'1h'\"\n\t:counter-number=\"44\"\n\tone-line\n\tcounterType=\"highlighted\">\n\t<template #icon>\n\t\t<NcAvatar disable-menu :size=\"44\" 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=\"16\" 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 compact mode\n```vue\n<template>\n\t<ul style=\"width: 350px;\">\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:counter-number=\"1\"\n\t\t\t:compact=\"true\" >\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:compact=\"true\" >\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:counter-number=\"3\"\n\t\t\t:compact=\"true\" >\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:compact=\"true\"\n\t\t\t:counter-number=\"4\"\n\t\t\thref=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with an external link\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n<script>\n\timport IconNoteText from 'vue-material-design-icons/NoteText.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconNoteText,\n\t\t},\n\t}\n</script>\n```\n</docs>\n\n<template>\n\t<!-- This wrapper can be either a router link or a `<li>` -->\n\t<component :is=\"to ? 'router-link' : 'NcVNodes'\"\n\t\tv-slot=\"{ href: routerLinkHref, navigate, isActive }\"\n\t\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--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 != 0 || 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 != 0\"\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<!-- Actions -->\n\t\t\t\t<div v-show=\"forceDisplayActions || displayActionsOnHoverFocus\"\n\t\t\t\t\tclass=\"list-item-content__actions\"\n\t\t\t\t\t@focusout=\"handleBlur\">\n\t\t\t\t\t<NcActions ref=\"actions\"\n\t\t\t\t\t\t:primary=\"isActive || active\"\n\t\t\t\t\t\t:aria-label=\"computedActionsAriaLabel\"\n\t\t\t\t\t\t@update:open=\"handleActionsUpdateOpen\">\n\t\t\t\t\t\t<!-- @slot Provide the actions for the right side quick menu -->\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- @slot Extra elements below the item -->\n\t\t\t\t<div v-if=\"$slots.extra\" class=\"list-item__extra\">\n\t\t\t\t\t<slot name=\"extra\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</li>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcCounterBubble from '../NcCounterBubble/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcListItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcCounterBubble,\n\t\tNcVNodes,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The details text displayed in the upper right part of the component\n\t\t */\n\t\tdetails: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Name (first line of text)\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * 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: '',\n\t\t},\n\n\t\t/**\n\t\t * If different from 0 this component will display the\n\t\t * NcCounterBubble component\n\t\t */\n\t\t counterNumber: {\n\t\t\t type: [Number, String],\n\t\t\t default: 0,\n\t\t },\n\n\t\t/**\n\t\t * Outlined or highlighted state of the counter\n\t\t */\n\t\tcounterType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['highlighted', 'outlined', ''].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * To be used only when the elements in the actions menu are very important\n\t\t */\n\t\tforceDisplayActions: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\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\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\n\t\tcomputedActionsAriaLabel() {\n\t\t\treturn this.actionsAriaLabel || t('Actions for item with name \"{name}\"', { name: this.name })\n\t\t},\n\t},\n\n\twatch: {\n\n\t\tmenuOpen(newValue) {\n\t\t\t// A click outside both the menu and the root element hides the actions again\n\t\t\tif (!newValue && !this.hovered) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkSlots()\n\t},\n\n\tupdated() {\n\t\tthis.checkSlots()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Handle link click\n\t\t *\n\t\t * @param {MouseEvent|KeyboardEvent} event - Native click or keydown event\n\t\t * @param {Function} [navigate] - VueRouter link's navigate if any\n\t\t * @param {string} [routerLinkHref] - VueRouter link's href\n\t\t */\n\t\tonClick(event, navigate, routerLinkHref) {\n\t\t\t// Always forward native event\n\t\t\tthis.$emit('click', event)\n\t\t\t// Do not navigate with control keys - it is opening in a new tab\n\t\t\tif (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Prevent default link behaviour if it's a router-link and navigate manually\n\t\t\tif (routerLinkHref) {\n\t\t\t\tnavigate?.(event)\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\tshowActions() {\n\t\t\tif (this.hasActions) {\n\t\t\t\tthis.displayActionsOnHoverFocus = true\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thideActions() {\n\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t},\n\n\t\t/**\n\t\t * @param {FocusEvent} event UI event\n\t\t */\n\t\thandleBlur(event) {\n\t\t\t// do not hide if open\n\t\t\tif (this.menuOpen) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// do not hide if focus is kept within\n\t\t\tif (this.$refs['list-item'].contains(event.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hideActions()\n\t\t},\n\n\t\t/**\n\t\t * Hide the actions on mouseleave unless the menu is open\n\t\t */\n\t\thandleMouseleave() {\n\t\t\tif (!this.menuOpen) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thandleMouseover() {\n\t\t\tthis.showActions()\n\t\t\tthis.hovered = true\n\t\t},\n\n\t\thandleActionsUpdateOpen(e) {\n\t\t\tthis.menuOpen = e\n\t\t\tthis.$emit('update:menuOpen', e)\n\t\t},\n\n\t\t// Check if subname and actions slots are populated\n\t\tcheckSlots() {\n\t\t\tif (this.hasActions !== !!this.$slots.actions) {\n\t\t\t\tthis.hasActions = !!this.$slots.actions\n\t\t\t}\n\t\t\tif (this.hasSubname !== !!this.$slots.subname) {\n\t\t\t\tthis.hasSubname = !!this.$slots.subname\n\t\t\t}\n\t\t\tif (this.hasIndicator !== !!this.$slots.indicator) {\n\t\t\t\tthis.hasIndicator = !!this.$slots.indicator\n\t\t\t}\n\t\t\tif (this.hasDetails !== !!this.$slots.details) {\n\t\t\t\tthis.hasDetails = !!this.$slots.details\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.list-item__wrapper {\n\tdisplay: flex;\n\tposition: relative;\n\twidth: 100%;\n\n\t&--active,\n\t&.active {\n\t\t.list-item {\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t&:hover,\n\t\t\t&:focus-within,\n\t\t\t&:has(:focus-visible),\n\t\t\t&:has(:active) {\n\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t}\n\t\t}\n\n\t\t.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: 0 auto 0 0;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n\n.list-item-content__name {\n\tmin-width: 100px;\n\tmax-width: 300px;\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\tbox-sizing: border-box;\n\tdisplay: flex;\n\tposition: relative;\n\tflex: 0 0 auto;\n\tjustify-content: flex-start;\n\tpadding: 8px 10px;\n\t// 4px padding for the focus-visible styles. Width is reduced to compensate it\n\tmargin: 4px;\n\twidth: calc(100% - 8px);\n\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\t&:hover,\n\t&:focus-within,\n\t&:has(:active),\n\t&:has(:focus-visible) {\n\t\tbackground-color: var(--color-background-hover);\n\t}\n\n\t&:has(&__anchor:focus-visible) {\n\t\toutline: 2px solid var(--color-main-text);\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background);\n\t}\n\n\t&--compact {\n\t\tpadding: 4px 10px;\n\n\t\t.list-item__anchor {\n\t\t\t.line-one, .line-two {\n\t\t\t\tmargin-block: -4px;\n\t\t\t}\n\t\t}\n\t}\n\t.list-item-content__details {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: end;\n\t\talign-items: end;\n\t}\n\t&--one-line {\n\t\tpadding: 0 9px;\n\t\tmargin: 2px;\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: unset;\n\t\t\tjustify-content: end;\n\t\t}\n\t}\n\n\t&__anchor {\n\t\tdisplay: flex;\n\t\tflex: 1 0 auto;\n\t\talign-items: center;\n\t\theight: var(--default-clickable-area);\n\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-left: 8px;\n\t\tmin-width: 0;\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&__actions {\n\t\t\tflex: 0 0 auto;\n\t\t\talign-self: center;\n\t\t\tjustify-content: center;\n\t\t\tmargin-left: 4px;\n\t\t}\n\t}\n\n\t&-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\t&__extra {\n\t\tmargin-top: 4px;\n\t}\n}\n\n</style>\n"],"names":[],"mappings":"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"}

package/dist/chunks/{NcListItemIcon-DKSzgujO.cjs → NcListItemIcon-CSD8rRYj.cjs}

@@ -1,9 +1,9 @@
-require('../assets/NcMentionBubble-DmzU72Mw.css');
-require('../assets/NcListItemIcon-B9UQBQSa.css');
+require('../assets/NcMentionBubble-B-xYaJDc.css');
+require('../assets/NcListItemIcon-Cd4723rU.css');
 "use strict";
-const NcAvatar = require("./NcAvatar-DvV77AjU.cjs");
-const Components_NcHighlight = require("./index-Dl-SBuhJ.cjs");
-const NcIconSvgWrapper = require("./NcIconSvgWrapper-D4GEZPIc.cjs");
+const NcAvatar = require("./NcAvatar-B1PwcHhO.cjs");
+const Components_NcHighlight = require("./index-BANjku4q.cjs");
+const NcIconSvgWrapper = require("./NcIconSvgWrapper-DaSgIT19.cjs");
 require("../Composables/useIsFullscreen.cjs");
 require("../Composables/useIsMobile.cjs");
 require("@nextcloud/router");
@@ -167,7 +167,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "562c32c6",
+  "014b79d9",
   null,
   null
 );

package/dist/chunks/NcListItemIcon-CSD8rRYj.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcListItemIcon-CSD8rRYj.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: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\tdata() {\n\t\treturn {\n\t\t\tmargin,\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 >= defaultSize\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.1em;\n\t\tstrong {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n\n\t&__icon {\n\t\twidth: $clickable-area;\n\t\theight: $clickable-area;\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t&.icon {\n\t\t\tflex: 0 0 $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":";;;;;;;;;;;;;AA8JA,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,OAAA;AACA,WAAA;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,eAAA,gBAAA,YAAA,mBAAA,SAAA,iCAAA;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-DONcrnT_.mjs → NcListItemIcon-NtOXrncP.mjs}

@@ -1,8 +1,8 @@
-import '../assets/NcMentionBubble-DmzU72Mw.css';
-import '../assets/NcListItemIcon-B9UQBQSa.css';
-import { N as NcAvatar, u as userStatus } from "./NcAvatar-BYvbqQP3.mjs";
-import { N as NcHighlight } from "./index-DYccGIvD.mjs";
-import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-5v5HBSpx.mjs";
+import '../assets/NcMentionBubble-B-xYaJDc.css';
+import '../assets/NcListItemIcon-Cd4723rU.css';
+import { N as NcAvatar, u as userStatus } from "./NcAvatar-DrN_43xE.mjs";
+import { N as NcHighlight } from "./index-CsogA-K5.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-Ckqpz-vm.mjs";
 import "../Composables/useIsFullscreen.mjs";
 import "../Composables/useIsMobile.mjs";
 import "@nextcloud/router";
@@ -166,7 +166,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "562c32c6",
+  "014b79d9",
   null,
   null
 );

package/dist/chunks/NcListItemIcon-NtOXrncP.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcListItemIcon-NtOXrncP.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: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\tdata() {\n\t\treturn {\n\t\t\tmargin,\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 >= defaultSize\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.1em;\n\t\tstrong {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n\n\t&__icon {\n\t\twidth: $clickable-area;\n\t\theight: $clickable-area;\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t&.icon {\n\t\t\tflex: 0 0 $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":";;;;;;;;;;;;AA8JA,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,OAAA;AACA,WAAA;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,eAAA,gBAAA,YAAA,mBAAA,SAAA,iCAAA;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/{NcPasswordField-Vyt7Pk2z.mjs → NcPasswordField-XxjYVmM9.mjs}

@@ -4,8 +4,8 @@ import debounce from "debounce";
 import axios from "@nextcloud/axios";
 import { loadState } from "@nextcloud/initial-state";
 import { generateOcsUrl } from "@nextcloud/router";
-import { r as register, q as t25, a as t } from "./_l10n-DwEsZ6zb.mjs";
-import { l as logger } from "./logger-C7ZZ6zFQ.mjs";
+import { r as register, w as t25, a as t } from "./_l10n-B6zipH_A.mjs";
+import { getLoggerBuilder } from "@nextcloud/logger";
 const _sfc_main$2 = {
   name: "EyeIcon",
   emits: ["click"],
@@ -77,6 +77,7 @@ var __component__$1 = /* @__PURE__ */ normalizeComponent(
 );
 const EyeOff = __component__$1.exports;
 register(t25);
+const logger = getLoggerBuilder().detectUser().setApp("@nextcloud/vue").build();
 const passwordPolicy = loadState("core", "capabilities", {}).password_policy || null;
 const NcInputFieldProps = new Set(Object.keys(NcInputField.props));
 const _sfc_main = {

package/dist/chunks/NcPasswordField-XxjYVmM9.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcPasswordField-XxjYVmM9.mjs","sources":["../../node_modules/vue-material-design-icons/Eye.vue","../../node_modules/vue-material-design-icons/EyeOff.vue","../../src/utils/logger.js","../../src/components/NcPasswordField/NcPasswordField.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : true\"\n        :aria-label=\"title\"\n        class=\"material-design-icon eye-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"EyeIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : true\"\n        :aria-label=\"title\"\n        class=\"material-design-icon eye-off-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"EyeOffIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","/**\n * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { getLoggerBuilder } from '@nextcloud/logger'\n\nexport default getLoggerBuilder()\n\t.detectUser()\n\t.setApp('@nextcloud/vue')\n\t.build()\n","<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose password field component.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcPasswordField :value.sync=\"text1\"\n\t\t\tlabel=\"Old password\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">New password</label>\n\t\t\t<NcPasswordField id=\"textField\"\n\t\t\t\t:value.sync=\"text2\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Min. 12 characters\" />\n\t\t</div>\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField2\">New password</label>\n\t\t\t<NcPasswordField id=\"textField2\"\n\t\t\t\t:value.sync=\"text3\"\n\t\t\t\t:error=\"true\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Min. 12 characters\"\n\t\t\t\thelper-text=\"Password is insecure\" />\n\t\t</div>\n\n\t\t<NcPasswordField :value.sync=\"text4\"\n\t\t\tlabel=\"Good new password\"\n\t\t\t:success=\"true\"\n\t\t\tplaceholder=\"Min. 12 characters\"\n\t\t\thelper-text=\"Password is secure\" />\n\n\t\t<NcPasswordField :value.sync=\"text5\"\n\t\t\t:disabled=\"true\"\n\t\t\tlabel=\"Disabled\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: 'hunter',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t}\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\tpadding-right: 14px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcInputField v-bind=\"propsAndAttrsToForward\"\n\t\tref=\"inputField\"\n\t\t:type=\"isPasswordHidden ? 'password' : 'text'\"\n\t\t:trailing-button-label=\"trailingButtonLabelPassword\"\n\t\t:helper-text=\"computedHelperText\"\n\t\t:error=\"computedError\"\n\t\t:success=\"computedSuccess\"\n\t\t:minlength=\"rules.minlength\"\n\t\tv-on=\"$listeners\"\n\t\t@trailing-button-click=\"togglePasswordVisibility\"\n\t\t@input=\"handleInput\">\n\t\t<!-- Default slot for the leading icon -->\n\t\t<slot />\n\t\t<template #trailing-button-icon>\n\t\t\t<Eye v-if=\"isPasswordHidden\" :size=\"18\" />\n\t\t\t<EyeOff v-else :size=\"18\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script>\n\nimport Eye from 'vue-material-design-icons/Eye.vue'\nimport EyeOff from 'vue-material-design-icons/EyeOff.vue'\nimport NcInputField from '../NcInputField/NcInputField.vue'\nimport debounce from 'debounce'\nimport axios from '@nextcloud/axios'\nimport { loadState } from '@nextcloud/initial-state'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport { t } from '../../l10n.js'\nimport logger from '../../utils/logger.js'\n\n/**\n * @typedef PasswordPolicy\n * @property {object} api - The URLs to the password_policy app methods\n * @property {string} api.generate - The URL to the password generator\n * @property {string} api.validate - The URL to the password validator\n * @property {boolean} enforceNonCommonPassword - Whether to enforce non common passwords\n * @property {boolean} enforceNumericCharacters - Whether to enforce numeric characters\n * @property {boolean} enforceSpecialCharacters - Whether to enforce special characters\n * @property {boolean} enforceUpperLowerCase - Whether to enforce upper and lower case\n * @property {number} minLength - The minimum length of the password\n */\n\n/** @type {PasswordPolicy|null} */\nconst passwordPolicy = loadState('core', 'capabilities', {}).password_policy || null\n\nconst NcInputFieldProps = new Set(Object.keys(NcInputField.props))\n\nexport default {\n\tname: 'NcPasswordField',\n\n\tcomponents: {\n\t\tNcInputField,\n\t\tEye,\n\t\tEyeOff,\n\t},\n\n\t// Allow forwarding all attributes\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\n\t\t// Reuse all the props from NcInputField for better typing and documentation\n\t\t...NcInputField.props,\n\n\t\t// Redefined props\n\n\t\t/**\n\t\t * Controls whether to display the trailing button.\n\t\t */\n\t\t showTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t// Removed NcInputField props, defined only by this component\n\n\t\ttrailingButtonLabel: undefined,\n\n\t\t// Custom props\n\n\t\t/**\n\t\t * Check if the user entered a valid password using the password_policy\n\t\t * app if available.\n\t\t *\n\t\t * Warning: this doesn't replace server side checking and will do nothing\n\t\t * if the password_policy app is disabled.\n\t\t */\n\t\tcheckPasswordStrength: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The minlength property defines the minimum number of characters\n\t\t * (as UTF-16 code units) the user can enter\n\t\t */\n\t\tminlength: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\n\t\t/**\n\t\t * The maxlength property defines the maximum number of characters\n\t\t * (as UTF-16 code units) the user can enter\n\t\t */\n\t\tmaxlength: {\n\t\t\ttype: Number,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'valid',\n\t\t'invalid',\n\t\t'update:value',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tisPasswordHidden: true,\n\t\t\tinternalHelpMessage: '',\n\t\t\tisValid: null,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcomputedError() {\n\t\t\treturn this.error || this.isValid === false\n\t\t},\n\t\tcomputedSuccess() {\n\t\t\treturn this.success || this.isValid === true\n\t\t},\n\t\tcomputedHelperText() {\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\treturn this.helperText\n\t\t\t}\n\t\t\treturn this.internalHelpMessage\n\t\t},\n\n\t\trules() {\n\t\t\tconst { minlength } = this\n\t\t\treturn {\n\t\t\t\tminlength: minlength ?? passwordPolicy?.minLength,\n\t\t\t}\n\t\t},\n\n\t\ttrailingButtonLabelPassword() {\n\t\t\treturn this.isPasswordHidden ? t('Show password') : t('Hide password')\n\t\t},\n\n\t\tpropsAndAttrsToForward() {\n\t\t\treturn {\n\t\t\t\t// Proxy all the HTML attributes\n\t\t\t\t...this.$attrs,\n\t\t\t\t// Proxy original NcInputField's props\n\t\t\t\t...Object.fromEntries(\n\t\t\t\t\tObject.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key)),\n\t\t\t\t),\n\t\t\t}\n\t\t},\n\t},\n\n\twatch: {\n\t\tvalue(newValue) {\n\t\t\tif (this.checkPasswordStrength) {\n\t\t\t\tif (passwordPolicy === null) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.checkPassword(newValue)\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.inputField.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.inputField.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\t/**\n\t\t\t * Triggers when the value inside the password field is\n\t\t\t * updated.\n\t\t\t *\n\t\t\t * @property {string} The new value\n\t\t\t */\n\t\t\tthis.$emit('update:value', event.target.value)\n\t\t},\n\t\ttogglePasswordVisibility() {\n\t\t\tthis.isPasswordHidden = !this.isPasswordHidden\n\t\t},\n\t\tcheckPassword: debounce(async function(password) {\n\t\t\ttry {\n\t\t\t\tconst { data } = await axios.post(generateOcsUrl('apps/password_policy/api/v1/validate'), { password })\n\t\t\t\tthis.isValid = data.ocs.data.passed\n\t\t\t\tif (data.ocs.data.passed) {\n\t\t\t\t\tthis.internalHelpMessage = t('Password is secure')\n\t\t\t\t\t/**\n\t\t\t\t\t * Triggers when the internal password_policy detect that the\n\t\t\t\t\t * password entered is valid.\n\t\t\t\t\t */\n\t\t\t\t\tthis.$emit('valid')\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tthis.internalHelpMessage = data.ocs.data.reason\n\t\t\t\t/**\n\t\t\t\t * Triggers when the internal password_policy detect that the\n\t\t\t\t * password entered is invalid.\n\t\t\t\t */\n\t\t\t\tthis.$emit('invalid')\n\t\t\t} catch (e) {\n\t\t\t\tlogger.error('Password policy returned an error', e)\n\t\t\t}\n\t\t}, 500),\n\t},\n}\n</script>\n"],"names":["_sfc_main"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/chunks/{NcPasswordField-CGhVkWI2.cjs → NcPasswordField-Y4-be0L7.cjs}

@@ -5,8 +5,8 @@ const debounce = require("debounce");
 const axios = require("@nextcloud/axios");
 const initialState = require("@nextcloud/initial-state");
 const router = require("@nextcloud/router");
-const _l10n = require("./_l10n-ftziezFF.cjs");
-const logger = require("./logger-BcZGm6Un.cjs");
+const _l10n = require("./_l10n-BGF_R72e.cjs");
+const logger$1 = require("@nextcloud/logger");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const debounce__default = /* @__PURE__ */ _interopDefault(debounce);
 const axios__default = /* @__PURE__ */ _interopDefault(axios);
@@ -81,6 +81,7 @@ var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const EyeOff = __component__$1.exports;
 _l10n.register(_l10n.t25);
+const logger = logger$1.getLoggerBuilder().detectUser().setApp("@nextcloud/vue").build();
 const passwordPolicy = initialState.loadState("core", "capabilities", {}).password_policy || null;
 const NcInputFieldProps = new Set(Object.keys(Components_NcInputField.props));
 const _sfc_main = {
@@ -230,7 +231,7 @@ const _sfc_main = {
         this.internalHelpMessage = data.ocs.data.reason;
         this.$emit("invalid");
       } catch (e) {
-        logger.logger.error("Password policy returned an error", e);
+        logger.error("Password policy returned an error", e);
       }
     }, 500)
   }

package/dist/chunks/NcPasswordField-Y4-be0L7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcPasswordField-Y4-be0L7.cjs","sources":["../../node_modules/vue-material-design-icons/Eye.vue","../../node_modules/vue-material-design-icons/EyeOff.vue","../../src/utils/logger.js","../../src/components/NcPasswordField/NcPasswordField.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : true\"\n        :aria-label=\"title\"\n        class=\"material-design-icon eye-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"EyeIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : true\"\n        :aria-label=\"title\"\n        class=\"material-design-icon eye-off-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"EyeOffIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","/**\n * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { getLoggerBuilder } from '@nextcloud/logger'\n\nexport default getLoggerBuilder()\n\t.detectUser()\n\t.setApp('@nextcloud/vue')\n\t.build()\n","<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose password field component.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcPasswordField :value.sync=\"text1\"\n\t\t\tlabel=\"Old password\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">New password</label>\n\t\t\t<NcPasswordField id=\"textField\"\n\t\t\t\t:value.sync=\"text2\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Min. 12 characters\" />\n\t\t</div>\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField2\">New password</label>\n\t\t\t<NcPasswordField id=\"textField2\"\n\t\t\t\t:value.sync=\"text3\"\n\t\t\t\t:error=\"true\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Min. 12 characters\"\n\t\t\t\thelper-text=\"Password is insecure\" />\n\t\t</div>\n\n\t\t<NcPasswordField :value.sync=\"text4\"\n\t\t\tlabel=\"Good new password\"\n\t\t\t:success=\"true\"\n\t\t\tplaceholder=\"Min. 12 characters\"\n\t\t\thelper-text=\"Password is secure\" />\n\n\t\t<NcPasswordField :value.sync=\"text5\"\n\t\t\t:disabled=\"true\"\n\t\t\tlabel=\"Disabled\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: 'hunter',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t}\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\tpadding-right: 14px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcInputField v-bind=\"propsAndAttrsToForward\"\n\t\tref=\"inputField\"\n\t\t:type=\"isPasswordHidden ? 'password' : 'text'\"\n\t\t:trailing-button-label=\"trailingButtonLabelPassword\"\n\t\t:helper-text=\"computedHelperText\"\n\t\t:error=\"computedError\"\n\t\t:success=\"computedSuccess\"\n\t\t:minlength=\"rules.minlength\"\n\t\tv-on=\"$listeners\"\n\t\t@trailing-button-click=\"togglePasswordVisibility\"\n\t\t@input=\"handleInput\">\n\t\t<!-- Default slot for the leading icon -->\n\t\t<slot />\n\t\t<template #trailing-button-icon>\n\t\t\t<Eye v-if=\"isPasswordHidden\" :size=\"18\" />\n\t\t\t<EyeOff v-else :size=\"18\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script>\n\nimport Eye from 'vue-material-design-icons/Eye.vue'\nimport EyeOff from 'vue-material-design-icons/EyeOff.vue'\nimport NcInputField from '../NcInputField/NcInputField.vue'\nimport debounce from 'debounce'\nimport axios from '@nextcloud/axios'\nimport { loadState } from '@nextcloud/initial-state'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport { t } from '../../l10n.js'\nimport logger from '../../utils/logger.js'\n\n/**\n * @typedef PasswordPolicy\n * @property {object} api - The URLs to the password_policy app methods\n * @property {string} api.generate - The URL to the password generator\n * @property {string} api.validate - The URL to the password validator\n * @property {boolean} enforceNonCommonPassword - Whether to enforce non common passwords\n * @property {boolean} enforceNumericCharacters - Whether to enforce numeric characters\n * @property {boolean} enforceSpecialCharacters - Whether to enforce special characters\n * @property {boolean} enforceUpperLowerCase - Whether to enforce upper and lower case\n * @property {number} minLength - The minimum length of the password\n */\n\n/** @type {PasswordPolicy|null} */\nconst passwordPolicy = loadState('core', 'capabilities', {}).password_policy || null\n\nconst NcInputFieldProps = new Set(Object.keys(NcInputField.props))\n\nexport default {\n\tname: 'NcPasswordField',\n\n\tcomponents: {\n\t\tNcInputField,\n\t\tEye,\n\t\tEyeOff,\n\t},\n\n\t// Allow forwarding all attributes\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\n\t\t// Reuse all the props from NcInputField for better typing and documentation\n\t\t...NcInputField.props,\n\n\t\t// Redefined props\n\n\t\t/**\n\t\t * Controls whether to display the trailing button.\n\t\t */\n\t\t showTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t// Removed NcInputField props, defined only by this component\n\n\t\ttrailingButtonLabel: undefined,\n\n\t\t// Custom props\n\n\t\t/**\n\t\t * Check if the user entered a valid password using the password_policy\n\t\t * app if available.\n\t\t *\n\t\t * Warning: this doesn't replace server side checking and will do nothing\n\t\t * if the password_policy app is disabled.\n\t\t */\n\t\tcheckPasswordStrength: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The minlength property defines the minimum number of characters\n\t\t * (as UTF-16 code units) the user can enter\n\t\t */\n\t\tminlength: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\n\t\t/**\n\t\t * The maxlength property defines the maximum number of characters\n\t\t * (as UTF-16 code units) the user can enter\n\t\t */\n\t\tmaxlength: {\n\t\t\ttype: Number,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'valid',\n\t\t'invalid',\n\t\t'update:value',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tisPasswordHidden: true,\n\t\t\tinternalHelpMessage: '',\n\t\t\tisValid: null,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcomputedError() {\n\t\t\treturn this.error || this.isValid === false\n\t\t},\n\t\tcomputedSuccess() {\n\t\t\treturn this.success || this.isValid === true\n\t\t},\n\t\tcomputedHelperText() {\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\treturn this.helperText\n\t\t\t}\n\t\t\treturn this.internalHelpMessage\n\t\t},\n\n\t\trules() {\n\t\t\tconst { minlength } = this\n\t\t\treturn {\n\t\t\t\tminlength: minlength ?? passwordPolicy?.minLength,\n\t\t\t}\n\t\t},\n\n\t\ttrailingButtonLabelPassword() {\n\t\t\treturn this.isPasswordHidden ? t('Show password') : t('Hide password')\n\t\t},\n\n\t\tpropsAndAttrsToForward() {\n\t\t\treturn {\n\t\t\t\t// Proxy all the HTML attributes\n\t\t\t\t...this.$attrs,\n\t\t\t\t// Proxy original NcInputField's props\n\t\t\t\t...Object.fromEntries(\n\t\t\t\t\tObject.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key)),\n\t\t\t\t),\n\t\t\t}\n\t\t},\n\t},\n\n\twatch: {\n\t\tvalue(newValue) {\n\t\t\tif (this.checkPasswordStrength) {\n\t\t\t\tif (passwordPolicy === null) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.checkPassword(newValue)\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.inputField.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.inputField.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\t/**\n\t\t\t * Triggers when the value inside the password field is\n\t\t\t * updated.\n\t\t\t *\n\t\t\t * @property {string} The new value\n\t\t\t */\n\t\t\tthis.$emit('update:value', event.target.value)\n\t\t},\n\t\ttogglePasswordVisibility() {\n\t\t\tthis.isPasswordHidden = !this.isPasswordHidden\n\t\t},\n\t\tcheckPassword: debounce(async function(password) {\n\t\t\ttry {\n\t\t\t\tconst { data } = await axios.post(generateOcsUrl('apps/password_policy/api/v1/validate'), { password })\n\t\t\t\tthis.isValid = data.ocs.data.passed\n\t\t\t\tif (data.ocs.data.passed) {\n\t\t\t\t\tthis.internalHelpMessage = t('Password is secure')\n\t\t\t\t\t/**\n\t\t\t\t\t * Triggers when the internal password_policy detect that the\n\t\t\t\t\t * password entered is valid.\n\t\t\t\t\t */\n\t\t\t\t\tthis.$emit('valid')\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tthis.internalHelpMessage = data.ocs.data.reason\n\t\t\t\t/**\n\t\t\t\t * Triggers when the internal password_policy detect that the\n\t\t\t\t * password entered is invalid.\n\t\t\t\t */\n\t\t\t\tthis.$emit('invalid')\n\t\t\t} catch (e) {\n\t\t\t\tlogger.error('Password policy returned an error', e)\n\t\t\t}\n\t\t}, 500),\n\t},\n}\n</script>\n"],"names":["_sfc_main","getLoggerBuilder","loadState","NcInputField","t","debounce","axios","generateOcsUrl"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/chunks/{NcPopover-BS1bBSkg.cjs → NcPopover-Cl1AvQ5o.cjs}

@@ -1,9 +1,9 @@
-require('../assets/NcPopover-BwI1hPzy.css');
+require('../assets/NcPopover-BDlL00qZ.css');
 "use strict";
 const Vue = require("vue");
 const floatingVue = require("floating-vue");
 const focusTrap = require("focus-trap");
-const focusTrap$1 = require("./focusTrap-Dsmd28wG.cjs");
+const focusTrap$1 = require("./focusTrap-EeXFmjdI.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-DbFIE4_M.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Vue__default = /* @__PURE__ */ _interopDefault(Vue);

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcPopover-Cl1AvQ5o.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>\n\t\t\t<slot />\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.js'\nimport NcPopoverTriggerProvider from './NcPopoverTriggerProvider.vue'\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\t\t/**\n\t\t * Enable popover focus trap\n\t\t */\n\t\tfocusTrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * Set element to return focus to after focus trap deactivation\n\t\t *\n\t\t * @type {import('focus-trap').FocusTargetValueOrFalse}\n\t\t */\n\t\tsetReturnFocus: {\n\t\t\tdefault: undefined,\n\t\t\ttype: [HTMLElement, SVGElement, String, Boolean],\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.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst el = this.getPopoverContentElement()\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})\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\tafterShow() {\n\t\t\tthis.removeFloatingVueAriaDescribedBy()\n\n\t\t\tthis.$nextTick(() => {\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\tthis.useFocusTrap()\n\t\t\t\tthis.addEscapeStopPropagation()\n\t\t\t})\n\t\t},\n\t\tafterHide() {\n\t\t\t/**\n\t\t\t * Triggered after the tooltip was visually hidden.\n\t\t\t */\n\t\t\tthis.$emit('after-hide')\n\t\t\tthis.clearFocusTrap()\n\t\t\tthis.clearEscapeStopPropagation()\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n\n.resize-observer {\n\tposition:absolute;\n\ttop:0;\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\n.resize-observer object {\n\tdisplay:block;\n\tposition:absolute;\n\ttop:0;\n\tleft:0;\n\theight:100%;\n\twidth:100%;\n\toverflow:hidden;\n\tpointer-events:none;\n\tz-index:-1\n}\n\n$arrow-width: 10px;\n\n.v-popper--theme-dropdown {\n\t&.v-popper__popper {\n\t\tz-index: 100000;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tdisplay: block !important;\n\n\t\tfilter: drop-shadow(0 1px 10px var(--color-box-shadow));\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-width;\n\t\t\tborder-bottom-width: 0;\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-width;\n\t\t\tborder-top-width: 0;\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\tleft: -$arrow-width;\n\t\t\tborder-left-width: 0;\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\tright: -$arrow-width;\n\t\t\tborder-right-width: 0;\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-foxJPAfG.mjs → NcPopover-VxUr4c6P.mjs}

@@ -1,8 +1,8 @@
-import '../assets/NcPopover-BwI1hPzy.css';
+import '../assets/NcPopover-BDlL00qZ.css';
 import Vue, { defineComponent } from "vue";
 import { Dropdown } from "floating-vue";
 import { createFocusTrap } from "focus-trap";
-import { g as getTrapStack } from "./focusTrap-hWDNhn4t.mjs";
+import { g as getTrapStack } from "./focusTrap-Cecv_gjR.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-D637Qkok.mjs";
 const _sfc_main$1 = defineComponent({
   name: "NcPopoverTriggerProvider",

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcPopover-VxUr4c6P.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>\n\t\t\t<slot />\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.js'\nimport NcPopoverTriggerProvider from './NcPopoverTriggerProvider.vue'\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\t\t/**\n\t\t * Enable popover focus trap\n\t\t */\n\t\tfocusTrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * Set element to return focus to after focus trap deactivation\n\t\t *\n\t\t * @type {import('focus-trap').FocusTargetValueOrFalse}\n\t\t */\n\t\tsetReturnFocus: {\n\t\t\tdefault: undefined,\n\t\t\ttype: [HTMLElement, SVGElement, String, Boolean],\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.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst el = this.getPopoverContentElement()\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})\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\tafterShow() {\n\t\t\tthis.removeFloatingVueAriaDescribedBy()\n\n\t\t\tthis.$nextTick(() => {\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\tthis.useFocusTrap()\n\t\t\t\tthis.addEscapeStopPropagation()\n\t\t\t})\n\t\t},\n\t\tafterHide() {\n\t\t\t/**\n\t\t\t * Triggered after the tooltip was visually hidden.\n\t\t\t */\n\t\t\tthis.$emit('after-hide')\n\t\t\tthis.clearFocusTrap()\n\t\t\tthis.clearEscapeStopPropagation()\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n\n.resize-observer {\n\tposition:absolute;\n\ttop:0;\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\n.resize-observer object {\n\tdisplay:block;\n\tposition:absolute;\n\ttop:0;\n\tleft:0;\n\theight:100%;\n\twidth:100%;\n\toverflow:hidden;\n\tpointer-events:none;\n\tz-index:-1\n}\n\n$arrow-width: 10px;\n\n.v-popper--theme-dropdown {\n\t&.v-popper__popper {\n\t\tz-index: 100000;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tdisplay: block !important;\n\n\t\tfilter: drop-shadow(0 1px 10px var(--color-box-shadow));\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-width;\n\t\t\tborder-bottom-width: 0;\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-width;\n\t\t\tborder-top-width: 0;\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\tleft: -$arrow-width;\n\t\t\tborder-left-width: 0;\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\tright: -$arrow-width;\n\t\t\tborder-right-width: 0;\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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"}

package/dist/chunks/{NcProgressBar-mFqoqB4L.cjs → NcProgressBar-BnKA91Pj.cjs}

@@ -1,4 +1,4 @@
-require('../assets/NcProgressBar-D5VftcJm.css');
+require('../assets/NcProgressBar-BsqdCn-x.css');
 "use strict";
 const Vue = require("vue");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-DbFIE4_M.cjs");
@@ -88,7 +88,7 @@ const __default__ = {
 };
 const __injectCSSVars__ = () => {
   Vue.useCssVars((_vm, _setup) => ({
-    "0f3d9b00": _vm.color
+    "497e8a2b": _vm.color
   }));
 };
 const __setup__ = __default__.setup;
@@ -108,7 +108,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "bfe47e7c",
+  "5e97fe1f",
   null,
   null
 );

package/dist/chunks/NcProgressBar-BnKA91Pj.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcProgressBar-BnKA91Pj.cjs","sources":["../../src/components/NcProgressBar/NcProgressBar.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis is a simple progress bar component.\n## Usage:\n\n### Linear\n```vue\n<template>\n\t<span>\n\t\tSmall\n\t\t<NcProgressBar :value=\"20\" />\n\t\t<br>\n\t\tMedium\n\t\t<NcProgressBar :value=\"60\" size=\"medium\" />\n\t\t<br>\n\t\tMedium with color\n\t\t<NcProgressBar :value=\"55\" size=\"medium\" color=\"green\" />\n\t\t<br>\n\t\tError\n\t\t<NcProgressBar :value=\"80\" :error=\"true\" />\n\t</span>\n</template>\n```\n\n### Circular\n```vue\n<template>\n\t<span>\n\t\tDefault\n\t\t<NcProgressBar type=\"circular\" :value=\"55\" />\n\t\t<br />\n\t\tColor\n\t\t<NcProgressBar type=\"circular\" :value=\"70\" color=\"green\" />\n\t\t<br />\n\t\tError\n\t\t<NcProgressBar type=\"circular\" :value=\"60\" :error=\"true\" />\n\t</span>\n</template>\n```\n</docs>\n\n<template>\n\t<span v-if=\"type === 'circular'\"\n\t\trole=\"progressbar\"\n\t\t:aria-valuenow=\"value\"\n\t\t:style=\"{ '--progress-bar-height': height + 'px' }\"\n\t\t:class=\"{ 'progress-bar--error': error }\"\n\t\tclass=\"progress-bar progress-bar--circular\">\n\t\t<svg :height=\"height\"\n\t\t\t:width=\"height\">\n\t\t\t<circle stroke=\"currentColor\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\t:stroke-dasharray=\"`${progress * circumference} ${(1 - progress) * circumference}`\"\n\t\t\t\t:stroke-dashoffset=\"0.25*circumference\"\n\t\t\t\t:stroke-width=\"stroke\"\n\t\t\t\t:r=\"radiusNormalized\"\n\t\t\t\t:cx=\"radius\"\n\t\t\t\t:cy=\"radius\" />\n\t\t\t<circle stroke=\"var(--color-background-darker)\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\t:stroke-dasharray=\"`${(1 - progress) * circumference} ${progress * circumference}`\"\n\t\t\t\t:stroke-dashoffset=\"(0.25 - progress) * circumference\"\n\t\t\t\t:stroke-width=\"stroke\"\n\t\t\t\t:r=\"radiusNormalized\"\n\t\t\t\t:cx=\"radius\"\n\t\t\t\t:cy=\"radius\" />\n\t\t</svg>\n\t</span>\n\t<progress v-else\n\t\tclass=\"progress-bar progress-bar--linear vue\"\n\t\t:class=\"{ 'progress-bar--error': error }\"\n\t\t:style=\"{'--progress-bar-height': height + 'px' }\"\n\t\t:value=\"value\"\n\t\tmax=\"100\" />\n</template>\n\n<script>\nexport default {\n\n\tname: 'NcProgressBar',\n\n\tprops: {\n\t\t/**\n\t\t * An integer between 1 and 100\n\t\t */\n\t\tvalue: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t\tvalidator(value) {\n\t\t\t\treturn value >= 0\n\t\t\t\t\t&& value <= 100\n\t\t\t},\n\t\t},\n\t\t/**\n\t\t * Determines the height of the progressbar.\n\t\t * Possible values:\n\t\t * - 'small' (default)\n\t\t * - 'medium'\n\t\t * - Number\n\t\t * @type {'small'|'medium'|number}\n\t\t */\n\t\tsize: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: 'small',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['small', 'medium'].includes(value) || typeof value === 'number'\n\t\t\t},\n\t\t},\n\t\t/**\n\t\t * Applies an error color to the progressbar if true.\n\t\t */\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * ProgressBar type\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'linear',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['linear', 'circular'].includes(value)\n\t\t\t},\n\t\t},\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tstroke: 4,\n\t\t}\n\t},\n\tcomputed: {\n\t\theight() {\n\t\t\tif (this.type === 'circular') {\n\t\t\t\tif (Number.isInteger(this.size)) {\n\t\t\t\t\treturn this.size\n\t\t\t\t}\n\t\t\t\treturn 44\n\t\t\t}\n\t\t\tif (this.size === 'small') {\n\t\t\t\treturn 4\n\t\t\t} else if (this.size === 'medium') {\n\t\t\t\treturn 6\n\t\t\t}\n\t\t\treturn this.size\n\t\t},\n\t\tprogress() {\n\t\t\treturn this.value / 100\n\t\t},\n\t\tradius() {\n\t\t\treturn this.height / 2\n\t\t},\n\t\tradiusNormalized() {\n\t\t\treturn this.radius - 3 * this.stroke\n\t\t},\n\t\tcircumference() {\n\t\t\treturn this.radiusNormalized * 2 * Math.PI\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.progress-bar {\n\tdisplay: block;\n\theight: var(--progress-bar-height);\n\n\t--progress-bar-color: v-bind(color);\n\n\t&--linear {\n\t\twidth: 100%;\n\t\toverflow: hidden;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tbackground: var(--color-background-dark);\n\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\n\t\t// Browser specific rules\n\t\t&::-webkit-progress-bar {\n\t\t\theight: var(--progress-bar-height);\n\t\t\tbackground-color: transparent;\n\t\t}\n\t\t&::-webkit-progress-value {\n\t\t\tbackground: var(--progress-bar-color, var(--gradient-primary-background));\n\t\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\t\t}\n\t\t&::-moz-progress-bar {\n\t\t\tbackground: var(--progress-bar-color, var(--gradient-primary-background));\n\t\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\t\t}\n\t}\n\t&--circular {\n\t\twidth: var(--progress-bar-height);\n\t\tcolor: var(--progress-bar-color, var(--color-primary-element));\n\t}\n\t&--error {\n\t\tcolor: var(--color-error) !important;\n\t\t// Override previous values\n\t\t&::-moz-progress-bar {\n\t\t\tbackground: var(--color-error) !important;\n\t\t}\n\t\t&::-webkit-progress-value {\n\t\t\tbackground: var(--color-error) !important;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":[],"mappings":";;;AAiFA,MAAA,cAAA;AAAA,EAEA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,SAAA,KACA,SAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,MAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,CAAA,SAAA,QAAA,EAAA,SAAA,KAAA,KAAA,OAAA,UAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,CAAA,UAAA,UAAA,EAAA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AACA,WAAA;AAAA,MACA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA,IACA,SAAA;AACA,UAAA,KAAA,SAAA,YAAA;AACA,YAAA,OAAA,UAAA,KAAA,IAAA,GAAA;AACA,iBAAA,KAAA;AAAA,QACA;AACA,eAAA;AAAA,MACA;AACA,UAAA,KAAA,SAAA,SAAA;AACA,eAAA;AAAA,MACA,WAAA,KAAA,SAAA,UAAA;AACA,eAAA;AAAA,MACA;AACA,aAAA,KAAA;AAAA,IACA;AAAA,IACA,WAAA;AACA,aAAA,KAAA,QAAA;AAAA,IACA;AAAA,IACA,SAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA,IACA,mBAAA;AACA,aAAA,KAAA,SAAA,IAAA,KAAA;AAAA,IACA;AAAA,IACA,gBAAA;AACA,aAAA,KAAA,mBAAA,IAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcProgressBar-BafFcKiu.mjs → NcProgressBar-CZtllSde.mjs}

@@ -1,4 +1,4 @@
-import '../assets/NcProgressBar-D5VftcJm.css';
+import '../assets/NcProgressBar-BsqdCn-x.css';
 import { useCssVars } from "vue";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-D637Qkok.mjs";
 const __default__ = {
@@ -87,7 +87,7 @@ const __default__ = {
 };
 const __injectCSSVars__ = () => {
   useCssVars((_vm, _setup) => ({
-    "0f3d9b00": _vm.color
+    "497e8a2b": _vm.color
   }));
 };
 const __setup__ = __default__.setup;
@@ -107,7 +107,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "bfe47e7c",
+  "5e97fe1f",
   null,
   null
 );