@aotearoan/neon 18.2.13 → 19.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"NeonSearch.cjs.js","sources":["../../../../src/components/user-input/search/NeonSearch.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport type { NeonSearchOption } from '@/common/models/NeonSearchOption';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport NeonChip from '@/components/user-input/chip/NeonChip.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/NeonScrollUtils';\n\n/**\n * <p>\n *   The <strong>NeonSearch</strong> component is equivalent to an HTML &lt;input type=\"search\"&gt; element. It is\n *   useful as an alternative to <em>NeonSelect</em> to provide filtered results when the universe of results is very\n *   large and/or the results need to be requested from a server side API.\n * </p>\n * <p><strong>NeonSearch</strong> provides input chips in the case the search allows multiple selection.</p>\n */\nexport default defineComponent({\n  name: 'NeonSearch',\n  components: {\n    NeonChip,\n    NeonDropdown,\n    NeonIcon,\n    NeonInput,\n  },\n  props: {\n    /**\n     * Either a string indicating the key of the selected option ('' if there is no selection) or an array of selected\n     * NeonSearchOption in the case when multiple = true (necessary to display them as chips).\n     */\n    modelValue: { type: [String, Array as () => Array<NeonSearchOption>], required: true },\n    /**\n     * Placeholder to display in search input when there is no search string entered.\n     */\n    placeholder: { type: String, required: true },\n    /**\n     * The list of search results.\n     */\n    options: { type: Array as () => Array<NeonSearchOption>, required: true },\n    /**\n     * Allow multi-select.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * Disable the search\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * The size of the dropdown - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The color of the search.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * Placement of the dropdown contents.\n     */\n    placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n  },\n  emits: [\n    /**\n     * emitted when the user changes the selection.\n     * @type {string | NeonSearchOption[]} either the selected option's key (single select) or an array of the\n     * selected options (multi-select).\n     */\n    'update:modelValue',\n    /**\n     * emitted when the user types in filter box.\n     * @type {string} the current filter criteria. This can be used by the application to filter the displayed options.\n     */\n    'filter-changed',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const dropdown = ref<HTMLElement | null>(null);\n    const dropdownPlacement = ref<NeonDropdownPlacement | undefined>(props.placement);\n\n    const open = ref(false);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n    const filter = ref('');\n\n    watch(\n      () => open.value,\n      (open: boolean) => {\n        if (open && props.options.length > 0) {\n          highlightedKey.value = props.options[0].key;\n          highlightedIndex.value = 0;\n        }\n      },\n    );\n\n    const isReverse = () => {\n      switch (dropdownPlacement.value) {\n        case NeonDropdownPlacement.TopLeft:\n        case NeonDropdownPlacement.TopRight:\n        case NeonDropdownPlacement.LeftBottom:\n        case NeonDropdownPlacement.RightBottom:\n          return true;\n      }\n\n      return false;\n    };\n\n    const scrollOnNavigate = () => {\n      const element = dropdown.value?.querySelector('.neon-search__option--highlighted') as HTMLElement;\n      NeonScrollUtils.scrollIntoView(element);\n    };\n\n    const navigateBy = (offset: number, $event: KeyboardEvent) => {\n      const newIndex = highlightedIndex.value + offset;\n      if (newIndex >= 0 && newIndex <= props.options.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = props.options[highlightedIndex.value].key;\n        $event.preventDefault();\n        setTimeout(scrollOnNavigate);\n      }\n    };\n\n    const emitInputEvent = (value: string | NeonSearchOption[]) => {\n      emit('update:modelValue', value);\n    };\n\n    const onFilterChange = (_filter: string) => {\n      if (!props.multiple) {\n        emitInputEvent('');\n      }\n\n      filter.value = _filter;\n      emit('filter-changed', _filter);\n    };\n\n    const clickOption = (option: NeonSearchOption) => {\n      if (props.multiple) {\n        const values = (props.modelValue as NeonSearchOption[]).map((v) => v);\n        const index = values.findIndex((v) => v.key === option.key);\n        if (index >= 0) {\n          values.splice(index, 1);\n        } else {\n          values.push(option);\n        }\n        emitInputEvent(values);\n      } else {\n        emitInputEvent(option.key);\n      }\n\n      onFilterChange(props.multiple ? '' : option.label.toString());\n    };\n\n    const keyboardHandler = ($event: KeyboardEvent) => {\n      if (open.value) {\n        switch ($event.code) {\n          case 'ArrowUp':\n          case 'ArrowDown':\n            {\n              const reverseOffset = isReverse() ? -1 : 1;\n              if ($event.code === 'ArrowUp') {\n                navigateBy(-1 * reverseOffset, $event);\n              } else {\n                navigateBy(1 * reverseOffset, $event);\n              }\n            }\n            break;\n          case 'Enter':\n          case 'Space':\n            if (!($event.target as HTMLElement).classList.contains('neon-search__input')) {\n              clickOption(props.options[highlightedIndex.value]);\n              $event.preventDefault();\n            }\n            break;\n          case 'Tab':\n            if (!$event.ctrlKey && !$event.metaKey && !$event.altKey) {\n              open.value = false;\n            }\n            break;\n        }\n      }\n    };\n\n    const onPlacement = (placement: NeonDropdownPlacement) => {\n      dropdownPlacement.value = placement;\n    };\n\n    onMounted(() => {\n      document.addEventListener('keydown', keyboardHandler);\n    });\n\n    onUnmounted(() => {\n      document.removeEventListener('keydown', keyboardHandler);\n    });\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onFilterChanged, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const changeHighlighted = (key: string) => {\n      highlightedKey.value = key;\n      highlightedIndex.value = props.options.findIndex((opt) => opt.key === key);\n    };\n\n    const showOptions = () => (open.value = true);\n\n    const removeSelected = (removed: NeonSearchOption) =>\n      emitInputEvent((props.modelValue as NeonSearchOption[]).filter((v) => v.key !== removed.key));\n\n    const computedOptions = computed(() => {\n      return props.multiple ? props.options : props.options.filter((opt) => opt.label !== filter.value);\n    });\n\n    return {\n      dropdown,\n      open,\n      highlightedKey,\n      filter,\n      sanitizedAttributes,\n      computedOptions,\n      dropdownPlacement,\n      onPlacement,\n      onFilterChange,\n      clickOption,\n      changeHighlighted,\n      showOptions,\n      removeSelected,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonChip","NeonDropdown","NeonIcon","NeonInput","NeonSize","NeonFunctionalColor","NeonDropdownPlacement","props","emit","attrs","useAttrs","dropdown","ref","dropdownPlacement","open","highlightedKey","highlightedIndex","filter","watch","isReverse","scrollOnNavigate","element","_a","NeonScrollUtils","navigateBy","offset","$event","newIndex","emitInputEvent","value","onFilterChange","_filter","clickOption","option","values","v","index","keyboardHandler","reverseOffset","onPlacement","placement","onMounted","onUnmounted","sanitizedAttributes","computed","onFilterChanged","sanitized","changeHighlighted","key","opt","showOptions","removeSelected","removed","computedOptions"],"mappings":"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"}
+{"version":3,"file":"NeonSearch.cjs.js","sources":["../../../../src/components/user-input/search/NeonSearch.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport type { NeonSearchOption } from '@/common/models/NeonSearchOption';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport NeonChip from '@/components/user-input/chip/NeonChip.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/NeonScrollUtils';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\n\n/**\n * <p>\n *   The <strong>NeonSearch</strong> component is equivalent to an HTML &lt;input type=\"search\"&gt; element. It is\n *   useful as an alternative to <em>NeonSelect</em> to provide filtered results when the universe of results is very\n *   large and/or the results need to be requested from a server side API.\n * </p>\n * <p><strong>NeonSearch</strong> provides input chips in the case the search allows multiple selection.</p>\n */\nexport default defineComponent({\n  name: 'NeonSearch',\n  components: {\n    NeonChip,\n    NeonDropdown,\n    NeonIcon,\n    NeonInput,\n  },\n  props: {\n    /**\n     * Either a string indicating the key of the selected option ('' if there is no selection) or an array of selected\n     * NeonSearchOption in the case when multiple = true (necessary to display them as chips).\n     */\n    modelValue: { type: [String, Array as () => Array<NeonSearchOption>], required: true },\n    /**\n     * Placeholder to display in search input when there is no search string entered.\n     */\n    placeholder: { type: String, required: true },\n    /**\n     * The list of search results.\n     */\n    options: { type: Array as () => Array<NeonSearchOption>, required: true },\n    /**\n     * Allow multi-select.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * Disable the search\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * The size of the dropdown - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The color of the search.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The HTML autocomplete mode as specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\">here</a>.\n     * NOTE: No enum is provided in Neon as some values can be used in combination, please refer to the full list of values in the preceding link.\n     */\n    autocomplete: { type: String, default: 'on' },\n    /**\n     * The HTML input mode as specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode\">here</a>.\n     * This can be used to simplify populating the filter field, e.g. providing the user's country from their address.\n     */\n    inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Text },\n    /**\n     * Placement of the dropdown contents.\n     */\n    placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n  },\n  emits: [\n    /**\n     * emitted when the user changes the selection.\n     * @type {string | NeonSearchOption[]} either the selected option's key (single select) or an array of the\n     * selected options (multi-select).\n     */\n    'update:modelValue',\n    /**\n     * emitted when the user types in filter box.\n     * @type {string} the current filter criteria. This can be used by the application to filter the displayed options.\n     */\n    'filter-changed',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const dropdown = ref<InstanceType<typeof NeonDropdown> | null>(null);\n    const searchInput = ref<InstanceType<typeof NeonInput> | null>(null);\n    const dropdownPlacement = ref<NeonDropdownPlacement | undefined>(props.placement);\n\n    const open = ref(false);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n    const filter = ref('');\n\n    watch(\n      () => open.value,\n      (open: boolean) => {\n        if (open && props.options.length > 0) {\n          highlightedKey.value = props.options[0].key;\n          highlightedIndex.value = 0;\n        }\n      },\n    );\n\n    const isReverse = () => {\n      switch (dropdownPlacement.value) {\n        case NeonDropdownPlacement.TopLeft:\n        case NeonDropdownPlacement.TopRight:\n        case NeonDropdownPlacement.LeftBottom:\n        case NeonDropdownPlacement.RightBottom:\n          return true;\n      }\n\n      return false;\n    };\n\n    const onNavigate = () => {\n      const element: HTMLElement | null = dropdown.value?.dropdownContent?.querySelector(\n        '.neon-search__option--highlighted',\n      ) as HTMLElement;\n\n      if (element) {\n        element.focus();\n        NeonScrollUtils.scrollIntoView(element);\n      }\n    };\n\n    const navigateBy = (offset: number, $event: KeyboardEvent) => {\n      const newIndex = highlightedIndex.value + offset;\n      if (newIndex >= 0 && newIndex <= props.options.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = props.options[highlightedIndex.value].key;\n        $event.preventDefault();\n        setTimeout(onNavigate);\n      }\n    };\n\n    const emitInputEvent = (value: string | NeonSearchOption[]) => {\n      emit('update:modelValue', value);\n    };\n\n    const onFilterChange = (_filter: string) => {\n      if (!props.multiple && props.modelValue !== '') {\n        emitInputEvent('');\n      }\n\n      filter.value = _filter;\n      emit('filter-changed', _filter);\n    };\n\n    const clickOption = (option: NeonSearchOption) => {\n      if (props.multiple) {\n        const values = (props.modelValue as NeonSearchOption[]).map((v) => v);\n        const index = values.findIndex((v) => v.key === option.key);\n        if (index >= 0) {\n          values.splice(index, 1);\n        } else {\n          values.push(option);\n        }\n        emitInputEvent(values);\n      } else {\n        emitInputEvent(option.key);\n      }\n\n      onFilterChange(props.multiple ? '' : option.label.toString());\n    };\n\n    const keyboardHandler = ($event: KeyboardEvent) => {\n      if (open.value) {\n        switch ($event.code) {\n          case 'ArrowUp':\n          case 'ArrowDown':\n            {\n              const reverseOffset = isReverse() ? -1 : 1;\n              if ($event.code === 'ArrowUp') {\n                navigateBy(-1 * reverseOffset, $event);\n              } else {\n                navigateBy(1 * reverseOffset, $event);\n              }\n            }\n            break;\n          case 'Enter':\n          case 'Space':\n            if (!($event.target as HTMLElement).classList.contains('neon-search__input')) {\n              clickOption(props.options[highlightedIndex.value]);\n              $event.preventDefault();\n            }\n            break;\n          case 'Tab':\n            if (\n              document.activeElement !== searchInput.value?.neonInput &&\n              !$event.ctrlKey &&\n              !$event.metaKey &&\n              !$event.altKey\n            ) {\n              open.value = false;\n            }\n            break;\n        }\n      }\n    };\n\n    const onPlacement = (placement: NeonDropdownPlacement) => {\n      dropdownPlacement.value = placement;\n    };\n\n    onMounted(() => {\n      document.addEventListener('keydown', keyboardHandler);\n    });\n\n    onUnmounted(() => {\n      document.removeEventListener('keydown', keyboardHandler);\n    });\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onFilterChanged, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const changeHighlighted = (key: string) => {\n      highlightedKey.value = key;\n      highlightedIndex.value = props.options.findIndex((opt) => opt.key === key);\n    };\n\n    const showOptions = () => (open.value = true);\n\n    const removeSelected = (removed: NeonSearchOption) =>\n      emitInputEvent((props.modelValue as NeonSearchOption[]).filter((v) => v.key !== removed.key));\n\n    const computedOptions = computed(() => {\n      return props.multiple ? props.options : props.options.filter((opt) => opt.label !== filter.value);\n    });\n\n    return {\n      dropdown,\n      searchInput,\n      open,\n      highlightedKey,\n      filter,\n      sanitizedAttributes,\n      computedOptions,\n      dropdownPlacement,\n      onPlacement,\n      onFilterChange,\n      clickOption,\n      changeHighlighted,\n      showOptions,\n      removeSelected,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonChip","NeonDropdown","NeonIcon","NeonInput","NeonSize","NeonFunctionalColor","NeonInputMode","NeonDropdownPlacement","props","emit","attrs","useAttrs","dropdown","ref","searchInput","dropdownPlacement","open","highlightedKey","highlightedIndex","filter","watch","isReverse","onNavigate","element","_b","_a","NeonScrollUtils","navigateBy","offset","$event","newIndex","emitInputEvent","value","onFilterChange","_filter","clickOption","option","values","v","index","keyboardHandler","reverseOffset","onPlacement","placement","onMounted","onUnmounted","sanitizedAttributes","computed","onFilterChanged","sanitized","changeHighlighted","key","opt","showOptions","removeSelected","removed","computedOptions"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"NeonSearch.es.js","sources":["../../../../src/components/user-input/search/NeonSearch.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport type { NeonSearchOption } from '@/common/models/NeonSearchOption';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport NeonChip from '@/components/user-input/chip/NeonChip.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/NeonScrollUtils';\n\n/**\n * <p>\n *   The <strong>NeonSearch</strong> component is equivalent to an HTML &lt;input type=\"search\"&gt; element. It is\n *   useful as an alternative to <em>NeonSelect</em> to provide filtered results when the universe of results is very\n *   large and/or the results need to be requested from a server side API.\n * </p>\n * <p><strong>NeonSearch</strong> provides input chips in the case the search allows multiple selection.</p>\n */\nexport default defineComponent({\n  name: 'NeonSearch',\n  components: {\n    NeonChip,\n    NeonDropdown,\n    NeonIcon,\n    NeonInput,\n  },\n  props: {\n    /**\n     * Either a string indicating the key of the selected option ('' if there is no selection) or an array of selected\n     * NeonSearchOption in the case when multiple = true (necessary to display them as chips).\n     */\n    modelValue: { type: [String, Array as () => Array<NeonSearchOption>], required: true },\n    /**\n     * Placeholder to display in search input when there is no search string entered.\n     */\n    placeholder: { type: String, required: true },\n    /**\n     * The list of search results.\n     */\n    options: { type: Array as () => Array<NeonSearchOption>, required: true },\n    /**\n     * Allow multi-select.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * Disable the search\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * The size of the dropdown - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The color of the search.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * Placement of the dropdown contents.\n     */\n    placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n  },\n  emits: [\n    /**\n     * emitted when the user changes the selection.\n     * @type {string | NeonSearchOption[]} either the selected option's key (single select) or an array of the\n     * selected options (multi-select).\n     */\n    'update:modelValue',\n    /**\n     * emitted when the user types in filter box.\n     * @type {string} the current filter criteria. This can be used by the application to filter the displayed options.\n     */\n    'filter-changed',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const dropdown = ref<HTMLElement | null>(null);\n    const dropdownPlacement = ref<NeonDropdownPlacement | undefined>(props.placement);\n\n    const open = ref(false);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n    const filter = ref('');\n\n    watch(\n      () => open.value,\n      (open: boolean) => {\n        if (open && props.options.length > 0) {\n          highlightedKey.value = props.options[0].key;\n          highlightedIndex.value = 0;\n        }\n      },\n    );\n\n    const isReverse = () => {\n      switch (dropdownPlacement.value) {\n        case NeonDropdownPlacement.TopLeft:\n        case NeonDropdownPlacement.TopRight:\n        case NeonDropdownPlacement.LeftBottom:\n        case NeonDropdownPlacement.RightBottom:\n          return true;\n      }\n\n      return false;\n    };\n\n    const scrollOnNavigate = () => {\n      const element = dropdown.value?.querySelector('.neon-search__option--highlighted') as HTMLElement;\n      NeonScrollUtils.scrollIntoView(element);\n    };\n\n    const navigateBy = (offset: number, $event: KeyboardEvent) => {\n      const newIndex = highlightedIndex.value + offset;\n      if (newIndex >= 0 && newIndex <= props.options.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = props.options[highlightedIndex.value].key;\n        $event.preventDefault();\n        setTimeout(scrollOnNavigate);\n      }\n    };\n\n    const emitInputEvent = (value: string | NeonSearchOption[]) => {\n      emit('update:modelValue', value);\n    };\n\n    const onFilterChange = (_filter: string) => {\n      if (!props.multiple) {\n        emitInputEvent('');\n      }\n\n      filter.value = _filter;\n      emit('filter-changed', _filter);\n    };\n\n    const clickOption = (option: NeonSearchOption) => {\n      if (props.multiple) {\n        const values = (props.modelValue as NeonSearchOption[]).map((v) => v);\n        const index = values.findIndex((v) => v.key === option.key);\n        if (index >= 0) {\n          values.splice(index, 1);\n        } else {\n          values.push(option);\n        }\n        emitInputEvent(values);\n      } else {\n        emitInputEvent(option.key);\n      }\n\n      onFilterChange(props.multiple ? '' : option.label.toString());\n    };\n\n    const keyboardHandler = ($event: KeyboardEvent) => {\n      if (open.value) {\n        switch ($event.code) {\n          case 'ArrowUp':\n          case 'ArrowDown':\n            {\n              const reverseOffset = isReverse() ? -1 : 1;\n              if ($event.code === 'ArrowUp') {\n                navigateBy(-1 * reverseOffset, $event);\n              } else {\n                navigateBy(1 * reverseOffset, $event);\n              }\n            }\n            break;\n          case 'Enter':\n          case 'Space':\n            if (!($event.target as HTMLElement).classList.contains('neon-search__input')) {\n              clickOption(props.options[highlightedIndex.value]);\n              $event.preventDefault();\n            }\n            break;\n          case 'Tab':\n            if (!$event.ctrlKey && !$event.metaKey && !$event.altKey) {\n              open.value = false;\n            }\n            break;\n        }\n      }\n    };\n\n    const onPlacement = (placement: NeonDropdownPlacement) => {\n      dropdownPlacement.value = placement;\n    };\n\n    onMounted(() => {\n      document.addEventListener('keydown', keyboardHandler);\n    });\n\n    onUnmounted(() => {\n      document.removeEventListener('keydown', keyboardHandler);\n    });\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onFilterChanged, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const changeHighlighted = (key: string) => {\n      highlightedKey.value = key;\n      highlightedIndex.value = props.options.findIndex((opt) => opt.key === key);\n    };\n\n    const showOptions = () => (open.value = true);\n\n    const removeSelected = (removed: NeonSearchOption) =>\n      emitInputEvent((props.modelValue as NeonSearchOption[]).filter((v) => v.key !== removed.key));\n\n    const computedOptions = computed(() => {\n      return props.multiple ? props.options : props.options.filter((opt) => opt.label !== filter.value);\n    });\n\n    return {\n      dropdown,\n      open,\n      highlightedKey,\n      filter,\n      sanitizedAttributes,\n      computedOptions,\n      dropdownPlacement,\n      onPlacement,\n      onFilterChange,\n      clickOption,\n      changeHighlighted,\n      showOptions,\n      removeSelected,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonChip","NeonDropdown","NeonIcon","NeonInput","NeonSize","NeonFunctionalColor","NeonDropdownPlacement","props","emit","attrs","useAttrs","dropdown","ref","dropdownPlacement","open","highlightedKey","highlightedIndex","filter","watch","isReverse","scrollOnNavigate","element","_a","NeonScrollUtils","navigateBy","offset","$event","newIndex","emitInputEvent","value","onFilterChange","_filter","clickOption","option","values","v","index","keyboardHandler","reverseOffset","onPlacement","placement","onMounted","onUnmounted","sanitizedAttributes","computed","onFilterChanged","sanitized","changeHighlighted","key","opt","showOptions","removeSelected","removed","computedOptions"],"mappings":";;;;;;;;;AAmBA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,YAAY,EAAE,MAAM,CAAC,QAAQ,KAAsC,GAAG,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIhF,aAAa,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIvC,SAAS,EAAE,MAAM,OAAwC,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAInE,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,MAAM,EAAE,MAAM,QAA0B,SAASC,EAAS,OAAA;AAAA;AAAA;AAAA;AAAA,IAI1D,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,YAAA;AAAA;AAAA;AAAA;AAAA,IAIjF,WAAW,EAAE,MAAM,QAAuC,SAASC,EAAsB,WAAA;AAAA,EAAW;AAAA,EAEtG,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,UAAMC,IAAQC,EAAA,GAERC,IAAWC,EAAwB,IAAI,GACvCC,IAAoBD,EAAuCL,EAAM,SAAS,GAE1EO,IAAOF,EAAI,EAAK,GAChBG,IAAiBH,EAAmB,IAAI,GACxCI,IAAmBJ,EAAI,EAAE,GACzBK,IAASL,EAAI,EAAE;AAErB,IAAAM;AAAA,MACE,MAAMJ,EAAK;AAAA,MACX,CAACA,MAAkB;AACjB,QAAIA,KAAQP,EAAM,QAAQ,SAAS,MACjCQ,EAAe,QAAQR,EAAM,QAAQ,CAAC,EAAE,KACxCS,EAAiB,QAAQ;AAAA,MAE7B;AAAA,IAAA;AAGF,UAAMG,IAAY,MAAM;AACtB,cAAQN,EAAkB,OAAA;AAAA,QACxB,KAAKP,EAAsB;AAAA,QAC3B,KAAKA,EAAsB;AAAA,QAC3B,KAAKA,EAAsB;AAAA,QAC3B,KAAKA,EAAsB;AACzB,iBAAO;AAAA,MAAA;AAGX,aAAO;AAAA,IACT,GAEMc,IAAmB,MAAM;;AAC7B,YAAMC,KAAUC,IAAAX,EAAS,UAAT,gBAAAW,EAAgB,cAAc;AAC9C,MAAAC,EAAgB,eAAeF,CAAO;AAAA,IACxC,GAEMG,IAAa,CAACC,GAAgBC,MAA0B;AAC5D,YAAMC,IAAWX,EAAiB,QAAQS;AAC1C,MAAIE,KAAY,KAAKA,KAAYpB,EAAM,QAAQ,SAAS,MACtDS,EAAiB,QAAQW,GACzBZ,EAAe,QAAQR,EAAM,QAAQS,EAAiB,KAAK,EAAE,KAC7DU,EAAO,eAAA,GACP,WAAWN,CAAgB;AAAA,IAE/B,GAEMQ,IAAiB,CAACC,MAAuC;AAC7D,MAAArB,EAAK,qBAAqBqB,CAAK;AAAA,IACjC,GAEMC,IAAiB,CAACC,MAAoB;AAC1C,MAAKxB,EAAM,YACTqB,EAAe,EAAE,GAGnBX,EAAO,QAAQc,GACfvB,EAAK,kBAAkBuB,CAAO;AAAA,IAChC,GAEMC,IAAc,CAACC,MAA6B;AAChD,UAAI1B,EAAM,UAAU;AAClB,cAAM2B,IAAU3B,EAAM,WAAkC,IAAI,CAAC4B,MAAMA,CAAC,GAC9DC,IAAQF,EAAO,UAAU,CAACC,MAAMA,EAAE,QAAQF,EAAO,GAAG;AAC1D,QAAIG,KAAS,IACXF,EAAO,OAAOE,GAAO,CAAC,IAEtBF,EAAO,KAAKD,CAAM,GAEpBL,EAAeM,CAAM;AAAA,MACvB;AACE,QAAAN,EAAeK,EAAO,GAAG;AAG3B,MAAAH,EAAevB,EAAM,WAAW,KAAK0B,EAAO,MAAM,UAAU;AAAA,IAC9D,GAEMI,IAAkB,CAACX,MAA0B;AACjD,UAAIZ,EAAK;AACP,gBAAQY,EAAO,MAAA;AAAA,UACb,KAAK;AAAA,UACL,KAAK;AACH;AACE,oBAAMY,IAAgBnB,MAAc,KAAK;AACzC,cAAIO,EAAO,SAAS,YAClBF,EAAW,KAAKc,GAAeZ,CAAM,IAErCF,EAAW,IAAIc,GAAeZ,CAAM;AAAA,YAExC;AACA;AAAA,UACF,KAAK;AAAA,UACL,KAAK;AACH,YAAMA,EAAO,OAAuB,UAAU,SAAS,oBAAoB,MACzEM,EAAYzB,EAAM,QAAQS,EAAiB,KAAK,CAAC,GACjDU,EAAO,eAAA;AAET;AAAA,UACF,KAAK;AACH,YAAI,CAACA,EAAO,WAAW,CAACA,EAAO,WAAW,CAACA,EAAO,WAChDZ,EAAK,QAAQ;AAEf;AAAA,QAAA;AAAA,IAGR,GAEMyB,IAAc,CAACC,MAAqC;AACxD,MAAA3B,EAAkB,QAAQ2B;AAAA,IAC5B;AAEA,IAAAC,EAAU,MAAM;AACd,eAAS,iBAAiB,WAAWJ,CAAe;AAAA,IACtD,CAAC,GAEDK,EAAY,MAAM;AAChB,eAAS,oBAAoB,WAAWL,CAAe;AAAA,IACzD,CAAC;AAED,UAAMM,IAAsBC,EAAS,MAAM;AAEzC,YAAM,EAAE,iBAAAC,GAAiB,GAAGC,EAAA,IAAcrC;AAC1C,aAAOqC;AAAA,IACT,CAAC,GAEKC,IAAoB,CAACC,MAAgB;AACzC,MAAAjC,EAAe,QAAQiC,GACvBhC,EAAiB,QAAQT,EAAM,QAAQ,UAAU,CAAC0C,MAAQA,EAAI,QAAQD,CAAG;AAAA,IAC3E,GAEME,IAAc,MAAOpC,EAAK,QAAQ,IAElCqC,IAAiB,CAACC,MACtBxB,EAAgBrB,EAAM,WAAkC,OAAO,CAAC4B,MAAMA,EAAE,QAAQiB,EAAQ,GAAG,CAAC,GAExFC,IAAkBT,EAAS,MACxBrC,EAAM,WAAWA,EAAM,UAAUA,EAAM,QAAQ,OAAO,CAAC0C,MAAQA,EAAI,UAAUhC,EAAO,KAAK,CACjG;AAED,WAAO;AAAA,MACL,UAAAN;AAAA,MACA,MAAAG;AAAA,MACA,gBAAAC;AAAA,MACA,QAAAE;AAAA,MACA,qBAAA0B;AAAA,MACA,iBAAAU;AAAA,MACA,mBAAAxC;AAAA,MACA,aAAA0B;AAAA,MACA,gBAAAT;AAAA,MACA,aAAAE;AAAA,MACA,mBAAAe;AAAA,MACA,aAAAG;AAAA,MACA,gBAAAC;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}
+{"version":3,"file":"NeonSearch.es.js","sources":["../../../../src/components/user-input/search/NeonSearch.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport type { NeonSearchOption } from '@/common/models/NeonSearchOption';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport NeonChip from '@/components/user-input/chip/NeonChip.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/NeonScrollUtils';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\n\n/**\n * <p>\n *   The <strong>NeonSearch</strong> component is equivalent to an HTML &lt;input type=\"search\"&gt; element. It is\n *   useful as an alternative to <em>NeonSelect</em> to provide filtered results when the universe of results is very\n *   large and/or the results need to be requested from a server side API.\n * </p>\n * <p><strong>NeonSearch</strong> provides input chips in the case the search allows multiple selection.</p>\n */\nexport default defineComponent({\n  name: 'NeonSearch',\n  components: {\n    NeonChip,\n    NeonDropdown,\n    NeonIcon,\n    NeonInput,\n  },\n  props: {\n    /**\n     * Either a string indicating the key of the selected option ('' if there is no selection) or an array of selected\n     * NeonSearchOption in the case when multiple = true (necessary to display them as chips).\n     */\n    modelValue: { type: [String, Array as () => Array<NeonSearchOption>], required: true },\n    /**\n     * Placeholder to display in search input when there is no search string entered.\n     */\n    placeholder: { type: String, required: true },\n    /**\n     * The list of search results.\n     */\n    options: { type: Array as () => Array<NeonSearchOption>, required: true },\n    /**\n     * Allow multi-select.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * Disable the search\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * The size of the dropdown - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The color of the search.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The HTML autocomplete mode as specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\">here</a>.\n     * NOTE: No enum is provided in Neon as some values can be used in combination, please refer to the full list of values in the preceding link.\n     */\n    autocomplete: { type: String, default: 'on' },\n    /**\n     * The HTML input mode as specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode\">here</a>.\n     * This can be used to simplify populating the filter field, e.g. providing the user's country from their address.\n     */\n    inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Text },\n    /**\n     * Placement of the dropdown contents.\n     */\n    placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n  },\n  emits: [\n    /**\n     * emitted when the user changes the selection.\n     * @type {string | NeonSearchOption[]} either the selected option's key (single select) or an array of the\n     * selected options (multi-select).\n     */\n    'update:modelValue',\n    /**\n     * emitted when the user types in filter box.\n     * @type {string} the current filter criteria. This can be used by the application to filter the displayed options.\n     */\n    'filter-changed',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const dropdown = ref<InstanceType<typeof NeonDropdown> | null>(null);\n    const searchInput = ref<InstanceType<typeof NeonInput> | null>(null);\n    const dropdownPlacement = ref<NeonDropdownPlacement | undefined>(props.placement);\n\n    const open = ref(false);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n    const filter = ref('');\n\n    watch(\n      () => open.value,\n      (open: boolean) => {\n        if (open && props.options.length > 0) {\n          highlightedKey.value = props.options[0].key;\n          highlightedIndex.value = 0;\n        }\n      },\n    );\n\n    const isReverse = () => {\n      switch (dropdownPlacement.value) {\n        case NeonDropdownPlacement.TopLeft:\n        case NeonDropdownPlacement.TopRight:\n        case NeonDropdownPlacement.LeftBottom:\n        case NeonDropdownPlacement.RightBottom:\n          return true;\n      }\n\n      return false;\n    };\n\n    const onNavigate = () => {\n      const element: HTMLElement | null = dropdown.value?.dropdownContent?.querySelector(\n        '.neon-search__option--highlighted',\n      ) as HTMLElement;\n\n      if (element) {\n        element.focus();\n        NeonScrollUtils.scrollIntoView(element);\n      }\n    };\n\n    const navigateBy = (offset: number, $event: KeyboardEvent) => {\n      const newIndex = highlightedIndex.value + offset;\n      if (newIndex >= 0 && newIndex <= props.options.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = props.options[highlightedIndex.value].key;\n        $event.preventDefault();\n        setTimeout(onNavigate);\n      }\n    };\n\n    const emitInputEvent = (value: string | NeonSearchOption[]) => {\n      emit('update:modelValue', value);\n    };\n\n    const onFilterChange = (_filter: string) => {\n      if (!props.multiple && props.modelValue !== '') {\n        emitInputEvent('');\n      }\n\n      filter.value = _filter;\n      emit('filter-changed', _filter);\n    };\n\n    const clickOption = (option: NeonSearchOption) => {\n      if (props.multiple) {\n        const values = (props.modelValue as NeonSearchOption[]).map((v) => v);\n        const index = values.findIndex((v) => v.key === option.key);\n        if (index >= 0) {\n          values.splice(index, 1);\n        } else {\n          values.push(option);\n        }\n        emitInputEvent(values);\n      } else {\n        emitInputEvent(option.key);\n      }\n\n      onFilterChange(props.multiple ? '' : option.label.toString());\n    };\n\n    const keyboardHandler = ($event: KeyboardEvent) => {\n      if (open.value) {\n        switch ($event.code) {\n          case 'ArrowUp':\n          case 'ArrowDown':\n            {\n              const reverseOffset = isReverse() ? -1 : 1;\n              if ($event.code === 'ArrowUp') {\n                navigateBy(-1 * reverseOffset, $event);\n              } else {\n                navigateBy(1 * reverseOffset, $event);\n              }\n            }\n            break;\n          case 'Enter':\n          case 'Space':\n            if (!($event.target as HTMLElement).classList.contains('neon-search__input')) {\n              clickOption(props.options[highlightedIndex.value]);\n              $event.preventDefault();\n            }\n            break;\n          case 'Tab':\n            if (\n              document.activeElement !== searchInput.value?.neonInput &&\n              !$event.ctrlKey &&\n              !$event.metaKey &&\n              !$event.altKey\n            ) {\n              open.value = false;\n            }\n            break;\n        }\n      }\n    };\n\n    const onPlacement = (placement: NeonDropdownPlacement) => {\n      dropdownPlacement.value = placement;\n    };\n\n    onMounted(() => {\n      document.addEventListener('keydown', keyboardHandler);\n    });\n\n    onUnmounted(() => {\n      document.removeEventListener('keydown', keyboardHandler);\n    });\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onFilterChanged, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const changeHighlighted = (key: string) => {\n      highlightedKey.value = key;\n      highlightedIndex.value = props.options.findIndex((opt) => opt.key === key);\n    };\n\n    const showOptions = () => (open.value = true);\n\n    const removeSelected = (removed: NeonSearchOption) =>\n      emitInputEvent((props.modelValue as NeonSearchOption[]).filter((v) => v.key !== removed.key));\n\n    const computedOptions = computed(() => {\n      return props.multiple ? props.options : props.options.filter((opt) => opt.label !== filter.value);\n    });\n\n    return {\n      dropdown,\n      searchInput,\n      open,\n      highlightedKey,\n      filter,\n      sanitizedAttributes,\n      computedOptions,\n      dropdownPlacement,\n      onPlacement,\n      onFilterChange,\n      clickOption,\n      changeHighlighted,\n      showOptions,\n      removeSelected,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonChip","NeonDropdown","NeonIcon","NeonInput","NeonSize","NeonFunctionalColor","NeonInputMode","NeonDropdownPlacement","props","emit","attrs","useAttrs","dropdown","ref","searchInput","dropdownPlacement","open","highlightedKey","highlightedIndex","filter","watch","isReverse","onNavigate","element","_b","_a","NeonScrollUtils","navigateBy","offset","$event","newIndex","emitInputEvent","value","onFilterChange","_filter","clickOption","option","values","v","index","keyboardHandler","reverseOffset","onPlacement","placement","onMounted","onUnmounted","sanitizedAttributes","computed","onFilterChanged","sanitized","changeHighlighted","key","opt","showOptions","removeSelected","removed","computedOptions"],"mappings":"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"}

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

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

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            :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            @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":"qIACOA,EAAA,CAAA,MAAM,sBAAsB,EAiEvBC,EAAA,CAAA,MAAM,+BAA+B,4EAoBhCC,EAAA,CAAA,MAAM,+BAA+B,EAMhCC,EAAA,CAAA,MAAM,2BAA2B,6KA3FrD,OAAAC,YAAA,EAAAC,qBAkGM,MAlGNL,EAkGM,CAjGJM,EAAAA,YAgGgBC,EAhGhBC,aAgGgB,CA/Fd,IAAI,sBACKC,EAAA,0CAAAA,EAAA,KAAIC,GACZ,wBAAuBD,EAAA,UAAY,MAAM,QAAQA,EAAA,UAAU,EAAIA,aAAU,CAAA,GAAOA,EAAA,WAAU,CAAA,EAAI,IAAMA,EAAA,WACpG,uBAAsBA,EAAA,SACtB,MAAK,CAAA,iBAA4BA,EAAA,KAAK,4BAAiDA,EAAA,iCAA6CA,EAAA,SAA0C,qBAAAA,EAAA,gBAAgB,SAAM,IAY/L,aAAa,EAJlB,MAAOA,EAAA,MACP,SAAUA,EAAA,SACV,UAAWA,EAAA,kBACX,KAAMA,EAAA,KAEP,KAAK,WACGA,EAAA,oBAAmB,CAC1B,oBAAoBA,EAAA,WAAW,CAAA,EAAA,CAErB,4BACT,IAsCM,CAtCNE,EAAAA,mBAsCM,MAAA,CArCJ,IAAI,iBACH,MAAKC,EAAAA,eAAA,CAAA,4BAA2CH,EAAA,IAAI,8BAA2CA,EAAA,KAAK,uCAAsDA,EAAA,QAAQ,GAK7J,wBAAwB,CAAA,IAE9BH,EAAAA,YAAsGO,EAAA,CAA1F,SAAUJ,EAAA,SAAU,MAAM,2BAA2B,MAAM,eAAe,KAAK,+BAC3EA,EAAA,UAAY,MAAM,QAAQA,EAAA,UAAU,GAClDL,EAAAA,UAAA,EAAA,EAAAC,qBAaES,EAAAA,SAAA,CAAA,IAAA,CAAA,EAAAC,EAAAA,WAZ4BN,EAAA,WAAU,CAA9BO,EAAUC,mBADpBC,EAAAA,YAaEC,EAAA,CAXC,GAAIH,EAAS,IACb,IAAKA,EAAS,IACd,MAAKJ,EAAAA,eAAA,CAAA,uBAA4BK,IAAUR,EAAA,WAAW,OAAM,EAAA,EAC5D,MAAOO,EAAS,UAChB,SAAUP,EAAA,SACV,MAAOO,EAAS,MAChB,KAAMP,EAAA,KACP,OAAO,SACP,gBAAc,OACd,KAAK,SACJ,QAAKC,GAAED,EAAA,eAAeO,CAAQ,0GAGnCV,EAAAA,YAWEc,EAXFZ,aAWE,CAVC,SAAUC,EAAA,SACV,WAAYA,EAAA,OACZ,YAAaA,EAAA,YACb,KAAMA,EAAA,KACP,MAAM,sBACEA,EAAA,oBAAmB,CAC1B,uBAAOA,EAAA,YAAW,2DACnB,IAAA,CAAA,EAAsC,CAAA,UAAA,MAAA,CAAA,EAAA,CAAA,OAAA,CAAA,GACrC,sBAAmBA,EAAA,eACnB,2BAAYA,EAAA,eAAc,EAAA,yFAItB,kBACT,IA8BK,CA9BLE,EAAAA,mBA8BK,KA9BLV,EA8BK,kBA7BHI,EAAAA,mBA4BKS,EAAAA,SAAA,KAAAC,EAAAA,WA3BcN,EAAA,gBAAVY,kBADThB,EAAAA,mBA4BK,KAAA,CA1BF,GAAIgB,EAAO,IACX,IAAKA,EAAO,IACZ,MAAKT,EAAAA,eAAA,CAAA,EAA6E,wCAAAS,EAAO,mDAAqEA,EAAO,MAAQZ,EAAA,wCAAuEA,EAAA,IAAI,IAQnP,qBAAqB,CAAA,EAD3B,gBAAc,QAEd,KAAK,SACJ,YAASC,GAAED,EAAA,kBAAkBY,EAAO,GAAG,EACX,eAAAC,EAAAA,cAAAZ,GAAAD,EAAA,YAAYY,CAAM,EAAA,CAAA,OAAA,SAAA,CAAA,EAClB,eAAAC,EAAAA,cAAAZ,GAAAD,EAAA,YAAYY,CAAM,EAAA,CAAA,OAAA,SAAA,CAAA,EAClB,eAAAC,EAAAA,cAAAZ,GAAAD,EAAA,YAAYY,CAAM,EAAA,CAAA,OAAA,SAAA,CAAA,IAE/CV,EAAAA,mBAQM,MARNT,EAQM,CAJJqB,EAAAA,WAGOd,EAAA,OAAA,SAAA,CAHA,OAAQY,CAAM,EAArB,IAGO,CAFYA,EAAO,oBAAxBH,EAAAA,YAAqFL,EAAA,OAAtD,KAAMQ,EAAO,KAAM,MAAM,0EACxDV,EAAAA,mBAAiE,OAAjER,EAAiEqB,EAAAA,gBAAtBH,EAAO,KAAK,EAAA,CAAA"}
+{"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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"}

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

@@ -1,11 +1,11 @@
-import f from "./NeonSearch.es.js";
+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 _ = { class: "neon-search__wrapper" }, A = { class: "no-style neon-search__options" }, O = ["id", "onMouseover", "onClickCapture", "onSpaceCapture", "onEnterCapture"], S = { class: "neon-search__option-container" }, B = { class: "neon-search__option-label" };
+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"), V = r("neon-dropdown");
-  return l(), s("div", _, [
-    d(V, u({
+  const c = r("neon-icon"), k = r("neon-chip"), C = r("neon-input"), f = r("neon-dropdown");
+  return l(), s("div", A, [
+    d(f, u({
       ref: "dropdown",
       modelValue: e.open,
       "onUpdate:modelValue": n[3] || (n[3] = (o) => e.open = o),
@@ -54,6 +54,9 @@ function P(e, n, E, F, N, D) {
             onClose: (K) => e.removeSelected(o)
           }, null, 8, ["id", "class", "color", "disabled", "label", "size", "onClose"]))), 128)) : y("", !0),
           d(C, u({
+            ref: "searchInput",
+            autocomplete: e.autocomplete,
+            color: e.color,
             disabled: e.disabled,
             modelValue: e.filter,
             placeholder: e.placeholder,
@@ -65,11 +68,11 @@ function P(e, n, E, F, N, D) {
             }, ["prevent", "stop"]), ["enter"])),
             "onUpdate:modelValue": e.onFilterChange,
             onIconClick: n[2] || (n[2] = (o) => e.onFilterChange(""))
-          }), null, 16, ["disabled", "modelValue", "placeholder", "size", "onUpdate:modelValue"])
+          }), null, 16, ["autocomplete", "color", "disabled", "modelValue", "placeholder", "size", "onUpdate:modelValue"])
         ], 2)
       ]),
       default: m(() => [
-        i("ul", A, [
+        i("ul", O, [
           (l(!0), s(h, null, b(e.computedOptions, (o) => (l(), s("li", {
             id: o.key,
             key: o.key,
@@ -82,12 +85,13 @@ function P(e, n, E, F, N, D) {
             ], "neon-search__option"]),
             "aria-selected": "false",
             role: "option",
+            tabindex: "0",
             onMouseover: (a) => e.changeHighlighted(o.key),
             onClickCapture: t((a) => e.clickOption(o), ["stop", "prevent"]),
             onSpaceCapture: t((a) => e.clickOption(o), ["stop", "prevent"]),
             onEnterCapture: t((a) => e.clickOption(o), ["stop", "prevent"])
           }, [
-            i("div", S, [
+            i("div", _, [
               $(e.$slots, "option", { option: o }, () => [
                 o.icon ? (l(), v(c, {
                   key: 0,
@@ -97,15 +101,15 @@ function P(e, n, E, F, N, D) {
                 i("span", B, w(o.label), 1)
               ])
             ])
-          ], 42, O))), 128))
+          ], 42, S))), 128))
         ])
       ]),
       _: 3
     }, 16, ["modelValue", "aria-activedescendant", "aria-multiselectable", "class", "color", "disabled", "placement", "size", "onDropdownPlacement"])
   ]);
 }
-const I = /* @__PURE__ */ z(f, [["render", P]]);
+const H = /* @__PURE__ */ z(V, [["render", P]]);
 export {
-  I as default
+  H as default
 };
 //# sourceMappingURL=NeonSearch.vue.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NeonSearch.vue.es.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            :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            @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.es.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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"}

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

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

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

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