@aotearoan/neon 9.2.0 → 9.2.2

package/dist/components/user-input/password/{NeonPassword.ts_vue_type_script_src_77c7672e_lang.cjs.js → NeonPassword.ts_vue_type_script_src_d3935eba_lang.cjs.js}

@@ -1,2 +1,2 @@
 "use strict";var e=require("vue"),o=require("../input/NeonInput.cjs.js"),r=e.defineComponent({name:"NeonPassword",components:{NeonInput:o},emits:["icon-click"],setup(u,{emit:t}){const s=e.useAttrs(),n=e.ref(!1),c=e.computed(()=>{const{iconClick:p,...i}=s;return i});return{show:n,sanitizedAttributes:c,iconClicked:()=>{n.value=!n.value,t("icon-click")}}}});module.exports=r;
-//# sourceMappingURL=NeonPassword.ts_vue_type_script_src_77c7672e_lang.cjs.js.map
+//# sourceMappingURL=NeonPassword.ts_vue_type_script_src_d3935eba_lang.cjs.js.map

package/dist/components/user-input/password/{NeonPassword.ts_vue_type_script_src_77c7672e_lang.cjs.js.map → NeonPassword.ts_vue_type_script_src_d3935eba_lang.cjs.js.map}

@@ -1 +1 @@
-{"version":3,"file":"NeonPassword.ts_vue_type_script_src_77c7672e_lang.cjs.js","sources":["../../../../src/components/user-input/password/NeonPassword.ts?vue&type=script&src=77c7672e&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport NeonInput from '../input/NeonInput.vue';\n\n/**\n * <p>The <strong>NeonPassword</strong> component is the equivalent of an\n * <strong>&lt;input type=\"password\" /&gt;</strong>. It supports the same properties as\n * <a href=\"/user-input/input\"><strong>NeonInput</strong></a> with the exception of the icon which is used to toggle the\n * display of the password.\n * </p>\n */\nexport default defineComponent({\n  name: 'NeonPassword',\n  components: {\n    NeonInput,\n  },\n  emits: [\n    /**\n     * Emitted when the show/hide password icon is clicked\n     *\n     * @type {void}\n     */\n    'icon-click',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const show = ref(false);\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { iconClick, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const iconClicked = () => {\n      show.value = !show.value;\n      emit('icon-click');\n    };\n\n    return {\n      show,\n      sanitizedAttributes,\n      iconClicked,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonInput","props","emit","attrs","useAttrs","show","ref","sanitizedAttributes","computed","iconClick","sanitized"],"mappings":"yEAUAA,EAAeC,kBAAgB,CAC7B,KAAM,eACN,WAAY,CACV,UAAAC,CACF,EACA,MAAO,CAML,YACF,EACA,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAQC,EAAAA,WAERC,EAAOC,MAAI,EAAK,EAEhBC,EAAsBC,EAAAA,SAAS,IAAM,CAEnC,KAAA,CAAE,UAAAC,KAAcC,CAAA,EAAcP,EAC7B,OAAAO,CAAA,CACR,EAOM,MAAA,CACL,KAAAL,EACA,oBAAAE,EACA,YARkB,IAAM,CACnBF,EAAA,MAAQ,CAACA,EAAK,MACnBH,EAAK,YAAY,CAAA,CAMjB,CAEJ,CACF,CAAC"}
+{"version":3,"file":"NeonPassword.ts_vue_type_script_src_d3935eba_lang.cjs.js","sources":["../../../../src/components/user-input/password/NeonPassword.ts?vue&type=script&src=d3935eba&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport NeonInput from '../input/NeonInput.vue';\n\n/**\n * <p>The <strong>NeonPassword</strong> component is the equivalent of an\n * <strong>&lt;input type=\"password\" /&gt;</strong>. It supports the same properties as\n * <a href=\"/user-input/input\"><strong>NeonInput</strong></a> with the exception of the icon which is used to toggle the\n * display of the password.\n * </p>\n */\nexport default defineComponent({\n  name: 'NeonPassword',\n  components: {\n    NeonInput,\n  },\n  emits: [\n    /**\n     * Emitted when the show/hide password icon is clicked\n     *\n     * @type {void}\n     */\n    'icon-click',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const show = ref(false);\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { iconClick, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const iconClicked = () => {\n      show.value = !show.value;\n      emit('icon-click');\n    };\n\n    return {\n      show,\n      sanitizedAttributes,\n      iconClicked,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonInput","props","emit","attrs","useAttrs","show","ref","sanitizedAttributes","computed","iconClick","sanitized"],"mappings":"yEAUAA,EAAeC,kBAAgB,CAC7B,KAAM,eACN,WAAY,CACV,UAAAC,CACF,EACA,MAAO,CAML,YACF,EACA,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAQC,EAAAA,WAERC,EAAOC,MAAI,EAAK,EAEhBC,EAAsBC,EAAAA,SAAS,IAAM,CAEnC,KAAA,CAAE,UAAAC,KAAcC,CAAA,EAAcP,EAC7B,OAAAO,CAAA,CACR,EAOM,MAAA,CACL,KAAAL,EACA,oBAAAE,EACA,YARkB,IAAM,CACnBF,EAAA,MAAQ,CAACA,EAAK,MACnBH,EAAK,YAAY,CAAA,CAMjB,CAEJ,CACF,CAAC"}

package/dist/components/user-input/password/{NeonPassword.ts_vue_type_script_src_77c7672e_lang.es.js → NeonPassword.ts_vue_type_script_src_d3935eba_lang.es.js}

@@ -27,4 +27,4 @@ var _sfc_main = defineComponent({
   }
 });
 export { _sfc_main as default };
-//# sourceMappingURL=NeonPassword.ts_vue_type_script_src_77c7672e_lang.es.js.map
+//# sourceMappingURL=NeonPassword.ts_vue_type_script_src_d3935eba_lang.es.js.map

package/dist/components/user-input/password/{NeonPassword.ts_vue_type_script_src_77c7672e_lang.es.js.map → NeonPassword.ts_vue_type_script_src_d3935eba_lang.es.js.map}

@@ -1 +1 @@
-{"version":3,"file":"NeonPassword.ts_vue_type_script_src_77c7672e_lang.es.js","sources":["../../../../src/components/user-input/password/NeonPassword.ts?vue&type=script&src=77c7672e&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport NeonInput from '../input/NeonInput.vue';\n\n/**\n * <p>The <strong>NeonPassword</strong> component is the equivalent of an\n * <strong>&lt;input type=\"password\" /&gt;</strong>. It supports the same properties as\n * <a href=\"/user-input/input\"><strong>NeonInput</strong></a> with the exception of the icon which is used to toggle the\n * display of the password.\n * </p>\n */\nexport default defineComponent({\n  name: 'NeonPassword',\n  components: {\n    NeonInput,\n  },\n  emits: [\n    /**\n     * Emitted when the show/hide password icon is clicked\n     *\n     * @type {void}\n     */\n    'icon-click',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const show = ref(false);\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { iconClick, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const iconClicked = () => {\n      show.value = !show.value;\n      emit('icon-click');\n    };\n\n    return {\n      show,\n      sanitizedAttributes,\n      iconClicked,\n    };\n  },\n});\n"],"names":[],"mappings":";;AAUA,IAAA,YAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IAML;AAAA,EACF;AAAA,EACA,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,QAAQ;AAER,UAAA,OAAO,IAAI,KAAK;AAEhB,UAAA,sBAAsB,SAAS,MAAM;AAEnC,YAAA,EAAE,cAAc,UAAA,IAAc;AAC7B,aAAA;AAAA,IAAA,CACR;AAED,UAAM,cAAc,MAAM;AACnB,WAAA,QAAQ,CAAC,KAAK;AACnB,WAAK,YAAY;AAAA,IAAA;AAGZ,WAAA;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;;"}
+{"version":3,"file":"NeonPassword.ts_vue_type_script_src_d3935eba_lang.es.js","sources":["../../../../src/components/user-input/password/NeonPassword.ts?vue&type=script&src=d3935eba&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport NeonInput from '../input/NeonInput.vue';\n\n/**\n * <p>The <strong>NeonPassword</strong> component is the equivalent of an\n * <strong>&lt;input type=\"password\" /&gt;</strong>. It supports the same properties as\n * <a href=\"/user-input/input\"><strong>NeonInput</strong></a> with the exception of the icon which is used to toggle the\n * display of the password.\n * </p>\n */\nexport default defineComponent({\n  name: 'NeonPassword',\n  components: {\n    NeonInput,\n  },\n  emits: [\n    /**\n     * Emitted when the show/hide password icon is clicked\n     *\n     * @type {void}\n     */\n    'icon-click',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const show = ref(false);\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { iconClick, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const iconClicked = () => {\n      show.value = !show.value;\n      emit('icon-click');\n    };\n\n    return {\n      show,\n      sanitizedAttributes,\n      iconClicked,\n    };\n  },\n});\n"],"names":[],"mappings":";;AAUA,IAAA,YAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IAML;AAAA,EACF;AAAA,EACA,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,QAAQ;AAER,UAAA,OAAO,IAAI,KAAK;AAEhB,UAAA,sBAAsB,SAAS,MAAM;AAEnC,YAAA,EAAE,cAAc,UAAA,IAAc;AAC7B,aAAA;AAAA,IAAA,CACR;AAED,UAAM,cAAc,MAAM;AACnB,WAAA,QAAQ,CAAC,KAAK;AACnB,WAAK,YAAY;AAAA,IAAA;AAGZ,WAAA;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;;"}

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

@@ -1,2 +1,2 @@
-"use strict";var o=require("./NeonRangeSlider.ts_vue_type_script_src_25f4b511_lang.cjs.js"),l=require("vue"),n=require("../../../_virtual/plugin-vue_export-helper.cjs.js");const r={key:0,class:"neon-slider__output"},d={class:"neon-range-slider__output-range"},s=l.createElementVNode("span",{class:"neon-range-slider__output-range-separator"}," : ",-1);function i(e,p,u,m,g,V){const a=l.resolveComponent("neon-slider");return l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass([{"neon-range-slider--disabled":e.disabled,"neon-range-slider--all-upper-bound":e.modelValue[0]===e.modelValue[1]&&e.modelValue[0]===e.max},"neon-range-slider"])},[e.output?(l.openBlock(),l.createElementBlock("output",r,[l.createElementVNode("span",d,[l.createElementVNode("span",null,l.toDisplayString(e.formattedValues[0]),1),s,l.createElementVNode("span",null,l.toDisplayString(e.formattedValues[1]),1)])])):l.createCommentVNode("",!0),l.createVNode(a,{id:e.ids&&e.ids[0],"aria-label":e.lowerBoundLabel,color:e.color,decimals:e.decimals,disableFormatting:e.disableFormatting,disabled:e.disabled,legend:e.legend,max:e.max,min:e.min,modelValue:e.modelValue[0],output:!1,percentage:e.percentage,step:e.step,tooltip:e.tooltip,upperBound:e.modelValue[1],"value-template":e.valueTemplate,class:"neon-range-slider__lower","onUpdate:modelValue":e.changeLowerBound},null,8,["id","aria-label","color","decimals","disableFormatting","disabled","legend","max","min","modelValue","percentage","step","tooltip","upperBound","value-template","onUpdate:modelValue"]),l.createVNode(a,{id:e.ids&&e.ids[1],"aria-label":e.upperBoundLabel,color:e.color,decimals:e.decimals,disableFormatting:e.disableFormatting,disabled:e.disabled,legend:!1,lowerBound:e.modelValue[0],max:e.max,min:e.min,modelValue:e.modelValue[1],output:!1,percentage:e.percentage,step:e.step,tooltip:e.tooltip,"value-template":e.valueTemplate,class:"neon-range-slider__upper","onUpdate:modelValue":e.changeUpperBound},null,8,["id","aria-label","color","decimals","disableFormatting","disabled","lowerBound","max","min","modelValue","percentage","step","tooltip","value-template","onUpdate:modelValue"])],2)}var t=n(o,[["render",i],["__file","/Users/andrew/dev/projects/neon/src/components/user-input/range-slider/NeonRangeSlider.vue"]]);module.exports=t;
+"use strict";var o=require("./NeonRangeSlider.ts_vue_type_script_src_28488e20_lang.cjs.js"),l=require("vue"),n=require("../../../_virtual/plugin-vue_export-helper.cjs.js");const r={key:0,class:"neon-slider__output"},d={class:"neon-range-slider__output-range"},s=l.createElementVNode("span",{class:"neon-range-slider__output-range-separator"}," : ",-1);function i(e,p,u,m,g,V){const a=l.resolveComponent("neon-slider");return l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass([{"neon-range-slider--disabled":e.disabled,"neon-range-slider--all-upper-bound":e.modelValue[0]===e.modelValue[1]&&e.modelValue[0]===e.max},"neon-range-slider"])},[e.output?(l.openBlock(),l.createElementBlock("output",r,[l.createElementVNode("span",d,[l.createElementVNode("span",null,l.toDisplayString(e.formattedValues[0]),1),s,l.createElementVNode("span",null,l.toDisplayString(e.formattedValues[1]),1)])])):l.createCommentVNode("",!0),l.createVNode(a,{id:e.ids&&e.ids[0],"aria-label":e.lowerBoundLabel,color:e.color,decimals:e.decimals,disableFormatting:e.disableFormatting,disabled:e.disabled,legend:e.legend,max:e.max,min:e.min,modelValue:e.modelValue[0],output:!1,percentage:e.percentage,step:e.step,tooltip:e.tooltip,upperBound:e.modelValue[1],"value-template":e.valueTemplate,class:"neon-range-slider__lower","onUpdate:modelValue":e.changeLowerBound},null,8,["id","aria-label","color","decimals","disableFormatting","disabled","legend","max","min","modelValue","percentage","step","tooltip","upperBound","value-template","onUpdate:modelValue"]),l.createVNode(a,{id:e.ids&&e.ids[1],"aria-label":e.upperBoundLabel,color:e.color,decimals:e.decimals,disableFormatting:e.disableFormatting,disabled:e.disabled,legend:!1,lowerBound:e.modelValue[0],max:e.max,min:e.min,modelValue:e.modelValue[1],output:!1,percentage:e.percentage,step:e.step,tooltip:e.tooltip,"value-template":e.valueTemplate,class:"neon-range-slider__upper","onUpdate:modelValue":e.changeUpperBound},null,8,["id","aria-label","color","decimals","disableFormatting","disabled","lowerBound","max","min","modelValue","percentage","step","tooltip","value-template","onUpdate:modelValue"])],2)}var t=n(o,[["render",i]]);module.exports=t;
 //# sourceMappingURL=NeonRangeSlider.cjs.js.map

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

@@ -1,4 +1,4 @@
-import _sfc_main from "./NeonRangeSlider.ts_vue_type_script_src_25f4b511_lang.es.js";
+import _sfc_main from "./NeonRangeSlider.ts_vue_type_script_src_28488e20_lang.es.js";
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, createVNode } from "vue";
 import _export_sfc from "../../../_virtual/plugin-vue_export-helper.es.js";
 const _hoisted_1 = {
@@ -64,6 +64,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["id", "aria-label", "color", "decimals", "disableFormatting", "disabled", "lowerBound", "max", "min", "modelValue", "percentage", "step", "tooltip", "value-template", "onUpdate:modelValue"])
   ], 2);
 }
-var NeonRangeSlider = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/andrew/dev/projects/neon/src/components/user-input/range-slider/NeonRangeSlider.vue"]]);
+var NeonRangeSlider = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export { NeonRangeSlider as default };
 //# sourceMappingURL=NeonRangeSlider.es.js.map

package/dist/components/user-input/range-slider/{NeonRangeSlider.ts_vue_type_script_src_25f4b511_lang.cjs.js → NeonRangeSlider.ts_vue_type_script_src_28488e20_lang.cjs.js}

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

package/dist/components/user-input/range-slider/{NeonRangeSlider.ts_vue_type_script_src_25f4b511_lang.cjs.js.map → NeonRangeSlider.ts_vue_type_script_src_28488e20_lang.cjs.js.map}

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

package/dist/components/user-input/range-slider/{NeonRangeSlider.ts_vue_type_script_src_25f4b511_lang.es.js → NeonRangeSlider.ts_vue_type_script_src_28488e20_lang.es.js}

@@ -63,4 +63,4 @@ var _sfc_main = defineComponent({
   }
 });
 export { _sfc_main as default };
-//# sourceMappingURL=NeonRangeSlider.ts_vue_type_script_src_25f4b511_lang.es.js.map
+//# sourceMappingURL=NeonRangeSlider.ts_vue_type_script_src_28488e20_lang.es.js.map

package/dist/components/user-input/range-slider/{NeonRangeSlider.ts_vue_type_script_src_25f4b511_lang.es.js.map → NeonRangeSlider.ts_vue_type_script_src_28488e20_lang.es.js.map}

@@ -1 +1 @@
-{"version":3,"file":"NeonRangeSlider.ts_vue_type_script_src_25f4b511_lang.es.js","sources":["../../../../src/components/user-input/range-slider/NeonRangeSlider.ts?vue&type=script&src=25f4b511&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport { NeonNumberUtils } from '@/common/utils/NeonNumberUtils';\nimport NeonSlider from '@/components/user-input/slider/NeonSlider.vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\n\n/**\n *\n */\nexport default defineComponent({\n  name: 'NeonRangeSlider',\n  components: {\n    NeonSlider,\n  },\n  props: {\n    /**\n     * This is the <em>v-model</em> property which is an array containing the lower and upper bounds of the selected range.\n     */\n    modelValue: { type: Array as () => Array<number>, required: true },\n    /**\n     * The list of ids for the lower bound and upper bound inputs, e.g. ['lowerBoundId', 'upperBoundId']\n     */\n    ids: { type: Array as () => Array<string>, required: false },\n\n    /**\n     * Slider color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * Disable output display if set to false\n     */\n    output: { type: Boolean, default: true },\n    /**\n     * Disable legend if set to false\n     */\n    legend: { type: Boolean, default: true },\n    /**\n     * Disable tooltip if set to false\n     */\n    tooltip: { type: Boolean, default: true },\n    /**\n     * The size of steps between values the user can select. Defaults to 1 unless percentage = true in which case it will\n     * default to 0.01.\n     */\n    step: { type: Number, required: false },\n    /**\n     * The rounding precision for display purposes\n     */\n    decimals: { type: Number, required: false },\n    /**\n     * A format template string used for display purposes. Use the placeholder {value} to reference the value in the\n     * format string. e.g. value = 90, ${value} => $90\n     */\n    valueTemplate: { type: String, required: false },\n    /**\n     * Disable formatting, e.g. in the case of a year value -> display as 2020, not 2,020.\n     */\n    disableFormatting: { type: Boolean, default: false },\n    /**\n     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%\n     */\n    percentage: { type: Boolean, default: false },\n    /**\n     * The locale used for display purposes. This defaults to the browser's locale if none is provided.\n     */\n    locale: { type: String, default: null },\n    /**\n     * The minimum range value\n     */\n    min: { type: Number, default: 0 },\n    /**\n     * The maximum range value. The default value is 100 except when percentage = true the default is 1 (100%).\n     */\n    max: { type: Number, required: false },\n    /**\n     * Component disabled state.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * ARIA label for the lower bound slider.\n     */\n    lowerBoundLabel: { type: String, default: 'Lower bound' },\n    /**\n     * ARIA label for the upper bound slider.\n     */\n    upperBoundLabel: { type: String, default: 'Upper bound' },\n  },\n  emits: [\n    /**\n     * Event triggered when the lower or upper bounds of the value change.\n     *\n     * @type {number[]} An array containing the raw numeric upper and lower bounds of the selection.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const formattedValues = computed((): string[] => {\n      const options = {\n        decimals: props.decimals,\n        format: props.valueTemplate,\n        percentage: props.percentage,\n      };\n\n      return !props.disableFormatting\n        ? [\n            NeonNumberUtils.formatNumber(props.modelValue[0], options, props.locale),\n            NeonNumberUtils.formatNumber(props.modelValue[1], options, props.locale),\n          ]\n        : [`${props.modelValue[0]}`, `${props.modelValue[1]}`];\n    });\n\n    const emitValues = (values: number[]) => {\n      emit('update:modelValue', values);\n    };\n\n    const changeLowerBound = (value: number) => {\n      const values = props.modelValue.map((v) => v);\n      values[0] = +value;\n      emitValues(values);\n    };\n\n    const changeUpperBound = (value: number) => {\n      const values = props.modelValue.map((v) => v);\n      values[1] = +value;\n      emitValues(values);\n    };\n\n    return {\n      formattedValues,\n      changeLowerBound,\n      changeUpperBound,\n      emitValues,\n    };\n  },\n});\n"],"names":[],"mappings":";;;;AAQA,IAAA,YAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IAIL,YAAY,EAAE,MAAM,OAA8B,UAAU,KAAK;AAAA,IAIjE,KAAK,EAAE,MAAM,OAA8B,UAAU,MAAM;AAAA,IAK3D,OAAO,EAAE,MAAM,QAAqC,SAAS,oBAAoB,YAAY;AAAA,IAI7F,QAAQ,EAAE,MAAM,SAAS,SAAS,KAAK;AAAA,IAIvC,QAAQ,EAAE,MAAM,SAAS,SAAS,KAAK;AAAA,IAIvC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK;AAAA,IAKxC,MAAM,EAAE,MAAM,QAAQ,UAAU,MAAM;AAAA,IAItC,UAAU,EAAE,MAAM,QAAQ,UAAU,MAAM;AAAA,IAK1C,eAAe,EAAE,MAAM,QAAQ,UAAU,MAAM;AAAA,IAI/C,mBAAmB,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,IAInD,YAAY,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,IAI5C,QAAQ,EAAE,MAAM,QAAQ,SAAS,KAAK;AAAA,IAItC,KAAK,EAAE,MAAM,QAAQ,SAAS,EAAE;AAAA,IAIhC,KAAK,EAAE,MAAM,QAAQ,UAAU,MAAM;AAAA,IAIrC,UAAU,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,IAI1C,iBAAiB,EAAE,MAAM,QAAQ,SAAS,cAAc;AAAA,IAIxD,iBAAiB,EAAE,MAAM,QAAQ,SAAS,cAAc;AAAA,EAC1D;AAAA,EACA,OAAO;AAAA,IAML;AAAA,EACF;AAAA,EACA,MAAM,OAAO,EAAE,QAAQ;AACf,UAAA,kBAAkB,SAAS,MAAgB;AAC/C,YAAM,UAAU;AAAA,QACd,UAAU,MAAM;AAAA,QAChB,QAAQ,MAAM;AAAA,QACd,YAAY,MAAM;AAAA,MAAA;AAGb,aAAA,CAAC,MAAM,oBACV;AAAA,QACE,gBAAgB,aAAa,MAAM,WAAW,IAAI,SAAS,MAAM,MAAM;AAAA,QACvE,gBAAgB,aAAa,MAAM,WAAW,IAAI,SAAS,MAAM,MAAM;AAAA,MACzE,IACA,CAAC,GAAG,MAAM,WAAW,MAAM,GAAG,MAAM,WAAW,IAAI;AAAA,IAAA,CACxD;AAEK,UAAA,aAAa,CAAC,WAAqB;AACvC,WAAK,qBAAqB,MAAM;AAAA,IAAA;AAG5B,UAAA,mBAAmB,CAAC,UAAkB;AAC1C,YAAM,SAAS,MAAM,WAAW,IAAI,CAAC,MAAM,CAAC;AAC5C,aAAO,KAAK,CAAC;AACb,iBAAW,MAAM;AAAA,IAAA;AAGb,UAAA,mBAAmB,CAAC,UAAkB;AAC1C,YAAM,SAAS,MAAM,WAAW,IAAI,CAAC,MAAM,CAAC;AAC5C,aAAO,KAAK,CAAC;AACb,iBAAW,MAAM;AAAA,IAAA;AAGZ,WAAA;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;;"}
+{"version":3,"file":"NeonRangeSlider.ts_vue_type_script_src_28488e20_lang.es.js","sources":["../../../../src/components/user-input/range-slider/NeonRangeSlider.ts?vue&type=script&src=28488e20&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport { NeonNumberUtils } from '@/common/utils/NeonNumberUtils';\nimport NeonSlider from '@/components/user-input/slider/NeonSlider.vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\n\n/**\n *\n */\nexport default defineComponent({\n  name: 'NeonRangeSlider',\n  components: {\n    NeonSlider,\n  },\n  props: {\n    /**\n     * This is the <em>v-model</em> property which is an array containing the lower and upper bounds of the selected range.\n     */\n    modelValue: { type: Array as () => Array<number>, required: true },\n    /**\n     * The list of ids for the lower bound and upper bound inputs, e.g. ['lowerBoundId', 'upperBoundId']\n     */\n    ids: { type: Array as () => Array<string>, required: false },\n\n    /**\n     * Slider color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * Disable output display if set to false\n     */\n    output: { type: Boolean, default: true },\n    /**\n     * Disable legend if set to false\n     */\n    legend: { type: Boolean, default: true },\n    /**\n     * Disable tooltip if set to false\n     */\n    tooltip: { type: Boolean, default: true },\n    /**\n     * The size of steps between values the user can select. Defaults to 1 unless percentage = true in which case it will\n     * default to 0.01.\n     */\n    step: { type: Number, required: false },\n    /**\n     * The rounding precision for display purposes\n     */\n    decimals: { type: Number, required: false },\n    /**\n     * A format template string used for display purposes. Use the placeholder {value} to reference the value in the\n     * format string. e.g. value = 90, ${value} => $90\n     */\n    valueTemplate: { type: String, required: false },\n    /**\n     * Disable formatting, e.g. in the case of a year value -> display as 2020, not 2,020.\n     */\n    disableFormatting: { type: Boolean, default: false },\n    /**\n     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%\n     */\n    percentage: { type: Boolean, default: false },\n    /**\n     * The locale used for display purposes. This defaults to the browser's locale if none is provided.\n     */\n    locale: { type: String, default: null },\n    /**\n     * The minimum range value\n     */\n    min: { type: Number, default: 0 },\n    /**\n     * The maximum range value. The default value is 100 except when percentage = true the default is 1 (100%).\n     */\n    max: { type: Number, required: false },\n    /**\n     * Component disabled state.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * ARIA label for the lower bound slider.\n     */\n    lowerBoundLabel: { type: String, default: 'Lower bound' },\n    /**\n     * ARIA label for the upper bound slider.\n     */\n    upperBoundLabel: { type: String, default: 'Upper bound' },\n  },\n  emits: [\n    /**\n     * Event triggered when the lower or upper bounds of the value change.\n     *\n     * @type {number[]} An array containing the raw numeric upper and lower bounds of the selection.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const formattedValues = computed((): string[] => {\n      const options = {\n        decimals: props.decimals,\n        format: props.valueTemplate,\n        percentage: props.percentage,\n      };\n\n      return !props.disableFormatting\n        ? [\n            NeonNumberUtils.formatNumber(props.modelValue[0], options, props.locale),\n            NeonNumberUtils.formatNumber(props.modelValue[1], options, props.locale),\n          ]\n        : [`${props.modelValue[0]}`, `${props.modelValue[1]}`];\n    });\n\n    const emitValues = (values: number[]) => {\n      emit('update:modelValue', values);\n    };\n\n    const changeLowerBound = (value: number) => {\n      const values = props.modelValue.map((v) => v);\n      values[0] = +value;\n      emitValues(values);\n    };\n\n    const changeUpperBound = (value: number) => {\n      const values = props.modelValue.map((v) => v);\n      values[1] = +value;\n      emitValues(values);\n    };\n\n    return {\n      formattedValues,\n      changeLowerBound,\n      changeUpperBound,\n      emitValues,\n    };\n  },\n});\n"],"names":[],"mappings":";;;;AAQA,IAAA,YAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IAIL,YAAY,EAAE,MAAM,OAA8B,UAAU,KAAK;AAAA,IAIjE,KAAK,EAAE,MAAM,OAA8B,UAAU,MAAM;AAAA,IAK3D,OAAO,EAAE,MAAM,QAAqC,SAAS,oBAAoB,YAAY;AAAA,IAI7F,QAAQ,EAAE,MAAM,SAAS,SAAS,KAAK;AAAA,IAIvC,QAAQ,EAAE,MAAM,SAAS,SAAS,KAAK;AAAA,IAIvC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK;AAAA,IAKxC,MAAM,EAAE,MAAM,QAAQ,UAAU,MAAM;AAAA,IAItC,UAAU,EAAE,MAAM,QAAQ,UAAU,MAAM;AAAA,IAK1C,eAAe,EAAE,MAAM,QAAQ,UAAU,MAAM;AAAA,IAI/C,mBAAmB,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,IAInD,YAAY,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,IAI5C,QAAQ,EAAE,MAAM,QAAQ,SAAS,KAAK;AAAA,IAItC,KAAK,EAAE,MAAM,QAAQ,SAAS,EAAE;AAAA,IAIhC,KAAK,EAAE,MAAM,QAAQ,UAAU,MAAM;AAAA,IAIrC,UAAU,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,IAI1C,iBAAiB,EAAE,MAAM,QAAQ,SAAS,cAAc;AAAA,IAIxD,iBAAiB,EAAE,MAAM,QAAQ,SAAS,cAAc;AAAA,EAC1D;AAAA,EACA,OAAO;AAAA,IAML;AAAA,EACF;AAAA,EACA,MAAM,OAAO,EAAE,QAAQ;AACf,UAAA,kBAAkB,SAAS,MAAgB;AAC/C,YAAM,UAAU;AAAA,QACd,UAAU,MAAM;AAAA,QAChB,QAAQ,MAAM;AAAA,QACd,YAAY,MAAM;AAAA,MAAA;AAGb,aAAA,CAAC,MAAM,oBACV;AAAA,QACE,gBAAgB,aAAa,MAAM,WAAW,IAAI,SAAS,MAAM,MAAM;AAAA,QACvE,gBAAgB,aAAa,MAAM,WAAW,IAAI,SAAS,MAAM,MAAM;AAAA,MACzE,IACA,CAAC,GAAG,MAAM,WAAW,MAAM,GAAG,MAAM,WAAW,IAAI;AAAA,IAAA,CACxD;AAEK,UAAA,aAAa,CAAC,WAAqB;AACvC,WAAK,qBAAqB,MAAM;AAAA,IAAA;AAG5B,UAAA,mBAAmB,CAAC,UAAkB;AAC1C,YAAM,SAAS,MAAM,WAAW,IAAI,CAAC,MAAM,CAAC;AAC5C,aAAO,KAAK,CAAC;AACb,iBAAW,MAAM;AAAA,IAAA;AAGb,UAAA,mBAAmB,CAAC,UAAkB;AAC1C,YAAM,SAAS,MAAM,WAAW,IAAI,CAAC,MAAM,CAAC;AAC5C,aAAO,KAAK,CAAC;AACb,iBAAW,MAAM;AAAA,IAAA;AAGZ,WAAA;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;;"}

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

@@ -1,2 +1,2 @@
-"use strict";var d=require("./NeonSearch.ts_vue_type_script_src_a2c54fe4_lang.cjs.js"),o=require("vue"),c=require("../../../_virtual/plugin-vue_export-helper.cjs.js");const p={class:"neon-search__wrapper"},u={class:"no-style neon-search__options"},m=["id","onClick","onMouseover"],h={class:"neon-search__option-container"},v={class:"neon-search__option-label"};function _(e,l,b,V,g,C){const a=o.resolveComponent("neon-icon"),s=o.resolveComponent("neon-chip"),i=o.resolveComponent("neon-input"),t=o.resolveComponent("neon-dropdown");return o.openBlock(),o.createElementBlock("div",p,[o.createVNode(t,o.mergeProps({ref:"dropdown",modelValue:e.open,"onUpdate:modelValue":l[2]||(l[2]=n=>e.open=n),"aria-activedescendant":e.multiple?e.modelValue[0]&&e.modelValue[0].key:e.modelValue,"aria-multiselectable":e.multiple,class:[[`neon-search--${e.color}`,{"neon-search--multiple":e.multiple,"neon-search--disabled":e.disabled,"neon-search--empty":e.computedOptions.length===0}],"neon-search"],color:e.color,disabled:e.disabled,size:e.size,role:"listbox"},e.sanitizedAttributes,{onDropdownPlacement:e.onPlacement}),{"dropdown-button":o.withCtx(()=>[o.createElementVNode("div",{ref:"dropdownButton",class:o.normalizeClass([[`neon-search__container--${e.size}`,`neon-search__container--${e.color}`,{"neon-search__container--disabled":e.disabled}],"neon-search__container"])},[o.createVNode(a,{class:"neon-search__search-icon",color:"low-contrast",name:"search"}),e.multiple?(o.openBlock(!0),o.createElementBlock(o.Fragment,{key:0},o.renderList(e.modelValue,(n,r)=>(o.openBlock(),o.createBlock(s,{id:n.key,key:n.key,class:o.normalizeClass({"neon-chip--last-chip":r===e.modelValue.length-1}),color:n.chipColor,disabled:e.disabled,label:n.label,size:e.size,action:"remove","aria-selected":"true",role:"option",onClose:y=>e.removeSelected(n)},null,8,["id","class","color","disabled","label","size","onClose"]))),128)):o.createCommentVNode("",!0),o.createVNode(i,o.mergeProps({disabled:e.disabled,modelValue:e.filter,placeholder:e.placeholder,size:e.size,class:"neon-search__input"},e.sanitizedAttributes,{onFocus:l[0]||(l[0]=n=>e.showOptions()),"onUpdate:modelValue":e.onFilterChange,onIconClick:l[1]||(l[1]=n=>e.onFilterChange(""))}),null,16,["disabled","modelValue","placeholder","size","onUpdate:modelValue"])],2)]),default:o.withCtx(()=>[o.createElementVNode("ul",u,[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(e.computedOptions,n=>(o.openBlock(),o.createElementBlock("li",{id:n.key,key:n.key,class:o.normalizeClass([[{"neon-search__option--separator-before":n.separatorBefore,"neon-search__option--highlighted":n.key===e.highlightedKey},`neon-search__option--${e.size}`],"neon-search__option"]),"aria-selected":"false",role:"option",onClick:r=>e.clickOption(n),onMouseover:r=>e.changeHighlighted(n.key)},[o.createElementVNode("div",h,[o.renderSlot(e.$slots,"option",{option:n},()=>[n.icon?(o.openBlock(),o.createBlock(a,{key:0,name:n.icon,class:"neon-search__option-icon"},null,8,["name"])):o.createCommentVNode("",!0),o.createElementVNode("span",v,o.toDisplayString(n.label),1)])])],42,m))),128))])]),_:3},16,["modelValue","aria-activedescendant","aria-multiselectable","class","color","disabled","size","onDropdownPlacement"])])}var k=c(d,[["render",_],["__file","/Users/andrew/dev/projects/neon/src/components/user-input/search/NeonSearch.vue"]]);module.exports=k;
+"use strict";var d=require("./NeonSearch.ts_vue_type_script_src_0138849c_lang.cjs.js"),o=require("vue"),c=require("../../../_virtual/plugin-vue_export-helper.cjs.js");const p={class:"neon-search__wrapper"},u={class:"no-style neon-search__options"},m=["id","onClick","onMouseover"],h={class:"neon-search__option-container"},v={class:"neon-search__option-label"};function _(e,l,b,V,g,C){const a=o.resolveComponent("neon-icon"),s=o.resolveComponent("neon-chip"),i=o.resolveComponent("neon-input"),t=o.resolveComponent("neon-dropdown");return o.openBlock(),o.createElementBlock("div",p,[o.createVNode(t,o.mergeProps({ref:"dropdown",modelValue:e.open,"onUpdate:modelValue":l[2]||(l[2]=n=>e.open=n),"aria-activedescendant":e.multiple?e.modelValue[0]&&e.modelValue[0].key:e.modelValue,"aria-multiselectable":e.multiple,class:[[`neon-search--${e.color}`,{"neon-search--multiple":e.multiple,"neon-search--disabled":e.disabled,"neon-search--empty":e.computedOptions.length===0}],"neon-search"],color:e.color,disabled:e.disabled,size:e.size,role:"listbox"},e.sanitizedAttributes,{onDropdownPlacement:e.onPlacement}),{"dropdown-button":o.withCtx(()=>[o.createElementVNode("div",{ref:"dropdownButton",class:o.normalizeClass([[`neon-search__container--${e.size}`,`neon-search__container--${e.color}`,{"neon-search__container--disabled":e.disabled}],"neon-search__container"])},[o.createVNode(a,{class:"neon-search__search-icon",color:"low-contrast",name:"search"}),e.multiple?(o.openBlock(!0),o.createElementBlock(o.Fragment,{key:0},o.renderList(e.modelValue,(n,r)=>(o.openBlock(),o.createBlock(s,{id:n.key,key:n.key,class:o.normalizeClass({"neon-chip--last-chip":r===e.modelValue.length-1}),color:n.chipColor,disabled:e.disabled,label:n.label,size:e.size,action:"remove","aria-selected":"true",role:"option",onClose:y=>e.removeSelected(n)},null,8,["id","class","color","disabled","label","size","onClose"]))),128)):o.createCommentVNode("",!0),o.createVNode(i,o.mergeProps({disabled:e.disabled,modelValue:e.filter,placeholder:e.placeholder,size:e.size,class:"neon-search__input"},e.sanitizedAttributes,{onFocus:l[0]||(l[0]=n=>e.showOptions()),"onUpdate:modelValue":e.onFilterChange,onIconClick:l[1]||(l[1]=n=>e.onFilterChange(""))}),null,16,["disabled","modelValue","placeholder","size","onUpdate:modelValue"])],2)]),default:o.withCtx(()=>[o.createElementVNode("ul",u,[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(e.computedOptions,n=>(o.openBlock(),o.createElementBlock("li",{id:n.key,key:n.key,class:o.normalizeClass([[{"neon-search__option--separator-before":n.separatorBefore,"neon-search__option--highlighted":n.key===e.highlightedKey},`neon-search__option--${e.size}`],"neon-search__option"]),"aria-selected":"false",role:"option",onClick:r=>e.clickOption(n),onMouseover:r=>e.changeHighlighted(n.key)},[o.createElementVNode("div",h,[o.renderSlot(e.$slots,"option",{option:n},()=>[n.icon?(o.openBlock(),o.createBlock(a,{key:0,name:n.icon,class:"neon-search__option-icon"},null,8,["name"])):o.createCommentVNode("",!0),o.createElementVNode("span",v,o.toDisplayString(n.label),1)])])],42,m))),128))])]),_:3},16,["modelValue","aria-activedescendant","aria-multiselectable","class","color","disabled","size","onDropdownPlacement"])])}var k=c(d,[["render",_]]);module.exports=k;
 //# sourceMappingURL=NeonSearch.cjs.js.map

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

@@ -1,4 +1,4 @@
-import _sfc_main from "./NeonSearch.ts_vue_type_script_src_a2c54fe4_lang.es.js";
+import _sfc_main from "./NeonSearch.ts_vue_type_script_src_0138849c_lang.es.js";
 import { resolveComponent, openBlock, createElementBlock, createVNode, mergeProps, withCtx, createElementVNode, normalizeClass, Fragment, renderList, createBlock, createCommentVNode, renderSlot, toDisplayString } from "vue";
 import _export_sfc from "../../../_virtual/plugin-vue_export-helper.es.js";
 const _hoisted_1 = { class: "neon-search__wrapper" };
@@ -109,6 +109,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }, 16, ["modelValue", "aria-activedescendant", "aria-multiselectable", "class", "color", "disabled", "size", "onDropdownPlacement"])
   ]);
 }
-var NeonSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/andrew/dev/projects/neon/src/components/user-input/search/NeonSearch.vue"]]);
+var NeonSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export { NeonSearch as default };
 //# sourceMappingURL=NeonSearch.es.js.map

package/dist/components/user-input/search/{NeonSearch.ts_vue_type_script_src_a2c54fe4_lang.cjs.js → NeonSearch.ts_vue_type_script_src_0138849c_lang.cjs.js}

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

package/dist/components/user-input/search/{NeonSearch.ts_vue_type_script_src_a2c54fe4_lang.cjs.js.map → NeonSearch.ts_vue_type_script_src_0138849c_lang.cjs.js.map}

@@ -1 +1 @@
-{"version":3,"file":"NeonSearch.ts_vue_type_script_src_a2c54fe4_lang.cjs.js","sources":["../../../../src/components/user-input/search/NeonSearch.ts?vue&type=script&src=a2c54fe4&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport type { NeonSearchOption } from '@/common/models/NeonSearchOption';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport NeonChip from '@/components/user-input/chip/NeonChip.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/NeonScrollUtils';\n\n/**\n * <p>\n *   The <strong>NeonSearch</strong> component is equivalent to an HTML &lt;input type=\"search\"&gt; element. It is\n *   useful as an alternative to <em>NeonSelect</em> to provide filtered results when the universe of results is very\n *   large and/or the results need to be requested from a server side API.\n * </p>\n * <p><strong>NeonSearch</strong> provides input chips in the case the search allows multiple selection.</p>\n */\nexport default defineComponent({\n  name: 'NeonSearch',\n  components: {\n    NeonChip,\n    NeonDropdown,\n    NeonIcon,\n    NeonInput,\n  },\n  props: {\n    /**\n     * Either a string indicating the key of the selected option ('' if there is no selection) or an array of selected\n     * NeonSearchOption in the case when multiple = true (necessary to display them as chips).\n     */\n    modelValue: { type: [String, Array as () => Array<NeonSearchOption>], required: true },\n    /**\n     * Placeholder to display in search input when there is no search string entered.\n     */\n    placeholder: { type: String, required: true },\n    /**\n     * The list of search results.\n     */\n    options: { type: Array as () => Array<NeonSearchOption>, required: true },\n    /**\n     * Allow multi-select.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * Disable the search\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 search.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n  },\n  emits: [\n    /**\n     * emitted when the user changes the selection.\n     * @type {string | NeonSearchOption[]} either the selected option's key (single select) or an array of the\n     * selected options (multi-select).\n     */\n    'update:modelValue',\n    /**\n     * emitted when the user types in filter box.\n     * @type {string} the current filter criteria. This can be used by the application to filter the displayed options.\n     */\n    'filter-changed',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const dropdown = ref<HTMLElement | null>(null);\n    const dropdownPlacement = ref<NeonDropdownPlacement | null>(null);\n\n    const open = ref(false);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n    const filter = ref('');\n\n    watch(\n      () => open.value,\n      (open: boolean) => {\n        if (open && props.options.length > 0) {\n          highlightedKey.value = props.options[0].key;\n          highlightedIndex.value = 0;\n        }\n      },\n    );\n\n    const isReverse = () => {\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      return false;\n    };\n\n    const scrollOnNavigate = () => {\n      const element = dropdown.value?.querySelector('.neon-search__option--highlighted') as HTMLElement;\n      NeonScrollUtils.scrollIntoView(element);\n    };\n\n    const navigateBy = (offset: number, $event: KeyboardEvent) => {\n      const newIndex = highlightedIndex.value + offset;\n      if (newIndex >= 0 && newIndex <= props.options.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = props.options[highlightedIndex.value].key;\n        $event.preventDefault();\n        setTimeout(scrollOnNavigate);\n      }\n    };\n\n    const emitInputEvent = (value: string | NeonSearchOption[]) => {\n      emit('update:modelValue', value);\n    };\n\n    const onFilterChange = (_filter: string) => {\n      if (!props.multiple) {\n        emitInputEvent('');\n      }\n\n      filter.value = _filter;\n      emit('filter-changed', _filter);\n    };\n\n    const clickOption = (option: NeonSearchOption) => {\n      if (props.multiple) {\n        const values = (props.modelValue as NeonSearchOption[]).map((v) => v);\n        const index = values.findIndex((v) => v.key === option.key);\n        if (index >= 0) {\n          values.splice(index, 1);\n        } else {\n          values.push(option);\n        }\n        emitInputEvent(values);\n      } else {\n        emitInputEvent(option.key);\n      }\n\n      onFilterChange(props.multiple ? '' : option.label.toString());\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 (!($event.target as HTMLElement).classList.contains('neon-search__input')) {\n              clickOption(props.options[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 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    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onFilterChanged, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const changeHighlighted = (key: string) => {\n      highlightedKey.value = key;\n      highlightedIndex.value = props.options.findIndex((opt) => opt.key === key);\n    };\n\n    const showOptions = () => (open.value = true);\n\n    const removeSelected = (removed: NeonSearchOption) =>\n      emitInputEvent((props.modelValue as NeonSearchOption[]).filter((v) => v.key !== removed.key));\n\n    const computedOptions = computed(() => {\n      return props.multiple ? props.options : props.options.filter((opt) => opt.label !== filter.value);\n    });\n\n    return {\n      dropdown,\n      open,\n      highlightedKey,\n      filter,\n      sanitizedAttributes,\n      computedOptions,\n      onPlacement,\n      onFilterChange,\n      clickOption,\n      changeHighlighted,\n      showOptions,\n      removeSelected,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonChip","NeonDropdown","NeonIcon","NeonInput","NeonSize","NeonFunctionalColor","props","emit","attrs","useAttrs","dropdown","ref","dropdownPlacement","open","highlightedKey","highlightedIndex","filter","watch","isReverse","NeonDropdownPlacement","scrollOnNavigate","element","_a","NeonScrollUtils","navigateBy","offset","$event","newIndex","emitInputEvent","value","onFilterChange","_filter","clickOption","option","values","v","index","keyboardHandler","reverseOffset","onPlacement","placement","onMounted","onUnmounted","sanitizedAttributes","computed","onFilterChanged","sanitized","changeHighlighted","key","opt","showOptions","removeSelected","removed","computedOptions"],"mappings":"2cAmBAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,WAAY,CACV,SAAAC,EACA,aAAAC,EACA,SAAAC,EACA,UAAAC,CACF,EACA,MAAO,CAKL,WAAY,CAAE,KAAM,CAAC,OAAQ,KAAsC,EAAG,SAAU,EAAK,EAIrF,YAAa,CAAE,KAAM,OAAQ,SAAU,EAAK,EAI5C,QAAS,CAAE,KAAM,MAAwC,SAAU,EAAK,EAIxE,SAAU,CAAE,KAAM,QAAS,QAAS,EAAM,EAI1C,SAAU,CAAE,KAAM,QAAS,QAAS,EAAM,EAI1C,KAAM,CAAE,KAAM,OAA0B,QAASC,EAAAA,SAAS,MAAO,EAIjE,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,WAAY,CAC/F,EACA,MAAO,CAML,oBAKA,gBACF,EACA,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAQC,EAAAA,WAERC,EAAWC,MAAwB,IAAI,EACvCC,EAAoBD,MAAkC,IAAI,EAE1DE,EAAOF,MAAI,EAAK,EAChBG,EAAiBH,MAAmB,IAAI,EACxCI,EAAmBJ,EAAAA,IAAI,EAAE,EACzBK,EAASL,MAAI,EAAE,EAErBM,EAAA,MACE,IAAMJ,EAAK,MACVA,GAAkB,CACbA,GAAQP,EAAM,QAAQ,OAAS,IAClBQ,EAAA,MAAQR,EAAM,QAAQ,GAAG,IACxCS,EAAiB,MAAQ,EAE7B,CAAA,EAGF,MAAMG,EAAY,IAAM,CACtB,OAAQN,EAAkB,YACnBO,EAAAA,sBAAsB,aACtBA,EAAAA,sBAAsB,cACtBA,EAAAA,sBAAsB,gBACtBA,EAAsB,sBAAA,YAClB,MAAA,GAGJ,MAAA,EAAA,EAGHC,EAAmB,IAAM,OAC7B,MAAMC,GAAUC,EAAAZ,EAAS,QAAT,YAAAY,EAAgB,cAAc,qCAC9CC,kBAAgB,eAAeF,CAAO,CAAA,EAGlCG,EAAa,CAACC,EAAgBC,IAA0B,CACtD,MAAAC,EAAWZ,EAAiB,MAAQU,EACtCE,GAAY,GAAKA,GAAYrB,EAAM,QAAQ,OAAS,IACtDS,EAAiB,MAAQY,EACzBb,EAAe,MAAQR,EAAM,QAAQS,EAAiB,OAAO,IAC7DW,EAAO,eAAe,EACtB,WAAWN,CAAgB,EAC7B,EAGIQ,EAAkBC,GAAuC,CAC7DtB,EAAK,oBAAqBsB,CAAK,CAAA,EAG3BC,EAAkBC,GAAoB,CACrCzB,EAAM,UACTsB,EAAe,EAAE,EAGnBZ,EAAO,MAAQe,EACfxB,EAAK,iBAAkBwB,CAAO,CAAA,EAG1BC,EAAeC,GAA6B,CAChD,GAAI3B,EAAM,SAAU,CAClB,MAAM4B,EAAU5B,EAAM,WAAkC,IAAK6B,GAAMA,CAAC,EAC9DC,EAAQF,EAAO,UAAWC,GAAMA,EAAE,MAAQF,EAAO,GAAG,EACtDG,GAAS,EACJF,EAAA,OAAOE,EAAO,CAAC,EAEtBF,EAAO,KAAKD,CAAM,EAEpBL,EAAeM,CAAM,CAAA,MAErBN,EAAeK,EAAO,GAAG,EAG3BH,EAAexB,EAAM,SAAW,GAAK2B,EAAO,MAAM,UAAU,CAAA,EAGxDI,EAAmBX,GAA0B,CACjD,GAAIb,EAAK,MACP,OAAQa,EAAO,UACR,cACA,YACH,CACQ,MAAAY,EAAgBpB,EAAU,EAAI,GAAK,EACrCQ,EAAO,OAAS,UACPF,EAAA,GAAKc,EAAeZ,CAAM,EAE1BF,EAAA,EAAIc,EAAeZ,CAAM,CAExC,CACA,UACG,YACA,QACGA,EAAO,OAAuB,UAAU,SAAS,oBAAoB,IAC7DM,EAAA1B,EAAM,QAAQS,EAAiB,MAAM,EACjDW,EAAO,eAAe,GAExB,UACG,MACC,CAACA,EAAO,SAAW,CAACA,EAAO,SAAW,CAACA,EAAO,SAChDb,EAAK,MAAQ,IAEf,MAEN,EAGI0B,EAAeC,GAAqC,CACxD5B,EAAkB,MAAQ4B,CAAA,EAG5BC,EAAAA,UAAU,IAAM,CACL,SAAA,iBAAiB,UAAWJ,CAAe,CAAA,CACrD,EAEDK,EAAAA,YAAY,IAAM,CACP,SAAA,oBAAoB,UAAWL,CAAe,CAAA,CACxD,EAEK,MAAAM,EAAsBC,EAAAA,SAAS,IAAM,CAEnC,KAAA,CAAE,gBAAAC,KAAoBC,CAAA,EAActC,EACnC,OAAAsC,CAAA,CACR,EAEKC,EAAqBC,GAAgB,CACzClC,EAAe,MAAQkC,EACNjC,EAAA,MAAQT,EAAM,QAAQ,UAAW2C,GAAQA,EAAI,MAAQD,CAAG,CAAA,EAGrEE,EAAc,IAAOrC,EAAK,MAAQ,GAElCsC,EAAkBC,GACtBxB,EAAgBtB,EAAM,WAAkC,OAAQ6B,GAAMA,EAAE,MAAQiB,EAAQ,GAAG,CAAC,EAExFC,EAAkBT,EAAAA,SAAS,IACxBtC,EAAM,SAAWA,EAAM,QAAUA,EAAM,QAAQ,OAAQ2C,GAAQA,EAAI,QAAUjC,EAAO,KAAK,CACjG,EAEM,MAAA,CACL,SAAAN,EACA,KAAAG,EACA,eAAAC,EACA,OAAAE,EACA,oBAAA2B,EACA,gBAAAU,EACA,YAAAd,EACA,eAAAT,EACA,YAAAE,EACA,kBAAAe,EACA,YAAAG,EACA,eAAAC,CAAA,CAEJ,CACF,CAAC"}
+{"version":3,"file":"NeonSearch.ts_vue_type_script_src_0138849c_lang.cjs.js","sources":["../../../../src/components/user-input/search/NeonSearch.ts?vue&type=script&src=0138849c&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport type { NeonSearchOption } from '@/common/models/NeonSearchOption';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport NeonChip from '@/components/user-input/chip/NeonChip.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/NeonScrollUtils';\n\n/**\n * <p>\n *   The <strong>NeonSearch</strong> component is equivalent to an HTML &lt;input type=\"search\"&gt; element. It is\n *   useful as an alternative to <em>NeonSelect</em> to provide filtered results when the universe of results is very\n *   large and/or the results need to be requested from a server side API.\n * </p>\n * <p><strong>NeonSearch</strong> provides input chips in the case the search allows multiple selection.</p>\n */\nexport default defineComponent({\n  name: 'NeonSearch',\n  components: {\n    NeonChip,\n    NeonDropdown,\n    NeonIcon,\n    NeonInput,\n  },\n  props: {\n    /**\n     * Either a string indicating the key of the selected option ('' if there is no selection) or an array of selected\n     * NeonSearchOption in the case when multiple = true (necessary to display them as chips).\n     */\n    modelValue: { type: [String, Array as () => Array<NeonSearchOption>], required: true },\n    /**\n     * Placeholder to display in search input when there is no search string entered.\n     */\n    placeholder: { type: String, required: true },\n    /**\n     * The list of search results.\n     */\n    options: { type: Array as () => Array<NeonSearchOption>, required: true },\n    /**\n     * Allow multi-select.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * Disable the search\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 search.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n  },\n  emits: [\n    /**\n     * emitted when the user changes the selection.\n     * @type {string | NeonSearchOption[]} either the selected option's key (single select) or an array of the\n     * selected options (multi-select).\n     */\n    'update:modelValue',\n    /**\n     * emitted when the user types in filter box.\n     * @type {string} the current filter criteria. This can be used by the application to filter the displayed options.\n     */\n    'filter-changed',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const dropdown = ref<HTMLElement | null>(null);\n    const dropdownPlacement = ref<NeonDropdownPlacement | null>(null);\n\n    const open = ref(false);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n    const filter = ref('');\n\n    watch(\n      () => open.value,\n      (open: boolean) => {\n        if (open && props.options.length > 0) {\n          highlightedKey.value = props.options[0].key;\n          highlightedIndex.value = 0;\n        }\n      },\n    );\n\n    const isReverse = () => {\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      return false;\n    };\n\n    const scrollOnNavigate = () => {\n      const element = dropdown.value?.querySelector('.neon-search__option--highlighted') as HTMLElement;\n      NeonScrollUtils.scrollIntoView(element);\n    };\n\n    const navigateBy = (offset: number, $event: KeyboardEvent) => {\n      const newIndex = highlightedIndex.value + offset;\n      if (newIndex >= 0 && newIndex <= props.options.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = props.options[highlightedIndex.value].key;\n        $event.preventDefault();\n        setTimeout(scrollOnNavigate);\n      }\n    };\n\n    const emitInputEvent = (value: string | NeonSearchOption[]) => {\n      emit('update:modelValue', value);\n    };\n\n    const onFilterChange = (_filter: string) => {\n      if (!props.multiple) {\n        emitInputEvent('');\n      }\n\n      filter.value = _filter;\n      emit('filter-changed', _filter);\n    };\n\n    const clickOption = (option: NeonSearchOption) => {\n      if (props.multiple) {\n        const values = (props.modelValue as NeonSearchOption[]).map((v) => v);\n        const index = values.findIndex((v) => v.key === option.key);\n        if (index >= 0) {\n          values.splice(index, 1);\n        } else {\n          values.push(option);\n        }\n        emitInputEvent(values);\n      } else {\n        emitInputEvent(option.key);\n      }\n\n      onFilterChange(props.multiple ? '' : option.label.toString());\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 (!($event.target as HTMLElement).classList.contains('neon-search__input')) {\n              clickOption(props.options[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 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    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onFilterChanged, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const changeHighlighted = (key: string) => {\n      highlightedKey.value = key;\n      highlightedIndex.value = props.options.findIndex((opt) => opt.key === key);\n    };\n\n    const showOptions = () => (open.value = true);\n\n    const removeSelected = (removed: NeonSearchOption) =>\n      emitInputEvent((props.modelValue as NeonSearchOption[]).filter((v) => v.key !== removed.key));\n\n    const computedOptions = computed(() => {\n      return props.multiple ? props.options : props.options.filter((opt) => opt.label !== filter.value);\n    });\n\n    return {\n      dropdown,\n      open,\n      highlightedKey,\n      filter,\n      sanitizedAttributes,\n      computedOptions,\n      onPlacement,\n      onFilterChange,\n      clickOption,\n      changeHighlighted,\n      showOptions,\n      removeSelected,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonChip","NeonDropdown","NeonIcon","NeonInput","NeonSize","NeonFunctionalColor","props","emit","attrs","useAttrs","dropdown","ref","dropdownPlacement","open","highlightedKey","highlightedIndex","filter","watch","isReverse","NeonDropdownPlacement","scrollOnNavigate","element","_a","NeonScrollUtils","navigateBy","offset","$event","newIndex","emitInputEvent","value","onFilterChange","_filter","clickOption","option","values","v","index","keyboardHandler","reverseOffset","onPlacement","placement","onMounted","onUnmounted","sanitizedAttributes","computed","onFilterChanged","sanitized","changeHighlighted","key","opt","showOptions","removeSelected","removed","computedOptions"],"mappings":"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"}

package/dist/components/user-input/search/{NeonSearch.ts_vue_type_script_src_a2c54fe4_lang.es.js → NeonSearch.ts_vue_type_script_src_0138849c_lang.es.js}

@@ -162,4 +162,4 @@ var _sfc_main = defineComponent({
   }
 });
 export { _sfc_main as default };
-//# sourceMappingURL=NeonSearch.ts_vue_type_script_src_a2c54fe4_lang.es.js.map
+//# sourceMappingURL=NeonSearch.ts_vue_type_script_src_0138849c_lang.es.js.map

package/dist/components/user-input/search/{NeonSearch.ts_vue_type_script_src_a2c54fe4_lang.es.js.map → NeonSearch.ts_vue_type_script_src_0138849c_lang.es.js.map}

@@ -1 +1 @@
-{"version":3,"file":"NeonSearch.ts_vue_type_script_src_a2c54fe4_lang.es.js","sources":["../../../../src/components/user-input/search/NeonSearch.ts?vue&type=script&src=a2c54fe4&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport type { NeonSearchOption } from '@/common/models/NeonSearchOption';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport NeonChip from '@/components/user-input/chip/NeonChip.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/NeonScrollUtils';\n\n/**\n * <p>\n *   The <strong>NeonSearch</strong> component is equivalent to an HTML &lt;input type=\"search\"&gt; element. It is\n *   useful as an alternative to <em>NeonSelect</em> to provide filtered results when the universe of results is very\n *   large and/or the results need to be requested from a server side API.\n * </p>\n * <p><strong>NeonSearch</strong> provides input chips in the case the search allows multiple selection.</p>\n */\nexport default defineComponent({\n  name: 'NeonSearch',\n  components: {\n    NeonChip,\n    NeonDropdown,\n    NeonIcon,\n    NeonInput,\n  },\n  props: {\n    /**\n     * Either a string indicating the key of the selected option ('' if there is no selection) or an array of selected\n     * NeonSearchOption in the case when multiple = true (necessary to display them as chips).\n     */\n    modelValue: { type: [String, Array as () => Array<NeonSearchOption>], required: true },\n    /**\n     * Placeholder to display in search input when there is no search string entered.\n     */\n    placeholder: { type: String, required: true },\n    /**\n     * The list of search results.\n     */\n    options: { type: Array as () => Array<NeonSearchOption>, required: true },\n    /**\n     * Allow multi-select.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * Disable the search\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 search.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n  },\n  emits: [\n    /**\n     * emitted when the user changes the selection.\n     * @type {string | NeonSearchOption[]} either the selected option's key (single select) or an array of the\n     * selected options (multi-select).\n     */\n    'update:modelValue',\n    /**\n     * emitted when the user types in filter box.\n     * @type {string} the current filter criteria. This can be used by the application to filter the displayed options.\n     */\n    'filter-changed',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const dropdown = ref<HTMLElement | null>(null);\n    const dropdownPlacement = ref<NeonDropdownPlacement | null>(null);\n\n    const open = ref(false);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n    const filter = ref('');\n\n    watch(\n      () => open.value,\n      (open: boolean) => {\n        if (open && props.options.length > 0) {\n          highlightedKey.value = props.options[0].key;\n          highlightedIndex.value = 0;\n        }\n      },\n    );\n\n    const isReverse = () => {\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      return false;\n    };\n\n    const scrollOnNavigate = () => {\n      const element = dropdown.value?.querySelector('.neon-search__option--highlighted') as HTMLElement;\n      NeonScrollUtils.scrollIntoView(element);\n    };\n\n    const navigateBy = (offset: number, $event: KeyboardEvent) => {\n      const newIndex = highlightedIndex.value + offset;\n      if (newIndex >= 0 && newIndex <= props.options.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = props.options[highlightedIndex.value].key;\n        $event.preventDefault();\n        setTimeout(scrollOnNavigate);\n      }\n    };\n\n    const emitInputEvent = (value: string | NeonSearchOption[]) => {\n      emit('update:modelValue', value);\n    };\n\n    const onFilterChange = (_filter: string) => {\n      if (!props.multiple) {\n        emitInputEvent('');\n      }\n\n      filter.value = _filter;\n      emit('filter-changed', _filter);\n    };\n\n    const clickOption = (option: NeonSearchOption) => {\n      if (props.multiple) {\n        const values = (props.modelValue as NeonSearchOption[]).map((v) => v);\n        const index = values.findIndex((v) => v.key === option.key);\n        if (index >= 0) {\n          values.splice(index, 1);\n        } else {\n          values.push(option);\n        }\n        emitInputEvent(values);\n      } else {\n        emitInputEvent(option.key);\n      }\n\n      onFilterChange(props.multiple ? '' : option.label.toString());\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 (!($event.target as HTMLElement).classList.contains('neon-search__input')) {\n              clickOption(props.options[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 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    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onFilterChanged, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const changeHighlighted = (key: string) => {\n      highlightedKey.value = key;\n      highlightedIndex.value = props.options.findIndex((opt) => opt.key === key);\n    };\n\n    const showOptions = () => (open.value = true);\n\n    const removeSelected = (removed: NeonSearchOption) =>\n      emitInputEvent((props.modelValue as NeonSearchOption[]).filter((v) => v.key !== removed.key));\n\n    const computedOptions = computed(() => {\n      return props.multiple ? props.options : props.options.filter((opt) => opt.label !== filter.value);\n    });\n\n    return {\n      dropdown,\n      open,\n      highlightedKey,\n      filter,\n      sanitizedAttributes,\n      computedOptions,\n      onPlacement,\n      onFilterChange,\n      clickOption,\n      changeHighlighted,\n      showOptions,\n      removeSelected,\n    };\n  },\n});\n"],"names":["open"],"mappings":"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"}
+{"version":3,"file":"NeonSearch.ts_vue_type_script_src_0138849c_lang.es.js","sources":["../../../../src/components/user-input/search/NeonSearch.ts?vue&type=script&src=0138849c&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport type { NeonSearchOption } from '@/common/models/NeonSearchOption';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport NeonChip from '@/components/user-input/chip/NeonChip.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/NeonScrollUtils';\n\n/**\n * <p>\n *   The <strong>NeonSearch</strong> component is equivalent to an HTML &lt;input type=\"search\"&gt; element. It is\n *   useful as an alternative to <em>NeonSelect</em> to provide filtered results when the universe of results is very\n *   large and/or the results need to be requested from a server side API.\n * </p>\n * <p><strong>NeonSearch</strong> provides input chips in the case the search allows multiple selection.</p>\n */\nexport default defineComponent({\n  name: 'NeonSearch',\n  components: {\n    NeonChip,\n    NeonDropdown,\n    NeonIcon,\n    NeonInput,\n  },\n  props: {\n    /**\n     * Either a string indicating the key of the selected option ('' if there is no selection) or an array of selected\n     * NeonSearchOption in the case when multiple = true (necessary to display them as chips).\n     */\n    modelValue: { type: [String, Array as () => Array<NeonSearchOption>], required: true },\n    /**\n     * Placeholder to display in search input when there is no search string entered.\n     */\n    placeholder: { type: String, required: true },\n    /**\n     * The list of search results.\n     */\n    options: { type: Array as () => Array<NeonSearchOption>, required: true },\n    /**\n     * Allow multi-select.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * Disable the search\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 search.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n  },\n  emits: [\n    /**\n     * emitted when the user changes the selection.\n     * @type {string | NeonSearchOption[]} either the selected option's key (single select) or an array of the\n     * selected options (multi-select).\n     */\n    'update:modelValue',\n    /**\n     * emitted when the user types in filter box.\n     * @type {string} the current filter criteria. This can be used by the application to filter the displayed options.\n     */\n    'filter-changed',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const dropdown = ref<HTMLElement | null>(null);\n    const dropdownPlacement = ref<NeonDropdownPlacement | null>(null);\n\n    const open = ref(false);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n    const filter = ref('');\n\n    watch(\n      () => open.value,\n      (open: boolean) => {\n        if (open && props.options.length > 0) {\n          highlightedKey.value = props.options[0].key;\n          highlightedIndex.value = 0;\n        }\n      },\n    );\n\n    const isReverse = () => {\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      return false;\n    };\n\n    const scrollOnNavigate = () => {\n      const element = dropdown.value?.querySelector('.neon-search__option--highlighted') as HTMLElement;\n      NeonScrollUtils.scrollIntoView(element);\n    };\n\n    const navigateBy = (offset: number, $event: KeyboardEvent) => {\n      const newIndex = highlightedIndex.value + offset;\n      if (newIndex >= 0 && newIndex <= props.options.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = props.options[highlightedIndex.value].key;\n        $event.preventDefault();\n        setTimeout(scrollOnNavigate);\n      }\n    };\n\n    const emitInputEvent = (value: string | NeonSearchOption[]) => {\n      emit('update:modelValue', value);\n    };\n\n    const onFilterChange = (_filter: string) => {\n      if (!props.multiple) {\n        emitInputEvent('');\n      }\n\n      filter.value = _filter;\n      emit('filter-changed', _filter);\n    };\n\n    const clickOption = (option: NeonSearchOption) => {\n      if (props.multiple) {\n        const values = (props.modelValue as NeonSearchOption[]).map((v) => v);\n        const index = values.findIndex((v) => v.key === option.key);\n        if (index >= 0) {\n          values.splice(index, 1);\n        } else {\n          values.push(option);\n        }\n        emitInputEvent(values);\n      } else {\n        emitInputEvent(option.key);\n      }\n\n      onFilterChange(props.multiple ? '' : option.label.toString());\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 (!($event.target as HTMLElement).classList.contains('neon-search__input')) {\n              clickOption(props.options[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 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    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onFilterChanged, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const changeHighlighted = (key: string) => {\n      highlightedKey.value = key;\n      highlightedIndex.value = props.options.findIndex((opt) => opt.key === key);\n    };\n\n    const showOptions = () => (open.value = true);\n\n    const removeSelected = (removed: NeonSearchOption) =>\n      emitInputEvent((props.modelValue as NeonSearchOption[]).filter((v) => v.key !== removed.key));\n\n    const computedOptions = computed(() => {\n      return props.multiple ? props.options : props.options.filter((opt) => opt.label !== filter.value);\n    });\n\n    return {\n      dropdown,\n      open,\n      highlightedKey,\n      filter,\n      sanitizedAttributes,\n      computedOptions,\n      onPlacement,\n      onFilterChange,\n      clickOption,\n      changeHighlighted,\n      showOptions,\n      removeSelected,\n    };\n  },\n});\n"],"names":["open"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";var d=require("./NeonSelect.ts_vue_type_script_src_37fb08e4_lang.cjs.js"),e=require("vue"),c=require("../../../_virtual/plugin-vue_export-helper.cjs.js");const p={class:"neon-select__wrapper"},u={class:"no-style neon-select__options"},m={class:"neon-select__option-container"},k={class:"neon-select__option-label"},b=["id","aria-selected","onMouseover","onClick"],y={class:"neon-select__option-container"},v={class:"neon-select__option-label"},_=["disabled","multiple"],g=["selected"],h=["label"],B=["data-index","disabled","multiple","selected","value"],V=["data-index","disabled","multiple","selected","value"];function E(l,t,f,C,S,w){const a=e.resolveComponent("neon-switch"),i=e.resolveComponent("neon-icon"),r=e.resolveComponent("neon-dropdown");return e.openBlock(),e.createElementBlock("div",p,[e.createVNode(r,e.mergeProps({id:l.id,ref:"dropdown",modelValue:l.open,"onUpdate:modelValue":t[0]||(t[0]=n=>l.open=n),"aria-activedescendant":l.multiple?l.modelValue[0]:l.modelValue,"aria-multiselectable":l.multiple,class:[[`neon-select--${l.color}`,{"neon-select--grouped":l.groupedOptions,"neon-select--multiple":l.multiple}],"neon-select"],color:l.color,disabled:l.disabled,icon:l.computedIcon,label:l.computedLabel,size:l.size,role:"listbox"},l.sanitizedAttributes,{onDropdownPlacement:l.onPlacement}),{default:e.withCtx(()=>[e.createElementVNode("ul",u,[l.placeholderAsOption?(e.openBlock(),e.createElementBlock("li",{key:0,class:e.normalizeClass([`neon-select__option--${l.size}`,"neon-select__option neon-select__option--disabled neon-select__option-placeholder"])},[e.createElementVNode("div",m,[e.createElementVNode("span",k,e.toDisplayString(l.placeholder),1)])],2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.computedOptions,n=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[n.group!==""?(e.openBlock(),e.createElementBlock("li",{key:n.group,class:"neon-select__option-title"},e.toDisplayString(n.group),1)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.options,o=>(e.openBlock(),e.createElementBlock("li",{id:o.key,key:o.key,"aria-selected":l.multiple?l.modelValue.indexOf(o.key)>=0:o.key===l.modelValue,class:e.normalizeClass([[{"neon-select__option--disabled":o.disabled,"neon-select__option--separator-before":o.separatorBefore,"neon-select__option--selected":l.multiple?l.modelValue.indexOf(o.key)>=0:o.key===l.modelValue,"neon-select__option--highlighted":o.key===l.highlightedKey},`neon-select__option--${l.size}`],"neon-select__option"]),role:"option",onMouseover:s=>l.changeHighlighted(o.key),onClick:e.withModifiers(s=>!o.disabled&&l.clickOption(o),["stop","prevent"])},[e.createElementVNode("div",y,[e.renderSlot(l.$slots,"option",{option:o},()=>[l.multiple?(e.openBlock(),e.createBlock(a,{key:0,color:l.color,modelValue:l.modelValue.indexOf(o.key)>=0,size:l.size==="l"?"m":"s","switch-style":"checkbox"},null,8,["color","modelValue","size"])):e.createCommentVNode("",!0),o.icon?(e.openBlock(),e.createBlock(i,{key:1,disabled:o.disabled,name:o.icon,class:"neon-select__option-icon"},null,8,["disabled","name"])):e.createCommentVNode("",!0),e.createElementVNode("span",v,e.toDisplayString(o.label),1)])])],42,b))),128))],64))),256))])]),_:3},16,["id","modelValue","aria-activedescendant","aria-multiselectable","class","color","disabled","icon","label","size","onDropdownPlacement"]),e.createElementVNode("select",e.mergeProps({disabled:l.disabled,multiple:l.multiple,class:"neon-select__native"},l.sanitizedAttributes,{onInput:t[1]||(t[1]=(...n)=>l.nativeSelectChange&&l.nativeSelectChange(...n))}),[e.createElementVNode("option",{selected:l.multiple?l.modelValue.length===0:l.modelValue==="",disabled:"",hidden:"",value:""},e.toDisplayString(l.placeholder),9,g),l.groupedOptions?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(l.groupedOptions,n=>(e.openBlock(),e.createElementBlock("optgroup",{key:n.group,label:n.group},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.options,(o,s)=>(e.openBlock(),e.createElementBlock("option",{key:`${o.key}-native`,"data-index":s,disabled:o.disabled,multiple:l.multiple,selected:l.multiple?l.modelValue.indexOf(o.key)>=0:o.key===l.modelValue,value:o.key},e.toDisplayString(o.label),9,B))),128))],8,h))),128)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(l.options,(n,o)=>(e.openBlock(),e.createElementBlock("option",{key:`${n.key}-native`,"data-index":o,disabled:n.disabled,multiple:l.multiple,selected:l.multiple?l.modelValue.indexOf(n.key)>=0:n.key===l.modelValue,value:n.key},e.toDisplayString(n.label),9,V))),128))],16,_)])}var N=c(d,[["render",E],["__file","/Users/andrew/dev/projects/neon/src/components/user-input/select/NeonSelect.vue"]]);module.exports=N;
+"use strict";var r=require("./NeonSelect.ts_vue_type_script_src_1f492752_lang.cjs.js"),e=require("vue"),c=require("../../../_virtual/plugin-vue_export-helper.cjs.js");const p={class:"neon-select__wrapper"},u={class:"no-style neon-select__options"},m={class:"neon-select__option-container"},k={class:"neon-select__option-label"},y=["id","aria-selected","onMouseover","onClick"],b={class:"neon-select__option-container"},g={class:"neon-select__option-label"},h=["disabled","multiple"],v=["selected"],_=["label"],B=["data-index","disabled","multiple","selected","value"],V=["data-index","disabled","multiple","selected","value"];function E(l,t,f,C,z,S){const a=e.resolveComponent("neon-switch"),i=e.resolveComponent("neon-icon"),d=e.resolveComponent("neon-dropdown");return e.openBlock(),e.createElementBlock("div",p,[e.createVNode(d,e.mergeProps({id:l.id,ref:"dropdown",modelValue:l.open,"onUpdate:modelValue":t[0]||(t[0]=n=>l.open=n),"aria-activedescendant":l.multiple?l.modelValue[0]:l.modelValue,"aria-multiselectable":l.multiple,class:[[`neon-select--${l.color}`,{"neon-select--grouped":l.groupedOptions,"neon-select--multiple":l.multiple}],"neon-select"],color:l.color,disabled:l.disabled,icon:l.computedIcon,label:l.computedLabel,size:l.size,role:"listbox"},l.sanitizedAttributes,{onDropdownPlacement:l.onPlacement}),{default:e.withCtx(()=>[e.createElementVNode("ul",u,[l.placeholderAsOption?(e.openBlock(),e.createElementBlock("li",{key:0,class:e.normalizeClass([`neon-select__option--${l.size}`,"neon-select__option neon-select__option--disabled neon-select__option-placeholder"])},[e.createElementVNode("div",m,[e.createElementVNode("span",k,e.toDisplayString(l.placeholder),1)])],2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.computedOptions,n=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[n.group!==""?(e.openBlock(),e.createElementBlock("li",{key:n.group,class:"neon-select__option-title"},e.toDisplayString(n.group),1)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.options,o=>(e.openBlock(),e.createElementBlock("li",{id:o.key,key:o.key,"aria-selected":l.multiple?l.modelValue.indexOf(o.key)>=0:o.key===l.modelValue,class:e.normalizeClass([[{"neon-select__option--disabled":o.disabled,"neon-select__option--separator-before":o.separatorBefore,"neon-select__option--selected":l.multiple?l.modelValue.indexOf(o.key)>=0:o.key===l.modelValue,"neon-select__option--highlighted":o.key===l.highlightedKey},`neon-select__option--${l.size}`],"neon-select__option"]),role:"option",onMouseover:s=>l.changeHighlighted(o.key),onClick:e.withModifiers(s=>!o.disabled&&l.clickOption(o),["stop","prevent"])},[e.createElementVNode("div",b,[e.renderSlot(l.$slots,"option",{option:o},()=>[l.multiple?(e.openBlock(),e.createBlock(a,{key:0,color:l.color,modelValue:l.modelValue.indexOf(o.key)>=0,size:l.size==="l"?"m":"s","switch-style":"checkbox"},null,8,["color","modelValue","size"])):e.createCommentVNode("",!0),o.icon?(e.openBlock(),e.createBlock(i,{key:1,disabled:o.disabled,name:o.icon,class:"neon-select__option-icon"},null,8,["disabled","name"])):e.createCommentVNode("",!0),e.createElementVNode("span",g,e.toDisplayString(o.label),1)])])],42,y))),128))],64))),256))])]),_:3},16,["id","modelValue","aria-activedescendant","aria-multiselectable","class","color","disabled","icon","label","size","onDropdownPlacement"]),e.createElementVNode("select",e.mergeProps({disabled:l.disabled,multiple:l.multiple,class:"neon-select__native"},l.sanitizedAttributes,{onInput:t[1]||(t[1]=(...n)=>l.nativeSelectChange&&l.nativeSelectChange(...n))}),[e.createElementVNode("option",{selected:l.multiple?l.modelValue.length===0:l.modelValue==="",disabled:"",hidden:"",value:""},e.toDisplayString(l.placeholder),9,v),l.groupedOptions?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(l.groupedOptions,n=>(e.openBlock(),e.createElementBlock("optgroup",{key:n.group,label:n.group},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.options,(o,s)=>(e.openBlock(),e.createElementBlock("option",{key:`${o.key}-native`,"data-index":s,disabled:o.disabled,multiple:l.multiple,selected:l.multiple?l.modelValue.indexOf(o.key)>=0:o.key===l.modelValue,value:o.key},e.toDisplayString(o.label),9,B))),128))],8,_))),128)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(l.options,(n,o)=>(e.openBlock(),e.createElementBlock("option",{key:`${n.key}-native`,"data-index":o,disabled:n.disabled,multiple:l.multiple,selected:l.multiple?l.modelValue.indexOf(n.key)>=0:n.key===l.modelValue,value:n.key},e.toDisplayString(n.label),9,V))),128))],16,h)])}var N=c(r,[["render",E]]);module.exports=N;
 //# sourceMappingURL=NeonSelect.cjs.js.map

package/dist/components/user-input/select/NeonSelect.es.js

@@ -1,4 +1,4 @@
-import _sfc_main from "./NeonSelect.ts_vue_type_script_src_37fb08e4_lang.es.js";
+import _sfc_main from "./NeonSelect.ts_vue_type_script_src_1f492752_lang.es.js";
 import { resolveComponent, openBlock, createElementBlock, createVNode, mergeProps, withCtx, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, Fragment, renderList, withModifiers, renderSlot, createBlock } from "vue";
 import _export_sfc from "../../../_virtual/plugin-vue_export-helper.es.js";
 const _hoisted_1 = { class: "neon-select__wrapper" };
@@ -135,6 +135,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ], 16, _hoisted_8)
   ]);
 }
-var NeonSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/andrew/dev/projects/neon/src/components/user-input/select/NeonSelect.vue"]]);
+var NeonSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export { NeonSelect as default };
 //# sourceMappingURL=NeonSelect.es.js.map

package/dist/components/user-input/select/{NeonSelect.ts_vue_type_script_src_37fb08e4_lang.cjs.js → NeonSelect.ts_vue_type_script_src_1f492752_lang.cjs.js}

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

package/dist/components/user-input/select/{NeonSelect.ts_vue_type_script_src_37fb08e4_lang.cjs.js.map → NeonSelect.ts_vue_type_script_src_1f492752_lang.cjs.js.map}

@@ -1 +1 @@
-{"version":3,"file":"NeonSelect.ts_vue_type_script_src_37fb08e4_lang.cjs.js","sources":["../../../../src/components/user-input/select/NeonSelect.ts?vue&type=script&src=37fb08e4&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.LowContrast },\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<HTMLElement | null>(null);\n\n    const open = ref(false);\n    const dropdownPlacement = ref<NeonDropdownPlacement | null>(null);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n\n    const flattenedOptions = computed((): NeonSelectOption[] => {\n      return props.options || props.groupedOptions?.flatMap((group) => group.options) || [];\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 scrollOnNavigate = () => {\n      const element = dropdown.value?.querySelector('.neon-select__option--highlighted') as HTMLElement;\n\n      if (element) {\n        NeonScrollUtils.scrollIntoView(element);\n      }\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(scrollOnNavigate);\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        }\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","props","emit","attrs","useAttrs","dropdown","ref","open","dropdownPlacement","highlightedKey","highlightedIndex","flattenedOptions","computed","_a","group","isReverse","NeonDropdownPlacement","scrollOnNavigate","element","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.ts_vue_type_script_src_1f492752_lang.cjs.js","sources":["../../../../src/components/user-input/select/NeonSelect.ts?vue&type=script&src=1f492752&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.LowContrast },\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<HTMLElement | null>(null);\n\n    const open = ref(false);\n    const dropdownPlacement = ref<NeonDropdownPlacement | null>(null);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n\n    const flattenedOptions = computed((): NeonSelectOption[] => {\n      return props.options || props.groupedOptions?.flatMap((group) => group.options) || [];\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 scrollOnNavigate = () => {\n      const element = dropdown.value?.querySelector('.neon-select__option--highlighted') as HTMLElement;\n\n      if (element) {\n        NeonScrollUtils.scrollIntoView(element);\n      }\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(scrollOnNavigate);\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        }\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","props","emit","attrs","useAttrs","dropdown","ref","open","dropdownPlacement","highlightedKey","highlightedIndex","flattenedOptions","computed","_a","group","isReverse","NeonDropdownPlacement","scrollOnNavigate","element","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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"}

package/dist/components/user-input/select/{NeonSelect.ts_vue_type_script_src_37fb08e4_lang.es.js → NeonSelect.ts_vue_type_script_src_1f492752_lang.es.js}

@@ -201,4 +201,4 @@ var _sfc_main = defineComponent({
   }
 });
 export { _sfc_main as default };
-//# sourceMappingURL=NeonSelect.ts_vue_type_script_src_37fb08e4_lang.es.js.map
+//# sourceMappingURL=NeonSelect.ts_vue_type_script_src_1f492752_lang.es.js.map

package/dist/components/user-input/select/{NeonSelect.ts_vue_type_script_src_37fb08e4_lang.es.js.map → NeonSelect.ts_vue_type_script_src_1f492752_lang.es.js.map}

@@ -1 +1 @@
-{"version":3,"file":"NeonSelect.ts_vue_type_script_src_37fb08e4_lang.es.js","sources":["../../../../src/components/user-input/select/NeonSelect.ts?vue&type=script&src=37fb08e4&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.LowContrast },\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<HTMLElement | null>(null);\n\n    const open = ref(false);\n    const dropdownPlacement = ref<NeonDropdownPlacement | null>(null);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n\n    const flattenedOptions = computed((): NeonSelectOption[] => {\n      return props.options || props.groupedOptions?.flatMap((group) => group.options) || [];\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 scrollOnNavigate = () => {\n      const element = dropdown.value?.querySelector('.neon-select__option--highlighted') as HTMLElement;\n\n      if (element) {\n        NeonScrollUtils.scrollIntoView(element);\n      }\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(scrollOnNavigate);\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        }\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":["value","open"],"mappings":"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"}
+{"version":3,"file":"NeonSelect.ts_vue_type_script_src_1f492752_lang.es.js","sources":["../../../../src/components/user-input/select/NeonSelect.ts?vue&type=script&src=1f492752&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.LowContrast },\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<HTMLElement | null>(null);\n\n    const open = ref(false);\n    const dropdownPlacement = ref<NeonDropdownPlacement | null>(null);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n\n    const flattenedOptions = computed((): NeonSelectOption[] => {\n      return props.options || props.groupedOptions?.flatMap((group) => group.options) || [];\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 scrollOnNavigate = () => {\n      const element = dropdown.value?.querySelector('.neon-select__option--highlighted') as HTMLElement;\n\n      if (element) {\n        NeonScrollUtils.scrollIntoView(element);\n      }\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(scrollOnNavigate);\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        }\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":["value","open"],"mappings":"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"}

package/dist/components/user-input/selectable-card/NeonSelectableCard.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var a=require("./NeonSelectableCard.ts_vue_type_script_src_3688086a_lang.cjs.js"),e=require("vue"),d=require("../../../_virtual/plugin-vue_export-helper.cjs.js");function i(o,n,p,u,v,b){const r=e.resolveComponent("neon-switch"),s=e.resolveComponent("neon-card-header"),t=e.resolveComponent("neon-card");return e.openBlock(),e.createBlock(t,{class:e.normalizeClass([[`neon-selectable-card--${o.color}`,{"neon-selectable-card--selected":o.modelValue},{"neon-selectable-card--disabled":o.disabled}],"neon-selectable-card"]),"horizontal-borders":!1,"no-break":!0,size:o.size,orientation:"horizontal",tabindex:"0",onClick:n[1]||(n[1]=l=>o.clicked()),onKeydown:[n[2]||(n[2]=e.withKeys(e.withModifiers(l=>o.clicked(),["stop","prevent"]),["enter"])),n[3]||(n[3]=e.withKeys(e.withModifiers(l=>o.clicked(),["stop","prevent"]),["space"]))]},{default:e.withCtx(()=>[e.createVNode(s,null,{default:e.withCtx(()=>[e.createVNode(r,{color:o.color,disabled:o.disabled,"model-value":o.modelValue,size:o.size,class:"neon-selectable-card__checkbox","switch-style":"checkbox","onUpdate:modelValue":n[0]||(n[0]=l=>o.clicked())},null,8,["color","disabled","model-value","size"])]),_:1}),e.renderSlot(o.$slots,"default")]),_:3},8,["class","size"])}var c=d(a,[["render",i],["__file","/Users/andrew/dev/projects/neon/src/components/user-input/selectable-card/NeonSelectableCard.vue"]]);module.exports=c;
+"use strict";var a=require("./NeonSelectableCard.ts_vue_type_script_src_397cfc5e_lang.cjs.js"),e=require("vue"),d=require("../../../_virtual/plugin-vue_export-helper.cjs.js");function i(o,n,p,u,v,b){const r=e.resolveComponent("neon-switch"),s=e.resolveComponent("neon-card-header"),t=e.resolveComponent("neon-card");return e.openBlock(),e.createBlock(t,{class:e.normalizeClass([[`neon-selectable-card--${o.color}`,{"neon-selectable-card--selected":o.modelValue},{"neon-selectable-card--disabled":o.disabled}],"neon-selectable-card"]),"horizontal-borders":!1,"no-break":!0,size:o.size,orientation:"horizontal",tabindex:"0",onClick:n[1]||(n[1]=l=>o.clicked()),onKeydown:[n[2]||(n[2]=e.withKeys(e.withModifiers(l=>o.clicked(),["stop","prevent"]),["enter"])),n[3]||(n[3]=e.withKeys(e.withModifiers(l=>o.clicked(),["stop","prevent"]),["space"]))]},{default:e.withCtx(()=>[e.createVNode(s,null,{default:e.withCtx(()=>[e.createVNode(r,{color:o.color,disabled:o.disabled,"model-value":o.modelValue,size:o.size,class:"neon-selectable-card__checkbox","switch-style":"checkbox","onUpdate:modelValue":n[0]||(n[0]=l=>o.clicked())},null,8,["color","disabled","model-value","size"])]),_:1}),e.renderSlot(o.$slots,"default")]),_:3},8,["class","size"])}var c=d(a,[["render",i]]);module.exports=c;
 //# sourceMappingURL=NeonSelectableCard.cjs.js.map