npm - @nextcloud/vue - Versions diffs - 8.1.0 → 8.2.0 - Mend

@nextcloud/vue 8.1.0 → 8.2.0

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 (215) hide show

package/dist/Components/NcRichContenteditable.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcRichContenteditable.mjs","sources":["../../src/components/NcRichContenteditable/NcAutoCompleteResult.vue","../../src/components/NcRichContenteditable/NcRichContenteditable.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n-->\n\n<template>\n\t<div class=\"autocomplete-result\">\n\t\t<!-- Avatar or icon -->\n\t\t<div :class=\"[icon, `autocomplete-result__icon--${avatarUrl ? 'with-avatar' : ''}`]\"\n\t\t\t:style=\"avatarUrl ? { backgroundImage: `url(${avatarUrl})` } : null \"\n\t\t\tclass=\"autocomplete-result__icon\">\n\t\t\t<div v-if=\"haveStatus\"\n\t\t\t\t:class=\"[`autocomplete-result__status--${status && status.icon ? 'icon' : status.status}`]\"\n\t\t\t\tclass=\"autocomplete-result__status\">\n\t\t\t\t{{ status && status.icon \|\| '' }}\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- Title and subline -->\n\t\t<span class=\"autocomplete-result__content\">\n\t\t\t<span class=\"autocomplete-result__title\" :title=\"title\">\n\t\t\t\t{{ title }}\n\t\t\t</span>\n\t\t\t<span v-if=\"subline\" class=\"autocomplete-result__subline\">\n\t\t\t\t{{ subline }}\n\t\t\t</span>\n\t\t</span>\n\t</div>\n</template>\n\n<script>\nimport { generateUrl } from '@nextcloud/router'\n\nexport default {\n\tname: 'NcAutoCompleteResult',\n\n\tprops: {\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\tsubline: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\ticonUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\tsource: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\tstatus: {\n\t\t\ttype: [Object, Array],\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\tcomputed: {\n\t\tavatarUrl() {\n\t\t\tif (this.iconUrl) {\n\t\t\t\treturn this.iconUrl\n\t\t\t}\n\n\t\t\treturn this.id && this.source === 'users'\n\t\t\t\t? this.getAvatarUrl(this.id, 44)\n\t\t\t\t: null\n\t\t},\n\t\thaveStatus() {\n\t\t\treturn this.status?.icon \|\| (this.status?.status && this.status?.status !== 'offline')\n\t\t},\n\t},\n\n\tmethods: {\n\t\tgetAvatarUrl(user, size) {\n\t\t\treturn generateUrl('/avatar/{user}/{size}', {\n\t\t\t\tuser,\n\t\t\t\tsize,\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$autocomplete-padding: 10px;\n\n.autocomplete-result {\n\tdisplay: flex;\n\theight: $clickable-area;\n\tpadding: $autocomplete-padding;\n\n\t.highlight & {\n\t\tcolor: var(--color-primary-element-light-text);\n\t\tbackground: var(--color-primary-element-light);\n\t\t&, * {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t&__icon {\n\t\tposition: relative;\n\t\tflex: 0 0 $clickable-area;\n\t\twidth: $clickable-area;\n\t\tmin-width: $clickable-area;\n\t\theight: $clickable-area;\n\t\tborder-radius: $clickable-area;\n\t\tbackground-color: var(--color-background-darker);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: $clickable-area - 2 * $autocomplete-padding;\n\t\t&--with-avatar {\n\t\t\tcolor: inherit;\n\t\t\tbackground-size: cover;\n\t\t}\n\t}\n\n\t&__status {\n\t\tposition: absolute;\n\t\tright: -4px;\n\t\tbottom: -4px;\n\t\tbox-sizing: border-box;\n\t\twidth: 18px;\n\t\theight: 18px;\n\t\tborder: 2px solid var(--color-main-background);\n\t\tborder-radius: 50%;\n\t\tbackground-color: var(--color-main-background);\n\t\tfont-size: var(--default-font-size);\n\t\tline-height: 15px;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: 16px;\n\t\tbackground-position: center;\n\n\t\t&--online{\n\t\t\tbackground-image: url('../../assets/status-icons/user-status-online.svg');\n\t\t}\n\t\t&--dnd{\n\t\t\tbackground-image: url('../../assets/status-icons/user-status-dnd.svg');\n\t\t\tbackground-color: #ffffff;\n\t\t}\n\t\t&--away{\n\t\t\tbackground-image: url('../../assets/status-icons/user-status-away.svg');\n\t\t}\n\t\t&--icon {\n\t\t\tborder: none;\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t&__content {\n\t\tdisplay: flex;\n\t\tflex: 1 1 100%;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-width: 0;\n\t\tpadding-left: $autocomplete-padding;\n\t}\n\n\t&__title,\n\t&__subline {\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t&__subline {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n}\n\n</style>\n","<!--\n - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n-->\n\n<docs>\n\n### General description\n\nThis component displays contenteditable div with automated `@` [at] autocompletion and `:` [colon] emoji autocompletion.\n\n### Examples\n\nTry mentioning user @Test01 or inserting emoji :smile\n\n```vue\n<template>\n\t<div>\n\t\t<NcRichContenteditable\n\t\t\t:value.sync=\"message\"\n\t\t\t:auto-complete=\"autoComplete\"\n\t\t\t:maxlength=\"100\"\n\t\t\t:user-data=\"userData\"\n\t\t\t@submit=\"onSubmit\" />\n\t\t<br>\n\n\t\t<NcRichContenteditable\n\t\t\t:value.sync=\"message\"\n\t\t\t:auto-complete=\"autoComplete\"\n\t\t\t:maxlength=\"400\"\n\t\t\t:multiline=\"true\"\n\t\t\t:user-data=\"userData\"\n\t\t\t@submit=\"onSubmit\" />\n\n\t\t<h5>Output - raw</h5>\n\t\t{{ JSON.stringify(message) }}\n\n\t\t<h5>Output - preformatted</h5>\n\t\t<p class=\"pre-line\">{{ message }}</p>\n\n\t\t<h5>Output - in NcRichText with markdown support</h5>\n\t\t<NcRichText :text=\"text\" :arguments=\"userMentions\" autolink use-markdown />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tmessage: 'Lorem ipsum dolor sit amet.',\n\t\t\t// You need to provide this for the inline mention to understand what to display or not.\n\t\t\t// Key should be a string with leading '@', like @Test02 or @\"Test Offline\"\n\t\t\tuserData: {\n\t\t\t\tTest01: {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test01',\n\t\t\t\t\ttitle: 'Test01',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tprimary: true,\n\t\t\t\t},\n\t\t\t\tTest02: {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test02',\n\t\t\t\t\ttitle: 'Test02',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: '🎡',\n\t\t\t\t\t\tmessage: 'Visiting London',\n\t\t\t\t\t\tstatus: 'away',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: 'Visiting London',\n\t\t\t\t},\n\t\t\t\t'Test@User': {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test@User',\n\t\t\t\t\ttitle: 'Test 03',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: '🎡',\n\t\t\t\t\t\tmessage: 'Having space in my name',\n\t\t\t\t\t\tstatus: 'online',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: 'Visiting London',\n\t\t\t\t},\n\t\t\t\t'Test Offline': {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test Offline',\n\t\t\t\t\ttitle: 'Test Offline',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: null,\n\t\t\t\t\t\tmessage: null,\n\t\t\t\t\t\tstatus: 'offline',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: null,\n\t\t\t\t},\n\t\t\t\t'Test DND': {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test DND',\n\t\t\t\t\ttitle: 'Test DND',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: null,\n\t\t\t\t\t\tmessage: 'Out sick',\n\t\t\t\t\t\tstatus: 'dnd',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: 'Out sick',\n\t\t\t\t},\n\t\t\t},\n\t\t\t// To display user bubbles in NcRichText, special format of data should be provided:\n\t\t\t// Key should be in curly brackets without '@' and ' ' symbols, like {user-2}\n\t\t\tuserMentions: {\n\t\t\t\t'user-1': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test01',\n\t\t\t\t\t\tuser: 'Test01',\n\t\t\t\t\t\tprimary: true,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-2': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test02',\n\t\t\t\t\t\tuser: 'Test02',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-3': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test 03',\n\t\t\t\t\t\tuser: 'Test@User',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-4': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test Offline',\n\t\t\t\t\t\tuser: 'Test Offline',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-5': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test DND',\n\t\t\t\t\t\tuser: 'Test DND',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}\n\t\t}\n\t},\n\tcomputed: {\n\t\ttext() {\n\t\t\treturn this.message\n\t\t\t\t\t.replace('@Test01', '{user-1}')\n\t\t\t\t\t.replace('@Test02', '{user-2}')\n\t\t\t\t\t.replace('@Test@User', '{user-3}')\n\t\t\t\t\t.replace('@\"Test Offline\"', '{user-4}')\n\t\t\t\t\t.replace('@\"Test DND\"', '{user-5}')\n\t\t},\n\t},\n\tmethods: {\n\t\t/*\n\t\t Do your own query to the autocompletion api.\n\t\t* The returned data bellow is a fake data example.\n\t\t* The callback expects the same format returned by the core/autocomplete/get ocs api endpoint!\n\t\t* @see userData example above\n\t\t\n\t\t @param {string} search the query\n\t\t* @param {Function} callback the callback to process the results with\n\t\t/\n\t\tautoComplete(search, callback) {\n\t\t\tcallback(Object.values(this.userData))\n\t\t},\n\t\tonSubmit() {\n\t\t\talert(this.message)\n\t\t}\n\t}\n}\n</script>\n<style lang=\"scss\" scoped>\n\th5 {\n\t\tfont-weight: bold;\n\t\tmargin: 40px 0 20px 0;\n\t}\n\n\t.pre-line {\n\t\twhite-space: pre-line;\n\t}\n</style>\n```\n\n</docs>\n\n<template>\n\t<div ref=\"contenteditable\"\n\t\tv-tooltip=\"tooltipString\"\n\t\t:class=\"{\n\t\t\t'rich-contenteditable__input--empty': isEmptyValue,\n\t\t\t'rich-contenteditable__input--multiline': multiline,\n\t\t\t'rich-contenteditable__input--overflow': isOverMaxlength,\n\t\t\t'rich-contenteditable__input--disabled': disabled,\n\t\t}\"\n\t\t:contenteditable=\"canEdit\"\n\t\t:placeholder=\"placeholder\"\n\t\t:aria-placeholder=\"placeholder\"\n\t\taria-multiline=\"true\"\n\t\tclass=\"rich-contenteditable__input\"\n\t\trole=\"textbox\"\n\t\tv-on=\"listeners\"\n\t\t@input=\"onInput\"\n\t\t@compositionstart=\"isComposing = true\"\n\t\t@compositionend=\"isComposing = false\"\n\t\t@keydown.delete=\"onDelete\"\n\t\t@keydown.enter.exact=\"onEnter\"\n\t\t@keydown.ctrl.enter.exact.stop.prevent=\"onCtrlEnter\"\n\t\t@paste=\"onPaste\"\n\t\t@keyup.stop.prevent.capture=\"onKeyUp\" />\n</template>\n\n<script>\nimport { t } from '../../l10n.js'\nimport NcAutoCompleteResult from './NcAutoCompleteResult.vue'\nimport richEditor from '../../mixins/richEditor/index.js'\nimport Tooltip from '../../directives/Tooltip/index.js'\nimport { emojiSearch, emojiAddRecent } from '../../functions/emoji/index.js'\nimport { searchProvider, getLinkWithPicker } from '../NcRichText/index.js'\n\nimport Tribute from 'tributejs/dist/tribute.esm.js'\nimport debounce from 'debounce'\nimport stringLength from 'string-length'\n\nexport default {\n\tname: 'NcRichContenteditable',\n\n\tdirectives: {\n\t\ttooltip: Tooltip,\n\t},\n\n\tmixins: [richEditor],\n\n\tprops: {\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\trequired: true,\n\t\t},\n\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Write a message …'),\n\t\t},\n\n\t\tautoComplete: {\n\t\t\ttype: Function,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\tmenuContainer: {\n\t\t\ttype: Element,\n\t\t\tdefault: () => document.body,\n\t\t},\n\n\t\t/\n\t\t Make the contenteditable looks like a textarea or not.\n\t\t * Default looks like a single-line input.\n\t\t * This also handle the default enter/shift+enter behaviour.\n\t\t * if multiline, enter = newline; otherwise enter = submit\n\t\t * shift+enter always add a new line. ctrl+enter always submits\n\t\t /\n\t\tmultiline: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Is the content editable ?\n\t\t /\n\t\tcontenteditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Disable the editing and show specific disabled design\n\t\t /\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Max allowed length\n\t\t /\n\t\tmaxlength: {\n\t\t\ttype: Number,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Enable or disable emoji autocompletion\n\t\t /\n\t\temojiAutocomplete: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Enable or disable link autocompletion\n\t\t /\n\t\tlinkAutocomplete: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\temits: [\n\t\t'submit',\n\t\t'paste',\n\t\t'update:value',\n\t\t'smart-picker-submit',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\ttextSmiles: [],\n\t\t\ttribute: null,\n\t\t\tautocompleteOptions: {\n\t\t\t\t// Allow spaces in the middle of mentions\n\t\t\t\tallowSpaces: true,\n\t\t\t\tfillAttr: 'id',\n\t\t\t\t// Search against id and title (display name)\n\t\t\t\tlookup: result => `${result.id} ${result.title}`,\n\t\t\t\t// Where to inject the menu popup\n\t\t\t\tmenuContainer: this.menuContainer,\n\t\t\t\t// Popup mention autocompletion templates\n\t\t\t\tmenuItemTemplate: item => this.renderComponentHtml(item.original, NcAutoCompleteResult),\n\t\t\t\t// Hide if no results\n\t\t\t\tnoMatchTemplate: () => '<span class=\"hidden\"></span>',\n\t\t\t\t// Inner display of mentions\n\t\t\t\tselectTemplate: item => this.genSelectTemplate(item?.original?.id),\n\t\t\t\t// Autocompletion results\n\t\t\t\tvalues: this.debouncedAutoComplete,\n\t\t\t},\n\t\t\temojiOptions: {\n\t\t\t\ttrigger: ':',\n\t\t\t\t// Don't use the tribute search function at all\n\t\t\t\t// We pass search results as values (see below)\n\t\t\t\tlookup: (result, query) => query,\n\t\t\t\t// Where to inject the menu popup\n\t\t\t\tmenuContainer: this.menuContainer,\n\t\t\t\t// Popup mention autocompletion templates\n\t\t\t\tmenuItemTemplate: item => {\n\t\t\t\t\tif (this.textSmiles.includes(item.original)) {\n\t\t\t\t\t\t// Display the raw text string for :), :-D, … for non emoji results,\n\t\t\t\t\t\t// instead of trying to show an image and their name.\n\t\t\t\t\t\treturn item.original\n\t\t\t\t\t}\n\n\t\t\t\t\treturn `<span class=\"tribute-container-emoji__item__emoji\">${item.original.native}</span> :${item.original.short_name}`\n\t\t\t\t},\n\t\t\t\t// Hide if no results\n\t\t\t\tnoMatchTemplate: () => t('No emoji found'),\n\t\t\t\t// Display raw emoji along with its name\n\t\t\t\tselectTemplate: (item) => {\n\t\t\t\t\tif (this.textSmiles.includes(item.original)) {\n\t\t\t\t\t\t// Replace the selection with the raw text string for :), :-D, … for non emoji results\n\t\t\t\t\t\treturn item.original\n\t\t\t\t\t}\n\n\t\t\t\t\temojiAddRecent(item.original)\n\t\t\t\t\treturn item.original.native\n\t\t\t\t},\n\t\t\t\t// Pass the search results as values\n\t\t\t\tvalues: (text, cb) => {\n\t\t\t\t\tconst emojiResults = emojiSearch(text)\n\t\t\t\t\tif (this.textSmiles.includes(':' + text)) {\n\t\t\t\t\t\t/\n\t\t\t\t\t\t Prepend text smiles to the search results so that Tribute\n\t\t\t\t\t\t * is not interfering with normal writing, aka. \"Cocos Island Meme\".\n\t\t\t\t\t\t * E.g. `:)` and `:-)` got replaced by the flag of Cocos Island,\n\t\t\t\t\t\t * when submitting the input with Enter after writing them\n\t\t\t\t\t\t /\n\t\t\t\t\t\temojiResults.unshift(':' + text)\n\t\t\t\t\t}\n\t\t\t\t\tcb(emojiResults)\n\t\t\t\t},\n\t\t\t\t// Class added to the menu container\n\t\t\t\tcontainerClass: 'tribute-container-emoji',\n\t\t\t\t// Class added to each list item\n\t\t\t\titemClass: 'tribute-container-emoji__item',\n\t\t\t},\n\t\t\tlinkOptions: {\n\t\t\t\ttrigger: '/',\n\t\t\t\t// Don't use the tribute search function at all\n\t\t\t\t// We pass search results as values (see below)\n\t\t\t\tlookup: (result, query) => query,\n\t\t\t\t// Where to inject the menu popup\n\t\t\t\tmenuContainer: this.menuContainer,\n\t\t\t\t// Popup mention autocompletion templates\n\t\t\t\tmenuItemTemplate: item => `<img class=\"tribute-container-link__item__icon\" src=\"${item.original.icon_url}\"> <span class=\"tribute-container-link__item__title\">${item.original.title}</span>`,\n\t\t\t\t// Hide if no results\n\t\t\t\tnoMatchTemplate: () => t('No link provider found'),\n\t\t\t\tselectTemplate: this.getLink,\n\t\t\t\t// Pass the search results as values\n\t\t\t\tvalues: (text, cb) => cb(searchProvider(text)),\n\t\t\t\t// Class added to the menu container\n\t\t\t\tcontainerClass: 'tribute-container-link',\n\t\t\t\t// Class added to each list item\n\t\t\t\titemClass: 'tribute-container-link__item',\n\t\t\t},\n\n\t\t\t// Represent the raw untrimmed text of the contenteditable\n\t\t\t// serves no other purpose than to check whether the\n\t\t\t// content is empty or not\n\t\t\tlocalValue: this.value,\n\n\t\t\t// Is in text composition session in IME\n\t\t\tisComposing: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t Is the current trimmed value empty?\n\t\t \n\t\t @return {boolean}\n\t\t /\n\t\tisEmptyValue() {\n\t\t\treturn !this.localValue\n\t\t\t\t\|\| (this.localValue && this.localValue.trim() === '')\n\t\t},\n\n\t\t/\n\t\t Is this Firefox? 🙄\n\t\t \n\t\t @return {boolean}\n\t\t /\n\t\tisFF() {\n\t\t\treturn !!navigator.userAgent.match(/firefox/i)\n\t\t},\n\n\t\t/\n\t\t Is the current value over maxlength?\n\t\t \n\t\t @return {boolean}\n\t\t /\n\t\tisOverMaxlength() {\n\t\t\tif (this.isEmptyValue \|\| !this.maxlength) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn stringLength(this.localValue) > this.maxlength\n\t\t},\n\n\t\t/\n\t\t Tooltip to show if characters count is over limit\n\t\t \n\t\t @return {string}\n\t\t /\n\t\ttooltipString() {\n\t\t\tif (!this.isOverMaxlength) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tcontent: t('Message limit of {count} characters reached', { count: this.maxlength }),\n\t\t\t\tshown: true,\n\t\t\t\ttrigger: 'manual',\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Edit is only allowed when contenteditableis true and disabled is false\n\t\t \n\t\t @return {boolean}\n\t\t /\n\t\tcanEdit() {\n\t\t\treturn this.contenteditable && !this.disabled\n\t\t},\n\n\t\t/\n\t\t Proxied native event handlers without custom event handlers\n\t\t \n\t\t @return {Record<string, Function>}\n\t\t /\n\t\tlisteners() {\n\t\t\t/\n\t\t\t All component's event handlers are set as native event handlers with by v-on directive.\n\t\t\t * The component also raised custom events manually by $emit for corresponding events.\n\t\t\t * As a result, it triggers handlers twice.\n\t\t\t * The v-on=\"listeners\" directive should only set proxied native events handler without custom events\n\t\t\t /\n\t\t\tconst listeners = { ...this.$listeners }\n\t\t\tdelete listeners.paste\n\t\t\treturn listeners\n\t\t},\n\t},\n\n\twatch: {\n\t\t/\n\t\t If the parent value change, we compare the plain text rendering\n\t\t * If it's different, we render everything and update the main content\n\t\t /\n\t\tvalue() {\n\t\t\tconst html = this.$refs.contenteditable.innerHTML\n\t\t\t// Compare trimmed versions to be safe\n\t\t\tif (this.value.trim() !== this.parseContent(html).trim()) {\n\t\t\t\tthis.updateContent(this.value)\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\t/\n\t\t Populate the list of text smiles we want to offer via Tribute.\n\t\t * We add the colon `:)` and colon-dash `:-)` version for each of them.\n\t\t /\n\t\tconst smilesCharacters = ['d', 'D', 'p', 'P', 's', 'S', 'x', 'X', ')', '(', '\|', '/']\n\t\tthis.textSmiles = []\n\t\tsmilesCharacters.forEach((char) => {\n\t\t\tthis.textSmiles.push(':' + char)\n\t\t\tthis.textSmiles.push(':-' + char)\n\t\t})\n\n\t\tthis.autocompleteTribute = new Tribute(this.autocompleteOptions)\n\t\tthis.autocompleteTribute.attach(this.$el)\n\n\t\tif (this.emojiAutocomplete) {\n\t\t\tthis.emojiTribute = new Tribute(this.emojiOptions)\n\t\t\tthis.emojiTribute.attach(this.$el)\n\t\t}\n\n\t\tif (this.linkAutocomplete) {\n\t\t\tthis.linkTribute = new Tribute(this.linkOptions)\n\t\t\tthis.linkTribute.attach(this.$el)\n\t\t}\n\n\t\t// Update default value\n\t\tthis.updateContent(this.value)\n\n\t\t// Removes the contenteditable attribute at first load if the prop is\n\t\t// set to false.\n\t\tthis.$refs.contenteditable.contentEditable = this.canEdit\n\t},\n\tbeforeDestroy() {\n\t\tif (this.autocompleteTribute) {\n\t\t\tthis.autocompleteTribute.detach(this.$el)\n\t\t}\n\t\tif (this.emojiTribute) {\n\t\t\tthis.emojiTribute.detach(this.$el)\n\t\t}\n\t\tif (this.linkTribute) {\n\t\t\tthis.linkTribute.detach(this.$el)\n\t\t}\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Focus the richContenteditable\n\t\t \n\t\t @public\n\t\t /\n\t\tfocus() {\n\t\t\tthis.$refs.contenteditable.focus()\n\t\t},\n\n\t\tgetLink(item) {\n\t\t\t// there is no way to get a tribute result asynchronously\n\t\t\t// so we immediately insert a node and replace it when the result comes\n\t\t\tgetLinkWithPicker(item.original.id)\n\t\t\t\t.then(result => {\n\t\t\t\t\t// replace dummy temp element by a text node which contains the picker result\n\t\t\t\t\tconst tmpElem = document.getElementById('tmp-smart-picker-result-node')\n\t\t\t\t\tconst eventData = {\n\t\t\t\t\t\tresult,\n\t\t\t\t\t\tinsertText: true,\n\t\t\t\t\t}\n\t\t\t\t\tthis.$emit('smart-picker-submit', eventData)\n\t\t\t\t\tif (eventData.insertText) {\n\t\t\t\t\t\tconst newElem = document.createTextNode(result)\n\t\t\t\t\t\ttmpElem.replaceWith(newElem)\n\t\t\t\t\t\tthis.setCursorAfter(newElem)\n\t\t\t\t\t\tthis.updateValue(this.$refs.contenteditable.innerHTML)\n\t\t\t\t\t} else {\n\t\t\t\t\t\ttmpElem.remove()\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\t.catch((error) => {\n\t\t\t\t\tconsole.debug('Smart picker promise rejected:', error)\n\t\t\t\t\tconst tmpElem = document.getElementById('tmp-smart-picker-result-node')\n\t\t\t\t\tthis.setCursorAfter(tmpElem)\n\t\t\t\t\ttmpElem.remove()\n\t\t\t\t})\n\t\t\treturn '<span id=\"tmp-smart-picker-result-node\"></span>'\n\t\t},\n\t\tsetCursorAfter(element) {\n\t\t\tconst range = document.createRange()\n\t\t\trange.setEndAfter(element)\n\t\t\trange.collapse()\n\t\t\tconst selection = window.getSelection()\n\t\t\tselection.removeAllRanges()\n\t\t\tselection.addRange(range)\n\t\t},\n\t\t/\n\t\t Re-emit the input event to the parent\n\t\t \n\t\t @param {Event} event the input event\n\t\t /\n\t\tonInput(event) {\n\t\t\tthis.updateValue(event.target.innerHTML)\n\t\t},\n\n\t\t/\n\t\t When pasting, sanitize the content, extract text\n\t\t * and render it again\n\t\t \n\t\t @param {Event} event the paste event\n\t\t * @fires Event paste the original paste event\n\t\t /\n\t\tonPaste(event) {\n\t\t\t// Either disabled or edit deactivated\n\t\t\tif (!this.canEdit) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tevent.preventDefault()\n\t\t\tconst clipboardData = event.clipboardData\n\n\t\t\t/* The original paste event /\n\t\t\tthis.$emit('paste', event)\n\n\t\t\t// If we have a file or if we don't have any text, ignore\n\t\t\tif (clipboardData.files.length !== 0\n\t\t\t\t\|\| !Object.values(clipboardData.items).find(item => item?.type.startsWith('text'))) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst text = clipboardData.getData('text')\n\t\t\tconst selection = window.getSelection()\n\n\t\t\t// If no selection, replace the whole data\n\t\t\tif (!selection.rangeCount) {\n\t\t\t\tthis.updateValue(text)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Generate text and insert\n\t\t\tconst range = selection.getRangeAt(0)\n\t\t\tselection.deleteFromDocument()\n\t\t\trange.insertNode(document.createTextNode(text))\n\n\t\t\t// Put cursor at the end of the selection\n\t\t\tconst newRange = document.createRange()\n\t\t\tnewRange.setStart(event.target, range.endOffset)\n\t\t\tnewRange.collapse(true)\n\t\t\tselection.removeAllRanges()\n\t\t\tselection.addRange(newRange)\n\n\t\t\t// Propagate data\n\t\t\tthis.updateValue(this.$refs.contenteditable.innerHTML)\n\t\t},\n\n\t\t/\n\t\t Update the value text from the provided html\n\t\t \n\t\t @param {string} htmlOrText the html content (or raw text with @mentions)\n\t\t /\n\t\tupdateValue(htmlOrText) {\n\t\t\tconst text = this.parseContent(htmlOrText)\n\t\t\tthis.localValue = text\n\t\t\tthis.$emit('update:value', text)\n\t\t},\n\n\t\t/\n\t\t Update content and local value\n\t\t \n\t\t @param {string} value the message value\n\t\t /\n\t\tupdateContent(value) {\n\t\t\tconst renderedContent = this.renderContent(value)\n\t\t\tthis.$refs.contenteditable.innerHTML = renderedContent\n\t\t\tthis.localValue = value\n\t\t},\n\n\t\t/\n\t\t Because FF have a decade old bug preventing contenteditable=false\n\t\t * to properly be deleted on backspace, we have to hack 👀\n\t\t * https://stackoverflow.com/a/59383394/3885878\n\t\t * https://stackoverflow.com/a/30574622\n\t\t \n\t\t @param {Event} event the delete keydown event\n\t\t /\n\t\tonDelete(event) {\n\t\t\tif (!this.isFF \|\| !window.getSelection) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Either disabled or edit deactivated\n\t\t\tif (!this.canEdit) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// fix backspace bug in FF\n\t\t\t// https://bugzilla.mozilla.org/show_bug.cgi?id=685445\n\t\t\t// https://bugzilla.mozilla.org/show_bug.cgi?id=1665167\n\t\t\tconst selection = window.getSelection()\n\t\t\tconst node = event.target\n\t\t\tif (!selection.isCollapsed \|\| !selection.rangeCount) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst curRange = selection.getRangeAt(selection.rangeCount - 1)\n\t\t\tif (curRange.commonAncestorContainer.nodeType === 3 && curRange.startOffset > 0) {\n\t\t\t\t// we are in child selection. The characters of the text node is being deleted\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst range = document.createRange()\n\t\t\tif (selection.anchorNode !== node) {\n\t\t\t\t// selection is in character mode. expand it to the whole editable field\n\t\t\t\trange.selectNodeContents(node)\n\t\t\t\trange.setEndBefore(selection.anchorNode)\n\t\t\t} else if (selection.anchorOffset > 0) {\n\t\t\t\trange.setEnd(node, selection.anchorOffset)\n\t\t\t} else {\n\t\t\t\t// reached the beginning of editable field\n\t\t\t\treturn\n\t\t\t}\n\t\t\trange.setStart(node, range.endOffset - 1)\n\n\t\t\tconst previousNode = range.cloneContents().lastChild\n\t\t\tif (previousNode && previousNode.contentEditable === 'false') {\n\t\t\t\t// this is some rich content, e.g. smile. We should help the user to delete it\n\t\t\t\trange.deleteContents()\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\t\t/\n\t\t Enter key pressed. Submits if not multiline\n\t\t \n\t\t @param {Event} event the keydown event\n\t\t /\n\t\tonEnter(event) {\n\t\t\t// Prevent submitting if multiline\n\t\t\t// or length is over maxlength\n\t\t\t// or autocompletion menu is opened\n\t\t\t// or in a text composition session with IME\n\t\t\tif (this.multiline\n\t\t\t\t\|\| this.isOverMaxlength\n\t\t\t\t\|\| this.autocompleteTribute.isActive \|\| this.emojiTribute.isActive \|\| this.linkTribute.isActive\n\t\t\t\t\|\| this.isComposing) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tthis.$emit('submit', event)\n\t\t},\n\n\t\t/\n\t\t Ctrl + Enter key pressed is used to submit\n\t\t \n\t\t @param {Event} event the keydown event\n\t\t /\n\t\tonCtrlEnter(event) {\n\t\t\tif (this.isOverMaxlength) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.$emit('submit', event)\n\t\t},\n\n\t\t/\n\t\t Debounce the autocomplete function\n\t\t /\n\t\tdebouncedAutoComplete: debounce(async function(search, callback) {\n\t\t\tthis.autoComplete(search, callback)\n\t\t}, 100),\n\n\t\tonKeyUp(event) {\n\t\t\t// prevent tribute from opening on keyup\n\t\t\tevent.stopImmediatePropagation()\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// Standalone styling, independent from server\n.rich-contenteditable__input {\n\toverflow-y: auto;\n\twidth: auto;\n\tmargin: 0;\n\tpadding: 8px;\n\tcursor: text;\n\twhite-space: pre-wrap;\n\tword-break: break-word;\n\tcolor: var(--color-main-text);\n\tborder: 2px solid var(--color-border-dark);\n\tborder-radius: var(--border-radius-large);\n\toutline: none;\n\tbackground-color: var(--color-main-background);\n\tfont-family: var(--font-face);\n\tfont-size: inherit;\n\tmin-height: $clickable-area;\n\tmax-height: $clickable-area 5.5;\n\n\t// Cannot use :empty because of firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=1513303\n\t&--empty:before {\n\t\tcontent: attr(placeholder);\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tposition: absolute;\n\t}\n\n\t&[contenteditable='false']:not(&--disabled) {\n\t\tcursor: default;\n\t\tbackground-color: transparent;\n\t\tcolor: var(--color-main-text);\n\t\tborder-color: transparent;\n\t\topacity: 1;\n\t\tborder-radius: 0;\n\t}\n\n\t&--multiline {\n\t\tmin-height: $clickable-area * 3;\n\t\t// No max for mutiline\n\t\tmax-height: none;\n\t}\n\n\t&--disabled {\n\t\topacity: $opacity_disabled;\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tborder: 2px solid var(--color-background-darker);\n\t\tborder-radius: var(--border-radius);\n\t\tbackground-color: var(--color-background-dark);\n\t}\n}\n\n</style>\n\n<style lang=\"scss\">\n.tribute-container, .tribute-container-emoji, .tribute-container-link {\n\tz-index: 9000;\n\toverflow: auto;\n\tmin-width: 250px;\n\tmax-width: 300px;\n\t// Show maximum 4 entries and a half to show scroll\n\t// 44px + 10px padding\n\tmax-height: ($clickable-area + 20px) * 4.5;\n\t// Space it out a bit from the text\n\tmargin: 5px 0;\n\tcolor: var(--color-main-text);\n\tborder-radius: var(--border-radius);\n\tbackground: var(--color-main-background);\n\tbox-shadow: 0 1px 5px var(--color-box-shadow);\n}\n\n.tribute-container-emoji, .tribute-container-link {\n\tmin-width: 200px;\n\tmax-width: 200px;\n\tpadding: 4px;\n\t// Show maximum 5 entries and a half to show scroll\n\tmax-height: 35px * 5 + math.div(35px, 2) !important;\n\n\t&__item {\n\t\tborder-radius: 8px;\n\t\tpadding: 4px 8px;\n\t\tmargin-bottom: 4px;\n\t\topacity: 0.8;\n\t\tcursor: pointer;\n\n\t\t// Take care of long names\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\n\t\t&:last-child {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\n\t\t&__emoji {\n\t\t\tpadding-right: 8px;\n\t\t}\n\t}\n\n\t.highlight {\n\t\topacity: 1;\n\t\tcolor: var(--color-primary-element-light-text);\n\t\tbackground: var(--color-primary-element-light);\n\t\t&, * {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n\n.tribute-container-link {\n\tmin-width: 200px;\n\tmax-width: 300px;\n\t&__item {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t&__title {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t&__icon {\n\t\t\tmargin: auto 0;\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t\tobject-fit: contain;\n\t\t\tpadding-right: 8px;\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main$1","_a","_b","_c","user","size","generateUrl","_sfc_main","VTooltip","richEditor","t","result","item","NcAutoCompleteResult","query","emojiAddRecent","text","cb","emojiResults","emojiSearch","searchProvider","stringLength","listeners","html","smilesCharacters","char","Tribute","getLinkWithPicker","tmpElem","eventData","newElem","error","element","range","selection","event","clipboardData","newRange","htmlOrText","value","renderedContent","node","curRange","previousNode","debounce","search","callback"],"mappings":"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"}
1	+ {"version":3,"file":"NcRichContenteditable.mjs","sources":["../../src/components/NcRichContenteditable/NcAutoCompleteResult.vue","../../src/components/NcRichContenteditable/NcRichContenteditable.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n-->\n\n<template>\n\t<div class=\"autocomplete-result\">\n\t\t<!-- Avatar or icon -->\n\t\t<div :class=\"[icon, `autocomplete-result__icon--${avatarUrl ? 'with-avatar' : ''}`]\"\n\t\t\t:style=\"avatarUrl ? { backgroundImage: `url(${avatarUrl})` } : null \"\n\t\t\tclass=\"autocomplete-result__icon\">\n\t\t\t<div v-if=\"haveStatus\"\n\t\t\t\t:class=\"[`autocomplete-result__status--${status && status.icon ? 'icon' : status.status}`]\"\n\t\t\t\tclass=\"autocomplete-result__status\">\n\t\t\t\t{{ status && status.icon \|\| '' }}\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- Title and subline -->\n\t\t<span class=\"autocomplete-result__content\">\n\t\t\t<span class=\"autocomplete-result__title\" :title=\"title\">\n\t\t\t\t{{ title }}\n\t\t\t</span>\n\t\t\t<span v-if=\"subline\" class=\"autocomplete-result__subline\">\n\t\t\t\t{{ subline }}\n\t\t\t</span>\n\t\t</span>\n\t</div>\n</template>\n\n<script>\nimport { generateUrl } from '@nextcloud/router'\n\nexport default {\n\tname: 'NcAutoCompleteResult',\n\n\tprops: {\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\tsubline: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\ticonUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\tsource: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\tstatus: {\n\t\t\ttype: [Object, Array],\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\tcomputed: {\n\t\tavatarUrl() {\n\t\t\tif (this.iconUrl) {\n\t\t\t\treturn this.iconUrl\n\t\t\t}\n\n\t\t\treturn this.id && this.source === 'users'\n\t\t\t\t? this.getAvatarUrl(this.id, 44)\n\t\t\t\t: null\n\t\t},\n\t\thaveStatus() {\n\t\t\treturn this.status?.icon \|\| (this.status?.status && this.status?.status !== 'offline')\n\t\t},\n\t},\n\n\tmethods: {\n\t\tgetAvatarUrl(user, size) {\n\t\t\treturn generateUrl('/avatar/{user}/{size}', {\n\t\t\t\tuser,\n\t\t\t\tsize,\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$autocomplete-padding: 10px;\n\n.autocomplete-result {\n\tdisplay: flex;\n\theight: $clickable-area;\n\tpadding: $autocomplete-padding;\n\n\t.highlight & {\n\t\tcolor: var(--color-primary-element-light-text);\n\t\tbackground: var(--color-primary-element-light);\n\t\t&, * {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t&__icon {\n\t\tposition: relative;\n\t\tflex: 0 0 $clickable-area;\n\t\twidth: $clickable-area;\n\t\tmin-width: $clickable-area;\n\t\theight: $clickable-area;\n\t\tborder-radius: $clickable-area;\n\t\tbackground-color: var(--color-background-darker);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: $clickable-area - 2 * $autocomplete-padding;\n\t\t&--with-avatar {\n\t\t\tcolor: inherit;\n\t\t\tbackground-size: cover;\n\t\t}\n\t}\n\n\t&__status {\n\t\tposition: absolute;\n\t\tright: -4px;\n\t\tbottom: -4px;\n\t\tbox-sizing: border-box;\n\t\twidth: 18px;\n\t\theight: 18px;\n\t\tborder: 2px solid var(--color-main-background);\n\t\tborder-radius: 50%;\n\t\tbackground-color: var(--color-main-background);\n\t\tfont-size: var(--default-font-size);\n\t\tline-height: 15px;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: 16px;\n\t\tbackground-position: center;\n\n\t\t&--online{\n\t\t\tbackground-image: url('../../assets/status-icons/user-status-online.svg');\n\t\t}\n\t\t&--dnd{\n\t\t\tbackground-image: url('../../assets/status-icons/user-status-dnd.svg');\n\t\t\tbackground-color: #ffffff;\n\t\t}\n\t\t&--away{\n\t\t\tbackground-image: url('../../assets/status-icons/user-status-away.svg');\n\t\t}\n\t\t&--icon {\n\t\t\tborder: none;\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t&__content {\n\t\tdisplay: flex;\n\t\tflex: 1 1 100%;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-width: 0;\n\t\tpadding-left: $autocomplete-padding;\n\t}\n\n\t&__title,\n\t&__subline {\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t&__subline {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n}\n\n</style>\n","<!--\n - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n-->\n\n<docs>\n\n### General description\n\nThis component displays contenteditable div with automated `@` [at] autocompletion and `:` [colon] emoji autocompletion.\n\n### Examples\n\nTry mentioning user @Test01 or inserting emoji :smile\n\n```vue\n<template>\n\t<div>\n\t\t<NcRichContenteditable\n\t\t\t:value.sync=\"message\"\n\t\t\t:auto-complete=\"autoComplete\"\n\t\t\t:maxlength=\"100\"\n\t\t\t:user-data=\"userData\"\n\t\t\t@submit=\"onSubmit\" />\n\t\t<br>\n\n\t\t<NcRichContenteditable\n\t\t\t:value.sync=\"message\"\n\t\t\t:auto-complete=\"autoComplete\"\n\t\t\t:maxlength=\"400\"\n\t\t\t:multiline=\"true\"\n\t\t\t:user-data=\"userData\"\n\t\t\t@submit=\"onSubmit\" />\n\n\t\t<h5>Output - raw</h5>\n\t\t{{ JSON.stringify(message) }}\n\n\t\t<h5>Output - preformatted</h5>\n\t\t<p class=\"pre-line\">{{ message }}</p>\n\n\t\t<h5>Output - in NcRichText with markdown support</h5>\n\t\t<NcRichText :text=\"text\" :arguments=\"userMentions\" autolink use-markdown />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tmessage: 'Lorem ipsum dolor sit amet.',\n\t\t\t// You need to provide this for the inline mention to understand what to display or not.\n\t\t\t// Key should be a string with leading '@', like @Test02 or @\"Test Offline\"\n\t\t\tuserData: {\n\t\t\t\tTest01: {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test01',\n\t\t\t\t\ttitle: 'Test01',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tprimary: true,\n\t\t\t\t},\n\t\t\t\tTest02: {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test02',\n\t\t\t\t\ttitle: 'Test02',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: '🎡',\n\t\t\t\t\t\tmessage: 'Visiting London',\n\t\t\t\t\t\tstatus: 'away',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: 'Visiting London',\n\t\t\t\t},\n\t\t\t\t'Test@User': {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test@User',\n\t\t\t\t\ttitle: 'Test 03',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: '🎡',\n\t\t\t\t\t\tmessage: 'Having space in my name',\n\t\t\t\t\t\tstatus: 'online',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: 'Visiting London',\n\t\t\t\t},\n\t\t\t\t'Test Offline': {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test Offline',\n\t\t\t\t\ttitle: 'Test Offline',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: null,\n\t\t\t\t\t\tmessage: null,\n\t\t\t\t\t\tstatus: 'offline',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: null,\n\t\t\t\t},\n\t\t\t\t'Test DND': {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test DND',\n\t\t\t\t\ttitle: 'Test DND',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: null,\n\t\t\t\t\t\tmessage: 'Out sick',\n\t\t\t\t\t\tstatus: 'dnd',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: 'Out sick',\n\t\t\t\t},\n\t\t\t},\n\t\t\t// To display user bubbles in NcRichText, special format of data should be provided:\n\t\t\t// Key should be in curly brackets without '@' and ' ' symbols, like {user-2}\n\t\t\tuserMentions: {\n\t\t\t\t'user-1': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test01',\n\t\t\t\t\t\tuser: 'Test01',\n\t\t\t\t\t\tprimary: true,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-2': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test02',\n\t\t\t\t\t\tuser: 'Test02',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-3': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test 03',\n\t\t\t\t\t\tuser: 'Test@User',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-4': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test Offline',\n\t\t\t\t\t\tuser: 'Test Offline',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-5': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test DND',\n\t\t\t\t\t\tuser: 'Test DND',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}\n\t\t}\n\t},\n\tcomputed: {\n\t\ttext() {\n\t\t\treturn this.message\n\t\t\t\t\t.replace('@Test01', '{user-1}')\n\t\t\t\t\t.replace('@Test02', '{user-2}')\n\t\t\t\t\t.replace('@Test@User', '{user-3}')\n\t\t\t\t\t.replace('@\"Test Offline\"', '{user-4}')\n\t\t\t\t\t.replace('@\"Test DND\"', '{user-5}')\n\t\t},\n\t},\n\tmethods: {\n\t\t/*\n\t\t Do your own query to the autocompletion api.\n\t\t* The returned data bellow is a fake data example.\n\t\t* The callback expects the same format returned by the core/autocomplete/get ocs api endpoint!\n\t\t* @see userData example above\n\t\t\n\t\t @param {string} search the query\n\t\t* @param {Function} callback the callback to process the results with\n\t\t/\n\t\tautoComplete(search, callback) {\n\t\t\tcallback(Object.values(this.userData))\n\t\t},\n\t\tonSubmit() {\n\t\t\talert(this.message)\n\t\t}\n\t}\n}\n</script>\n<style lang=\"scss\" scoped>\n\th5 {\n\t\tfont-weight: bold;\n\t\tmargin: 40px 0 20px 0;\n\t}\n\n\t.pre-line {\n\t\twhite-space: pre-line;\n\t}\n</style>\n```\n\n</docs>\n\n<template>\n\t<div ref=\"contenteditable\"\n\t\tv-tooltip=\"tooltipString\"\n\t\t:class=\"{\n\t\t\t'rich-contenteditable__input--empty': isEmptyValue,\n\t\t\t'rich-contenteditable__input--multiline': multiline,\n\t\t\t'rich-contenteditable__input--overflow': isOverMaxlength,\n\t\t\t'rich-contenteditable__input--disabled': disabled,\n\t\t}\"\n\t\t:contenteditable=\"canEdit\"\n\t\t:aria-placeholder=\"placeholder\"\n\t\taria-multiline=\"true\"\n\t\tclass=\"rich-contenteditable__input\"\n\t\trole=\"textbox\"\n\t\tv-on=\"listeners\"\n\t\t@input=\"onInput\"\n\t\t@compositionstart=\"isComposing = true\"\n\t\t@compositionend=\"isComposing = false\"\n\t\t@keydown.delete=\"onDelete\"\n\t\t@keydown.enter.exact=\"onEnter\"\n\t\t@keydown.ctrl.enter.exact.stop.prevent=\"onCtrlEnter\"\n\t\t@paste=\"onPaste\"\n\t\t@keyup.stop.prevent.capture=\"onKeyUp\" />\n</template>\n\n<script>\nimport { t } from '../../l10n.js'\nimport NcAutoCompleteResult from './NcAutoCompleteResult.vue'\nimport richEditor from '../../mixins/richEditor/index.js'\nimport Tooltip from '../../directives/Tooltip/index.js'\nimport { emojiSearch, emojiAddRecent } from '../../functions/emoji/index.js'\nimport { searchProvider, getLinkWithPicker } from '../NcRichText/index.js'\n\nimport Tribute from 'tributejs/dist/tribute.esm.js'\nimport debounce from 'debounce'\nimport stringLength from 'string-length'\n\nexport default {\n\tname: 'NcRichContenteditable',\n\n\tdirectives: {\n\t\ttooltip: Tooltip,\n\t},\n\n\tmixins: [richEditor],\n\n\tprops: {\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\trequired: true,\n\t\t},\n\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Write a message …'),\n\t\t},\n\n\t\tautoComplete: {\n\t\t\ttype: Function,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\tmenuContainer: {\n\t\t\ttype: Element,\n\t\t\tdefault: () => document.body,\n\t\t},\n\n\t\t/\n\t\t Make the contenteditable looks like a textarea or not.\n\t\t * Default looks like a single-line input.\n\t\t * This also handle the default enter/shift+enter behaviour.\n\t\t * if multiline, enter = newline; otherwise enter = submit\n\t\t * shift+enter always add a new line. ctrl+enter always submits\n\t\t /\n\t\tmultiline: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Is the content editable ?\n\t\t /\n\t\tcontenteditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Disable the editing and show specific disabled design\n\t\t /\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Max allowed length\n\t\t /\n\t\tmaxlength: {\n\t\t\ttype: Number,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Enable or disable emoji autocompletion\n\t\t /\n\t\temojiAutocomplete: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Enable or disable link autocompletion\n\t\t /\n\t\tlinkAutocomplete: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\temits: [\n\t\t'submit',\n\t\t'paste',\n\t\t'update:value',\n\t\t'smart-picker-submit',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\ttextSmiles: [],\n\t\t\ttribute: null,\n\t\t\tautocompleteOptions: {\n\t\t\t\t// Allow spaces in the middle of mentions\n\t\t\t\tallowSpaces: true,\n\t\t\t\tfillAttr: 'id',\n\t\t\t\t// Search against id and title (display name)\n\t\t\t\tlookup: result => `${result.id} ${result.title}`,\n\t\t\t\t// Where to inject the menu popup\n\t\t\t\tmenuContainer: this.menuContainer,\n\t\t\t\t// Popup mention autocompletion templates\n\t\t\t\tmenuItemTemplate: item => this.renderComponentHtml(item.original, NcAutoCompleteResult),\n\t\t\t\t// Hide if no results\n\t\t\t\tnoMatchTemplate: () => '<span class=\"hidden\"></span>',\n\t\t\t\t// Inner display of mentions\n\t\t\t\tselectTemplate: item => this.genSelectTemplate(item?.original?.id),\n\t\t\t\t// Autocompletion results\n\t\t\t\tvalues: this.debouncedAutoComplete,\n\t\t\t},\n\t\t\temojiOptions: {\n\t\t\t\ttrigger: ':',\n\t\t\t\t// Don't use the tribute search function at all\n\t\t\t\t// We pass search results as values (see below)\n\t\t\t\tlookup: (result, query) => query,\n\t\t\t\t// Where to inject the menu popup\n\t\t\t\tmenuContainer: this.menuContainer,\n\t\t\t\t// Popup mention autocompletion templates\n\t\t\t\tmenuItemTemplate: item => {\n\t\t\t\t\tif (this.textSmiles.includes(item.original)) {\n\t\t\t\t\t\t// Display the raw text string for :), :-D, … for non emoji results,\n\t\t\t\t\t\t// instead of trying to show an image and their name.\n\t\t\t\t\t\treturn item.original\n\t\t\t\t\t}\n\n\t\t\t\t\treturn `<span class=\"tribute-container-emoji__item__emoji\">${item.original.native}</span> :${item.original.short_name}`\n\t\t\t\t},\n\t\t\t\t// Hide if no results\n\t\t\t\tnoMatchTemplate: () => t('No emoji found'),\n\t\t\t\t// Display raw emoji along with its name\n\t\t\t\tselectTemplate: (item) => {\n\t\t\t\t\tif (this.textSmiles.includes(item.original)) {\n\t\t\t\t\t\t// Replace the selection with the raw text string for :), :-D, … for non emoji results\n\t\t\t\t\t\treturn item.original\n\t\t\t\t\t}\n\n\t\t\t\t\temojiAddRecent(item.original)\n\t\t\t\t\treturn item.original.native\n\t\t\t\t},\n\t\t\t\t// Pass the search results as values\n\t\t\t\tvalues: (text, cb) => {\n\t\t\t\t\tconst emojiResults = emojiSearch(text)\n\t\t\t\t\tif (this.textSmiles.includes(':' + text)) {\n\t\t\t\t\t\t/\n\t\t\t\t\t\t Prepend text smiles to the search results so that Tribute\n\t\t\t\t\t\t * is not interfering with normal writing, aka. \"Cocos Island Meme\".\n\t\t\t\t\t\t * E.g. `:)` and `:-)` got replaced by the flag of Cocos Island,\n\t\t\t\t\t\t * when submitting the input with Enter after writing them\n\t\t\t\t\t\t /\n\t\t\t\t\t\temojiResults.unshift(':' + text)\n\t\t\t\t\t}\n\t\t\t\t\tcb(emojiResults)\n\t\t\t\t},\n\t\t\t\t// Class added to the menu container\n\t\t\t\tcontainerClass: 'tribute-container-emoji',\n\t\t\t\t// Class added to each list item\n\t\t\t\titemClass: 'tribute-container-emoji__item',\n\t\t\t},\n\t\t\tlinkOptions: {\n\t\t\t\ttrigger: '/',\n\t\t\t\t// Don't use the tribute search function at all\n\t\t\t\t// We pass search results as values (see below)\n\t\t\t\tlookup: (result, query) => query,\n\t\t\t\t// Where to inject the menu popup\n\t\t\t\tmenuContainer: this.menuContainer,\n\t\t\t\t// Popup mention autocompletion templates\n\t\t\t\tmenuItemTemplate: item => `<img class=\"tribute-container-link__item__icon\" src=\"${item.original.icon_url}\"> <span class=\"tribute-container-link__item__title\">${item.original.title}</span>`,\n\t\t\t\t// Hide if no results\n\t\t\t\tnoMatchTemplate: () => t('No link provider found'),\n\t\t\t\tselectTemplate: this.getLink,\n\t\t\t\t// Pass the search results as values\n\t\t\t\tvalues: (text, cb) => cb(searchProvider(text)),\n\t\t\t\t// Class added to the menu container\n\t\t\t\tcontainerClass: 'tribute-container-link',\n\t\t\t\t// Class added to each list item\n\t\t\t\titemClass: 'tribute-container-link__item',\n\t\t\t},\n\n\t\t\t// Represent the raw untrimmed text of the contenteditable\n\t\t\t// serves no other purpose than to check whether the\n\t\t\t// content is empty or not\n\t\t\tlocalValue: this.value,\n\n\t\t\t// Is in text composition session in IME\n\t\t\tisComposing: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t Is the current trimmed value empty?\n\t\t \n\t\t @return {boolean}\n\t\t /\n\t\tisEmptyValue() {\n\t\t\treturn !this.localValue\n\t\t\t\t\|\| (this.localValue && this.localValue.trim() === '')\n\t\t},\n\n\t\t/\n\t\t Is this Firefox? 🙄\n\t\t \n\t\t @return {boolean}\n\t\t /\n\t\tisFF() {\n\t\t\treturn !!navigator.userAgent.match(/firefox/i)\n\t\t},\n\n\t\t/\n\t\t Is the current value over maxlength?\n\t\t \n\t\t @return {boolean}\n\t\t /\n\t\tisOverMaxlength() {\n\t\t\tif (this.isEmptyValue \|\| !this.maxlength) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn stringLength(this.localValue) > this.maxlength\n\t\t},\n\n\t\t/\n\t\t Tooltip to show if characters count is over limit\n\t\t \n\t\t @return {string}\n\t\t /\n\t\ttooltipString() {\n\t\t\tif (!this.isOverMaxlength) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tcontent: t('Message limit of {count} characters reached', { count: this.maxlength }),\n\t\t\t\tshown: true,\n\t\t\t\ttrigger: 'manual',\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Edit is only allowed when contenteditableis true and disabled is false\n\t\t \n\t\t @return {boolean}\n\t\t /\n\t\tcanEdit() {\n\t\t\treturn this.contenteditable && !this.disabled\n\t\t},\n\n\t\t/\n\t\t Proxied native event handlers without custom event handlers\n\t\t \n\t\t @return {Record<string, Function>}\n\t\t /\n\t\tlisteners() {\n\t\t\t/\n\t\t\t All component's event handlers are set as native event handlers with by v-on directive.\n\t\t\t * The component also raised custom events manually by $emit for corresponding events.\n\t\t\t * As a result, it triggers handlers twice.\n\t\t\t * The v-on=\"listeners\" directive should only set proxied native events handler without custom events\n\t\t\t /\n\t\t\tconst listeners = { ...this.$listeners }\n\t\t\tdelete listeners.paste\n\t\t\treturn listeners\n\t\t},\n\t},\n\n\twatch: {\n\t\t/\n\t\t If the parent value change, we compare the plain text rendering\n\t\t * If it's different, we render everything and update the main content\n\t\t /\n\t\tvalue() {\n\t\t\tconst html = this.$refs.contenteditable.innerHTML\n\t\t\t// Compare trimmed versions to be safe\n\t\t\tif (this.value.trim() !== this.parseContent(html).trim()) {\n\t\t\t\tthis.updateContent(this.value)\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\t/\n\t\t Populate the list of text smiles we want to offer via Tribute.\n\t\t * We add the colon `:)` and colon-dash `:-)` version for each of them.\n\t\t /\n\t\tconst smilesCharacters = ['d', 'D', 'p', 'P', 's', 'S', 'x', 'X', ')', '(', '\|', '/']\n\t\tthis.textSmiles = []\n\t\tsmilesCharacters.forEach((char) => {\n\t\t\tthis.textSmiles.push(':' + char)\n\t\t\tthis.textSmiles.push(':-' + char)\n\t\t})\n\n\t\tthis.autocompleteTribute = new Tribute(this.autocompleteOptions)\n\t\tthis.autocompleteTribute.attach(this.$el)\n\n\t\tif (this.emojiAutocomplete) {\n\t\t\tthis.emojiTribute = new Tribute(this.emojiOptions)\n\t\t\tthis.emojiTribute.attach(this.$el)\n\t\t}\n\n\t\tif (this.linkAutocomplete) {\n\t\t\tthis.linkTribute = new Tribute(this.linkOptions)\n\t\t\tthis.linkTribute.attach(this.$el)\n\t\t}\n\n\t\t// Update default value\n\t\tthis.updateContent(this.value)\n\n\t\t// Removes the contenteditable attribute at first load if the prop is\n\t\t// set to false.\n\t\tthis.$refs.contenteditable.contentEditable = this.canEdit\n\t},\n\tbeforeDestroy() {\n\t\tif (this.autocompleteTribute) {\n\t\t\tthis.autocompleteTribute.detach(this.$el)\n\t\t}\n\t\tif (this.emojiTribute) {\n\t\t\tthis.emojiTribute.detach(this.$el)\n\t\t}\n\t\tif (this.linkTribute) {\n\t\t\tthis.linkTribute.detach(this.$el)\n\t\t}\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Focus the richContenteditable\n\t\t \n\t\t @public\n\t\t /\n\t\tfocus() {\n\t\t\tthis.$refs.contenteditable.focus()\n\t\t},\n\n\t\tgetLink(item) {\n\t\t\t// there is no way to get a tribute result asynchronously\n\t\t\t// so we immediately insert a node and replace it when the result comes\n\t\t\tgetLinkWithPicker(item.original.id)\n\t\t\t\t.then(result => {\n\t\t\t\t\t// replace dummy temp element by a text node which contains the picker result\n\t\t\t\t\tconst tmpElem = document.getElementById('tmp-smart-picker-result-node')\n\t\t\t\t\tconst eventData = {\n\t\t\t\t\t\tresult,\n\t\t\t\t\t\tinsertText: true,\n\t\t\t\t\t}\n\t\t\t\t\tthis.$emit('smart-picker-submit', eventData)\n\t\t\t\t\tif (eventData.insertText) {\n\t\t\t\t\t\tconst newElem = document.createTextNode(result)\n\t\t\t\t\t\ttmpElem.replaceWith(newElem)\n\t\t\t\t\t\tthis.setCursorAfter(newElem)\n\t\t\t\t\t\tthis.updateValue(this.$refs.contenteditable.innerHTML)\n\t\t\t\t\t} else {\n\t\t\t\t\t\ttmpElem.remove()\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\t.catch((error) => {\n\t\t\t\t\tconsole.debug('Smart picker promise rejected:', error)\n\t\t\t\t\tconst tmpElem = document.getElementById('tmp-smart-picker-result-node')\n\t\t\t\t\tthis.setCursorAfter(tmpElem)\n\t\t\t\t\ttmpElem.remove()\n\t\t\t\t})\n\t\t\treturn '<span id=\"tmp-smart-picker-result-node\"></span>'\n\t\t},\n\t\tsetCursorAfter(element) {\n\t\t\tconst range = document.createRange()\n\t\t\trange.setEndAfter(element)\n\t\t\trange.collapse()\n\t\t\tconst selection = window.getSelection()\n\t\t\tselection.removeAllRanges()\n\t\t\tselection.addRange(range)\n\t\t},\n\t\t/\n\t\t Re-emit the input event to the parent\n\t\t \n\t\t @param {Event} event the input event\n\t\t /\n\t\tonInput(event) {\n\t\t\tthis.updateValue(event.target.innerHTML)\n\t\t},\n\n\t\t/\n\t\t When pasting, sanitize the content, extract text\n\t\t * and render it again\n\t\t \n\t\t @param {Event} event the paste event\n\t\t * @fires Event paste the original paste event\n\t\t /\n\t\tonPaste(event) {\n\t\t\t// Either disabled or edit deactivated\n\t\t\tif (!this.canEdit) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tevent.preventDefault()\n\t\t\tconst clipboardData = event.clipboardData\n\n\t\t\t/* The original paste event /\n\t\t\tthis.$emit('paste', event)\n\n\t\t\t// If we have a file or if we don't have any text, ignore\n\t\t\tif (clipboardData.files.length !== 0\n\t\t\t\t\|\| !Object.values(clipboardData.items).find(item => item?.type.startsWith('text'))) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst text = clipboardData.getData('text')\n\t\t\tconst selection = window.getSelection()\n\n\t\t\t// If no selection, replace the whole data\n\t\t\tif (!selection.rangeCount) {\n\t\t\t\tthis.updateValue(text)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Generate text and insert\n\t\t\tconst range = selection.getRangeAt(0)\n\t\t\tselection.deleteFromDocument()\n\t\t\trange.insertNode(document.createTextNode(text))\n\n\t\t\t// Put cursor at the end of the selection\n\t\t\tconst newRange = document.createRange()\n\t\t\tnewRange.setStart(event.target, range.endOffset)\n\t\t\tnewRange.collapse(true)\n\t\t\tselection.removeAllRanges()\n\t\t\tselection.addRange(newRange)\n\n\t\t\t// Propagate data\n\t\t\tthis.updateValue(this.$refs.contenteditable.innerHTML)\n\t\t},\n\n\t\t/\n\t\t Update the value text from the provided html\n\t\t \n\t\t @param {string} htmlOrText the html content (or raw text with @mentions)\n\t\t /\n\t\tupdateValue(htmlOrText) {\n\t\t\tconst text = this.parseContent(htmlOrText)\n\t\t\tthis.localValue = text\n\t\t\tthis.$emit('update:value', text)\n\t\t},\n\n\t\t/\n\t\t Update content and local value\n\t\t \n\t\t @param {string} value the message value\n\t\t /\n\t\tupdateContent(value) {\n\t\t\tconst renderedContent = this.renderContent(value)\n\t\t\tthis.$refs.contenteditable.innerHTML = renderedContent\n\t\t\tthis.localValue = value\n\t\t},\n\n\t\t/\n\t\t Because FF have a decade old bug preventing contenteditable=false\n\t\t * to properly be deleted on backspace, we have to hack 👀\n\t\t * https://stackoverflow.com/a/59383394/3885878\n\t\t * https://stackoverflow.com/a/30574622\n\t\t \n\t\t @param {Event} event the delete keydown event\n\t\t /\n\t\tonDelete(event) {\n\t\t\tif (!this.isFF \|\| !window.getSelection) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Either disabled or edit deactivated\n\t\t\tif (!this.canEdit) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// fix backspace bug in FF\n\t\t\t// https://bugzilla.mozilla.org/show_bug.cgi?id=685445\n\t\t\t// https://bugzilla.mozilla.org/show_bug.cgi?id=1665167\n\t\t\tconst selection = window.getSelection()\n\t\t\tconst node = event.target\n\t\t\tif (!selection.isCollapsed \|\| !selection.rangeCount) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst curRange = selection.getRangeAt(selection.rangeCount - 1)\n\t\t\tif (curRange.commonAncestorContainer.nodeType === 3 && curRange.startOffset > 0) {\n\t\t\t\t// we are in child selection. The characters of the text node is being deleted\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst range = document.createRange()\n\t\t\tif (selection.anchorNode !== node) {\n\t\t\t\t// selection is in character mode. expand it to the whole editable field\n\t\t\t\trange.selectNodeContents(node)\n\t\t\t\trange.setEndBefore(selection.anchorNode)\n\t\t\t} else if (selection.anchorOffset > 0) {\n\t\t\t\trange.setEnd(node, selection.anchorOffset)\n\t\t\t} else {\n\t\t\t\t// reached the beginning of editable field\n\t\t\t\treturn\n\t\t\t}\n\t\t\trange.setStart(node, range.endOffset - 1)\n\n\t\t\tconst previousNode = range.cloneContents().lastChild\n\t\t\tif (previousNode && previousNode.contentEditable === 'false') {\n\t\t\t\t// this is some rich content, e.g. smile. We should help the user to delete it\n\t\t\t\trange.deleteContents()\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\t\t/\n\t\t Enter key pressed. Submits if not multiline\n\t\t \n\t\t @param {Event} event the keydown event\n\t\t /\n\t\tonEnter(event) {\n\t\t\t// Prevent submitting if multiline\n\t\t\t// or length is over maxlength\n\t\t\t// or autocompletion menu is opened\n\t\t\t// or in a text composition session with IME\n\t\t\tif (this.multiline\n\t\t\t\t\|\| this.isOverMaxlength\n\t\t\t\t\|\| this.autocompleteTribute.isActive \|\| this.emojiTribute.isActive \|\| this.linkTribute.isActive\n\t\t\t\t\|\| this.isComposing) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tthis.$emit('submit', event)\n\t\t},\n\n\t\t/\n\t\t Ctrl + Enter key pressed is used to submit\n\t\t \n\t\t @param {Event} event the keydown event\n\t\t /\n\t\tonCtrlEnter(event) {\n\t\t\tif (this.isOverMaxlength) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.$emit('submit', event)\n\t\t},\n\n\t\t/\n\t\t Debounce the autocomplete function\n\t\t /\n\t\tdebouncedAutoComplete: debounce(async function(search, callback) {\n\t\t\tthis.autoComplete(search, callback)\n\t\t}, 100),\n\n\t\tonKeyUp(event) {\n\t\t\t// prevent tribute from opening on keyup\n\t\t\tevent.stopImmediatePropagation()\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// Standalone styling, independent from server\n.rich-contenteditable__input {\n\toverflow-y: auto;\n\twidth: auto;\n\tmargin: 0;\n\tpadding: 8px;\n\tcursor: text;\n\twhite-space: pre-wrap;\n\tword-break: break-word;\n\tcolor: var(--color-main-text);\n\tborder: 2px solid var(--color-border-dark);\n\tborder-radius: var(--border-radius-large);\n\toutline: none;\n\tbackground-color: var(--color-main-background);\n\tfont-family: var(--font-face);\n\tfont-size: inherit;\n\tmin-height: $clickable-area;\n\tmax-height: $clickable-area 5.5;\n\n\t// Cannot use :empty because of firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=1513303\n\t&--empty:before {\n\t\tcontent: attr(aria-placeholder);\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tposition: absolute;\n\t}\n\n\t&[contenteditable='false']:not(&--disabled) {\n\t\tcursor: default;\n\t\tbackground-color: transparent;\n\t\tcolor: var(--color-main-text);\n\t\tborder-color: transparent;\n\t\topacity: 1;\n\t\tborder-radius: 0;\n\t}\n\n\t&--multiline {\n\t\tmin-height: $clickable-area * 3;\n\t\t// No max for mutiline\n\t\tmax-height: none;\n\t}\n\n\t&--disabled {\n\t\topacity: $opacity_disabled;\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tborder: 2px solid var(--color-background-darker);\n\t\tborder-radius: var(--border-radius);\n\t\tbackground-color: var(--color-background-dark);\n\t}\n}\n\n</style>\n\n<style lang=\"scss\">\n.tribute-container, .tribute-container-emoji, .tribute-container-link {\n\tz-index: 9000;\n\toverflow: auto;\n\tmin-width: 250px;\n\tmax-width: 300px;\n\t// Show maximum 4 entries and a half to show scroll\n\t// 44px + 10px padding\n\tmax-height: ($clickable-area + 20px) * 4.5;\n\t// Space it out a bit from the text\n\tmargin: 5px 0;\n\tcolor: var(--color-main-text);\n\tborder-radius: var(--border-radius);\n\tbackground: var(--color-main-background);\n\tbox-shadow: 0 1px 5px var(--color-box-shadow);\n}\n\n.tribute-container-emoji, .tribute-container-link {\n\tmin-width: 200px;\n\tmax-width: 200px;\n\tpadding: 4px;\n\t// Show maximum 5 entries and a half to show scroll\n\tmax-height: 35px * 5 + math.div(35px, 2) !important;\n\n\t&__item {\n\t\tborder-radius: 8px;\n\t\tpadding: 4px 8px;\n\t\tmargin-bottom: 4px;\n\t\topacity: 0.8;\n\t\tcursor: pointer;\n\n\t\t// Take care of long names\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\n\t\t&:last-child {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\n\t\t&__emoji {\n\t\t\tpadding-right: 8px;\n\t\t}\n\t}\n\n\t.highlight {\n\t\topacity: 1;\n\t\tcolor: var(--color-primary-element-light-text);\n\t\tbackground: var(--color-primary-element-light);\n\t\t&, * {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n\n.tribute-container-link {\n\tmin-width: 200px;\n\tmax-width: 300px;\n\t&__item {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t&__title {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t&__icon {\n\t\t\tmargin: auto 0;\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t\tobject-fit: contain;\n\t\t\tpadding-right: 8px;\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main$1","_a","_b","_c","user","size","generateUrl","_sfc_main","VTooltip","richEditor","t","result","item","NcAutoCompleteResult","query","emojiAddRecent","text","cb","emojiResults","emojiSearch","searchProvider","stringLength","listeners","html","smilesCharacters","char","Tribute","getLinkWithPicker","tmpElem","eventData","newElem","error","element","range","selection","event","clipboardData","newRange","htmlOrText","value","renderedContent","node","curRange","previousNode","debounce","search","callback"],"mappings":"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"}

package/dist/Components/NcRichText.cjs CHANGED Viewed

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: !0 }, [Symbol.toStringTag]: { value: "Module" } });
-const r = require("../chunks/NcRichText-89373b11.cjs"), e = require("../chunks/referencePickerModal-b79b7b92.cjs");
+const r = require("../chunks/NcRichText-9f77a9c6.cjs"), e = require("../chunks/referencePickerModal-aa5d3f47.cjs");
 /**
  * @copyright Copyright (c) 2023 Raimund Schlüßler <raimund.schluessler@mailbox.org>
  *

package/dist/Components/NcRichText.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
-import { N as r } from "../chunks/NcRichText-e2026b55.mjs";
-import { a as t } from "../chunks/NcRichText-e2026b55.mjs";
-import { e as c, a as d, b as o, N as n, c as g, k as m, j as P, l as k, m as f, h as N, i as R, f as l, r as u, g as h, d as v, n as W, s as p } from "../chunks/referencePickerModal-c87eab17.mjs";
+import { N as r } from "../chunks/NcRichText-f5cfcd57.mjs";
+import { a as t } from "../chunks/NcRichText-f5cfcd57.mjs";
+import { e as c, a as d, b as o, N as n, c as g, k as m, j as P, l as k, m as f, h as N, i as R, f as l, r as u, g as h, d as v, n as W, s as p } from "../chunks/referencePickerModal-c2f33569.mjs";
 /**
  * @copyright Copyright (c) 2023 Raimund Schlüßler <raimund.schluessler@mailbox.org>
  *

package/dist/Components/NcSelect.cjs CHANGED Viewed

@@ -1,6 +1,6 @@
 var I = require("../assets/index-f9bfa317.css");
 require("@nextcloud/vue-select/dist/vue-select.css");
-const c = require("@nextcloud/vue-select"), a = require("@floating-ui/dom"), u = require("../chunks/l10n-c3dbf018.cjs"), f = require("../chunks/ChevronDown-dc32e51d.cjs"), d = require("../chunks/Close-98cb6f12.cjs"), m = require("./NcEllipsisedOption.cjs"), y = require("./NcListItemIcon.cjs"), _ = require("./NcLoadingIcon.cjs"), h = require("../chunks/l10n-098e6a54.cjs"), g = require("../chunks/GenRandomId-c214d235.cjs"), S = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+const c = require("@nextcloud/vue-select"), a = require("@floating-ui/dom"), u = require("../chunks/l10n-e9ffbe5e.cjs"), f = require("../chunks/ChevronDown-dc32e51d.cjs"), d = require("../chunks/Close-98cb6f12.cjs"), m = require("./NcEllipsisedOption.cjs"), y = require("./NcListItemIcon.cjs"), _ = require("./NcLoadingIcon.cjs"), h = require("../chunks/l10n-a12cdbfa.cjs"), g = require("../chunks/GenRandomId-c214d235.cjs"), S = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
 const b = {
   name: "NcSelect",
   components: {

package/dist/Components/NcSelect.mjs CHANGED Viewed

@@ -2,13 +2,13 @@ import "../assets/index-f9bfa317.css";
 import "@nextcloud/vue-select/dist/vue-select.css";
 import { VueSelect as s } from "@nextcloud/vue-select";
 import { autoUpdate as p, computePosition as f, offset as d, flip as m, shift as y, limitShift as _ } from "@floating-ui/dom";
-import { t as c } from "../chunks/l10n-f51d3415.mjs";
+import { t as c } from "../chunks/l10n-ef44019c.mjs";
 import { C as h } from "../chunks/ChevronDown-a72d365d.mjs";
 import { C as g } from "../chunks/Close-271f72e2.mjs";
 import b from "./NcEllipsisedOption.mjs";
 import S from "./NcListItemIcon.mjs";
 import L from "./NcLoadingIcon.mjs";
-import { l as C } from "../chunks/l10n-a929cdef.mjs";
+import { l as C } from "../chunks/l10n-c603e589.mjs";
 import { G as v } from "../chunks/GenRandomId-cb9ccebe.mjs";
 import { n as N } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
 const B = {

package/dist/Components/NcSelectTags.cjs CHANGED Viewed

@@ -1,5 +1,5 @@
 "use strict";
-const c = require("./NcEllipsisedOption.cjs"), l = require("./NcSelect.cjs"), p = require("@nextcloud/axios"), d = require("@nextcloud/router"), o = require("../chunks/l10n-c3dbf018.cjs"), f = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), h = (t) => t && t.__esModule ? t : { default: t }, g = /* @__PURE__ */ h(p);
+const c = require("./NcEllipsisedOption.cjs"), l = require("./NcSelect.cjs"), p = require("@nextcloud/axios"), d = require("@nextcloud/router"), o = require("../chunks/l10n-e9ffbe5e.cjs"), f = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), h = (t) => t && t.__esModule ? t : { default: t }, g = /* @__PURE__ */ h(p);
 /**
  * @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
  *

package/dist/Components/NcSelectTags.mjs CHANGED Viewed

@@ -2,7 +2,7 @@ import p from "./NcEllipsisedOption.mjs";
 import l from "./NcSelect.mjs";
 import c from "@nextcloud/axios";
 import { generateRemoteUrl as d } from "@nextcloud/router";
-import { t as i } from "../chunks/l10n-f51d3415.mjs";
+import { t as i } from "../chunks/l10n-ef44019c.mjs";
 import { n as f } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
 /**
  * @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>

package/dist/Components/NcSettingsInputText.cjs CHANGED Viewed

@@ -1,5 +1,5 @@
 var m = require("../assets/index-6c47e88a.css");
-const s = require("../chunks/l10n-c3dbf018.cjs"), a = require("../chunks/GenRandomId-c214d235.cjs"), u = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+const s = require("../chunks/l10n-e9ffbe5e.cjs"), a = require("../chunks/GenRandomId-c214d235.cjs"), u = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
 const r = {
   name: "NcSettingsInputText",
   props: {

package/dist/Components/NcSettingsInputText.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import "../assets/index-6c47e88a.css";
-import { t as a } from "../chunks/l10n-f51d3415.mjs";
+import { t as a } from "../chunks/l10n-ef44019c.mjs";
 import { G as s } from "../chunks/GenRandomId-cb9ccebe.mjs";
 import { n as u } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
 const r = {

package/dist/Components/NcSettingsSection.cjs CHANGED Viewed

@@ -1,5 +1,5 @@
 var g = require("../assets/index-76a58945.css");
-const r = require("../chunks/l10n-c3dbf018.cjs"), n = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), l = {
+const r = require("../chunks/l10n-e9ffbe5e.cjs"), n = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), l = {
   name: "HelpCircleIcon",
   emits: ["click"],
   props: {

package/dist/Components/NcSettingsSection.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import "../assets/index-76a58945.css";
-import { t as r } from "../chunks/l10n-f51d3415.mjs";
+import { t as r } from "../chunks/l10n-ef44019c.mjs";
 import { n as i } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
 const l = {
   name: "HelpCircleIcon",

package/dist/Components/NcSettingsSelectGroup.cjs CHANGED Viewed

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: !0 }, [Symbol.toStringTag]: { value: "Module" } });
-const e = require("../chunks/NcSettingsSelectGroup-fad68876.cjs");
+const e = require("../chunks/NcSettingsSelectGroup-0f71fef4.cjs");
 /**
  * @copyright Copyright (c) 2019 Greta Doci <gretadoci@gmail.com>
  *

package/dist/Components/NcSettingsSelectGroup.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-import { N as e } from "../chunks/NcSettingsSelectGroup-b49652df.mjs";
+import { N as e } from "../chunks/NcSettingsSelectGroup-091c0306.mjs";
 /**
  * @copyright Copyright (c) 2019 Greta Doci <gretadoci@gmail.com>
  *

package/dist/Components/NcTextArea.cjs CHANGED Viewed

@@ -1,4 +1,4 @@
-var p = require("../assets/index-6899d75b.css");
+var p = require("../assets/index-30ca9574.css");
 const s = require("../chunks/GenRandomId-c214d235.cjs"), r = require("../chunks/AlertCircleOutline-7085c10f.cjs"), l = require("../chunks/Check-be8cd6af.cjs"), i = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
 const n = {
   name: "NcTextArea",
@@ -153,15 +153,15 @@ var d = function() {
     "textarea__helper-text-message--error": e.error,
     "textarea__helper-text-message--success": e.success
   }, attrs: { id: `${e.inputName}-helper-text` } }, [e.success ? a("Check", { staticClass: "textarea__helper-text-message__icon", attrs: { size: 18 } }) : e.error ? a("AlertCircle", { staticClass: "textarea__helper-text-message__icon", attrs: { size: 18 } }) : e._e(), e._v(" " + e._s(e.helperText) + " ")], 1) : e._e()]);
-}, u = [], c = /* @__PURE__ */ i.normalizeComponent(
+}, c = [], u = /* @__PURE__ */ i.normalizeComponent(
   n,
   d,
-  u,
+  c,
   !1,
   null,
-  "44bb430a",
+  "c9071493",
   null,
   null
 );
-const o = c.exports;
+const o = u.exports;
 module.exports = o;

package/dist/Components/NcTextArea.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcTextArea.cjs","sources":["../../src/components/NcTextArea/NcTextArea.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2023 Richard Steinmetz <richard@steinmetz.cloud>\n -\n - @author Richard Steinmetz <richard@steinmetz.cloud>\n -\n - @license AGPL-3.0-or-later\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU General Public License as published by\n - the Free Software Foundation, either version 3 of the License, or\n - (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU General Public License for more details.\n -\n - You should have received a copy of the GNU General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n### Description\n\nThis component is a textarea field.\nIt extends and styles an HTMLTextAreaElement.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcTextArea label=\"Text area\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\thelper-text=\"This is a regular helper text.\" >\n\t\t</NcTextArea>\n\t\t<NcTextArea label=\"Success state\"\n\t\t\t:success=\"true\">\n\t\t</NcTextArea>\n\t\t<NcTextArea label=\"Error state\"\n\t\t\tplaceholder=\"Enter something valid\"\n\t\t\thelper-text=\"Helper texts will be styled accordingly.\"\n\t\t\t:error=\"true\">\n\t\t</NcTextArea>\n\t\t<NcTextArea label=\"Disabled\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextArea label=\"Disabled + Success\"\n\t\t\t:success=\"true\"\n\t\t\t:disabled=\"true\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">External label</label>\n\t\t\t<NcTextArea id=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Text area with external label\" />\n\t\t</div>\n\t\t<NcTextArea label=\"Custom size and no resize\"\n\t\t\tresize=\"none\"\n\t\t\trows=\"5\" />\n\t\t</NcTextArea>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\twidth: 100%;\n\talign-items: center;\n\tgap: 14px;\n\n\t> label {\n\t\tflex-shrink: 0;\n\t}\n}\n</style>\n```\n</docs>\n\n<template>\n\t<div class=\"textarea\" :class=\"{ 'textarea--disabled': disabled }\">\n\t\t<div class=\"textarea__main-wrapper\">\n\t\t\t<textarea v-bind=\"$attrs\"\n\t\t\t\t:id=\"computedId\"\n\t\t\t\tref=\"input\"\n\t\t\t\tclass=\"textarea__input\"\n\t\t\t\t:type=\"type\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:placeholder=\"computedPlaceholder\"\n\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\t:class=\"[inputClass,\n\t\t\t\t\t{\n\t\t\t\t\t\t'textarea__input--label-outside': labelOutside,\n\t\t\t\t\t\t'textarea__input--success': success,\n\t\t\t\t\t\t'textarea__input--error': error,\n\t\t\t\t\t}]\"\n\t\t\t\t:style=\"{ resize: resize }\"\n\t\t\t\t:value=\"value\"\n\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t@input=\"handleInput\" />\n\t\t\t<!-- Label -->\n\t\t\t<label v-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"textarea__label\"\n\t\t\t\t:for=\"computedId\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\t\t</div>\n\t\t<p v-if=\"helperText.length > 0\"\n\t\t\t:id=\"`${inputName}-helper-text`\"\n\t\t\tclass=\"textarea__helper-text-message\"\n\t\t\t:class=\"{\n\t\t\t\t'textarea__helper-text-message--error': error,\n\t\t\t\t'textarea__helper-text-message--success': success,\n\t\t\t}\">\n\t\t\t<Check v-if=\"success\" class=\"textarea__helper-text-message__icon\" :size=\"18\" />\n\t\t\t<AlertCircle v-else-if=\"error\" class=\"textarea__helper-text-message__icon\" :size=\"18\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\n\nexport default {\n\tname: 'NcTextArea',\n\n\tcomponents: {\n\t\tAlertCircle,\n\t\tCheck,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/*\n\t\t The value of the input field\n\t\t /\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/\n\t\t The input label, always provide one for accessibility purposes.\n\t\t * This will also be used as a placeholder unless the placeholder\n\t\t * prop is populated with a different string.\n\t\t /\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Pass in true if you want to use an external label. This is useful\n\t\t * if you need a label that looks different from the one provided by\n\t\t * this component\n\t\t /\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The placeholder of the input. This defaults as the string that's\n\t\t * passed into the label prop. In order to remove the placeholder,\n\t\t * pass in an empty string.\n\t\t /\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Toggles the success state of the component. Adds a checkmark icon.\n\t\t * this cannot be used together with canClear.\n\t\t /\n\t\tsuccess: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Toggles the error state of the component. Adds an error icon.\n\t\t * this cannot be used together with canClear.\n\t\t /\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Additional helper text message\n\t\t \n\t\t This will be displayed beneath the input field. In case the field is\n\t\t * also marked as having an error, the text will be displayed in red.\n\t\t /\n\t\thelperText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Disable the input field\n\t\t /\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Class to add to the input field.\n\t\t * Necessary to use NcInputField in the NcActionInput component.\n\t\t /\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t The resize CSS property sets whether an element is resizable, and if\n\t\t * so, in which directions.\n\t\t /\n\t\tresize: {\n\t\t\ttype: String,\n\t\t\tdefault: 'both',\n\t\t\tvalidator: (value) => ['both', 'vertical', 'horizontal', 'none'].includes(value),\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:value',\n\t],\n\n\tcomputed: {\n\t\tcomputedId() {\n\t\t\treturn this.$attrs.id && this.$attrs.id !== '' ? this.$attrs.id : this.inputName\n\t\t},\n\n\t\tinputName() {\n\t\t\treturn 'input' + GenRandomId()\n\t\t},\n\n\t\thasPlaceholder() {\n\t\t\treturn this.placeholder !== '' && this.placeholder !== undefined\n\t\t},\n\n\t\tcomputedPlaceholder() {\n\t\t\treturn this.hasPlaceholder ? this.placeholder : this.label\n\t\t},\n\n\t\tisValidLabel() {\n\t\t\tconst isValidLabel = this.label \|\| this.labelOutside\n\t\t\tif (!isValidLabel) {\n\t\t\t\tconsole.warn('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\t\t}\n\t\t\treturn isValidLabel\n\t\t},\n\n\t\tariaDescribedby() {\n\t\t\tconst ariaDescribedby = []\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\tariaDescribedby.push(`${this.inputName}-helper-text`)\n\t\t\t}\n\t\t\tif (this.$attrs['aria-describedby']) {\n\t\t\t\tariaDescribedby.push(this.$attrs['aria-describedby'])\n\t\t\t}\n\t\t\treturn ariaDescribedby.join(' ') \|\| null\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Focus the input element\n\t\t \n\t\t @public\n\t\t /\n\t\tfocus() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\n\t\t/\n\t\t Select all the text in the input\n\t\t \n\t\t @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.input.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tthis.$emit('update:value', event.target.value)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.textarea {\n\tposition: relative;\n\twidth: 100%;\n\tborder-radius: var(--border-radius-large);\n\tmargin-block-start: 6px; // for the label in active state\n\tresize: vertical;\n\n\t&__main-wrapper {\n\t\tposition: relative;\n\t}\n\n\t&--disabled {\n\t\topacity: 0.7;\n\t\tfilter: saturate(0.7);\n\t}\n\n\t&__input {\n\t\tmargin: 0;\n\t\tpadding-inline: 10px 6px; // align with label 8px margin label + 4px padding label - 2px border input\n\t\twidth: 100%;\n\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\tborder-radius: var(--border-radius-large);\n\n\t\tcursor: pointer;\n\n\t\t&:active:not([disabled]),\n\t\t&:hover:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\tborder-color: var(--color-primary-element);\n\t\t}\n\n\t\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t\t&:not(:focus,&--label-outside)::placeholder {\n\t\t\topacity: 0;\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\n\t\t&--success {\n\t\t\tborder-color: 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\n\t\t\t// Align label text color with border color (on hover / focus)\n\t\t\t&:focus + .textarea__label,\n\t\t\t&:hover:not(:placeholder-shown) + .textarea__label {\n\t\t\t\tcolor: var(--color-success-text);\n\t\t\t}\n\t\t}\n\n\t\t&--error {\n\t\t\tborder-color: var(--color-error) !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\n\t\t\t// Align label text color with border color (on hover / focus)\n\t\t\t&:focus + .textarea__label,\n\t\t\t&:hover:not(:placeholder-shown) + .textarea__label {\n\t\t\t\tcolor: var(--color-error-text);\n\t\t\t}\n\t\t}\n\n\t\t// Align label text color with border color (on hover / focus)\n\t\t&:not(&--success, &--error) {\n\t\t\t&:focus + .textarea__label,\n\t\t\t&:hover:not(:placeholder-shown) + .textarea__label {\n\t\t\t\tcolor: var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t}\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 12px 0;\n\t\t// fix height and line height to center label\n\t\theight: 17px;\n\t\tmax-width: fit-content;\n\t\tline-height: 1;\n\t\tinset-block-start: 12px;\n\t\tinset-inline: 0;\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\tinset-block-start: -6px;\n\t\tfont-size: 13px; // minimum allowed font size for accessibility\n\t\tbackground-color: var(--color-main-background);\n\t\theight: 14px;\n\t\tpadding-inline: 4px;\n\t\tmargin-inline-start: 8px;\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&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\n\t\t&--error {\n\t\t\tcolor: var(--color-error-text);\n\t\t}\n\n\t\t&--success {\n\t\t\tcolor: var(--color-success-text);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","AlertCircleOutline","Check","value","GenRandomId","isValidLabel","ariaDescribedby","event"],"mappings":";;AAoIA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,aAAAC,EAAA;AAAA,IACA,OAAAC,EAAA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,CAAA,QAAA,YAAA,cAAA,MAAA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,OAAA,MAAA,KAAA,OAAA,OAAA,KAAA,KAAA,OAAA,KAAA,KAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAA,UAAAC,EAAA,YAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,KAAA,gBAAA,MAAA,KAAA,gBAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AACA,aAAA,KAAA,iBAAA,KAAA,cAAA,KAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,YAAAC,IAAA,KAAA,SAAA,KAAA;AACA,aAAAA,KACA,QAAA,KAAA,mJAAA,GAEAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,YAAAC,IAAA,CAAA;AACA,aAAA,KAAA,WAAA,SAAA,KACAA,EAAA,KAAA,GAAA,KAAA,SAAA,cAAA,GAEA,KAAA,OAAA,kBAAA,KACAA,EAAA,KAAA,KAAA,OAAA,kBAAA,CAAA,GAEAA,EAAA,KAAA,GAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AACA,WAAA,MAAA,MAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AACA,WAAA,MAAA,MAAA,OAAA;AAAA,IACA;AAAA,IAEA,YAAAC,GAAA;AACA,WAAA,MAAA,gBAAAA,EAAA,OAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcTextArea.cjs","sources":["../../src/components/NcTextArea/NcTextArea.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2023 Richard Steinmetz <richard@steinmetz.cloud>\n -\n - @author Richard Steinmetz <richard@steinmetz.cloud>\n -\n - @license AGPL-3.0-or-later\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU General Public License as published by\n - the Free Software Foundation, either version 3 of the License, or\n - (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU General Public License for more details.\n -\n - You should have received a copy of the GNU General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n### Description\n\nThis component is a textarea field.\nIt extends and styles an HTMLTextAreaElement.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcTextArea label=\"Text area\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\thelper-text=\"This is a regular helper text.\" >\n\t\t</NcTextArea>\n\t\t<NcTextArea label=\"Success state\"\n\t\t\t:success=\"true\">\n\t\t</NcTextArea>\n\t\t<NcTextArea label=\"Error state\"\n\t\t\tplaceholder=\"Enter something valid\"\n\t\t\thelper-text=\"Helper texts will be styled accordingly.\"\n\t\t\t:error=\"true\">\n\t\t</NcTextArea>\n\t\t<NcTextArea label=\"Disabled\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextArea label=\"Disabled + Success\"\n\t\t\t:success=\"true\"\n\t\t\t:disabled=\"true\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">External label</label>\n\t\t\t<NcTextArea id=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Text area with external label\" />\n\t\t</div>\n\t\t<NcTextArea label=\"Custom size and no resize\"\n\t\t\tresize=\"none\"\n\t\t\trows=\"5\" />\n\t\t</NcTextArea>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\twidth: 100%;\n\talign-items: center;\n\tgap: 14px;\n\n\t> label {\n\t\tflex-shrink: 0;\n\t}\n}\n</style>\n```\n</docs>\n\n<template>\n\t<div class=\"textarea\" :class=\"{ 'textarea--disabled': disabled }\">\n\t\t<div class=\"textarea__main-wrapper\">\n\t\t\t<textarea v-bind=\"$attrs\"\n\t\t\t\t:id=\"computedId\"\n\t\t\t\tref=\"input\"\n\t\t\t\tclass=\"textarea__input\"\n\t\t\t\t:type=\"type\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:placeholder=\"computedPlaceholder\"\n\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\t:class=\"[inputClass,\n\t\t\t\t\t{\n\t\t\t\t\t\t'textarea__input--label-outside': labelOutside,\n\t\t\t\t\t\t'textarea__input--success': success,\n\t\t\t\t\t\t'textarea__input--error': error,\n\t\t\t\t\t}]\"\n\t\t\t\t:style=\"{ resize: resize }\"\n\t\t\t\t:value=\"value\"\n\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t@input=\"handleInput\" />\n\t\t\t<!-- Label -->\n\t\t\t<label v-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"textarea__label\"\n\t\t\t\t:for=\"computedId\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\t\t</div>\n\t\t<p v-if=\"helperText.length > 0\"\n\t\t\t:id=\"`${inputName}-helper-text`\"\n\t\t\tclass=\"textarea__helper-text-message\"\n\t\t\t:class=\"{\n\t\t\t\t'textarea__helper-text-message--error': error,\n\t\t\t\t'textarea__helper-text-message--success': success,\n\t\t\t}\">\n\t\t\t<Check v-if=\"success\" class=\"textarea__helper-text-message__icon\" :size=\"18\" />\n\t\t\t<AlertCircle v-else-if=\"error\" class=\"textarea__helper-text-message__icon\" :size=\"18\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\n\nexport default {\n\tname: 'NcTextArea',\n\n\tcomponents: {\n\t\tAlertCircle,\n\t\tCheck,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/*\n\t\t The value of the input field\n\t\t /\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/\n\t\t The input label, always provide one for accessibility purposes.\n\t\t * This will also be used as a placeholder unless the placeholder\n\t\t * prop is populated with a different string.\n\t\t /\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Pass in true if you want to use an external label. This is useful\n\t\t * if you need a label that looks different from the one provided by\n\t\t * this component\n\t\t /\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The placeholder of the input. This defaults as the string that's\n\t\t * passed into the label prop. In order to remove the placeholder,\n\t\t * pass in an empty string.\n\t\t /\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Toggles the success state of the component. Adds a checkmark icon.\n\t\t * this cannot be used together with canClear.\n\t\t /\n\t\tsuccess: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Toggles the error state of the component. Adds an error icon.\n\t\t * this cannot be used together with canClear.\n\t\t /\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Additional helper text message\n\t\t \n\t\t This will be displayed beneath the input field. In case the field is\n\t\t * also marked as having an error, the text will be displayed in red.\n\t\t /\n\t\thelperText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Disable the input field\n\t\t /\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Class to add to the input field.\n\t\t * Necessary to use NcInputField in the NcActionInput component.\n\t\t /\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t The resize CSS property sets whether an element is resizable, and if\n\t\t * so, in which directions.\n\t\t /\n\t\tresize: {\n\t\t\ttype: String,\n\t\t\tdefault: 'both',\n\t\t\tvalidator: (value) => ['both', 'vertical', 'horizontal', 'none'].includes(value),\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:value',\n\t],\n\n\tcomputed: {\n\t\tcomputedId() {\n\t\t\treturn this.$attrs.id && this.$attrs.id !== '' ? this.$attrs.id : this.inputName\n\t\t},\n\n\t\tinputName() {\n\t\t\treturn 'input' + GenRandomId()\n\t\t},\n\n\t\thasPlaceholder() {\n\t\t\treturn this.placeholder !== '' && this.placeholder !== undefined\n\t\t},\n\n\t\tcomputedPlaceholder() {\n\t\t\treturn this.hasPlaceholder ? this.placeholder : this.label\n\t\t},\n\n\t\tisValidLabel() {\n\t\t\tconst isValidLabel = this.label \|\| this.labelOutside\n\t\t\tif (!isValidLabel) {\n\t\t\t\tconsole.warn('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\t\t}\n\t\t\treturn isValidLabel\n\t\t},\n\n\t\tariaDescribedby() {\n\t\t\tconst ariaDescribedby = []\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\tariaDescribedby.push(`${this.inputName}-helper-text`)\n\t\t\t}\n\t\t\tif (this.$attrs['aria-describedby']) {\n\t\t\t\tariaDescribedby.push(this.$attrs['aria-describedby'])\n\t\t\t}\n\t\t\treturn ariaDescribedby.join(' ') \|\| null\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Focus the input element\n\t\t \n\t\t @public\n\t\t /\n\t\tfocus() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\n\t\t/\n\t\t Select all the text in the input\n\t\t \n\t\t @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.input.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tthis.$emit('update:value', event.target.value)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.textarea {\n\tposition: relative;\n\twidth: 100%;\n\tborder-radius: var(--border-radius-large);\n\tmargin-block-start: 6px; // for the label in active state\n\tresize: vertical;\n\n\t&__main-wrapper {\n\t\tposition: relative;\n\t}\n\n\t&--disabled {\n\t\topacity: 0.7;\n\t\tfilter: saturate(0.7);\n\t}\n\n\t&__input {\n\t\tmargin: 0;\n\t\tpadding-inline: 10px 6px; // align with label 8px margin label + 4px padding label - 2px border input\n\t\twidth: 100%;\n\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\tborder-radius: var(--border-radius-large);\n\n\t\tcursor: pointer;\n\n\t\t&:active:not([disabled]),\n\t\t&:hover:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\tborder-color: 2px solid var(--color-main-text) !important;\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t}\n\n\t\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t\t&:not(:focus,&--label-outside)::placeholder {\n\t\t\topacity: 0;\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\n\t\t&--success {\n\t\t\tborder-color: 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\n\t\t\t// Align label text color with border color (on hover / focus)\n\t\t\t&:focus + .textarea__label,\n\t\t\t&:hover:not(:placeholder-shown) + .textarea__label {\n\t\t\t\tcolor: var(--color-success-text);\n\t\t\t}\n\t\t}\n\n\t\t&--error {\n\t\t\tborder-color: var(--color-error) !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\n\t\t\t// Align label text color with border color (on hover / focus)\n\t\t\t&:focus + .textarea__label,\n\t\t\t&:hover:not(:placeholder-shown) + .textarea__label {\n\t\t\t\tcolor: var(--color-error-text);\n\t\t\t}\n\t\t}\n\n\t\t// Align label text color with border color (on hover / focus)\n\t\t&:not(&--success, &--error) {\n\t\t\t&:focus + .textarea__label,\n\t\t\t&:hover:not(:placeholder-shown) + .textarea__label {\n\t\t\t\tcolor: var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t}\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 12px 0;\n\t\t// fix height and line height to center label\n\t\theight: 17px;\n\t\tmax-width: fit-content;\n\t\tline-height: 1;\n\t\tinset-block-start: 12px;\n\t\tinset-inline: 0;\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\tinset-block-start: -6px;\n\t\tfont-size: 13px; // minimum allowed font size for accessibility\n\t\tbackground-color: var(--color-main-background);\n\t\theight: 14px;\n\t\tpadding-inline: 4px;\n\t\tmargin-inline-start: 8px;\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&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\n\t\t&--error {\n\t\t\tcolor: var(--color-error-text);\n\t\t}\n\n\t\t&--success {\n\t\t\tcolor: var(--color-success-text);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","AlertCircleOutline","Check","value","GenRandomId","isValidLabel","ariaDescribedby","event"],"mappings":";;AAoIA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,aAAAC,EAAA;AAAA,IACA,OAAAC,EAAA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,CAAA,QAAA,YAAA,cAAA,MAAA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,OAAA,MAAA,KAAA,OAAA,OAAA,KAAA,KAAA,OAAA,KAAA,KAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAA,UAAAC,EAAA,YAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,KAAA,gBAAA,MAAA,KAAA,gBAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AACA,aAAA,KAAA,iBAAA,KAAA,cAAA,KAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,YAAAC,IAAA,KAAA,SAAA,KAAA;AACA,aAAAA,KACA,QAAA,KAAA,mJAAA,GAEAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,YAAAC,IAAA,CAAA;AACA,aAAA,KAAA,WAAA,SAAA,KACAA,EAAA,KAAA,GAAA,KAAA,SAAA,cAAA,GAEA,KAAA,OAAA,kBAAA,KACAA,EAAA,KAAA,KAAA,OAAA,kBAAA,CAAA,GAEAA,EAAA,KAAA,GAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AACA,WAAA,MAAA,MAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AACA,WAAA,MAAA,MAAA,OAAA;AAAA,IACA;AAAA,IAEA,YAAAC,GAAA;AACA,WAAA,MAAA,gBAAAA,EAAA,OAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcTextArea.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-import "../assets/index-6899d75b.css";
+import "../assets/index-30ca9574.css";
 import { G as s } from "../chunks/GenRandomId-cb9ccebe.mjs";
 import { A as r } from "../chunks/AlertCircleOutline-b73838e0.mjs";
 import { C as l } from "../chunks/Check-2ea0a88a.mjs";
@@ -162,11 +162,11 @@ var d = function() {
   o,
   !1,
   null,
-  "44bb430a",
+  "c9071493",
   null,
   null
 );
-const m = u.exports;
+const f = u.exports;
 export {
-  m as default
+  f as default
 };

package/dist/Components/NcTextArea.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcTextArea.mjs","sources":["../../src/components/NcTextArea/NcTextArea.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2023 Richard Steinmetz <richard@steinmetz.cloud>\n -\n - @author Richard Steinmetz <richard@steinmetz.cloud>\n -\n - @license AGPL-3.0-or-later\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU General Public License as published by\n - the Free Software Foundation, either version 3 of the License, or\n - (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU General Public License for more details.\n -\n - You should have received a copy of the GNU General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n### Description\n\nThis component is a textarea field.\nIt extends and styles an HTMLTextAreaElement.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcTextArea label=\"Text area\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\thelper-text=\"This is a regular helper text.\" >\n\t\t</NcTextArea>\n\t\t<NcTextArea label=\"Success state\"\n\t\t\t:success=\"true\">\n\t\t</NcTextArea>\n\t\t<NcTextArea label=\"Error state\"\n\t\t\tplaceholder=\"Enter something valid\"\n\t\t\thelper-text=\"Helper texts will be styled accordingly.\"\n\t\t\t:error=\"true\">\n\t\t</NcTextArea>\n\t\t<NcTextArea label=\"Disabled\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextArea label=\"Disabled + Success\"\n\t\t\t:success=\"true\"\n\t\t\t:disabled=\"true\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">External label</label>\n\t\t\t<NcTextArea id=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Text area with external label\" />\n\t\t</div>\n\t\t<NcTextArea label=\"Custom size and no resize\"\n\t\t\tresize=\"none\"\n\t\t\trows=\"5\" />\n\t\t</NcTextArea>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\twidth: 100%;\n\talign-items: center;\n\tgap: 14px;\n\n\t> label {\n\t\tflex-shrink: 0;\n\t}\n}\n</style>\n```\n</docs>\n\n<template>\n\t<div class=\"textarea\" :class=\"{ 'textarea--disabled': disabled }\">\n\t\t<div class=\"textarea__main-wrapper\">\n\t\t\t<textarea v-bind=\"$attrs\"\n\t\t\t\t:id=\"computedId\"\n\t\t\t\tref=\"input\"\n\t\t\t\tclass=\"textarea__input\"\n\t\t\t\t:type=\"type\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:placeholder=\"computedPlaceholder\"\n\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\t:class=\"[inputClass,\n\t\t\t\t\t{\n\t\t\t\t\t\t'textarea__input--label-outside': labelOutside,\n\t\t\t\t\t\t'textarea__input--success': success,\n\t\t\t\t\t\t'textarea__input--error': error,\n\t\t\t\t\t}]\"\n\t\t\t\t:style=\"{ resize: resize }\"\n\t\t\t\t:value=\"value\"\n\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t@input=\"handleInput\" />\n\t\t\t<!-- Label -->\n\t\t\t<label v-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"textarea__label\"\n\t\t\t\t:for=\"computedId\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\t\t</div>\n\t\t<p v-if=\"helperText.length > 0\"\n\t\t\t:id=\"`${inputName}-helper-text`\"\n\t\t\tclass=\"textarea__helper-text-message\"\n\t\t\t:class=\"{\n\t\t\t\t'textarea__helper-text-message--error': error,\n\t\t\t\t'textarea__helper-text-message--success': success,\n\t\t\t}\">\n\t\t\t<Check v-if=\"success\" class=\"textarea__helper-text-message__icon\" :size=\"18\" />\n\t\t\t<AlertCircle v-else-if=\"error\" class=\"textarea__helper-text-message__icon\" :size=\"18\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\n\nexport default {\n\tname: 'NcTextArea',\n\n\tcomponents: {\n\t\tAlertCircle,\n\t\tCheck,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/*\n\t\t The value of the input field\n\t\t /\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/\n\t\t The input label, always provide one for accessibility purposes.\n\t\t * This will also be used as a placeholder unless the placeholder\n\t\t * prop is populated with a different string.\n\t\t /\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Pass in true if you want to use an external label. This is useful\n\t\t * if you need a label that looks different from the one provided by\n\t\t * this component\n\t\t /\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The placeholder of the input. This defaults as the string that's\n\t\t * passed into the label prop. In order to remove the placeholder,\n\t\t * pass in an empty string.\n\t\t /\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Toggles the success state of the component. Adds a checkmark icon.\n\t\t * this cannot be used together with canClear.\n\t\t /\n\t\tsuccess: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Toggles the error state of the component. Adds an error icon.\n\t\t * this cannot be used together with canClear.\n\t\t /\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Additional helper text message\n\t\t \n\t\t This will be displayed beneath the input field. In case the field is\n\t\t * also marked as having an error, the text will be displayed in red.\n\t\t /\n\t\thelperText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Disable the input field\n\t\t /\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Class to add to the input field.\n\t\t * Necessary to use NcInputField in the NcActionInput component.\n\t\t /\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t The resize CSS property sets whether an element is resizable, and if\n\t\t * so, in which directions.\n\t\t /\n\t\tresize: {\n\t\t\ttype: String,\n\t\t\tdefault: 'both',\n\t\t\tvalidator: (value) => ['both', 'vertical', 'horizontal', 'none'].includes(value),\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:value',\n\t],\n\n\tcomputed: {\n\t\tcomputedId() {\n\t\t\treturn this.$attrs.id && this.$attrs.id !== '' ? this.$attrs.id : this.inputName\n\t\t},\n\n\t\tinputName() {\n\t\t\treturn 'input' + GenRandomId()\n\t\t},\n\n\t\thasPlaceholder() {\n\t\t\treturn this.placeholder !== '' && this.placeholder !== undefined\n\t\t},\n\n\t\tcomputedPlaceholder() {\n\t\t\treturn this.hasPlaceholder ? this.placeholder : this.label\n\t\t},\n\n\t\tisValidLabel() {\n\t\t\tconst isValidLabel = this.label \|\| this.labelOutside\n\t\t\tif (!isValidLabel) {\n\t\t\t\tconsole.warn('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\t\t}\n\t\t\treturn isValidLabel\n\t\t},\n\n\t\tariaDescribedby() {\n\t\t\tconst ariaDescribedby = []\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\tariaDescribedby.push(`${this.inputName}-helper-text`)\n\t\t\t}\n\t\t\tif (this.$attrs['aria-describedby']) {\n\t\t\t\tariaDescribedby.push(this.$attrs['aria-describedby'])\n\t\t\t}\n\t\t\treturn ariaDescribedby.join(' ') \|\| null\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Focus the input element\n\t\t \n\t\t @public\n\t\t /\n\t\tfocus() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\n\t\t/\n\t\t Select all the text in the input\n\t\t \n\t\t @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.input.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tthis.$emit('update:value', event.target.value)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.textarea {\n\tposition: relative;\n\twidth: 100%;\n\tborder-radius: var(--border-radius-large);\n\tmargin-block-start: 6px; // for the label in active state\n\tresize: vertical;\n\n\t&__main-wrapper {\n\t\tposition: relative;\n\t}\n\n\t&--disabled {\n\t\topacity: 0.7;\n\t\tfilter: saturate(0.7);\n\t}\n\n\t&__input {\n\t\tmargin: 0;\n\t\tpadding-inline: 10px 6px; // align with label 8px margin label + 4px padding label - 2px border input\n\t\twidth: 100%;\n\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\tborder-radius: var(--border-radius-large);\n\n\t\tcursor: pointer;\n\n\t\t&:active:not([disabled]),\n\t\t&:hover:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\tborder-color: var(--color-primary-element);\n\t\t}\n\n\t\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t\t&:not(:focus,&--label-outside)::placeholder {\n\t\t\topacity: 0;\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\n\t\t&--success {\n\t\t\tborder-color: 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\n\t\t\t// Align label text color with border color (on hover / focus)\n\t\t\t&:focus + .textarea__label,\n\t\t\t&:hover:not(:placeholder-shown) + .textarea__label {\n\t\t\t\tcolor: var(--color-success-text);\n\t\t\t}\n\t\t}\n\n\t\t&--error {\n\t\t\tborder-color: var(--color-error) !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\n\t\t\t// Align label text color with border color (on hover / focus)\n\t\t\t&:focus + .textarea__label,\n\t\t\t&:hover:not(:placeholder-shown) + .textarea__label {\n\t\t\t\tcolor: var(--color-error-text);\n\t\t\t}\n\t\t}\n\n\t\t// Align label text color with border color (on hover / focus)\n\t\t&:not(&--success, &--error) {\n\t\t\t&:focus + .textarea__label,\n\t\t\t&:hover:not(:placeholder-shown) + .textarea__label {\n\t\t\t\tcolor: var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t}\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 12px 0;\n\t\t// fix height and line height to center label\n\t\theight: 17px;\n\t\tmax-width: fit-content;\n\t\tline-height: 1;\n\t\tinset-block-start: 12px;\n\t\tinset-inline: 0;\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\tinset-block-start: -6px;\n\t\tfont-size: 13px; // minimum allowed font size for accessibility\n\t\tbackground-color: var(--color-main-background);\n\t\theight: 14px;\n\t\tpadding-inline: 4px;\n\t\tmargin-inline-start: 8px;\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&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\n\t\t&--error {\n\t\t\tcolor: var(--color-error-text);\n\t\t}\n\n\t\t&--success {\n\t\t\tcolor: var(--color-success-text);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","AlertCircle","Check","value","GenRandomId","isValidLabel","ariaDescribedby","event"],"mappings":";;;;;AAoIA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,CAAA,QAAA,YAAA,cAAA,MAAA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,OAAA,MAAA,KAAA,OAAA,OAAA,KAAA,KAAA,OAAA,KAAA,KAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAA,UAAAC,EAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,KAAA,gBAAA,MAAA,KAAA,gBAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AACA,aAAA,KAAA,iBAAA,KAAA,cAAA,KAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,YAAAC,IAAA,KAAA,SAAA,KAAA;AACA,aAAAA,KACA,QAAA,KAAA,mJAAA,GAEAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,YAAAC,IAAA,CAAA;AACA,aAAA,KAAA,WAAA,SAAA,KACAA,EAAA,KAAA,GAAA,KAAA,SAAA,cAAA,GAEA,KAAA,OAAA,kBAAA,KACAA,EAAA,KAAA,KAAA,OAAA,kBAAA,CAAA,GAEAA,EAAA,KAAA,GAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AACA,WAAA,MAAA,MAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AACA,WAAA,MAAA,MAAA,OAAA;AAAA,IACA;AAAA,IAEA,YAAAC,GAAA;AACA,WAAA,MAAA,gBAAAA,EAAA,OAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcTextArea.mjs","sources":["../../src/components/NcTextArea/NcTextArea.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2023 Richard Steinmetz <richard@steinmetz.cloud>\n -\n - @author Richard Steinmetz <richard@steinmetz.cloud>\n -\n - @license AGPL-3.0-or-later\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU General Public License as published by\n - the Free Software Foundation, either version 3 of the License, or\n - (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU General Public License for more details.\n -\n - You should have received a copy of the GNU General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n### Description\n\nThis component is a textarea field.\nIt extends and styles an HTMLTextAreaElement.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcTextArea label=\"Text area\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\thelper-text=\"This is a regular helper text.\" >\n\t\t</NcTextArea>\n\t\t<NcTextArea label=\"Success state\"\n\t\t\t:success=\"true\">\n\t\t</NcTextArea>\n\t\t<NcTextArea label=\"Error state\"\n\t\t\tplaceholder=\"Enter something valid\"\n\t\t\thelper-text=\"Helper texts will be styled accordingly.\"\n\t\t\t:error=\"true\">\n\t\t</NcTextArea>\n\t\t<NcTextArea label=\"Disabled\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextArea label=\"Disabled + Success\"\n\t\t\t:success=\"true\"\n\t\t\t:disabled=\"true\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">External label</label>\n\t\t\t<NcTextArea id=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Text area with external label\" />\n\t\t</div>\n\t\t<NcTextArea label=\"Custom size and no resize\"\n\t\t\tresize=\"none\"\n\t\t\trows=\"5\" />\n\t\t</NcTextArea>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\twidth: 100%;\n\talign-items: center;\n\tgap: 14px;\n\n\t> label {\n\t\tflex-shrink: 0;\n\t}\n}\n</style>\n```\n</docs>\n\n<template>\n\t<div class=\"textarea\" :class=\"{ 'textarea--disabled': disabled }\">\n\t\t<div class=\"textarea__main-wrapper\">\n\t\t\t<textarea v-bind=\"$attrs\"\n\t\t\t\t:id=\"computedId\"\n\t\t\t\tref=\"input\"\n\t\t\t\tclass=\"textarea__input\"\n\t\t\t\t:type=\"type\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:placeholder=\"computedPlaceholder\"\n\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\t:class=\"[inputClass,\n\t\t\t\t\t{\n\t\t\t\t\t\t'textarea__input--label-outside': labelOutside,\n\t\t\t\t\t\t'textarea__input--success': success,\n\t\t\t\t\t\t'textarea__input--error': error,\n\t\t\t\t\t}]\"\n\t\t\t\t:style=\"{ resize: resize }\"\n\t\t\t\t:value=\"value\"\n\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t@input=\"handleInput\" />\n\t\t\t<!-- Label -->\n\t\t\t<label v-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"textarea__label\"\n\t\t\t\t:for=\"computedId\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\t\t</div>\n\t\t<p v-if=\"helperText.length > 0\"\n\t\t\t:id=\"`${inputName}-helper-text`\"\n\t\t\tclass=\"textarea__helper-text-message\"\n\t\t\t:class=\"{\n\t\t\t\t'textarea__helper-text-message--error': error,\n\t\t\t\t'textarea__helper-text-message--success': success,\n\t\t\t}\">\n\t\t\t<Check v-if=\"success\" class=\"textarea__helper-text-message__icon\" :size=\"18\" />\n\t\t\t<AlertCircle v-else-if=\"error\" class=\"textarea__helper-text-message__icon\" :size=\"18\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\n\nexport default {\n\tname: 'NcTextArea',\n\n\tcomponents: {\n\t\tAlertCircle,\n\t\tCheck,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/*\n\t\t The value of the input field\n\t\t /\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/\n\t\t The input label, always provide one for accessibility purposes.\n\t\t * This will also be used as a placeholder unless the placeholder\n\t\t * prop is populated with a different string.\n\t\t /\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Pass in true if you want to use an external label. This is useful\n\t\t * if you need a label that looks different from the one provided by\n\t\t * this component\n\t\t /\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The placeholder of the input. This defaults as the string that's\n\t\t * passed into the label prop. In order to remove the placeholder,\n\t\t * pass in an empty string.\n\t\t /\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Toggles the success state of the component. Adds a checkmark icon.\n\t\t * this cannot be used together with canClear.\n\t\t /\n\t\tsuccess: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Toggles the error state of the component. Adds an error icon.\n\t\t * this cannot be used together with canClear.\n\t\t /\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Additional helper text message\n\t\t \n\t\t This will be displayed beneath the input field. In case the field is\n\t\t * also marked as having an error, the text will be displayed in red.\n\t\t /\n\t\thelperText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Disable the input field\n\t\t /\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Class to add to the input field.\n\t\t * Necessary to use NcInputField in the NcActionInput component.\n\t\t /\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t The resize CSS property sets whether an element is resizable, and if\n\t\t * so, in which directions.\n\t\t /\n\t\tresize: {\n\t\t\ttype: String,\n\t\t\tdefault: 'both',\n\t\t\tvalidator: (value) => ['both', 'vertical', 'horizontal', 'none'].includes(value),\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:value',\n\t],\n\n\tcomputed: {\n\t\tcomputedId() {\n\t\t\treturn this.$attrs.id && this.$attrs.id !== '' ? this.$attrs.id : this.inputName\n\t\t},\n\n\t\tinputName() {\n\t\t\treturn 'input' + GenRandomId()\n\t\t},\n\n\t\thasPlaceholder() {\n\t\t\treturn this.placeholder !== '' && this.placeholder !== undefined\n\t\t},\n\n\t\tcomputedPlaceholder() {\n\t\t\treturn this.hasPlaceholder ? this.placeholder : this.label\n\t\t},\n\n\t\tisValidLabel() {\n\t\t\tconst isValidLabel = this.label \|\| this.labelOutside\n\t\t\tif (!isValidLabel) {\n\t\t\t\tconsole.warn('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\t\t}\n\t\t\treturn isValidLabel\n\t\t},\n\n\t\tariaDescribedby() {\n\t\t\tconst ariaDescribedby = []\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\tariaDescribedby.push(`${this.inputName}-helper-text`)\n\t\t\t}\n\t\t\tif (this.$attrs['aria-describedby']) {\n\t\t\t\tariaDescribedby.push(this.$attrs['aria-describedby'])\n\t\t\t}\n\t\t\treturn ariaDescribedby.join(' ') \|\| null\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Focus the input element\n\t\t \n\t\t @public\n\t\t /\n\t\tfocus() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\n\t\t/\n\t\t Select all the text in the input\n\t\t \n\t\t @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.input.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tthis.$emit('update:value', event.target.value)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.textarea {\n\tposition: relative;\n\twidth: 100%;\n\tborder-radius: var(--border-radius-large);\n\tmargin-block-start: 6px; // for the label in active state\n\tresize: vertical;\n\n\t&__main-wrapper {\n\t\tposition: relative;\n\t}\n\n\t&--disabled {\n\t\topacity: 0.7;\n\t\tfilter: saturate(0.7);\n\t}\n\n\t&__input {\n\t\tmargin: 0;\n\t\tpadding-inline: 10px 6px; // align with label 8px margin label + 4px padding label - 2px border input\n\t\twidth: 100%;\n\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\tborder-radius: var(--border-radius-large);\n\n\t\tcursor: pointer;\n\n\t\t&:active:not([disabled]),\n\t\t&:hover:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\tborder-color: 2px solid var(--color-main-text) !important;\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t}\n\n\t\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t\t&:not(:focus,&--label-outside)::placeholder {\n\t\t\topacity: 0;\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\n\t\t&--success {\n\t\t\tborder-color: 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\n\t\t\t// Align label text color with border color (on hover / focus)\n\t\t\t&:focus + .textarea__label,\n\t\t\t&:hover:not(:placeholder-shown) + .textarea__label {\n\t\t\t\tcolor: var(--color-success-text);\n\t\t\t}\n\t\t}\n\n\t\t&--error {\n\t\t\tborder-color: var(--color-error) !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\n\t\t\t// Align label text color with border color (on hover / focus)\n\t\t\t&:focus + .textarea__label,\n\t\t\t&:hover:not(:placeholder-shown) + .textarea__label {\n\t\t\t\tcolor: var(--color-error-text);\n\t\t\t}\n\t\t}\n\n\t\t// Align label text color with border color (on hover / focus)\n\t\t&:not(&--success, &--error) {\n\t\t\t&:focus + .textarea__label,\n\t\t\t&:hover:not(:placeholder-shown) + .textarea__label {\n\t\t\t\tcolor: var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t}\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 12px 0;\n\t\t// fix height and line height to center label\n\t\theight: 17px;\n\t\tmax-width: fit-content;\n\t\tline-height: 1;\n\t\tinset-block-start: 12px;\n\t\tinset-inline: 0;\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\tinset-block-start: -6px;\n\t\tfont-size: 13px; // minimum allowed font size for accessibility\n\t\tbackground-color: var(--color-main-background);\n\t\theight: 14px;\n\t\tpadding-inline: 4px;\n\t\tmargin-inline-start: 8px;\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&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\n\t\t&--error {\n\t\t\tcolor: var(--color-error-text);\n\t\t}\n\n\t\t&--success {\n\t\t\tcolor: var(--color-success-text);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","AlertCircle","Check","value","GenRandomId","isValidLabel","ariaDescribedby","event"],"mappings":";;;;;AAoIA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,CAAA,QAAA,YAAA,cAAA,MAAA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,OAAA,MAAA,KAAA,OAAA,OAAA,KAAA,KAAA,OAAA,KAAA,KAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAA,UAAAC,EAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,KAAA,gBAAA,MAAA,KAAA,gBAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AACA,aAAA,KAAA,iBAAA,KAAA,cAAA,KAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,YAAAC,IAAA,KAAA,SAAA,KAAA;AACA,aAAAA,KACA,QAAA,KAAA,mJAAA,GAEAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,YAAAC,IAAA,CAAA;AACA,aAAA,KAAA,WAAA,SAAA,KACAA,EAAA,KAAA,GAAA,KAAA,SAAA,cAAA,GAEA,KAAA,OAAA,kBAAA,KACAA,EAAA,KAAA,KAAA,OAAA,kBAAA,CAAA,GAEAA,EAAA,KAAA,GAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AACA,WAAA,MAAA,MAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AACA,WAAA,MAAA,MAAA,OAAA;AAAA,IACA;AAAA,IAEA,YAAAC,GAAA;AACA,WAAA,MAAA,gBAAAA,EAAA,OAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcTextField.cjs CHANGED Viewed

@@ -1,5 +1,5 @@
 "use strict";
-const i = require("./NcInputField.cjs"), o = require("../chunks/Close-98cb6f12.cjs"), a = require("../chunks/ArrowRight-7315f6c1.cjs"), s = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), r = require("../chunks/l10n-c3dbf018.cjs"), c = {
+const i = require("./NcInputField.cjs"), o = require("../chunks/Close-98cb6f12.cjs"), a = require("../chunks/ArrowRight-7315f6c1.cjs"), s = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), r = require("../chunks/l10n-e9ffbe5e.cjs"), c = {
   name: "UndoVariantIcon",
   emits: ["click"],
   props: {

package/dist/Components/NcTextField.mjs CHANGED Viewed

@@ -2,7 +2,7 @@ import i from "./NcInputField.mjs";
 import { C as l } from "../chunks/Close-271f72e2.mjs";
 import { A as a } from "../chunks/ArrowRight-74a9fcb2.mjs";
 import { n as s } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-import { t as r } from "../chunks/l10n-f51d3415.mjs";
+import { t as r } from "../chunks/l10n-ef44019c.mjs";
 const c = {
   name: "UndoVariantIcon",
   emits: ["click"],

package/dist/Components/NcTimezonePicker.cjs CHANGED Viewed

@@ -1,5 +1,5 @@
 "use strict";
-const N = require("../chunks/l10n-c3dbf018.cjs"), t = require("../chunks/logger-4998b668.cjs"), e = require("@nextcloud/calendar-js"), Z = require("../chunks/GenRandomId-c214d235.cjs"), Y = require("./NcSelect.cjs"), M = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+const N = require("../chunks/l10n-e9ffbe5e.cjs"), t = require("../chunks/logger-4998b668.cjs"), e = require("@nextcloud/calendar-js"), Z = require("../chunks/GenRandomId-c214d235.cjs"), Y = require("./NcSelect.cjs"), M = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
 /**
  * @copyright Copyright (c) 2019 Georg Ehrke
  *

package/dist/Components/NcTimezonePicker.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-import { t as N } from "../chunks/l10n-f51d3415.mjs";
+import { t as N } from "../chunks/l10n-ef44019c.mjs";
 import { l as t } from "../chunks/logger-3612e664.mjs";
 import { getTimezoneManager as e } from "@nextcloud/calendar-js";
 import { G as Z } from "../chunks/GenRandomId-cb9ccebe.mjs";

package/dist/Components/NcUserBubble.cjs CHANGED Viewed

@@ -1,5 +1,5 @@
 var y = require("../assets/index-c221fe05.css");
-const s = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), a = require("../chunks/index-ac31691c.cjs"), n = require("./NcPopover.cjs"), i = require("vue"), o = (t) => t && t.__esModule ? t : { default: t }, u = /* @__PURE__ */ o(i), l = {
+const s = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), a = require("../chunks/index-dc10fd2b.cjs"), n = require("./NcPopover.cjs"), i = require("vue"), o = (t) => t && t.__esModule ? t : { default: t }, u = /* @__PURE__ */ o(i), l = {
   name: "NcUserBubbleDiv"
 };
 var c = function() {

package/dist/Components/NcUserBubble.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import "../assets/index-c221fe05.css";
 import { n as s } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-import { N as a } from "../chunks/index-831524a1.mjs";
+import { N as a } from "../chunks/index-cea13a24.mjs";
 import n from "./NcPopover.mjs";
 import i from "vue";
 const o = {

package/dist/Composables/useIsFullscreen.cjs CHANGED Viewed

@@ -2,9 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const e = require("vue");
 /**
- * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+ * @copyright Copyright (c) 2023 Grigorii K. Shartsev <me@shgk.me>
  *
- * @author John Molakvoæ <skjnldsv@protonmail.com>
  * @author Grigorii K. Shartsev <me@shgk.me>
  *
  * @license AGPL-3.0-or-later