@aotearoan/neon 21.0.2 → 22.0.0

package/dist/components/presentation/dropdown/NeonDropdown.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonDropdown.es.js","sources":["../../../../src/components/presentation/dropdown/NeonDropdown.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonDropdownPlacementUtils } from '@/common/utils/NeonDropdownPlacementUtils';\nimport { NeonClosableUtils } from '@/common/utils/NeonClosableUtils';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonDropdownStyle } from '@/common/enums/NeonDropdownStyle';\nimport NeonBadge from '@/components/presentation/badge/NeonBadge.vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\n\n/**\n * <p>A general purpose dropdown component. This component consists of a button, to trigger the dropdown to open, and\n * the dropdown content which is displayed above the page when the user clicks the button.</p>\n * <p>This can be useful for secondary (perhaps more complex) actions for which there is not enough space on the page or\n * the action is asynchronous allowing the user to perform the action and continue what they were doing. Examples are\n * providing links to copy and letting the user send feedback.</p>\n * <p><strong>NeonDropdown</strong> is the basis for the <strong>NeonDropdownMenu</strong> component and the\n * <strong>NeonSelect</strong> form component.</p>\n */\nexport default defineComponent({\n  name: 'NeonDropdown',\n  components: {\n    NeonBadge,\n    NeonButton,\n    NeonExpansionIndicator,\n  },\n  props: {\n    /**\n     * Id for the dropdown button.\n     */\n    id: { type: String },\n    /**\n     * Whether the dropdown is currently open.\n     */\n    modelValue: { type: Boolean, required: true },\n    /**\n     * The label for the dropdown button.\n     */\n    label: { type: String, default: null },\n    /**\n     * URL of image to display if the button style is a square or circular badge.\n     */\n    image: { type: String, default: null },\n    /**\n     * Badge image ALT text.\n     */\n    imageAlt: { type: String, default: null },\n    /**\n     * An icon to display on the dropdown button. This will be to the left of any label, but can also be used on its own.\n     */\n    icon: { type: String, default: null },\n    /**\n     * aria label of the button icon\n     */\n    iconAriaLabel: { type: String },\n    /**\n     * Show the dropdown button's indicator (chevron).\n     */\n    indicator: { type: Boolean, default: true },\n    /**\n     * Disable the dropdown button\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * The size of the dropdown button - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The color of the dropdown button\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * The alternate color of the dropdown button (for gradient buttons).\n     */\n    alternateColor: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * The style of the dropdown button\n     */\n    dropdownStyle: { type: String as () => NeonDropdownStyle, default: NeonDropdownStyle.SolidButton },\n    /**\n     * Placement of the dropdown contents.\n     */\n    placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n    /**\n     * Restrict placement to within this container.\n     */\n    placementContainer: { type: Object as () => HTMLElement, default: null },\n    /**\n     * Instead of opening on click (default), open on hover.\n     */\n    openOnHover: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Emitted when the dropdown button is toggled.\n     * @type {boolean} the open state of the dropdown.\n     */\n    'update:modelValue',\n    /**\n     * Emitted on initialisation.\n     * @type {NeonDropdownPlacement} the placement of the dropdown.\n     */\n    'dropdown-placement',\n    /**\n     * Emitted when the dropdown button is blurred.\n     * @type {void}\n     */\n    'blur',\n    /**\n     * Emitted when the dropdown button is focussed.\n     * @type {void}\n     */\n    'focus',\n    /**\n     * emitted on initialisation\n     * @type {HTMLElement} the reference to the HTMLElement for the dropdown menu button.\n     */\n    'button-ref',\n  ],\n  setup(props, { emit, expose }) {\n    const dropdownButton = ref<HTMLElement | null>(null);\n    const dropdownContent = ref<HTMLDivElement | null>(null);\n\n    const dropdownPlacement = ref<NeonDropdownPlacement>(props.placement);\n    const closableUtils = ref<NeonClosableUtils | null>(null);\n\n    const onClose = () => {\n      emit('update:modelValue', false);\n    };\n\n    const close = () => {\n      if (props.modelValue) {\n        onClose();\n      }\n    };\n\n    const recalculatePlacement = () => {\n      if (props.modelValue && dropdownButton.value && dropdownContent.value) {\n        const previousValue = dropdownPlacement.value;\n        dropdownPlacement.value = NeonDropdownPlacementUtils.calculatePlacement(\n          dropdownButton.value,\n          dropdownContent.value,\n          props.placement,\n          props.placementContainer,\n        );\n\n        if (previousValue !== dropdownPlacement.value) {\n          emit('dropdown-placement', dropdownPlacement.value);\n        }\n      }\n    };\n\n    const toggleOpen = () => {\n      if (!props.disabled && !props.openOnHover) {\n        emit('update:modelValue', !props.modelValue);\n        setTimeout(recalculatePlacement);\n      }\n    };\n\n    const isButtonStyle = computed<boolean>(() => props.dropdownStyle?.indexOf('badge') === -1);\n\n    const onBlur = () => {\n      emit('blur');\n    };\n\n    const onFocus = () => {\n      emit('focus');\n    };\n\n    onMounted(() => {\n      if (!props.openOnHover && dropdownContent.value) {\n        closableUtils.value = new NeonClosableUtils(dropdownContent.value, close);\n      }\n      window.addEventListener('resize', recalculatePlacement, { passive: true });\n      window.addEventListener('scroll', recalculatePlacement, { passive: true });\n      if (props.placementContainer) {\n        props.placementContainer.addEventListener('scroll', recalculatePlacement, { passive: true });\n      }\n    });\n\n    onUnmounted(() => {\n      if (!props.openOnHover) {\n        closableUtils.value && closableUtils.value.destroy();\n      }\n      window.removeEventListener('resize', recalculatePlacement);\n      window.removeEventListener('scroll', recalculatePlacement);\n      if (props.placementContainer) {\n        props.placementContainer.removeEventListener('scroll', recalculatePlacement);\n      }\n    });\n\n    watch(\n      () => dropdownButton.value,\n      (value) => emit('button-ref', value),\n      { immediate: true },\n    );\n\n    expose({ dropdownContent });\n\n    return {\n      dropdownButton,\n      dropdownContent,\n      dropdownPlacement,\n      closableUtils,\n      isButtonStyle,\n      onClose,\n      close,\n      toggleOpen,\n      onBlur,\n      onFocus,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonBadge","NeonButton","NeonExpansionIndicator","NeonSize","NeonFunctionalColor","NeonDropdownStyle","NeonDropdownPlacement","props","emit","expose","dropdownButton","ref","dropdownContent","dropdownPlacement","closableUtils","onClose","close","recalculatePlacement","previousValue","NeonDropdownPlacementUtils","toggleOpen","isButtonStyle","computed","_a","onBlur","onFocus","onMounted","NeonClosableUtils","onUnmounted","watch","value"],"mappings":"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"}
+{"version":3,"file":"NeonDropdown.es.js","sources":["../../../../src/components/presentation/dropdown/NeonDropdown.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref } from 'vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonDropdownPlacementUtils } from '@/common/utils/NeonDropdownPlacementUtils';\nimport { NeonClosableUtils } from '@/common/utils/NeonClosableUtils';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonDropdownStyle } from '@/common/enums/NeonDropdownStyle';\nimport NeonBadge from '@/components/presentation/badge/NeonBadge.vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\n\n/**\n * <p>A general purpose dropdown component. This component consists of a button, to trigger the dropdown to open, and\n * the dropdown content which is displayed above the page when the user clicks the button.</p>\n * <p>This can be useful for secondary (perhaps more complex) actions for which there is not enough space on the page or\n * the action is asynchronous allowing the user to perform the action and continue what they were doing. Examples are\n * providing links to copy and letting the user send feedback.</p>\n * <p><strong>NeonDropdown</strong> is the basis for the <strong>NeonDropdownMenu</strong> component and the\n * <strong>NeonSelect</strong> form component.</p>\n */\nexport default defineComponent({\n  name: 'NeonDropdown',\n  components: {\n    NeonBadge,\n    NeonButton,\n    NeonExpansionIndicator,\n  },\n  props: {\n    /**\n     * Id for the dropdown button.\n     */\n    id: { type: String },\n    /**\n     * Whether the dropdown is currently open.\n     */\n    modelValue: { type: Boolean, required: true },\n    /**\n     * The label for the dropdown button.\n     */\n    label: { type: String, default: null },\n    /**\n     * URL of image to display if the button style is a square or circular badge.\n     */\n    image: { type: String, default: null },\n    /**\n     * Badge image ALT text.\n     */\n    imageAlt: { type: String, default: null },\n    /**\n     * An icon to display on the dropdown button. This will be to the left of any label, but can also be used on its own.\n     */\n    icon: { type: String, default: null },\n    /**\n     * aria label of the button icon\n     */\n    iconAriaLabel: { type: String },\n    /**\n     * Show the dropdown button's indicator (chevron).\n     */\n    indicator: { type: Boolean, default: true },\n    /**\n     * Disable the dropdown button\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * The size of the dropdown button - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The color of the dropdown button\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * The alternate color of the dropdown button (for gradient buttons).\n     */\n    alternateColor: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * The style of the dropdown button\n     */\n    dropdownStyle: { type: String as () => NeonDropdownStyle, default: NeonDropdownStyle.SolidButton },\n    /**\n     * Placement of the dropdown contents.\n     */\n    placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n    /**\n     * Restrict placement to within this container.\n     */\n    placementContainer: { type: Object as () => HTMLElement, default: null },\n    /**\n     * Instead of opening on click (default), open on hover.\n     */\n    openOnHover: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Emitted when the dropdown button is toggled.\n     * @type {boolean} the open state of the dropdown.\n     */\n    'update:modelValue',\n    /**\n     * Emitted on initialisation.\n     * @type {NeonDropdownPlacement} the placement of the dropdown.\n     */\n    'dropdown-placement',\n    /**\n     * Emitted when the dropdown button is blurred.\n     * @type {void}\n     */\n    'blur',\n    /**\n     * Emitted when the dropdown button is focussed.\n     * @type {void}\n     */\n    'focus',\n  ],\n  setup(props, { emit, expose }) {\n    const dropdownButton = ref<HTMLElement | null>(null);\n    const dropdownContent = ref<HTMLDivElement | null>(null);\n\n    const dropdownPlacement = ref<NeonDropdownPlacement>(props.placement);\n    const closableUtils = ref<NeonClosableUtils | null>(null);\n\n    const onClose = () => {\n      emit('update:modelValue', false);\n    };\n\n    const close = () => {\n      if (props.modelValue) {\n        onClose();\n      }\n    };\n\n    const recalculatePlacement = () => {\n      if (props.modelValue && dropdownButton.value && dropdownContent.value) {\n        const previousValue = dropdownPlacement.value;\n        dropdownPlacement.value = NeonDropdownPlacementUtils.calculatePlacement(\n          dropdownButton.value,\n          dropdownContent.value,\n          props.placement,\n          props.placementContainer,\n        );\n\n        if (previousValue !== dropdownPlacement.value) {\n          emit('dropdown-placement', dropdownPlacement.value);\n        }\n      }\n    };\n\n    const toggleOpen = () => {\n      if (!props.disabled && !props.openOnHover) {\n        emit('update:modelValue', !props.modelValue);\n        setTimeout(recalculatePlacement);\n      }\n    };\n\n    const isButtonStyle = computed<boolean>(() => props.dropdownStyle?.indexOf('badge') === -1);\n\n    const onBlur = () => {\n      emit('blur');\n    };\n\n    const onFocus = () => {\n      emit('focus');\n    };\n\n    onMounted(() => {\n      if (!props.openOnHover && dropdownContent.value) {\n        closableUtils.value = new NeonClosableUtils(dropdownContent.value, close);\n      }\n      window.addEventListener('resize', recalculatePlacement, { passive: true });\n      window.addEventListener('scroll', recalculatePlacement, { passive: true });\n      if (props.placementContainer) {\n        props.placementContainer.addEventListener('scroll', recalculatePlacement, { passive: true });\n      }\n    });\n\n    onUnmounted(() => {\n      if (!props.openOnHover) {\n        closableUtils.value && closableUtils.value.destroy();\n      }\n      window.removeEventListener('resize', recalculatePlacement);\n      window.removeEventListener('scroll', recalculatePlacement);\n      if (props.placementContainer) {\n        props.placementContainer.removeEventListener('scroll', recalculatePlacement);\n      }\n    });\n\n    expose({ dropdownContent });\n\n    return {\n      dropdownButton,\n      dropdownContent,\n      dropdownPlacement,\n      closableUtils,\n      isButtonStyle,\n      onClose,\n      close,\n      toggleOpen,\n      onBlur,\n      onFocus,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonBadge","NeonButton","NeonExpansionIndicator","NeonSize","NeonFunctionalColor","NeonDropdownStyle","NeonDropdownPlacement","props","emit","expose","dropdownButton","ref","dropdownContent","dropdownPlacement","closableUtils","onClose","close","recalculatePlacement","previousValue","NeonDropdownPlacementUtils","toggleOpen","isButtonStyle","computed","_a","onBlur","onFocus","onMounted","NeonClosableUtils","onUnmounted"],"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"),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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"}