@nextcloud/vue

Version:

Nextcloud vue components

github.com/nextcloud-libraries/nextcloud-vue

1 lines • 24.6 kB

Source Map (JSON)

{"version":3,"file":"NcEmojiPicker-pM4Pg2yq.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\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]}