@aotearoan/neon 18.2.0 → 18.2.2

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

@@ -1,2 +1,2 @@
-"use strict";const n=require("vue"),a=require("../../../common/enums/NeonInputType.cjs.js"),o=require("../../../common/enums/NeonState.cjs.js"),x=require("../../../common/enums/NeonSize.cjs.js"),c=require("../../../common/enums/NeonFunctionalColor.cjs.js"),B=require("../../presentation/icon/NeonIcon.vue.cjs.js"),F=require("../../../common/utils/NeonDebounceUtils.cjs.js"),q=n.defineComponent({name:"NeonInput",components:{NeonIcon:B},props:{id:{type:String,default:null},modelValue:{type:String,default:null},type:{type:String,default:a.NeonInputType.Text},placeholder:{type:String,default:null},size:{type:String,default:x.NeonSize.Medium},color:{type:String,default:c.NeonFunctionalColor.LowContrast},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}){const m=n.useAttrs(),i=n.ref(null),r=n.ref(!1),g=n.computed(()=>{const{onBlur:t,onFocus:u,onIconClick:s,...w}=m;return w}),d=F.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}}),y=n.computed(()=>f.value&&!e.hideIcon&&(e.state!=="ready"||e.icon||e.modelValue&&!e.disabled&&e.modelValue.length>0)),N=n.computed(()=>{switch(e.state){case o.NeonState.Success:return c.NeonFunctionalColor.Success;case o.NeonState.Error:return c.NeonFunctionalColor.Error;case o.NeonState.Loading:return e.color;default:return c.NeonFunctionalColor.LowContrast}}),h=()=>{var t;(t=i.value)==null||t.focus()},S=()=>{var t;(t=i.value)==null||t.click()},b=()=>{r.value=!0,l("focus")},I=()=>{r.value=!1,l("blur")},v=t=>{e.disabled||(e.icon?l("icon-click"):d(""),t.preventDefault(),t.stopPropagation())},V=t=>{const u=t.target.value,s=e.maxlength&&u.length>e.maxlength?u.substring(0,e.maxlength):u;e.modelValue!==s&&d(s)},C=t=>{t.key!=="Backspace"&&e.maxlength&&e.modelValue&&e.modelValue.length>=e.maxlength&&t.preventDefault()},k=n.computed(()=>{if(e.placeholder)return e.placeholder;switch(e.type){case a.NeonInputType.Email:return"gbelson@hooli.com";case a.NeonInputType.Tel:return"+41785551234";case a.NeonInputType.Url:return"http://www.getskeleton.com";default:return""}});return{neonInput:i,focused:r,sanitizedAttributes:g,iconVisible:y,iconName:f,iconColor:N,computedPlaceholder:k,focus:h,click:S,onFocus:b,onBlur:I,iconClicked:v,changeValue:V,onKeyDown:C}}});module.exports=q;
+"use strict";const n=require("vue"),a=require("../../../common/enums/NeonInputType.cjs.js"),o=require("../../../common/enums/NeonState.cjs.js"),x=require("../../../common/enums/NeonSize.cjs.js"),c=require("../../../common/enums/NeonFunctionalColor.cjs.js"),B=require("../../presentation/icon/NeonIcon.vue.cjs.js"),q=require("../../../common/utils/NeonDebounceUtils.cjs.js"),F=require("../../../common/enums/NeonInputMode.cjs.js"),T=n.defineComponent({name:"NeonInput",components:{NeonIcon:B},props:{id:{type:String,default:null},modelValue:{type:String,default:null},type:{type:String,default:a.NeonInputType.Text},placeholder:{type:String,default:null},size:{type:String,default:x.NeonSize.Medium},color:{type:String,default:c.NeonFunctionalColor.LowContrast},inputmode:{type:String,default:F.NeonInputMode.Text},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}){const m=n.useAttrs(),i=n.ref(null),r=n.ref(!1),N=n.computed(()=>{const{onBlur:t,onFocus:u,onIconClick:d,...w}=m;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}}),g=n.computed(()=>f.value&&!e.hideIcon&&(e.state!=="ready"||e.icon||e.modelValue&&!e.disabled&&e.modelValue.length>0)),y=n.computed(()=>{switch(e.state){case o.NeonState.Success:return c.NeonFunctionalColor.Success;case o.NeonState.Error:return c.NeonFunctionalColor.Error;case o.NeonState.Loading:return e.color;default:return c.NeonFunctionalColor.LowContrast}}),h=()=>{var t;(t=i.value)==null||t.focus()},S=()=>{var t;(t=i.value)==null||t.click()},b=()=>{r.value=!0,l("focus")},I=()=>{r.value=!1,l("blur")},v=t=>{e.disabled||(e.icon?l("icon-click"):s(""),t.preventDefault(),t.stopPropagation())},V=t=>{const u=t.target.value,d=e.maxlength&&u.length>e.maxlength?u.substring(0,e.maxlength):u;e.modelValue!==d&&s(d)},C=t=>{t.key!=="Backspace"&&e.maxlength&&e.modelValue&&e.modelValue.length>=e.maxlength&&t.preventDefault()},k=n.computed(()=>{if(e.placeholder)return e.placeholder;switch(e.type){case a.NeonInputType.Email:return"gbelson@hooli.com";case a.NeonInputType.Tel:return"+41785551234";case a.NeonInputType.Url:return"http://www.getskeleton.com";default:return""}});return{neonInput:i,focused:r,sanitizedAttributes:N,iconVisible:g,iconName:f,iconColor:y,computedPlaceholder:k,focus:h,click:S,onFocus:b,onBlur:I,iconClicked:v,changeValue:V,onKeyDown:C}}});module.exports=T;
 //# 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';\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.LowContrast },\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 }) {\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        }\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    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","NeonState","props","emit","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.LowContrast },\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 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 }) {\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        }\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    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","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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"}

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

@@ -5,7 +5,8 @@ import { NeonSize as D } from "../../../common/enums/NeonSize.es.js";
 import { NeonFunctionalColor as c } 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";
-const _ = C({
+import { NeonInputMode as L } from "../../../common/enums/NeonInputMode.es.js";
+const K = C({
   name: "NeonInput",
   components: {
     NeonIcon: E
@@ -37,6 +38,10 @@ const _ = C({
      * Color of the input
      */
     color: { type: String, default: c.LowContrast },
+    /**
+     * 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 },
     /**
      * The state of the input
      */
@@ -108,7 +113,7 @@ const _ = C({
     "update:modelValue"
   ],
   setup(e, { emit: o }) {
-    const g = z(), i = m(null), r = m(!1), h = l(() => {
+    const g = z(), i = m(null), r = m(!1), y = l(() => {
       const {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         onBlur: t,
@@ -132,7 +137,7 @@ const _ = C({
         default:
           return e.icon ? e.icon : e.modelValue && e.modelValue.length > 0 ? "times" : void 0;
       }
-    }), y = l(() => f.value && !e.hideIcon && (e.state !== "ready" || e.icon || e.modelValue && !e.disabled && e.modelValue.length > 0)), b = l(() => {
+    }), h = l(() => f.value && !e.hideIcon && (e.state !== "ready" || e.icon || e.modelValue && !e.disabled && e.modelValue.length > 0)), b = l(() => {
       switch (e.state) {
         case n.Success:
           return c.Success;
@@ -146,19 +151,19 @@ const _ = C({
     }), S = () => {
       var t;
       (t = i.value) == null || t.focus();
-    }, V = () => {
+    }, N = () => {
       var t;
       (t = i.value) == null || t.click();
-    }, v = () => {
+    }, V = () => {
       r.value = !0, o("focus");
-    }, N = () => {
+    }, v = () => {
       r.value = !1, o("blur");
-    }, k = (t) => {
+    }, I = (t) => {
       e.disabled || (e.icon ? o("icon-click") : s(""), t.preventDefault(), t.stopPropagation());
-    }, w = (t) => {
+    }, 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);
-    }, I = (t) => {
+    }, w = (t) => {
       t.key !== "Backspace" && e.maxlength && e.modelValue && e.modelValue.length >= e.maxlength && t.preventDefault();
     }, x = l(() => {
       if (e.placeholder)
@@ -177,22 +182,22 @@ const _ = C({
     return {
       neonInput: i,
       focused: r,
-      sanitizedAttributes: h,
-      iconVisible: y,
+      sanitizedAttributes: y,
+      iconVisible: h,
       iconName: f,
       iconColor: b,
       computedPlaceholder: x,
       focus: S,
-      click: V,
-      onFocus: v,
-      onBlur: N,
-      iconClicked: k,
-      changeValue: w,
-      onKeyDown: I
+      click: N,
+      onFocus: V,
+      onBlur: v,
+      iconClicked: I,
+      changeValue: k,
+      onKeyDown: w
     };
   }
 });
 export {
-  _ as default
+  K 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';\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.LowContrast },\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 }) {\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        }\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    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","NeonState","props","emit","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.LowContrast },\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 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 }) {\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        }\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    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","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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"}

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"),s=["id","aria-placeholder","disabled","placeholder","tabindex","type","value"],r=["id","aria-placeholder","disabled","placeholder","rows","tabindex","value"],t={key:3,class:"neon-input__textarea-counter"};function u(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,disabled:e.disabled,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,r)):(n.openBlock(),n.createElementBlock("input",n.mergeProps({key:0,id:e.id,ref:"neonInput","aria-placeholder":e.computedPlaceholder,disabled:e.disabled,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,s)),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",t,n.toDisplayString(`${e.modelValue.length}/${e.maxlength}`),1)):n.createCommentVNode("",!0)],2)}const p=a(d,[["render",u]]);module.exports=p;
+"use strict";const d=require("./NeonInput.cjs.js"),n=require("vue"),a=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),s=["id","aria-placeholder","disabled","inputmode","placeholder","tabindex","type","value"],r=["id","aria-placeholder","disabled","inputmode","placeholder","rows","tabindex","value"],t={key:3,class:"neon-input__textarea-counter"};function u(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,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,r)):(n.openBlock(),n.createElementBlock("input",n.mergeProps({key:0,id:e.id,ref:"neonInput","aria-placeholder":e.computedPlaceholder,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,s)),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",t,n.toDisplayString(`${e.modelValue.length}/${e.maxlength}`),1)):n.createCommentVNode("",!0)],2)}const p=a(d,[["render",u]]);module.exports=p;
 //# 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      :disabled=\"disabled\"\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      :disabled=\"disabled\"\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":["_hoisted_3","_resolveComponent","_normalizeClass","_ctx","_openBlock","_createElementBlock","_mergeProps","_cache","args","_withModifiers","$event","_createBlock","_component_neon_icon","_createCommentVNode"],"mappings":"kSA+D4CA,EAAoC,6EAGxEC,EAAA,iBAAA,WAAA,mDAhEgD,MAAAC,EAAA,eAAA,CAAA,0BAA6I,CAAAC,EAAA,WAAAA,EAAA,MAAAA,EAAA,YAAAA,EAAA,WAAA,OAAA,GAA6C,uBAAAA,EAAA,2EAAqKA,EAAA,cAAA,CAAAA,EAAA,YAAAA,EAAA,WAAA,SAAA,qFAAoCA,EAAA,gCAAkE,kBAaveA,EAAA,KAAA,mCAGL,YAAA,CAAA,CADb,EAAA,SAkBGC,EAAAA,YAAMC,EAAAA,mBAAA,WAAAC,aAAA,CACN,IAAA,EACA,GAAAH,KACA,mBAAgCA,EAAA,oBAChC,SAAUA,EAAA,SACV,YAAkBA,EAAA,oBAClB,OAAiB,KAClB,SAAkDA,EAAA,eACvBA,EAAA,WAC1B,kDACA,EAAAA,EAAA,qBACA,OAAAI,sBAAkB,QAAAJ,EAAA,OAAA,GAAAK,CAAA,GAClB,uCAA+BL,EAAA,QAAA,GAAAK,CAAA,iEAGf,QAAAD,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAE,EAAAA,cAAA,IAAAD,IAAAL,EAAA,aAAAA,EAAA,YAAA,GAAAK,CAAA,EAAA,CAAA,OAAA,SAAA,CAAA,cAYjB,IA3CCJ,EAAAA,YAAMC,EAAAA,mBAAA,QAAAC,aAAA,CACP,IAAI,EACH,GAAAH,EAAA,GACA,IAAA,YACA,mBAAgCA,EAAA,oBAChC,SAAUA,EAAQ,SAClB,YAAUA,EAAA,oBACV,SAAiBA,EAAA,SAClB,OAA8C,WACnBA,EAAA,WAC1B,gDACKA,EAAA,oBAAA,CACL,OAAqBI,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,IAAAC,IAAAL,EAAA,QAAAA,EAAA,OAAQ,GAAIK,CAAA,oDAEpC,QAAAD,EAAA,CAAA,IAAAA,EAAA,CAAA,IAeY,cAAAG,GAAA,CAAAP,EAAA,UAAAA,EAAA,YAAAO,CAAA,EAAA,CAAA,OAAA,SAAA,CAAA,4CAGJ,EAAAC,EAAA,YAAAC,EAAA,CACL,IAAK,EACL,MAAAV,EAAkB,eAAA,CAAA,CAAA,8BAAAC,EAAA,YAAA,EAAA,kBAAA,CAAA,EAClB,MAAcA,EAAA,UACd,SAAmBA,EAAA,SACnB,KAAQA,EAAU,SAClB,KAAA,CAAAA,gBAAiB,SAEjB,SAAQA,EAAA,UAAAA,EAAA,aAAA,GAAA,EACR,YAAO,6BAAqB,cAAAA,EAAe,YAAAO,CAAO,8JAGzC,EAAA,KAAA,WAAsB,QAAA,WAAA,OAAA,OAAA,UAAA,CAAA,GAAlCG,EAAA,mBAAA,GAAA,EAAA"}
+{"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      :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      :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":["_hoisted_3","_resolveComponent","_normalizeClass","_ctx","_openBlock","_createElementBlock","_mergeProps","_cache","args","_withModifiers","$event","_createBlock","_component_neon_icon","_createCommentVNode"],"mappings":"0TAiE4CA,EAAoC,6EAGxEC,EAAA,iBAAA,WAAA,mDAlEgD,MAAAC,EAAA,eAAA,CAAA,0BAA6I,CAAAC,EAAA,WAAAA,EAAA,MAAAA,EAAA,YAAAA,EAAA,WAAA,OAAA,GAA6C,uBAAAA,EAAA,2EAAqKA,EAAA,cAAA,CAAAA,EAAA,YAAAA,EAAA,WAAA,SAAA,qFAAoCA,EAAA,gCAAkE,kBAaveA,EAAA,KAAA,mCAGL,YAAA,CAAA,CADb,EAAA,SAmBGC,EAAAA,YAAMC,EAAAA,mBAAA,WAAAC,aAAA,CACN,IAAA,EACA,GAAAH,KACA,mBAAoBA,EAAA,oBACpB,SAAAA,EAAgC,SAChC,UAAUA,EAAA,UACV,YAAkBA,EAAA,oBAClB,OAAiB,KAClB,SAAkDA,EAAA,eACvBA,EAAA,WAC1B,kDACA,EAAAA,EAAA,qBACA,OAAAI,sBAAkB,QAAAJ,EAAA,OAAA,GAAAK,CAAA,GAClB,uCAA+BL,EAAA,QAAA,GAAAK,CAAA,iEAGf,QAAAD,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAE,EAAAA,cAAA,IAAAD,IAAAL,EAAA,aAAAA,EAAA,YAAA,GAAAK,CAAA,EAAA,CAAA,OAAA,SAAA,CAAA,cAYjB,IA7CCJ,EAAAA,YAAMC,EAAAA,mBAAA,QAAAC,aAAA,CACP,IAAI,EACH,GAAAH,EAAA,GACA,IAAA,YACA,mBAAoBA,EAAA,oBACpB,SAAAA,EAAgC,SAChC,UAAkBA,EAAA,UAClB,YAAUA,EAAA,oBACV,SAAiBA,EAAA,SAClB,OAA8C,WACnBA,EAAA,WAC1B,gDACKA,EAAA,oBAAA,CACL,OAAqBI,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,IAAAC,IAAAL,EAAA,QAAAA,EAAA,OAAQ,GAAIK,CAAA,oDAEpC,QAAAD,EAAA,CAAA,IAAAA,EAAA,CAAA,IAgBY,cAAAG,GAAA,CAAAP,EAAA,UAAAA,EAAA,YAAAO,CAAA,EAAA,CAAA,OAAA,SAAA,CAAA,4CAGJ,EAAAC,EAAA,YAAAC,EAAA,CACL,IAAK,EACL,MAAAV,EAAkB,eAAA,CAAA,CAAA,8BAAAC,EAAA,YAAA,EAAA,kBAAA,CAAA,EAClB,MAAcA,EAAA,UACd,SAAmBA,EAAA,SACnB,KAAQA,EAAU,SAClB,KAAA,CAAAA,gBAAiB,SAEjB,SAAQA,EAAA,UAAAA,EAAA,aAAA,GAAA,EACR,YAAO,6BAAqB,cAAAA,EAAe,YAAAO,CAAO,8JAGzC,EAAA,KAAA,WAAsB,QAAA,WAAA,OAAA,OAAA,UAAA,CAAA,GAAlCG,EAAA,mBAAA,GAAA,EAAA"}

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

@@ -1,12 +1,12 @@
-import p from "./NeonInput.es.js";
+import t from "./NeonInput.es.js";
 import { resolveComponent as m, openBlock as l, createElementBlock as i, normalizeClass as d, mergeProps as a, withModifiers as s, createBlock as b, withKeys as r, createCommentVNode as u, toDisplayString as y } from "vue";
 import h from "../../../_virtual/_plugin-vue_export-helper.es.js";
-const f = ["id", "aria-placeholder", "disabled", "placeholder", "tabindex", "type", "value"], g = ["id", "aria-placeholder", "disabled", "placeholder", "rows", "tabindex", "value"], w = {
+const f = ["id", "aria-placeholder", "disabled", "inputmode", "placeholder", "tabindex", "type", "value"], g = ["id", "aria-placeholder", "disabled", "inputmode", "placeholder", "rows", "tabindex", "value"], w = {
   key: 3,
   class: "neon-input__textarea-counter"
 };
 function V(e, n, k, v, $, B) {
-  const t = m("neon-icon");
+  const p = m("neon-icon");
   return l(), i("div", {
     class: d([[
       {
@@ -27,6 +27,7 @@ function V(e, n, k, v, $, B) {
       id: e.id,
       "aria-placeholder": e.computedPlaceholder,
       disabled: e.disabled,
+      inputmode: e.inputmode,
       placeholder: e.computedPlaceholder,
       rows: e.rows,
       tabindex: e.tabindex,
@@ -43,6 +44,7 @@ function V(e, n, k, v, $, B) {
       ref: "neonInput",
       "aria-placeholder": e.computedPlaceholder,
       disabled: e.disabled,
+      inputmode: e.inputmode,
       placeholder: e.computedPlaceholder,
       tabindex: e.tabindex,
       type: e.type,
@@ -53,7 +55,7 @@ function V(e, n, k, v, $, B) {
       onFocus: n[1] || (n[1] = (o) => !e.disabled && e.onFocus()),
       onInput: n[2] || (n[2] = s((o) => !e.disabled && e.changeValue(o), ["stop", "prevent"]))
     }), null, 16, f)),
-    e.iconVisible ? (l(), b(t, {
+    e.iconVisible ? (l(), b(p, {
       key: 2,
       class: d([{ "neon-input__icon--read-only": e.iconReadonly }, "neon-input__icon"]),
       color: e.iconColor,
@@ -71,7 +73,7 @@ function V(e, n, k, v, $, B) {
     e.maxlength && e.maxlength > 0 ? (l(), i("span", w, y(`${e.modelValue.length}/${e.maxlength}`), 1)) : u("", !0)
   ], 2);
 }
-const F = /* @__PURE__ */ h(p, [["render", V]]);
+const F = /* @__PURE__ */ h(t, [["render", V]]);
 export {
   F as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"NeonInput.vue.es.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      :disabled=\"disabled\"\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      :disabled=\"disabled\"\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":["_hoisted_3","_resolveComponent","_normalizeClass","_ctx","_openBlock","_createElementBlock","_mergeProps","_cache","args","_withModifiers","$event","_createBlock","_component_neon_icon","_createCommentVNode"],"mappings":";;;sLA+D4CA,IAAoC;AAAA;;;;YAGxEC,EAAA,WAAA;;IAhEgD,OAAAC,EAAA,CAAA;AAAA;iCAA6I,CAAAC,EAAA,aAAAA,EAAA,QAAAA,EAAA,cAAAA,EAAA,WAAA,SAAA;AAAA,QAA6C,wBAAAA,EAAA;AAAA;2CAAqKA,EAAA,gBAAA,CAAAA,EAAA,cAAAA,EAAA,WAAA,WAAA;AAAA;uCAAoCA,EAAA;AAAA;2BAAkE;AAAA,qBAaveA,EAAA,KAAA;AAAA;OAGL,YAAA,CAAA;AAAA,EADb,GAAA;AAAA,cAkBGC,KAAMC,EAAA,YAAAC,EAAA;AAAA,MACN,KAAA;AAAA,MACA,IAAAH;MACA,oBAAgCA,EAAA;AAAA,MAChC,UAAUA,EAAA;AAAA,MACV,aAAkBA,EAAA;AAAA,MAClB,QAAiB;AAAA,MAClB,UAAkDA,EAAA;AAAA,aACvBA,EAAA;AAAA,MAC1B;IACA,GAAAA,EAAA;MACA,QAAAI,4BAAkB,UAAAJ,EAAA,OAAA,GAAAK,CAAA;AAAA,MAClB,gDAA+BL,EAAA,QAAA,GAAAK,CAAA;AAAA;MAGf,SAAAD,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAE,EAAA,IAAAD,MAAAL,EAAA,eAAAA,EAAA,YAAA,GAAAK,CAAA,GAAA,CAAA,QAAA,SAAA,CAAA;AAAA,mBAYjB,MA3CCJ,KAAMC,EAAA,SAAAC,EAAA;AAAA,MACP,KAAI;AAAA,MACH,IAAAH,EAAA;AAAA,MACA,KAAA;AAAA,MACA,oBAAgCA,EAAA;AAAA,MAChC,UAAUA,EAAQ;AAAA,MAClB,aAAUA,EAAA;AAAA,MACV,UAAiBA,EAAA;AAAA,MAClB,QAA8C;AAAA,aACnBA,EAAA;AAAA,MAC1B;OACKA,EAAA,qBAAA;AAAA,MACL,QAAqBI,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAL,EAAA,UAAAA,EAAA,OAAQ,GAAIK,CAAA;AAAA;MAEpC,SAAAD,EAAA,CAAA,MAAAA,EAAA,CAAA,MAeY,CAAAG,MAAA,CAAAP,EAAA,YAAAA,EAAA,YAAAO,CAAA,GAAA,CAAA,QAAA,SAAA,CAAA;AAAA;uBAGJ,GAAAC,EAAAC,GAAA;AAAA,MACL,KAAK;AAAA,MACL,OAAAV,EAAkB,CAAA,EAAA,+BAAAC,EAAA,aAAA,GAAA,kBAAA,CAAA;AAAA,MAClB,OAAcA,EAAA;AAAA,MACd,UAAmBA,EAAA;AAAA,MACnB,MAAQA,EAAU;AAAA,MAClB,MAAA,CAAAA,kBAAiB;AAAA,MAEjB,UAAQA,EAAA,YAAAA,EAAA,eAAA,KAAA;AAAA,MACR,aAAO;AAAA,yCAAqB,gBAAAA,EAAe,YAAAO,CAAO;AAAA;;;;IAGzC,GAAA,MAAA,aAAsB,SAAA,YAAA,QAAA,QAAA,UAAA,CAAA,KAAlCG,EAAA,IAAA,EAAA;AAAA;;;;"}
+{"version":3,"file":"NeonInput.vue.es.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      :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      :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":["_hoisted_3","_resolveComponent","_normalizeClass","_ctx","_openBlock","_createElementBlock","_mergeProps","_cache","args","_withModifiers","$event","_createBlock","_component_neon_icon","_createCommentVNode"],"mappings":";;;gNAiE4CA,IAAoC;AAAA;;;;YAGxEC,EAAA,WAAA;;IAlEgD,OAAAC,EAAA,CAAA;AAAA;iCAA6I,CAAAC,EAAA,aAAAA,EAAA,QAAAA,EAAA,cAAAA,EAAA,WAAA,SAAA;AAAA,QAA6C,wBAAAA,EAAA;AAAA;2CAAqKA,EAAA,gBAAA,CAAAA,EAAA,cAAAA,EAAA,WAAA,WAAA;AAAA;uCAAoCA,EAAA;AAAA;2BAAkE;AAAA,qBAaveA,EAAA,KAAA;AAAA;OAGL,YAAA,CAAA;AAAA,EADb,GAAA;AAAA,cAmBGC,KAAMC,EAAA,YAAAC,EAAA;AAAA,MACN,KAAA;AAAA,MACA,IAAAH;MACA,oBAAoBA,EAAA;AAAA,MACpB,UAAAA,EAAgC;AAAA,MAChC,WAAUA,EAAA;AAAA,MACV,aAAkBA,EAAA;AAAA,MAClB,QAAiB;AAAA,MAClB,UAAkDA,EAAA;AAAA,aACvBA,EAAA;AAAA,MAC1B;IACA,GAAAA,EAAA;MACA,QAAAI,4BAAkB,UAAAJ,EAAA,OAAA,GAAAK,CAAA;AAAA,MAClB,gDAA+BL,EAAA,QAAA,GAAAK,CAAA;AAAA;MAGf,SAAAD,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAE,EAAA,IAAAD,MAAAL,EAAA,eAAAA,EAAA,YAAA,GAAAK,CAAA,GAAA,CAAA,QAAA,SAAA,CAAA;AAAA,mBAYjB,MA7CCJ,KAAMC,EAAA,SAAAC,EAAA;AAAA,MACP,KAAI;AAAA,MACH,IAAAH,EAAA;AAAA,MACA,KAAA;AAAA,MACA,oBAAoBA,EAAA;AAAA,MACpB,UAAAA,EAAgC;AAAA,MAChC,WAAkBA,EAAA;AAAA,MAClB,aAAUA,EAAA;AAAA,MACV,UAAiBA,EAAA;AAAA,MAClB,QAA8C;AAAA,aACnBA,EAAA;AAAA,MAC1B;OACKA,EAAA,qBAAA;AAAA,MACL,QAAqBI,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAL,EAAA,UAAAA,EAAA,OAAQ,GAAIK,CAAA;AAAA;MAEpC,SAAAD,EAAA,CAAA,MAAAA,EAAA,CAAA,MAgBY,CAAAG,MAAA,CAAAP,EAAA,YAAAA,EAAA,YAAAO,CAAA,GAAA,CAAA,QAAA,SAAA,CAAA;AAAA;uBAGJ,GAAAC,EAAAC,GAAA;AAAA,MACL,KAAK;AAAA,MACL,OAAAV,EAAkB,CAAA,EAAA,+BAAAC,EAAA,aAAA,GAAA,kBAAA,CAAA;AAAA,MAClB,OAAcA,EAAA;AAAA,MACd,UAAmBA,EAAA;AAAA,MACnB,MAAQA,EAAU;AAAA,MAClB,MAAA,CAAAA,kBAAiB;AAAA,MAEjB,UAAQA,EAAA,YAAAA,EAAA,eAAA,KAAA;AAAA,MACR,aAAO;AAAA,yCAAqB,gBAAAA,EAAe,YAAAO,CAAO;AAAA;;;;IAGzC,GAAA,MAAA,aAAsB,SAAA,YAAA,QAAA,QAAA,UAAA,CAAA,KAAlCG,EAAA,IAAA,EAAA;AAAA;;;;"}

package/dist/src/components/user-input/input/NeonInput.d.ts

@@ -2,6 +2,7 @@ import { NeonInputType } from '@/common/enums/NeonInputType';
 import { NeonState } from '@/common/enums/NeonState';
 import { NeonSize } from '@/common/enums/NeonSize';
 import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+import { NeonInputMode } from '@/common/enums/NeonInputMode';
 /**
  * Equivalent of, and wrapper around, an HTML input. Also supports <strong>textarea</strong>.
  */
@@ -50,6 +51,13 @@ declare const _default: import("vue").DefineComponent<{
         type: () => NeonFunctionalColor;
         default: NeonFunctionalColor;
     };
+    /**
+     * The HTML input mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">here</a>.
+     */
+    inputmode: {
+        type: () => NeonInputMode;
+        default: NeonInputMode;
+    };
     /**
      * The state of the input
      */
@@ -192,6 +200,13 @@ declare const _default: import("vue").DefineComponent<{
         type: () => NeonFunctionalColor;
         default: NeonFunctionalColor;
     };
+    /**
+     * The HTML input mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">here</a>.
+     */
+    inputmode: {
+        type: () => NeonInputMode;
+        default: NeonInputMode;
+    };
     /**
      * The state of the input
      */
@@ -289,6 +304,7 @@ declare const _default: import("vue").DefineComponent<{
     id: string;
     state: NeonState;
     placeholder: string;
+    inputmode: NeonInputMode;
     rows: number;
     iconReadonly: boolean;
     hideIcon: boolean;

package/dist/src/components/user-input/number/NeonNumber.d.ts

@@ -276,9 +276,9 @@ declare const _default: import("vue").DefineComponent<{
     color: NeonFunctionalColor;
     modelValue: number;
     placeholder: string;
+    inputmode: NeonInputMode;
     editable: boolean;
     spinButtons: boolean;
-    inputmode: NeonInputMode;
     incrementLabel: string;
     decrementLabel: string;
 }, {}>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aotearoan/neon",
   "description": "Neon is a lightweight design library of Vue 3 components with minimal dependencies.",
-  "version": "18.2.0",
+  "version": "18.2.2",
   "main": "./dist/neon.cjs.js",
   "module": "./dist/neon.es.js",
   "types": "./dist/src/neon.d.ts",

package/src/sass/components/_link.scss

@@ -63,11 +63,17 @@ a[href]:not(.neon-link--no-style) {
     }
 
     &--outline-text {
+      &:after {
+        height: var(--neon-border-width-link);
+        background-color: var(--neon-color-link);
+      }
+
       &:hover {
         color: var(--neon-color-link-hover);
 
         &:after {
           background-color: var(--neon-color-link-hover);
+          height: var(--neon-border-width-link-hover);
         }
       }
     }

package/src/sass/includes/_outline.scss

@@ -12,9 +12,9 @@
       font-weight: bold;
       position: absolute;
       left: 0;
-      bottom: 0;
+      bottom: var(--neon-border-bottom-offset-link);
       width: 100%;
-      height: 2rem;
+      height: var(--neon-border-width-outline);
       display: flex;
       background-color: transparent;
       border-radius: var(--neon-border-radius);

package/src/sass/variables.scss

@@ -236,6 +236,14 @@
   /* note */
   --neon-border-width-note: 8rem;
 
+  /* outline */
+  --neon-border-width-outline: 1rem;
+
+  /* link */
+  --neon-border-width-link: 1rem;
+  --neon-border-width-link-hover: 1rem;
+  --neon-border-bottom-offset-link: 2rem;
+
   /* slider & range slider */
   --neon-height-slider-track: 8rem;
   --neon-height-slider-thumb: calc(3 * var(--neon-height-slider-track));
@@ -434,8 +442,8 @@
     --neon-color-note: var(--neon-color-text);
 
     /* link */
-    --neon-rgb-link: var(--neon-rgb-primary-l1);
     --neon-color-link: var(--neon-color-primary-l1);
+    --neon-rgb-link: var(--neon-rgb-primary-l1); // should match the --neon-color-link color
     --neon-color-link-hover: var(--neon-color-primary-l2);
     --neon-color-link-visited: rgba(var(--neon-rgb-primary-l1), 0.6);
 
@@ -727,8 +735,8 @@
     --neon-color-note: var(--neon-color-text);
 
     /* link */
-    --neon-rgb-link: var(--neon-rgb-primary-d1);
     --neon-color-link: var(--neon-color-primary-d1);
+    --neon-rgb-link: var(--neon-rgb-primary-d1); // should match the --neon-color-link color
     --neon-color-link-hover: var(--neon-color-primary-d2);
     --neon-color-link-visited: rgba(var(--neon-rgb-primary-d1), 0.6);