@nextcloud/vue 8.6.0 → 9.0.0-alpha.1

package/dist/chunks/NcInputField-6pRWha3h.mjs

@@ -0,0 +1,291 @@
+import "../assets/NcInputField-qx4Me7uJ.css";
+import { N as b } from "./NcButton-YOXv3gFY.mjs";
+import { G as g } from "./GenRandomId-VodkdWbp.mjs";
+import { A as y } from "./AlertCircleOutline-1fsF7za7.mjs";
+import { C as k } from "./Check-tQl0Vp18.mjs";
+import { resolveComponent as d, openBlock as l, createElementBlock as s, normalizeClass as r, createElementVNode as u, mergeProps as B, toDisplayString as p, createCommentVNode as a, withDirectives as C, renderSlot as f, vShow as N, createBlock as n, withCtx as v, createTextVNode as x } from "vue";
+import { _ as I } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+const T = {
+  name: "NcInputField",
+  components: {
+    NcButton: b,
+    AlertCircle: y,
+    Check: k
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * The value of the input field
+     * If type is 'number' and a number is passed as value than the type of `update:value` will also be 'number'
+     */
+    modelValue: {
+      type: [String, Number],
+      required: !0
+    },
+    /**
+     * The type of the input element
+     */
+    type: {
+      type: String,
+      default: "text",
+      validator: (t) => [
+        "text",
+        "password",
+        "email",
+        "tel",
+        "url",
+        "search",
+        "number"
+      ].includes(t)
+    },
+    /**
+     * 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.
+     *
+     * Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).
+     */
+    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
+    },
+    /**
+     * Controls whether to display the trailing button.
+     */
+    showTrailingButton: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Label of the trailing button
+     *
+     * Required when showTrailingButton is set
+     */
+    trailingButtonLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * 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
+    },
+    /**
+     * Specifies whether the input should have a pill form.
+     * By default, input has rounded corners.
+     */
+    pill: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Class to add to the root component.
+     */
+    class: {
+      type: [Object, String, Array],
+      default: ""
+    },
+    /**
+     * Class to add to the input field.
+     * Necessary to use NcInputField in the NcActionInput component.
+     */
+    inputClass: {
+      type: [Object, String],
+      default: ""
+    }
+  },
+  emits: [
+    "update:modelValue",
+    "trailing-button-click"
+  ],
+  computed: {
+    computedId() {
+      return this.$attrs.id && this.$attrs.id !== "" ? this.$attrs.id : this.inputName;
+    },
+    inputName() {
+      return "input" + g();
+    },
+    hasTrailingIcon() {
+      return this.success;
+    },
+    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", this.type === "number" && typeof this.modelValue == "number" ? parseFloat(t.target.value, 10) : t.target.value);
+    },
+    handleTrailingButtonClick(t) {
+      this.$emit("trailing-button-click", t);
+    }
+  }
+}, S = { class: "input-field__main-wrapper" }, V = ["id", "type", "disabled", "placeholder", "aria-describedby", "value"], w = ["for"], A = { class: "input-field__icon input-field__icon--leading" }, O = {
+  key: 2,
+  class: "input-field__icon input-field__icon--trailing"
+}, z = ["id"];
+function D(t, o, e, L, P, i) {
+  const _ = d("NcButton"), c = d("Check"), h = d("AlertCircle");
+  return l(), s("div", {
+    class: r(["input-field", [{ "input-field--disabled": e.disabled }, t.$props.class]])
+  }, [
+    u("div", S, [
+      u("input", B(t.$attrs, {
+        id: i.computedId,
+        ref: "input",
+        class: ["input-field__input", [
+          e.inputClass,
+          {
+            "input-field__input--trailing-icon": e.showTrailingButton || i.hasTrailingIcon,
+            "input-field__input--leading-icon": !!t.$slots.icon,
+            "input-field__input--label-outside": e.labelOutside,
+            "input-field__input--success": e.success,
+            "input-field__input--error": e.error,
+            "input-field__input--pill": e.pill
+          }
+        ]],
+        type: e.type,
+        disabled: e.disabled,
+        placeholder: i.computedPlaceholder,
+        "aria-describedby": i.ariaDescribedby,
+        "aria-live": "polite",
+        value: e.modelValue.toString(),
+        onInput: o[0] || (o[0] = (...m) => i.handleInput && i.handleInput(...m))
+      }), null, 16, V),
+      !e.labelOutside && i.isValidLabel ? (l(), s("label", {
+        key: 0,
+        class: r(["input-field__label", [{
+          "input-field__label--trailing-icon": e.showTrailingButton || i.hasTrailingIcon,
+          "input-field__label--leading-icon": !!t.$slots.icon
+        }]]),
+        for: i.computedId
+      }, p(e.label), 11, w)) : a("", !0),
+      C(u("div", A, [
+        f(t.$slots, "icon", {}, void 0, !0)
+      ], 512), [
+        [N, !!t.$slots.icon]
+      ]),
+      e.showTrailingButton ? (l(), n(_, {
+        key: 1,
+        type: "tertiary-no-background",
+        class: r(["input-field__trailing-button", [{
+          "input-field__trailing-button--pill": e.pill
+        }]]),
+        "aria-label": e.trailingButtonLabel,
+        disabled: e.disabled,
+        onClick: i.handleTrailingButtonClick
+      }, {
+        icon: v(() => [
+          f(t.$slots, "trailing-button-icon", {}, void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["class", "aria-label", "disabled", "onClick"])) : e.success || e.error ? (l(), s("div", O, [
+        e.success ? (l(), n(c, {
+          key: 0,
+          size: 20,
+          style: { color: "var(--color-success-text)" }
+        })) : e.error ? (l(), n(h, {
+          key: 1,
+          size: 20,
+          style: { color: "var(--color-error-text)" }
+        })) : a("", !0)
+      ])) : a("", !0)
+    ]),
+    e.helperText.length > 0 ? (l(), s("p", {
+      key: 0,
+      id: "".concat(i.inputName, "-helper-text"),
+      class: r(["input-field__helper-text-message", {
+        "input-field__helper-text-message--error": e.error,
+        "input-field__helper-text-message--success": e.success
+      }])
+    }, [
+      e.success ? (l(), n(c, {
+        key: 0,
+        class: "input-field__helper-text-message__icon",
+        size: 18
+      })) : e.error ? (l(), n(h, {
+        key: 1,
+        class: "input-field__helper-text-message__icon",
+        size: 18
+      })) : a("", !0),
+      x(" " + p(e.helperText), 1)
+    ], 10, z)) : a("", !0)
+  ], 2);
+}
+const H = /* @__PURE__ */ I(T, [["render", D], ["__scopeId", "data-v-53a71842"]]);
+export {
+  H as N
+};

package/dist/chunks/NcInputField-6pRWha3h.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcInputField-6pRWha3h.mjs","sources":["../../src/components/NcInputField/NcInputField.vue"],"sourcesContent":["<!--\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\n\nThis component is used by the other Fields components.\nIt extends and styles an HTMLInputElement.\n\nYou cannot use it as is. This is here for documentation purposes.\nSee the other field components.\n\nFor a list of all available props and attributes, please check the [HTMLInputElement documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n\n</docs>\n\n<template>\n\t<div class=\"input-field\" :class=\"[{ 'input-field--disabled': disabled }, $props.class ]\">\n\t\t<div class=\"input-field__main-wrapper\">\n\t\t\t<input v-bind=\"$attrs\"\n\t\t\t\t:id=\"computedId\"\n\t\t\t\tref=\"input\"\n\t\t\t\tclass=\"input-field__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'input-field__input--trailing-icon': showTrailingButton || hasTrailingIcon,\n\t\t\t\t\t\t'input-field__input--leading-icon': !!$slots.icon,\n\t\t\t\t\t\t'input-field__input--label-outside': labelOutside,\n\t\t\t\t\t\t'input-field__input--success': success,\n\t\t\t\t\t\t'input-field__input--error': error,\n\t\t\t\t\t\t'input-field__input--pill': pill,\n\t\t\t\t\t}]\"\n\t\t\t\t:value=\"modelValue.toString()\"\n\t\t\t\t@input=\"handleInput\">\n\t\t\t<!-- Label -->\n\t\t\t<label v-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"input-field__label\"\n\t\t\t\t:class=\"[{\n\t\t\t\t\t'input-field__label--trailing-icon': showTrailingButton || hasTrailingIcon,\n\t\t\t\t\t'input-field__label--leading-icon': !!$slots.icon,\n\t\t\t\t}]\"\n\t\t\t\t:for=\"computedId\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\n\t\t\t<!-- Leading icon -->\n\t\t\t<div v-show=\"!!$slots.icon\" class=\"input-field__icon input-field__icon--leading\">\n\t\t\t\t<!-- Leading material design icon in the text field, set the size to 18 -->\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</div>\n\n\t\t\t<!-- trailing button -->\n\t\t\t<NcButton v-if=\"showTrailingButton\"\n\t\t\t\ttype=\"tertiary-no-background\"\n\t\t\t\tclass=\"input-field__trailing-button\"\n\t\t\t\t:class=\"[{\n\t\t\t\t\t'input-field__trailing-button--pill': pill,\n\t\t\t\t}]\"\n\t\t\t\t:aria-label=\"trailingButtonLabel\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@click=\"handleTrailingButtonClick\">\n\t\t\t\t<!-- Populating this slot creates a trailing button within the\n\t\t\t\tinput boundaries that emits a `trailing-button-click` event -->\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"trailing-button-icon\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<!-- Success and error icons -->\n\t\t\t<div v-else-if=\"success || error\"\n\t\t\t\tclass=\"input-field__icon input-field__icon--trailing\">\n\t\t\t\t<Check v-if=\"success\" :size=\"20\" style=\"color: var(--color-success-text);\" />\n\t\t\t\t<AlertCircle v-else-if=\"error\" :size=\"20\" style=\"color: var(--color-error-text);\" />\n\t\t\t</div>\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=\"input-field__helper-text-message\"\n\t\t\t:class=\"{\n\t\t\t\t'input-field__helper-text-message--error': error,\n\t\t\t\t'input-field__helper-text-message--success': success,\n\t\t\t}\">\n\t\t\t<Check v-if=\"success\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t<AlertCircle v-else-if=\"error\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.ts'\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: 'NcInputField',\n\n\tcomponents: {\n\t\tNcButton,\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 * If type is 'number' and a number is passed as value than the type of `update:value` will also be 'number'\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [String, Number],\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The type of the input element\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'text',\n\t\t\tvalidator: (value) => [\n\t\t\t\t'text',\n\t\t\t\t'password',\n\t\t\t\t'email',\n\t\t\t\t'tel',\n\t\t\t\t'url',\n\t\t\t\t'search',\n\t\t\t\t'number',\n\t\t\t].includes(value),\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\t * Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).\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 * Controls whether to display the trailing button.\n\t\t */\n\t\tshowTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Label of the trailing button\n\t\t *\n\t\t * Required when showTrailingButton is set\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\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 * Specifies whether the input should have a pill form.\n\t\t * By default, input has rounded corners.\n\t\t */\n\t\tpill: {\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 root component.\n\t\t */\n\t\tclass: {\n\t\t\ttype: [Object, String, Array],\n\t\t\tdefault: '',\n\t\t},\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\t},\n\n\temits: [\n\t\t'update:modelValue',\n\t\t'trailing-button-click',\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\thasTrailingIcon() {\n\t\t\treturn this.success\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', this.type === 'number' && typeof this.modelValue === 'number' ? parseFloat(event.target.value, 10) : event.target.value)\n\t\t},\n\n\t\thandleTrailingButtonClick(event) {\n\t\t\tthis.$emit('trailing-button-click', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.input-field {\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\n\t&__main-wrapper {\n\t\theight: var(--default-clickable-area);\n\t\tposition: relative;\n\t}\n\n\t&--disabled {\n\t\topacity: 0.4;\n\t\tfilter: saturate(0.4);\n\t}\n\n\t&__input {\n\t\tmargin: 0;\n\t\tpadding-inline: 12px 6px; // align with label 8px margin label + 6px padding label - 2px border input\n\t\theight: var(--default-clickable-area) !important;\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\t\t-webkit-appearance: textfield !important;\n\t\t-moz-appearance: textfield !important;\n\n\t\t// Center text if external label is used\n\t\t&--label-outside {\n\t\t\tpadding-block: 0;\n\t\t}\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&:focus + .input-field__label,\n\t\t&:hover:not(:placeholder-shown) + .input-field__label {\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\n\t\t// 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&--leading-icon {\n\t\t\tpadding-inline-start: var(--default-clickable-area);\n\t\t}\n\n\t\t&--trailing-icon {\n\t\t\tpadding-inline-end: var(--default-clickable-area);\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\n\t\t&--pill {\n\t\t\tborder-radius: var(--border-radius-pill);\n\t\t}\n\t}\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 14px 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\n\t\t&--leading-icon {\n\t\t\tmargin-inline-start: var(--default-clickable-area);\n\t\t}\n\n\t\t&--trailing-icon {\n\t\t\tmargin-inline-end: var(--default-clickable-area);\n\t\t}\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\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: 5px;\n\t\tmargin-inline-start: 9px;\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\t&--leading-icon {\n\t\t\tmargin-inline-start: 41px;\n\t\t}\n\t}\n\n\t&__icon {\n\t\tposition: absolute;\n\t\theight: var(--default-clickable-area);\n\t\twidth: var(--default-clickable-area);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\topacity: 0.7;\n\n\t\t&--leading {\n\t\t\tinset-block-end: 0;\n\t\t\tinset-inline-start: 2px;\n\t\t}\n\n\t\t&--trailing {\n\t\t\tinset-block-end: 0;\n\t\t\tinset-inline-end: 2px;\n\t\t}\n\t}\n\n\t&__trailing-button {\n\t\t&.button-vue {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tborder-radius: var(--border-radius-large);\n\t\t}\n\n\t\t&--pill.button-vue {\n\t\t\tborder-radius: var(--border-radius-pill);\n\t\t}\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","NcButton","value","isValidLabel","ariaDescribedby","event","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_6","createElementVNode","$options","$props","_ctx","_cache","args","toDisplayString","createCommentVNode","withDirectives","vShow","withCtx","openBlock","createElementBlock","_hoisted_5"],"mappings":"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"}

package/dist/chunks/NcInputField-6vveMrmf.cjs

@@ -0,0 +1,283 @@
+var V = require("../assets/NcInputField-qx4Me7uJ.css");
+const c = require("./NcButton-7UKtzkX5.cjs"), d = require("./GenRandomId-ULxaMkkr.cjs"), u = require("./AlertCircleOutline-M7wVqz_-.cjs"), h = require("./Check-fwcsc82n.cjs"), e = require("vue"), p = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), _ = {
+  name: "NcInputField",
+  components: {
+    NcButton: c.NcButton,
+    AlertCircle: u.AlertCircle,
+    Check: h.Check
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * The value of the input field
+     * If type is 'number' and a number is passed as value than the type of `update:value` will also be 'number'
+     */
+    modelValue: {
+      type: [String, Number],
+      required: !0
+    },
+    /**
+     * The type of the input element
+     */
+    type: {
+      type: String,
+      default: "text",
+      validator: (l) => [
+        "text",
+        "password",
+        "email",
+        "tel",
+        "url",
+        "search",
+        "number"
+      ].includes(l)
+    },
+    /**
+     * 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.
+     *
+     * Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).
+     */
+    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
+    },
+    /**
+     * Controls whether to display the trailing button.
+     */
+    showTrailingButton: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Label of the trailing button
+     *
+     * Required when showTrailingButton is set
+     */
+    trailingButtonLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * 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
+    },
+    /**
+     * Specifies whether the input should have a pill form.
+     * By default, input has rounded corners.
+     */
+    pill: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Class to add to the root component.
+     */
+    class: {
+      type: [Object, String, Array],
+      default: ""
+    },
+    /**
+     * Class to add to the input field.
+     * Necessary to use NcInputField in the NcActionInput component.
+     */
+    inputClass: {
+      type: [Object, String],
+      default: ""
+    }
+  },
+  emits: [
+    "update:modelValue",
+    "trailing-button-click"
+  ],
+  computed: {
+    computedId() {
+      return this.$attrs.id && this.$attrs.id !== "" ? this.$attrs.id : this.inputName;
+    },
+    inputName() {
+      return "input" + d.GenRandomId();
+    },
+    hasTrailingIcon() {
+      return this.success;
+    },
+    hasPlaceholder() {
+      return this.placeholder !== "" && this.placeholder !== void 0;
+    },
+    computedPlaceholder() {
+      return this.hasPlaceholder ? this.placeholder : this.label;
+    },
+    isValidLabel() {
+      const l = this.label || this.labelOutside;
+      return l || 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."), l;
+    },
+    ariaDescribedby() {
+      const l = [];
+      return this.helperText.length > 0 && l.push("".concat(this.inputName, "-helper-text")), this.$attrs["aria-describedby"] && l.push(this.$attrs["aria-describedby"]), l.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(l) {
+      this.$emit("update:modelValue", this.type === "number" && typeof this.modelValue == "number" ? parseFloat(l.target.value, 10) : l.target.value);
+    },
+    handleTrailingButtonClick(l) {
+      this.$emit("trailing-button-click", l);
+    }
+  }
+}, m = { class: "input-field__main-wrapper" }, f = ["id", "type", "disabled", "placeholder", "aria-describedby", "value"], b = ["for"], g = { class: "input-field__icon input-field__icon--leading" }, y = {
+  key: 2,
+  class: "input-field__icon input-field__icon--trailing"
+}, k = ["id"];
+function B(l, n, t, N, v, i) {
+  const s = e.resolveComponent("NcButton"), a = e.resolveComponent("Check"), r = e.resolveComponent("AlertCircle");
+  return e.openBlock(), e.createElementBlock("div", {
+    class: e.normalizeClass(["input-field", [{ "input-field--disabled": t.disabled }, l.$props.class]])
+  }, [
+    e.createElementVNode("div", m, [
+      e.createElementVNode("input", e.mergeProps(l.$attrs, {
+        id: i.computedId,
+        ref: "input",
+        class: ["input-field__input", [
+          t.inputClass,
+          {
+            "input-field__input--trailing-icon": t.showTrailingButton || i.hasTrailingIcon,
+            "input-field__input--leading-icon": !!l.$slots.icon,
+            "input-field__input--label-outside": t.labelOutside,
+            "input-field__input--success": t.success,
+            "input-field__input--error": t.error,
+            "input-field__input--pill": t.pill
+          }
+        ]],
+        type: t.type,
+        disabled: t.disabled,
+        placeholder: i.computedPlaceholder,
+        "aria-describedby": i.ariaDescribedby,
+        "aria-live": "polite",
+        value: t.modelValue.toString(),
+        onInput: n[0] || (n[0] = (...o) => i.handleInput && i.handleInput(...o))
+      }), null, 16, f),
+      !t.labelOutside && i.isValidLabel ? (e.openBlock(), e.createElementBlock("label", {
+        key: 0,
+        class: e.normalizeClass(["input-field__label", [{
+          "input-field__label--trailing-icon": t.showTrailingButton || i.hasTrailingIcon,
+          "input-field__label--leading-icon": !!l.$slots.icon
+        }]]),
+        for: i.computedId
+      }, e.toDisplayString(t.label), 11, b)) : e.createCommentVNode("", !0),
+      e.withDirectives(e.createElementVNode("div", g, [
+        e.renderSlot(l.$slots, "icon", {}, void 0, !0)
+      ], 512), [
+        [e.vShow, !!l.$slots.icon]
+      ]),
+      t.showTrailingButton ? (e.openBlock(), e.createBlock(s, {
+        key: 1,
+        type: "tertiary-no-background",
+        class: e.normalizeClass(["input-field__trailing-button", [{
+          "input-field__trailing-button--pill": t.pill
+        }]]),
+        "aria-label": t.trailingButtonLabel,
+        disabled: t.disabled,
+        onClick: i.handleTrailingButtonClick
+      }, {
+        icon: e.withCtx(() => [
+          e.renderSlot(l.$slots, "trailing-button-icon", {}, void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["class", "aria-label", "disabled", "onClick"])) : t.success || t.error ? (e.openBlock(), e.createElementBlock("div", y, [
+        t.success ? (e.openBlock(), e.createBlock(a, {
+          key: 0,
+          size: 20,
+          style: { color: "var(--color-success-text)" }
+        })) : t.error ? (e.openBlock(), e.createBlock(r, {
+          key: 1,
+          size: 20,
+          style: { color: "var(--color-error-text)" }
+        })) : e.createCommentVNode("", !0)
+      ])) : e.createCommentVNode("", !0)
+    ]),
+    t.helperText.length > 0 ? (e.openBlock(), e.createElementBlock("p", {
+      key: 0,
+      id: "".concat(i.inputName, "-helper-text"),
+      class: e.normalizeClass(["input-field__helper-text-message", {
+        "input-field__helper-text-message--error": t.error,
+        "input-field__helper-text-message--success": t.success
+      }])
+    }, [
+      t.success ? (e.openBlock(), e.createBlock(a, {
+        key: 0,
+        class: "input-field__helper-text-message__icon",
+        size: 18
+      })) : t.error ? (e.openBlock(), e.createBlock(r, {
+        key: 1,
+        class: "input-field__helper-text-message__icon",
+        size: 18
+      })) : e.createCommentVNode("", !0),
+      e.createTextVNode(" " + e.toDisplayString(t.helperText), 1)
+    ], 10, k)) : e.createCommentVNode("", !0)
+  ], 2);
+}
+const C = /* @__PURE__ */ p._export_sfc(_, [["render", B], ["__scopeId", "data-v-53a71842"]]);
+exports.NcInputField = C;

package/dist/chunks/NcInputField-6vveMrmf.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcInputField-6vveMrmf.cjs","sources":["../../src/components/NcInputField/NcInputField.vue"],"sourcesContent":["<!--\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\n\nThis component is used by the other Fields components.\nIt extends and styles an HTMLInputElement.\n\nYou cannot use it as is. This is here for documentation purposes.\nSee the other field components.\n\nFor a list of all available props and attributes, please check the [HTMLInputElement documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n\n</docs>\n\n<template>\n\t<div class=\"input-field\" :class=\"[{ 'input-field--disabled': disabled }, $props.class ]\">\n\t\t<div class=\"input-field__main-wrapper\">\n\t\t\t<input v-bind=\"$attrs\"\n\t\t\t\t:id=\"computedId\"\n\t\t\t\tref=\"input\"\n\t\t\t\tclass=\"input-field__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'input-field__input--trailing-icon': showTrailingButton || hasTrailingIcon,\n\t\t\t\t\t\t'input-field__input--leading-icon': !!$slots.icon,\n\t\t\t\t\t\t'input-field__input--label-outside': labelOutside,\n\t\t\t\t\t\t'input-field__input--success': success,\n\t\t\t\t\t\t'input-field__input--error': error,\n\t\t\t\t\t\t'input-field__input--pill': pill,\n\t\t\t\t\t}]\"\n\t\t\t\t:value=\"modelValue.toString()\"\n\t\t\t\t@input=\"handleInput\">\n\t\t\t<!-- Label -->\n\t\t\t<label v-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"input-field__label\"\n\t\t\t\t:class=\"[{\n\t\t\t\t\t'input-field__label--trailing-icon': showTrailingButton || hasTrailingIcon,\n\t\t\t\t\t'input-field__label--leading-icon': !!$slots.icon,\n\t\t\t\t}]\"\n\t\t\t\t:for=\"computedId\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\n\t\t\t<!-- Leading icon -->\n\t\t\t<div v-show=\"!!$slots.icon\" class=\"input-field__icon input-field__icon--leading\">\n\t\t\t\t<!-- Leading material design icon in the text field, set the size to 18 -->\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</div>\n\n\t\t\t<!-- trailing button -->\n\t\t\t<NcButton v-if=\"showTrailingButton\"\n\t\t\t\ttype=\"tertiary-no-background\"\n\t\t\t\tclass=\"input-field__trailing-button\"\n\t\t\t\t:class=\"[{\n\t\t\t\t\t'input-field__trailing-button--pill': pill,\n\t\t\t\t}]\"\n\t\t\t\t:aria-label=\"trailingButtonLabel\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@click=\"handleTrailingButtonClick\">\n\t\t\t\t<!-- Populating this slot creates a trailing button within the\n\t\t\t\tinput boundaries that emits a `trailing-button-click` event -->\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"trailing-button-icon\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<!-- Success and error icons -->\n\t\t\t<div v-else-if=\"success || error\"\n\t\t\t\tclass=\"input-field__icon input-field__icon--trailing\">\n\t\t\t\t<Check v-if=\"success\" :size=\"20\" style=\"color: var(--color-success-text);\" />\n\t\t\t\t<AlertCircle v-else-if=\"error\" :size=\"20\" style=\"color: var(--color-error-text);\" />\n\t\t\t</div>\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=\"input-field__helper-text-message\"\n\t\t\t:class=\"{\n\t\t\t\t'input-field__helper-text-message--error': error,\n\t\t\t\t'input-field__helper-text-message--success': success,\n\t\t\t}\">\n\t\t\t<Check v-if=\"success\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t<AlertCircle v-else-if=\"error\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.ts'\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: 'NcInputField',\n\n\tcomponents: {\n\t\tNcButton,\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 * If type is 'number' and a number is passed as value than the type of `update:value` will also be 'number'\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [String, Number],\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The type of the input element\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'text',\n\t\t\tvalidator: (value) => [\n\t\t\t\t'text',\n\t\t\t\t'password',\n\t\t\t\t'email',\n\t\t\t\t'tel',\n\t\t\t\t'url',\n\t\t\t\t'search',\n\t\t\t\t'number',\n\t\t\t].includes(value),\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\t * Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).\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 * Controls whether to display the trailing button.\n\t\t */\n\t\tshowTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Label of the trailing button\n\t\t *\n\t\t * Required when showTrailingButton is set\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\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 * Specifies whether the input should have a pill form.\n\t\t * By default, input has rounded corners.\n\t\t */\n\t\tpill: {\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 root component.\n\t\t */\n\t\tclass: {\n\t\t\ttype: [Object, String, Array],\n\t\t\tdefault: '',\n\t\t},\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\t},\n\n\temits: [\n\t\t'update:modelValue',\n\t\t'trailing-button-click',\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\thasTrailingIcon() {\n\t\t\treturn this.success\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', this.type === 'number' && typeof this.modelValue === 'number' ? parseFloat(event.target.value, 10) : event.target.value)\n\t\t},\n\n\t\thandleTrailingButtonClick(event) {\n\t\t\tthis.$emit('trailing-button-click', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.input-field {\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\n\t&__main-wrapper {\n\t\theight: var(--default-clickable-area);\n\t\tposition: relative;\n\t}\n\n\t&--disabled {\n\t\topacity: 0.4;\n\t\tfilter: saturate(0.4);\n\t}\n\n\t&__input {\n\t\tmargin: 0;\n\t\tpadding-inline: 12px 6px; // align with label 8px margin label + 6px padding label - 2px border input\n\t\theight: var(--default-clickable-area) !important;\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\t\t-webkit-appearance: textfield !important;\n\t\t-moz-appearance: textfield !important;\n\n\t\t// Center text if external label is used\n\t\t&--label-outside {\n\t\t\tpadding-block: 0;\n\t\t}\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&:focus + .input-field__label,\n\t\t&:hover:not(:placeholder-shown) + .input-field__label {\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\n\t\t// 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&--leading-icon {\n\t\t\tpadding-inline-start: var(--default-clickable-area);\n\t\t}\n\n\t\t&--trailing-icon {\n\t\t\tpadding-inline-end: var(--default-clickable-area);\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\n\t\t&--pill {\n\t\t\tborder-radius: var(--border-radius-pill);\n\t\t}\n\t}\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 14px 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\n\t\t&--leading-icon {\n\t\t\tmargin-inline-start: var(--default-clickable-area);\n\t\t}\n\n\t\t&--trailing-icon {\n\t\t\tmargin-inline-end: var(--default-clickable-area);\n\t\t}\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\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: 5px;\n\t\tmargin-inline-start: 9px;\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\t&--leading-icon {\n\t\t\tmargin-inline-start: 41px;\n\t\t}\n\t}\n\n\t&__icon {\n\t\tposition: absolute;\n\t\theight: var(--default-clickable-area);\n\t\twidth: var(--default-clickable-area);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\topacity: 0.7;\n\n\t\t&--leading {\n\t\t\tinset-block-end: 0;\n\t\t\tinset-inline-start: 2px;\n\t\t}\n\n\t\t&--trailing {\n\t\t\tinset-block-end: 0;\n\t\t\tinset-inline-end: 2px;\n\t\t}\n\t}\n\n\t&__trailing-button {\n\t\t&.button-vue {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tborder-radius: var(--border-radius-large);\n\t\t}\n\n\t\t&--pill.button-vue {\n\t\t\tborder-radius: var(--border-radius-pill);\n\t\t}\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","NcButton","value","isValidLabel","ariaDescribedby","event","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_6","vue","$options","$props","_ctx","_cache","args","_hoisted_5"],"mappings":"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"}