@aotearoan/neon 19.0.0 → 19.0.2

package/dist/components/navigation/dropdown-menu/NeonDropdownMenu.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const n=require("vue"),q=require("../../../common/enums/NeonSize.cjs.js"),D=require("../../../common/enums/NeonFunctionalColor.cjs.js"),S=require("../../presentation/dropdown/NeonDropdown.vue.cjs.js"),s=require("../../../common/enums/NeonDropdownPlacement.cjs.js"),P=require("../../../common/utils/NeonScrollUtils.cjs.js"),B=require("../../presentation/icon/NeonIcon.vue.cjs.js"),I=require("../link/NeonLink.vue.cjs.js"),L=n.defineComponent({name:"NeonDropdownMenu",components:{NeonDropdown:S,NeonIcon:B,NeonLink:I},props:{model:{type:Array,required:!0},size:{type:String,default:q.NeonSize.Medium},color:{type:String,default:D.NeonFunctionalColor.LowContrast},disabled:{type:Boolean,default:!1},openOnHover:{type:Boolean,default:!1}},emits:["click","button-ref"],setup(t,{emit:d}){const h=n.useAttrs(),f=n.ref(null),m=n.ref(null),v=n.ref([]),a=n.ref(!1),c=n.ref(null),l=n.ref(-1),y=e=>{c.value=e,l.value=t.model.findIndex(o=>o.key===e)},g=e=>{m.value=e},N=()=>{switch(m.value){case s.NeonDropdownPlacement.TopLeft:case s.NeonDropdownPlacement.TopRight:case s.NeonDropdownPlacement.LeftBottom:case s.NeonDropdownPlacement.RightBottom:return!0}return!1},p=()=>{var o;const e=(o=f.value)==null?void 0:o.querySelector(".neon-dropdown-menu__item--highlighted");P.NeonScrollUtils.scrollIntoView(e)},u=(e,o)=>{const r=l.value+e;r>=0&&r<=t.model.length-1&&(l.value=r,c.value=t.model[l.value].key,o.preventDefault(),setTimeout(p))},i=e=>{if(!t.disabled&&a.value)switch(e.code){case"ArrowUp":case"ArrowDown":{const o=N()?-1:1;e.code==="ArrowUp"?u(-1*o,e):u(1*o,e)}break;case"Enter":case"Space":t.model[l.value]&&!t.model[l.value].disabled&&(w(t.model[l.value]),e.preventDefault());break;case"Tab":!e.ctrlKey&&!e.metaKey&&!e.altKey&&(a.value=!1);break;case"Escape":a.value=!1;break}},w=e=>{var o;if(!e.disabled){if(e.href){const r=(o=v.value[l.value])==null?void 0:o.firstElementChild;r&&r.click()}else d("click",e);a.value=!1}},k=()=>{t.openOnHover&&(a.value=!0)},b=()=>{t.openOnHover&&(a.value=!1)};return n.onMounted(()=>{document.addEventListener("keydown",i)}),n.onUnmounted(()=>{document.removeEventListener("keydown",i)}),n.watch(()=>a.value,e=>{e&&(c.value=t.model[0].key,l.value=0)}),{dropdown:f,items:v,open:a,highlightedKey:c,highlightedIndex:l,attrs:h,emit:d,changeHighlighted:y,keyboardHandler:i,onBlur:b,onFocus:k,clickItem:w,navigateBy:u,onPlacement:g}}});module.exports=L;
+"use strict";const n=require("vue"),q=require("../../../common/enums/NeonSize.cjs.js"),D=require("../../../common/enums/NeonFunctionalColor.cjs.js"),S=require("../../presentation/dropdown/NeonDropdown.vue.cjs.js"),s=require("../../../common/enums/NeonDropdownPlacement.cjs.js"),P=require("../../../common/utils/NeonScrollUtils.cjs.js"),B=require("../../presentation/icon/NeonIcon.vue.cjs.js"),C=require("../link/NeonLink.vue.cjs.js"),I=n.defineComponent({name:"NeonDropdownMenu",components:{NeonDropdown:S,NeonIcon:B,NeonLink:C},props:{model:{type:Array,required:!0},size:{type:String,default:q.NeonSize.Medium},color:{type:String,default:D.NeonFunctionalColor.LowContrast},disabled:{type:Boolean,default:!1},openOnHover:{type:Boolean,default:!1}},emits:["click","button-ref"],setup(t,{emit:d}){const h=n.useAttrs(),f=n.ref(null),m=n.ref(null),v=n.ref([]),r=n.ref(!1),c=n.ref(null),l=n.ref(-1),y=e=>{c.value=e,l.value=t.model.findIndex(o=>o.key===e)},g=e=>{m.value=e},p=()=>{switch(m.value){case s.NeonDropdownPlacement.TopLeft:case s.NeonDropdownPlacement.TopRight:case s.NeonDropdownPlacement.LeftBottom:case s.NeonDropdownPlacement.RightBottom:return!0}return!1},N=()=>{var o,a;const e=(a=(o=f.value)==null?void 0:o.dropdownContent)==null?void 0:a.querySelector(".neon-dropdown-menu__item--highlighted");e&&(e.focus(),P.NeonScrollUtils.scrollIntoView(e))},u=(e,o)=>{const a=l.value+e;a>=0&&a<=t.model.length-1&&(l.value=a,c.value=t.model[l.value].key,o.preventDefault(),setTimeout(N))},i=e=>{if(!t.disabled&&r.value)switch(e.code){case"ArrowUp":case"ArrowDown":{const o=p()?-1:1;e.code==="ArrowUp"?u(-1*o,e):u(1*o,e)}break;case"Enter":case"Space":t.model[l.value]&&!t.model[l.value].disabled&&(w(t.model[l.value]),e.preventDefault());break;case"Tab":!e.ctrlKey&&!e.metaKey&&!e.altKey&&(r.value=!1);break;case"Escape":r.value=!1;break}},w=e=>{var o;if(!e.disabled){if(e.href){const a=(o=v.value[l.value])==null?void 0:o.firstElementChild;a&&a.click()}else d("click",e);r.value=!1}},k=()=>{t.openOnHover&&(r.value=!0)},b=()=>{t.openOnHover&&(r.value=!1)};return n.onMounted(()=>{document.addEventListener("keydown",i)}),n.onUnmounted(()=>{document.removeEventListener("keydown",i)}),n.watch(()=>r.value,e=>{e&&(c.value=t.model[0].key,l.value=0)}),{dropdown:f,items:v,open:r,highlightedKey:c,highlightedIndex:l,attrs:h,emit:d,changeHighlighted:y,keyboardHandler:i,onBlur:b,onFocus:k,clickItem:w,navigateBy:u,onPlacement:g}}});module.exports=I;
 //# sourceMappingURL=NeonDropdownMenu.cjs.js.map

package/dist/components/navigation/dropdown-menu/NeonDropdownMenu.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonDropdownMenu.cjs.js","sources":["../../../../src/components/navigation/dropdown-menu/NeonDropdownMenu.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport type { NeonDropdownMenuItem } from '@/common/models/NeonDropdownMenuItem';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/NeonScrollUtils';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\n\n/**\n * <p>A dropdown menu consisting of a button to open the menu and a list of menu items. Clicking on a menu item will\n * result in navigating to the provided URL or notifying the parent component via the @click event.</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: 'NeonDropdownMenu',\n  components: {\n    NeonDropdown,\n    NeonIcon,\n    NeonLink,\n  },\n  props: {\n    /**\n     * A list of menu items to render in the dropdown menu.\n     */\n    model: { type: Array as () => Array<NeonDropdownMenuItem>, required: true },\n    /**\n     * The size of the dropdown - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The dropdown color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * Whether the dropdown button is disabled or not.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Instead of opening on click (default), open on hover.\n     */\n    openOnHover: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * emitted when the user clicks on a menu item.\n     * @type {NeonDropdownMenuItem} the menu item the user clicked on.\n     */\n    'click',\n    /**\n     * emitted on initialisation\n     * @type {HTMLElement} the reference to the HTMLElement for the dropdown menu button.\n     */\n    'button-ref',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n    const dropdown = ref<HTMLElement | null>(null);\n    const dropdownPlacement = ref<NeonDropdownPlacement | null>(null);\n    const items = ref<Array<HTMLLIElement>>([]);\n    const open = ref(false);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n\n    const changeHighlighted = (key: string) => {\n      highlightedKey.value = key;\n      highlightedIndex.value = props.model.findIndex((item) => item.key === key);\n    };\n\n    const onPlacement = (placement: NeonDropdownPlacement) => {\n      dropdownPlacement.value = placement;\n    };\n\n    const isReverse = () => {\n      switch (dropdownPlacement.value) {\n        case NeonDropdownPlacement.TopLeft:\n        case NeonDropdownPlacement.TopRight:\n        case NeonDropdownPlacement.LeftBottom:\n        case NeonDropdownPlacement.RightBottom:\n          return true;\n      }\n\n      return false;\n    };\n\n    const scrollOnNavigate = () => {\n      const element = dropdown.value?.querySelector('.neon-dropdown-menu__item--highlighted') as HTMLElement;\n      NeonScrollUtils.scrollIntoView(element);\n    };\n\n    const navigateBy = (offset: number, $event: KeyboardEvent) => {\n      const newIndex = highlightedIndex.value + offset;\n      if (newIndex >= 0 && newIndex <= props.model.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = props.model[highlightedIndex.value].key;\n        $event.preventDefault();\n        setTimeout(scrollOnNavigate);\n      }\n    };\n\n    const keyboardHandler = ($event: KeyboardEvent) => {\n      if (!props.disabled) {\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 (props.model[highlightedIndex.value] && !props.model[highlightedIndex.value].disabled) {\n                clickItem(props.model[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            case 'Escape':\n              open.value = false;\n              break;\n          }\n        }\n      }\n    };\n\n    const clickItem = (item: NeonDropdownMenuItem) => {\n      if (!item.disabled) {\n        if (item.href) {\n          const anchor = items.value[highlightedIndex.value]?.firstElementChild as HTMLAnchorElement;\n          anchor && anchor.click();\n        } else {\n          emit('click', item);\n        }\n        open.value = false;\n      }\n    };\n\n    const onFocus = () => {\n      if (props.openOnHover) {\n        open.value = true;\n      }\n    };\n\n    const onBlur = () => {\n      if (props.openOnHover) {\n        open.value = false;\n      }\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 = props.model[0].key;\n          highlightedIndex.value = 0;\n        }\n      },\n    );\n\n    return {\n      dropdown,\n      items,\n      open,\n      highlightedKey,\n      highlightedIndex,\n      attrs,\n      emit,\n      changeHighlighted,\n      keyboardHandler,\n      onBlur,\n      onFocus,\n      clickItem,\n      navigateBy,\n      onPlacement,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonDropdown","NeonIcon","NeonLink","NeonSize","NeonFunctionalColor","props","emit","attrs","useAttrs","dropdown","ref","dropdownPlacement","items","open","highlightedKey","highlightedIndex","changeHighlighted","key","item","onPlacement","placement","isReverse","NeonDropdownPlacement","scrollOnNavigate","element","_a","NeonScrollUtils","navigateBy","offset","$event","newIndex","keyboardHandler","reverseOffset","clickItem","anchor","onFocus","onBlur","onMounted","onUnmounted","watch"],"mappings":"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"}
+{"version":3,"file":"NeonDropdownMenu.cjs.js","sources":["../../../../src/components/navigation/dropdown-menu/NeonDropdownMenu.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport type { NeonDropdownMenuItem } from '@/common/models/NeonDropdownMenuItem';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/NeonScrollUtils';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\n\n/**\n * <p>A dropdown menu consisting of a button to open the menu and a list of menu items. Clicking on a menu item will\n * result in navigating to the provided URL or notifying the parent component via the @click event.</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: 'NeonDropdownMenu',\n  components: {\n    NeonDropdown,\n    NeonIcon,\n    NeonLink,\n  },\n  props: {\n    /**\n     * A list of menu items to render in the dropdown menu.\n     */\n    model: { type: Array as () => Array<NeonDropdownMenuItem>, required: true },\n    /**\n     * The size of the dropdown - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The dropdown color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * Whether the dropdown button is disabled or not.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Instead of opening on click (default), open on hover.\n     */\n    openOnHover: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * emitted when the user clicks on a menu item.\n     * @type {NeonDropdownMenuItem} the menu item the user clicked on.\n     */\n    'click',\n    /**\n     * emitted on initialisation\n     * @type {HTMLElement} the reference to the HTMLElement for the dropdown menu button.\n     */\n    'button-ref',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n    const dropdown = ref<InstanceType<typeof NeonDropdown> | null>(null);\n    const dropdownPlacement = ref<NeonDropdownPlacement | null>(null);\n    const items = ref<Array<HTMLLIElement>>([]);\n    const open = ref(false);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n\n    const changeHighlighted = (key: string) => {\n      highlightedKey.value = key;\n      highlightedIndex.value = props.model.findIndex((item) => item.key === key);\n    };\n\n    const onPlacement = (placement: NeonDropdownPlacement) => {\n      dropdownPlacement.value = placement;\n    };\n\n    const isReverse = () => {\n      switch (dropdownPlacement.value) {\n        case NeonDropdownPlacement.TopLeft:\n        case NeonDropdownPlacement.TopRight:\n        case NeonDropdownPlacement.LeftBottom:\n        case NeonDropdownPlacement.RightBottom:\n          return true;\n      }\n\n      return false;\n    };\n\n    const onNavigate = () => {\n      const element: HTMLElement | null = dropdown.value?.dropdownContent?.querySelector(\n        '.neon-dropdown-menu__item--highlighted',\n      ) as HTMLElement;\n\n      if (element) {\n        element.focus();\n        NeonScrollUtils.scrollIntoView(element);\n      }\n    };\n\n    const navigateBy = (offset: number, $event: KeyboardEvent) => {\n      const newIndex = highlightedIndex.value + offset;\n      if (newIndex >= 0 && newIndex <= props.model.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = props.model[highlightedIndex.value].key;\n        $event.preventDefault();\n        setTimeout(onNavigate);\n      }\n    };\n\n    const keyboardHandler = ($event: KeyboardEvent) => {\n      if (!props.disabled) {\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 (props.model[highlightedIndex.value] && !props.model[highlightedIndex.value].disabled) {\n                clickItem(props.model[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            case 'Escape':\n              open.value = false;\n              break;\n          }\n        }\n      }\n    };\n\n    const clickItem = (item: NeonDropdownMenuItem) => {\n      if (!item.disabled) {\n        if (item.href) {\n          const anchor = items.value[highlightedIndex.value]?.firstElementChild as HTMLAnchorElement;\n          anchor && anchor.click();\n        } else {\n          emit('click', item);\n        }\n        open.value = false;\n      }\n    };\n\n    const onFocus = () => {\n      if (props.openOnHover) {\n        open.value = true;\n      }\n    };\n\n    const onBlur = () => {\n      if (props.openOnHover) {\n        open.value = false;\n      }\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 = props.model[0].key;\n          highlightedIndex.value = 0;\n        }\n      },\n    );\n\n    return {\n      dropdown,\n      items,\n      open,\n      highlightedKey,\n      highlightedIndex,\n      attrs,\n      emit,\n      changeHighlighted,\n      keyboardHandler,\n      onBlur,\n      onFocus,\n      clickItem,\n      navigateBy,\n      onPlacement,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonDropdown","NeonIcon","NeonLink","NeonSize","NeonFunctionalColor","props","emit","attrs","useAttrs","dropdown","ref","dropdownPlacement","items","open","highlightedKey","highlightedIndex","changeHighlighted","key","item","onPlacement","placement","isReverse","NeonDropdownPlacement","onNavigate","element","_b","_a","NeonScrollUtils","navigateBy","offset","$event","newIndex","keyboardHandler","reverseOffset","clickItem","anchor","onFocus","onBlur","onMounted","onUnmounted","watch"],"mappings":"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"}

package/dist/components/navigation/dropdown-menu/NeonDropdownMenu.es.js

@@ -1,17 +1,17 @@
 import { defineComponent as B, useAttrs as D, ref as r, onMounted as I, onUnmounted as L, watch as S } from "vue";
 import { NeonSize as A } from "../../../common/enums/NeonSize.es.js";
-import { NeonFunctionalColor as E } from "../../../common/enums/NeonFunctionalColor.es.js";
-import H from "../../presentation/dropdown/NeonDropdown.vue.es.js";
+import { NeonFunctionalColor as C } from "../../../common/enums/NeonFunctionalColor.es.js";
+import E from "../../presentation/dropdown/NeonDropdown.vue.es.js";
 import { NeonDropdownPlacement as s } from "../../../common/enums/NeonDropdownPlacement.es.js";
-import { NeonScrollUtils as O } from "../../../common/utils/NeonScrollUtils.es.js";
+import { NeonScrollUtils as H } from "../../../common/utils/NeonScrollUtils.es.js";
 import x from "../../presentation/icon/NeonIcon.vue.es.js";
-import C from "../link/NeonLink.vue.es.js";
+import K from "../link/NeonLink.vue.es.js";
 const z = B({
   name: "NeonDropdownMenu",
   components: {
-    NeonDropdown: H,
+    NeonDropdown: E,
     NeonIcon: x,
-    NeonLink: C
+    NeonLink: K
   },
   props: {
     /**
@@ -25,7 +25,7 @@ const z = B({
     /**
      * The dropdown color.
      */
-    color: { type: String, default: E.LowContrast },
+    color: { type: String, default: C.LowContrast },
     /**
      * Whether the dropdown button is disabled or not.
      */
@@ -47,9 +47,9 @@ const z = B({
      */
     "button-ref"
   ],
-  setup(t, { emit: d }) {
-    const p = D(), f = r(null), m = r(null), v = r([]), l = r(!1), c = r(null), n = r(-1), w = (e) => {
-      c.value = e, n.value = t.model.findIndex((o) => o.key === e);
+  setup(n, { emit: u }) {
+    const p = D(), f = r(null), m = r(null), v = r([]), a = r(!1), c = r(null), t = r(-1), w = (e) => {
+      c.value = e, t.value = n.model.findIndex((o) => o.key === e);
     }, y = (e) => {
       m.value = e;
     }, g = () => {
@@ -62,14 +62,16 @@ const z = B({
       }
       return !1;
     }, k = () => {
-      var o;
-      const e = (o = f.value) == null ? void 0 : o.querySelector(".neon-dropdown-menu__item--highlighted");
-      O.scrollIntoView(e);
+      var o, l;
+      const e = (l = (o = f.value) == null ? void 0 : o.dropdownContent) == null ? void 0 : l.querySelector(
+        ".neon-dropdown-menu__item--highlighted"
+      );
+      e && (e.focus(), H.scrollIntoView(e));
     }, i = (e, o) => {
-      const a = n.value + e;
-      a >= 0 && a <= t.model.length - 1 && (n.value = a, c.value = t.model[n.value].key, o.preventDefault(), setTimeout(k));
-    }, u = (e) => {
-      if (!t.disabled && l.value)
+      const l = t.value + e;
+      l >= 0 && l <= n.model.length - 1 && (t.value = l, c.value = n.model[t.value].key, o.preventDefault(), setTimeout(k));
+    }, d = (e) => {
+      if (!n.disabled && a.value)
         switch (e.code) {
           case "ArrowUp":
           case "ArrowDown":
@@ -80,49 +82,49 @@ const z = B({
             break;
           case "Enter":
           case "Space":
-            t.model[n.value] && !t.model[n.value].disabled && (h(t.model[n.value]), e.preventDefault());
+            n.model[t.value] && !n.model[t.value].disabled && (h(n.model[t.value]), e.preventDefault());
             break;
           case "Tab":
-            !e.ctrlKey && !e.metaKey && !e.altKey && (l.value = !1);
+            !e.ctrlKey && !e.metaKey && !e.altKey && (a.value = !1);
             break;
           case "Escape":
-            l.value = !1;
+            a.value = !1;
             break;
         }
     }, h = (e) => {
       var o;
       if (!e.disabled) {
         if (e.href) {
-          const a = (o = v.value[n.value]) == null ? void 0 : o.firstElementChild;
-          a && a.click();
+          const l = (o = v.value[t.value]) == null ? void 0 : o.firstElementChild;
+          l && l.click();
         } else
-          d("click", e);
-        l.value = !1;
+          u("click", e);
+        a.value = !1;
       }
     }, b = () => {
-      t.openOnHover && (l.value = !0);
+      n.openOnHover && (a.value = !0);
     }, N = () => {
-      t.openOnHover && (l.value = !1);
+      n.openOnHover && (a.value = !1);
     };
     return I(() => {
-      document.addEventListener("keydown", u);
+      document.addEventListener("keydown", d);
     }), L(() => {
-      document.removeEventListener("keydown", u);
+      document.removeEventListener("keydown", d);
     }), S(
-      () => l.value,
+      () => a.value,
       (e) => {
-        e && (c.value = t.model[0].key, n.value = 0);
+        e && (c.value = n.model[0].key, t.value = 0);
       }
     ), {
       dropdown: f,
       items: v,
-      open: l,
+      open: a,
       highlightedKey: c,
-      highlightedIndex: n,
+      highlightedIndex: t,
       attrs: p,
-      emit: d,
+      emit: u,
       changeHighlighted: w,
-      keyboardHandler: u,
+      keyboardHandler: d,
       onBlur: N,
       onFocus: b,
       clickItem: h,

package/dist/components/navigation/dropdown-menu/NeonDropdownMenu.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonDropdownMenu.es.js","sources":["../../../../src/components/navigation/dropdown-menu/NeonDropdownMenu.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport type { NeonDropdownMenuItem } from '@/common/models/NeonDropdownMenuItem';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/NeonScrollUtils';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\n\n/**\n * <p>A dropdown menu consisting of a button to open the menu and a list of menu items. Clicking on a menu item will\n * result in navigating to the provided URL or notifying the parent component via the @click event.</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: 'NeonDropdownMenu',\n  components: {\n    NeonDropdown,\n    NeonIcon,\n    NeonLink,\n  },\n  props: {\n    /**\n     * A list of menu items to render in the dropdown menu.\n     */\n    model: { type: Array as () => Array<NeonDropdownMenuItem>, required: true },\n    /**\n     * The size of the dropdown - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The dropdown color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * Whether the dropdown button is disabled or not.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Instead of opening on click (default), open on hover.\n     */\n    openOnHover: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * emitted when the user clicks on a menu item.\n     * @type {NeonDropdownMenuItem} the menu item the user clicked on.\n     */\n    'click',\n    /**\n     * emitted on initialisation\n     * @type {HTMLElement} the reference to the HTMLElement for the dropdown menu button.\n     */\n    'button-ref',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n    const dropdown = ref<HTMLElement | null>(null);\n    const dropdownPlacement = ref<NeonDropdownPlacement | null>(null);\n    const items = ref<Array<HTMLLIElement>>([]);\n    const open = ref(false);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n\n    const changeHighlighted = (key: string) => {\n      highlightedKey.value = key;\n      highlightedIndex.value = props.model.findIndex((item) => item.key === key);\n    };\n\n    const onPlacement = (placement: NeonDropdownPlacement) => {\n      dropdownPlacement.value = placement;\n    };\n\n    const isReverse = () => {\n      switch (dropdownPlacement.value) {\n        case NeonDropdownPlacement.TopLeft:\n        case NeonDropdownPlacement.TopRight:\n        case NeonDropdownPlacement.LeftBottom:\n        case NeonDropdownPlacement.RightBottom:\n          return true;\n      }\n\n      return false;\n    };\n\n    const scrollOnNavigate = () => {\n      const element = dropdown.value?.querySelector('.neon-dropdown-menu__item--highlighted') as HTMLElement;\n      NeonScrollUtils.scrollIntoView(element);\n    };\n\n    const navigateBy = (offset: number, $event: KeyboardEvent) => {\n      const newIndex = highlightedIndex.value + offset;\n      if (newIndex >= 0 && newIndex <= props.model.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = props.model[highlightedIndex.value].key;\n        $event.preventDefault();\n        setTimeout(scrollOnNavigate);\n      }\n    };\n\n    const keyboardHandler = ($event: KeyboardEvent) => {\n      if (!props.disabled) {\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 (props.model[highlightedIndex.value] && !props.model[highlightedIndex.value].disabled) {\n                clickItem(props.model[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            case 'Escape':\n              open.value = false;\n              break;\n          }\n        }\n      }\n    };\n\n    const clickItem = (item: NeonDropdownMenuItem) => {\n      if (!item.disabled) {\n        if (item.href) {\n          const anchor = items.value[highlightedIndex.value]?.firstElementChild as HTMLAnchorElement;\n          anchor && anchor.click();\n        } else {\n          emit('click', item);\n        }\n        open.value = false;\n      }\n    };\n\n    const onFocus = () => {\n      if (props.openOnHover) {\n        open.value = true;\n      }\n    };\n\n    const onBlur = () => {\n      if (props.openOnHover) {\n        open.value = false;\n      }\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 = props.model[0].key;\n          highlightedIndex.value = 0;\n        }\n      },\n    );\n\n    return {\n      dropdown,\n      items,\n      open,\n      highlightedKey,\n      highlightedIndex,\n      attrs,\n      emit,\n      changeHighlighted,\n      keyboardHandler,\n      onBlur,\n      onFocus,\n      clickItem,\n      navigateBy,\n      onPlacement,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonDropdown","NeonIcon","NeonLink","NeonSize","NeonFunctionalColor","props","emit","attrs","useAttrs","dropdown","ref","dropdownPlacement","items","open","highlightedKey","highlightedIndex","changeHighlighted","key","item","onPlacement","placement","isReverse","NeonDropdownPlacement","scrollOnNavigate","element","_a","NeonScrollUtils","navigateBy","offset","$event","newIndex","keyboardHandler","reverseOffset","clickItem","anchor","onFocus","onBlur","onMounted","onUnmounted","watch"],"mappings":"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"}
+{"version":3,"file":"NeonDropdownMenu.es.js","sources":["../../../../src/components/navigation/dropdown-menu/NeonDropdownMenu.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport type { NeonDropdownMenuItem } from '@/common/models/NeonDropdownMenuItem';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/NeonScrollUtils';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\n\n/**\n * <p>A dropdown menu consisting of a button to open the menu and a list of menu items. Clicking on a menu item will\n * result in navigating to the provided URL or notifying the parent component via the @click event.</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: 'NeonDropdownMenu',\n  components: {\n    NeonDropdown,\n    NeonIcon,\n    NeonLink,\n  },\n  props: {\n    /**\n     * A list of menu items to render in the dropdown menu.\n     */\n    model: { type: Array as () => Array<NeonDropdownMenuItem>, required: true },\n    /**\n     * The size of the dropdown - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The dropdown color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * Whether the dropdown button is disabled or not.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Instead of opening on click (default), open on hover.\n     */\n    openOnHover: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * emitted when the user clicks on a menu item.\n     * @type {NeonDropdownMenuItem} the menu item the user clicked on.\n     */\n    'click',\n    /**\n     * emitted on initialisation\n     * @type {HTMLElement} the reference to the HTMLElement for the dropdown menu button.\n     */\n    'button-ref',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n    const dropdown = ref<InstanceType<typeof NeonDropdown> | null>(null);\n    const dropdownPlacement = ref<NeonDropdownPlacement | null>(null);\n    const items = ref<Array<HTMLLIElement>>([]);\n    const open = ref(false);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n\n    const changeHighlighted = (key: string) => {\n      highlightedKey.value = key;\n      highlightedIndex.value = props.model.findIndex((item) => item.key === key);\n    };\n\n    const onPlacement = (placement: NeonDropdownPlacement) => {\n      dropdownPlacement.value = placement;\n    };\n\n    const isReverse = () => {\n      switch (dropdownPlacement.value) {\n        case NeonDropdownPlacement.TopLeft:\n        case NeonDropdownPlacement.TopRight:\n        case NeonDropdownPlacement.LeftBottom:\n        case NeonDropdownPlacement.RightBottom:\n          return true;\n      }\n\n      return false;\n    };\n\n    const onNavigate = () => {\n      const element: HTMLElement | null = dropdown.value?.dropdownContent?.querySelector(\n        '.neon-dropdown-menu__item--highlighted',\n      ) as HTMLElement;\n\n      if (element) {\n        element.focus();\n        NeonScrollUtils.scrollIntoView(element);\n      }\n    };\n\n    const navigateBy = (offset: number, $event: KeyboardEvent) => {\n      const newIndex = highlightedIndex.value + offset;\n      if (newIndex >= 0 && newIndex <= props.model.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = props.model[highlightedIndex.value].key;\n        $event.preventDefault();\n        setTimeout(onNavigate);\n      }\n    };\n\n    const keyboardHandler = ($event: KeyboardEvent) => {\n      if (!props.disabled) {\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 (props.model[highlightedIndex.value] && !props.model[highlightedIndex.value].disabled) {\n                clickItem(props.model[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            case 'Escape':\n              open.value = false;\n              break;\n          }\n        }\n      }\n    };\n\n    const clickItem = (item: NeonDropdownMenuItem) => {\n      if (!item.disabled) {\n        if (item.href) {\n          const anchor = items.value[highlightedIndex.value]?.firstElementChild as HTMLAnchorElement;\n          anchor && anchor.click();\n        } else {\n          emit('click', item);\n        }\n        open.value = false;\n      }\n    };\n\n    const onFocus = () => {\n      if (props.openOnHover) {\n        open.value = true;\n      }\n    };\n\n    const onBlur = () => {\n      if (props.openOnHover) {\n        open.value = false;\n      }\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 = props.model[0].key;\n          highlightedIndex.value = 0;\n        }\n      },\n    );\n\n    return {\n      dropdown,\n      items,\n      open,\n      highlightedKey,\n      highlightedIndex,\n      attrs,\n      emit,\n      changeHighlighted,\n      keyboardHandler,\n      onBlur,\n      onFocus,\n      clickItem,\n      navigateBy,\n      onPlacement,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonDropdown","NeonIcon","NeonLink","NeonSize","NeonFunctionalColor","props","emit","attrs","useAttrs","dropdown","ref","dropdownPlacement","items","open","highlightedKey","highlightedIndex","changeHighlighted","key","item","onPlacement","placement","isReverse","NeonDropdownPlacement","onNavigate","element","_b","_a","NeonScrollUtils","navigateBy","offset","$event","newIndex","keyboardHandler","reverseOffset","clickItem","anchor","onFocus","onBlur","onMounted","onUnmounted","watch"],"mappings":"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"}

package/dist/components/navigation/dropdown-menu/NeonDropdownMenu.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const a=require("./NeonDropdownMenu.cjs.js"),e=require("vue"),i=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),p={class:"no-style neon-dropdown-menu__items",role:"menu"},u=["onMouseover"],c={key:0,class:"neon-dropdown-menu__item-container"},m={class:"neon-dropdown-menu__item-label"},_={class:"neon-dropdown-menu__item-label"},k=["onClick"],w={class:"neon-dropdown-menu__item-label"};function b(n,l,y,g,v,f){const r=e.resolveComponent("neon-icon"),d=e.resolveComponent("neon-link"),s=e.resolveComponent("neon-dropdown");return e.openBlock(),e.createBlock(s,e.mergeProps({ref:"dropdown",modelValue:n.open,"onUpdate:modelValue":l[0]||(l[0]=o=>n.open=o),class:[`neon-dropdown-menu--${n.color}`,"neon-dropdown-menu"],color:n.color,disabled:n.disabled,openOnHover:n.openOnHover,size:n.size},n.attrs,{onBlur:l[1]||(l[1]=o=>n.onBlur()),onButton:l[2]||(l[2]=o=>n.emit("button-ref",o)),onFocus:l[3]||(l[3]=o=>n.onFocus()),"onUpdate:modelValue":l[4]||(l[4]=o=>n.open=o),onDropdownPlacement:n.onPlacement}),{default:e.withCtx(()=>[e.createElementVNode("ul",p,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.model,o=>(e.openBlock(),e.createElementBlock("li",{key:o.key,ref_for:!0,ref:"items",class:e.normalizeClass([[{"neon-dropdown-menu__item--disabled":o.disabled,"neon-dropdown-menu__item--separator-before":o.separatorBefore,"neon-dropdown-menu__item--group-title":o.isGroup,"neon-dropdown-menu__item--grouped":o.grouped,"neon-dropdown-menu__item--highlighted":o.key===n.highlightedKey},`neon-dropdown-menu__item--${n.size}`],"neon-dropdown-menu__item"]),onMouseover:t=>n.changeHighlighted(o.key)},[o.isGroup?(e.openBlock(),e.createElementBlock("div",c,[o.icon?(e.openBlock(),e.createBlock(r,{key:0,disabled:o.disabled,name:o.icon,class:"neon-dropdown-menu__item-icon"},null,8,["disabled","name"])):e.createCommentVNode("",!0),e.createElementVNode("span",m,e.toDisplayString(o.label),1)])):o.href&&!o.disabled?(e.openBlock(),e.createBlock(d,{key:1,href:o.href,"no-style":!0,"outline-style":"none",role:"menuitem"},{default:e.withCtx(()=>[o.icon?(e.openBlock(),e.createBlock(r,{key:0,disabled:o.disabled,name:o.icon,class:"neon-dropdown-menu__item-icon"},null,8,["disabled","name"])):e.createCommentVNode("",!0),e.createElementVNode("span",_,e.toDisplayString(o.label),1)]),_:2},1032,["href"])):(e.openBlock(),e.createElementBlock("div",{key:2,class:"neon-dropdown-menu__item-container",role:"menuitem",onClick:t=>n.clickItem(o)},[o.icon?(e.openBlock(),e.createBlock(r,{key:0,disabled:o.disabled,name:o.icon,class:"neon-dropdown-menu__item-icon"},null,8,["disabled","name"])):e.createCommentVNode("",!0),e.createElementVNode("span",w,e.toDisplayString(o.label),1)],8,k))],42,u))),128))])]),_:1},16,["modelValue","class","color","disabled","openOnHover","size","onDropdownPlacement"])}const B=i(a,[["render",b]]);module.exports=B;
+"use strict";const a=require("./NeonDropdownMenu.cjs.js"),e=require("vue"),i=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),p={class:"no-style neon-dropdown-menu__items",role:"menu"},u=["onMouseover"],c={key:0,class:"neon-dropdown-menu__item-container"},m={class:"neon-dropdown-menu__item-label"},_={class:"neon-dropdown-menu__item-label"},k=["onClick"],w={class:"neon-dropdown-menu__item-label"};function b(n,l,y,g,v,f){const r=e.resolveComponent("neon-icon"),d=e.resolveComponent("neon-link"),s=e.resolveComponent("neon-dropdown");return e.openBlock(),e.createBlock(s,e.mergeProps({ref:"dropdown",modelValue:n.open,"onUpdate:modelValue":l[0]||(l[0]=o=>n.open=o),class:[`neon-dropdown-menu--${n.color}`,"neon-dropdown-menu"],color:n.color,disabled:n.disabled,openOnHover:n.openOnHover,size:n.size},n.attrs,{onBlur:l[1]||(l[1]=o=>n.onBlur()),onButton:l[2]||(l[2]=o=>n.emit("button-ref",o)),onFocus:l[3]||(l[3]=o=>n.onFocus()),"onUpdate:modelValue":l[4]||(l[4]=o=>n.open=o),onDropdownPlacement:n.onPlacement}),{default:e.withCtx(()=>[e.createElementVNode("ul",p,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.model,o=>(e.openBlock(),e.createElementBlock("li",{key:o.key,ref_for:!0,ref:"items",class:e.normalizeClass([[{"neon-dropdown-menu__item--disabled":o.disabled,"neon-dropdown-menu__item--separator-before":o.separatorBefore,"neon-dropdown-menu__item--group-title":o.isGroup,"neon-dropdown-menu__item--grouped":o.grouped,"neon-dropdown-menu__item--highlighted":o.key===n.highlightedKey},`neon-dropdown-menu__item--${n.size}`],"neon-dropdown-menu__item"]),tabindex:"0",onMouseover:t=>n.changeHighlighted(o.key)},[o.isGroup?(e.openBlock(),e.createElementBlock("div",c,[o.icon?(e.openBlock(),e.createBlock(r,{key:0,disabled:o.disabled,name:o.icon,class:"neon-dropdown-menu__item-icon"},null,8,["disabled","name"])):e.createCommentVNode("",!0),e.createElementVNode("span",m,e.toDisplayString(o.label),1)])):o.href&&!o.disabled?(e.openBlock(),e.createBlock(d,{key:1,href:o.href,"no-style":!0,"outline-style":"none",role:"menuitem"},{default:e.withCtx(()=>[o.icon?(e.openBlock(),e.createBlock(r,{key:0,disabled:o.disabled,name:o.icon,class:"neon-dropdown-menu__item-icon"},null,8,["disabled","name"])):e.createCommentVNode("",!0),e.createElementVNode("span",_,e.toDisplayString(o.label),1)]),_:2},1032,["href"])):(e.openBlock(),e.createElementBlock("div",{key:2,class:"neon-dropdown-menu__item-container",role:"menuitem",onClick:t=>n.clickItem(o)},[o.icon?(e.openBlock(),e.createBlock(r,{key:0,disabled:o.disabled,name:o.icon,class:"neon-dropdown-menu__item-icon"},null,8,["disabled","name"])):e.createCommentVNode("",!0),e.createElementVNode("span",w,e.toDisplayString(o.label),1)],8,k))],42,u))),128))])]),_:1},16,["modelValue","class","color","disabled","openOnHover","size","onDropdownPlacement"])}const B=i(a,[["render",b]]);module.exports=B;
 //# sourceMappingURL=NeonDropdownMenu.vue.cjs.js.map

package/dist/components/navigation/dropdown-menu/NeonDropdownMenu.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonDropdownMenu.vue.cjs.js","sources":["../../../../src/components/navigation/dropdown-menu/NeonDropdownMenu.vue"],"sourcesContent":["<template>\n  <neon-dropdown\n    ref=\"dropdown\"\n    v-model=\"open\"\n    :class=\"`neon-dropdown-menu--${color}`\"\n    :color=\"color\"\n    :disabled=\"disabled\"\n    :openOnHover=\"openOnHover\"\n    :size=\"size\"\n    class=\"neon-dropdown-menu\"\n    v-bind=\"attrs\"\n    @blur=\"onBlur()\"\n    @button=\"emit('button-ref', $event)\"\n    @focus=\"onFocus()\"\n    @update:modelValue=\"open = $event\"\n    @dropdown-placement=\"onPlacement\"\n  >\n    <ul class=\"no-style neon-dropdown-menu__items\" role=\"menu\">\n      <li\n        v-for=\"item in model\"\n        :key=\"item.key\"\n        ref=\"items\"\n        :class=\"[\n          {\n            'neon-dropdown-menu__item--disabled': item.disabled,\n            'neon-dropdown-menu__item--separator-before': item.separatorBefore,\n            'neon-dropdown-menu__item--group-title': item.isGroup,\n            'neon-dropdown-menu__item--grouped': item.grouped,\n            'neon-dropdown-menu__item--highlighted': item.key === highlightedKey,\n          },\n          `neon-dropdown-menu__item--${size}`,\n        ]\"\n        class=\"neon-dropdown-menu__item\"\n        @mouseover=\"changeHighlighted(item.key)\"\n      >\n        <div v-if=\"item.isGroup\" class=\"neon-dropdown-menu__item-container\">\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </div>\n        <neon-link\n          v-else-if=\"item.href && !item.disabled\"\n          :href=\"item.href\"\n          :no-style=\"true\"\n          outline-style=\"none\"\n          role=\"menuitem\"\n        >\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </neon-link>\n        <div v-else class=\"neon-dropdown-menu__item-container\" role=\"menuitem\" @click=\"clickItem(item)\">\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </div>\n      </li>\n    </ul>\n  </neon-dropdown>\n</template>\n\n<script lang=\"ts\" src=\"./NeonDropdownMenu.ts\"></script>\n"],"names":["_hoisted_4","_hoisted_5","_hoisted_7","_openBlock","_createBlock","_component_neon_dropdown","_mergeProps","_ctx","$event","_cache","_createElementVNode","_hoisted_1","_createElementBlock","_Fragment","_renderList","item","_normalizeClass","_hoisted_3","_component_neon_icon","_toDisplayString","_component_neon_link"],"mappings":"8IAiBQ,MAAM,qCAAqC,KAAK,mCAkBvB,MAAM,sCAOvBA,EAAA,CAAA,MAAM,gCAAgC,EAetCC,EAAA,CAAA,MAAM,gCAAgC,gBAStCC,EAAA,CAAA,MAAM,gCAAgC,0IAjEpD,OAAAC,YAAA,EAAAC,cAqEgBC,EArEhBC,EAAAA,WAqEgB,CApEd,IAAI,sBACKC,EAAA,0CAAAA,EAAA,KAAIC,GACZ,MAAK,CAAA,uBAAyBD,EAAA,KAAK,GAK9B,oBAAoB,EAJzB,MAAOA,EAAA,MACP,SAAUA,EAAA,SACV,YAAaA,EAAA,YACb,KAAMA,EAAA,MAECA,EAAA,MAAK,CACZ,sBAAMA,EAAA,OAAM,GACZ,SAAME,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAD,GAAED,EAAA,KAAI,aAAeC,CAAM,GACjC,uBAAOD,EAAA,QAAO,GACd,sBAAiBE,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAD,GAAED,EAAA,KAAOC,GAC1B,oBAAoBD,EAAA,iCAErB,IAoDK,CApDLG,EAAAA,mBAoDK,KApDLC,EAoDK,kBAnDHC,EAAAA,mBAkDKC,EAAAA,SAAA,KAAAC,EAAAA,WAjDYP,EAAA,MAARQ,kBADTH,EAAAA,mBAkDK,KAAA,CAhDF,IAAKG,EAAK,eACX,IAAI,QACH,MAAKC,EAAAA,eAAA,CAAA,EAAkE,qCAAAD,EAAK,SAAoE,6CAAAA,EAAK,gBAAsE,wCAAAA,EAAK,QAA0D,oCAAAA,EAAK,gDAA8DA,EAAK,MAAQR,EAAA,6CAAoEA,EAAA,IAAI,IAU7a,0BAA0B,CAAA,EAC/B,YAASC,GAAED,EAAA,kBAAkBQ,EAAK,GAAG,IAE3BA,EAAK,SAAhBZ,EAAAA,YAAAS,EAAAA,mBAQM,MARNK,EAQM,CANIF,EAAK,oBADbX,EAAAA,YAKEc,EAAA,OAHC,SAAUH,EAAK,SACf,KAAMA,EAAK,KACZ,MAAM,0FAERL,EAAAA,mBAAoE,OAApEV,EAAoEmB,EAAAA,gBAApBJ,EAAK,KAAK,EAAA,CAAA,KAG/CA,EAAK,MAAI,CAAKA,EAAK,wBADhCX,EAAAA,YAcYgB,EAAA,OAZT,KAAML,EAAK,KACX,WAAU,GACX,gBAAc,OACd,KAAK,+BAEL,IAKE,CAJMA,EAAK,oBADbX,EAAAA,YAKEc,EAAA,OAHC,SAAUH,EAAK,SACf,KAAMA,EAAK,KACZ,MAAM,0FAERL,EAAAA,mBAAoE,OAApET,EAAoEkB,EAAAA,gBAApBJ,EAAK,KAAK,EAAA,CAAA,wCAE5DH,EAAAA,mBAQM,MAAA,OARM,MAAM,qCAAqC,KAAK,WAAY,QAAKJ,GAAED,EAAA,UAAUQ,CAAI,IAEnFA,EAAK,oBADbX,EAAAA,YAKEc,EAAA,OAHC,SAAUH,EAAK,SACf,KAAMA,EAAK,KACZ,MAAM,0FAERL,EAAAA,mBAAoE,OAApER,EAAoEiB,EAAAA,gBAApBJ,EAAK,KAAK,EAAA,CAAA"}
+{"version":3,"file":"NeonDropdownMenu.vue.cjs.js","sources":["../../../../src/components/navigation/dropdown-menu/NeonDropdownMenu.vue"],"sourcesContent":["<template>\n  <neon-dropdown\n    ref=\"dropdown\"\n    v-model=\"open\"\n    :class=\"`neon-dropdown-menu--${color}`\"\n    :color=\"color\"\n    :disabled=\"disabled\"\n    :openOnHover=\"openOnHover\"\n    :size=\"size\"\n    class=\"neon-dropdown-menu\"\n    v-bind=\"attrs\"\n    @blur=\"onBlur()\"\n    @button=\"emit('button-ref', $event)\"\n    @focus=\"onFocus()\"\n    @update:modelValue=\"open = $event\"\n    @dropdown-placement=\"onPlacement\"\n  >\n    <ul class=\"no-style neon-dropdown-menu__items\" role=\"menu\">\n      <li\n        v-for=\"item in model\"\n        :key=\"item.key\"\n        ref=\"items\"\n        :class=\"[\n          {\n            'neon-dropdown-menu__item--disabled': item.disabled,\n            'neon-dropdown-menu__item--separator-before': item.separatorBefore,\n            'neon-dropdown-menu__item--group-title': item.isGroup,\n            'neon-dropdown-menu__item--grouped': item.grouped,\n            'neon-dropdown-menu__item--highlighted': item.key === highlightedKey,\n          },\n          `neon-dropdown-menu__item--${size}`,\n        ]\"\n        class=\"neon-dropdown-menu__item\"\n        tabindex=\"0\"\n        @mouseover=\"changeHighlighted(item.key)\"\n      >\n        <div v-if=\"item.isGroup\" class=\"neon-dropdown-menu__item-container\">\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </div>\n        <neon-link\n          v-else-if=\"item.href && !item.disabled\"\n          :href=\"item.href\"\n          :no-style=\"true\"\n          outline-style=\"none\"\n          role=\"menuitem\"\n        >\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </neon-link>\n        <div v-else class=\"neon-dropdown-menu__item-container\" role=\"menuitem\" @click=\"clickItem(item)\">\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </div>\n      </li>\n    </ul>\n  </neon-dropdown>\n</template>\n\n<script lang=\"ts\" src=\"./NeonDropdownMenu.ts\"></script>\n"],"names":["_hoisted_4","_hoisted_5","_hoisted_7","_openBlock","_createBlock","_component_neon_dropdown","_mergeProps","_ctx","$event","_cache","_createElementVNode","_hoisted_1","_createElementBlock","_Fragment","_renderList","item","_normalizeClass","_hoisted_3","_component_neon_icon","_toDisplayString","_component_neon_link"],"mappings":"8IAiBQ,MAAM,qCAAqC,KAAK,mCAmBvB,MAAM,sCAOvBA,EAAA,CAAA,MAAM,gCAAgC,EAetCC,EAAA,CAAA,MAAM,gCAAgC,gBAStCC,EAAA,CAAA,MAAM,gCAAgC,0IAlEpD,OAAAC,YAAA,EAAAC,cAsEgBC,EAtEhBC,EAAAA,WAsEgB,CArEd,IAAI,sBACKC,EAAA,0CAAAA,EAAA,KAAIC,GACZ,MAAK,CAAA,uBAAyBD,EAAA,KAAK,GAK9B,oBAAoB,EAJzB,MAAOA,EAAA,MACP,SAAUA,EAAA,SACV,YAAaA,EAAA,YACb,KAAMA,EAAA,MAECA,EAAA,MAAK,CACZ,sBAAMA,EAAA,OAAM,GACZ,SAAME,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAD,GAAED,EAAA,KAAI,aAAeC,CAAM,GACjC,uBAAOD,EAAA,QAAO,GACd,sBAAiBE,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAD,GAAED,EAAA,KAAOC,GAC1B,oBAAoBD,EAAA,iCAErB,IAqDK,CArDLG,EAAAA,mBAqDK,KArDLC,EAqDK,kBApDHC,EAAAA,mBAmDKC,EAAAA,SAAA,KAAAC,EAAAA,WAlDYP,EAAA,MAARQ,kBADTH,EAAAA,mBAmDK,KAAA,CAjDF,IAAKG,EAAK,eACX,IAAI,QACH,MAAKC,EAAAA,eAAA,CAAA,EAAkE,qCAAAD,EAAK,SAAoE,6CAAAA,EAAK,gBAAsE,wCAAAA,EAAK,QAA0D,oCAAAA,EAAK,gDAA8DA,EAAK,MAAQR,EAAA,6CAAoEA,EAAA,IAAI,IAU7a,0BAA0B,CAAA,EAChC,SAAS,IACR,YAASC,GAAED,EAAA,kBAAkBQ,EAAK,GAAG,IAE3BA,EAAK,SAAhBZ,EAAAA,YAAAS,EAAAA,mBAQM,MARNK,EAQM,CANIF,EAAK,oBADbX,EAAAA,YAKEc,EAAA,OAHC,SAAUH,EAAK,SACf,KAAMA,EAAK,KACZ,MAAM,0FAERL,EAAAA,mBAAoE,OAApEV,EAAoEmB,EAAAA,gBAApBJ,EAAK,KAAK,EAAA,CAAA,KAG/CA,EAAK,MAAI,CAAKA,EAAK,wBADhCX,EAAAA,YAcYgB,EAAA,OAZT,KAAML,EAAK,KACX,WAAU,GACX,gBAAc,OACd,KAAK,+BAEL,IAKE,CAJMA,EAAK,oBADbX,EAAAA,YAKEc,EAAA,OAHC,SAAUH,EAAK,SACf,KAAMA,EAAK,KACZ,MAAM,0FAERL,EAAAA,mBAAoE,OAApET,EAAoEkB,EAAAA,gBAApBJ,EAAK,KAAK,EAAA,CAAA,wCAE5DH,EAAAA,mBAQM,MAAA,OARM,MAAM,qCAAqC,KAAK,WAAY,QAAKJ,GAAED,EAAA,UAAUQ,CAAI,IAEnFA,EAAK,oBADbX,EAAAA,YAKEc,EAAA,OAHC,SAAUH,EAAK,SACf,KAAMA,EAAK,KACZ,MAAM,0FAERL,EAAAA,mBAAoE,OAApER,EAAoEiB,EAAAA,gBAApBJ,EAAK,KAAK,EAAA,CAAA"}

package/dist/components/navigation/dropdown-menu/NeonDropdownMenu.vue.es.js

@@ -42,6 +42,7 @@ function D(n, o, H, P, F, M) {
             },
             `neon-dropdown-menu__item--${n.size}`
           ], "neon-dropdown-menu__item"]),
+          tabindex: "0",
           onMouseover: (c) => n.changeHighlighted(e.key)
         }, [
           e.isGroup ? (d(), s("div", $, [

package/dist/components/navigation/dropdown-menu/NeonDropdownMenu.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonDropdownMenu.vue.es.js","sources":["../../../../src/components/navigation/dropdown-menu/NeonDropdownMenu.vue"],"sourcesContent":["<template>\n  <neon-dropdown\n    ref=\"dropdown\"\n    v-model=\"open\"\n    :class=\"`neon-dropdown-menu--${color}`\"\n    :color=\"color\"\n    :disabled=\"disabled\"\n    :openOnHover=\"openOnHover\"\n    :size=\"size\"\n    class=\"neon-dropdown-menu\"\n    v-bind=\"attrs\"\n    @blur=\"onBlur()\"\n    @button=\"emit('button-ref', $event)\"\n    @focus=\"onFocus()\"\n    @update:modelValue=\"open = $event\"\n    @dropdown-placement=\"onPlacement\"\n  >\n    <ul class=\"no-style neon-dropdown-menu__items\" role=\"menu\">\n      <li\n        v-for=\"item in model\"\n        :key=\"item.key\"\n        ref=\"items\"\n        :class=\"[\n          {\n            'neon-dropdown-menu__item--disabled': item.disabled,\n            'neon-dropdown-menu__item--separator-before': item.separatorBefore,\n            'neon-dropdown-menu__item--group-title': item.isGroup,\n            'neon-dropdown-menu__item--grouped': item.grouped,\n            'neon-dropdown-menu__item--highlighted': item.key === highlightedKey,\n          },\n          `neon-dropdown-menu__item--${size}`,\n        ]\"\n        class=\"neon-dropdown-menu__item\"\n        @mouseover=\"changeHighlighted(item.key)\"\n      >\n        <div v-if=\"item.isGroup\" class=\"neon-dropdown-menu__item-container\">\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </div>\n        <neon-link\n          v-else-if=\"item.href && !item.disabled\"\n          :href=\"item.href\"\n          :no-style=\"true\"\n          outline-style=\"none\"\n          role=\"menuitem\"\n        >\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </neon-link>\n        <div v-else class=\"neon-dropdown-menu__item-container\" role=\"menuitem\" @click=\"clickItem(item)\">\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </div>\n      </li>\n    </ul>\n  </neon-dropdown>\n</template>\n\n<script lang=\"ts\" src=\"./NeonDropdownMenu.ts\"></script>\n"],"names":["_hoisted_4","_hoisted_5","_hoisted_7","_openBlock","_createBlock","_component_neon_dropdown","_mergeProps","_ctx","$event","_cache","_createElementVNode","_hoisted_1","_createElementBlock","_Fragment","_renderList","item","_normalizeClass","_hoisted_3","_component_neon_icon","_toDisplayString","_component_neon_link"],"mappings":";;;;EAiBQ,OAAM;AAAA,EAAqC,MAAK;;;EAkBvB,OAAM;GAOvBA,IAAA,EAAA,OAAM,iCAAgC,GAetCC,IAAA,EAAA,OAAM,iCAAgC,oBAStCC,IAAA,EAAA,OAAM,iCAAgC;;;AAjEpD,SAAAC,EAAA,GAAAC,EAqEgBC,GArEhBC,EAqEgB;AAAA,IApEd,KAAI;AAAA,gBACKC,EAAA;AAAA,kDAAAA,EAAA,OAAIC;AAAA,IACZ,OAAK,CAAA,uBAAyBD,EAAA,KAAK,IAK9B,oBAAoB;AAAA,IAJzB,OAAOA,EAAA;AAAA,IACP,UAAUA,EAAA;AAAA,IACV,aAAaA,EAAA;AAAA,IACb,MAAMA,EAAA;AAAA,KAECA,EAAA,OAAK;AAAA,IACZ,+BAAMA,EAAA,OAAM;AAAA,IACZ,UAAME,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAD,MAAED,EAAA,KAAI,cAAeC,CAAM;AAAA,IACjC,gCAAOD,EAAA,QAAO;AAAA,IACd,uBAAiBE,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAD,MAAED,EAAA,OAAOC;AAAA,IAC1B,qBAAoBD,EAAA;AAAA;eAErB,MAoDK;AAAA,MApDLG,EAoDK,MApDLC,GAoDK;AAAA,gBAnDHC,EAkDKC,GAAA,MAAAC,EAjDYP,EAAA,OAAK,CAAbQ,YADTH,EAkDK,MAAA;AAAA,UAhDF,KAAKG,EAAK;AAAA;UACX,KAAI;AAAA,UACH,OAAKC,EAAA,CAAA;AAAA;cAAkE,sCAAAD,EAAK;AAAA,cAAoE,8CAAAA,EAAK;AAAA,cAAsE,yCAAAA,EAAK;AAAA,cAA0D,qCAAAA,EAAK;AAAA,uDAA8DA,EAAK,QAAQR,EAAA;AAAA;yCAAoEA,EAAA,IAAI;AAAA,aAU7a,0BAA0B,CAAA;AAAA,UAC/B,aAAS,CAAAC,MAAED,EAAA,kBAAkBQ,EAAK,GAAG;AAAA;UAE3BA,EAAK,WAAhBZ,KAAAS,EAQM,OARNK,GAQM;AAAA,YANIF,EAAK,aADbX,EAKEc,GAAA;AAAA;cAHC,UAAUH,EAAK;AAAA,cACf,MAAMA,EAAK;AAAA,cACZ,OAAM;AAAA;YAERL,EAAoE,QAApEV,GAAoEmB,EAApBJ,EAAK,KAAK,GAAA,CAAA;AAAA,gBAG/CA,EAAK,QAAI,CAAKA,EAAK,iBADhCX,EAcYgB,GAAA;AAAA;YAZT,MAAML,EAAK;AAAA,YACX,YAAU;AAAA,YACX,iBAAc;AAAA,YACd,MAAK;AAAA;uBAEL,MAKE;AAAA,cAJMA,EAAK,aADbX,EAKEc,GAAA;AAAA;gBAHC,UAAUH,EAAK;AAAA,gBACf,MAAMA,EAAK;AAAA,gBACZ,OAAM;AAAA;cAERL,EAAoE,QAApET,GAAoEkB,EAApBJ,EAAK,KAAK,GAAA,CAAA;AAAA;;sCAE5DH,EAQM,OAAA;AAAA;YARM,OAAM;AAAA,YAAqC,MAAK;AAAA,YAAY,SAAK,CAAAJ,MAAED,EAAA,UAAUQ,CAAI;AAAA;YAEnFA,EAAK,aADbX,EAKEc,GAAA;AAAA;cAHC,UAAUH,EAAK;AAAA,cACf,MAAMA,EAAK;AAAA,cACZ,OAAM;AAAA;YAERL,EAAoE,QAApER,GAAoEiB,EAApBJ,EAAK,KAAK,GAAA,CAAA;AAAA;;;;;;;;"}
+{"version":3,"file":"NeonDropdownMenu.vue.es.js","sources":["../../../../src/components/navigation/dropdown-menu/NeonDropdownMenu.vue"],"sourcesContent":["<template>\n  <neon-dropdown\n    ref=\"dropdown\"\n    v-model=\"open\"\n    :class=\"`neon-dropdown-menu--${color}`\"\n    :color=\"color\"\n    :disabled=\"disabled\"\n    :openOnHover=\"openOnHover\"\n    :size=\"size\"\n    class=\"neon-dropdown-menu\"\n    v-bind=\"attrs\"\n    @blur=\"onBlur()\"\n    @button=\"emit('button-ref', $event)\"\n    @focus=\"onFocus()\"\n    @update:modelValue=\"open = $event\"\n    @dropdown-placement=\"onPlacement\"\n  >\n    <ul class=\"no-style neon-dropdown-menu__items\" role=\"menu\">\n      <li\n        v-for=\"item in model\"\n        :key=\"item.key\"\n        ref=\"items\"\n        :class=\"[\n          {\n            'neon-dropdown-menu__item--disabled': item.disabled,\n            'neon-dropdown-menu__item--separator-before': item.separatorBefore,\n            'neon-dropdown-menu__item--group-title': item.isGroup,\n            'neon-dropdown-menu__item--grouped': item.grouped,\n            'neon-dropdown-menu__item--highlighted': item.key === highlightedKey,\n          },\n          `neon-dropdown-menu__item--${size}`,\n        ]\"\n        class=\"neon-dropdown-menu__item\"\n        tabindex=\"0\"\n        @mouseover=\"changeHighlighted(item.key)\"\n      >\n        <div v-if=\"item.isGroup\" class=\"neon-dropdown-menu__item-container\">\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </div>\n        <neon-link\n          v-else-if=\"item.href && !item.disabled\"\n          :href=\"item.href\"\n          :no-style=\"true\"\n          outline-style=\"none\"\n          role=\"menuitem\"\n        >\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </neon-link>\n        <div v-else class=\"neon-dropdown-menu__item-container\" role=\"menuitem\" @click=\"clickItem(item)\">\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </div>\n      </li>\n    </ul>\n  </neon-dropdown>\n</template>\n\n<script lang=\"ts\" src=\"./NeonDropdownMenu.ts\"></script>\n"],"names":["_hoisted_4","_hoisted_5","_hoisted_7","_openBlock","_createBlock","_component_neon_dropdown","_mergeProps","_ctx","$event","_cache","_createElementVNode","_hoisted_1","_createElementBlock","_Fragment","_renderList","item","_normalizeClass","_hoisted_3","_component_neon_icon","_toDisplayString","_component_neon_link"],"mappings":";;;;EAiBQ,OAAM;AAAA,EAAqC,MAAK;;;EAmBvB,OAAM;GAOvBA,IAAA,EAAA,OAAM,iCAAgC,GAetCC,IAAA,EAAA,OAAM,iCAAgC,oBAStCC,IAAA,EAAA,OAAM,iCAAgC;;;AAlEpD,SAAAC,EAAA,GAAAC,EAsEgBC,GAtEhBC,EAsEgB;AAAA,IArEd,KAAI;AAAA,gBACKC,EAAA;AAAA,kDAAAA,EAAA,OAAIC;AAAA,IACZ,OAAK,CAAA,uBAAyBD,EAAA,KAAK,IAK9B,oBAAoB;AAAA,IAJzB,OAAOA,EAAA;AAAA,IACP,UAAUA,EAAA;AAAA,IACV,aAAaA,EAAA;AAAA,IACb,MAAMA,EAAA;AAAA,KAECA,EAAA,OAAK;AAAA,IACZ,+BAAMA,EAAA,OAAM;AAAA,IACZ,UAAME,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAD,MAAED,EAAA,KAAI,cAAeC,CAAM;AAAA,IACjC,gCAAOD,EAAA,QAAO;AAAA,IACd,uBAAiBE,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAD,MAAED,EAAA,OAAOC;AAAA,IAC1B,qBAAoBD,EAAA;AAAA;eAErB,MAqDK;AAAA,MArDLG,EAqDK,MArDLC,GAqDK;AAAA,gBApDHC,EAmDKC,GAAA,MAAAC,EAlDYP,EAAA,OAAK,CAAbQ,YADTH,EAmDK,MAAA;AAAA,UAjDF,KAAKG,EAAK;AAAA;UACX,KAAI;AAAA,UACH,OAAKC,EAAA,CAAA;AAAA;cAAkE,sCAAAD,EAAK;AAAA,cAAoE,8CAAAA,EAAK;AAAA,cAAsE,yCAAAA,EAAK;AAAA,cAA0D,qCAAAA,EAAK;AAAA,uDAA8DA,EAAK,QAAQR,EAAA;AAAA;yCAAoEA,EAAA,IAAI;AAAA,aAU7a,0BAA0B,CAAA;AAAA,UAChC,UAAS;AAAA,UACR,aAAS,CAAAC,MAAED,EAAA,kBAAkBQ,EAAK,GAAG;AAAA;UAE3BA,EAAK,WAAhBZ,KAAAS,EAQM,OARNK,GAQM;AAAA,YANIF,EAAK,aADbX,EAKEc,GAAA;AAAA;cAHC,UAAUH,EAAK;AAAA,cACf,MAAMA,EAAK;AAAA,cACZ,OAAM;AAAA;YAERL,EAAoE,QAApEV,GAAoEmB,EAApBJ,EAAK,KAAK,GAAA,CAAA;AAAA,gBAG/CA,EAAK,QAAI,CAAKA,EAAK,iBADhCX,EAcYgB,GAAA;AAAA;YAZT,MAAML,EAAK;AAAA,YACX,YAAU;AAAA,YACX,iBAAc;AAAA,YACd,MAAK;AAAA;uBAEL,MAKE;AAAA,cAJMA,EAAK,aADbX,EAKEc,GAAA;AAAA;gBAHC,UAAUH,EAAK;AAAA,gBACf,MAAMA,EAAK;AAAA,gBACZ,OAAM;AAAA;cAERL,EAAoE,QAApET,GAAoEkB,EAApBJ,EAAK,KAAK,GAAA,CAAA;AAAA;;sCAE5DH,EAQM,OAAA;AAAA;YARM,OAAM;AAAA,YAAqC,MAAK;AAAA,YAAY,SAAK,CAAAJ,MAAED,EAAA,UAAUQ,CAAI;AAAA;YAEnFA,EAAK,aADbX,EAKEc,GAAA;AAAA;cAHC,UAAUH,EAAK;AAAA,cACf,MAAMA,EAAK;AAAA,cACZ,OAAM;AAAA;YAERL,EAAoE,QAApER,GAAoEiB,EAApBJ,EAAK,KAAK,GAAA,CAAA;AAAA;;;;;;;;"}

package/dist/components/presentation/dropdown/NeonDropdown.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const n=require("vue"),p=require("../../../common/enums/NeonDropdownPlacement.cjs.js"),v=require("../../../common/utils/NeonDropdownPlacementUtils.cjs.js"),w=require("../../../common/utils/NeonClosableUtils.cjs.js"),y=require("../../../common/enums/NeonSize.cjs.js"),N=require("../../../common/enums/NeonFunctionalColor.cjs.js"),S=require("../../../common/enums/NeonDropdownStyle.cjs.js"),g=require("../badge/NeonBadge.vue.cjs.js"),C=require("../../user-input/button/NeonButton.vue.cjs.js"),b=require("../expansion-indicator/NeonExpansionIndicator.vue.cjs.js"),q=n.defineComponent({name:"NeonDropdown",components:{NeonBadge:g,NeonButton:C,NeonExpansionIndicator:b},props:{id:{type:String},modelValue:{type:Boolean,required:!0},label:{type:String,default:null},image:{type:String,default:null},imageAlt:{type:String,default:null},icon:{type:String,default:null},indicator:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},size:{type:String,default:y.NeonSize.Medium},color:{type:String,default:N.NeonFunctionalColor.LowContrast},alternateColor:{type:String,default:null},dropdownStyle:{type:String,default:S.NeonDropdownStyle.SolidButton},placement:{type:String,default:p.NeonDropdownPlacement.BottomLeft},placementContainer:{type:Object,default:null},openOnHover:{type:Boolean,default:!1}},emits:["update:modelValue","dropdown-placement","blur","focus","button-ref"],setup(e,{emit:o}){const r=n.ref(null),l=n.ref(null),a=n.ref(e.placement),u=n.ref(null),d=()=>{o("update:modelValue",!1)},c=()=>{e.modelValue&&d()},t=()=>{if(e.modelValue&&r.value&&l.value){const i=a.value;a.value=v.NeonDropdownPlacementUtils.calculatePlacement(r.value,l.value,e.placement,e.placementContainer),i!==a.value&&o("dropdown-placement",a.value)}},s=()=>{!e.disabled&&!e.openOnHover&&(o("update:modelValue",!e.modelValue),setTimeout(t))},m=()=>{o("blur")},f=()=>{o("focus")};return n.onMounted(()=>{!e.openOnHover&&l.value&&(u.value=new w.NeonClosableUtils(l.value,c)),window.addEventListener("resize",t,{passive:!0}),window.addEventListener("scroll",t,{passive:!0}),e.placementContainer&&e.placementContainer.addEventListener("scroll",t,{passive:!0})}),n.onUnmounted(()=>{e.openOnHover||u.value&&u.value.destroy(),window.removeEventListener("resize",t),window.removeEventListener("scroll",t),e.placementContainer&&e.placementContainer.removeEventListener("scroll",t)}),n.watch(()=>r.value,i=>o("button-ref",i),{immediate:!0}),{dropdownButton:r,dropdownContent:l,dropdownPlacement:a,closableUtils:u,onClose:d,close:c,toggleOpen:s,onBlur:m,onFocus:f}}});module.exports=q;
+"use strict";const n=require("vue"),p=require("../../../common/enums/NeonDropdownPlacement.cjs.js"),v=require("../../../common/utils/NeonDropdownPlacementUtils.cjs.js"),w=require("../../../common/utils/NeonClosableUtils.cjs.js"),y=require("../../../common/enums/NeonSize.cjs.js"),N=require("../../../common/enums/NeonFunctionalColor.cjs.js"),S=require("../../../common/enums/NeonDropdownStyle.cjs.js"),g=require("../badge/NeonBadge.vue.cjs.js"),C=require("../../user-input/button/NeonButton.vue.cjs.js"),b=require("../expansion-indicator/NeonExpansionIndicator.vue.cjs.js"),q=n.defineComponent({name:"NeonDropdown",components:{NeonBadge:g,NeonButton:C,NeonExpansionIndicator:b},props:{id:{type:String},modelValue:{type:Boolean,required:!0},label:{type:String,default:null},image:{type:String,default:null},imageAlt:{type:String,default:null},icon:{type:String,default:null},indicator:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},size:{type:String,default:y.NeonSize.Medium},color:{type:String,default:N.NeonFunctionalColor.LowContrast},alternateColor:{type:String,default:null},dropdownStyle:{type:String,default:S.NeonDropdownStyle.SolidButton},placement:{type:String,default:p.NeonDropdownPlacement.BottomLeft},placementContainer:{type:Object,default:null},openOnHover:{type:Boolean,default:!1}},emits:["update:modelValue","dropdown-placement","blur","focus","button-ref"],setup(e,{emit:o}){const r=n.ref(null),l=n.ref(null),a=n.ref(e.placement),u=n.ref(null),d=()=>{o("update:modelValue",!1)},c=()=>{e.modelValue&&d()},t=()=>{if(e.modelValue&&r.value&&l.value){const i=a.value;a.value=v.NeonDropdownPlacementUtils.calculatePlacement(r.value,l.value,e.placement,e.placementContainer),i!==a.value&&o("dropdown-placement",a.value)}},s=()=>{!e.disabled&&!e.openOnHover&&(o("update:modelValue",!e.modelValue),setTimeout(t))},f=()=>{o("blur")},m=()=>{o("focus")};return n.onMounted(()=>{!e.openOnHover&&l.value&&(u.value=new w.NeonClosableUtils(l.value,c)),window.addEventListener("resize",t,{passive:!0}),window.addEventListener("scroll",t,{passive:!0}),e.placementContainer&&e.placementContainer.addEventListener("scroll",t,{passive:!0})}),n.onUnmounted(()=>{e.openOnHover||u.value&&u.value.destroy(),window.removeEventListener("resize",t),window.removeEventListener("scroll",t),e.placementContainer&&e.placementContainer.removeEventListener("scroll",t)}),n.watch(()=>r.value,i=>o("button-ref",i),{immediate:!0}),n.defineExpose({dropdownContent:l}),{dropdownButton:r,dropdownContent:l,dropdownPlacement:a,closableUtils:u,onClose:d,close:c,toggleOpen:s,onBlur:f,onFocus:m}}});module.exports=q;
 //# sourceMappingURL=NeonDropdown.cjs.js.map

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

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

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

@@ -1,19 +1,19 @@
-import { defineComponent as p, ref as u, onMounted as v, onUnmounted as w, watch as y } from "vue";
-import { NeonDropdownPlacement as g } from "../../../common/enums/NeonDropdownPlacement.es.js";
-import { NeonDropdownPlacementUtils as S } from "../../../common/utils/NeonDropdownPlacementUtils.es.js";
-import { NeonClosableUtils as C } from "../../../common/utils/NeonClosableUtils.es.js";
-import { NeonSize as b } from "../../../common/enums/NeonSize.es.js";
-import { NeonFunctionalColor as B } from "../../../common/enums/NeonFunctionalColor.es.js";
-import { NeonDropdownStyle as N } from "../../../common/enums/NeonDropdownStyle.es.js";
+import { defineComponent as p, ref as u, onMounted as v, onUnmounted as w, watch as y, defineExpose as g } from "vue";
+import { NeonDropdownPlacement as S } from "../../../common/enums/NeonDropdownPlacement.es.js";
+import { NeonDropdownPlacementUtils as C } from "../../../common/utils/NeonDropdownPlacementUtils.es.js";
+import { NeonClosableUtils as b } from "../../../common/utils/NeonClosableUtils.es.js";
+import { NeonSize as B } from "../../../common/enums/NeonSize.es.js";
+import { NeonFunctionalColor as N } from "../../../common/enums/NeonFunctionalColor.es.js";
+import { NeonDropdownStyle as E } from "../../../common/enums/NeonDropdownStyle.es.js";
 import L from "../badge/NeonBadge.vue.es.js";
 import V from "../../user-input/button/NeonButton.vue.es.js";
-import E from "../expansion-indicator/NeonExpansionIndicator.vue.es.js";
-const h = p({
+import O from "../expansion-indicator/NeonExpansionIndicator.vue.es.js";
+const j = p({
   name: "NeonDropdown",
   components: {
     NeonBadge: L,
     NeonButton: V,
-    NeonExpansionIndicator: E
+    NeonExpansionIndicator: O
   },
   props: {
     /**
@@ -51,11 +51,11 @@ const h = p({
     /**
      * The size of the dropdown button - Small, Medium or Large.
      */
-    size: { type: String, default: b.Medium },
+    size: { type: String, default: B.Medium },
     /**
      * The color of the dropdown button
      */
-    color: { type: String, default: B.LowContrast },
+    color: { type: String, default: N.LowContrast },
     /**
      * The alternate color of the dropdown button (for gradient buttons).
      */
@@ -63,11 +63,11 @@ const h = p({
     /**
      * The style of the dropdown button
      */
-    dropdownStyle: { type: String, default: N.SolidButton },
+    dropdownStyle: { type: String, default: E.SolidButton },
     /**
      * Placement of the dropdown contents.
      */
-    placement: { type: String, default: g.BottomLeft },
+    placement: { type: String, default: S.BottomLeft },
     /**
      * Restrict placement to within this container.
      */
@@ -112,7 +112,7 @@ const h = p({
     }, t = () => {
       if (e.modelValue && a.value && o.value) {
         const i = l.value;
-        l.value = S.calculatePlacement(
+        l.value = C.calculatePlacement(
           a.value,
           o.value,
           e.placement,
@@ -127,14 +127,14 @@ const h = p({
       n("focus");
     };
     return v(() => {
-      !e.openOnHover && o.value && (r.value = new C(o.value, m)), window.addEventListener("resize", t, { passive: !0 }), window.addEventListener("scroll", t, { passive: !0 }), e.placementContainer && e.placementContainer.addEventListener("scroll", t, { passive: !0 });
+      !e.openOnHover && o.value && (r.value = new b(o.value, m)), window.addEventListener("resize", t, { passive: !0 }), window.addEventListener("scroll", t, { passive: !0 }), e.placementContainer && e.placementContainer.addEventListener("scroll", t, { passive: !0 });
     }), w(() => {
       e.openOnHover || r.value && r.value.destroy(), window.removeEventListener("resize", t), window.removeEventListener("scroll", t), e.placementContainer && e.placementContainer.removeEventListener("scroll", t);
     }), y(
       () => a.value,
       (i) => n("button-ref", i),
       { immediate: !0 }
-    ), {
+    ), g({ dropdownContent: o }), {
       dropdownButton: a,
       dropdownContent: o,
       dropdownPlacement: l,
@@ -148,6 +148,6 @@ const h = p({
   }
 });
 export {
-  h as default
+  j as default
 };
 //# sourceMappingURL=NeonDropdown.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NeonDropdown.es.js","sources":["../../../../src/components/presentation/dropdown/NeonDropdown.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonDropdownPlacementUtils } from '@/common/utils/NeonDropdownPlacementUtils';\nimport { NeonClosableUtils } from '@/common/utils/NeonClosableUtils';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonDropdownStyle } from '@/common/enums/NeonDropdownStyle';\nimport NeonBadge from '@/components/presentation/badge/NeonBadge.vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\n\n/**\n * <p>A general purpose dropdown component. This component consists of a button, to trigger the dropdown to open, and\n * the dropdown content which is displayed above the page when the user clicks the button.</p>\n * <p>This can be useful for secondary (perhaps more complex) actions for which there is not enough space on the page or\n * the action is asynchronous allowing the user to perform the action and continue what they were doing. Examples are\n * providing links to copy and letting the user send feedback.</p>\n * <p><strong>NeonDropdown</strong> is the basis for the <strong>NeonDropdownMenu</strong> component and the\n * <strong>NeonSelect</strong> form component.</p>\n */\nexport default defineComponent({\n  name: 'NeonDropdown',\n  components: {\n    NeonBadge,\n    NeonButton,\n    NeonExpansionIndicator,\n  },\n  props: {\n    /**\n     * Id for the dropdown button.\n     */\n    id: { type: String },\n    /**\n     * Whether the dropdown is currently open.\n     */\n    modelValue: { type: Boolean, required: true },\n    /**\n     * The label for the dropdown button.\n     */\n    label: { type: String, default: null },\n    /**\n     * URL of image to display if the button style is a square or circular badge.\n     */\n    image: { type: String, default: null },\n    /**\n     * Badge image ALT text.\n     */\n    imageAlt: { type: String, default: null },\n    /**\n     * An icon to display on the dropdown button. This will be to the left of any label, but can also be used on its own.\n     */\n    icon: { type: String, default: null },\n    /**\n     * Show the dropdown button's indicator (chevron).\n     */\n    indicator: { type: Boolean, default: true },\n    /**\n     * Disable the dropdown button\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * The size of the dropdown button - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The color of the dropdown button\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * The alternate color of the dropdown button (for gradient buttons).\n     */\n    alternateColor: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * The style of the dropdown button\n     */\n    dropdownStyle: { type: String as () => NeonDropdownStyle, default: NeonDropdownStyle.SolidButton },\n    /**\n     * Placement of the dropdown contents.\n     */\n    placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n    /**\n     * Restrict placement to within this container.\n     */\n    placementContainer: { type: Object as () => HTMLElement, default: null },\n    /**\n     * Instead of opening on click (default), open on hover.\n     */\n    openOnHover: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Emitted when the dropdown button is toggled.\n     * @type {boolean} the open state of the dropdown.\n     */\n    'update:modelValue',\n    /**\n     * Emitted on initialisation.\n     * @type {NeonDropdownPlacement} the placement of the dropdown.\n     */\n    'dropdown-placement',\n    /**\n     * Emitted when the dropdown button is blurred.\n     * @type {void}\n     */\n    'blur',\n    /**\n     * Emitted when the dropdown button is focussed.\n     * @type {void}\n     */\n    'focus',\n    /**\n     * emitted on initialisation\n     * @type {HTMLElement} the reference to the HTMLElement for the dropdown menu button.\n     */\n    'button-ref',\n  ],\n  setup(props, { emit }) {\n    const dropdownButton = ref<HTMLElement | null>(null);\n    const dropdownContent = ref<HTMLDivElement | null>(null);\n\n    const dropdownPlacement = ref<NeonDropdownPlacement>(props.placement);\n    const closableUtils = ref<NeonClosableUtils | null>(null);\n\n    const onClose = () => {\n      emit('update:modelValue', false);\n    };\n\n    const close = () => {\n      if (props.modelValue) {\n        onClose();\n      }\n    };\n\n    const recalculatePlacement = () => {\n      if (props.modelValue && dropdownButton.value && dropdownContent.value) {\n        const previousValue = dropdownPlacement.value;\n        dropdownPlacement.value = NeonDropdownPlacementUtils.calculatePlacement(\n          dropdownButton.value,\n          dropdownContent.value,\n          props.placement,\n          props.placementContainer,\n        );\n\n        if (previousValue !== dropdownPlacement.value) {\n          emit('dropdown-placement', dropdownPlacement.value);\n        }\n      }\n    };\n\n    const toggleOpen = () => {\n      if (!props.disabled && !props.openOnHover) {\n        emit('update:modelValue', !props.modelValue);\n        setTimeout(recalculatePlacement);\n      }\n    };\n\n    const onBlur = () => {\n      emit('blur');\n    };\n\n    const onFocus = () => {\n      emit('focus');\n    };\n\n    onMounted(() => {\n      if (!props.openOnHover && dropdownContent.value) {\n        closableUtils.value = new NeonClosableUtils(dropdownContent.value, close);\n      }\n      window.addEventListener('resize', recalculatePlacement, { passive: true });\n      window.addEventListener('scroll', recalculatePlacement, { passive: true });\n      if (props.placementContainer) {\n        props.placementContainer.addEventListener('scroll', recalculatePlacement, { passive: true });\n      }\n    });\n\n    onUnmounted(() => {\n      if (!props.openOnHover) {\n        closableUtils.value && closableUtils.value.destroy();\n      }\n      window.removeEventListener('resize', recalculatePlacement);\n      window.removeEventListener('scroll', recalculatePlacement);\n      if (props.placementContainer) {\n        props.placementContainer.removeEventListener('scroll', recalculatePlacement);\n      }\n    });\n\n    watch(\n      () => dropdownButton.value,\n      (value) => emit('button-ref', value),\n      { immediate: true },\n    );\n\n    return {\n      dropdownButton,\n      dropdownContent,\n      dropdownPlacement,\n      closableUtils,\n      onClose,\n      close,\n      toggleOpen,\n      onBlur,\n      onFocus,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonBadge","NeonButton","NeonExpansionIndicator","NeonSize","NeonFunctionalColor","NeonDropdownStyle","NeonDropdownPlacement","props","emit","dropdownButton","ref","dropdownContent","dropdownPlacement","closableUtils","onClose","close","recalculatePlacement","previousValue","NeonDropdownPlacementUtils","toggleOpen","onBlur","onFocus","onMounted","NeonClosableUtils","onUnmounted","watch","value"],"mappings":";;;;;;;;;;AAoBA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,wBAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI,EAAE,MAAM,OAAA;AAAA;AAAA;AAAA;AAAA,IAIZ,YAAY,EAAE,MAAM,SAAS,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIvC,OAAO,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,OAAO,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,UAAU,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAInC,MAAM,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI/B,WAAW,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIrC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,MAAM,EAAE,MAAM,QAA0B,SAASC,EAAS,OAAA;AAAA;AAAA;AAAA;AAAA,IAI1D,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,YAAA;AAAA;AAAA;AAAA;AAAA,IAIjF,gBAAgB,EAAE,MAAM,QAAqC,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAItE,eAAe,EAAE,MAAM,QAAmC,SAASC,EAAkB,YAAA;AAAA;AAAA;AAAA;AAAA,IAIrF,WAAW,EAAE,MAAM,QAAuC,SAASC,EAAsB,WAAA;AAAA;AAAA;AAAA;AAAA,IAIzF,oBAAoB,EAAE,MAAM,QAA6B,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIlE,aAAa,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAAA,EAE/C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,UAAMC,IAAiBC,EAAwB,IAAI,GAC7CC,IAAkBD,EAA2B,IAAI,GAEjDE,IAAoBF,EAA2BH,EAAM,SAAS,GAC9DM,IAAgBH,EAA8B,IAAI,GAElDI,IAAU,MAAM;AACpB,MAAAN,EAAK,qBAAqB,EAAK;AAAA,IACjC,GAEMO,IAAQ,MAAM;AAClB,MAAIR,EAAM,cACRO,EAAA;AAAA,IAEJ,GAEME,IAAuB,MAAM;AACjC,UAAIT,EAAM,cAAcE,EAAe,SAASE,EAAgB,OAAO;AACrE,cAAMM,IAAgBL,EAAkB;AACxC,QAAAA,EAAkB,QAAQM,EAA2B;AAAA,UACnDT,EAAe;AAAA,UACfE,EAAgB;AAAA,UAChBJ,EAAM;AAAA,UACNA,EAAM;AAAA,QAAA,GAGJU,MAAkBL,EAAkB,SACtCJ,EAAK,sBAAsBI,EAAkB,KAAK;AAAA,MAEtD;AAAA,IACF,GAEMO,IAAa,MAAM;AACvB,MAAI,CAACZ,EAAM,YAAY,CAACA,EAAM,gBAC5BC,EAAK,qBAAqB,CAACD,EAAM,UAAU,GAC3C,WAAWS,CAAoB;AAAA,IAEnC,GAEMI,IAAS,MAAM;AACnB,MAAAZ,EAAK,MAAM;AAAA,IACb,GAEMa,IAAU,MAAM;AACpB,MAAAb,EAAK,OAAO;AAAA,IACd;AAEA,WAAAc,EAAU,MAAM;AACd,MAAI,CAACf,EAAM,eAAeI,EAAgB,UACxCE,EAAc,QAAQ,IAAIU,EAAkBZ,EAAgB,OAAOI,CAAK,IAE1E,OAAO,iBAAiB,UAAUC,GAAsB,EAAE,SAAS,IAAM,GACzE,OAAO,iBAAiB,UAAUA,GAAsB,EAAE,SAAS,IAAM,GACrET,EAAM,sBACRA,EAAM,mBAAmB,iBAAiB,UAAUS,GAAsB,EAAE,SAAS,IAAM;AAAA,IAE/F,CAAC,GAEDQ,EAAY,MAAM;AAChB,MAAKjB,EAAM,eACTM,EAAc,SAASA,EAAc,MAAM,QAAA,GAE7C,OAAO,oBAAoB,UAAUG,CAAoB,GACzD,OAAO,oBAAoB,UAAUA,CAAoB,GACrDT,EAAM,sBACRA,EAAM,mBAAmB,oBAAoB,UAAUS,CAAoB;AAAA,IAE/E,CAAC,GAEDS;AAAA,MACE,MAAMhB,EAAe;AAAA,MACrB,CAACiB,MAAUlB,EAAK,cAAckB,CAAK;AAAA,MACnC,EAAE,WAAW,GAAA;AAAA,IAAK,GAGb;AAAA,MACL,gBAAAjB;AAAA,MACA,iBAAAE;AAAA,MACA,mBAAAC;AAAA,MACA,eAAAC;AAAA,MACA,SAAAC;AAAA,MACA,OAAAC;AAAA,MACA,YAAAI;AAAA,MACA,QAAAC;AAAA,MACA,SAAAC;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}
+{"version":3,"file":"NeonDropdown.es.js","sources":["../../../../src/components/presentation/dropdown/NeonDropdown.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, defineExpose, onMounted, onUnmounted, ref, watch } from 'vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonDropdownPlacementUtils } from '@/common/utils/NeonDropdownPlacementUtils';\nimport { NeonClosableUtils } from '@/common/utils/NeonClosableUtils';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonDropdownStyle } from '@/common/enums/NeonDropdownStyle';\nimport NeonBadge from '@/components/presentation/badge/NeonBadge.vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\n\n/**\n * <p>A general purpose dropdown component. This component consists of a button, to trigger the dropdown to open, and\n * the dropdown content which is displayed above the page when the user clicks the button.</p>\n * <p>This can be useful for secondary (perhaps more complex) actions for which there is not enough space on the page or\n * the action is asynchronous allowing the user to perform the action and continue what they were doing. Examples are\n * providing links to copy and letting the user send feedback.</p>\n * <p><strong>NeonDropdown</strong> is the basis for the <strong>NeonDropdownMenu</strong> component and the\n * <strong>NeonSelect</strong> form component.</p>\n */\nexport default defineComponent({\n  name: 'NeonDropdown',\n  components: {\n    NeonBadge,\n    NeonButton,\n    NeonExpansionIndicator,\n  },\n  props: {\n    /**\n     * Id for the dropdown button.\n     */\n    id: { type: String },\n    /**\n     * Whether the dropdown is currently open.\n     */\n    modelValue: { type: Boolean, required: true },\n    /**\n     * The label for the dropdown button.\n     */\n    label: { type: String, default: null },\n    /**\n     * URL of image to display if the button style is a square or circular badge.\n     */\n    image: { type: String, default: null },\n    /**\n     * Badge image ALT text.\n     */\n    imageAlt: { type: String, default: null },\n    /**\n     * An icon to display on the dropdown button. This will be to the left of any label, but can also be used on its own.\n     */\n    icon: { type: String, default: null },\n    /**\n     * Show the dropdown button's indicator (chevron).\n     */\n    indicator: { type: Boolean, default: true },\n    /**\n     * Disable the dropdown button\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * The size of the dropdown button - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The color of the dropdown button\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * The alternate color of the dropdown button (for gradient buttons).\n     */\n    alternateColor: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * The style of the dropdown button\n     */\n    dropdownStyle: { type: String as () => NeonDropdownStyle, default: NeonDropdownStyle.SolidButton },\n    /**\n     * Placement of the dropdown contents.\n     */\n    placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n    /**\n     * Restrict placement to within this container.\n     */\n    placementContainer: { type: Object as () => HTMLElement, default: null },\n    /**\n     * Instead of opening on click (default), open on hover.\n     */\n    openOnHover: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Emitted when the dropdown button is toggled.\n     * @type {boolean} the open state of the dropdown.\n     */\n    'update:modelValue',\n    /**\n     * Emitted on initialisation.\n     * @type {NeonDropdownPlacement} the placement of the dropdown.\n     */\n    'dropdown-placement',\n    /**\n     * Emitted when the dropdown button is blurred.\n     * @type {void}\n     */\n    'blur',\n    /**\n     * Emitted when the dropdown button is focussed.\n     * @type {void}\n     */\n    'focus',\n    /**\n     * emitted on initialisation\n     * @type {HTMLElement} the reference to the HTMLElement for the dropdown menu button.\n     */\n    'button-ref',\n  ],\n  setup(props, { emit }) {\n    const dropdownButton = ref<HTMLElement | null>(null);\n    const dropdownContent = ref<HTMLDivElement | null>(null);\n\n    const dropdownPlacement = ref<NeonDropdownPlacement>(props.placement);\n    const closableUtils = ref<NeonClosableUtils | null>(null);\n\n    const onClose = () => {\n      emit('update:modelValue', false);\n    };\n\n    const close = () => {\n      if (props.modelValue) {\n        onClose();\n      }\n    };\n\n    const recalculatePlacement = () => {\n      if (props.modelValue && dropdownButton.value && dropdownContent.value) {\n        const previousValue = dropdownPlacement.value;\n        dropdownPlacement.value = NeonDropdownPlacementUtils.calculatePlacement(\n          dropdownButton.value,\n          dropdownContent.value,\n          props.placement,\n          props.placementContainer,\n        );\n\n        if (previousValue !== dropdownPlacement.value) {\n          emit('dropdown-placement', dropdownPlacement.value);\n        }\n      }\n    };\n\n    const toggleOpen = () => {\n      if (!props.disabled && !props.openOnHover) {\n        emit('update:modelValue', !props.modelValue);\n        setTimeout(recalculatePlacement);\n      }\n    };\n\n    const onBlur = () => {\n      emit('blur');\n    };\n\n    const onFocus = () => {\n      emit('focus');\n    };\n\n    onMounted(() => {\n      if (!props.openOnHover && dropdownContent.value) {\n        closableUtils.value = new NeonClosableUtils(dropdownContent.value, close);\n      }\n      window.addEventListener('resize', recalculatePlacement, { passive: true });\n      window.addEventListener('scroll', recalculatePlacement, { passive: true });\n      if (props.placementContainer) {\n        props.placementContainer.addEventListener('scroll', recalculatePlacement, { passive: true });\n      }\n    });\n\n    onUnmounted(() => {\n      if (!props.openOnHover) {\n        closableUtils.value && closableUtils.value.destroy();\n      }\n      window.removeEventListener('resize', recalculatePlacement);\n      window.removeEventListener('scroll', recalculatePlacement);\n      if (props.placementContainer) {\n        props.placementContainer.removeEventListener('scroll', recalculatePlacement);\n      }\n    });\n\n    watch(\n      () => dropdownButton.value,\n      (value) => emit('button-ref', value),\n      { immediate: true },\n    );\n\n    defineExpose({ dropdownContent });\n\n    return {\n      dropdownButton,\n      dropdownContent,\n      dropdownPlacement,\n      closableUtils,\n      onClose,\n      close,\n      toggleOpen,\n      onBlur,\n      onFocus,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonBadge","NeonButton","NeonExpansionIndicator","NeonSize","NeonFunctionalColor","NeonDropdownStyle","NeonDropdownPlacement","props","emit","dropdownButton","ref","dropdownContent","dropdownPlacement","closableUtils","onClose","close","recalculatePlacement","previousValue","NeonDropdownPlacementUtils","toggleOpen","onBlur","onFocus","onMounted","NeonClosableUtils","onUnmounted","watch","value","defineExpose"],"mappings":"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"}

package/dist/components/presentation/image-carousel/NeonImageCarousel.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const o=require("vue"),b=require("../../navigation/link/NeonLink.vue.cjs.js"),I=require("../../user-input/button/NeonButton.vue.cjs.js"),L=o.defineComponent({name:"NeonImageCarousel",components:{NeonButton:I,NeonLink:b},props:{images:{type:Array,required:!0},imageCountLabel:{type:String,default:void 0},previousLabel:{type:String,default:"Previous"},nextLabel:{type:String,default:"Next"}},emits:["current-image"],setup(u,{emit:a}){const r=o.ref(!1),n=o.ref(0),t=o.ref(null),l=o.ref([]),i=o.ref([]),c=e=>{e!==n.value&&(n.value=e,a("current-image",e))},s=e=>{t.value&&u.images.length>0&&(c(e),t.value.scrollTo(t.value.clientWidth*e,0))},f=()=>{n.value<u.images.length-1&&s(n.value+1)},m=()=>{n.value!==0&&s(n.value-1)};return o.onMounted(()=>{const e={root:t.value,rootMargin:"0px",threshold:.6};i.value=l.value.map((g,p)=>{const v=new IntersectionObserver(d=>{d.forEach(h=>{r.value&&h.isIntersecting&&c(p)})},e);return v.observe(g),v}),setTimeout(()=>{t.value&&t.value.scrollLeft!==0&&(t.value.scrollLeft=0),r.value=!0},50)}),o.onUnmounted(()=>{i.value.forEach(e=>e.disconnect())}),{emit:a,currentImage:n,carouselItem:l,carouselItems:t,initialised:r,next:f,previous:m,scrollTo:s}}});module.exports=L;
+"use strict";const o=require("vue"),b=require("../../navigation/link/NeonLink.vue.cjs.js"),I=require("../../user-input/button/NeonButton.vue.cjs.js"),L=o.defineComponent({name:"NeonImageCarousel",components:{NeonButton:I,NeonLink:b},props:{images:{type:Array,required:!0},imageCountLabel:{type:String,default:void 0},hideLabel:{type:Boolean,default:!1},previousLabel:{type:String,default:"Previous"},nextLabel:{type:String,default:"Next"}},emits:["current-image"],setup(a,{emit:u}){const r=o.ref(!1),n=o.ref(0),t=o.ref(null),l=o.ref([]),i=o.ref([]),c=e=>{e!==n.value&&(n.value=e,u("current-image",e))},s=e=>{t.value&&a.images.length>0&&(c(e),t.value.scrollTo(t.value.clientWidth*e,0))},f=()=>{n.value<a.images.length-1&&s(n.value+1)},m=()=>{n.value!==0&&s(n.value-1)};return o.onMounted(()=>{const e={root:t.value,rootMargin:"0px",threshold:.6};i.value=l.value.map((g,p)=>{const v=new IntersectionObserver(d=>{d.forEach(h=>{r.value&&h.isIntersecting&&c(p)})},e);return v.observe(g),v}),setTimeout(()=>{t.value&&t.value.scrollLeft!==0&&(t.value.scrollLeft=0),r.value=!0},50)}),o.onUnmounted(()=>{i.value.forEach(e=>e.disconnect())}),{emit:u,currentImage:n,carouselItem:l,carouselItems:t,initialised:r,next:f,previous:m,scrollTo:s}}});module.exports=L;
 //# sourceMappingURL=NeonImageCarousel.cjs.js.map