@aotearoan/neon 19.0.2 → 21.0.0

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

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

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

@@ -26,7 +26,7 @@ function $(e, n, h, C, v, w) {
       m(e.$slots, "default"),
       e.message !== null ? (o(), s("span", {
         key: 0,
-        class: a([`neon-color-text-${e.messageColor}`, "neon-field__message"]),
+        class: a([`neon-color-${e.messageColor}`, "neon-field__message"]),
         onClick: n[0] || (n[0] = b(() => {
         }, ["prevent", "stop"]))
       }, i(e.message), 3)) : t("", !0)

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

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

package/dist/components/user-input/file/NeonFile.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const a=require("./NeonFile.cjs.js"),l=require("vue"),t=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r=["aria-disabled"],p={class:"neon-button-group neon-file__actions"};function u(e,o,m,c,f,C){const s=l.resolveComponent("neon-list"),d=l.resolveComponent("neon-input"),n=l.resolveComponent("neon-button");return l.openBlock(),l.createElementBlock("div",{"aria-disabled":e.disabled,class:l.normalizeClass([[`neon-file--${e.color}`,`neon-file--${e.size}`,{"neon-file--disabled":e.disabled,"neon-file--single":!e.multiple,"neon-file--direct-upload":e.directUpload}],"neon-file"])},[e.directUpload?l.createCommentVNode("",!0):(l.openBlock(),l.createBlock(s,{key:0,color:e.color,disabled:e.disabled,modelValue:e.fileList,size:e.size,onClose:e.remove},null,8,["color","disabled","modelValue","size","onClose"])),l.createVNode(d,{id:e.id,ref:"fileInput",modelValue:e.fileInputModel,"onUpdate:modelValue":o[0]||(o[0]=i=>e.fileInputModel=i),accept:e.accept,disabled:e.disabled,multiple:e.multiple,tabindex:-1,class:"neon-file__input",type:"file",onInput:e.onInput},null,8,["id","modelValue","accept","disabled","multiple","onInput"]),l.createElementVNode("div",p,[e.multiple&&!e.directUpload?(l.openBlock(),l.createBlock(n,{key:0,disabled:e.disabled||e.files.length===0,size:e.size,"button-style":"text",label:"Clear all",onClick:o[1]||(o[1]=i=>e.clearAll())},null,8,["disabled","size"])):l.createCommentVNode("",!0),l.createVNode(n,{"aria-controls":e.id?e.id:void 0,color:e.color,disabled:e.disabled,icon:e.icon,label:e.label,size:e.size,state:e.state,onClick:e.openFileDialog},null,8,["aria-controls","color","disabled","icon","label","size","state","onClick"])])],10,r)}const b=t(a,[["render",u]]);module.exports=b;
+"use strict";const a=require("./NeonFile.cjs.js"),l=require("vue"),t=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r=["aria-disabled"],p={class:"neon-button-group neon-file__actions"};function u(e,o,c,m,f,C){const s=l.resolveComponent("neon-list"),d=l.resolveComponent("neon-input"),n=l.resolveComponent("neon-button");return l.openBlock(),l.createElementBlock("div",{"aria-disabled":e.disabled,class:l.normalizeClass([[`neon-file--${e.color}`,`neon-file--${e.size}`,{"neon-file--disabled":e.disabled,"neon-file--single":!e.multiple,"neon-file--direct-upload":e.directUpload}],"neon-file"])},[e.directUpload?l.createCommentVNode("",!0):(l.openBlock(),l.createBlock(s,{key:0,color:e.color,disabled:e.disabled,modelValue:e.fileList,size:e.size,onClose:e.remove},null,8,["color","disabled","modelValue","size","onClose"])),l.createVNode(d,{id:e.id,ref:"fileInput",modelValue:e.fileInputModel,"onUpdate:modelValue":o[0]||(o[0]=i=>e.fileInputModel=i),accept:e.accept,disabled:e.disabled,multiple:e.multiple,tabindex:-1,class:"neon-file__input",type:"file",onInput:e.onInput},null,8,["id","modelValue","accept","disabled","multiple","onInput"]),l.createElementVNode("div",p,[e.multiple&&!e.directUpload?(l.openBlock(),l.createBlock(n,{key:0,disabled:e.disabled||e.files.length===0,size:e.size,"button-style":"text",color:"low-contrast",label:"Clear all",onClick:o[1]||(o[1]=i=>e.clearAll())},null,8,["disabled","size"])):l.createCommentVNode("",!0),l.createVNode(n,{"aria-controls":e.id?e.id:void 0,color:e.color,disabled:e.disabled,icon:e.icon,label:e.label,size:e.size,state:e.state,onClick:e.openFileDialog},null,8,["aria-controls","color","disabled","icon","label","size","state","onClick"])])],10,r)}const b=t(a,[["render",u]]);module.exports=b;
 //# sourceMappingURL=NeonFile.vue.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NeonFile.vue.cjs.js","sources":["../../../../src/components/user-input/file/NeonFile.vue"],"sourcesContent":["<template>\n  <div\n    :aria-disabled=\"disabled\"\n    :class=\"[\n      `neon-file--${color}`,\n      `neon-file--${size}`,\n      { 'neon-file--disabled': disabled, 'neon-file--single': !multiple, 'neon-file--direct-upload': directUpload },\n    ]\"\n    class=\"neon-file\"\n  >\n    <neon-list\n      v-if=\"!directUpload\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :modelValue=\"fileList\"\n      :size=\"size\"\n      @close=\"remove\"\n    />\n    <neon-input\n      :id=\"id\"\n      ref=\"fileInput\"\n      v-model=\"fileInputModel\"\n      :accept=\"accept\"\n      :disabled=\"disabled\"\n      :multiple=\"multiple\"\n      :tabindex=\"-1\"\n      class=\"neon-file__input\"\n      type=\"file\"\n      @input=\"onInput\"\n    />\n    <div class=\"neon-button-group neon-file__actions\">\n      <neon-button\n        v-if=\"multiple && !directUpload\"\n        :disabled=\"disabled || files.length === 0\"\n        :size=\"size\"\n        button-style=\"text\"\n        label=\"Clear all\"\n        @click=\"clearAll()\"\n      />\n      <neon-button\n        :aria-controls=\"id ? id : undefined\"\n        :color=\"color\"\n        :disabled=\"disabled\"\n        :icon=\"icon\"\n        :label=\"label\"\n        :size=\"size\"\n        :state=\"state\"\n        @click=\"openFileDialog\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonFile.ts\" />\n"],"names":["_hoisted_2","_createElementBlock","_ctx","_normalizeClass","_createBlock","_component_neon_list","_createVNode","_component_neon_input","$event","_createElementVNode","_component_neon_button"],"mappings":"uJA8BSA,EAAA,CAAA,MAAM,sCAAsC,8JA7BnDC,EAAAA,mBAiDM,MAAA,CAhDH,gBAAeC,EAAA,SACf,MAAKC,EAAAA,eAAA,CAAA,eAAwBD,EAAA,KAAK,iBAAwBA,EAAA,IAAI,0BAAmCA,EAAA,SAAQ,oBAAA,CAAwBA,EAAA,SAAQ,2BAA8BA,EAAA,YAAY,GAK9K,WAAW,CAAA,IAGRA,EAAA,wDADTE,EAAAA,YAOEC,EAAA,OALC,MAAOH,EAAA,MACP,SAAUA,EAAA,SACV,WAAYA,EAAA,SACZ,KAAMA,EAAA,KACN,QAAOA,EAAA,oEAEVI,EAAAA,YAWEC,EAAA,CAVC,GAAIL,EAAA,GACL,IAAI,uBACKA,EAAA,oDAAAA,EAAA,eAAcM,GACtB,OAAQN,EAAA,OACR,SAAUA,EAAA,SACV,SAAUA,EAAA,SACV,SAAU,GACX,MAAM,mBACN,KAAK,OACJ,QAAOA,EAAA,8EAEVO,EAAAA,mBAmBM,MAnBNT,EAmBM,CAjBIE,EAAA,WAAaA,EAAA,4BADrBE,EAAAA,YAOEM,EAAA,OALC,SAAUR,EAAA,UAAYA,EAAA,MAAM,SAAM,EAClC,KAAMA,EAAA,KACP,eAAa,OACb,MAAM,YACL,uBAAOA,EAAA,sEAEVI,EAAAA,YASEI,EAAA,CARC,gBAAeR,EAAA,GAAKA,EAAA,GAAK,OACzB,MAAOA,EAAA,MACP,SAAUA,EAAA,SACV,KAAMA,EAAA,KACN,MAAOA,EAAA,MACP,KAAMA,EAAA,KACN,MAAOA,EAAA,MACP,QAAOA,EAAA"}
+{"version":3,"file":"NeonFile.vue.cjs.js","sources":["../../../../src/components/user-input/file/NeonFile.vue"],"sourcesContent":["<template>\n  <div\n    :aria-disabled=\"disabled\"\n    :class=\"[\n      `neon-file--${color}`,\n      `neon-file--${size}`,\n      { 'neon-file--disabled': disabled, 'neon-file--single': !multiple, 'neon-file--direct-upload': directUpload },\n    ]\"\n    class=\"neon-file\"\n  >\n    <neon-list\n      v-if=\"!directUpload\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :modelValue=\"fileList\"\n      :size=\"size\"\n      @close=\"remove\"\n    />\n    <neon-input\n      :id=\"id\"\n      ref=\"fileInput\"\n      v-model=\"fileInputModel\"\n      :accept=\"accept\"\n      :disabled=\"disabled\"\n      :multiple=\"multiple\"\n      :tabindex=\"-1\"\n      class=\"neon-file__input\"\n      type=\"file\"\n      @input=\"onInput\"\n    />\n    <div class=\"neon-button-group neon-file__actions\">\n      <neon-button\n        v-if=\"multiple && !directUpload\"\n        :disabled=\"disabled || files.length === 0\"\n        :size=\"size\"\n        button-style=\"text\"\n        color=\"low-contrast\"\n        label=\"Clear all\"\n        @click=\"clearAll()\"\n      />\n      <neon-button\n        :aria-controls=\"id ? id : undefined\"\n        :color=\"color\"\n        :disabled=\"disabled\"\n        :icon=\"icon\"\n        :label=\"label\"\n        :size=\"size\"\n        :state=\"state\"\n        @click=\"openFileDialog\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonFile.ts\" />\n"],"names":["_hoisted_2","_createElementBlock","_ctx","_normalizeClass","_createBlock","_component_neon_list","_createVNode","_component_neon_input","$event","_createElementVNode","_component_neon_button"],"mappings":"uJA8BSA,EAAA,CAAA,MAAM,sCAAsC,8JA7BnDC,EAAAA,mBAkDM,MAAA,CAjDH,gBAAeC,EAAA,SACf,MAAKC,EAAAA,eAAA,CAAA,eAAwBD,EAAA,KAAK,iBAAwBA,EAAA,IAAI,0BAAmCA,EAAA,SAAQ,oBAAA,CAAwBA,EAAA,SAAQ,2BAA8BA,EAAA,YAAY,GAK9K,WAAW,CAAA,IAGRA,EAAA,wDADTE,EAAAA,YAOEC,EAAA,OALC,MAAOH,EAAA,MACP,SAAUA,EAAA,SACV,WAAYA,EAAA,SACZ,KAAMA,EAAA,KACN,QAAOA,EAAA,oEAEVI,EAAAA,YAWEC,EAAA,CAVC,GAAIL,EAAA,GACL,IAAI,uBACKA,EAAA,oDAAAA,EAAA,eAAcM,GACtB,OAAQN,EAAA,OACR,SAAUA,EAAA,SACV,SAAUA,EAAA,SACV,SAAU,GACX,MAAM,mBACN,KAAK,OACJ,QAAOA,EAAA,8EAEVO,EAAAA,mBAoBM,MApBNT,EAoBM,CAlBIE,EAAA,WAAaA,EAAA,4BADrBE,EAAAA,YAQEM,EAAA,OANC,SAAUR,EAAA,UAAYA,EAAA,MAAM,SAAM,EAClC,KAAMA,EAAA,KACP,eAAa,OACb,MAAM,eACN,MAAM,YACL,uBAAOA,EAAA,sEAEVI,EAAAA,YASEI,EAAA,CARC,gBAAeR,EAAA,GAAKA,EAAA,GAAK,OACzB,MAAOA,EAAA,MACP,SAAUA,EAAA,SACV,KAAMA,EAAA,KACN,MAAOA,EAAA,MACP,KAAMA,EAAA,KACN,MAAOA,EAAA,MACP,QAAOA,EAAA"}

package/dist/components/user-input/file/NeonFile.vue.es.js

@@ -39,6 +39,7 @@ function k(e, l, V, $, I, v) {
         disabled: e.disabled || e.files.length === 0,
         size: e.size,
         "button-style": "text",
+        color: "low-contrast",
         label: "Clear all",
         onClick: l[1] || (l[1] = (d) => e.clearAll())
       }, null, 8, ["disabled", "size"])) : a("", !0),

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

@@ -1 +1 @@
-{"version":3,"file":"NeonFile.vue.es.js","sources":["../../../../src/components/user-input/file/NeonFile.vue"],"sourcesContent":["<template>\n  <div\n    :aria-disabled=\"disabled\"\n    :class=\"[\n      `neon-file--${color}`,\n      `neon-file--${size}`,\n      { 'neon-file--disabled': disabled, 'neon-file--single': !multiple, 'neon-file--direct-upload': directUpload },\n    ]\"\n    class=\"neon-file\"\n  >\n    <neon-list\n      v-if=\"!directUpload\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :modelValue=\"fileList\"\n      :size=\"size\"\n      @close=\"remove\"\n    />\n    <neon-input\n      :id=\"id\"\n      ref=\"fileInput\"\n      v-model=\"fileInputModel\"\n      :accept=\"accept\"\n      :disabled=\"disabled\"\n      :multiple=\"multiple\"\n      :tabindex=\"-1\"\n      class=\"neon-file__input\"\n      type=\"file\"\n      @input=\"onInput\"\n    />\n    <div class=\"neon-button-group neon-file__actions\">\n      <neon-button\n        v-if=\"multiple && !directUpload\"\n        :disabled=\"disabled || files.length === 0\"\n        :size=\"size\"\n        button-style=\"text\"\n        label=\"Clear all\"\n        @click=\"clearAll()\"\n      />\n      <neon-button\n        :aria-controls=\"id ? id : undefined\"\n        :color=\"color\"\n        :disabled=\"disabled\"\n        :icon=\"icon\"\n        :label=\"label\"\n        :size=\"size\"\n        :state=\"state\"\n        @click=\"openFileDialog\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonFile.ts\" />\n"],"names":["_hoisted_2","_createElementBlock","_ctx","_normalizeClass","_createBlock","_component_neon_list","_createVNode","_component_neon_input","$event","_createElementVNode","_component_neon_button"],"mappings":";;;6BA8BSA,IAAA,EAAA,OAAM,uCAAsC;;;cA7BnDC,EAiDM,OAAA;AAAA,IAhDH,iBAAeC,EAAA;AAAA,IACf,OAAKC,EAAA,CAAA;AAAA,oBAAwBD,EAAA,KAAK;AAAA,oBAAwBA,EAAA,IAAI;AAAA,+BAAmCA,EAAA,UAAQ,qBAAA,CAAwBA,EAAA,UAAQ,4BAA8BA,EAAA,aAAY;AAAA,OAK9K,WAAW,CAAA;AAAA;IAGRA,EAAA,iCADTE,EAOEC,GAAA;AAAA;MALC,OAAOH,EAAA;AAAA,MACP,UAAUA,EAAA;AAAA,MACV,YAAYA,EAAA;AAAA,MACZ,MAAMA,EAAA;AAAA,MACN,SAAOA,EAAA;AAAA;IAEVI,EAWEC,GAAA;AAAA,MAVC,IAAIL,EAAA;AAAA,MACL,KAAI;AAAA,kBACKA,EAAA;AAAA,oDAAAA,EAAA,iBAAcM;AAAA,MACtB,QAAQN,EAAA;AAAA,MACR,UAAUA,EAAA;AAAA,MACV,UAAUA,EAAA;AAAA,MACV,UAAU;AAAA,MACX,OAAM;AAAA,MACN,MAAK;AAAA,MACJ,SAAOA,EAAA;AAAA;IAEVO,EAmBM,OAnBNT,GAmBM;AAAA,MAjBIE,EAAA,aAAaA,EAAA,qBADrBE,EAOEM,GAAA;AAAA;QALC,UAAUR,EAAA,YAAYA,EAAA,MAAM,WAAM;AAAA,QAClC,MAAMA,EAAA;AAAA,QACP,gBAAa;AAAA,QACb,OAAM;AAAA,QACL,gCAAOA,EAAA;;MAEVI,EASEI,GAAA;AAAA,QARC,iBAAeR,EAAA,KAAKA,EAAA,KAAK;AAAA,QACzB,OAAOA,EAAA;AAAA,QACP,UAAUA,EAAA;AAAA,QACV,MAAMA,EAAA;AAAA,QACN,OAAOA,EAAA;AAAA,QACP,MAAMA,EAAA;AAAA,QACN,OAAOA,EAAA;AAAA,QACP,SAAOA,EAAA;AAAA;;;;;"}
+{"version":3,"file":"NeonFile.vue.es.js","sources":["../../../../src/components/user-input/file/NeonFile.vue"],"sourcesContent":["<template>\n  <div\n    :aria-disabled=\"disabled\"\n    :class=\"[\n      `neon-file--${color}`,\n      `neon-file--${size}`,\n      { 'neon-file--disabled': disabled, 'neon-file--single': !multiple, 'neon-file--direct-upload': directUpload },\n    ]\"\n    class=\"neon-file\"\n  >\n    <neon-list\n      v-if=\"!directUpload\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :modelValue=\"fileList\"\n      :size=\"size\"\n      @close=\"remove\"\n    />\n    <neon-input\n      :id=\"id\"\n      ref=\"fileInput\"\n      v-model=\"fileInputModel\"\n      :accept=\"accept\"\n      :disabled=\"disabled\"\n      :multiple=\"multiple\"\n      :tabindex=\"-1\"\n      class=\"neon-file__input\"\n      type=\"file\"\n      @input=\"onInput\"\n    />\n    <div class=\"neon-button-group neon-file__actions\">\n      <neon-button\n        v-if=\"multiple && !directUpload\"\n        :disabled=\"disabled || files.length === 0\"\n        :size=\"size\"\n        button-style=\"text\"\n        color=\"low-contrast\"\n        label=\"Clear all\"\n        @click=\"clearAll()\"\n      />\n      <neon-button\n        :aria-controls=\"id ? id : undefined\"\n        :color=\"color\"\n        :disabled=\"disabled\"\n        :icon=\"icon\"\n        :label=\"label\"\n        :size=\"size\"\n        :state=\"state\"\n        @click=\"openFileDialog\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonFile.ts\" />\n"],"names":["_hoisted_2","_createElementBlock","_ctx","_normalizeClass","_createBlock","_component_neon_list","_createVNode","_component_neon_input","$event","_createElementVNode","_component_neon_button"],"mappings":";;;6BA8BSA,IAAA,EAAA,OAAM,uCAAsC;;;cA7BnDC,EAkDM,OAAA;AAAA,IAjDH,iBAAeC,EAAA;AAAA,IACf,OAAKC,EAAA,CAAA;AAAA,oBAAwBD,EAAA,KAAK;AAAA,oBAAwBA,EAAA,IAAI;AAAA,+BAAmCA,EAAA,UAAQ,qBAAA,CAAwBA,EAAA,UAAQ,4BAA8BA,EAAA,aAAY;AAAA,OAK9K,WAAW,CAAA;AAAA;IAGRA,EAAA,iCADTE,EAOEC,GAAA;AAAA;MALC,OAAOH,EAAA;AAAA,MACP,UAAUA,EAAA;AAAA,MACV,YAAYA,EAAA;AAAA,MACZ,MAAMA,EAAA;AAAA,MACN,SAAOA,EAAA;AAAA;IAEVI,EAWEC,GAAA;AAAA,MAVC,IAAIL,EAAA;AAAA,MACL,KAAI;AAAA,kBACKA,EAAA;AAAA,oDAAAA,EAAA,iBAAcM;AAAA,MACtB,QAAQN,EAAA;AAAA,MACR,UAAUA,EAAA;AAAA,MACV,UAAUA,EAAA;AAAA,MACV,UAAU;AAAA,MACX,OAAM;AAAA,MACN,MAAK;AAAA,MACJ,SAAOA,EAAA;AAAA;IAEVO,EAoBM,OApBNT,GAoBM;AAAA,MAlBIE,EAAA,aAAaA,EAAA,qBADrBE,EAQEM,GAAA;AAAA;QANC,UAAUR,EAAA,YAAYA,EAAA,MAAM,WAAM;AAAA,QAClC,MAAMA,EAAA;AAAA,QACP,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,OAAM;AAAA,QACL,gCAAOA,EAAA;;MAEVI,EASEI,GAAA;AAAA,QARC,iBAAeR,EAAA,KAAKA,EAAA,KAAK;AAAA,QACzB,OAAOA,EAAA;AAAA,QACP,UAAUA,EAAA;AAAA,QACV,MAAMA,EAAA;AAAA,QACN,OAAOA,EAAA;AAAA,QACP,MAAMA,EAAA;AAAA,QACN,OAAOA,EAAA;AAAA,QACP,SAAOA,EAAA;AAAA;;;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"NeonInput.cjs.js","sources":["../../../../src/components/user-input/input/NeonInput.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, 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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"}
+{"version":3,"file":"NeonInput.cjs.js","sources":["../../../../src/components/user-input/input/NeonInput.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, 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          setTimeout(focus);\n        }\n        $event.preventDefault();\n        $event.stopPropagation();\n      }\n    };\n\n    const changeValue = (event: Event) => {\n      const val = (event.target as HTMLInputElement).value;\n      const v = props.maxlength && val.length > props.maxlength ? val.substring(0, props.maxlength) : val;\n      if (props.modelValue !== v) {\n        emitModelValue(v);\n      }\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key !== 'Backspace' &&\n        props.maxlength &&\n        props.modelValue &&\n        props.modelValue.length >= props.maxlength\n      ) {\n        event.preventDefault();\n      }\n    };\n\n    const computedPlaceholder = computed(() => {\n      if (props.placeholder) {\n        return props.placeholder;\n      } else {\n        switch (props.type) {\n          case NeonInputType.Email:\n            return 'gbelson@hooli.com';\n          case NeonInputType.Tel:\n            return '+41785551234';\n          case NeonInputType.Url:\n            return 'http://www.getskeleton.com';\n          default:\n            return '';\n        }\n      }\n    });\n\n    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.es.js

@@ -1,15 +1,15 @@
-import { defineComponent as C, useAttrs as E, ref as m, computed as l, defineExpose as z } from "vue";
+import { defineComponent as C, useAttrs as E, ref as g, computed as l, defineExpose as T } from "vue";
 import { NeonInputType as c } from "../../../common/enums/NeonInputType.es.js";
 import { NeonState as n } from "../../../common/enums/NeonState.es.js";
-import { NeonSize as D } from "../../../common/enums/NeonSize.es.js";
+import { NeonSize as z } from "../../../common/enums/NeonSize.es.js";
 import { NeonFunctionalColor as i } from "../../../common/enums/NeonFunctionalColor.es.js";
-import F from "../../presentation/icon/NeonIcon.vue.es.js";
-import { NeonDebounceUtils as T } from "../../../common/utils/NeonDebounceUtils.es.js";
+import D from "../../presentation/icon/NeonIcon.vue.es.js";
+import { NeonDebounceUtils as F } from "../../../common/utils/NeonDebounceUtils.es.js";
 import { NeonInputMode as L } from "../../../common/enums/NeonInputMode.es.js";
 const j = C({
   name: "NeonInput",
   components: {
-    NeonIcon: F
+    NeonIcon: D
   },
   props: {
     /**
@@ -33,7 +33,7 @@ const j = C({
     /**
      * Size of the input
      */
-    size: { type: String, default: D.Medium },
+    size: { type: String, default: z.Medium },
     /**
      * Color of the input
      */
@@ -118,7 +118,7 @@ const j = C({
     "update:modelValue"
   ],
   setup(e, { emit: o }) {
-    const g = E(), a = m(null), r = m(!1), y = l(() => {
+    const y = E(), a = g(null), r = g(!1), h = l(() => {
       const {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         onBlur: t,
@@ -127,9 +127,9 @@ const j = C({
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         onIconClick: d,
         ...B
-      } = g;
+      } = y;
       return B;
-    }), s = T.debounce((t) => {
+    }), s = F.debounce((t) => {
       o("update:modelValue", t);
     }, e.debounce), f = l(() => {
       switch (e.state) {
@@ -142,7 +142,7 @@ const j = C({
         default:
           return e.icon ? e.icon : e.modelValue && e.modelValue.length > 0 ? "times" : void 0;
       }
-    }), h = l(() => f.value && !e.hideIcon && (e.state !== "ready" || e.icon || e.modelValue && !e.disabled && e.modelValue.length > 0)), b = l(() => {
+    }), b = l(() => f.value && !e.hideIcon && (e.state !== "ready" || e.icon || e.modelValue && !e.disabled && e.modelValue.length > 0)), S = l(() => {
       switch (e.state) {
         case n.Success:
           return i.Success;
@@ -153,7 +153,7 @@ const j = C({
         default:
           return i.LowContrast;
       }
-    }), S = () => {
+    }), m = () => {
       var t;
       (t = a.value) == null || t.focus();
     }, N = () => {
@@ -164,7 +164,7 @@ const j = C({
     }, v = () => {
       r.value = !1, o("blur");
     }, x = (t) => {
-      e.disabled || (e.icon ? o("icon-click") : s(""), t.preventDefault(), t.stopPropagation());
+      e.disabled || (e.icon ? o("icon-click") : (s(""), setTimeout(m)), t.preventDefault(), t.stopPropagation());
     }, I = (t) => {
       const u = t.target.value, d = e.maxlength && u.length > e.maxlength ? u.substring(0, e.maxlength) : u;
       e.modelValue !== d && s(d);
@@ -184,15 +184,15 @@ const j = C({
           return "";
       }
     });
-    return z({ neonInput: a }), {
+    return T({ neonInput: a }), {
       neonInput: a,
       focused: r,
-      sanitizedAttributes: y,
-      iconVisible: h,
+      sanitizedAttributes: h,
+      iconVisible: b,
       iconName: f,
-      iconColor: b,
+      iconColor: S,
       computedPlaceholder: w,
-      focus: S,
+      focus: m,
       click: N,
       onFocus: V,
       onBlur: v,

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, 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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"}
+{"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          setTimeout(focus);\n        }\n        $event.preventDefault();\n        $event.stopPropagation();\n      }\n    };\n\n    const changeValue = (event: Event) => {\n      const val = (event.target as HTMLInputElement).value;\n      const v = props.maxlength && val.length > props.maxlength ? val.substring(0, props.maxlength) : val;\n      if (props.modelValue !== v) {\n        emitModelValue(v);\n      }\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key !== 'Backspace' &&\n        props.maxlength &&\n        props.modelValue &&\n        props.modelValue.length >= props.maxlength\n      ) {\n        event.preventDefault();\n      }\n    };\n\n    const computedPlaceholder = computed(() => {\n      if (props.placeholder) {\n        return props.placeholder;\n      } else {\n        switch (props.type) {\n          case NeonInputType.Email:\n            return 'gbelson@hooli.com';\n          case NeonInputType.Tel:\n            return '+41785551234';\n          case NeonInputType.Url:\n            return 'http://www.getskeleton.com';\n          default:\n            return '';\n        }\n      }\n    });\n\n    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/select/NeonSelect.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const n=require("vue"),D=require("../../../common/enums/NeonSize.cjs.js"),I=require("../../../common/enums/NeonFunctionalColor.cjs.js"),x=require("../../presentation/dropdown/NeonDropdown.vue.cjs.js"),B=require("../../presentation/icon/NeonIcon.vue.cjs.js"),L=require("../switch/NeonSwitch.vue.cjs.js"),c=require("../../../common/enums/NeonDropdownPlacement.cjs.js"),z=require("../../../common/utils/NeonScrollUtils.cjs.js"),C=n.defineComponent({name:"NeonSelect",components:{NeonDropdown:x,NeonIcon:B,NeonSwitch:L},props:{id:{type:String},placeholder:{type:String,required:!0},placeholderAsOption:{type:Boolean,default:!1},placeholderIcon:{type:String,required:!1},options:{type:Array,required:!1},groupedOptions:{type:Array,required:!1},modelValue:{type:[String,Array],required:!0},multiple:{type:Boolean,default:!1},multiselectPlaceholder:{type:String,required:!1},disabled:{type:Boolean,default:!1},size:{type:String,default:D.NeonSize.Medium},color:{type:String,default:I.NeonFunctionalColor.Primary},placement:{type:String,default:c.NeonDropdownPlacement.BottomLeft}},emits:["update:modelValue"],setup(l,{emit:v}){const w=n.useAttrs(),y=n.ref(null),i=n.ref(!1),p=n.ref(l.placement),s=n.ref(null),u=n.ref(-1),a=n.computed(()=>{var e;return l.options?l.options:l.groupedOptions?(e=l.groupedOptions)==null?void 0:e.flatMap(t=>t.options):[]}),k=()=>{if(!l.groupedOptions)switch(p.value){case c.NeonDropdownPlacement.TopLeft:case c.NeonDropdownPlacement.TopRight:case c.NeonDropdownPlacement.LeftBottom:case c.NeonDropdownPlacement.RightBottom:return!0}return!1},N=()=>{var t,o;const e=(o=(t=y.value)==null?void 0:t.dropdownContent)==null?void 0:o.querySelector(".neon-select__option--highlighted");e&&(e.focus(),z.NeonScrollUtils.scrollIntoView(e))},d=(e,t)=>{const o=u.value+e;o>=0&&o<=a.value.length-1&&(u.value=o,s.value=a.value[u.value].key,t==null||t.preventDefault(),setTimeout(N))},f=e=>{v("update:modelValue",e)},g=e=>{if(l.multiple){const t=[...l.modelValue],o=t.findIndex(m=>m===e.key);o>=0?t.splice(o,1):t.push(e.key),f(t)}else l.modelValue!==e.key&&(i.value=!1,f(e.key))},h=e=>{if(i.value)switch(e.code){case"ArrowUp":case"ArrowDown":{const t=k()?-1:1;e.code==="ArrowUp"?d(-1*t,e):d(1*t,e)}break;case"Enter":case"Space":a.value[u.value].disabled||(g(a.value[u.value]),e.preventDefault());break;case"Tab":!e.ctrlKey&&!e.metaKey&&!e.altKey&&(i.value=!1);break}},S=n.computed(()=>l.groupedOptions||[{group:"",options:l.options||[]}]),q=n.computed(()=>{const{...e}=w;return e}),V=n.computed(()=>{if(l.multiple&&l.modelValue.length>0){if(l.multiselectPlaceholder)return l.multiselectPlaceholder;if(l.modelValue.length>1)return`${l.modelValue.length} items selected`;{const e=a.value.find(t=>t.key===l.modelValue[0]);return(e==null?void 0:e.label)||""}}else if(l.modelValue){const e=a.value.find(t=>t.key===l.modelValue);if(e)return e.label}return l.placeholder}),O=n.computed(()=>{if(l.modelValue){const e=a.value.find(t=>t.key===l.modelValue);if(e)return e.icon}return l.placeholderIcon}),P=e=>{const t=Array.from(e.target.options).filter(r=>r.selected).map(r=>r.value),o=a.value.filter(r=>t.indexOf(r.key)>=0),m=l.multiple?o.map(r=>r.key):o[0].key;f(m)},b=e=>{s.value=e,u.value=a.value.findIndex(t=>t.key===e)},A=e=>{p.value=e};return n.onMounted(()=>{document.addEventListener("keydown",h)}),n.onUnmounted(()=>{document.removeEventListener("keydown",h)}),n.watch(()=>i.value,e=>{e&&(s.value=a.value[0].key,u.value=0,d(u.value))}),{dropdown:y,open:i,highlightedKey:s,highlightedIndex:u,flattenedOptions:a,computedLabel:V,sanitizedAttributes:q,computedOptions:S,computedIcon:O,clickOption:g,nativeSelectChange:P,changeHighlighted:b,onPlacement:A}}});module.exports=C;
+"use strict";const n=require("vue"),A=require("../../../common/enums/NeonSize.cjs.js"),x=require("../../../common/enums/NeonFunctionalColor.cjs.js"),B=require("../../presentation/dropdown/NeonDropdown.vue.cjs.js"),L=require("../../presentation/icon/NeonIcon.vue.cjs.js"),z=require("../switch/NeonSwitch.vue.cjs.js"),c=require("../../../common/enums/NeonDropdownPlacement.cjs.js"),C=require("../../../common/utils/NeonScrollUtils.cjs.js"),K=require("../../../common/enums/NeonDropdownStyle.cjs.js"),U=n.defineComponent({name:"NeonSelect",components:{NeonDropdown:B,NeonIcon:L,NeonSwitch:z},props:{id:{type:String},placeholder:{type:String,required:!0},placeholderAsOption:{type:Boolean,default:!1},placeholderIcon:{type:String,required:!1},options:{type:Array,required:!1},groupedOptions:{type:Array,required:!1},modelValue:{type:[String,Array],required:!0},multiple:{type:Boolean,default:!1},multiselectPlaceholder:{type:String,required:!1},disabled:{type:Boolean,default:!1},size:{type:String,default:A.NeonSize.Medium},color:{type:String,default:x.NeonFunctionalColor.Primary},buttonStyle:{type:String,default:K.NeonDropdownStyle.Input},placement:{type:String,default:c.NeonDropdownPlacement.BottomLeft}},emits:["update:modelValue"],setup(t,{emit:v}){const w=n.useAttrs(),y=n.ref(null),i=n.ref(!1),p=n.ref(t.placement),d=n.ref(null),u=n.ref(-1),a=n.computed(()=>{var e;return t.options?t.options:t.groupedOptions?(e=t.groupedOptions)==null?void 0:e.flatMap(l=>l.options):[]}),S=()=>{if(!t.groupedOptions)switch(p.value){case c.NeonDropdownPlacement.TopLeft:case c.NeonDropdownPlacement.TopRight:case c.NeonDropdownPlacement.LeftBottom:case c.NeonDropdownPlacement.RightBottom:return!0}return!1},k=()=>{var l,o;const e=(o=(l=y.value)==null?void 0:l.dropdownContent)==null?void 0:o.querySelector(".neon-select__option--highlighted");e&&(e.focus(),C.NeonScrollUtils.scrollIntoView(e))},s=(e,l)=>{const o=u.value+e;o>=0&&o<=a.value.length-1&&(u.value=o,d.value=a.value[u.value].key,l==null||l.preventDefault(),setTimeout(k))},f=e=>{v("update:modelValue",e)},g=e=>{if(t.multiple){const l=[...t.modelValue],o=l.findIndex(m=>m===e.key);o>=0?l.splice(o,1):l.push(e.key),f(l)}else t.modelValue!==e.key&&(i.value=!1,f(e.key))},h=e=>{if(i.value)switch(e.code){case"ArrowUp":case"ArrowDown":{const l=S()?-1:1;e.code==="ArrowUp"?s(-1*l,e):s(1*l,e)}break;case"Enter":case"Space":a.value[u.value].disabled||(g(a.value[u.value]),e.preventDefault());break;case"Tab":!e.ctrlKey&&!e.metaKey&&!e.altKey&&(i.value=!1);break}},N=n.computed(()=>t.groupedOptions||[{group:"",options:t.options||[]}]),q=n.computed(()=>{const{...e}=w;return e}),V=n.computed(()=>{if(t.multiple&&t.modelValue.length>0){if(t.multiselectPlaceholder)return t.multiselectPlaceholder;if(t.modelValue.length>1)return`${t.modelValue.length} items selected`;{const e=a.value.find(l=>l.key===t.modelValue[0]);return(e==null?void 0:e.label)||""}}else if(t.modelValue){const e=a.value.find(l=>l.key===t.modelValue);if(e)return e.label}return t.placeholder}),b=n.computed(()=>!t.modelValue||t.modelValue.length===0),P=n.computed(()=>{if(t.modelValue){const e=a.value.find(l=>l.key===t.modelValue);if(e)return e.icon}return t.placeholderIcon}),D=e=>{const l=Array.from(e.target.options).filter(r=>r.selected).map(r=>r.value),o=a.value.filter(r=>l.indexOf(r.key)>=0),m=t.multiple?o.map(r=>r.key):o[0].key;f(m)},I=e=>{d.value=e,u.value=a.value.findIndex(l=>l.key===e)},O=e=>{p.value=e};return n.onMounted(()=>{document.addEventListener("keydown",h)}),n.onUnmounted(()=>{document.removeEventListener("keydown",h)}),n.watch(()=>i.value,e=>{e&&(d.value=a.value[0].key,u.value=0,s(u.value))}),{dropdown:y,open:i,highlightedKey:d,highlightedIndex:u,flattenedOptions:a,computedLabel:V,sanitizedAttributes:q,computedOptions:N,computedIcon:P,labelIsPlaceholder:b,clickOption:g,nativeSelectChange:D,changeHighlighted:I,onPlacement:O}}});module.exports=U;
 //# sourceMappingURL=NeonSelect.cjs.js.map

package/dist/components/user-input/select/NeonSelect.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonSelect.cjs.js","sources":["../../../../src/components/user-input/select/NeonSelect.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport type { NeonSelectGroup } from '@/common/models/NeonSelectGroup';\nimport type { NeonSelectOption } from '@/common/models/NeonSelectOption';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonSwitch from '@/components/user-input/switch/NeonSwitch.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/NeonScrollUtils';\n\n/**\n * <p>The <strong>NeonSelect</strong> is the equivalent of an HTML &lt;select&gt; form control. On touch devices\n * NeonSelect will use the native select for input. <strong>NeonSelect</strong> supports grouping and multiselect.</p>\n * <p><strong>Note:</strong> As well as the options described below, pass through attributes supported by\n * <a href=\"/presentation/dropdown\">NeonDropdown</a> to change the style of the dropdown button.</p>\n */\nexport default defineComponent({\n  name: 'NeonSelect',\n  components: {\n    NeonDropdown,\n    NeonIcon,\n    NeonSwitch,\n  },\n  props: {\n    /**\n     * Id for the dropdown button\n     */\n    id: { type: String },\n    /**\n     * Placeholder to display as button label when there is no option selected.\n     */\n    placeholder: { type: String, required: true },\n    /**\n     * Display the placeholder as the first option in the select, this is useful as an alternative to a label.\n     */\n    placeholderAsOption: { type: Boolean, default: false },\n    /**\n     * Optional placeholder icon.\n     */\n    placeholderIcon: { type: String, required: false },\n    /**\n     * A list of options to render in the select.\n     */\n    options: { type: Array as () => Array<NeonSelectOption>, required: false },\n    /**\n     * A list of grouped options to render in the select.\n     */\n    groupedOptions: { type: Array as () => Array<NeonSelectGroup>, required: false },\n    /**\n     * Either a single string, indicating the key of the selected option or an array of selected keys in the case\n     * multiple = true.\n     */\n    modelValue: { type: [String, Array as () => Array<string>], required: true },\n    /**\n     * Allow multi-select.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * Placeholder when multiple values are selected.\n     */\n    multiselectPlaceholder: { type: String, required: false },\n    /**\n     * Disable the select\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * The size of the dropdown - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The color of the select.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * Placement of the dropdown contents.\n     */\n    placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n  },\n  emits: [\n    /**\n     * emitted when the user changes the selection.\n     * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys\n     * (multi-select).\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const dropdown = ref<InstanceType<typeof NeonDropdown> | null>(null);\n\n    const open = ref(false);\n    const dropdownPlacement = ref<NeonDropdownPlacement>(props.placement);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n\n    const flattenedOptions = computed((): NeonSelectOption[] => {\n      if (props.options) {\n        return props.options;\n      } else if (props.groupedOptions) {\n        return props.groupedOptions?.flatMap((group) => group.options);\n      }\n      return [];\n    });\n\n    const isReverse = () => {\n      if (!props.groupedOptions) {\n        switch (dropdownPlacement.value) {\n          case NeonDropdownPlacement.TopLeft:\n          case NeonDropdownPlacement.TopRight:\n          case NeonDropdownPlacement.LeftBottom:\n          case NeonDropdownPlacement.RightBottom:\n            return true;\n        }\n      }\n\n      return false;\n    };\n\n    const onNavigate = () => {\n      const element: HTMLElement | null = dropdown.value?.dropdownContent?.querySelector(\n        '.neon-select__option--highlighted',\n      ) as HTMLElement;\n\n      if (element) {\n        element.focus();\n        NeonScrollUtils.scrollIntoView(element);\n      }\n    };\n    const navigateBy = (offset: number, $event?: KeyboardEvent) => {\n      const newIndex = highlightedIndex.value + offset;\n      if (newIndex >= 0 && newIndex <= flattenedOptions.value.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = flattenedOptions.value[highlightedIndex.value].key;\n        $event?.preventDefault();\n        setTimeout(onNavigate);\n      }\n    };\n\n    const emitInputEvent = (value: string | string[]) => {\n      emit('update:modelValue', value);\n    };\n\n    const clickOption = (option: NeonSelectOption) => {\n      if (props.multiple) {\n        const values = [...props.modelValue];\n        const index = values.findIndex((v) => v === option.key);\n        if (index >= 0) {\n          values.splice(index, 1);\n        } else {\n          values.push(option.key);\n        }\n        emitInputEvent(values);\n      } else if (props.modelValue !== option.key) {\n        open.value = false;\n        emitInputEvent(option.key);\n      }\n    };\n\n    const keyboardHandler = ($event: KeyboardEvent) => {\n      if (open.value) {\n        switch ($event.code) {\n          case 'ArrowUp':\n          case 'ArrowDown':\n            {\n              const reverseOffset = isReverse() ? -1 : 1;\n              if ($event.code === 'ArrowUp') {\n                navigateBy(-1 * reverseOffset, $event);\n              } else {\n                navigateBy(1 * reverseOffset, $event);\n              }\n            }\n            break;\n          case 'Enter':\n          case 'Space':\n            if (!flattenedOptions.value[highlightedIndex.value].disabled) {\n              clickOption(flattenedOptions.value[highlightedIndex.value]);\n              $event.preventDefault();\n            }\n            break;\n          case 'Tab':\n            if (!$event.ctrlKey && !$event.metaKey && !$event.altKey) {\n              open.value = false;\n            }\n            break;\n        }\n      }\n    };\n\n    const computedOptions = computed((): Array<NeonSelectGroup> => {\n      return (\n        props.groupedOptions || [\n          {\n            group: '',\n            options: props.options || [],\n          },\n        ]\n      );\n    });\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const computedLabel = computed(() => {\n      if (props.multiple && props.modelValue.length > 0) {\n        if (props.multiselectPlaceholder) {\n          return props.multiselectPlaceholder;\n        } else if (props.modelValue.length > 1) {\n          return `${props.modelValue.length} items selected`;\n        } else {\n          const selected = flattenedOptions.value.find((option) => option.key === props.modelValue[0]);\n          return selected?.label || '';\n        }\n      } else if (props.modelValue) {\n        const selected = flattenedOptions.value.find((option) => option.key === props.modelValue);\n\n        if (selected) {\n          return selected.label;\n        }\n      }\n\n      return props.placeholder;\n    });\n\n    const computedIcon = computed(() => {\n      if (props.modelValue) {\n        const selected = flattenedOptions.value.find((option) => option.key === props.modelValue);\n\n        if (selected) {\n          return selected.icon;\n        }\n      }\n\n      return props.placeholderIcon;\n    });\n\n    const nativeSelectChange = (event: Event) => {\n      const selectedKeys = Array.from((event.target as HTMLSelectElement).options)\n        .filter((opt) => opt.selected)\n        .map((opt) => opt.value);\n      const selectedOptions = flattenedOptions.value.filter((v) => selectedKeys.indexOf(v.key) >= 0);\n      const value = props.multiple ? selectedOptions.map((value) => value.key) : selectedOptions[0].key;\n      emitInputEvent(value);\n    };\n\n    const changeHighlighted = (key: string) => {\n      highlightedKey.value = key;\n      highlightedIndex.value = flattenedOptions.value.findIndex((opt) => opt.key === key);\n    };\n\n    const onPlacement = (placement: NeonDropdownPlacement) => {\n      dropdownPlacement.value = placement;\n    };\n\n    onMounted(() => {\n      document.addEventListener('keydown', keyboardHandler);\n    });\n\n    onUnmounted(() => {\n      document.removeEventListener('keydown', keyboardHandler);\n    });\n\n    watch(\n      () => open.value,\n      (open: boolean) => {\n        if (open) {\n          highlightedKey.value = flattenedOptions.value[0].key;\n          highlightedIndex.value = 0;\n          navigateBy(highlightedIndex.value);\n        }\n      },\n    );\n\n    return {\n      dropdown,\n      open,\n      highlightedKey,\n      highlightedIndex,\n      flattenedOptions,\n      computedLabel,\n      sanitizedAttributes,\n      computedOptions,\n      computedIcon,\n      clickOption,\n      nativeSelectChange,\n      changeHighlighted,\n      onPlacement,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonDropdown","NeonIcon","NeonSwitch","NeonSize","NeonFunctionalColor","NeonDropdownPlacement","props","emit","attrs","useAttrs","dropdown","ref","open","dropdownPlacement","highlightedKey","highlightedIndex","flattenedOptions","computed","_a","group","isReverse","onNavigate","element","_b","NeonScrollUtils","navigateBy","offset","$event","newIndex","emitInputEvent","value","clickOption","option","values","index","v","keyboardHandler","reverseOffset","computedOptions","sanitizedAttributes","sanitized","computedLabel","selected","computedIcon","nativeSelectChange","event","selectedKeys","opt","selectedOptions","changeHighlighted","key","onPlacement","placement","onMounted","onUnmounted","watch"],"mappings":"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"}
+{"version":3,"file":"NeonSelect.cjs.js","sources":["../../../../src/components/user-input/select/NeonSelect.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport type { NeonSelectGroup } from '@/common/models/NeonSelectGroup';\nimport type { NeonSelectOption } from '@/common/models/NeonSelectOption';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonSwitch from '@/components/user-input/switch/NeonSwitch.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/NeonScrollUtils';\nimport { NeonDropdownStyle } from '@/common/enums/NeonDropdownStyle';\n\n/**\n * <p>The <strong>NeonSelect</strong> is the equivalent of an HTML &lt;select&gt; form control. On touch devices\n * NeonSelect will use the native select for input. <strong>NeonSelect</strong> supports grouping and multiselect.</p>\n * <p><strong>Note:</strong> As well as the options described below, pass through attributes supported by\n * <a href=\"/presentation/dropdown\">NeonDropdown</a> to change the style of the dropdown button.</p>\n */\nexport default defineComponent({\n  name: 'NeonSelect',\n  components: {\n    NeonDropdown,\n    NeonIcon,\n    NeonSwitch,\n  },\n  props: {\n    /**\n     * Id for the dropdown button\n     */\n    id: { type: String },\n    /**\n     * Placeholder to display as button label when there is no option selected.\n     */\n    placeholder: { type: String, required: true },\n    /**\n     * Display the placeholder as the first option in the select, this is useful as an alternative to a label.\n     */\n    placeholderAsOption: { type: Boolean, default: false },\n    /**\n     * Optional placeholder icon.\n     */\n    placeholderIcon: { type: String, required: false },\n    /**\n     * A list of options to render in the select.\n     */\n    options: { type: Array as () => Array<NeonSelectOption>, required: false },\n    /**\n     * A list of grouped options to render in the select.\n     */\n    groupedOptions: { type: Array as () => Array<NeonSelectGroup>, required: false },\n    /**\n     * Either a single string, indicating the key of the selected option or an array of selected keys in the case\n     * multiple = true.\n     */\n    modelValue: { type: [String, Array as () => Array<string>], required: true },\n    /**\n     * Allow multi-select.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * Placeholder when multiple values are selected.\n     */\n    multiselectPlaceholder: { type: String, required: false },\n    /**\n     * Disable the select\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * The size of the dropdown - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The color of the select.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The button style of the select.\n     */\n    buttonStyle: { type: String as () => NeonDropdownStyle, default: NeonDropdownStyle.Input },\n    /**\n     * Placement of the dropdown contents.\n     */\n    placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n  },\n  emits: [\n    /**\n     * emitted when the user changes the selection.\n     * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys\n     * (multi-select).\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const dropdown = ref<InstanceType<typeof NeonDropdown> | null>(null);\n\n    const open = ref(false);\n    const dropdownPlacement = ref<NeonDropdownPlacement>(props.placement);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n\n    const flattenedOptions = computed((): NeonSelectOption[] => {\n      if (props.options) {\n        return props.options;\n      } else if (props.groupedOptions) {\n        return props.groupedOptions?.flatMap((group) => group.options);\n      }\n      return [];\n    });\n\n    const isReverse = () => {\n      if (!props.groupedOptions) {\n        switch (dropdownPlacement.value) {\n          case NeonDropdownPlacement.TopLeft:\n          case NeonDropdownPlacement.TopRight:\n          case NeonDropdownPlacement.LeftBottom:\n          case NeonDropdownPlacement.RightBottom:\n            return true;\n        }\n      }\n\n      return false;\n    };\n\n    const onNavigate = () => {\n      const element: HTMLElement | null = dropdown.value?.dropdownContent?.querySelector(\n        '.neon-select__option--highlighted',\n      ) as HTMLElement;\n\n      if (element) {\n        element.focus();\n        NeonScrollUtils.scrollIntoView(element);\n      }\n    };\n    const navigateBy = (offset: number, $event?: KeyboardEvent) => {\n      const newIndex = highlightedIndex.value + offset;\n      if (newIndex >= 0 && newIndex <= flattenedOptions.value.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = flattenedOptions.value[highlightedIndex.value].key;\n        $event?.preventDefault();\n        setTimeout(onNavigate);\n      }\n    };\n\n    const emitInputEvent = (value: string | string[]) => {\n      emit('update:modelValue', value);\n    };\n\n    const clickOption = (option: NeonSelectOption) => {\n      if (props.multiple) {\n        const values = [...props.modelValue];\n        const index = values.findIndex((v) => v === option.key);\n        if (index >= 0) {\n          values.splice(index, 1);\n        } else {\n          values.push(option.key);\n        }\n        emitInputEvent(values);\n      } else if (props.modelValue !== option.key) {\n        open.value = false;\n        emitInputEvent(option.key);\n      }\n    };\n\n    const keyboardHandler = ($event: KeyboardEvent) => {\n      if (open.value) {\n        switch ($event.code) {\n          case 'ArrowUp':\n          case 'ArrowDown':\n            {\n              const reverseOffset = isReverse() ? -1 : 1;\n              if ($event.code === 'ArrowUp') {\n                navigateBy(-1 * reverseOffset, $event);\n              } else {\n                navigateBy(1 * reverseOffset, $event);\n              }\n            }\n            break;\n          case 'Enter':\n          case 'Space':\n            if (!flattenedOptions.value[highlightedIndex.value].disabled) {\n              clickOption(flattenedOptions.value[highlightedIndex.value]);\n              $event.preventDefault();\n            }\n            break;\n          case 'Tab':\n            if (!$event.ctrlKey && !$event.metaKey && !$event.altKey) {\n              open.value = false;\n            }\n            break;\n        }\n      }\n    };\n\n    const computedOptions = computed((): Array<NeonSelectGroup> => {\n      return (\n        props.groupedOptions || [\n          {\n            group: '',\n            options: props.options || [],\n          },\n        ]\n      );\n    });\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const computedLabel = computed(() => {\n      if (props.multiple && props.modelValue.length > 0) {\n        if (props.multiselectPlaceholder) {\n          return props.multiselectPlaceholder;\n        } else if (props.modelValue.length > 1) {\n          return `${props.modelValue.length} items selected`;\n        } else {\n          const selected = flattenedOptions.value.find((option) => option.key === props.modelValue[0]);\n          return selected?.label || '';\n        }\n      } else if (props.modelValue) {\n        const selected = flattenedOptions.value.find((option) => option.key === props.modelValue);\n\n        if (selected) {\n          return selected.label;\n        }\n      }\n\n      return props.placeholder;\n    });\n\n    const labelIsPlaceholder = computed(() => !props.modelValue || props.modelValue.length === 0);\n\n    const computedIcon = computed(() => {\n      if (props.modelValue) {\n        const selected = flattenedOptions.value.find((option) => option.key === props.modelValue);\n\n        if (selected) {\n          return selected.icon;\n        }\n      }\n\n      return props.placeholderIcon;\n    });\n\n    const nativeSelectChange = (event: Event) => {\n      const selectedKeys = Array.from((event.target as HTMLSelectElement).options)\n        .filter((opt) => opt.selected)\n        .map((opt) => opt.value);\n      const selectedOptions = flattenedOptions.value.filter((v) => selectedKeys.indexOf(v.key) >= 0);\n      const value = props.multiple ? selectedOptions.map((value) => value.key) : selectedOptions[0].key;\n      emitInputEvent(value);\n    };\n\n    const changeHighlighted = (key: string) => {\n      highlightedKey.value = key;\n      highlightedIndex.value = flattenedOptions.value.findIndex((opt) => opt.key === key);\n    };\n\n    const onPlacement = (placement: NeonDropdownPlacement) => {\n      dropdownPlacement.value = placement;\n    };\n\n    onMounted(() => {\n      document.addEventListener('keydown', keyboardHandler);\n    });\n\n    onUnmounted(() => {\n      document.removeEventListener('keydown', keyboardHandler);\n    });\n\n    watch(\n      () => open.value,\n      (open: boolean) => {\n        if (open) {\n          highlightedKey.value = flattenedOptions.value[0].key;\n          highlightedIndex.value = 0;\n          navigateBy(highlightedIndex.value);\n        }\n      },\n    );\n\n    return {\n      dropdown,\n      open,\n      highlightedKey,\n      highlightedIndex,\n      flattenedOptions,\n      computedLabel,\n      sanitizedAttributes,\n      computedOptions,\n      computedIcon,\n      labelIsPlaceholder,\n      clickOption,\n      nativeSelectChange,\n      changeHighlighted,\n      onPlacement,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonDropdown","NeonIcon","NeonSwitch","NeonSize","NeonFunctionalColor","NeonDropdownStyle","NeonDropdownPlacement","props","emit","attrs","useAttrs","dropdown","ref","open","dropdownPlacement","highlightedKey","highlightedIndex","flattenedOptions","computed","_a","group","isReverse","onNavigate","element","_b","NeonScrollUtils","navigateBy","offset","$event","newIndex","emitInputEvent","value","clickOption","option","values","index","v","keyboardHandler","reverseOffset","computedOptions","sanitizedAttributes","sanitized","computedLabel","selected","labelIsPlaceholder","computedIcon","nativeSelectChange","event","selectedKeys","opt","selectedOptions","changeHighlighted","key","onPlacement","placement","onMounted","onUnmounted","watch"],"mappings":"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"}