@nextcloud/vue 8.0.0-beta.6 → 8.0.0-beta.8

package/dist/Components/NcIconSvgWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcIconSvgWrapper.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"NcIconSvgWrapper.cjs","sources":["../../src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue"],"sourcesContent":["<!--\n  - @copyright 2022 Christopher Ng <chrng8@gmail.com>\n  -\n  - @author Christopher Ng <chrng8@gmail.com>\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 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\n<docs>\n### Description\n\nRender raw SVG string icons.\n\n### Example\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<NcButton aria-label=\"Close\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"closeSvg\" name=\"Close\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Settings\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"cogSvg\" name=\"Cog\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Add\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"plusSvg\" name=\"Plus\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Send\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"sendSvg\" name=\"Send\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Star\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"starSvg\" name=\"Star\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport closeSvg from '@mdi/svg/svg/close.svg?raw'\nimport cogSvg from '@mdi/svg/svg/cog.svg?raw'\nimport plusSvg from '@mdi/svg/svg/plus.svg?raw'\nimport sendSvg from '@mdi/svg/svg/send.svg?raw'\nimport starSvg from '@mdi/svg/svg/star.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcloseSvg,\n\t\t\tcogSvg,\n\t\t\tplusSvg,\n\t\t\tsendSvg,\n\t\t\tstarSvg,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(5, max-content);\n\tgap: 10px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span class=\"icon-vue\"\n\t\trole=\"img\"\n\t\t:aria-hidden=\"!name ? true : undefined\"\n\t\t:aria-label=\"name || undefined\"\n\t\tv-html=\"cleanSvg\" /> <!-- eslint-disable-line vue/no-v-html -->\n</template>\n\n<script>\nimport Vue from 'vue'\nimport DOMPurify from 'dompurify'\n\nexport default {\n\tname: 'NcIconSvgWrapper',\n\n\tprops: {\n\t\t/**\n\t\t * Raw SVG string to render\n\t\t */\n\t\tsvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Label of the icon, used in aria-label\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tcleanSvg() {\n\t\t\tif (!this.svg) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst svg = DOMPurify.sanitize(this.svg)\n\n\t\t\tconst svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml')\n\n\t\t\tif (svgDocument.querySelector('parsererror')) {\n\t\t\t\tVue.util.warn('SVG is not valid')\n\t\t\t\treturn ''\n\t\t\t}\n\n\t\t\tif (svgDocument.documentElement.id) {\n\t\t\t\tsvgDocument.documentElement.removeAttribute('id')\n\t\t\t}\n\n\t\t\treturn svgDocument.documentElement.outerHTML\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.icon-vue {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tmin-width: 44px;\n\tmin-height: 44px;\n\topacity: 1;\n\n\t&:deep(svg) {\n\t\tfill: currentColor;\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tmax-width: 20px;\n\t\tmax-height: 20px;\n\t}\n}\n</style>\n"],"names":["_sfc_main","svg","DOMPurify__default","svgDocument","Vue__default"],"mappings":";;AAsGA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,UAAA,CAAA,KAAA;AACA;AAGA,YAAAC,IAAAC,EAAA,QAAA,SAAA,KAAA,GAAA,GAEAC,IAAA,IAAA,UAAA,EAAA,gBAAAF,GAAA,eAAA;AAEA,aAAAE,EAAA,cAAA,aAAA,KACAC,EAAA,QAAA,KAAA,KAAA,kBAAA,GACA,OAGAD,EAAA,gBAAA,MACAA,EAAA,gBAAA,gBAAA,IAAA,GAGAA,EAAA,gBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}

package/dist/Components/NcIconSvgWrapper.mjs

@@ -1,18 +1,48 @@
-import "../assets/index11.css";
-import { sanitizeSVG as n } from "@skjnldsv/sanitize-svg";
-import { n as e } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-const s = { name: "NcIconSvgWrapper", props: { svg: { type: String, default: "" }, name: { type: String, default: "" } }, data() {
-  return { cleanSvg: "" };
-}, async beforeMount() {
-  await this.sanitizeSVG();
-}, methods: { async sanitizeSVG() {
-  this.svg && (this.cleanSvg = await n(this.svg));
-} } };
+import "../assets/index-c7905a53.css";
+import t from "vue";
+import o from "dompurify";
+import { n as a } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const s = {
+  name: "NcIconSvgWrapper",
+  props: {
+    /**
+     * Raw SVG string to render
+     */
+    svg: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Label of the icon, used in aria-label
+     */
+    name: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    cleanSvg() {
+      if (!this.svg)
+        return;
+      const r = o.sanitize(this.svg), e = new DOMParser().parseFromString(r, "image/svg+xml");
+      return e.querySelector("parsererror") ? (t.util.warn("SVG is not valid"), "") : (e.documentElement.id && e.documentElement.removeAttribute("id"), e.documentElement.outerHTML);
+    }
+  }
+};
 var i = function() {
-  var a = this, t = a._self._c;
-  return t("span", { staticClass: "icon-vue", attrs: { role: "img", "aria-hidden": !a.name, "aria-label": a.name }, domProps: { innerHTML: a._s(a.cleanSvg) } });
-}, r = [], o = e(s, i, r, !1, null, "f1518988", null, null);
-const m = o.exports;
+  var e = this, n = e._self._c;
+  return n("span", { staticClass: "icon-vue", attrs: { role: "img", "aria-hidden": e.name ? void 0 : !0, "aria-label": e.name || void 0 }, domProps: { innerHTML: e._s(e.cleanSvg) } });
+}, c = [], m = /* @__PURE__ */ a(
+  s,
+  i,
+  c,
+  !1,
+  null,
+  "3f335862",
+  null,
+  null
+);
+const d = m.exports;
 export {
-  m as default
+  d as default
 };

package/dist/Components/NcIconSvgWrapper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcIconSvgWrapper.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcIconSvgWrapper.mjs","sources":["../../src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue"],"sourcesContent":["<!--\n  - @copyright 2022 Christopher Ng <chrng8@gmail.com>\n  -\n  - @author Christopher Ng <chrng8@gmail.com>\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 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\n<docs>\n### Description\n\nRender raw SVG string icons.\n\n### Example\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<NcButton aria-label=\"Close\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"closeSvg\" name=\"Close\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Settings\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"cogSvg\" name=\"Cog\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Add\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"plusSvg\" name=\"Plus\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Send\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"sendSvg\" name=\"Send\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Star\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"starSvg\" name=\"Star\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport closeSvg from '@mdi/svg/svg/close.svg?raw'\nimport cogSvg from '@mdi/svg/svg/cog.svg?raw'\nimport plusSvg from '@mdi/svg/svg/plus.svg?raw'\nimport sendSvg from '@mdi/svg/svg/send.svg?raw'\nimport starSvg from '@mdi/svg/svg/star.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcloseSvg,\n\t\t\tcogSvg,\n\t\t\tplusSvg,\n\t\t\tsendSvg,\n\t\t\tstarSvg,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(5, max-content);\n\tgap: 10px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span class=\"icon-vue\"\n\t\trole=\"img\"\n\t\t:aria-hidden=\"!name ? true : undefined\"\n\t\t:aria-label=\"name || undefined\"\n\t\tv-html=\"cleanSvg\" /> <!-- eslint-disable-line vue/no-v-html -->\n</template>\n\n<script>\nimport Vue from 'vue'\nimport DOMPurify from 'dompurify'\n\nexport default {\n\tname: 'NcIconSvgWrapper',\n\n\tprops: {\n\t\t/**\n\t\t * Raw SVG string to render\n\t\t */\n\t\tsvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Label of the icon, used in aria-label\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tcleanSvg() {\n\t\t\tif (!this.svg) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst svg = DOMPurify.sanitize(this.svg)\n\n\t\t\tconst svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml')\n\n\t\t\tif (svgDocument.querySelector('parsererror')) {\n\t\t\t\tVue.util.warn('SVG is not valid')\n\t\t\t\treturn ''\n\t\t\t}\n\n\t\t\tif (svgDocument.documentElement.id) {\n\t\t\t\tsvgDocument.documentElement.removeAttribute('id')\n\t\t\t}\n\n\t\t\treturn svgDocument.documentElement.outerHTML\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.icon-vue {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tmin-width: 44px;\n\tmin-height: 44px;\n\topacity: 1;\n\n\t&:deep(svg) {\n\t\tfill: currentColor;\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tmax-width: 20px;\n\t\tmax-height: 20px;\n\t}\n}\n</style>\n"],"names":["_sfc_main","svg","DOMPurify","svgDocument","Vue"],"mappings":";;;;AAsGA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,UAAA,CAAA,KAAA;AACA;AAGA,YAAAC,IAAAC,EAAA,SAAA,KAAA,GAAA,GAEAC,IAAA,IAAA,UAAA,EAAA,gBAAAF,GAAA,eAAA;AAEA,aAAAE,EAAA,cAAA,aAAA,KACAC,EAAA,KAAA,KAAA,kBAAA,GACA,OAGAD,EAAA,gBAAA,MACAA,EAAA,gBAAA,gBAAA,IAAA,GAGAA,EAAA,gBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}

package/dist/Components/NcInputField.cjs

@@ -1 +1,210 @@
-var p=require("../assets/index35.css");const i=require("./NcButton.cjs"),l=require("../chunks/GenRandomId-67df40eb.cjs"),s=require("vue-material-design-icons/AlertCircleOutline.vue"),a=require("vue-material-design-icons/Check.vue"),r=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");const n={name:"NcInputField",components:{NcButton:i,AlertCircle:s,Check:a},inheritAttrs:!1,props:{value:{type:String,required:!0},type:{type:String,default:"text",validator:e=>["text","password","email","tel","url","search","number"].includes(e)},label:{type:String,default:void 0},labelOutside:{type:Boolean,default:!1},placeholder:{type:String,default:void 0},showTrailingButton:{type:Boolean,default:!1},trailingButtonLabel:{type:String,default:""},success:{type:Boolean,default:!1},error:{type:Boolean,default:!1},helperText:{type:String,default:""},disabled:{type:Boolean,default:!1},inputClass:{type:[Object,String],default:""}},emits:["update:value","trailing-button-click"],computed:{computedId(){return this.$attrs.id&&this.$attrs.id!==""?this.$attrs.id:this.inputName},inputName(){return"input"+l.GenRandomId()},hasLeadingIcon(){return this.$slots.default},hasTrailingIcon(){return this.success},hasPlaceholder(){return this.placeholder!==""&&this.placeholder!==void 0},computedPlaceholder(){return this.hasPlaceholder?this.placeholder:this.label},isValidLabel(){const e=this.label||this.labelOutside;return e||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."),e},ariaDescribedby(){const e=[];return this.helperText.length>0&&e.push(`${this.inputName}-helper-text`),this.$attrs["aria-describedby"]&&e.push(this.$attrs["aria-describedby"]),e.join(" ")||null}},methods:{focus(){this.$refs.input.focus()},select(){this.$refs.input.select()},handleInput(e){this.$emit("update:value",e.target.value)},handleTrailingButtonClick(e){this.$emit("trailing-button-click",e)}}};var u=function(){var e=this,t=e._self._c;return t("div",{staticClass:"input-field",class:{"input-field--disabled":e.disabled}},[t("div",{staticClass:"input-field__main-wrapper"},[t("input",e._g(e._b({ref:"input",staticClass:"input-field__input",class:[e.inputClass,{"input-field__input--trailing-icon":e.showTrailingButton||e.hasTrailingIcon,"input-field__input--leading-icon":e.hasLeadingIcon,"input-field__input--label-outside":e.labelOutside,"input-field__input--success":e.success,"input-field__input--error":e.error}],attrs:{id:e.computedId,type:e.type,disabled:e.disabled,placeholder:e.computedPlaceholder,"aria-describedby":e.ariaDescribedby,"aria-live":"polite"},domProps:{value:e.value},on:{input:e.handleInput}},"input",e.$attrs,!1),e.$listeners)),!e.labelOutside&&e.isValidLabel?t("label",{staticClass:"input-field__label",class:[{"input-field__label--trailing-icon":e.showTrailingButton||e.hasTrailingIcon,"input-field__label--leading-icon":e.hasLeadingIcon}],attrs:{for:e.computedId}},[e._v(" "+e._s(e.label)+" ")]):e._e(),t("div",{directives:[{name:"show",rawName:"v-show",value:e.hasLeadingIcon,expression:"hasLeadingIcon"}],staticClass:"input-field__icon input-field__icon--leading"},[e._t("default")],2),e.showTrailingButton?t("NcButton",{staticClass:"input-field__clear-button",attrs:{type:"tertiary-no-background","aria-label":e.trailingButtonLabel,disabled:e.disabled},on:{click:e.handleTrailingButtonClick},scopedSlots:e._u([{key:"icon",fn:function(){return[e._t("trailing-button-icon")]},proxy:!0}],null,!0)}):e.success||e.error?t("div",{staticClass:"input-field__icon input-field__icon--trailing"},[e.success?t("Check",{staticStyle:{color:"var(--color-success-text)"},attrs:{size:20}}):e.error?t("AlertCircle",{staticStyle:{color:"var(--color-error-text)"},attrs:{size:20}}):e._e()],1):e._e()],1),e.helperText.length>0?t("p",{staticClass:"input-field__helper-text-message",class:{"input-field__helper-text-message--error":e.error,"input-field__helper-text-message--success":e.success},attrs:{id:`${e.inputName}-helper-text`}},[e.success?t("Check",{staticClass:"input-field__helper-text-message__icon",attrs:{size:18}}):e.error?t("AlertCircle",{staticClass:"input-field__helper-text-message__icon",attrs:{size:18}}):e._e(),e._v(" "+e._s(e.helperText)+" ")],1):e._e()])},o=[],d=r.normalizeComponent(n,u,o,!1,null,"6c26cc55",null,null);const c=d.exports;module.exports=c;
+var b = require("../assets/index-50b0766d.css");
+const s = require("./NcButton.cjs"), a = require("../chunks/GenRandomId-c214d235.cjs"), n = require("vue-material-design-icons/AlertCircleOutline.vue"), r = require("vue-material-design-icons/Check.vue"), u = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), l = (t) => t && t.__esModule ? t : { default: t }, o = /* @__PURE__ */ l(n), c = /* @__PURE__ */ l(r);
+const d = {
+  name: "NcInputField",
+  components: {
+    NcButton: s,
+    AlertCircle: o.default,
+    Check: c.default
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * The value of the input field
+     */
+    value: {
+      type: String,
+      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
+    },
+    /**
+     * Class to add to the input field.
+     * Necessary to use NcInputField in the NcActionInput component.
+     */
+    inputClass: {
+      type: [Object, String],
+      default: ""
+    }
+  },
+  emits: [
+    "update:value",
+    "trailing-button-click"
+  ],
+  computed: {
+    computedId() {
+      return this.$attrs.id && this.$attrs.id !== "" ? this.$attrs.id : this.inputName;
+    },
+    inputName() {
+      return "input" + a.GenRandomId();
+    },
+    hasLeadingIcon() {
+      return this.$slots.default;
+    },
+    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(`${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:value", t.target.value);
+    },
+    handleTrailingButtonClick(t) {
+      this.$emit("trailing-button-click", t);
+    }
+  }
+};
+var p = function() {
+  var e = this, i = e._self._c;
+  return i("div", { staticClass: "input-field", class: { "input-field--disabled": e.disabled } }, [i("div", { staticClass: "input-field__main-wrapper" }, [i("input", e._g(e._b({ ref: "input", staticClass: "input-field__input", class: [
+    e.inputClass,
+    {
+      "input-field__input--trailing-icon": e.showTrailingButton || e.hasTrailingIcon,
+      "input-field__input--leading-icon": e.hasLeadingIcon,
+      "input-field__input--label-outside": e.labelOutside,
+      "input-field__input--success": e.success,
+      "input-field__input--error": e.error
+    }
+  ], attrs: { id: e.computedId, type: e.type, disabled: e.disabled, placeholder: e.computedPlaceholder, "aria-describedby": e.ariaDescribedby, "aria-live": "polite" }, domProps: { value: e.value }, on: { input: e.handleInput } }, "input", e.$attrs, !1), e.$listeners)), !e.labelOutside && e.isValidLabel ? i("label", { staticClass: "input-field__label", class: [{
+    "input-field__label--trailing-icon": e.showTrailingButton || e.hasTrailingIcon,
+    "input-field__label--leading-icon": e.hasLeadingIcon
+  }], attrs: { for: e.computedId } }, [e._v(" " + e._s(e.label) + " ")]) : e._e(), i("div", { directives: [{ name: "show", rawName: "v-show", value: e.hasLeadingIcon, expression: "hasLeadingIcon" }], staticClass: "input-field__icon input-field__icon--leading" }, [e._t("default")], 2), e.showTrailingButton ? i("NcButton", { staticClass: "input-field__clear-button", attrs: { type: "tertiary-no-background", "aria-label": e.trailingButtonLabel, disabled: e.disabled }, on: { click: e.handleTrailingButtonClick }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [e._t("trailing-button-icon")];
+  }, proxy: !0 }], null, !0) }) : e.success || e.error ? i("div", { staticClass: "input-field__icon input-field__icon--trailing" }, [e.success ? i("Check", { staticStyle: { color: "var(--color-success-text)" }, attrs: { size: 20 } }) : e.error ? i("AlertCircle", { staticStyle: { color: "var(--color-error-text)" }, attrs: { size: 20 } }) : e._e()], 1) : e._e()], 1), e.helperText.length > 0 ? i("p", { staticClass: "input-field__helper-text-message", class: {
+    "input-field__helper-text-message--error": e.error,
+    "input-field__helper-text-message--success": e.success
+  }, attrs: { id: `${e.inputName}-helper-text` } }, [e.success ? i("Check", { staticClass: "input-field__helper-text-message__icon", attrs: { size: 18 } }) : e.error ? i("AlertCircle", { staticClass: "input-field__helper-text-message__icon", attrs: { size: 18 } }) : e._e(), e._v(" " + e._s(e.helperText) + " ")], 1) : e._e()]);
+}, _ = [], h = /* @__PURE__ */ u.normalizeComponent(
+  d,
+  p,
+  _,
+  !1,
+  null,
+  "92748c61",
+  null,
+  null
+);
+const f = h.exports;
+module.exports = f;

package/dist/Components/NcInputField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcInputField.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"NcInputField.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 }\">\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': hasLeadingIcon,\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}]\"\n\t\t\t\t:value=\"value\"\n\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t@input=\"handleInput\">\n\t\t\t<!-- Label -->\n\t\t\t<label v-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"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': hasLeadingIcon,\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=\"hasLeadingIcon\" 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 />\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__clear-button\"\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.js'\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 */\n\t\tvalue: {\n\t\t\ttype: String,\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\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:value',\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\thasLeadingIcon() {\n\t\t\treturn this.$slots.default\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:value', 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: 38px; // 44px - 6px margin\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: 12px 6px; // align with label 8px margin label + 6px padding label - 2px border input\n\t\theight: 38px !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: var(--color-primary-element);\n\t\t}\n\n\t\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t\t&:not(:focus,&--label-outside)::placeholder {\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&:focus {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: unset !important; // Override server rules\n\t\t}\n\n\t\t&--leading-icon {\n\t\t\tpadding-inline-start: 32px;\n\t\t}\n\n\t\t&--trailing-icon {\n\t\t\tpadding-inline-end: 32px;\n\t\t}\n\n\t\t&--success {\n\t\t\tborder-color: var(--color-success) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\n\t\t\t// Align label text color with border color (on hover / focus)\n\t\t\t&:focus + .input-field__label,\n\t\t\t&:hover:not(:placeholder-shown) + .input-field__label {\n\t\t\t\tcolor: var(--color-success-text);\n\t\t\t}\n\t\t}\n\n\t\t&--error {\n\t\t\tborder-color: var(--color-error) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\n\t\t\t// Align label text color with border color (on hover / focus)\n\t\t\t&:focus + .input-field__label,\n\t\t\t&:hover:not(:placeholder-shown) + .input-field__label {\n\t\t\t\tcolor: var(--color-error-text);\n\t\t\t}\n\t\t}\n\n\t\t// Align label text color with border color (on hover / focus)\n\t\t&:not(&--success, &--error) {\n\t\t\t&:focus + .input-field__label,\n\t\t\t&:hover:not(:placeholder-shown) + .input-field__label {\n\t\t\t\tcolor: var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t}\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 14px 0;\n\t\t// fix height and line height to center label\n\t\theight: 17px;\n\t\tmax-width: fit-content;\n\t\tline-height: 1;\n\t\tinset-block-start: 12px;\n\t\tinset-inline: 0;\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\n\t\t&--leading-icon {\n\t\t\t// 32px icon + 2px border\n\t\t\tmargin-inline-start: 34px;\n\t\t}\n\n\t\t&--trailing-icon {\n\t\t\t// 32px icon + 2px border\n\t\t\tmargin-inline-end: 34px;\n\t\t}\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(:placeholder-shown) + &__label {\n\t\tinset-block-start: -8px;\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\theight: 16px;\n\t\tpadding-inline: 5px;\n\t\tpadding-block-start: 2px;\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: 29px;\n\t\t}\n\t}\n\n\t&__icon {\n\t\tposition: absolute;\n\t\theight: 32px;\n\t\twidth: 32px;\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: 3px;\n\t\t\tinset-inline-start: 2px;\n\t\t}\n\n\t\t&--trailing {\n\t\t\tinset-block-end: 3px;\n\t\t\tinset-inline-end: 2px;\n\t\t}\n\t}\n\n\t&__clear-button.button-vue {\n\t\tposition: absolute;\n\t\tinset-block-end: 3px;\n\t\tinset-inline-end: 2px;\n\t\tmin-width: unset;\n\t\tmin-height: unset;\n\t\theight: 32px;\n\t\twidth: 32px !important;\n\t\tborder-radius: var(--border-radius-large);\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","Components_NcButton","AlertCircle__default","Check__default","value","GenRandomId","isValidLabel","ariaDescribedby","event"],"mappings":"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"}

package/dist/Components/NcInputField.mjs

@@ -1,43 +1,216 @@
-import "../assets/index12.css";
-import i from "./NcButton.mjs";
-import { G as l } from "../chunks/GenRandomId-1e1b509a.mjs";
+import "../assets/index-50b0766d.css";
+import l from "./NcButton.mjs";
+import { G as a } from "../chunks/GenRandomId-cb9ccebe.mjs";
 import s from "vue-material-design-icons/AlertCircleOutline.vue";
-import a from "vue-material-design-icons/Check.vue";
-import { n as r } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-const n = { name: "NcInputField", components: { NcButton: i, AlertCircle: s, Check: a }, inheritAttrs: !1, props: { value: { type: String, required: !0 }, type: { type: String, default: "text", validator: (e) => ["text", "password", "email", "tel", "url", "search", "number"].includes(e) }, label: { type: String, default: void 0 }, labelOutside: { type: Boolean, default: !1 }, placeholder: { type: String, default: void 0 }, showTrailingButton: { type: Boolean, default: !1 }, trailingButtonLabel: { type: String, default: "" }, success: { type: Boolean, default: !1 }, error: { type: Boolean, default: !1 }, helperText: { type: String, default: "" }, disabled: { type: Boolean, default: !1 }, inputClass: { type: [Object, String], default: "" } }, emits: ["update:value", "trailing-button-click"], computed: { computedId() {
-  return this.$attrs.id && this.$attrs.id !== "" ? this.$attrs.id : this.inputName;
-}, inputName() {
-  return "input" + l();
-}, hasLeadingIcon() {
-  return this.$slots.default;
-}, hasTrailingIcon() {
-  return this.success;
-}, hasPlaceholder() {
-  return this.placeholder !== "" && this.placeholder !== void 0;
-}, computedPlaceholder() {
-  return this.hasPlaceholder ? this.placeholder : this.label;
-}, isValidLabel() {
-  const e = this.label || this.labelOutside;
-  return e || 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."), e;
-}, ariaDescribedby() {
-  const e = [];
-  return this.helperText.length > 0 && e.push(`${this.inputName}-helper-text`), this.$attrs["aria-describedby"] && e.push(this.$attrs["aria-describedby"]), e.join(" ") || null;
-} }, methods: { focus() {
-  this.$refs.input.focus();
-}, select() {
-  this.$refs.input.select();
-}, handleInput(e) {
-  this.$emit("update:value", e.target.value);
-}, handleTrailingButtonClick(e) {
-  this.$emit("trailing-button-click", e);
-} } };
-var o = function() {
-  var e = this, t = e._self._c;
-  return t("div", { staticClass: "input-field", class: { "input-field--disabled": e.disabled } }, [t("div", { staticClass: "input-field__main-wrapper" }, [t("input", e._g(e._b({ ref: "input", staticClass: "input-field__input", class: [e.inputClass, { "input-field__input--trailing-icon": e.showTrailingButton || e.hasTrailingIcon, "input-field__input--leading-icon": e.hasLeadingIcon, "input-field__input--label-outside": e.labelOutside, "input-field__input--success": e.success, "input-field__input--error": e.error }], attrs: { id: e.computedId, type: e.type, disabled: e.disabled, placeholder: e.computedPlaceholder, "aria-describedby": e.ariaDescribedby, "aria-live": "polite" }, domProps: { value: e.value }, on: { input: e.handleInput } }, "input", e.$attrs, !1), e.$listeners)), !e.labelOutside && e.isValidLabel ? t("label", { staticClass: "input-field__label", class: [{ "input-field__label--trailing-icon": e.showTrailingButton || e.hasTrailingIcon, "input-field__label--leading-icon": e.hasLeadingIcon }], attrs: { for: e.computedId } }, [e._v(" " + e._s(e.label) + " ")]) : e._e(), t("div", { directives: [{ name: "show", rawName: "v-show", value: e.hasLeadingIcon, expression: "hasLeadingIcon" }], staticClass: "input-field__icon input-field__icon--leading" }, [e._t("default")], 2), e.showTrailingButton ? t("NcButton", { staticClass: "input-field__clear-button", attrs: { type: "tertiary-no-background", "aria-label": e.trailingButtonLabel, disabled: e.disabled }, on: { click: e.handleTrailingButtonClick }, scopedSlots: e._u([{ key: "icon", fn: function() {
+import n from "vue-material-design-icons/Check.vue";
+import { n as r } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const o = {
+  name: "NcInputField",
+  components: {
+    NcButton: l,
+    AlertCircle: s,
+    Check: n
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * The value of the input field
+     */
+    value: {
+      type: String,
+      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
+    },
+    /**
+     * Class to add to the input field.
+     * Necessary to use NcInputField in the NcActionInput component.
+     */
+    inputClass: {
+      type: [Object, String],
+      default: ""
+    }
+  },
+  emits: [
+    "update:value",
+    "trailing-button-click"
+  ],
+  computed: {
+    computedId() {
+      return this.$attrs.id && this.$attrs.id !== "" ? this.$attrs.id : this.inputName;
+    },
+    inputName() {
+      return "input" + a();
+    },
+    hasLeadingIcon() {
+      return this.$slots.default;
+    },
+    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(`${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:value", t.target.value);
+    },
+    handleTrailingButtonClick(t) {
+      this.$emit("trailing-button-click", t);
+    }
+  }
+};
+var u = function() {
+  var e = this, i = e._self._c;
+  return i("div", { staticClass: "input-field", class: { "input-field--disabled": e.disabled } }, [i("div", { staticClass: "input-field__main-wrapper" }, [i("input", e._g(e._b({ ref: "input", staticClass: "input-field__input", class: [
+    e.inputClass,
+    {
+      "input-field__input--trailing-icon": e.showTrailingButton || e.hasTrailingIcon,
+      "input-field__input--leading-icon": e.hasLeadingIcon,
+      "input-field__input--label-outside": e.labelOutside,
+      "input-field__input--success": e.success,
+      "input-field__input--error": e.error
+    }
+  ], attrs: { id: e.computedId, type: e.type, disabled: e.disabled, placeholder: e.computedPlaceholder, "aria-describedby": e.ariaDescribedby, "aria-live": "polite" }, domProps: { value: e.value }, on: { input: e.handleInput } }, "input", e.$attrs, !1), e.$listeners)), !e.labelOutside && e.isValidLabel ? i("label", { staticClass: "input-field__label", class: [{
+    "input-field__label--trailing-icon": e.showTrailingButton || e.hasTrailingIcon,
+    "input-field__label--leading-icon": e.hasLeadingIcon
+  }], attrs: { for: e.computedId } }, [e._v(" " + e._s(e.label) + " ")]) : e._e(), i("div", { directives: [{ name: "show", rawName: "v-show", value: e.hasLeadingIcon, expression: "hasLeadingIcon" }], staticClass: "input-field__icon input-field__icon--leading" }, [e._t("default")], 2), e.showTrailingButton ? i("NcButton", { staticClass: "input-field__clear-button", attrs: { type: "tertiary-no-background", "aria-label": e.trailingButtonLabel, disabled: e.disabled }, on: { click: e.handleTrailingButtonClick }, scopedSlots: e._u([{ key: "icon", fn: function() {
     return [e._t("trailing-button-icon")];
-  }, proxy: !0 }], null, !0) }) : e.success || e.error ? t("div", { staticClass: "input-field__icon input-field__icon--trailing" }, [e.success ? t("Check", { staticStyle: { color: "var(--color-success-text)" }, attrs: { size: 20 } }) : e.error ? t("AlertCircle", { staticStyle: { color: "var(--color-error-text)" }, attrs: { size: 20 } }) : e._e()], 1) : e._e()], 1), e.helperText.length > 0 ? t("p", { staticClass: "input-field__helper-text-message", class: { "input-field__helper-text-message--error": e.error, "input-field__helper-text-message--success": e.success }, attrs: { id: `${e.inputName}-helper-text` } }, [e.success ? t("Check", { staticClass: "input-field__helper-text-message__icon", attrs: { size: 18 } }) : e.error ? t("AlertCircle", { staticClass: "input-field__helper-text-message__icon", attrs: { size: 18 } }) : e._e(), e._v(" " + e._s(e.helperText) + " ")], 1) : e._e()]);
-}, u = [], d = r(n, o, u, !1, null, "6c26cc55", null, null);
-const g = d.exports;
+  }, proxy: !0 }], null, !0) }) : e.success || e.error ? i("div", { staticClass: "input-field__icon input-field__icon--trailing" }, [e.success ? i("Check", { staticStyle: { color: "var(--color-success-text)" }, attrs: { size: 20 } }) : e.error ? i("AlertCircle", { staticStyle: { color: "var(--color-error-text)" }, attrs: { size: 20 } }) : e._e()], 1) : e._e()], 1), e.helperText.length > 0 ? i("p", { staticClass: "input-field__helper-text-message", class: {
+    "input-field__helper-text-message--error": e.error,
+    "input-field__helper-text-message--success": e.success
+  }, attrs: { id: `${e.inputName}-helper-text` } }, [e.success ? i("Check", { staticClass: "input-field__helper-text-message__icon", attrs: { size: 18 } }) : e.error ? i("AlertCircle", { staticClass: "input-field__helper-text-message__icon", attrs: { size: 18 } }) : e._e(), e._v(" " + e._s(e.helperText) + " ")], 1) : e._e()]);
+}, d = [], c = /* @__PURE__ */ r(
+  o,
+  u,
+  d,
+  !1,
+  null,
+  "92748c61",
+  null,
+  null
+);
+const g = c.exports;
 export {
   g as default
 };