@aotearoan/neon 21.0.0 → 21.0.2

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

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

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-button\"\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-button\"\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      @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;;;;"}

package/dist/components/presentation/badge/NeonBadge.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const l=require("vue"),r=require("../../../common/enums/NeonSize.cjs.js"),e=require("../../../common/enums/NeonFunctionalColor.cjs.js"),s=require("../icon/NeonIcon.vue.cjs.js"),d=require("../../../common/utils/NeonJazziconUtils.cjs.js"),g=require("../../../common/utils/NeonColorUtils.cjs.js"),m=l.defineComponent({name:"NeonBadge",components:{NeonIcon:s},props:{label:{type:String,default:null},image:{type:String,default:null},icon:{type:String,default:null},circular:{type:Boolean,default:!1},size:{type:String,default:r.NeonSize.Medium},color:{type:String,default:e.NeonFunctionalColor.LowContrast},alternateColor:{type:String,default:null},disabled:{type:Boolean,default:!1},jazziconId:{type:String,default:null},imageAlt:{type:String,default:"Badge"}},setup(n){const o=a=>{let t=getComputedStyle(document.documentElement).getPropertyValue(`--neon-rgb-${a}-l1`);t.length===0&&(t="0, 0, 0");const u=t.trim().split(", ").map(c=>+c);return g.NeonColorUtils.rgbToHex(u)},i=l.computed(()=>["#000000",o(e.NeonFunctionalColor.Brand),o(e.NeonFunctionalColor.Primary),o(e.NeonFunctionalColor.Info),o(e.NeonFunctionalColor.Success),o(e.NeonFunctionalColor.Warn),o(e.NeonFunctionalColor.Error)]);return{svg:l.computed(()=>n.jazziconId?d.NeonJazziconUtils.genSvg(i.value,n.jazziconId,n.size===r.NeonSize.Small?32:n.size===r.NeonSize.Medium?40:48):null)}}});module.exports=m;
+"use strict";const l=require("vue"),e=require("../../../common/enums/NeonFunctionalColor.cjs.js"),s=require("../icon/NeonIcon.vue.cjs.js"),d=require("../../../common/utils/NeonJazziconUtils.cjs.js"),g=require("../../../common/utils/NeonColorUtils.cjs.js"),r=require("../../../common/enums/NeonBadgeSize.cjs.js"),m=l.defineComponent({name:"NeonBadge",components:{NeonIcon:s},props:{label:{type:String,default:null},image:{type:String,default:null},icon:{type:String,default:null},circular:{type:Boolean,default:!1},size:{type:String,default:r.NeonBadgeSize.Medium},color:{type:String,default:e.NeonFunctionalColor.LowContrast},alternateColor:{type:String,default:null},disabled:{type:Boolean,default:!1},jazziconId:{type:String,default:null},imageAlt:{type:String,default:"Badge"}},setup(n){const o=a=>{let t=getComputedStyle(document.documentElement).getPropertyValue(`--neon-rgb-${a}-l1`);t.length===0&&(t="0, 0, 0");const u=t.trim().split(", ").map(c=>+c);return g.NeonColorUtils.rgbToHex(u)},i=l.computed(()=>["#000000",o(e.NeonFunctionalColor.Brand),o(e.NeonFunctionalColor.Primary),o(e.NeonFunctionalColor.Info),o(e.NeonFunctionalColor.Success),o(e.NeonFunctionalColor.Warn),o(e.NeonFunctionalColor.Error)]);return{svg:l.computed(()=>n.jazziconId?d.NeonJazziconUtils.genSvg(i.value,n.jazziconId,n.size===r.NeonBadgeSize.Small?32:n.size===r.NeonBadgeSize.Medium?40:48):null)}}});module.exports=m;
 //# sourceMappingURL=NeonBadge.cjs.js.map

package/dist/components/presentation/badge/NeonBadge.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonBadge.cjs.js","sources":["../../../../src/components/presentation/badge/NeonBadge.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { NeonJazziconUtils } from '@/common/utils/NeonJazziconUtils';\nimport { NeonColorUtils } from '@/common/utils/NeonColorUtils';\n\n/**\n * A badge is a small square or circular component for representing user avatars. These can be in the form of an image, an icon or a two character string (e.g. the user's initials).\n */\nexport default defineComponent({\n  name: 'NeonBadge',\n  components: {\n    NeonIcon,\n  },\n  props: {\n    /**\n     * The two character <em>initials</em> to display on the badge.\n     */\n    label: { type: String, default: null },\n    /**\n     * URL of the image to display on the badge.\n     */\n    image: { type: String, default: null },\n    /**\n     * An icon to display on the badge.\n     */\n    icon: { type: String, default: null },\n    /**\n     * If true, render the badge as a circle, instead of a square.\n     */\n    circular: { type: Boolean, default: false },\n    /**\n     * The size of the badge - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The color of the badge. This is one of the provided NeonFunctionalColors.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * Alternate color for creating gradient badges. NOTE: can also be the same color as 'color'.\n     */\n    alternateColor: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Display the badge in the disable style\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Apply the generated Jazzicon style based on the unique identified provided (e.g. a wallet address, name, etc)\n     */\n    jazziconId: { type: String, default: null },\n    /**\n     * Badge image alt text.\n     */\n    imageAlt: { type: String, default: 'Badge' },\n  },\n  setup(props) {\n    const getColor = (key: NeonFunctionalColor) => {\n      let colorString = getComputedStyle(document.documentElement).getPropertyValue(`--neon-rgb-${key}-l1`);\n      if (colorString.length === 0) {\n        colorString = '0, 0, 0';\n      }\n      const colorRgb = colorString\n        .trim()\n        .split(', ')\n        .map((str) => +str);\n      return NeonColorUtils.rgbToHex(colorRgb);\n    };\n\n    const palette = computed(() => [\n      '#000000',\n      getColor(NeonFunctionalColor.Brand),\n      getColor(NeonFunctionalColor.Primary),\n      getColor(NeonFunctionalColor.Info),\n      getColor(NeonFunctionalColor.Success),\n      getColor(NeonFunctionalColor.Warn),\n      getColor(NeonFunctionalColor.Error),\n    ]);\n\n    const svg = computed(() =>\n      props.jazziconId\n        ? NeonJazziconUtils.genSvg(\n            palette.value,\n            props.jazziconId,\n            props.size === NeonSize.Small ? 32 : props.size === NeonSize.Medium ? 40 : 48,\n          )\n        : null,\n    );\n\n    return {\n      svg,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonSize","NeonFunctionalColor","props","getColor","key","colorString","colorRgb","str","NeonColorUtils","palette","computed","NeonJazziconUtils"],"mappings":"mTAUAA,EAAeC,kBAAgB,CAC7B,KAAM,YACN,WAAY,CACV,SAAAC,CAAA,EAEF,MAAO,CAIL,MAAO,CAAE,KAAM,OAAQ,QAAS,IAAA,EAIhC,MAAO,CAAE,KAAM,OAAQ,QAAS,IAAA,EAIhC,KAAM,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI/B,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,KAAM,CAAE,KAAM,OAA0B,QAASC,EAAAA,SAAS,MAAA,EAI1D,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,WAAA,EAIjF,eAAgB,CAAE,KAAM,OAAqC,QAAS,IAAA,EAItE,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,WAAY,CAAE,KAAM,OAAQ,QAAS,IAAA,EAIrC,SAAU,CAAE,KAAM,OAAQ,QAAS,OAAA,CAAQ,EAE7C,MAAMC,EAAO,CACX,MAAMC,EAAYC,GAA6B,CAC7C,IAAIC,EAAc,iBAAiB,SAAS,eAAe,EAAE,iBAAiB,cAAcD,CAAG,KAAK,EAChGC,EAAY,SAAW,IACzBA,EAAc,WAEhB,MAAMC,EAAWD,EACd,KAAA,EACA,MAAM,IAAI,EACV,IAAKE,GAAQ,CAACA,CAAG,EACpB,OAAOC,EAAAA,eAAe,SAASF,CAAQ,CACzC,EAEMG,EAAUC,EAAAA,SAAS,IAAM,CAC7B,UACAP,EAASF,EAAAA,oBAAoB,KAAK,EAClCE,EAASF,EAAAA,oBAAoB,OAAO,EACpCE,EAASF,EAAAA,oBAAoB,IAAI,EACjCE,EAASF,EAAAA,oBAAoB,OAAO,EACpCE,EAASF,EAAAA,oBAAoB,IAAI,EACjCE,EAASF,EAAAA,oBAAoB,KAAK,CAAA,CACnC,EAYD,MAAO,CACL,IAXUS,EAAAA,SAAS,IACnBR,EAAM,WACFS,EAAAA,kBAAkB,OAChBF,EAAQ,MACRP,EAAM,WACNA,EAAM,OAASF,EAAAA,SAAS,MAAQ,GAAKE,EAAM,OAASF,EAAAA,SAAS,OAAS,GAAK,EAAA,EAE7E,IAAA,CAIJ,CAEJ,CACF,CAAC"}
+{"version":3,"file":"NeonBadge.cjs.js","sources":["../../../../src/components/presentation/badge/NeonBadge.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { NeonJazziconUtils } from '@/common/utils/NeonJazziconUtils';\nimport { NeonColorUtils } from '@/common/utils/NeonColorUtils';\nimport { NeonBadgeSize } from '@/common/enums/NeonBadgeSize';\n\n/**\n * A badge is a small square or circular component for representing user avatars. These can be in the form of an image, an icon or a two character string (e.g. the user's initials).\n */\nexport default defineComponent({\n  name: 'NeonBadge',\n  components: {\n    NeonIcon,\n  },\n  props: {\n    /**\n     * The two character <em>initials</em> to display on the badge.\n     */\n    label: { type: String, default: null },\n    /**\n     * URL of the image to display on the badge.\n     */\n    image: { type: String, default: null },\n    /**\n     * An icon to display on the badge.\n     */\n    icon: { type: String, default: null },\n    /**\n     * If true, render the badge as a circle, instead of a square.\n     */\n    circular: { type: Boolean, default: false },\n    /**\n     * The size of the badge - s, m, l, xl, xxl.\n     */\n    size: { type: String as () => NeonBadgeSize, default: NeonBadgeSize.Medium },\n    /**\n     * The color of the badge. This is one of the provided NeonFunctionalColors.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * Alternate color for creating gradient badges. NOTE: can also be the same color as 'color'.\n     */\n    alternateColor: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Display the badge in the disable style\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Apply the generated Jazzicon style based on the unique identified provided (e.g. a wallet address, name, etc)\n     */\n    jazziconId: { type: String, default: null },\n    /**\n     * Badge image alt text.\n     */\n    imageAlt: { type: String, default: 'Badge' },\n  },\n  setup(props) {\n    const getColor = (key: NeonFunctionalColor) => {\n      let colorString = getComputedStyle(document.documentElement).getPropertyValue(`--neon-rgb-${key}-l1`);\n      if (colorString.length === 0) {\n        colorString = '0, 0, 0';\n      }\n      const colorRgb = colorString\n        .trim()\n        .split(', ')\n        .map((str) => +str);\n      return NeonColorUtils.rgbToHex(colorRgb);\n    };\n\n    const palette = computed(() => [\n      '#000000',\n      getColor(NeonFunctionalColor.Brand),\n      getColor(NeonFunctionalColor.Primary),\n      getColor(NeonFunctionalColor.Info),\n      getColor(NeonFunctionalColor.Success),\n      getColor(NeonFunctionalColor.Warn),\n      getColor(NeonFunctionalColor.Error),\n    ]);\n\n    const svg = computed(() =>\n      props.jazziconId\n        ? NeonJazziconUtils.genSvg(\n            palette.value,\n            props.jazziconId,\n            props.size === NeonBadgeSize.Small ? 32 : props.size === NeonBadgeSize.Medium ? 40 : 48,\n          )\n        : null,\n    );\n\n    return {\n      svg,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonBadgeSize","NeonFunctionalColor","props","getColor","key","colorString","colorRgb","str","NeonColorUtils","palette","computed","NeonJazziconUtils"],"mappings":"wTAUAA,EAAeC,kBAAgB,CAC7B,KAAM,YACN,WAAY,CACV,SAAAC,CAAA,EAEF,MAAO,CAIL,MAAO,CAAE,KAAM,OAAQ,QAAS,IAAA,EAIhC,MAAO,CAAE,KAAM,OAAQ,QAAS,IAAA,EAIhC,KAAM,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI/B,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,KAAM,CAAE,KAAM,OAA+B,QAASC,EAAAA,cAAc,MAAA,EAIpE,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,WAAA,EAIjF,eAAgB,CAAE,KAAM,OAAqC,QAAS,IAAA,EAItE,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,WAAY,CAAE,KAAM,OAAQ,QAAS,IAAA,EAIrC,SAAU,CAAE,KAAM,OAAQ,QAAS,OAAA,CAAQ,EAE7C,MAAMC,EAAO,CACX,MAAMC,EAAYC,GAA6B,CAC7C,IAAIC,EAAc,iBAAiB,SAAS,eAAe,EAAE,iBAAiB,cAAcD,CAAG,KAAK,EAChGC,EAAY,SAAW,IACzBA,EAAc,WAEhB,MAAMC,EAAWD,EACd,KAAA,EACA,MAAM,IAAI,EACV,IAAKE,GAAQ,CAACA,CAAG,EACpB,OAAOC,EAAAA,eAAe,SAASF,CAAQ,CACzC,EAEMG,EAAUC,EAAAA,SAAS,IAAM,CAC7B,UACAP,EAASF,EAAAA,oBAAoB,KAAK,EAClCE,EAASF,EAAAA,oBAAoB,OAAO,EACpCE,EAASF,EAAAA,oBAAoB,IAAI,EACjCE,EAASF,EAAAA,oBAAoB,OAAO,EACpCE,EAASF,EAAAA,oBAAoB,IAAI,EACjCE,EAASF,EAAAA,oBAAoB,KAAK,CAAA,CACnC,EAYD,MAAO,CACL,IAXUS,EAAAA,SAAS,IACnBR,EAAM,WACFS,EAAAA,kBAAkB,OAChBF,EAAQ,MACRP,EAAM,WACNA,EAAM,OAASF,EAAAA,cAAc,MAAQ,GAAKE,EAAM,OAASF,EAAAA,cAAc,OAAS,GAAK,EAAA,EAEvF,IAAA,CAIJ,CAEJ,CACF,CAAC"}

package/dist/components/presentation/badge/NeonBadge.es.js

@@ -1,13 +1,13 @@
 import { defineComponent as d, computed as r } from "vue";
-import { NeonSize as l } from "../../../common/enums/NeonSize.es.js";
 import { NeonFunctionalColor as e } from "../../../common/enums/NeonFunctionalColor.es.js";
-import c from "../icon/NeonIcon.vue.es.js";
-import { NeonJazziconUtils as g } from "../../../common/utils/NeonJazziconUtils.es.js";
+import g from "../icon/NeonIcon.vue.es.js";
+import { NeonJazziconUtils as c } from "../../../common/utils/NeonJazziconUtils.es.js";
 import { NeonColorUtils as f } from "../../../common/utils/NeonColorUtils.es.js";
-const b = d({
+import { NeonBadgeSize as l } from "../../../common/enums/NeonBadgeSize.es.js";
+const N = d({
   name: "NeonBadge",
   components: {
-    NeonIcon: c
+    NeonIcon: g
   },
   props: {
     /**
@@ -27,7 +27,7 @@ const b = d({
      */
     circular: { type: Boolean, default: !1 },
     /**
-     * The size of the badge - Small, Medium or Large.
+     * The size of the badge - s, m, l, xl, xxl.
      */
     size: { type: String, default: l.Medium },
     /**
@@ -68,7 +68,7 @@ const b = d({
     ]);
     return {
       svg: r(
-        () => o.jazziconId ? g.genSvg(
+        () => o.jazziconId ? c.genSvg(
           a.value,
           o.jazziconId,
           o.size === l.Small ? 32 : o.size === l.Medium ? 40 : 48
@@ -78,6 +78,6 @@ const b = d({
   }
 });
 export {
-  b as default
+  N as default
 };
 //# sourceMappingURL=NeonBadge.es.js.map

package/dist/components/presentation/badge/NeonBadge.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonBadge.es.js","sources":["../../../../src/components/presentation/badge/NeonBadge.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { NeonJazziconUtils } from '@/common/utils/NeonJazziconUtils';\nimport { NeonColorUtils } from '@/common/utils/NeonColorUtils';\n\n/**\n * A badge is a small square or circular component for representing user avatars. These can be in the form of an image, an icon or a two character string (e.g. the user's initials).\n */\nexport default defineComponent({\n  name: 'NeonBadge',\n  components: {\n    NeonIcon,\n  },\n  props: {\n    /**\n     * The two character <em>initials</em> to display on the badge.\n     */\n    label: { type: String, default: null },\n    /**\n     * URL of the image to display on the badge.\n     */\n    image: { type: String, default: null },\n    /**\n     * An icon to display on the badge.\n     */\n    icon: { type: String, default: null },\n    /**\n     * If true, render the badge as a circle, instead of a square.\n     */\n    circular: { type: Boolean, default: false },\n    /**\n     * The size of the badge - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The color of the badge. This is one of the provided NeonFunctionalColors.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * Alternate color for creating gradient badges. NOTE: can also be the same color as 'color'.\n     */\n    alternateColor: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Display the badge in the disable style\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Apply the generated Jazzicon style based on the unique identified provided (e.g. a wallet address, name, etc)\n     */\n    jazziconId: { type: String, default: null },\n    /**\n     * Badge image alt text.\n     */\n    imageAlt: { type: String, default: 'Badge' },\n  },\n  setup(props) {\n    const getColor = (key: NeonFunctionalColor) => {\n      let colorString = getComputedStyle(document.documentElement).getPropertyValue(`--neon-rgb-${key}-l1`);\n      if (colorString.length === 0) {\n        colorString = '0, 0, 0';\n      }\n      const colorRgb = colorString\n        .trim()\n        .split(', ')\n        .map((str) => +str);\n      return NeonColorUtils.rgbToHex(colorRgb);\n    };\n\n    const palette = computed(() => [\n      '#000000',\n      getColor(NeonFunctionalColor.Brand),\n      getColor(NeonFunctionalColor.Primary),\n      getColor(NeonFunctionalColor.Info),\n      getColor(NeonFunctionalColor.Success),\n      getColor(NeonFunctionalColor.Warn),\n      getColor(NeonFunctionalColor.Error),\n    ]);\n\n    const svg = computed(() =>\n      props.jazziconId\n        ? NeonJazziconUtils.genSvg(\n            palette.value,\n            props.jazziconId,\n            props.size === NeonSize.Small ? 32 : props.size === NeonSize.Medium ? 40 : 48,\n          )\n        : null,\n    );\n\n    return {\n      svg,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonSize","NeonFunctionalColor","props","getColor","key","colorString","colorRgb","str","NeonColorUtils","palette","computed","NeonJazziconUtils"],"mappings":";;;;;;AAUA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,OAAO,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,MAAM,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI/B,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,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,YAAY,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIrC,UAAU,EAAE,MAAM,QAAQ,SAAS,QAAA;AAAA,EAAQ;AAAA,EAE7C,MAAMC,GAAO;AACX,UAAMC,IAAW,CAACC,MAA6B;AAC7C,UAAIC,IAAc,iBAAiB,SAAS,eAAe,EAAE,iBAAiB,cAAcD,CAAG,KAAK;AACpG,MAAIC,EAAY,WAAW,MACzBA,IAAc;AAEhB,YAAMC,IAAWD,EACd,KAAA,EACA,MAAM,IAAI,EACV,IAAI,CAACE,MAAQ,CAACA,CAAG;AACpB,aAAOC,EAAe,SAASF,CAAQ;AAAA,IACzC,GAEMG,IAAUC,EAAS,MAAM;AAAA,MAC7B;AAAA,MACAP,EAASF,EAAoB,KAAK;AAAA,MAClCE,EAASF,EAAoB,OAAO;AAAA,MACpCE,EAASF,EAAoB,IAAI;AAAA,MACjCE,EAASF,EAAoB,OAAO;AAAA,MACpCE,EAASF,EAAoB,IAAI;AAAA,MACjCE,EAASF,EAAoB,KAAK;AAAA,IAAA,CACnC;AAYD,WAAO;AAAA,MACL,KAXUS;AAAA,QAAS,MACnBR,EAAM,aACFS,EAAkB;AAAA,UAChBF,EAAQ;AAAA,UACRP,EAAM;AAAA,UACNA,EAAM,SAASF,EAAS,QAAQ,KAAKE,EAAM,SAASF,EAAS,SAAS,KAAK;AAAA,QAAA,IAE7E;AAAA,MAAA;AAAA,IAIJ;AAAA,EAEJ;AACF,CAAC;"}
+{"version":3,"file":"NeonBadge.es.js","sources":["../../../../src/components/presentation/badge/NeonBadge.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { NeonJazziconUtils } from '@/common/utils/NeonJazziconUtils';\nimport { NeonColorUtils } from '@/common/utils/NeonColorUtils';\nimport { NeonBadgeSize } from '@/common/enums/NeonBadgeSize';\n\n/**\n * A badge is a small square or circular component for representing user avatars. These can be in the form of an image, an icon or a two character string (e.g. the user's initials).\n */\nexport default defineComponent({\n  name: 'NeonBadge',\n  components: {\n    NeonIcon,\n  },\n  props: {\n    /**\n     * The two character <em>initials</em> to display on the badge.\n     */\n    label: { type: String, default: null },\n    /**\n     * URL of the image to display on the badge.\n     */\n    image: { type: String, default: null },\n    /**\n     * An icon to display on the badge.\n     */\n    icon: { type: String, default: null },\n    /**\n     * If true, render the badge as a circle, instead of a square.\n     */\n    circular: { type: Boolean, default: false },\n    /**\n     * The size of the badge - s, m, l, xl, xxl.\n     */\n    size: { type: String as () => NeonBadgeSize, default: NeonBadgeSize.Medium },\n    /**\n     * The color of the badge. This is one of the provided NeonFunctionalColors.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * Alternate color for creating gradient badges. NOTE: can also be the same color as 'color'.\n     */\n    alternateColor: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Display the badge in the disable style\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Apply the generated Jazzicon style based on the unique identified provided (e.g. a wallet address, name, etc)\n     */\n    jazziconId: { type: String, default: null },\n    /**\n     * Badge image alt text.\n     */\n    imageAlt: { type: String, default: 'Badge' },\n  },\n  setup(props) {\n    const getColor = (key: NeonFunctionalColor) => {\n      let colorString = getComputedStyle(document.documentElement).getPropertyValue(`--neon-rgb-${key}-l1`);\n      if (colorString.length === 0) {\n        colorString = '0, 0, 0';\n      }\n      const colorRgb = colorString\n        .trim()\n        .split(', ')\n        .map((str) => +str);\n      return NeonColorUtils.rgbToHex(colorRgb);\n    };\n\n    const palette = computed(() => [\n      '#000000',\n      getColor(NeonFunctionalColor.Brand),\n      getColor(NeonFunctionalColor.Primary),\n      getColor(NeonFunctionalColor.Info),\n      getColor(NeonFunctionalColor.Success),\n      getColor(NeonFunctionalColor.Warn),\n      getColor(NeonFunctionalColor.Error),\n    ]);\n\n    const svg = computed(() =>\n      props.jazziconId\n        ? NeonJazziconUtils.genSvg(\n            palette.value,\n            props.jazziconId,\n            props.size === NeonBadgeSize.Small ? 32 : props.size === NeonBadgeSize.Medium ? 40 : 48,\n          )\n        : null,\n    );\n\n    return {\n      svg,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonBadgeSize","NeonFunctionalColor","props","getColor","key","colorString","colorRgb","str","NeonColorUtils","palette","computed","NeonJazziconUtils"],"mappings":";;;;;;AAUA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,OAAO,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,MAAM,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI/B,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,MAAM,EAAE,MAAM,QAA+B,SAASC,EAAc,OAAA;AAAA;AAAA;AAAA;AAAA,IAIpE,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,YAAA;AAAA;AAAA;AAAA;AAAA,IAIjF,gBAAgB,EAAE,MAAM,QAAqC,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAItE,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,YAAY,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIrC,UAAU,EAAE,MAAM,QAAQ,SAAS,QAAA;AAAA,EAAQ;AAAA,EAE7C,MAAMC,GAAO;AACX,UAAMC,IAAW,CAACC,MAA6B;AAC7C,UAAIC,IAAc,iBAAiB,SAAS,eAAe,EAAE,iBAAiB,cAAcD,CAAG,KAAK;AACpG,MAAIC,EAAY,WAAW,MACzBA,IAAc;AAEhB,YAAMC,IAAWD,EACd,KAAA,EACA,MAAM,IAAI,EACV,IAAI,CAACE,MAAQ,CAACA,CAAG;AACpB,aAAOC,EAAe,SAASF,CAAQ;AAAA,IACzC,GAEMG,IAAUC,EAAS,MAAM;AAAA,MAC7B;AAAA,MACAP,EAASF,EAAoB,KAAK;AAAA,MAClCE,EAASF,EAAoB,OAAO;AAAA,MACpCE,EAASF,EAAoB,IAAI;AAAA,MACjCE,EAASF,EAAoB,OAAO;AAAA,MACpCE,EAASF,EAAoB,IAAI;AAAA,MACjCE,EAASF,EAAoB,KAAK;AAAA,IAAA,CACnC;AAYD,WAAO;AAAA,MACL,KAXUS;AAAA,QAAS,MACnBR,EAAM,aACFS,EAAkB;AAAA,UAChBF,EAAQ;AAAA,UACRP,EAAM;AAAA,UACNA,EAAM,SAASF,EAAc,QAAQ,KAAKE,EAAM,SAASF,EAAc,SAAS,KAAK;AAAA,QAAA,IAEvF;AAAA,MAAA;AAAA,IAIJ;AAAA,EAEJ;AACF,CAAC;"}

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

@@ -1,2 +1,2 @@
-"use strict";const n=require("vue"),v=require("../../../common/enums/NeonDropdownPlacement.cjs.js"),w=require("../../../common/utils/NeonDropdownPlacementUtils.cjs.js"),y=require("../../../common/utils/NeonClosableUtils.cjs.js"),S=require("../../../common/enums/NeonSize.cjs.js"),g=require("../../../common/enums/NeonFunctionalColor.cjs.js"),N=require("../../../common/enums/NeonDropdownStyle.cjs.js"),C=require("../badge/NeonBadge.vue.cjs.js"),b=require("../../user-input/button/NeonButton.vue.cjs.js"),q=require("../expansion-indicator/NeonExpansionIndicator.vue.cjs.js"),B=n.defineComponent({name:"NeonDropdown",components:{NeonBadge:C,NeonButton:b,NeonExpansionIndicator:q},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:S.NeonSize.Medium},color:{type:String,default:g.NeonFunctionalColor.LowContrast},alternateColor:{type:String,default:null},dropdownStyle:{type:String,default:N.NeonDropdownStyle.SolidButton},placement:{type:String,default:v.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),u=n.ref(e.placement),i=n.ref(null),d=()=>{o("update:modelValue",!1)},c=()=>{e.modelValue&&d()},t=()=>{if(e.modelValue&&r.value&&l.value){const a=u.value;u.value=w.NeonDropdownPlacementUtils.calculatePlacement(r.value,l.value,e.placement,e.placementContainer),a!==u.value&&o("dropdown-placement",u.value)}},s=()=>{!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}),m=()=>{o("blur")},p=()=>{o("focus")};return n.onMounted(()=>{!e.openOnHover&&l.value&&(i.value=new y.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(()=>r.value,a=>o("button-ref",a),{immediate:!0}),n.defineExpose({dropdownContent:l}),{dropdownButton:r,dropdownContent:l,dropdownPlacement:u,closableUtils:i,isButtonStyle:f,onClose:d,close:c,toggleOpen:s,onBlur:m,onFocus:p}}});module.exports=B;
+"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;
 //# 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, 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 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    defineExpose({ 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","dropdownButton","ref","dropdownContent","dropdownPlacement","closableUtils","onClose","close","recalculatePlacement","previousValue","NeonDropdownPlacementUtils","toggleOpen","isButtonStyle","computed","_a","onBlur","onFocus","onMounted","NeonClosableUtils","onUnmounted","watch","value","defineExpose"],"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, 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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"}

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

@@ -1,19 +1,19 @@
-import { defineComponent as v, ref as i, computed as w, onMounted as y, onUnmounted as g, watch as S, defineExpose as C } from "vue";
+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 { NeonDropdownPlacementUtils as B } from "../../../common/utils/NeonDropdownPlacementUtils.es.js";
 import { NeonClosableUtils as N } from "../../../common/utils/NeonClosableUtils.es.js";
-import { NeonSize as E } 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 { 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 x from "../expansion-indicator/NeonExpansionIndicator.vue.es.js";
-const A = v({
+import z from "../expansion-indicator/NeonExpansionIndicator.vue.es.js";
+const q = w({
   name: "NeonDropdown",
   components: {
     NeonBadge: O,
     NeonButton: P,
-    NeonExpansionIndicator: x
+    NeonExpansionIndicator: z
   },
   props: {
     /**
@@ -40,6 +40,10 @@ const A = v({
      * 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.
      */
     icon: { type: String, default: null },
+    /**
+     * aria label of the button icon
+     */
+    iconAriaLabel: { type: String },
     /**
      * Show the dropdown button's indicator (chevron).
      */
@@ -51,11 +55,11 @@ const A = v({
     /**
      * The size of the dropdown button - Small, Medium or Large.
      */
-    size: { type: String, default: E.Medium },
+    size: { type: String, default: L.Medium },
     /**
      * The color of the dropdown button
      */
-    color: { type: String, default: L.LowContrast },
+    color: { type: String, default: V.LowContrast },
     /**
      * The alternate color of the dropdown button (for gradient buttons).
      */
@@ -63,7 +67,7 @@ const A = v({
     /**
      * The style of the dropdown button
      */
-    dropdownStyle: { type: String, default: V.SolidButton },
+    dropdownStyle: { type: String, default: E.SolidButton },
     /**
      * Placement of the dropdown contents.
      */
@@ -104,7 +108,7 @@ const A = v({
      */
     "button-ref"
   ],
-  setup(e, { emit: n }) {
+  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);
     }, m = () => {
@@ -119,39 +123,39 @@ const A = v({
           e.placementContainer
         ), l !== a.value && n("dropdown-placement", a.value);
       }
-    }, c = () => {
+    }, s = () => {
       !e.disabled && !e.openOnHover && (n("update:modelValue", !e.modelValue), setTimeout(t));
-    }, s = w(() => {
+    }, f = y(() => {
       var l;
       return ((l = e.dropdownStyle) == null ? void 0 : l.indexOf("badge")) === -1;
-    }), f = () => {
+    }), p = () => {
       n("blur");
-    }, p = () => {
+    }, v = () => {
       n("focus");
     };
-    return y(() => {
+    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 });
-    }), g(() => {
+    }), S(() => {
       e.openOnHover || u.value && u.value.destroy(), window.removeEventListener("resize", t), window.removeEventListener("scroll", t), e.placementContainer && e.placementContainer.removeEventListener("scroll", t);
-    }), S(
+    }), C(
       () => r.value,
       (l) => n("button-ref", l),
       { immediate: !0 }
-    ), C({ dropdownContent: o }), {
+    ), c({ dropdownContent: o }), {
       dropdownButton: r,
       dropdownContent: o,
       dropdownPlacement: a,
       closableUtils: u,
-      isButtonStyle: s,
+      isButtonStyle: f,
       onClose: d,
       close: m,
-      toggleOpen: c,
-      onBlur: f,
-      onFocus: p
+      toggleOpen: s,
+      onBlur: p,
+      onFocus: v
     };
   }
 });
 export {
-  A as default
+  q 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 { computed, 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 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    defineExpose({ 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","dropdownButton","ref","dropdownContent","dropdownPlacement","closableUtils","onClose","close","recalculatePlacement","previousValue","NeonDropdownPlacementUtils","toggleOpen","isButtonStyle","computed","_a","onBlur","onFocus","onMounted","NeonClosableUtils","onUnmounted","watch","value","defineExpose"],"mappings":"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"}
+{"version":3,"file":"NeonDropdown.es.js","sources":["../../../../src/components/presentation/dropdown/NeonDropdown.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, 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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"}

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

@@ -1,2 +1,2 @@
-"use strict";const t=require("./NeonDropdown.cjs.js"),o=require("vue"),a=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),s={ref:"dropdownButton"},p={key:0,class:"neon-dropdown__button-wrapper"},u=["id","tabindex"];function w(e,n,g,m,c,v){const r=o.resolveComponent("neon-button"),l=o.resolveComponent("neon-badge"),i=o.resolveComponent("neon-expansion-indicator");return o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass([[{"neon-dropdown--with-indicator":e.indicator,"neon-dropdown--open":e.modelValue,"neon-dropdown--open-on-hover":e.openOnHover,"neon-dropdown--icon-only":e.icon&&!e.label,"neon-dropdown--disabled":e.disabled},`neon-dropdown--${e.size}`,`neon-dropdown--${e.color}`],"neon-dropdown"])},[o.createElementVNode("div",s,[o.renderSlot(e.$slots,"dropdown-button",{},()=>[e.isButtonStyle?(o.openBlock(),o.createElementBlock("div",p,[o.createVNode(r,{id:e.id,"alternate-color":e.alternateColor,"aria-expanded":e.modelValue,"button-style":e.dropdownStyle,color:e.color,disabled:e.disabled,icon:e.icon,indicator:e.indicator,"indicator-expanded":e.modelValue,label:e.label,size:e.size,"aria-haspopup":"true",class:"neon-dropdown__button",onBlur:n[0]||(n[0]=d=>e.onBlur()),onFocus:n[1]||(n[1]=d=>e.onFocus()),onClickCapture:o.withModifiers(e.toggleOpen,["stop","prevent"]),onKeydownCapture:[o.withKeys(o.withModifiers(e.toggleOpen,["stop","prevent"]),["enter"]),o.withKeys(o.withModifiers(e.toggleOpen,["stop","prevent"]),["space"])]},null,8,["id","alternate-color","aria-expanded","button-style","color","disabled","icon","indicator","indicator-expanded","label","size","onClickCapture","onKeydownCapture"])])):(o.openBlock(),o.createElementBlock("div",{key:1,id:e.id,ref:"dropdownButton",tabindex:e.disabled?void 0:0,class:"neon-dropdown__badge",role:"button",onClickCapture:n[2]||(n[2]=o.withModifiers((...d)=>e.toggleOpen&&e.toggleOpen(...d),["stop","prevent"])),onKeydownCapture:[n[3]||(n[3]=o.withKeys(o.withModifiers((...d)=>e.toggleOpen&&e.toggleOpen(...d),["stop","prevent"]),["enter"])),n[4]||(n[4]=o.withKeys(o.withModifiers((...d)=>e.toggleOpen&&e.toggleOpen(...d),["stop","prevent"]),["space"]))]},[o.createVNode(l,{"alternate-color":e.alternateColor,circular:e.dropdownStyle==="circular-badge",color:e.color,disabled:e.disabled,icon:e.icon,image:e.image,imageAlt:e.imageAlt,label:e.label,size:e.size},null,8,["alternate-color","circular","color","disabled","icon","image","imageAlt","label","size"]),e.indicator?(o.openBlock(),o.createBlock(i,{key:0,color:e.color,disabled:e.disabled,expanded:e.modelValue,class:"neon-button__indicator"},null,8,["color","disabled","expanded"])):o.createCommentVNode("",!0)],40,u))])],512),n[5]||(n[5]=o.createElementVNode("div",{class:"neon-dropdown__click-blocker"},null,-1)),o.withDirectives(o.createElementVNode("div",{ref:"dropdownContent",class:o.normalizeClass([`neon-dropdown__content--${e.dropdownPlacement}`,"neon-dropdown__content"])},[o.renderSlot(e.$slots,"default")],2),[[o.vShow,e.openOnHover||e.modelValue]])],2)}const b=a(t,[["render",w]]);module.exports=b;
+"use strict";const t=require("./NeonDropdown.cjs.js"),o=require("vue"),a=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),s={ref:"dropdownButton"},p={key:0,class:"neon-dropdown__button-wrapper"},u=["id","tabindex"];function w(e,n,g,m,c,v){const d=o.resolveComponent("neon-button"),l=o.resolveComponent("neon-badge"),i=o.resolveComponent("neon-expansion-indicator");return o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass([[{"neon-dropdown--with-indicator":e.indicator,"neon-dropdown--open":e.modelValue,"neon-dropdown--open-on-hover":e.openOnHover,"neon-dropdown--icon-only":e.icon&&!e.label,"neon-dropdown--disabled":e.disabled},`neon-dropdown--${e.size}`,`neon-dropdown--${e.color}`],"neon-dropdown"])},[o.createElementVNode("div",s,[o.renderSlot(e.$slots,"dropdown-button",{},()=>[e.isButtonStyle?(o.openBlock(),o.createElementBlock("div",p,[o.createVNode(d,{id:e.id,"alternate-color":e.alternateColor,"aria-expanded":e.modelValue,"button-style":e.dropdownStyle,color:e.dropdownStyle==="input"?"low-contrast":e.color,disabled:e.disabled,icon:e.icon,"icon-aria-label":e.iconAriaLabel,"icon-position":e.dropdownStyle==="input"?"right":"left",indicator:e.indicator,"indicator-expanded":e.modelValue,label:e.label,size:e.size,"aria-haspopup":"true",class:"neon-dropdown__button",onBlur:n[0]||(n[0]=r=>e.onBlur()),onFocus:n[1]||(n[1]=r=>e.onFocus()),onClickCapture:o.withModifiers(e.toggleOpen,["stop","prevent"]),onKeydownCapture:[o.withKeys(o.withModifiers(e.toggleOpen,["stop","prevent"]),["enter"]),o.withKeys(o.withModifiers(e.toggleOpen,["stop","prevent"]),["space"])]},null,8,["id","alternate-color","aria-expanded","button-style","color","disabled","icon","icon-aria-label","icon-position","indicator","indicator-expanded","label","size","onClickCapture","onKeydownCapture"])])):(o.openBlock(),o.createElementBlock("div",{key:1,id:e.id,ref:"dropdownButton",tabindex:e.disabled?void 0:0,class:"neon-dropdown__badge",role:"button",onClickCapture:n[2]||(n[2]=o.withModifiers((...r)=>e.toggleOpen&&e.toggleOpen(...r),["stop","prevent"])),onKeydownCapture:[n[3]||(n[3]=o.withKeys(o.withModifiers((...r)=>e.toggleOpen&&e.toggleOpen(...r),["stop","prevent"]),["enter"])),n[4]||(n[4]=o.withKeys(o.withModifiers((...r)=>e.toggleOpen&&e.toggleOpen(...r),["stop","prevent"]),["space"]))]},[o.createVNode(l,{"alternate-color":e.alternateColor,circular:e.dropdownStyle==="circular-badge",color:e.color,disabled:e.disabled,icon:e.icon,image:e.image,imageAlt:e.imageAlt,label:e.label,size:e.size},null,8,["alternate-color","circular","color","disabled","icon","image","imageAlt","label","size"]),e.indicator?(o.openBlock(),o.createBlock(i,{key:0,color:e.color,disabled:e.disabled,expanded:e.modelValue,class:"neon-button__indicator"},null,8,["color","disabled","expanded"])):o.createCommentVNode("",!0)],40,u))])],512),n[5]||(n[5]=o.createElementVNode("div",{class:"neon-dropdown__click-blocker"},null,-1)),o.withDirectives(o.createElementVNode("div",{ref:"dropdownContent",class:o.normalizeClass([`neon-dropdown__content--${e.dropdownPlacement}`,"neon-dropdown__content"])},[o.renderSlot(e.$slots,"default")],2),[[o.vShow,e.openOnHover||e.modelValue]])],2)}const b=a(t,[["render",w]]);module.exports=b;
 //# sourceMappingURL=NeonDropdown.vue.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NeonDropdown.vue.cjs.js","sources":["../../../../src/components/presentation/dropdown/NeonDropdown.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      {\n        'neon-dropdown--with-indicator': indicator,\n        'neon-dropdown--open': modelValue,\n        'neon-dropdown--open-on-hover': openOnHover,\n        'neon-dropdown--icon-only': icon && !label,\n        'neon-dropdown--disabled': disabled,\n      },\n      `neon-dropdown--${size}`,\n      `neon-dropdown--${color}`,\n    ]\"\n    class=\"neon-dropdown\"\n  >\n    <div ref=\"dropdownButton\">\n      <!-- @slot optionally replace the dropdown button with a custom control -->\n      <slot name=\"dropdown-button\">\n        <div v-if=\"isButtonStyle\" class=\"neon-dropdown__button-wrapper\">\n          <neon-button\n            :id=\"id\"\n            :alternate-color=\"alternateColor\"\n            :aria-expanded=\"modelValue\"\n            :button-style=\"dropdownStyle\"\n            :color=\"color\"\n            :disabled=\"disabled\"\n            :icon=\"icon\"\n            :indicator=\"indicator\"\n            :indicator-expanded=\"modelValue\"\n            :label=\"label\"\n            :size=\"size\"\n            aria-haspopup=\"true\"\n            class=\"neon-dropdown__button\"\n            @blur=\"onBlur()\"\n            @focus=\"onFocus()\"\n            @click.stop.prevent.capture=\"toggleOpen\"\n            @keydown.enter.stop.prevent.capture=\"toggleOpen\"\n            @keydown.space.stop.prevent.capture=\"toggleOpen\"\n          />\n        </div>\n        <div\n          v-else\n          :id=\"id\"\n          ref=\"dropdownButton\"\n          :tabindex=\"!disabled ? 0 : undefined\"\n          class=\"neon-dropdown__badge\"\n          role=\"button\"\n          @click.stop.prevent.capture=\"toggleOpen\"\n          @keydown.enter.stop.prevent.capture=\"toggleOpen\"\n          @keydown.space.stop.prevent.capture=\"toggleOpen\"\n        >\n          <neon-badge\n            :alternate-color=\"alternateColor\"\n            :circular=\"dropdownStyle === 'circular-badge'\"\n            :color=\"color\"\n            :disabled=\"disabled\"\n            :icon=\"icon\"\n            :image=\"image\"\n            :imageAlt=\"imageAlt\"\n            :label=\"label\"\n            :size=\"size\"\n          />\n          <neon-expansion-indicator\n            v-if=\"indicator\"\n            :color=\"color\"\n            :disabled=\"disabled\"\n            :expanded=\"modelValue\"\n            class=\"neon-button__indicator\"\n          />\n        </div>\n      </slot>\n    </div>\n    <div class=\"neon-dropdown__click-blocker\" />\n    <div\n      v-show=\"openOnHover || modelValue\"\n      ref=\"dropdownContent\"\n      :class=\"`neon-dropdown__content--${dropdownPlacement}`\"\n      class=\"neon-dropdown__content\"\n    >\n      <!-- @slot The content of the open dropdown -->\n      <slot></slot>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonDropdown.ts\"></script>\n"],"names":["_hoisted_1","_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_renderSlot","_openBlock","_hoisted_2","_createVNode","_component_neon_button","args","_component_neon_badge","_createBlock","_component_neon_expansion_indicator","_vShow"],"mappings":"uIAeSA,EAAA,CAAA,IAAI,gBAAgB,WAGK,MAAM,gOAjBtCC,EAAAA,mBAiFM,MAAA,CAhFH,MAAKC,EAAAA,eAAA,CAAA,kCAAqDC,EAAA,gCAA0CA,EAAA,0CAAoDA,EAAA,YAAiD,2BAAAA,EAAA,OAASA,EAAA,gCAA0CA,EAAA,4BAA2CA,EAAA,IAAI,qBAA4BA,EAAA,KAAK,IAWvU,eAAe,CAAA,IAErBC,EAAAA,mBAwDM,MAxDNJ,EAwDM,CAtDJK,EAAAA,WAqDOF,8BArDP,IAqDO,CApDMA,EAAA,eAAXG,EAAAA,YAAAL,EAAAA,mBAqBM,MArBNM,EAqBM,CApBJC,EAAAA,YAmBEC,EAAA,CAlBC,GAAIN,EAAA,GACJ,kBAAiBA,EAAA,eACjB,gBAAeA,EAAA,WACf,eAAcA,EAAA,cACd,MAAOA,EAAA,MACP,SAAUA,EAAA,SACV,KAAMA,EAAA,KACN,UAAWA,EAAA,UACX,qBAAoBA,EAAA,WACpB,MAAOA,EAAA,MACP,KAAMA,EAAA,KACP,gBAAc,OACd,MAAM,wBACL,sBAAMA,EAAA,OAAM,GACZ,uBAAOA,EAAA,QAAO,kCACcA,EAAA,WAAU,CAAA,OAAA,SAAA,CAAA,+CACFA,EAAA,WAAU,CAAA,OAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,6BACVA,EAAA,WAAU,CAAA,OAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,oMAGnDF,EAAAA,mBA6BM,MAAA,OA3BH,GAAIE,EAAA,GACL,IAAI,iBACH,SAAWA,EAAA,SAAe,OAAP,EACpB,MAAM,uBACN,KAAK,4DACwBA,EAAA,YAAAA,EAAA,WAAA,GAAAO,CAAA,EAAU,CAAA,OAAA,SAAA,CAAA,oEACFP,EAAA,YAAAA,EAAA,WAAA,GAAAO,CAAA,EAAU,CAAA,OAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,kDACVP,EAAA,YAAAA,EAAA,WAAA,GAAAO,CAAA,EAAU,CAAA,OAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,MAE/CF,EAAAA,YAUEG,EAAA,CATC,kBAAiBR,EAAA,eACjB,SAAUA,EAAA,gBAAa,iBACvB,MAAOA,EAAA,MACP,SAAUA,EAAA,SACV,KAAMA,EAAA,KACN,MAAOA,EAAA,MACP,SAAUA,EAAA,SACV,MAAOA,EAAA,MACP,KAAMA,EAAA,yGAGDA,EAAA,yBADRS,EAAAA,YAMEC,EAAA,OAJC,MAAOV,EAAA,MACP,SAAUA,EAAA,SACV,SAAUA,EAAA,WACX,MAAM,2HAKdC,EAAAA,mBAA4C,MAAA,CAAvC,MAAM,8BAA8B,EAAA,KAAA,EAAA,oBACzCA,EAAAA,mBAQM,MAAA,CANJ,IAAI,kBACH,MAAKF,EAAAA,eAAA,CAAA,2BAA6BC,EAAA,iBAAiB,GAC9C,wBAAwB,CAAA,IAG9BE,aAAaF,EAAA,OAAA,SAAA,OANL,CAAAW,QAAAX,EAAA,aAAeA,EAAA,UAAU"}
+{"version":3,"file":"NeonDropdown.vue.cjs.js","sources":["../../../../src/components/presentation/dropdown/NeonDropdown.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      {\n        'neon-dropdown--with-indicator': indicator,\n        'neon-dropdown--open': modelValue,\n        'neon-dropdown--open-on-hover': openOnHover,\n        'neon-dropdown--icon-only': icon && !label,\n        'neon-dropdown--disabled': disabled,\n      },\n      `neon-dropdown--${size}`,\n      `neon-dropdown--${color}`,\n    ]\"\n    class=\"neon-dropdown\"\n  >\n    <div ref=\"dropdownButton\">\n      <!-- @slot optionally replace the dropdown button with a custom control -->\n      <slot name=\"dropdown-button\">\n        <div v-if=\"isButtonStyle\" class=\"neon-dropdown__button-wrapper\">\n          <neon-button\n            :id=\"id\"\n            :alternate-color=\"alternateColor\"\n            :aria-expanded=\"modelValue\"\n            :button-style=\"dropdownStyle\"\n            :color=\"dropdownStyle === 'input' ? 'low-contrast' : color\"\n            :disabled=\"disabled\"\n            :icon=\"icon\"\n            :icon-aria-label=\"iconAriaLabel\"\n            :icon-position=\"dropdownStyle === 'input' ? 'right' : 'left'\"\n            :indicator=\"indicator\"\n            :indicator-expanded=\"modelValue\"\n            :label=\"label\"\n            :size=\"size\"\n            aria-haspopup=\"true\"\n            class=\"neon-dropdown__button\"\n            @blur=\"onBlur()\"\n            @focus=\"onFocus()\"\n            @click.stop.prevent.capture=\"toggleOpen\"\n            @keydown.enter.stop.prevent.capture=\"toggleOpen\"\n            @keydown.space.stop.prevent.capture=\"toggleOpen\"\n          />\n        </div>\n        <div\n          v-else\n          :id=\"id\"\n          ref=\"dropdownButton\"\n          :tabindex=\"!disabled ? 0 : undefined\"\n          class=\"neon-dropdown__badge\"\n          role=\"button\"\n          @click.stop.prevent.capture=\"toggleOpen\"\n          @keydown.enter.stop.prevent.capture=\"toggleOpen\"\n          @keydown.space.stop.prevent.capture=\"toggleOpen\"\n        >\n          <neon-badge\n            :alternate-color=\"alternateColor\"\n            :circular=\"dropdownStyle === 'circular-badge'\"\n            :color=\"color\"\n            :disabled=\"disabled\"\n            :icon=\"icon\"\n            :image=\"image\"\n            :imageAlt=\"imageAlt\"\n            :label=\"label\"\n            :size=\"size\"\n          />\n          <neon-expansion-indicator\n            v-if=\"indicator\"\n            :color=\"color\"\n            :disabled=\"disabled\"\n            :expanded=\"modelValue\"\n            class=\"neon-button__indicator\"\n          />\n        </div>\n      </slot>\n    </div>\n    <div class=\"neon-dropdown__click-blocker\" />\n    <div\n      v-show=\"openOnHover || modelValue\"\n      ref=\"dropdownContent\"\n      :class=\"`neon-dropdown__content--${dropdownPlacement}`\"\n      class=\"neon-dropdown__content\"\n    >\n      <!-- @slot The content of the open dropdown -->\n      <slot></slot>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonDropdown.ts\"></script>\n"],"names":["_hoisted_1","_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_renderSlot","_openBlock","_hoisted_2","_createVNode","_component_neon_button","args","_component_neon_badge","_createBlock","_component_neon_expansion_indicator","_vShow"],"mappings":"uIAeSA,EAAA,CAAA,IAAI,gBAAgB,WAGK,MAAM,gOAjBtCC,EAAAA,mBAmFM,MAAA,CAlFH,MAAKC,EAAAA,eAAA,CAAA,kCAAqDC,EAAA,gCAA0CA,EAAA,0CAAoDA,EAAA,YAAiD,2BAAAA,EAAA,OAASA,EAAA,gCAA0CA,EAAA,4BAA2CA,EAAA,IAAI,qBAA4BA,EAAA,KAAK,IAWvU,eAAe,CAAA,IAErBC,EAAAA,mBA0DM,MA1DNJ,EA0DM,CAxDJK,EAAAA,WAuDOF,8BAvDP,IAuDO,CAtDMA,EAAA,eAAXG,EAAAA,YAAAL,EAAAA,mBAuBM,MAvBNM,EAuBM,CAtBJC,EAAAA,YAqBEC,EAAA,CApBC,GAAIN,EAAA,GACJ,kBAAiBA,EAAA,eACjB,gBAAeA,EAAA,WACf,eAAcA,EAAA,cACd,MAAOA,EAAA,gBAAa,QAAA,eAAgCA,EAAA,MACpD,SAAUA,EAAA,SACV,KAAMA,EAAA,KACN,kBAAiBA,EAAA,cACjB,gBAAeA,EAAA,gBAAa,QAAA,QAAA,OAC5B,UAAWA,EAAA,UACX,qBAAoBA,EAAA,WACpB,MAAOA,EAAA,MACP,KAAMA,EAAA,KACP,gBAAc,OACd,MAAM,wBACL,sBAAMA,EAAA,OAAM,GACZ,uBAAOA,EAAA,QAAO,kCACcA,EAAA,WAAU,CAAA,OAAA,SAAA,CAAA,+CACFA,EAAA,WAAU,CAAA,OAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,6BACVA,EAAA,WAAU,CAAA,OAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,sOAGnDF,EAAAA,mBA6BM,MAAA,OA3BH,GAAIE,EAAA,GACL,IAAI,iBACH,SAAWA,EAAA,SAAe,OAAP,EACpB,MAAM,uBACN,KAAK,4DACwBA,EAAA,YAAAA,EAAA,WAAA,GAAAO,CAAA,EAAU,CAAA,OAAA,SAAA,CAAA,oEACFP,EAAA,YAAAA,EAAA,WAAA,GAAAO,CAAA,EAAU,CAAA,OAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,kDACVP,EAAA,YAAAA,EAAA,WAAA,GAAAO,CAAA,EAAU,CAAA,OAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,MAE/CF,EAAAA,YAUEG,EAAA,CATC,kBAAiBR,EAAA,eACjB,SAAUA,EAAA,gBAAa,iBACvB,MAAOA,EAAA,MACP,SAAUA,EAAA,SACV,KAAMA,EAAA,KACN,MAAOA,EAAA,MACP,SAAUA,EAAA,SACV,MAAOA,EAAA,MACP,KAAMA,EAAA,yGAGDA,EAAA,yBADRS,EAAAA,YAMEC,EAAA,OAJC,MAAOV,EAAA,MACP,SAAUA,EAAA,SACV,SAAUA,EAAA,WACX,MAAM,2HAKdC,EAAAA,mBAA4C,MAAA,CAAvC,MAAM,8BAA8B,EAAA,KAAA,EAAA,oBACzCA,EAAAA,mBAQM,MAAA,CANJ,IAAI,kBACH,MAAKF,EAAAA,eAAA,CAAA,2BAA6BC,EAAA,iBAAiB,GAC9C,wBAAwB,CAAA,IAG9BE,aAAaF,EAAA,OAAA,SAAA,OANL,CAAAW,QAAAX,EAAA,aAAeA,EAAA,UAAU"}