npm - @nextcloud/vue - Versions diffs - 9.0.0-rc.9 → 9.0.1 - Mend

@nextcloud/vue 9.0.0-rc.9 → 9.0.1

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

Files changed (226) hide show

package/dist/chunks/{NcEmojiPicker-DT7vZdsR.mjs.map → NcEmojiPicker-DWI-aSaL.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcEmojiPicker-DT7vZdsR.mjs","sources":["../../node_modules/vue-material-design-icons/Circle.vue","../../src/components/NcEmojiPicker/NcEmojiPicker.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon circle-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,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"CircleIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<!--\n - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component allows the user to pick an emoji.\n\n### Usage\n\n* Listen to the select event and pass in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker @select=\"select\" style=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Showing a preview and keeping it open after a user selected an emoji\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:close-on-select=\"false\"\n\t\t\t:show-preview=\"true\"\n\t\t\t@select=\"select\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Allow unselecting a previously set emoji.\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:show-preview=\"true\"\n\t\t\t:allow-unselect=\"true\"\n\t\t\t:selected-emoji=\"emoji\"\n\t\t\t@select=\"select\"\n\t\t\t@unselect=\"unselect\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t\tunselect() {\n\t\t\t\tthis.emoji = ''\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<NcPopover\n\t\tref=\"popover\"\n\t\tv-model:shown=\"open\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\n\t\t:no-focus-trap=\"true /* Handled manually to remove emoji buttons from TAB sequence /\"\n\t\t@after-show=\"afterShow\"\n\t\t@after-hide=\"afterHide\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<div class=\"nc-emoji-picker-container\">\n\t\t\t<Picker\n\t\t\t\tref=\"picker\"\n\t\t\t\tcolor=\"var(--color-primary-element)\"\n\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t:emoji=\"previewFallbackEmoji\"\n\t\t\t\t:i18n\n\t\t\t\t:native\n\t\t\t\t:emoji-size=\"20\"\n\t\t\t\t:per-line=\"8\"\n\t\t\t\t:picker-styles=\"{ width: '320px' }\"\n\t\t\t\t:show-preview\n\t\t\t\t:skin=\"currentSkinTone\"\n\t\t\t\t:show-skin-tones=\"false\"\n\t\t\t\t:title=\"previewFallbackName\"\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\t:aria-label=\"t('Emoji picker')\"\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t@keydown.tab.prevent=\"handleTabNavigationSkippingEmojis\"\n\t\t\t\t@select=\"select\">\n\t\t\t\t<template #searchTemplate=\"{ onSearch }\">\n\t\t\t\t\t<div class=\"search__wrapper\">\n\t\t\t\t\t\t<NcTextField\n\t\t\t\t\t\t\tref=\"search\"\n\t\t\t\t\t\t\tv-model=\"search\"\n\t\t\t\t\t\t\tclass=\"search\"\n\t\t\t\t\t\t\t:label=\"t('Search')\"\n\t\t\t\t\t\t\t:label-visible=\"true\"\n\t\t\t\t\t\t\t:placeholder=\"i18n.search\"\n\t\t\t\t\t\t\ttrailing-button-icon=\"close\"\n\t\t\t\t\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\t\t\t\t\t:show-trailing-button=\"search !== ''\"\n\t\t\t\t\t\t\t@keydown.left=\"callPickerArrowHandlerWithScrollFix('onArrowLeft', $event)\"\n\t\t\t\t\t\t\t@keydown.right=\"callPickerArrowHandlerWithScrollFix('onArrowRight', $event)\"\n\t\t\t\t\t\t\t@keydown.down=\"callPickerArrowHandlerWithScrollFix('onArrowDown', $event)\"\n\t\t\t\t\t\t\t@keydown.up=\"callPickerArrowHandlerWithScrollFix('onArrowUp', $event)\"\n\t\t\t\t\t\t\t@keydown.enter=\"$refs.picker.onEnter($event)\"\n\t\t\t\t\t\t\t@trailing-button-click=\"clearSearch(); onSearch('');\"\n\t\t\t\t\t\t\t@update:model-value=\"onSearch(search)\" />\n\t\t\t\t\t\t<NcColorPicker\n\t\t\t\t\t\t\tpalette-only\n\t\t\t\t\t\t\t:container\n\t\t\t\t\t\t\t:palette=\"skinTonePalette\"\n\t\t\t\t\t\t\t:model-value=\"currentColor.color\"\n\t\t\t\t\t\t\t@update:model-value=\"onChangeSkinTone\">\n\t\t\t\t\t\t\t<NcButton :aria-label=\"t('Skin tone')\" variant=\"tertiary-no-background\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconCircle :style=\"{ color: currentColor.color }\" :title=\"currentColor.name\" :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</NcColorPicker>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t\t<template v-if=\"allowUnselect && selectedEmoji\" #customCategory>\n\t\t\t\t\t<div class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t<h3 class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t\t{{ t('Selected') }}\n\t\t\t\t\t\t</h3>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Emoji\n\t\t\t\t\t\tclass=\"emoji-selected\"\n\t\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t\t:emoji=\"selectedEmoji\"\n\t\t\t\t\t\tnative\n\t\t\t\t\t\t:size=\"32\"\n\t\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t\t<Emoji\n\t\t\t\t\t\tclass=\"emoji-delete\"\n\t\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t\temoji=\":x:\"\n\t\t\t\t\t\tnative\n\t\t\t\t\t\t:size=\"10\"\n\t\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t</template>\n\t\t\t</Picker>\n\t\t</div>\n\t</NcPopover>\n</template>\n\n<script>\nimport data from 'emoji-mart-vue-fast/data/all.json'\nimport { Emoji, EmojiIndex, Picker } from 'emoji-mart-vue-fast/src/index.js'\nimport { isFocusable } from 'tabbable'\nimport IconCircle from 'vue-material-design-icons/Circle.vue'\nimport NcColorPicker from '../NcColorPicker/NcColorPicker.vue'\nimport { useTrapStackControl } from '../../composables/useTrapStackControl.ts'\nimport { getCurrentSkinTone, setCurrentSkinTone } from '../../functions/emoji/emoji.ts'\nimport { t } from '../../l10n.ts'\nimport { Color } from '../../utils/colors.ts'\nimport NcButton from '../NcButton/index.ts'\nimport NcPopover from '../NcPopover/index.js'\nimport NcTextField from '../NcTextField/index.ts'\n\n// Shared emoji index and skinTone for all NcEmojiPicker instances\n// Will be initialized on the first NcEmojiPicker creating\nlet emojiIndex\n\nconst i18n = {\n\tsearch: t('Search emoji'),\n\tnotfound: t('No emoji found'),\n\tcategories: {\n\t\tsearch: t('Search results'),\n\t\trecent: t('Frequently used'),\n\t\tsmileys: t('Smileys & Emotion'),\n\t\tpeople: t('People & Body'),\n\t\tnature: t('Animals & Nature'),\n\t\tfoods: t('Food & Drink'),\n\t\tactivity: t('Activities'),\n\t\tplaces: t('Travel & Places'),\n\t\tobjects: t('Objects'),\n\t\tsymbols: t('Symbols'),\n\t\tflags: t('Flags'),\n\t\tcustom: t('Custom'),\n\t},\n}\n\nconst skinTonePalette = [\n\tnew Color(255, 222, 52, t('Neutral skin color')),\n\tnew Color(228, 205, 166, t('Light skin tone')),\n\tnew Color(250, 221, 192, t('Medium light skin tone')),\n\tnew Color(174, 129, 87, t('Medium skin tone')),\n\tnew Color(158, 113, 88, t('Medium dark skin tone')),\n\tnew Color(96, 79, 69, t('Dark skin tone')),\n]\n\nexport default {\n\tname: 'NcEmojiPicker',\n\n\tcomponents: {\n\t\tIconCircle,\n\t\tNcButton,\n\t\tNcColorPicker,\n\t\tNcPopover,\n\t\tNcTextField,\n\t\tEmoji,\n\t\tPicker,\n\t},\n\n\tprops: {\n\t\t/\n\t\t The emoji-set\n\t\t /\n\t\tactiveSet: {\n\t\t\ttype: String,\n\t\t\tdefault: 'native',\n\t\t},\n\n\t\t/\n\t\t Show preview section when hovering emoji\n\t\t /\n\t\tshowPreview: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Allow unselecting the selected emoji\n\t\t /\n\t\tallowUnselect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Selected emoji to allow unselecting\n\t\t /\n\t\tselectedEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t The fallback emoji in the preview section\n\t\t /\n\t\tpreviewFallbackEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: 'grinning',\n\t\t},\n\n\t\t/\n\t\t The fallback text in the preview section\n\t\t /\n\t\tpreviewFallbackName: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Pick an emoji'),\n\t\t},\n\n\t\t/\n\t\t Whether to close the emoji picker after picking one\n\t\t /\n\t\tcloseOnSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Selector for the popover container\n\t\t /\n\t\tcontainer: {\n\t\t\ttype: [Boolean, String, Object, Element],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\n\temits: [\n\t\t'select',\n\t\t'selectData',\n\t\t'unselect',\n\t],\n\n\tsetup() {\n\t\t// If this is the first instance of NcEmojiPicker - setup EmojiIndex\n\t\tif (!emojiIndex) {\n\t\t\temojiIndex = new EmojiIndex(data)\n\t\t}\n\n\t\treturn {\n\t\t\t// Non-reactive constants\n\t\t\temojiIndex,\n\t\t\tskinTonePalette,\n\t\t\ti18n,\n\t\t}\n\t},\n\n\tdata() {\n\t\tconst currentSkinTone = getCurrentSkinTone()\n\n\t\treturn {\n\t\t\t/\n\t\t\t The current active color from the skin tone palette\n\t\t\t /\n\t\t\tcurrentColor: skinTonePalette[currentSkinTone - 1],\n\t\t\t/\n\t\t\t The current active skin tone\n\t\t\t \n\t\t\t @type {1\|2\|3\|4\|5\|6}\n\t\t\t /\n\t\t\tcurrentSkinTone,\n\t\t\tsearch: '',\n\t\t\topen: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tnative() {\n\t\t\treturn this.activeSet === 'native'\n\t\t},\n\t},\n\n\tcreated() {\n\t\t// Component has its own custom focus management\n\t\t// The global focus trap stack should be paused\n\t\tuseTrapStackControl(() => this.open)\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\tclearSearch() {\n\t\t\tthis.search = ''\n\t\t\tthis.$refs.search.focus()\n\t\t},\n\n\t\t/\n\t\t Update the current skin tone by the result of the color picker\n\t\t \n\t\t @param {string} color Color set\n\t\t /\n\t\tonChangeSkinTone(color) {\n\t\t\tconst index = this.skinTonePalette.findIndex((tone) => tone.color.toLowerCase() === color.toLowerCase())\n\t\t\tif (index > -1) {\n\t\t\t\tthis.currentSkinTone = index + 1\n\t\t\t\tthis.currentColor = this.skinTonePalette[index]\n\t\t\t\tsetCurrentSkinTone(this.currentSkinTone)\n\t\t\t}\n\t\t},\n\n\t\tselect(emojiObject) {\n\t\t\t/\n\t\t\t Emits a string containing the emoji e.g. '👩🏿‍💻'\n\t\t\t /\n\t\t\tthis.$emit('select', emojiObject.native)\n\n\t\t\t/\n\t\t\t Emits a object with more data about the picked emoji\n\t\t\t /\n\t\t\tthis.$emit('selectData', emojiObject)\n\n\t\t\tif (this.closeOnSelect) {\n\t\t\t\tthis.open = false\n\t\t\t}\n\t\t},\n\n\t\tunselect() {\n\t\t\tthis.$emit('unselect')\n\t\t},\n\n\t\tafterShow() {\n\t\t\tthis.$refs.search.focus()\n\t\t},\n\n\t\tafterHide() {\n\t\t\t// Manually return focus to the trigger button, as we disabled focus-trap\n\t\t\t// But only if there is no focus target outside the picker, for example, input element that received focus by click closing the emoji picker\n\t\t\tif (!document.activeElement \|\| this.$refs.picker.$el.contains(document.activeElement) \|\| !isFocusable(document.activeElement)) {\n\t\t\t\tthis.$refs.popover.$el.querySelector('button, [role=\"button\"]')?.focus()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Manually handle Tab navigation skipping emoji buttons.\n\t\t * Navigation over emojis is handled by Arrow keys.\n\t\t \n\t\t @param {KeyboardEvent} event - Keyboard event\n\t\t /\n\t\thandleTabNavigationSkippingEmojis(event) {\n\t\t\tconst current = event.target\n\t\t\tconst focusable = Array.from(this.$refs.picker.$el.querySelectorAll('button:not(.emoji-mart-emoji), input'))\n\t\t\tif (!event.shiftKey) {\n\t\t\t\tconst nextNode = focusable.find((node) => current.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING) \|\| focusable[0]\n\t\t\t\tnextNode.focus()\n\t\t\t} else {\n\t\t\t\tconst prevNode = focusable.findLast((node) => current.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_PRECEDING) \|\| focusable.at(-1)\n\t\t\t\tprevNode.focus()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Handle arrow navigation via <Picker>'s handlers with scroll bug fix\n\t\t \n\t\t @param {'onArrowLeft' \| 'onArrowRight' \| 'onArrowDown' \| 'onArrowUp'} originalHandlerName - Picker's arrow keydown handler name\n\t\t * @param {KeyboardEvent} event - Keyboard event\n\t\t /\n\t\tasync callPickerArrowHandlerWithScrollFix(originalHandlerName, event) {\n\t\t\t// Call the original handler\n\t\t\t// See: https://github.com/serebrov/emoji-mart-vue/blob/a1ea72673a111cce78dc8caad8bc9ea3e02ad5bd/src/components/Picker.vue#L29\n\t\t\t// TODO: expose these methods via slot props in upstream library\n\t\t\tthis.$refs.picker[originalHandlerName](event)\n\n\t\t\t// Wait until emoji-mart-vue-fast scrolls\n\t\t\tawait this.$nextTick()\n\n\t\t\t// Scroll position is incorrect after emoji-mart-vue-fast scrolls...\n\t\t\t// It calculates scroll incorrectly.\n\t\t\t// It doesn't take into account, that emojis are wrapped into categories sections\n\t\t\t// See: https://github.com/serebrov/emoji-mart-vue/blob/a1ea72673a111cce78dc8caad8bc9ea3e02ad5bd/src/utils/picker.js#L244\n\t\t\t// Now scroll to the correct position\n\t\t\t// TODO: fix in upstream\n\t\t\tconst selectedEmoji = this.$refs.picker.$el.querySelector('.emoji-mart-emoji-selected')\n\t\t\tselectedEmoji?.scrollIntoView({\n\t\t\t\tblock: 'center',\n\t\t\t\tinline: 'center',\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@use \"sass:meta\";\n\n.nc-emoji-picker-container :deep() {\n\t@include meta.load-css('emoji-mart-vue-fast/css/emoji-mart.css');\n}\n\n.nc-emoji-picker-container :deep(.emoji-mart) {\n\tbackground-color: var(--color-main-background) !important;\n\tborder: 0;\n\tcolor: var(--color-main-text) !important;\n\tdisplay: flex !important;\n\n\t// Reset emoji-mart styles\n\tbutton {\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tfont-size: inherit;\n\t}\n\n\t.emoji-mart-bar,\n\t.emoji-mart-anchors,\n\t.emoji-mart-search,\n\t.emoji-mart-search input,\n\t.emoji-mart-category,\n\t.emoji-mart-category-label,\n\t.emoji-mart-category-label span,\n\t.emoji-mart-skin-swatches {\n\t\tbackground-color: transparent !important;\n\t\tborder-color: var(--color-border) !important;\n\t\tcolor: inherit !important;\n\t}\n\n\t.emoji-mart-anchors {\n\t\tpadding-block: 0;\n\t\tpadding-inline: calc(2 var(--default-grid-baseline));\n\t}\n\n\t.emoji-mart-anchor {\n\t\tborder-radius: 0;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\t\theight: var(--clickable-area-small);\n\t\tmin-width: var(--clickable-area-small);\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 2px solid var(--color-primary-element) !important;\n\t\t\toutline-offset: -2px;\n\t\t}\n\n\t\t// Icon\n\t\tdiv {\n\t\t\tdisplay: grid;\n\t\t\tplace-content: center;\n\t\t}\n\t}\n\n\t.emoji-mart-scroll {\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: 0 calc(2 * var(--default-grid-baseline));\n\t}\n\n\t.emoji-mart-category {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(8, 1fr);\n\t\tjustify-items: stretch;\n\n\t\t&.emoji-mart-no-results {\n\t\t\tgrid-template-columns: 1fr;\n\t\t\tfont-size: inherit;\n\t\t\tcolor: var(--color-text-maxcontrast) !important;\n\t\t}\n\t}\n\n\t/* Label element in the section grid /\n\tdiv.emoji-mart-category-label {\n\t\tgrid-column: span 8;\n\t\tjustify-self: stretch;\n\t}\n\n\t/ An actual heading inside the element /\n\th3.emoji-mart-category-label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t// Inline with buttons\n\t\theight: var(--default-clickable-area);\n\t\tmargin: 0;\n\t\t// Inline with input\n\t\tpadding-inline: calc(2 var(--default-grid-baseline));\n\t\tpadding-block: 0;\n\t\tuser-select: none;\n\t}\n\n\t.emoji-mart-emoji {\n\t\taspect-ratio: 1 / 1;\n\t\ttext-align: center;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\n\t\t&:hover,\n\t\t&:focus-visible,\n\t\t&.emoji-mart-emoji-selected {\n\t\t\tbackground-color: var(--color-background-hover) !important;\n\t\t\tborder: none;\n\t\t\tborder-radius: var(--border-radius-element);\n\t\t\tbox-shadow: none !important;\n\t\t\toutline: 2px solid var(--color-primary-element) !important;\n\t\t\toutline-offset: -2px;\n\t\t}\n\n\t\t&::before {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\tspan {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n\n.search__wrapper {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n\talign-items: end;\n\tpadding-block: var(--default-grid-baseline);\n\tpadding-inline: calc(2 * var(--default-grid-baseline));\n}\n\n.row-selected {\n\tbutton, span {\n\t\tvertical-align: middle;\n\t}\n}\n\n.emoji-delete {\n\tvertical-align: top;\n\tmargin-inline-start: -21px;\n\tmargin-top: -3px;\n}\n</style>\n"],"names":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","NcTextField","_createBlock","_withCtx","_renderSlot","_createVNode","_withKeys","_normalizeStyle","_toDisplayString"],"mappings":"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","x_google_ignoreList":[0]}
1	+ {"version":3,"file":"NcEmojiPicker-DWI-aSaL.mjs","sources":["../../node_modules/vue-material-design-icons/Circle.vue","../../src/components/NcEmojiPicker/NcEmojiPicker.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon circle-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,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"CircleIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<!--\n - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component allows the user to pick an emoji.\n\n### Usage\n\n* Listen to the select event and pass in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker @select=\"select\" style=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Showing a preview and keeping it open after a user selected an emoji\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:close-on-select=\"false\"\n\t\t\t:show-preview=\"true\"\n\t\t\t@select=\"select\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Allow unselecting a previously set emoji.\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:show-preview=\"true\"\n\t\t\t:allow-unselect=\"true\"\n\t\t\t:selected-emoji=\"emoji\"\n\t\t\t@select=\"select\"\n\t\t\t@unselect=\"unselect\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t\tunselect() {\n\t\t\t\tthis.emoji = ''\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<NcPopover\n\t\tref=\"popover\"\n\t\tv-model:shown=\"open\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\n\t\t:no-focus-trap=\"true /* Handled manually to remove emoji buttons from TAB sequence /\"\n\t\t@after-show=\"afterShow\"\n\t\t@after-hide=\"afterHide\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<div class=\"nc-emoji-picker-container\">\n\t\t\t<Picker\n\t\t\t\tref=\"picker\"\n\t\t\t\tcolor=\"var(--color-primary-element)\"\n\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t:emoji=\"previewFallbackEmoji\"\n\t\t\t\t:i18n\n\t\t\t\t:native\n\t\t\t\t:emoji-size=\"20\"\n\t\t\t\t:per-line=\"8\"\n\t\t\t\t:picker-styles=\"{ width: '320px' }\"\n\t\t\t\t:show-preview\n\t\t\t\t:skin=\"currentSkinTone\"\n\t\t\t\t:show-skin-tones=\"false\"\n\t\t\t\t:title=\"previewFallbackName\"\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\t:aria-label=\"t('Emoji picker')\"\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t@keydown.tab.prevent=\"handleTabNavigationSkippingEmojis\"\n\t\t\t\t@select=\"select\">\n\t\t\t\t<template #searchTemplate=\"{ onSearch }\">\n\t\t\t\t\t<div class=\"search__wrapper\">\n\t\t\t\t\t\t<NcTextField\n\t\t\t\t\t\t\tref=\"search\"\n\t\t\t\t\t\t\tv-model=\"search\"\n\t\t\t\t\t\t\tclass=\"search\"\n\t\t\t\t\t\t\t:label=\"t('Search')\"\n\t\t\t\t\t\t\t:label-visible=\"true\"\n\t\t\t\t\t\t\t:placeholder=\"i18n.search\"\n\t\t\t\t\t\t\ttrailing-button-icon=\"close\"\n\t\t\t\t\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\t\t\t\t\t:show-trailing-button=\"search !== ''\"\n\t\t\t\t\t\t\t@keydown.left=\"callPickerArrowHandlerWithScrollFix('onArrowLeft', $event)\"\n\t\t\t\t\t\t\t@keydown.right=\"callPickerArrowHandlerWithScrollFix('onArrowRight', $event)\"\n\t\t\t\t\t\t\t@keydown.down=\"callPickerArrowHandlerWithScrollFix('onArrowDown', $event)\"\n\t\t\t\t\t\t\t@keydown.up=\"callPickerArrowHandlerWithScrollFix('onArrowUp', $event)\"\n\t\t\t\t\t\t\t@keydown.enter=\"$refs.picker.onEnter($event)\"\n\t\t\t\t\t\t\t@trailing-button-click=\"clearSearch(); onSearch('');\"\n\t\t\t\t\t\t\t@update:model-value=\"onSearch(search)\" />\n\t\t\t\t\t\t<NcColorPicker\n\t\t\t\t\t\t\tpalette-only\n\t\t\t\t\t\t\t:container\n\t\t\t\t\t\t\t:palette=\"skinTonePalette\"\n\t\t\t\t\t\t\t:model-value=\"currentColor.color\"\n\t\t\t\t\t\t\t@update:model-value=\"onChangeSkinTone\">\n\t\t\t\t\t\t\t<NcButton :aria-label=\"t('Skin tone')\" variant=\"tertiary-no-background\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconCircle :style=\"{ color: currentColor.color }\" :title=\"currentColor.name\" :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</NcColorPicker>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t\t<template v-if=\"allowUnselect && selectedEmoji\" #customCategory>\n\t\t\t\t\t<div class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t<h3 class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t\t{{ t('Selected') }}\n\t\t\t\t\t\t</h3>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Emoji\n\t\t\t\t\t\tclass=\"emoji-selected\"\n\t\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t\t:emoji=\"selectedEmoji\"\n\t\t\t\t\t\tnative\n\t\t\t\t\t\t:size=\"32\"\n\t\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t\t<Emoji\n\t\t\t\t\t\tclass=\"emoji-delete\"\n\t\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t\temoji=\":x:\"\n\t\t\t\t\t\tnative\n\t\t\t\t\t\t:size=\"10\"\n\t\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t</template>\n\t\t\t</Picker>\n\t\t</div>\n\t</NcPopover>\n</template>\n\n<script>\nimport data from 'emoji-mart-vue-fast/data/all.json'\nimport { Emoji, EmojiIndex, Picker } from 'emoji-mart-vue-fast/src/index.js'\nimport { isFocusable } from 'tabbable'\nimport IconCircle from 'vue-material-design-icons/Circle.vue'\nimport NcColorPicker from '../NcColorPicker/NcColorPicker.vue'\nimport { useTrapStackControl } from '../../composables/useTrapStackControl.ts'\nimport { getCurrentSkinTone, setCurrentSkinTone } from '../../functions/emoji/emoji.ts'\nimport { t } from '../../l10n.ts'\nimport { Color } from '../../utils/colors.ts'\nimport NcButton from '../NcButton/index.ts'\nimport NcPopover from '../NcPopover/index.js'\nimport NcTextField from '../NcTextField/index.ts'\n\n// Shared emoji index and skinTone for all NcEmojiPicker instances\n// Will be initialized on the first NcEmojiPicker creating\nlet emojiIndex\n\nconst i18n = {\n\tsearch: t('Search emoji'),\n\tnotfound: t('No emoji found'),\n\tcategories: {\n\t\tsearch: t('Search results'),\n\t\trecent: t('Frequently used'),\n\t\tsmileys: t('Smileys & Emotion'),\n\t\tpeople: t('People & Body'),\n\t\tnature: t('Animals & Nature'),\n\t\tfoods: t('Food & Drink'),\n\t\tactivity: t('Activities'),\n\t\tplaces: t('Travel & Places'),\n\t\tobjects: t('Objects'),\n\t\tsymbols: t('Symbols'),\n\t\tflags: t('Flags'),\n\t\tcustom: t('Custom'),\n\t},\n}\n\nconst skinTonePalette = [\n\tnew Color(255, 222, 52, t('Neutral skin color')),\n\tnew Color(228, 205, 166, t('Light skin tone')),\n\tnew Color(250, 221, 192, t('Medium light skin tone')),\n\tnew Color(174, 129, 87, t('Medium skin tone')),\n\tnew Color(158, 113, 88, t('Medium dark skin tone')),\n\tnew Color(96, 79, 69, t('Dark skin tone')),\n]\n\nexport default {\n\tname: 'NcEmojiPicker',\n\n\tcomponents: {\n\t\tIconCircle,\n\t\tNcButton,\n\t\tNcColorPicker,\n\t\tNcPopover,\n\t\tNcTextField,\n\t\tEmoji,\n\t\tPicker,\n\t},\n\n\tprops: {\n\t\t/\n\t\t The emoji-set\n\t\t /\n\t\tactiveSet: {\n\t\t\ttype: String,\n\t\t\tdefault: 'native',\n\t\t},\n\n\t\t/\n\t\t Show preview section when hovering emoji\n\t\t /\n\t\tshowPreview: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Allow unselecting the selected emoji\n\t\t /\n\t\tallowUnselect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Selected emoji to allow unselecting\n\t\t /\n\t\tselectedEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t The fallback emoji in the preview section\n\t\t /\n\t\tpreviewFallbackEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: 'grinning',\n\t\t},\n\n\t\t/\n\t\t The fallback text in the preview section\n\t\t /\n\t\tpreviewFallbackName: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Pick an emoji'),\n\t\t},\n\n\t\t/\n\t\t Whether to close the emoji picker after picking one\n\t\t /\n\t\tcloseOnSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Selector for the popover container\n\t\t /\n\t\tcontainer: {\n\t\t\ttype: [Boolean, String, Object, Element],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\n\temits: [\n\t\t'select',\n\t\t'selectData',\n\t\t'unselect',\n\t],\n\n\tsetup() {\n\t\t// If this is the first instance of NcEmojiPicker - setup EmojiIndex\n\t\tif (!emojiIndex) {\n\t\t\temojiIndex = new EmojiIndex(data)\n\t\t}\n\n\t\treturn {\n\t\t\t// Non-reactive constants\n\t\t\temojiIndex,\n\t\t\tskinTonePalette,\n\t\t\ti18n,\n\t\t}\n\t},\n\n\tdata() {\n\t\tconst currentSkinTone = getCurrentSkinTone()\n\n\t\treturn {\n\t\t\t/\n\t\t\t The current active color from the skin tone palette\n\t\t\t /\n\t\t\tcurrentColor: skinTonePalette[currentSkinTone - 1],\n\t\t\t/\n\t\t\t The current active skin tone\n\t\t\t \n\t\t\t @type {1\|2\|3\|4\|5\|6}\n\t\t\t /\n\t\t\tcurrentSkinTone,\n\t\t\tsearch: '',\n\t\t\topen: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tnative() {\n\t\t\treturn this.activeSet === 'native'\n\t\t},\n\t},\n\n\tcreated() {\n\t\t// Component has its own custom focus management\n\t\t// The global focus trap stack should be paused\n\t\tuseTrapStackControl(() => this.open)\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\tclearSearch() {\n\t\t\tthis.search = ''\n\t\t\tthis.$refs.search.focus()\n\t\t},\n\n\t\t/\n\t\t Update the current skin tone by the result of the color picker\n\t\t \n\t\t @param {string} color Color set\n\t\t /\n\t\tonChangeSkinTone(color) {\n\t\t\tconst index = this.skinTonePalette.findIndex((tone) => tone.color.toLowerCase() === color.toLowerCase())\n\t\t\tif (index > -1) {\n\t\t\t\tthis.currentSkinTone = index + 1\n\t\t\t\tthis.currentColor = this.skinTonePalette[index]\n\t\t\t\tsetCurrentSkinTone(this.currentSkinTone)\n\t\t\t}\n\t\t},\n\n\t\tselect(emojiObject) {\n\t\t\t/\n\t\t\t Emits a string containing the emoji e.g. '👩🏿‍💻'\n\t\t\t /\n\t\t\tthis.$emit('select', emojiObject.native)\n\n\t\t\t/\n\t\t\t Emits a object with more data about the picked emoji\n\t\t\t /\n\t\t\tthis.$emit('selectData', emojiObject)\n\n\t\t\tif (this.closeOnSelect) {\n\t\t\t\tthis.open = false\n\t\t\t}\n\t\t},\n\n\t\tunselect() {\n\t\t\tthis.$emit('unselect')\n\t\t},\n\n\t\tafterShow() {\n\t\t\tthis.$refs.search.focus()\n\t\t},\n\n\t\tafterHide() {\n\t\t\t// Manually return focus to the trigger button, as we disabled focus-trap\n\t\t\t// But only if there is no focus target outside the picker, for example, input element that received focus by click closing the emoji picker\n\t\t\tif (!document.activeElement \|\| this.$refs.picker.$el.contains(document.activeElement) \|\| !isFocusable(document.activeElement)) {\n\t\t\t\tthis.$refs.popover.$el.querySelector('button, [role=\"button\"]')?.focus()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Manually handle Tab navigation skipping emoji buttons.\n\t\t * Navigation over emojis is handled by Arrow keys.\n\t\t \n\t\t @param {KeyboardEvent} event - Keyboard event\n\t\t /\n\t\thandleTabNavigationSkippingEmojis(event) {\n\t\t\tconst current = event.target\n\t\t\tconst focusable = Array.from(this.$refs.picker.$el.querySelectorAll('button:not(.emoji-mart-emoji), input'))\n\t\t\tif (!event.shiftKey) {\n\t\t\t\tconst nextNode = focusable.find((node) => current.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING) \|\| focusable[0]\n\t\t\t\tnextNode.focus()\n\t\t\t} else {\n\t\t\t\tconst prevNode = focusable.findLast((node) => current.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_PRECEDING) \|\| focusable.at(-1)\n\t\t\t\tprevNode.focus()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Handle arrow navigation via <Picker>'s handlers with scroll bug fix\n\t\t \n\t\t @param {'onArrowLeft' \| 'onArrowRight' \| 'onArrowDown' \| 'onArrowUp'} originalHandlerName - Picker's arrow keydown handler name\n\t\t * @param {KeyboardEvent} event - Keyboard event\n\t\t /\n\t\tasync callPickerArrowHandlerWithScrollFix(originalHandlerName, event) {\n\t\t\t// Call the original handler\n\t\t\t// See: https://github.com/serebrov/emoji-mart-vue/blob/a1ea72673a111cce78dc8caad8bc9ea3e02ad5bd/src/components/Picker.vue#L29\n\t\t\t// TODO: expose these methods via slot props in upstream library\n\t\t\tthis.$refs.picker[originalHandlerName](event)\n\n\t\t\t// Wait until emoji-mart-vue-fast scrolls\n\t\t\tawait this.$nextTick()\n\n\t\t\t// Scroll position is incorrect after emoji-mart-vue-fast scrolls...\n\t\t\t// It calculates scroll incorrectly.\n\t\t\t// It doesn't take into account, that emojis are wrapped into categories sections\n\t\t\t// See: https://github.com/serebrov/emoji-mart-vue/blob/a1ea72673a111cce78dc8caad8bc9ea3e02ad5bd/src/utils/picker.js#L244\n\t\t\t// Now scroll to the correct position\n\t\t\t// TODO: fix in upstream\n\t\t\tconst selectedEmoji = this.$refs.picker.$el.querySelector('.emoji-mart-emoji-selected')\n\t\t\tselectedEmoji?.scrollIntoView({\n\t\t\t\tblock: 'center',\n\t\t\t\tinline: 'center',\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@use \"sass:meta\";\n\n.nc-emoji-picker-container :deep() {\n\t@include meta.load-css('emoji-mart-vue-fast/css/emoji-mart.css');\n}\n\n.nc-emoji-picker-container :deep(.emoji-mart) {\n\tbackground-color: var(--color-main-background) !important;\n\tborder: 0;\n\tcolor: var(--color-main-text) !important;\n\tdisplay: flex !important;\n\n\t// Reset emoji-mart styles\n\tbutton {\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tfont-size: inherit;\n\t}\n\n\t.emoji-mart-bar,\n\t.emoji-mart-anchors,\n\t.emoji-mart-search,\n\t.emoji-mart-search input,\n\t.emoji-mart-category,\n\t.emoji-mart-category-label,\n\t.emoji-mart-category-label span,\n\t.emoji-mart-skin-swatches {\n\t\tbackground-color: transparent !important;\n\t\tborder-color: var(--color-border) !important;\n\t\tcolor: inherit !important;\n\t}\n\n\t.emoji-mart-anchors {\n\t\tpadding-block: 0;\n\t\tpadding-inline: calc(2 var(--default-grid-baseline));\n\t}\n\n\t.emoji-mart-anchor {\n\t\tborder-radius: 0;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\t\theight: var(--clickable-area-small);\n\t\tmin-width: var(--clickable-area-small);\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 2px solid var(--color-primary-element) !important;\n\t\t\toutline-offset: -2px;\n\t\t}\n\n\t\t// Icon\n\t\tdiv {\n\t\t\tdisplay: grid;\n\t\t\tplace-content: center;\n\t\t}\n\t}\n\n\t.emoji-mart-scroll {\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: 0 calc(2 * var(--default-grid-baseline));\n\t}\n\n\t.emoji-mart-category {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(8, 1fr);\n\t\tjustify-items: stretch;\n\n\t\t&.emoji-mart-no-results {\n\t\t\tgrid-template-columns: 1fr;\n\t\t\tfont-size: inherit;\n\t\t\tcolor: var(--color-text-maxcontrast) !important;\n\t\t}\n\t}\n\n\t/* Label element in the section grid /\n\tdiv.emoji-mart-category-label {\n\t\tgrid-column: span 8;\n\t\tjustify-self: stretch;\n\t}\n\n\t/ An actual heading inside the element /\n\th3.emoji-mart-category-label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t// Inline with buttons\n\t\theight: var(--default-clickable-area);\n\t\tmargin: 0;\n\t\t// Inline with input\n\t\tpadding-inline: calc(2 var(--default-grid-baseline));\n\t\tpadding-block: 0;\n\t\tuser-select: none;\n\t}\n\n\t.emoji-mart-emoji {\n\t\taspect-ratio: 1 / 1;\n\t\ttext-align: center;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\n\t\t&:hover,\n\t\t&:focus-visible,\n\t\t&.emoji-mart-emoji-selected {\n\t\t\tbackground-color: var(--color-background-hover) !important;\n\t\t\tborder: none;\n\t\t\tborder-radius: var(--border-radius-element);\n\t\t\tbox-shadow: none !important;\n\t\t\toutline: 2px solid var(--color-primary-element) !important;\n\t\t\toutline-offset: -2px;\n\t\t}\n\n\t\t&::before {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\tspan {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n\n.search__wrapper {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n\talign-items: end;\n\tpadding-block: var(--default-grid-baseline);\n\tpadding-inline: calc(2 * var(--default-grid-baseline));\n}\n\n.row-selected {\n\tbutton, span {\n\t\tvertical-align: middle;\n\t}\n}\n\n.emoji-delete {\n\tvertical-align: top;\n\tmargin-inline-start: -21px;\n\tmargin-top: -3px;\n}\n</style>\n"],"names":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","NcTextField","_createBlock","_withCtx","_renderSlot","_createVNode","_withKeys","_normalizeStyle","_toDisplayString"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/chunks/{NcInputConfirmCancel-D9l9GfP0.mjs → NcInputConfirmCancel-D3HznHAG.mjs} RENAMED Viewed

@@ -1,7 +1,7 @@
 import '../assets/NcInputConfirmCancel-BrdZEfr2.css';
 import { I as IconArrowRight } from "./ArrowRight-DRKHUZMH.mjs";
 import { I as IconClose } from "./Close-D6ngJ4t9.mjs";
-import { r as register, g as t14, a as t } from "./_l10n-CeXHJQB0.mjs";
+import { r as register, f as t14, a as t } from "./_l10n-BPfpECk_.mjs";
 import { N as NcButton } from "./NcButton-DkC5k3Lb.mjs";
 import { resolveComponent, createElementBlock, openBlock, createElementVNode, withModifiers, withKeys, withDirectives, createVNode, vModelText, withCtx } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
@@ -120,4 +120,4 @@ const NcInputConfirmCancel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render",
 export {
   NcInputConfirmCancel as N
 };
-//# sourceMappingURL=NcInputConfirmCancel-D9l9GfP0.mjs.map
+//# sourceMappingURL=NcInputConfirmCancel-D3HznHAG.mjs.map

package/dist/chunks/{NcInputConfirmCancel-D9l9GfP0.mjs.map → NcInputConfirmCancel-D3HznHAG.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcInputConfirmCancel-~~D9l9GfP0~~.mjs","sources":["../../src/components/NcAppNavigationItem/NcInputConfirmCancel.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n# Usage\n\n```\n<NcInputConfirmCancel @confirm=\"alert('confirm')\" @cancel=\"alert('cancel')\" />\n```\n</docs>\n\n<template>\n\t<div class=\"app-navigation-input-confirm\">\n\t\t<form\n\t\t\t@submit.prevent=\"confirm\"\n\t\t\t@keydown.esc.exact.stop.prevent=\"cancel\"\n\t\t\t@click.stop.prevent>\n\t\t\t<input\n\t\t\t\tref=\"input\"\n\t\t\t\tv-model=\"valueModel\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tclass=\"app-navigation-input-confirm__input\"\n\t\t\t\t:placeholder=\"placeholder\">\n\n\t\t\t<NcButton\n\t\t\t\t:aria-label=\"labelConfirm\"\n\t\t\t\ttype=\"submit\"\n\t\t\t\tvariant=\"primary\"\n\t\t\t\t@click.stop.prevent=\"confirm\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconArrowRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<NcButton\n\t\t\t\t:aria-label=\"labelCancel\"\n\t\t\t\ttype=\"reset\"\n\t\t\t\t:variant=\"primary ? 'primary' : 'tertiary'\"\n\t\t\t\t@click.stop.prevent=\"cancel\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconClose :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t</form>\n\t</div>\n</template>\n\n<script>\nimport IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport IconClose from 'vue-material-design-icons/Close.vue'\nimport { t } from '../../l10n.ts'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcInputConfirmCancel',\n\n\tcomponents: {\n\t\tIconArrowRight,\n\t\tIconClose,\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/*\n\t\t If this element is used on a primary element set to true for primary styling.\n\t\t /\n\t\tprimary: {\n\t\t\tdefault: false,\n\t\t\ttype: Boolean,\n\t\t},\n\n\t\t/\n\t\t Placeholder of the edit field\n\t\t /\n\t\tplaceholder: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\n\t\t/\n\t\t The current name (model value)\n\t\t */\n\t\tmodelValue: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\temits: [\n\t\t'cancel',\n\t\t'confirm',\n\t\t'update:modelValue',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tlabelConfirm: t('Confirm changes'),\n\t\t\tlabelCancel: t('Cancel changes'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tvalueModel: {\n\t\t\tget() { return this.modelValue },\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('update:modelValue', newValue)\n\t\t\t},\n\t\t},\n\t},\n\n\tmethods: {\n\t\tconfirm() {\n\t\t\tthis.$emit('confirm')\n\t\t},\n\n\t\tcancel() {\n\t\t\tthis.$emit('cancel')\n\t\t},\n\n\t\tfocusInput() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n$input-height: 34px;\n$input-padding: 7px;\n$input-margin: 5px;\n\n.app-navigation-input-confirm {\n\tflex: 1 0 100%;\n\twidth: 100%;\n\n\tform {\n\t\tdisplay: flex;\n\t}\n\n\t&__input {\n\t\theight: $input-height;\n\t\tflex: 1 1 100%;\n\t\tfont-size: 100% !important;\n\t\tmargin: $input-margin !important;\n\t\tmargin-inline-start: -1px - $input-padding !important;\n\t\tpadding: $input-padding !important;\n\n\t\t&:active,\n\t\t&:focus,\n\t\t&:hover {\n\t\t\toutline: none;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-color: var(--color-primary-element);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_createVNode"],"mappings":";;;;;;;AAuDA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;EAGD,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,SAAS;AAAA,MACR,SAAS;AAAA,MACT,MAAM;AAAA;;;;IAMP,aAAa;AAAA,MACZ,SAAS;AAAA,MACT,MAAM;AAAA;;;;IAMP,YAAY;AAAA,MACX,SAAS;AAAA,MACT,MAAM;AAAA;;EAIR,OAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA;EAGD,OAAO;AACN,WAAO;AAAA,MACN,cAAc,EAAE,iBAAiB;AAAA,MACjC,aAAa,EAAE,gBAAgB;AAAA,IAChC;AAAA,EACD;AAAA,EAEA,UAAU;AAAA,IACT,YAAY;AAAA,MACX,MAAM;AAAE,eAAO,KAAK;AAAA,MAAW;AAAA,MAC/B,IAAI,UAAU;AACb,aAAK,MAAM,qBAAqB,QAAQ;AAAA,MACzC;AAAA;;EAIF,SAAS;AAAA,IACR,UAAU;AACT,WAAK,MAAM,SAAS;AAAA,IACrB;AAAA,IAEA,SAAS;AACR,WAAK,MAAM,QAAQ;AAAA,IACpB;AAAA,IAEA,aAAa;AACZ,WAAK,MAAM,MAAM,MAAK;AAAA,IACvB;AAAA;AAEF;AA/GM,MAAA,aAAA,EAAA,OAAM,+BAA8B;;;;;;AAAzC,SAAAA,UAAA,GAAAC,mBAgCM,OAhCN,YAgCM;AAAA,IA/BLC,mBA8BO,QAAA;AAAA,MA7BL,+DAAgB,SAAA,WAAA,SAAA,QAAA,GAAA,IAAA,GAAO,CAAA,SAAA,CAAA;AAAA,MACvB,yEAAgC,SAAA,UAAA,SAAA,OAAA,GAAA,IAAA,GAAM,CAAA,SAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,CAAA;AAAA,MACtC,iDAAD,MAAA;AAAA,MAAA,GAAmB,CAAA,QAAA,SAAA,CAAA;AAAA;qBACnBA,mBAK4B,SAAA;AAAA,QAJ3B,KAAI;AAAA,qEACK,SAAA,aAAU;AAAA,QACnB,MAAK;AAAA,QACL,OAAM;AAAA,QACL,aAAa,OAAA;AAAA;qBAHL,SAAA,UAAU;AAAA;MAKpBC,YAQW,qBAAA;AAAA,QAPT,cAAY,MAAA;AAAA,QACb,MAAK;AAAA,QACL,SAAQ;AAAA,QACP,uBAAoB,SAAA,SAAO,CAAA,QAAA,SAAA,CAAA;AAAA;QACjB,cACV,MAA6B;AAAA,UAA7BA,YAA6B,2BAAA,EAAZ,MAAM,GAAE,CAAA;AAAA;;;MAI3BA,YAQW,qBAAA;AAAA,QAPT,cAAY,MAAA;AAAA,QACb,MAAK;AAAA,QACJ,SAAS,OAAA,UAAO,YAAA;AAAA,QAChB,uBAAoB,SAAA,QAAM,CAAA,QAAA,SAAA,CAAA;AAAA;QAChB,cACV,MAAwB;AAAA,UAAxBA,YAAwB,sBAAA,EAAZ,MAAM,GAAE,CAAA;AAAA;;;;;;;"}
1	+ {"version":3,"file":"NcInputConfirmCancel-D3HznHAG.mjs","sources":["../../src/components/NcAppNavigationItem/NcInputConfirmCancel.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n# Usage\n\n```\n<NcInputConfirmCancel @confirm=\"alert('confirm')\" @cancel=\"alert('cancel')\" />\n```\n</docs>\n\n<template>\n\t<div class=\"app-navigation-input-confirm\">\n\t\t<form\n\t\t\t@submit.prevent=\"confirm\"\n\t\t\t@keydown.esc.exact.stop.prevent=\"cancel\"\n\t\t\t@click.stop.prevent>\n\t\t\t<input\n\t\t\t\tref=\"input\"\n\t\t\t\tv-model=\"valueModel\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tclass=\"app-navigation-input-confirm__input\"\n\t\t\t\t:placeholder=\"placeholder\">\n\n\t\t\t<NcButton\n\t\t\t\t:aria-label=\"labelConfirm\"\n\t\t\t\ttype=\"submit\"\n\t\t\t\tvariant=\"primary\"\n\t\t\t\t@click.stop.prevent=\"confirm\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconArrowRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<NcButton\n\t\t\t\t:aria-label=\"labelCancel\"\n\t\t\t\ttype=\"reset\"\n\t\t\t\t:variant=\"primary ? 'primary' : 'tertiary'\"\n\t\t\t\t@click.stop.prevent=\"cancel\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconClose :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t</form>\n\t</div>\n</template>\n\n<script>\nimport IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport IconClose from 'vue-material-design-icons/Close.vue'\nimport { t } from '../../l10n.ts'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcInputConfirmCancel',\n\n\tcomponents: {\n\t\tIconArrowRight,\n\t\tIconClose,\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/*\n\t\t If this element is used on a primary element set to true for primary styling.\n\t\t /\n\t\tprimary: {\n\t\t\tdefault: false,\n\t\t\ttype: Boolean,\n\t\t},\n\n\t\t/\n\t\t Placeholder of the edit field\n\t\t /\n\t\tplaceholder: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\n\t\t/\n\t\t The current name (model value)\n\t\t */\n\t\tmodelValue: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\temits: [\n\t\t'cancel',\n\t\t'confirm',\n\t\t'update:modelValue',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tlabelConfirm: t('Confirm changes'),\n\t\t\tlabelCancel: t('Cancel changes'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tvalueModel: {\n\t\t\tget() { return this.modelValue },\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('update:modelValue', newValue)\n\t\t\t},\n\t\t},\n\t},\n\n\tmethods: {\n\t\tconfirm() {\n\t\t\tthis.$emit('confirm')\n\t\t},\n\n\t\tcancel() {\n\t\t\tthis.$emit('cancel')\n\t\t},\n\n\t\tfocusInput() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n$input-height: 34px;\n$input-padding: 7px;\n$input-margin: 5px;\n\n.app-navigation-input-confirm {\n\tflex: 1 0 100%;\n\twidth: 100%;\n\n\tform {\n\t\tdisplay: flex;\n\t}\n\n\t&__input {\n\t\theight: $input-height;\n\t\tflex: 1 1 100%;\n\t\tfont-size: 100% !important;\n\t\tmargin: $input-margin !important;\n\t\tmargin-inline-start: -1px - $input-padding !important;\n\t\tpadding: $input-padding !important;\n\n\t\t&:active,\n\t\t&:focus,\n\t\t&:hover {\n\t\t\toutline: none;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-color: var(--color-primary-element);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_createVNode"],"mappings":";;;;;;;AAuDA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;EAGD,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,SAAS;AAAA,MACR,SAAS;AAAA,MACT,MAAM;AAAA;;;;IAMP,aAAa;AAAA,MACZ,SAAS;AAAA,MACT,MAAM;AAAA;;;;IAMP,YAAY;AAAA,MACX,SAAS;AAAA,MACT,MAAM;AAAA;;EAIR,OAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA;EAGD,OAAO;AACN,WAAO;AAAA,MACN,cAAc,EAAE,iBAAiB;AAAA,MACjC,aAAa,EAAE,gBAAgB;AAAA,IAChC;AAAA,EACD;AAAA,EAEA,UAAU;AAAA,IACT,YAAY;AAAA,MACX,MAAM;AAAE,eAAO,KAAK;AAAA,MAAW;AAAA,MAC/B,IAAI,UAAU;AACb,aAAK,MAAM,qBAAqB,QAAQ;AAAA,MACzC;AAAA;;EAIF,SAAS;AAAA,IACR,UAAU;AACT,WAAK,MAAM,SAAS;AAAA,IACrB;AAAA,IAEA,SAAS;AACR,WAAK,MAAM,QAAQ;AAAA,IACpB;AAAA,IAEA,aAAa;AACZ,WAAK,MAAM,MAAM,MAAK;AAAA,IACvB;AAAA;AAEF;AA/GM,MAAA,aAAA,EAAA,OAAM,+BAA8B;;;;;;AAAzC,SAAAA,UAAA,GAAAC,mBAgCM,OAhCN,YAgCM;AAAA,IA/BLC,mBA8BO,QAAA;AAAA,MA7BL,+DAAgB,SAAA,WAAA,SAAA,QAAA,GAAA,IAAA,GAAO,CAAA,SAAA,CAAA;AAAA,MACvB,yEAAgC,SAAA,UAAA,SAAA,OAAA,GAAA,IAAA,GAAM,CAAA,SAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,CAAA;AAAA,MACtC,iDAAD,MAAA;AAAA,MAAA,GAAmB,CAAA,QAAA,SAAA,CAAA;AAAA;qBACnBA,mBAK4B,SAAA;AAAA,QAJ3B,KAAI;AAAA,qEACK,SAAA,aAAU;AAAA,QACnB,MAAK;AAAA,QACL,OAAM;AAAA,QACL,aAAa,OAAA;AAAA;qBAHL,SAAA,UAAU;AAAA;MAKpBC,YAQW,qBAAA;AAAA,QAPT,cAAY,MAAA;AAAA,QACb,MAAK;AAAA,QACL,SAAQ;AAAA,QACP,uBAAoB,SAAA,SAAO,CAAA,QAAA,SAAA,CAAA;AAAA;QACjB,cACV,MAA6B;AAAA,UAA7BA,YAA6B,2BAAA,EAAZ,MAAM,GAAE,CAAA;AAAA;;;MAI3BA,YAQW,qBAAA;AAAA,QAPT,cAAY,MAAA;AAAA,QACb,MAAK;AAAA,QACJ,SAAS,OAAA,UAAO,YAAA;AAAA,QAChB,uBAAoB,SAAA,QAAM,CAAA,QAAA,SAAA,CAAA;AAAA;QAChB,cACV,MAAwB;AAAA,UAAxBA,YAAwB,sBAAA,EAAZ,MAAM,GAAE,CAAA;AAAA;;;;;;;"}

package/dist/chunks/{NcInputField-D5lRaUiK.mjs → NcInputField-BYFjEj7Z.mjs} RENAMED Viewed

@@ -1,6 +1,6 @@
 import '../assets/NcInputField-DRt2ahWd.css';
 import { defineComponent, mergeModels, useModel, useAttrs, useTemplateRef, computed, warn, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, createCommentVNode, withDirectives, createBlock, mergeProps, toDisplayString, renderSlot, vShow, withCtx, createTextVNode } from "vue";
-import { d as mdiCheck, e as mdiAlertCircle } from "./mdi-D_GPbmUY.mjs";
+import { d as mdiCheck, e as mdiAlertCircle } from "./mdi-Cjx8NyEs.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
 import { i as isLegacy } from "./legacy-DcjXBL_t.mjs";
 import { N as NcButton } from "./NcButton-DkC5k3Lb.mjs";
@@ -161,4 +161,4 @@ const NcInputField = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data
 export {
   NcInputField as N
 };
-//# sourceMappingURL=NcInputField-D5lRaUiK.mjs.map
+//# sourceMappingURL=NcInputField-BYFjEj7Z.mjs.map

package/dist/chunks/{NcInputField-D5lRaUiK.mjs.map → NcInputField-BYFjEj7Z.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcInputField-D5lRaUiK.mjs","sources":["../../src/components/NcInputField/NcInputField.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\n\nThis component is used by the other Fields components.\nIt extends and styles an HTMLInputElement.\n\nYou cannot use it as is. This is here for documentation purposes.\nSee the other field components.\n\nFor a list of all available props and attributes, please check the [HTMLInputElement documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { VueClassType } from '../../utils/VueTypes.ts'\n\nimport { mdiAlertCircle, mdiCheck } from '@mdi/js'\nimport { computed, useAttrs, useTemplateRef, warn } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isLegacy } from '../../utils/legacy.ts'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\n\nexport interface NcInputFieldProps {\n\t/*\n\t Class to add to the root component.\n\t /\n\tclass?: VueClassType\n\n\t/\n\t Class to add to the input field.\n\t * Necessary to use NcInputField in the NcActionInput component.\n\t /\n\tinputClass?: VueClassType\n\n\t/\n\t HTML id of the input field\n\t /\n\tid?: string\n\n\t/\n\t The input label, always provide one for accessibility purposes.\n\t * On Nextcloud before version 32 this will also be used as a placeholder unless the placeholder\n\t * prop is populated with a different string.\n\t \n\t Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).\n\t /\n\tlabel?: string\n\n\t/\n\t Pass in true if you want to use an external label. This is useful\n\t * if you need a label that looks different from the one provided by\n\t * this component\n\t /\n\tlabelOutside?: boolean\n\n\t/\n\t The type of the input element\n\t /\n\ttype?: 'text' \| 'password' \| 'email' \| 'tel' \| 'url' \| 'search' \| 'number'\n\n\t/\n\t The placeholder of the input.\n\t * On Nextcloud before version 32 this would default to the `label` prop.\n\t * On Nextcloud 32 and on v9 of this library it will no longer have a default value.\n\t /\n\tplaceholder?: string\n\n\t/\n\t Controls whether to display the trailing button.\n\t /\n\tshowTrailingButton?: boolean\n\n\t/\n\t Label of the trailing button\n\t \n\t Required when showTrailingButton is set\n\t /\n\ttrailingButtonLabel?: string\n\n\t/\n\t Toggles the success state of the component. Adds a checkmark icon.\n\t /\n\tsuccess?: boolean\n\n\t/\n\t Toggles the error state of the component. Adds an error icon.\n\t /\n\terror?: boolean\n\n\t/\n\t Additional helper text message\n\t \n\t This will be displayed beneath the input field. In case the field is\n\t * also marked as having an error, the text will be displayed in red.\n\t /\n\thelperText?: string\n\n\t/\n\t Disable the input field\n\t /\n\tdisabled?: boolean\n\n\t/\n\t Specifies whether the input should have a pill form.\n\t * By default, input has rounded corners.\n\t /\n\tpill?: boolean\n}\n\ndefineOptions({\n\tinheritAttrs: false,\n})\n\n/\n The value of the input field\n * If type is 'number' and a number is passed as value than the type of `update:value` will also be 'number'\n /\nconst modelValue = defineModel<string \| number>({ required: true })\n\nconst props = withDefaults(defineProps<NcInputFieldProps>(), {\n\tclass: '',\n\thelperText: '',\n\tid: () => createElementId(),\n\tinputClass: '',\n\tlabel: undefined,\n\tplaceholder: undefined,\n\ttrailingButtonLabel: undefined,\n\ttype: 'text',\n})\n\nconst emit = defineEmits<{\n\ttrailingButtonClick: [event: MouseEvent]\n}>()\n\ndefineSlots<{\n\t/\n\t Leading icon, set the size to 20.\n\t /\n\ticon?: Slot\n\n\t/\n\t Icon for the trailing button.\n\t /\n\t'trailing-button-icon'?: Slot\n}>()\n\n// public API\ndefineExpose({\n\tfocus,\n\tselect,\n})\n\nconst attrs = useAttrs()\n\nconst inputElement = useTemplateRef('input')\n\nconst hasTrailingIcon = computed(() => props.showTrailingButton \|\| props.success)\n\nconst internalPlaceholder = computed(() => props.placeholder \|\| (isLegacy ? props.label : undefined))\n\nconst isValidLabel = computed(() => {\n\tconst isValidLabel = props.label \|\| props.labelOutside\n\tif (!isValidLabel) {\n\t\twarn('You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.')\n\t}\n\treturn isValidLabel\n})\n\nconst ariaDescribedby = computed(() => {\n\tconst ariaDescribedby: string[] = []\n\tif (props.helperText) {\n\t\tariaDescribedby.push(`${props.id}-helper-text`)\n\t}\n\tif (attrs['aria-describedby']) {\n\t\tariaDescribedby.push(String(attrs['aria-describedby']))\n\t}\n\treturn ariaDescribedby.join(' ') \|\| undefined\n})\n\n/\n Focus the input element\n \n @param options - Focus options\n * @public\n /\nfunction focus(options?: FocusOptions) {\n\tinputElement.value!.focus(options)\n}\n\n/\n Select all the text in the input\n \n @public\n /\nfunction select() {\n\tinputElement.value!.select()\n}\n\n/\n Handle the input event of the HTML input.\n * Parses numbers in case of numeric type.\n \n @param event - The input event\n /\nfunction handleInput(event: Event) {\n\tconst target = event.target as HTMLInputElement\n\tmodelValue.value = props.type === 'number' && typeof modelValue.value === 'number'\n\t\t? parseFloat(target.value)\n\t\t: target.value\n}\n</script>\n\n<template>\n\t<div\n\t\tclass=\"input-field\"\n\t\t:class=\"[{\n\t\t\t'input-field--disabled': disabled,\n\t\t\t'input-field--error': error,\n\t\t\t'input-field--label-outside': labelOutside \|\| !isValidLabel,\n\t\t\t'input-field--leading-icon': !!$slots.icon,\n\t\t\t'input-field--trailing-icon': hasTrailingIcon,\n\t\t\t'input-field--pill': pill,\n\t\t\t'input-field--success': success,\n\t\t\t'input-field--legacy': isLegacy,\n\t\t}, $props.class]\">\n\t\t<div class=\"input-field__main-wrapper\">\n\t\t\t<input\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t:id\n\t\t\t\tref=\"input\"\n\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\tclass=\"input-field__input\"\n\t\t\t\t:class=\"inputClass\"\n\t\t\t\t:disabled\n\t\t\t\t:placeholder=\"internalPlaceholder\"\n\t\t\t\t:type\n\t\t\t\t:value=\"modelValue.toString()\"\n\t\t\t\t@input=\"handleInput\">\n\t\t\t<!-- Label -->\n\t\t\t<label\n\t\t\t\tv-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"input-field__label\"\n\t\t\t\t:for=\"id\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\n\t\t\t<!-- Leading icon -->\n\t\t\t<div v-show=\"!!$slots.icon\" class=\"input-field__icon input-field__icon--leading\">\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</div>\n\n\t\t\t<!-- trailing button -->\n\t\t\t<NcButton\n\t\t\t\tv-if=\"showTrailingButton\"\n\t\t\t\tclass=\"input-field__trailing-button\"\n\t\t\t\t:aria-label=\"trailingButtonLabel\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t\t@click=\"emit('trailingButtonClick', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"trailing-button-icon\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<!-- Success and error icons -->\n\t\t\t<div\n\t\t\t\tv-else-if=\"success \|\| error\"\n\t\t\t\tclass=\"input-field__icon input-field__icon--trailing\">\n\t\t\t\t<NcIconSvgWrapper v-if=\"success\" :path=\"mdiCheck\" />\n\t\t\t\t<NcIconSvgWrapper v-else :path=\"mdiAlertCircle\" />\n\t\t\t</div>\n\t\t</div>\n\t\t<p\n\t\t\tv-if=\"helperText\"\n\t\t\t:id=\"`${id}-helper-text`\"\n\t\t\tclass=\"input-field__helper-text-message\">\n\t\t\t<NcIconSvgWrapper v-if=\"success\" class=\"input-field__helper-text-message__icon\" :path=\"mdiCheck\" />\n\t\t\t<NcIconSvgWrapper v-else-if=\"error\" class=\"input-field__helper-text-message__icon\" :path=\"mdiAlertCircle\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n\n.input-field {\n\t--input-border-color: var(--color-border-maxcontrast);\n\t--input-border-radius: var(--border-radius-element);\n\t// Used e.g. if border width differs between focused and unfocused we need to compensate to prevent jumping\n\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\t// The padding before the input can start (leading button or border)\n\t--input-padding-start: var(--border-radius-element);\n\t// The padding where the input has to end (trailing button or border)\n\t--input-padding-end: var(--border-radius-element);\n\t// positional styles\n\tposition: relative;\n\twidth: 100%;\n\tmargin-block-start: 6px; // for the label in active state\n\n\t&--disabled {\n\t\topacity: 0.4;\n\t\tfilter: saturate(0.4);\n\t}\n\n\t// If there is no internal label we reset the margin reserved for it\n\t&--label-outside {\n\t\tmargin-block-start: 0;\n\t}\n\n\t&--leading-icon {\n\t\t--input-padding-start: calc(var(--default-clickable-area) - var(--default-grid-baseline));\n\t}\n\n\t&--trailing-icon {\n\t\t--input-padding-end: calc(var(--default-clickable-area) - var(--default-grid-baseline));\n\t}\n\n\t&--pill {\n\t\t--input-border-radius: var(--border-radius-pill);\n\t}\n\n\t&__main-wrapper {\n\t\theight: var(--default-clickable-area);\n\t\tpadding: var(--border-width-input, 2px);\n\t\tposition: relative;\n\n\t\t&:not(:has([disabled])):has(input:focus),\n\t\t&:not(:has([disabled])):has(input:active) {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t&__input {\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder: none;\n\t\tborder-radius: var(--input-border-radius);\n\t\tbox-shadow:\n\t\t\t0 -1px var(--input-border-color),\n\t\t\t0 0 0 1px color-mix(in srgb, var(--input-border-color), 65% transparent);\n\n\t\tcursor: pointer;\n\t\t-webkit-appearance: textfield !important;\n\t\t-moz-appearance: textfield !important;\n\t\tappearance: textfield !important;\n\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\n\t\theight: 100% !important;\n\t\tmin-height: unset;\n\t\twidth: 100%;\n\t\tpadding-block: var(--input-border-width-offset);\n\t\tpadding-inline: calc(var(--input-padding-start) + var(--input-border-width-offset)) calc(var(--input-padding-end) + var(--input-border-width-offset));\n\n\t\t&::placeholder {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t// prevent Blink and WebKit to add an additional button when type is set to search\n\t\t// we have our properly styled trailing button anyways.\n\t\t&::-webkit-search-cancel-button {\n\t\t\t// its a weird bug in Blink that this rule must not be grouped with the other selectors below.\n\t\t\t// otherwise it is not recognized by Blink\n\t\t\tdisplay: none;\n\t\t}\n\t\t&::-webkit-search-decoration,\n\t\t&::-webkit-search-results-button,\n\t\t&::-webkit-search-results-decoration,\n\t\t&::-ms-clear {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t&:hover:not([disabled]) {\n\t\t\tbox-shadow: 0 0 0 1px var(--input-border-color);;\n\t\t}\n\n\t\t&:active:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\t--input-border-color: var(--color-main-text);\n\t\t\t// Reset padding offset when focused\n\t\t\t--input-border-width-offset: 0px;\n\t\t\tborder: var(--border-width-input-focused, 2px) solid var(--input-border-color);\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t}\n\n\t\t&:focus + .input-field__label,\n\t\t&:hover:not(:placeholder-shown) + .input-field__label {\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\n\t\t&:focus {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: unset !important; // Override server rules\n\t\t}\n\t}\n\n\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t&:not(&--label-outside) &__input:not(:focus)::placeholder {\n\t\topacity: 0;\n\t}\n\n\t&__label {\n\t\t--input-label-font-size: var(--default-font-size);\n\t\tfont-size: var(--input-label-font-size);\n\n\t\tposition: absolute;\n\t\tmargin-inline: var(--input-padding-start) var(--input-padding-end);\n\t\tmax-width: fit-content;\n\t\tinset-block-start: calc((var(--default-clickable-area) - 1lh) / 2); // center the label vertically\n\t\tinset-inline: var(--border-width-input-focused, 2px);\n\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(:placeholder-shown) + &__label {\n\t\t--input-label-font-size: 13px; // minimum allowed font size for accessibility\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\t// 1.5 font-size = line-height; line-height / 2 for centering and make it negative as we need to move outside the element\n\t\tinset-block-start: calc(-1.5 * var(--input-label-font-size) / 2);\n\t\tfont-weight: 500;\n\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: var(--default-grid-baseline);\n\t\tmargin-inline: calc(var(--input-padding-start) - var(--default-grid-baseline)) calc(var(--input-padding-end) - var(--default-grid-baseline));\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t}\n\n\t&__icon {\n\t\tposition: absolute;\n\t\theight: var(--default-clickable-area);\n\t\twidth: var(--default-clickable-area);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\topacity: 0.7;\n\n\t\tinset-block-end: 0;\n\n\t\t&--leading {\n\t\t\tinset-inline-start: 0px;\n\t\t}\n\n\t\t&--trailing {\n\t\t\tinset-inline-end: 0px;\n\t\t}\n\t}\n\n\t&__trailing-button {\n\t\t--button-size: calc(var(--default-clickable-area) - 2 * var(--border-width-input-focused, 2px)) !important;\n\t\t--button-radius: calc(var(--input-border-radius) - var(--border-width-input-focused, 2px)); // lower radius as size is smaller\n\n\t\t&.button-vue {\n\t\t\tposition: absolute;\n\t\t\ttop: var(--border-width-input-focused, 2px);\n\t\t\tinset-inline-end: var(--border-width-input-focused, 2px);\n\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: none !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tpadding-inline: var(--border-radius-element);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcolor: var(--color-text-maxcontrast);\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\t}\n\n\t&--error {\n\t\t.input-field__helper-text-message,\n\t\t.input-field__icon--trailing {\n\t\t\tcolor: var(--color-text-error, var(--color-error));\n\t\t}\n\t}\n\n\t&--error .input-field__input,\n\t&__input:user-invalid {\n\t\t--input-border-color: var(--color-border-error, var(--color-error)) !important; //Override hover border color\n\t\t&:focus-visible {\n\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t}\n\t}\n\n\t&--success {\n\t\t.input-field__input {\n\t\t\t--input-border-color: var(--color-border-success, var(--color-success)) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\t\t.input-field__helper-text-message__icon {\n\t\t\tcolor: var(--color-border-success, var(--color-success));\n\t\t}\n\t}\n\n\t&--legacy {\n\t\t.input-field__input {\n\t\t\tbox-shadow: 0 0 0 1px var(--input-border-color) inset;\n\t\t}\n\n\t\t.input-field__main-wrapper:hover:not(:has([disabled])) {\n\t\t\tpadding: 0;\n\n\t\t\t.input-field__input {\n\t\t\t\t--input-border-color: var(--color-main-text);\n\t\t\t\t// Reset padding offset when focused\n\t\t\t\t--input-border-width-offset: 0px;\n\t\t\t\tborder: var(--border-width-input-focused, 2px) solid var(--input-border-color);\n\t\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t\t}\n\t\t}\n\t}\n}\n</style>\n"],"names":["_useModel","isValidLabel","ariaDescribedby","_createElementBlock","disabled","error","labelOutside","$slots","pill","success","_unref","$props","_createElementVNode","_mergeProps","id","inputClass","type","label","_withDirectives","_renderSlot","showTrailingButton","_createBlock","trailingButtonLabel","_openBlock","helperText","_createTextVNode"],"mappings":"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"}
1	+ {"version":3,"file":"NcInputField-BYFjEj7Z.mjs","sources":["../../src/components/NcInputField/NcInputField.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\n\nThis component is used by the other Fields components.\nIt extends and styles an HTMLInputElement.\n\nYou cannot use it as is. This is here for documentation purposes.\nSee the other field components.\n\nFor a list of all available props and attributes, please check the [HTMLInputElement documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { VueClassType } from '../../utils/VueTypes.ts'\n\nimport { mdiAlertCircle, mdiCheck } from '@mdi/js'\nimport { computed, useAttrs, useTemplateRef, warn } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isLegacy } from '../../utils/legacy.ts'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\n\nexport interface NcInputFieldProps {\n\t/*\n\t Class to add to the root component.\n\t /\n\tclass?: VueClassType\n\n\t/\n\t Class to add to the input field.\n\t * Necessary to use NcInputField in the NcActionInput component.\n\t /\n\tinputClass?: VueClassType\n\n\t/\n\t HTML id of the input field\n\t /\n\tid?: string\n\n\t/\n\t The input label, always provide one for accessibility purposes.\n\t * On Nextcloud before version 32 this will also be used as a placeholder unless the placeholder\n\t * prop is populated with a different string.\n\t \n\t Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).\n\t /\n\tlabel?: string\n\n\t/\n\t Pass in true if you want to use an external label. This is useful\n\t * if you need a label that looks different from the one provided by\n\t * this component\n\t /\n\tlabelOutside?: boolean\n\n\t/\n\t The type of the input element\n\t /\n\ttype?: 'text' \| 'password' \| 'email' \| 'tel' \| 'url' \| 'search' \| 'number'\n\n\t/\n\t The placeholder of the input.\n\t * On Nextcloud before version 32 this would default to the `label` prop.\n\t * On Nextcloud 32 and on v9 of this library it will no longer have a default value.\n\t /\n\tplaceholder?: string\n\n\t/\n\t Controls whether to display the trailing button.\n\t /\n\tshowTrailingButton?: boolean\n\n\t/\n\t Label of the trailing button\n\t \n\t Required when showTrailingButton is set\n\t /\n\ttrailingButtonLabel?: string\n\n\t/\n\t Toggles the success state of the component. Adds a checkmark icon.\n\t /\n\tsuccess?: boolean\n\n\t/\n\t Toggles the error state of the component. Adds an error icon.\n\t /\n\terror?: boolean\n\n\t/\n\t Additional helper text message\n\t \n\t This will be displayed beneath the input field. In case the field is\n\t * also marked as having an error, the text will be displayed in red.\n\t /\n\thelperText?: string\n\n\t/\n\t Disable the input field\n\t /\n\tdisabled?: boolean\n\n\t/\n\t Specifies whether the input should have a pill form.\n\t * By default, input has rounded corners.\n\t /\n\tpill?: boolean\n}\n\ndefineOptions({\n\tinheritAttrs: false,\n})\n\n/\n The value of the input field\n * If type is 'number' and a number is passed as value than the type of `update:value` will also be 'number'\n /\nconst modelValue = defineModel<string \| number>({ required: true })\n\nconst props = withDefaults(defineProps<NcInputFieldProps>(), {\n\tclass: '',\n\thelperText: '',\n\tid: () => createElementId(),\n\tinputClass: '',\n\tlabel: undefined,\n\tplaceholder: undefined,\n\ttrailingButtonLabel: undefined,\n\ttype: 'text',\n})\n\nconst emit = defineEmits<{\n\ttrailingButtonClick: [event: MouseEvent]\n}>()\n\ndefineSlots<{\n\t/\n\t Leading icon, set the size to 20.\n\t /\n\ticon?: Slot\n\n\t/\n\t Icon for the trailing button.\n\t /\n\t'trailing-button-icon'?: Slot\n}>()\n\n// public API\ndefineExpose({\n\tfocus,\n\tselect,\n})\n\nconst attrs = useAttrs()\n\nconst inputElement = useTemplateRef('input')\n\nconst hasTrailingIcon = computed(() => props.showTrailingButton \|\| props.success)\n\nconst internalPlaceholder = computed(() => props.placeholder \|\| (isLegacy ? props.label : undefined))\n\nconst isValidLabel = computed(() => {\n\tconst isValidLabel = props.label \|\| props.labelOutside\n\tif (!isValidLabel) {\n\t\twarn('You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.')\n\t}\n\treturn isValidLabel\n})\n\nconst ariaDescribedby = computed(() => {\n\tconst ariaDescribedby: string[] = []\n\tif (props.helperText) {\n\t\tariaDescribedby.push(`${props.id}-helper-text`)\n\t}\n\tif (attrs['aria-describedby']) {\n\t\tariaDescribedby.push(String(attrs['aria-describedby']))\n\t}\n\treturn ariaDescribedby.join(' ') \|\| undefined\n})\n\n/\n Focus the input element\n \n @param options - Focus options\n * @public\n /\nfunction focus(options?: FocusOptions) {\n\tinputElement.value!.focus(options)\n}\n\n/\n Select all the text in the input\n \n @public\n /\nfunction select() {\n\tinputElement.value!.select()\n}\n\n/\n Handle the input event of the HTML input.\n * Parses numbers in case of numeric type.\n \n @param event - The input event\n /\nfunction handleInput(event: Event) {\n\tconst target = event.target as HTMLInputElement\n\tmodelValue.value = props.type === 'number' && typeof modelValue.value === 'number'\n\t\t? parseFloat(target.value)\n\t\t: target.value\n}\n</script>\n\n<template>\n\t<div\n\t\tclass=\"input-field\"\n\t\t:class=\"[{\n\t\t\t'input-field--disabled': disabled,\n\t\t\t'input-field--error': error,\n\t\t\t'input-field--label-outside': labelOutside \|\| !isValidLabel,\n\t\t\t'input-field--leading-icon': !!$slots.icon,\n\t\t\t'input-field--trailing-icon': hasTrailingIcon,\n\t\t\t'input-field--pill': pill,\n\t\t\t'input-field--success': success,\n\t\t\t'input-field--legacy': isLegacy,\n\t\t}, $props.class]\">\n\t\t<div class=\"input-field__main-wrapper\">\n\t\t\t<input\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t:id\n\t\t\t\tref=\"input\"\n\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\tclass=\"input-field__input\"\n\t\t\t\t:class=\"inputClass\"\n\t\t\t\t:disabled\n\t\t\t\t:placeholder=\"internalPlaceholder\"\n\t\t\t\t:type\n\t\t\t\t:value=\"modelValue.toString()\"\n\t\t\t\t@input=\"handleInput\">\n\t\t\t<!-- Label -->\n\t\t\t<label\n\t\t\t\tv-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"input-field__label\"\n\t\t\t\t:for=\"id\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\n\t\t\t<!-- Leading icon -->\n\t\t\t<div v-show=\"!!$slots.icon\" class=\"input-field__icon input-field__icon--leading\">\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</div>\n\n\t\t\t<!-- trailing button -->\n\t\t\t<NcButton\n\t\t\t\tv-if=\"showTrailingButton\"\n\t\t\t\tclass=\"input-field__trailing-button\"\n\t\t\t\t:aria-label=\"trailingButtonLabel\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t\t@click=\"emit('trailingButtonClick', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"trailing-button-icon\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<!-- Success and error icons -->\n\t\t\t<div\n\t\t\t\tv-else-if=\"success \|\| error\"\n\t\t\t\tclass=\"input-field__icon input-field__icon--trailing\">\n\t\t\t\t<NcIconSvgWrapper v-if=\"success\" :path=\"mdiCheck\" />\n\t\t\t\t<NcIconSvgWrapper v-else :path=\"mdiAlertCircle\" />\n\t\t\t</div>\n\t\t</div>\n\t\t<p\n\t\t\tv-if=\"helperText\"\n\t\t\t:id=\"`${id}-helper-text`\"\n\t\t\tclass=\"input-field__helper-text-message\">\n\t\t\t<NcIconSvgWrapper v-if=\"success\" class=\"input-field__helper-text-message__icon\" :path=\"mdiCheck\" />\n\t\t\t<NcIconSvgWrapper v-else-if=\"error\" class=\"input-field__helper-text-message__icon\" :path=\"mdiAlertCircle\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n\n.input-field {\n\t--input-border-color: var(--color-border-maxcontrast);\n\t--input-border-radius: var(--border-radius-element);\n\t// Used e.g. if border width differs between focused and unfocused we need to compensate to prevent jumping\n\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\t// The padding before the input can start (leading button or border)\n\t--input-padding-start: var(--border-radius-element);\n\t// The padding where the input has to end (trailing button or border)\n\t--input-padding-end: var(--border-radius-element);\n\t// positional styles\n\tposition: relative;\n\twidth: 100%;\n\tmargin-block-start: 6px; // for the label in active state\n\n\t&--disabled {\n\t\topacity: 0.4;\n\t\tfilter: saturate(0.4);\n\t}\n\n\t// If there is no internal label we reset the margin reserved for it\n\t&--label-outside {\n\t\tmargin-block-start: 0;\n\t}\n\n\t&--leading-icon {\n\t\t--input-padding-start: calc(var(--default-clickable-area) - var(--default-grid-baseline));\n\t}\n\n\t&--trailing-icon {\n\t\t--input-padding-end: calc(var(--default-clickable-area) - var(--default-grid-baseline));\n\t}\n\n\t&--pill {\n\t\t--input-border-radius: var(--border-radius-pill);\n\t}\n\n\t&__main-wrapper {\n\t\theight: var(--default-clickable-area);\n\t\tpadding: var(--border-width-input, 2px);\n\t\tposition: relative;\n\n\t\t&:not(:has([disabled])):has(input:focus),\n\t\t&:not(:has([disabled])):has(input:active) {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t&__input {\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder: none;\n\t\tborder-radius: var(--input-border-radius);\n\t\tbox-shadow:\n\t\t\t0 -1px var(--input-border-color),\n\t\t\t0 0 0 1px color-mix(in srgb, var(--input-border-color), 65% transparent);\n\n\t\tcursor: pointer;\n\t\t-webkit-appearance: textfield !important;\n\t\t-moz-appearance: textfield !important;\n\t\tappearance: textfield !important;\n\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\n\t\theight: 100% !important;\n\t\tmin-height: unset;\n\t\twidth: 100%;\n\t\tpadding-block: var(--input-border-width-offset);\n\t\tpadding-inline: calc(var(--input-padding-start) + var(--input-border-width-offset)) calc(var(--input-padding-end) + var(--input-border-width-offset));\n\n\t\t&::placeholder {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t// prevent Blink and WebKit to add an additional button when type is set to search\n\t\t// we have our properly styled trailing button anyways.\n\t\t&::-webkit-search-cancel-button {\n\t\t\t// its a weird bug in Blink that this rule must not be grouped with the other selectors below.\n\t\t\t// otherwise it is not recognized by Blink\n\t\t\tdisplay: none;\n\t\t}\n\t\t&::-webkit-search-decoration,\n\t\t&::-webkit-search-results-button,\n\t\t&::-webkit-search-results-decoration,\n\t\t&::-ms-clear {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t&:hover:not([disabled]) {\n\t\t\tbox-shadow: 0 0 0 1px var(--input-border-color);;\n\t\t}\n\n\t\t&:active:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\t--input-border-color: var(--color-main-text);\n\t\t\t// Reset padding offset when focused\n\t\t\t--input-border-width-offset: 0px;\n\t\t\tborder: var(--border-width-input-focused, 2px) solid var(--input-border-color);\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t}\n\n\t\t&:focus + .input-field__label,\n\t\t&:hover:not(:placeholder-shown) + .input-field__label {\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\n\t\t&:focus {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: unset !important; // Override server rules\n\t\t}\n\t}\n\n\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t&:not(&--label-outside) &__input:not(:focus)::placeholder {\n\t\topacity: 0;\n\t}\n\n\t&__label {\n\t\t--input-label-font-size: var(--default-font-size);\n\t\tfont-size: var(--input-label-font-size);\n\n\t\tposition: absolute;\n\t\tmargin-inline: var(--input-padding-start) var(--input-padding-end);\n\t\tmax-width: fit-content;\n\t\tinset-block-start: calc((var(--default-clickable-area) - 1lh) / 2); // center the label vertically\n\t\tinset-inline: var(--border-width-input-focused, 2px);\n\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(:placeholder-shown) + &__label {\n\t\t--input-label-font-size: 13px; // minimum allowed font size for accessibility\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\t// 1.5 font-size = line-height; line-height / 2 for centering and make it negative as we need to move outside the element\n\t\tinset-block-start: calc(-1.5 * var(--input-label-font-size) / 2);\n\t\tfont-weight: 500;\n\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: var(--default-grid-baseline);\n\t\tmargin-inline: calc(var(--input-padding-start) - var(--default-grid-baseline)) calc(var(--input-padding-end) - var(--default-grid-baseline));\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t}\n\n\t&__icon {\n\t\tposition: absolute;\n\t\theight: var(--default-clickable-area);\n\t\twidth: var(--default-clickable-area);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\topacity: 0.7;\n\n\t\tinset-block-end: 0;\n\n\t\t&--leading {\n\t\t\tinset-inline-start: 0px;\n\t\t}\n\n\t\t&--trailing {\n\t\t\tinset-inline-end: 0px;\n\t\t}\n\t}\n\n\t&__trailing-button {\n\t\t--button-size: calc(var(--default-clickable-area) - 2 * var(--border-width-input-focused, 2px)) !important;\n\t\t--button-radius: calc(var(--input-border-radius) - var(--border-width-input-focused, 2px)); // lower radius as size is smaller\n\n\t\t&.button-vue {\n\t\t\tposition: absolute;\n\t\t\ttop: var(--border-width-input-focused, 2px);\n\t\t\tinset-inline-end: var(--border-width-input-focused, 2px);\n\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: none !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tpadding-inline: var(--border-radius-element);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcolor: var(--color-text-maxcontrast);\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\t}\n\n\t&--error {\n\t\t.input-field__helper-text-message,\n\t\t.input-field__icon--trailing {\n\t\t\tcolor: var(--color-text-error, var(--color-error));\n\t\t}\n\t}\n\n\t&--error .input-field__input,\n\t&__input:user-invalid {\n\t\t--input-border-color: var(--color-border-error, var(--color-error)) !important; //Override hover border color\n\t\t&:focus-visible {\n\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t}\n\t}\n\n\t&--success {\n\t\t.input-field__input {\n\t\t\t--input-border-color: var(--color-border-success, var(--color-success)) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\t\t.input-field__helper-text-message__icon {\n\t\t\tcolor: var(--color-border-success, var(--color-success));\n\t\t}\n\t}\n\n\t&--legacy {\n\t\t.input-field__input {\n\t\t\tbox-shadow: 0 0 0 1px var(--input-border-color) inset;\n\t\t}\n\n\t\t.input-field__main-wrapper:hover:not(:has([disabled])) {\n\t\t\tpadding: 0;\n\n\t\t\t.input-field__input {\n\t\t\t\t--input-border-color: var(--color-main-text);\n\t\t\t\t// Reset padding offset when focused\n\t\t\t\t--input-border-width-offset: 0px;\n\t\t\t\tborder: var(--border-width-input-focused, 2px) solid var(--input-border-color);\n\t\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t\t}\n\t\t}\n\t}\n}\n</style>\n"],"names":["_useModel","isValidLabel","ariaDescribedby","_createElementBlock","disabled","error","labelOutside","$slots","pill","success","_unref","$props","_createElementVNode","_mergeProps","id","inputClass","type","label","_withDirectives","_renderSlot","showTrailingButton","_createBlock","trailingButtonLabel","_openBlock","helperText","_createTextVNode"],"mappings":"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"}

package/dist/chunks/{NcKbd-kRS12jei.mjs → NcKbd-B3epGXRo.mjs} RENAMED Viewed

@@ -1,6 +1,6 @@
 import '../assets/NcKbd-BGW1_Jb7.css';
 import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, toDisplayString } from "vue";
-import { r as register, a as t } from "./_l10n-CeXHJQB0.mjs";
+import { r as register, a as t } from "./_l10n-BPfpECk_.mjs";
 import { i as isMac } from "./platform-CC2ecGvV.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 register();
@@ -50,4 +50,4 @@ const NcKbd = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModule
 export {
   NcKbd as N
 };
-//# sourceMappingURL=NcKbd-kRS12jei.mjs.map
+//# sourceMappingURL=NcKbd-B3epGXRo.mjs.map

package/dist/chunks/{NcKbd-kRS12jei.mjs.map → NcKbd-B3epGXRo.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcKbd-~~kRS12jei~~.mjs","sources":["../../src/components/NcKbd/NcKbd.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { computed } from 'vue'\nimport { t } from '../../l10n.ts'\nimport { isMac } from '../../utils/platform.ts'\n\nconst {\n\tsymbol = undefined,\n\tmac = isMac,\n} = defineProps<{\n\t/*\n\t Key name or symbol to display.\n\t * For common special keys (CTRL, ALT, SHIFT, Arrow keys, etc.) it will display the symbol on macOS and the localized name on Windows/Linux.\n\t /\n\tsymbol?: 'ArrowUp' \| 'ArrowDown' \| 'ArrowLeft' \| 'ArrowRight' \| 'Control' \| 'Alt' \| 'Shift' \| 'Enter' \| 'Space' \| 'Tab' \| 'Delete' \| 'Escape' \| (string & {})\n\t/\n\t Explicitly use macOS (true) or Windows/Linux (false) key symbols.\n\t * By default it uses the OS detected from the user agent.\n\t /\n\tmac?: boolean \| undefined\n}>()\n\ndefineSlots<{\n\tdefault?: Slot\n}>()\n\n/\n Map of special key names to symbols or localized names:\n * - macOS uses symbols instead of names\n * - Windows/Linux uses localized names\n * - In ternary expressions, // TRANSLATORS comments only works for the second operand, but not for `else`\n /\nconst labels = computed(() => ({\n\tArrowUp: '↑',\n\tArrowDown: '↓',\n\tArrowLeft: '←',\n\tArrowRight: '→',\n\tControl: !mac\n\t\t? t('Ctrl') // TRANSLATORS: Ctrl key on keyboard (Windows/Linux)\n\t\t: '⌘',\n\tAlt: !mac\n\t\t? t('Alt') // TRANSLATORS: Alt key on keyboard (Windows/Linux)\n\t\t: '⌥',\n\tShift: !mac\n\t\t? t('Shift') // TRANSLATORS: Shift key on keyboard\n\t\t: '⇧',\n\tEnter: !mac\n\t\t? t('Enter') // TRANSLATORS: Enter key on keyboard\n\t\t: '⏎',\n\tTab: !mac\n\t\t? t('Tab') // TRANSLATORS: Tab key on keyboard\n\t\t: '⇥',\n\tDelete: !mac\n\t\t? t('Delete') // TRANSLATORS: Delete key on keyboard\n\t\t: '⌫',\n\tEscape: !mac\n\t\t? t('Escape') // TRANSLATORS: Escape key on keyboard\n\t\t: '⎋',\n\tSpace: t('Space'), // TRANSLATORS: Space key on keyboard\n} as const))\n\nconst label = computed(() => (symbol && labels.value[symbol]) \|\| symbol)\n</script>\n\n<template>\n\t<kbd :class=\"$style.kbd\">\n\t\t<slot>\n\t\t\t{{ label }}\n\t\t</slot>\n\t</kbd>\n</template>\n\n<style lang=\"scss\" module>\n.kbd {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmin-width: var(--default-clickable-area);\n\theight: var(--default-clickable-area);\n\tpadding-inline: calc(2 var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));\n\tborder: 2px solid var(--color-primary-element-light);\n\tborder-block-end-width: 4px;\n\tborder-radius: var(--border-radius-element);\n\tbox-shadow: none; /* Override server <kbd> styles /\n\tfont-family: var(--font-family); / Design decision: looks better with the default font instead of mono /\n\tline-height: 1;\n\twhite-space: nowrap;\n\n\t& + .kbd {\n\t\tmargin-inline-start: calc(1 var(--default-grid-baseline));\n\t}\n}\n</style>\n\n<docs>\nNextcloud-styled `<kbd>` element. It can be used with a single key symbol in the content or with the `symbol` prop (preferred).\n\nSubsequent `<NcKbd>` elements will have a small margin between them.\n\n```vue\n<template>\n\t<div>\n\t\t<NcKbd symbol=\"Control\" />\n\t\t<NcKbd symbol=\"F\" />\n\t</div>\n</template>\n```\n\n### Special symbols\n\nIt is recommended to use the `symbol` prop. It displays the appropriate symbol or localized name depending on the OS.\nOS detection is automatic but can be overridden via the `mac` prop.\n\n```vue\n<template>\n\t<table class=\"sample-table\">\n\t\t<tr>\n\t\t\t<th>symbol</th>\n\t\t\t<th>Auto</th>\n\t\t\t<th>macOS</th>\n\t\t\t<th>Windows/Linux</th>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowUp</th>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowDown</th>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowLeft</th>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowRight</th>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Control</th>\n\t\t\t<td><NcKbd symbol=\"Control\" /></td>\n\t\t\t<td><NcKbd symbol=\"Control\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Control\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Alt</th>\n\t\t\t<td><NcKbd symbol=\"Alt\" /></td>\n\t\t\t<td><NcKbd symbol=\"Alt\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Alt\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Shift</th>\n\t\t\t<td><NcKbd symbol=\"Shift\" /></td>\n\t\t\t<td><NcKbd symbol=\"Shift\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Shift\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Enter</th>\n\t\t\t<td><NcKbd symbol=\"Enter\" /></td>\n\t\t\t<td><NcKbd symbol=\"Enter\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Enter\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Tab</th>\n\t\t\t<td><NcKbd symbol=\"Tab\" /></td>\n\t\t\t<td><NcKbd symbol=\"Tab\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Tab\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Delete</th>\n\t\t\t<td><NcKbd symbol=\"Delete\" /></td>\n\t\t\t<td><NcKbd symbol=\"Delete\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Delete\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Escape</th>\n\t\t\t<td><NcKbd symbol=\"Escape\" /></td>\n\t\t\t<td><NcKbd symbol=\"Escape\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Escape\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Space</th>\n\t\t\t<td><NcKbd symbol=\"Space\" /></td>\n\t\t\t<td><NcKbd symbol=\"Space\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Space\" :mac=\"false\" /></td>\n\t\t</tr>\n\t</table>\n</template>\n\n<style scoped>\n.sample-table {\n\tborder-collapse: collapse;\n\n\tth,\n\ttd {\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: calc(1 * var(--default-grid-baseline));\n\t}\n\n\ttr:first-child {\n\t\tborder-block-end: 2px solid var(--color-border);\n\n\t\tth {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n}\n</style>\n```\n\n### Custom content\n\nIn a special case you might want to use a custom content.\n\n```vue\n<template>\n\t<NcKbd aria-label=\"Eject\">\n\t\t<IconEject :size=\"15\" />\n\t</NcKbd>\n</template>\n\n<script>\nimport IconEject from 'vue-material-design-icons/Eject.vue'\n\nexport default {\n\tcomponents: { IconEject }\n}\n</script>\n```\n</docs>\n"],"names":["_createElementBlock","_normalizeClass","$style","_renderSlot"],"mappings":";;;;;;;;;;;;AAsCA,UAAM,SAAS,SAAS,OAAO;AAAA,MAC9B,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,SAAS,CAAC,QAAA,MACP,EAAE,MAAM,IACR;AAAA,MACH,KAAK,CAAC,QAAA,MACH,EAAE,KAAK,IACP;AAAA,MACH,OAAO,CAAC,QAAA,MACL,EAAE,OAAO,IACT;AAAA,MACH,OAAO,CAAC,QAAA,MACL,EAAE,OAAO,IACT;AAAA,MACH,KAAK,CAAC,QAAA,MACH,EAAE,KAAK,IACP;AAAA,MACH,QAAQ,CAAC,QAAA,MACN,EAAE,QAAQ,IACV;AAAA,MACH,QAAQ,CAAC,QAAA,MACN,EAAE,QAAQ,IACV;AAAA,MACH,OAAO,EAAE,OAAO;AAAA;AAAA,IAAA,EACN;AAEX,UAAM,QAAQ,SAAS,MAAO,QAAA,UAAU,OAAO,MAAM,QAAA,MAAM,KAAM,QAAA,MAAM;;0BAItEA,mBAIM,OAAA;AAAA,QAJA,OAAKC,eAAEC,KAAAA,OAAO,GAAG;AAAA,MAAA;QACtBC,WAEO,4BAFP,MAEO;AAAA,0CADH,MAAA,KAAK,GAAA,CAAA;AAAA,QAAA;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcKbd-B3epGXRo.mjs","sources":["../../src/components/NcKbd/NcKbd.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { computed } from 'vue'\nimport { t } from '../../l10n.ts'\nimport { isMac } from '../../utils/platform.ts'\n\nconst {\n\tsymbol = undefined,\n\tmac = isMac,\n} = defineProps<{\n\t/*\n\t Key name or symbol to display.\n\t * For common special keys (CTRL, ALT, SHIFT, Arrow keys, etc.) it will display the symbol on macOS and the localized name on Windows/Linux.\n\t /\n\tsymbol?: 'ArrowUp' \| 'ArrowDown' \| 'ArrowLeft' \| 'ArrowRight' \| 'Control' \| 'Alt' \| 'Shift' \| 'Enter' \| 'Space' \| 'Tab' \| 'Delete' \| 'Escape' \| (string & {})\n\t/\n\t Explicitly use macOS (true) or Windows/Linux (false) key symbols.\n\t * By default it uses the OS detected from the user agent.\n\t /\n\tmac?: boolean \| undefined\n}>()\n\ndefineSlots<{\n\tdefault?: Slot\n}>()\n\n/\n Map of special key names to symbols or localized names:\n * - macOS uses symbols instead of names\n * - Windows/Linux uses localized names\n * - In ternary expressions, // TRANSLATORS comments only works for the second operand, but not for `else`\n /\nconst labels = computed(() => ({\n\tArrowUp: '↑',\n\tArrowDown: '↓',\n\tArrowLeft: '←',\n\tArrowRight: '→',\n\tControl: !mac\n\t\t? t('Ctrl') // TRANSLATORS: Ctrl key on keyboard (Windows/Linux)\n\t\t: '⌘',\n\tAlt: !mac\n\t\t? t('Alt') // TRANSLATORS: Alt key on keyboard (Windows/Linux)\n\t\t: '⌥',\n\tShift: !mac\n\t\t? t('Shift') // TRANSLATORS: Shift key on keyboard\n\t\t: '⇧',\n\tEnter: !mac\n\t\t? t('Enter') // TRANSLATORS: Enter key on keyboard\n\t\t: '⏎',\n\tTab: !mac\n\t\t? t('Tab') // TRANSLATORS: Tab key on keyboard\n\t\t: '⇥',\n\tDelete: !mac\n\t\t? t('Delete') // TRANSLATORS: Delete key on keyboard\n\t\t: '⌫',\n\tEscape: !mac\n\t\t? t('Escape') // TRANSLATORS: Escape key on keyboard\n\t\t: '⎋',\n\tSpace: t('Space'), // TRANSLATORS: Space key on keyboard\n} as const))\n\nconst label = computed(() => (symbol && labels.value[symbol]) \|\| symbol)\n</script>\n\n<template>\n\t<kbd :class=\"$style.kbd\">\n\t\t<slot>\n\t\t\t{{ label }}\n\t\t</slot>\n\t</kbd>\n</template>\n\n<style lang=\"scss\" module>\n.kbd {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmin-width: var(--default-clickable-area);\n\theight: var(--default-clickable-area);\n\tpadding-inline: calc(2 var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));\n\tborder: 2px solid var(--color-primary-element-light);\n\tborder-block-end-width: 4px;\n\tborder-radius: var(--border-radius-element);\n\tbox-shadow: none; /* Override server <kbd> styles /\n\tfont-family: var(--font-family); / Design decision: looks better with the default font instead of mono /\n\tline-height: 1;\n\twhite-space: nowrap;\n\n\t& + .kbd {\n\t\tmargin-inline-start: calc(1 var(--default-grid-baseline));\n\t}\n}\n</style>\n\n<docs>\nNextcloud-styled `<kbd>` element. It can be used with a single key symbol in the content or with the `symbol` prop (preferred).\n\nSubsequent `<NcKbd>` elements will have a small margin between them.\n\n```vue\n<template>\n\t<div>\n\t\t<NcKbd symbol=\"Control\" />\n\t\t<NcKbd symbol=\"F\" />\n\t</div>\n</template>\n```\n\n### Special symbols\n\nIt is recommended to use the `symbol` prop. It displays the appropriate symbol or localized name depending on the OS.\nOS detection is automatic but can be overridden via the `mac` prop.\n\n```vue\n<template>\n\t<table class=\"sample-table\">\n\t\t<tr>\n\t\t\t<th>symbol</th>\n\t\t\t<th>Auto</th>\n\t\t\t<th>macOS</th>\n\t\t\t<th>Windows/Linux</th>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowUp</th>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowDown</th>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowLeft</th>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowRight</th>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Control</th>\n\t\t\t<td><NcKbd symbol=\"Control\" /></td>\n\t\t\t<td><NcKbd symbol=\"Control\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Control\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Alt</th>\n\t\t\t<td><NcKbd symbol=\"Alt\" /></td>\n\t\t\t<td><NcKbd symbol=\"Alt\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Alt\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Shift</th>\n\t\t\t<td><NcKbd symbol=\"Shift\" /></td>\n\t\t\t<td><NcKbd symbol=\"Shift\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Shift\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Enter</th>\n\t\t\t<td><NcKbd symbol=\"Enter\" /></td>\n\t\t\t<td><NcKbd symbol=\"Enter\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Enter\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Tab</th>\n\t\t\t<td><NcKbd symbol=\"Tab\" /></td>\n\t\t\t<td><NcKbd symbol=\"Tab\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Tab\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Delete</th>\n\t\t\t<td><NcKbd symbol=\"Delete\" /></td>\n\t\t\t<td><NcKbd symbol=\"Delete\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Delete\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Escape</th>\n\t\t\t<td><NcKbd symbol=\"Escape\" /></td>\n\t\t\t<td><NcKbd symbol=\"Escape\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Escape\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Space</th>\n\t\t\t<td><NcKbd symbol=\"Space\" /></td>\n\t\t\t<td><NcKbd symbol=\"Space\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Space\" :mac=\"false\" /></td>\n\t\t</tr>\n\t</table>\n</template>\n\n<style scoped>\n.sample-table {\n\tborder-collapse: collapse;\n\n\tth,\n\ttd {\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: calc(1 * var(--default-grid-baseline));\n\t}\n\n\ttr:first-child {\n\t\tborder-block-end: 2px solid var(--color-border);\n\n\t\tth {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n}\n</style>\n```\n\n### Custom content\n\nIn a special case you might want to use a custom content.\n\n```vue\n<template>\n\t<NcKbd aria-label=\"Eject\">\n\t\t<IconEject :size=\"15\" />\n\t</NcKbd>\n</template>\n\n<script>\nimport IconEject from 'vue-material-design-icons/Eject.vue'\n\nexport default {\n\tcomponents: { IconEject }\n}\n</script>\n```\n</docs>\n"],"names":["_createElementBlock","_normalizeClass","$style","_renderSlot"],"mappings":";;;;;;;;;;;;AAsCA,UAAM,SAAS,SAAS,OAAO;AAAA,MAC9B,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,SAAS,CAAC,QAAA,MACP,EAAE,MAAM,IACR;AAAA,MACH,KAAK,CAAC,QAAA,MACH,EAAE,KAAK,IACP;AAAA,MACH,OAAO,CAAC,QAAA,MACL,EAAE,OAAO,IACT;AAAA,MACH,OAAO,CAAC,QAAA,MACL,EAAE,OAAO,IACT;AAAA,MACH,KAAK,CAAC,QAAA,MACH,EAAE,KAAK,IACP;AAAA,MACH,QAAQ,CAAC,QAAA,MACN,EAAE,QAAQ,IACV;AAAA,MACH,QAAQ,CAAC,QAAA,MACN,EAAE,QAAQ,IACV;AAAA,MACH,OAAO,EAAE,OAAO;AAAA;AAAA,IAAA,EACN;AAEX,UAAM,QAAQ,SAAS,MAAO,QAAA,UAAU,OAAO,MAAM,QAAA,MAAM,KAAM,QAAA,MAAM;;0BAItEA,mBAIM,OAAA;AAAA,QAJA,OAAKC,eAAEC,KAAAA,OAAO,GAAG;AAAA,MAAA;QACtBC,WAEO,4BAFP,MAEO;AAAA,0CADH,MAAA,KAAK,GAAA,CAAA;AAAA,QAAA;;;;;;;;;;;;;;"}

package/dist/chunks/{NcListItem-BxxYYPjv.mjs → NcListItem-C6dI--9M.mjs} RENAMED Viewed

@@ -1,5 +1,5 @@
 import '../assets/NcListItem-BRTO5Id3.css';
-import { N as NcActions } from "./NcActions-B1Zg0lCE.mjs";
+import { N as NcActions } from "./NcActions-Ccr8kkyh.mjs";
 import { N as NcCounterBubble } from "./NcCounterBubble-CxxHHh8i.mjs";
 import { _ as _sfc_main$1 } from "./NcVNodes.vue_vue_type_script_lang-BqUHinRZ.mjs";
 import { resolveComponent, createBlock, openBlock, resolveDynamicComponent, normalizeProps, guardReactiveProps, withCtx, createElementVNode, mergeProps, normalizeClass, createElementBlock, createCommentVNode, withDirectives, withKeys, renderSlot, createTextVNode, toDisplayString, vShow, createVNode, createSlots } from "vue";
@@ -374,4 +374,4 @@ const NcListItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_rende
 export {
   NcListItem as N
 };
-//# sourceMappingURL=NcListItem-BxxYYPjv.mjs.map
+//# sourceMappingURL=NcListItem-C6dI--9M.mjs.map

package/dist/chunks/{NcListItem-BxxYYPjv.mjs.map → NcListItem-C6dI--9M.mjs.map} RENAMED Viewed

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

package/dist/chunks/{NcListItemIcon-zxWWjgoO.mjs → NcListItemIcon-DJdMrwuH.mjs} RENAMED Viewed

@@ -7,7 +7,7 @@ import "@nextcloud/router";
 import "../functions/isDarkTheme/index.mjs";
 import "./NcMentionBubble.vue_vue_type_style_index_0_scoped_45238efd_lang-D6LzDiYf.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-import { u as userStatus, N as NcAvatar } from "./NcAvatar-Bdy7vKd8.mjs";
+import { u as userStatus, N as NcAvatar } from "./NcAvatar-BkmHv-oY.mjs";
 import { _ as _sfc_main$1 } from "./NcHighlight.vue_vue_type_script_lang-DnWQDM_2.mjs";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-5AA93z-F.mjs";
 const margin = 8;
@@ -207,4 +207,4 @@ const NcListItemIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_r
 export {
   NcListItemIcon as N
 };
-//# sourceMappingURL=NcListItemIcon-zxWWjgoO.mjs.map
+//# sourceMappingURL=NcListItemIcon-DJdMrwuH.mjs.map