@aotearoan/neon 18.2.13 → 19.0.1

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"NeonSelect.es.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.es.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":";;;;;;;;AAiBA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI,EAAE,MAAM,OAAA;AAAA;AAAA;AAAA;AAAA,IAIZ,aAAa,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIvC,qBAAqB,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAI/C,iBAAiB,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAI3C,SAAS,EAAE,MAAM,OAAwC,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAInE,gBAAgB,EAAE,MAAM,OAAuC,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKzE,YAAY,EAAE,MAAM,CAAC,QAAQ,KAA4B,GAAG,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAItE,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,wBAAwB,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIlD,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,QAAA;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,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,UAAMC,IAAQC,EAAA,GAERC,IAAWC,EAA8C,IAAI,GAE7DC,IAAOD,EAAI,EAAK,GAChBE,IAAoBF,EAA2BL,EAAM,SAAS,GAC9DQ,IAAiBH,EAAmB,IAAI,GACxCI,IAAmBJ,EAAI,EAAE,GAEzBK,IAAmBC,EAAS,MAA0B;;AAC1D,aAAIX,EAAM,UACDA,EAAM,UACJA,EAAM,kBACRY,IAAAZ,EAAM,mBAAN,gBAAAY,EAAsB,QAAQ,CAACC,MAAUA,EAAM,WAEjD,CAAA;AAAA,IACT,CAAC,GAEKC,IAAY,MAAM;AACtB,UAAI,CAACd,EAAM;AACT,gBAAQO,EAAkB,OAAA;AAAA,UACxB,KAAKR,EAAsB;AAAA,UAC3B,KAAKA,EAAsB;AAAA,UAC3B,KAAKA,EAAsB;AAAA,UAC3B,KAAKA,EAAsB;AACzB,mBAAO;AAAA,QAAA;AAIb,aAAO;AAAA,IACT,GAEMgB,IAAa,MAAM;;AACvB,YAAMC,KAA8BC,KAAAL,IAAAR,EAAS,UAAT,gBAAAQ,EAAgB,oBAAhB,gBAAAK,EAAiC;AAAA,QACnE;AAAA;AAGF,MAAID,MACFA,EAAQ,MAAA,GACRE,EAAgB,eAAeF,CAAO;AAAA,IAE1C,GACMG,IAAa,CAACC,GAAgBC,MAA2B;AAC7D,YAAMC,IAAWb,EAAiB,QAAQW;AAC1C,MAAIE,KAAY,KAAKA,KAAYZ,EAAiB,MAAM,SAAS,MAC/DD,EAAiB,QAAQa,GACzBd,EAAe,QAAQE,EAAiB,MAAMD,EAAiB,KAAK,EAAE,KACtEY,KAAA,QAAAA,EAAQ,kBACR,WAAWN,CAAU;AAAA,IAEzB,GAEMQ,IAAiB,CAACC,MAA6B;AACnD,MAAAvB,EAAK,qBAAqBuB,CAAK;AAAA,IACjC,GAEMC,IAAc,CAACC,MAA6B;AAChD,UAAI1B,EAAM,UAAU;AAClB,cAAM2B,IAAS,CAAC,GAAG3B,EAAM,UAAU,GAC7B4B,IAAQD,EAAO,UAAU,CAACE,MAAMA,MAAMH,EAAO,GAAG;AACtD,QAAIE,KAAS,IACXD,EAAO,OAAOC,GAAO,CAAC,IAEtBD,EAAO,KAAKD,EAAO,GAAG,GAExBH,EAAeI,CAAM;AAAA,MACvB,MAAA,CAAW3B,EAAM,eAAe0B,EAAO,QACrCpB,EAAK,QAAQ,IACbiB,EAAeG,EAAO,GAAG;AAAA,IAE7B,GAEMI,IAAkB,CAACT,MAA0B;AACjD,UAAIf,EAAK;AACP,gBAAQe,EAAO,MAAA;AAAA,UACb,KAAK;AAAA,UACL,KAAK;AACH;AACE,oBAAMU,IAAgBjB,MAAc,KAAK;AACzC,cAAIO,EAAO,SAAS,YAClBF,EAAW,KAAKY,GAAeV,CAAM,IAErCF,EAAW,IAAIY,GAAeV,CAAM;AAAA,YAExC;AACA;AAAA,UACF,KAAK;AAAA,UACL,KAAK;AACH,YAAKX,EAAiB,MAAMD,EAAiB,KAAK,EAAE,aAClDgB,EAAYf,EAAiB,MAAMD,EAAiB,KAAK,CAAC,GAC1DY,EAAO,eAAA;AAET;AAAA,UACF,KAAK;AACH,YAAI,CAACA,EAAO,WAAW,CAACA,EAAO,WAAW,CAACA,EAAO,WAChDf,EAAK,QAAQ;AAEf;AAAA,QAAA;AAAA,IAGR,GAEM0B,IAAkBrB,EAAS,MAE7BX,EAAM,kBAAkB;AAAA,MACtB;AAAA,QACE,OAAO;AAAA,QACP,SAASA,EAAM,WAAW,CAAA;AAAA,MAAC;AAAA,IAC7B,CAGL,GAEKiC,IAAsBtB,EAAS,MAAM;AAEzC,YAAM,EAAE,GAAGuB,EAAA,IAAchC;AACzB,aAAOgC;AAAA,IACT,CAAC,GAEKC,IAAgBxB,EAAS,MAAM;AACnC,UAAIX,EAAM,YAAYA,EAAM,WAAW,SAAS,GAAG;AACjD,YAAIA,EAAM;AACR,iBAAOA,EAAM;AACf,YAAWA,EAAM,WAAW,SAAS;AACnC,iBAAO,GAAGA,EAAM,WAAW,MAAM;AAC5B;AACL,gBAAMoC,IAAW1B,EAAiB,MAAM,KAAK,CAACgB,MAAWA,EAAO,QAAQ1B,EAAM,WAAW,CAAC,CAAC;AAC3F,kBAAOoC,KAAA,gBAAAA,EAAU,UAAS;AAAA,QAC5B;AAAA,MACF,WAAWpC,EAAM,YAAY;AAC3B,cAAMoC,IAAW1B,EAAiB,MAAM,KAAK,CAACgB,MAAWA,EAAO,QAAQ1B,EAAM,UAAU;AAExF,YAAIoC;AACF,iBAAOA,EAAS;AAAA,MAEpB;AAEA,aAAOpC,EAAM;AAAA,IACf,CAAC,GAEKqC,IAAe1B,EAAS,MAAM;AAClC,UAAIX,EAAM,YAAY;AACpB,cAAMoC,IAAW1B,EAAiB,MAAM,KAAK,CAACgB,MAAWA,EAAO,QAAQ1B,EAAM,UAAU;AAExF,YAAIoC;AACF,iBAAOA,EAAS;AAAA,MAEpB;AAEA,aAAOpC,EAAM;AAAA,IACf,CAAC,GAEKsC,IAAqB,CAACC,MAAiB;AAC3C,YAAMC,IAAe,MAAM,KAAMD,EAAM,OAA6B,OAAO,EACxE,OAAO,CAACE,MAAQA,EAAI,QAAQ,EAC5B,IAAI,CAACA,MAAQA,EAAI,KAAK,GACnBC,IAAkBhC,EAAiB,MAAM,OAAO,CAACmB,MAAMW,EAAa,QAAQX,EAAE,GAAG,KAAK,CAAC,GACvFL,IAAQxB,EAAM,WAAW0C,EAAgB,IAAI,CAAClB,MAAUA,EAAM,GAAG,IAAIkB,EAAgB,CAAC,EAAE;AAC9F,MAAAnB,EAAeC,CAAK;AAAA,IACtB,GAEMmB,IAAoB,CAACC,MAAgB;AACzC,MAAApC,EAAe,QAAQoC,GACvBnC,EAAiB,QAAQC,EAAiB,MAAM,UAAU,CAAC+B,MAAQA,EAAI,QAAQG,CAAG;AAAA,IACpF,GAEMC,IAAc,CAACC,MAAqC;AACxD,MAAAvC,EAAkB,QAAQuC;AAAA,IAC5B;AAEA,WAAAC,EAAU,MAAM;AACd,eAAS,iBAAiB,WAAWjB,CAAe;AAAA,IACtD,CAAC,GAEDkB,EAAY,MAAM;AAChB,eAAS,oBAAoB,WAAWlB,CAAe;AAAA,IACzD,CAAC,GAEDmB;AAAA,MACE,MAAM3C,EAAK;AAAA,MACX,CAACA,MAAkB;AACjB,QAAIA,MACFE,EAAe,QAAQE,EAAiB,MAAM,CAAC,EAAE,KACjDD,EAAiB,QAAQ,GACzBU,EAAWV,EAAiB,KAAK;AAAA,MAErC;AAAA,IAAA,GAGK;AAAA,MACL,UAAAL;AAAA,MACA,MAAAE;AAAA,MACA,gBAAAE;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,eAAAyB;AAAA,MACA,qBAAAF;AAAA,MACA,iBAAAD;AAAA,MACA,cAAAK;AAAA,MACA,aAAAZ;AAAA,MACA,oBAAAa;AAAA,MACA,mBAAAK;AAAA,MACA,aAAAE;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"NeonSelect.vue.cjs.js","sources":["../../../../src/components/user-input/select/NeonSelect.vue"],"sourcesContent":["<template>\n  <div class=\"neon-select__wrapper\">\n    <neon-dropdown\n      :id=\"id\"\n      ref=\"dropdown\"\n      v-model=\"open\"\n      :aria-activedescendant=\"multiple ? modelValue[0] : modelValue\"\n      :aria-multiselectable=\"multiple\"\n      :class=\"[`neon-select--${color}`, { 'neon-select--grouped': groupedOptions, 'neon-select--multiple': multiple }]\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :icon=\"computedIcon\"\n      :label=\"computedLabel\"\n      :size=\"size\"\n      class=\"neon-select\"\n      role=\"listbox\"\n      v-bind=\"sanitizedAttributes\"\n      @dropdown-placement=\"onPlacement\"\n    >\n      <ul class=\"no-style neon-select__options\">\n        <li\n          v-if=\"placeholderAsOption\"\n          :class=\"`neon-select__option--${size}`\"\n          class=\"neon-select__option neon-select__option--disabled neon-select__option-placeholder\"\n        >\n          <div class=\"neon-select__option-container\">\n            <span class=\"neon-select__option-label\">{{ placeholder }}</span>\n          </div>\n        </li>\n        <template v-for=\"group in computedOptions\">\n          <li v-if=\"group.group !== ''\" :key=\"group.group\" class=\"neon-select__option-title\">{{ group.group }}</li>\n          <li\n            v-for=\"option in group.options\"\n            :id=\"option.key\"\n            :key=\"option.key\"\n            :aria-selected=\"multiple ? modelValue.indexOf(option.key) >= 0 : option.key === modelValue\"\n            :class=\"[\n              {\n                'neon-select__option--disabled': option.disabled,\n                'neon-select__option--separator-before': option.separatorBefore,\n                'neon-select__option--selected': multiple\n                  ? modelValue.indexOf(option.key) >= 0\n                  : option.key === modelValue,\n                'neon-select__option--highlighted': option.key === highlightedKey,\n              },\n              `neon-select__option--${size}`,\n            ]\"\n            class=\"neon-select__option\"\n            role=\"option\"\n            @mouseover=\"changeHighlighted(option.key)\"\n            @click.stop.prevent.capture=\"!option.disabled && clickOption(option)\"\n            @enter.stop.prevent=\"!option.disabled && clickOption(option)\"\n          >\n            <div class=\"neon-select__option-container\">\n              <!-- @slot provide a custom template for an option.<br />Bindings: <strong>option</strong>\n              (<em>NeonSelectOption</em>). This slot is purely for formatting the option, all accessibility actions\n              still apply. -->\n              <slot :option=\"option\" name=\"option\">\n                <neon-switch\n                  v-if=\"multiple\"\n                  :color=\"color\"\n                  :modelValue=\"modelValue.indexOf(option.key) >= 0\"\n                  :size=\"size === 'l' ? 'm' : 's'\"\n                  switch-style=\"checkbox\"\n                />\n                <neon-icon\n                  v-if=\"option.icon\"\n                  :disabled=\"option.disabled\"\n                  :name=\"option.icon\"\n                  class=\"neon-select__option-icon\"\n                />\n                <span class=\"neon-select__option-label\">{{ option.label }}</span>\n              </slot>\n            </div>\n          </li>\n        </template>\n      </ul>\n    </neon-dropdown>\n    <select\n      :disabled=\"disabled\"\n      :multiple=\"multiple\"\n      class=\"neon-select__native\"\n      v-bind=\"sanitizedAttributes\"\n      @input=\"nativeSelectChange\"\n    >\n      <option :selected=\"multiple ? modelValue.length === 0 : modelValue === ''\" disabled hidden value=\"\">\n        {{ placeholder }}\n      </option>\n      <template v-if=\"groupedOptions\">\n        <optgroup v-for=\"group in groupedOptions\" :key=\"group.group\" :label=\"group.group\">\n          <option\n            v-for=\"(option, index) in group.options\"\n            :key=\"`${option.key}-native`\"\n            :data-index=\"index\"\n            :disabled=\"option.disabled\"\n            :multiple=\"multiple\"\n            :selected=\"multiple ? modelValue.indexOf(option.key) >= 0 : option.key === modelValue\"\n            :value=\"option.key\"\n          >\n            {{ option.label }}\n          </option>\n        </optgroup>\n      </template>\n      <template v-else>\n        <option\n          v-for=\"(option, index) in options\"\n          :key=\"`${option.key}-native`\"\n          :data-index=\"index\"\n          :disabled=\"option.disabled\"\n          :multiple=\"multiple\"\n          :selected=\"multiple ? modelValue.indexOf(option.key) >= 0 : option.key === modelValue\"\n          :value=\"option.key\"\n        >\n          {{ option.label }}\n        </option>\n      </template>\n    </select>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonSelect.ts\"></script>\n"],"names":["_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_6","_hoisted_7","_openBlock","_createElementBlock","_createVNode","_component_neon_dropdown","_mergeProps","_ctx","$event","_createElementVNode","_normalizeClass","_toDisplayString","_Fragment","_renderList","group","option","_withModifiers","_renderSlot","_createBlock","_component_neon_switch","_component_neon_icon","args","_hoisted_9","index","_hoisted_11","_hoisted_12"],"mappings":"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"}
+{"version":3,"file":"NeonSelect.vue.cjs.js","sources":["../../../../src/components/user-input/select/NeonSelect.vue"],"sourcesContent":["<template>\n  <div class=\"neon-select__wrapper\">\n    <neon-dropdown\n      :id=\"id\"\n      ref=\"dropdown\"\n      v-model=\"open\"\n      :aria-activedescendant=\"multiple ? modelValue[0] : modelValue\"\n      :aria-multiselectable=\"multiple\"\n      :class=\"[`neon-select--${color}`, { 'neon-select--grouped': groupedOptions, 'neon-select--multiple': multiple }]\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :icon=\"computedIcon\"\n      :label=\"computedLabel\"\n      :size=\"size\"\n      class=\"neon-select\"\n      role=\"listbox\"\n      v-bind=\"sanitizedAttributes\"\n      @dropdown-placement=\"onPlacement\"\n    >\n      <ul class=\"no-style neon-select__options\">\n        <li\n          v-if=\"placeholderAsOption\"\n          :class=\"`neon-select__option--${size}`\"\n          class=\"neon-select__option neon-select__option--disabled neon-select__option-placeholder\"\n        >\n          <div class=\"neon-select__option-container\">\n            <span class=\"neon-select__option-label\">{{ placeholder }}</span>\n          </div>\n        </li>\n        <template v-for=\"group in computedOptions\">\n          <li v-if=\"group.group !== ''\" :key=\"group.group\" class=\"neon-select__option-title\">{{ group.group }}</li>\n          <li\n            v-for=\"option in group.options\"\n            :id=\"option.key\"\n            :key=\"option.key\"\n            :aria-selected=\"multiple ? modelValue.indexOf(option.key) >= 0 : option.key === modelValue\"\n            :class=\"[\n              {\n                'neon-select__option--disabled': option.disabled,\n                'neon-select__option--separator-before': option.separatorBefore,\n                'neon-select__option--selected': multiple\n                  ? modelValue.indexOf(option.key) >= 0\n                  : option.key === modelValue,\n                'neon-select__option--highlighted': option.key === highlightedKey,\n              },\n              `neon-select__option--${size}`,\n            ]\"\n            class=\"neon-select__option\"\n            role=\"option\"\n            tabindex=\"0\"\n            @mouseover=\"changeHighlighted(option.key)\"\n            @click.stop.prevent.capture=\"!option.disabled && clickOption(option)\"\n            @enter.stop.prevent=\"!option.disabled && clickOption(option)\"\n          >\n            <div class=\"neon-select__option-container\">\n              <!-- @slot provide a custom template for an option.<br />Bindings: <strong>option</strong>\n              (<em>NeonSelectOption</em>). This slot is purely for formatting the option, all accessibility actions\n              still apply. -->\n              <slot :option=\"option\" name=\"option\">\n                <neon-switch\n                  v-if=\"multiple\"\n                  :color=\"color\"\n                  :modelValue=\"modelValue.indexOf(option.key) >= 0\"\n                  :size=\"size === 'l' ? 'm' : 's'\"\n                  switch-style=\"checkbox\"\n                />\n                <neon-icon\n                  v-if=\"option.icon\"\n                  :disabled=\"option.disabled\"\n                  :name=\"option.icon\"\n                  class=\"neon-select__option-icon\"\n                />\n                <span class=\"neon-select__option-label\">{{ option.label }}</span>\n              </slot>\n            </div>\n          </li>\n        </template>\n      </ul>\n    </neon-dropdown>\n    <select\n      :disabled=\"disabled\"\n      :multiple=\"multiple\"\n      class=\"neon-select__native\"\n      v-bind=\"sanitizedAttributes\"\n      @input=\"nativeSelectChange\"\n    >\n      <option :selected=\"multiple ? modelValue.length === 0 : modelValue === ''\" disabled hidden value=\"\">\n        {{ placeholder }}\n      </option>\n      <template v-if=\"groupedOptions\">\n        <optgroup v-for=\"group in groupedOptions\" :key=\"group.group\" :label=\"group.group\">\n          <option\n            v-for=\"(option, index) in group.options\"\n            :key=\"`${option.key}-native`\"\n            :data-index=\"index\"\n            :disabled=\"option.disabled\"\n            :multiple=\"multiple\"\n            :selected=\"multiple ? modelValue.indexOf(option.key) >= 0 : option.key === modelValue\"\n            :value=\"option.key\"\n          >\n            {{ option.label }}\n          </option>\n        </optgroup>\n      </template>\n      <template v-else>\n        <option\n          v-for=\"(option, index) in options\"\n          :key=\"`${option.key}-native`\"\n          :data-index=\"index\"\n          :disabled=\"option.disabled\"\n          :multiple=\"multiple\"\n          :selected=\"multiple ? modelValue.indexOf(option.key) >= 0 : option.key === modelValue\"\n          :value=\"option.key\"\n        >\n          {{ option.label }}\n        </option>\n      </template>\n    </select>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonSelect.ts\"></script>\n"],"names":["_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_6","_hoisted_7","_openBlock","_createElementBlock","_createVNode","_component_neon_dropdown","_mergeProps","_ctx","$event","_createElementVNode","_normalizeClass","_toDisplayString","_Fragment","_renderList","group","option","_withModifiers","_renderSlot","_createBlock","_component_neon_switch","_component_neon_icon","args","_hoisted_9","index","_hoisted_11","_hoisted_12"],"mappings":"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"}

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

@@ -49,6 +49,7 @@ function L(e, r, F, H, K, U) {
                 `neon-select__option--${e.size}`
               ], "neon-select__option"]),
               role: "option",
+              tabindex: "0",
               onMouseover: (u) => e.changeHighlighted(l.key),
               onClickCapture: k((u) => !l.disabled && e.clickOption(l), ["stop", "prevent"]),
               onEnter: k((u) => !l.disabled && e.clickOption(l), ["stop", "prevent"])

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

@@ -1 +1 @@
-{"version":3,"file":"NeonSelect.vue.es.js","sources":["../../../../src/components/user-input/select/NeonSelect.vue"],"sourcesContent":["<template>\n  <div class=\"neon-select__wrapper\">\n    <neon-dropdown\n      :id=\"id\"\n      ref=\"dropdown\"\n      v-model=\"open\"\n      :aria-activedescendant=\"multiple ? modelValue[0] : modelValue\"\n      :aria-multiselectable=\"multiple\"\n      :class=\"[`neon-select--${color}`, { 'neon-select--grouped': groupedOptions, 'neon-select--multiple': multiple }]\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :icon=\"computedIcon\"\n      :label=\"computedLabel\"\n      :size=\"size\"\n      class=\"neon-select\"\n      role=\"listbox\"\n      v-bind=\"sanitizedAttributes\"\n      @dropdown-placement=\"onPlacement\"\n    >\n      <ul class=\"no-style neon-select__options\">\n        <li\n          v-if=\"placeholderAsOption\"\n          :class=\"`neon-select__option--${size}`\"\n          class=\"neon-select__option neon-select__option--disabled neon-select__option-placeholder\"\n        >\n          <div class=\"neon-select__option-container\">\n            <span class=\"neon-select__option-label\">{{ placeholder }}</span>\n          </div>\n        </li>\n        <template v-for=\"group in computedOptions\">\n          <li v-if=\"group.group !== ''\" :key=\"group.group\" class=\"neon-select__option-title\">{{ group.group }}</li>\n          <li\n            v-for=\"option in group.options\"\n            :id=\"option.key\"\n            :key=\"option.key\"\n            :aria-selected=\"multiple ? modelValue.indexOf(option.key) >= 0 : option.key === modelValue\"\n            :class=\"[\n              {\n                'neon-select__option--disabled': option.disabled,\n                'neon-select__option--separator-before': option.separatorBefore,\n                'neon-select__option--selected': multiple\n                  ? modelValue.indexOf(option.key) >= 0\n                  : option.key === modelValue,\n                'neon-select__option--highlighted': option.key === highlightedKey,\n              },\n              `neon-select__option--${size}`,\n            ]\"\n            class=\"neon-select__option\"\n            role=\"option\"\n            @mouseover=\"changeHighlighted(option.key)\"\n            @click.stop.prevent.capture=\"!option.disabled && clickOption(option)\"\n            @enter.stop.prevent=\"!option.disabled && clickOption(option)\"\n          >\n            <div class=\"neon-select__option-container\">\n              <!-- @slot provide a custom template for an option.<br />Bindings: <strong>option</strong>\n              (<em>NeonSelectOption</em>). This slot is purely for formatting the option, all accessibility actions\n              still apply. -->\n              <slot :option=\"option\" name=\"option\">\n                <neon-switch\n                  v-if=\"multiple\"\n                  :color=\"color\"\n                  :modelValue=\"modelValue.indexOf(option.key) >= 0\"\n                  :size=\"size === 'l' ? 'm' : 's'\"\n                  switch-style=\"checkbox\"\n                />\n                <neon-icon\n                  v-if=\"option.icon\"\n                  :disabled=\"option.disabled\"\n                  :name=\"option.icon\"\n                  class=\"neon-select__option-icon\"\n                />\n                <span class=\"neon-select__option-label\">{{ option.label }}</span>\n              </slot>\n            </div>\n          </li>\n        </template>\n      </ul>\n    </neon-dropdown>\n    <select\n      :disabled=\"disabled\"\n      :multiple=\"multiple\"\n      class=\"neon-select__native\"\n      v-bind=\"sanitizedAttributes\"\n      @input=\"nativeSelectChange\"\n    >\n      <option :selected=\"multiple ? modelValue.length === 0 : modelValue === ''\" disabled hidden value=\"\">\n        {{ placeholder }}\n      </option>\n      <template v-if=\"groupedOptions\">\n        <optgroup v-for=\"group in groupedOptions\" :key=\"group.group\" :label=\"group.group\">\n          <option\n            v-for=\"(option, index) in group.options\"\n            :key=\"`${option.key}-native`\"\n            :data-index=\"index\"\n            :disabled=\"option.disabled\"\n            :multiple=\"multiple\"\n            :selected=\"multiple ? modelValue.indexOf(option.key) >= 0 : option.key === modelValue\"\n            :value=\"option.key\"\n          >\n            {{ option.label }}\n          </option>\n        </optgroup>\n      </template>\n      <template v-else>\n        <option\n          v-for=\"(option, index) in options\"\n          :key=\"`${option.key}-native`\"\n          :data-index=\"index\"\n          :disabled=\"option.disabled\"\n          :multiple=\"multiple\"\n          :selected=\"multiple ? modelValue.indexOf(option.key) >= 0 : option.key === modelValue\"\n          :value=\"option.key\"\n        >\n          {{ option.label }}\n        </option>\n      </template>\n    </select>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonSelect.ts\"></script>\n"],"names":["_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_6","_hoisted_7","_openBlock","_createElementBlock","_createVNode","_component_neon_dropdown","_mergeProps","_ctx","$event","_createElementVNode","_normalizeClass","_toDisplayString","_Fragment","_renderList","group","option","_withModifiers","_renderSlot","_createBlock","_component_neon_switch","_component_neon_icon","args","_hoisted_9","index","_hoisted_11","_hoisted_12"],"mappings":"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"}
+{"version":3,"file":"NeonSelect.vue.es.js","sources":["../../../../src/components/user-input/select/NeonSelect.vue"],"sourcesContent":["<template>\n  <div class=\"neon-select__wrapper\">\n    <neon-dropdown\n      :id=\"id\"\n      ref=\"dropdown\"\n      v-model=\"open\"\n      :aria-activedescendant=\"multiple ? modelValue[0] : modelValue\"\n      :aria-multiselectable=\"multiple\"\n      :class=\"[`neon-select--${color}`, { 'neon-select--grouped': groupedOptions, 'neon-select--multiple': multiple }]\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :icon=\"computedIcon\"\n      :label=\"computedLabel\"\n      :size=\"size\"\n      class=\"neon-select\"\n      role=\"listbox\"\n      v-bind=\"sanitizedAttributes\"\n      @dropdown-placement=\"onPlacement\"\n    >\n      <ul class=\"no-style neon-select__options\">\n        <li\n          v-if=\"placeholderAsOption\"\n          :class=\"`neon-select__option--${size}`\"\n          class=\"neon-select__option neon-select__option--disabled neon-select__option-placeholder\"\n        >\n          <div class=\"neon-select__option-container\">\n            <span class=\"neon-select__option-label\">{{ placeholder }}</span>\n          </div>\n        </li>\n        <template v-for=\"group in computedOptions\">\n          <li v-if=\"group.group !== ''\" :key=\"group.group\" class=\"neon-select__option-title\">{{ group.group }}</li>\n          <li\n            v-for=\"option in group.options\"\n            :id=\"option.key\"\n            :key=\"option.key\"\n            :aria-selected=\"multiple ? modelValue.indexOf(option.key) >= 0 : option.key === modelValue\"\n            :class=\"[\n              {\n                'neon-select__option--disabled': option.disabled,\n                'neon-select__option--separator-before': option.separatorBefore,\n                'neon-select__option--selected': multiple\n                  ? modelValue.indexOf(option.key) >= 0\n                  : option.key === modelValue,\n                'neon-select__option--highlighted': option.key === highlightedKey,\n              },\n              `neon-select__option--${size}`,\n            ]\"\n            class=\"neon-select__option\"\n            role=\"option\"\n            tabindex=\"0\"\n            @mouseover=\"changeHighlighted(option.key)\"\n            @click.stop.prevent.capture=\"!option.disabled && clickOption(option)\"\n            @enter.stop.prevent=\"!option.disabled && clickOption(option)\"\n          >\n            <div class=\"neon-select__option-container\">\n              <!-- @slot provide a custom template for an option.<br />Bindings: <strong>option</strong>\n              (<em>NeonSelectOption</em>). This slot is purely for formatting the option, all accessibility actions\n              still apply. -->\n              <slot :option=\"option\" name=\"option\">\n                <neon-switch\n                  v-if=\"multiple\"\n                  :color=\"color\"\n                  :modelValue=\"modelValue.indexOf(option.key) >= 0\"\n                  :size=\"size === 'l' ? 'm' : 's'\"\n                  switch-style=\"checkbox\"\n                />\n                <neon-icon\n                  v-if=\"option.icon\"\n                  :disabled=\"option.disabled\"\n                  :name=\"option.icon\"\n                  class=\"neon-select__option-icon\"\n                />\n                <span class=\"neon-select__option-label\">{{ option.label }}</span>\n              </slot>\n            </div>\n          </li>\n        </template>\n      </ul>\n    </neon-dropdown>\n    <select\n      :disabled=\"disabled\"\n      :multiple=\"multiple\"\n      class=\"neon-select__native\"\n      v-bind=\"sanitizedAttributes\"\n      @input=\"nativeSelectChange\"\n    >\n      <option :selected=\"multiple ? modelValue.length === 0 : modelValue === ''\" disabled hidden value=\"\">\n        {{ placeholder }}\n      </option>\n      <template v-if=\"groupedOptions\">\n        <optgroup v-for=\"group in groupedOptions\" :key=\"group.group\" :label=\"group.group\">\n          <option\n            v-for=\"(option, index) in group.options\"\n            :key=\"`${option.key}-native`\"\n            :data-index=\"index\"\n            :disabled=\"option.disabled\"\n            :multiple=\"multiple\"\n            :selected=\"multiple ? modelValue.indexOf(option.key) >= 0 : option.key === modelValue\"\n            :value=\"option.key\"\n          >\n            {{ option.label }}\n          </option>\n        </optgroup>\n      </template>\n      <template v-else>\n        <option\n          v-for=\"(option, index) in options\"\n          :key=\"`${option.key}-native`\"\n          :data-index=\"index\"\n          :disabled=\"option.disabled\"\n          :multiple=\"multiple\"\n          :selected=\"multiple ? modelValue.indexOf(option.key) >= 0 : option.key === modelValue\"\n          :value=\"option.key\"\n        >\n          {{ option.label }}\n        </option>\n      </template>\n    </select>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonSelect.ts\"></script>\n"],"names":["_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_6","_hoisted_7","_openBlock","_createElementBlock","_createVNode","_component_neon_dropdown","_mergeProps","_ctx","$event","_createElementVNode","_normalizeClass","_toDisplayString","_Fragment","_renderList","group","option","_withModifiers","_renderSlot","_createBlock","_component_neon_switch","_component_neon_icon","args","_hoisted_9","index","_hoisted_11","_hoisted_12"],"mappings":"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"}

package/dist/components/user-input/slider/NeonSlider.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const t=require("vue"),f=require("../../../common/enums/NeonFunctionalColor.cjs.js"),p=require("../../../common/utils/NeonNumberUtils.cjs.js"),y=t.defineComponent({name:"NeonSlider",props:{modelValue:{type:Number,required:!0},id:{type:String,required:!1},color:{type:String,default:f.NeonFunctionalColor.LowContrast},locale:{type:String,default:null},output:{type:Boolean,default:!0},legend:{type:Boolean,default:!0},tooltip:{type:Boolean,default:!0},percentage:{type:Boolean,default:!1},step:{type:Number,required:!1},decimals:{type:Number,required:!1},valueTemplate:{type:String,required:!1},disableFormatting:{type:Boolean,default:!1},min:{type:Number,default:0},max:{type:Number,required:!1},lowerBound:{type:Number,required:!1},upperBound:{type:Number,required:!1},disabled:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(e,{emit:o}){const r=t.useAttrs(),d=t.computed(()=>{const{...u}=r;return u}),l=u=>e.disableFormatting?u:p.NeonNumberUtils.formatNumber(u,{decimals:e.decimals,format:e.valueTemplate,percentage:e.percentage},e.locale),i=t.computed(()=>l(e.min)),n=t.computed(()=>e.max!==void 0?e.max:e.percentage?1:100),m=t.computed(()=>l(n.value)),c=t.computed(()=>l(e.modelValue)),s=t.computed(()=>e.step!==void 0?e.step:e.percentage?.01:1);return{sanitizedAttributes:d,formattedMin:i,formattedMax:m,formattedValue:c,computedMax:n,computedStep:s,changeValue:u=>{let a=+u.target.value;e.lowerBound!==void 0&&a<e.lowerBound?a=e.lowerBound:e.upperBound!==void 0&&a>e.upperBound&&(a=e.upperBound),o("update:modelValue",a)}}}});module.exports=y;
+"use strict";const t=require("vue"),f=require("../../../common/enums/NeonFunctionalColor.cjs.js"),p=require("../../../common/utils/NeonNumberUtils.cjs.js"),y=t.defineComponent({name:"NeonSlider",props:{modelValue:{type:Number,required:!0},id:{type:String,required:!1},color:{type:String,default:f.NeonFunctionalColor.Primary},locale:{type:String,default:null},output:{type:Boolean,default:!0},legend:{type:Boolean,default:!0},tooltip:{type:Boolean,default:!0},percentage:{type:Boolean,default:!1},step:{type:Number,required:!1},decimals:{type:Number,required:!1},valueTemplate:{type:String,required:!1},disableFormatting:{type:Boolean,default:!1},min:{type:Number,default:0},max:{type:Number,required:!1},lowerBound:{type:Number,required:!1},upperBound:{type:Number,required:!1},disabled:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(e,{emit:o}){const r=t.useAttrs(),d=t.computed(()=>{const{...u}=r;return u}),l=u=>e.disableFormatting?u:p.NeonNumberUtils.formatNumber(u,{decimals:e.decimals,format:e.valueTemplate,percentage:e.percentage},e.locale),i=t.computed(()=>l(e.min)),n=t.computed(()=>e.max!==void 0?e.max:e.percentage?1:100),m=t.computed(()=>l(n.value)),c=t.computed(()=>l(e.modelValue)),s=t.computed(()=>e.step!==void 0?e.step:e.percentage?.01:1);return{sanitizedAttributes:d,formattedMin:i,formattedMax:m,formattedValue:c,computedMax:n,computedStep:s,changeValue:u=>{let a=+u.target.value;e.lowerBound!==void 0&&a<e.lowerBound?a=e.lowerBound:e.upperBound!==void 0&&a>e.upperBound&&(a=e.upperBound),o("update:modelValue",a)}}}});module.exports=y;
 //# sourceMappingURL=NeonSlider.cjs.js.map

package/dist/components/user-input/slider/NeonSlider.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonSlider.cjs.js","sources":["../../../../src/components/user-input/slider/NeonSlider.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, useAttrs } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonNumberUtils } from '@/common/utils/NeonNumberUtils';\n\n/**\n * <p>\n *   The <strong>NeonSlider</strong> component is the equivalent of an <strong>&lt;input type=\"range\" /&gt;</strong>. In\n *   addition to this, there is support for automatic formatting the min, max and selected value plus options for\n *   percentage formatting and providing custom templates, e.g. currency formatting.\n * </p>\n * <p><strong>NeonNumber</strong> also supports all relevant properties found on an HTML &lt;input&gt;.</p>\n */\nexport default defineComponent({\n  name: 'NeonSlider',\n  props: {\n    /**\n     * The current input <em>value</em>.\n     */\n    modelValue: { type: Number, required: true },\n    /**\n     * id of the range input.\n     */\n    id: { type: String, required: false },\n    /**\n     * Slider color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * The locale used for display purposes. This defaults to the browser's locale if none is provided.\n     */\n    locale: { type: String, default: null },\n    /**\n     * Show/hide the output.\n     */\n    output: { type: Boolean, default: true },\n    /**\n     * Show/hide the legend.\n     */\n    legend: { type: Boolean, default: true },\n    /**\n     * Show/hide the tooltip.\n     */\n    tooltip: { type: Boolean, default: true },\n    /**\n     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%.\n     */\n    percentage: { type: Boolean, default: false },\n    /**\n     * The size of steps between values the user can select. The default value is 1 except when percentage = true the\n     * default is 0.01 (1%).\n     */\n    step: { type: Number, required: false },\n    /**\n     * The rounding precision for display purposes.\n     */\n    decimals: { type: Number, required: false },\n    /**\n     * A template string used for formatting the display value. Use the placeholder {value} to reference the value in the\n     * template string. e.g. value = 90, ${value} => $90.\n     */\n    valueTemplate: { type: String, required: false },\n    /**\n     * Disable formatting, e.g. in the case of a year value -> display as 2020, not 2,020.\n     */\n    disableFormatting: { type: Boolean, default: false },\n    /**\n     * The minimum range value.\n     */\n    min: { type: Number, default: 0 },\n    /**\n     * The maximum range value. The default value is 100 except when percentage = true the default is 1 (100%).\n     */\n    max: { type: Number, required: false },\n    /**\n     * The lower bound within the range of values.\n     * @ignore\n     */\n    lowerBound: { type: Number, required: false },\n    /**\n     * The upper bound within the range of values.\n     * @ignore\n     */\n    upperBound: { type: Number, required: false },\n    /**\n     * Component disabled state.\n     */\n    disabled: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Event triggered when the value changes.\n     *\n     * @type {number} the raw selected numeric value.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\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 formatNumber = (value: number) => {\n      return !props.disableFormatting\n        ? NeonNumberUtils.formatNumber(\n            value,\n            {\n              decimals: props.decimals,\n              format: props.valueTemplate,\n              percentage: props.percentage,\n            },\n            props.locale,\n          )\n        : value;\n    };\n\n    const formattedMin = computed(() => formatNumber(props.min));\n    const computedMax = computed(() => (props.max !== undefined ? props.max : props.percentage ? 1 : 100));\n    const formattedMax = computed(() => formatNumber(computedMax.value));\n    const formattedValue = computed(() => formatNumber(props.modelValue));\n    const computedStep = computed(() => (props.step !== undefined ? props.step : props.percentage ? 0.01 : 1));\n\n    const changeValue = (event: Event) => {\n      const input = event.target as HTMLInputElement;\n      let newValue = +input.value;\n      // adjust for bounds if set\n      if (props.lowerBound !== undefined && newValue < props.lowerBound) {\n        newValue = props.lowerBound;\n      } else if (props.upperBound !== undefined && newValue > props.upperBound) {\n        newValue = props.upperBound;\n      }\n      emit('update:modelValue', newValue);\n    };\n\n    return {\n      sanitizedAttributes,\n      formattedMin,\n      formattedMax,\n      formattedValue,\n      computedMax,\n      computedStep,\n      changeValue,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonFunctionalColor","props","emit","attrs","useAttrs","sanitizedAttributes","computed","sanitized","formatNumber","value","NeonNumberUtils","formattedMin","computedMax","formattedMax","formattedValue","computedStep","event","newValue"],"mappings":"4JAYAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,MAAO,CAIL,WAAY,CAAE,KAAM,OAAQ,SAAU,EAAA,EAItC,GAAI,CAAE,KAAM,OAAQ,SAAU,EAAA,EAI9B,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,WAAA,EAIjF,OAAQ,CAAE,KAAM,OAAQ,QAAS,IAAA,EAIjC,OAAQ,CAAE,KAAM,QAAS,QAAS,EAAA,EAIlC,OAAQ,CAAE,KAAM,QAAS,QAAS,EAAA,EAIlC,QAAS,CAAE,KAAM,QAAS,QAAS,EAAA,EAInC,WAAY,CAAE,KAAM,QAAS,QAAS,EAAA,EAKtC,KAAM,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIhC,SAAU,CAAE,KAAM,OAAQ,SAAU,EAAA,EAKpC,cAAe,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIzC,kBAAmB,CAAE,KAAM,QAAS,QAAS,EAAA,EAI7C,IAAK,CAAE,KAAM,OAAQ,QAAS,CAAA,EAI9B,IAAK,CAAE,KAAM,OAAQ,SAAU,EAAA,EAK/B,WAAY,CAAE,KAAM,OAAQ,SAAU,EAAA,EAKtC,WAAY,CAAE,KAAM,OAAQ,SAAU,EAAA,EAItC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAE5C,MAAO,CAML,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAQC,EAAAA,SAAA,EAERC,EAAsBC,EAAAA,SAAS,IAAM,CAEzC,KAAM,CAAE,GAAGC,CAAA,EAAcJ,EACzB,OAAOI,CACT,CAAC,EAEKC,EAAgBC,GACZR,EAAM,kBAUVQ,EATAC,EAAAA,gBAAgB,aACdD,EACA,CACE,SAAUR,EAAM,SAChB,OAAQA,EAAM,cACd,WAAYA,EAAM,UAAA,EAEpBA,EAAM,MAAA,EAKRU,EAAeL,EAAAA,SAAS,IAAME,EAAaP,EAAM,GAAG,CAAC,EACrDW,EAAcN,EAAAA,SAAS,IAAOL,EAAM,MAAQ,OAAYA,EAAM,IAAMA,EAAM,WAAa,EAAI,GAAI,EAC/FY,EAAeP,EAAAA,SAAS,IAAME,EAAaI,EAAY,KAAK,CAAC,EAC7DE,EAAiBR,EAAAA,SAAS,IAAME,EAAaP,EAAM,UAAU,CAAC,EAC9Dc,EAAeT,EAAAA,SAAS,IAAOL,EAAM,OAAS,OAAYA,EAAM,KAAOA,EAAM,WAAa,IAAO,CAAE,EAczG,MAAO,CACL,oBAAAI,EACA,aAAAM,EACA,aAAAE,EACA,eAAAC,EACA,YAAAF,EACA,aAAAG,EACA,YAnBmBC,GAAiB,CAEpC,IAAIC,EAAW,CADDD,EAAM,OACE,MAElBf,EAAM,aAAe,QAAagB,EAAWhB,EAAM,WACrDgB,EAAWhB,EAAM,WACRA,EAAM,aAAe,QAAagB,EAAWhB,EAAM,aAC5DgB,EAAWhB,EAAM,YAEnBC,EAAK,oBAAqBe,CAAQ,CACpC,CASE,CAEJ,CACF,CAAC"}
+{"version":3,"file":"NeonSlider.cjs.js","sources":["../../../../src/components/user-input/slider/NeonSlider.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, useAttrs } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonNumberUtils } from '@/common/utils/NeonNumberUtils';\n\n/**\n * <p>\n *   The <strong>NeonSlider</strong> component is the equivalent of an <strong>&lt;input type=\"range\" /&gt;</strong>. In\n *   addition to this, there is support for automatic formatting the min, max and selected value plus options for\n *   percentage formatting and providing custom templates, e.g. currency formatting.\n * </p>\n * <p><strong>NeonNumber</strong> also supports all relevant properties found on an HTML &lt;input&gt;.</p>\n */\nexport default defineComponent({\n  name: 'NeonSlider',\n  props: {\n    /**\n     * The current input <em>value</em>.\n     */\n    modelValue: { type: Number, required: true },\n    /**\n     * id of the range input.\n     */\n    id: { type: String, required: false },\n    /**\n     * Slider color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The locale used for display purposes. This defaults to the browser's locale if none is provided.\n     */\n    locale: { type: String, default: null },\n    /**\n     * Show/hide the output.\n     */\n    output: { type: Boolean, default: true },\n    /**\n     * Show/hide the legend.\n     */\n    legend: { type: Boolean, default: true },\n    /**\n     * Show/hide the tooltip.\n     */\n    tooltip: { type: Boolean, default: true },\n    /**\n     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%.\n     */\n    percentage: { type: Boolean, default: false },\n    /**\n     * The size of steps between values the user can select. The default value is 1 except when percentage = true the\n     * default is 0.01 (1%).\n     */\n    step: { type: Number, required: false },\n    /**\n     * The rounding precision for display purposes.\n     */\n    decimals: { type: Number, required: false },\n    /**\n     * A template string used for formatting the display value. Use the placeholder {value} to reference the value in the\n     * template string. e.g. value = 90, ${value} => $90.\n     */\n    valueTemplate: { type: String, required: false },\n    /**\n     * Disable formatting, e.g. in the case of a year value -> display as 2020, not 2,020.\n     */\n    disableFormatting: { type: Boolean, default: false },\n    /**\n     * The minimum range value.\n     */\n    min: { type: Number, default: 0 },\n    /**\n     * The maximum range value. The default value is 100 except when percentage = true the default is 1 (100%).\n     */\n    max: { type: Number, required: false },\n    /**\n     * The lower bound within the range of values.\n     * @ignore\n     */\n    lowerBound: { type: Number, required: false },\n    /**\n     * The upper bound within the range of values.\n     * @ignore\n     */\n    upperBound: { type: Number, required: false },\n    /**\n     * Component disabled state.\n     */\n    disabled: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Event triggered when the value changes.\n     *\n     * @type {number} the raw selected numeric value.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\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 formatNumber = (value: number) => {\n      return !props.disableFormatting\n        ? NeonNumberUtils.formatNumber(\n            value,\n            {\n              decimals: props.decimals,\n              format: props.valueTemplate,\n              percentage: props.percentage,\n            },\n            props.locale,\n          )\n        : value;\n    };\n\n    const formattedMin = computed(() => formatNumber(props.min));\n    const computedMax = computed(() => (props.max !== undefined ? props.max : props.percentage ? 1 : 100));\n    const formattedMax = computed(() => formatNumber(computedMax.value));\n    const formattedValue = computed(() => formatNumber(props.modelValue));\n    const computedStep = computed(() => (props.step !== undefined ? props.step : props.percentage ? 0.01 : 1));\n\n    const changeValue = (event: Event) => {\n      const input = event.target as HTMLInputElement;\n      let newValue = +input.value;\n      // adjust for bounds if set\n      if (props.lowerBound !== undefined && newValue < props.lowerBound) {\n        newValue = props.lowerBound;\n      } else if (props.upperBound !== undefined && newValue > props.upperBound) {\n        newValue = props.upperBound;\n      }\n      emit('update:modelValue', newValue);\n    };\n\n    return {\n      sanitizedAttributes,\n      formattedMin,\n      formattedMax,\n      formattedValue,\n      computedMax,\n      computedStep,\n      changeValue,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonFunctionalColor","props","emit","attrs","useAttrs","sanitizedAttributes","computed","sanitized","formatNumber","value","NeonNumberUtils","formattedMin","computedMax","formattedMax","formattedValue","computedStep","event","newValue"],"mappings":"4JAYAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,MAAO,CAIL,WAAY,CAAE,KAAM,OAAQ,SAAU,EAAA,EAItC,GAAI,CAAE,KAAM,OAAQ,SAAU,EAAA,EAI9B,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,OAAA,EAIjF,OAAQ,CAAE,KAAM,OAAQ,QAAS,IAAA,EAIjC,OAAQ,CAAE,KAAM,QAAS,QAAS,EAAA,EAIlC,OAAQ,CAAE,KAAM,QAAS,QAAS,EAAA,EAIlC,QAAS,CAAE,KAAM,QAAS,QAAS,EAAA,EAInC,WAAY,CAAE,KAAM,QAAS,QAAS,EAAA,EAKtC,KAAM,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIhC,SAAU,CAAE,KAAM,OAAQ,SAAU,EAAA,EAKpC,cAAe,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIzC,kBAAmB,CAAE,KAAM,QAAS,QAAS,EAAA,EAI7C,IAAK,CAAE,KAAM,OAAQ,QAAS,CAAA,EAI9B,IAAK,CAAE,KAAM,OAAQ,SAAU,EAAA,EAK/B,WAAY,CAAE,KAAM,OAAQ,SAAU,EAAA,EAKtC,WAAY,CAAE,KAAM,OAAQ,SAAU,EAAA,EAItC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAE5C,MAAO,CAML,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAQC,EAAAA,SAAA,EAERC,EAAsBC,EAAAA,SAAS,IAAM,CAEzC,KAAM,CAAE,GAAGC,CAAA,EAAcJ,EACzB,OAAOI,CACT,CAAC,EAEKC,EAAgBC,GACZR,EAAM,kBAUVQ,EATAC,EAAAA,gBAAgB,aACdD,EACA,CACE,SAAUR,EAAM,SAChB,OAAQA,EAAM,cACd,WAAYA,EAAM,UAAA,EAEpBA,EAAM,MAAA,EAKRU,EAAeL,EAAAA,SAAS,IAAME,EAAaP,EAAM,GAAG,CAAC,EACrDW,EAAcN,EAAAA,SAAS,IAAOL,EAAM,MAAQ,OAAYA,EAAM,IAAMA,EAAM,WAAa,EAAI,GAAI,EAC/FY,EAAeP,EAAAA,SAAS,IAAME,EAAaI,EAAY,KAAK,CAAC,EAC7DE,EAAiBR,EAAAA,SAAS,IAAME,EAAaP,EAAM,UAAU,CAAC,EAC9Dc,EAAeT,EAAAA,SAAS,IAAOL,EAAM,OAAS,OAAYA,EAAM,KAAOA,EAAM,WAAa,IAAO,CAAE,EAczG,MAAO,CACL,oBAAAI,EACA,aAAAM,EACA,aAAAE,EACA,eAAAC,EACA,YAAAF,EACA,aAAAG,EACA,YAnBmBC,GAAiB,CAEpC,IAAIC,EAAW,CADDD,EAAM,OACE,MAElBf,EAAM,aAAe,QAAagB,EAAWhB,EAAM,WACrDgB,EAAWhB,EAAM,WACRA,EAAM,aAAe,QAAagB,EAAWhB,EAAM,aAC5DgB,EAAWhB,EAAM,YAEnBC,EAAK,oBAAqBe,CAAQ,CACpC,CASE,CAEJ,CACF,CAAC"}

package/dist/components/user-input/slider/NeonSlider.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as s, useAttrs as p, computed as a } from "vue";
-import { NeonFunctionalColor as y } from "../../../common/enums/NeonFunctionalColor.es.js";
+import { defineComponent as s, useAttrs as y, computed as a } from "vue";
+import { NeonFunctionalColor as p } from "../../../common/enums/NeonFunctionalColor.es.js";
 import { NeonNumberUtils as g } from "../../../common/utils/NeonNumberUtils.es.js";
 const v = s({
   name: "NeonSlider",
@@ -15,7 +15,7 @@ const v = s({
     /**
      * Slider color.
      */
-    color: { type: String, default: y.LowContrast },
+    color: { type: String, default: p.Primary },
     /**
      * The locale used for display purposes. This defaults to the browser's locale if none is provided.
      */
@@ -86,7 +86,7 @@ const v = s({
     "update:modelValue"
   ],
   setup(e, { emit: o }) {
-    const r = p(), d = a(() => {
+    const r = y(), d = a(() => {
       const { ...t } = r;
       return t;
     }), l = (t) => e.disableFormatting ? t : g.formatNumber(

package/dist/components/user-input/slider/NeonSlider.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonSlider.es.js","sources":["../../../../src/components/user-input/slider/NeonSlider.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, useAttrs } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonNumberUtils } from '@/common/utils/NeonNumberUtils';\n\n/**\n * <p>\n *   The <strong>NeonSlider</strong> component is the equivalent of an <strong>&lt;input type=\"range\" /&gt;</strong>. In\n *   addition to this, there is support for automatic formatting the min, max and selected value plus options for\n *   percentage formatting and providing custom templates, e.g. currency formatting.\n * </p>\n * <p><strong>NeonNumber</strong> also supports all relevant properties found on an HTML &lt;input&gt;.</p>\n */\nexport default defineComponent({\n  name: 'NeonSlider',\n  props: {\n    /**\n     * The current input <em>value</em>.\n     */\n    modelValue: { type: Number, required: true },\n    /**\n     * id of the range input.\n     */\n    id: { type: String, required: false },\n    /**\n     * Slider color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * The locale used for display purposes. This defaults to the browser's locale if none is provided.\n     */\n    locale: { type: String, default: null },\n    /**\n     * Show/hide the output.\n     */\n    output: { type: Boolean, default: true },\n    /**\n     * Show/hide the legend.\n     */\n    legend: { type: Boolean, default: true },\n    /**\n     * Show/hide the tooltip.\n     */\n    tooltip: { type: Boolean, default: true },\n    /**\n     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%.\n     */\n    percentage: { type: Boolean, default: false },\n    /**\n     * The size of steps between values the user can select. The default value is 1 except when percentage = true the\n     * default is 0.01 (1%).\n     */\n    step: { type: Number, required: false },\n    /**\n     * The rounding precision for display purposes.\n     */\n    decimals: { type: Number, required: false },\n    /**\n     * A template string used for formatting the display value. Use the placeholder {value} to reference the value in the\n     * template string. e.g. value = 90, ${value} => $90.\n     */\n    valueTemplate: { type: String, required: false },\n    /**\n     * Disable formatting, e.g. in the case of a year value -> display as 2020, not 2,020.\n     */\n    disableFormatting: { type: Boolean, default: false },\n    /**\n     * The minimum range value.\n     */\n    min: { type: Number, default: 0 },\n    /**\n     * The maximum range value. The default value is 100 except when percentage = true the default is 1 (100%).\n     */\n    max: { type: Number, required: false },\n    /**\n     * The lower bound within the range of values.\n     * @ignore\n     */\n    lowerBound: { type: Number, required: false },\n    /**\n     * The upper bound within the range of values.\n     * @ignore\n     */\n    upperBound: { type: Number, required: false },\n    /**\n     * Component disabled state.\n     */\n    disabled: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Event triggered when the value changes.\n     *\n     * @type {number} the raw selected numeric value.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\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 formatNumber = (value: number) => {\n      return !props.disableFormatting\n        ? NeonNumberUtils.formatNumber(\n            value,\n            {\n              decimals: props.decimals,\n              format: props.valueTemplate,\n              percentage: props.percentage,\n            },\n            props.locale,\n          )\n        : value;\n    };\n\n    const formattedMin = computed(() => formatNumber(props.min));\n    const computedMax = computed(() => (props.max !== undefined ? props.max : props.percentage ? 1 : 100));\n    const formattedMax = computed(() => formatNumber(computedMax.value));\n    const formattedValue = computed(() => formatNumber(props.modelValue));\n    const computedStep = computed(() => (props.step !== undefined ? props.step : props.percentage ? 0.01 : 1));\n\n    const changeValue = (event: Event) => {\n      const input = event.target as HTMLInputElement;\n      let newValue = +input.value;\n      // adjust for bounds if set\n      if (props.lowerBound !== undefined && newValue < props.lowerBound) {\n        newValue = props.lowerBound;\n      } else if (props.upperBound !== undefined && newValue > props.upperBound) {\n        newValue = props.upperBound;\n      }\n      emit('update:modelValue', newValue);\n    };\n\n    return {\n      sanitizedAttributes,\n      formattedMin,\n      formattedMax,\n      formattedValue,\n      computedMax,\n      computedStep,\n      changeValue,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonFunctionalColor","props","emit","attrs","useAttrs","sanitizedAttributes","computed","sanitized","formatNumber","value","NeonNumberUtils","formattedMin","computedMax","formattedMax","formattedValue","computedStep","event","newValue"],"mappings":"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"}
+{"version":3,"file":"NeonSlider.es.js","sources":["../../../../src/components/user-input/slider/NeonSlider.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, useAttrs } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonNumberUtils } from '@/common/utils/NeonNumberUtils';\n\n/**\n * <p>\n *   The <strong>NeonSlider</strong> component is the equivalent of an <strong>&lt;input type=\"range\" /&gt;</strong>. In\n *   addition to this, there is support for automatic formatting the min, max and selected value plus options for\n *   percentage formatting and providing custom templates, e.g. currency formatting.\n * </p>\n * <p><strong>NeonNumber</strong> also supports all relevant properties found on an HTML &lt;input&gt;.</p>\n */\nexport default defineComponent({\n  name: 'NeonSlider',\n  props: {\n    /**\n     * The current input <em>value</em>.\n     */\n    modelValue: { type: Number, required: true },\n    /**\n     * id of the range input.\n     */\n    id: { type: String, required: false },\n    /**\n     * Slider color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The locale used for display purposes. This defaults to the browser's locale if none is provided.\n     */\n    locale: { type: String, default: null },\n    /**\n     * Show/hide the output.\n     */\n    output: { type: Boolean, default: true },\n    /**\n     * Show/hide the legend.\n     */\n    legend: { type: Boolean, default: true },\n    /**\n     * Show/hide the tooltip.\n     */\n    tooltip: { type: Boolean, default: true },\n    /**\n     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%.\n     */\n    percentage: { type: Boolean, default: false },\n    /**\n     * The size of steps between values the user can select. The default value is 1 except when percentage = true the\n     * default is 0.01 (1%).\n     */\n    step: { type: Number, required: false },\n    /**\n     * The rounding precision for display purposes.\n     */\n    decimals: { type: Number, required: false },\n    /**\n     * A template string used for formatting the display value. Use the placeholder {value} to reference the value in the\n     * template string. e.g. value = 90, ${value} => $90.\n     */\n    valueTemplate: { type: String, required: false },\n    /**\n     * Disable formatting, e.g. in the case of a year value -> display as 2020, not 2,020.\n     */\n    disableFormatting: { type: Boolean, default: false },\n    /**\n     * The minimum range value.\n     */\n    min: { type: Number, default: 0 },\n    /**\n     * The maximum range value. The default value is 100 except when percentage = true the default is 1 (100%).\n     */\n    max: { type: Number, required: false },\n    /**\n     * The lower bound within the range of values.\n     * @ignore\n     */\n    lowerBound: { type: Number, required: false },\n    /**\n     * The upper bound within the range of values.\n     * @ignore\n     */\n    upperBound: { type: Number, required: false },\n    /**\n     * Component disabled state.\n     */\n    disabled: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Event triggered when the value changes.\n     *\n     * @type {number} the raw selected numeric value.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\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 formatNumber = (value: number) => {\n      return !props.disableFormatting\n        ? NeonNumberUtils.formatNumber(\n            value,\n            {\n              decimals: props.decimals,\n              format: props.valueTemplate,\n              percentage: props.percentage,\n            },\n            props.locale,\n          )\n        : value;\n    };\n\n    const formattedMin = computed(() => formatNumber(props.min));\n    const computedMax = computed(() => (props.max !== undefined ? props.max : props.percentage ? 1 : 100));\n    const formattedMax = computed(() => formatNumber(computedMax.value));\n    const formattedValue = computed(() => formatNumber(props.modelValue));\n    const computedStep = computed(() => (props.step !== undefined ? props.step : props.percentage ? 0.01 : 1));\n\n    const changeValue = (event: Event) => {\n      const input = event.target as HTMLInputElement;\n      let newValue = +input.value;\n      // adjust for bounds if set\n      if (props.lowerBound !== undefined && newValue < props.lowerBound) {\n        newValue = props.lowerBound;\n      } else if (props.upperBound !== undefined && newValue > props.upperBound) {\n        newValue = props.upperBound;\n      }\n      emit('update:modelValue', newValue);\n    };\n\n    return {\n      sanitizedAttributes,\n      formattedMin,\n      formattedMax,\n      formattedValue,\n      computedMax,\n      computedStep,\n      changeValue,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonFunctionalColor","props","emit","attrs","useAttrs","sanitizedAttributes","computed","sanitized","formatNumber","value","NeonNumberUtils","formattedMin","computedMax","formattedMax","formattedValue","computedStep","event","newValue"],"mappings":"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"}

package/dist/components/user-input/toggle/NeonToggle.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const t=require("vue"),d=require("../../../common/enums/NeonSize.cjs.js"),c=require("../../../common/enums/NeonFunctionalColor.cjs.js"),p=require("../../../common/enums/NeonToggleStyle.cjs.js"),g=require("../../../common/enums/NeonOrientation.cjs.js"),m=require("../../presentation/icon/NeonIcon.vue.cjs.js"),y=t.defineComponent({name:"NeonToggle",components:{NeonIcon:m},props:{name:{type:String,required:!0},modelValue:{type:String,required:!0},model:{type:Array,required:!0},toggleStyle:{type:String,default:()=>p.NeonToggleStyle.Toggle},size:{type:String,default:()=>d.NeonSize.Medium},orientation:{type:String,default:()=>g.NeonOrientation.Vertical},color:{type:String,default:()=>c.NeonFunctionalColor.Neutral},disabled:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(n,{emit:i,slots:r}){const l=t.useAttrs(),o=e=>{i("update:modelValue",e)},u=e=>{n.disabled||o(e)},s=t.computed(()=>{const{onClick:e,...a}=l;return a});return{selectOption:e=>{!n.disabled&&!e.disabled&&o(e.key)},onInput:u,sanitizedAttributes:s,slots:r}}});module.exports=y;
+"use strict";const t=require("vue"),d=require("../../../common/enums/NeonSize.cjs.js"),c=require("../../../common/enums/NeonFunctionalColor.cjs.js"),p=require("../../../common/enums/NeonToggleStyle.cjs.js"),g=require("../../../common/enums/NeonOrientation.cjs.js"),m=require("../../presentation/icon/NeonIcon.vue.cjs.js"),y=t.defineComponent({name:"NeonToggle",components:{NeonIcon:m},props:{name:{type:String,required:!0},modelValue:{type:String,required:!0},model:{type:Array,required:!0},toggleStyle:{type:String,default:()=>p.NeonToggleStyle.Toggle},size:{type:String,default:()=>d.NeonSize.Medium},orientation:{type:String,default:()=>g.NeonOrientation.Vertical},color:{type:String,default:()=>c.NeonFunctionalColor.Primary},disabled:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(n,{emit:i,slots:r}){const l=t.useAttrs(),o=e=>{i("update:modelValue",e)},u=e=>{n.disabled||o(e)},s=t.computed(()=>{const{onClick:e,...a}=l;return a});return{selectOption:e=>{!n.disabled&&!e.disabled&&o(e.key)},onInput:u,sanitizedAttributes:s,slots:r}}});module.exports=y;
 //# sourceMappingURL=NeonToggle.cjs.js.map

package/dist/components/user-input/toggle/NeonToggle.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonToggle.cjs.js","sources":["../../../../src/components/user-input/toggle/NeonToggle.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, useAttrs } from 'vue';\nimport type { NeonToggleModel } from '@/common/models/NeonToggleModel';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonToggleStyle } from '@/common/enums/NeonToggleStyle';\nimport { NeonOrientation } from '@/common/enums/NeonOrientation';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\n\n/**\n * <p>A toggle component for selecting one value from a range of options. This is equivalent to a radio button group. It can be styled as a <em>Toggle</em> or as <em>Radio buttons</em>.\n */\nexport default defineComponent({\n  name: 'NeonToggle',\n  components: {\n    NeonIcon,\n  },\n  props: {\n    /**\n     * The name of the radio button group.\n     */\n    name: { type: String, required: true },\n    /**\n     * The key of the selected option.\n     */\n    modelValue: { type: String, required: true },\n    /**\n     * The list of options to present to the user.\n     */\n    model: { type: Array as () => Array<NeonToggleModel>, required: true },\n    /**\n     * The style of toggle to display to the user.\n     */\n    toggleStyle: { type: String as () => NeonToggleStyle, default: () => NeonToggleStyle.Toggle },\n    /**\n     * The size of the toggle.\n     */\n    size: { type: String as () => NeonSize, default: () => NeonSize.Medium },\n    /**\n     * The orientation of the toggle if the style is a radio button group.\n     */\n    orientation: { type: String as () => NeonOrientation, default: () => NeonOrientation.Vertical },\n    /**\n     * The color of the toggle.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: () => NeonFunctionalColor.Neutral },\n    /**\n     * Whether the toggle is disabled.\n     */\n    disabled: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Emitted when the selected value changes.\n     * @type {string} The key of the selected model item.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit, slots }) {\n    const attrs = useAttrs();\n    const emitInput = (key: string) => {\n      emit('update:modelValue', key);\n    };\n\n    const onInput = (key: string) => {\n      if (!props.disabled) {\n        emitInput(key);\n      }\n    };\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onClick, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const selectOption = (option: NeonToggleModel) => {\n      if (!props.disabled && !option.disabled) {\n        emitInput(option.key);\n      }\n    };\n\n    return {\n      selectOption,\n      onInput,\n      sanitizedAttributes,\n      slots,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonToggleStyle","NeonSize","NeonOrientation","NeonFunctionalColor","props","emit","slots","attrs","useAttrs","emitInput","key","onInput","sanitizedAttributes","computed","onClick","sanitized","option"],"mappings":"kUAWAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,WAAY,CACV,SAAAC,CAAA,EAEF,MAAO,CAIL,KAAM,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIhC,WAAY,CAAE,KAAM,OAAQ,SAAU,EAAA,EAItC,MAAO,CAAE,KAAM,MAAuC,SAAU,EAAA,EAIhE,YAAa,CAAE,KAAM,OAAiC,QAAS,IAAMC,EAAAA,gBAAgB,MAAA,EAIrF,KAAM,CAAE,KAAM,OAA0B,QAAS,IAAMC,EAAAA,SAAS,MAAA,EAIhE,YAAa,CAAE,KAAM,OAAiC,QAAS,IAAMC,EAAAA,gBAAgB,QAAA,EAIrF,MAAO,CAAE,KAAM,OAAqC,QAAS,IAAMC,EAAAA,oBAAoB,OAAA,EAIvF,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAE5C,MAAO,CAKL,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,EAAM,MAAAC,GAAS,CAC5B,MAAMC,EAAQC,EAAAA,SAAA,EACRC,EAAaC,GAAgB,CACjCL,EAAK,oBAAqBK,CAAG,CAC/B,EAEMC,EAAWD,GAAgB,CAC1BN,EAAM,UACTK,EAAUC,CAAG,CAEjB,EAEME,EAAsBC,EAAAA,SAAS,IAAM,CAEzC,KAAM,CAAE,QAAAC,EAAS,GAAGC,CAAA,EAAcR,EAClC,OAAOQ,CACT,CAAC,EAQD,MAAO,CACL,aAPoBC,GAA4B,CAC5C,CAACZ,EAAM,UAAY,CAACY,EAAO,UAC7BP,EAAUO,EAAO,GAAG,CAExB,EAIE,QAAAL,EACA,oBAAAC,EACA,MAAAN,CAAA,CAEJ,CACF,CAAC"}
+{"version":3,"file":"NeonToggle.cjs.js","sources":["../../../../src/components/user-input/toggle/NeonToggle.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, useAttrs } from 'vue';\nimport type { NeonToggleModel } from '@/common/models/NeonToggleModel';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonToggleStyle } from '@/common/enums/NeonToggleStyle';\nimport { NeonOrientation } from '@/common/enums/NeonOrientation';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\n\n/**\n * <p>A toggle component for selecting one value from a range of options. This is equivalent to a radio button group. It can be styled as a <em>Toggle</em> or as <em>Radio buttons</em>.\n */\nexport default defineComponent({\n  name: 'NeonToggle',\n  components: {\n    NeonIcon,\n  },\n  props: {\n    /**\n     * The name of the radio button group.\n     */\n    name: { type: String, required: true },\n    /**\n     * The key of the selected option.\n     */\n    modelValue: { type: String, required: true },\n    /**\n     * The list of options to present to the user.\n     */\n    model: { type: Array as () => Array<NeonToggleModel>, required: true },\n    /**\n     * The style of toggle to display to the user.\n     */\n    toggleStyle: { type: String as () => NeonToggleStyle, default: () => NeonToggleStyle.Toggle },\n    /**\n     * The size of the toggle.\n     */\n    size: { type: String as () => NeonSize, default: () => NeonSize.Medium },\n    /**\n     * The orientation of the toggle if the style is a radio button group.\n     */\n    orientation: { type: String as () => NeonOrientation, default: () => NeonOrientation.Vertical },\n    /**\n     * The color of the toggle.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: () => NeonFunctionalColor.Primary },\n    /**\n     * Whether the toggle is disabled.\n     */\n    disabled: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Emitted when the selected value changes.\n     * @type {string} The key of the selected model item.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit, slots }) {\n    const attrs = useAttrs();\n    const emitInput = (key: string) => {\n      emit('update:modelValue', key);\n    };\n\n    const onInput = (key: string) => {\n      if (!props.disabled) {\n        emitInput(key);\n      }\n    };\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onClick, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const selectOption = (option: NeonToggleModel) => {\n      if (!props.disabled && !option.disabled) {\n        emitInput(option.key);\n      }\n    };\n\n    return {\n      selectOption,\n      onInput,\n      sanitizedAttributes,\n      slots,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonToggleStyle","NeonSize","NeonOrientation","NeonFunctionalColor","props","emit","slots","attrs","useAttrs","emitInput","key","onInput","sanitizedAttributes","computed","onClick","sanitized","option"],"mappings":"kUAWAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,WAAY,CACV,SAAAC,CAAA,EAEF,MAAO,CAIL,KAAM,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIhC,WAAY,CAAE,KAAM,OAAQ,SAAU,EAAA,EAItC,MAAO,CAAE,KAAM,MAAuC,SAAU,EAAA,EAIhE,YAAa,CAAE,KAAM,OAAiC,QAAS,IAAMC,EAAAA,gBAAgB,MAAA,EAIrF,KAAM,CAAE,KAAM,OAA0B,QAAS,IAAMC,EAAAA,SAAS,MAAA,EAIhE,YAAa,CAAE,KAAM,OAAiC,QAAS,IAAMC,EAAAA,gBAAgB,QAAA,EAIrF,MAAO,CAAE,KAAM,OAAqC,QAAS,IAAMC,EAAAA,oBAAoB,OAAA,EAIvF,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAE5C,MAAO,CAKL,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,EAAM,MAAAC,GAAS,CAC5B,MAAMC,EAAQC,EAAAA,SAAA,EACRC,EAAaC,GAAgB,CACjCL,EAAK,oBAAqBK,CAAG,CAC/B,EAEMC,EAAWD,GAAgB,CAC1BN,EAAM,UACTK,EAAUC,CAAG,CAEjB,EAEME,EAAsBC,EAAAA,SAAS,IAAM,CAEzC,KAAM,CAAE,QAAAC,EAAS,GAAGC,CAAA,EAAcR,EAClC,OAAOQ,CACT,CAAC,EAQD,MAAO,CACL,aAPoBC,GAA4B,CAC5C,CAACZ,EAAM,UAAY,CAACY,EAAO,UAC7BP,EAAUO,EAAO,GAAG,CAExB,EAIE,QAAAL,EACA,oBAAAC,EACA,MAAAN,CAAA,CAEJ,CACF,CAAC"}

package/dist/components/user-input/toggle/NeonToggle.es.js

@@ -1,4 +1,4 @@
-import { defineComponent as u, useAttrs as s, computed as m } from "vue";
+import { defineComponent as u, useAttrs as m, computed as s } from "vue";
 import { NeonSize as p } from "../../../common/enums/NeonSize.es.js";
 import { NeonFunctionalColor as c } from "../../../common/enums/NeonFunctionalColor.es.js";
 import { NeonToggleStyle as f } from "../../../common/enums/NeonToggleStyle.es.js";
@@ -37,7 +37,7 @@ const C = u({
     /**
      * The color of the toggle.
      */
-    color: { type: String, default: () => c.Neutral },
+    color: { type: String, default: () => c.Primary },
     /**
      * Whether the toggle is disabled.
      */
@@ -51,11 +51,11 @@ const C = u({
     "update:modelValue"
   ],
   setup(t, { emit: n, slots: r }) {
-    const i = s(), o = (e) => {
+    const i = m(), o = (e) => {
       n("update:modelValue", e);
     }, l = (e) => {
       t.disabled || o(e);
-    }, a = m(() => {
+    }, a = s(() => {
       const { onClick: e, ...d } = i;
       return d;
     });