@nextcloud/vue 8.15.1 → 8.17.0

package/dist/Components/NcRichContenteditable.mjs

@@ -1,5 +1,5 @@
-import { N } from "../chunks/index-DbA2OZyf.mjs";
-import { N as N2, a } from "../chunks/NcRichContenteditable-DI-ZXpT5.mjs";
+import { N } from "../chunks/index-CMZdBcqP.mjs";
+import { N as N2, a } from "../chunks/NcRichContenteditable-CxlVyONK.mjs";
 export {
   N2 as NcAutoCompleteResult,
   N as NcMentionBubble,

package/dist/Components/NcRichText.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const NcRichText = require("../chunks/NcRichText-Cv3E2opm.cjs");
+const NcRichText = require("../chunks/NcRichText-C90luaNZ.cjs");
 const Functions_registerReference = require("../chunks/index-Dsgv-f-l.cjs");
-const referencePickerModal = require("../chunks/referencePickerModal-B2vY_tQ_.cjs");
+const referencePickerModal = require("../chunks/referencePickerModal-CT32j5pQ.cjs");
 exports.NcReferenceList = NcRichText.NcReferenceList;
 exports.NcRichText = NcRichText.NcRichText;
 exports.default = NcRichText.NcRichText;

package/dist/Components/NcRichText.mjs

@@ -1,7 +1,7 @@
-import { N as NcRichText } from "../chunks/NcRichText-S2tUM9cE.mjs";
-import { a } from "../chunks/NcRichText-S2tUM9cE.mjs";
+import { N as NcRichText } from "../chunks/NcRichText-BvfYsu9z.mjs";
+import { a } from "../chunks/NcRichText-BvfYsu9z.mjs";
 import { N, d, i, b, r, c, a as a2 } from "../chunks/index-BwyQ2N-M.mjs";
-import { e, f, N as N2, h, a as a3, g, b as b2, c as c2, d as d2, s } from "../chunks/referencePickerModal-LSsnfOpt.mjs";
+import { e, f, N as N2, h, a as a3, g, b as b2, c as c2, d as d2, s } from "../chunks/referencePickerModal-DW9uLKIZ.mjs";
 export {
   N as NcCustomPickerRenderResult,
   a as NcReferenceList,

package/dist/Components/NcSavingIndicatorIcon.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const NcSavingIndicatorIcon = require("../chunks/NcSavingIndicatorIcon-BzKAIkhk.cjs");
+const NcSavingIndicatorIcon = require("../chunks/NcSavingIndicatorIcon-Bu-zt4pR.cjs");
 module.exports = NcSavingIndicatorIcon.NcSavingIndicatorIcon;

package/dist/Components/NcSavingIndicatorIcon.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcSavingIndicatorIcon-Bhy7wcoT.mjs";
+import { N } from "../chunks/NcSavingIndicatorIcon-nv1147dk.mjs";
 export {
   N as default
 };

package/dist/Components/NcSelect.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const NcSelect = require("../chunks/NcSelect-CY9k8Npn.cjs");
+const NcSelect = require("../chunks/NcSelect-DMDRJq-5.cjs");
 module.exports = NcSelect.NcSelect;

package/dist/Components/NcSelect.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcSelect-SndWSyFc.mjs";
+import { N } from "../chunks/NcSelect-kmuffooC.mjs";
 export {
   N as default
 };

package/dist/Components/NcSelectTags.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const NcSelectTags = require("../chunks/NcSelectTags-BRDbJ3zM.cjs");
+const NcSelectTags = require("../chunks/NcSelectTags-DEHO1VM7.cjs");
 module.exports = NcSelectTags.NcSelectTags;

package/dist/Components/NcSelectTags.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcSelectTags-j1vMgnP_.mjs";
+import { N } from "../chunks/NcSelectTags-Bppbqmvs.mjs";
 export {
   N as default
 };

package/dist/Components/NcSettingsInputText.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const NcSettingsInputText = require("../chunks/NcSettingsInputText-CFEhlYqU.cjs");
+const NcSettingsInputText = require("../chunks/NcSettingsInputText-BBQoQrAG.cjs");
 module.exports = NcSettingsInputText.NcSettingsInputText;

package/dist/Components/NcSettingsInputText.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcSettingsInputText-Cw8sfqJD.mjs";
+import { N } from "../chunks/NcSettingsInputText-hAlIWx1R.mjs";
 export {
   N as default
 };

package/dist/Components/NcSettingsSection.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const NcSettingsSection = require("../chunks/NcSettingsSection-CC40z0BR.cjs");
+const NcSettingsSection = require("../chunks/NcSettingsSection-Dvcx-V7F.cjs");
 module.exports = NcSettingsSection.NcSettingsSection;

package/dist/Components/NcSettingsSection.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcSettingsSection-DR413pDz.mjs";
+import { N } from "../chunks/NcSettingsSection-BT-d36B9.mjs";
 export {
   N as default
 };

package/dist/Components/NcSettingsSelectGroup.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const NcSettingsSelectGroup = require("../chunks/NcSettingsSelectGroup-SzqRWbEs.cjs");
+const NcSettingsSelectGroup = require("../chunks/NcSettingsSelectGroup-BL8EH6GB.cjs");
 exports.NcSettingsSelectGroup = NcSettingsSelectGroup.NcSettingsSelectGroup;
 exports.default = NcSettingsSelectGroup.NcSettingsSelectGroup;

package/dist/Components/NcSettingsSelectGroup.mjs

@@ -1,4 +1,4 @@
-import { N as NcSettingsSelectGroup } from "../chunks/NcSettingsSelectGroup-SY4s3QMa.mjs";
+import { N as NcSettingsSelectGroup } from "../chunks/NcSettingsSelectGroup-OkPHjjsK.mjs";
 export {
   NcSettingsSelectGroup,
   NcSettingsSelectGroup as default

package/dist/Components/NcTextArea.cjs

@@ -1,9 +1,9 @@
 require('../assets/NcTextArea-D8bZi2fT.css');
 "use strict";
 const GenRandomId = require("../chunks/GenRandomId-BQDud3d4.cjs");
-const AlertCircleOutline = require("../chunks/AlertCircleOutline-Cb0gAiDw.cjs");
-const Check = require("../chunks/Check-DZc7keoa.cjs");
-const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-DbFIE4_M.cjs");
+const AlertCircleOutline = require("../chunks/AlertCircleOutline-DLtiWgZd.cjs");
+const Check = require("../chunks/Check-fCbe4vqy.cjs");
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const _sfc_main = {
   name: "NcTextArea",
   components: {
@@ -174,9 +174,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "4b6abfac",
-  null,
-  null
+  "4b6abfac"
 );
 const NcTextArea = __component__.exports;
 module.exports = NcTextArea;

package/dist/Components/NcTextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcTextArea.cjs","sources":["../../src/components/NcTextArea/NcTextArea.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\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\t\theight: calc(var(--default-clickable-area) * 2);\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: var(--border-width-input, 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-width: var(--border-width-input-focused, 2px);\n\t\t\tborder-color: var(--color-main-text);\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\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\t\t}\n\t}\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 12px 0;\n\t\tmax-width: fit-content;\n\t\tinset-block-start: 11px;\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: -10px;\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\tfont-size: 13px; // minimum allowed font size for accessibility\n\t\tfont-weight: 500;\n\t\tcolor: var(--color-main-text);\n\t\tbackground-color: var(--color-main-background);\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":["AlertCircle","Check","GenRandomId"],"mappings":";;;;;AAmHA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,aAAAA,mBAAA;AAAA,IACA,OAAAC,MAAA;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,CAAA,UAAA,CAAA,QAAA,YAAA,cAAA,MAAA,EAAA,SAAA,KAAA;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,YAAAA,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,YAAA,eAAA,KAAA,SAAA,KAAA;AACA,UAAA,CAAA,cAAA;AACA,gBAAA,KAAA,mJAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,YAAA,kBAAA,CAAA;AACA,UAAA,KAAA,WAAA,SAAA,GAAA;AACA,wBAAA,KAAA,GAAA,YAAA,WAAA,eAAA;AAAA,MACA;AACA,UAAA,KAAA,OAAA,kBAAA,GAAA;AACA,wBAAA,KAAA,KAAA,OAAA,kBAAA,CAAA;AAAA,MACA;AACA,aAAA,gBAAA,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,YAAA,OAAA;AACA,WAAA,MAAA,gBAAA,MAAA,OAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcTextArea.cjs","sources":["../../src/components/NcTextArea/NcTextArea.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\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\t\theight: calc(var(--default-clickable-area) * 2);\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: var(--border-width-input, 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-width: var(--border-width-input-focused, 2px);\n\t\t\tborder-color: var(--color-main-text);\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\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\t\t}\n\t}\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 12px 0;\n\t\tmax-width: fit-content;\n\t\tinset-block-start: 11px;\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: -10px;\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\tfont-size: 13px; // minimum allowed font size for accessibility\n\t\tfont-weight: 500;\n\t\tcolor: var(--color-main-text);\n\t\tbackground-color: var(--color-main-background);\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":["AlertCircle","Check","GenRandomId"],"mappings":";;;;;AAmHA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,aAAAA,mBAAA;AAAA,IACA,OAAAC,MAAA;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,CAAA,UAAA,CAAA,QAAA,YAAA,cAAA,MAAA,EAAA,SAAA,KAAA;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,YAAAA,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,YAAA,eAAA,KAAA,SAAA,KAAA;AACA,UAAA,CAAA,cAAA;AACA,gBAAA,KAAA,mJAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,YAAA,kBAAA,CAAA;AACA,UAAA,KAAA,WAAA,SAAA,GAAA;AACA,wBAAA,KAAA,GAAA,YAAA,WAAA,eAAA;AAAA,MACA;AACA,UAAA,KAAA,OAAA,kBAAA,GAAA;AACA,wBAAA,KAAA,KAAA,OAAA,kBAAA,CAAA;AAAA,MACA;AACA,aAAA,gBAAA,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,YAAA,OAAA;AACA,WAAA,MAAA,gBAAA,MAAA,OAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcTextArea.mjs

@@ -1,8 +1,8 @@
 import '../assets/NcTextArea-D8bZi2fT.css';
 import { G as GenRandomId } from "../chunks/GenRandomId-CMooMQt0.mjs";
-import { A as AlertCircle } from "../chunks/AlertCircleOutline-BzttElgq.mjs";
-import { C as Check } from "../chunks/Check-PawIlCwa.mjs";
-import { n as normalizeComponent } from "../chunks/_plugin-vue2_normalizer-D637Qkok.mjs";
+import { A as AlertCircle } from "../chunks/AlertCircleOutline-DU3QwU5Y.mjs";
+import { C as Check } from "../chunks/Check-XHAzUBkX.mjs";
+import { n as normalizeComponent } from "../chunks/_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const _sfc_main = {
   name: "NcTextArea",
   components: {
@@ -173,9 +173,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "4b6abfac",
-  null,
-  null
+  "4b6abfac"
 );
 const NcTextArea = __component__.exports;
 export {

package/dist/Components/NcTextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcTextArea.mjs","sources":["../../src/components/NcTextArea/NcTextArea.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\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\t\theight: calc(var(--default-clickable-area) * 2);\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: var(--border-width-input, 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-width: var(--border-width-input-focused, 2px);\n\t\t\tborder-color: var(--color-main-text);\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\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\t\t}\n\t}\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 12px 0;\n\t\tmax-width: fit-content;\n\t\tinset-block-start: 11px;\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: -10px;\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\tfont-size: 13px; // minimum allowed font size for accessibility\n\t\tfont-weight: 500;\n\t\tcolor: var(--color-main-text);\n\t\tbackground-color: var(--color-main-background);\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":[],"mappings":";;;;AAmHA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;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,CAAA,UAAA,CAAA,QAAA,YAAA,cAAA,MAAA,EAAA,SAAA,KAAA;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,UAAA,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,YAAA,eAAA,KAAA,SAAA,KAAA;AACA,UAAA,CAAA,cAAA;AACA,gBAAA,KAAA,mJAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,YAAA,kBAAA,CAAA;AACA,UAAA,KAAA,WAAA,SAAA,GAAA;AACA,wBAAA,KAAA,GAAA,YAAA,WAAA,eAAA;AAAA,MACA;AACA,UAAA,KAAA,OAAA,kBAAA,GAAA;AACA,wBAAA,KAAA,KAAA,OAAA,kBAAA,CAAA;AAAA,MACA;AACA,aAAA,gBAAA,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,YAAA,OAAA;AACA,WAAA,MAAA,gBAAA,MAAA,OAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcTextArea.mjs","sources":["../../src/components/NcTextArea/NcTextArea.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\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\t\theight: calc(var(--default-clickable-area) * 2);\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: var(--border-width-input, 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-width: var(--border-width-input-focused, 2px);\n\t\t\tborder-color: var(--color-main-text);\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\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\t\t}\n\t}\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 12px 0;\n\t\tmax-width: fit-content;\n\t\tinset-block-start: 11px;\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: -10px;\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\tfont-size: 13px; // minimum allowed font size for accessibility\n\t\tfont-weight: 500;\n\t\tcolor: var(--color-main-text);\n\t\tbackground-color: var(--color-main-background);\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":[],"mappings":";;;;AAmHA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;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,CAAA,UAAA,CAAA,QAAA,YAAA,cAAA,MAAA,EAAA,SAAA,KAAA;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,UAAA,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,YAAA,eAAA,KAAA,SAAA,KAAA;AACA,UAAA,CAAA,cAAA;AACA,gBAAA,KAAA,mJAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,YAAA,kBAAA,CAAA;AACA,UAAA,KAAA,WAAA,SAAA,GAAA;AACA,wBAAA,KAAA,GAAA,YAAA,WAAA,eAAA;AAAA,MACA;AACA,UAAA,KAAA,OAAA,kBAAA,GAAA;AACA,wBAAA,KAAA,KAAA,OAAA,kBAAA,CAAA;AAAA,MACA;AACA,aAAA,gBAAA,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,YAAA,OAAA;AACA,WAAA,MAAA,gBAAA,MAAA,OAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcTextField.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const NcTextField = require("../chunks/NcTextField-CY1UACDQ.cjs");
+const NcTextField = require("../chunks/NcTextField-Db1VpUnM.cjs");
 module.exports = NcTextField.NcTextField;

package/dist/Components/NcTextField.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcTextField-NPhch54I.mjs";
+import { N } from "../chunks/NcTextField-DWfgnCsS.mjs";
 export {
   N as default
 };

package/dist/Components/NcTimezonePicker.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const NcTimezonePicker = require("../chunks/NcTimezonePicker-B3wVH7l0.cjs");
+const NcTimezonePicker = require("../chunks/NcTimezonePicker-8R-hkchD.cjs");
 module.exports = NcTimezonePicker.NcTimezonePicker;

package/dist/Components/NcTimezonePicker.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcTimezonePicker-C-FQGZe0.mjs";
+import { N } from "../chunks/NcTimezonePicker-DdVLB1Bv.mjs";
 export {
   N as default
 };

package/dist/Components/NcUserBubble.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const NcUserBubble = require("../chunks/NcUserBubble-BI5uBaCY.cjs");
+const NcUserBubble = require("../chunks/NcUserBubble-3UqGE1ad.cjs");
 module.exports = NcUserBubble.NcUserBubble;

package/dist/Components/NcUserBubble.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcUserBubble-CzoM20ew.mjs";
+import { N } from "../chunks/NcUserBubble-CuLF1XDp.mjs";
 export {
   N as default
 };

package/dist/Components/NcUserStatusIcon.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const NcUserStatusIcon = require("../chunks/NcUserStatusIcon-OYRvKpLC.cjs");
+const NcUserStatusIcon = require("../chunks/NcUserStatusIcon-Cx9unttb.cjs");
 module.exports = NcUserStatusIcon.NcUserStatusIcon;

package/dist/Components/NcUserStatusIcon.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcUserStatusIcon-JAQFdYUq.mjs";
+import { N } from "../chunks/NcUserStatusIcon-CCCrTIIn.mjs";
 export {
   N as default
 };

package/dist/Components/NcVNodes.cjs

@@ -1,5 +1,5 @@
 "use strict";
-const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-DbFIE4_M.cjs");
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const _sfc_main = {
   name: "NcVNodes",
   props: {
@@ -30,8 +30,6 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  null,
-  null,
   null
 );
 const NcVNodes = __component__.exports;

package/dist/Components/NcVNodes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcVNodes.cjs","sources":["../../src/components/NcVNodes/NcVNodes.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nA util component to render a VNode or an array of VNodes from the prop or the default slot.\n\n### Render the given or generated VNodes\n\n```vue\n<template>\n\t<NcVNodes :vnodes=\"renderDiv()\" />\n</template>\n\n<script>\nexport default {\n\tmethods: {\n\t\trenderDiv() {\n\t\t\treturn this.$createElement('div', 'This div was created programmatically as a VNode')\n\t\t},\n\t}\n}\n</script>\n```\n\n### Render content in a conditional wrapper\n\n```vue\n<template>\n\t<div>\n\t\t<p>\n\t\t\t<NcCheckboxRadioSwitch :checked.sync=\"shouldRenderNcNoteCard\">Render text inside \"NcNoteCard\"</NcCheckboxRadioSwitch>\n\t\t</p>\n\t\t<component :is=\"shouldRenderNcNoteCard ? 'NcNoteCard' : 'NcVNodes'\">\n\t\t\t<p>This content is rendered {{ shouldRenderNcNoteCard ? 'with' : 'without' }} a \"NcNoteCard\" wrapper</p>\n\t\t</component>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshouldRenderNcNoteCard: true,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<script>\nexport default {\n\tname: 'NcVNodes',\n\tprops: {\n\t\t/**\n\t\t * The vnodes to render\n\t\t */\n\t\tvnodes: {\n\t\t\ttype: [Array, Object],\n\t\t\tdefault: null,\n\t\t},\n\t},\n\t/**\n\t * The render function to display the component\n\t *\n\t * @param {Function} h The function to create VNodes\n\t * @return {object} The created VNode\n\t */\n\trender(h) {\n\t\t// eslint-disable-next-line jsdoc/check-tag-names\n\t\t/** @slot Directly rendered content */\n\t\treturn this.vnodes || this.$slots?.default || this.$scopedSlots?.default?.()\n\t},\n}\n</script>\n"],"names":[],"mappings":";;AAqDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,QAAA;AAAA,MACA,MAAA,CAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAA,GAAA;;AAGA,WAAA,KAAA,YAAA,UAAA,WAAA,mBAAA,cAAA,gBAAA,iBAAA,mBAAA,YAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcVNodes.cjs","sources":["../../src/components/NcVNodes/NcVNodes.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nA util component to render a VNode or an array of VNodes from the prop or the default slot.\n\n### Render the given or generated VNodes\n\n```vue\n<template>\n\t<NcVNodes :vnodes=\"renderDiv()\" />\n</template>\n\n<script>\nexport default {\n\tmethods: {\n\t\trenderDiv() {\n\t\t\treturn this.$createElement('div', 'This div was created programmatically as a VNode')\n\t\t},\n\t}\n}\n</script>\n```\n\n### Render content in a conditional wrapper\n\n```vue\n<template>\n\t<div>\n\t\t<p>\n\t\t\t<NcCheckboxRadioSwitch :checked.sync=\"shouldRenderNcNoteCard\">Render text inside \"NcNoteCard\"</NcCheckboxRadioSwitch>\n\t\t</p>\n\t\t<component :is=\"shouldRenderNcNoteCard ? 'NcNoteCard' : 'NcVNodes'\">\n\t\t\t<p>This content is rendered {{ shouldRenderNcNoteCard ? 'with' : 'without' }} a \"NcNoteCard\" wrapper</p>\n\t\t</component>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshouldRenderNcNoteCard: true,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<script>\nexport default {\n\tname: 'NcVNodes',\n\tprops: {\n\t\t/**\n\t\t * The vnodes to render\n\t\t */\n\t\tvnodes: {\n\t\t\ttype: [Array, Object],\n\t\t\tdefault: null,\n\t\t},\n\t},\n\t/**\n\t * The render function to display the component\n\t *\n\t * @param {Function} h The function to create VNodes\n\t * @return {object} The created VNode\n\t */\n\trender(h) {\n\t\t// eslint-disable-next-line jsdoc/check-tag-names\n\t\t/** @slot Directly rendered content */\n\t\treturn this.vnodes || this.$slots?.default || this.$scopedSlots?.default?.()\n\t},\n}\n</script>\n"],"names":[],"mappings":";;AAqDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,QAAA;AAAA,MACA,MAAA,CAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAA,GAAA;;AAGA,WAAA,KAAA,YAAA,UAAA,WAAA,mBAAA,cAAA,gBAAA,iBAAA,mBAAA,YAAA;AAAA,EACA;AACA;;;;;;;;;;;;;"}

package/dist/Components/NcVNodes.mjs

@@ -1,4 +1,4 @@
-import { n as normalizeComponent } from "../chunks/_plugin-vue2_normalizer-D637Qkok.mjs";
+import { n as normalizeComponent } from "../chunks/_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const _sfc_main = {
   name: "NcVNodes",
   props: {
@@ -29,8 +29,6 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  null,
-  null,
   null
 );
 const NcVNodes = __component__.exports;

package/dist/Components/NcVNodes.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcVNodes.mjs","sources":["../../src/components/NcVNodes/NcVNodes.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nA util component to render a VNode or an array of VNodes from the prop or the default slot.\n\n### Render the given or generated VNodes\n\n```vue\n<template>\n\t<NcVNodes :vnodes=\"renderDiv()\" />\n</template>\n\n<script>\nexport default {\n\tmethods: {\n\t\trenderDiv() {\n\t\t\treturn this.$createElement('div', 'This div was created programmatically as a VNode')\n\t\t},\n\t}\n}\n</script>\n```\n\n### Render content in a conditional wrapper\n\n```vue\n<template>\n\t<div>\n\t\t<p>\n\t\t\t<NcCheckboxRadioSwitch :checked.sync=\"shouldRenderNcNoteCard\">Render text inside \"NcNoteCard\"</NcCheckboxRadioSwitch>\n\t\t</p>\n\t\t<component :is=\"shouldRenderNcNoteCard ? 'NcNoteCard' : 'NcVNodes'\">\n\t\t\t<p>This content is rendered {{ shouldRenderNcNoteCard ? 'with' : 'without' }} a \"NcNoteCard\" wrapper</p>\n\t\t</component>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshouldRenderNcNoteCard: true,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<script>\nexport default {\n\tname: 'NcVNodes',\n\tprops: {\n\t\t/**\n\t\t * The vnodes to render\n\t\t */\n\t\tvnodes: {\n\t\t\ttype: [Array, Object],\n\t\t\tdefault: null,\n\t\t},\n\t},\n\t/**\n\t * The render function to display the component\n\t *\n\t * @param {Function} h The function to create VNodes\n\t * @return {object} The created VNode\n\t */\n\trender(h) {\n\t\t// eslint-disable-next-line jsdoc/check-tag-names\n\t\t/** @slot Directly rendered content */\n\t\treturn this.vnodes || this.$slots?.default || this.$scopedSlots?.default?.()\n\t},\n}\n</script>\n"],"names":[],"mappings":";AAqDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,QAAA;AAAA,MACA,MAAA,CAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAA,GAAA;;AAGA,WAAA,KAAA,YAAA,UAAA,WAAA,mBAAA,cAAA,gBAAA,iBAAA,mBAAA,YAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcVNodes.mjs","sources":["../../src/components/NcVNodes/NcVNodes.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nA util component to render a VNode or an array of VNodes from the prop or the default slot.\n\n### Render the given or generated VNodes\n\n```vue\n<template>\n\t<NcVNodes :vnodes=\"renderDiv()\" />\n</template>\n\n<script>\nexport default {\n\tmethods: {\n\t\trenderDiv() {\n\t\t\treturn this.$createElement('div', 'This div was created programmatically as a VNode')\n\t\t},\n\t}\n}\n</script>\n```\n\n### Render content in a conditional wrapper\n\n```vue\n<template>\n\t<div>\n\t\t<p>\n\t\t\t<NcCheckboxRadioSwitch :checked.sync=\"shouldRenderNcNoteCard\">Render text inside \"NcNoteCard\"</NcCheckboxRadioSwitch>\n\t\t</p>\n\t\t<component :is=\"shouldRenderNcNoteCard ? 'NcNoteCard' : 'NcVNodes'\">\n\t\t\t<p>This content is rendered {{ shouldRenderNcNoteCard ? 'with' : 'without' }} a \"NcNoteCard\" wrapper</p>\n\t\t</component>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshouldRenderNcNoteCard: true,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<script>\nexport default {\n\tname: 'NcVNodes',\n\tprops: {\n\t\t/**\n\t\t * The vnodes to render\n\t\t */\n\t\tvnodes: {\n\t\t\ttype: [Array, Object],\n\t\t\tdefault: null,\n\t\t},\n\t},\n\t/**\n\t * The render function to display the component\n\t *\n\t * @param {Function} h The function to create VNodes\n\t * @return {object} The created VNode\n\t */\n\trender(h) {\n\t\t// eslint-disable-next-line jsdoc/check-tag-names\n\t\t/** @slot Directly rendered content */\n\t\treturn this.vnodes || this.$slots?.default || this.$scopedSlots?.default?.()\n\t},\n}\n</script>\n"],"names":[],"mappings":";AAqDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,QAAA;AAAA,MACA,MAAA,CAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAA,GAAA;;AAGA,WAAA,KAAA,YAAA,UAAA,WAAA,mBAAA,cAAA,gBAAA,iBAAA,mBAAA,YAAA;AAAA,EACA;AACA;;;;;;;;;;;;"}

package/dist/Composables/useHotKey.cjs

@@ -0,0 +1,52 @@
+"use strict";
+var _a, _b, _c;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const core = require("@vueuse/core");
+const disableKeyboardShortcuts = (_c = (_b = (_a = window.OCP) == null ? void 0 : _a.Accessibility) == null ? void 0 : _b.disableKeyboardShortcuts) == null ? void 0 : _c.call(_b);
+function shouldIgnoreEvent(event) {
+  var _a2;
+  if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement || event.target instanceof HTMLSelectElement || ((_a2 = event.target) == null ? void 0 : _a2.isContentEditable)) {
+    return true;
+  }
+  return document.getElementsByClassName("modal-mask").length !== 0;
+}
+const eventHandler = (callback, options) => (event) => {
+  if (!!options.ctrl !== event.ctrlKey) {
+    return;
+  } else if (!!options.alt !== event.altKey) {
+    return;
+  } else if (!!options.shift !== event.shiftKey) {
+    return;
+  } else if (shouldIgnoreEvent(event)) {
+    return;
+  }
+  if (options.prevent) {
+    event.preventDefault();
+  }
+  if (options.stop) {
+    event.stopPropagation();
+  }
+  callback(event);
+};
+function useHotKey(key, callback = () => {
+}, options = {}) {
+  if (disableKeyboardShortcuts) {
+    return () => {
+    };
+  }
+  const stopKeyDown = core.onKeyStroke(key, eventHandler(callback, options), {
+    eventName: "keydown",
+    dedupe: true,
+    passive: !options.prevent
+  });
+  const stopKeyUp = options.push ? core.onKeyStroke(key, eventHandler(callback, options), {
+    eventName: "keyup",
+    passive: !options.prevent
+  }) : () => {
+  };
+  return () => {
+    stopKeyDown();
+    stopKeyUp();
+  };
+}
+exports.useHotKey = useHotKey;

package/dist/Composables/useHotKey.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHotKey.cjs","sources":["../../src/composables/useHotKey/index.js"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { onKeyStroke } from '@vueuse/core'\n\nconst disableKeyboardShortcuts = window.OCP?.Accessibility?.disableKeyboardShortcuts?.()\n\n/**\n * Check if event target (active element) is editable (allows input from keyboard) or NcModal is open\n * If true, a hot key should not trigger the callback\n * TODO discuss if we should abort on another interactive elements (button, a, e.t.c)\n *\n * @param {KeyboardEvent} event keyboard event\n * @return {boolean} whether it should prevent callback\n */\nfunction shouldIgnoreEvent(event) {\n\tif (event.target instanceof HTMLInputElement\n\t\t|| event.target instanceof HTMLTextAreaElement\n\t\t|| event.target instanceof HTMLSelectElement\n\t\t|| event.target?.isContentEditable) {\n\t\treturn true\n\t}\n\t/** Abort if any modal/dialog opened */\n\treturn document.getElementsByClassName('modal-mask').length !== 0\n}\n\nconst eventHandler = (callback, options) => (event) => {\n\tif (!!options.ctrl !== event.ctrlKey) {\n\t\t// Ctrl is required and not pressed, or the opposite\n\t\treturn\n\t} else if (!!options.alt !== event.altKey) {\n\t\t// Alt is required and not pressed, or the opposite\n\t\treturn\n\t} else if (!!options.shift !== event.shiftKey) {\n\t\t// Shift is required and not pressed, or the opposite\n\t\treturn\n\t} else if (shouldIgnoreEvent(event)) {\n\t\t// Keyboard shortcuts are disabled, because active element assumes input\n\t\treturn\n\t}\n\n\tif (options.prevent) {\n\t\tevent.preventDefault()\n\t}\n\tif (options.stop) {\n\t\tevent.stopPropagation()\n\t}\n\tcallback(event)\n}\n\n/**\n * @param {string} key - keyboard key or keys to listen to\n * @param {Function} callback - callback function\n * @param {object} options - composable options\n * @see docs/composables/usekeystroke.md\n */\nexport function useHotKey(key, callback = () => {}, options = {}) {\n\tif (disableKeyboardShortcuts) {\n\t\t// Keyboard shortcuts are disabled\n\t\treturn () => {}\n\t}\n\n\tconst stopKeyDown = onKeyStroke(key, eventHandler(callback, options), {\n\t\teventName: 'keydown',\n\t\tdedupe: true,\n\t\tpassive: !options.prevent,\n\t})\n\n\tconst stopKeyUp = options.push\n\t\t? onKeyStroke(key, eventHandler(callback, options), {\n\t\t\teventName: 'keyup',\n\t\t\tpassive: !options.prevent,\n\t\t})\n\t\t: () => {}\n\n\treturn () => {\n\t\tstopKeyDown()\n\t\tstopKeyUp()\n\t}\n}\n"],"names":["_a","onKeyStroke"],"mappings":";;;;AAMA,MAAM,4BAA2B,wBAAO,QAAP,mBAAY,kBAAZ,mBAA2B,6BAA3B;AAUjC,SAAS,kBAAkB,OAAO;;AACjC,MAAI,MAAM,kBAAkB,oBACxB,MAAM,kBAAkB,uBACxB,MAAM,kBAAkB,uBACxBA,MAAA,MAAM,WAAN,gBAAAA,IAAc,oBAAmB;AACpC,WAAO;AAAA,EACP;AAED,SAAO,SAAS,uBAAuB,YAAY,EAAE,WAAW;AACjE;AAEA,MAAM,eAAe,CAAC,UAAU,YAAY,CAAC,UAAU;AACtD,MAAI,CAAC,CAAC,QAAQ,SAAS,MAAM,SAAS;AAErC;AAAA,EACA,WAAU,CAAC,CAAC,QAAQ,QAAQ,MAAM,QAAQ;AAE1C;AAAA,EACA,WAAU,CAAC,CAAC,QAAQ,UAAU,MAAM,UAAU;AAE9C;AAAA,EACF,WAAY,kBAAkB,KAAK,GAAG;AAEpC;AAAA,EACA;AAED,MAAI,QAAQ,SAAS;AACpB,UAAM,eAAgB;AAAA,EACtB;AACD,MAAI,QAAQ,MAAM;AACjB,UAAM,gBAAiB;AAAA,EACvB;AACD,WAAS,KAAK;AACf;AAQO,SAAS,UAAU,KAAK,WAAW,MAAM;AAAA,GAAI,UAAU,CAAA,GAAI;AACjE,MAAI,0BAA0B;AAE7B,WAAO,MAAM;AAAA,IAAE;AAAA,EACf;AAED,QAAM,cAAcC,KAAAA,YAAY,KAAK,aAAa,UAAU,OAAO,GAAG;AAAA,IACrE,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS,CAAC,QAAQ;AAAA,EACpB,CAAE;AAED,QAAM,YAAY,QAAQ,OACvBA,KAAAA,YAAY,KAAK,aAAa,UAAU,OAAO,GAAG;AAAA,IACnD,WAAW;AAAA,IACX,SAAS,CAAC,QAAQ;AAAA,EACrB,CAAG,IACC,MAAM;AAAA,EAAE;AAEX,SAAO,MAAM;AACZ,gBAAa;AACb,cAAW;AAAA,EACX;AACF;;"}

package/dist/Composables/useHotKey.mjs

@@ -0,0 +1,52 @@
+var _a, _b, _c;
+import { onKeyStroke } from "@vueuse/core";
+const disableKeyboardShortcuts = (_c = (_b = (_a = window.OCP) == null ? void 0 : _a.Accessibility) == null ? void 0 : _b.disableKeyboardShortcuts) == null ? void 0 : _c.call(_b);
+function shouldIgnoreEvent(event) {
+  var _a2;
+  if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement || event.target instanceof HTMLSelectElement || ((_a2 = event.target) == null ? void 0 : _a2.isContentEditable)) {
+    return true;
+  }
+  return document.getElementsByClassName("modal-mask").length !== 0;
+}
+const eventHandler = (callback, options) => (event) => {
+  if (!!options.ctrl !== event.ctrlKey) {
+    return;
+  } else if (!!options.alt !== event.altKey) {
+    return;
+  } else if (!!options.shift !== event.shiftKey) {
+    return;
+  } else if (shouldIgnoreEvent(event)) {
+    return;
+  }
+  if (options.prevent) {
+    event.preventDefault();
+  }
+  if (options.stop) {
+    event.stopPropagation();
+  }
+  callback(event);
+};
+function useHotKey(key, callback = () => {
+}, options = {}) {
+  if (disableKeyboardShortcuts) {
+    return () => {
+    };
+  }
+  const stopKeyDown = onKeyStroke(key, eventHandler(callback, options), {
+    eventName: "keydown",
+    dedupe: true,
+    passive: !options.prevent
+  });
+  const stopKeyUp = options.push ? onKeyStroke(key, eventHandler(callback, options), {
+    eventName: "keyup",
+    passive: !options.prevent
+  }) : () => {
+  };
+  return () => {
+    stopKeyDown();
+    stopKeyUp();
+  };
+}
+export {
+  useHotKey
+};

package/dist/Composables/useHotKey.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHotKey.mjs","sources":["../../src/composables/useHotKey/index.js"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { onKeyStroke } from '@vueuse/core'\n\nconst disableKeyboardShortcuts = window.OCP?.Accessibility?.disableKeyboardShortcuts?.()\n\n/**\n * Check if event target (active element) is editable (allows input from keyboard) or NcModal is open\n * If true, a hot key should not trigger the callback\n * TODO discuss if we should abort on another interactive elements (button, a, e.t.c)\n *\n * @param {KeyboardEvent} event keyboard event\n * @return {boolean} whether it should prevent callback\n */\nfunction shouldIgnoreEvent(event) {\n\tif (event.target instanceof HTMLInputElement\n\t\t|| event.target instanceof HTMLTextAreaElement\n\t\t|| event.target instanceof HTMLSelectElement\n\t\t|| event.target?.isContentEditable) {\n\t\treturn true\n\t}\n\t/** Abort if any modal/dialog opened */\n\treturn document.getElementsByClassName('modal-mask').length !== 0\n}\n\nconst eventHandler = (callback, options) => (event) => {\n\tif (!!options.ctrl !== event.ctrlKey) {\n\t\t// Ctrl is required and not pressed, or the opposite\n\t\treturn\n\t} else if (!!options.alt !== event.altKey) {\n\t\t// Alt is required and not pressed, or the opposite\n\t\treturn\n\t} else if (!!options.shift !== event.shiftKey) {\n\t\t// Shift is required and not pressed, or the opposite\n\t\treturn\n\t} else if (shouldIgnoreEvent(event)) {\n\t\t// Keyboard shortcuts are disabled, because active element assumes input\n\t\treturn\n\t}\n\n\tif (options.prevent) {\n\t\tevent.preventDefault()\n\t}\n\tif (options.stop) {\n\t\tevent.stopPropagation()\n\t}\n\tcallback(event)\n}\n\n/**\n * @param {string} key - keyboard key or keys to listen to\n * @param {Function} callback - callback function\n * @param {object} options - composable options\n * @see docs/composables/usekeystroke.md\n */\nexport function useHotKey(key, callback = () => {}, options = {}) {\n\tif (disableKeyboardShortcuts) {\n\t\t// Keyboard shortcuts are disabled\n\t\treturn () => {}\n\t}\n\n\tconst stopKeyDown = onKeyStroke(key, eventHandler(callback, options), {\n\t\teventName: 'keydown',\n\t\tdedupe: true,\n\t\tpassive: !options.prevent,\n\t})\n\n\tconst stopKeyUp = options.push\n\t\t? onKeyStroke(key, eventHandler(callback, options), {\n\t\t\teventName: 'keyup',\n\t\t\tpassive: !options.prevent,\n\t\t})\n\t\t: () => {}\n\n\treturn () => {\n\t\tstopKeyDown()\n\t\tstopKeyUp()\n\t}\n}\n"],"names":["_a"],"mappings":";;AAMA,MAAM,4BAA2B,wBAAO,QAAP,mBAAY,kBAAZ,mBAA2B,6BAA3B;AAUjC,SAAS,kBAAkB,OAAO;;AACjC,MAAI,MAAM,kBAAkB,oBACxB,MAAM,kBAAkB,uBACxB,MAAM,kBAAkB,uBACxBA,MAAA,MAAM,WAAN,gBAAAA,IAAc,oBAAmB;AACpC,WAAO;AAAA,EACP;AAED,SAAO,SAAS,uBAAuB,YAAY,EAAE,WAAW;AACjE;AAEA,MAAM,eAAe,CAAC,UAAU,YAAY,CAAC,UAAU;AACtD,MAAI,CAAC,CAAC,QAAQ,SAAS,MAAM,SAAS;AAErC;AAAA,EACA,WAAU,CAAC,CAAC,QAAQ,QAAQ,MAAM,QAAQ;AAE1C;AAAA,EACA,WAAU,CAAC,CAAC,QAAQ,UAAU,MAAM,UAAU;AAE9C;AAAA,EACF,WAAY,kBAAkB,KAAK,GAAG;AAEpC;AAAA,EACA;AAED,MAAI,QAAQ,SAAS;AACpB,UAAM,eAAgB;AAAA,EACtB;AACD,MAAI,QAAQ,MAAM;AACjB,UAAM,gBAAiB;AAAA,EACvB;AACD,WAAS,KAAK;AACf;AAQO,SAAS,UAAU,KAAK,WAAW,MAAM;AAAA,GAAI,UAAU,CAAA,GAAI;AACjE,MAAI,0BAA0B;AAE7B,WAAO,MAAM;AAAA,IAAE;AAAA,EACf;AAED,QAAM,cAAc,YAAY,KAAK,aAAa,UAAU,OAAO,GAAG;AAAA,IACrE,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS,CAAC,QAAQ;AAAA,EACpB,CAAE;AAED,QAAM,YAAY,QAAQ,OACvB,YAAY,KAAK,aAAa,UAAU,OAAO,GAAG;AAAA,IACnD,WAAW;AAAA,IACX,SAAS,CAAC,QAAQ;AAAA,EACrB,CAAG,IACC,MAAM;AAAA,EAAE;AAEX,SAAO,MAAM;AACZ,gBAAa;AACb,cAAW;AAAA,EACX;AACF;"}

package/dist/Functions/reference.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Functions_registerReference = require("../chunks/index-Dsgv-f-l.cjs");
-const referencePickerModal = require("../chunks/referencePickerModal-B2vY_tQ_.cjs");
+const referencePickerModal = require("../chunks/referencePickerModal-CT32j5pQ.cjs");
 exports.NcCustomPickerRenderResult = Functions_registerReference.NcCustomPickerRenderResult;
 exports.hasInteractiveView = Functions_registerReference.hasInteractiveView;
 exports.isCustomPickerElementRegistered = Functions_registerReference.isCustomPickerElementRegistered;

package/dist/Functions/reference.mjs

@@ -1,5 +1,5 @@
 import { N, h, d, i, b, r, c, a } from "../chunks/index-BwyQ2N-M.mjs";
-import { a as a2, g, b as b2, c as c2, d as d2, s } from "../chunks/referencePickerModal-LSsnfOpt.mjs";
+import { a as a2, g, b as b2, c as c2, d as d2, s } from "../chunks/referencePickerModal-DW9uLKIZ.mjs";
 export {
   N as NcCustomPickerRenderResult,
   a2 as anyLinkProviderId,

package/dist/Functions/usernameToColor.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const usernameToColor = require("../chunks/usernameToColor-BAqfFlwH.cjs");
+const usernameToColor = require("../chunks/usernameToColor-CpdyuYfd.cjs");
 module.exports = usernameToColor.usernameToColor;

package/dist/Functions/usernameToColor.mjs

@@ -1,4 +1,4 @@
-import { u } from "../chunks/usernameToColor-o6GbhQWU.mjs";
+import { u } from "../chunks/usernameToColor-DivFGAn4.mjs";
 export {
   u as default
 };

package/dist/Mixins/richEditor.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Mixins_richEditor = require("../chunks/index-oIpl1nrk.cjs");
+const Mixins_richEditor = require("../chunks/index-CC4ahXvG.cjs");
 require("../chunks/Linkify-yeOn5L6T.cjs");
 require("escape-html");
 require("striptags");

package/dist/Mixins/richEditor.mjs

@@ -1,4 +1,4 @@
-import { U, a, r } from "../chunks/index-DbA2OZyf.mjs";
+import { U, a, r } from "../chunks/index-CMZdBcqP.mjs";
 import "../chunks/Linkify-BtgR-dXX.mjs";
 import "escape-html";
 import "striptags";