@aotearoan/neon 21.0.3 → 22.0.0

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

@@ -1,2 +1,2 @@
-"use strict";const o=require("vue"),A=require("../../../common/enums/NeonSize.cjs.js"),C=require("../../../common/enums/NeonFunctionalColor.cjs.js"),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;
+"use strict";const o=require("vue"),C=require("../../../common/enums/NeonSize.cjs.js"),B=require("../../../common/enums/NeonFunctionalColor.cjs.js"),L=require("../../presentation/dropdown/NeonDropdown.vue.cjs.js"),z=require("../../presentation/icon/NeonIcon.vue.cjs.js"),E=require("../input/NeonInput.vue.cjs.js"),O=require("../chip/NeonChip.vue.cjs.js"),c=require("../../../common/enums/NeonDropdownPlacement.cjs.js"),T=require("../../../common/utils/NeonScrollUtils.cjs.js"),U=require("../../../common/enums/NeonInputMode.cjs.js"),_=o.defineComponent({name:"NeonSearch",components:{NeonChip:O,NeonDropdown:L,NeonIcon:z,NeonInput:E},props:{modelValue:{type:[Object,Array]},placeholder:{type:String,required:!0},options:{type:Array,required:!0},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},size:{type:String,default:C.NeonSize.Medium},color:{type:String,default:B.NeonFunctionalColor.Primary},autocomplete:{type:String,default:"on"},inputmode:{type:String,default:U.NeonInputMode.Text},placement:{type:String,default:c.NeonDropdownPlacement.BottomLeft}},emits:["update:modelValue","filter-changed"],setup(t,{emit:f}){var N;const k=o.useAttrs(),h=o.ref(null),y=o.ref(null),d=o.ref(t.placement),i=o.ref(!1),u=o.ref(null),a=o.ref(-1),r=o.ref(!t.multiple&&((N=t.modelValue)==null?void 0:N.label)||"");o.watch(()=>i.value,e=>{e&&t.options.length>0&&(u.value=t.options[0].key,a.value=0)}),o.watch(()=>t.modelValue,e=>{t.multiple||(r.value=(e==null?void 0:e.label)||"")});const S=()=>{switch(d.value){case c.NeonDropdownPlacement.TopLeft:case c.NeonDropdownPlacement.TopRight:case c.NeonDropdownPlacement.LeftBottom:case c.NeonDropdownPlacement.RightBottom:return!0}return!1},q=()=>{var n,l;const e=(l=(n=h.value)==null?void 0:n.dropdownContent)==null?void 0:l.querySelector(".neon-search__option--highlighted");e&&(e.focus(),T.NeonScrollUtils.scrollIntoView(e))},g=(e,n)=>{const l=a.value+e;l>=0&&l<=t.options.length-1&&(a.value=l,u.value=t.options[a.value].key,n.preventDefault(),setTimeout(q))},s=e=>{f("update:modelValue",e)},v=e=>{!t.multiple&&t.modelValue&&s(null),r.value=e,f("filter-changed",e)},p=e=>{if(t.multiple){const n=t.modelValue.map(m=>m),l=n.findIndex(m=>m.key===e.key);l>=0?n.splice(l,1):n.push(e),s(n)}else s(e);v(t.multiple?"":e.label.toString())},w=e=>{var n;if(i.value)switch(e.code){case"ArrowUp":case"ArrowDown":{const l=S()?-1:1;e.code==="ArrowUp"?g(-1*l,e):g(1*l,e)}break;case"Enter":case"Space":e.target.classList.contains("neon-search__input")||(p(t.options[a.value]),e.preventDefault());break;case"Tab":document.activeElement!==((n=y.value)==null?void 0:n.neonInput)&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(i.value=!1);break}},b=e=>{d.value=e};o.onMounted(()=>{document.addEventListener("keydown",w)}),o.onUnmounted(()=>{document.removeEventListener("keydown",w)});const I=o.computed(()=>{const{onFilterChanged:e,...n}=k;return n}),D=e=>{u.value=e,a.value=t.options.findIndex(n=>n.key===e)},A=()=>i.value=!0,P=e=>s(t.modelValue.filter(n=>n.key!==e.key)),V=o.computed(()=>t.multiple?t.options:t.options.filter(e=>e.label!==r.value)),x=o.computed(()=>{var e;return t.multiple&&Array.isArray(t.modelValue)?t.modelValue[0]&&t.modelValue[0].key:((e=t.modelValue)==null?void 0:e.key)||null});return{dropdown:h,searchInput:y,open:i,highlightedKey:u,filter:r,sanitizedAttributes:I,computedOptions:V,dropdownPlacement:d,onPlacement:b,onFilterChange:v,clickOption:p,changeHighlighted:D,showOptions:A,removeSelected:P,activeDescendant:x}}});module.exports=_;
 //# 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';\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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"}
+{"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     * The selected model value(s). In the case of single select this should be set to a single NeonSearchOption or null.\n     * In the case of multiple selection (multiple=true) pass an Array of selected NeonSearchOptions or an empty array\n     * if nothing is selected.\n     */\n    modelValue: { type: [Object as () => NeonSearchOption, Array as () => Array<NeonSearchOption>] },\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     * @type {NeonSearchOption | NeonSearchOption[] | null} either the selected option (single select) or an array of\n     * the selected options (multi-select). In the case nothing is selected in single select mode <null> is returned &\n     * for multiple selection an empty array is returned.\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\n    const filter = ref<string>((!props.multiple && (props.modelValue as NeonSearchOption | null)?.label) || '');\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    watch(\n      () => props.modelValue,\n      (modelValue) => {\n        if (!props.multiple) {\n          filter.value = (modelValue as NeonSearchOption | null)?.label || '';\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: NeonSearchOption | NeonSearchOption[] | null) => {\n      emit('update:modelValue', value);\n    };\n\n    const onFilterChange = (_filter: string) => {\n      if (!props.multiple && props.modelValue) {\n        emitInputEvent(null);\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);\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    const activeDescendant = computed(() =>\n      props.multiple && Array.isArray(props.modelValue)\n        ? props.modelValue[0] && props.modelValue[0].key\n        : (props.modelValue as NeonSearchOption)?.key || null,\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      activeDescendant,\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","_a","watch","modelValue","isReverse","onNavigate","element","_b","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","activeDescendant"],"mappings":"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"}

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

@@ -1,27 +1,28 @@
-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 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 U from "../chip/NeonChip.vue.es.js";
-import { NeonDropdownPlacement as r } from "../../../common/enums/NeonDropdownPlacement.es.js";
-import { NeonScrollUtils as F } from "../../../common/utils/NeonScrollUtils.es.js";
-import { NeonInputMode as M } from "../../../common/enums/NeonInputMode.es.js";
-const $ = L({
+import { defineComponent as O, useAttrs as T, ref as l, watch as b, onMounted as _, onUnmounted as z, computed as f } from "vue";
+import { NeonSize as K } from "../../../common/enums/NeonSize.es.js";
+import { NeonFunctionalColor as P } from "../../../common/enums/NeonFunctionalColor.es.js";
+import U from "../../presentation/dropdown/NeonDropdown.vue.es.js";
+import q from "../../presentation/icon/NeonIcon.vue.es.js";
+import F from "../input/NeonInput.vue.es.js";
+import M from "../chip/NeonChip.vue.es.js";
+import { NeonDropdownPlacement as u } from "../../../common/enums/NeonDropdownPlacement.es.js";
+import { NeonScrollUtils as R } from "../../../common/utils/NeonScrollUtils.es.js";
+import { NeonInputMode as H } from "../../../common/enums/NeonInputMode.es.js";
+const te = O({
   name: "NeonSearch",
   components: {
-    NeonChip: U,
-    NeonDropdown: K,
-    NeonIcon: O,
-    NeonInput: P
+    NeonChip: M,
+    NeonDropdown: U,
+    NeonIcon: q,
+    NeonInput: F
   },
   props: {
     /**
-     * Either a string indicating the key of the selected option ('' if there is no selection) or an array of selected
-     * NeonSearchOption in the case when multiple = true (necessary to display them as chips).
+     * The selected model value(s). In the case of single select this should be set to a single NeonSearchOption or null.
+     * In the case of multiple selection (multiple=true) pass an Array of selected NeonSearchOptions or an empty array
+     * if nothing is selected.
      */
-    modelValue: { type: [String, Array], required: !0 },
+    modelValue: { type: [Object, Array] },
     /**
      * Placeholder to display in search input when there is no search string entered.
      */
@@ -41,11 +42,11 @@ const $ = L({
     /**
      * The size of the dropdown - Small, Medium or Large.
      */
-    size: { type: String, default: q.Medium },
+    size: { type: String, default: K.Medium },
     /**
      * The color of the search.
      */
-    color: { type: String, default: z.Primary },
+    color: { type: String, default: P.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.
@@ -55,17 +56,17 @@ const $ = L({
      * 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 },
+    inputmode: { type: String, default: H.Text },
     /**
      * Placement of the dropdown contents.
      */
-    placement: { type: String, default: r.BottomLeft }
+    placement: { type: String, default: u.BottomLeft }
   },
   emits: [
     /**
-     * emitted when the user changes the selection.
-     * @type {string | NeonSearchOption[]} either the selected option's key (single select) or an array of the
-     * selected options (multi-select).
+     * @type {NeonSearchOption | NeonSearchOption[] | null} either the selected option (single select) or an array of
+     * the selected options (multi-select). In the case nothing is selected in single select mode <null> is returned &
+     * for multiple selection an empty array is returned.
      */
     "update:modelValue",
     /**
@@ -74,95 +75,107 @@ const $ = L({
      */
     "filter-changed"
   ],
-  setup(o, { emit: f }) {
-    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(
+  setup(t, { emit: y }) {
+    var S;
+    const I = T(), h = l(null), p = l(null), d = l(t.placement), i = l(!1), c = l(null), a = l(-1), r = l(!t.multiple && ((S = t.modelValue) == null ? void 0 : S.label) || "");
+    b(
       () => i.value,
       (e) => {
-        e && o.options.length > 0 && (u.value = o.options[0].key, a.value = 0);
+        e && t.options.length > 0 && (c.value = t.options[0].key, a.value = 0);
+      }
+    ), b(
+      () => t.modelValue,
+      (e) => {
+        t.multiple || (r.value = (e == null ? void 0 : e.label) || "");
       }
     );
-    const I = () => {
-      switch (s.value) {
-        case r.TopLeft:
-        case r.TopRight:
-        case r.LeftBottom:
-        case r.RightBottom:
+    const N = () => {
+      switch (d.value) {
+        case u.TopLeft:
+        case u.TopRight:
+        case u.LeftBottom:
+        case u.RightBottom:
           return !0;
       }
       return !1;
-    }, N = () => {
-      var t, n;
-      const e = (n = (t = p.value) == null ? void 0 : t.dropdownContent) == null ? void 0 : n.querySelector(
+    }, A = () => {
+      var n, o;
+      const e = (o = (n = h.value) == null ? void 0 : n.dropdownContent) == null ? void 0 : o.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);
-    }, g = (e) => {
-      !o.multiple && o.modelValue !== "" && c(""), d.value = e, f("filter-changed", e);
+      e && (e.focus(), R.scrollIntoView(e));
+    }, g = (e, n) => {
+      const o = a.value + e;
+      o >= 0 && o <= t.options.length - 1 && (a.value = o, c.value = t.options[a.value].key, n.preventDefault(), setTimeout(A));
+    }, s = (e) => {
+      y("update:modelValue", e);
     }, v = (e) => {
-      if (o.multiple) {
-        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);
-      g(o.multiple ? "" : e.label.toString());
+      !t.multiple && t.modelValue && s(null), r.value = e, y("filter-changed", e);
     }, w = (e) => {
-      var t;
+      if (t.multiple) {
+        const n = t.modelValue.map((m) => m), o = n.findIndex((m) => m.key === e.key);
+        o >= 0 ? n.splice(o, 1) : n.push(e), s(n);
+      } else
+        s(e);
+      v(t.multiple ? "" : e.label.toString());
+    }, k = (e) => {
+      var n;
       if (i.value)
         switch (e.code) {
           case "ArrowUp":
           case "ArrowDown":
             {
-              const n = I() ? -1 : 1;
-              e.code === "ArrowUp" ? y(-1 * n, e) : y(1 * n, e);
+              const o = N() ? -1 : 1;
+              e.code === "ArrowUp" ? g(-1 * o, e) : g(1 * o, e);
             }
             break;
           case "Enter":
           case "Space":
-            e.target.classList.contains("neon-search__input") || (v(o.options[a.value]), e.preventDefault());
+            e.target.classList.contains("neon-search__input") || (w(t.options[a.value]), e.preventDefault());
             break;
           case "Tab":
-            document.activeElement !== ((t = h.value) == null ? void 0 : t.neonInput) && !e.ctrlKey && !e.metaKey && !e.altKey && (i.value = !1);
+            document.activeElement !== ((n = p.value) == null ? void 0 : n.neonInput) && !e.ctrlKey && !e.metaKey && !e.altKey && (i.value = !1);
             break;
         }
-    }, b = (e) => {
-      s.value = e;
+    }, V = (e) => {
+      d.value = e;
     };
-    T(() => {
-      document.addEventListener("keydown", w);
-    }), _(() => {
-      document.removeEventListener("keydown", w);
+    _(() => {
+      document.addEventListener("keydown", k);
+    }), z(() => {
+      document.removeEventListener("keydown", k);
     });
-    const x = k(() => {
-      const { onFilterChanged: e, ...t } = S;
-      return t;
-    }), A = (e) => {
-      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));
+    const x = f(() => {
+      const { onFilterChanged: e, ...n } = I;
+      return n;
+    }), B = (e) => {
+      c.value = e, a.value = t.options.findIndex((n) => n.key === e);
+    }, C = () => i.value = !0, D = (e) => s(t.modelValue.filter((n) => n.key !== e.key)), L = f(() => t.multiple ? t.options : t.options.filter((e) => e.label !== r.value)), E = f(
+      () => {
+        var e;
+        return t.multiple && Array.isArray(t.modelValue) ? t.modelValue[0] && t.modelValue[0].key : ((e = t.modelValue) == null ? void 0 : e.key) || null;
+      }
+    );
     return {
-      dropdown: p,
-      searchInput: h,
+      dropdown: h,
+      searchInput: p,
       open: i,
-      highlightedKey: u,
-      filter: d,
+      highlightedKey: c,
+      filter: r,
       sanitizedAttributes: x,
-      computedOptions: C,
-      dropdownPlacement: s,
-      onPlacement: b,
-      onFilterChange: g,
-      clickOption: v,
-      changeHighlighted: A,
-      showOptions: V,
-      removeSelected: B
+      computedOptions: L,
+      dropdownPlacement: d,
+      onPlacement: V,
+      onFilterChange: v,
+      clickOption: w,
+      changeHighlighted: B,
+      showOptions: C,
+      removeSelected: D,
+      activeDescendant: E
     };
   }
 });
 export {
-  $ as default
+  te 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';\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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"}
+{"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     * The selected model value(s). In the case of single select this should be set to a single NeonSearchOption or null.\n     * In the case of multiple selection (multiple=true) pass an Array of selected NeonSearchOptions or an empty array\n     * if nothing is selected.\n     */\n    modelValue: { type: [Object as () => NeonSearchOption, Array as () => Array<NeonSearchOption>] },\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     * @type {NeonSearchOption | NeonSearchOption[] | null} either the selected option (single select) or an array of\n     * the selected options (multi-select). In the case nothing is selected in single select mode <null> is returned &\n     * for multiple selection an empty array is returned.\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\n    const filter = ref<string>((!props.multiple && (props.modelValue as NeonSearchOption | null)?.label) || '');\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    watch(\n      () => props.modelValue,\n      (modelValue) => {\n        if (!props.multiple) {\n          filter.value = (modelValue as NeonSearchOption | null)?.label || '';\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: NeonSearchOption | NeonSearchOption[] | null) => {\n      emit('update:modelValue', value);\n    };\n\n    const onFilterChange = (_filter: string) => {\n      if (!props.multiple && props.modelValue) {\n        emitInputEvent(null);\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);\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    const activeDescendant = computed(() =>\n      props.multiple && Array.isArray(props.modelValue)\n        ? props.modelValue[0] && props.modelValue[0].key\n        : (props.modelValue as NeonSearchOption)?.key || null,\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      activeDescendant,\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","_a","watch","modelValue","isReverse","onNavigate","element","_b","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","activeDescendant"],"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"},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;
+"use strict";const d=require("./NeonSearch.cjs.js"),o=require("vue"),c=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),p={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,w,y){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",p,[o.createVNode(i,o.mergeProps({ref:"dropdown",modelValue:e.open,"onUpdate:modelValue":l[3]||(l[3]=n=>e.open=n),"aria-activedescendant":e.activeDescendant,"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,"model-Value":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","model-Value","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=c(d,[["render",k]]);module.exports=v;
 //# sourceMappingURL=NeonSearch.vue.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NeonSearch.vue.cjs.js","sources":["../../../../src/components/user-input/search/NeonSearch.vue"],"sourcesContent":["<template>\n  <div class=\"neon-search__wrapper\">\n    <neon-dropdown\n      ref=\"dropdown\"\n      v-model=\"open\"\n      :aria-activedescendant=\"multiple && Array.isArray(modelValue) ? modelValue[0] && modelValue[0].key : modelValue\"\n      :aria-multiselectable=\"multiple\"\n      :class=\"[\n        `neon-search--${color}`,\n        {\n          'neon-search--multiple': multiple,\n          'neon-search--disabled': disabled,\n          'neon-search--empty': computedOptions.length === 0,\n        },\n      ]\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :placement=\"dropdownPlacement\"\n      :size=\"size\"\n      class=\"neon-search\"\n      role=\"listbox\"\n      v-bind=\"sanitizedAttributes\"\n      @dropdown-placement=\"onPlacement\"\n    >\n      <template #dropdown-button>\n        <div\n          ref=\"dropdownButton\"\n          :class=\"[\n            `neon-search__container--${size}`,\n            `neon-search__container--${color}`,\n            { 'neon-search__container--disabled': disabled },\n          ]\"\n          class=\"neon-search__container\"\n        >\n          <neon-icon :disabled=\"disabled\" class=\"neon-search__search-icon\" color=\"low-contrast\" name=\"search\" />\n          <template v-if=\"multiple && Array.isArray(modelValue)\">\n            <neon-chip\n              v-for=\"(selected, index) in modelValue\"\n              :id=\"selected.key\"\n              :key=\"selected.key\"\n              :class=\"{ 'neon-chip--last-chip': index === modelValue.length - 1 }\"\n              :color=\"selected.chipColor\"\n              :disabled=\"disabled\"\n              :label=\"selected.label\"\n              :size=\"size\"\n              action=\"remove\"\n              aria-selected=\"true\"\n              role=\"option\"\n              @close=\"removeSelected(selected)\"\n            />\n          </template>\n          <neon-input\n            ref=\"searchInput\"\n            :autocomplete=\"autocomplete\"\n            :color=\"color\"\n            :disabled=\"disabled\"\n            :modelValue=\"filter\"\n            :placeholder=\"placeholder\"\n            :size=\"size\"\n            class=\"neon-search__input\"\n            v-bind=\"sanitizedAttributes\"\n            @focus=\"showOptions()\"\n            @keydown.enter.prevent.stop.capture=\"\"\n            @update:modelValue=\"onFilterChange\"\n            @icon-click=\"onFilterChange('')\"\n          />\n        </div>\n      </template>\n      <template #default>\n        <ul class=\"no-style neon-search__options\">\n          <li\n            v-for=\"option in computedOptions\"\n            :id=\"option.key\"\n            :key=\"option.key\"\n            :class=\"[\n              {\n                'neon-search__option--separator-before': option.separatorBefore,\n                'neon-search__option--highlighted': option.key === highlightedKey,\n              },\n              `neon-search__option--${size}`,\n            ]\"\n            aria-selected=\"false\"\n            class=\"neon-search__option\"\n            role=\"option\"\n            tabindex=\"0\"\n            @mouseover=\"changeHighlighted(option.key)\"\n            @click.stop.prevent.capture=\"clickOption(option)\"\n            @space.stop.prevent.capture=\"clickOption(option)\"\n            @enter.stop.prevent.capture=\"clickOption(option)\"\n          >\n            <div class=\"neon-search__option-container\">\n              <!-- @slot provide a custom template for an option.<br />Bindings: <strong>option</strong>\n              (<em>NeonSearchOption</em>). This slot is purely for formatting the option, all accessibility actions\n              still apply. -->\n              <slot :option=\"option\" name=\"option\">\n                <neon-icon v-if=\"option.icon\" :name=\"option.icon\" class=\"neon-search__option-icon\" />\n                <span class=\"neon-search__option-label\">{{ option.label }}</span>\n              </slot>\n            </div>\n          </li>\n        </ul>\n      </template>\n    </neon-dropdown>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonSearch.ts\"></script>\n"],"names":["_hoisted_1","_hoisted_2","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_createVNode","_component_neon_dropdown","_mergeProps","_ctx","$event","_createElementVNode","_normalizeClass","_component_neon_icon","_Fragment","_renderList","selected","index","_createBlock","_component_neon_chip","_component_neon_input","option","_withModifiers","_renderSlot","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"NeonSearch.vue.cjs.js","sources":["../../../../src/components/user-input/search/NeonSearch.vue"],"sourcesContent":["<template>\n  <div class=\"neon-search__wrapper\">\n    <neon-dropdown\n      ref=\"dropdown\"\n      v-model=\"open\"\n      :aria-activedescendant=\"activeDescendant\"\n      :aria-multiselectable=\"multiple\"\n      :class=\"[\n        `neon-search--${color}`,\n        {\n          'neon-search--multiple': multiple,\n          'neon-search--disabled': disabled,\n          'neon-search--empty': computedOptions.length === 0,\n        },\n      ]\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :placement=\"dropdownPlacement\"\n      :size=\"size\"\n      class=\"neon-search\"\n      role=\"listbox\"\n      v-bind=\"sanitizedAttributes\"\n      @dropdown-placement=\"onPlacement\"\n    >\n      <template #dropdown-button>\n        <div\n          ref=\"dropdownButton\"\n          :class=\"[\n            `neon-search__container--${size}`,\n            `neon-search__container--${color}`,\n            { 'neon-search__container--disabled': disabled },\n          ]\"\n          class=\"neon-search__container\"\n        >\n          <neon-icon :disabled=\"disabled\" class=\"neon-search__search-icon\" color=\"low-contrast\" name=\"search\" />\n          <template v-if=\"multiple && Array.isArray(modelValue)\">\n            <neon-chip\n              v-for=\"(selected, index) in modelValue\"\n              :id=\"selected.key\"\n              :key=\"selected.key\"\n              :class=\"{ 'neon-chip--last-chip': index === modelValue.length - 1 }\"\n              :color=\"selected.chipColor\"\n              :disabled=\"disabled\"\n              :label=\"selected.label\"\n              :size=\"size\"\n              action=\"remove\"\n              aria-selected=\"true\"\n              role=\"option\"\n              @close=\"removeSelected(selected)\"\n            />\n          </template>\n          <neon-input\n            ref=\"searchInput\"\n            :autocomplete=\"autocomplete\"\n            :color=\"color\"\n            :disabled=\"disabled\"\n            :model-Value=\"filter\"\n            :placeholder=\"placeholder\"\n            :size=\"size\"\n            class=\"neon-search__input\"\n            v-bind=\"sanitizedAttributes\"\n            @focus=\"showOptions()\"\n            @keydown.enter.prevent.stop.capture=\"\"\n            @update:modelValue=\"onFilterChange\"\n            @icon-click=\"onFilterChange('')\"\n          />\n        </div>\n      </template>\n      <template #default>\n        <ul class=\"no-style neon-search__options\">\n          <li\n            v-for=\"option in computedOptions\"\n            :id=\"option.key\"\n            :key=\"option.key\"\n            :class=\"[\n              {\n                'neon-search__option--separator-before': option.separatorBefore,\n                'neon-search__option--highlighted': option.key === highlightedKey,\n              },\n              `neon-search__option--${size}`,\n            ]\"\n            aria-selected=\"false\"\n            class=\"neon-search__option\"\n            role=\"option\"\n            tabindex=\"0\"\n            @mouseover=\"changeHighlighted(option.key)\"\n            @click.stop.prevent.capture=\"clickOption(option)\"\n            @space.stop.prevent.capture=\"clickOption(option)\"\n            @enter.stop.prevent.capture=\"clickOption(option)\"\n          >\n            <div class=\"neon-search__option-container\">\n              <!-- @slot provide a custom template for an option.<br />Bindings: <strong>option</strong>\n              (<em>NeonSearchOption</em>). This slot is purely for formatting the option, all accessibility actions\n              still apply. -->\n              <slot :option=\"option\" name=\"option\">\n                <neon-icon v-if=\"option.icon\" :name=\"option.icon\" class=\"neon-search__option-icon\" />\n                <span class=\"neon-search__option-label\">{{ option.label }}</span>\n              </slot>\n            </div>\n          </li>\n        </ul>\n      </template>\n    </neon-dropdown>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonSearch.ts\"></script>\n"],"names":["_hoisted_1","_hoisted_2","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_createVNode","_component_neon_dropdown","_mergeProps","_ctx","$event","_createElementVNode","_normalizeClass","_component_neon_icon","_Fragment","_renderList","selected","index","_createBlock","_component_neon_chip","_component_neon_input","option","_withModifiers","_renderSlot","_toDisplayString"],"mappings":"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"}

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

@@ -1,15 +1,15 @@
-import V from "./NeonSearch.es.js";
-import { resolveComponent as r, openBlock as l, createElementBlock as s, createVNode as d, mergeProps as u, withCtx as m, createElementVNode as i, Fragment as h, renderList as b, withModifiers as t, normalizeClass as p, renderSlot as $, createBlock as v, createCommentVNode as y, toDisplayString as w, withKeys as g } from "vue";
-import z from "../../../_virtual/_plugin-vue_export-helper.es.js";
-const A = { class: "neon-search__wrapper" }, O = { class: "no-style neon-search__options" }, S = ["id", "onMouseover", "onClickCapture", "onSpaceCapture", "onEnterCapture"], _ = { class: "neon-search__option-container" }, B = { class: "neon-search__option-label" };
-function P(e, n, E, F, N, D) {
-  const c = r("neon-icon"), k = r("neon-chip"), C = r("neon-input"), f = r("neon-dropdown");
-  return l(), s("div", A, [
+import $ from "./NeonSearch.es.js";
+import { resolveComponent as r, openBlock as l, createElementBlock as s, createVNode as d, mergeProps as u, withCtx as m, createElementVNode as i, Fragment as h, renderList as b, withModifiers as t, normalizeClass as p, renderSlot as w, createBlock as v, createCommentVNode as k, toDisplayString as g, withKeys as z } from "vue";
+import V from "../../../_virtual/_plugin-vue_export-helper.es.js";
+const _ = { class: "neon-search__wrapper" }, O = { class: "no-style neon-search__options" }, S = ["id", "onMouseover", "onClickCapture", "onSpaceCapture", "onEnterCapture"], B = { class: "neon-search__option-container" }, P = { class: "neon-search__option-label" };
+function A(e, n, D, E, F, N) {
+  const c = r("neon-icon"), C = r("neon-chip"), y = r("neon-input"), f = r("neon-dropdown");
+  return l(), s("div", _, [
     d(f, u({
       ref: "dropdown",
       modelValue: e.open,
       "onUpdate:modelValue": n[3] || (n[3] = (o) => e.open = o),
-      "aria-activedescendant": e.multiple && Array.isArray(e.modelValue) ? e.modelValue[0] && e.modelValue[0].key : e.modelValue,
+      "aria-activedescendant": e.activeDescendant,
       "aria-multiselectable": e.multiple,
       class: [[
         `neon-search--${e.color}`,
@@ -40,7 +40,7 @@ function P(e, n, E, F, N, D) {
             color: "low-contrast",
             name: "search"
           }, null, 8, ["disabled"]),
-          e.multiple && Array.isArray(e.modelValue) ? (l(!0), s(h, { key: 0 }, b(e.modelValue, (o, a) => (l(), v(k, {
+          e.multiple && Array.isArray(e.modelValue) ? (l(!0), s(h, { key: 0 }, b(e.modelValue, (o, a) => (l(), v(C, {
             id: o.key,
             key: o.key,
             class: p({ "neon-chip--last-chip": a === e.modelValue.length - 1 }),
@@ -52,23 +52,23 @@ function P(e, n, E, F, N, D) {
             "aria-selected": "true",
             role: "option",
             onClose: (K) => e.removeSelected(o)
-          }, null, 8, ["id", "class", "color", "disabled", "label", "size", "onClose"]))), 128)) : y("", !0),
-          d(C, u({
+          }, null, 8, ["id", "class", "color", "disabled", "label", "size", "onClose"]))), 128)) : k("", !0),
+          d(y, u({
             ref: "searchInput",
             autocomplete: e.autocomplete,
             color: e.color,
             disabled: e.disabled,
-            modelValue: e.filter,
+            "model-Value": e.filter,
             placeholder: e.placeholder,
             size: e.size,
             class: "neon-search__input"
           }, e.sanitizedAttributes, {
             onFocus: n[0] || (n[0] = (o) => e.showOptions()),
-            onKeydownCapture: n[1] || (n[1] = g(t(() => {
+            onKeydownCapture: n[1] || (n[1] = z(t(() => {
             }, ["prevent", "stop"]), ["enter"])),
             "onUpdate:modelValue": e.onFilterChange,
             onIconClick: n[2] || (n[2] = (o) => e.onFilterChange(""))
-          }), null, 16, ["autocomplete", "color", "disabled", "modelValue", "placeholder", "size", "onUpdate:modelValue"])
+          }), null, 16, ["autocomplete", "color", "disabled", "model-Value", "placeholder", "size", "onUpdate:modelValue"])
         ], 2)
       ]),
       default: m(() => [
@@ -91,14 +91,14 @@ function P(e, n, E, F, N, D) {
             onSpaceCapture: t((a) => e.clickOption(o), ["stop", "prevent"]),
             onEnterCapture: t((a) => e.clickOption(o), ["stop", "prevent"])
           }, [
-            i("div", _, [
-              $(e.$slots, "option", { option: o }, () => [
+            i("div", B, [
+              w(e.$slots, "option", { option: o }, () => [
                 o.icon ? (l(), v(c, {
                   key: 0,
                   name: o.icon,
                   class: "neon-search__option-icon"
-                }, null, 8, ["name"])) : y("", !0),
-                i("span", B, w(o.label), 1)
+                }, null, 8, ["name"])) : k("", !0),
+                i("span", P, g(o.label), 1)
               ])
             ])
           ], 42, S))), 128))
@@ -108,7 +108,7 @@ function P(e, n, E, F, N, D) {
     }, 16, ["modelValue", "aria-activedescendant", "aria-multiselectable", "class", "color", "disabled", "placement", "size", "onDropdownPlacement"])
   ]);
 }
-const H = /* @__PURE__ */ z(V, [["render", P]]);
+const H = /* @__PURE__ */ V($, [["render", A]]);
 export {
   H as default
 };