@aotearoan/neon 21.0.2 → 22.0.0

package/dist/components/navigation/menu/NeonMenu.es.js

@@ -1,16 +1,16 @@
-import { defineComponent as x, ref as o, onMounted as L, nextTick as w, onUnmounted as z } from "vue";
-import C from "../link/NeonLink.vue.es.js";
-import I from "../dropdown-menu/NeonDropdownMenu.vue.es.js";
-import { NeonFunctionalColor as B } from "../../../common/enums/NeonFunctionalColor.es.js";
-import { NeonSize as F } from "../../../common/enums/NeonSize.es.js";
-import O from "../../presentation/icon/NeonIcon.vue.es.js";
-import { useRoute as R } from "vue-router";
-const T = x({
+import { defineComponent as W, ref as s, onMounted as x, nextTick as g, onUnmounted as C } from "vue";
+import L from "../link/NeonLink.vue.es.js";
+import z from "../dropdown-menu/NeonDropdownMenu.vue.es.js";
+import { NeonFunctionalColor as I } from "../../../common/enums/NeonFunctionalColor.es.js";
+import { NeonSize as _ } from "../../../common/enums/NeonSize.es.js";
+import B from "../../presentation/icon/NeonIcon.vue.es.js";
+import { useRoute as F } from "vue-router";
+const P = W({
   name: "NeonMenu",
   components: {
-    NeonDropdownMenu: I,
-    NeonLink: C,
-    NeonIcon: O
+    NeonDropdownMenu: z,
+    NeonLink: L,
+    NeonIcon: B
   },
   props: {
     /**
@@ -21,11 +21,11 @@ const T = x({
     /**
      * The menu highlight color (excludes low-contrast and neutral).
      */
-    color: { type: String, default: B.Brand },
+    color: { type: String, default: I.Brand },
     /**
      * The menu size.
      */
-    size: { type: String, default: F.Large },
+    size: { type: String, default: _.Large },
     /**
      * Whether to enable the priority menu which automatically calculates the available screen space and displays
      * as many of the menu items as possible, moving the remaining items into the overflow menu.
@@ -39,61 +39,63 @@ const T = x({
      */
     "click"
   ],
-  setup(s, { emit: M }) {
-    const c = R(), m = o(null), f = o(null), r = o(null), l = o([]), y = o([]), u = o([]), p = (t) => {
-      const n = window.getComputedStyle(t), e = parseFloat(n.marginLeft || "0") + parseFloat(n.marginRight || "0");
-      return Math.ceil(t.offsetWidth + e);
-    }, k = (t, n) => ({
-      key: t,
-      element: n,
-      width: p(n)
-    }), b = () => {
-      const t = s.menu.map(
-        (n, e) => f.value && k(n.key, f.value[e]) || null
+  setup(d, { emit: w }) {
+    const m = F(), c = s(null), f = s(null), l = s([]), y = s([]), u = s([]), p = (n) => {
+      const e = window.getComputedStyle(n), o = parseFloat(e.marginLeft || "0") + parseFloat(e.marginRight || "0");
+      return Math.ceil(n.offsetWidth + o);
+    }, M = (n, e) => ({
+      key: n,
+      element: e,
+      width: p(e)
+    }), k = () => {
+      const n = d.menu.map(
+        (e, o) => f.value && M(e.key, f.value[o]) || null
       );
-      l.value = t.filter((n) => n !== null);
-    }, E = (t) => t && (c == null ? void 0 : c.path.indexOf(t)) >= 0, N = (t) => {
-      M("click", t);
-    }, S = (t, n, e) => {
-      if (e.map((i) => i.width).reduce((i, a) => i ? i + a : 0) <= t - n)
-        return e.map((i) => i.key);
-      let h = t - n, d = [];
-      for (let i = 0; i < e.length; i = i + 1) {
-        const a = e[i];
-        if (h < a.width) {
-          i === 1 && (d = d.filter((W) => W !== e[0].key));
+      l.value = n.filter((e) => e !== null);
+    }, b = (n) => n && (m == null ? void 0 : m.path.indexOf(n)) >= 0, E = (n) => {
+      w("click", n);
+    }, N = (n, e, o) => {
+      if (o.map((i) => i.width).reduce((i, a) => i ? i + a : 0) <= n - e)
+        return o.map((i) => i.key);
+      let t = n - e, r = [];
+      for (let i = 0; i < o.length; i = i + 1) {
+        const a = o[i];
+        if (t < a.width) {
+          i === 1 && (r = r.filter((S) => S !== o[0].key));
           break;
         }
-        h = h - a.width, d.push(a.key);
+        t = t - a.width, r.push(a.key);
       }
-      return d;
-    }, v = async () => {
-      await w();
-      const t = m.value && p(m.value) || 0, n = r.value && p(r.value) || 0;
-      u.value = S(t, n, l.value), y.value = s.menu.filter((e) => u.value.indexOf(e.key) < 0).flatMap((e) => [
-        { ...e, isGroup: e.children && e.children.length > 0 },
-        ...(e.children || []).map((g) => ({ ...g, grouped: !0 }))
-      ]), l.value.forEach((e) => {
-        e.element.hidden = u.value.indexOf(e.key) < 0;
-      }), r.value && (r.value.hidden = l.value.length === u.value.length);
+      return r;
+    }, h = async () => {
+      var v;
+      await g();
+      const n = c.value && p(c.value) || 0, e = (v = c.value) == null ? void 0 : v.getElementsByClassName(
+        "neon-menu__responsive-menu"
+      )[0], o = e && p(e) || 0;
+      u.value = N(n, o, l.value), y.value = d.menu.filter((t) => u.value.indexOf(t.key) < 0).flatMap((t) => [
+        { ...t, isGroup: t.children && t.children.length > 0 },
+        ...(t.children || []).map((r) => ({ ...r, grouped: !0 }))
+      ]), l.value.forEach((t) => {
+        t.element.hidden = u.value.indexOf(t.key) < 0;
+      }), e && (e.hidden = l.value.length === u.value.length);
     };
-    return L(async () => {
-      s.priorityMenuEnabled && (await w(), b(), await v(), window.addEventListener("resize", v));
-    }), z(() => {
-      s.priorityMenuEnabled && window.removeEventListener("resize", v);
+    return x(async () => {
+      d.priorityMenuEnabled && (await g(), k(), await h(), window.addEventListener("resize", h));
+    }), C(() => {
+      d.priorityMenuEnabled && window.removeEventListener("resize", h);
     }), {
-      menuWrapper: m,
+      menuWrapper: c,
       menuItem: f,
       menuItems: l,
-      responsiveButton: r,
       responsiveMenuItems: y,
       visible: u,
-      onClick: N,
-      routeMatches: E
+      onClick: E,
+      routeMatches: b
     };
   }
 });
 export {
-  T as default
+  P as default
 };
 //# sourceMappingURL=NeonMenu.es.js.map

package/dist/components/navigation/menu/NeonMenu.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonMenu.es.js","sources":["../../../../src/components/navigation/menu/NeonMenu.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, nextTick, onMounted, onUnmounted, ref } from 'vue';\nimport type { NeonMenuModel } from '@/common/models/NeonMenuModel';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonDropdownMenu from '@/components/navigation/dropdown-menu/NeonDropdownMenu.vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport type { NeonPriorityMenuItem } from './NeonPriorityMenuItem';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { useRoute } from 'vue-router';\n\n/**\n * <p>\n *   <strong>NeonMenu</strong> is a responsive aware menu that progressively collapses options into the mobile menu as\n *   the screen size gets smaller. This is a more flexible option than moving directly to a hamburger menu at tablet and\n *   below. It is a best effort approach to keep displaying the most important menu items for as long as possible,\n *   giving the user a better experience.\n * </p>\n */\nexport default defineComponent({\n  name: 'NeonMenu',\n  components: {\n    NeonDropdownMenu,\n    NeonLink,\n    NeonIcon,\n  },\n  props: {\n    /**\n     * The menu configuration. This can have two levels, i.e. a top level horizontal menu and, if required, a dropdown\n     * menu containing the second level. The highlighted 'active' menu is determined by the current Vue route.\n     */\n    menu: { type: Array as () => Array<NeonMenuModel>, required: true },\n    /**\n     * The menu highlight color (excludes low-contrast and neutral).\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Brand },\n    /**\n     * The menu size.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Large },\n    /**\n     * Whether to enable the priority menu which automatically calculates the available screen space and displays\n     * as many of the menu items as possible, moving the remaining items into the overflow menu.\n     */\n    priorityMenuEnabled: { type: Boolean, default: true },\n  },\n  emits: [\n    /**\n     * Emitted when a user clicks on a menu item.\n     * @type {string} the key of the menu item clicked.\n     */\n    'click',\n  ],\n  setup(props, { emit }) {\n    const route = useRoute();\n    const menuWrapper = ref<HTMLElement | null>(null);\n    const menuItem = ref<Array<HTMLElement> | null>(null);\n    const responsiveButton = ref<HTMLElement | null>(null);\n\n    const menuItems = ref<Array<NeonPriorityMenuItem>>([]);\n    const responsiveMenuItems = ref<Array<NeonMenuModel>>([]);\n    const visible = ref<Array<string>>([]);\n\n    const getWidth = (el: HTMLElement) => {\n      const styles = window.getComputedStyle(el);\n      const margin = parseFloat(styles.marginLeft || '0') + parseFloat(styles.marginRight || '0');\n      return Math.ceil(el.offsetWidth + margin);\n    };\n\n    const toPriorityMenuItem = (key: string, element: HTMLElement): NeonPriorityMenuItem => {\n      return {\n        key,\n        element,\n        width: getWidth(element),\n      };\n    };\n\n    const initMenuItems = () => {\n      const results = props.menu.map(\n        (item, index) => (menuItem.value && toPriorityMenuItem(item.key, menuItem.value[index])) || null,\n      );\n      menuItems.value = results.filter((item) => item !== null) as NeonPriorityMenuItem[];\n    };\n\n    const routeMatches = (path?: string) => {\n      return path && route?.path.indexOf(path) >= 0;\n    };\n\n    const onClick = (key: string) => {\n      emit('click', key);\n    };\n\n    const determineVisibleMenuItems = (\n      menuWidth: number,\n      responsiveMenuWidth: number,\n      menuItems: NeonPriorityMenuItem[],\n    ) => {\n      const itemWidthSum = menuItems.map((item) => item.width).reduce((acc: number, width) => (acc ? acc + width : 0));\n\n      // no responsive menu\n      if (itemWidthSum <= menuWidth - responsiveMenuWidth) {\n        return menuItems.map((menuItem) => menuItem.key);\n      }\n\n      // with responsive menu\n      let availableWidth = menuWidth - responsiveMenuWidth;\n      let visible: string[] = [];\n\n      for (let i = 0; i < menuItems.length; i = i + 1) {\n        const menuItem = menuItems[i];\n        if (availableWidth < menuItem.width) {\n          // if the second menu item should be hidden, also hide the first one to improve how it looks\n          if (i === 1) {\n            visible = visible.filter((key) => key !== menuItems[0].key);\n          }\n          break;\n        }\n\n        availableWidth = availableWidth - menuItem.width;\n        visible.push(menuItem.key);\n      }\n\n      return visible;\n    };\n\n    const refreshVisibleMenu = async () => {\n      await nextTick();\n      const menuWidth = (menuWrapper.value && getWidth(menuWrapper.value)) || 0;\n      const responsiveMenuWidth = (responsiveButton.value && getWidth(responsiveButton.value)) || 0;\n      visible.value = determineVisibleMenuItems(menuWidth, responsiveMenuWidth, menuItems.value);\n\n      responsiveMenuItems.value = props.menu\n        .filter((item) => visible.value.indexOf(item.key) < 0)\n        .flatMap((item) => [\n          { ...item, isGroup: item.children && item.children.length > 0 },\n          ...(item.children || []).map((item) => ({ ...item, grouped: true })),\n        ]);\n\n      menuItems.value.forEach((item) => {\n        item.element.hidden = visible.value.indexOf(item.key) < 0;\n      });\n\n      if (responsiveButton.value) {\n        responsiveButton.value.hidden = menuItems.value.length === visible.value.length;\n      }\n    };\n\n    onMounted(async () => {\n      if (props.priorityMenuEnabled) {\n        await nextTick();\n        initMenuItems();\n        await refreshVisibleMenu();\n        window.addEventListener('resize', refreshVisibleMenu);\n      }\n    });\n\n    onUnmounted(() => {\n      if (props.priorityMenuEnabled) {\n        window.removeEventListener('resize', refreshVisibleMenu);\n      }\n    });\n\n    return {\n      menuWrapper,\n      menuItem,\n      menuItems,\n      responsiveButton,\n      responsiveMenuItems,\n      visible,\n      onClick,\n      routeMatches,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonDropdownMenu","NeonLink","NeonIcon","NeonFunctionalColor","NeonSize","props","emit","route","useRoute","menuWrapper","ref","menuItem","responsiveButton","menuItems","responsiveMenuItems","visible","getWidth","el","styles","margin","toPriorityMenuItem","key","element","initMenuItems","results","item","index","routeMatches","path","onClick","determineVisibleMenuItems","menuWidth","responsiveMenuWidth","acc","width","availableWidth","refreshVisibleMenu","nextTick","onMounted","onUnmounted"],"mappings":"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"}
+{"version":3,"file":"NeonMenu.es.js","sources":["../../../../src/components/navigation/menu/NeonMenu.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, nextTick, onMounted, onUnmounted, ref } from 'vue';\nimport type { NeonMenuModel } from '@/common/models/NeonMenuModel';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonDropdownMenu from '@/components/navigation/dropdown-menu/NeonDropdownMenu.vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport type { NeonPriorityMenuItem } from './NeonPriorityMenuItem';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { useRoute } from 'vue-router';\n\n/**\n * <p>\n *   <strong>NeonMenu</strong> is a responsive aware menu that progressively collapses options into the mobile menu as\n *   the screen size gets smaller. This is a more flexible option than moving directly to a hamburger menu at tablet and\n *   below. It is a best effort approach to keep displaying the most important menu items for as long as possible,\n *   giving the user a better experience.\n * </p>\n */\nexport default defineComponent({\n  name: 'NeonMenu',\n  components: {\n    NeonDropdownMenu,\n    NeonLink,\n    NeonIcon,\n  },\n  props: {\n    /**\n     * The menu configuration. This can have two levels, i.e. a top level horizontal menu and, if required, a dropdown\n     * menu containing the second level. The highlighted 'active' menu is determined by the current Vue route.\n     */\n    menu: { type: Array as () => Array<NeonMenuModel>, required: true },\n    /**\n     * The menu highlight color (excludes low-contrast and neutral).\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Brand },\n    /**\n     * The menu size.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Large },\n    /**\n     * Whether to enable the priority menu which automatically calculates the available screen space and displays\n     * as many of the menu items as possible, moving the remaining items into the overflow menu.\n     */\n    priorityMenuEnabled: { type: Boolean, default: true },\n  },\n  emits: [\n    /**\n     * Emitted when a user clicks on a menu item.\n     * @type {string} the key of the menu item clicked.\n     */\n    'click',\n  ],\n  setup(props, { emit }) {\n    const route = useRoute();\n    const menuWrapper = ref<HTMLElement | null>(null);\n    const menuItem = ref<Array<HTMLElement> | null>(null);\n\n    const menuItems = ref<Array<NeonPriorityMenuItem>>([]);\n    const responsiveMenuItems = ref<Array<NeonMenuModel>>([]);\n    const visible = ref<Array<string>>([]);\n\n    const getWidth = (el: HTMLElement) => {\n      const styles = window.getComputedStyle(el);\n      const margin = parseFloat(styles.marginLeft || '0') + parseFloat(styles.marginRight || '0');\n      return Math.ceil(el.offsetWidth + margin);\n    };\n\n    const toPriorityMenuItem = (key: string, element: HTMLElement): NeonPriorityMenuItem => {\n      return {\n        key,\n        element,\n        width: getWidth(element),\n      };\n    };\n\n    const initMenuItems = () => {\n      const results = props.menu.map(\n        (item, index) => (menuItem.value && toPriorityMenuItem(item.key, menuItem.value[index])) || null,\n      );\n      menuItems.value = results.filter((item) => item !== null) as NeonPriorityMenuItem[];\n    };\n\n    const routeMatches = (path?: string) => {\n      return path && route?.path.indexOf(path) >= 0;\n    };\n\n    const onClick = (key: string) => {\n      emit('click', key);\n    };\n\n    const determineVisibleMenuItems = (\n      menuWidth: number,\n      responsiveMenuWidth: number,\n      menuItems: NeonPriorityMenuItem[],\n    ) => {\n      const itemWidthSum = menuItems.map((item) => item.width).reduce((acc: number, width) => (acc ? acc + width : 0));\n\n      // no responsive menu\n      if (itemWidthSum <= menuWidth - responsiveMenuWidth) {\n        return menuItems.map((menuItem) => menuItem.key);\n      }\n\n      // with responsive menu\n      let availableWidth = menuWidth - responsiveMenuWidth;\n      let visible: string[] = [];\n\n      for (let i = 0; i < menuItems.length; i = i + 1) {\n        const menuItem = menuItems[i];\n        if (availableWidth < menuItem.width) {\n          // if the second menu item should be hidden, also hide the first one to improve how it looks\n          if (i === 1) {\n            visible = visible.filter((key) => key !== menuItems[0].key);\n          }\n          break;\n        }\n\n        availableWidth = availableWidth - menuItem.width;\n        visible.push(menuItem.key);\n      }\n\n      return visible;\n    };\n\n    const refreshVisibleMenu = async () => {\n      await nextTick();\n      const menuWidth = (menuWrapper.value && getWidth(menuWrapper.value)) || 0;\n      const responsiveDropdown = menuWrapper.value?.getElementsByClassName(\n        'neon-menu__responsive-menu',\n      )[0] as HTMLElement;\n      const responsiveMenuWidth = (responsiveDropdown && getWidth(responsiveDropdown)) || 0;\n      visible.value = determineVisibleMenuItems(menuWidth, responsiveMenuWidth, menuItems.value);\n\n      responsiveMenuItems.value = props.menu\n        .filter((item) => visible.value.indexOf(item.key) < 0)\n        .flatMap((item) => [\n          { ...item, isGroup: item.children && item.children.length > 0 },\n          ...(item.children || []).map((item) => ({ ...item, grouped: true })),\n        ]);\n\n      menuItems.value.forEach((item) => {\n        item.element.hidden = visible.value.indexOf(item.key) < 0;\n      });\n\n      if (responsiveDropdown) {\n        responsiveDropdown.hidden = menuItems.value.length === visible.value.length;\n      }\n    };\n\n    onMounted(async () => {\n      if (props.priorityMenuEnabled) {\n        await nextTick();\n        initMenuItems();\n        await refreshVisibleMenu();\n        window.addEventListener('resize', refreshVisibleMenu);\n      }\n    });\n\n    onUnmounted(() => {\n      if (props.priorityMenuEnabled) {\n        window.removeEventListener('resize', refreshVisibleMenu);\n      }\n    });\n\n    return {\n      menuWrapper,\n      menuItem,\n      menuItems,\n      responsiveMenuItems,\n      visible,\n      onClick,\n      routeMatches,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonDropdownMenu","NeonLink","NeonIcon","NeonFunctionalColor","NeonSize","props","emit","route","useRoute","menuWrapper","ref","menuItem","menuItems","responsiveMenuItems","visible","getWidth","el","styles","margin","toPriorityMenuItem","key","element","initMenuItems","results","item","index","routeMatches","path","onClick","determineVisibleMenuItems","menuWidth","responsiveMenuWidth","acc","width","availableWidth","refreshVisibleMenu","nextTick","responsiveDropdown","_a","onMounted","onUnmounted"],"mappings":"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"}

package/dist/components/navigation/menu/NeonMenu.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const c=require("./NeonMenu.cjs.js"),e=require("vue"),i=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),u={ref:"menuWrapper",class:"neon-menu__wrapper"},d={class:"neon-menu__item-label"};function p(o,l,m,_,y,v){const s=e.resolveComponent("neon-dropdown-menu"),a=e.resolveComponent("neon-icon"),t=e.resolveComponent("neon-link");return e.openBlock(),e.createElementBlock("nav",u,[e.createElementVNode("ul",{class:e.normalizeClass([[`neon-menu--${o.color}`,`neon-menu--${o.size}`],"neon-menu no-style"]),role:"menubar"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.menu,n=>(e.openBlock(),e.createElementBlock("li",{key:n.key,ref_for:!0,ref:"menuItem",class:e.normalizeClass([{"neon-menu__item--disabled":n.disabled},"neon-menu__item"])},[n.children?(e.openBlock(),e.createBlock(s,{key:`${n.key}DropdownMenu`,class:e.normalizeClass({"router-link-active":o.routeMatches(n.href)}),color:o.color,disabled:n.disabled,icon:n.icon,label:n.label,model:n.children,openOnHover:!n.disabled,size:o.size,"dropdown-style":"text"},null,8,["class","color","disabled","icon","label","model","openOnHover","size"])):(e.openBlock(),e.createBlock(t,{key:`${n.key}Link`,class:e.normalizeClass({"router-link-active":o.routeMatches(n.href)}),href:n.href,"no-style":!0,tabindex:n.disabled?-1:0,"outline-style":"none",role:"menuitem",onClick:r=>!n.disabled&&o.onClick(n.key),onKeydown:[e.withKeys(r=>!n.disabled&&o.onClick(n.key),["enter"]),e.withKeys(e.withModifiers(r=>!n.disabled&&o.onClick(n.key),["prevent"]),["space"])]},{default:e.withCtx(()=>[n.icon?(e.openBlock(),e.createBlock(a,{key:`${n.key}LinkIcon`,name:n.icon,class:"neon-menu__item-icon",color:"neutral"},null,8,["name"])):e.createCommentVNode("",!0),e.createElementVNode("span",d,e.toDisplayString(n.label),1)]),_:2},1032,["class","href","tabindex","onClick","onKeydown"]))],2))),128))],2),e.createVNode(s,{class:e.normalizeClass([{"neon-menu__responsive-menu--hidden":o.responsiveMenuItems.length===0},"neon-menu__responsive-menu"]),color:o.color,indicator:!1,model:o.responsiveMenuItems,openOnHover:!0,size:o.size,"dropdown-style":"text",icon:"ellipsis",placement:"bottom-right",onButtonRef:l[0]||(l[0]=n=>o.responsiveButton=n)},null,8,["class","color","model","size"])],512)}const k=i(c,[["render",p]]);module.exports=k;
+"use strict";const c=require("./NeonMenu.cjs.js"),e=require("vue"),t=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),i={ref:"menuWrapper",class:"neon-menu__wrapper"},d={class:"neon-menu__item-label"};function u(o,k,m,_,y,b){const l=e.resolveComponent("neon-dropdown-menu"),r=e.resolveComponent("neon-icon"),a=e.resolveComponent("neon-link");return e.openBlock(),e.createElementBlock("nav",i,[e.createElementVNode("ul",{class:e.normalizeClass([[`neon-menu--${o.color}`,`neon-menu--${o.size}`],"neon-menu no-style"]),role:"menubar"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.menu,n=>(e.openBlock(),e.createElementBlock("li",{key:n.key,ref_for:!0,ref:"menuItem",class:e.normalizeClass([{"neon-menu__item--disabled":n.disabled},"neon-menu__item"])},[n.children?(e.openBlock(),e.createBlock(l,{key:`${n.key}DropdownMenu`,class:e.normalizeClass({"router-link-active":o.routeMatches(n.href)}),color:o.color,disabled:n.disabled,icon:n.icon,label:n.label,model:n.children,openOnHover:!n.disabled,size:o.size,"dropdown-style":"text"},null,8,["class","color","disabled","icon","label","model","openOnHover","size"])):(e.openBlock(),e.createBlock(a,{key:`${n.key}Link`,class:e.normalizeClass({"router-link-active":o.routeMatches(n.href)}),href:n.href,"no-style":!0,tabindex:n.disabled?-1:0,"outline-style":"none",role:"menuitem",onClick:s=>!n.disabled&&o.onClick(n.key),onKeydown:[e.withKeys(s=>!n.disabled&&o.onClick(n.key),["enter"]),e.withKeys(e.withModifiers(s=>!n.disabled&&o.onClick(n.key),["prevent"]),["space"])]},{default:e.withCtx(()=>[n.icon?(e.openBlock(),e.createBlock(r,{key:`${n.key}LinkIcon`,name:n.icon,class:"neon-menu__item-icon",color:"neutral"},null,8,["name"])):e.createCommentVNode("",!0),e.createElementVNode("span",d,e.toDisplayString(n.label),1)]),_:2},1032,["class","href","tabindex","onClick","onKeydown"]))],2))),128))],2),e.createVNode(l,{class:e.normalizeClass([{"neon-menu__responsive-menu--hidden":o.responsiveMenuItems.length===0},"neon-menu__responsive-menu"]),color:o.color,indicator:!1,model:o.responsiveMenuItems,openOnHover:!0,size:o.size,"dropdown-style":"text",icon:"ellipsis",placement:"bottom-right"},null,8,["class","color","model","size"])],512)}const p=t(c,[["render",u]]);module.exports=p;
 //# sourceMappingURL=NeonMenu.vue.cjs.js.map

package/dist/components/navigation/menu/NeonMenu.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonMenu.vue.cjs.js","sources":["../../../../src/components/navigation/menu/NeonMenu.vue"],"sourcesContent":["<template>\n  <nav ref=\"menuWrapper\" class=\"neon-menu__wrapper\">\n    <ul :class=\"[`neon-menu--${color}`, `neon-menu--${size}`]\" class=\"neon-menu no-style\" role=\"menubar\">\n      <li\n        v-for=\"item in menu\"\n        :key=\"item.key\"\n        ref=\"menuItem\"\n        :class=\"{ 'neon-menu__item--disabled': item.disabled }\"\n        class=\"neon-menu__item\"\n      >\n        <neon-dropdown-menu\n          v-if=\"item.children\"\n          :key=\"`${item.key}DropdownMenu`\"\n          :class=\"{ 'router-link-active': routeMatches(item.href) }\"\n          :color=\"color\"\n          :disabled=\"item.disabled\"\n          :icon=\"item.icon\"\n          :label=\"item.label\"\n          :model=\"item.children\"\n          :openOnHover=\"!item.disabled\"\n          :size=\"size\"\n          dropdown-style=\"text\"\n        />\n        <neon-link\n          v-else\n          :key=\"`${item.key}Link`\"\n          :class=\"{ 'router-link-active': routeMatches(item.href) }\"\n          :href=\"item.href\"\n          :no-style=\"true\"\n          :tabindex=\"item.disabled ? -1 : 0\"\n          outline-style=\"none\"\n          role=\"menuitem\"\n          @click=\"!item.disabled && onClick(item.key)\"\n          @keydown.enter=\"!item.disabled && onClick(item.key)\"\n          @keydown.space.prevent=\"!item.disabled && onClick(item.key)\"\n        >\n          <neon-icon\n            v-if=\"item.icon\"\n            :key=\"`${item.key}LinkIcon`\"\n            :name=\"item.icon\"\n            class=\"neon-menu__item-icon\"\n            color=\"neutral\"\n          />\n          <span class=\"neon-menu__item-label\">{{ item.label }}</span>\n        </neon-link>\n      </li>\n    </ul>\n    <neon-dropdown-menu\n      :class=\"{ 'neon-menu__responsive-menu--hidden': responsiveMenuItems.length === 0 }\"\n      :color=\"color\"\n      :indicator=\"false\"\n      :model=\"responsiveMenuItems\"\n      :openOnHover=\"true\"\n      :size=\"size\"\n      class=\"neon-menu__responsive-menu\"\n      dropdown-style=\"text\"\n      icon=\"ellipsis\"\n      placement=\"bottom-right\"\n      @button-ref=\"responsiveButton = $event\"\n    />\n  </nav>\n</template>\n\n<script lang=\"ts\" src=\"./NeonMenu.ts\" />\n"],"names":["_hoisted_2","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_ctx","_Fragment","_renderList","item","_createBlock","_component_neon_dropdown_menu","_component_neon_link","$event","_withKeys","_withModifiers","_component_neon_icon","_toDisplayString","_createVNode","_cache"],"mappings":"sIACO,IAAI,cAAc,MAAM,sBA0CfA,EAAA,CAAA,MAAM,uBAAuB,+IA1C3C,OAAAC,YAAA,EAAAC,qBA2DM,MA3DNC,EA2DM,CA1DJC,EAAAA,mBA4CK,KAAA,CA5CA,MAAKC,EAAAA,eAAA,CAAA,CAAA,cAAiBC,EAAA,KAAK,GAAA,cAAkBA,EAAA,IAAI,IAAW,oBAAoB,CAAA,EAAC,KAAK,6BACzFJ,EAAAA,mBA0CKK,EAAAA,SAAA,KAAAC,EAAAA,WAzCYF,EAAA,KAARG,kBADTP,EAAAA,mBA0CK,KAAA,CAxCF,IAAKO,EAAK,eACX,IAAI,WACH,MAAKJ,EAAAA,eAAA,CAAA,CAAA,4BAAiCI,EAAK,QAAQ,EAC9C,iBAAiB,CAAA,IAGfA,EAAK,wBADbC,EAAAA,YAYEC,EAAA,CAVC,IAAG,GAAKF,EAAK,GAAG,eAChB,MAAKJ,EAAAA,eAAA,CAAA,qBAA0BC,EAAA,aAAaG,EAAK,IAAI,EAAA,EACrD,MAAOH,EAAA,MACP,SAAUG,EAAK,SACf,KAAMA,EAAK,KACX,MAAOA,EAAK,MACZ,MAAOA,EAAK,SACZ,YAAW,CAAGA,EAAK,SACnB,KAAMH,EAAA,KACP,iBAAe,yGAEjBI,EAAAA,YAqBYE,EAAA,CAnBT,IAAG,GAAKH,EAAK,GAAG,OAChB,MAAKJ,EAAAA,eAAA,CAAA,qBAA0BC,EAAA,aAAaG,EAAK,IAAI,EAAA,EACrD,KAAMA,EAAK,KACX,WAAU,GACV,SAAUA,EAAK,SAAQ,GAAA,EACxB,gBAAc,OACd,KAAK,WACJ,QAAKI,GAAA,CAAGJ,EAAK,UAAYH,EAAA,QAAQG,EAAK,GAAG,EACzC,UAAO,CAASK,EAAAA,SAAAD,GAAA,CAAAJ,EAAK,UAAYH,UAAQG,EAAK,GAAG,EAAA,CAAA,OAAA,CAAA,EACzBK,EAAAA,SAAAC,EAAAA,cAAAF,GAAA,CAAAJ,EAAK,UAAYH,UAAQG,EAAK,GAAG,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,uBAE1D,IAME,CALMA,EAAK,oBADbC,EAAAA,YAMEM,EAAA,CAJC,IAAG,GAAKP,EAAK,GAAG,WAChB,KAAMA,EAAK,KACZ,MAAM,uBACN,MAAM,yDAERL,EAAAA,mBAA2D,OAA3DJ,EAA2DiB,EAAAA,gBAApBR,EAAK,KAAK,EAAA,CAAA,kFAIvDS,EAAAA,YAYEP,EAAA,CAXC,MAAKN,EAAAA,eAAA,CAAA,CAAA,qCAA0CC,EAAA,oBAAoB,YAM9D,4BAA4B,CAAA,EALjC,MAAOA,EAAA,MACP,UAAW,GACX,MAAOA,EAAA,oBACP,YAAa,GACb,KAAMA,EAAA,KAEP,iBAAe,OACf,KAAK,WACL,UAAU,eACT,YAAUa,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAN,GAAEP,EAAA,iBAAmBO"}
+{"version":3,"file":"NeonMenu.vue.cjs.js","sources":["../../../../src/components/navigation/menu/NeonMenu.vue"],"sourcesContent":["<template>\n  <nav ref=\"menuWrapper\" class=\"neon-menu__wrapper\">\n    <ul :class=\"[`neon-menu--${color}`, `neon-menu--${size}`]\" class=\"neon-menu no-style\" role=\"menubar\">\n      <li\n        v-for=\"item in menu\"\n        :key=\"item.key\"\n        ref=\"menuItem\"\n        :class=\"{ 'neon-menu__item--disabled': item.disabled }\"\n        class=\"neon-menu__item\"\n      >\n        <neon-dropdown-menu\n          v-if=\"item.children\"\n          :key=\"`${item.key}DropdownMenu`\"\n          :class=\"{ 'router-link-active': routeMatches(item.href) }\"\n          :color=\"color\"\n          :disabled=\"item.disabled\"\n          :icon=\"item.icon\"\n          :label=\"item.label\"\n          :model=\"item.children\"\n          :openOnHover=\"!item.disabled\"\n          :size=\"size\"\n          dropdown-style=\"text\"\n        />\n        <neon-link\n          v-else\n          :key=\"`${item.key}Link`\"\n          :class=\"{ 'router-link-active': routeMatches(item.href) }\"\n          :href=\"item.href\"\n          :no-style=\"true\"\n          :tabindex=\"item.disabled ? -1 : 0\"\n          outline-style=\"none\"\n          role=\"menuitem\"\n          @click=\"!item.disabled && onClick(item.key)\"\n          @keydown.enter=\"!item.disabled && onClick(item.key)\"\n          @keydown.space.prevent=\"!item.disabled && onClick(item.key)\"\n        >\n          <neon-icon\n            v-if=\"item.icon\"\n            :key=\"`${item.key}LinkIcon`\"\n            :name=\"item.icon\"\n            class=\"neon-menu__item-icon\"\n            color=\"neutral\"\n          />\n          <span class=\"neon-menu__item-label\">{{ item.label }}</span>\n        </neon-link>\n      </li>\n    </ul>\n    <neon-dropdown-menu\n      :class=\"{ 'neon-menu__responsive-menu--hidden': responsiveMenuItems.length === 0 }\"\n      :color=\"color\"\n      :indicator=\"false\"\n      :model=\"responsiveMenuItems\"\n      :openOnHover=\"true\"\n      :size=\"size\"\n      class=\"neon-menu__responsive-menu\"\n      dropdown-style=\"text\"\n      icon=\"ellipsis\"\n      placement=\"bottom-right\"\n    />\n  </nav>\n</template>\n\n<script lang=\"ts\" src=\"./NeonMenu.ts\" />\n"],"names":["_hoisted_2","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_ctx","_Fragment","_renderList","item","_createBlock","_component_neon_dropdown_menu","_component_neon_link","$event","_withKeys","_withModifiers","_component_neon_icon","_toDisplayString","_createVNode"],"mappings":"sIACO,IAAI,cAAc,MAAM,sBA0CfA,EAAA,CAAA,MAAM,uBAAuB,+IA1C3C,OAAAC,YAAA,EAAAC,qBA0DM,MA1DNC,EA0DM,CAzDJC,EAAAA,mBA4CK,KAAA,CA5CA,MAAKC,EAAAA,eAAA,CAAA,CAAA,cAAiBC,EAAA,KAAK,GAAA,cAAkBA,EAAA,IAAI,IAAW,oBAAoB,CAAA,EAAC,KAAK,6BACzFJ,EAAAA,mBA0CKK,EAAAA,SAAA,KAAAC,EAAAA,WAzCYF,EAAA,KAARG,kBADTP,EAAAA,mBA0CK,KAAA,CAxCF,IAAKO,EAAK,eACX,IAAI,WACH,MAAKJ,EAAAA,eAAA,CAAA,CAAA,4BAAiCI,EAAK,QAAQ,EAC9C,iBAAiB,CAAA,IAGfA,EAAK,wBADbC,EAAAA,YAYEC,EAAA,CAVC,IAAG,GAAKF,EAAK,GAAG,eAChB,MAAKJ,EAAAA,eAAA,CAAA,qBAA0BC,EAAA,aAAaG,EAAK,IAAI,EAAA,EACrD,MAAOH,EAAA,MACP,SAAUG,EAAK,SACf,KAAMA,EAAK,KACX,MAAOA,EAAK,MACZ,MAAOA,EAAK,SACZ,YAAW,CAAGA,EAAK,SACnB,KAAMH,EAAA,KACP,iBAAe,yGAEjBI,EAAAA,YAqBYE,EAAA,CAnBT,IAAG,GAAKH,EAAK,GAAG,OAChB,MAAKJ,EAAAA,eAAA,CAAA,qBAA0BC,EAAA,aAAaG,EAAK,IAAI,EAAA,EACrD,KAAMA,EAAK,KACX,WAAU,GACV,SAAUA,EAAK,SAAQ,GAAA,EACxB,gBAAc,OACd,KAAK,WACJ,QAAKI,GAAA,CAAGJ,EAAK,UAAYH,EAAA,QAAQG,EAAK,GAAG,EACzC,UAAO,CAASK,EAAAA,SAAAD,GAAA,CAAAJ,EAAK,UAAYH,UAAQG,EAAK,GAAG,EAAA,CAAA,OAAA,CAAA,EACzBK,EAAAA,SAAAC,EAAAA,cAAAF,GAAA,CAAAJ,EAAK,UAAYH,UAAQG,EAAK,GAAG,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,uBAE1D,IAME,CALMA,EAAK,oBADbC,EAAAA,YAMEM,EAAA,CAJC,IAAG,GAAKP,EAAK,GAAG,WAChB,KAAMA,EAAK,KACZ,MAAM,uBACN,MAAM,yDAERL,EAAAA,mBAA2D,OAA3DJ,EAA2DiB,EAAAA,gBAApBR,EAAK,KAAK,EAAA,CAAA,kFAIvDS,EAAAA,YAWEP,EAAA,CAVC,MAAKN,EAAAA,eAAA,CAAA,CAAA,qCAA0CC,EAAA,oBAAoB,YAM9D,4BAA4B,CAAA,EALjC,MAAOA,EAAA,MACP,UAAW,GACX,MAAOA,EAAA,oBACP,YAAa,GACb,KAAMA,EAAA,KAEP,iBAAe,OACf,KAAK,WACL,UAAU"}

package/dist/components/navigation/menu/NeonMenu.vue.es.js

@@ -1,18 +1,18 @@
-import k from "./NeonMenu.es.js";
-import { resolveComponent as s, openBlock as o, createElementBlock as r, createElementVNode as c, normalizeClass as l, Fragment as f, renderList as _, createBlock as a, withKeys as u, withModifiers as y, withCtx as b, createCommentVNode as h, toDisplayString as v, createVNode as $ } from "vue";
-import w from "../../../_virtual/_plugin-vue_export-helper.es.js";
-const C = {
+import m from "./NeonMenu.es.js";
+import { resolveComponent as r, openBlock as o, createElementBlock as s, createElementVNode as c, normalizeClass as l, Fragment as k, renderList as _, createBlock as a, withKeys as t, withModifiers as f, withCtx as y, createCommentVNode as b, toDisplayString as h, createVNode as v } from "vue";
+import $ from "../../../_virtual/_plugin-vue_export-helper.es.js";
+const w = {
   ref: "menuWrapper",
   class: "neon-menu__wrapper"
-}, z = { class: "neon-menu__item-label" };
-function M(n, i, B, g, I, N) {
-  const d = s("neon-dropdown-menu"), p = s("neon-icon"), m = s("neon-link");
-  return o(), r("nav", C, [
+}, C = { class: "neon-menu__item-label" };
+function z(n, M, g, I, N, B) {
+  const d = r("neon-dropdown-menu"), u = r("neon-icon"), p = r("neon-link");
+  return o(), s("nav", w, [
     c("ul", {
       class: l([[`neon-menu--${n.color}`, `neon-menu--${n.size}`], "neon-menu no-style"]),
       role: "menubar"
     }, [
-      (o(!0), r(f, null, _(n.menu, (e) => (o(), r("li", {
+      (o(!0), s(k, null, _(n.menu, (e) => (o(), s("li", {
         key: e.key,
         ref_for: !0,
         ref: "menuItem",
@@ -29,7 +29,7 @@ function M(n, i, B, g, I, N) {
           openOnHover: !e.disabled,
           size: n.size,
           "dropdown-style": "text"
-        }, null, 8, ["class", "color", "disabled", "icon", "label", "model", "openOnHover", "size"])) : (o(), a(m, {
+        }, null, 8, ["class", "color", "disabled", "icon", "label", "model", "openOnHover", "size"])) : (o(), a(p, {
           key: `${e.key}Link`,
           class: l({ "router-link-active": n.routeMatches(e.href) }),
           href: e.href,
@@ -37,26 +37,26 @@ function M(n, i, B, g, I, N) {
           tabindex: e.disabled ? -1 : 0,
           "outline-style": "none",
           role: "menuitem",
-          onClick: (t) => !e.disabled && n.onClick(e.key),
+          onClick: (i) => !e.disabled && n.onClick(e.key),
           onKeydown: [
-            u((t) => !e.disabled && n.onClick(e.key), ["enter"]),
-            u(y((t) => !e.disabled && n.onClick(e.key), ["prevent"]), ["space"])
+            t((i) => !e.disabled && n.onClick(e.key), ["enter"]),
+            t(f((i) => !e.disabled && n.onClick(e.key), ["prevent"]), ["space"])
           ]
         }, {
-          default: b(() => [
-            e.icon ? (o(), a(p, {
+          default: y(() => [
+            e.icon ? (o(), a(u, {
               key: `${e.key}LinkIcon`,
               name: e.icon,
               class: "neon-menu__item-icon",
               color: "neutral"
-            }, null, 8, ["name"])) : h("", !0),
-            c("span", z, v(e.label), 1)
+            }, null, 8, ["name"])) : b("", !0),
+            c("span", C, h(e.label), 1)
           ]),
           _: 2
         }, 1032, ["class", "href", "tabindex", "onClick", "onKeydown"]))
       ], 2))), 128))
     ], 2),
-    $(d, {
+    v(d, {
       class: l([{ "neon-menu__responsive-menu--hidden": n.responsiveMenuItems.length === 0 }, "neon-menu__responsive-menu"]),
       color: n.color,
       indicator: !1,
@@ -65,12 +65,11 @@ function M(n, i, B, g, I, N) {
       size: n.size,
       "dropdown-style": "text",
       icon: "ellipsis",
-      placement: "bottom-right",
-      onButtonRef: i[0] || (i[0] = (e) => n.responsiveButton = e)
+      placement: "bottom-right"
     }, null, 8, ["class", "color", "model", "size"])
   ], 512);
 }
-const O = /* @__PURE__ */ w(k, [["render", M]]);
+const O = /* @__PURE__ */ $(m, [["render", z]]);
 export {
   O as default
 };

package/dist/components/navigation/menu/NeonMenu.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonMenu.vue.es.js","sources":["../../../../src/components/navigation/menu/NeonMenu.vue"],"sourcesContent":["<template>\n  <nav ref=\"menuWrapper\" class=\"neon-menu__wrapper\">\n    <ul :class=\"[`neon-menu--${color}`, `neon-menu--${size}`]\" class=\"neon-menu no-style\" role=\"menubar\">\n      <li\n        v-for=\"item in menu\"\n        :key=\"item.key\"\n        ref=\"menuItem\"\n        :class=\"{ 'neon-menu__item--disabled': item.disabled }\"\n        class=\"neon-menu__item\"\n      >\n        <neon-dropdown-menu\n          v-if=\"item.children\"\n          :key=\"`${item.key}DropdownMenu`\"\n          :class=\"{ 'router-link-active': routeMatches(item.href) }\"\n          :color=\"color\"\n          :disabled=\"item.disabled\"\n          :icon=\"item.icon\"\n          :label=\"item.label\"\n          :model=\"item.children\"\n          :openOnHover=\"!item.disabled\"\n          :size=\"size\"\n          dropdown-style=\"text\"\n        />\n        <neon-link\n          v-else\n          :key=\"`${item.key}Link`\"\n          :class=\"{ 'router-link-active': routeMatches(item.href) }\"\n          :href=\"item.href\"\n          :no-style=\"true\"\n          :tabindex=\"item.disabled ? -1 : 0\"\n          outline-style=\"none\"\n          role=\"menuitem\"\n          @click=\"!item.disabled && onClick(item.key)\"\n          @keydown.enter=\"!item.disabled && onClick(item.key)\"\n          @keydown.space.prevent=\"!item.disabled && onClick(item.key)\"\n        >\n          <neon-icon\n            v-if=\"item.icon\"\n            :key=\"`${item.key}LinkIcon`\"\n            :name=\"item.icon\"\n            class=\"neon-menu__item-icon\"\n            color=\"neutral\"\n          />\n          <span class=\"neon-menu__item-label\">{{ item.label }}</span>\n        </neon-link>\n      </li>\n    </ul>\n    <neon-dropdown-menu\n      :class=\"{ 'neon-menu__responsive-menu--hidden': responsiveMenuItems.length === 0 }\"\n      :color=\"color\"\n      :indicator=\"false\"\n      :model=\"responsiveMenuItems\"\n      :openOnHover=\"true\"\n      :size=\"size\"\n      class=\"neon-menu__responsive-menu\"\n      dropdown-style=\"text\"\n      icon=\"ellipsis\"\n      placement=\"bottom-right\"\n      @button-ref=\"responsiveButton = $event\"\n    />\n  </nav>\n</template>\n\n<script lang=\"ts\" src=\"./NeonMenu.ts\" />\n"],"names":["_hoisted_2","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_ctx","_Fragment","_renderList","item","_createBlock","_component_neon_dropdown_menu","_component_neon_link","$event","_withKeys","_withModifiers","_component_neon_icon","_toDisplayString","_createVNode","_cache"],"mappings":";;;;EACO,KAAI;AAAA,EAAc,OAAM;GA0CfA,IAAA,EAAA,OAAM,wBAAuB;;;AA1C3C,SAAAC,EAAA,GAAAC,EA2DM,OA3DNC,GA2DM;AAAA,IA1DJC,EA4CK,MAAA;AAAA,MA5CA,OAAKC,EAAA,CAAA,CAAA,cAAiBC,EAAA,KAAK,IAAA,cAAkBA,EAAA,IAAI,KAAW,oBAAoB,CAAA;AAAA,MAAC,MAAK;AAAA;cACzFJ,EA0CKK,GAAA,MAAAC,EAzCYF,EAAA,MAAI,CAAZG,YADTP,EA0CK,MAAA;AAAA,QAxCF,KAAKO,EAAK;AAAA;QACX,KAAI;AAAA,QACH,OAAKJ,EAAA,CAAA,EAAA,6BAAiCI,EAAK,SAAQ,GAC9C,iBAAiB,CAAA;AAAA;QAGfA,EAAK,iBADbC,EAYEC,GAAA;AAAA,UAVC,KAAG,GAAKF,EAAK,GAAG;AAAA,UAChB,OAAKJ,EAAA,EAAA,sBAA0BC,EAAA,aAAaG,EAAK,IAAI,GAAA;AAAA,UACrD,OAAOH,EAAA;AAAA,UACP,UAAUG,EAAK;AAAA,UACf,MAAMA,EAAK;AAAA,UACX,OAAOA,EAAK;AAAA,UACZ,OAAOA,EAAK;AAAA,UACZ,aAAW,CAAGA,EAAK;AAAA,UACnB,MAAMH,EAAA;AAAA,UACP,kBAAe;AAAA,8GAEjBI,EAqBYE,GAAA;AAAA,UAnBT,KAAG,GAAKH,EAAK,GAAG;AAAA,UAChB,OAAKJ,EAAA,EAAA,sBAA0BC,EAAA,aAAaG,EAAK,IAAI,GAAA;AAAA,UACrD,MAAMA,EAAK;AAAA,UACX,YAAU;AAAA,UACV,UAAUA,EAAK,WAAQ,KAAA;AAAA,UACxB,iBAAc;AAAA,UACd,MAAK;AAAA,UACJ,SAAK,CAAAI,MAAA,CAAGJ,EAAK,YAAYH,EAAA,QAAQG,EAAK,GAAG;AAAA,UACzC,WAAO;AAAA,YAASK,EAAA,CAAAD,MAAA,CAAAJ,EAAK,YAAYH,UAAQG,EAAK,GAAG,GAAA,CAAA,OAAA,CAAA;AAAA,YACzBK,EAAAC,EAAA,CAAAF,MAAA,CAAAJ,EAAK,YAAYH,UAAQG,EAAK,GAAG,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;;qBAE1D,MAME;AAAA,YALMA,EAAK,aADbC,EAMEM,GAAA;AAAA,cAJC,KAAG,GAAKP,EAAK,GAAG;AAAA,cAChB,MAAMA,EAAK;AAAA,cACZ,OAAM;AAAA,cACN,OAAM;AAAA;YAERL,EAA2D,QAA3DJ,GAA2DiB,EAApBR,EAAK,KAAK,GAAA,CAAA;AAAA;;;;;IAIvDS,EAYEP,GAAA;AAAA,MAXC,OAAKN,EAAA,CAAA,EAAA,sCAA0CC,EAAA,oBAAoB,gBAM9D,4BAA4B,CAAA;AAAA,MALjC,OAAOA,EAAA;AAAA,MACP,WAAW;AAAA,MACX,OAAOA,EAAA;AAAA,MACP,aAAa;AAAA,MACb,MAAMA,EAAA;AAAA,MAEP,kBAAe;AAAA,MACf,MAAK;AAAA,MACL,WAAU;AAAA,MACT,aAAUa,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAN,MAAEP,EAAA,mBAAmBO;AAAA;;;;"}
+{"version":3,"file":"NeonMenu.vue.es.js","sources":["../../../../src/components/navigation/menu/NeonMenu.vue"],"sourcesContent":["<template>\n  <nav ref=\"menuWrapper\" class=\"neon-menu__wrapper\">\n    <ul :class=\"[`neon-menu--${color}`, `neon-menu--${size}`]\" class=\"neon-menu no-style\" role=\"menubar\">\n      <li\n        v-for=\"item in menu\"\n        :key=\"item.key\"\n        ref=\"menuItem\"\n        :class=\"{ 'neon-menu__item--disabled': item.disabled }\"\n        class=\"neon-menu__item\"\n      >\n        <neon-dropdown-menu\n          v-if=\"item.children\"\n          :key=\"`${item.key}DropdownMenu`\"\n          :class=\"{ 'router-link-active': routeMatches(item.href) }\"\n          :color=\"color\"\n          :disabled=\"item.disabled\"\n          :icon=\"item.icon\"\n          :label=\"item.label\"\n          :model=\"item.children\"\n          :openOnHover=\"!item.disabled\"\n          :size=\"size\"\n          dropdown-style=\"text\"\n        />\n        <neon-link\n          v-else\n          :key=\"`${item.key}Link`\"\n          :class=\"{ 'router-link-active': routeMatches(item.href) }\"\n          :href=\"item.href\"\n          :no-style=\"true\"\n          :tabindex=\"item.disabled ? -1 : 0\"\n          outline-style=\"none\"\n          role=\"menuitem\"\n          @click=\"!item.disabled && onClick(item.key)\"\n          @keydown.enter=\"!item.disabled && onClick(item.key)\"\n          @keydown.space.prevent=\"!item.disabled && onClick(item.key)\"\n        >\n          <neon-icon\n            v-if=\"item.icon\"\n            :key=\"`${item.key}LinkIcon`\"\n            :name=\"item.icon\"\n            class=\"neon-menu__item-icon\"\n            color=\"neutral\"\n          />\n          <span class=\"neon-menu__item-label\">{{ item.label }}</span>\n        </neon-link>\n      </li>\n    </ul>\n    <neon-dropdown-menu\n      :class=\"{ 'neon-menu__responsive-menu--hidden': responsiveMenuItems.length === 0 }\"\n      :color=\"color\"\n      :indicator=\"false\"\n      :model=\"responsiveMenuItems\"\n      :openOnHover=\"true\"\n      :size=\"size\"\n      class=\"neon-menu__responsive-menu\"\n      dropdown-style=\"text\"\n      icon=\"ellipsis\"\n      placement=\"bottom-right\"\n    />\n  </nav>\n</template>\n\n<script lang=\"ts\" src=\"./NeonMenu.ts\" />\n"],"names":["_hoisted_2","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_ctx","_Fragment","_renderList","item","_createBlock","_component_neon_dropdown_menu","_component_neon_link","$event","_withKeys","_withModifiers","_component_neon_icon","_toDisplayString","_createVNode"],"mappings":";;;;EACO,KAAI;AAAA,EAAc,OAAM;GA0CfA,IAAA,EAAA,OAAM,wBAAuB;;;AA1C3C,SAAAC,EAAA,GAAAC,EA0DM,OA1DNC,GA0DM;AAAA,IAzDJC,EA4CK,MAAA;AAAA,MA5CA,OAAKC,EAAA,CAAA,CAAA,cAAiBC,EAAA,KAAK,IAAA,cAAkBA,EAAA,IAAI,KAAW,oBAAoB,CAAA;AAAA,MAAC,MAAK;AAAA;cACzFJ,EA0CKK,GAAA,MAAAC,EAzCYF,EAAA,MAAI,CAAZG,YADTP,EA0CK,MAAA;AAAA,QAxCF,KAAKO,EAAK;AAAA;QACX,KAAI;AAAA,QACH,OAAKJ,EAAA,CAAA,EAAA,6BAAiCI,EAAK,SAAQ,GAC9C,iBAAiB,CAAA;AAAA;QAGfA,EAAK,iBADbC,EAYEC,GAAA;AAAA,UAVC,KAAG,GAAKF,EAAK,GAAG;AAAA,UAChB,OAAKJ,EAAA,EAAA,sBAA0BC,EAAA,aAAaG,EAAK,IAAI,GAAA;AAAA,UACrD,OAAOH,EAAA;AAAA,UACP,UAAUG,EAAK;AAAA,UACf,MAAMA,EAAK;AAAA,UACX,OAAOA,EAAK;AAAA,UACZ,OAAOA,EAAK;AAAA,UACZ,aAAW,CAAGA,EAAK;AAAA,UACnB,MAAMH,EAAA;AAAA,UACP,kBAAe;AAAA,8GAEjBI,EAqBYE,GAAA;AAAA,UAnBT,KAAG,GAAKH,EAAK,GAAG;AAAA,UAChB,OAAKJ,EAAA,EAAA,sBAA0BC,EAAA,aAAaG,EAAK,IAAI,GAAA;AAAA,UACrD,MAAMA,EAAK;AAAA,UACX,YAAU;AAAA,UACV,UAAUA,EAAK,WAAQ,KAAA;AAAA,UACxB,iBAAc;AAAA,UACd,MAAK;AAAA,UACJ,SAAK,CAAAI,MAAA,CAAGJ,EAAK,YAAYH,EAAA,QAAQG,EAAK,GAAG;AAAA,UACzC,WAAO;AAAA,YAASK,EAAA,CAAAD,MAAA,CAAAJ,EAAK,YAAYH,UAAQG,EAAK,GAAG,GAAA,CAAA,OAAA,CAAA;AAAA,YACzBK,EAAAC,EAAA,CAAAF,MAAA,CAAAJ,EAAK,YAAYH,UAAQG,EAAK,GAAG,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;;qBAE1D,MAME;AAAA,YALMA,EAAK,aADbC,EAMEM,GAAA;AAAA,cAJC,KAAG,GAAKP,EAAK,GAAG;AAAA,cAChB,MAAMA,EAAK;AAAA,cACZ,OAAM;AAAA,cACN,OAAM;AAAA;YAERL,EAA2D,QAA3DJ,GAA2DiB,EAApBR,EAAK,KAAK,GAAA,CAAA;AAAA;;;;;IAIvDS,EAWEP,GAAA;AAAA,MAVC,OAAKN,EAAA,CAAA,EAAA,sCAA0CC,EAAA,oBAAoB,gBAM9D,4BAA4B,CAAA;AAAA,MALjC,OAAOA,EAAA;AAAA,MACP,WAAW;AAAA,MACX,OAAOA,EAAA;AAAA,MACP,aAAa;AAAA,MACb,MAAMA,EAAA;AAAA,MAEP,kBAAe;AAAA,MACf,MAAK;AAAA,MACL,WAAU;AAAA;;;;"}

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

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

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

@@ -1,19 +1,19 @@
-import { defineComponent as w, ref as i, computed as y, onMounted as g, onUnmounted as S, watch as C } from "vue";
-import { NeonDropdownPlacement as b } from "../../../common/enums/NeonDropdownPlacement.es.js";
+import { defineComponent as w, ref as i, computed as y, onMounted as g, onUnmounted as S } from "vue";
+import { NeonDropdownPlacement as C } from "../../../common/enums/NeonDropdownPlacement.es.js";
 import { NeonDropdownPlacementUtils as B } from "../../../common/utils/NeonDropdownPlacementUtils.es.js";
-import { NeonClosableUtils as N } from "../../../common/utils/NeonClosableUtils.es.js";
-import { NeonSize as L } from "../../../common/enums/NeonSize.es.js";
-import { NeonFunctionalColor as V } from "../../../common/enums/NeonFunctionalColor.es.js";
-import { NeonDropdownStyle as E } from "../../../common/enums/NeonDropdownStyle.es.js";
-import O from "../badge/NeonBadge.vue.es.js";
-import P from "../../user-input/button/NeonButton.vue.es.js";
-import z from "../expansion-indicator/NeonExpansionIndicator.vue.es.js";
+import { NeonClosableUtils as b } from "../../../common/utils/NeonClosableUtils.es.js";
+import { NeonSize as N } from "../../../common/enums/NeonSize.es.js";
+import { NeonFunctionalColor as L } from "../../../common/enums/NeonFunctionalColor.es.js";
+import { NeonDropdownStyle as V } from "../../../common/enums/NeonDropdownStyle.es.js";
+import E from "../badge/NeonBadge.vue.es.js";
+import O from "../../user-input/button/NeonButton.vue.es.js";
+import P from "../expansion-indicator/NeonExpansionIndicator.vue.es.js";
 const q = w({
   name: "NeonDropdown",
   components: {
-    NeonBadge: O,
-    NeonButton: P,
-    NeonExpansionIndicator: z
+    NeonBadge: E,
+    NeonButton: O,
+    NeonExpansionIndicator: P
   },
   props: {
     /**
@@ -55,11 +55,11 @@ const q = w({
     /**
      * The size of the dropdown button - Small, Medium or Large.
      */
-    size: { type: String, default: L.Medium },
+    size: { type: String, default: N.Medium },
     /**
      * The color of the dropdown button
      */
-    color: { type: String, default: V.LowContrast },
+    color: { type: String, default: L.LowContrast },
     /**
      * The alternate color of the dropdown button (for gradient buttons).
      */
@@ -67,11 +67,11 @@ const q = w({
     /**
      * The style of the dropdown button
      */
-    dropdownStyle: { type: String, default: E.SolidButton },
+    dropdownStyle: { type: String, default: V.SolidButton },
     /**
      * Placement of the dropdown contents.
      */
-    placement: { type: String, default: b.BottomLeft },
+    placement: { type: String, default: C.BottomLeft },
     /**
      * Restrict placement to within this container.
      */
@@ -101,51 +101,42 @@ const q = w({
      * Emitted when the dropdown button is focussed.
      * @type {void}
      */
-    "focus",
-    /**
-     * emitted on initialisation
-     * @type {HTMLElement} the reference to the HTMLElement for the dropdown menu button.
-     */
-    "button-ref"
+    "focus"
   ],
-  setup(e, { emit: n, expose: c }) {
-    const r = i(null), o = i(null), a = i(e.placement), u = i(null), d = () => {
-      n("update:modelValue", !1);
+  setup(e, { emit: o, expose: c }) {
+    const u = i(null), n = i(null), l = i(e.placement), a = i(null), d = () => {
+      o("update:modelValue", !1);
     }, m = () => {
       e.modelValue && d();
     }, t = () => {
-      if (e.modelValue && r.value && o.value) {
-        const l = a.value;
-        a.value = B.calculatePlacement(
-          r.value,
-          o.value,
+      if (e.modelValue && u.value && n.value) {
+        const r = l.value;
+        l.value = B.calculatePlacement(
+          u.value,
+          n.value,
           e.placement,
           e.placementContainer
-        ), l !== a.value && n("dropdown-placement", a.value);
+        ), r !== l.value && o("dropdown-placement", l.value);
       }
     }, s = () => {
-      !e.disabled && !e.openOnHover && (n("update:modelValue", !e.modelValue), setTimeout(t));
+      !e.disabled && !e.openOnHover && (o("update:modelValue", !e.modelValue), setTimeout(t));
     }, f = y(() => {
-      var l;
-      return ((l = e.dropdownStyle) == null ? void 0 : l.indexOf("badge")) === -1;
+      var r;
+      return ((r = e.dropdownStyle) == null ? void 0 : r.indexOf("badge")) === -1;
     }), p = () => {
-      n("blur");
+      o("blur");
     }, v = () => {
-      n("focus");
+      o("focus");
     };
     return g(() => {
-      !e.openOnHover && o.value && (u.value = new N(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 && n.value && (a.value = new b(n.value, m)), window.addEventListener("resize", t, { passive: !0 }), window.addEventListener("scroll", t, { passive: !0 }), e.placementContainer && e.placementContainer.addEventListener("scroll", t, { passive: !0 });
     }), S(() => {
-      e.openOnHover || u.value && u.value.destroy(), window.removeEventListener("resize", t), window.removeEventListener("scroll", t), e.placementContainer && e.placementContainer.removeEventListener("scroll", t);
-    }), C(
-      () => r.value,
-      (l) => n("button-ref", l),
-      { immediate: !0 }
-    ), c({ dropdownContent: o }), {
-      dropdownButton: r,
-      dropdownContent: o,
-      dropdownPlacement: a,
-      closableUtils: u,
+      e.openOnHover || a.value && a.value.destroy(), window.removeEventListener("resize", t), window.removeEventListener("scroll", t), e.placementContainer && e.placementContainer.removeEventListener("scroll", t);
+    }), c({ dropdownContent: n }), {
+      dropdownButton: u,
+      dropdownContent: n,
+      dropdownPlacement: l,
+      closableUtils: a,
       isButtonStyle: f,
       onClose: d,
       close: m,