@aotearoan/neon 19.0.0 → 19.0.2

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

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

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

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

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

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

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

@@ -1,12 +1,12 @@
-import t from "./NeonInput.es.js";
-import { resolveComponent as m, openBlock as l, createElementBlock as i, normalizeClass as d, mergeProps as a, withModifiers as s, createBlock as b, withKeys as r, createCommentVNode as u, toDisplayString as y } from "vue";
+import p from "./NeonInput.es.js";
+import { resolveComponent as m, openBlock as l, createElementBlock as i, normalizeClass as d, mergeProps as a, withModifiers as u, createBlock as b, withKeys as s, createCommentVNode as t, toDisplayString as y } from "vue";
 import h from "../../../_virtual/_plugin-vue_export-helper.es.js";
-const f = ["id", "aria-placeholder", "disabled", "inputmode", "placeholder", "tabindex", "type", "value"], g = ["id", "aria-placeholder", "disabled", "inputmode", "placeholder", "rows", "tabindex", "value"], w = {
+const f = ["id", "aria-placeholder", "autocomplete", "disabled", "inputmode", "placeholder", "tabindex", "type", "value"], g = ["id", "aria-placeholder", "autocomplete", "disabled", "inputmode", "placeholder", "rows", "tabindex", "value"], w = {
   key: 3,
   class: "neon-input__textarea-counter"
 };
-function V(e, n, k, v, $, B) {
-  const p = m("neon-icon");
+function V(e, o, k, v, $, B) {
+  const r = m("neon-icon");
   return l(), i("div", {
     class: d([[
       {
@@ -26,6 +26,7 @@ function V(e, n, k, v, $, B) {
       key: 1,
       id: e.id,
       "aria-placeholder": e.computedPlaceholder,
+      autocomplete: e.autocomplete,
       disabled: e.disabled,
       inputmode: e.inputmode,
       placeholder: e.computedPlaceholder,
@@ -34,15 +35,16 @@ function V(e, n, k, v, $, B) {
       value: e.modelValue,
       class: "neon-input__textfield neon-input__textarea"
     }, e.sanitizedAttributes, {
-      onBlur: n[3] || (n[3] = (...o) => e.onBlur && e.onBlur(...o)),
-      onFocus: n[4] || (n[4] = (...o) => e.onFocus && e.onFocus(...o)),
-      onKeydown: n[5] || (n[5] = (...o) => e.onKeyDown && e.onKeyDown(...o)),
-      onInput: n[6] || (n[6] = s((...o) => e.changeValue && e.changeValue(...o), ["stop", "prevent"]))
+      onBlur: o[3] || (o[3] = (...n) => e.onBlur && e.onBlur(...n)),
+      onFocus: o[4] || (o[4] = (...n) => e.onFocus && e.onFocus(...n)),
+      onKeydown: o[5] || (o[5] = (...n) => e.onKeyDown && e.onKeyDown(...n)),
+      onInput: o[6] || (o[6] = u((...n) => e.changeValue && e.changeValue(...n), ["stop", "prevent"]))
     }), null, 16, g)) : (l(), i("input", a({
       key: 0,
       id: e.id,
       ref: "neonInput",
       "aria-placeholder": e.computedPlaceholder,
+      autocomplete: e.autocomplete,
       disabled: e.disabled,
       inputmode: e.inputmode,
       placeholder: e.computedPlaceholder,
@@ -51,11 +53,11 @@ function V(e, n, k, v, $, B) {
       value: e.modelValue,
       class: "neon-input__textfield neon-input__text"
     }, e.sanitizedAttributes, {
-      onBlur: n[0] || (n[0] = (...o) => e.onBlur && e.onBlur(...o)),
-      onFocus: n[1] || (n[1] = (o) => !e.disabled && e.onFocus()),
-      onInput: n[2] || (n[2] = s((o) => !e.disabled && e.changeValue(o), ["stop", "prevent"]))
+      onBlur: o[0] || (o[0] = (...n) => e.onBlur && e.onBlur(...n)),
+      onFocus: o[1] || (o[1] = (n) => !e.disabled && e.onFocus()),
+      onInput: o[2] || (o[2] = u((n) => !e.disabled && e.changeValue(n), ["stop", "prevent"]))
     }), null, 16, f)),
-    e.iconVisible ? (l(), b(p, {
+    e.iconVisible ? (l(), b(r, {
       key: 2,
       class: d([{ "neon-input__icon--read-only": e.iconReadonly }, "neon-input__icon"]),
       color: e.iconColor,
@@ -64,16 +66,16 @@ function V(e, n, k, v, $, B) {
       role: !e.iconReadonly && "button",
       tabindex: e.disabled || e.iconReadonly ? !1 : 0,
       transparent: !0,
-      onClick: n[7] || (n[7] = (o) => !e.iconReadonly && e.iconClicked(o)),
+      onClick: o[7] || (o[7] = (n) => !e.iconReadonly && e.iconClicked(n)),
       onKeydown: [
-        n[8] || (n[8] = r((o) => !e.iconReadonly && e.iconClicked(o), ["enter"])),
-        n[9] || (n[9] = r((o) => !e.iconReadonly && e.iconClicked(o), ["space"]))
+        o[8] || (o[8] = s((n) => !e.iconReadonly && e.iconClicked(n), ["enter"])),
+        o[9] || (o[9] = s((n) => !e.iconReadonly && e.iconClicked(n), ["space"]))
       ]
-    }, null, 8, ["class", "color", "disabled", "name", "role", "tabindex"])) : u("", !0),
-    e.maxlength && e.maxlength > 0 ? (l(), i("span", w, y(`${e.modelValue.length}/${e.maxlength}`), 1)) : u("", !0)
+    }, null, 8, ["class", "color", "disabled", "name", "role", "tabindex"])) : t("", !0),
+    e.maxlength && e.maxlength > 0 ? (l(), i("span", w, y(`${e.modelValue.length}/${e.maxlength}`), 1)) : t("", !0)
   ], 2);
 }
-const F = /* @__PURE__ */ h(t, [["render", V]]);
+const F = /* @__PURE__ */ h(p, [["render", V]]);
 export {
   F as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"NeonInput.vue.es.js","sources":["../../../../src/components/user-input/input/NeonInput.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      {\n        'neon-input--with-icon': !hideIcon && (icon || (modelValue && modelValue.length > 0)),\n        'neon-input--disabled': disabled,\n        'neon-input--focused': focused,\n        'neon-input--placeholder-visible': placeholder && (!modelValue || modelValue.length === 0),\n        'neon-input--with-state-highlight': stateHighlight,\n        'neon-input--with-state-icon': stateIcon,\n      },\n      `neon-input--${size}`,\n      `neon-input--${color}`,\n      `neon-input--state-${state}`,\n    ]\"\n    class=\"neon-input\"\n  >\n    <input\n      v-if=\"!rows\"\n      :id=\"id\"\n      ref=\"neonInput\"\n      :aria-placeholder=\"computedPlaceholder\"\n      :disabled=\"disabled\"\n      :inputmode=\"inputmode\"\n      :placeholder=\"computedPlaceholder\"\n      :tabindex=\"tabindex\"\n      :type=\"type\"\n      :value=\"modelValue\"\n      class=\"neon-input__textfield neon-input__text\"\n      v-bind=\"sanitizedAttributes\"\n      @blur=\"onBlur\"\n      @focus=\"!disabled && onFocus()\"\n      @input.stop.prevent=\"!disabled && changeValue($event)\"\n    />\n    <textarea\n      v-else\n      :id=\"id\"\n      :aria-placeholder=\"computedPlaceholder\"\n      :disabled=\"disabled\"\n      :inputmode=\"inputmode\"\n      :placeholder=\"computedPlaceholder\"\n      :rows=\"rows\"\n      :tabindex=\"tabindex\"\n      :value=\"modelValue\"\n      class=\"neon-input__textfield neon-input__textarea\"\n      v-bind=\"sanitizedAttributes\"\n      @blur=\"onBlur\"\n      @focus=\"onFocus\"\n      @keydown=\"onKeyDown\"\n      @input.stop.prevent=\"changeValue\"\n    ></textarea>\n    <neon-icon\n      v-if=\"iconVisible\"\n      :class=\"{ 'neon-input__icon--read-only': iconReadonly }\"\n      :color=\"iconColor\"\n      :disabled=\"disabled\"\n      :name=\"iconName\"\n      :role=\"!iconReadonly && 'button'\"\n      :tabindex=\"disabled || iconReadonly ? false : 0\"\n      :transparent=\"true\"\n      class=\"neon-input__icon\"\n      @click=\"!iconReadonly && iconClicked($event)\"\n      @keydown.enter=\"!iconReadonly && iconClicked($event)\"\n      @keydown.space=\"!iconReadonly && iconClicked($event)\"\n    />\n    <span v-if=\"maxlength && maxlength > 0\" class=\"neon-input__textarea-counter\">\n      {{ `${modelValue.length}/${maxlength}` }}\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonInput.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_openBlock","_mergeProps","args","_cache","$event","_withModifiers","_createBlock","_component_neon_icon","_hoisted_3","_toDisplayString"],"mappings":";;;;;EAiE4C,OAAM;;;;cAhEhDA,EAmEM,OAAA;AAAA,IAlEH,OAAKC,EAAA,CAAA;AAAA;QAA8C,yBAAA,CAAAC,EAAA,aAAaA,EAAA,QAASA,gBAAcA,EAAA,WAAW,SAAM;AAAA,gCAAwCA,EAAA;AAAA,+BAAyCA,EAAA;AAAA,QAAoD,mCAAAA,EAAA,gBAAW,CAAMA,EAAA,cAAcA,EAAA,WAAW,WAAM;AAAA,4CAAqDA,EAAA;AAAA,uCAAuDA,EAAA;AAAA;qBAAyCA,EAAA,IAAI;AAAA,qBAAyBA,EAAA,KAAK;AAAA,2BAA+BA,EAAA,KAAK;AAAA,OAanf,YAAY,CAAA;AAAA;IAGTA,EAAA,QAgBTC,KAAAH,EAgBY,YAhBZI,EAgBY;AAAA;MAdT,IAAIF,EAAA;AAAA,MACJ,oBAAkBA,EAAA;AAAA,MAClB,UAAUA,EAAA;AAAA,MACV,WAAWA,EAAA;AAAA,MACX,aAAaA,EAAA;AAAA,MACb,MAAMA,EAAA;AAAA,MACN,UAAUA,EAAA;AAAA,MACV,OAAOA,EAAA;AAAA,MACR,OAAM;AAAA,OACEA,EAAA,qBAAmB;AAAA,MAC1B,kCAAMA,EAAA,UAAAA,EAAA,OAAA,GAAAG,CAAA;AAAA,MACN,mCAAOH,EAAA,WAAAA,EAAA,QAAA,GAAAG,CAAA;AAAA,MACP,qCAASH,EAAA,aAAAA,EAAA,UAAA,GAAAG,CAAA;AAAA,MACT,qCAAoBH,EAAA,eAAAA,EAAA,YAAA,GAAAG,CAAA,GAAW,CAAA,QAAA,SAAA,CAAA;AAAA,yBAhClCF,KAAAH,EAgBE,SAhBFI,EAgBE;AAAA;MAdC,IAAIF,EAAA;AAAA,MACL,KAAI;AAAA,MACH,oBAAkBA,EAAA;AAAA,MAClB,UAAUA,EAAA;AAAA,MACV,WAAWA,EAAA;AAAA,MACX,aAAaA,EAAA;AAAA,MACb,UAAUA,EAAA;AAAA,MACV,MAAMA,EAAA;AAAA,MACN,OAAOA,EAAA;AAAA,MACR,OAAM;AAAA,OACEA,EAAA,qBAAmB;AAAA,MAC1B,kCAAMA,EAAA,UAAAA,EAAA,OAAA,GAAAG,CAAA;AAAA,MACN,SAAKC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAA,CAAGL,EAAA,YAAYA,EAAA,QAAO;AAAA,MAC3B,SAAKI,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAE,EAAA,CAAAD,MAAA,CAAgBL,EAAA,YAAYA,EAAA,YAAYK,CAAM,GAAA,CAAA,QAAA,SAAA,CAAA;AAAA;IAoB9CL,EAAA,oBADRO,EAaEC,GAAA;AAAA;MAXC,OAAKT,EAAA,CAAA,EAAA,+BAAmCC,EAAA,aAAY,GAO/C,kBAAkB,CAAA;AAAA,MANvB,OAAOA,EAAA;AAAA,MACP,UAAUA,EAAA;AAAA,MACV,MAAMA,EAAA;AAAA,MACN,OAAOA,EAAA,gBAAY;AAAA,MACnB,UAAUA,EAAA,YAAYA,EAAA,eAAY,KAAA;AAAA,MAClC,aAAa;AAAA,MAEb,SAAKI,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAA,CAAGL,EAAA,gBAAgBA,EAAA,YAAYK,CAAM;AAAA,MAC1C,WAAO;AAAA,kCAASL,EAAA,gBAAgBA,EAAA,YAAYK,CAAM,GAAA,CAAA,OAAA,CAAA;AAAA,kCAClCL,EAAA,gBAAgBA,EAAA,YAAYK,CAAM,GAAA,CAAA,OAAA,CAAA;AAAA;;IAEzCL,EAAA,aAAaA,EAAA,YAAS,KAAlCC,EAAA,GAAAH,EAEO,QAFPW,GAEOC,EAAA,GADCV,aAAW,MAAM,IAAIA,EAAA,SAAS,EAAA,GAAA,CAAA;;;;"}
+{"version":3,"file":"NeonInput.vue.es.js","sources":["../../../../src/components/user-input/input/NeonInput.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      {\n        'neon-input--with-icon': !hideIcon && (icon || (modelValue && modelValue.length > 0)),\n        'neon-input--disabled': disabled,\n        'neon-input--focused': focused,\n        'neon-input--placeholder-visible': placeholder && (!modelValue || modelValue.length === 0),\n        'neon-input--with-state-highlight': stateHighlight,\n        'neon-input--with-state-icon': stateIcon,\n      },\n      `neon-input--${size}`,\n      `neon-input--${color}`,\n      `neon-input--state-${state}`,\n    ]\"\n    class=\"neon-input\"\n  >\n    <input\n      v-if=\"!rows\"\n      :id=\"id\"\n      ref=\"neonInput\"\n      :aria-placeholder=\"computedPlaceholder\"\n      :autocomplete=\"autocomplete\"\n      :disabled=\"disabled\"\n      :inputmode=\"inputmode\"\n      :placeholder=\"computedPlaceholder\"\n      :tabindex=\"tabindex\"\n      :type=\"type\"\n      :value=\"modelValue\"\n      class=\"neon-input__textfield neon-input__text\"\n      v-bind=\"sanitizedAttributes\"\n      @blur=\"onBlur\"\n      @focus=\"!disabled && onFocus()\"\n      @input.stop.prevent=\"!disabled && changeValue($event)\"\n    />\n    <textarea\n      v-else\n      :id=\"id\"\n      :aria-placeholder=\"computedPlaceholder\"\n      :autocomplete=\"autocomplete\"\n      :disabled=\"disabled\"\n      :inputmode=\"inputmode\"\n      :placeholder=\"computedPlaceholder\"\n      :rows=\"rows\"\n      :tabindex=\"tabindex\"\n      :value=\"modelValue\"\n      class=\"neon-input__textfield neon-input__textarea\"\n      v-bind=\"sanitizedAttributes\"\n      @blur=\"onBlur\"\n      @focus=\"onFocus\"\n      @keydown=\"onKeyDown\"\n      @input.stop.prevent=\"changeValue\"\n    ></textarea>\n    <neon-icon\n      v-if=\"iconVisible\"\n      :class=\"{ 'neon-input__icon--read-only': iconReadonly }\"\n      :color=\"iconColor\"\n      :disabled=\"disabled\"\n      :name=\"iconName\"\n      :role=\"!iconReadonly && 'button'\"\n      :tabindex=\"disabled || iconReadonly ? false : 0\"\n      :transparent=\"true\"\n      class=\"neon-input__icon\"\n      @click=\"!iconReadonly && iconClicked($event)\"\n      @keydown.enter=\"!iconReadonly && iconClicked($event)\"\n      @keydown.space=\"!iconReadonly && iconClicked($event)\"\n    />\n    <span v-if=\"maxlength && maxlength > 0\" class=\"neon-input__textarea-counter\">\n      {{ `${modelValue.length}/${maxlength}` }}\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonInput.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_openBlock","_mergeProps","args","_cache","$event","_withModifiers","_createBlock","_component_neon_icon","_hoisted_3","_toDisplayString"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"NeonSearch.cjs.js","sources":["../../../../src/components/user-input/search/NeonSearch.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { 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.Primary },\n    /**\n     * Placement of the dropdown contents.\n     */\n    placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n  },\n  emits: [\n    /**\n     * emitted when the user changes the selection.\n     * @type {string | 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 | undefined>(props.placement);\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      dropdownPlacement,\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","NeonDropdownPlacement","props","emit","attrs","useAttrs","dropdown","ref","dropdownPlacement","open","highlightedKey","highlightedIndex","filter","watch","isReverse","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":"6dAmBAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,WAAY,CACV,SAAAC,EACA,aAAAC,EACA,SAAAC,EACA,UAAAC,CAAA,EAEF,MAAO,CAKL,WAAY,CAAE,KAAM,CAAC,OAAQ,KAAsC,EAAG,SAAU,EAAA,EAIhF,YAAa,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIvC,QAAS,CAAE,KAAM,MAAwC,SAAU,EAAA,EAInE,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,KAAM,CAAE,KAAM,OAA0B,QAASC,EAAAA,SAAS,MAAA,EAI1D,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,OAAA,EAIjF,UAAW,CAAE,KAAM,OAAuC,QAASC,EAAAA,sBAAsB,UAAA,CAAW,EAEtG,MAAO,CAML,oBAKA,gBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAQC,EAAAA,SAAA,EAERC,EAAWC,EAAAA,IAAwB,IAAI,EACvCC,EAAoBD,EAAAA,IAAuCL,EAAM,SAAS,EAE1EO,EAAOF,EAAAA,IAAI,EAAK,EAChBG,EAAiBH,EAAAA,IAAmB,IAAI,EACxCI,EAAmBJ,EAAAA,IAAI,EAAE,EACzBK,EAASL,EAAAA,IAAI,EAAE,EAErBM,EAAAA,MACE,IAAMJ,EAAK,MACVA,GAAkB,CACbA,GAAQP,EAAM,QAAQ,OAAS,IACjCQ,EAAe,MAAQR,EAAM,QAAQ,CAAC,EAAE,IACxCS,EAAiB,MAAQ,EAE7B,CAAA,EAGF,MAAMG,EAAY,IAAM,CACtB,OAAQN,EAAkB,MAAA,CACxB,KAAKP,EAAAA,sBAAsB,QAC3B,KAAKA,EAAAA,sBAAsB,SAC3B,KAAKA,EAAAA,sBAAsB,WAC3B,KAAKA,EAAAA,sBAAsB,YACzB,MAAO,EAAA,CAGX,MAAO,EACT,EAEMc,EAAmB,IAAM,OAC7B,MAAMC,GAAUC,EAAAX,EAAS,QAAT,YAAAW,EAAgB,cAAc,qCAC9CC,EAAAA,gBAAgB,eAAeF,CAAO,CACxC,EAEMG,EAAa,CAACC,EAAgBC,IAA0B,CAC5D,MAAMC,EAAWX,EAAiB,MAAQS,EACtCE,GAAY,GAAKA,GAAYpB,EAAM,QAAQ,OAAS,IACtDS,EAAiB,MAAQW,EACzBZ,EAAe,MAAQR,EAAM,QAAQS,EAAiB,KAAK,EAAE,IAC7DU,EAAO,eAAA,EACP,WAAWN,CAAgB,EAE/B,EAEMQ,EAAkBC,GAAuC,CAC7DrB,EAAK,oBAAqBqB,CAAK,CACjC,EAEMC,EAAkBC,GAAoB,CACrCxB,EAAM,UACTqB,EAAe,EAAE,EAGnBX,EAAO,MAAQc,EACfvB,EAAK,iBAAkBuB,CAAO,CAChC,EAEMC,EAAeC,GAA6B,CAChD,GAAI1B,EAAM,SAAU,CAClB,MAAM2B,EAAU3B,EAAM,WAAkC,IAAK4B,GAAMA,CAAC,EAC9DC,EAAQF,EAAO,UAAWC,GAAMA,EAAE,MAAQF,EAAO,GAAG,EACtDG,GAAS,EACXF,EAAO,OAAOE,EAAO,CAAC,EAEtBF,EAAO,KAAKD,CAAM,EAEpBL,EAAeM,CAAM,CACvB,MACEN,EAAeK,EAAO,GAAG,EAG3BH,EAAevB,EAAM,SAAW,GAAK0B,EAAO,MAAM,UAAU,CAC9D,EAEMI,EAAmBX,GAA0B,CACjD,GAAIZ,EAAK,MACP,OAAQY,EAAO,KAAA,CACb,IAAK,UACL,IAAK,YACH,CACE,MAAMY,EAAgBnB,IAAc,GAAK,EACrCO,EAAO,OAAS,UAClBF,EAAW,GAAKc,EAAeZ,CAAM,EAErCF,EAAW,EAAIc,EAAeZ,CAAM,CAExC,CACA,MACF,IAAK,QACL,IAAK,QACGA,EAAO,OAAuB,UAAU,SAAS,oBAAoB,IACzEM,EAAYzB,EAAM,QAAQS,EAAiB,KAAK,CAAC,EACjDU,EAAO,eAAA,GAET,MACF,IAAK,MACC,CAACA,EAAO,SAAW,CAACA,EAAO,SAAW,CAACA,EAAO,SAChDZ,EAAK,MAAQ,IAEf,KAAA,CAGR,EAEMyB,EAAeC,GAAqC,CACxD3B,EAAkB,MAAQ2B,CAC5B,EAEAC,EAAAA,UAAU,IAAM,CACd,SAAS,iBAAiB,UAAWJ,CAAe,CACtD,CAAC,EAEDK,EAAAA,YAAY,IAAM,CAChB,SAAS,oBAAoB,UAAWL,CAAe,CACzD,CAAC,EAED,MAAMM,EAAsBC,EAAAA,SAAS,IAAM,CAEzC,KAAM,CAAE,gBAAAC,EAAiB,GAAGC,CAAA,EAAcrC,EAC1C,OAAOqC,CACT,CAAC,EAEKC,EAAqBC,GAAgB,CACzCjC,EAAe,MAAQiC,EACvBhC,EAAiB,MAAQT,EAAM,QAAQ,UAAW0C,GAAQA,EAAI,MAAQD,CAAG,CAC3E,EAEME,EAAc,IAAOpC,EAAK,MAAQ,GAElCqC,EAAkBC,GACtBxB,EAAgBrB,EAAM,WAAkC,OAAQ4B,GAAMA,EAAE,MAAQiB,EAAQ,GAAG,CAAC,EAExFC,EAAkBT,EAAAA,SAAS,IACxBrC,EAAM,SAAWA,EAAM,QAAUA,EAAM,QAAQ,OAAQ0C,GAAQA,EAAI,QAAUhC,EAAO,KAAK,CACjG,EAED,MAAO,CACL,SAAAN,EACA,KAAAG,EACA,eAAAC,EACA,OAAAE,EACA,oBAAA0B,EACA,gBAAAU,EACA,kBAAAxC,EACA,YAAA0B,EACA,eAAAT,EACA,YAAAE,EACA,kBAAAe,EACA,YAAAG,EACA,eAAAC,CAAA,CAEJ,CACF,CAAC"}
+{"version":3,"file":"NeonSearch.cjs.js","sources":["../../../../src/components/user-input/search/NeonSearch.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { 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';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\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.Primary },\n    /**\n     * The HTML autocomplete mode as specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\">here</a>.\n     * NOTE: No enum is provided in Neon as some values can be used in combination, please refer to the full list of values in the preceding link.\n     */\n    autocomplete: { type: String, default: 'on' },\n    /**\n     * The HTML input mode as specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode\">here</a>.\n     * This can be used to simplify populating the filter field, e.g. providing the user's country from their address.\n     */\n    inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Text },\n    /**\n     * Placement of the dropdown contents.\n     */\n    placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n  },\n  emits: [\n    /**\n     * emitted when the user changes the selection.\n     * @type {string | 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<InstanceType<typeof NeonDropdown> | null>(null);\n    const searchInput = ref<InstanceType<typeof NeonInput> | null>(null);\n    const dropdownPlacement = ref<NeonDropdownPlacement | undefined>(props.placement);\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 onNavigate = () => {\n      const element: HTMLElement | null = dropdown.value?.dropdownContent?.querySelector(\n        '.neon-search__option--highlighted',\n      ) as HTMLElement;\n\n      if (element) {\n        element.focus();\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 <= props.options.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = props.options[highlightedIndex.value].key;\n        $event.preventDefault();\n        setTimeout(onNavigate);\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 && props.modelValue !== '') {\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 (\n              document.activeElement !== searchInput.value?.neonInput &&\n              !$event.ctrlKey &&\n              !$event.metaKey &&\n              !$event.altKey\n            ) {\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      searchInput,\n      open,\n      highlightedKey,\n      filter,\n      sanitizedAttributes,\n      computedOptions,\n      dropdownPlacement,\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","NeonInputMode","NeonDropdownPlacement","props","emit","attrs","useAttrs","dropdown","ref","searchInput","dropdownPlacement","open","highlightedKey","highlightedIndex","filter","watch","isReverse","onNavigate","element","_b","_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.es.js

@@ -1,18 +1,19 @@
-import { defineComponent as V, useAttrs as C, ref as a, watch as D, onMounted as O, onUnmounted as _, computed as w } from "vue";
+import { defineComponent as L, useAttrs as D, ref as l, watch as E, onMounted as T, onUnmounted as _, computed as k } from "vue";
 import { NeonSize as q } from "../../../common/enums/NeonSize.es.js";
 import { NeonFunctionalColor as z } from "../../../common/enums/NeonFunctionalColor.es.js";
-import E from "../../presentation/dropdown/NeonDropdown.vue.es.js";
-import K from "../../presentation/icon/NeonIcon.vue.es.js";
+import K from "../../presentation/dropdown/NeonDropdown.vue.es.js";
+import O from "../../presentation/icon/NeonIcon.vue.es.js";
 import P from "../input/NeonInput.vue.es.js";
-import T from "../chip/NeonChip.vue.es.js";
+import U from "../chip/NeonChip.vue.es.js";
 import { NeonDropdownPlacement as r } from "../../../common/enums/NeonDropdownPlacement.es.js";
-import { NeonScrollUtils as U } from "../../../common/utils/NeonScrollUtils.es.js";
-const X = V({
+import { NeonScrollUtils as F } from "../../../common/utils/NeonScrollUtils.es.js";
+import { NeonInputMode as M } from "../../../common/enums/NeonInputMode.es.js";
+const $ = L({
   name: "NeonSearch",
   components: {
-    NeonChip: T,
-    NeonDropdown: E,
-    NeonIcon: K,
+    NeonChip: U,
+    NeonDropdown: K,
+    NeonIcon: O,
     NeonInput: P
   },
   props: {
@@ -45,6 +46,16 @@ const X = V({
      * The color of the search.
      */
     color: { type: String, default: z.Primary },
+    /**
+     * The HTML autocomplete mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values">here</a>.
+     * NOTE: No enum is provided in Neon as some values can be used in combination, please refer to the full list of values in the preceding link.
+     */
+    autocomplete: { type: String, default: "on" },
+    /**
+     * The HTML input mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">here</a>.
+     * This can be used to simplify populating the filter field, e.g. providing the user's country from their address.
+     */
+    inputmode: { type: String, default: M.Text },
     /**
      * Placement of the dropdown contents.
      */
@@ -64,15 +75,15 @@ const X = V({
     "filter-changed"
   ],
   setup(o, { emit: f }) {
-    const k = C(), p = a(null), u = a(o.placement), i = a(!1), s = a(null), n = a(-1), d = a("");
-    D(
+    const S = D(), p = l(null), h = l(null), s = l(o.placement), i = l(!1), u = l(null), a = l(-1), d = l("");
+    E(
       () => i.value,
       (e) => {
-        e && o.options.length > 0 && (s.value = o.options[0].key, n.value = 0);
+        e && o.options.length > 0 && (u.value = o.options[0].key, a.value = 0);
       }
     );
-    const S = () => {
-      switch (u.value) {
+    const I = () => {
+      switch (s.value) {
         case r.TopLeft:
         case r.TopRight:
         case r.LeftBottom:
@@ -81,73 +92,77 @@ const X = V({
       }
       return !1;
     }, N = () => {
-      var t;
-      const e = (t = p.value) == null ? void 0 : t.querySelector(".neon-search__option--highlighted");
-      U.scrollIntoView(e);
-    }, h = (e, t) => {
-      const l = n.value + e;
-      l >= 0 && l <= o.options.length - 1 && (n.value = l, s.value = o.options[n.value].key, t.preventDefault(), setTimeout(N));
+      var t, n;
+      const e = (n = (t = p.value) == null ? void 0 : t.dropdownContent) == null ? void 0 : n.querySelector(
+        ".neon-search__option--highlighted"
+      );
+      e && (e.focus(), F.scrollIntoView(e));
+    }, y = (e, t) => {
+      const n = a.value + e;
+      n >= 0 && n <= o.options.length - 1 && (a.value = n, u.value = o.options[a.value].key, t.preventDefault(), setTimeout(N));
     }, c = (e) => {
       f("update:modelValue", e);
-    }, y = (e) => {
-      o.multiple || c(""), d.value = e, f("filter-changed", e);
     }, g = (e) => {
+      !o.multiple && o.modelValue !== "" && c(""), d.value = e, f("filter-changed", e);
+    }, v = (e) => {
       if (o.multiple) {
-        const t = o.modelValue.map((m) => m), l = t.findIndex((m) => m.key === e.key);
-        l >= 0 ? t.splice(l, 1) : t.push(e), c(t);
+        const t = o.modelValue.map((m) => m), n = t.findIndex((m) => m.key === e.key);
+        n >= 0 ? t.splice(n, 1) : t.push(e), c(t);
       } else
         c(e.key);
-      y(o.multiple ? "" : e.label.toString());
-    }, v = (e) => {
+      g(o.multiple ? "" : e.label.toString());
+    }, w = (e) => {
+      var t;
       if (i.value)
         switch (e.code) {
           case "ArrowUp":
           case "ArrowDown":
             {
-              const t = S() ? -1 : 1;
-              e.code === "ArrowUp" ? h(-1 * t, e) : h(1 * t, e);
+              const n = I() ? -1 : 1;
+              e.code === "ArrowUp" ? y(-1 * n, e) : y(1 * n, e);
             }
             break;
           case "Enter":
           case "Space":
-            e.target.classList.contains("neon-search__input") || (g(o.options[n.value]), e.preventDefault());
+            e.target.classList.contains("neon-search__input") || (v(o.options[a.value]), e.preventDefault());
             break;
           case "Tab":
-            !e.ctrlKey && !e.metaKey && !e.altKey && (i.value = !1);
+            document.activeElement !== ((t = h.value) == null ? void 0 : t.neonInput) && !e.ctrlKey && !e.metaKey && !e.altKey && (i.value = !1);
             break;
         }
     }, b = (e) => {
-      u.value = e;
+      s.value = e;
     };
-    O(() => {
-      document.addEventListener("keydown", v);
+    T(() => {
+      document.addEventListener("keydown", w);
     }), _(() => {
-      document.removeEventListener("keydown", v);
+      document.removeEventListener("keydown", w);
     });
-    const I = w(() => {
-      const { onFilterChanged: e, ...t } = k;
+    const x = k(() => {
+      const { onFilterChanged: e, ...t } = S;
       return t;
     }), A = (e) => {
-      s.value = e, n.value = o.options.findIndex((t) => t.key === e);
-    }, x = () => i.value = !0, B = (e) => c(o.modelValue.filter((t) => t.key !== e.key)), L = w(() => o.multiple ? o.options : o.options.filter((e) => e.label !== d.value));
+      u.value = e, a.value = o.options.findIndex((t) => t.key === e);
+    }, V = () => i.value = !0, B = (e) => c(o.modelValue.filter((t) => t.key !== e.key)), C = k(() => o.multiple ? o.options : o.options.filter((e) => e.label !== d.value));
     return {
       dropdown: p,
+      searchInput: h,
       open: i,
-      highlightedKey: s,
+      highlightedKey: u,
       filter: d,
-      sanitizedAttributes: I,
-      computedOptions: L,
-      dropdownPlacement: u,
+      sanitizedAttributes: x,
+      computedOptions: C,
+      dropdownPlacement: s,
       onPlacement: b,
-      onFilterChange: y,
-      clickOption: g,
+      onFilterChange: g,
+      clickOption: v,
       changeHighlighted: A,
-      showOptions: x,
+      showOptions: V,
       removeSelected: B
     };
   }
 });
 export {
-  X as default
+  $ as default
 };
 //# sourceMappingURL=NeonSearch.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NeonSearch.es.js","sources":["../../../../src/components/user-input/search/NeonSearch.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { 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.Primary },\n    /**\n     * Placement of the dropdown contents.\n     */\n    placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n  },\n  emits: [\n    /**\n     * emitted when the user changes the selection.\n     * @type {string | 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 | undefined>(props.placement);\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      dropdownPlacement,\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","NeonDropdownPlacement","props","emit","attrs","useAttrs","dropdown","ref","dropdownPlacement","open","highlightedKey","highlightedIndex","filter","watch","isReverse","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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"}
+{"version":3,"file":"NeonSearch.es.js","sources":["../../../../src/components/user-input/search/NeonSearch.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { 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';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\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.Primary },\n    /**\n     * The HTML autocomplete mode as specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\">here</a>.\n     * NOTE: No enum is provided in Neon as some values can be used in combination, please refer to the full list of values in the preceding link.\n     */\n    autocomplete: { type: String, default: 'on' },\n    /**\n     * The HTML input mode as specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode\">here</a>.\n     * This can be used to simplify populating the filter field, e.g. providing the user's country from their address.\n     */\n    inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Text },\n    /**\n     * Placement of the dropdown contents.\n     */\n    placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n  },\n  emits: [\n    /**\n     * emitted when the user changes the selection.\n     * @type {string | 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<InstanceType<typeof NeonDropdown> | null>(null);\n    const searchInput = ref<InstanceType<typeof NeonInput> | null>(null);\n    const dropdownPlacement = ref<NeonDropdownPlacement | undefined>(props.placement);\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 onNavigate = () => {\n      const element: HTMLElement | null = dropdown.value?.dropdownContent?.querySelector(\n        '.neon-search__option--highlighted',\n      ) as HTMLElement;\n\n      if (element) {\n        element.focus();\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 <= props.options.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = props.options[highlightedIndex.value].key;\n        $event.preventDefault();\n        setTimeout(onNavigate);\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 && props.modelValue !== '') {\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 (\n              document.activeElement !== searchInput.value?.neonInput &&\n              !$event.ctrlKey &&\n              !$event.metaKey &&\n              !$event.altKey\n            ) {\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      searchInput,\n      open,\n      highlightedKey,\n      filter,\n      sanitizedAttributes,\n      computedOptions,\n      dropdownPlacement,\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","NeonInputMode","NeonDropdownPlacement","props","emit","attrs","useAttrs","dropdown","ref","searchInput","dropdownPlacement","open","highlightedKey","highlightedIndex","filter","watch","isReverse","onNavigate","element","_b","_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.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const d=require("./NeonSearch.cjs.js"),o=require("vue"),p=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),c={class:"neon-search__wrapper"},u={class:"no-style neon-search__options"},m=["id","onMouseover","onClickCapture","onSpaceCapture","onEnterCapture"],h={class:"neon-search__option-container"},k={class:"neon-search__option-label"};function b(e,l,C,V,y,w){const a=o.resolveComponent("neon-icon"),s=o.resolveComponent("neon-chip"),t=o.resolveComponent("neon-input"),i=o.resolveComponent("neon-dropdown");return o.openBlock(),o.createElementBlock("div",c,[o.createVNode(i,o.mergeProps({ref:"dropdown",modelValue:e.open,"onUpdate:modelValue":l[3]||(l[3]=n=>e.open=n),"aria-activedescendant":e.multiple&&Array.isArray(e.modelValue)?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,placement:e.dropdownPlacement,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,{disabled:e.disabled,class:"neon-search__search-icon",color:"low-contrast",name:"search"},null,8,["disabled"]),e.multiple&&Array.isArray(e.modelValue)?(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:g=>e.removeSelected(n)},null,8,["id","class","color","disabled","label","size","onClose"]))),128)):o.createCommentVNode("",!0),o.createVNode(t,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()),onKeydownCapture:l[1]||(l[1]=o.withKeys(o.withModifiers(()=>{},["prevent","stop"]),["enter"])),"onUpdate:modelValue":e.onFilterChange,onIconClick:l[2]||(l[2]=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",onMouseover:r=>e.changeHighlighted(n.key),onClickCapture:o.withModifiers(r=>e.clickOption(n),["stop","prevent"]),onSpaceCapture:o.withModifiers(r=>e.clickOption(n),["stop","prevent"]),onEnterCapture:o.withModifiers(r=>e.clickOption(n),["stop","prevent"])},[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",k,o.toDisplayString(n.label),1)])])],42,m))),128))])]),_:3},16,["modelValue","aria-activedescendant","aria-multiselectable","class","color","disabled","placement","size","onDropdownPlacement"])])}const v=p(d,[["render",b]]);module.exports=v;
+"use strict";const d=require("./NeonSearch.cjs.js"),o=require("vue"),p=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),c={class:"neon-search__wrapper"},u={class:"no-style neon-search__options"},m=["id","onMouseover","onClickCapture","onSpaceCapture","onEnterCapture"],h={class:"neon-search__option-container"},b={class:"neon-search__option-label"};function k(e,l,C,V,y,w){const a=o.resolveComponent("neon-icon"),s=o.resolveComponent("neon-chip"),t=o.resolveComponent("neon-input"),i=o.resolveComponent("neon-dropdown");return o.openBlock(),o.createElementBlock("div",c,[o.createVNode(i,o.mergeProps({ref:"dropdown",modelValue:e.open,"onUpdate:modelValue":l[3]||(l[3]=n=>e.open=n),"aria-activedescendant":e.multiple&&Array.isArray(e.modelValue)?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,placement:e.dropdownPlacement,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,{disabled:e.disabled,class:"neon-search__search-icon",color:"low-contrast",name:"search"},null,8,["disabled"]),e.multiple&&Array.isArray(e.modelValue)?(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:g=>e.removeSelected(n)},null,8,["id","class","color","disabled","label","size","onClose"]))),128)):o.createCommentVNode("",!0),o.createVNode(t,o.mergeProps({ref:"searchInput",autocomplete:e.autocomplete,color:e.color,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()),onKeydownCapture:l[1]||(l[1]=o.withKeys(o.withModifiers(()=>{},["prevent","stop"]),["enter"])),"onUpdate:modelValue":e.onFilterChange,onIconClick:l[2]||(l[2]=n=>e.onFilterChange(""))}),null,16,["autocomplete","color","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",tabindex:"0",onMouseover:r=>e.changeHighlighted(n.key),onClickCapture:o.withModifiers(r=>e.clickOption(n),["stop","prevent"]),onSpaceCapture:o.withModifiers(r=>e.clickOption(n),["stop","prevent"]),onEnterCapture:o.withModifiers(r=>e.clickOption(n),["stop","prevent"])},[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",b,o.toDisplayString(n.label),1)])])],42,m))),128))])]),_:3},16,["modelValue","aria-activedescendant","aria-multiselectable","class","color","disabled","placement","size","onDropdownPlacement"])])}const v=p(d,[["render",k]]);module.exports=v;
 //# sourceMappingURL=NeonSearch.vue.cjs.js.map