@nextcloud/vue 8.6.0 → 9.0.0-alpha.1

package/dist/chunks/NcTextArea-QIkvyzz7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcTextArea-QIkvyzz7.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 v-model=\"text\"\n\t\t\tlabel=\"Text area\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\thelper-text=\"This is a regular helper text.\" />\n\t\t<NcTextArea label=\"Success state\"\n\t\t\t:success=\"true\" />\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 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</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'This is text.',\n\t\t}\n\t},\n}\n</script>\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=\"modelValue\"\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\tmodelValue: {\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:modelValue',\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:modelValue', 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\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":["_sfc_main","value","isValidLabel","ariaDescribedby","event","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","vue","$props","$options","_ctx","_cache","args"],"mappings":";qNA0IAA,IAAA;AAAA,EACC,MAAA;AAAA;;;;EAOA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;IAcC,OAAA;AAAA;MAEC,SAAA;AAAA;;;;;;;;;;;;;;;;;MAoBA,SAAA;AAAA;;;;;IAOD,SAAA;AAAA;;;;;;;IASA,OAAA;AAAA;;;;;;;;;;;;;;;;IAmBA,UAAA;AAAA;;;;;;;;MAUC,MAAA,CAAA,QAAA,MAAA;AAAA;;;;;;IAQD,QAAA;AAAA;MAEC,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,CAAA,QAAA,YAAA,cAAA,MAAA,EAAA,SAAAA,CAAA;AAAA;;EAIF,OAAA;AAAA,IACC;AAAA;EAGD,UAAA;AAAA;AAEE,aAAA,KAAA,OAAA,MAAA,KAAA,OAAA,OAAA,KAAA,KAAA,OAAA,KAAA,KAAA;AAAA;;;;IAOD,iBAAA;;;IAIA,sBAAA;;;IAIA,eAAA;;AAEC,aAAAC,KACC,QAAA,KAAA,mJAAA,GAEDA;AAAA;IAGD,kBAAA;;8FAKC,KAAA,OAAA,kBAAA,8CAGAC,EAAA,KAAA,GAAA,KAAA;AAAA;;EAIF,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMC,QAAA;;;;;;;;IASA,SAAA;;;IAIA,YAAAC,GAAA;;;;AAIF,GAxNOC,IAAA,EAAA,OAAA,yBAAA,GA5FPC,IAAA,CAAA,MAAA,QAAA,YAAA,eAAA,oBAAA,OAAA,GAAAC,IAAA,CAAA,KAAA,GAAAC,IAAA,CAAA,IAAA;;;;IA2FM,OAAAC,EAAA,eAAA,CAAA,YAAA,EAAA,sBAAAC,EAAA,SAAA,CAAA,CAAA;AAAA;IACJD,EAAA,mBAAA,OAAAJ,GAAA;AAAA;QAEG,IAAAM,EAAA;AAAA,QACD,KAAA;AAAA;;;;;;;;QAEC,MAAAC,EAAA;AAAA,QACA,UAAAF,EAAA;AAAA,QACA,aAAAC,EAAA;AAAA,QACA,oBAAAA,EAAA;AAAA,QACD,aAAA;AAAA,QAOC,OAAA,EAAA,QAAAD,EAAA,OAAA;AAAA,QACA,OAAAA,EAAA;AAAA,QACA,SAAAG,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAH,EAAA,eAAAA,EAAA,YAAA,GAAAG,CAAA;AAAA,MA9GL,CAAA,GAAA,MAAA,IAAAR,CAAA;AAAA,MAgHiB,CAAAI,EAAA,gBAAAC,EAAA;;QACb,OAAA;AAAA,QACC,KAAAA,EAAA;AAAA,MACE,GAAAF,EAAA,gBAAAC,EAAA,KAAA,GAAA,GAAAH,CAAA,KAnHPE,EAAA,mBAAA,IAAA,EAAA;AAAA;IAsHWC,EAAA,WAAA,SAAA;;MACP,IAAA,GAAA,OAAAC,EAAA,WAAA;AAAA;;;;;;;QAMqB,OAAA;AAAA,QAA6C,MAAA;AAAA;;QACpC,OAAA;AAAA,QAA6C,MAAA;AAAA,YA9H/EF,EAAA,mBAAA,IAAA,EAAA;AAAA;IAAA,GAAA,IAAAD,CAAA,KAAAC,EAAA,mBAAA,IAAA,EAAA;AAAA;;;;"}

package/dist/chunks/NcTextArea-SeSiP6Dy.mjs

@@ -0,0 +1,203 @@
+import "../assets/NcTextArea-Eqv_-5FR.css";
+import { G as _ } from "./GenRandomId-VodkdWbp.mjs";
+import { A as b } from "./AlertCircleOutline-1fsF7za7.mjs";
+import { C as f } from "./Check-tQl0Vp18.mjs";
+import { resolveComponent as d, openBlock as l, createElementBlock as r, normalizeClass as n, createElementVNode as c, mergeProps as x, toDisplayString as o, createCommentVNode as s, createBlock as u, createTextVNode as y } from "vue";
+import { _ as g } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+const C = {
+  name: "NcTextArea",
+  components: {
+    AlertCircle: b,
+    Check: f
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * The value of the input field
+     */
+    modelValue: {
+      type: String,
+      required: !0
+    },
+    /**
+     * The input label, always provide one for accessibility purposes.
+     * This will also be used as a placeholder unless the placeholder
+     * prop is populated with a different string.
+     */
+    label: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Pass in true if you want to use an external label. This is useful
+     * if you need a label that looks different from the one provided by
+     * this component
+     */
+    labelOutside: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The placeholder of the input. This defaults as the string that's
+     * passed into the label prop. In order to remove the placeholder,
+     * pass in an empty string.
+     */
+    placeholder: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Toggles the success state of the component. Adds a checkmark icon.
+     * this cannot be used together with canClear.
+     */
+    success: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Toggles the error state of the component. Adds an error icon.
+     * this cannot be used together with canClear.
+     */
+    error: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Additional helper text message
+     *
+     * This will be displayed beneath the input field. In case the field is
+     * also marked as having an error, the text will be displayed in red.
+     */
+    helperText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Disable the input field
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Class to add to the input field.
+     * Necessary to use NcInputField in the NcActionInput component.
+     */
+    inputClass: {
+      type: [Object, String],
+      default: ""
+    },
+    /**
+     * The resize CSS property sets whether an element is resizable, and if
+     * so, in which directions.
+     */
+    resize: {
+      type: String,
+      default: "both",
+      validator: (t) => ["both", "vertical", "horizontal", "none"].includes(t)
+    }
+  },
+  emits: [
+    "update:modelValue"
+  ],
+  computed: {
+    computedId() {
+      return this.$attrs.id && this.$attrs.id !== "" ? this.$attrs.id : this.inputName;
+    },
+    inputName() {
+      return "input" + _();
+    },
+    hasPlaceholder() {
+      return this.placeholder !== "" && this.placeholder !== void 0;
+    },
+    computedPlaceholder() {
+      return this.hasPlaceholder ? this.placeholder : this.label;
+    },
+    isValidLabel() {
+      const t = this.label || this.labelOutside;
+      return t || console.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."), t;
+    },
+    ariaDescribedby() {
+      const t = [];
+      return this.helperText.length > 0 && t.push("".concat(this.inputName, "-helper-text")), this.$attrs["aria-describedby"] && t.push(this.$attrs["aria-describedby"]), t.join(" ") || null;
+    }
+  },
+  methods: {
+    /**
+     * Focus the input element
+     *
+     * @public
+     */
+    focus() {
+      this.$refs.input.focus();
+    },
+    /**
+     * Select all the text in the input
+     *
+     * @public
+     */
+    select() {
+      this.$refs.input.select();
+    },
+    handleInput(t) {
+      this.$emit("update:modelValue", t.target.value);
+    }
+  }
+}, N = { class: "textarea__main-wrapper" }, k = ["id", "type", "disabled", "placeholder", "aria-describedby", "value"], v = ["for"], I = ["id"];
+function V(t, i, e, z, A, a) {
+  const h = d("Check"), m = d("AlertCircle");
+  return l(), r("div", {
+    class: n(["textarea", { "textarea--disabled": e.disabled }])
+  }, [
+    c("div", N, [
+      c("textarea", x(t.$attrs, {
+        id: a.computedId,
+        ref: "input",
+        class: ["textarea__input", [
+          e.inputClass,
+          {
+            "textarea__input--label-outside": e.labelOutside,
+            "textarea__input--success": e.success,
+            "textarea__input--error": e.error
+          }
+        ]],
+        type: t.type,
+        disabled: e.disabled,
+        placeholder: a.computedPlaceholder,
+        "aria-describedby": a.ariaDescribedby,
+        "aria-live": "polite",
+        style: { resize: e.resize },
+        value: e.modelValue,
+        onInput: i[0] || (i[0] = (...p) => a.handleInput && a.handleInput(...p))
+      }), null, 16, k),
+      !e.labelOutside && a.isValidLabel ? (l(), r("label", {
+        key: 0,
+        class: "textarea__label",
+        for: a.computedId
+      }, o(e.label), 9, v)) : s("", !0)
+    ]),
+    e.helperText.length > 0 ? (l(), r("p", {
+      key: 0,
+      id: "".concat(a.inputName, "-helper-text"),
+      class: n(["textarea__helper-text-message", {
+        "textarea__helper-text-message--error": e.error,
+        "textarea__helper-text-message--success": e.success
+      }])
+    }, [
+      e.success ? (l(), u(h, {
+        key: 0,
+        class: "textarea__helper-text-message__icon",
+        size: 18
+      })) : e.error ? (l(), u(m, {
+        key: 1,
+        class: "textarea__helper-text-message__icon",
+        size: 18
+      })) : s("", !0),
+      y(" " + o(e.helperText), 1)
+    ], 10, I)) : s("", !0)
+  ], 2);
+}
+const E = /* @__PURE__ */ g(C, [["render", V], ["__scopeId", "data-v-db4d2d17"]]);
+export {
+  E as N
+};

package/dist/chunks/NcTextArea-SeSiP6Dy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcTextArea-SeSiP6Dy.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 v-model=\"text\"\n\t\t\tlabel=\"Text area\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\thelper-text=\"This is a regular helper text.\" />\n\t\t<NcTextArea label=\"Success state\"\n\t\t\t:success=\"true\" />\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 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</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'This is text.',\n\t\t}\n\t},\n}\n</script>\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=\"modelValue\"\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\tmodelValue: {\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:modelValue',\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:modelValue', 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\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":["_sfc_main","value","isValidLabel","ariaDescribedby","event","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","normalizeClass","$props","createElementVNode","$options","_ctx","_cache","args","toDisplayString","createCommentVNode"],"mappings":";;;;;;AA0IA,MAAAA,IAAA;AAAA,EACC,MAAA;AAAA;;;;EAOA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;IAcC,OAAA;AAAA;MAEC,SAAA;AAAA;;;;;;;;;;;;;;;;;MAoBA,SAAA;AAAA;;;;;IAOD,SAAA;AAAA;;;;;;;IASA,OAAA;AAAA;;;;;;;;;;;;;;;;IAmBA,UAAA;AAAA;;;;;;;;MAUC,MAAA,CAAA,QAAA,MAAA;AAAA;;;;;;IAQD,QAAA;AAAA;MAEC,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,CAAA,QAAA,YAAA,cAAA,MAAA,EAAA,SAAAA,CAAA;AAAA;;EAIF,OAAA;AAAA,IACC;AAAA;EAGD,UAAA;AAAA;AAEE,aAAA,KAAA,OAAA,MAAA,KAAA,OAAA,OAAA,KAAA,KAAA,OAAA,KAAA,KAAA;AAAA;;;;IAOD,iBAAA;;;IAIA,sBAAA;;;IAIA,eAAA;;AAEC,aAAAC,KACC,QAAA,KAAA,mJAAA,GAEDA;AAAA;IAGD,kBAAA;;8FAKC,KAAA,OAAA,kBAAA,8CAGAC,EAAA,KAAA,GAAA,KAAA;AAAA;;EAIF,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMC,QAAA;;;;;;;;IASA,SAAA;;;IAIA,YAAAC,GAAA;;;;AAIF,GAxNOC,IAAA,EAAA,OAAA,yBAAA,GA5FPC,IAAA,CAAA,MAAA,QAAA,YAAA,eAAA,oBAAA,OAAA,GAAAC,IAAA,CAAA,KAAA,GAAAC,IAAA,CAAA,IAAA;;;;IA2FM,OAAAC,EAAA,CAAA,YAAA,EAAA,sBAAAC,EAAA,SAAA,CAAA,CAAA;AAAA;IACJC,EAAA,OAAAN,GAAA;AAAA;QAEG,IAAAO,EAAA;AAAA,QACD,KAAA;AAAA;;;;;;;;QAEC,MAAAC,EAAA;AAAA,QACA,UAAAH,EAAA;AAAA,QACA,aAAAE,EAAA;AAAA,QACA,oBAAAA,EAAA;AAAA,QACD,aAAA;AAAA,QAOC,OAAA,EAAA,QAAAF,EAAA,OAAA;AAAA,QACA,OAAAA,EAAA;AAAA,QACA,SAAAI,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAH,EAAA,eAAAA,EAAA,YAAA,GAAAG,CAAA;AAAA,MA9GL,CAAA,GAAA,MAAA,IAAAT,CAAA;AAAA,MAgHiB,CAAAI,EAAA,gBAAAE,EAAA;;QACb,OAAA;AAAA,QACC,KAAAA,EAAA;AAAA,MACE,GAAAI,EAAAN,EAAA,KAAA,GAAA,GAAAH,CAAA,KAnHPU,EAAA,IAAA,EAAA;AAAA;IAsHWP,EAAA,WAAA,SAAA;;MACP,IAAA,GAAA,OAAAE,EAAA,WAAA;AAAA;;;;;;;QAMqB,OAAA;AAAA,QAA6C,MAAA;AAAA;;QACpC,OAAA;AAAA,QAA6C,MAAA;AAAA,YA9H/EK,EAAA,IAAA,EAAA;AAAA;IAAA,GAAA,IAAAT,CAAA,KAAAS,EAAA,IAAA,EAAA;AAAA;;;"}

package/dist/chunks/NcTextField-qqwMB07_.mjs

@@ -0,0 +1,165 @@
+import { N as d } from "./NcInputField-6pRWha3h.mjs";
+import { C as k } from "./Close-hKJ11hky.mjs";
+import { A as w } from "./ArrowRight-6gYTXvBH.mjs";
+import { openBlock as n, createElementBlock as a, mergeProps as m, createElementVNode as B, toDisplayString as I, createCommentVNode as p, resolveComponent as i, createBlock as r, createSlots as b, withCtx as u, renderSlot as F } from "vue";
+import { _ as f } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+import { r as N, c as L, d as V, a as c } from "./_l10n-uuAvfQgY.mjs";
+const S = {
+  name: "UndoVariantIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, v = ["aria-hidden", "aria-label"], U = ["fill", "width", "height"], z = { d: "M13.5,7A6.5,6.5 0 0,1 20,13.5A6.5,6.5 0 0,1 13.5,20H10V18H13.5C16,18 18,16 18,13.5C18,11 16,9 13.5,9H7.83L10.91,12.09L9.5,13.5L4,8L9.5,2.5L10.92,3.91L7.83,7H13.5M6,18H8V20H6V18Z" }, A = { key: 0 };
+function H(e, o, t, h, g, l) {
+  return n(), a("span", m(e.$attrs, {
+    "aria-hidden": t.title ? null : !0,
+    "aria-label": t.title,
+    class: "material-design-icon undo-variant-icon",
+    role: "img",
+    onClick: o[0] || (o[0] = (s) => e.$emit("click", s))
+  }), [
+    (n(), a("svg", {
+      fill: t.fillColor,
+      class: "material-design-icon__svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24"
+    }, [
+      B("path", z, [
+        t.title ? (n(), a("title", A, I(t.title), 1)) : p("", !0)
+      ])
+    ], 8, U))
+  ], 16, v);
+}
+const R = /* @__PURE__ */ f(S, [["render", H]]);
+N(V, L);
+const $ = new Set(Object.keys(d.props)), x = {
+  name: "NcTextField",
+  components: {
+    NcInputField: d,
+    Close: k,
+    ArrowRight: w,
+    Undo: R
+  },
+  props: {
+    /**
+     * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props
+     */
+    // Not an actual prop but needed to show in vue-styleguidist docs
+    // eslint-disable-next-line
+    " ": {},
+    // Reuse all the props from NcInputField for better typing and documentation
+    ...d.props,
+    /**
+     * The `aria-label` to set on the trailing button
+     * If no explicit value is set it will default to the one matching the `trailingButtonIcon`:
+     * @default 'Clear text'|'Save changes'|'Undo changes'
+     */
+    trailingButtonLabel: {
+      type: String,
+      default: ""
+    },
+    // Custom props
+    /**
+     * Specifies which material design icon should be used for the trailing
+     * button.
+     * @type {'close'|'arrowRight'|'undo'}
+     */
+    trailingButtonIcon: {
+      type: String,
+      default: "close",
+      validator: (e) => [
+        "close",
+        "arrowRight",
+        "undo"
+      ].includes(e)
+    }
+  },
+  emits: [
+    "update:modelValue"
+  ],
+  computed: {
+    propsToForward() {
+      const e = {
+        undo: c("Undo changes"),
+        close: c("Clear text"),
+        arrowRight: c("Save changes")
+      };
+      return {
+        // Proxy original NcInputField's props
+        ...Object.fromEntries(
+          Object.entries(this.$props).filter(([o]) => $.has(o))
+        ),
+        // Adjust aria-label for predefined trailing buttons
+        trailingButtonLabel: this.trailingButtonLabel || e[this.trailingButtonIcon]
+      };
+    }
+  },
+  methods: {
+    /**
+     * Focus the input element
+     *
+     * @public
+     */
+    focus() {
+      this.$refs.inputField.focus();
+    },
+    /**
+     * Select all the text in the input
+     *
+     * @public
+     */
+    select() {
+      this.$refs.inputField.select();
+    },
+    handleInput(e) {
+      this.$emit("update:modelValue", e);
+    }
+  }
+};
+function T(e, o, t, h, g, l) {
+  const s = i("Close"), _ = i("ArrowRight"), y = i("Undo"), C = i("NcInputField");
+  return n(), r(C, m(l.propsToForward, {
+    ref: "inputField",
+    "onUpdate:modelValue": l.handleInput
+  }), b({ _: 2 }, [
+    e.$slots.icon ? {
+      name: "icon",
+      fn: u(() => [
+        F(e.$slots, "icon")
+      ]),
+      key: "0"
+    } : void 0,
+    e.type !== "search" ? {
+      name: "trailing-button-icon",
+      fn: u(() => [
+        t.trailingButtonIcon === "close" ? (n(), r(s, {
+          key: 0,
+          size: 20
+        })) : t.trailingButtonIcon === "arrowRight" ? (n(), r(_, {
+          key: 1,
+          size: 20
+        })) : t.trailingButtonIcon === "undo" ? (n(), r(y, {
+          key: 2,
+          size: 20
+        })) : p("", !0)
+      ]),
+      key: "1"
+    } : void 0
+  ]), 1040, ["onUpdate:modelValue"]);
+}
+const Z = /* @__PURE__ */ f(x, [["render", T]]);
+export {
+  Z as N
+};

package/dist/chunks/NcTextField-qqwMB07_.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcTextField-qqwMB07_.mjs","sources":["../../node_modules/vue-material-design-icons/UndoVariant.vue","../../src/components/NcTextField/NcTextField.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : true\"\n        :aria-label=\"title\"\n        class=\"material-design-icon undo-variant-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M13.5,7A6.5,6.5 0 0,1 20,13.5A6.5,6.5 0 0,1 13.5,20H10V18H13.5C16,18 18,16 18,13.5C18,11 16,9 13.5,9H7.83L10.91,12.09L9.5,13.5L4,8L9.5,2.5L10.92,3.91L7.83,7H13.5M6,18H8V20H6V18Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"UndoVariantIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>\n  -\n  - @author Marco Ambrosini <marcoambrosini@pm.me>\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### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose text field component.\nIt is recommended to not only provide a placeholder, but also a label.\nThe label should describe what input is expected and the placehold what format the input should have.\n\nNote: the inner html `input` element inherits all the attributes from the\nNcTextField component so you can add things like `autocomplete`, `maxlength`\nand `minlength`.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcTextField v-model=\"text1\"\n\t\t\tlabel=\"Leading icon and clear trailing button\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text1 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text4\"\n\t\t\tlabel=\"Internal label\"\n\t\t\tplaceholder=\"That can be used together with placeholder\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text4 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<template #icon>\n\t\t\t\t<Lock :size=\"20\" />\n\t\t\t</template>\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text2\"\n\t\t\tlabel=\"Success state\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\t:success=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text3\"\n\t\t\tlabel=\"Error state\"\n\t\t\tplaceholder=\"Enter something valid\"\n\t\t\t:error=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField :model-value=\"\"\n\t\t\tlabel=\"Disabled\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextField :model-value=\"\"\n\t\t\tlabel=\"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<NcTextField v-model=\"text5\"\n\t\t\t\tid=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Input with external label\"\n\t\t\t\t@trailing-button-click=\"clearText\" />\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\nimport Lock from 'vue-material-design-icons/Lock'\nimport Close from 'vue-material-design-icons/Close'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: '',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t}\n\t},\n\n\tcomponents: {\n\t\tMagnify,\n\t\tLock,\n\t\tClose,\n\t},\n\n\tmethods: {\n\t\tclearText() {\n\t\t\tthis.text1 = ''\n\t\t\tthis.text3 = ''\n\t\t}\n\t}\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\tpadding-right: 14px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcInputField v-bind=\"propsToForward\"\n\t\tref=\"inputField\"\n\t\t@update:model-value=\"handleInput\">\n\t\t<template v-if=\"!!$slots.icon\" #icon>\n\t\t\t<!-- Default slot for the leading icon -->\n\t\t\t<slot name=\"icon\" />\n\t\t</template>\n\n\t\t<!-- Trailing icon slot, except for search type input as the browser already adds a trailing close icon -->\n\t\t<template v-if=\"type !== 'search'\" #trailing-button-icon>\n\t\t\t<Close v-if=\"trailingButtonIcon === 'close'\" :size=\"20\" />\n\t\t\t<ArrowRight v-else-if=\"trailingButtonIcon === 'arrowRight'\" :size=\"20\" />\n\t\t\t<Undo v-else-if=\"trailingButtonIcon === 'undo'\" :size=\"20\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script>\n\nimport NcInputField from '../NcInputField/NcInputField.vue'\n\nimport Close from 'vue-material-design-icons/Close.vue'\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Undo from 'vue-material-design-icons/UndoVariant.vue'\n\nimport { t } from '../../l10n.js'\n\nconst NcInputFieldProps = new Set(Object.keys(NcInputField.props))\n\nexport default {\n\tname: 'NcTextField',\n\n\tcomponents: {\n\t\tNcInputField,\n\t\tClose,\n\t\tArrowRight,\n\t\tUndo,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\n\t\t// Reuse all the props from NcInputField for better typing and documentation\n\t\t...NcInputField.props,\n\n\t\t/**\n\t\t * The `aria-label` to set on the trailing button\n\t\t * If no explicit value is set it will default to the one matching the `trailingButtonIcon`:\n\t\t * @default 'Clear text'|'Save changes'|'Undo changes'\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t// Custom props\n\n\t\t/**\n\t\t * Specifies which material design icon should be used for the trailing\n\t\t * button.\n\t\t * @type {'close'|'arrowRight'|'undo'}\n\t\t */\n\t\ttrailingButtonIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: 'close',\n\t\t\tvalidator: (value) => [\n\t\t\t\t'close',\n\t\t\t\t'arrowRight',\n\t\t\t\t'undo',\n\t\t\t].includes(value),\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:modelValue',\n\t],\n\n\tcomputed: {\n\t\tpropsToForward() {\n\t\t\tconst predefinedLabels = {\n\t\t\t\tundo: t('Undo changes'),\n\t\t\t\tclose: t('Clear text'),\n\t\t\t\tarrowRight: t('Save changes'),\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\t// Proxy original NcInputField's props\n\t\t\t\t...Object.fromEntries(\n\t\t\t\t\tObject.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key)),\n\t\t\t\t),\n\t\t\t\t// Adjust aria-label for predefined trailing buttons\n\t\t\t\ttrailingButtonLabel: this.trailingButtonLabel || predefinedLabels[this.trailingButtonIcon],\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.inputField.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.inputField.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tthis.$emit('update:modelValue', event)\n\t\t},\n\t},\n}\n</script>\n"],"names":["_sfc_main","_hoisted_1","_hoisted_2","_hoisted_3","_createElementBlock","_mergeProps","_ctx","$props","_cache","$event","_createElementVNode","_hoisted_4","_createCommentVNode","NcInputFieldProps","NcInputField","Close","ArrowRight","Undo","value","predefinedLabels","t","key","event","_createBlock","_component_NcInputField","$options","_createSlots","_withCtx","_renderSlot","_component_Close","_component_ArrowRight","_component_Undo"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/chunks/NcTextField-zi19KqEm.cjs

@@ -0,0 +1,158 @@
+"use strict";
+const c = require("./NcInputField-6vveMrmf.cjs"), h = require("./Close-e2vDvDm2.cjs"), g = require("./ArrowRight-UxW1qyeX.cjs"), e = require("vue"), s = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), n = require("./_l10n-Fl7RzbcZ.cjs"), _ = {
+  name: "UndoVariantIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, f = ["aria-hidden", "aria-label"], k = ["fill", "width", "height"], B = { d: "M13.5,7A6.5,6.5 0 0,1 20,13.5A6.5,6.5 0 0,1 13.5,20H10V18H13.5C16,18 18,16 18,13.5C18,11 16,9 13.5,9H7.83L10.91,12.09L9.5,13.5L4,8L9.5,2.5L10.92,3.91L7.83,7H13.5M6,18H8V20H6V18Z" }, C = { key: 0 };
+function w(t, i, o, a, d, r) {
+  return e.openBlock(), e.createElementBlock("span", e.mergeProps(t.$attrs, {
+    "aria-hidden": o.title ? null : !0,
+    "aria-label": o.title,
+    class: "material-design-icon undo-variant-icon",
+    role: "img",
+    onClick: i[0] || (i[0] = (l) => t.$emit("click", l))
+  }), [
+    (e.openBlock(), e.createElementBlock("svg", {
+      fill: o.fillColor,
+      class: "material-design-icon__svg",
+      width: o.size,
+      height: o.size,
+      viewBox: "0 0 24 24"
+    }, [
+      e.createElementVNode("path", B, [
+        o.title ? (e.openBlock(), e.createElementBlock("title", C, e.toDisplayString(o.title), 1)) : e.createCommentVNode("", !0)
+      ])
+    ], 8, k))
+  ], 16, f);
+}
+const F = /* @__PURE__ */ s._export_sfc(_, [["render", w]]);
+n.register(n.t15, n.t41);
+const I = new Set(Object.keys(c.NcInputField.props)), N = {
+  name: "NcTextField",
+  components: {
+    NcInputField: c.NcInputField,
+    Close: h.Close,
+    ArrowRight: g.ArrowRight,
+    Undo: F
+  },
+  props: {
+    /**
+     * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props
+     */
+    // Not an actual prop but needed to show in vue-styleguidist docs
+    // eslint-disable-next-line
+    " ": {},
+    // Reuse all the props from NcInputField for better typing and documentation
+    ...c.NcInputField.props,
+    /**
+     * The `aria-label` to set on the trailing button
+     * If no explicit value is set it will default to the one matching the `trailingButtonIcon`:
+     * @default 'Clear text'|'Save changes'|'Undo changes'
+     */
+    trailingButtonLabel: {
+      type: String,
+      default: ""
+    },
+    // Custom props
+    /**
+     * Specifies which material design icon should be used for the trailing
+     * button.
+     * @type {'close'|'arrowRight'|'undo'}
+     */
+    trailingButtonIcon: {
+      type: String,
+      default: "close",
+      validator: (t) => [
+        "close",
+        "arrowRight",
+        "undo"
+      ].includes(t)
+    }
+  },
+  emits: [
+    "update:modelValue"
+  ],
+  computed: {
+    propsToForward() {
+      const t = {
+        undo: n.t("Undo changes"),
+        close: n.t("Clear text"),
+        arrowRight: n.t("Save changes")
+      };
+      return {
+        // Proxy original NcInputField's props
+        ...Object.fromEntries(
+          Object.entries(this.$props).filter(([i]) => I.has(i))
+        ),
+        // Adjust aria-label for predefined trailing buttons
+        trailingButtonLabel: this.trailingButtonLabel || t[this.trailingButtonIcon]
+      };
+    }
+  },
+  methods: {
+    /**
+     * Focus the input element
+     *
+     * @public
+     */
+    focus() {
+      this.$refs.inputField.focus();
+    },
+    /**
+     * Select all the text in the input
+     *
+     * @public
+     */
+    select() {
+      this.$refs.inputField.select();
+    },
+    handleInput(t) {
+      this.$emit("update:modelValue", t);
+    }
+  }
+};
+function y(t, i, o, a, d, r) {
+  const l = e.resolveComponent("Close"), u = e.resolveComponent("ArrowRight"), p = e.resolveComponent("Undo"), m = e.resolveComponent("NcInputField");
+  return e.openBlock(), e.createBlock(m, e.mergeProps(r.propsToForward, {
+    ref: "inputField",
+    "onUpdate:modelValue": r.handleInput
+  }), e.createSlots({ _: 2 }, [
+    t.$slots.icon ? {
+      name: "icon",
+      fn: e.withCtx(() => [
+        e.renderSlot(t.$slots, "icon")
+      ]),
+      key: "0"
+    } : void 0,
+    t.type !== "search" ? {
+      name: "trailing-button-icon",
+      fn: e.withCtx(() => [
+        o.trailingButtonIcon === "close" ? (e.openBlock(), e.createBlock(l, {
+          key: 0,
+          size: 20
+        })) : o.trailingButtonIcon === "arrowRight" ? (e.openBlock(), e.createBlock(u, {
+          key: 1,
+          size: 20
+        })) : o.trailingButtonIcon === "undo" ? (e.openBlock(), e.createBlock(p, {
+          key: 2,
+          size: 20
+        })) : e.createCommentVNode("", !0)
+      ]),
+      key: "1"
+    } : void 0
+  ]), 1040, ["onUpdate:modelValue"]);
+}
+const V = /* @__PURE__ */ s._export_sfc(N, [["render", y]]);
+exports.NcTextField = V;

package/dist/chunks/NcTextField-zi19KqEm.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcTextField-zi19KqEm.cjs","sources":["../../node_modules/vue-material-design-icons/UndoVariant.vue","../../src/components/NcTextField/NcTextField.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : true\"\n        :aria-label=\"title\"\n        class=\"material-design-icon undo-variant-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M13.5,7A6.5,6.5 0 0,1 20,13.5A6.5,6.5 0 0,1 13.5,20H10V18H13.5C16,18 18,16 18,13.5C18,11 16,9 13.5,9H7.83L10.91,12.09L9.5,13.5L4,8L9.5,2.5L10.92,3.91L7.83,7H13.5M6,18H8V20H6V18Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"UndoVariantIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>\n  -\n  - @author Marco Ambrosini <marcoambrosini@pm.me>\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### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose text field component.\nIt is recommended to not only provide a placeholder, but also a label.\nThe label should describe what input is expected and the placehold what format the input should have.\n\nNote: the inner html `input` element inherits all the attributes from the\nNcTextField component so you can add things like `autocomplete`, `maxlength`\nand `minlength`.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcTextField v-model=\"text1\"\n\t\t\tlabel=\"Leading icon and clear trailing button\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text1 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text4\"\n\t\t\tlabel=\"Internal label\"\n\t\t\tplaceholder=\"That can be used together with placeholder\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text4 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<template #icon>\n\t\t\t\t<Lock :size=\"20\" />\n\t\t\t</template>\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text2\"\n\t\t\tlabel=\"Success state\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\t:success=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text3\"\n\t\t\tlabel=\"Error state\"\n\t\t\tplaceholder=\"Enter something valid\"\n\t\t\t:error=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField :model-value=\"\"\n\t\t\tlabel=\"Disabled\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextField :model-value=\"\"\n\t\t\tlabel=\"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<NcTextField v-model=\"text5\"\n\t\t\t\tid=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Input with external label\"\n\t\t\t\t@trailing-button-click=\"clearText\" />\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\nimport Lock from 'vue-material-design-icons/Lock'\nimport Close from 'vue-material-design-icons/Close'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: '',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t}\n\t},\n\n\tcomponents: {\n\t\tMagnify,\n\t\tLock,\n\t\tClose,\n\t},\n\n\tmethods: {\n\t\tclearText() {\n\t\t\tthis.text1 = ''\n\t\t\tthis.text3 = ''\n\t\t}\n\t}\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\tpadding-right: 14px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcInputField v-bind=\"propsToForward\"\n\t\tref=\"inputField\"\n\t\t@update:model-value=\"handleInput\">\n\t\t<template v-if=\"!!$slots.icon\" #icon>\n\t\t\t<!-- Default slot for the leading icon -->\n\t\t\t<slot name=\"icon\" />\n\t\t</template>\n\n\t\t<!-- Trailing icon slot, except for search type input as the browser already adds a trailing close icon -->\n\t\t<template v-if=\"type !== 'search'\" #trailing-button-icon>\n\t\t\t<Close v-if=\"trailingButtonIcon === 'close'\" :size=\"20\" />\n\t\t\t<ArrowRight v-else-if=\"trailingButtonIcon === 'arrowRight'\" :size=\"20\" />\n\t\t\t<Undo v-else-if=\"trailingButtonIcon === 'undo'\" :size=\"20\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script>\n\nimport NcInputField from '../NcInputField/NcInputField.vue'\n\nimport Close from 'vue-material-design-icons/Close.vue'\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Undo from 'vue-material-design-icons/UndoVariant.vue'\n\nimport { t } from '../../l10n.js'\n\nconst NcInputFieldProps = new Set(Object.keys(NcInputField.props))\n\nexport default {\n\tname: 'NcTextField',\n\n\tcomponents: {\n\t\tNcInputField,\n\t\tClose,\n\t\tArrowRight,\n\t\tUndo,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\n\t\t// Reuse all the props from NcInputField for better typing and documentation\n\t\t...NcInputField.props,\n\n\t\t/**\n\t\t * The `aria-label` to set on the trailing button\n\t\t * If no explicit value is set it will default to the one matching the `trailingButtonIcon`:\n\t\t * @default 'Clear text'|'Save changes'|'Undo changes'\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t// Custom props\n\n\t\t/**\n\t\t * Specifies which material design icon should be used for the trailing\n\t\t * button.\n\t\t * @type {'close'|'arrowRight'|'undo'}\n\t\t */\n\t\ttrailingButtonIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: 'close',\n\t\t\tvalidator: (value) => [\n\t\t\t\t'close',\n\t\t\t\t'arrowRight',\n\t\t\t\t'undo',\n\t\t\t].includes(value),\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:modelValue',\n\t],\n\n\tcomputed: {\n\t\tpropsToForward() {\n\t\t\tconst predefinedLabels = {\n\t\t\t\tundo: t('Undo changes'),\n\t\t\t\tclose: t('Clear text'),\n\t\t\t\tarrowRight: t('Save changes'),\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\t// Proxy original NcInputField's props\n\t\t\t\t...Object.fromEntries(\n\t\t\t\t\tObject.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key)),\n\t\t\t\t),\n\t\t\t\t// Adjust aria-label for predefined trailing buttons\n\t\t\t\ttrailingButtonLabel: this.trailingButtonLabel || predefinedLabels[this.trailingButtonIcon],\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.inputField.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.inputField.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tthis.$emit('update:modelValue', event)\n\t\t},\n\t},\n}\n</script>\n"],"names":["_sfc_main","_hoisted_1","_hoisted_2","_hoisted_3","_createElementBlock","_mergeProps","_ctx","$props","_cache","$event","_createElementVNode","_hoisted_4","_createCommentVNode","NcInputFieldProps","NcInputField","Close","ArrowRight","Undo","value","predefinedLabels","t","key","event","_createBlock","_component_NcInputField","$options","_createSlots","_withCtx","_renderSlot","_component_Close","_component_ArrowRight","_component_Undo"],"mappings":"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","x_google_ignoreList":[0]}