@aotearoan/neon 22.1.1 → 22.2.0

package/dist/common/enums/NeonButtonType.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e=(t=>(t.Button="button",t.Submit="submit",t.Reset="reset",t))(e||{});exports.NeonButtonType=e;
+//# sourceMappingURL=NeonButtonType.cjs.js.map

package/dist/common/enums/NeonButtonType.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeonButtonType.cjs.js","sources":["../../../src/common/enums/NeonButtonType.ts"],"sourcesContent":["export enum NeonButtonType {\n  Button = 'button',\n  Submit = 'submit',\n  Reset = 'reset',\n}\n"],"names":["NeonButtonType"],"mappings":"gFAAO,IAAKA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAHEA,IAAAA,GAAA,CAAA,CAAA"}

package/dist/common/enums/NeonButtonType.es.js

@@ -0,0 +1,5 @@
+var r = /* @__PURE__ */ ((t) => (t.Button = "button", t.Submit = "submit", t.Reset = "reset", t))(r || {});
+export {
+  r as NeonButtonType
+};
+//# sourceMappingURL=NeonButtonType.es.js.map

package/dist/common/enums/NeonButtonType.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeonButtonType.es.js","sources":["../../../src/common/enums/NeonButtonType.ts"],"sourcesContent":["export enum NeonButtonType {\n  Button = 'button',\n  Submit = 'submit',\n  Reset = 'reset',\n}\n"],"names":["NeonButtonType"],"mappings":"AAAO,IAAKA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAHEA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/common/utils/NeonFileUtils.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=r=>new Promise((o,t)=>{const e=new FileReader;e.onload=()=>{o(e.result)},e.onerror=t,e.readAsDataURL(r)});exports.fileToDataURL=a;
+//# sourceMappingURL=NeonFileUtils.cjs.js.map

package/dist/common/utils/NeonFileUtils.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeonFileUtils.cjs.js","sources":["../../../src/common/utils/NeonFileUtils.ts"],"sourcesContent":["/**\n * Convert a file into a data URL.\n * @param file The file to convert to a data URL\n * @returns {Promise<string>>} The data URL of the file\n */\nexport const fileToDataURL = (file: File) => {\n  return new Promise<string>((resolve, reject) => {\n    const reader = new FileReader();\n    reader.onload = () => {\n      resolve(reader.result as string);\n    };\n    reader.onerror = reject;\n    reader.readAsDataURL(file);\n  });\n};\n"],"names":["fileToDataURL","file","resolve","reject","reader"],"mappings":"gFAKO,MAAMA,EAAiBC,GACrB,IAAI,QAAgB,CAACC,EAASC,IAAW,CAC9C,MAAMC,EAAS,IAAI,WACnBA,EAAO,OAAS,IAAM,CACpBF,EAAQE,EAAO,MAAgB,CACjC,EACAA,EAAO,QAAUD,EACjBC,EAAO,cAAcH,CAAI,CAC3B,CAAC"}

package/dist/common/utils/NeonFileUtils.es.js

@@ -0,0 +1,10 @@
+const n = (r) => new Promise((o, a) => {
+  const e = new FileReader();
+  e.onload = () => {
+    o(e.result);
+  }, e.onerror = a, e.readAsDataURL(r);
+});
+export {
+  n as fileToDataURL
+};
+//# sourceMappingURL=NeonFileUtils.es.js.map

package/dist/common/utils/NeonFileUtils.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeonFileUtils.es.js","sources":["../../../src/common/utils/NeonFileUtils.ts"],"sourcesContent":["/**\n * Convert a file into a data URL.\n * @param file The file to convert to a data URL\n * @returns {Promise<string>>} The data URL of the file\n */\nexport const fileToDataURL = (file: File) => {\n  return new Promise<string>((resolve, reject) => {\n    const reader = new FileReader();\n    reader.onload = () => {\n      resolve(reader.result as string);\n    };\n    reader.onerror = reject;\n    reader.readAsDataURL(file);\n  });\n};\n"],"names":["fileToDataURL","file","resolve","reject","reader"],"mappings":"AAKO,MAAMA,IAAgB,CAACC,MACrB,IAAI,QAAgB,CAACC,GAASC,MAAW;AAC9C,QAAMC,IAAS,IAAI,WAAA;AACnB,EAAAA,EAAO,SAAS,MAAM;AACpB,IAAAF,EAAQE,EAAO,MAAgB;AAAA,EACjC,GACAA,EAAO,UAAUD,GACjBC,EAAO,cAAcH,CAAI;AAC3B,CAAC;"}

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

@@ -1,2 +1,2 @@
-"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;
+"use strict";const l=require("vue"),e=require("../../../common/enums/NeonFunctionalColor.cjs.js"),s=require("../../user-input/file/NeonFile.vue.cjs.js"),m=require("../icon/NeonIcon.vue.cjs.js"),p=require("../../../common/utils/NeonJazziconUtils.cjs.js"),f=require("../../../common/utils/NeonColorUtils.cjs.js"),i=require("../../../common/enums/NeonBadgeSize.cjs.js"),N=l.defineComponent({name:"NeonBadge",components:{NeonFile:s,NeonIcon:m},emits:["change-image"],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:i.NeonBadgeSize.Medium},color:{type:String,default:e.NeonFunctionalColor.Primary},alternateColor:{type:String,default:null},editable:{type:Boolean,default:!1},accept:{type:String,default:"image/*"},disabled:{type:Boolean,default:!1},jazziconId:{type:String,default:null},imageAlt:{type:String,default:"Badge"},editButtonTitle:{type:String,default:"Edit"}},setup(n,{emit:a}){const t=c=>{let o=getComputedStyle(document.documentElement).getPropertyValue(`--neon-rgb-${c}-l1`);o.length===0&&(o="0, 0, 0");const d=o.trim().split(", ").map(g=>+g);return f.NeonColorUtils.rgbToHex(d)},r=l.computed(()=>["#000000",t(e.NeonFunctionalColor.Brand),t(e.NeonFunctionalColor.Primary),t(e.NeonFunctionalColor.Info),t(e.NeonFunctionalColor.Success),t(e.NeonFunctionalColor.Warn),t(e.NeonFunctionalColor.Error)]),u=l.computed(()=>n.jazziconId?p.NeonJazziconUtils.genSvg(r.value,n.jazziconId,n.size===i.NeonBadgeSize.Small?32:n.size===i.NeonBadgeSize.Medium?40:48):null);return{emit:a,svg:u}}});module.exports=N;
 //# 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 { 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"}
+{"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 NeonFile from '@/components/user-input/file/NeonFile.vue';\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    NeonFile,\n    NeonIcon,\n  },\n  emits: [\n    /**\n     * emitted when the user selects or clears their image in edit mode.\n     * NOTE: This emit event DOES NOT set the badge image, it is the responsibility of the parent component to pass an\n     * image URL back into the component's image property to set it, e.g. a data URI.\n     * @type {File}\n     */\n    'change-image',\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.Primary },\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     * Allow editing of the image. This will place an image file lookup button on top of the image allowing the user to\n     * choose a new image to upload.\n     */\n    editable: { type: Boolean, default: false },\n    /**\n     * Accept string for the filetype to support selecting.\n     */\n    accept: { type: String, default: 'image/*' },\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     * Title for the file upload button in edit mode.\n     */\n    editButtonTitle: { type: String, default: 'Edit' },\n  },\n  setup(props, { emit }) {\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      emit,\n      svg,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonFile","NeonIcon","NeonBadgeSize","NeonFunctionalColor","props","emit","getColor","key","colorString","colorRgb","str","NeonColorUtils","palette","computed","svg","NeonJazziconUtils"],"mappings":"+WAWAA,EAAeC,kBAAgB,CAC7B,KAAM,YACN,WAAY,CACV,SAAAC,EACA,SAAAC,CAAA,EAEF,MAAO,CAOL,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,OAAA,EAIjF,eAAgB,CAAE,KAAM,OAAqC,QAAS,IAAA,EAKtE,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,OAAQ,CAAE,KAAM,OAAQ,QAAS,SAAA,EAIjC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,WAAY,CAAE,KAAM,OAAQ,QAAS,IAAA,EAIrC,SAAU,CAAE,KAAM,OAAQ,QAAS,OAAA,EAInC,gBAAiB,CAAE,KAAM,OAAQ,QAAS,MAAA,CAAO,EAEnD,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,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,EAASH,EAAAA,oBAAoB,KAAK,EAClCG,EAASH,EAAAA,oBAAoB,OAAO,EACpCG,EAASH,EAAAA,oBAAoB,IAAI,EACjCG,EAASH,EAAAA,oBAAoB,OAAO,EACpCG,EAASH,EAAAA,oBAAoB,IAAI,EACjCG,EAASH,EAAAA,oBAAoB,KAAK,CAAA,CACnC,EAEKW,EAAMD,EAAAA,SAAS,IACnBT,EAAM,WACFW,EAAAA,kBAAkB,OAChBH,EAAQ,MACRR,EAAM,WACNA,EAAM,OAASF,EAAAA,cAAc,MAAQ,GAAKE,EAAM,OAASF,EAAAA,cAAc,OAAS,GAAK,EAAA,EAEvF,IAAA,EAGN,MAAO,CACL,KAAAG,EACA,IAAAS,CAAA,CAEJ,CACF,CAAC"}

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

@@ -1,14 +1,25 @@
-import { defineComponent as d, computed as r } from "vue";
+import { defineComponent as f, computed as a } from "vue";
 import { NeonFunctionalColor as e } from "../../../common/enums/NeonFunctionalColor.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";
-import { NeonBadgeSize as l } from "../../../common/enums/NeonBadgeSize.es.js";
-const N = d({
+import c from "../../user-input/file/NeonFile.vue.es.js";
+import p from "../icon/NeonIcon.vue.es.js";
+import { NeonJazziconUtils as s } from "../../../common/utils/NeonJazziconUtils.es.js";
+import { NeonColorUtils as y } from "../../../common/utils/NeonColorUtils.es.js";
+import { NeonBadgeSize as n } from "../../../common/enums/NeonBadgeSize.es.js";
+const j = f({
   name: "NeonBadge",
   components: {
-    NeonIcon: g
+    NeonFile: c,
+    NeonIcon: p
   },
+  emits: [
+    /**
+     * emitted when the user selects or clears their image in edit mode.
+     * NOTE: This emit event DOES NOT set the badge image, it is the responsibility of the parent component to pass an
+     * image URL back into the component's image property to set it, e.g. a data URI.
+     * @type {File}
+     */
+    "change-image"
+  ],
   props: {
     /**
      * The two character <em>initials</em> to display on the badge.
@@ -29,15 +40,24 @@ const N = d({
     /**
      * The size of the badge - s, m, l, xl, xxl.
      */
-    size: { type: String, default: l.Medium },
+    size: { type: String, default: n.Medium },
     /**
      * The color of the badge. This is one of the provided NeonFunctionalColors.
      */
-    color: { type: String, default: e.LowContrast },
+    color: { type: String, default: e.Primary },
     /**
      * Alternate color for creating gradient badges. NOTE: can also be the same color as 'color'.
      */
     alternateColor: { type: String, default: null },
+    /**
+     * Allow editing of the image. This will place an image file lookup button on top of the image allowing the user to
+     * choose a new image to upload.
+     */
+    editable: { type: Boolean, default: !1 },
+    /**
+     * Accept string for the filetype to support selecting.
+     */
+    accept: { type: String, default: "image/*" },
     /**
      * Display the badge in the disable style
      */
@@ -49,15 +69,19 @@ const N = d({
     /**
      * Badge image alt text.
      */
-    imageAlt: { type: String, default: "Badge" }
+    imageAlt: { type: String, default: "Badge" },
+    /**
+     * Title for the file upload button in edit mode.
+     */
+    editButtonTitle: { type: String, default: "Edit" }
   },
-  setup(o) {
-    const t = (i) => {
-      let n = getComputedStyle(document.documentElement).getPropertyValue(`--neon-rgb-${i}-l1`);
-      n.length === 0 && (n = "0, 0, 0");
-      const u = n.trim().split(", ").map((m) => +m);
-      return f.rgbToHex(u);
-    }, a = r(() => [
+  setup(o, { emit: r }) {
+    const t = (u) => {
+      let l = getComputedStyle(document.documentElement).getPropertyValue(`--neon-rgb-${u}-l1`);
+      l.length === 0 && (l = "0, 0, 0");
+      const d = l.trim().split(", ").map((g) => +g);
+      return y.rgbToHex(d);
+    }, i = a(() => [
       "#000000",
       t(e.Brand),
       t(e.Primary),
@@ -65,19 +89,20 @@ const N = d({
       t(e.Success),
       t(e.Warn),
       t(e.Error)
-    ]);
+    ]), m = a(
+      () => o.jazziconId ? s.genSvg(
+        i.value,
+        o.jazziconId,
+        o.size === n.Small ? 32 : o.size === n.Medium ? 40 : 48
+      ) : null
+    );
     return {
-      svg: r(
-        () => o.jazziconId ? c.genSvg(
-          a.value,
-          o.jazziconId,
-          o.size === l.Small ? 32 : o.size === l.Medium ? 40 : 48
-        ) : null
-      )
+      emit: r,
+      svg: m
     };
   }
 });
 export {
-  N as default
+  j 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 { 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;"}
+{"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 NeonFile from '@/components/user-input/file/NeonFile.vue';\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    NeonFile,\n    NeonIcon,\n  },\n  emits: [\n    /**\n     * emitted when the user selects or clears their image in edit mode.\n     * NOTE: This emit event DOES NOT set the badge image, it is the responsibility of the parent component to pass an\n     * image URL back into the component's image property to set it, e.g. a data URI.\n     * @type {File}\n     */\n    'change-image',\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.Primary },\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     * Allow editing of the image. This will place an image file lookup button on top of the image allowing the user to\n     * choose a new image to upload.\n     */\n    editable: { type: Boolean, default: false },\n    /**\n     * Accept string for the filetype to support selecting.\n     */\n    accept: { type: String, default: 'image/*' },\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     * Title for the file upload button in edit mode.\n     */\n    editButtonTitle: { type: String, default: 'Edit' },\n  },\n  setup(props, { emit }) {\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      emit,\n      svg,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonFile","NeonIcon","NeonBadgeSize","NeonFunctionalColor","props","emit","getColor","key","colorString","colorRgb","str","NeonColorUtils","palette","computed","svg","NeonJazziconUtils"],"mappings":";;;;;;;AAWA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAC;AAAA,IACA,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;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,QAAA;AAAA;AAAA;AAAA;AAAA,IAIjF,gBAAgB,EAAE,MAAM,QAAqC,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKtE,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,QAAQ,EAAE,MAAM,QAAQ,SAAS,UAAA;AAAA;AAAA;AAAA;AAAA,IAIjC,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;AAAA;AAAA;AAAA,IAInC,iBAAiB,EAAE,MAAM,QAAQ,SAAS,OAAA;AAAA,EAAO;AAAA,EAEnD,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,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,EAASH,EAAoB,KAAK;AAAA,MAClCG,EAASH,EAAoB,OAAO;AAAA,MACpCG,EAASH,EAAoB,IAAI;AAAA,MACjCG,EAASH,EAAoB,OAAO;AAAA,MACpCG,EAASH,EAAoB,IAAI;AAAA,MACjCG,EAASH,EAAoB,KAAK;AAAA,IAAA,CACnC,GAEKW,IAAMD;AAAA,MAAS,MACnBT,EAAM,aACFW,EAAkB;AAAA,QAChBH,EAAQ;AAAA,QACRR,EAAM;AAAA,QACNA,EAAM,SAASF,EAAc,QAAQ,KAAKE,EAAM,SAASF,EAAc,SAAS,KAAK;AAAA,MAAA,IAEvF;AAAA,IAAA;AAGN,WAAO;AAAA,MACL,MAAAG;AAAA,MACA,KAAAS;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}

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

@@ -1,2 +1,2 @@
-"use strict";const a=require("./NeonBadge.cjs.js"),n=require("vue"),l=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r=["innerHTML"],s={key:1,class:"neon-badge__label"},i=["alt","src"];function d(e,t,g,b,m,p){const o=n.resolveComponent("neon-icon");return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass([[`neon-badge--${e.color}`,e.alternateColor?`neon-badge--alternate-color-${e.alternateColor}`:"",`neon-badge--${e.size}`,{"neon-badge--with-label":e.label,"neon-badge--disabled":e.disabled,"neon-badge--with-image":e.image,"neon-badge--with-icon":e.icon},e.circular?"neon-badge--circular":"neon-badge--square"],"neon-badge"])},[e.jazziconId?(n.openBlock(),n.createElementBlock("div",{key:0,class:"neon-badge__image",innerHTML:e.svg},null,8,r)):e.label?(n.openBlock(),n.createElementBlock("span",s,n.toDisplayString(e.label),1)):e.image?(n.openBlock(),n.createElementBlock("img",{key:2,alt:e.imageAlt,src:e.image,class:"neon-badge__image"},null,8,i)):e.icon?(n.openBlock(),n.createBlock(o,{key:3,disabled:e.disabled,inverse:!!e.color,name:e.icon,class:"neon-badge__icon"},null,8,["disabled","inverse","name"])):n.createCommentVNode("",!0)],2)}const c=l(a,[["render",d]]);module.exports=c;
+"use strict";const r=require("./NeonBadge.cjs.js"),n=require("vue"),s=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),d=["innerHTML"],t={key:1,class:"neon-badge__label"},c=["alt","src"];function b(e,o,p,u,m,k){const l=n.resolveComponent("neon-icon"),a=n.resolveComponent("neon-file");return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass([[`neon-badge--${e.color}`,e.alternateColor?`neon-badge--alternate-color-${e.alternateColor}`:"",`neon-badge--${e.size}`,{"neon-badge--with-label":e.label,"neon-badge--disabled":e.disabled,"neon-badge--with-image":e.image,"neon-badge--with-icon":e.icon,"neon-badge--editable":e.editable},e.circular?"neon-badge--circular":"neon-badge--square"],"neon-badge"])},[e.jazziconId?(n.openBlock(),n.createElementBlock("div",{key:0,class:"neon-badge__image",innerHTML:e.svg},null,8,d)):e.label?(n.openBlock(),n.createElementBlock("span",t,n.toDisplayString(e.label),1)):e.image?(n.openBlock(),n.createElementBlock("img",{key:2,alt:e.imageAlt,src:e.image,class:"neon-badge__image"},null,8,c)):e.icon?(n.openBlock(),n.createBlock(l,{key:3,disabled:e.disabled,inverse:!!e.color,name:e.icon,class:"neon-badge__icon"},null,8,["disabled","inverse","name"])):n.createCommentVNode("",!0),e.editable?(n.openBlock(),n.createBlock(a,{key:4,accept:e.accept,circular:e.circular,color:e.color,"direct-upload":!0,disabled:e.disabled,size:e.size,title:e.editButtonTitle,class:"neon-badge__upload",icon:"pencil","onUpdate:modelValue":o[0]||(o[0]=i=>e.emit("change-image",i))},null,8,["accept","circular","color","disabled","size","title"])):n.createCommentVNode("",!0)],2)}const g=s(r,[["render",b]]);module.exports=g;
 //# sourceMappingURL=NeonBadge.vue.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NeonBadge.vue.cjs.js","sources":["../../../../src/components/presentation/badge/NeonBadge.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      `neon-badge--${color}`,\n      alternateColor ? `neon-badge--alternate-color-${alternateColor}` : '',\n      `neon-badge--${size}`,\n      {\n        'neon-badge--with-label': label,\n        'neon-badge--disabled': disabled,\n        'neon-badge--with-image': image,\n        'neon-badge--with-icon': icon,\n      },\n      circular ? 'neon-badge--circular' : 'neon-badge--square',\n    ]\"\n    class=\"neon-badge\"\n  >\n    <div v-if=\"jazziconId\" class=\"neon-badge__image\" v-html=\"svg\" />\n    <span v-else-if=\"label\" class=\"neon-badge__label\">{{ label }}</span>\n    <img v-else-if=\"image\" :alt=\"imageAlt\" :src=\"image\" class=\"neon-badge__image\" />\n    <neon-icon v-else-if=\"icon\" :disabled=\"disabled\" :inverse=\"!!color\" :name=\"icon\" class=\"neon-badge__icon\" />\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonBadge.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_hoisted_2","_toDisplayString","_createBlock","_component_neon_icon"],"mappings":"6JAiB4B,MAAM,0HAhBhCA,EAAAA,mBAmBM,MAAA,CAlBH,MAAKC,EAAAA,eAAA,CAAA,gBAAyBC,EAAA,KAAK,GAAUA,EAAA,8CAAgDA,EAAA,cAAc,GAAA,kBAA8BA,EAAA,IAAI,6BAA8CA,EAAA,6BAAuCA,EAAA,kCAA4CA,EAAA,8BAAwCA,EAAA,MAAqBA,EAAA,SAAQ,uBAAA,sBAY9U,YAAY,CAAA,IAEPA,EAAA,0BAAXF,EAAAA,mBAAgE,MAAA,OAAzC,MAAM,oBAAoB,UAAQE,EAAA,gBACxCA,EAAA,qBAAjBF,EAAAA,mBAAoE,OAApEG,EAAoEC,EAAAA,gBAAfF,EAAA,KAAK,EAAA,CAAA,GAC1CA,EAAA,qBAAhBF,EAAAA,mBAAgF,MAAA,OAAxD,IAAKE,EAAA,SAAW,IAAKA,EAAA,MAAO,MAAM,gCACpCA,EAAA,oBAAtBG,EAAAA,YAA4GC,EAAA,OAA/E,SAAUJ,EAAA,SAAW,UAAWA,EAAA,MAAQ,KAAMA,EAAA,KAAM,MAAM"}
+{"version":3,"file":"NeonBadge.vue.cjs.js","sources":["../../../../src/components/presentation/badge/NeonBadge.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      `neon-badge--${color}`,\n      alternateColor ? `neon-badge--alternate-color-${alternateColor}` : '',\n      `neon-badge--${size}`,\n      {\n        'neon-badge--with-label': label,\n        'neon-badge--disabled': disabled,\n        'neon-badge--with-image': image,\n        'neon-badge--with-icon': icon,\n        'neon-badge--editable': editable,\n      },\n      circular ? 'neon-badge--circular' : 'neon-badge--square',\n    ]\"\n    class=\"neon-badge\"\n  >\n    <div v-if=\"jazziconId\" class=\"neon-badge__image\" v-html=\"svg\" />\n    <span v-else-if=\"label\" class=\"neon-badge__label\">{{ label }}</span>\n    <img v-else-if=\"image\" :alt=\"imageAlt\" :src=\"image\" class=\"neon-badge__image\" />\n    <neon-icon v-else-if=\"icon\" :disabled=\"disabled\" :inverse=\"!!color\" :name=\"icon\" class=\"neon-badge__icon\" />\n    <neon-file\n      v-if=\"editable\"\n      :accept=\"accept\"\n      :circular=\"circular\"\n      :color=\"color\"\n      :direct-upload=\"true\"\n      :disabled=\"disabled\"\n      :size=\"size\"\n      :title=\"editButtonTitle\"\n      class=\"neon-badge__upload\"\n      icon=\"pencil\"\n      @update:modelValue=\"emit('change-image', $event)\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonBadge.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_hoisted_2","_toDisplayString","_createBlock","_component_neon_icon","_component_neon_file","_cache","$event"],"mappings":"6JAkB4B,MAAM,4JAjBhCA,EAAAA,mBAiCM,MAAA,CAhCH,MAAKC,EAAAA,eAAA,CAAA,gBAAyBC,EAAA,KAAK,GAAUA,EAAA,8CAAgDA,EAAA,cAAc,GAAA,kBAA8BA,EAAA,IAAI,6BAA8CA,EAAA,6BAAuCA,EAAA,kCAA4CA,EAAA,8BAAwCA,EAAA,4BAAsCA,EAAA,UAAyBA,EAAA,SAAQ,uBAAA,sBAaxX,YAAY,CAAA,IAEPA,EAAA,0BAAXF,EAAAA,mBAAgE,MAAA,OAAzC,MAAM,oBAAoB,UAAQE,EAAA,gBACxCA,EAAA,qBAAjBF,EAAAA,mBAAoE,OAApEG,EAAoEC,EAAAA,gBAAfF,EAAA,KAAK,EAAA,CAAA,GAC1CA,EAAA,qBAAhBF,EAAAA,mBAAgF,MAAA,OAAxD,IAAKE,EAAA,SAAW,IAAKA,EAAA,MAAO,MAAM,gCACpCA,EAAA,oBAAtBG,EAAAA,YAA4GC,EAAA,OAA/E,SAAUJ,EAAA,SAAW,UAAWA,EAAA,MAAQ,KAAMA,EAAA,KAAM,MAAM,uFAE/EA,EAAA,wBADRG,EAAAA,YAYEE,EAAA,OAVC,OAAQL,EAAA,OACR,SAAUA,EAAA,SACV,MAAOA,EAAA,MACP,gBAAe,GACf,SAAUA,EAAA,SACV,KAAMA,EAAA,KACN,MAAOA,EAAA,gBACR,MAAM,qBACN,KAAK,SACJ,sBAAiBM,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAEP,EAAA,KAAI,eAAiBO,CAAM"}

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

@@ -1,14 +1,14 @@
-import l from "./NeonBadge.es.js";
-import { resolveComponent as i, openBlock as n, createElementBlock as o, normalizeClass as s, toDisplayString as r, createBlock as d, createCommentVNode as g } from "vue";
-import b from "../../../_virtual/_plugin-vue_export-helper.es.js";
-const m = ["innerHTML"], t = {
+import b from "./NeonBadge.es.js";
+import { resolveComponent as l, openBlock as n, createElementBlock as o, normalizeClass as c, toDisplayString as g, createBlock as i, createCommentVNode as d } from "vue";
+import m from "../../../_virtual/_plugin-vue_export-helper.es.js";
+const p = ["innerHTML"], u = {
   key: 1,
   class: "neon-badge__label"
-}, c = ["alt", "src"];
-function p(e, u, f, h, k, $) {
-  const a = i("neon-icon");
+}, f = ["alt", "src"];
+function k(e, a, z, $, h, v) {
+  const r = l("neon-icon"), s = l("neon-file");
   return n(), o("div", {
-    class: s([[
+    class: c([[
       `neon-badge--${e.color}`,
       e.alternateColor ? `neon-badge--alternate-color-${e.alternateColor}` : "",
       `neon-badge--${e.size}`,
@@ -16,7 +16,8 @@ function p(e, u, f, h, k, $) {
         "neon-badge--with-label": e.label,
         "neon-badge--disabled": e.disabled,
         "neon-badge--with-image": e.image,
-        "neon-badge--with-icon": e.icon
+        "neon-badge--with-icon": e.icon,
+        "neon-badge--editable": e.editable
       },
       e.circular ? "neon-badge--circular" : "neon-badge--square"
     ], "neon-badge"])
@@ -25,22 +26,35 @@ function p(e, u, f, h, k, $) {
       key: 0,
       class: "neon-badge__image",
       innerHTML: e.svg
-    }, null, 8, m)) : e.label ? (n(), o("span", t, r(e.label), 1)) : e.image ? (n(), o("img", {
+    }, null, 8, p)) : e.label ? (n(), o("span", u, g(e.label), 1)) : e.image ? (n(), o("img", {
       key: 2,
       alt: e.imageAlt,
       src: e.image,
       class: "neon-badge__image"
-    }, null, 8, c)) : e.icon ? (n(), d(a, {
+    }, null, 8, f)) : e.icon ? (n(), i(r, {
       key: 3,
       disabled: e.disabled,
       inverse: !!e.color,
       name: e.icon,
       class: "neon-badge__icon"
-    }, null, 8, ["disabled", "inverse", "name"])) : g("", !0)
+    }, null, 8, ["disabled", "inverse", "name"])) : d("", !0),
+    e.editable ? (n(), i(s, {
+      key: 4,
+      accept: e.accept,
+      circular: e.circular,
+      color: e.color,
+      "direct-upload": !0,
+      disabled: e.disabled,
+      size: e.size,
+      title: e.editButtonTitle,
+      class: "neon-badge__upload",
+      icon: "pencil",
+      "onUpdate:modelValue": a[0] || (a[0] = (t) => e.emit("change-image", t))
+    }, null, 8, ["accept", "circular", "color", "disabled", "size", "title"])) : d("", !0)
   ], 2);
 }
-const _ = /* @__PURE__ */ b(l, [["render", p]]);
+const w = /* @__PURE__ */ m(b, [["render", k]]);
 export {
-  _ as default
+  w as default
 };
 //# sourceMappingURL=NeonBadge.vue.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NeonBadge.vue.es.js","sources":["../../../../src/components/presentation/badge/NeonBadge.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      `neon-badge--${color}`,\n      alternateColor ? `neon-badge--alternate-color-${alternateColor}` : '',\n      `neon-badge--${size}`,\n      {\n        'neon-badge--with-label': label,\n        'neon-badge--disabled': disabled,\n        'neon-badge--with-image': image,\n        'neon-badge--with-icon': icon,\n      },\n      circular ? 'neon-badge--circular' : 'neon-badge--square',\n    ]\"\n    class=\"neon-badge\"\n  >\n    <div v-if=\"jazziconId\" class=\"neon-badge__image\" v-html=\"svg\" />\n    <span v-else-if=\"label\" class=\"neon-badge__label\">{{ label }}</span>\n    <img v-else-if=\"image\" :alt=\"imageAlt\" :src=\"image\" class=\"neon-badge__image\" />\n    <neon-icon v-else-if=\"icon\" :disabled=\"disabled\" :inverse=\"!!color\" :name=\"icon\" class=\"neon-badge__icon\" />\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonBadge.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_hoisted_2","_toDisplayString","_createBlock","_component_neon_icon"],"mappings":";;;;;EAiB4B,OAAM;;;;cAhBhCA,EAmBM,OAAA;AAAA,IAlBH,OAAKC,EAAA,CAAA;AAAA,qBAAyBC,EAAA,KAAK;AAAA,MAAUA,EAAA,gDAAgDA,EAAA,cAAc,KAAA;AAAA,qBAA8BA,EAAA,IAAI;AAAA;kCAA8CA,EAAA;AAAA,gCAAuCA,EAAA;AAAA,kCAA4CA,EAAA;AAAA,iCAAwCA,EAAA;AAAA;MAAqBA,EAAA,WAAQ,yBAAA;AAAA,OAY9U,YAAY,CAAA;AAAA;IAEPA,EAAA,mBAAXF,EAAgE,OAAA;AAAA;MAAzC,OAAM;AAAA,MAAoB,WAAQE,EAAA;AAAA,sBACxCA,EAAA,cAAjBF,EAAoE,QAApEG,GAAoEC,EAAfF,EAAA,KAAK,GAAA,CAAA,KAC1CA,EAAA,cAAhBF,EAAgF,OAAA;AAAA;MAAxD,KAAKE,EAAA;AAAA,MAAW,KAAKA,EAAA;AAAA,MAAO,OAAM;AAAA,sBACpCA,EAAA,aAAtBG,EAA4GC,GAAA;AAAA;MAA/E,UAAUJ,EAAA;AAAA,MAAW,WAAWA,EAAA;AAAA,MAAQ,MAAMA,EAAA;AAAA,MAAM,OAAM;AAAA;;;;"}
+{"version":3,"file":"NeonBadge.vue.es.js","sources":["../../../../src/components/presentation/badge/NeonBadge.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      `neon-badge--${color}`,\n      alternateColor ? `neon-badge--alternate-color-${alternateColor}` : '',\n      `neon-badge--${size}`,\n      {\n        'neon-badge--with-label': label,\n        'neon-badge--disabled': disabled,\n        'neon-badge--with-image': image,\n        'neon-badge--with-icon': icon,\n        'neon-badge--editable': editable,\n      },\n      circular ? 'neon-badge--circular' : 'neon-badge--square',\n    ]\"\n    class=\"neon-badge\"\n  >\n    <div v-if=\"jazziconId\" class=\"neon-badge__image\" v-html=\"svg\" />\n    <span v-else-if=\"label\" class=\"neon-badge__label\">{{ label }}</span>\n    <img v-else-if=\"image\" :alt=\"imageAlt\" :src=\"image\" class=\"neon-badge__image\" />\n    <neon-icon v-else-if=\"icon\" :disabled=\"disabled\" :inverse=\"!!color\" :name=\"icon\" class=\"neon-badge__icon\" />\n    <neon-file\n      v-if=\"editable\"\n      :accept=\"accept\"\n      :circular=\"circular\"\n      :color=\"color\"\n      :direct-upload=\"true\"\n      :disabled=\"disabled\"\n      :size=\"size\"\n      :title=\"editButtonTitle\"\n      class=\"neon-badge__upload\"\n      icon=\"pencil\"\n      @update:modelValue=\"emit('change-image', $event)\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonBadge.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_hoisted_2","_toDisplayString","_createBlock","_component_neon_icon","_component_neon_file","_cache","$event"],"mappings":";;;;;EAkB4B,OAAM;;;;cAjBhCA,EAiCM,OAAA;AAAA,IAhCH,OAAKC,EAAA,CAAA;AAAA,qBAAyBC,EAAA,KAAK;AAAA,MAAUA,EAAA,gDAAgDA,EAAA,cAAc,KAAA;AAAA,qBAA8BA,EAAA,IAAI;AAAA;kCAA8CA,EAAA;AAAA,gCAAuCA,EAAA;AAAA,kCAA4CA,EAAA;AAAA,iCAAwCA,EAAA;AAAA,gCAAsCA,EAAA;AAAA;MAAyBA,EAAA,WAAQ,yBAAA;AAAA,OAaxX,YAAY,CAAA;AAAA;IAEPA,EAAA,mBAAXF,EAAgE,OAAA;AAAA;MAAzC,OAAM;AAAA,MAAoB,WAAQE,EAAA;AAAA,sBACxCA,EAAA,cAAjBF,EAAoE,QAApEG,GAAoEC,EAAfF,EAAA,KAAK,GAAA,CAAA,KAC1CA,EAAA,cAAhBF,EAAgF,OAAA;AAAA;MAAxD,KAAKE,EAAA;AAAA,MAAW,KAAKA,EAAA;AAAA,MAAO,OAAM;AAAA,sBACpCA,EAAA,aAAtBG,EAA4GC,GAAA;AAAA;MAA/E,UAAUJ,EAAA;AAAA,MAAW,WAAWA,EAAA;AAAA,MAAQ,MAAMA,EAAA;AAAA,MAAM,OAAM;AAAA;IAE/EA,EAAA,iBADRG,EAYEE,GAAA;AAAA;MAVC,QAAQL,EAAA;AAAA,MACR,UAAUA,EAAA;AAAA,MACV,OAAOA,EAAA;AAAA,MACP,iBAAe;AAAA,MACf,UAAUA,EAAA;AAAA,MACV,MAAMA,EAAA;AAAA,MACN,OAAOA,EAAA;AAAA,MACR,OAAM;AAAA,MACN,MAAK;AAAA,MACJ,uBAAiBM,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEP,EAAA,KAAI,gBAAiBO,CAAM;AAAA;;;;"}

package/dist/components/user-input/button/NeonButton.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue"),f=require("../../../common/enums/NeonButtonSize.cjs.js"),y=require("../../../common/enums/NeonFunctionalColor.cjs.js"),o=require("../../../common/enums/NeonButtonStyle.cjs.js"),S=require("../../../common/enums/NeonHorizontalPosition.cjs.js"),N=require("../../presentation/icon/NeonIcon.vue.cjs.js"),B=require("../../navigation/link/NeonLink.vue.cjs.js"),g=require("../../presentation/expansion-indicator/NeonExpansionIndicator.vue.cjs.js"),l=require("../../../common/enums/NeonState.cjs.js"),m=e.defineComponent({name:"NeonButton",components:{NeonExpansionIndicator:g,NeonIcon:N,NeonLink:B},props:{href:{type:String,default:null},label:{type:String,default:null},size:{type:String,default:f.NeonButtonSize.Medium},color:{type:String,default:y.NeonFunctionalColor.Primary},inverse:{type:Boolean,default:!1},alternateColor:{type:String,default:null},icon:{type:String,default:null},iconAriaLabel:{type:String},iconPosition:{type:String,default:S.NeonHorizontalPosition.Left},buttonStyle:{type:String,default:o.NeonButtonStyle.Solid},state:{type:String,default:l.NeonState.Ready},disabled:{type:Boolean,default:!1},transparent:{type:Boolean,default:!1},outline:{type:Boolean,default:!0},circular:{type:Boolean,default:null},fullWidth:{type:Boolean,default:null},indicator:{type:Boolean,default:!1},indicatorExpanded:{type:Boolean,default:null}},emits:["click"],setup(t,{emit:a}){const u=e.useAttrs(),i=e.ref(null),c=e.computed(()=>{switch(t.state){case l.NeonState.Loading:return"loading";case l.NeonState.Success:return"check";case l.NeonState.Error:return"times";default:return t.icon}}),r=e.computed(()=>[`neon-button--${t.size}`,!t.inverse&&`neon-button--${t.color}`,`neon-button--${t.buttonStyle}`,`neon-button--state-${t.state}`,{"neon-button--text-transparent":t.transparent&&t.buttonStyle===o.NeonButtonStyle.Text,"neon-button--disabled":t.disabled,"neon-button--inverse":t.inverse,"neon-button--circular":t.circular,"neon-button--no-outline":!t.outline,"neon-button--full-width":t.fullWidth,"neon-button--with-icon neon-button--icon-only":t.buttonStyle!==o.NeonButtonStyle.Input&&!t.label&&t.icon&&!t.indicator,"neon-button--with-icon neon-button--icon-left":t.label&&t.icon&&t.iconPosition==="left","neon-button--with-icon neon-button--icon-right":(t.label||t.buttonStyle===o.NeonButtonStyle.Input)&&t.icon&&t.iconPosition==="right",[`neon-button--alternate-color-${t.alternateColor}`]:t.alternateColor}]),d=()=>{var n;return(n=i.value)==null?void 0:n.click()},s=e.computed(()=>{const{onClick:n,...b}=u;return b});return{iconName:c,classes:r,button:i,attrs:u,sanitizedAttributes:s,clickLink:d,clickButton:()=>{var n;t.disabled||a("click"),(n=i.value)==null||n.blur()}}}});module.exports=m;
+"use strict";const e=require("vue"),y=require("../../../common/enums/NeonButtonSize.cjs.js"),f=require("../../../common/enums/NeonFunctionalColor.cjs.js"),o=require("../../../common/enums/NeonButtonStyle.cjs.js"),S=require("../../../common/enums/NeonHorizontalPosition.cjs.js"),N=require("../../presentation/icon/NeonIcon.vue.cjs.js"),B=require("../../navigation/link/NeonLink.vue.cjs.js"),g=require("../../presentation/expansion-indicator/NeonExpansionIndicator.vue.cjs.js"),l=require("../../../common/enums/NeonState.cjs.js"),m=require("../../../common/enums/NeonButtonType.cjs.js"),h=e.defineComponent({name:"NeonButton",components:{NeonExpansionIndicator:g,NeonIcon:N,NeonLink:B},props:{href:{type:String,default:null},label:{type:String,default:null},size:{type:String,default:y.NeonButtonSize.Medium},color:{type:String,default:f.NeonFunctionalColor.Primary},inverse:{type:Boolean,default:!1},alternateColor:{type:String,default:null},icon:{type:String,default:null},iconAriaLabel:{type:String},iconPosition:{type:String,default:S.NeonHorizontalPosition.Left},buttonStyle:{type:String,default:o.NeonButtonStyle.Solid},buttonType:{type:String,default:m.NeonButtonType.Button},state:{type:String,default:l.NeonState.Ready},disabled:{type:Boolean,default:!1},transparent:{type:Boolean,default:!1},outline:{type:Boolean,default:!0},circular:{type:Boolean,default:null},fullWidth:{type:Boolean,default:null},indicator:{type:Boolean,default:!1},indicatorExpanded:{type:Boolean,default:null}},emits:["click"],setup(t,{emit:a}){const u=e.useAttrs(),i=e.ref(null),c=e.computed(()=>{switch(t.state){case l.NeonState.Loading:return"loading";case l.NeonState.Success:return"check";case l.NeonState.Error:return"times";default:return t.icon}}),r=e.computed(()=>[`neon-button--${t.size}`,!t.inverse&&`neon-button--${t.color}`,`neon-button--${t.buttonStyle}`,`neon-button--state-${t.state}`,{"neon-button--text-transparent":t.transparent&&t.buttonStyle===o.NeonButtonStyle.Text,"neon-button--disabled":t.disabled,"neon-button--inverse":t.inverse,"neon-button--circular":t.circular,"neon-button--no-outline":!t.outline,"neon-button--full-width":t.fullWidth,"neon-button--with-icon neon-button--icon-only":t.buttonStyle!==o.NeonButtonStyle.Input&&!t.label&&t.icon&&!t.indicator,"neon-button--with-icon neon-button--icon-left":t.label&&t.icon&&t.iconPosition==="left","neon-button--with-icon neon-button--icon-right":(t.label||t.buttonStyle===o.NeonButtonStyle.Input)&&t.icon&&t.iconPosition==="right",[`neon-button--alternate-color-${t.alternateColor}`]:t.alternateColor}]),d=()=>{var n;return(n=i.value)==null?void 0:n.click()},s=e.computed(()=>{const{onClick:n,...b}=u;return b});return{iconName:c,classes:r,button:i,attrs:u,sanitizedAttributes:s,clickLink:d,clickButton:()=>{var n;t.disabled||a("click"),(n=i.value)==null||n.blur()}}}});module.exports=h;
 //# sourceMappingURL=NeonButton.cjs.js.map

package/dist/components/user-input/button/NeonButton.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonButton.cjs.js","sources":["../../../../src/components/user-input/button/NeonButton.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonButtonSize } from '@/common/enums/NeonButtonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonButtonStyle } from '@/common/enums/NeonButtonStyle';\nimport { NeonHorizontalPosition } from '@/common/enums/NeonHorizontalPosition';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\nimport { NeonState } from '@/common/enums/NeonState';\n\n/**\n * A button component. Renders an HTML button or, if an href is provided, renders using NeonLink in the style of a button. NeonButton supports all events and attributes of HTML buttons, e.g, @click.\n */\nexport default defineComponent({\n  name: 'NeonButton',\n  components: {\n    NeonExpansionIndicator,\n    NeonIcon,\n    NeonLink,\n  },\n  props: {\n    /**\n     * Optional href for rendering a button as a link\n     */\n    href: { type: String, default: null },\n    /**\n     * The text to display on a button\n     */\n    label: { type: String, default: null },\n    /**\n     * The button size\n     */\n    size: { type: String as () => NeonButtonSize, default: NeonButtonSize.Medium },\n    /**\n     * The button color\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * Display the button as high-contrast with inverted colors. This is useful for placing a button on a colored background.\n     * NOTE: Supports Solid & Outline button styles only (gradient & text buttons are not supported)\n     */\n    inverse: { type: Boolean, default: false },\n    /**\n     * Solid buttons ONLY. Alternate color for creating a gradient buttons. NOTE: can also be the same color as 'color'.\n     */\n    alternateColor: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Optional icon to display\n     */\n    icon: { type: String, default: null },\n    /**\n     * The aria label of the icon button\n     */\n    iconAriaLabel: { type: String },\n    /**\n     * Position of the icon if combined with text\n     */\n    iconPosition: { type: String as () => NeonHorizontalPosition, default: NeonHorizontalPosition.Left },\n    /**\n     * The style of button\n     */\n    buttonStyle: { type: String as () => NeonButtonStyle, default: NeonButtonStyle.Solid },\n    /**\n     * Provide button states of <em>ready, loading, success or error</em> which change the display of the button (with icons) to reflect the state.\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * Whether the button is disabled\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * For text buttons, do not display the background. This is useful for icon buttons in headers.\n     */\n    transparent: { type: Boolean, default: false },\n    /**\n     * Whether to display a button outline when the button has focus\n     */\n    outline: { type: Boolean, default: true },\n    /**\n     * Make the button circular. NOTE: This is only for icon only buttons.\n     */\n    circular: { type: Boolean, default: null },\n    /**\n     * Make a button extend to the full width of the parent container.\n     */\n    fullWidth: { type: Boolean, default: null },\n    /**\n     * INTERNAL USE ONLY: display a NeonExpansionIndicator on the button (used for dropdown buttons)\n     * @ignore\n     */\n    indicator: { type: Boolean, default: false },\n    /**\n     * INTERNAL USE ONLY: display the NeonExpansionIndicator on the button as <em>open</em> or <em>closed</em>.\n     * @ignore\n     */\n    indicatorExpanded: { type: Boolean, default: null },\n  },\n  emits: [\n    /**\n     * Emitted when the user clicks on the button or link.\n     */\n    'click',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const button = ref<HTMLElement | null>(null);\n\n    const iconName = computed(() => {\n      switch (props.state) {\n        case NeonState.Loading:\n          return 'loading';\n        case NeonState.Success:\n          return 'check';\n        case NeonState.Error:\n          return 'times';\n        default:\n          return props.icon;\n      }\n    });\n\n    const classes = computed(() => {\n      return [\n        `neon-button--${props.size}`,\n        !props.inverse && `neon-button--${props.color}`,\n        `neon-button--${props.buttonStyle}`,\n        `neon-button--state-${props.state}`,\n        {\n          'neon-button--text-transparent': props.transparent && props.buttonStyle === NeonButtonStyle.Text,\n          'neon-button--disabled': props.disabled,\n          'neon-button--inverse': props.inverse,\n          'neon-button--circular': props.circular,\n          'neon-button--no-outline': !props.outline,\n          'neon-button--full-width': props.fullWidth,\n          'neon-button--with-icon neon-button--icon-only':\n            props.buttonStyle !== NeonButtonStyle.Input && !props.label && props.icon && !props.indicator,\n          'neon-button--with-icon neon-button--icon-left': props.label && props.icon && props.iconPosition === 'left',\n          'neon-button--with-icon neon-button--icon-right':\n            (props.label || props.buttonStyle === NeonButtonStyle.Input) &&\n            props.icon &&\n            props.iconPosition === 'right',\n          [`neon-button--alternate-color-${props.alternateColor}`]: props.alternateColor,\n        },\n      ];\n    });\n\n    const clickLink = () => button.value?.click();\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onClick, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const clickButton = () => {\n      if (!props.disabled) {\n        emit('click');\n      }\n      button.value?.blur();\n    };\n\n    return {\n      iconName,\n      classes,\n      button,\n      attrs,\n      sanitizedAttributes,\n      clickLink,\n      clickButton,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonExpansionIndicator","NeonIcon","NeonLink","NeonButtonSize","NeonFunctionalColor","NeonHorizontalPosition","NeonButtonStyle","NeonState","props","emit","attrs","useAttrs","button","ref","iconName","computed","classes","clickLink","_a","sanitizedAttributes","onClick","sanitized"],"mappings":"ghBAaAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,WAAY,CACV,uBAAAC,EACA,SAAAC,EACA,SAAAC,CAAA,EAEF,MAAO,CAIL,KAAM,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI/B,MAAO,CAAE,KAAM,OAAQ,QAAS,IAAA,EAIhC,KAAM,CAAE,KAAM,OAAgC,QAASC,EAAAA,eAAe,MAAA,EAItE,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,OAAA,EAKjF,QAAS,CAAE,KAAM,QAAS,QAAS,EAAA,EAInC,eAAgB,CAAE,KAAM,OAAqC,QAAS,IAAA,EAItE,KAAM,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI/B,cAAe,CAAE,KAAM,MAAA,EAIvB,aAAc,CAAE,KAAM,OAAwC,QAASC,EAAAA,uBAAuB,IAAA,EAI9F,YAAa,CAAE,KAAM,OAAiC,QAASC,EAAAA,gBAAgB,KAAA,EAI/E,MAAO,CAAE,KAAM,OAA2B,QAASC,EAAAA,UAAU,KAAA,EAI7D,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,YAAa,CAAE,KAAM,QAAS,QAAS,EAAA,EAIvC,QAAS,CAAE,KAAM,QAAS,QAAS,EAAA,EAInC,SAAU,CAAE,KAAM,QAAS,QAAS,IAAA,EAIpC,UAAW,CAAE,KAAM,QAAS,QAAS,IAAA,EAKrC,UAAW,CAAE,KAAM,QAAS,QAAS,EAAA,EAKrC,kBAAmB,CAAE,KAAM,QAAS,QAAS,IAAA,CAAK,EAEpD,MAAO,CAIL,OAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAQC,EAAAA,SAAA,EAERC,EAASC,EAAAA,IAAwB,IAAI,EAErCC,EAAWC,EAAAA,SAAS,IAAM,CAC9B,OAAQP,EAAM,MAAA,CACZ,KAAKD,EAAAA,UAAU,QACb,MAAO,UACT,KAAKA,EAAAA,UAAU,QACb,MAAO,QACT,KAAKA,EAAAA,UAAU,MACb,MAAO,QACT,QACE,OAAOC,EAAM,IAAA,CAEnB,CAAC,EAEKQ,EAAUD,EAAAA,SAAS,IAChB,CACL,gBAAgBP,EAAM,IAAI,GAC1B,CAACA,EAAM,SAAW,gBAAgBA,EAAM,KAAK,GAC7C,gBAAgBA,EAAM,WAAW,GACjC,sBAAsBA,EAAM,KAAK,GACjC,CACE,gCAAiCA,EAAM,aAAeA,EAAM,cAAgBF,EAAAA,gBAAgB,KAC5F,wBAAyBE,EAAM,SAC/B,uBAAwBA,EAAM,QAC9B,wBAAyBA,EAAM,SAC/B,0BAA2B,CAACA,EAAM,QAClC,0BAA2BA,EAAM,UACjC,gDACEA,EAAM,cAAgBF,EAAAA,gBAAgB,OAAS,CAACE,EAAM,OAASA,EAAM,MAAQ,CAACA,EAAM,UACtF,gDAAiDA,EAAM,OAASA,EAAM,MAAQA,EAAM,eAAiB,OACrG,kDACGA,EAAM,OAASA,EAAM,cAAgBF,kBAAgB,QACtDE,EAAM,MACNA,EAAM,eAAiB,QACzB,CAAC,gCAAgCA,EAAM,cAAc,EAAE,EAAGA,EAAM,cAAA,CAClE,CAEH,EAEKS,EAAY,IAAA,OAAM,OAAAC,EAAAN,EAAO,QAAP,YAAAM,EAAc,SAEhCC,EAAsBJ,EAAAA,SAAS,IAAM,CAEzC,KAAM,CAAE,QAAAK,EAAS,GAAGC,CAAA,EAAcX,EAClC,OAAOW,CACT,CAAC,EASD,MAAO,CACL,SAAAP,EACA,QAAAE,EACA,OAAAJ,EACA,MAAAF,EACA,oBAAAS,EACA,UAAAF,EACA,YAdkB,IAAM,OACnBT,EAAM,UACTC,EAAK,OAAO,GAEdS,EAAAN,EAAO,QAAP,MAAAM,EAAc,MAChB,CASE,CAEJ,CACF,CAAC"}
+{"version":3,"file":"NeonButton.cjs.js","sources":["../../../../src/components/user-input/button/NeonButton.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonButtonSize } from '@/common/enums/NeonButtonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonButtonStyle } from '@/common/enums/NeonButtonStyle';\nimport { NeonHorizontalPosition } from '@/common/enums/NeonHorizontalPosition';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\nimport { NeonState } from '@/common/enums/NeonState';\nimport { NeonButtonType } from '@/common/enums/NeonButtonType';\n\n/**\n * A button component. Renders an HTML button or, if an href is provided, renders using NeonLink in the style of a\n * button. NeonButton supports all events and attributes of HTML buttons, e.g, @click.\n */\nexport default defineComponent({\n  name: 'NeonButton',\n  components: {\n    NeonExpansionIndicator,\n    NeonIcon,\n    NeonLink,\n  },\n  props: {\n    /**\n     * Optional href for rendering a button as a link\n     */\n    href: { type: String, default: null },\n    /**\n     * The text to display on a button\n     */\n    label: { type: String, default: null },\n    /**\n     * The button size\n     */\n    size: { type: String as () => NeonButtonSize, default: NeonButtonSize.Medium },\n    /**\n     * The button color\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * Display the button as high-contrast with inverted colors. This is useful for placing a button on a colored background.\n     * NOTE: Supports Solid & Outline button styles only (gradient & text buttons are not supported)\n     */\n    inverse: { type: Boolean, default: false },\n    /**\n     * Solid buttons ONLY. Alternate color for creating a gradient buttons. NOTE: can also be the same color as 'color'.\n     */\n    alternateColor: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Optional icon to display\n     */\n    icon: { type: String, default: null },\n    /**\n     * The aria label of the icon button\n     */\n    iconAriaLabel: { type: String },\n    /**\n     * Position of the icon if combined with text\n     */\n    iconPosition: { type: String as () => NeonHorizontalPosition, default: NeonHorizontalPosition.Left },\n    /**\n     * The style of button\n     */\n    buttonStyle: { type: String as () => NeonButtonStyle, default: NeonButtonStyle.Solid },\n    /**\n     * The type of button, see <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button\">button</a>.\n     */\n    buttonType: { type: String as () => NeonButtonType, default: NeonButtonType.Button },\n    /**\n     * Provide button states of <em>ready, loading, success or error</em> which change the display of the button (with\n     * icons) to reflect the state.\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * Whether the button is disabled\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * For text buttons, do not display the background. This is useful for icon buttons in headers.\n     */\n    transparent: { type: Boolean, default: false },\n    /**\n     * Whether to display a button outline when the button has focus\n     */\n    outline: { type: Boolean, default: true },\n    /**\n     * Make the button circular. NOTE: This is only for icon only buttons.\n     */\n    circular: { type: Boolean, default: null },\n    /**\n     * Make a button extend to the full width of the parent container.\n     */\n    fullWidth: { type: Boolean, default: null },\n    /**\n     * INTERNAL USE ONLY: display a NeonExpansionIndicator on the button (used for dropdown buttons)\n     * @ignore\n     */\n    indicator: { type: Boolean, default: false },\n    /**\n     * INTERNAL USE ONLY: display the NeonExpansionIndicator on the button as <em>open</em> or <em>closed</em>.\n     * @ignore\n     */\n    indicatorExpanded: { type: Boolean, default: null },\n  },\n  emits: [\n    /**\n     * Emitted when the user clicks on the button or link.\n     */\n    'click',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const button = ref<HTMLElement | null>(null);\n\n    const iconName = computed(() => {\n      switch (props.state) {\n        case NeonState.Loading:\n          return 'loading';\n        case NeonState.Success:\n          return 'check';\n        case NeonState.Error:\n          return 'times';\n        default:\n          return props.icon;\n      }\n    });\n\n    const classes = computed(() => {\n      return [\n        `neon-button--${props.size}`,\n        !props.inverse && `neon-button--${props.color}`,\n        `neon-button--${props.buttonStyle}`,\n        `neon-button--state-${props.state}`,\n        {\n          'neon-button--text-transparent': props.transparent && props.buttonStyle === NeonButtonStyle.Text,\n          'neon-button--disabled': props.disabled,\n          'neon-button--inverse': props.inverse,\n          'neon-button--circular': props.circular,\n          'neon-button--no-outline': !props.outline,\n          'neon-button--full-width': props.fullWidth,\n          'neon-button--with-icon neon-button--icon-only':\n            props.buttonStyle !== NeonButtonStyle.Input && !props.label && props.icon && !props.indicator,\n          'neon-button--with-icon neon-button--icon-left': props.label && props.icon && props.iconPosition === 'left',\n          'neon-button--with-icon neon-button--icon-right':\n            (props.label || props.buttonStyle === NeonButtonStyle.Input) &&\n            props.icon &&\n            props.iconPosition === 'right',\n          [`neon-button--alternate-color-${props.alternateColor}`]: props.alternateColor,\n        },\n      ];\n    });\n\n    const clickLink = () => button.value?.click();\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onClick, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const clickButton = () => {\n      if (!props.disabled) {\n        emit('click');\n      }\n      button.value?.blur();\n    };\n\n    return {\n      iconName,\n      classes,\n      button,\n      attrs,\n      sanitizedAttributes,\n      clickLink,\n      clickButton,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonExpansionIndicator","NeonIcon","NeonLink","NeonButtonSize","NeonFunctionalColor","NeonHorizontalPosition","NeonButtonStyle","NeonButtonType","NeonState","props","emit","attrs","useAttrs","button","ref","iconName","computed","classes","clickLink","_a","sanitizedAttributes","onClick","sanitized"],"mappings":"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"}

package/dist/components/user-input/button/NeonButton.es.js

@@ -1,18 +1,19 @@
-import { defineComponent as s, useAttrs as m, ref as y, computed as i } from "vue";
+import { defineComponent as m, useAttrs as s, ref as y, computed as i } from "vue";
 import { NeonButtonSize as S } from "../../../common/enums/NeonButtonSize.es.js";
 import { NeonFunctionalColor as g } from "../../../common/enums/NeonFunctionalColor.es.js";
 import { NeonButtonStyle as e } from "../../../common/enums/NeonButtonStyle.es.js";
 import { NeonHorizontalPosition as B } from "../../../common/enums/NeonHorizontalPosition.es.js";
 import h from "../../presentation/icon/NeonIcon.vue.es.js";
-import k from "../../navigation/link/NeonLink.vue.es.js";
-import N from "../../presentation/expansion-indicator/NeonExpansionIndicator.vue.es.js";
+import N from "../../navigation/link/NeonLink.vue.es.js";
+import k from "../../presentation/expansion-indicator/NeonExpansionIndicator.vue.es.js";
 import { NeonState as o } from "../../../common/enums/NeonState.es.js";
-const E = s({
+import { NeonButtonType as v } from "../../../common/enums/NeonButtonType.es.js";
+const W = m({
   name: "NeonButton",
   components: {
-    NeonExpansionIndicator: N,
+    NeonExpansionIndicator: k,
     NeonIcon: h,
-    NeonLink: k
+    NeonLink: N
   },
   props: {
     /**
@@ -57,7 +58,12 @@ const E = s({
      */
     buttonStyle: { type: String, default: e.Solid },
     /**
-     * Provide button states of <em>ready, loading, success or error</em> which change the display of the button (with icons) to reflect the state.
+     * The type of button, see <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button">button</a>.
+     */
+    buttonType: { type: String, default: v.Button },
+    /**
+     * Provide button states of <em>ready, loading, success or error</em> which change the display of the button (with
+     * icons) to reflect the state.
      */
     state: { type: String, default: o.Ready },
     /**
@@ -98,7 +104,7 @@ const E = s({
     "click"
   ],
   setup(t, { emit: u }) {
-    const a = m(), l = y(null), c = i(() => {
+    const a = s(), l = y(null), r = i(() => {
       switch (t.state) {
         case o.Loading:
           return "loading";
@@ -109,7 +115,7 @@ const E = s({
         default:
           return t.icon;
       }
-    }), r = i(() => [
+    }), c = i(() => [
       `neon-button--${t.size}`,
       !t.inverse && `neon-button--${t.color}`,
       `neon-button--${t.buttonStyle}`,
@@ -134,8 +140,8 @@ const E = s({
       return b;
     });
     return {
-      iconName: c,
-      classes: r,
+      iconName: r,
+      classes: c,
       button: l,
       attrs: a,
       sanitizedAttributes: f,
@@ -148,6 +154,6 @@ const E = s({
   }
 });
 export {
-  E as default
+  W as default
 };
 //# sourceMappingURL=NeonButton.es.js.map

package/dist/components/user-input/button/NeonButton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonButton.es.js","sources":["../../../../src/components/user-input/button/NeonButton.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonButtonSize } from '@/common/enums/NeonButtonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonButtonStyle } from '@/common/enums/NeonButtonStyle';\nimport { NeonHorizontalPosition } from '@/common/enums/NeonHorizontalPosition';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\nimport { NeonState } from '@/common/enums/NeonState';\n\n/**\n * A button component. Renders an HTML button or, if an href is provided, renders using NeonLink in the style of a button. NeonButton supports all events and attributes of HTML buttons, e.g, @click.\n */\nexport default defineComponent({\n  name: 'NeonButton',\n  components: {\n    NeonExpansionIndicator,\n    NeonIcon,\n    NeonLink,\n  },\n  props: {\n    /**\n     * Optional href for rendering a button as a link\n     */\n    href: { type: String, default: null },\n    /**\n     * The text to display on a button\n     */\n    label: { type: String, default: null },\n    /**\n     * The button size\n     */\n    size: { type: String as () => NeonButtonSize, default: NeonButtonSize.Medium },\n    /**\n     * The button color\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * Display the button as high-contrast with inverted colors. This is useful for placing a button on a colored background.\n     * NOTE: Supports Solid & Outline button styles only (gradient & text buttons are not supported)\n     */\n    inverse: { type: Boolean, default: false },\n    /**\n     * Solid buttons ONLY. Alternate color for creating a gradient buttons. NOTE: can also be the same color as 'color'.\n     */\n    alternateColor: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Optional icon to display\n     */\n    icon: { type: String, default: null },\n    /**\n     * The aria label of the icon button\n     */\n    iconAriaLabel: { type: String },\n    /**\n     * Position of the icon if combined with text\n     */\n    iconPosition: { type: String as () => NeonHorizontalPosition, default: NeonHorizontalPosition.Left },\n    /**\n     * The style of button\n     */\n    buttonStyle: { type: String as () => NeonButtonStyle, default: NeonButtonStyle.Solid },\n    /**\n     * Provide button states of <em>ready, loading, success or error</em> which change the display of the button (with icons) to reflect the state.\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * Whether the button is disabled\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * For text buttons, do not display the background. This is useful for icon buttons in headers.\n     */\n    transparent: { type: Boolean, default: false },\n    /**\n     * Whether to display a button outline when the button has focus\n     */\n    outline: { type: Boolean, default: true },\n    /**\n     * Make the button circular. NOTE: This is only for icon only buttons.\n     */\n    circular: { type: Boolean, default: null },\n    /**\n     * Make a button extend to the full width of the parent container.\n     */\n    fullWidth: { type: Boolean, default: null },\n    /**\n     * INTERNAL USE ONLY: display a NeonExpansionIndicator on the button (used for dropdown buttons)\n     * @ignore\n     */\n    indicator: { type: Boolean, default: false },\n    /**\n     * INTERNAL USE ONLY: display the NeonExpansionIndicator on the button as <em>open</em> or <em>closed</em>.\n     * @ignore\n     */\n    indicatorExpanded: { type: Boolean, default: null },\n  },\n  emits: [\n    /**\n     * Emitted when the user clicks on the button or link.\n     */\n    'click',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const button = ref<HTMLElement | null>(null);\n\n    const iconName = computed(() => {\n      switch (props.state) {\n        case NeonState.Loading:\n          return 'loading';\n        case NeonState.Success:\n          return 'check';\n        case NeonState.Error:\n          return 'times';\n        default:\n          return props.icon;\n      }\n    });\n\n    const classes = computed(() => {\n      return [\n        `neon-button--${props.size}`,\n        !props.inverse && `neon-button--${props.color}`,\n        `neon-button--${props.buttonStyle}`,\n        `neon-button--state-${props.state}`,\n        {\n          'neon-button--text-transparent': props.transparent && props.buttonStyle === NeonButtonStyle.Text,\n          'neon-button--disabled': props.disabled,\n          'neon-button--inverse': props.inverse,\n          'neon-button--circular': props.circular,\n          'neon-button--no-outline': !props.outline,\n          'neon-button--full-width': props.fullWidth,\n          'neon-button--with-icon neon-button--icon-only':\n            props.buttonStyle !== NeonButtonStyle.Input && !props.label && props.icon && !props.indicator,\n          'neon-button--with-icon neon-button--icon-left': props.label && props.icon && props.iconPosition === 'left',\n          'neon-button--with-icon neon-button--icon-right':\n            (props.label || props.buttonStyle === NeonButtonStyle.Input) &&\n            props.icon &&\n            props.iconPosition === 'right',\n          [`neon-button--alternate-color-${props.alternateColor}`]: props.alternateColor,\n        },\n      ];\n    });\n\n    const clickLink = () => button.value?.click();\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onClick, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const clickButton = () => {\n      if (!props.disabled) {\n        emit('click');\n      }\n      button.value?.blur();\n    };\n\n    return {\n      iconName,\n      classes,\n      button,\n      attrs,\n      sanitizedAttributes,\n      clickLink,\n      clickButton,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonExpansionIndicator","NeonIcon","NeonLink","NeonButtonSize","NeonFunctionalColor","NeonHorizontalPosition","NeonButtonStyle","NeonState","props","emit","attrs","useAttrs","button","ref","iconName","computed","classes","clickLink","_a","sanitizedAttributes","onClick","sanitized"],"mappings":"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"}
+{"version":3,"file":"NeonButton.es.js","sources":["../../../../src/components/user-input/button/NeonButton.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonButtonSize } from '@/common/enums/NeonButtonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonButtonStyle } from '@/common/enums/NeonButtonStyle';\nimport { NeonHorizontalPosition } from '@/common/enums/NeonHorizontalPosition';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\nimport { NeonState } from '@/common/enums/NeonState';\nimport { NeonButtonType } from '@/common/enums/NeonButtonType';\n\n/**\n * A button component. Renders an HTML button or, if an href is provided, renders using NeonLink in the style of a\n * button. NeonButton supports all events and attributes of HTML buttons, e.g, @click.\n */\nexport default defineComponent({\n  name: 'NeonButton',\n  components: {\n    NeonExpansionIndicator,\n    NeonIcon,\n    NeonLink,\n  },\n  props: {\n    /**\n     * Optional href for rendering a button as a link\n     */\n    href: { type: String, default: null },\n    /**\n     * The text to display on a button\n     */\n    label: { type: String, default: null },\n    /**\n     * The button size\n     */\n    size: { type: String as () => NeonButtonSize, default: NeonButtonSize.Medium },\n    /**\n     * The button color\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * Display the button as high-contrast with inverted colors. This is useful for placing a button on a colored background.\n     * NOTE: Supports Solid & Outline button styles only (gradient & text buttons are not supported)\n     */\n    inverse: { type: Boolean, default: false },\n    /**\n     * Solid buttons ONLY. Alternate color for creating a gradient buttons. NOTE: can also be the same color as 'color'.\n     */\n    alternateColor: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Optional icon to display\n     */\n    icon: { type: String, default: null },\n    /**\n     * The aria label of the icon button\n     */\n    iconAriaLabel: { type: String },\n    /**\n     * Position of the icon if combined with text\n     */\n    iconPosition: { type: String as () => NeonHorizontalPosition, default: NeonHorizontalPosition.Left },\n    /**\n     * The style of button\n     */\n    buttonStyle: { type: String as () => NeonButtonStyle, default: NeonButtonStyle.Solid },\n    /**\n     * The type of button, see <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button\">button</a>.\n     */\n    buttonType: { type: String as () => NeonButtonType, default: NeonButtonType.Button },\n    /**\n     * Provide button states of <em>ready, loading, success or error</em> which change the display of the button (with\n     * icons) to reflect the state.\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * Whether the button is disabled\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * For text buttons, do not display the background. This is useful for icon buttons in headers.\n     */\n    transparent: { type: Boolean, default: false },\n    /**\n     * Whether to display a button outline when the button has focus\n     */\n    outline: { type: Boolean, default: true },\n    /**\n     * Make the button circular. NOTE: This is only for icon only buttons.\n     */\n    circular: { type: Boolean, default: null },\n    /**\n     * Make a button extend to the full width of the parent container.\n     */\n    fullWidth: { type: Boolean, default: null },\n    /**\n     * INTERNAL USE ONLY: display a NeonExpansionIndicator on the button (used for dropdown buttons)\n     * @ignore\n     */\n    indicator: { type: Boolean, default: false },\n    /**\n     * INTERNAL USE ONLY: display the NeonExpansionIndicator on the button as <em>open</em> or <em>closed</em>.\n     * @ignore\n     */\n    indicatorExpanded: { type: Boolean, default: null },\n  },\n  emits: [\n    /**\n     * Emitted when the user clicks on the button or link.\n     */\n    'click',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const button = ref<HTMLElement | null>(null);\n\n    const iconName = computed(() => {\n      switch (props.state) {\n        case NeonState.Loading:\n          return 'loading';\n        case NeonState.Success:\n          return 'check';\n        case NeonState.Error:\n          return 'times';\n        default:\n          return props.icon;\n      }\n    });\n\n    const classes = computed(() => {\n      return [\n        `neon-button--${props.size}`,\n        !props.inverse && `neon-button--${props.color}`,\n        `neon-button--${props.buttonStyle}`,\n        `neon-button--state-${props.state}`,\n        {\n          'neon-button--text-transparent': props.transparent && props.buttonStyle === NeonButtonStyle.Text,\n          'neon-button--disabled': props.disabled,\n          'neon-button--inverse': props.inverse,\n          'neon-button--circular': props.circular,\n          'neon-button--no-outline': !props.outline,\n          'neon-button--full-width': props.fullWidth,\n          'neon-button--with-icon neon-button--icon-only':\n            props.buttonStyle !== NeonButtonStyle.Input && !props.label && props.icon && !props.indicator,\n          'neon-button--with-icon neon-button--icon-left': props.label && props.icon && props.iconPosition === 'left',\n          'neon-button--with-icon neon-button--icon-right':\n            (props.label || props.buttonStyle === NeonButtonStyle.Input) &&\n            props.icon &&\n            props.iconPosition === 'right',\n          [`neon-button--alternate-color-${props.alternateColor}`]: props.alternateColor,\n        },\n      ];\n    });\n\n    const clickLink = () => button.value?.click();\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onClick, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const clickButton = () => {\n      if (!props.disabled) {\n        emit('click');\n      }\n      button.value?.blur();\n    };\n\n    return {\n      iconName,\n      classes,\n      button,\n      attrs,\n      sanitizedAttributes,\n      clickLink,\n      clickButton,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonExpansionIndicator","NeonIcon","NeonLink","NeonButtonSize","NeonFunctionalColor","NeonHorizontalPosition","NeonButtonStyle","NeonButtonType","NeonState","props","emit","attrs","useAttrs","button","ref","iconName","computed","classes","clickLink","_a","sanitizedAttributes","onClick","sanitized"],"mappings":"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"}

package/dist/components/user-input/button/NeonButton.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const r=require("./NeonButton.cjs.js"),n=require("vue"),a=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),d={key:1,class:"neon-button__label"},u=["disabled","tabindex"],b={key:1,class:"neon-button__label"};function c(e,o,k,m,y,B){const t=n.resolveComponent("neon-icon"),l=n.resolveComponent("neon-link"),i=n.resolveComponent("neon-expansion-indicator");return e.href?(n.openBlock(),n.createBlock(l,n.mergeProps({key:0,ref:"button",class:[e.classes,"neon-button"],href:e.href,tabindex:e.disabled?-1:0,"outline-style":"none",role:"button"},e.sanitizedAttributes,{onKeydown:n.withKeys(n.withModifiers(e.clickLink,["prevent"]),["space"])}),{default:n.withCtx(()=>[e.icon||e.state!=="ready"?(n.openBlock(),n.createBlock(t,{key:0,color:e.buttonStyle!=="solid"?e.color:void 0,disabled:e.disabled,inverse:e.buttonStyle==="solid"||e.inverse,name:e.iconName},null,8,["color","disabled","inverse","name"])):n.createCommentVNode("",!0),e.label?(n.openBlock(),n.createElementBlock("span",d,n.toDisplayString(e.label),1)):n.createCommentVNode("",!0)]),_:1},16,["class","href","tabindex","onKeydown"])):(n.openBlock(),n.createElementBlock("button",n.mergeProps({key:1,ref:"button",class:[e.classes,"neon-button"],disabled:e.disabled||e.state!=="ready",tabindex:e.disabled?-1:0},e.sanitizedAttributes,{onClick:o[0]||(o[0]=(...s)=>e.clickButton&&e.clickButton(...s))}),[e.icon||e.state!=="ready"?(n.openBlock(),n.createBlock(t,{key:0,"aria-label":e.iconAriaLabel,color:e.buttonStyle!=="solid"?e.color:void 0,disabled:e.disabled,inverse:e.buttonStyle==="solid"||e.inverse,name:e.iconName},null,8,["aria-label","color","disabled","inverse","name"])):n.createCommentVNode("",!0),e.label||e.buttonStyle==="input"?(n.openBlock(),n.createElementBlock("span",b,n.toDisplayString(e.label||e.buttonStyle==="input"&&""),1)):n.createCommentVNode("",!0),e.indicator?(n.openBlock(),n.createBlock(i,{key:2,color:e.buttonStyle==="text"?e.color:"low-contrast",disabled:e.disabled,expanded:e.indicatorExpanded,inverse:e.buttonStyle==="solid"||e.inverse,class:"neon-button__indicator"},null,8,["color","disabled","expanded","inverse"])):n.createCommentVNode("",!0)],16,u))}const p=a(r,[["render",c]]);module.exports=p;
+"use strict";const r=require("./NeonButton.cjs.js"),n=require("vue"),a=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),d={key:1,class:"neon-button__label"},u=["disabled","tabindex","type"],b={key:1,class:"neon-button__label"};function p(e,o,k,y,m,B){const t=n.resolveComponent("neon-icon"),l=n.resolveComponent("neon-link"),i=n.resolveComponent("neon-expansion-indicator");return e.href?(n.openBlock(),n.createBlock(l,n.mergeProps({key:0,ref:"button",class:[e.classes,"neon-button"],href:e.href,tabindex:e.disabled?-1:0,"outline-style":"none",role:"button"},e.sanitizedAttributes,{onKeydown:n.withKeys(n.withModifiers(e.clickLink,["prevent"]),["space"])}),{default:n.withCtx(()=>[e.icon||e.state!=="ready"?(n.openBlock(),n.createBlock(t,{key:0,color:e.buttonStyle!=="solid"?e.color:void 0,disabled:e.disabled,inverse:e.buttonStyle==="solid"||e.inverse,name:e.iconName},null,8,["color","disabled","inverse","name"])):n.createCommentVNode("",!0),e.label?(n.openBlock(),n.createElementBlock("span",d,n.toDisplayString(e.label),1)):n.createCommentVNode("",!0)]),_:1},16,["class","href","tabindex","onKeydown"])):(n.openBlock(),n.createElementBlock("button",n.mergeProps({key:1,ref:"button",class:[e.classes,"neon-button"],disabled:e.disabled||e.state!=="ready",tabindex:e.disabled?-1:0,type:e.buttonType},e.sanitizedAttributes,{onClick:o[0]||(o[0]=(...s)=>e.clickButton&&e.clickButton(...s))}),[e.icon||e.state!=="ready"?(n.openBlock(),n.createBlock(t,{key:0,"aria-label":e.iconAriaLabel,color:e.buttonStyle!=="solid"?e.color:void 0,disabled:e.disabled,inverse:e.buttonStyle==="solid"||e.inverse,name:e.iconName},null,8,["aria-label","color","disabled","inverse","name"])):n.createCommentVNode("",!0),e.label||e.buttonStyle==="input"?(n.openBlock(),n.createElementBlock("span",b,n.toDisplayString(e.label||e.buttonStyle==="input"&&""),1)):n.createCommentVNode("",!0),e.indicator?(n.openBlock(),n.createBlock(i,{key:2,color:e.buttonStyle==="text"?e.color:"low-contrast",disabled:e.disabled,expanded:e.indicatorExpanded,inverse:e.buttonStyle==="solid"||e.inverse,class:"neon-button__indicator"},null,8,["color","disabled","expanded","inverse"])):n.createCommentVNode("",!0)],16,u))}const c=a(r,[["render",p]]);module.exports=c;
 //# sourceMappingURL=NeonButton.vue.cjs.js.map

package/dist/components/user-input/button/NeonButton.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonButton.vue.cjs.js","sources":["../../../../src/components/user-input/button/NeonButton.vue"],"sourcesContent":["<template>\n  <neon-link\n    v-if=\"href\"\n    ref=\"button\"\n    :class=\"classes\"\n    :href=\"href\"\n    :tabindex=\"!disabled ? 0 : -1\"\n    class=\"neon-button\"\n    outline-style=\"none\"\n    role=\"button\"\n    v-bind=\"sanitizedAttributes\"\n    @keydown.space.prevent=\"clickLink\"\n  >\n    <neon-icon\n      v-if=\"icon || state !== 'ready'\"\n      :color=\"buttonStyle !== 'solid' ? color : undefined\"\n      :disabled=\"disabled\"\n      :inverse=\"buttonStyle === 'solid' || inverse\"\n      :name=\"iconName\"\n    />\n    <span v-if=\"label\" class=\"neon-button__label\">{{ label }}</span>\n  </neon-link>\n  <button\n    v-else\n    ref=\"button\"\n    :class=\"classes\"\n    :disabled=\"disabled || state !== 'ready'\"\n    :tabindex=\"!disabled ? 0 : -1\"\n    class=\"neon-button\"\n    v-bind=\"sanitizedAttributes\"\n    @click=\"clickButton\"\n  >\n    <neon-icon\n      v-if=\"icon || state !== 'ready'\"\n      :aria-label=\"iconAriaLabel\"\n      :color=\"buttonStyle !== 'solid' ? color : undefined\"\n      :disabled=\"disabled\"\n      :inverse=\"buttonStyle === 'solid' || inverse\"\n      :name=\"iconName\"\n    />\n    <span v-if=\"label || buttonStyle === 'input'\" class=\"neon-button__label\">\n      {{ label || (buttonStyle === 'input' && '') }}\n    </span>\n    <neon-expansion-indicator\n      v-if=\"indicator\"\n      :color=\"buttonStyle === 'text' ? color : 'low-contrast'\"\n      :disabled=\"disabled\"\n      :expanded=\"indicatorExpanded\"\n      :inverse=\"buttonStyle === 'solid' || inverse\"\n      class=\"neon-button__indicator\"\n    />\n  </button>\n</template>\n\n<script lang=\"ts\" src=\"./NeonButton.ts\" />\n"],"names":["_ctx","_openBlock","_createBlock","_component_neon_link","_mergeProps","_component_neon_icon","_createElementBlock","_hoisted_1","_toDisplayString","args","_hoisted_3","_component_neon_expansion_indicator"],"mappings":"8IAoBuB,MAAM,yDAoBqB,MAAM,gLAtC9CA,EAAA,MADRC,EAAAA,YAAAC,EAAAA,YAoBYC,EApBZC,aAoBY,OAlBV,IAAI,SACH,MAAK,CAAEJ,EAAA,QAGF,aAAa,EAFlB,KAAMA,EAAA,KACN,SAAWA,EAAA,SAAQ,GAAA,EAEpB,gBAAc,OACd,KAAK,UACGA,EAAA,oBAAmB,CAC1B,qCAAuBA,EAAA,UAAS,CAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,uBAEjC,IAME,CALMA,EAAA,MAAQA,EAAA,QAAK,uBADrBE,EAAAA,YAMEG,EAAA,OAJC,MAAOL,EAAA,cAAW,QAAeA,EAAA,MAAQ,OACzC,SAAUA,EAAA,SACV,QAASA,EAAA,cAAW,SAAgBA,EAAA,QACpC,KAAMA,EAAA,qFAEGA,EAAA,qBAAZM,EAAAA,mBAAgE,OAAhEC,EAAgEC,EAAAA,gBAAfR,EAAA,KAAK,EAAA,CAAA,oFAExDC,EAAAA,YAAAK,EAAAA,mBA6BS,SA7BTF,aA6BS,OA3BP,IAAI,SACH,MAAK,CAAEJ,EAAA,QAGF,aAAa,EAFlB,SAAUA,EAAA,UAAYA,EAAA,QAAK,QAC3B,SAAWA,EAAA,SAAQ,GAAA,GAEZA,EAAA,oBAAmB,CAC1B,4BAAOA,EAAA,aAAAA,EAAA,YAAA,GAAAS,CAAA,MAGAT,EAAA,MAAQA,EAAA,QAAK,uBADrBE,EAAAA,YAOEG,EAAA,OALC,aAAYL,EAAA,cACZ,MAAOA,EAAA,cAAW,QAAeA,EAAA,MAAQ,OACzC,SAAUA,EAAA,SACV,QAASA,EAAA,cAAW,SAAgBA,EAAA,QACpC,KAAMA,EAAA,kGAEGA,EAAA,OAASA,EAAA,cAAW,SAAhCC,EAAAA,UAAA,EAAAK,EAAAA,mBAEO,OAFPI,EAEOF,EAAAA,gBADFR,EAAA,OAAUA,EAAA,cAAW,SAAA,EAAA,EAAA,CAAA,+BAGlBA,EAAA,yBADRE,EAAAA,YAOES,EAAA,OALC,MAAOX,EAAA,cAAW,OAAcA,EAAA,MAAK,eACrC,SAAUA,EAAA,SACV,SAAUA,EAAA,kBACV,QAASA,EAAA,cAAW,SAAgBA,EAAA,QACrC,MAAM"}
+{"version":3,"file":"NeonButton.vue.cjs.js","sources":["../../../../src/components/user-input/button/NeonButton.vue"],"sourcesContent":["<template>\n  <neon-link\n    v-if=\"href\"\n    ref=\"button\"\n    :class=\"classes\"\n    :href=\"href\"\n    :tabindex=\"!disabled ? 0 : -1\"\n    class=\"neon-button\"\n    outline-style=\"none\"\n    role=\"button\"\n    v-bind=\"sanitizedAttributes\"\n    @keydown.space.prevent=\"clickLink\"\n  >\n    <neon-icon\n      v-if=\"icon || state !== 'ready'\"\n      :color=\"buttonStyle !== 'solid' ? color : undefined\"\n      :disabled=\"disabled\"\n      :inverse=\"buttonStyle === 'solid' || inverse\"\n      :name=\"iconName\"\n    />\n    <span v-if=\"label\" class=\"neon-button__label\">{{ label }}</span>\n  </neon-link>\n  <button\n    v-else\n    ref=\"button\"\n    :class=\"classes\"\n    :disabled=\"disabled || state !== 'ready'\"\n    :tabindex=\"!disabled ? 0 : -1\"\n    :type=\"buttonType\"\n    class=\"neon-button\"\n    v-bind=\"sanitizedAttributes\"\n    @click=\"clickButton\"\n  >\n    <neon-icon\n      v-if=\"icon || state !== 'ready'\"\n      :aria-label=\"iconAriaLabel\"\n      :color=\"buttonStyle !== 'solid' ? color : undefined\"\n      :disabled=\"disabled\"\n      :inverse=\"buttonStyle === 'solid' || inverse\"\n      :name=\"iconName\"\n    />\n    <span v-if=\"label || buttonStyle === 'input'\" class=\"neon-button__label\">\n      {{ label || (buttonStyle === 'input' && '') }}\n    </span>\n    <neon-expansion-indicator\n      v-if=\"indicator\"\n      :color=\"buttonStyle === 'text' ? color : 'low-contrast'\"\n      :disabled=\"disabled\"\n      :expanded=\"indicatorExpanded\"\n      :inverse=\"buttonStyle === 'solid' || inverse\"\n      class=\"neon-button__indicator\"\n    />\n  </button>\n</template>\n\n<script lang=\"ts\" src=\"./NeonButton.ts\" />\n"],"names":["_ctx","_openBlock","_createBlock","_component_neon_link","_mergeProps","_component_neon_icon","_createElementBlock","_hoisted_1","_toDisplayString","args","_hoisted_3","_component_neon_expansion_indicator"],"mappings":"8IAoBuB,MAAM,gEAqBqB,MAAM,gLAvC9CA,EAAA,MADRC,EAAAA,YAAAC,EAAAA,YAoBYC,EApBZC,aAoBY,OAlBV,IAAI,SACH,MAAK,CAAEJ,EAAA,QAGF,aAAa,EAFlB,KAAMA,EAAA,KACN,SAAWA,EAAA,SAAQ,GAAA,EAEpB,gBAAc,OACd,KAAK,UACGA,EAAA,oBAAmB,CAC1B,qCAAuBA,EAAA,UAAS,CAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,uBAEjC,IAME,CALMA,EAAA,MAAQA,EAAA,QAAK,uBADrBE,EAAAA,YAMEG,EAAA,OAJC,MAAOL,EAAA,cAAW,QAAeA,EAAA,MAAQ,OACzC,SAAUA,EAAA,SACV,QAASA,EAAA,cAAW,SAAgBA,EAAA,QACpC,KAAMA,EAAA,qFAEGA,EAAA,qBAAZM,EAAAA,mBAAgE,OAAhEC,EAAgEC,EAAAA,gBAAfR,EAAA,KAAK,EAAA,CAAA,oFAExDC,EAAAA,YAAAK,EAAAA,mBA8BS,SA9BTF,aA8BS,OA5BP,IAAI,SACH,MAAK,CAAEJ,EAAA,QAIF,aAAa,EAHlB,SAAUA,EAAA,UAAYA,EAAA,QAAK,QAC3B,SAAWA,EAAA,SAAQ,GAAA,EACnB,KAAMA,EAAA,YAECA,EAAA,oBAAmB,CAC1B,4BAAOA,EAAA,aAAAA,EAAA,YAAA,GAAAS,CAAA,MAGAT,EAAA,MAAQA,EAAA,QAAK,uBADrBE,EAAAA,YAOEG,EAAA,OALC,aAAYL,EAAA,cACZ,MAAOA,EAAA,cAAW,QAAeA,EAAA,MAAQ,OACzC,SAAUA,EAAA,SACV,QAASA,EAAA,cAAW,SAAgBA,EAAA,QACpC,KAAMA,EAAA,kGAEGA,EAAA,OAASA,EAAA,cAAW,SAAhCC,EAAAA,UAAA,EAAAK,EAAAA,mBAEO,OAFPI,EAEOF,EAAAA,gBADFR,EAAA,OAAUA,EAAA,cAAW,SAAA,EAAA,EAAA,CAAA,+BAGlBA,EAAA,yBADRE,EAAAA,YAOES,EAAA,OALC,MAAOX,EAAA,cAAW,OAAcA,EAAA,MAAK,eACrC,SAAUA,EAAA,SACV,SAAUA,EAAA,kBACV,QAASA,EAAA,cAAW,SAAgBA,EAAA,QACrC,MAAM"}