@aotearoan/neon 22.1.2 → 22.2.0

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/file/NeonFile.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const n=require("vue"),p=require("../../../common/enums/NeonSize.cjs.js"),m=require("../../../common/enums/NeonFunctionalColor.cjs.js"),y=require("../../../common/enums/NeonState.cjs.js"),g=require("../button/NeonButton.vue.cjs.js"),S=require("../input/NeonInput.vue.cjs.js"),N=require("../list/NeonList.vue.cjs.js"),v=n.defineComponent({name:"NeonFile",components:{NeonButton:g,NeonInput:S,NeonList:N},props:{disabled:{type:Boolean,default:!1},directUpload:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},accept:{type:String,default:null},id:{type:String,default:null},size:{type:String,default:p.NeonSize.Medium},state:{type:String,default:y.NeonState.Ready},color:{type:String,default:m.NeonFunctionalColor.Primary},label:{type:String,default:null},icon:{type:String,default:null}},emits:["update:modelValue"],setup(l,{emit:r}){const i=n.ref(null),t=n.ref([]),s=n.ref(""),c=n.computed(()=>t.value.map(e=>({key:e.name,label:e.name}))),a=()=>{r("update:modelValue",l.multiple?t.value:t.value[0]),l.directUpload&&(t.value=[])};return{fileInput:i,files:t,fileList:c,fileInputModel:s,remove:e=>{l.disabled||(t.value=t.value.filter(o=>o.name!==e),a())},clearAll:()=>{l.disabled||(t.value=[],a())},openFileDialog:()=>{var e;(e=i.value)==null||e.click()},onInput:e=>{if(e!=null&&e.target){const o=e.target.files,u=o?Array.from(o).filter(d=>!t.value.find(f=>f.name===d.name)):[];t.value=l.multiple?[...t.value,...u]:u,a()}}}}});module.exports=v;
+"use strict";const a=require("vue"),p=require("../../../common/enums/NeonSize.cjs.js"),m=require("../../../common/enums/NeonFunctionalColor.cjs.js"),y=require("../../../common/enums/NeonState.cjs.js"),g=require("../button/NeonButton.vue.cjs.js"),S=require("../input/NeonInput.vue.cjs.js"),N=require("../list/NeonList.vue.cjs.js"),v=a.defineComponent({name:"NeonFile",components:{NeonButton:g,NeonInput:S,NeonList:N},props:{disabled:{type:Boolean,default:!1},directUpload:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},accept:{type:String,default:null},id:{type:String,default:null},size:{type:String,default:p.NeonSize.Medium},state:{type:String,default:y.NeonState.Ready},color:{type:String,default:m.NeonFunctionalColor.Primary},circular:{type:Boolean,default:null},label:{type:String,default:null},icon:{type:String,default:null},title:{type:String,default:"Upload"}},emits:["update:modelValue"],setup(n,{emit:r}){const i=a.ref(null),t=a.ref([]),s=a.ref(""),c=a.computed(()=>t.value.map(e=>({key:e.name,label:e.name}))),o=()=>{r("update:modelValue",n.multiple?t.value:t.value[0]),n.directUpload&&(t.value=[])};return{fileInput:i,files:t,fileList:c,fileInputModel:s,remove:e=>{n.disabled||(t.value=t.value.filter(l=>l.name!==e),o())},clearAll:()=>{n.disabled||(t.value=[],o())},openFileDialog:()=>{var e,l;(l=(e=i.value)==null?void 0:e.neonInput)==null||l.click()},onInput:e=>{if(e!=null&&e.target){const l=e.target.files,u=l?Array.from(l).filter(d=>!t.value.find(f=>f.name===d.name)):[];t.value=n.multiple?[...t.value,...u]:u,o()}}}}});module.exports=v;
 //# sourceMappingURL=NeonFile.cjs.js.map

package/dist/components/user-input/file/NeonFile.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonFile.cjs.js","sources":["../../../../src/components/user-input/file/NeonFile.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonState } from '@/common/enums/NeonState';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport NeonList from '@/components/user-input/list/NeonList.vue';\n\n/**\n * A file upload component. This is a wrapper around an HTML file input. It can display multiple files as well as\n * providing a convenient UI for removing/clearing files from the list.\n */\nexport default defineComponent({\n  name: 'NeonFile',\n  components: {\n    NeonButton,\n    NeonInput,\n    NeonList,\n  },\n  props: {\n    /**\n     * The disabled state of the component\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Files are uploaded directly once added, there is no waiting to click a confirmation button\n     */\n    directUpload: { type: Boolean, default: false },\n    /**\n     * Support multiple files.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * HTML file input accept property for filtering the files the user is allowed to select. This is a mime type,\n     * e.g. 'application/pdf'.\n     */\n    accept: { type: String, default: null },\n    /**\n     * Provide an id to attach to the internal HTML input[file] (also adds an aria-controls link between the button and\n     * the hidden input).\n     */\n    id: { type: String, default: null },\n    /**\n     * The file component size\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The state of the input, used to indicate loading, success and error states\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * The file component color\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The label of the file component button\n     */\n    label: { type: String, default: null },\n    /**\n     * The icon of the file component button\n     */\n    icon: { type: String, default: null },\n  },\n  emits: [\n    /**\n     * Emitted when files are selected and uploaded\n     * @type {File | File[]} either a single File (multiple = false) or a list of File objects (multiple = true)\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const fileInput = ref<HTMLInputElement | null>(null);\n    const files = ref<Array<File>>([]);\n    const fileInputModel = ref('');\n\n    const fileList = computed(() => {\n      return files.value.map((file) => ({ key: file.name, label: file.name }));\n    });\n\n    const emitFiles = () => {\n      emit('update:modelValue', props.multiple ? files.value : files.value[0]);\n      if (props.directUpload) {\n        files.value = [];\n      }\n    };\n\n    const remove = (filename: string) => {\n      if (!props.disabled) {\n        files.value = files.value.filter((f) => f.name !== filename);\n        emitFiles();\n      }\n    };\n\n    const clearAll = () => {\n      if (!props.disabled) {\n        files.value = [];\n        emitFiles();\n      }\n    };\n\n    const openFileDialog = () => {\n      fileInput.value?.click();\n    };\n\n    const onInput = (event: Event) => {\n      if (event?.target) {\n        const theFiles = (event.target as HTMLInputElement).files;\n        const newFiles = theFiles\n          ? Array.from(theFiles).filter((file) => !files.value.find((f) => f.name === file.name))\n          : [];\n        files.value = props.multiple ? [...files.value, ...newFiles] : newFiles;\n        emitFiles();\n      }\n    };\n\n    return {\n      fileInput,\n      files,\n      fileList,\n      fileInputModel,\n      remove,\n      clearAll,\n      openFileDialog,\n      onInput,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonInput","NeonList","NeonSize","NeonState","NeonFunctionalColor","props","emit","fileInput","ref","files","fileInputModel","fileList","computed","file","emitFiles","filename","f","_a","event","theFiles","newFiles"],"mappings":"0UAYAA,EAAeC,kBAAgB,CAC7B,KAAM,WACN,WAAY,CACV,WAAAC,EACA,UAAAC,EACA,SAAAC,CAAA,EAEF,MAAO,CAIL,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,aAAc,CAAE,KAAM,QAAS,QAAS,EAAA,EAIxC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAKpC,OAAQ,CAAE,KAAM,OAAQ,QAAS,IAAA,EAKjC,GAAI,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI7B,KAAM,CAAE,KAAM,OAA0B,QAASC,EAAAA,SAAS,MAAA,EAI1D,MAAO,CAAE,KAAM,OAA2B,QAASC,EAAAA,UAAU,KAAA,EAI7D,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,OAAA,EAIjF,MAAO,CAAE,KAAM,OAAQ,QAAS,IAAA,EAIhC,KAAM,CAAE,KAAM,OAAQ,QAAS,IAAA,CAAK,EAEtC,MAAO,CAKL,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAYC,EAAAA,IAA6B,IAAI,EAC7CC,EAAQD,EAAAA,IAAiB,EAAE,EAC3BE,EAAiBF,EAAAA,IAAI,EAAE,EAEvBG,EAAWC,EAAAA,SAAS,IACjBH,EAAM,MAAM,IAAKI,IAAU,CAAE,IAAKA,EAAK,KAAM,MAAOA,EAAK,IAAA,EAAO,CACxE,EAEKC,EAAY,IAAM,CACtBR,EAAK,oBAAqBD,EAAM,SAAWI,EAAM,MAAQA,EAAM,MAAM,CAAC,CAAC,EACnEJ,EAAM,eACRI,EAAM,MAAQ,CAAA,EAElB,EA+BA,MAAO,CACL,UAAAF,EACA,MAAAE,EACA,SAAAE,EACA,eAAAD,EACA,OAlCcK,GAAqB,CAC9BV,EAAM,WACTI,EAAM,MAAQA,EAAM,MAAM,OAAQO,GAAMA,EAAE,OAASD,CAAQ,EAC3DD,EAAA,EAEJ,EA8BE,SA5Be,IAAM,CAChBT,EAAM,WACTI,EAAM,MAAQ,CAAA,EACdK,EAAA,EAEJ,EAwBE,eAtBqB,IAAM,QAC3BG,EAAAV,EAAU,QAAV,MAAAU,EAAiB,OACnB,EAqBE,QAnBeC,GAAiB,CAChC,GAAIA,GAAA,MAAAA,EAAO,OAAQ,CACjB,MAAMC,EAAYD,EAAM,OAA4B,MAC9CE,EAAWD,EACb,MAAM,KAAKA,CAAQ,EAAE,OAAQN,GAAS,CAACJ,EAAM,MAAM,KAAM,GAAM,EAAE,OAASI,EAAK,IAAI,CAAC,EACpF,CAAA,EACJJ,EAAM,MAAQJ,EAAM,SAAW,CAAC,GAAGI,EAAM,MAAO,GAAGW,CAAQ,EAAIA,EAC/DN,EAAA,CACF,CACF,CAUE,CAEJ,CACF,CAAC"}
+{"version":3,"file":"NeonFile.cjs.js","sources":["../../../../src/components/user-input/file/NeonFile.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonState } from '@/common/enums/NeonState';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport NeonList from '@/components/user-input/list/NeonList.vue';\n\n/**\n * A file upload component. This is a wrapper around an HTML file input. It can display multiple files as well as\n * providing a convenient UI for removing/clearing files from the list.\n */\nexport default defineComponent({\n  name: 'NeonFile',\n  components: {\n    NeonButton,\n    NeonInput,\n    NeonList,\n  },\n  props: {\n    /**\n     * The disabled state of the component\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Files are uploaded directly once added, there is no waiting to click a confirmation button\n     */\n    directUpload: { type: Boolean, default: false },\n    /**\n     * Support multiple files.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * HTML file input accept property for filtering the files the user is allowed to select. This is a mime type,\n     * e.g. 'application/pdf'.\n     */\n    accept: { type: String, default: null },\n    /**\n     * Provide an id to attach to the internal HTML input[file] (also adds an aria-controls link between the button and\n     * the hidden input).\n     */\n    id: { type: String, default: null },\n    /**\n     * The file component size\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The state of the input, used to indicate loading, success and error states\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * The file component color\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * Make the button circular. NOTE: This is only for icon only buttons.\n     */\n    circular: { type: Boolean, default: null },\n    /**\n     * The label of the file component button\n     */\n    label: { type: String, default: null },\n    /**\n     * The icon of the file component button\n     */\n    icon: { type: String, default: null },\n    /**\n     * Title for the file upload button.\n     */\n    title: { type: String, default: 'Upload' },\n  },\n  emits: [\n    /**\n     * Emitted when files are selected and uploaded\n     * @type {File | File[]} either a single File (multiple = false) or a list of File objects (multiple = true)\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const fileInput = ref<InstanceType<typeof NeonInput> | null>(null);\n    const files = ref<Array<File>>([]);\n    const fileInputModel = ref('');\n\n    const fileList = computed(() => {\n      return files.value.map((file) => ({ key: file.name, label: file.name }));\n    });\n\n    const emitFiles = () => {\n      emit('update:modelValue', props.multiple ? files.value : files.value[0]);\n      if (props.directUpload) {\n        files.value = [];\n      }\n    };\n\n    const remove = (filename: string) => {\n      if (!props.disabled) {\n        files.value = files.value.filter((f) => f.name !== filename);\n        emitFiles();\n      }\n    };\n\n    const clearAll = () => {\n      if (!props.disabled) {\n        files.value = [];\n        emitFiles();\n      }\n    };\n\n    const openFileDialog = () => {\n      fileInput.value?.neonInput?.click();\n    };\n\n    const onInput = (event: Event) => {\n      if (event?.target) {\n        const theFiles = (event.target as HTMLInputElement).files;\n        const newFiles = theFiles\n          ? Array.from(theFiles).filter((file) => !files.value.find((f) => f.name === file.name))\n          : [];\n        files.value = props.multiple ? [...files.value, ...newFiles] : newFiles;\n        emitFiles();\n      }\n    };\n\n    return {\n      fileInput,\n      files,\n      fileList,\n      fileInputModel,\n      remove,\n      clearAll,\n      openFileDialog,\n      onInput,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonInput","NeonList","NeonSize","NeonState","NeonFunctionalColor","props","emit","fileInput","ref","files","fileInputModel","fileList","computed","file","emitFiles","filename","f","_b","_a","event","theFiles","newFiles"],"mappings":"0UAYAA,EAAeC,kBAAgB,CAC7B,KAAM,WACN,WAAY,CACV,WAAAC,EACA,UAAAC,EACA,SAAAC,CAAA,EAEF,MAAO,CAIL,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,aAAc,CAAE,KAAM,QAAS,QAAS,EAAA,EAIxC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAKpC,OAAQ,CAAE,KAAM,OAAQ,QAAS,IAAA,EAKjC,GAAI,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI7B,KAAM,CAAE,KAAM,OAA0B,QAASC,EAAAA,SAAS,MAAA,EAI1D,MAAO,CAAE,KAAM,OAA2B,QAASC,EAAAA,UAAU,KAAA,EAI7D,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,OAAA,EAIjF,SAAU,CAAE,KAAM,QAAS,QAAS,IAAA,EAIpC,MAAO,CAAE,KAAM,OAAQ,QAAS,IAAA,EAIhC,KAAM,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI/B,MAAO,CAAE,KAAM,OAAQ,QAAS,QAAA,CAAS,EAE3C,MAAO,CAKL,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAYC,EAAAA,IAA2C,IAAI,EAC3DC,EAAQD,EAAAA,IAAiB,EAAE,EAC3BE,EAAiBF,EAAAA,IAAI,EAAE,EAEvBG,EAAWC,EAAAA,SAAS,IACjBH,EAAM,MAAM,IAAKI,IAAU,CAAE,IAAKA,EAAK,KAAM,MAAOA,EAAK,IAAA,EAAO,CACxE,EAEKC,EAAY,IAAM,CACtBR,EAAK,oBAAqBD,EAAM,SAAWI,EAAM,MAAQA,EAAM,MAAM,CAAC,CAAC,EACnEJ,EAAM,eACRI,EAAM,MAAQ,CAAA,EAElB,EA+BA,MAAO,CACL,UAAAF,EACA,MAAAE,EACA,SAAAE,EACA,eAAAD,EACA,OAlCcK,GAAqB,CAC9BV,EAAM,WACTI,EAAM,MAAQA,EAAM,MAAM,OAAQO,GAAMA,EAAE,OAASD,CAAQ,EAC3DD,EAAA,EAEJ,EA8BE,SA5Be,IAAM,CAChBT,EAAM,WACTI,EAAM,MAAQ,CAAA,EACdK,EAAA,EAEJ,EAwBE,eAtBqB,IAAM,UAC3BG,GAAAC,EAAAX,EAAU,QAAV,YAAAW,EAAiB,YAAjB,MAAAD,EAA4B,OAC9B,EAqBE,QAnBeE,GAAiB,CAChC,GAAIA,GAAA,MAAAA,EAAO,OAAQ,CACjB,MAAMC,EAAYD,EAAM,OAA4B,MAC9CE,EAAWD,EACb,MAAM,KAAKA,CAAQ,EAAE,OAAQP,GAAS,CAACJ,EAAM,MAAM,KAAM,GAAM,EAAE,OAASI,EAAK,IAAI,CAAC,EACpF,CAAA,EACJJ,EAAM,MAAQJ,EAAM,SAAW,CAAC,GAAGI,EAAM,MAAO,GAAGY,CAAQ,EAAIA,EAC/DP,EAAA,CACF,CACF,CAUE,CAEJ,CACF,CAAC"}

package/dist/components/user-input/file/NeonFile.es.js

@@ -47,6 +47,10 @@ const V = s({
      * The file component color
      */
     color: { type: String, default: g.Primary },
+    /**
+     * Make the button circular. NOTE: This is only for icon only buttons.
+     */
+    circular: { type: Boolean, default: null },
     /**
      * The label of the file component button
      */
@@ -54,7 +58,11 @@ const V = s({
     /**
      * The icon of the file component button
      */
-    icon: { type: String, default: null }
+    icon: { type: String, default: null },
+    /**
+     * Title for the file upload button.
+     */
+    title: { type: String, default: "Upload" }
   },
   emits: [
     /**
@@ -63,29 +71,29 @@ const V = s({
      */
     "update:modelValue"
   ],
-  setup(t, { emit: r }) {
-    const i = n(null), l = n([]), m = n(""), f = c(() => l.value.map((e) => ({ key: e.name, label: e.name }))), a = () => {
-      r("update:modelValue", t.multiple ? l.value : l.value[0]), t.directUpload && (l.value = []);
+  setup(o, { emit: r }) {
+    const i = n(null), l = n([]), f = n(""), m = c(() => l.value.map((e) => ({ key: e.name, label: e.name }))), a = () => {
+      r("update:modelValue", o.multiple ? l.value : l.value[0]), o.directUpload && (l.value = []);
     };
     return {
       fileInput: i,
       files: l,
-      fileList: f,
-      fileInputModel: m,
+      fileList: m,
+      fileInputModel: f,
       remove: (e) => {
-        t.disabled || (l.value = l.value.filter((o) => o.name !== e), a());
+        o.disabled || (l.value = l.value.filter((t) => t.name !== e), a());
       },
       clearAll: () => {
-        t.disabled || (l.value = [], a());
+        o.disabled || (l.value = [], a());
       },
       openFileDialog: () => {
-        var e;
-        (e = i.value) == null || e.click();
+        var e, t;
+        (t = (e = i.value) == null ? void 0 : e.neonInput) == null || t.click();
       },
       onInput: (e) => {
         if (e != null && e.target) {
-          const o = e.target.files, u = o ? Array.from(o).filter((d) => !l.value.find((p) => p.name === d.name)) : [];
-          l.value = t.multiple ? [...l.value, ...u] : u, a();
+          const t = e.target.files, u = t ? Array.from(t).filter((p) => !l.value.find((d) => d.name === p.name)) : [];
+          l.value = o.multiple ? [...l.value, ...u] : u, a();
         }
       }
     };

package/dist/components/user-input/file/NeonFile.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonFile.es.js","sources":["../../../../src/components/user-input/file/NeonFile.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonState } from '@/common/enums/NeonState';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport NeonList from '@/components/user-input/list/NeonList.vue';\n\n/**\n * A file upload component. This is a wrapper around an HTML file input. It can display multiple files as well as\n * providing a convenient UI for removing/clearing files from the list.\n */\nexport default defineComponent({\n  name: 'NeonFile',\n  components: {\n    NeonButton,\n    NeonInput,\n    NeonList,\n  },\n  props: {\n    /**\n     * The disabled state of the component\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Files are uploaded directly once added, there is no waiting to click a confirmation button\n     */\n    directUpload: { type: Boolean, default: false },\n    /**\n     * Support multiple files.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * HTML file input accept property for filtering the files the user is allowed to select. This is a mime type,\n     * e.g. 'application/pdf'.\n     */\n    accept: { type: String, default: null },\n    /**\n     * Provide an id to attach to the internal HTML input[file] (also adds an aria-controls link between the button and\n     * the hidden input).\n     */\n    id: { type: String, default: null },\n    /**\n     * The file component size\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The state of the input, used to indicate loading, success and error states\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * The file component color\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The label of the file component button\n     */\n    label: { type: String, default: null },\n    /**\n     * The icon of the file component button\n     */\n    icon: { type: String, default: null },\n  },\n  emits: [\n    /**\n     * Emitted when files are selected and uploaded\n     * @type {File | File[]} either a single File (multiple = false) or a list of File objects (multiple = true)\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const fileInput = ref<HTMLInputElement | null>(null);\n    const files = ref<Array<File>>([]);\n    const fileInputModel = ref('');\n\n    const fileList = computed(() => {\n      return files.value.map((file) => ({ key: file.name, label: file.name }));\n    });\n\n    const emitFiles = () => {\n      emit('update:modelValue', props.multiple ? files.value : files.value[0]);\n      if (props.directUpload) {\n        files.value = [];\n      }\n    };\n\n    const remove = (filename: string) => {\n      if (!props.disabled) {\n        files.value = files.value.filter((f) => f.name !== filename);\n        emitFiles();\n      }\n    };\n\n    const clearAll = () => {\n      if (!props.disabled) {\n        files.value = [];\n        emitFiles();\n      }\n    };\n\n    const openFileDialog = () => {\n      fileInput.value?.click();\n    };\n\n    const onInput = (event: Event) => {\n      if (event?.target) {\n        const theFiles = (event.target as HTMLInputElement).files;\n        const newFiles = theFiles\n          ? Array.from(theFiles).filter((file) => !files.value.find((f) => f.name === file.name))\n          : [];\n        files.value = props.multiple ? [...files.value, ...newFiles] : newFiles;\n        emitFiles();\n      }\n    };\n\n    return {\n      fileInput,\n      files,\n      fileList,\n      fileInputModel,\n      remove,\n      clearAll,\n      openFileDialog,\n      onInput,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonInput","NeonList","NeonSize","NeonState","NeonFunctionalColor","props","emit","fileInput","ref","files","fileInputModel","fileList","computed","file","emitFiles","filename","f","_a","event","theFiles","newFiles"],"mappings":";;;;;;;AAYA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,cAAc,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIxC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKpC,QAAQ,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjC,IAAI,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI7B,MAAM,EAAE,MAAM,QAA0B,SAASC,EAAS,OAAA;AAAA;AAAA;AAAA;AAAA,IAI1D,OAAO,EAAE,MAAM,QAA2B,SAASC,EAAU,MAAA;AAAA;AAAA;AAAA;AAAA,IAI7D,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,QAAA;AAAA;AAAA;AAAA;AAAA,IAIjF,OAAO,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,MAAM,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA,EAAK;AAAA,EAEtC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,UAAMC,IAAYC,EAA6B,IAAI,GAC7CC,IAAQD,EAAiB,EAAE,GAC3BE,IAAiBF,EAAI,EAAE,GAEvBG,IAAWC,EAAS,MACjBH,EAAM,MAAM,IAAI,CAACI,OAAU,EAAE,KAAKA,EAAK,MAAM,OAAOA,EAAK,KAAA,EAAO,CACxE,GAEKC,IAAY,MAAM;AACtB,MAAAR,EAAK,qBAAqBD,EAAM,WAAWI,EAAM,QAAQA,EAAM,MAAM,CAAC,CAAC,GACnEJ,EAAM,iBACRI,EAAM,QAAQ,CAAA;AAAA,IAElB;AA+BA,WAAO;AAAA,MACL,WAAAF;AAAA,MACA,OAAAE;AAAA,MACA,UAAAE;AAAA,MACA,gBAAAD;AAAA,MACA,QAlCa,CAACK,MAAqB;AACnC,QAAKV,EAAM,aACTI,EAAM,QAAQA,EAAM,MAAM,OAAO,CAACO,MAAMA,EAAE,SAASD,CAAQ,GAC3DD,EAAA;AAAA,MAEJ;AAAA,MA8BE,UA5Be,MAAM;AACrB,QAAKT,EAAM,aACTI,EAAM,QAAQ,CAAA,GACdK,EAAA;AAAA,MAEJ;AAAA,MAwBE,gBAtBqB,MAAM;;AAC3B,SAAAG,IAAAV,EAAU,UAAV,QAAAU,EAAiB;AAAA,MACnB;AAAA,MAqBE,SAnBc,CAACC,MAAiB;AAChC,YAAIA,KAAA,QAAAA,EAAO,QAAQ;AACjB,gBAAMC,IAAYD,EAAM,OAA4B,OAC9CE,IAAWD,IACb,MAAM,KAAKA,CAAQ,EAAE,OAAO,CAACN,MAAS,CAACJ,EAAM,MAAM,KAAK,CAACO,MAAMA,EAAE,SAASH,EAAK,IAAI,CAAC,IACpF,CAAA;AACJ,UAAAJ,EAAM,QAAQJ,EAAM,WAAW,CAAC,GAAGI,EAAM,OAAO,GAAGW,CAAQ,IAAIA,GAC/DN,EAAA;AAAA,QACF;AAAA,MACF;AAAA,IAUE;AAAA,EAEJ;AACF,CAAC;"}
+{"version":3,"file":"NeonFile.es.js","sources":["../../../../src/components/user-input/file/NeonFile.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonState } from '@/common/enums/NeonState';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport NeonList from '@/components/user-input/list/NeonList.vue';\n\n/**\n * A file upload component. This is a wrapper around an HTML file input. It can display multiple files as well as\n * providing a convenient UI for removing/clearing files from the list.\n */\nexport default defineComponent({\n  name: 'NeonFile',\n  components: {\n    NeonButton,\n    NeonInput,\n    NeonList,\n  },\n  props: {\n    /**\n     * The disabled state of the component\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Files are uploaded directly once added, there is no waiting to click a confirmation button\n     */\n    directUpload: { type: Boolean, default: false },\n    /**\n     * Support multiple files.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * HTML file input accept property for filtering the files the user is allowed to select. This is a mime type,\n     * e.g. 'application/pdf'.\n     */\n    accept: { type: String, default: null },\n    /**\n     * Provide an id to attach to the internal HTML input[file] (also adds an aria-controls link between the button and\n     * the hidden input).\n     */\n    id: { type: String, default: null },\n    /**\n     * The file component size\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The state of the input, used to indicate loading, success and error states\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * The file component color\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * Make the button circular. NOTE: This is only for icon only buttons.\n     */\n    circular: { type: Boolean, default: null },\n    /**\n     * The label of the file component button\n     */\n    label: { type: String, default: null },\n    /**\n     * The icon of the file component button\n     */\n    icon: { type: String, default: null },\n    /**\n     * Title for the file upload button.\n     */\n    title: { type: String, default: 'Upload' },\n  },\n  emits: [\n    /**\n     * Emitted when files are selected and uploaded\n     * @type {File | File[]} either a single File (multiple = false) or a list of File objects (multiple = true)\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const fileInput = ref<InstanceType<typeof NeonInput> | null>(null);\n    const files = ref<Array<File>>([]);\n    const fileInputModel = ref('');\n\n    const fileList = computed(() => {\n      return files.value.map((file) => ({ key: file.name, label: file.name }));\n    });\n\n    const emitFiles = () => {\n      emit('update:modelValue', props.multiple ? files.value : files.value[0]);\n      if (props.directUpload) {\n        files.value = [];\n      }\n    };\n\n    const remove = (filename: string) => {\n      if (!props.disabled) {\n        files.value = files.value.filter((f) => f.name !== filename);\n        emitFiles();\n      }\n    };\n\n    const clearAll = () => {\n      if (!props.disabled) {\n        files.value = [];\n        emitFiles();\n      }\n    };\n\n    const openFileDialog = () => {\n      fileInput.value?.neonInput?.click();\n    };\n\n    const onInput = (event: Event) => {\n      if (event?.target) {\n        const theFiles = (event.target as HTMLInputElement).files;\n        const newFiles = theFiles\n          ? Array.from(theFiles).filter((file) => !files.value.find((f) => f.name === file.name))\n          : [];\n        files.value = props.multiple ? [...files.value, ...newFiles] : newFiles;\n        emitFiles();\n      }\n    };\n\n    return {\n      fileInput,\n      files,\n      fileList,\n      fileInputModel,\n      remove,\n      clearAll,\n      openFileDialog,\n      onInput,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonInput","NeonList","NeonSize","NeonState","NeonFunctionalColor","props","emit","fileInput","ref","files","fileInputModel","fileList","computed","file","emitFiles","filename","f","_b","_a","event","theFiles","newFiles"],"mappings":";;;;;;;AAYA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,cAAc,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIxC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKpC,QAAQ,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjC,IAAI,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI7B,MAAM,EAAE,MAAM,QAA0B,SAASC,EAAS,OAAA;AAAA;AAAA;AAAA;AAAA,IAI1D,OAAO,EAAE,MAAM,QAA2B,SAASC,EAAU,MAAA;AAAA;AAAA;AAAA;AAAA,IAI7D,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,QAAA;AAAA;AAAA;AAAA;AAAA,IAIjF,UAAU,EAAE,MAAM,SAAS,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,OAAO,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,MAAM,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI/B,OAAO,EAAE,MAAM,QAAQ,SAAS,SAAA;AAAA,EAAS;AAAA,EAE3C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,UAAMC,IAAYC,EAA2C,IAAI,GAC3DC,IAAQD,EAAiB,EAAE,GAC3BE,IAAiBF,EAAI,EAAE,GAEvBG,IAAWC,EAAS,MACjBH,EAAM,MAAM,IAAI,CAACI,OAAU,EAAE,KAAKA,EAAK,MAAM,OAAOA,EAAK,KAAA,EAAO,CACxE,GAEKC,IAAY,MAAM;AACtB,MAAAR,EAAK,qBAAqBD,EAAM,WAAWI,EAAM,QAAQA,EAAM,MAAM,CAAC,CAAC,GACnEJ,EAAM,iBACRI,EAAM,QAAQ,CAAA;AAAA,IAElB;AA+BA,WAAO;AAAA,MACL,WAAAF;AAAA,MACA,OAAAE;AAAA,MACA,UAAAE;AAAA,MACA,gBAAAD;AAAA,MACA,QAlCa,CAACK,MAAqB;AACnC,QAAKV,EAAM,aACTI,EAAM,QAAQA,EAAM,MAAM,OAAO,CAACO,MAAMA,EAAE,SAASD,CAAQ,GAC3DD,EAAA;AAAA,MAEJ;AAAA,MA8BE,UA5Be,MAAM;AACrB,QAAKT,EAAM,aACTI,EAAM,QAAQ,CAAA,GACdK,EAAA;AAAA,MAEJ;AAAA,MAwBE,gBAtBqB,MAAM;;AAC3B,SAAAG,KAAAC,IAAAX,EAAU,UAAV,gBAAAW,EAAiB,cAAjB,QAAAD,EAA4B;AAAA,MAC9B;AAAA,MAqBE,SAnBc,CAACE,MAAiB;AAChC,YAAIA,KAAA,QAAAA,EAAO,QAAQ;AACjB,gBAAMC,IAAYD,EAAM,OAA4B,OAC9CE,IAAWD,IACb,MAAM,KAAKA,CAAQ,EAAE,OAAO,CAACP,MAAS,CAACJ,EAAM,MAAM,KAAK,CAACO,MAAMA,EAAE,SAASH,EAAK,IAAI,CAAC,IACpF,CAAA;AACJ,UAAAJ,EAAM,QAAQJ,EAAM,WAAW,CAAC,GAAGI,EAAM,OAAO,GAAGY,CAAQ,IAAIA,GAC/DP,EAAA;AAAA,QACF;AAAA,MACF;AAAA,IAUE;AAAA,EAEJ;AACF,CAAC;"}

package/dist/components/user-input/file/NeonFile.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const a=require("./NeonFile.cjs.js"),l=require("vue"),t=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r=["aria-disabled"],p={class:"neon-button-group neon-file__actions"};function u(e,o,c,m,f,C){const s=l.resolveComponent("neon-list"),d=l.resolveComponent("neon-input"),n=l.resolveComponent("neon-button");return l.openBlock(),l.createElementBlock("div",{"aria-disabled":e.disabled,class:l.normalizeClass([[`neon-file--${e.color}`,`neon-file--${e.size}`,{"neon-file--disabled":e.disabled,"neon-file--single":!e.multiple,"neon-file--direct-upload":e.directUpload}],"neon-file"])},[e.directUpload?l.createCommentVNode("",!0):(l.openBlock(),l.createBlock(s,{key:0,color:e.color,disabled:e.disabled,modelValue:e.fileList,size:e.size,onClose:e.remove},null,8,["color","disabled","modelValue","size","onClose"])),l.createVNode(d,{id:e.id,ref:"fileInput",modelValue:e.fileInputModel,"onUpdate:modelValue":o[0]||(o[0]=i=>e.fileInputModel=i),accept:e.accept,disabled:e.disabled,multiple:e.multiple,tabindex:-1,class:"neon-file__input",type:"file",onInput:e.onInput},null,8,["id","modelValue","accept","disabled","multiple","onInput"]),l.createElementVNode("div",p,[e.multiple&&!e.directUpload?(l.openBlock(),l.createBlock(n,{key:0,disabled:e.disabled||e.files.length===0,size:e.size,"button-style":"text",color:"low-contrast",label:"Clear all",onClick:o[1]||(o[1]=i=>e.clearAll())},null,8,["disabled","size"])):l.createCommentVNode("",!0),l.createVNode(n,{"aria-controls":e.id?e.id:void 0,color:e.color,disabled:e.disabled,icon:e.icon,label:e.label,size:e.size,state:e.state,onClick:e.openFileDialog},null,8,["aria-controls","color","disabled","icon","label","size","state","onClick"])])],10,r)}const b=t(a,[["render",u]]);module.exports=b;
+"use strict";const a=require("./NeonFile.cjs.js"),l=require("vue"),t=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r=["aria-disabled"],u={class:"neon-button-group neon-file__actions"};function p(e,o,b,m,f,C){const s=l.resolveComponent("neon-list"),d=l.resolveComponent("neon-input"),n=l.resolveComponent("neon-button");return l.openBlock(),l.createElementBlock("div",{"aria-disabled":e.disabled,class:l.normalizeClass([[`neon-file--${e.color}`,`neon-file--${e.size}`,{"neon-file--disabled":e.disabled,"neon-file--single":!e.multiple,"neon-file--direct-upload":e.directUpload}],"neon-file"])},[e.directUpload?l.createCommentVNode("",!0):(l.openBlock(),l.createBlock(s,{key:0,color:e.color,disabled:e.disabled,modelValue:e.fileList,size:e.size,onClose:e.remove},null,8,["color","disabled","modelValue","size","onClose"])),l.createVNode(d,{id:e.id,ref:"fileInput",modelValue:e.fileInputModel,"onUpdate:modelValue":o[0]||(o[0]=i=>e.fileInputModel=i),accept:e.accept,disabled:e.disabled,multiple:e.multiple,tabindex:-1,class:"neon-file__input",type:"file",onInput:e.onInput},null,8,["id","modelValue","accept","disabled","multiple","onInput"]),l.createElementVNode("div",u,[e.multiple&&!e.directUpload?(l.openBlock(),l.createBlock(n,{key:0,disabled:e.disabled||e.files.length===0,size:e.size,"button-style":"text",color:"low-contrast",label:"Clear all",onClick:o[1]||(o[1]=i=>e.clearAll())},null,8,["disabled","size"])):l.createCommentVNode("",!0),l.createVNode(n,{"aria-controls":e.id?e.id:void 0,circular:e.circular,color:e.color,disabled:e.disabled,icon:e.icon,label:e.label,size:e.size,state:e.state,title:e.title,onClick:e.openFileDialog},null,8,["aria-controls","circular","color","disabled","icon","label","size","state","title","onClick"])])],10,r)}const c=t(a,[["render",p]]);module.exports=c;
 //# sourceMappingURL=NeonFile.vue.cjs.js.map

package/dist/components/user-input/file/NeonFile.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonFile.vue.cjs.js","sources":["../../../../src/components/user-input/file/NeonFile.vue"],"sourcesContent":["<template>\n  <div\n    :aria-disabled=\"disabled\"\n    :class=\"[\n      `neon-file--${color}`,\n      `neon-file--${size}`,\n      { 'neon-file--disabled': disabled, 'neon-file--single': !multiple, 'neon-file--direct-upload': directUpload },\n    ]\"\n    class=\"neon-file\"\n  >\n    <neon-list\n      v-if=\"!directUpload\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :modelValue=\"fileList\"\n      :size=\"size\"\n      @close=\"remove\"\n    />\n    <neon-input\n      :id=\"id\"\n      ref=\"fileInput\"\n      v-model=\"fileInputModel\"\n      :accept=\"accept\"\n      :disabled=\"disabled\"\n      :multiple=\"multiple\"\n      :tabindex=\"-1\"\n      class=\"neon-file__input\"\n      type=\"file\"\n      @input=\"onInput\"\n    />\n    <div class=\"neon-button-group neon-file__actions\">\n      <neon-button\n        v-if=\"multiple && !directUpload\"\n        :disabled=\"disabled || files.length === 0\"\n        :size=\"size\"\n        button-style=\"text\"\n        color=\"low-contrast\"\n        label=\"Clear all\"\n        @click=\"clearAll()\"\n      />\n      <neon-button\n        :aria-controls=\"id ? id : undefined\"\n        :color=\"color\"\n        :disabled=\"disabled\"\n        :icon=\"icon\"\n        :label=\"label\"\n        :size=\"size\"\n        :state=\"state\"\n        @click=\"openFileDialog\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonFile.ts\" />\n"],"names":["_hoisted_2","_createElementBlock","_ctx","_normalizeClass","_createBlock","_component_neon_list","_createVNode","_component_neon_input","$event","_createElementVNode","_component_neon_button"],"mappings":"uJA8BSA,EAAA,CAAA,MAAM,sCAAsC,8JA7BnDC,EAAAA,mBAkDM,MAAA,CAjDH,gBAAeC,EAAA,SACf,MAAKC,EAAAA,eAAA,CAAA,eAAwBD,EAAA,KAAK,iBAAwBA,EAAA,IAAI,0BAAmCA,EAAA,SAAQ,oBAAA,CAAwBA,EAAA,SAAQ,2BAA8BA,EAAA,YAAY,GAK9K,WAAW,CAAA,IAGRA,EAAA,wDADTE,EAAAA,YAOEC,EAAA,OALC,MAAOH,EAAA,MACP,SAAUA,EAAA,SACV,WAAYA,EAAA,SACZ,KAAMA,EAAA,KACN,QAAOA,EAAA,oEAEVI,EAAAA,YAWEC,EAAA,CAVC,GAAIL,EAAA,GACL,IAAI,uBACKA,EAAA,oDAAAA,EAAA,eAAcM,GACtB,OAAQN,EAAA,OACR,SAAUA,EAAA,SACV,SAAUA,EAAA,SACV,SAAU,GACX,MAAM,mBACN,KAAK,OACJ,QAAOA,EAAA,8EAEVO,EAAAA,mBAoBM,MApBNT,EAoBM,CAlBIE,EAAA,WAAaA,EAAA,4BADrBE,EAAAA,YAQEM,EAAA,OANC,SAAUR,EAAA,UAAYA,EAAA,MAAM,SAAM,EAClC,KAAMA,EAAA,KACP,eAAa,OACb,MAAM,eACN,MAAM,YACL,uBAAOA,EAAA,sEAEVI,EAAAA,YASEI,EAAA,CARC,gBAAeR,EAAA,GAAKA,EAAA,GAAK,OACzB,MAAOA,EAAA,MACP,SAAUA,EAAA,SACV,KAAMA,EAAA,KACN,MAAOA,EAAA,MACP,KAAMA,EAAA,KACN,MAAOA,EAAA,MACP,QAAOA,EAAA"}
+{"version":3,"file":"NeonFile.vue.cjs.js","sources":["../../../../src/components/user-input/file/NeonFile.vue"],"sourcesContent":["<template>\n  <div\n    :aria-disabled=\"disabled\"\n    :class=\"[\n      `neon-file--${color}`,\n      `neon-file--${size}`,\n      { 'neon-file--disabled': disabled, 'neon-file--single': !multiple, 'neon-file--direct-upload': directUpload },\n    ]\"\n    class=\"neon-file\"\n  >\n    <neon-list\n      v-if=\"!directUpload\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :modelValue=\"fileList\"\n      :size=\"size\"\n      @close=\"remove\"\n    />\n    <neon-input\n      :id=\"id\"\n      ref=\"fileInput\"\n      v-model=\"fileInputModel\"\n      :accept=\"accept\"\n      :disabled=\"disabled\"\n      :multiple=\"multiple\"\n      :tabindex=\"-1\"\n      class=\"neon-file__input\"\n      type=\"file\"\n      @input=\"onInput\"\n    />\n    <div class=\"neon-button-group neon-file__actions\">\n      <neon-button\n        v-if=\"multiple && !directUpload\"\n        :disabled=\"disabled || files.length === 0\"\n        :size=\"size\"\n        button-style=\"text\"\n        color=\"low-contrast\"\n        label=\"Clear all\"\n        @click=\"clearAll()\"\n      />\n      <neon-button\n        :aria-controls=\"id ? id : undefined\"\n        :circular=\"circular\"\n        :color=\"color\"\n        :disabled=\"disabled\"\n        :icon=\"icon\"\n        :label=\"label\"\n        :size=\"size\"\n        :state=\"state\"\n        :title=\"title\"\n        @click=\"openFileDialog\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonFile.ts\" />\n"],"names":["_hoisted_2","_createElementBlock","_ctx","_normalizeClass","_createBlock","_component_neon_list","_createVNode","_component_neon_input","$event","_createElementVNode","_component_neon_button"],"mappings":"uJA8BSA,EAAA,CAAA,MAAM,sCAAsC,8JA7BnDC,EAAAA,mBAoDM,MAAA,CAnDH,gBAAeC,EAAA,SACf,MAAKC,EAAAA,eAAA,CAAA,eAAwBD,EAAA,KAAK,iBAAwBA,EAAA,IAAI,0BAAmCA,EAAA,SAAQ,oBAAA,CAAwBA,EAAA,SAAQ,2BAA8BA,EAAA,YAAY,GAK9K,WAAW,CAAA,IAGRA,EAAA,wDADTE,EAAAA,YAOEC,EAAA,OALC,MAAOH,EAAA,MACP,SAAUA,EAAA,SACV,WAAYA,EAAA,SACZ,KAAMA,EAAA,KACN,QAAOA,EAAA,oEAEVI,EAAAA,YAWEC,EAAA,CAVC,GAAIL,EAAA,GACL,IAAI,uBACKA,EAAA,oDAAAA,EAAA,eAAcM,GACtB,OAAQN,EAAA,OACR,SAAUA,EAAA,SACV,SAAUA,EAAA,SACV,SAAU,GACX,MAAM,mBACN,KAAK,OACJ,QAAOA,EAAA,8EAEVO,EAAAA,mBAsBM,MAtBNT,EAsBM,CApBIE,EAAA,WAAaA,EAAA,4BADrBE,EAAAA,YAQEM,EAAA,OANC,SAAUR,EAAA,UAAYA,EAAA,MAAM,SAAM,EAClC,KAAMA,EAAA,KACP,eAAa,OACb,MAAM,eACN,MAAM,YACL,uBAAOA,EAAA,sEAEVI,EAAAA,YAWEI,EAAA,CAVC,gBAAeR,EAAA,GAAKA,EAAA,GAAK,OACzB,SAAUA,EAAA,SACV,MAAOA,EAAA,MACP,SAAUA,EAAA,SACV,KAAMA,EAAA,KACN,MAAOA,EAAA,MACP,KAAMA,EAAA,KACN,MAAOA,EAAA,MACP,MAAOA,EAAA,MACP,QAAOA,EAAA"}

package/dist/components/user-input/file/NeonFile.vue.es.js

@@ -1,5 +1,5 @@
 import u from "./NeonFile.es.js";
-import { resolveComponent as o, openBlock as n, createElementBlock as m, normalizeClass as b, createBlock as s, createCommentVNode as a, createVNode as t, createElementVNode as f } from "vue";
+import { resolveComponent as o, openBlock as n, createElementBlock as m, normalizeClass as b, createBlock as a, createCommentVNode as s, createVNode as t, createElementVNode as f } from "vue";
 import c from "../../../_virtual/_plugin-vue_export-helper.es.js";
 const z = ["aria-disabled"], C = { class: "neon-button-group neon-file__actions" };
 function k(e, l, V, $, I, v) {
@@ -12,7 +12,7 @@ function k(e, l, V, $, I, v) {
       { "neon-file--disabled": e.disabled, "neon-file--single": !e.multiple, "neon-file--direct-upload": e.directUpload }
     ], "neon-file"])
   }, [
-    e.directUpload ? a("", !0) : (n(), s(r, {
+    e.directUpload ? s("", !0) : (n(), a(r, {
       key: 0,
       color: e.color,
       disabled: e.disabled,
@@ -34,7 +34,7 @@ function k(e, l, V, $, I, v) {
       onInput: e.onInput
     }, null, 8, ["id", "modelValue", "accept", "disabled", "multiple", "onInput"]),
     f("div", C, [
-      e.multiple && !e.directUpload ? (n(), s(i, {
+      e.multiple && !e.directUpload ? (n(), a(i, {
         key: 0,
         disabled: e.disabled || e.files.length === 0,
         size: e.size,
@@ -42,17 +42,19 @@ function k(e, l, V, $, I, v) {
         color: "low-contrast",
         label: "Clear all",
         onClick: l[1] || (l[1] = (d) => e.clearAll())
-      }, null, 8, ["disabled", "size"])) : a("", !0),
+      }, null, 8, ["disabled", "size"])) : s("", !0),
       t(i, {
         "aria-controls": e.id ? e.id : void 0,
+        circular: e.circular,
         color: e.color,
         disabled: e.disabled,
         icon: e.icon,
         label: e.label,
         size: e.size,
         state: e.state,
+        title: e.title,
         onClick: e.openFileDialog
-      }, null, 8, ["aria-controls", "color", "disabled", "icon", "label", "size", "state", "onClick"])
+      }, null, 8, ["aria-controls", "circular", "color", "disabled", "icon", "label", "size", "state", "title", "onClick"])
     ])
   ], 10, z);
 }

package/dist/components/user-input/file/NeonFile.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonFile.vue.es.js","sources":["../../../../src/components/user-input/file/NeonFile.vue"],"sourcesContent":["<template>\n  <div\n    :aria-disabled=\"disabled\"\n    :class=\"[\n      `neon-file--${color}`,\n      `neon-file--${size}`,\n      { 'neon-file--disabled': disabled, 'neon-file--single': !multiple, 'neon-file--direct-upload': directUpload },\n    ]\"\n    class=\"neon-file\"\n  >\n    <neon-list\n      v-if=\"!directUpload\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :modelValue=\"fileList\"\n      :size=\"size\"\n      @close=\"remove\"\n    />\n    <neon-input\n      :id=\"id\"\n      ref=\"fileInput\"\n      v-model=\"fileInputModel\"\n      :accept=\"accept\"\n      :disabled=\"disabled\"\n      :multiple=\"multiple\"\n      :tabindex=\"-1\"\n      class=\"neon-file__input\"\n      type=\"file\"\n      @input=\"onInput\"\n    />\n    <div class=\"neon-button-group neon-file__actions\">\n      <neon-button\n        v-if=\"multiple && !directUpload\"\n        :disabled=\"disabled || files.length === 0\"\n        :size=\"size\"\n        button-style=\"text\"\n        color=\"low-contrast\"\n        label=\"Clear all\"\n        @click=\"clearAll()\"\n      />\n      <neon-button\n        :aria-controls=\"id ? id : undefined\"\n        :color=\"color\"\n        :disabled=\"disabled\"\n        :icon=\"icon\"\n        :label=\"label\"\n        :size=\"size\"\n        :state=\"state\"\n        @click=\"openFileDialog\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonFile.ts\" />\n"],"names":["_hoisted_2","_createElementBlock","_ctx","_normalizeClass","_createBlock","_component_neon_list","_createVNode","_component_neon_input","$event","_createElementVNode","_component_neon_button"],"mappings":";;;6BA8BSA,IAAA,EAAA,OAAM,uCAAsC;;;cA7BnDC,EAkDM,OAAA;AAAA,IAjDH,iBAAeC,EAAA;AAAA,IACf,OAAKC,EAAA,CAAA;AAAA,oBAAwBD,EAAA,KAAK;AAAA,oBAAwBA,EAAA,IAAI;AAAA,+BAAmCA,EAAA,UAAQ,qBAAA,CAAwBA,EAAA,UAAQ,4BAA8BA,EAAA,aAAY;AAAA,OAK9K,WAAW,CAAA;AAAA;IAGRA,EAAA,iCADTE,EAOEC,GAAA;AAAA;MALC,OAAOH,EAAA;AAAA,MACP,UAAUA,EAAA;AAAA,MACV,YAAYA,EAAA;AAAA,MACZ,MAAMA,EAAA;AAAA,MACN,SAAOA,EAAA;AAAA;IAEVI,EAWEC,GAAA;AAAA,MAVC,IAAIL,EAAA;AAAA,MACL,KAAI;AAAA,kBACKA,EAAA;AAAA,oDAAAA,EAAA,iBAAcM;AAAA,MACtB,QAAQN,EAAA;AAAA,MACR,UAAUA,EAAA;AAAA,MACV,UAAUA,EAAA;AAAA,MACV,UAAU;AAAA,MACX,OAAM;AAAA,MACN,MAAK;AAAA,MACJ,SAAOA,EAAA;AAAA;IAEVO,EAoBM,OApBNT,GAoBM;AAAA,MAlBIE,EAAA,aAAaA,EAAA,qBADrBE,EAQEM,GAAA;AAAA;QANC,UAAUR,EAAA,YAAYA,EAAA,MAAM,WAAM;AAAA,QAClC,MAAMA,EAAA;AAAA,QACP,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,OAAM;AAAA,QACL,gCAAOA,EAAA;;MAEVI,EASEI,GAAA;AAAA,QARC,iBAAeR,EAAA,KAAKA,EAAA,KAAK;AAAA,QACzB,OAAOA,EAAA;AAAA,QACP,UAAUA,EAAA;AAAA,QACV,MAAMA,EAAA;AAAA,QACN,OAAOA,EAAA;AAAA,QACP,MAAMA,EAAA;AAAA,QACN,OAAOA,EAAA;AAAA,QACP,SAAOA,EAAA;AAAA;;;;;"}
+{"version":3,"file":"NeonFile.vue.es.js","sources":["../../../../src/components/user-input/file/NeonFile.vue"],"sourcesContent":["<template>\n  <div\n    :aria-disabled=\"disabled\"\n    :class=\"[\n      `neon-file--${color}`,\n      `neon-file--${size}`,\n      { 'neon-file--disabled': disabled, 'neon-file--single': !multiple, 'neon-file--direct-upload': directUpload },\n    ]\"\n    class=\"neon-file\"\n  >\n    <neon-list\n      v-if=\"!directUpload\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :modelValue=\"fileList\"\n      :size=\"size\"\n      @close=\"remove\"\n    />\n    <neon-input\n      :id=\"id\"\n      ref=\"fileInput\"\n      v-model=\"fileInputModel\"\n      :accept=\"accept\"\n      :disabled=\"disabled\"\n      :multiple=\"multiple\"\n      :tabindex=\"-1\"\n      class=\"neon-file__input\"\n      type=\"file\"\n      @input=\"onInput\"\n    />\n    <div class=\"neon-button-group neon-file__actions\">\n      <neon-button\n        v-if=\"multiple && !directUpload\"\n        :disabled=\"disabled || files.length === 0\"\n        :size=\"size\"\n        button-style=\"text\"\n        color=\"low-contrast\"\n        label=\"Clear all\"\n        @click=\"clearAll()\"\n      />\n      <neon-button\n        :aria-controls=\"id ? id : undefined\"\n        :circular=\"circular\"\n        :color=\"color\"\n        :disabled=\"disabled\"\n        :icon=\"icon\"\n        :label=\"label\"\n        :size=\"size\"\n        :state=\"state\"\n        :title=\"title\"\n        @click=\"openFileDialog\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonFile.ts\" />\n"],"names":["_hoisted_2","_createElementBlock","_ctx","_normalizeClass","_createBlock","_component_neon_list","_createVNode","_component_neon_input","$event","_createElementVNode","_component_neon_button"],"mappings":";;;6BA8BSA,IAAA,EAAA,OAAM,uCAAsC;;;cA7BnDC,EAoDM,OAAA;AAAA,IAnDH,iBAAeC,EAAA;AAAA,IACf,OAAKC,EAAA,CAAA;AAAA,oBAAwBD,EAAA,KAAK;AAAA,oBAAwBA,EAAA,IAAI;AAAA,+BAAmCA,EAAA,UAAQ,qBAAA,CAAwBA,EAAA,UAAQ,4BAA8BA,EAAA,aAAY;AAAA,OAK9K,WAAW,CAAA;AAAA;IAGRA,EAAA,iCADTE,EAOEC,GAAA;AAAA;MALC,OAAOH,EAAA;AAAA,MACP,UAAUA,EAAA;AAAA,MACV,YAAYA,EAAA;AAAA,MACZ,MAAMA,EAAA;AAAA,MACN,SAAOA,EAAA;AAAA;IAEVI,EAWEC,GAAA;AAAA,MAVC,IAAIL,EAAA;AAAA,MACL,KAAI;AAAA,kBACKA,EAAA;AAAA,oDAAAA,EAAA,iBAAcM;AAAA,MACtB,QAAQN,EAAA;AAAA,MACR,UAAUA,EAAA;AAAA,MACV,UAAUA,EAAA;AAAA,MACV,UAAU;AAAA,MACX,OAAM;AAAA,MACN,MAAK;AAAA,MACJ,SAAOA,EAAA;AAAA;IAEVO,EAsBM,OAtBNT,GAsBM;AAAA,MApBIE,EAAA,aAAaA,EAAA,qBADrBE,EAQEM,GAAA;AAAA;QANC,UAAUR,EAAA,YAAYA,EAAA,MAAM,WAAM;AAAA,QAClC,MAAMA,EAAA;AAAA,QACP,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,OAAM;AAAA,QACL,gCAAOA,EAAA;;MAEVI,EAWEI,GAAA;AAAA,QAVC,iBAAeR,EAAA,KAAKA,EAAA,KAAK;AAAA,QACzB,UAAUA,EAAA;AAAA,QACV,OAAOA,EAAA;AAAA,QACP,UAAUA,EAAA;AAAA,QACV,MAAMA,EAAA;AAAA,QACN,OAAOA,EAAA;AAAA,QACP,MAAMA,EAAA;AAAA,QACN,OAAOA,EAAA;AAAA,QACP,OAAOA,EAAA;AAAA,QACP,SAAOA,EAAA;AAAA;;;;;"}