@aotearoan/neon 18.2.13 → 19.0.1

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.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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"}
+{"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, defineExpose, 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 }) {\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    defineExpose({ 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","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","defineExpose"],"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","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;
+"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;
 //# 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      :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":["_createElementBlock","_normalizeClass","_ctx","_openBlock","_mergeProps","args","_cache","$event","_withModifiers","_createBlock","_component_neon_icon","_hoisted_3","_toDisplayString"],"mappings":"mUAiE4C,MAAM,qHAhEhDA,EAAAA,mBAmEM,MAAA,CAlEH,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,MAgBTC,EAAAA,YAAAH,EAAAA,mBAgBY,WAhBZI,aAgBY,OAdT,GAAIF,EAAA,GACJ,mBAAkBA,EAAA,oBAClB,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,kBAhClCF,EAAAA,YAAAH,EAAAA,mBAgBE,QAhBFI,aAgBE,OAdC,GAAIF,EAAA,GACL,IAAI,YACH,mBAAkBA,EAAA,oBAClB,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,iBAoB9CL,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\"\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"}

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

@@ -1,12 +1,12 @@
-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 p from "./NeonInput.es.js";
+import { resolveComponent as m, openBlock as l, createElementBlock as i, normalizeClass as d, mergeProps as a, withModifiers as u, createBlock as b, withKeys as s, createCommentVNode as t, toDisplayString as y } from "vue";
 import h from "../../../_virtual/_plugin-vue_export-helper.es.js";
-const f = ["id", "aria-placeholder", "disabled", "inputmode", "placeholder", "tabindex", "type", "value"], g = ["id", "aria-placeholder", "disabled", "inputmode", "placeholder", "rows", "tabindex", "value"], w = {
+const f = ["id", "aria-placeholder", "autocomplete", "disabled", "inputmode", "placeholder", "tabindex", "type", "value"], g = ["id", "aria-placeholder", "autocomplete", "disabled", "inputmode", "placeholder", "rows", "tabindex", "value"], w = {
   key: 3,
   class: "neon-input__textarea-counter"
 };
-function V(e, n, k, v, $, B) {
-  const p = m("neon-icon");
+function V(e, o, k, v, $, B) {
+  const r = m("neon-icon");
   return l(), i("div", {
     class: d([[
       {
@@ -26,6 +26,7 @@ function V(e, n, k, v, $, B) {
       key: 1,
       id: e.id,
       "aria-placeholder": e.computedPlaceholder,
+      autocomplete: e.autocomplete,
       disabled: e.disabled,
       inputmode: e.inputmode,
       placeholder: e.computedPlaceholder,
@@ -34,15 +35,16 @@ function V(e, n, k, v, $, B) {
       value: e.modelValue,
       class: "neon-input__textfield neon-input__textarea"
     }, e.sanitizedAttributes, {
-      onBlur: n[3] || (n[3] = (...o) => e.onBlur && e.onBlur(...o)),
-      onFocus: n[4] || (n[4] = (...o) => e.onFocus && e.onFocus(...o)),
-      onKeydown: n[5] || (n[5] = (...o) => e.onKeyDown && e.onKeyDown(...o)),
-      onInput: n[6] || (n[6] = s((...o) => e.changeValue && e.changeValue(...o), ["stop", "prevent"]))
+      onBlur: o[3] || (o[3] = (...n) => e.onBlur && e.onBlur(...n)),
+      onFocus: o[4] || (o[4] = (...n) => e.onFocus && e.onFocus(...n)),
+      onKeydown: o[5] || (o[5] = (...n) => e.onKeyDown && e.onKeyDown(...n)),
+      onInput: o[6] || (o[6] = u((...n) => e.changeValue && e.changeValue(...n), ["stop", "prevent"]))
     }), null, 16, g)) : (l(), i("input", a({
       key: 0,
       id: e.id,
       ref: "neonInput",
       "aria-placeholder": e.computedPlaceholder,
+      autocomplete: e.autocomplete,
       disabled: e.disabled,
       inputmode: e.inputmode,
       placeholder: e.computedPlaceholder,
@@ -51,11 +53,11 @@ function V(e, n, k, v, $, B) {
       value: e.modelValue,
       class: "neon-input__textfield neon-input__text"
     }, e.sanitizedAttributes, {
-      onBlur: n[0] || (n[0] = (...o) => e.onBlur && e.onBlur(...o)),
-      onFocus: n[1] || (n[1] = (o) => !e.disabled && e.onFocus()),
-      onInput: n[2] || (n[2] = s((o) => !e.disabled && e.changeValue(o), ["stop", "prevent"]))
+      onBlur: o[0] || (o[0] = (...n) => e.onBlur && e.onBlur(...n)),
+      onFocus: o[1] || (o[1] = (n) => !e.disabled && e.onFocus()),
+      onInput: o[2] || (o[2] = u((n) => !e.disabled && e.changeValue(n), ["stop", "prevent"]))
     }), null, 16, f)),
-    e.iconVisible ? (l(), b(p, {
+    e.iconVisible ? (l(), b(r, {
       key: 2,
       class: d([{ "neon-input__icon--read-only": e.iconReadonly }, "neon-input__icon"]),
       color: e.iconColor,
@@ -64,16 +66,16 @@ function V(e, n, k, v, $, B) {
       role: !e.iconReadonly && "button",
       tabindex: e.disabled || e.iconReadonly ? !1 : 0,
       transparent: !0,
-      onClick: n[7] || (n[7] = (o) => !e.iconReadonly && e.iconClicked(o)),
+      onClick: o[7] || (o[7] = (n) => !e.iconReadonly && e.iconClicked(n)),
       onKeydown: [
-        n[8] || (n[8] = r((o) => !e.iconReadonly && e.iconClicked(o), ["enter"])),
-        n[9] || (n[9] = r((o) => !e.iconReadonly && e.iconClicked(o), ["space"]))
+        o[8] || (o[8] = s((n) => !e.iconReadonly && e.iconClicked(n), ["enter"])),
+        o[9] || (o[9] = s((n) => !e.iconReadonly && e.iconClicked(n), ["space"]))
       ]
-    }, null, 8, ["class", "color", "disabled", "name", "role", "tabindex"])) : u("", !0),
-    e.maxlength && e.maxlength > 0 ? (l(), i("span", w, y(`${e.modelValue.length}/${e.maxlength}`), 1)) : u("", !0)
+    }, null, 8, ["class", "color", "disabled", "name", "role", "tabindex"])) : t("", !0),
+    e.maxlength && e.maxlength > 0 ? (l(), i("span", w, y(`${e.modelValue.length}/${e.maxlength}`), 1)) : t("", !0)
   ], 2);
 }
-const F = /* @__PURE__ */ h(t, [["render", V]]);
+const F = /* @__PURE__ */ h(p, [["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      :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":["_createElementBlock","_normalizeClass","_ctx","_openBlock","_mergeProps","args","_cache","$event","_withModifiers","_createBlock","_component_neon_icon","_hoisted_3","_toDisplayString"],"mappings":";;;;;EAiE4C,OAAM;;;;cAhEhDA,EAmEM,OAAA;AAAA,IAlEH,OAAKC,EAAA,CAAA;AAAA;QAA8C,yBAAA,CAAAC,EAAA,aAAaA,EAAA,QAASA,gBAAcA,EAAA,WAAW,SAAM;AAAA,gCAAwCA,EAAA;AAAA,+BAAyCA,EAAA;AAAA,QAAoD,mCAAAA,EAAA,gBAAW,CAAMA,EAAA,cAAcA,EAAA,WAAW,WAAM;AAAA,4CAAqDA,EAAA;AAAA,uCAAuDA,EAAA;AAAA;qBAAyCA,EAAA,IAAI;AAAA,qBAAyBA,EAAA,KAAK;AAAA,2BAA+BA,EAAA,KAAK;AAAA,OAanf,YAAY,CAAA;AAAA;IAGTA,EAAA,QAgBTC,KAAAH,EAgBY,YAhBZI,EAgBY;AAAA;MAdT,IAAIF,EAAA;AAAA,MACJ,oBAAkBA,EAAA;AAAA,MAClB,UAAUA,EAAA;AAAA,MACV,WAAWA,EAAA;AAAA,MACX,aAAaA,EAAA;AAAA,MACb,MAAMA,EAAA;AAAA,MACN,UAAUA,EAAA;AAAA,MACV,OAAOA,EAAA;AAAA,MACR,OAAM;AAAA,OACEA,EAAA,qBAAmB;AAAA,MAC1B,kCAAMA,EAAA,UAAAA,EAAA,OAAA,GAAAG,CAAA;AAAA,MACN,mCAAOH,EAAA,WAAAA,EAAA,QAAA,GAAAG,CAAA;AAAA,MACP,qCAASH,EAAA,aAAAA,EAAA,UAAA,GAAAG,CAAA;AAAA,MACT,qCAAoBH,EAAA,eAAAA,EAAA,YAAA,GAAAG,CAAA,GAAW,CAAA,QAAA,SAAA,CAAA;AAAA,yBAhClCF,KAAAH,EAgBE,SAhBFI,EAgBE;AAAA;MAdC,IAAIF,EAAA;AAAA,MACL,KAAI;AAAA,MACH,oBAAkBA,EAAA;AAAA,MAClB,UAAUA,EAAA;AAAA,MACV,WAAWA,EAAA;AAAA,MACX,aAAaA,EAAA;AAAA,MACb,UAAUA,EAAA;AAAA,MACV,MAAMA,EAAA;AAAA,MACN,OAAOA,EAAA;AAAA,MACR,OAAM;AAAA,OACEA,EAAA,qBAAmB;AAAA,MAC1B,kCAAMA,EAAA,UAAAA,EAAA,OAAA,GAAAG,CAAA;AAAA,MACN,SAAKC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAA,CAAGL,EAAA,YAAYA,EAAA,QAAO;AAAA,MAC3B,SAAKI,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAE,EAAA,CAAAD,MAAA,CAAgBL,EAAA,YAAYA,EAAA,YAAYK,CAAM,GAAA,CAAA,QAAA,SAAA,CAAA;AAAA;IAoB9CL,EAAA,oBADRO,EAaEC,GAAA;AAAA;MAXC,OAAKT,EAAA,CAAA,EAAA,+BAAmCC,EAAA,aAAY,GAO/C,kBAAkB,CAAA;AAAA,MANvB,OAAOA,EAAA;AAAA,MACP,UAAUA,EAAA;AAAA,MACV,MAAMA,EAAA;AAAA,MACN,OAAOA,EAAA,gBAAY;AAAA,MACnB,UAAUA,EAAA,YAAYA,EAAA,eAAY,KAAA;AAAA,MAClC,aAAa;AAAA,MAEb,SAAKI,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAA,CAAGL,EAAA,gBAAgBA,EAAA,YAAYK,CAAM;AAAA,MAC1C,WAAO;AAAA,kCAASL,EAAA,gBAAgBA,EAAA,YAAYK,CAAM,GAAA,CAAA,OAAA,CAAA;AAAA,kCAClCL,EAAA,gBAAgBA,EAAA,YAAYK,CAAM,GAAA,CAAA,OAAA,CAAA;AAAA;;IAEzCL,EAAA,aAAaA,EAAA,YAAS,KAAlCC,EAAA,GAAAH,EAEO,QAFPW,GAEOC,EAAA,GADCV,aAAW,MAAM,IAAIA,EAAA,SAAS,EAAA,GAAA,CAAA;;;;"}
+{"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      :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":"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"}

package/dist/components/user-input/number/NeonNumber.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const u=require("vue"),g=require("../../../common/enums/NeonFunctionalColor.cjs.js"),q=require("../../../common/enums/NeonSize.cjs.js"),S=require("../../../common/enums/NeonInputMode.cjs.js"),F=require("../button/NeonButton.vue.cjs.js"),B=require("../field-group/NeonFieldGroup.vue.cjs.js"),x=require("../input/NeonInput.vue.cjs.js"),s=require("../../../common/utils/NeonNumberUtils.cjs.js"),M=u.defineComponent({name:"NeonNumber",components:{NeonButton:F,NeonFieldGroup:B,NeonInput:x},props:{modelValue:{type:Number,default:null},min:{type:Number,required:!1},max:{type:Number,required:!1},step:{type:Number,required:!1},color:{type:String,default:g.NeonFunctionalColor.LowContrast},size:{type:String,default:q.NeonSize.Medium},locale:{type:String,default:null},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},editable:{type:Boolean,default:!0},spinButtons:{type:Boolean,default:!1},percentage:{type:Boolean,default:!1},decimals:{type:Number,required:!1},valueTemplate:{type:String,required:!1},inputmode:{type:String,default:S.NeonInputMode.Numeric},incrementLabel:{type:String,default:"Increment"},decrementLabel:{type:String,default:"Decrement"}},emits:["update:modelValue"],setup(e,{emit:f}){const N=u.useAttrs(),o=u.ref(!1),r=t=>{e.disabled||f("update:modelValue",t)},v=u.computed(()=>{const{onBlur:t,onFocus:n,...m}=N;return m}),V=t=>{const n=s.NeonNumberUtils.parseNumber(t),m=t!==""&&t!==null?Math.max(Math.min(n,e.max??Number.MAX_SAFE_INTEGER),e.min??Number.MIN_SAFE_INTEGER):null;(m===null||!isNaN(n))&&r(m)},l=u.computed(()=>e.decimals??(e.percentage?0:void 0)),a=u.computed(()=>e.percentage&&l.value!==void 0?l.value+2:l.value),c=u.computed(()=>{const t=e.modelValue!==null?+e.modelValue:e.min||0;return a.value!==void 0?Number(t.toFixed(a.value)):t}),b=u.computed(()=>e.modelValue!==null&&(e.valueTemplate!==void 0||l.value!==void 0||e.percentage!==void 0)?s.NeonNumberUtils.formatNumber(e.modelValue,{decimals:l.value,format:e.valueTemplate,percentage:e.percentage},e.locale):e.modelValue),d=u.computed(()=>{var t;return a.value?(t=e.modelValue)==null?void 0:t.toFixed(a.value):e.modelValue}),y=u.computed(()=>o.value?d.value?`${d.value}`:"":b.value),i=u.computed(()=>e.step??(e.percentage?.01:1));return{focus:o,sanitizedAttributes:v,computedDecimals:l,computedRawDecimals:a,computedValue:c,computedStep:i,displayValue:y,valueChanged:V,increment:()=>{const t=c.value+i.value,n=e.max!==void 0?Math.min(e.max,t):t;n!==e.modelValue&&r(n)},decrement:()=>{const t=c.value-i.value,n=e.min!==void 0?Math.max(e.min,t):t;n!==e.modelValue&&r(n)},onFocus:()=>o.value=!0,onBlur:()=>o.value=!1}}});module.exports=M;
+"use strict";const u=require("vue"),g=require("../../../common/enums/NeonFunctionalColor.cjs.js"),q=require("../../../common/enums/NeonSize.cjs.js"),S=require("../../../common/enums/NeonInputMode.cjs.js"),F=require("../button/NeonButton.vue.cjs.js"),B=require("../field-group/NeonFieldGroup.vue.cjs.js"),x=require("../input/NeonInput.vue.cjs.js"),s=require("../../../common/utils/NeonNumberUtils.cjs.js"),M=u.defineComponent({name:"NeonNumber",components:{NeonButton:F,NeonFieldGroup:B,NeonInput:x},props:{modelValue:{type:Number,default:null},min:{type:Number,required:!1},max:{type:Number,required:!1},step:{type:Number,required:!1},color:{type:String,default:g.NeonFunctionalColor.Primary},size:{type:String,default:q.NeonSize.Medium},locale:{type:String,default:null},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},editable:{type:Boolean,default:!0},spinButtons:{type:Boolean,default:!1},percentage:{type:Boolean,default:!1},decimals:{type:Number,required:!1},valueTemplate:{type:String,required:!1},inputmode:{type:String,default:S.NeonInputMode.Numeric},incrementLabel:{type:String,default:"Increment"},decrementLabel:{type:String,default:"Decrement"}},emits:["update:modelValue"],setup(e,{emit:f}){const N=u.useAttrs(),o=u.ref(!1),r=t=>{e.disabled||f("update:modelValue",t)},v=u.computed(()=>{const{onBlur:t,onFocus:n,...m}=N;return m}),V=t=>{const n=s.NeonNumberUtils.parseNumber(t),m=t!==""&&t!==null?Math.max(Math.min(n,e.max??Number.MAX_SAFE_INTEGER),e.min??Number.MIN_SAFE_INTEGER):null;(m===null||!isNaN(n))&&r(m)},l=u.computed(()=>e.decimals??(e.percentage?0:void 0)),a=u.computed(()=>e.percentage&&l.value!==void 0?l.value+2:l.value),i=u.computed(()=>{const t=e.modelValue!==null?+e.modelValue:e.min||0;return a.value!==void 0?Number(t.toFixed(a.value)):t}),b=u.computed(()=>e.modelValue!==null&&(e.valueTemplate!==void 0||l.value!==void 0||e.percentage!==void 0)?s.NeonNumberUtils.formatNumber(e.modelValue,{decimals:l.value,format:e.valueTemplate,percentage:e.percentage},e.locale):e.modelValue),d=u.computed(()=>{var t;return a.value?(t=e.modelValue)==null?void 0:t.toFixed(a.value):e.modelValue}),y=u.computed(()=>o.value?d.value?`${d.value}`:"":b.value),c=u.computed(()=>e.step??(e.percentage?.01:1));return{focus:o,sanitizedAttributes:v,computedDecimals:l,computedRawDecimals:a,computedValue:i,computedStep:c,displayValue:y,valueChanged:V,increment:()=>{const t=i.value+c.value,n=e.max!==void 0?Math.min(e.max,t):t;n!==e.modelValue&&r(n)},decrement:()=>{const t=i.value-c.value,n=e.min!==void 0?Math.max(e.min,t):t;n!==e.modelValue&&r(n)},onFocus:()=>o.value=!0,onBlur:()=>o.value=!1}}});module.exports=M;
 //# sourceMappingURL=NeonNumber.cjs.js.map

package/dist/components/user-input/number/NeonNumber.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonNumber.cjs.js","sources":["../../../../src/components/user-input/number/NeonNumber.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonFieldGroup from '@/components/user-input/field-group/NeonFieldGroup.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport { NeonNumberUtils } from '@/common/utils/NeonNumberUtils';\n\n/**\n * <p>\n *   The <strong>NeonNumber</strong> component is the equivalent of an <strong>&lt;input type=\"number\" /&gt;</strong>\n *   with -/+ spin buttons. In addition, it supports formatting as a percentage or with a provided custom template and\n *   also pasting of values in the user's locale, e.g. 6,543.12.\n * </p>\n * <p><strong>NeonNumber</strong> supports all the properties found on an HTML &lt;input&gt;.</p>\n */\nexport default defineComponent({\n  name: 'NeonNumber',\n  components: {\n    NeonButton,\n    NeonFieldGroup,\n    NeonInput,\n  },\n  props: {\n    /**\n     * The value of the number input. Either a valid number or null.\n     */\n    modelValue: { type: Number, default: null },\n    /**\n     * The minimum value the input can accept.\n     */\n    min: { type: Number, required: false },\n    /**\n     * The maximum value the input can accept.\n     */\n    max: { type: Number, required: false },\n    /**\n     * The step value for the spin buttons.\n     */\n    step: { type: Number, required: false },\n    /**\n     * The component color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * The component size.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The locale used for display purposes. This defaults to the browser's locale if none is provided.\n     */\n    locale: { type: String, default: null },\n    /**\n     * Placeholder text to display in the input\n     */\n    placeholder: { type: String, default: null },\n    /**\n     * Whether the component is disabled.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Enable/disable direct editing of the value.\n     */\n    editable: { type: Boolean, default: true },\n    /**\n     * Show/hide spin buttons. NOTE: The user can still use up/down arrow keys when the input has focus.\n     */\n    spinButtons: { type: Boolean, default: false },\n    /**\n     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%.\n     */\n    percentage: { type: Boolean, default: false },\n    /**\n     * The rounding precision for display formatting.\n     */\n    decimals: { type: Number, required: false },\n    /**\n     * A template string used for formatting the value for display. Use the placeholder {value} to reference the value in\n     * the template string. e.g. value = 90, ${value} => $90.\n     */\n    valueTemplate: { type: String, required: false },\n    /**\n     * The HTML inputmode of the component. Either 'numeric' or 'decimal'.\n     */\n    inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Numeric },\n    /**\n     * ARIA label for the increment spinner button.\n     */\n    incrementLabel: { type: String, default: 'Increment' },\n    /**\n     * ARIA label for the decrement spinner button.\n     */\n    decrementLabel: { type: String, default: 'Decrement' },\n  },\n  emits: [\n    /**\n     * Emitted when the user changes the value of the number via the increment/decrement buttons or manually entering\n     * the value.\n     * @type {number | null} the current value or null if the value has been cleared.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n    const focus = ref(false);\n\n    const emitValue = (value: number | null) => {\n      if (!props.disabled) {\n        emit('update:modelValue', value);\n      }\n    };\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onBlur, onFocus, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const valueChanged = (value: string) => {\n      const parsedValue = NeonNumberUtils.parseNumber(value);\n      const newValue =\n        value !== '' && value !== null\n          ? Math.max(Math.min(parsedValue, props.max ?? Number.MAX_SAFE_INTEGER), props.min ?? Number.MIN_SAFE_INTEGER)\n          : null;\n      if (newValue === null || !isNaN(parsedValue)) {\n        emitValue(newValue);\n      }\n    };\n\n    const computedDecimals = computed(() => {\n      return props.decimals ?? (props.percentage ? 0 : undefined);\n    });\n\n    const computedRawDecimals = computed(() => {\n      return props.percentage && computedDecimals.value !== undefined\n        ? computedDecimals.value + 2\n        : computedDecimals.value;\n    });\n\n    const computedValue = computed(() => {\n      const newValue = props.modelValue !== null ? +props.modelValue : props.min || 0;\n      return computedRawDecimals.value !== undefined ? Number(newValue.toFixed(computedRawDecimals.value)) : newValue;\n    });\n\n    const formattedValue = computed(() => {\n      return props.modelValue !== null &&\n        (props.valueTemplate !== undefined || computedDecimals.value !== undefined || props.percentage !== undefined)\n        ? NeonNumberUtils.formatNumber(\n            props.modelValue,\n            {\n              decimals: computedDecimals.value,\n              format: props.valueTemplate,\n              percentage: props.percentage,\n            },\n            props.locale,\n          )\n        : props.modelValue;\n    });\n\n    const rawValue = computed(() => {\n      return computedRawDecimals.value ? props.modelValue?.toFixed(computedRawDecimals.value) : props.modelValue;\n    });\n\n    const displayValue = computed(() => {\n      return focus.value ? (rawValue.value ? `${rawValue.value}` : '') : formattedValue.value;\n    });\n\n    const computedStep = computed(() => {\n      return props.step ?? (props.percentage ? 0.01 : 1);\n    });\n\n    const decrement = () => {\n      const newValue = computedValue.value - computedStep.value;\n      const emittedValue = props.min !== undefined ? Math.max(props.min, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const increment = () => {\n      const newValue = computedValue.value + computedStep.value;\n      const emittedValue = props.max !== undefined ? Math.min(props.max, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const onFocus = () => (focus.value = true);\n    const onBlur = () => (focus.value = false);\n\n    return {\n      focus,\n      sanitizedAttributes,\n      computedDecimals,\n      computedRawDecimals,\n      computedValue,\n      computedStep,\n      displayValue,\n      valueChanged,\n      increment,\n      decrement,\n      onFocus,\n      onBlur,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonFieldGroup","NeonInput","NeonFunctionalColor","NeonSize","NeonInputMode","props","emit","attrs","useAttrs","focus","ref","emitValue","value","sanitizedAttributes","computed","onBlur","onFocus","sanitized","valueChanged","parsedValue","NeonNumberUtils","newValue","computedDecimals","computedRawDecimals","computedValue","formattedValue","rawValue","_a","displayValue","computedStep","emittedValue"],"mappings":"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"}
+{"version":3,"file":"NeonNumber.cjs.js","sources":["../../../../src/components/user-input/number/NeonNumber.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonFieldGroup from '@/components/user-input/field-group/NeonFieldGroup.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport { NeonNumberUtils } from '@/common/utils/NeonNumberUtils';\n\n/**\n * <p>\n *   The <strong>NeonNumber</strong> component is the equivalent of an <strong>&lt;input type=\"number\" /&gt;</strong>\n *   with -/+ spin buttons. In addition, it supports formatting as a percentage or with a provided custom template and\n *   also pasting of values in the user's locale, e.g. 6,543.12.\n * </p>\n * <p><strong>NeonNumber</strong> supports all the properties found on an HTML &lt;input&gt;.</p>\n */\nexport default defineComponent({\n  name: 'NeonNumber',\n  components: {\n    NeonButton,\n    NeonFieldGroup,\n    NeonInput,\n  },\n  props: {\n    /**\n     * The value of the number input. Either a valid number or null.\n     */\n    modelValue: { type: Number, default: null },\n    /**\n     * The minimum value the input can accept.\n     */\n    min: { type: Number, required: false },\n    /**\n     * The maximum value the input can accept.\n     */\n    max: { type: Number, required: false },\n    /**\n     * The step value for the spin buttons.\n     */\n    step: { type: Number, required: false },\n    /**\n     * The component color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The component size.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The locale used for display purposes. This defaults to the browser's locale if none is provided.\n     */\n    locale: { type: String, default: null },\n    /**\n     * Placeholder text to display in the input\n     */\n    placeholder: { type: String, default: null },\n    /**\n     * Whether the component is disabled.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Enable/disable direct editing of the value.\n     */\n    editable: { type: Boolean, default: true },\n    /**\n     * Show/hide spin buttons. NOTE: The user can still use up/down arrow keys when the input has focus.\n     */\n    spinButtons: { type: Boolean, default: false },\n    /**\n     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%.\n     */\n    percentage: { type: Boolean, default: false },\n    /**\n     * The rounding precision for display formatting.\n     */\n    decimals: { type: Number, required: false },\n    /**\n     * A template string used for formatting the value for display. Use the placeholder {value} to reference the value in\n     * the template string. e.g. value = 90, ${value} => $90.\n     */\n    valueTemplate: { type: String, required: false },\n    /**\n     * The HTML inputmode of the component. Either 'numeric' or 'decimal'.\n     */\n    inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Numeric },\n    /**\n     * ARIA label for the increment spinner button.\n     */\n    incrementLabel: { type: String, default: 'Increment' },\n    /**\n     * ARIA label for the decrement spinner button.\n     */\n    decrementLabel: { type: String, default: 'Decrement' },\n  },\n  emits: [\n    /**\n     * Emitted when the user changes the value of the number via the increment/decrement buttons or manually entering\n     * the value.\n     * @type {number | null} the current value or null if the value has been cleared.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n    const focus = ref(false);\n\n    const emitValue = (value: number | null) => {\n      if (!props.disabled) {\n        emit('update:modelValue', value);\n      }\n    };\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onBlur, onFocus, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const valueChanged = (value: string) => {\n      const parsedValue = NeonNumberUtils.parseNumber(value);\n      const newValue =\n        value !== '' && value !== null\n          ? Math.max(Math.min(parsedValue, props.max ?? Number.MAX_SAFE_INTEGER), props.min ?? Number.MIN_SAFE_INTEGER)\n          : null;\n      if (newValue === null || !isNaN(parsedValue)) {\n        emitValue(newValue);\n      }\n    };\n\n    const computedDecimals = computed(() => {\n      return props.decimals ?? (props.percentage ? 0 : undefined);\n    });\n\n    const computedRawDecimals = computed(() => {\n      return props.percentage && computedDecimals.value !== undefined\n        ? computedDecimals.value + 2\n        : computedDecimals.value;\n    });\n\n    const computedValue = computed(() => {\n      const newValue = props.modelValue !== null ? +props.modelValue : props.min || 0;\n      return computedRawDecimals.value !== undefined ? Number(newValue.toFixed(computedRawDecimals.value)) : newValue;\n    });\n\n    const formattedValue = computed(() => {\n      return props.modelValue !== null &&\n        (props.valueTemplate !== undefined || computedDecimals.value !== undefined || props.percentage !== undefined)\n        ? NeonNumberUtils.formatNumber(\n            props.modelValue,\n            {\n              decimals: computedDecimals.value,\n              format: props.valueTemplate,\n              percentage: props.percentage,\n            },\n            props.locale,\n          )\n        : props.modelValue;\n    });\n\n    const rawValue = computed(() => {\n      return computedRawDecimals.value ? props.modelValue?.toFixed(computedRawDecimals.value) : props.modelValue;\n    });\n\n    const displayValue = computed(() => {\n      return focus.value ? (rawValue.value ? `${rawValue.value}` : '') : formattedValue.value;\n    });\n\n    const computedStep = computed(() => {\n      return props.step ?? (props.percentage ? 0.01 : 1);\n    });\n\n    const decrement = () => {\n      const newValue = computedValue.value - computedStep.value;\n      const emittedValue = props.min !== undefined ? Math.max(props.min, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const increment = () => {\n      const newValue = computedValue.value + computedStep.value;\n      const emittedValue = props.max !== undefined ? Math.min(props.max, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const onFocus = () => (focus.value = true);\n    const onBlur = () => (focus.value = false);\n\n    return {\n      focus,\n      sanitizedAttributes,\n      computedDecimals,\n      computedRawDecimals,\n      computedValue,\n      computedStep,\n      displayValue,\n      valueChanged,\n      increment,\n      decrement,\n      onFocus,\n      onBlur,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonFieldGroup","NeonInput","NeonFunctionalColor","NeonSize","NeonInputMode","props","emit","attrs","useAttrs","focus","ref","emitValue","value","sanitizedAttributes","computed","onBlur","onFocus","sanitized","valueChanged","parsedValue","NeonNumberUtils","newValue","computedDecimals","computedRawDecimals","computedValue","formattedValue","rawValue","_a","displayValue","computedStep","emittedValue"],"mappings":"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"}

package/dist/components/user-input/number/NeonNumber.es.js

@@ -3,15 +3,15 @@ import { NeonFunctionalColor as F } from "../../../common/enums/NeonFunctionalCo
 import { NeonSize as x } from "../../../common/enums/NeonSize.es.js";
 import { NeonInputMode as p } from "../../../common/enums/NeonInputMode.es.js";
 import M from "../button/NeonButton.vue.es.js";
-import w from "../field-group/NeonFieldGroup.vue.es.js";
-import h from "../input/NeonInput.vue.es.js";
+import h from "../field-group/NeonFieldGroup.vue.es.js";
+import w from "../input/NeonInput.vue.es.js";
 import { NeonNumberUtils as s } from "../../../common/utils/NeonNumberUtils.es.js";
-const U = g({
+const P = g({
   name: "NeonNumber",
   components: {
     NeonButton: M,
-    NeonFieldGroup: w,
-    NeonInput: h
+    NeonFieldGroup: h,
+    NeonInput: w
   },
   props: {
     /**
@@ -33,7 +33,7 @@ const U = g({
     /**
      * The component color.
      */
-    color: { type: String, default: F.LowContrast },
+    color: { type: String, default: F.Primary },
     /**
      * The component size.
      */
@@ -104,7 +104,7 @@ const U = g({
     }, u = a(() => e.decimals ?? (e.percentage ? 0 : void 0)), n = a(() => e.percentage && u.value !== void 0 ? u.value + 2 : u.value), i = a(() => {
       const t = e.modelValue !== null ? +e.modelValue : e.min || 0;
       return n.value !== void 0 ? Number(t.toFixed(n.value)) : t;
-    }), b = a(() => e.modelValue !== null && (e.valueTemplate !== void 0 || u.value !== void 0 || e.percentage !== void 0) ? s.formatNumber(
+    }), y = a(() => e.modelValue !== null && (e.valueTemplate !== void 0 || u.value !== void 0 || e.percentage !== void 0) ? s.formatNumber(
       e.modelValue,
       {
         decimals: u.value,
@@ -115,7 +115,7 @@ const U = g({
     ) : e.modelValue), c = a(() => {
       var t;
       return n.value ? (t = e.modelValue) == null ? void 0 : t.toFixed(n.value) : e.modelValue;
-    }), y = a(() => o.value ? c.value ? `${c.value}` : "" : b.value), d = a(() => e.step ?? (e.percentage ? 0.01 : 1));
+    }), b = a(() => o.value ? c.value ? `${c.value}` : "" : y.value), d = a(() => e.step ?? (e.percentage ? 0.01 : 1));
     return {
       focus: o,
       sanitizedAttributes: N,
@@ -123,7 +123,7 @@ const U = g({
       computedRawDecimals: n,
       computedValue: i,
       computedStep: d,
-      displayValue: y,
+      displayValue: b,
       valueChanged: V,
       increment: () => {
         const t = i.value + d.value, l = e.max !== void 0 ? Math.min(e.max, t) : t;
@@ -139,6 +139,6 @@ const U = g({
   }
 });
 export {
-  U as default
+  P as default
 };
 //# sourceMappingURL=NeonNumber.es.js.map

package/dist/components/user-input/number/NeonNumber.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonNumber.es.js","sources":["../../../../src/components/user-input/number/NeonNumber.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonFieldGroup from '@/components/user-input/field-group/NeonFieldGroup.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport { NeonNumberUtils } from '@/common/utils/NeonNumberUtils';\n\n/**\n * <p>\n *   The <strong>NeonNumber</strong> component is the equivalent of an <strong>&lt;input type=\"number\" /&gt;</strong>\n *   with -/+ spin buttons. In addition, it supports formatting as a percentage or with a provided custom template and\n *   also pasting of values in the user's locale, e.g. 6,543.12.\n * </p>\n * <p><strong>NeonNumber</strong> supports all the properties found on an HTML &lt;input&gt;.</p>\n */\nexport default defineComponent({\n  name: 'NeonNumber',\n  components: {\n    NeonButton,\n    NeonFieldGroup,\n    NeonInput,\n  },\n  props: {\n    /**\n     * The value of the number input. Either a valid number or null.\n     */\n    modelValue: { type: Number, default: null },\n    /**\n     * The minimum value the input can accept.\n     */\n    min: { type: Number, required: false },\n    /**\n     * The maximum value the input can accept.\n     */\n    max: { type: Number, required: false },\n    /**\n     * The step value for the spin buttons.\n     */\n    step: { type: Number, required: false },\n    /**\n     * The component color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * The component size.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The locale used for display purposes. This defaults to the browser's locale if none is provided.\n     */\n    locale: { type: String, default: null },\n    /**\n     * Placeholder text to display in the input\n     */\n    placeholder: { type: String, default: null },\n    /**\n     * Whether the component is disabled.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Enable/disable direct editing of the value.\n     */\n    editable: { type: Boolean, default: true },\n    /**\n     * Show/hide spin buttons. NOTE: The user can still use up/down arrow keys when the input has focus.\n     */\n    spinButtons: { type: Boolean, default: false },\n    /**\n     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%.\n     */\n    percentage: { type: Boolean, default: false },\n    /**\n     * The rounding precision for display formatting.\n     */\n    decimals: { type: Number, required: false },\n    /**\n     * A template string used for formatting the value for display. Use the placeholder {value} to reference the value in\n     * the template string. e.g. value = 90, ${value} => $90.\n     */\n    valueTemplate: { type: String, required: false },\n    /**\n     * The HTML inputmode of the component. Either 'numeric' or 'decimal'.\n     */\n    inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Numeric },\n    /**\n     * ARIA label for the increment spinner button.\n     */\n    incrementLabel: { type: String, default: 'Increment' },\n    /**\n     * ARIA label for the decrement spinner button.\n     */\n    decrementLabel: { type: String, default: 'Decrement' },\n  },\n  emits: [\n    /**\n     * Emitted when the user changes the value of the number via the increment/decrement buttons or manually entering\n     * the value.\n     * @type {number | null} the current value or null if the value has been cleared.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n    const focus = ref(false);\n\n    const emitValue = (value: number | null) => {\n      if (!props.disabled) {\n        emit('update:modelValue', value);\n      }\n    };\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onBlur, onFocus, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const valueChanged = (value: string) => {\n      const parsedValue = NeonNumberUtils.parseNumber(value);\n      const newValue =\n        value !== '' && value !== null\n          ? Math.max(Math.min(parsedValue, props.max ?? Number.MAX_SAFE_INTEGER), props.min ?? Number.MIN_SAFE_INTEGER)\n          : null;\n      if (newValue === null || !isNaN(parsedValue)) {\n        emitValue(newValue);\n      }\n    };\n\n    const computedDecimals = computed(() => {\n      return props.decimals ?? (props.percentage ? 0 : undefined);\n    });\n\n    const computedRawDecimals = computed(() => {\n      return props.percentage && computedDecimals.value !== undefined\n        ? computedDecimals.value + 2\n        : computedDecimals.value;\n    });\n\n    const computedValue = computed(() => {\n      const newValue = props.modelValue !== null ? +props.modelValue : props.min || 0;\n      return computedRawDecimals.value !== undefined ? Number(newValue.toFixed(computedRawDecimals.value)) : newValue;\n    });\n\n    const formattedValue = computed(() => {\n      return props.modelValue !== null &&\n        (props.valueTemplate !== undefined || computedDecimals.value !== undefined || props.percentage !== undefined)\n        ? NeonNumberUtils.formatNumber(\n            props.modelValue,\n            {\n              decimals: computedDecimals.value,\n              format: props.valueTemplate,\n              percentage: props.percentage,\n            },\n            props.locale,\n          )\n        : props.modelValue;\n    });\n\n    const rawValue = computed(() => {\n      return computedRawDecimals.value ? props.modelValue?.toFixed(computedRawDecimals.value) : props.modelValue;\n    });\n\n    const displayValue = computed(() => {\n      return focus.value ? (rawValue.value ? `${rawValue.value}` : '') : formattedValue.value;\n    });\n\n    const computedStep = computed(() => {\n      return props.step ?? (props.percentage ? 0.01 : 1);\n    });\n\n    const decrement = () => {\n      const newValue = computedValue.value - computedStep.value;\n      const emittedValue = props.min !== undefined ? Math.max(props.min, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const increment = () => {\n      const newValue = computedValue.value + computedStep.value;\n      const emittedValue = props.max !== undefined ? Math.min(props.max, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const onFocus = () => (focus.value = true);\n    const onBlur = () => (focus.value = false);\n\n    return {\n      focus,\n      sanitizedAttributes,\n      computedDecimals,\n      computedRawDecimals,\n      computedValue,\n      computedStep,\n      displayValue,\n      valueChanged,\n      increment,\n      decrement,\n      onFocus,\n      onBlur,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonFieldGroup","NeonInput","NeonFunctionalColor","NeonSize","NeonInputMode","props","emit","attrs","useAttrs","focus","ref","emitValue","value","sanitizedAttributes","computed","onBlur","onFocus","sanitized","valueChanged","parsedValue","NeonNumberUtils","newValue","computedDecimals","computedRawDecimals","computedValue","formattedValue","rawValue","_a","displayValue","computedStep","emittedValue"],"mappings":"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"}
+{"version":3,"file":"NeonNumber.es.js","sources":["../../../../src/components/user-input/number/NeonNumber.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonFieldGroup from '@/components/user-input/field-group/NeonFieldGroup.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport { NeonNumberUtils } from '@/common/utils/NeonNumberUtils';\n\n/**\n * <p>\n *   The <strong>NeonNumber</strong> component is the equivalent of an <strong>&lt;input type=\"number\" /&gt;</strong>\n *   with -/+ spin buttons. In addition, it supports formatting as a percentage or with a provided custom template and\n *   also pasting of values in the user's locale, e.g. 6,543.12.\n * </p>\n * <p><strong>NeonNumber</strong> supports all the properties found on an HTML &lt;input&gt;.</p>\n */\nexport default defineComponent({\n  name: 'NeonNumber',\n  components: {\n    NeonButton,\n    NeonFieldGroup,\n    NeonInput,\n  },\n  props: {\n    /**\n     * The value of the number input. Either a valid number or null.\n     */\n    modelValue: { type: Number, default: null },\n    /**\n     * The minimum value the input can accept.\n     */\n    min: { type: Number, required: false },\n    /**\n     * The maximum value the input can accept.\n     */\n    max: { type: Number, required: false },\n    /**\n     * The step value for the spin buttons.\n     */\n    step: { type: Number, required: false },\n    /**\n     * The component color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The component size.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The locale used for display purposes. This defaults to the browser's locale if none is provided.\n     */\n    locale: { type: String, default: null },\n    /**\n     * Placeholder text to display in the input\n     */\n    placeholder: { type: String, default: null },\n    /**\n     * Whether the component is disabled.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Enable/disable direct editing of the value.\n     */\n    editable: { type: Boolean, default: true },\n    /**\n     * Show/hide spin buttons. NOTE: The user can still use up/down arrow keys when the input has focus.\n     */\n    spinButtons: { type: Boolean, default: false },\n    /**\n     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%.\n     */\n    percentage: { type: Boolean, default: false },\n    /**\n     * The rounding precision for display formatting.\n     */\n    decimals: { type: Number, required: false },\n    /**\n     * A template string used for formatting the value for display. Use the placeholder {value} to reference the value in\n     * the template string. e.g. value = 90, ${value} => $90.\n     */\n    valueTemplate: { type: String, required: false },\n    /**\n     * The HTML inputmode of the component. Either 'numeric' or 'decimal'.\n     */\n    inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Numeric },\n    /**\n     * ARIA label for the increment spinner button.\n     */\n    incrementLabel: { type: String, default: 'Increment' },\n    /**\n     * ARIA label for the decrement spinner button.\n     */\n    decrementLabel: { type: String, default: 'Decrement' },\n  },\n  emits: [\n    /**\n     * Emitted when the user changes the value of the number via the increment/decrement buttons or manually entering\n     * the value.\n     * @type {number | null} the current value or null if the value has been cleared.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n    const focus = ref(false);\n\n    const emitValue = (value: number | null) => {\n      if (!props.disabled) {\n        emit('update:modelValue', value);\n      }\n    };\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onBlur, onFocus, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const valueChanged = (value: string) => {\n      const parsedValue = NeonNumberUtils.parseNumber(value);\n      const newValue =\n        value !== '' && value !== null\n          ? Math.max(Math.min(parsedValue, props.max ?? Number.MAX_SAFE_INTEGER), props.min ?? Number.MIN_SAFE_INTEGER)\n          : null;\n      if (newValue === null || !isNaN(parsedValue)) {\n        emitValue(newValue);\n      }\n    };\n\n    const computedDecimals = computed(() => {\n      return props.decimals ?? (props.percentage ? 0 : undefined);\n    });\n\n    const computedRawDecimals = computed(() => {\n      return props.percentage && computedDecimals.value !== undefined\n        ? computedDecimals.value + 2\n        : computedDecimals.value;\n    });\n\n    const computedValue = computed(() => {\n      const newValue = props.modelValue !== null ? +props.modelValue : props.min || 0;\n      return computedRawDecimals.value !== undefined ? Number(newValue.toFixed(computedRawDecimals.value)) : newValue;\n    });\n\n    const formattedValue = computed(() => {\n      return props.modelValue !== null &&\n        (props.valueTemplate !== undefined || computedDecimals.value !== undefined || props.percentage !== undefined)\n        ? NeonNumberUtils.formatNumber(\n            props.modelValue,\n            {\n              decimals: computedDecimals.value,\n              format: props.valueTemplate,\n              percentage: props.percentage,\n            },\n            props.locale,\n          )\n        : props.modelValue;\n    });\n\n    const rawValue = computed(() => {\n      return computedRawDecimals.value ? props.modelValue?.toFixed(computedRawDecimals.value) : props.modelValue;\n    });\n\n    const displayValue = computed(() => {\n      return focus.value ? (rawValue.value ? `${rawValue.value}` : '') : formattedValue.value;\n    });\n\n    const computedStep = computed(() => {\n      return props.step ?? (props.percentage ? 0.01 : 1);\n    });\n\n    const decrement = () => {\n      const newValue = computedValue.value - computedStep.value;\n      const emittedValue = props.min !== undefined ? Math.max(props.min, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const increment = () => {\n      const newValue = computedValue.value + computedStep.value;\n      const emittedValue = props.max !== undefined ? Math.min(props.max, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const onFocus = () => (focus.value = true);\n    const onBlur = () => (focus.value = false);\n\n    return {\n      focus,\n      sanitizedAttributes,\n      computedDecimals,\n      computedRawDecimals,\n      computedValue,\n      computedStep,\n      displayValue,\n      valueChanged,\n      increment,\n      decrement,\n      onFocus,\n      onBlur,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonFieldGroup","NeonInput","NeonFunctionalColor","NeonSize","NeonInputMode","props","emit","attrs","useAttrs","focus","ref","emitValue","value","sanitizedAttributes","computed","onBlur","onFocus","sanitized","valueChanged","parsedValue","NeonNumberUtils","newValue","computedDecimals","computedRawDecimals","computedValue","formattedValue","rawValue","_a","displayValue","computedStep","emittedValue"],"mappings":"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"}

package/dist/components/user-input/range-slider/NeonRangeSlider.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const u=require("vue"),n=require("../../../common/utils/NeonNumberUtils.cjs.js"),m=require("../slider/NeonSlider.vue.cjs.js"),i=require("../../../common/enums/NeonFunctionalColor.cjs.js"),s=u.defineComponent({name:"NeonRangeSlider",components:{NeonSlider:m},props:{modelValue:{type:Array,required:!0},ids:{type:Array,required:!1},color:{type:String,default:i.NeonFunctionalColor.LowContrast},output:{type:Boolean,default:!0},legend:{type:Boolean,default:!0},tooltip:{type:Boolean,default:!0},step:{type:Number,required:!1},decimals:{type:Number,required:!1},valueTemplate:{type:String,required:!1},disableFormatting:{type:Boolean,default:!1},percentage:{type:Boolean,default:!1},locale:{type:String,default:null},min:{type:Number,default:0},max:{type:Number,required:!1},disabled:{type:Boolean,default:!1},lowerBoundLabel:{type:String,default:"Lower bound"},upperBoundLabel:{type:String,default:"Upper bound"}},emits:["update:modelValue"],setup(e,{emit:r}){const d=u.computed(()=>{const t={decimals:e.decimals,format:e.valueTemplate,percentage:e.percentage};return e.disableFormatting?[`${e.modelValue[0]}`,`${e.modelValue[1]}`]:[n.NeonNumberUtils.formatNumber(e.modelValue[0],t,e.locale),n.NeonNumberUtils.formatNumber(e.modelValue[1],t,e.locale)]}),a=t=>{r("update:modelValue",t)};return{formattedValues:d,changeLowerBound:t=>{const l=e.modelValue.map(o=>o);l[0]=+t,a(l)},changeUpperBound:t=>{const l=e.modelValue.map(o=>o);l[1]=+t,a(l)},emitValues:a}}});module.exports=s;
+"use strict";const o=require("vue"),n=require("../../../common/utils/NeonNumberUtils.cjs.js"),m=require("../slider/NeonSlider.vue.cjs.js"),i=require("../../../common/enums/NeonFunctionalColor.cjs.js"),s=o.defineComponent({name:"NeonRangeSlider",components:{NeonSlider:m},props:{modelValue:{type:Array,required:!0},ids:{type:Array,required:!1},color:{type:String,default:i.NeonFunctionalColor.Primary},output:{type:Boolean,default:!0},legend:{type:Boolean,default:!0},tooltip:{type:Boolean,default:!0},step:{type:Number,required:!1},decimals:{type:Number,required:!1},valueTemplate:{type:String,required:!1},disableFormatting:{type:Boolean,default:!1},percentage:{type:Boolean,default:!1},locale:{type:String,default:null},min:{type:Number,default:0},max:{type:Number,required:!1},disabled:{type:Boolean,default:!1},lowerBoundLabel:{type:String,default:"Lower bound"},upperBoundLabel:{type:String,default:"Upper bound"}},emits:["update:modelValue"],setup(e,{emit:r}){const d=o.computed(()=>{const t={decimals:e.decimals,format:e.valueTemplate,percentage:e.percentage};return e.disableFormatting?[`${e.modelValue[0]}`,`${e.modelValue[1]}`]:[n.NeonNumberUtils.formatNumber(e.modelValue[0],t,e.locale),n.NeonNumberUtils.formatNumber(e.modelValue[1],t,e.locale)]}),a=t=>{r("update:modelValue",t)};return{formattedValues:d,changeLowerBound:t=>{const l=e.modelValue.map(u=>u);l[0]=+t,a(l)},changeUpperBound:t=>{const l=e.modelValue.map(u=>u);l[1]=+t,a(l)},emitValues:a}}});module.exports=s;
 //# sourceMappingURL=NeonRangeSlider.cjs.js.map

package/dist/components/user-input/range-slider/NeonRangeSlider.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonRangeSlider.cjs.js","sources":["../../../../src/components/user-input/range-slider/NeonRangeSlider.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport { NeonNumberUtils } from '@/common/utils/NeonNumberUtils';\nimport NeonSlider from '@/components/user-input/slider/NeonSlider.vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\n\n/**\n *\n */\nexport default defineComponent({\n  name: 'NeonRangeSlider',\n  components: {\n    NeonSlider,\n  },\n  props: {\n    /**\n     * This is the <em>v-model</em> property which is an array containing the lower and upper bounds of the selected range.\n     */\n    modelValue: { type: Array as () => Array<number>, required: true },\n    /**\n     * The list of ids for the lower bound and upper bound inputs, e.g. ['lowerBoundId', 'upperBoundId']\n     */\n    ids: { type: Array as () => Array<string>, required: false },\n\n    /**\n     * Slider color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * Disable output display if set to false\n     */\n    output: { type: Boolean, default: true },\n    /**\n     * Disable legend if set to false\n     */\n    legend: { type: Boolean, default: true },\n    /**\n     * Disable tooltip if set to false\n     */\n    tooltip: { type: Boolean, default: true },\n    /**\n     * The size of steps between values the user can select. Defaults to 1 unless percentage = true in which case it will\n     * default to 0.01.\n     */\n    step: { type: Number, required: false },\n    /**\n     * The rounding precision for display purposes\n     */\n    decimals: { type: Number, required: false },\n    /**\n     * A format template string used for display purposes. Use the placeholder {value} to reference the value in the\n     * format string. e.g. value = 90, ${value} => $90\n     */\n    valueTemplate: { type: String, required: false },\n    /**\n     * Disable formatting, e.g. in the case of a year value -> display as 2020, not 2,020.\n     */\n    disableFormatting: { type: Boolean, default: false },\n    /**\n     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%\n     */\n    percentage: { type: Boolean, default: false },\n    /**\n     * The locale used for display purposes. This defaults to the browser's locale if none is provided.\n     */\n    locale: { type: String, default: null },\n    /**\n     * The minimum range value\n     */\n    min: { type: Number, default: 0 },\n    /**\n     * The maximum range value. The default value is 100 except when percentage = true the default is 1 (100%).\n     */\n    max: { type: Number, required: false },\n    /**\n     * Component disabled state.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * ARIA label for the lower bound slider.\n     */\n    lowerBoundLabel: { type: String, default: 'Lower bound' },\n    /**\n     * ARIA label for the upper bound slider.\n     */\n    upperBoundLabel: { type: String, default: 'Upper bound' },\n  },\n  emits: [\n    /**\n     * Event triggered when the lower or upper bounds of the value change.\n     *\n     * @type {number[]} An array containing the raw numeric upper and lower bounds of the selection.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const formattedValues = computed((): string[] => {\n      const options = {\n        decimals: props.decimals,\n        format: props.valueTemplate,\n        percentage: props.percentage,\n      };\n\n      return !props.disableFormatting\n        ? [\n            NeonNumberUtils.formatNumber(props.modelValue[0], options, props.locale),\n            NeonNumberUtils.formatNumber(props.modelValue[1], options, props.locale),\n          ]\n        : [`${props.modelValue[0]}`, `${props.modelValue[1]}`];\n    });\n\n    const emitValues = (values: number[]) => {\n      emit('update:modelValue', values);\n    };\n\n    const changeLowerBound = (value: number) => {\n      const values = props.modelValue.map((v) => v);\n      values[0] = +value;\n      emitValues(values);\n    };\n\n    const changeUpperBound = (value: number) => {\n      const values = props.modelValue.map((v) => v);\n      values[1] = +value;\n      emitValues(values);\n    };\n\n    return {\n      formattedValues,\n      changeLowerBound,\n      changeUpperBound,\n      emitValues,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSlider","NeonFunctionalColor","props","emit","formattedValues","computed","options","NeonNumberUtils","emitValues","values","value","v"],"mappings":"yMAQAA,EAAeC,kBAAgB,CAC7B,KAAM,kBACN,WAAY,CACV,WAAAC,CAAA,EAEF,MAAO,CAIL,WAAY,CAAE,KAAM,MAA8B,SAAU,EAAA,EAI5D,IAAK,CAAE,KAAM,MAA8B,SAAU,EAAA,EAKrD,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,WAAA,EAIjF,OAAQ,CAAE,KAAM,QAAS,QAAS,EAAA,EAIlC,OAAQ,CAAE,KAAM,QAAS,QAAS,EAAA,EAIlC,QAAS,CAAE,KAAM,QAAS,QAAS,EAAA,EAKnC,KAAM,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIhC,SAAU,CAAE,KAAM,OAAQ,SAAU,EAAA,EAKpC,cAAe,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIzC,kBAAmB,CAAE,KAAM,QAAS,QAAS,EAAA,EAI7C,WAAY,CAAE,KAAM,QAAS,QAAS,EAAA,EAItC,OAAQ,CAAE,KAAM,OAAQ,QAAS,IAAA,EAIjC,IAAK,CAAE,KAAM,OAAQ,QAAS,CAAA,EAI9B,IAAK,CAAE,KAAM,OAAQ,SAAU,EAAA,EAI/B,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,gBAAiB,CAAE,KAAM,OAAQ,QAAS,aAAA,EAI1C,gBAAiB,CAAE,KAAM,OAAQ,QAAS,aAAA,CAAc,EAE1D,MAAO,CAML,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAkBC,EAAAA,SAAS,IAAgB,CAC/C,MAAMC,EAAU,CACd,SAAUJ,EAAM,SAChB,OAAQA,EAAM,cACd,WAAYA,EAAM,UAAA,EAGpB,OAAQA,EAAM,kBAKV,CAAC,GAAGA,EAAM,WAAW,CAAC,CAAC,GAAI,GAAGA,EAAM,WAAW,CAAC,CAAC,EAAE,EAJnD,CACEK,kBAAgB,aAAaL,EAAM,WAAW,CAAC,EAAGI,EAASJ,EAAM,MAAM,EACvEK,EAAAA,gBAAgB,aAAaL,EAAM,WAAW,CAAC,EAAGI,EAASJ,EAAM,MAAM,CAAA,CAG/E,CAAC,EAEKM,EAAcC,GAAqB,CACvCN,EAAK,oBAAqBM,CAAM,CAClC,EAcA,MAAO,CACL,gBAAAL,EACA,iBAdwBM,GAAkB,CAC1C,MAAMD,EAASP,EAAM,WAAW,IAAKS,GAAMA,CAAC,EAC5CF,EAAO,CAAC,EAAI,CAACC,EACbF,EAAWC,CAAM,CACnB,EAWE,iBATwBC,GAAkB,CAC1C,MAAMD,EAASP,EAAM,WAAW,IAAKS,GAAMA,CAAC,EAC5CF,EAAO,CAAC,EAAI,CAACC,EACbF,EAAWC,CAAM,CACnB,EAME,WAAAD,CAAA,CAEJ,CACF,CAAC"}
+{"version":3,"file":"NeonRangeSlider.cjs.js","sources":["../../../../src/components/user-input/range-slider/NeonRangeSlider.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport { NeonNumberUtils } from '@/common/utils/NeonNumberUtils';\nimport NeonSlider from '@/components/user-input/slider/NeonSlider.vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\n\n/**\n *\n */\nexport default defineComponent({\n  name: 'NeonRangeSlider',\n  components: {\n    NeonSlider,\n  },\n  props: {\n    /**\n     * This is the <em>v-model</em> property which is an array containing the lower and upper bounds of the selected range.\n     */\n    modelValue: { type: Array as () => Array<number>, required: true },\n    /**\n     * The list of ids for the lower bound and upper bound inputs, e.g. ['lowerBoundId', 'upperBoundId']\n     */\n    ids: { type: Array as () => Array<string>, required: false },\n\n    /**\n     * Slider color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * Disable output display if set to false\n     */\n    output: { type: Boolean, default: true },\n    /**\n     * Disable legend if set to false\n     */\n    legend: { type: Boolean, default: true },\n    /**\n     * Disable tooltip if set to false\n     */\n    tooltip: { type: Boolean, default: true },\n    /**\n     * The size of steps between values the user can select. Defaults to 1 unless percentage = true in which case it will\n     * default to 0.01.\n     */\n    step: { type: Number, required: false },\n    /**\n     * The rounding precision for display purposes\n     */\n    decimals: { type: Number, required: false },\n    /**\n     * A format template string used for display purposes. Use the placeholder {value} to reference the value in the\n     * format string. e.g. value = 90, ${value} => $90\n     */\n    valueTemplate: { type: String, required: false },\n    /**\n     * Disable formatting, e.g. in the case of a year value -> display as 2020, not 2,020.\n     */\n    disableFormatting: { type: Boolean, default: false },\n    /**\n     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%\n     */\n    percentage: { type: Boolean, default: false },\n    /**\n     * The locale used for display purposes. This defaults to the browser's locale if none is provided.\n     */\n    locale: { type: String, default: null },\n    /**\n     * The minimum range value\n     */\n    min: { type: Number, default: 0 },\n    /**\n     * The maximum range value. The default value is 100 except when percentage = true the default is 1 (100%).\n     */\n    max: { type: Number, required: false },\n    /**\n     * Component disabled state.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * ARIA label for the lower bound slider.\n     */\n    lowerBoundLabel: { type: String, default: 'Lower bound' },\n    /**\n     * ARIA label for the upper bound slider.\n     */\n    upperBoundLabel: { type: String, default: 'Upper bound' },\n  },\n  emits: [\n    /**\n     * Event triggered when the lower or upper bounds of the value change.\n     *\n     * @type {number[]} An array containing the raw numeric upper and lower bounds of the selection.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const formattedValues = computed((): string[] => {\n      const options = {\n        decimals: props.decimals,\n        format: props.valueTemplate,\n        percentage: props.percentage,\n      };\n\n      return !props.disableFormatting\n        ? [\n            NeonNumberUtils.formatNumber(props.modelValue[0], options, props.locale),\n            NeonNumberUtils.formatNumber(props.modelValue[1], options, props.locale),\n          ]\n        : [`${props.modelValue[0]}`, `${props.modelValue[1]}`];\n    });\n\n    const emitValues = (values: number[]) => {\n      emit('update:modelValue', values);\n    };\n\n    const changeLowerBound = (value: number) => {\n      const values = props.modelValue.map((v) => v);\n      values[0] = +value;\n      emitValues(values);\n    };\n\n    const changeUpperBound = (value: number) => {\n      const values = props.modelValue.map((v) => v);\n      values[1] = +value;\n      emitValues(values);\n    };\n\n    return {\n      formattedValues,\n      changeLowerBound,\n      changeUpperBound,\n      emitValues,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSlider","NeonFunctionalColor","props","emit","formattedValues","computed","options","NeonNumberUtils","emitValues","values","value","v"],"mappings":"yMAQAA,EAAeC,kBAAgB,CAC7B,KAAM,kBACN,WAAY,CACV,WAAAC,CAAA,EAEF,MAAO,CAIL,WAAY,CAAE,KAAM,MAA8B,SAAU,EAAA,EAI5D,IAAK,CAAE,KAAM,MAA8B,SAAU,EAAA,EAKrD,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,OAAA,EAIjF,OAAQ,CAAE,KAAM,QAAS,QAAS,EAAA,EAIlC,OAAQ,CAAE,KAAM,QAAS,QAAS,EAAA,EAIlC,QAAS,CAAE,KAAM,QAAS,QAAS,EAAA,EAKnC,KAAM,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIhC,SAAU,CAAE,KAAM,OAAQ,SAAU,EAAA,EAKpC,cAAe,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIzC,kBAAmB,CAAE,KAAM,QAAS,QAAS,EAAA,EAI7C,WAAY,CAAE,KAAM,QAAS,QAAS,EAAA,EAItC,OAAQ,CAAE,KAAM,OAAQ,QAAS,IAAA,EAIjC,IAAK,CAAE,KAAM,OAAQ,QAAS,CAAA,EAI9B,IAAK,CAAE,KAAM,OAAQ,SAAU,EAAA,EAI/B,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,gBAAiB,CAAE,KAAM,OAAQ,QAAS,aAAA,EAI1C,gBAAiB,CAAE,KAAM,OAAQ,QAAS,aAAA,CAAc,EAE1D,MAAO,CAML,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAkBC,EAAAA,SAAS,IAAgB,CAC/C,MAAMC,EAAU,CACd,SAAUJ,EAAM,SAChB,OAAQA,EAAM,cACd,WAAYA,EAAM,UAAA,EAGpB,OAAQA,EAAM,kBAKV,CAAC,GAAGA,EAAM,WAAW,CAAC,CAAC,GAAI,GAAGA,EAAM,WAAW,CAAC,CAAC,EAAE,EAJnD,CACEK,kBAAgB,aAAaL,EAAM,WAAW,CAAC,EAAGI,EAASJ,EAAM,MAAM,EACvEK,EAAAA,gBAAgB,aAAaL,EAAM,WAAW,CAAC,EAAGI,EAASJ,EAAM,MAAM,CAAA,CAG/E,CAAC,EAEKM,EAAcC,GAAqB,CACvCN,EAAK,oBAAqBM,CAAM,CAClC,EAcA,MAAO,CACL,gBAAAL,EACA,iBAdwBM,GAAkB,CAC1C,MAAMD,EAASP,EAAM,WAAW,IAAKS,GAAMA,CAAC,EAC5CF,EAAO,CAAC,EAAI,CAACC,EACbF,EAAWC,CAAM,CACnB,EAWE,iBATwBC,GAAkB,CAC1C,MAAMD,EAASP,EAAM,WAAW,IAAKS,GAAMA,CAAC,EAC5CF,EAAO,CAAC,EAAI,CAACC,EACbF,EAAWC,CAAM,CACnB,EAME,WAAAD,CAAA,CAEJ,CACF,CAAC"}

package/dist/components/user-input/range-slider/NeonRangeSlider.es.js

@@ -19,7 +19,7 @@ const B = d({
     /**
      * Slider color.
      */
-    color: { type: String, default: f.LowContrast },
+    color: { type: String, default: f.Primary },
     /**
      * Disable output display if set to false
      */
@@ -87,8 +87,8 @@ const B = d({
      */
     "update:modelValue"
   ],
-  setup(e, { emit: n }) {
-    const r = m(() => {
+  setup(e, { emit: r }) {
+    const n = m(() => {
       const t = {
         decimals: e.decimals,
         format: e.valueTemplate,
@@ -99,10 +99,10 @@ const B = d({
         u.formatNumber(e.modelValue[1], t, e.locale)
       ];
     }), l = (t) => {
-      n("update:modelValue", t);
+      r("update:modelValue", t);
     };
     return {
-      formattedValues: r,
+      formattedValues: n,
       changeLowerBound: (t) => {
         const a = e.modelValue.map((o) => o);
         a[0] = +t, l(a);

package/dist/components/user-input/range-slider/NeonRangeSlider.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonRangeSlider.es.js","sources":["../../../../src/components/user-input/range-slider/NeonRangeSlider.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport { NeonNumberUtils } from '@/common/utils/NeonNumberUtils';\nimport NeonSlider from '@/components/user-input/slider/NeonSlider.vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\n\n/**\n *\n */\nexport default defineComponent({\n  name: 'NeonRangeSlider',\n  components: {\n    NeonSlider,\n  },\n  props: {\n    /**\n     * This is the <em>v-model</em> property which is an array containing the lower and upper bounds of the selected range.\n     */\n    modelValue: { type: Array as () => Array<number>, required: true },\n    /**\n     * The list of ids for the lower bound and upper bound inputs, e.g. ['lowerBoundId', 'upperBoundId']\n     */\n    ids: { type: Array as () => Array<string>, required: false },\n\n    /**\n     * Slider color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * Disable output display if set to false\n     */\n    output: { type: Boolean, default: true },\n    /**\n     * Disable legend if set to false\n     */\n    legend: { type: Boolean, default: true },\n    /**\n     * Disable tooltip if set to false\n     */\n    tooltip: { type: Boolean, default: true },\n    /**\n     * The size of steps between values the user can select. Defaults to 1 unless percentage = true in which case it will\n     * default to 0.01.\n     */\n    step: { type: Number, required: false },\n    /**\n     * The rounding precision for display purposes\n     */\n    decimals: { type: Number, required: false },\n    /**\n     * A format template string used for display purposes. Use the placeholder {value} to reference the value in the\n     * format string. e.g. value = 90, ${value} => $90\n     */\n    valueTemplate: { type: String, required: false },\n    /**\n     * Disable formatting, e.g. in the case of a year value -> display as 2020, not 2,020.\n     */\n    disableFormatting: { type: Boolean, default: false },\n    /**\n     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%\n     */\n    percentage: { type: Boolean, default: false },\n    /**\n     * The locale used for display purposes. This defaults to the browser's locale if none is provided.\n     */\n    locale: { type: String, default: null },\n    /**\n     * The minimum range value\n     */\n    min: { type: Number, default: 0 },\n    /**\n     * The maximum range value. The default value is 100 except when percentage = true the default is 1 (100%).\n     */\n    max: { type: Number, required: false },\n    /**\n     * Component disabled state.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * ARIA label for the lower bound slider.\n     */\n    lowerBoundLabel: { type: String, default: 'Lower bound' },\n    /**\n     * ARIA label for the upper bound slider.\n     */\n    upperBoundLabel: { type: String, default: 'Upper bound' },\n  },\n  emits: [\n    /**\n     * Event triggered when the lower or upper bounds of the value change.\n     *\n     * @type {number[]} An array containing the raw numeric upper and lower bounds of the selection.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const formattedValues = computed((): string[] => {\n      const options = {\n        decimals: props.decimals,\n        format: props.valueTemplate,\n        percentage: props.percentage,\n      };\n\n      return !props.disableFormatting\n        ? [\n            NeonNumberUtils.formatNumber(props.modelValue[0], options, props.locale),\n            NeonNumberUtils.formatNumber(props.modelValue[1], options, props.locale),\n          ]\n        : [`${props.modelValue[0]}`, `${props.modelValue[1]}`];\n    });\n\n    const emitValues = (values: number[]) => {\n      emit('update:modelValue', values);\n    };\n\n    const changeLowerBound = (value: number) => {\n      const values = props.modelValue.map((v) => v);\n      values[0] = +value;\n      emitValues(values);\n    };\n\n    const changeUpperBound = (value: number) => {\n      const values = props.modelValue.map((v) => v);\n      values[1] = +value;\n      emitValues(values);\n    };\n\n    return {\n      formattedValues,\n      changeLowerBound,\n      changeUpperBound,\n      emitValues,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSlider","NeonFunctionalColor","props","emit","formattedValues","computed","options","NeonNumberUtils","emitValues","values","value","v"],"mappings":";;;;AAQA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,YAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,YAAY,EAAE,MAAM,OAA8B,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAI5D,KAAK,EAAE,MAAM,OAA8B,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAKrD,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,YAAA;AAAA;AAAA;AAAA;AAAA,IAIjF,QAAQ,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIlC,QAAQ,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIlC,SAAS,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKnC,MAAM,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,UAAU,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKpC,eAAe,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIzC,mBAAmB,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAI7C,YAAY,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAItC,QAAQ,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIjC,KAAK,EAAE,MAAM,QAAQ,SAAS,EAAA;AAAA;AAAA;AAAA;AAAA,IAI9B,KAAK,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAI/B,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,iBAAiB,EAAE,MAAM,QAAQ,SAAS,cAAA;AAAA;AAAA;AAAA;AAAA,IAI1C,iBAAiB,EAAE,MAAM,QAAQ,SAAS,cAAA;AAAA,EAAc;AAAA,EAE1D,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,UAAMC,IAAkBC,EAAS,MAAgB;AAC/C,YAAMC,IAAU;AAAA,QACd,UAAUJ,EAAM;AAAA,QAChB,QAAQA,EAAM;AAAA,QACd,YAAYA,EAAM;AAAA,MAAA;AAGpB,aAAQA,EAAM,oBAKV,CAAC,GAAGA,EAAM,WAAW,CAAC,CAAC,IAAI,GAAGA,EAAM,WAAW,CAAC,CAAC,EAAE,IAJnD;AAAA,QACEK,EAAgB,aAAaL,EAAM,WAAW,CAAC,GAAGI,GAASJ,EAAM,MAAM;AAAA,QACvEK,EAAgB,aAAaL,EAAM,WAAW,CAAC,GAAGI,GAASJ,EAAM,MAAM;AAAA,MAAA;AAAA,IAG/E,CAAC,GAEKM,IAAa,CAACC,MAAqB;AACvC,MAAAN,EAAK,qBAAqBM,CAAM;AAAA,IAClC;AAcA,WAAO;AAAA,MACL,iBAAAL;AAAA,MACA,kBAduB,CAACM,MAAkB;AAC1C,cAAMD,IAASP,EAAM,WAAW,IAAI,CAACS,MAAMA,CAAC;AAC5C,QAAAF,EAAO,CAAC,IAAI,CAACC,GACbF,EAAWC,CAAM;AAAA,MACnB;AAAA,MAWE,kBATuB,CAACC,MAAkB;AAC1C,cAAMD,IAASP,EAAM,WAAW,IAAI,CAACS,MAAMA,CAAC;AAC5C,QAAAF,EAAO,CAAC,IAAI,CAACC,GACbF,EAAWC,CAAM;AAAA,MACnB;AAAA,MAME,YAAAD;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}
+{"version":3,"file":"NeonRangeSlider.es.js","sources":["../../../../src/components/user-input/range-slider/NeonRangeSlider.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport { NeonNumberUtils } from '@/common/utils/NeonNumberUtils';\nimport NeonSlider from '@/components/user-input/slider/NeonSlider.vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\n\n/**\n *\n */\nexport default defineComponent({\n  name: 'NeonRangeSlider',\n  components: {\n    NeonSlider,\n  },\n  props: {\n    /**\n     * This is the <em>v-model</em> property which is an array containing the lower and upper bounds of the selected range.\n     */\n    modelValue: { type: Array as () => Array<number>, required: true },\n    /**\n     * The list of ids for the lower bound and upper bound inputs, e.g. ['lowerBoundId', 'upperBoundId']\n     */\n    ids: { type: Array as () => Array<string>, required: false },\n\n    /**\n     * Slider color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * Disable output display if set to false\n     */\n    output: { type: Boolean, default: true },\n    /**\n     * Disable legend if set to false\n     */\n    legend: { type: Boolean, default: true },\n    /**\n     * Disable tooltip if set to false\n     */\n    tooltip: { type: Boolean, default: true },\n    /**\n     * The size of steps between values the user can select. Defaults to 1 unless percentage = true in which case it will\n     * default to 0.01.\n     */\n    step: { type: Number, required: false },\n    /**\n     * The rounding precision for display purposes\n     */\n    decimals: { type: Number, required: false },\n    /**\n     * A format template string used for display purposes. Use the placeholder {value} to reference the value in the\n     * format string. e.g. value = 90, ${value} => $90\n     */\n    valueTemplate: { type: String, required: false },\n    /**\n     * Disable formatting, e.g. in the case of a year value -> display as 2020, not 2,020.\n     */\n    disableFormatting: { type: Boolean, default: false },\n    /**\n     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%\n     */\n    percentage: { type: Boolean, default: false },\n    /**\n     * The locale used for display purposes. This defaults to the browser's locale if none is provided.\n     */\n    locale: { type: String, default: null },\n    /**\n     * The minimum range value\n     */\n    min: { type: Number, default: 0 },\n    /**\n     * The maximum range value. The default value is 100 except when percentage = true the default is 1 (100%).\n     */\n    max: { type: Number, required: false },\n    /**\n     * Component disabled state.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * ARIA label for the lower bound slider.\n     */\n    lowerBoundLabel: { type: String, default: 'Lower bound' },\n    /**\n     * ARIA label for the upper bound slider.\n     */\n    upperBoundLabel: { type: String, default: 'Upper bound' },\n  },\n  emits: [\n    /**\n     * Event triggered when the lower or upper bounds of the value change.\n     *\n     * @type {number[]} An array containing the raw numeric upper and lower bounds of the selection.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const formattedValues = computed((): string[] => {\n      const options = {\n        decimals: props.decimals,\n        format: props.valueTemplate,\n        percentage: props.percentage,\n      };\n\n      return !props.disableFormatting\n        ? [\n            NeonNumberUtils.formatNumber(props.modelValue[0], options, props.locale),\n            NeonNumberUtils.formatNumber(props.modelValue[1], options, props.locale),\n          ]\n        : [`${props.modelValue[0]}`, `${props.modelValue[1]}`];\n    });\n\n    const emitValues = (values: number[]) => {\n      emit('update:modelValue', values);\n    };\n\n    const changeLowerBound = (value: number) => {\n      const values = props.modelValue.map((v) => v);\n      values[0] = +value;\n      emitValues(values);\n    };\n\n    const changeUpperBound = (value: number) => {\n      const values = props.modelValue.map((v) => v);\n      values[1] = +value;\n      emitValues(values);\n    };\n\n    return {\n      formattedValues,\n      changeLowerBound,\n      changeUpperBound,\n      emitValues,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSlider","NeonFunctionalColor","props","emit","formattedValues","computed","options","NeonNumberUtils","emitValues","values","value","v"],"mappings":";;;;AAQA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,YAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,YAAY,EAAE,MAAM,OAA8B,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAI5D,KAAK,EAAE,MAAM,OAA8B,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAKrD,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,QAAA;AAAA;AAAA;AAAA;AAAA,IAIjF,QAAQ,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIlC,QAAQ,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIlC,SAAS,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKnC,MAAM,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,UAAU,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKpC,eAAe,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIzC,mBAAmB,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAI7C,YAAY,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAItC,QAAQ,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIjC,KAAK,EAAE,MAAM,QAAQ,SAAS,EAAA;AAAA;AAAA;AAAA;AAAA,IAI9B,KAAK,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAI/B,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,iBAAiB,EAAE,MAAM,QAAQ,SAAS,cAAA;AAAA;AAAA;AAAA;AAAA,IAI1C,iBAAiB,EAAE,MAAM,QAAQ,SAAS,cAAA;AAAA,EAAc;AAAA,EAE1D,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,UAAMC,IAAkBC,EAAS,MAAgB;AAC/C,YAAMC,IAAU;AAAA,QACd,UAAUJ,EAAM;AAAA,QAChB,QAAQA,EAAM;AAAA,QACd,YAAYA,EAAM;AAAA,MAAA;AAGpB,aAAQA,EAAM,oBAKV,CAAC,GAAGA,EAAM,WAAW,CAAC,CAAC,IAAI,GAAGA,EAAM,WAAW,CAAC,CAAC,EAAE,IAJnD;AAAA,QACEK,EAAgB,aAAaL,EAAM,WAAW,CAAC,GAAGI,GAASJ,EAAM,MAAM;AAAA,QACvEK,EAAgB,aAAaL,EAAM,WAAW,CAAC,GAAGI,GAASJ,EAAM,MAAM;AAAA,MAAA;AAAA,IAG/E,CAAC,GAEKM,IAAa,CAACC,MAAqB;AACvC,MAAAN,EAAK,qBAAqBM,CAAM;AAAA,IAClC;AAcA,WAAO;AAAA,MACL,iBAAAL;AAAA,MACA,kBAduB,CAACM,MAAkB;AAC1C,cAAMD,IAASP,EAAM,WAAW,IAAI,CAACS,MAAMA,CAAC;AAC5C,QAAAF,EAAO,CAAC,IAAI,CAACC,GACbF,EAAWC,CAAM;AAAA,MACnB;AAAA,MAWE,kBATuB,CAACC,MAAkB;AAC1C,cAAMD,IAASP,EAAM,WAAW,IAAI,CAACS,MAAMA,CAAC;AAC5C,QAAAF,EAAO,CAAC,IAAI,CAACC,GACbF,EAAWC,CAAM;AAAA,MACnB;AAAA,MAME,YAAAD;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}

package/dist/components/user-input/search/NeonSearch.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const o=require("vue"),A=require("../../../common/enums/NeonSize.cjs.js"),C=require("../../../common/enums/NeonFunctionalColor.cjs.js"),L=require("../../presentation/dropdown/NeonDropdown.vue.cjs.js"),x=require("../../presentation/icon/NeonIcon.vue.cjs.js"),B=require("../input/NeonInput.vue.cjs.js"),V=require("../chip/NeonChip.vue.cjs.js"),i=require("../../../common/enums/NeonDropdownPlacement.cjs.js"),z=require("../../../common/utils/NeonScrollUtils.cjs.js"),O=o.defineComponent({name:"NeonSearch",components:{NeonChip:V,NeonDropdown:L,NeonIcon:x,NeonInput:B},props:{modelValue:{type:[String,Array],required:!0},placeholder:{type:String,required:!0},options:{type:Array,required:!0},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},size:{type:String,default:A.NeonSize.Medium},color:{type:String,default:C.NeonFunctionalColor.LowContrast},placement:{type:String,default:i.NeonDropdownPlacement.BottomLeft}},emits:["update:modelValue","filter-changed"],setup(n,{emit:f}){const w=o.useAttrs(),p=o.ref(null),u=o.ref(n.placement),r=o.ref(!1),c=o.ref(null),l=o.ref(-1),d=o.ref("");o.watch(()=>r.value,e=>{e&&n.options.length>0&&(c.value=n.options[0].key,l.value=0)});const N=()=>{switch(u.value){case i.NeonDropdownPlacement.TopLeft:case i.NeonDropdownPlacement.TopRight:case i.NeonDropdownPlacement.LeftBottom:case i.NeonDropdownPlacement.RightBottom:return!0}return!1},k=()=>{var t;const e=(t=p.value)==null?void 0:t.querySelector(".neon-search__option--highlighted");z.NeonScrollUtils.scrollIntoView(e)},h=(e,t)=>{const a=l.value+e;a>=0&&a<=n.options.length-1&&(l.value=a,c.value=n.options[l.value].key,t.preventDefault(),setTimeout(k))},s=e=>{f("update:modelValue",e)},g=e=>{n.multiple||s(""),d.value=e,f("filter-changed",e)},y=e=>{if(n.multiple){const t=n.modelValue.map(m=>m),a=t.findIndex(m=>m.key===e.key);a>=0?t.splice(a,1):t.push(e),s(t)}else s(e.key);g(n.multiple?"":e.label.toString())},v=e=>{if(r.value)switch(e.code){case"ArrowUp":case"ArrowDown":{const t=N()?-1:1;e.code==="ArrowUp"?h(-1*t,e):h(1*t,e)}break;case"Enter":case"Space":e.target.classList.contains("neon-search__input")||(y(n.options[l.value]),e.preventDefault());break;case"Tab":!e.ctrlKey&&!e.metaKey&&!e.altKey&&(r.value=!1);break}},S=e=>{u.value=e};o.onMounted(()=>{document.addEventListener("keydown",v)}),o.onUnmounted(()=>{document.removeEventListener("keydown",v)});const q=o.computed(()=>{const{onFilterChanged:e,...t}=w;return t}),D=e=>{c.value=e,l.value=n.options.findIndex(t=>t.key===e)},b=()=>r.value=!0,I=e=>s(n.modelValue.filter(t=>t.key!==e.key)),P=o.computed(()=>n.multiple?n.options:n.options.filter(e=>e.label!==d.value));return{dropdown:p,open:r,highlightedKey:c,filter:d,sanitizedAttributes:q,computedOptions:P,dropdownPlacement:u,onPlacement:S,onFilterChange:g,clickOption:y,changeHighlighted:D,showOptions:b,removeSelected:I}}});module.exports=O;
+"use strict";const o=require("vue"),A=require("../../../common/enums/NeonSize.cjs.js"),C=require("../../../common/enums/NeonFunctionalColor.cjs.js"),V=require("../../presentation/dropdown/NeonDropdown.vue.cjs.js"),B=require("../../presentation/icon/NeonIcon.vue.cjs.js"),L=require("../input/NeonInput.vue.cjs.js"),z=require("../chip/NeonChip.vue.cjs.js"),i=require("../../../common/enums/NeonDropdownPlacement.cjs.js"),E=require("../../../common/utils/NeonScrollUtils.cjs.js"),T=require("../../../common/enums/NeonInputMode.cjs.js"),U=o.defineComponent({name:"NeonSearch",components:{NeonChip:z,NeonDropdown:V,NeonIcon:B,NeonInput:L},props:{modelValue:{type:[String,Array],required:!0},placeholder:{type:String,required:!0},options:{type:Array,required:!0},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},size:{type:String,default:A.NeonSize.Medium},color:{type:String,default:C.NeonFunctionalColor.Primary},autocomplete:{type:String,default:"on"},inputmode:{type:String,default:T.NeonInputMode.Text},placement:{type:String,default:i.NeonDropdownPlacement.BottomLeft}},emits:["update:modelValue","filter-changed"],setup(n,{emit:f}){const N=o.useAttrs(),p=o.ref(null),h=o.ref(null),s=o.ref(n.placement),r=o.ref(!1),c=o.ref(null),a=o.ref(-1),d=o.ref("");o.watch(()=>r.value,e=>{e&&n.options.length>0&&(c.value=n.options[0].key,a.value=0)});const S=()=>{switch(s.value){case i.NeonDropdownPlacement.TopLeft:case i.NeonDropdownPlacement.TopRight:case i.NeonDropdownPlacement.LeftBottom:case i.NeonDropdownPlacement.RightBottom:return!0}return!1},k=()=>{var t,l;const e=(l=(t=p.value)==null?void 0:t.dropdownContent)==null?void 0:l.querySelector(".neon-search__option--highlighted");e&&(e.focus(),E.NeonScrollUtils.scrollIntoView(e))},y=(e,t)=>{const l=a.value+e;l>=0&&l<=n.options.length-1&&(a.value=l,c.value=n.options[a.value].key,t.preventDefault(),setTimeout(k))},u=e=>{f("update:modelValue",e)},g=e=>{!n.multiple&&n.modelValue!==""&&u(""),d.value=e,f("filter-changed",e)},v=e=>{if(n.multiple){const t=n.modelValue.map(m=>m),l=t.findIndex(m=>m.key===e.key);l>=0?t.splice(l,1):t.push(e),u(t)}else u(e.key);g(n.multiple?"":e.label.toString())},w=e=>{var t;if(r.value)switch(e.code){case"ArrowUp":case"ArrowDown":{const l=S()?-1:1;e.code==="ArrowUp"?y(-1*l,e):y(1*l,e)}break;case"Enter":case"Space":e.target.classList.contains("neon-search__input")||(v(n.options[a.value]),e.preventDefault());break;case"Tab":document.activeElement!==((t=h.value)==null?void 0:t.neonInput)&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(r.value=!1);break}},q=e=>{s.value=e};o.onMounted(()=>{document.addEventListener("keydown",w)}),o.onUnmounted(()=>{document.removeEventListener("keydown",w)});const I=o.computed(()=>{const{onFilterChanged:e,...t}=N;return t}),D=e=>{c.value=e,a.value=n.options.findIndex(t=>t.key===e)},b=()=>r.value=!0,P=e=>u(n.modelValue.filter(t=>t.key!==e.key)),x=o.computed(()=>n.multiple?n.options:n.options.filter(e=>e.label!==d.value));return{dropdown:p,searchInput:h,open:r,highlightedKey:c,filter:d,sanitizedAttributes:I,computedOptions:x,dropdownPlacement:s,onPlacement:q,onFilterChange:g,clickOption:v,changeHighlighted:D,showOptions:b,removeSelected:P}}});module.exports=U;
 //# sourceMappingURL=NeonSearch.cjs.js.map