@aotearoan/neon 22.5.1 → 22.5.2

package/dist/components/user-input/field/NeonField.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue"),t=require("../../presentation/label/NeonLabel.vue.cjs.js"),o=require("../../../common/enums/NeonFunctionalColor.cjs.js"),n=e.defineComponent({name:"NeonField",components:{NeonLabel:t},props:{label:{type:String,required:!0},labelFor:{type:String,default:null},optional:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},optionalLabel:{type:String,default:"Optional"},message:{type:String,default:null},messageColor:{type:String,default:o.NeonFunctionalColor.LowContrast}}});module.exports=n;
+"use strict";const e=require("vue"),t=require("../../../common/enums/NeonFunctionalColor.cjs.js"),o=e.defineComponent({name:"NeonField",props:{label:{type:String,required:!0},labelFor:{type:String,default:null},optional:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},optionalLabel:{type:String,default:"Optional"},message:{type:String,default:null},messageColor:{type:String,default:t.NeonFunctionalColor.LowContrast}}});module.exports=o;
 //# sourceMappingURL=NeonField.cjs.js.map

package/dist/components/user-input/field/NeonField.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonField.cjs.js","sources":["../../../../src/components/user-input/field/NeonField.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport NeonLabel from '@/components/presentation/label/NeonLabel.vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\n\n/**\n * An HTML label implementation supporting optional labels. Use in the same way as an HTML label either wrapping the input\n * or using the label alongside the input.\n */\nexport default defineComponent({\n  name: 'NeonField',\n  components: {\n    NeonLabel,\n  },\n  props: {\n    /**\n     * The label text to render.\n     */\n    label: { type: String, required: true },\n    /**\n     * The equivalent of the <em>for</em> attribute on an HTML label.\n     */\n    labelFor: { type: String, default: null },\n    /**\n     * Display an \"optional\" indicator with the label.\n     */\n    optional: { type: Boolean, default: false },\n    /**\n     * Display label with disabled state.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * The default \"optional\" label text.\n     */\n    optionalLabel: { type: String, default: 'Optional' },\n    /**\n     * Message to display below the input field.\n     */\n    message: { type: String, default: null },\n    /**\n     * The color of message displayed under input. Can be any functional color.\n     */\n    messageColor: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonLabel","NeonFunctionalColor"],"mappings":"6JAQAA,EAAeC,kBAAgB,CAC7B,KAAM,YACN,WAAY,CACV,UAAAC,CAAA,EAEF,MAAO,CAIL,MAAO,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIjC,SAAU,CAAE,KAAM,OAAQ,QAAS,IAAA,EAInC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,cAAe,CAAE,KAAM,OAAQ,QAAS,UAAA,EAIxC,QAAS,CAAE,KAAM,OAAQ,QAAS,IAAA,EAIlC,aAAc,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,WAAA,CAAY,CAExG,CAAC"}
+{"version":3,"file":"NeonField.cjs.js","sources":["../../../../src/components/user-input/field/NeonField.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\n\n/**\n * An HTML label implementation supporting optional labels. Use in the same way as an HTML label either wrapping the input\n * or using the label alongside the input.\n */\nexport default defineComponent({\n  name: 'NeonField',\n  props: {\n    /**\n     * The label text to render.\n     */\n    label: { type: String, required: true },\n    /**\n     * The equivalent of the <em>for</em> attribute on an HTML label.\n     */\n    labelFor: { type: String, default: null },\n    /**\n     * Display an \"optional\" indicator with the label.\n     */\n    optional: { type: Boolean, default: false },\n    /**\n     * Display label with disabled state.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * The default \"optional\" label text.\n     */\n    optionalLabel: { type: String, default: 'Optional' },\n    /**\n     * Message to display below the input field.\n     */\n    message: { type: String, default: null },\n    /**\n     * The color of message displayed under input. Can be any functional color.\n     */\n    messageColor: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonFunctionalColor"],"mappings":"kGAOAA,EAAeC,kBAAgB,CAC7B,KAAM,YACN,MAAO,CAIL,MAAO,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIjC,SAAU,CAAE,KAAM,OAAQ,QAAS,IAAA,EAInC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,cAAe,CAAE,KAAM,OAAQ,QAAS,UAAA,EAIxC,QAAS,CAAE,KAAM,OAAQ,QAAS,IAAA,EAIlC,aAAc,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,WAAA,CAAY,CAExG,CAAC"}

package/dist/components/user-input/field/NeonField.es.js

@@ -1,11 +1,7 @@
 import { defineComponent as e } from "vue";
-import o from "../../presentation/label/NeonLabel.vue.es.js";
 import { NeonFunctionalColor as t } from "../../../common/enums/NeonFunctionalColor.es.js";
-const r = e({
+const a = e({
   name: "NeonField",
-  components: {
-    NeonLabel: o
-  },
   props: {
     /**
      * The label text to render.
@@ -38,6 +34,6 @@ const r = e({
   }
 });
 export {
-  r as default
+  a as default
 };
 //# sourceMappingURL=NeonField.es.js.map

package/dist/components/user-input/field/NeonField.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonField.es.js","sources":["../../../../src/components/user-input/field/NeonField.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport NeonLabel from '@/components/presentation/label/NeonLabel.vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\n\n/**\n * An HTML label implementation supporting optional labels. Use in the same way as an HTML label either wrapping the input\n * or using the label alongside the input.\n */\nexport default defineComponent({\n  name: 'NeonField',\n  components: {\n    NeonLabel,\n  },\n  props: {\n    /**\n     * The label text to render.\n     */\n    label: { type: String, required: true },\n    /**\n     * The equivalent of the <em>for</em> attribute on an HTML label.\n     */\n    labelFor: { type: String, default: null },\n    /**\n     * Display an \"optional\" indicator with the label.\n     */\n    optional: { type: Boolean, default: false },\n    /**\n     * Display label with disabled state.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * The default \"optional\" label text.\n     */\n    optionalLabel: { type: String, default: 'Optional' },\n    /**\n     * Message to display below the input field.\n     */\n    message: { type: String, default: null },\n    /**\n     * The color of message displayed under input. Can be any functional color.\n     */\n    messageColor: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonLabel","NeonFunctionalColor"],"mappings":";;;AAQA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,WAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIjC,UAAU,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAInC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,eAAe,EAAE,MAAM,QAAQ,SAAS,WAAA;AAAA;AAAA;AAAA;AAAA,IAIxC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIlC,cAAc,EAAE,MAAM,QAAqC,SAASC,EAAoB,YAAA;AAAA,EAAY;AAExG,CAAC;"}
+{"version":3,"file":"NeonField.es.js","sources":["../../../../src/components/user-input/field/NeonField.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\n\n/**\n * An HTML label implementation supporting optional labels. Use in the same way as an HTML label either wrapping the input\n * or using the label alongside the input.\n */\nexport default defineComponent({\n  name: 'NeonField',\n  props: {\n    /**\n     * The label text to render.\n     */\n    label: { type: String, required: true },\n    /**\n     * The equivalent of the <em>for</em> attribute on an HTML label.\n     */\n    labelFor: { type: String, default: null },\n    /**\n     * Display an \"optional\" indicator with the label.\n     */\n    optional: { type: Boolean, default: false },\n    /**\n     * Display label with disabled state.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * The default \"optional\" label text.\n     */\n    optionalLabel: { type: String, default: 'Optional' },\n    /**\n     * Message to display below the input field.\n     */\n    message: { type: String, default: null },\n    /**\n     * The color of message displayed under input. Can be any functional color.\n     */\n    messageColor: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonFunctionalColor"],"mappings":";;AAOA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIjC,UAAU,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAInC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,eAAe,EAAE,MAAM,QAAQ,SAAS,WAAA;AAAA;AAAA;AAAA;AAAA,IAIxC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIlC,cAAc,EAAE,MAAM,QAAqC,SAASC,EAAoB,YAAA;AAAA,EAAY;AAExG,CAAC;"}

package/dist/components/user-input/field/NeonField.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const s=require("./NeonField.cjs.js"),e=require("vue"),a=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),t=["for"],i={class:"neon-field__label-wrapper"},r={class:"neon-field__label"},d={class:"neon-field__contents"};function p(o,l,_,m,u,b){const n=e.resolveComponent("neon-label");return e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass([{"neon-field--optional":o.optional,"neon-field--disabled":o.disabled,"neon-field--with-message":o.message!==null},"neon-field"]),for:o.labelFor},[e.createElementVNode("span",i,[e.createElementVNode("span",r,e.toDisplayString(o.label),1),o.optional?(e.openBlock(),e.createBlock(n,{key:0,disabled:o.disabled,label:o.optionalLabel,class:"neon-field__optional",size:"xxs"},null,8,["disabled","label"])):e.createCommentVNode("",!0)]),e.createElementVNode("div",d,[e.renderSlot(o.$slots,"default"),o.message!==null?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass([`neon-color-${o.messageColor}`,"neon-field__message"]),onClick:l[0]||(l[0]=e.withModifiers(()=>{},["prevent","stop"]))},e.toDisplayString(o.message),3)):e.createCommentVNode("",!0)])],10,t)}const c=a(s,[["render",p]]);module.exports=c;
+"use strict";const l=require("./NeonField.cjs.js"),e=require("vue"),s=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),t=["for"],a={class:"neon-field__label-wrapper"},r={class:"neon-field__label"},i={key:0,class:"neon-field__optional"},d={class:"neon-field__contents"};function p(o,n,_,m,u,f){return e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass([{"neon-field--optional":o.optional,"neon-field--disabled":o.disabled,"neon-field--with-message":o.message!==null},"neon-field"]),for:o.labelFor},[e.createElementVNode("span",a,[e.createElementVNode("span",r,e.toDisplayString(o.label),1),o.optional?(e.openBlock(),e.createElementBlock("span",i,e.toDisplayString(o.optionalLabel),1)):e.createCommentVNode("",!0)]),e.createElementVNode("div",d,[e.renderSlot(o.$slots,"default"),o.message!==null?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass([`neon-color-${o.messageColor}`,"neon-field__message"]),onClick:n[0]||(n[0]=e.withModifiers(()=>{},["prevent","stop"]))},e.toDisplayString(o.message),3)):e.createCommentVNode("",!0)])],10,t)}const c=s(l,[["render",p]]);module.exports=c;
 //# sourceMappingURL=NeonField.vue.cjs.js.map

package/dist/components/user-input/field/NeonField.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonField.vue.cjs.js","sources":["../../../../src/components/user-input/field/NeonField.vue"],"sourcesContent":["<template>\n  <label\n    :class=\"{\n      'neon-field--optional': optional,\n      'neon-field--disabled': disabled,\n      'neon-field--with-message': message !== null,\n    }\"\n    :for=\"labelFor\"\n    class=\"neon-field\"\n  >\n    <span class=\"neon-field__label-wrapper\">\n      <span class=\"neon-field__label\">{{ label }}</span>\n      <neon-label v-if=\"optional\" :disabled=\"disabled\" :label=\"optionalLabel\" class=\"neon-field__optional\" size=\"xxs\" />\n    </span>\n    <div class=\"neon-field__contents\">\n      <!-- @slot optionally wrap the field with the label -->\n      <slot></slot>\n      <span\n        v-if=\"message !== null\"\n        :class=\"`neon-color-${messageColor}`\"\n        class=\"neon-field__message\"\n        @click.prevent.stop=\"\"\n      >\n        {{ message }}\n      </span>\n    </div>\n  </label>\n</template>\n\n<script lang=\"ts\" src=\"./NeonField.ts\"></script>\n"],"names":["_hoisted_2","_hoisted_3","_hoisted_4","_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_toDisplayString","_createBlock","_component_neon_label","_renderSlot"],"mappings":"8IAUUA,EAAA,CAAA,MAAM,2BAA2B,EAC/BC,EAAA,CAAA,MAAM,mBAAmB,EAG5BC,EAAA,CAAA,MAAM,sBAAsB,wFAbnCC,EAAAA,mBAyBQ,QAAA,CAxBL,MAAKC,EAAAA,eAAA,CAAA,wBAAkCC,EAAA,gCAAwCA,EAAA,oCAA4CA,EAAA,UAAO,MAM7H,YAAY,CAAA,EADjB,IAAKA,EAAA,WAGNC,EAAAA,mBAGO,OAHPN,EAGO,CAFLM,EAAAA,mBAAkD,OAAlDL,EAAkDM,EAAAA,gBAAfF,EAAA,KAAK,EAAA,CAAA,EACtBA,EAAA,wBAAlBG,EAAAA,YAAkHC,EAAA,OAArF,SAAUJ,EAAA,SAAW,MAAOA,EAAA,cAAe,MAAM,uBAAuB,KAAK,mEAE5GC,EAAAA,mBAWM,MAXNJ,EAWM,CATJQ,aAAaL,EAAA,OAAA,SAAA,EAELA,EAAA,UAAO,oBADfF,EAAAA,mBAOO,OAAA,OALJ,MAAKC,EAAAA,eAAA,CAAA,cAAgBC,EAAA,YAAY,GAC5B,qBAAqB,CAAA,EAC1B,oCAAD,IAAA,CAAA,EAAsB,CAAA,UAAA,MAAA,CAAA,sBAEnBA,EAAA,OAAO,EAAA,CAAA"}
+{"version":3,"file":"NeonField.vue.cjs.js","sources":["../../../../src/components/user-input/field/NeonField.vue"],"sourcesContent":["<template>\n  <label\n    :class=\"{\n      'neon-field--optional': optional,\n      'neon-field--disabled': disabled,\n      'neon-field--with-message': message !== null,\n    }\"\n    :for=\"labelFor\"\n    class=\"neon-field\"\n  >\n    <span class=\"neon-field__label-wrapper\">\n      <span class=\"neon-field__label\">{{ label }}</span>\n      <span v-if=\"optional\" class=\"neon-field__optional\">{{ optionalLabel }}</span>\n    </span>\n    <div class=\"neon-field__contents\">\n      <!-- @slot optionally wrap the field with the label -->\n      <slot></slot>\n      <span\n        v-if=\"message !== null\"\n        :class=\"`neon-color-${messageColor}`\"\n        class=\"neon-field__message\"\n        @click.prevent.stop=\"\"\n      >\n        {{ message }}\n      </span>\n    </div>\n  </label>\n</template>\n\n<script lang=\"ts\" src=\"./NeonField.ts\"></script>\n"],"names":["_hoisted_2","_hoisted_3","_hoisted_5","_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_toDisplayString","_hoisted_4","_renderSlot"],"mappings":"8IAUUA,EAAA,CAAA,MAAM,2BAA2B,EAC/BC,EAAA,CAAA,MAAM,mBAAmB,WACT,MAAM,wBAEzBC,EAAA,CAAA,MAAM,sBAAsB,+CAbnCC,EAAAA,mBAyBQ,QAAA,CAxBL,MAAKC,EAAAA,eAAA,CAAA,wBAAkCC,EAAA,gCAAwCA,EAAA,oCAA4CA,EAAA,UAAO,MAM7H,YAAY,CAAA,EADjB,IAAKA,EAAA,WAGNC,EAAAA,mBAGO,OAHPN,EAGO,CAFLM,EAAAA,mBAAkD,OAAlDL,EAAkDM,EAAAA,gBAAfF,EAAA,KAAK,EAAA,CAAA,EAC5BA,EAAA,wBAAZF,EAAAA,mBAA6E,OAA7EK,EAA6ED,EAAAA,gBAAvBF,EAAA,aAAa,EAAA,CAAA,iCAErEC,EAAAA,mBAWM,MAXNJ,EAWM,CATJO,aAAaJ,EAAA,OAAA,SAAA,EAELA,EAAA,UAAO,oBADfF,EAAAA,mBAOO,OAAA,OALJ,MAAKC,EAAAA,eAAA,CAAA,cAAgBC,EAAA,YAAY,GAC5B,qBAAqB,CAAA,EAC1B,oCAAD,IAAA,CAAA,EAAsB,CAAA,UAAA,MAAA,CAAA,sBAEnBA,EAAA,OAAO,EAAA,CAAA"}

package/dist/components/user-input/field/NeonField.vue.es.js

@@ -1,40 +1,36 @@
-import d from "./NeonField.es.js";
-import { resolveComponent as p, openBlock as o, createElementBlock as s, normalizeClass as a, createElementVNode as l, toDisplayString as i, createBlock as f, createCommentVNode as t, renderSlot as m, withModifiers as b } from "vue";
-import _ from "../../../_virtual/_plugin-vue_export-helper.es.js";
-const c = ["for"], u = { class: "neon-field__label-wrapper" }, g = { class: "neon-field__label" }, k = { class: "neon-field__contents" };
-function $(e, n, h, C, v, w) {
-  const r = p("neon-label");
-  return o(), s("label", {
-    class: a([{
+import r from "./NeonField.es.js";
+import { openBlock as o, createElementBlock as n, normalizeClass as i, createElementVNode as s, toDisplayString as l, createCommentVNode as t, renderSlot as d, withModifiers as p } from "vue";
+import f from "../../../_virtual/_plugin-vue_export-helper.es.js";
+const m = ["for"], _ = { class: "neon-field__label-wrapper" }, c = { class: "neon-field__label" }, u = {
+  key: 0,
+  class: "neon-field__optional"
+}, b = { class: "neon-field__contents" };
+function g(e, a, h, $, k, C) {
+  return o(), n("label", {
+    class: i([{
       "neon-field--optional": e.optional,
       "neon-field--disabled": e.disabled,
       "neon-field--with-message": e.message !== null
     }, "neon-field"]),
     for: e.labelFor
   }, [
-    l("span", u, [
-      l("span", g, i(e.label), 1),
-      e.optional ? (o(), f(r, {
-        key: 0,
-        disabled: e.disabled,
-        label: e.optionalLabel,
-        class: "neon-field__optional",
-        size: "xxs"
-      }, null, 8, ["disabled", "label"])) : t("", !0)
+    s("span", _, [
+      s("span", c, l(e.label), 1),
+      e.optional ? (o(), n("span", u, l(e.optionalLabel), 1)) : t("", !0)
     ]),
-    l("div", k, [
-      m(e.$slots, "default"),
-      e.message !== null ? (o(), s("span", {
+    s("div", b, [
+      d(e.$slots, "default"),
+      e.message !== null ? (o(), n("span", {
         key: 0,
-        class: a([`neon-color-${e.messageColor}`, "neon-field__message"]),
-        onClick: n[0] || (n[0] = b(() => {
+        class: i([`neon-color-${e.messageColor}`, "neon-field__message"]),
+        onClick: a[0] || (a[0] = p(() => {
         }, ["prevent", "stop"]))
-      }, i(e.message), 3)) : t("", !0)
+      }, l(e.message), 3)) : t("", !0)
     ])
-  ], 10, c);
+  ], 10, m);
 }
-const z = /* @__PURE__ */ _(d, [["render", $]]);
+const v = /* @__PURE__ */ f(r, [["render", g]]);
 export {
-  z as default
+  v as default
 };
 //# sourceMappingURL=NeonField.vue.es.js.map

package/dist/components/user-input/field/NeonField.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonField.vue.es.js","sources":["../../../../src/components/user-input/field/NeonField.vue"],"sourcesContent":["<template>\n  <label\n    :class=\"{\n      'neon-field--optional': optional,\n      'neon-field--disabled': disabled,\n      'neon-field--with-message': message !== null,\n    }\"\n    :for=\"labelFor\"\n    class=\"neon-field\"\n  >\n    <span class=\"neon-field__label-wrapper\">\n      <span class=\"neon-field__label\">{{ label }}</span>\n      <neon-label v-if=\"optional\" :disabled=\"disabled\" :label=\"optionalLabel\" class=\"neon-field__optional\" size=\"xxs\" />\n    </span>\n    <div class=\"neon-field__contents\">\n      <!-- @slot optionally wrap the field with the label -->\n      <slot></slot>\n      <span\n        v-if=\"message !== null\"\n        :class=\"`neon-color-${messageColor}`\"\n        class=\"neon-field__message\"\n        @click.prevent.stop=\"\"\n      >\n        {{ message }}\n      </span>\n    </div>\n  </label>\n</template>\n\n<script lang=\"ts\" src=\"./NeonField.ts\"></script>\n"],"names":["_hoisted_2","_hoisted_3","_hoisted_4","_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_toDisplayString","_createBlock","_component_neon_label","_renderSlot"],"mappings":";;;mBAUUA,IAAA,EAAA,OAAM,4BAA2B,GAC/BC,IAAA,EAAA,OAAM,oBAAmB,GAG5BC,IAAA,EAAA,OAAM,uBAAsB;;;cAbnCC,EAyBQ,SAAA;AAAA,IAxBL,OAAKC,EAAA,CAAA;AAAA,8BAAkCC,EAAA;AAAA,8BAAwCA,EAAA;AAAA,kCAA4CA,EAAA,YAAO;AAAA,OAM7H,YAAY,CAAA;AAAA,IADjB,KAAKA,EAAA;AAAA;IAGNC,EAGO,QAHPN,GAGO;AAAA,MAFLM,EAAkD,QAAlDL,GAAkDM,EAAfF,EAAA,KAAK,GAAA,CAAA;AAAA,MACtBA,EAAA,iBAAlBG,EAAkHC,GAAA;AAAA;QAArF,UAAUJ,EAAA;AAAA,QAAW,OAAOA,EAAA;AAAA,QAAe,OAAM;AAAA,QAAuB,MAAK;AAAA;;IAE5GC,EAWM,OAXNJ,GAWM;AAAA,MATJQ,EAAaL,EAAA,QAAA,SAAA;AAAA,MAELA,EAAA,YAAO,aADfF,EAOO,QAAA;AAAA;QALJ,OAAKC,EAAA,CAAA,cAAgBC,EAAA,YAAY,IAC5B,qBAAqB,CAAA;AAAA,QAC1B,2BAAD,MAAA;AAAA,QAAA,GAAsB,CAAA,WAAA,MAAA,CAAA;AAAA,WAEnBA,EAAA,OAAO,GAAA,CAAA;;;;;"}
+{"version":3,"file":"NeonField.vue.es.js","sources":["../../../../src/components/user-input/field/NeonField.vue"],"sourcesContent":["<template>\n  <label\n    :class=\"{\n      'neon-field--optional': optional,\n      'neon-field--disabled': disabled,\n      'neon-field--with-message': message !== null,\n    }\"\n    :for=\"labelFor\"\n    class=\"neon-field\"\n  >\n    <span class=\"neon-field__label-wrapper\">\n      <span class=\"neon-field__label\">{{ label }}</span>\n      <span v-if=\"optional\" class=\"neon-field__optional\">{{ optionalLabel }}</span>\n    </span>\n    <div class=\"neon-field__contents\">\n      <!-- @slot optionally wrap the field with the label -->\n      <slot></slot>\n      <span\n        v-if=\"message !== null\"\n        :class=\"`neon-color-${messageColor}`\"\n        class=\"neon-field__message\"\n        @click.prevent.stop=\"\"\n      >\n        {{ message }}\n      </span>\n    </div>\n  </label>\n</template>\n\n<script lang=\"ts\" src=\"./NeonField.ts\"></script>\n"],"names":["_hoisted_2","_hoisted_3","_hoisted_5","_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_toDisplayString","_hoisted_4","_renderSlot"],"mappings":";;;mBAUUA,IAAA,EAAA,OAAM,4BAA2B,GAC/BC,IAAA,EAAA,OAAM,oBAAmB;;EACT,OAAM;GAEzBC,IAAA,EAAA,OAAM,uBAAsB;;cAbnCC,EAyBQ,SAAA;AAAA,IAxBL,OAAKC,EAAA,CAAA;AAAA,8BAAkCC,EAAA;AAAA,8BAAwCA,EAAA;AAAA,kCAA4CA,EAAA,YAAO;AAAA,OAM7H,YAAY,CAAA;AAAA,IADjB,KAAKA,EAAA;AAAA;IAGNC,EAGO,QAHPN,GAGO;AAAA,MAFLM,EAAkD,QAAlDL,GAAkDM,EAAfF,EAAA,KAAK,GAAA,CAAA;AAAA,MAC5BA,EAAA,iBAAZF,EAA6E,QAA7EK,GAA6ED,EAAvBF,EAAA,aAAa,GAAA,CAAA;;IAErEC,EAWM,OAXNJ,GAWM;AAAA,MATJO,EAAaJ,EAAA,QAAA,SAAA;AAAA,MAELA,EAAA,YAAO,aADfF,EAOO,QAAA;AAAA;QALJ,OAAKC,EAAA,CAAA,cAAgBC,EAAA,YAAY,IAC5B,qBAAqB,CAAA;AAAA,QAC1B,2BAAD,MAAA;AAAA,QAAA,GAAsB,CAAA,WAAA,MAAA,CAAA;AAAA,WAEnBA,EAAA,OAAO,GAAA,CAAA;;;;;"}

package/dist/components/user-input/input/NeonInput.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const n=require("vue"),c=require("../../../common/enums/NeonInputType.cjs.js"),o=require("../../../common/enums/NeonState.cjs.js"),B=require("../../../common/enums/NeonSize.cjs.js"),i=require("../../../common/enums/NeonFunctionalColor.cjs.js"),T=require("../../presentation/icon/NeonIcon.vue.cjs.js"),q=require("../../../common/utils/NeonDebounceUtils.cjs.js"),F=require("../../../common/enums/NeonInputMode.cjs.js"),z=n.defineComponent({name:"NeonInput",components:{NeonIcon:T},props:{id:{type:String,default:null},modelValue:{type:String,default:null},type:{type:String,default:c.NeonInputType.Text},placeholder:{type:String,default:null},size:{type:String,default:B.NeonSize.Medium},color:{type:String,default:i.NeonFunctionalColor.Primary},inputmode:{type:String,default:F.NeonInputMode.Text},autocomplete:{type:String,default:"on"},state:{type:String,default:o.NeonState.Ready},rows:{type:Number,default:null},icon:{type:String,default:null},iconReadonly:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},tabindex:{type:Number,default:0},disabled:{type:Boolean,default:!1},stateHighlight:{type:Boolean,default:!0},stateIcon:{type:Boolean,default:!0},maxlength:{type:Number,default:null},debounce:{type:Number,default:void 0}},emits:["focus","blur","icon-click","update:modelValue"],setup(e,{emit:l,expose:y}){const g=n.useAttrs(),u=n.ref(null),r=n.ref(!1),N=n.computed(()=>{const{onBlur:t,onFocus:a,onIconClick:d,...w}=g;return w}),s=q.NeonDebounceUtils.debounce(t=>{l("update:modelValue",t)},e.debounce),f=n.computed(()=>{switch(e.state){case o.NeonState.Loading:return"loading";case o.NeonState.Success:return e.stateIcon?"check":void 0;case o.NeonState.Error:return e.stateIcon?"times":void 0;default:return e.icon?e.icon:e.modelValue&&e.modelValue.length>0?"times":void 0}}),h=n.computed(()=>f.value&&!e.hideIcon&&(e.state!=="ready"||e.icon||e.modelValue&&!e.disabled&&e.modelValue.length>0)),S=n.computed(()=>{switch(e.state){case o.NeonState.Success:return i.NeonFunctionalColor.Success;case o.NeonState.Error:return i.NeonFunctionalColor.Error;case o.NeonState.Loading:return e.color;default:return i.NeonFunctionalColor.LowContrast}}),m=()=>{var t;(t=u.value)==null||t.focus()},b=()=>{var t;(t=u.value)==null||t.click()},I=()=>{r.value=!0,l("focus")},v=()=>{r.value=!1,l("blur")},V=t=>{e.disabled||(e.icon?l("icon-click"):(s(""),setTimeout(m)),t.preventDefault(),t.stopPropagation())},k=t=>{const a=t.target.value,d=e.maxlength&&a.length>e.maxlength?a.substring(0,e.maxlength):a;e.modelValue!==d&&s(d)},x=t=>{t.key!=="Backspace"&&e.maxlength&&e.modelValue&&e.modelValue.length>=e.maxlength&&t.preventDefault()},C=n.computed(()=>{if(e.placeholder)return e.placeholder;switch(e.type){case c.NeonInputType.Email:return"gbelson@hooli.com";case c.NeonInputType.Tel:return"+41785551234";case c.NeonInputType.Url:return"http://www.getskeleton.com";default:return""}});return y({neonInput:u}),{neonInput:u,focused:r,sanitizedAttributes:N,iconVisible:h,iconName:f,iconColor:S,computedPlaceholder:C,focus:m,click:b,onFocus:I,onBlur:v,iconClicked:V,changeValue:k,onKeyDown:x}}});module.exports=z;
+"use strict";const n=require("vue"),c=require("../../../common/enums/NeonInputType.cjs.js"),o=require("../../../common/enums/NeonState.cjs.js"),T=require("../../../common/enums/NeonSize.cjs.js"),r=require("../../../common/enums/NeonFunctionalColor.cjs.js"),q=require("../../presentation/icon/NeonIcon.vue.cjs.js"),F=require("../../../common/utils/NeonDebounceUtils.cjs.js"),L=require("../../../common/enums/NeonInputMode.cjs.js"),z=n.defineComponent({name:"NeonInput",components:{NeonIcon:q},props:{id:{type:String,default:null},modelValue:{type:String,default:null},type:{type:String,default:c.NeonInputType.Text},placeholder:{type:String,default:null},size:{type:String,default:T.NeonSize.Medium},color:{type:String,default:r.NeonFunctionalColor.Primary},inputmode:{type:String,default:L.NeonInputMode.Text},autocomplete:{type:String,default:"on"},state:{type:String,default:o.NeonState.Ready},rows:{type:Number,default:null},icon:{type:String,default:null},iconReadonly:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},tabindex:{type:Number,default:0},disabled:{type:Boolean,default:!1},stateHighlight:{type:Boolean,default:!0},stateIcon:{type:Boolean,default:!0},maxlength:{type:Number,default:null},maxlengthLabel:{type:String,default:"No characters left | 1 character left | {count} characters left"},debounce:{type:Number,default:void 0}},emits:["focus","blur","icon-click","update:modelValue"],setup(e,{emit:u,expose:g}){const h=n.useAttrs(),a=n.ref(null),i=n.ref(!1),y=n.computed(()=>{const{onBlur:t,onFocus:l,onIconClick:d,...B}=h;return B}),s=F.NeonDebounceUtils.debounce(t=>{u("update:modelValue",t)},e.debounce),f=n.computed(()=>{switch(e.state){case o.NeonState.Loading:return"loading";case o.NeonState.Success:return e.stateIcon?"check":void 0;case o.NeonState.Error:return e.stateIcon?"times":void 0;default:return e.icon?e.icon:e.modelValue&&e.modelValue.length>0?"times":void 0}}),N=n.computed(()=>f.value&&!e.hideIcon&&(e.state!=="ready"||e.icon||e.modelValue&&!e.disabled&&e.modelValue.length>0)),S=n.computed(()=>{switch(e.state){case o.NeonState.Success:return r.NeonFunctionalColor.Success;case o.NeonState.Error:return r.NeonFunctionalColor.Error;case o.NeonState.Loading:return e.color;default:return r.NeonFunctionalColor.LowContrast}}),b=n.computed(()=>{if(e.maxlength&&e.maxlength>0){const t=e.maxlengthLabel.split(" | "),l=e.maxlength-e.modelValue.length;switch(l){case 0:return t[0];case 1:return t[1];default:return t[2].replace("{count}",`${l}`)}}return null}),m=()=>{var t;(t=a.value)==null||t.focus()},I=()=>{var t;(t=a.value)==null||t.click()},x=()=>{i.value=!0,u("focus")},V=()=>{i.value=!1,u("blur")},v=t=>{e.disabled||(e.icon?u("icon-click"):(s(""),setTimeout(m)),t.preventDefault(),t.stopPropagation())},C=t=>{const l=t.target.value,d=e.maxlength&&l.length>e.maxlength?l.substring(0,e.maxlength):l;e.modelValue!==d&&s(d)},k=t=>{t.key!=="Backspace"&&e.maxlength&&e.modelValue&&e.modelValue.length>=e.maxlength&&t.preventDefault()},w=n.computed(()=>{if(e.placeholder)return e.placeholder;switch(e.type){case c.NeonInputType.Email:return"gbelson@hooli.com";case c.NeonInputType.Tel:return"+41785551234";case c.NeonInputType.Url:return"http://www.getskeleton.com";default:return""}});return g({neonInput:a}),{neonInput:a,focused:i,sanitizedAttributes:y,iconVisible:N,iconName:f,iconColor:S,computedPlaceholder:w,counterLabel:b,focus:m,click:I,onFocus:x,onBlur:V,iconClicked:v,changeValue:C,onKeyDown:k}}});module.exports=z;
 //# sourceMappingURL=NeonInput.cjs.js.map

package/dist/components/user-input/input/NeonInput.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonInput.cjs.js","sources":["../../../../src/components/user-input/input/NeonInput.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonInputType } from '@/common/enums/NeonInputType';\nimport { NeonState } from '@/common/enums/NeonState';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { NeonDebounceUtils } from '@/common/utils/NeonDebounceUtils';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\n\n/**\n * Equivalent of, and wrapper around, an HTML input. Also supports <strong>textarea</strong>.\n */\nexport default defineComponent({\n  name: 'NeonInput',\n  components: {\n    NeonIcon,\n  },\n  props: {\n    /**\n     * The id the input\n     */\n    id: { type: String, default: null },\n    /**\n     * The value of the input\n     */\n    modelValue: { type: String, default: null },\n    /**\n     * The type of input this is. NOTE: Neon provides custom components as alternatives in the following cases:\n     * * file (use <a href=\"/user-input/file\">NeonFile</a>)\n     * * password (use <a href=\"/user-input/password\">NeonPassword</a>)\n     */\n    type: { type: String as () => NeonInputType, default: NeonInputType.Text },\n    /**\n     * Placeholder text to display in the input\n     */\n    placeholder: { type: String, default: null },\n    /**\n     * Size of the input\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * Color of the input\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The HTML input mode as specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode\">here</a>.\n     */\n    inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Text },\n    /**\n     * The HTML autocomplete mode as specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\">here</a>.\n     * NOTE: No enum is provided in Neon as some values can be used in combination, please refer to the full list of values in the preceding link.\n     */\n    autocomplete: { type: String, default: 'on' },\n    /**\n     * The state of the input\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * The number of rows to display in the case of a textarea\n     */\n    rows: { type: Number, default: null },\n    /**\n     * The name of a clickable icon to display inside the input. This is used for clearing contents or e.g. in the case of\n     * NeonPassword toggle showing/hiding the password. Defaults to <em>times</em> (for clearing the input's contents).\n     */\n    icon: { type: String, default: null },\n    /**\n     * Make the input field icon read-only, i.e. it will not emit events or be treated as a focusable button.\n     */\n    iconReadonly: { type: Boolean, default: false },\n    /**\n     * Hide the icon button, e.g. the X button to clear the input's contents.\n     */\n    hideIcon: { type: Boolean, default: false },\n    /**\n     * Tabindex to assign to the input.\n     */\n    tabindex: { type: Number, default: 0 },\n    /**\n     * The disabled state of the input\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * When the state is success or error, display the field with the state color indicator, e.g. border or background\n     * color.\n     */\n    stateHighlight: { type: Boolean, default: true },\n    /**\n     * When the state is success or error, display the state icon.\n     */\n    stateIcon: { type: Boolean, default: true },\n    /**\n     * The character limit for a textarea.\n     */\n    maxlength: { type: Number, default: null },\n    /**\n     * Debounce time in ms, if no value is provided the default value set in NeonDebounceUtils is used (=300ms).\n     * Set to 0 to disable debounce.\n     */\n    debounce: { type: Number, default: undefined },\n  },\n  emits: [\n    /**\n     * Emitted when the input has gained focus\n     * @type {void}\n     */\n    'focus',\n    /**\n     * Emitted when the input has lost focus\n     * @type {void}\n     */\n    'blur',\n    /**\n     * Emitted when the icon is clicked\n     * @type {void}\n     */\n    'icon-click',\n    /**\n     * Emitted when the input value is changed, NOTE: is not triggered if input is over the textarea length limit\n     * @type {string} the contents of the input\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit, expose }) {\n    const attrs = useAttrs();\n    const neonInput = ref<HTMLElement | null>(null);\n    const focused = ref(false);\n\n    const sanitizedAttributes = computed(() => {\n      const {\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        onBlur,\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        onFocus,\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        onIconClick,\n        ...sanitized\n      } = attrs;\n\n      return sanitized;\n    });\n\n    const emitModelValue = NeonDebounceUtils.debounce((value: string) => {\n      emit('update:modelValue', value);\n    }, props.debounce);\n\n    const iconName = computed(() => {\n      switch (props.state) {\n        case NeonState.Loading:\n          return 'loading';\n        case NeonState.Success:\n          return props.stateIcon ? 'check' : undefined;\n        case NeonState.Error:\n          return props.stateIcon ? 'times' : undefined;\n        default:\n          if (props.icon) {\n            return props.icon;\n          } else if (props.modelValue && props.modelValue.length > 0) {\n            return 'times';\n          }\n\n          return undefined;\n      }\n    });\n\n    const iconVisible = computed(() => {\n      return (\n        iconName.value &&\n        !props.hideIcon &&\n        (props.state !== 'ready' || props.icon || (props.modelValue && !props.disabled && props.modelValue.length > 0))\n      );\n    });\n\n    const iconColor = computed(() => {\n      switch (props.state) {\n        case NeonState.Success:\n          return NeonFunctionalColor.Success;\n        case NeonState.Error:\n          return NeonFunctionalColor.Error;\n        case NeonState.Loading:\n          return props.color;\n        default:\n          return NeonFunctionalColor.LowContrast;\n      }\n    });\n\n    const focus = () => {\n      neonInput.value?.focus();\n    };\n\n    const click = () => {\n      neonInput.value?.click();\n    };\n\n    const onFocus = () => {\n      focused.value = true;\n      emit('focus');\n    };\n\n    const onBlur = () => {\n      focused.value = false;\n      emit('blur');\n    };\n\n    const iconClicked = ($event: Event) => {\n      if (!props.disabled) {\n        if (props.icon) {\n          emit('icon-click');\n        } else {\n          emitModelValue('');\n          setTimeout(focus);\n        }\n        $event.preventDefault();\n        $event.stopPropagation();\n      }\n    };\n\n    const changeValue = (event: Event) => {\n      const val = (event.target as HTMLInputElement).value;\n      const v = props.maxlength && val.length > props.maxlength ? val.substring(0, props.maxlength) : val;\n      if (props.modelValue !== v) {\n        emitModelValue(v);\n      }\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key !== 'Backspace' &&\n        props.maxlength &&\n        props.modelValue &&\n        props.modelValue.length >= props.maxlength\n      ) {\n        event.preventDefault();\n      }\n    };\n\n    const computedPlaceholder = computed(() => {\n      if (props.placeholder) {\n        return props.placeholder;\n      } else {\n        switch (props.type) {\n          case NeonInputType.Email:\n            return 'gbelson@hooli.com';\n          case NeonInputType.Tel:\n            return '+41785551234';\n          case NeonInputType.Url:\n            return 'http://www.getskeleton.com';\n          default:\n            return '';\n        }\n      }\n    });\n\n    expose({ neonInput });\n\n    return {\n      neonInput,\n      focused,\n      sanitizedAttributes,\n      iconVisible,\n      iconName,\n      iconColor,\n      computedPlaceholder,\n      focus,\n      click,\n      onFocus,\n      onBlur,\n      iconClicked,\n      changeValue,\n      onKeyDown,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonInputType","NeonSize","NeonFunctionalColor","NeonInputMode","NeonState","props","emit","expose","attrs","useAttrs","neonInput","ref","focused","sanitizedAttributes","computed","onBlur","onFocus","onIconClick","sanitized","emitModelValue","NeonDebounceUtils","value","iconName","iconVisible","iconColor","focus","_a","click","iconClicked","$event","changeValue","event","val","v","onKeyDown","computedPlaceholder"],"mappings":"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"}
+{"version":3,"file":"NeonInput.cjs.js","sources":["../../../../src/components/user-input/input/NeonInput.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonInputType } from '@/common/enums/NeonInputType';\nimport { NeonState } from '@/common/enums/NeonState';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { NeonDebounceUtils } from '@/common/utils/NeonDebounceUtils';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\n\n/**\n * Equivalent of, and wrapper around, an HTML input. Also supports <strong>textarea</strong>.\n */\nexport default defineComponent({\n  name: 'NeonInput',\n  components: {\n    NeonIcon,\n  },\n  props: {\n    /**\n     * The id the input\n     */\n    id: { type: String, default: null },\n    /**\n     * The value of the input\n     */\n    modelValue: { type: String, default: null },\n    /**\n     * The type of input this is. NOTE: Neon provides custom components as alternatives in the following cases:\n     * * file (use <a href=\"/user-input/file\">NeonFile</a>)\n     * * password (use <a href=\"/user-input/password\">NeonPassword</a>)\n     */\n    type: { type: String as () => NeonInputType, default: NeonInputType.Text },\n    /**\n     * Placeholder text to display in the input\n     */\n    placeholder: { type: String, default: null },\n    /**\n     * Size of the input\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * Color of the input\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The HTML input mode as specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode\">here</a>.\n     */\n    inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Text },\n    /**\n     * The HTML autocomplete mode as specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\">here</a>.\n     * NOTE: No enum is provided in Neon as some values can be used in combination, please refer to the full list of values in the preceding link.\n     */\n    autocomplete: { type: String as () => NeonInputMode, default: 'on' },\n    /**\n     * The state of the input\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * The number of rows to display in the case of a textarea\n     */\n    rows: { type: Number, default: null },\n    /**\n     * The name of a clickable icon to display inside the input. This is used for clearing contents or e.g. in the case of\n     * NeonPassword toggle showing/hiding the password. Defaults to <em>times</em> (for clearing the input's contents).\n     */\n    icon: { type: String, default: null },\n    /**\n     * Make the input field icon read-only, i.e. it will not emit events or be treated as a focusable button.\n     */\n    iconReadonly: { type: Boolean, default: false },\n    /**\n     * Hide the icon button, e.g. the X button to clear the input's contents.\n     */\n    hideIcon: { type: Boolean, default: false },\n    /**\n     * Tabindex to assign to the input.\n     */\n    tabindex: { type: Number, default: 0 },\n    /**\n     * The disabled state of the input\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * When the state is success or error, display the field with the state color indicator, e.g. border or background\n     * color.\n     */\n    stateHighlight: { type: Boolean, default: true },\n    /**\n     * When the state is success or error, display the state icon.\n     */\n    stateIcon: { type: Boolean, default: true },\n    /**\n     * The character limit for a textarea.\n     */\n    maxlength: { type: Number, default: null },\n    /**\n     * The label template for the character limit. This is a string in the vue-i18n Pluralization format with a\n     * <em>{count}</em> placeholder.\n     */\n    maxlengthLabel: { type: String, default: 'No characters left | 1 character left | {count} characters left' },\n    /**\n     * Debounce time in ms. If no value is provided, the default value set in NeonDebounceUtils is used (=0ms).\n     */\n    debounce: { type: Number, default: undefined },\n  },\n  emits: [\n    /**\n     * Emitted when the input has gained focus\n     * @type {void}\n     */\n    'focus',\n    /**\n     * Emitted when the input has lost focus\n     * @type {void}\n     */\n    'blur',\n    /**\n     * Emitted when the icon is clicked\n     * @type {void}\n     */\n    'icon-click',\n    /**\n     * Emitted when the input value is changed, NOTE: is not triggered if input is over the textarea length limit\n     * @type {string} the contents of the input\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit, expose }) {\n    const attrs = useAttrs();\n    const neonInput = ref<HTMLElement | null>(null);\n    const focused = ref(false);\n\n    const sanitizedAttributes = computed(() => {\n      const {\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        onBlur,\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        onFocus,\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        onIconClick,\n        ...sanitized\n      } = attrs;\n\n      return sanitized;\n    });\n\n    const emitModelValue = NeonDebounceUtils.debounce((value: string) => {\n      emit('update:modelValue', value);\n    }, props.debounce);\n\n    const iconName = computed(() => {\n      switch (props.state) {\n        case NeonState.Loading:\n          return 'loading';\n        case NeonState.Success:\n          return props.stateIcon ? 'check' : undefined;\n        case NeonState.Error:\n          return props.stateIcon ? 'times' : undefined;\n        default:\n          if (props.icon) {\n            return props.icon;\n          } else if (props.modelValue && props.modelValue.length > 0) {\n            return 'times';\n          }\n\n          return undefined;\n      }\n    });\n\n    const iconVisible = computed(() => {\n      return (\n        iconName.value &&\n        !props.hideIcon &&\n        (props.state !== 'ready' || props.icon || (props.modelValue && !props.disabled && props.modelValue.length > 0))\n      );\n    });\n\n    const iconColor = computed(() => {\n      switch (props.state) {\n        case NeonState.Success:\n          return NeonFunctionalColor.Success;\n        case NeonState.Error:\n          return NeonFunctionalColor.Error;\n        case NeonState.Loading:\n          return props.color;\n        default:\n          return NeonFunctionalColor.LowContrast;\n      }\n    });\n\n    const counterLabel = computed<string | null>(() => {\n      if (props.maxlength && props.maxlength > 0) {\n        const templates = props.maxlengthLabel.split(' | ');\n        const remainingChars = props.maxlength - props.modelValue.length;\n        switch (remainingChars) {\n          case 0:\n            return templates[0];\n          case 1:\n            return templates[1];\n          default:\n            return templates[2].replace('{count}', `${remainingChars}`);\n        }\n      }\n      return null;\n    });\n\n    const focus = () => {\n      neonInput.value?.focus();\n    };\n\n    const click = () => {\n      neonInput.value?.click();\n    };\n\n    const onFocus = () => {\n      focused.value = true;\n      emit('focus');\n    };\n\n    const onBlur = () => {\n      focused.value = false;\n      emit('blur');\n    };\n\n    const iconClicked = ($event: Event) => {\n      if (!props.disabled) {\n        if (props.icon) {\n          emit('icon-click');\n        } else {\n          emitModelValue('');\n          setTimeout(focus);\n        }\n        $event.preventDefault();\n        $event.stopPropagation();\n      }\n    };\n\n    const changeValue = (event: InputEvent) => {\n      const val = (event.target as HTMLInputElement).value;\n      const v = props.maxlength && val.length > props.maxlength ? val.substring(0, props.maxlength) : val;\n      if (props.modelValue !== v) {\n        emitModelValue(v);\n      }\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key !== 'Backspace' &&\n        props.maxlength &&\n        props.modelValue &&\n        props.modelValue.length >= props.maxlength\n      ) {\n        event.preventDefault();\n      }\n    };\n\n    const computedPlaceholder = computed(() => {\n      if (props.placeholder) {\n        return props.placeholder;\n      } else {\n        switch (props.type) {\n          case NeonInputType.Email:\n            return 'gbelson@hooli.com';\n          case NeonInputType.Tel:\n            return '+41785551234';\n          case NeonInputType.Url:\n            return 'http://www.getskeleton.com';\n          default:\n            return '';\n        }\n      }\n    });\n\n    expose({ neonInput });\n\n    return {\n      neonInput,\n      focused,\n      sanitizedAttributes,\n      iconVisible,\n      iconName,\n      iconColor,\n      computedPlaceholder,\n      counterLabel,\n      focus,\n      click,\n      onFocus,\n      onBlur,\n      iconClicked,\n      changeValue,\n      onKeyDown,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonInputType","NeonSize","NeonFunctionalColor","NeonInputMode","NeonState","props","emit","expose","attrs","useAttrs","neonInput","ref","focused","sanitizedAttributes","computed","onBlur","onFocus","onIconClick","sanitized","emitModelValue","NeonDebounceUtils","value","iconName","iconVisible","iconColor","counterLabel","templates","remainingChars","focus","_a","click","iconClicked","$event","changeValue","event","val","v","onKeyDown","computedPlaceholder"],"mappings":"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"}

package/dist/components/user-input/input/NeonInput.es.js

@@ -1,12 +1,12 @@
-import { defineComponent as T, useAttrs as z, ref as g, computed as l } from "vue";
+import { defineComponent as T, useAttrs as z, ref as g, computed as a } from "vue";
 import { NeonInputType as c } from "../../../common/enums/NeonInputType.es.js";
-import { NeonState as n } from "../../../common/enums/NeonState.es.js";
+import { NeonState as l } from "../../../common/enums/NeonState.es.js";
 import { NeonSize as D } from "../../../common/enums/NeonSize.es.js";
-import { NeonFunctionalColor as i } from "../../../common/enums/NeonFunctionalColor.es.js";
+import { NeonFunctionalColor as r } from "../../../common/enums/NeonFunctionalColor.es.js";
 import E from "../../presentation/icon/NeonIcon.vue.es.js";
 import { NeonDebounceUtils as F } from "../../../common/utils/NeonDebounceUtils.es.js";
-import { NeonInputMode as L } from "../../../common/enums/NeonInputMode.es.js";
-const j = T({
+import { NeonInputMode as M } from "../../../common/enums/NeonInputMode.es.js";
+const q = T({
   name: "NeonInput",
   components: {
     NeonIcon: E
@@ -37,11 +37,11 @@ const j = T({
     /**
      * Color of the input
      */
-    color: { type: String, default: i.Primary },
+    color: { type: String, default: r.Primary },
     /**
      * The HTML input mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">here</a>.
      */
-    inputmode: { type: String, default: L.Text },
+    inputmode: { type: String, default: M.Text },
     /**
      * The HTML autocomplete mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values">here</a>.
      * NOTE: No enum is provided in Neon as some values can be used in combination, please refer to the full list of values in the preceding link.
@@ -50,7 +50,7 @@ const j = T({
     /**
      * The state of the input
      */
-    state: { type: String, default: n.Ready },
+    state: { type: String, default: l.Ready },
     /**
      * The number of rows to display in the case of a textarea
      */
@@ -90,8 +90,12 @@ const j = T({
      */
     maxlength: { type: Number, default: null },
     /**
-     * Debounce time in ms, if no value is provided the default value set in NeonDebounceUtils is used (=300ms).
-     * Set to 0 to disable debounce.
+     * The label template for the character limit. This is a string in the vue-i18n Pluralization format with a
+     * <em>{count}</em> placeholder.
+     */
+    maxlengthLabel: { type: String, default: "No characters left | 1 character left | {count} characters left" },
+    /**
+     * Debounce time in ms. If no value is provided, the default value set in NeonDebounceUtils is used (=0ms).
      */
     debounce: { type: Number, default: void 0 }
   },
@@ -117,60 +121,73 @@ const j = T({
      */
     "update:modelValue"
   ],
-  setup(e, { emit: o, expose: y }) {
-    const h = z(), a = g(null), r = g(!1), b = l(() => {
+  setup(e, { emit: o, expose: h }) {
+    const y = z(), u = g(null), i = g(!1), b = a(() => {
       const {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         onBlur: t,
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        onFocus: u,
+        onFocus: n,
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         onIconClick: d,
-        ...C
-      } = h;
-      return C;
+        ...L
+      } = y;
+      return L;
     }), s = F.debounce((t) => {
       o("update:modelValue", t);
-    }, e.debounce), f = l(() => {
+    }, e.debounce), m = a(() => {
       switch (e.state) {
-        case n.Loading:
+        case l.Loading:
           return "loading";
-        case n.Success:
+        case l.Success:
           return e.stateIcon ? "check" : void 0;
-        case n.Error:
+        case l.Error:
           return e.stateIcon ? "times" : void 0;
         default:
           return e.icon ? e.icon : e.modelValue && e.modelValue.length > 0 ? "times" : void 0;
       }
-    }), S = l(() => f.value && !e.hideIcon && (e.state !== "ready" || e.icon || e.modelValue && !e.disabled && e.modelValue.length > 0)), N = l(() => {
+    }), S = a(() => m.value && !e.hideIcon && (e.state !== "ready" || e.icon || e.modelValue && !e.disabled && e.modelValue.length > 0)), x = a(() => {
       switch (e.state) {
-        case n.Success:
-          return i.Success;
-        case n.Error:
-          return i.Error;
-        case n.Loading:
+        case l.Success:
+          return r.Success;
+        case l.Error:
+          return r.Error;
+        case l.Loading:
           return e.color;
         default:
-          return i.LowContrast;
+          return r.LowContrast;
+      }
+    }), N = a(() => {
+      if (e.maxlength && e.maxlength > 0) {
+        const t = e.maxlengthLabel.split(" | "), n = e.maxlength - e.modelValue.length;
+        switch (n) {
+          case 0:
+            return t[0];
+          case 1:
+            return t[1];
+          default:
+            return t[2].replace("{count}", `${n}`);
+        }
       }
-    }), m = () => {
+      return null;
+    }), f = () => {
       var t;
-      (t = a.value) == null || t.focus();
+      (t = u.value) == null || t.focus();
     }, V = () => {
       var t;
-      (t = a.value) == null || t.click();
+      (t = u.value) == null || t.click();
     }, v = () => {
-      r.value = !0, o("focus");
+      i.value = !0, o("focus");
     }, I = () => {
-      r.value = !1, o("blur");
+      i.value = !1, o("blur");
     }, k = (t) => {
-      e.disabled || (e.icon ? o("icon-click") : (s(""), setTimeout(m)), t.preventDefault(), t.stopPropagation());
-    }, x = (t) => {
-      const u = t.target.value, d = e.maxlength && u.length > e.maxlength ? u.substring(0, e.maxlength) : u;
-      e.modelValue !== d && s(d);
+      e.disabled || (e.icon ? o("icon-click") : (s(""), setTimeout(f)), t.preventDefault(), t.stopPropagation());
     }, w = (t) => {
+      const n = t.target.value, d = e.maxlength && n.length > e.maxlength ? n.substring(0, e.maxlength) : n;
+      e.modelValue !== d && s(d);
+    }, B = (t) => {
       t.key !== "Backspace" && e.maxlength && e.modelValue && e.modelValue.length >= e.maxlength && t.preventDefault();
-    }, B = l(() => {
+    }, C = a(() => {
       if (e.placeholder)
         return e.placeholder;
       switch (e.type) {
@@ -184,25 +201,26 @@ const j = T({
           return "";
       }
     });
-    return y({ neonInput: a }), {
-      neonInput: a,
-      focused: r,
+    return h({ neonInput: u }), {
+      neonInput: u,
+      focused: i,
       sanitizedAttributes: b,
       iconVisible: S,
-      iconName: f,
-      iconColor: N,
-      computedPlaceholder: B,
-      focus: m,
+      iconName: m,
+      iconColor: x,
+      computedPlaceholder: C,
+      counterLabel: N,
+      focus: f,
       click: V,
       onFocus: v,
       onBlur: I,
       iconClicked: k,
-      changeValue: x,
-      onKeyDown: w
+      changeValue: w,
+      onKeyDown: B
     };
   }
 });
 export {
-  j as default
+  q as default
 };
 //# sourceMappingURL=NeonInput.es.js.map

package/dist/components/user-input/input/NeonInput.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonInput.es.js","sources":["../../../../src/components/user-input/input/NeonInput.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonInputType } from '@/common/enums/NeonInputType';\nimport { NeonState } from '@/common/enums/NeonState';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { NeonDebounceUtils } from '@/common/utils/NeonDebounceUtils';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\n\n/**\n * Equivalent of, and wrapper around, an HTML input. Also supports <strong>textarea</strong>.\n */\nexport default defineComponent({\n  name: 'NeonInput',\n  components: {\n    NeonIcon,\n  },\n  props: {\n    /**\n     * The id the input\n     */\n    id: { type: String, default: null },\n    /**\n     * The value of the input\n     */\n    modelValue: { type: String, default: null },\n    /**\n     * The type of input this is. NOTE: Neon provides custom components as alternatives in the following cases:\n     * * file (use <a href=\"/user-input/file\">NeonFile</a>)\n     * * password (use <a href=\"/user-input/password\">NeonPassword</a>)\n     */\n    type: { type: String as () => NeonInputType, default: NeonInputType.Text },\n    /**\n     * Placeholder text to display in the input\n     */\n    placeholder: { type: String, default: null },\n    /**\n     * Size of the input\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * Color of the input\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The HTML input mode as specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode\">here</a>.\n     */\n    inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Text },\n    /**\n     * The HTML autocomplete mode as specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\">here</a>.\n     * NOTE: No enum is provided in Neon as some values can be used in combination, please refer to the full list of values in the preceding link.\n     */\n    autocomplete: { type: String, default: 'on' },\n    /**\n     * The state of the input\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * The number of rows to display in the case of a textarea\n     */\n    rows: { type: Number, default: null },\n    /**\n     * The name of a clickable icon to display inside the input. This is used for clearing contents or e.g. in the case of\n     * NeonPassword toggle showing/hiding the password. Defaults to <em>times</em> (for clearing the input's contents).\n     */\n    icon: { type: String, default: null },\n    /**\n     * Make the input field icon read-only, i.e. it will not emit events or be treated as a focusable button.\n     */\n    iconReadonly: { type: Boolean, default: false },\n    /**\n     * Hide the icon button, e.g. the X button to clear the input's contents.\n     */\n    hideIcon: { type: Boolean, default: false },\n    /**\n     * Tabindex to assign to the input.\n     */\n    tabindex: { type: Number, default: 0 },\n    /**\n     * The disabled state of the input\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * When the state is success or error, display the field with the state color indicator, e.g. border or background\n     * color.\n     */\n    stateHighlight: { type: Boolean, default: true },\n    /**\n     * When the state is success or error, display the state icon.\n     */\n    stateIcon: { type: Boolean, default: true },\n    /**\n     * The character limit for a textarea.\n     */\n    maxlength: { type: Number, default: null },\n    /**\n     * Debounce time in ms, if no value is provided the default value set in NeonDebounceUtils is used (=300ms).\n     * Set to 0 to disable debounce.\n     */\n    debounce: { type: Number, default: undefined },\n  },\n  emits: [\n    /**\n     * Emitted when the input has gained focus\n     * @type {void}\n     */\n    'focus',\n    /**\n     * Emitted when the input has lost focus\n     * @type {void}\n     */\n    'blur',\n    /**\n     * Emitted when the icon is clicked\n     * @type {void}\n     */\n    'icon-click',\n    /**\n     * Emitted when the input value is changed, NOTE: is not triggered if input is over the textarea length limit\n     * @type {string} the contents of the input\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit, expose }) {\n    const attrs = useAttrs();\n    const neonInput = ref<HTMLElement | null>(null);\n    const focused = ref(false);\n\n    const sanitizedAttributes = computed(() => {\n      const {\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        onBlur,\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        onFocus,\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        onIconClick,\n        ...sanitized\n      } = attrs;\n\n      return sanitized;\n    });\n\n    const emitModelValue = NeonDebounceUtils.debounce((value: string) => {\n      emit('update:modelValue', value);\n    }, props.debounce);\n\n    const iconName = computed(() => {\n      switch (props.state) {\n        case NeonState.Loading:\n          return 'loading';\n        case NeonState.Success:\n          return props.stateIcon ? 'check' : undefined;\n        case NeonState.Error:\n          return props.stateIcon ? 'times' : undefined;\n        default:\n          if (props.icon) {\n            return props.icon;\n          } else if (props.modelValue && props.modelValue.length > 0) {\n            return 'times';\n          }\n\n          return undefined;\n      }\n    });\n\n    const iconVisible = computed(() => {\n      return (\n        iconName.value &&\n        !props.hideIcon &&\n        (props.state !== 'ready' || props.icon || (props.modelValue && !props.disabled && props.modelValue.length > 0))\n      );\n    });\n\n    const iconColor = computed(() => {\n      switch (props.state) {\n        case NeonState.Success:\n          return NeonFunctionalColor.Success;\n        case NeonState.Error:\n          return NeonFunctionalColor.Error;\n        case NeonState.Loading:\n          return props.color;\n        default:\n          return NeonFunctionalColor.LowContrast;\n      }\n    });\n\n    const focus = () => {\n      neonInput.value?.focus();\n    };\n\n    const click = () => {\n      neonInput.value?.click();\n    };\n\n    const onFocus = () => {\n      focused.value = true;\n      emit('focus');\n    };\n\n    const onBlur = () => {\n      focused.value = false;\n      emit('blur');\n    };\n\n    const iconClicked = ($event: Event) => {\n      if (!props.disabled) {\n        if (props.icon) {\n          emit('icon-click');\n        } else {\n          emitModelValue('');\n          setTimeout(focus);\n        }\n        $event.preventDefault();\n        $event.stopPropagation();\n      }\n    };\n\n    const changeValue = (event: Event) => {\n      const val = (event.target as HTMLInputElement).value;\n      const v = props.maxlength && val.length > props.maxlength ? val.substring(0, props.maxlength) : val;\n      if (props.modelValue !== v) {\n        emitModelValue(v);\n      }\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key !== 'Backspace' &&\n        props.maxlength &&\n        props.modelValue &&\n        props.modelValue.length >= props.maxlength\n      ) {\n        event.preventDefault();\n      }\n    };\n\n    const computedPlaceholder = computed(() => {\n      if (props.placeholder) {\n        return props.placeholder;\n      } else {\n        switch (props.type) {\n          case NeonInputType.Email:\n            return 'gbelson@hooli.com';\n          case NeonInputType.Tel:\n            return '+41785551234';\n          case NeonInputType.Url:\n            return 'http://www.getskeleton.com';\n          default:\n            return '';\n        }\n      }\n    });\n\n    expose({ neonInput });\n\n    return {\n      neonInput,\n      focused,\n      sanitizedAttributes,\n      iconVisible,\n      iconName,\n      iconColor,\n      computedPlaceholder,\n      focus,\n      click,\n      onFocus,\n      onBlur,\n      iconClicked,\n      changeValue,\n      onKeyDown,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonInputType","NeonSize","NeonFunctionalColor","NeonInputMode","NeonState","props","emit","expose","attrs","useAttrs","neonInput","ref","focused","sanitizedAttributes","computed","onBlur","onFocus","onIconClick","sanitized","emitModelValue","NeonDebounceUtils","value","iconName","iconVisible","iconColor","focus","_a","click","iconClicked","$event","changeValue","event","val","v","onKeyDown","computedPlaceholder"],"mappings":"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"}
+{"version":3,"file":"NeonInput.es.js","sources":["../../../../src/components/user-input/input/NeonInput.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonInputType } from '@/common/enums/NeonInputType';\nimport { NeonState } from '@/common/enums/NeonState';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { NeonDebounceUtils } from '@/common/utils/NeonDebounceUtils';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\n\n/**\n * Equivalent of, and wrapper around, an HTML input. Also supports <strong>textarea</strong>.\n */\nexport default defineComponent({\n  name: 'NeonInput',\n  components: {\n    NeonIcon,\n  },\n  props: {\n    /**\n     * The id the input\n     */\n    id: { type: String, default: null },\n    /**\n     * The value of the input\n     */\n    modelValue: { type: String, default: null },\n    /**\n     * The type of input this is. NOTE: Neon provides custom components as alternatives in the following cases:\n     * * file (use <a href=\"/user-input/file\">NeonFile</a>)\n     * * password (use <a href=\"/user-input/password\">NeonPassword</a>)\n     */\n    type: { type: String as () => NeonInputType, default: NeonInputType.Text },\n    /**\n     * Placeholder text to display in the input\n     */\n    placeholder: { type: String, default: null },\n    /**\n     * Size of the input\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * Color of the input\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The HTML input mode as specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode\">here</a>.\n     */\n    inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Text },\n    /**\n     * The HTML autocomplete mode as specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\">here</a>.\n     * NOTE: No enum is provided in Neon as some values can be used in combination, please refer to the full list of values in the preceding link.\n     */\n    autocomplete: { type: String as () => NeonInputMode, default: 'on' },\n    /**\n     * The state of the input\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * The number of rows to display in the case of a textarea\n     */\n    rows: { type: Number, default: null },\n    /**\n     * The name of a clickable icon to display inside the input. This is used for clearing contents or e.g. in the case of\n     * NeonPassword toggle showing/hiding the password. Defaults to <em>times</em> (for clearing the input's contents).\n     */\n    icon: { type: String, default: null },\n    /**\n     * Make the input field icon read-only, i.e. it will not emit events or be treated as a focusable button.\n     */\n    iconReadonly: { type: Boolean, default: false },\n    /**\n     * Hide the icon button, e.g. the X button to clear the input's contents.\n     */\n    hideIcon: { type: Boolean, default: false },\n    /**\n     * Tabindex to assign to the input.\n     */\n    tabindex: { type: Number, default: 0 },\n    /**\n     * The disabled state of the input\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * When the state is success or error, display the field with the state color indicator, e.g. border or background\n     * color.\n     */\n    stateHighlight: { type: Boolean, default: true },\n    /**\n     * When the state is success or error, display the state icon.\n     */\n    stateIcon: { type: Boolean, default: true },\n    /**\n     * The character limit for a textarea.\n     */\n    maxlength: { type: Number, default: null },\n    /**\n     * The label template for the character limit. This is a string in the vue-i18n Pluralization format with a\n     * <em>{count}</em> placeholder.\n     */\n    maxlengthLabel: { type: String, default: 'No characters left | 1 character left | {count} characters left' },\n    /**\n     * Debounce time in ms. If no value is provided, the default value set in NeonDebounceUtils is used (=0ms).\n     */\n    debounce: { type: Number, default: undefined },\n  },\n  emits: [\n    /**\n     * Emitted when the input has gained focus\n     * @type {void}\n     */\n    'focus',\n    /**\n     * Emitted when the input has lost focus\n     * @type {void}\n     */\n    'blur',\n    /**\n     * Emitted when the icon is clicked\n     * @type {void}\n     */\n    'icon-click',\n    /**\n     * Emitted when the input value is changed, NOTE: is not triggered if input is over the textarea length limit\n     * @type {string} the contents of the input\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit, expose }) {\n    const attrs = useAttrs();\n    const neonInput = ref<HTMLElement | null>(null);\n    const focused = ref(false);\n\n    const sanitizedAttributes = computed(() => {\n      const {\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        onBlur,\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        onFocus,\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        onIconClick,\n        ...sanitized\n      } = attrs;\n\n      return sanitized;\n    });\n\n    const emitModelValue = NeonDebounceUtils.debounce((value: string) => {\n      emit('update:modelValue', value);\n    }, props.debounce);\n\n    const iconName = computed(() => {\n      switch (props.state) {\n        case NeonState.Loading:\n          return 'loading';\n        case NeonState.Success:\n          return props.stateIcon ? 'check' : undefined;\n        case NeonState.Error:\n          return props.stateIcon ? 'times' : undefined;\n        default:\n          if (props.icon) {\n            return props.icon;\n          } else if (props.modelValue && props.modelValue.length > 0) {\n            return 'times';\n          }\n\n          return undefined;\n      }\n    });\n\n    const iconVisible = computed(() => {\n      return (\n        iconName.value &&\n        !props.hideIcon &&\n        (props.state !== 'ready' || props.icon || (props.modelValue && !props.disabled && props.modelValue.length > 0))\n      );\n    });\n\n    const iconColor = computed(() => {\n      switch (props.state) {\n        case NeonState.Success:\n          return NeonFunctionalColor.Success;\n        case NeonState.Error:\n          return NeonFunctionalColor.Error;\n        case NeonState.Loading:\n          return props.color;\n        default:\n          return NeonFunctionalColor.LowContrast;\n      }\n    });\n\n    const counterLabel = computed<string | null>(() => {\n      if (props.maxlength && props.maxlength > 0) {\n        const templates = props.maxlengthLabel.split(' | ');\n        const remainingChars = props.maxlength - props.modelValue.length;\n        switch (remainingChars) {\n          case 0:\n            return templates[0];\n          case 1:\n            return templates[1];\n          default:\n            return templates[2].replace('{count}', `${remainingChars}`);\n        }\n      }\n      return null;\n    });\n\n    const focus = () => {\n      neonInput.value?.focus();\n    };\n\n    const click = () => {\n      neonInput.value?.click();\n    };\n\n    const onFocus = () => {\n      focused.value = true;\n      emit('focus');\n    };\n\n    const onBlur = () => {\n      focused.value = false;\n      emit('blur');\n    };\n\n    const iconClicked = ($event: Event) => {\n      if (!props.disabled) {\n        if (props.icon) {\n          emit('icon-click');\n        } else {\n          emitModelValue('');\n          setTimeout(focus);\n        }\n        $event.preventDefault();\n        $event.stopPropagation();\n      }\n    };\n\n    const changeValue = (event: InputEvent) => {\n      const val = (event.target as HTMLInputElement).value;\n      const v = props.maxlength && val.length > props.maxlength ? val.substring(0, props.maxlength) : val;\n      if (props.modelValue !== v) {\n        emitModelValue(v);\n      }\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key !== 'Backspace' &&\n        props.maxlength &&\n        props.modelValue &&\n        props.modelValue.length >= props.maxlength\n      ) {\n        event.preventDefault();\n      }\n    };\n\n    const computedPlaceholder = computed(() => {\n      if (props.placeholder) {\n        return props.placeholder;\n      } else {\n        switch (props.type) {\n          case NeonInputType.Email:\n            return 'gbelson@hooli.com';\n          case NeonInputType.Tel:\n            return '+41785551234';\n          case NeonInputType.Url:\n            return 'http://www.getskeleton.com';\n          default:\n            return '';\n        }\n      }\n    });\n\n    expose({ neonInput });\n\n    return {\n      neonInput,\n      focused,\n      sanitizedAttributes,\n      iconVisible,\n      iconName,\n      iconColor,\n      computedPlaceholder,\n      counterLabel,\n      focus,\n      click,\n      onFocus,\n      onBlur,\n      iconClicked,\n      changeValue,\n      onKeyDown,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonInputType","NeonSize","NeonFunctionalColor","NeonInputMode","NeonState","props","emit","expose","attrs","useAttrs","neonInput","ref","focused","sanitizedAttributes","computed","onBlur","onFocus","onIconClick","sanitized","emitModelValue","NeonDebounceUtils","value","iconName","iconVisible","iconColor","counterLabel","templates","remainingChars","focus","_a","click","iconClicked","$event","changeValue","event","val","v","onKeyDown","computedPlaceholder"],"mappings":"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"}

package/dist/components/user-input/input/NeonInput.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const d=require("./NeonInput.cjs.js"),n=require("vue"),a=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),t=["id","aria-placeholder","autocomplete","disabled","inputmode","placeholder","tabindex","type","value"],s=["id","aria-placeholder","autocomplete","disabled","inputmode","placeholder","rows","tabindex","value"],u={key:3,class:"neon-input__textarea-counter"};function r(e,o,m,b,y,h){const i=n.resolveComponent("neon-icon");return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass([[{"neon-input--with-icon":!e.hideIcon&&(e.icon||e.modelValue&&e.modelValue.length>0),"neon-input--disabled":e.disabled,"neon-input--focused":e.focused,"neon-input--placeholder-visible":e.placeholder&&(!e.modelValue||e.modelValue.length===0),"neon-input--with-state-highlight":e.stateHighlight,"neon-input--with-state-icon":e.stateIcon},`neon-input--${e.size}`,`neon-input--${e.color}`,`neon-input--state-${e.state}`],"neon-input"])},[e.rows?(n.openBlock(),n.createElementBlock("textarea",n.mergeProps({key:1,id:e.id,"aria-placeholder":e.computedPlaceholder,autocomplete:e.autocomplete,disabled:e.disabled,inputmode:e.inputmode,placeholder:e.computedPlaceholder,rows:e.rows,tabindex:e.tabindex,value:e.modelValue,class:"neon-input__textfield neon-input__textarea"},e.sanitizedAttributes,{onBlur:o[3]||(o[3]=(...l)=>e.onBlur&&e.onBlur(...l)),onFocus:o[4]||(o[4]=(...l)=>e.onFocus&&e.onFocus(...l)),onKeydown:o[5]||(o[5]=(...l)=>e.onKeyDown&&e.onKeyDown(...l)),onInput:o[6]||(o[6]=n.withModifiers((...l)=>e.changeValue&&e.changeValue(...l),["stop","prevent"]))}),null,16,s)):(n.openBlock(),n.createElementBlock("input",n.mergeProps({key:0,id:e.id,ref:"neonInput","aria-placeholder":e.computedPlaceholder,autocomplete:e.autocomplete,disabled:e.disabled,inputmode:e.inputmode,placeholder:e.computedPlaceholder,tabindex:e.tabindex,type:e.type,value:e.modelValue,class:"neon-input__textfield neon-input__text"},e.sanitizedAttributes,{onBlur:o[0]||(o[0]=(...l)=>e.onBlur&&e.onBlur(...l)),onFocus:o[1]||(o[1]=l=>!e.disabled&&e.onFocus()),onInput:o[2]||(o[2]=n.withModifiers(l=>!e.disabled&&e.changeValue(l),["stop","prevent"]))}),null,16,t)),e.iconVisible?(n.openBlock(),n.createBlock(i,{key:2,class:n.normalizeClass([{"neon-input__icon--read-only":e.iconReadonly},"neon-input__icon"]),color:e.iconColor,disabled:e.disabled,name:e.iconName,role:!e.iconReadonly&&"button",tabindex:e.disabled||e.iconReadonly?!1:0,transparent:!0,onClick:o[7]||(o[7]=l=>!e.iconReadonly&&e.iconClicked(l)),onKeydown:[o[8]||(o[8]=n.withKeys(l=>!e.iconReadonly&&e.iconClicked(l),["enter"])),o[9]||(o[9]=n.withKeys(l=>!e.iconReadonly&&e.iconClicked(l),["space"]))]},null,8,["class","color","disabled","name","role","tabindex"])):n.createCommentVNode("",!0),e.maxlength&&e.maxlength>0?(n.openBlock(),n.createElementBlock("span",u,n.toDisplayString(`${e.modelValue.length}/${e.maxlength}`),1)):n.createCommentVNode("",!0)],2)}const p=a(d,[["render",r]]);module.exports=p;
+"use strict";const d=require("./NeonInput.cjs.js"),o=require("vue"),a=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),t=["id","aria-placeholder","autocomplete","disabled","inputmode","placeholder","tabindex","type","value"],r={key:1,class:"neon-input__textarea-wrapper"},s=["id","aria-placeholder","autocomplete","disabled","inputmode","placeholder","rows","tabindex","value"],u={key:0,class:"neon-input__textarea-counter"};function p(e,n,b,y,k,h){const i=o.resolveComponent("neon-icon");return o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass([[{"neon-input--with-icon":!e.hideIcon&&(e.icon||e.modelValue&&e.modelValue.length>0),"neon-input--disabled":e.disabled,"neon-input--focused":e.focused,"neon-input--placeholder-visible":e.placeholder&&(!e.modelValue||e.modelValue.length===0),"neon-input--with-state-highlight":e.stateHighlight,"neon-input--with-state-icon":e.stateIcon},`neon-input--${e.size}`,`neon-input--${e.color}`,`neon-input--state-${e.state}`],"neon-input"])},[e.rows===null?(o.openBlock(),o.createElementBlock("input",o.mergeProps({key:0,id:e.id,ref:"neonInput","aria-placeholder":e.computedPlaceholder,autocomplete:e.autocomplete,disabled:e.disabled,inputmode:e.inputmode,placeholder:e.computedPlaceholder,tabindex:e.tabindex,type:e.type,value:e.modelValue,class:"neon-input__textfield neon-input__text"},e.sanitizedAttributes,{onBlur:n[0]||(n[0]=(...l)=>e.onBlur&&e.onBlur(...l)),onFocus:n[1]||(n[1]=l=>!e.disabled&&e.onFocus()),onInput:n[2]||(n[2]=o.withModifiers(l=>!e.disabled&&e.changeValue(l),["stop","prevent"]))}),null,16,t)):(o.openBlock(),o.createElementBlock("div",r,[o.createElementVNode("textarea",o.mergeProps({id:e.id,"aria-placeholder":e.computedPlaceholder,autocomplete:e.autocomplete,disabled:e.disabled,inputmode:e.inputmode,placeholder:e.computedPlaceholder,rows:e.rows,tabindex:e.tabindex,value:e.modelValue,class:"neon-input__textfield neon-input__textarea"},e.sanitizedAttributes,{onBlur:n[3]||(n[3]=(...l)=>e.onBlur&&e.onBlur(...l)),onFocus:n[4]||(n[4]=(...l)=>e.onFocus&&e.onFocus(...l)),onKeydown:n[5]||(n[5]=(...l)=>e.onKeyDown&&e.onKeyDown(...l)),onInput:n[6]||(n[6]=o.withModifiers((...l)=>e.changeValue&&e.changeValue(...l),["stop","prevent"]))}),"      ",16,s),e.counterLabel?(o.openBlock(),o.createElementBlock("span",u,o.toDisplayString(e.counterLabel),1)):o.createCommentVNode("",!0)])),e.iconVisible?(o.openBlock(),o.createBlock(i,{key:2,class:o.normalizeClass([{"neon-input__icon--read-only":e.iconReadonly},"neon-input__icon"]),color:e.iconColor,disabled:e.disabled,name:e.iconName,role:!e.iconReadonly&&"button",tabindex:e.disabled||e.iconReadonly?!1:0,transparent:!0,onClick:n[7]||(n[7]=l=>!e.iconReadonly&&e.iconClicked(l)),onKeydown:[n[8]||(n[8]=o.withKeys(l=>!e.iconReadonly&&e.iconClicked(l),["enter"])),n[9]||(n[9]=o.withKeys(l=>!e.iconReadonly&&e.iconClicked(l),["space"]))]},null,8,["class","color","disabled","name","role","tabindex"])):o.createCommentVNode("",!0)],2)}const m=a(d,[["render",p]]);module.exports=m;
 //# sourceMappingURL=NeonInput.vue.cjs.js.map

package/dist/components/user-input/input/NeonInput.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonInput.vue.cjs.js","sources":["../../../../src/components/user-input/input/NeonInput.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      {\n        'neon-input--with-icon': !hideIcon && (icon || (modelValue && modelValue.length > 0)),\n        'neon-input--disabled': disabled,\n        'neon-input--focused': focused,\n        'neon-input--placeholder-visible': placeholder && (!modelValue || modelValue.length === 0),\n        'neon-input--with-state-highlight': stateHighlight,\n        'neon-input--with-state-icon': stateIcon,\n      },\n      `neon-input--${size}`,\n      `neon-input--${color}`,\n      `neon-input--state-${state}`,\n    ]\"\n    class=\"neon-input\"\n  >\n    <input\n      v-if=\"!rows\"\n      :id=\"id\"\n      ref=\"neonInput\"\n      :aria-placeholder=\"computedPlaceholder\"\n      :autocomplete=\"autocomplete\"\n      :disabled=\"disabled\"\n      :inputmode=\"inputmode\"\n      :placeholder=\"computedPlaceholder\"\n      :tabindex=\"tabindex\"\n      :type=\"type\"\n      :value=\"modelValue\"\n      class=\"neon-input__textfield neon-input__text\"\n      v-bind=\"sanitizedAttributes\"\n      @blur=\"onBlur\"\n      @focus=\"!disabled && onFocus()\"\n      @input.stop.prevent=\"!disabled && changeValue($event)\"\n    />\n    <textarea\n      v-else\n      :id=\"id\"\n      :aria-placeholder=\"computedPlaceholder\"\n      :autocomplete=\"autocomplete\"\n      :disabled=\"disabled\"\n      :inputmode=\"inputmode\"\n      :placeholder=\"computedPlaceholder\"\n      :rows=\"rows\"\n      :tabindex=\"tabindex\"\n      :value=\"modelValue\"\n      class=\"neon-input__textfield neon-input__textarea\"\n      v-bind=\"sanitizedAttributes\"\n      @blur=\"onBlur\"\n      @focus=\"onFocus\"\n      @keydown=\"onKeyDown\"\n      @input.stop.prevent=\"changeValue\"\n    ></textarea>\n    <neon-icon\n      v-if=\"iconVisible\"\n      :class=\"{ 'neon-input__icon--read-only': iconReadonly }\"\n      :color=\"iconColor\"\n      :disabled=\"disabled\"\n      :name=\"iconName\"\n      :role=\"!iconReadonly && 'button'\"\n      :tabindex=\"disabled || iconReadonly ? false : 0\"\n      :transparent=\"true\"\n      class=\"neon-input__icon\"\n      @click=\"!iconReadonly && iconClicked($event)\"\n      @keydown.enter=\"!iconReadonly && iconClicked($event)\"\n      @keydown.space=\"!iconReadonly && iconClicked($event)\"\n    />\n    <span v-if=\"maxlength && maxlength > 0\" class=\"neon-input__textarea-counter\">\n      {{ `${modelValue.length}/${maxlength}` }}\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonInput.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_openBlock","_mergeProps","args","_cache","$event","_withModifiers","_createBlock","_component_neon_icon","_hoisted_3","_toDisplayString"],"mappings":"iWAmE4C,MAAM,qHAlEhDA,EAAAA,mBAqEM,MAAA,CApEH,MAAKC,EAAAA,eAAA,CAAA,EAA8C,wBAAA,CAAAC,EAAA,WAAaA,EAAA,MAASA,cAAcA,EAAA,WAAW,OAAM,0BAAwCA,EAAA,+BAAyCA,EAAA,QAAoD,kCAAAA,EAAA,cAAW,CAAMA,EAAA,YAAcA,EAAA,WAAW,SAAM,sCAAqDA,EAAA,6CAAuDA,EAAA,0BAAyCA,EAAA,IAAI,kBAAyBA,EAAA,KAAK,wBAA+BA,EAAA,KAAK,IAanf,YAAY,CAAA,IAGTA,EAAA,MAiBTC,EAAAA,YAAAH,EAAAA,mBAiBY,WAjBZI,aAiBY,OAfT,GAAIF,EAAA,GACJ,mBAAkBA,EAAA,oBAClB,aAAcA,EAAA,aACd,SAAUA,EAAA,SACV,UAAWA,EAAA,UACX,YAAaA,EAAA,oBACb,KAAMA,EAAA,KACN,SAAUA,EAAA,SACV,MAAOA,EAAA,WACR,MAAM,8CACEA,EAAA,oBAAmB,CAC1B,2BAAMA,EAAA,QAAAA,EAAA,OAAA,GAAAG,CAAA,GACN,4BAAOH,EAAA,SAAAA,EAAA,QAAA,GAAAG,CAAA,GACP,8BAASH,EAAA,WAAAA,EAAA,UAAA,GAAAG,CAAA,GACT,4CAAoBH,EAAA,aAAAA,EAAA,YAAA,GAAAG,CAAA,EAAW,CAAA,OAAA,SAAA,CAAA,kBAlClCF,EAAAA,YAAAH,EAAAA,mBAiBE,QAjBFI,aAiBE,OAfC,GAAIF,EAAA,GACL,IAAI,YACH,mBAAkBA,EAAA,oBAClB,aAAcA,EAAA,aACd,SAAUA,EAAA,SACV,UAAWA,EAAA,UACX,YAAaA,EAAA,oBACb,SAAUA,EAAA,SACV,KAAMA,EAAA,KACN,MAAOA,EAAA,WACR,MAAM,0CACEA,EAAA,oBAAmB,CAC1B,2BAAMA,EAAA,QAAAA,EAAA,OAAA,GAAAG,CAAA,GACN,QAAKC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAA,CAAGL,EAAA,UAAYA,EAAA,QAAO,GAC3B,QAAKI,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAE,EAAAA,cAAAD,GAAA,CAAgBL,EAAA,UAAYA,EAAA,YAAYK,CAAM,EAAA,CAAA,OAAA,SAAA,CAAA,iBAqB9CL,EAAA,2BADRO,EAAAA,YAaEC,EAAA,OAXC,MAAKT,EAAAA,eAAA,CAAA,CAAA,8BAAmCC,EAAA,YAAY,EAO/C,kBAAkB,CAAA,EANvB,MAAOA,EAAA,UACP,SAAUA,EAAA,SACV,KAAMA,EAAA,SACN,MAAOA,EAAA,cAAY,SACnB,SAAUA,EAAA,UAAYA,EAAA,aAAY,GAAA,EAClC,YAAa,GAEb,QAAKI,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAA,CAAGL,EAAA,cAAgBA,EAAA,YAAYK,CAAM,GAC1C,UAAO,4BAASL,EAAA,cAAgBA,EAAA,YAAYK,CAAM,EAAA,CAAA,OAAA,CAAA,8BAClCL,EAAA,cAAgBA,EAAA,YAAYK,CAAM,EAAA,CAAA,OAAA,CAAA,gGAEzCL,EAAA,WAAaA,EAAA,UAAS,GAAlCC,EAAAA,UAAA,EAAAH,EAAAA,mBAEO,OAFPW,EAEOC,EAAAA,gBAAA,GADCV,aAAW,MAAM,IAAIA,EAAA,SAAS,EAAA,EAAA,CAAA"}
+{"version":3,"file":"NeonInput.vue.cjs.js","sources":["../../../../src/components/user-input/input/NeonInput.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      {\n        'neon-input--with-icon': !hideIcon && (icon || (modelValue && modelValue.length > 0)),\n        'neon-input--disabled': disabled,\n        'neon-input--focused': focused,\n        'neon-input--placeholder-visible': placeholder && (!modelValue || modelValue.length === 0),\n        'neon-input--with-state-highlight': stateHighlight,\n        'neon-input--with-state-icon': stateIcon,\n      },\n      `neon-input--${size}`,\n      `neon-input--${color}`,\n      `neon-input--state-${state}`,\n    ]\"\n    class=\"neon-input\"\n  >\n    <input\n      v-if=\"rows === null\"\n      :id=\"id\"\n      ref=\"neonInput\"\n      :aria-placeholder=\"computedPlaceholder\"\n      :autocomplete=\"autocomplete\"\n      :disabled=\"disabled\"\n      :inputmode=\"inputmode\"\n      :placeholder=\"computedPlaceholder\"\n      :tabindex=\"tabindex\"\n      :type=\"type\"\n      :value=\"modelValue\"\n      class=\"neon-input__textfield neon-input__text\"\n      v-bind=\"sanitizedAttributes\"\n      @blur=\"onBlur\"\n      @focus=\"!disabled && onFocus()\"\n      @input.stop.prevent=\"!disabled && changeValue($event)\"\n    />\n    <div v-else class=\"neon-input__textarea-wrapper\">\n      <textarea\n        :id=\"id\"\n        :aria-placeholder=\"computedPlaceholder\"\n        :autocomplete=\"autocomplete\"\n        :disabled=\"disabled\"\n        :inputmode=\"inputmode\"\n        :placeholder=\"computedPlaceholder\"\n        :rows=\"rows\"\n        :tabindex=\"tabindex\"\n        :value=\"modelValue\"\n        class=\"neon-input__textfield neon-input__textarea\"\n        v-bind=\"sanitizedAttributes\"\n        @blur=\"onBlur\"\n        @focus=\"onFocus\"\n        @keydown=\"onKeyDown\"\n        @input.stop.prevent=\"changeValue\"\n      >\n      </textarea>\n      <span v-if=\"counterLabel\" class=\"neon-input__textarea-counter\">{{ counterLabel }}</span>\n    </div>\n    <neon-icon\n      v-if=\"iconVisible\"\n      :class=\"{ 'neon-input__icon--read-only': iconReadonly }\"\n      :color=\"iconColor\"\n      :disabled=\"disabled\"\n      :name=\"iconName\"\n      :role=\"!iconReadonly && 'button'\"\n      :tabindex=\"disabled || iconReadonly ? false : 0\"\n      :transparent=\"true\"\n      class=\"neon-input__icon\"\n      @click=\"!iconReadonly && iconClicked($event)\"\n      @keydown.enter=\"!iconReadonly && iconClicked($event)\"\n      @keydown.space=\"!iconReadonly && iconClicked($event)\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonInput.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_openBlock","_mergeProps","args","_cache","$event","_withModifiers","_hoisted_2","_createElementVNode","_hoisted_3","_hoisted_4","_toDisplayString","_createBlock","_component_neon_icon"],"mappings":"uPAmCgB,MAAM,mJAmBU,MAAM,qHArDpCA,EAAAA,mBAqEM,MAAA,CApEH,MAAKC,EAAAA,eAAA,CAAA,EAA8C,wBAAA,CAAAC,EAAA,WAAaA,EAAA,MAASA,cAAcA,EAAA,WAAW,OAAM,0BAAwCA,EAAA,+BAAyCA,EAAA,QAAoD,kCAAAA,EAAA,cAAW,CAAMA,EAAA,YAAcA,EAAA,WAAW,SAAM,sCAAqDA,EAAA,6CAAuDA,EAAA,0BAAyCA,EAAA,IAAI,kBAAyBA,EAAA,KAAK,wBAA+BA,EAAA,KAAK,IAanf,YAAY,CAAA,IAGVA,EAAA,OAAI,MADZC,EAAAA,YAAAH,EAAAA,mBAiBE,QAjBFI,aAiBE,OAfC,GAAIF,EAAA,GACL,IAAI,YACH,mBAAkBA,EAAA,oBAClB,aAAcA,EAAA,aACd,SAAUA,EAAA,SACV,UAAWA,EAAA,UACX,YAAaA,EAAA,oBACb,SAAUA,EAAA,SACV,KAAMA,EAAA,KACN,MAAOA,EAAA,WACR,MAAM,0CACEA,EAAA,oBAAmB,CAC1B,2BAAMA,EAAA,QAAAA,EAAA,OAAA,GAAAG,CAAA,GACN,QAAKC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAA,CAAGL,EAAA,UAAYA,EAAA,QAAO,GAC3B,QAAKI,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAE,EAAAA,cAAAD,GAAA,CAAgBL,EAAA,UAAYA,EAAA,YAAYK,CAAM,EAAA,CAAA,OAAA,SAAA,CAAA,kBAEtDJ,EAAAA,YAAAH,EAAAA,mBAoBM,MApBNS,EAoBM,CAnBJC,EAAAA,mBAiBW,WAjBXN,aAiBW,CAhBR,GAAIF,EAAA,GACJ,mBAAkBA,EAAA,oBAClB,aAAcA,EAAA,aACd,SAAUA,EAAA,SACV,UAAWA,EAAA,UACX,YAAaA,EAAA,oBACb,KAAMA,EAAA,KACN,SAAUA,EAAA,SACV,MAAOA,EAAA,WACR,MAAM,8CACEA,EAAA,oBAAmB,CAC1B,2BAAMA,EAAA,QAAAA,EAAA,OAAA,GAAAG,CAAA,GACN,4BAAOH,EAAA,SAAAA,EAAA,QAAA,GAAAG,CAAA,GACP,8BAASH,EAAA,WAAAA,EAAA,UAAA,GAAAG,CAAA,GACT,4CAAoBH,EAAA,aAAAA,EAAA,YAAA,GAAAG,CAAA,EAAW,CAAA,OAAA,SAAA,CAAA,KACjC,SACD,GAAAM,CAAA,EACYT,EAAA,4BAAZF,EAAAA,mBAAwF,OAAxFY,EAAwFC,EAAAA,gBAAtBX,EAAA,YAAY,EAAA,CAAA,kCAGxEA,EAAA,2BADRY,EAAAA,YAaEC,EAAA,OAXC,MAAKd,EAAAA,eAAA,CAAA,CAAA,8BAAmCC,EAAA,YAAY,EAO/C,kBAAkB,CAAA,EANvB,MAAOA,EAAA,UACP,SAAUA,EAAA,SACV,KAAMA,EAAA,SACN,MAAOA,EAAA,cAAY,SACnB,SAAUA,EAAA,UAAYA,EAAA,aAAY,GAAA,EAClC,YAAa,GAEb,QAAKI,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAA,CAAGL,EAAA,cAAgBA,EAAA,YAAYK,CAAM,GAC1C,UAAO,4BAASL,EAAA,cAAgBA,EAAA,YAAYK,CAAM,EAAA,CAAA,OAAA,CAAA,8BAClCL,EAAA,cAAgBA,EAAA,YAAYK,CAAM,EAAA,CAAA,OAAA,CAAA"}