@aotearoan/neon 23.2.4 → 23.3.0

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var s=(r=>(r.LowContrast="low-contrast",r.Neutral="neutral",r.HighContrast="high-contrast",r.Brand="brand",r.Primary="primary",r.Info="info",r.Success="success",r.Warn="warn",r.Error="error",r))(s||{});exports.NeonFunctionalColor=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var s=(r=>(r.LowContrast="low-contrast",r.Neutral="neutral",r.HighContrast="high-contrast",r.Brand="brand",r.Accent="accent",r.Primary="primary",r.Info="info",r.Success="success",r.Warn="warn",r.Error="error",r))(s||{});exports.NeonFunctionalColor=s;
 //# sourceMappingURL=NeonFunctionalColor.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NeonFunctionalColor.cjs.js","sources":["../../../src/common/enums/NeonFunctionalColor.ts"],"sourcesContent":["/**\n * The core color palettes available for styling components in Neon. See the design section\n * <a href=\"/design/color\">Color</a> page for more details on color palettes.\n */\nexport enum NeonFunctionalColor {\n  /** Low contrast is a more subtle neutral palette which can be used for secondary actions & supporting text. */\n  LowContrast = 'low-contrast',\n  /** Neutral is the base greyscale palette. */\n  Neutral = 'neutral',\n  /**\n   * High contrast is a higher contrast palette than can be used for increased accessibility or for a stronger black &\n   * white application.\n   * */\n  HighContrast = 'high-contrast',\n  /** Brand is the main brand color palette, this is useful for branded CTAs, text & controls. */\n  Brand = 'brand',\n  /** Primary is the main application color palette. For most applications this will be used by default. */\n  Primary = 'primary',\n  /** Info can be used to convey informational context, e.g. notes & alerts */\n  Info = 'info',\n  /** Success can be used to convey successful actions. */\n  Success = 'success',\n  /** Warn can be used to convey issues/actions that are less severe but may still impact the user. */\n  Warn = 'warn',\n  /** Error can be used to convey issues/actions that are severe & that the user may not be able to recover from. */\n  Error = 'error',\n}\n"],"names":["NeonFunctionalColor"],"mappings":"gFAIO,IAAKA,GAAAA,IAEVA,EAAA,YAAc,eAEdA,EAAA,QAAU,UAKVA,EAAA,aAAe,gBAEfA,EAAA,MAAQ,QAERA,EAAA,QAAU,UAEVA,EAAA,KAAO,OAEPA,EAAA,QAAU,UAEVA,EAAA,KAAO,OAEPA,EAAA,MAAQ,QArBEA,IAAAA,GAAA,CAAA,CAAA"}
+{"version":3,"file":"NeonFunctionalColor.cjs.js","sources":["../../../src/common/enums/NeonFunctionalColor.ts"],"sourcesContent":["/**\n * The core color palettes available for styling components in Neon. See the design section\n * <a href=\"/design/color\">Color</a> page for more details on color palettes.\n */\nexport enum NeonFunctionalColor {\n  /** Low contrast is a more subtle neutral palette which can be used for secondary actions & supporting text. */\n  LowContrast = 'low-contrast',\n  /** Neutral is the base greyscale palette. */\n  Neutral = 'neutral',\n  /**\n   * High contrast is a higher contrast palette than can be used for increased accessibility or for a stronger black &\n   * white application.\n   * */\n  HighContrast = 'high-contrast',\n  /** Brand is the main brand color palette, this is useful for branded CTAs, text & controls. */\n  Brand = 'brand',\n  /** Accent is an alternative brand accent palette used when multiple brand colors are required */\n  Accent = 'accent',\n  /** Primary is the main application color palette. For most applications this will be used by default. */\n  Primary = 'primary',\n  /** Info can be used to convey informational context, e.g. notes & alerts */\n  Info = 'info',\n  /** Success can be used to convey successful actions. */\n  Success = 'success',\n  /** Warn can be used to convey issues/actions that are less severe but may still impact the user. */\n  Warn = 'warn',\n  /** Error can be used to convey issues/actions that are severe & that the user may not be able to recover from. */\n  Error = 'error',\n}\n"],"names":["NeonFunctionalColor"],"mappings":"gFAIO,IAAKA,GAAAA,IAEVA,EAAA,YAAc,eAEdA,EAAA,QAAU,UAKVA,EAAA,aAAe,gBAEfA,EAAA,MAAQ,QAERA,EAAA,OAAS,SAETA,EAAA,QAAU,UAEVA,EAAA,KAAO,OAEPA,EAAA,QAAU,UAEVA,EAAA,KAAO,OAEPA,EAAA,MAAQ,QAvBEA,IAAAA,GAAA,CAAA,CAAA"}

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

@@ -1,4 +1,4 @@
-var s = /* @__PURE__ */ ((r) => (r.LowContrast = "low-contrast", r.Neutral = "neutral", r.HighContrast = "high-contrast", r.Brand = "brand", r.Primary = "primary", r.Info = "info", r.Success = "success", r.Warn = "warn", r.Error = "error", r))(s || {});
+var s = /* @__PURE__ */ ((r) => (r.LowContrast = "low-contrast", r.Neutral = "neutral", r.HighContrast = "high-contrast", r.Brand = "brand", r.Accent = "accent", r.Primary = "primary", r.Info = "info", r.Success = "success", r.Warn = "warn", r.Error = "error", r))(s || {});
 export {
   s as NeonFunctionalColor
 };

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

@@ -1 +1 @@
-{"version":3,"file":"NeonFunctionalColor.es.js","sources":["../../../src/common/enums/NeonFunctionalColor.ts"],"sourcesContent":["/**\n * The core color palettes available for styling components in Neon. See the design section\n * <a href=\"/design/color\">Color</a> page for more details on color palettes.\n */\nexport enum NeonFunctionalColor {\n  /** Low contrast is a more subtle neutral palette which can be used for secondary actions & supporting text. */\n  LowContrast = 'low-contrast',\n  /** Neutral is the base greyscale palette. */\n  Neutral = 'neutral',\n  /**\n   * High contrast is a higher contrast palette than can be used for increased accessibility or for a stronger black &\n   * white application.\n   * */\n  HighContrast = 'high-contrast',\n  /** Brand is the main brand color palette, this is useful for branded CTAs, text & controls. */\n  Brand = 'brand',\n  /** Primary is the main application color palette. For most applications this will be used by default. */\n  Primary = 'primary',\n  /** Info can be used to convey informational context, e.g. notes & alerts */\n  Info = 'info',\n  /** Success can be used to convey successful actions. */\n  Success = 'success',\n  /** Warn can be used to convey issues/actions that are less severe but may still impact the user. */\n  Warn = 'warn',\n  /** Error can be used to convey issues/actions that are severe & that the user may not be able to recover from. */\n  Error = 'error',\n}\n"],"names":["NeonFunctionalColor"],"mappings":"AAIO,IAAKA,sBAAAA,OAEVA,EAAA,cAAc,gBAEdA,EAAA,UAAU,WAKVA,EAAA,eAAe,iBAEfA,EAAA,QAAQ,SAERA,EAAA,UAAU,WAEVA,EAAA,OAAO,QAEPA,EAAA,UAAU,WAEVA,EAAA,OAAO,QAEPA,EAAA,QAAQ,SArBEA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"NeonFunctionalColor.es.js","sources":["../../../src/common/enums/NeonFunctionalColor.ts"],"sourcesContent":["/**\n * The core color palettes available for styling components in Neon. See the design section\n * <a href=\"/design/color\">Color</a> page for more details on color palettes.\n */\nexport enum NeonFunctionalColor {\n  /** Low contrast is a more subtle neutral palette which can be used for secondary actions & supporting text. */\n  LowContrast = 'low-contrast',\n  /** Neutral is the base greyscale palette. */\n  Neutral = 'neutral',\n  /**\n   * High contrast is a higher contrast palette than can be used for increased accessibility or for a stronger black &\n   * white application.\n   * */\n  HighContrast = 'high-contrast',\n  /** Brand is the main brand color palette, this is useful for branded CTAs, text & controls. */\n  Brand = 'brand',\n  /** Accent is an alternative brand accent palette used when multiple brand colors are required */\n  Accent = 'accent',\n  /** Primary is the main application color palette. For most applications this will be used by default. */\n  Primary = 'primary',\n  /** Info can be used to convey informational context, e.g. notes & alerts */\n  Info = 'info',\n  /** Success can be used to convey successful actions. */\n  Success = 'success',\n  /** Warn can be used to convey issues/actions that are less severe but may still impact the user. */\n  Warn = 'warn',\n  /** Error can be used to convey issues/actions that are severe & that the user may not be able to recover from. */\n  Error = 'error',\n}\n"],"names":["NeonFunctionalColor"],"mappings":"AAIO,IAAKA,sBAAAA,OAEVA,EAAA,cAAc,gBAEdA,EAAA,UAAU,WAKVA,EAAA,eAAe,iBAEfA,EAAA,QAAQ,SAERA,EAAA,SAAS,UAETA,EAAA,UAAU,WAEVA,EAAA,OAAO,QAEPA,EAAA,UAAU,WAEVA,EAAA,OAAO,QAEPA,EAAA,QAAQ,SAvBEA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/components/user-input/field/NeonField.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const l=require("./NeonField.cjs.js"),e=require("vue"),s=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),t={class:"neon-field__label-wrapper"},a=["for"],r={key:0,class:"neon-field__optional"},i={class:"neon-field__contents"};function d(o,n,c,_,m,u){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([{"neon-field--optional":o.optional,"neon-field--disabled":o.disabled,"neon-field--with-message":o.message!==null},"neon-field"])},[e.createElementVNode("span",t,[e.createElementVNode("label",{for:o.labelFor,class:"neon-field__label"},e.toDisplayString(o.label),9,a),o.optional?(e.openBlock(),e.createElementBlock("span",r,e.toDisplayString(o.optionalLabel),1)):e.createCommentVNode("",!0)]),e.createElementVNode("div",i,[e.renderSlot(o.$slots,"default"),o.noMessage?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass([`neon-color-${o.messageColor}`,"neon-field__message"]),onClick:n[0]||(n[0]=e.withModifiers(()=>{},["prevent","stop"]))},e.toDisplayString(o.message),3))])],2)}const p=s(l,[["render",d]]);module.exports=p;
+"use strict";const l=require("./NeonField.cjs.js"),e=require("vue"),s=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),t={class:"neon-field__label-wrapper"},a=["for"],r={key:0,class:"neon-field__optional"},i={class:"neon-field__contents"};function d(o,n,c,_,m,f){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([{"neon-field--optional":o.optional,"neon-field--disabled":o.disabled,"neon-field--with-message":!o.noMessage},"neon-field"])},[e.createElementVNode("span",t,[e.createElementVNode("label",{for:o.labelFor,class:"neon-field__label"},e.toDisplayString(o.label),9,a),o.optional?(e.openBlock(),e.createElementBlock("span",r,e.toDisplayString(o.optionalLabel),1)):e.createCommentVNode("",!0)]),e.createElementVNode("div",i,[e.renderSlot(o.$slots,"default"),o.noMessage?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass([`neon-color-${o.messageColor}`,"neon-field__message"]),onClick:n[0]||(n[0]=e.withModifiers(()=>{},["prevent","stop"]))},e.toDisplayString(o.message),3))])],2)}const p=s(l,[["render",d]]);module.exports=p;
 //# sourceMappingURL=NeonField.vue.cjs.js.map

package/dist/components/user-input/field/NeonField.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonField.vue.cjs.js","sources":["../../../../src/components/user-input/field/NeonField.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"{\n      'neon-field--optional': optional,\n      'neon-field--disabled': disabled,\n      'neon-field--with-message': message !== null,\n    }\"\n    class=\"neon-field\"\n  >\n    <span class=\"neon-field__label-wrapper\">\n      <label :for=\"labelFor\" class=\"neon-field__label\">{{ label }}</label>\n      <span v-if=\"optional\" class=\"neon-field__optional\">{{ optionalLabel }}</span>\n    </span>\n    <div class=\"neon-field__contents\">\n      <!-- @slot optionally wrap the field with the label -->\n      <slot></slot>\n      <span v-if=\"!noMessage\" :class=\"`neon-color-${messageColor}`\" class=\"neon-field__message\" @click.prevent.stop=\"\">\n        {{ message }}\n      </span>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonField.ts\"></script>\n"],"names":["_hoisted_1","_hoisted_4","_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_hoisted_2","_hoisted_3","_toDisplayString","_renderSlot"],"mappings":"oIASUA,EAAA,CAAA,MAAM,2BAA2B,qBAEf,MAAM,wBAEzBC,EAAA,CAAA,MAAM,sBAAsB,+CAZnCC,EAAAA,mBAmBM,MAAA,CAlBH,MAAKC,EAAAA,eAAA,CAAA,wBAAkCC,EAAA,gCAAwCA,EAAA,oCAA4CA,EAAA,UAAO,MAK7H,YAAY,CAAA,IAElBC,EAAAA,mBAGO,OAHPL,EAGO,CAFLK,EAAAA,mBAAoE,QAAA,CAA5D,IAAKD,EAAA,SAAU,MAAM,uCAAuBA,EAAA,KAAK,EAAA,EAAAE,CAAA,EAC7CF,EAAA,wBAAZF,EAAAA,mBAA6E,OAA7EK,EAA6EC,EAAAA,gBAAvBJ,EAAA,aAAa,EAAA,CAAA,iCAErEC,EAAAA,mBAMM,MANNJ,EAMM,CAJJQ,aAAaL,EAAA,OAAA,SAAA,EACAA,EAAA,qDAAbF,EAAAA,mBAEO,OAAA,OAFkB,MAAKC,EAAAA,eAAA,CAAA,cAAgBC,EAAA,YAAY,GAAU,qBAAqB,CAAA,EAAE,oCAAD,IAAA,CAAA,EAAsB,CAAA,UAAA,MAAA,CAAA,sBAC3GA,EAAA,OAAO,EAAA,CAAA"}
+{"version":3,"file":"NeonField.vue.cjs.js","sources":["../../../../src/components/user-input/field/NeonField.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"{\n      'neon-field--optional': optional,\n      'neon-field--disabled': disabled,\n      'neon-field--with-message': !noMessage,\n    }\"\n    class=\"neon-field\"\n  >\n    <span class=\"neon-field__label-wrapper\">\n      <label :for=\"labelFor\" class=\"neon-field__label\">{{ label }}</label>\n      <span v-if=\"optional\" class=\"neon-field__optional\">{{ optionalLabel }}</span>\n    </span>\n    <div class=\"neon-field__contents\">\n      <!-- @slot optionally wrap the field with the label -->\n      <slot></slot>\n      <span v-if=\"!noMessage\" :class=\"`neon-color-${messageColor}`\" class=\"neon-field__message\" @click.prevent.stop=\"\">\n        {{ message }}\n      </span>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonField.ts\"></script>\n"],"names":["_hoisted_1","_hoisted_4","_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_hoisted_2","_hoisted_3","_toDisplayString","_renderSlot"],"mappings":"oIASUA,EAAA,CAAA,MAAM,2BAA2B,qBAEf,MAAM,wBAEzBC,EAAA,CAAA,MAAM,sBAAsB,+CAZnCC,EAAAA,mBAmBM,MAAA,CAlBH,MAAKC,EAAAA,eAAA,CAAA,wBAAkCC,EAAA,gCAAwCA,EAAA,qCAA6CA,EAAA,WAKvH,YAAY,CAAA,IAElBC,EAAAA,mBAGO,OAHPL,EAGO,CAFLK,EAAAA,mBAAoE,QAAA,CAA5D,IAAKD,EAAA,SAAU,MAAM,uCAAuBA,EAAA,KAAK,EAAA,EAAAE,CAAA,EAC7CF,EAAA,wBAAZF,EAAAA,mBAA6E,OAA7EK,EAA6EC,EAAAA,gBAAvBJ,EAAA,aAAa,EAAA,CAAA,iCAErEC,EAAAA,mBAMM,MANNJ,EAMM,CAJJQ,aAAaL,EAAA,OAAA,SAAA,EACAA,EAAA,qDAAbF,EAAAA,mBAEO,OAAA,OAFkB,MAAKC,EAAAA,eAAA,CAAA,cAAgBC,EAAA,YAAY,GAAU,qBAAqB,CAAA,EAAE,oCAAD,IAAA,CAAA,EAAsB,CAAA,UAAA,MAAA,CAAA,sBAC3GA,EAAA,OAAO,EAAA,CAAA"}

package/dist/components/user-input/field/NeonField.vue.es.js

@@ -5,12 +5,12 @@ const m = { class: "neon-field__label-wrapper" }, _ = ["for"], c = {
   key: 0,
   class: "neon-field__optional"
 }, b = { class: "neon-field__contents" };
-function u(e, a, g, $, h, k) {
+function g(e, a, u, $, h, k) {
   return o(), n("div", {
     class: i([{
       "neon-field--optional": e.optional,
       "neon-field--disabled": e.disabled,
-      "neon-field--with-message": e.message !== null
+      "neon-field--with-message": !e.noMessage
     }, "neon-field"])
   }, [
     s("span", m, [
@@ -31,7 +31,7 @@ function u(e, a, g, $, h, k) {
     ])
   ], 2);
 }
-const y = /* @__PURE__ */ f(r, [["render", u]]);
+const y = /* @__PURE__ */ f(r, [["render", g]]);
 export {
   y as default
 };

package/dist/components/user-input/field/NeonField.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonField.vue.es.js","sources":["../../../../src/components/user-input/field/NeonField.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"{\n      'neon-field--optional': optional,\n      'neon-field--disabled': disabled,\n      'neon-field--with-message': message !== null,\n    }\"\n    class=\"neon-field\"\n  >\n    <span class=\"neon-field__label-wrapper\">\n      <label :for=\"labelFor\" class=\"neon-field__label\">{{ label }}</label>\n      <span v-if=\"optional\" class=\"neon-field__optional\">{{ optionalLabel }}</span>\n    </span>\n    <div class=\"neon-field__contents\">\n      <!-- @slot optionally wrap the field with the label -->\n      <slot></slot>\n      <span v-if=\"!noMessage\" :class=\"`neon-color-${messageColor}`\" class=\"neon-field__message\" @click.prevent.stop=\"\">\n        {{ message }}\n      </span>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonField.ts\"></script>\n"],"names":["_hoisted_1","_hoisted_4","_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_hoisted_2","_hoisted_3","_toDisplayString","_renderSlot"],"mappings":";;;AASU,MAAAA,IAAA,EAAA,OAAM,4BAA2B;;EAEf,OAAM;GAEzBC,IAAA,EAAA,OAAM,uBAAsB;;cAZnCC,EAmBM,OAAA;AAAA,IAlBH,OAAKC,EAAA,CAAA;AAAA,8BAAkCC,EAAA;AAAA,8BAAwCA,EAAA;AAAA,kCAA4CA,EAAA,YAAO;AAAA,OAK7H,YAAY,CAAA;AAAA;IAElBC,EAGO,QAHPL,GAGO;AAAA,MAFLK,EAAoE,SAAA;AAAA,QAA5D,KAAKD,EAAA;AAAA,QAAU,OAAM;AAAA,WAAuBA,EAAA,KAAK,GAAA,GAAAE,CAAA;AAAA,MAC7CF,EAAA,iBAAZF,EAA6E,QAA7EK,GAA6EC,EAAvBJ,EAAA,aAAa,GAAA,CAAA;;IAErEC,EAMM,OANNJ,GAMM;AAAA,MAJJQ,EAAaL,EAAA,QAAA,SAAA;AAAA,MACAA,EAAA,8BAAbF,EAEO,QAAA;AAAA;QAFkB,OAAKC,EAAA,CAAA,cAAgBC,EAAA,YAAY,IAAU,qBAAqB,CAAA;AAAA,QAAE,2BAAD,MAAA;AAAA,QAAA,GAAsB,CAAA,WAAA,MAAA,CAAA;AAAA,WAC3GA,EAAA,OAAO,GAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"NeonField.vue.es.js","sources":["../../../../src/components/user-input/field/NeonField.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"{\n      'neon-field--optional': optional,\n      'neon-field--disabled': disabled,\n      'neon-field--with-message': !noMessage,\n    }\"\n    class=\"neon-field\"\n  >\n    <span class=\"neon-field__label-wrapper\">\n      <label :for=\"labelFor\" class=\"neon-field__label\">{{ label }}</label>\n      <span v-if=\"optional\" class=\"neon-field__optional\">{{ optionalLabel }}</span>\n    </span>\n    <div class=\"neon-field__contents\">\n      <!-- @slot optionally wrap the field with the label -->\n      <slot></slot>\n      <span v-if=\"!noMessage\" :class=\"`neon-color-${messageColor}`\" class=\"neon-field__message\" @click.prevent.stop=\"\">\n        {{ message }}\n      </span>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonField.ts\"></script>\n"],"names":["_hoisted_1","_hoisted_4","_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_hoisted_2","_hoisted_3","_toDisplayString","_renderSlot"],"mappings":";;;AASU,MAAAA,IAAA,EAAA,OAAM,4BAA2B;;EAEf,OAAM;GAEzBC,IAAA,EAAA,OAAM,uBAAsB;;cAZnCC,EAmBM,OAAA;AAAA,IAlBH,OAAKC,EAAA,CAAA;AAAA,8BAAkCC,EAAA;AAAA,8BAAwCA,EAAA;AAAA,mCAA6CA,EAAA;AAAA,OAKvH,YAAY,CAAA;AAAA;IAElBC,EAGO,QAHPL,GAGO;AAAA,MAFLK,EAAoE,SAAA;AAAA,QAA5D,KAAKD,EAAA;AAAA,QAAU,OAAM;AAAA,WAAuBA,EAAA,KAAK,GAAA,GAAAE,CAAA;AAAA,MAC7CF,EAAA,iBAAZF,EAA6E,QAA7EK,GAA6EC,EAAvBJ,EAAA,aAAa,GAAA,CAAA;;IAErEC,EAMM,OANNJ,GAMM;AAAA,MAJJQ,EAAaL,EAAA,QAAA,SAAA;AAAA,MACAA,EAAA,8BAAbF,EAEO,QAAA;AAAA;QAFkB,OAAKC,EAAA,CAAA,cAAgBC,EAAA,YAAY,IAAU,qBAAqB,CAAA;AAAA,QAAE,2BAAD,MAAA;AAAA,QAAA,GAAsB,CAAA,WAAA,MAAA,CAAA;AAAA,WAC3GA,EAAA,OAAO,GAAA,CAAA;AAAA;;;;"}

package/dist/components/user-input/number/NeonNumber.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const u=require("vue"),g=require("../../../common/enums/NeonFunctionalColor.cjs.js"),q=require("../../../common/enums/NeonSize.cjs.js"),S=require("../../../common/enums/NeonInputMode.cjs.js"),F=require("../button/NeonButton.vue.cjs.js"),B=require("../field-group/NeonFieldGroup.vue.cjs.js"),x=require("../input/NeonInput.vue.cjs.js"),s=require("../../../common/utils/NeonNumberUtils.cjs.js"),M=u.defineComponent({name:"NeonNumber",components:{NeonButton:F,NeonFieldGroup:B,NeonInput:x},props:{modelValue:{type:Number,default:null},min:{type:Number,required:!1},max:{type:Number,required:!1},step:{type:Number,required:!1},color:{type:String,default:g.NeonFunctionalColor.Primary},size:{type:String,default:q.NeonSize.Medium},locale:{type:String,default:null},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},editable:{type:Boolean,default:!0},spinButtons:{type:Boolean,default:!1},percentage:{type:Boolean,default:!1},decimals:{type:Number,required:!1},valueTemplate:{type:String,required:!1},inputmode:{type:String,default:S.NeonInputMode.Numeric},incrementLabel:{type:String,default:"Increment"},decrementLabel:{type:String,default:"Decrement"}},emits:["update:modelValue"],setup(e,{emit:f}){const N=u.useAttrs(),o=u.ref(!1),r=t=>{e.disabled||f("update:modelValue",t)},v=u.computed(()=>{const{onBlur:t,onFocus:n,...m}=N;return m}),V=t=>{const n=s.NeonNumberUtils.parseNumber(t),m=t!==""&&t!==null?Math.max(Math.min(n,e.max??Number.MAX_SAFE_INTEGER),e.min??Number.MIN_SAFE_INTEGER):null;(m===null||!isNaN(n))&&r(m)},l=u.computed(()=>e.decimals??(e.percentage?0:void 0)),a=u.computed(()=>e.percentage&&l.value!==void 0?l.value+2:l.value),i=u.computed(()=>{const t=e.modelValue!==null?+e.modelValue:e.min||0;return a.value!==void 0?Number(t.toFixed(a.value)):t}),b=u.computed(()=>e.modelValue!==null&&(e.valueTemplate!==void 0||l.value!==void 0||e.percentage!==void 0)?s.NeonNumberUtils.formatNumber(e.modelValue,{decimals:l.value,format:e.valueTemplate,percentage:e.percentage},e.locale):e.modelValue),d=u.computed(()=>{var t;return a.value?(t=e.modelValue)==null?void 0:t.toFixed(a.value):e.modelValue}),y=u.computed(()=>o.value?d.value?`${d.value}`:"":b.value),c=u.computed(()=>e.step??(e.percentage?.01:1));return{focus:o,sanitizedAttributes:v,computedDecimals:l,computedRawDecimals:a,computedValue:i,computedStep:c,displayValue:y,valueChanged:V,increment:()=>{const t=i.value+c.value,n=e.max!==void 0?Math.min(e.max,t):t;n!==e.modelValue&&r(n)},decrement:()=>{const t=i.value-c.value,n=e.min!==void 0?Math.max(e.min,t):t;n!==e.modelValue&&r(n)},onFocus:()=>o.value=!0,onBlur:()=>o.value=!1}}});module.exports=M;
+"use strict";const u=require("vue"),g=require("../../../common/enums/NeonFunctionalColor.cjs.js"),S=require("../../../common/enums/NeonSize.cjs.js"),q=require("../../../common/enums/NeonInputMode.cjs.js"),F=require("../button/NeonButton.vue.cjs.js"),B=require("../field-group/NeonFieldGroup.vue.cjs.js"),p=require("../input/NeonInput.vue.cjs.js"),s=require("../../../common/utils/NeonNumberUtils.cjs.js"),x=u.defineComponent({name:"NeonNumber",components:{NeonButton:F,NeonFieldGroup:B,NeonInput:p},props:{id:{type:String,default:null},modelValue:{type:Number,default:null},min:{type:Number,required:!1},max:{type:Number,required:!1},step:{type:Number,required:!1},color:{type:String,default:g.NeonFunctionalColor.Primary},size:{type:String,default:S.NeonSize.Medium},locale:{type:String,default:null},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},editable:{type:Boolean,default:!0},spinButtons:{type:Boolean,default:!1},percentage:{type:Boolean,default:!1},decimals:{type:Number,required:!1},valueTemplate:{type:String,required:!1},inputmode:{type:String,default:q.NeonInputMode.Numeric},incrementLabel:{type:String,default:"Increment"},decrementLabel:{type:String,default:"Decrement"}},emits:["update:modelValue"],setup(e,{emit:f}){const N=u.useAttrs(),o=u.ref(!1),r=t=>{e.disabled||f("update:modelValue",t)},v=u.computed(()=>{const{onBlur:t,onFocus:n,...i}=N;return i}),V=t=>{const n=s.NeonNumberUtils.parseNumber(t),i=t!==""&&t!==null?Math.max(Math.min(n,e.max??Number.MAX_SAFE_INTEGER),e.min??Number.MIN_SAFE_INTEGER):null;(i===null||!isNaN(n))&&r(i)},l=u.computed(()=>e.decimals??(e.percentage?0:void 0)),a=u.computed(()=>e.percentage&&l.value!==void 0?l.value+2:l.value),m=u.computed(()=>{const t=e.modelValue!==null?+e.modelValue:e.min||0;return a.value!==void 0?Number(t.toFixed(a.value)):t}),b=u.computed(()=>e.modelValue!==null&&(e.valueTemplate!==void 0||l.value!==void 0||e.percentage!==void 0)?s.NeonNumberUtils.formatNumber(e.modelValue,{decimals:l.value,format:e.valueTemplate,percentage:e.percentage},e.locale):e.modelValue),c=u.computed(()=>{var t;return a.value?(t=e.modelValue)==null?void 0:t.toFixed(a.value):e.modelValue}),y=u.computed(()=>o.value?c.value?`${c.value}`:"":b.value),d=u.computed(()=>e.step??(e.percentage?.01:1));return{focus:o,sanitizedAttributes:v,computedDecimals:l,computedRawDecimals:a,computedValue:m,computedStep:d,displayValue:y,valueChanged:V,increment:()=>{const t=m.value+d.value,n=e.max!==void 0?Math.min(e.max,t):t;n!==e.modelValue&&r(n)},decrement:()=>{const t=m.value-d.value,n=e.min!==void 0?Math.max(e.min,t):t;n!==e.modelValue&&r(n)},onFocus:()=>o.value=!0,onBlur:()=>o.value=!1}}});module.exports=x;
 //# sourceMappingURL=NeonNumber.cjs.js.map

package/dist/components/user-input/number/NeonNumber.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonNumber.cjs.js","sources":["../../../../src/components/user-input/number/NeonNumber.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonFieldGroup from '@/components/user-input/field-group/NeonFieldGroup.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport { NeonNumberUtils } from '@/common/utils/NeonNumberUtils';\n\n/**\n * <p>\n *   The <strong>NeonNumber</strong> component is the equivalent of an <strong>&lt;input type=\"number\" /&gt;</strong>\n *   with -/+ spin buttons. In addition, it supports formatting as a percentage or with a provided custom template and\n *   also pasting of values in the user's locale, e.g. 6,543.12.\n * </p>\n * <p><strong>NeonNumber</strong> supports all the properties found on an HTML &lt;input&gt;.</p>\n */\nexport default defineComponent({\n  name: 'NeonNumber',\n  components: {\n    NeonButton,\n    NeonFieldGroup,\n    NeonInput,\n  },\n  props: {\n    /**\n     * The value of the number input. Either a valid number or null.\n     */\n    modelValue: { type: Number, default: null },\n    /**\n     * The minimum value the input can accept.\n     */\n    min: { type: Number, required: false },\n    /**\n     * The maximum value the input can accept.\n     */\n    max: { type: Number, required: false },\n    /**\n     * The step value for the spin buttons.\n     */\n    step: { type: Number, required: false },\n    /**\n     * The component color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The component size.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The locale used for display purposes. This defaults to the browser's locale if none is provided.\n     */\n    locale: { type: String, default: null },\n    /**\n     * Placeholder text to display in the input\n     */\n    placeholder: { type: String, default: null },\n    /**\n     * Whether the component is disabled.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Enable/disable direct editing of the value.\n     */\n    editable: { type: Boolean, default: true },\n    /**\n     * Show/hide spin buttons. NOTE: The user can still use up/down arrow keys when the input has focus.\n     */\n    spinButtons: { type: Boolean, default: false },\n    /**\n     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%.\n     */\n    percentage: { type: Boolean, default: false },\n    /**\n     * The rounding precision for display formatting.\n     */\n    decimals: { type: Number, required: false },\n    /**\n     * A template string used for formatting the value for display. Use the placeholder {value} to reference the value in\n     * the template string. e.g. value = 90, ${value} => $90.\n     */\n    valueTemplate: { type: String, required: false },\n    /**\n     * The HTML inputmode of the component. Either 'numeric' or 'decimal'.\n     */\n    inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Numeric },\n    /**\n     * ARIA label for the increment spinner button.\n     */\n    incrementLabel: { type: String, default: 'Increment' },\n    /**\n     * ARIA label for the decrement spinner button.\n     */\n    decrementLabel: { type: String, default: 'Decrement' },\n  },\n  emits: [\n    /**\n     * Emitted when the user changes the value of the number via the increment/decrement buttons or manually entering\n     * the value.\n     * @type {number | null} the current value or null if the value has been cleared.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n    const focus = ref(false);\n\n    const emitValue = (value: number | null) => {\n      if (!props.disabled) {\n        emit('update:modelValue', value);\n      }\n    };\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onBlur, onFocus, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const valueChanged = (value: string) => {\n      const parsedValue = NeonNumberUtils.parseNumber(value);\n      const newValue =\n        value !== '' && value !== null\n          ? Math.max(Math.min(parsedValue, props.max ?? Number.MAX_SAFE_INTEGER), props.min ?? Number.MIN_SAFE_INTEGER)\n          : null;\n      if (newValue === null || !isNaN(parsedValue)) {\n        emitValue(newValue);\n      }\n    };\n\n    const computedDecimals = computed(() => {\n      return props.decimals ?? (props.percentage ? 0 : undefined);\n    });\n\n    const computedRawDecimals = computed(() => {\n      return props.percentage && computedDecimals.value !== undefined\n        ? computedDecimals.value + 2\n        : computedDecimals.value;\n    });\n\n    const computedValue = computed(() => {\n      const newValue = props.modelValue !== null ? +props.modelValue : props.min || 0;\n      return computedRawDecimals.value !== undefined ? Number(newValue.toFixed(computedRawDecimals.value)) : newValue;\n    });\n\n    const formattedValue = computed(() => {\n      return props.modelValue !== null &&\n        (props.valueTemplate !== undefined || computedDecimals.value !== undefined || props.percentage !== undefined)\n        ? NeonNumberUtils.formatNumber(\n            props.modelValue,\n            {\n              decimals: computedDecimals.value,\n              format: props.valueTemplate,\n              percentage: props.percentage,\n            },\n            props.locale,\n          )\n        : props.modelValue;\n    });\n\n    const rawValue = computed(() => {\n      return computedRawDecimals.value ? props.modelValue?.toFixed(computedRawDecimals.value) : props.modelValue;\n    });\n\n    const displayValue = computed(() => {\n      return focus.value ? (rawValue.value ? `${rawValue.value}` : '') : formattedValue.value;\n    });\n\n    const computedStep = computed(() => {\n      return props.step ?? (props.percentage ? 0.01 : 1);\n    });\n\n    const decrement = () => {\n      const newValue = computedValue.value - computedStep.value;\n      const emittedValue = props.min !== undefined ? Math.max(props.min, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const increment = () => {\n      const newValue = computedValue.value + computedStep.value;\n      const emittedValue = props.max !== undefined ? Math.min(props.max, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const onFocus = () => (focus.value = true);\n    const onBlur = () => (focus.value = false);\n\n    return {\n      focus,\n      sanitizedAttributes,\n      computedDecimals,\n      computedRawDecimals,\n      computedValue,\n      computedStep,\n      displayValue,\n      valueChanged,\n      increment,\n      decrement,\n      onFocus,\n      onBlur,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonFieldGroup","NeonInput","NeonFunctionalColor","NeonSize","NeonInputMode","props","emit","attrs","useAttrs","focus","ref","emitValue","value","sanitizedAttributes","computed","onBlur","onFocus","sanitized","valueChanged","parsedValue","NeonNumberUtils","newValue","computedDecimals","computedRawDecimals","computedValue","formattedValue","rawValue","_a","displayValue","computedStep","emittedValue"],"mappings":"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"}
+{"version":3,"file":"NeonNumber.cjs.js","sources":["../../../../src/components/user-input/number/NeonNumber.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonFieldGroup from '@/components/user-input/field-group/NeonFieldGroup.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport { NeonNumberUtils } from '@/common/utils/NeonNumberUtils';\n\n/**\n * <p>\n *   The <strong>NeonNumber</strong> component is the equivalent of an <strong>&lt;input type=\"number\" /&gt;</strong>\n *   with -/+ spin buttons. In addition, it supports formatting as a percentage or with a provided custom template and\n *   also pasting of values in the user's locale, e.g. 6,543.12.\n * </p>\n * <p><strong>NeonNumber</strong> supports all the properties found on an HTML &lt;input&gt;.</p>\n */\nexport default defineComponent({\n  name: 'NeonNumber',\n  components: {\n    NeonButton,\n    NeonFieldGroup,\n    NeonInput,\n  },\n  props: {\n    /**\n     * The id the input\n     */\n    id: { type: String, default: null },\n    /**\n     * The value of the number input. Either a valid number or null.\n     */\n    modelValue: { type: Number, default: null },\n    /**\n     * The minimum value the input can accept.\n     */\n    min: { type: Number, required: false },\n    /**\n     * The maximum value the input can accept.\n     */\n    max: { type: Number, required: false },\n    /**\n     * The step value for the spin buttons.\n     */\n    step: { type: Number, required: false },\n    /**\n     * The component color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The component size.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The locale used for display purposes. This defaults to the browser's locale if none is provided.\n     */\n    locale: { type: String, default: null },\n    /**\n     * Placeholder text to display in the input\n     */\n    placeholder: { type: String, default: null },\n    /**\n     * Whether the component is disabled.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Enable/disable direct editing of the value.\n     */\n    editable: { type: Boolean, default: true },\n    /**\n     * Show/hide spin buttons. NOTE: The user can still use up/down arrow keys when the input has focus.\n     */\n    spinButtons: { type: Boolean, default: false },\n    /**\n     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%.\n     */\n    percentage: { type: Boolean, default: false },\n    /**\n     * The rounding precision for display formatting.\n     */\n    decimals: { type: Number, required: false },\n    /**\n     * A template string used for formatting the value for display. Use the placeholder {value} to reference the value in\n     * the template string. e.g. value = 90, ${value} => $90.\n     */\n    valueTemplate: { type: String, required: false },\n    /**\n     * The HTML inputmode of the component. Either 'numeric' or 'decimal'.\n     */\n    inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Numeric },\n    /**\n     * ARIA label for the increment spinner button.\n     */\n    incrementLabel: { type: String, default: 'Increment' },\n    /**\n     * ARIA label for the decrement spinner button.\n     */\n    decrementLabel: { type: String, default: 'Decrement' },\n  },\n  emits: [\n    /**\n     * Emitted when the user changes the value of the number via the increment/decrement buttons or manually entering\n     * the value.\n     * @type {number | null} the current value or null if the value has been cleared.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n    const focus = ref(false);\n\n    const emitValue = (value: number | null) => {\n      if (!props.disabled) {\n        emit('update:modelValue', value);\n      }\n    };\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onBlur, onFocus, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const valueChanged = (value: string) => {\n      const parsedValue = NeonNumberUtils.parseNumber(value);\n      const newValue =\n        value !== '' && value !== null\n          ? Math.max(Math.min(parsedValue, props.max ?? Number.MAX_SAFE_INTEGER), props.min ?? Number.MIN_SAFE_INTEGER)\n          : null;\n      if (newValue === null || !isNaN(parsedValue)) {\n        emitValue(newValue);\n      }\n    };\n\n    const computedDecimals = computed(() => {\n      return props.decimals ?? (props.percentage ? 0 : undefined);\n    });\n\n    const computedRawDecimals = computed(() => {\n      return props.percentage && computedDecimals.value !== undefined\n        ? computedDecimals.value + 2\n        : computedDecimals.value;\n    });\n\n    const computedValue = computed(() => {\n      const newValue = props.modelValue !== null ? +props.modelValue : props.min || 0;\n      return computedRawDecimals.value !== undefined ? Number(newValue.toFixed(computedRawDecimals.value)) : newValue;\n    });\n\n    const formattedValue = computed(() => {\n      return props.modelValue !== null &&\n        (props.valueTemplate !== undefined || computedDecimals.value !== undefined || props.percentage !== undefined)\n        ? NeonNumberUtils.formatNumber(\n            props.modelValue,\n            {\n              decimals: computedDecimals.value,\n              format: props.valueTemplate,\n              percentage: props.percentage,\n            },\n            props.locale,\n          )\n        : props.modelValue;\n    });\n\n    const rawValue = computed(() => {\n      return computedRawDecimals.value ? props.modelValue?.toFixed(computedRawDecimals.value) : props.modelValue;\n    });\n\n    const displayValue = computed(() => {\n      return focus.value ? (rawValue.value ? `${rawValue.value}` : '') : formattedValue.value;\n    });\n\n    const computedStep = computed(() => {\n      return props.step ?? (props.percentage ? 0.01 : 1);\n    });\n\n    const decrement = () => {\n      const newValue = computedValue.value - computedStep.value;\n      const emittedValue = props.min !== undefined ? Math.max(props.min, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const increment = () => {\n      const newValue = computedValue.value + computedStep.value;\n      const emittedValue = props.max !== undefined ? Math.min(props.max, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const onFocus = () => (focus.value = true);\n    const onBlur = () => (focus.value = false);\n\n    return {\n      focus,\n      sanitizedAttributes,\n      computedDecimals,\n      computedRawDecimals,\n      computedValue,\n      computedStep,\n      displayValue,\n      valueChanged,\n      increment,\n      decrement,\n      onFocus,\n      onBlur,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonFieldGroup","NeonInput","NeonFunctionalColor","NeonSize","NeonInputMode","props","emit","attrs","useAttrs","focus","ref","emitValue","value","sanitizedAttributes","computed","onBlur","onFocus","sanitized","valueChanged","parsedValue","NeonNumberUtils","newValue","computedDecimals","computedRawDecimals","computedValue","formattedValue","rawValue","_a","displayValue","computedStep","emittedValue"],"mappings":"qZAiBAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,WAAY,CACV,WAAAC,EACA,eAAAC,EACA,UAAAC,CAAA,EAEF,MAAO,CAIL,GAAI,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI7B,WAAY,CAAE,KAAM,OAAQ,QAAS,IAAA,EAIrC,IAAK,CAAE,KAAM,OAAQ,SAAU,EAAA,EAI/B,IAAK,CAAE,KAAM,OAAQ,SAAU,EAAA,EAI/B,KAAM,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIhC,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,OAAA,EAIjF,KAAM,CAAE,KAAM,OAA0B,QAASC,EAAAA,SAAS,MAAA,EAI1D,OAAQ,CAAE,KAAM,OAAQ,QAAS,IAAA,EAIjC,YAAa,CAAE,KAAM,OAAQ,QAAS,IAAA,EAItC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,YAAa,CAAE,KAAM,QAAS,QAAS,EAAA,EAIvC,WAAY,CAAE,KAAM,QAAS,QAAS,EAAA,EAItC,SAAU,CAAE,KAAM,OAAQ,SAAU,EAAA,EAKpC,cAAe,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIzC,UAAW,CAAE,KAAM,OAA+B,QAASC,EAAAA,cAAc,OAAA,EAIzE,eAAgB,CAAE,KAAM,OAAQ,QAAS,WAAA,EAIzC,eAAgB,CAAE,KAAM,OAAQ,QAAS,WAAA,CAAY,EAEvD,MAAO,CAML,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAQC,EAAAA,SAAA,EACRC,EAAQC,EAAAA,IAAI,EAAK,EAEjBC,EAAaC,GAAyB,CACrCP,EAAM,UACTC,EAAK,oBAAqBM,CAAK,CAEnC,EAEMC,EAAsBC,EAAAA,SAAS,IAAM,CAEzC,KAAM,CAAE,OAAAC,EAAQ,QAAAC,EAAS,GAAGC,GAAcV,EAC1C,OAAOU,CACT,CAAC,EAEKC,EAAgBN,GAAkB,CACtC,MAAMO,EAAcC,EAAAA,gBAAgB,YAAYR,CAAK,EAC/CS,EACJT,IAAU,IAAMA,IAAU,KACtB,KAAK,IAAI,KAAK,IAAIO,EAAad,EAAM,KAAO,OAAO,gBAAgB,EAAGA,EAAM,KAAO,OAAO,gBAAgB,EAC1G,MACFgB,IAAa,MAAQ,CAAC,MAAMF,CAAW,IACzCR,EAAUU,CAAQ,CAEtB,EAEMC,EAAmBR,EAAAA,SAAS,IACzBT,EAAM,WAAaA,EAAM,WAAa,EAAI,OAClD,EAEKkB,EAAsBT,EAAAA,SAAS,IAC5BT,EAAM,YAAciB,EAAiB,QAAU,OAClDA,EAAiB,MAAQ,EACzBA,EAAiB,KACtB,EAEKE,EAAgBV,EAAAA,SAAS,IAAM,CACnC,MAAMO,EAAWhB,EAAM,aAAe,KAAO,CAACA,EAAM,WAAaA,EAAM,KAAO,EAC9E,OAAOkB,EAAoB,QAAU,OAAY,OAAOF,EAAS,QAAQE,EAAoB,KAAK,CAAC,EAAIF,CACzG,CAAC,EAEKI,EAAiBX,EAAAA,SAAS,IACvBT,EAAM,aAAe,OACzBA,EAAM,gBAAkB,QAAaiB,EAAiB,QAAU,QAAajB,EAAM,aAAe,QACjGe,EAAAA,gBAAgB,aACdf,EAAM,WACN,CACE,SAAUiB,EAAiB,MAC3B,OAAQjB,EAAM,cACd,WAAYA,EAAM,UAAA,EAEpBA,EAAM,MAAA,EAERA,EAAM,UACX,EAEKqB,EAAWZ,EAAAA,SAAS,IAAM,OAC9B,OAAOS,EAAoB,OAAQI,EAAAtB,EAAM,aAAN,YAAAsB,EAAkB,QAAQJ,EAAoB,OAASlB,EAAM,UAClG,CAAC,EAEKuB,EAAed,EAAAA,SAAS,IACrBL,EAAM,MAASiB,EAAS,MAAQ,GAAGA,EAAS,KAAK,GAAK,GAAMD,EAAe,KACnF,EAEKI,EAAef,EAAAA,SAAS,IACrBT,EAAM,OAASA,EAAM,WAAa,IAAO,EACjD,EAqBD,MAAO,CACL,MAAAI,EACA,oBAAAI,EACA,iBAAAS,EACA,oBAAAC,EACA,cAAAC,EACA,aAAAK,EACA,aAAAD,EACA,aAAAV,EACA,UApBgB,IAAM,CACtB,MAAMG,EAAWG,EAAc,MAAQK,EAAa,MAC9CC,EAAezB,EAAM,MAAQ,OAAY,KAAK,IAAIA,EAAM,IAAKgB,CAAQ,EAAIA,EAC3ES,IAAiBzB,EAAM,YACzBM,EAAUmB,CAAY,CAE1B,EAeE,UA7BgB,IAAM,CACtB,MAAMT,EAAWG,EAAc,MAAQK,EAAa,MAC9CC,EAAezB,EAAM,MAAQ,OAAY,KAAK,IAAIA,EAAM,IAAKgB,CAAQ,EAAIA,EAC3ES,IAAiBzB,EAAM,YACzBM,EAAUmB,CAAY,CAE1B,EAwBE,QAdc,IAAOrB,EAAM,MAAQ,GAenC,OAda,IAAOA,EAAM,MAAQ,EAclC,CAEJ,CACF,CAAC"}

package/dist/components/user-input/number/NeonNumber.es.js

@@ -1,11 +1,11 @@
 import { defineComponent as g, useAttrs as S, ref as B, computed as a } from "vue";
 import { NeonFunctionalColor as F } from "../../../common/enums/NeonFunctionalColor.es.js";
-import { NeonSize as x } from "../../../common/enums/NeonSize.es.js";
-import { NeonInputMode as p } from "../../../common/enums/NeonInputMode.es.js";
+import { NeonSize as p } from "../../../common/enums/NeonSize.es.js";
+import { NeonInputMode as x } from "../../../common/enums/NeonInputMode.es.js";
 import M from "../button/NeonButton.vue.es.js";
 import h from "../field-group/NeonFieldGroup.vue.es.js";
 import w from "../input/NeonInput.vue.es.js";
-import { NeonNumberUtils as s } from "../../../common/utils/NeonNumberUtils.es.js";
+import { NeonNumberUtils as f } from "../../../common/utils/NeonNumberUtils.es.js";
 const P = g({
   name: "NeonNumber",
   components: {
@@ -14,6 +14,10 @@ const P = g({
     NeonInput: w
   },
   props: {
+    /**
+     * The id the input
+     */
+    id: { type: String, default: null },
     /**
      * The value of the number input. Either a valid number or null.
      */
@@ -37,7 +41,7 @@ const P = g({
     /**
      * The component size.
      */
-    size: { type: String, default: x.Medium },
+    size: { type: String, default: p.Medium },
     /**
      * The locale used for display purposes. This defaults to the browser's locale if none is provided.
      */
@@ -74,7 +78,7 @@ const P = g({
     /**
      * The HTML inputmode of the component. Either 'numeric' or 'decimal'.
      */
-    inputmode: { type: String, default: p.Numeric },
+    inputmode: { type: String, default: x.Numeric },
     /**
      * ARIA label for the increment spinner button.
      */
@@ -92,19 +96,19 @@ const P = g({
      */
     "update:modelValue"
   ],
-  setup(e, { emit: f }) {
+  setup(e, { emit: s }) {
     const v = S(), o = B(!1), r = (t) => {
-      e.disabled || f("update:modelValue", t);
+      e.disabled || s("update:modelValue", t);
     }, N = a(() => {
       const { onBlur: t, onFocus: l, ...m } = v;
       return m;
     }), V = (t) => {
-      const l = s.parseNumber(t), m = t !== "" && t !== null ? Math.max(Math.min(l, e.max ?? Number.MAX_SAFE_INTEGER), e.min ?? Number.MIN_SAFE_INTEGER) : null;
+      const l = f.parseNumber(t), m = t !== "" && t !== null ? Math.max(Math.min(l, e.max ?? Number.MAX_SAFE_INTEGER), e.min ?? Number.MIN_SAFE_INTEGER) : null;
       (m === null || !isNaN(l)) && r(m);
     }, u = a(() => e.decimals ?? (e.percentage ? 0 : void 0)), n = a(() => e.percentage && u.value !== void 0 ? u.value + 2 : u.value), i = a(() => {
       const t = e.modelValue !== null ? +e.modelValue : e.min || 0;
       return n.value !== void 0 ? Number(t.toFixed(n.value)) : t;
-    }), y = a(() => e.modelValue !== null && (e.valueTemplate !== void 0 || u.value !== void 0 || e.percentage !== void 0) ? s.formatNumber(
+    }), y = a(() => e.modelValue !== null && (e.valueTemplate !== void 0 || u.value !== void 0 || e.percentage !== void 0) ? f.formatNumber(
       e.modelValue,
       {
         decimals: u.value,

package/dist/components/user-input/number/NeonNumber.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonNumber.es.js","sources":["../../../../src/components/user-input/number/NeonNumber.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonFieldGroup from '@/components/user-input/field-group/NeonFieldGroup.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport { NeonNumberUtils } from '@/common/utils/NeonNumberUtils';\n\n/**\n * <p>\n *   The <strong>NeonNumber</strong> component is the equivalent of an <strong>&lt;input type=\"number\" /&gt;</strong>\n *   with -/+ spin buttons. In addition, it supports formatting as a percentage or with a provided custom template and\n *   also pasting of values in the user's locale, e.g. 6,543.12.\n * </p>\n * <p><strong>NeonNumber</strong> supports all the properties found on an HTML &lt;input&gt;.</p>\n */\nexport default defineComponent({\n  name: 'NeonNumber',\n  components: {\n    NeonButton,\n    NeonFieldGroup,\n    NeonInput,\n  },\n  props: {\n    /**\n     * The value of the number input. Either a valid number or null.\n     */\n    modelValue: { type: Number, default: null },\n    /**\n     * The minimum value the input can accept.\n     */\n    min: { type: Number, required: false },\n    /**\n     * The maximum value the input can accept.\n     */\n    max: { type: Number, required: false },\n    /**\n     * The step value for the spin buttons.\n     */\n    step: { type: Number, required: false },\n    /**\n     * The component color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The component size.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The locale used for display purposes. This defaults to the browser's locale if none is provided.\n     */\n    locale: { type: String, default: null },\n    /**\n     * Placeholder text to display in the input\n     */\n    placeholder: { type: String, default: null },\n    /**\n     * Whether the component is disabled.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Enable/disable direct editing of the value.\n     */\n    editable: { type: Boolean, default: true },\n    /**\n     * Show/hide spin buttons. NOTE: The user can still use up/down arrow keys when the input has focus.\n     */\n    spinButtons: { type: Boolean, default: false },\n    /**\n     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%.\n     */\n    percentage: { type: Boolean, default: false },\n    /**\n     * The rounding precision for display formatting.\n     */\n    decimals: { type: Number, required: false },\n    /**\n     * A template string used for formatting the value for display. Use the placeholder {value} to reference the value in\n     * the template string. e.g. value = 90, ${value} => $90.\n     */\n    valueTemplate: { type: String, required: false },\n    /**\n     * The HTML inputmode of the component. Either 'numeric' or 'decimal'.\n     */\n    inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Numeric },\n    /**\n     * ARIA label for the increment spinner button.\n     */\n    incrementLabel: { type: String, default: 'Increment' },\n    /**\n     * ARIA label for the decrement spinner button.\n     */\n    decrementLabel: { type: String, default: 'Decrement' },\n  },\n  emits: [\n    /**\n     * Emitted when the user changes the value of the number via the increment/decrement buttons or manually entering\n     * the value.\n     * @type {number | null} the current value or null if the value has been cleared.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n    const focus = ref(false);\n\n    const emitValue = (value: number | null) => {\n      if (!props.disabled) {\n        emit('update:modelValue', value);\n      }\n    };\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onBlur, onFocus, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const valueChanged = (value: string) => {\n      const parsedValue = NeonNumberUtils.parseNumber(value);\n      const newValue =\n        value !== '' && value !== null\n          ? Math.max(Math.min(parsedValue, props.max ?? Number.MAX_SAFE_INTEGER), props.min ?? Number.MIN_SAFE_INTEGER)\n          : null;\n      if (newValue === null || !isNaN(parsedValue)) {\n        emitValue(newValue);\n      }\n    };\n\n    const computedDecimals = computed(() => {\n      return props.decimals ?? (props.percentage ? 0 : undefined);\n    });\n\n    const computedRawDecimals = computed(() => {\n      return props.percentage && computedDecimals.value !== undefined\n        ? computedDecimals.value + 2\n        : computedDecimals.value;\n    });\n\n    const computedValue = computed(() => {\n      const newValue = props.modelValue !== null ? +props.modelValue : props.min || 0;\n      return computedRawDecimals.value !== undefined ? Number(newValue.toFixed(computedRawDecimals.value)) : newValue;\n    });\n\n    const formattedValue = computed(() => {\n      return props.modelValue !== null &&\n        (props.valueTemplate !== undefined || computedDecimals.value !== undefined || props.percentage !== undefined)\n        ? NeonNumberUtils.formatNumber(\n            props.modelValue,\n            {\n              decimals: computedDecimals.value,\n              format: props.valueTemplate,\n              percentage: props.percentage,\n            },\n            props.locale,\n          )\n        : props.modelValue;\n    });\n\n    const rawValue = computed(() => {\n      return computedRawDecimals.value ? props.modelValue?.toFixed(computedRawDecimals.value) : props.modelValue;\n    });\n\n    const displayValue = computed(() => {\n      return focus.value ? (rawValue.value ? `${rawValue.value}` : '') : formattedValue.value;\n    });\n\n    const computedStep = computed(() => {\n      return props.step ?? (props.percentage ? 0.01 : 1);\n    });\n\n    const decrement = () => {\n      const newValue = computedValue.value - computedStep.value;\n      const emittedValue = props.min !== undefined ? Math.max(props.min, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const increment = () => {\n      const newValue = computedValue.value + computedStep.value;\n      const emittedValue = props.max !== undefined ? Math.min(props.max, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const onFocus = () => (focus.value = true);\n    const onBlur = () => (focus.value = false);\n\n    return {\n      focus,\n      sanitizedAttributes,\n      computedDecimals,\n      computedRawDecimals,\n      computedValue,\n      computedStep,\n      displayValue,\n      valueChanged,\n      increment,\n      decrement,\n      onFocus,\n      onBlur,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonFieldGroup","NeonInput","NeonFunctionalColor","NeonSize","NeonInputMode","props","emit","attrs","useAttrs","focus","ref","emitValue","value","sanitizedAttributes","computed","onBlur","onFocus","sanitized","valueChanged","parsedValue","NeonNumberUtils","newValue","computedDecimals","computedRawDecimals","computedValue","formattedValue","rawValue","_a","displayValue","computedStep","emittedValue"],"mappings":"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"}
+{"version":3,"file":"NeonNumber.es.js","sources":["../../../../src/components/user-input/number/NeonNumber.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonFieldGroup from '@/components/user-input/field-group/NeonFieldGroup.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport { NeonNumberUtils } from '@/common/utils/NeonNumberUtils';\n\n/**\n * <p>\n *   The <strong>NeonNumber</strong> component is the equivalent of an <strong>&lt;input type=\"number\" /&gt;</strong>\n *   with -/+ spin buttons. In addition, it supports formatting as a percentage or with a provided custom template and\n *   also pasting of values in the user's locale, e.g. 6,543.12.\n * </p>\n * <p><strong>NeonNumber</strong> supports all the properties found on an HTML &lt;input&gt;.</p>\n */\nexport default defineComponent({\n  name: 'NeonNumber',\n  components: {\n    NeonButton,\n    NeonFieldGroup,\n    NeonInput,\n  },\n  props: {\n    /**\n     * The id the input\n     */\n    id: { type: String, default: null },\n    /**\n     * The value of the number input. Either a valid number or null.\n     */\n    modelValue: { type: Number, default: null },\n    /**\n     * The minimum value the input can accept.\n     */\n    min: { type: Number, required: false },\n    /**\n     * The maximum value the input can accept.\n     */\n    max: { type: Number, required: false },\n    /**\n     * The step value for the spin buttons.\n     */\n    step: { type: Number, required: false },\n    /**\n     * The component color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The component size.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The locale used for display purposes. This defaults to the browser's locale if none is provided.\n     */\n    locale: { type: String, default: null },\n    /**\n     * Placeholder text to display in the input\n     */\n    placeholder: { type: String, default: null },\n    /**\n     * Whether the component is disabled.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Enable/disable direct editing of the value.\n     */\n    editable: { type: Boolean, default: true },\n    /**\n     * Show/hide spin buttons. NOTE: The user can still use up/down arrow keys when the input has focus.\n     */\n    spinButtons: { type: Boolean, default: false },\n    /**\n     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%.\n     */\n    percentage: { type: Boolean, default: false },\n    /**\n     * The rounding precision for display formatting.\n     */\n    decimals: { type: Number, required: false },\n    /**\n     * A template string used for formatting the value for display. Use the placeholder {value} to reference the value in\n     * the template string. e.g. value = 90, ${value} => $90.\n     */\n    valueTemplate: { type: String, required: false },\n    /**\n     * The HTML inputmode of the component. Either 'numeric' or 'decimal'.\n     */\n    inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Numeric },\n    /**\n     * ARIA label for the increment spinner button.\n     */\n    incrementLabel: { type: String, default: 'Increment' },\n    /**\n     * ARIA label for the decrement spinner button.\n     */\n    decrementLabel: { type: String, default: 'Decrement' },\n  },\n  emits: [\n    /**\n     * Emitted when the user changes the value of the number via the increment/decrement buttons or manually entering\n     * the value.\n     * @type {number | null} the current value or null if the value has been cleared.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n    const focus = ref(false);\n\n    const emitValue = (value: number | null) => {\n      if (!props.disabled) {\n        emit('update:modelValue', value);\n      }\n    };\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onBlur, onFocus, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const valueChanged = (value: string) => {\n      const parsedValue = NeonNumberUtils.parseNumber(value);\n      const newValue =\n        value !== '' && value !== null\n          ? Math.max(Math.min(parsedValue, props.max ?? Number.MAX_SAFE_INTEGER), props.min ?? Number.MIN_SAFE_INTEGER)\n          : null;\n      if (newValue === null || !isNaN(parsedValue)) {\n        emitValue(newValue);\n      }\n    };\n\n    const computedDecimals = computed(() => {\n      return props.decimals ?? (props.percentage ? 0 : undefined);\n    });\n\n    const computedRawDecimals = computed(() => {\n      return props.percentage && computedDecimals.value !== undefined\n        ? computedDecimals.value + 2\n        : computedDecimals.value;\n    });\n\n    const computedValue = computed(() => {\n      const newValue = props.modelValue !== null ? +props.modelValue : props.min || 0;\n      return computedRawDecimals.value !== undefined ? Number(newValue.toFixed(computedRawDecimals.value)) : newValue;\n    });\n\n    const formattedValue = computed(() => {\n      return props.modelValue !== null &&\n        (props.valueTemplate !== undefined || computedDecimals.value !== undefined || props.percentage !== undefined)\n        ? NeonNumberUtils.formatNumber(\n            props.modelValue,\n            {\n              decimals: computedDecimals.value,\n              format: props.valueTemplate,\n              percentage: props.percentage,\n            },\n            props.locale,\n          )\n        : props.modelValue;\n    });\n\n    const rawValue = computed(() => {\n      return computedRawDecimals.value ? props.modelValue?.toFixed(computedRawDecimals.value) : props.modelValue;\n    });\n\n    const displayValue = computed(() => {\n      return focus.value ? (rawValue.value ? `${rawValue.value}` : '') : formattedValue.value;\n    });\n\n    const computedStep = computed(() => {\n      return props.step ?? (props.percentage ? 0.01 : 1);\n    });\n\n    const decrement = () => {\n      const newValue = computedValue.value - computedStep.value;\n      const emittedValue = props.min !== undefined ? Math.max(props.min, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const increment = () => {\n      const newValue = computedValue.value + computedStep.value;\n      const emittedValue = props.max !== undefined ? Math.min(props.max, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const onFocus = () => (focus.value = true);\n    const onBlur = () => (focus.value = false);\n\n    return {\n      focus,\n      sanitizedAttributes,\n      computedDecimals,\n      computedRawDecimals,\n      computedValue,\n      computedStep,\n      displayValue,\n      valueChanged,\n      increment,\n      decrement,\n      onFocus,\n      onBlur,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonFieldGroup","NeonInput","NeonFunctionalColor","NeonSize","NeonInputMode","props","emit","attrs","useAttrs","focus","ref","emitValue","value","sanitizedAttributes","computed","onBlur","onFocus","sanitized","valueChanged","parsedValue","NeonNumberUtils","newValue","computedDecimals","computedRawDecimals","computedValue","formattedValue","rawValue","_a","displayValue","computedStep","emittedValue"],"mappings":"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"}

package/dist/components/user-input/number/NeonNumber.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const s=require("./NeonNumber.cjs.js"),n=require("vue"),u=require("../../../_virtual/_plugin-vue_export-helper.cjs.js");function d(e,o,m,p,b,v){const i=n.resolveComponent("neon-button"),r=n.resolveComponent("neon-input"),a=n.resolveComponent("neon-field-group");return n.openBlock(),n.createBlock(a,{class:n.normalizeClass([[`neon-number--${e.size}`,`neon-number--${e.color}`,{"neon-number--disabled":e.disabled,"neon-number--editable":e.editable,"neon-number--with-buttons":e.spinButtons}],"neon-number"]),"indicator-style":"external"},{default:n.withCtx(()=>[e.spinButtons?(n.openBlock(),n.createBlock(i,{key:0,"aria-label":e.decrementLabel,color:e.color,disabled:e.disabled||e.min!==void 0&&e.min===e.modelValue,size:e.size,"button-style":"outline",class:"neon-number__decrement",icon:"minus",onClick:o[0]||(o[0]=l=>e.decrement())},null,8,["aria-label","color","disabled","size"])):n.createCommentVNode("",!0),n.createVNode(r,n.mergeProps({"aria-valuemax":e.max,"aria-valuemin":e.min,"aria-valuenow":e.modelValue,color:e.color,disabled:e.disabled||!e.editable,inputmode:e.inputmode,max:e.max,min:e.min,"model-value":e.displayValue,placeholder:e.placeholder,size:e.size,step:e.computedStep,class:"neon-number__input",role:"spinbutton",type:"text"},e.sanitizedAttributes,{onBlur:o[1]||(o[1]=l=>e.onBlur()),onFocus:o[2]||(o[2]=l=>e.onFocus()),"onUpdate:modelValue":e.valueChanged,onKeydown:[o[3]||(o[3]=n.withKeys(n.withModifiers(l=>e.increment(),["prevent"]),["up"])),o[4]||(o[4]=n.withKeys(n.withModifiers(l=>e.decrement(),["prevent"]),["down"]))]}),null,16,["aria-valuemax","aria-valuemin","aria-valuenow","color","disabled","inputmode","max","min","model-value","placeholder","size","step","onUpdate:modelValue"]),e.spinButtons?(n.openBlock(),n.createBlock(i,{key:1,"aria-label":e.incrementLabel,color:e.color,disabled:e.disabled||e.max!==void 0&&e.max===e.modelValue,size:e.size,"button-style":"outline",class:"neon-number__increment",icon:"plus",onClick:o[5]||(o[5]=l=>e.increment())},null,8,["aria-label","color","disabled","size"])):n.createCommentVNode("",!0)]),_:1},8,["class"])}const t=u(s,[["render",d]]);module.exports=t;
+"use strict";const s=require("./NeonNumber.cjs.js"),n=require("vue"),u=require("../../../_virtual/_plugin-vue_export-helper.cjs.js");function d(e,o,m,p,b,v){const i=n.resolveComponent("neon-button"),r=n.resolveComponent("neon-input"),a=n.resolveComponent("neon-field-group");return n.openBlock(),n.createBlock(a,{class:n.normalizeClass([[`neon-number--${e.size}`,`neon-number--${e.color}`,{"neon-number--disabled":e.disabled,"neon-number--editable":e.editable,"neon-number--with-buttons":e.spinButtons}],"neon-number"]),"indicator-style":"external"},{default:n.withCtx(()=>[e.spinButtons?(n.openBlock(),n.createBlock(i,{key:0,"aria-label":e.decrementLabel,color:e.color,disabled:e.disabled||e.min!==void 0&&e.min===e.modelValue,size:e.size,"button-style":"outline",class:"neon-number__decrement",icon:"minus",onClick:o[0]||(o[0]=l=>e.decrement())},null,8,["aria-label","color","disabled","size"])):n.createCommentVNode("",!0),n.createVNode(r,n.mergeProps({id:e.id,"aria-valuemax":e.max,"aria-valuemin":e.min,"aria-valuenow":e.modelValue,color:e.color,disabled:e.disabled||!e.editable,inputmode:e.inputmode,max:e.max,min:e.min,"model-value":e.displayValue,placeholder:e.placeholder,size:e.size,step:e.computedStep,class:"neon-number__input",role:"spinbutton",type:"text"},e.sanitizedAttributes,{onBlur:o[1]||(o[1]=l=>e.onBlur()),onFocus:o[2]||(o[2]=l=>e.onFocus()),"onUpdate:modelValue":e.valueChanged,onKeydown:[o[3]||(o[3]=n.withKeys(n.withModifiers(l=>e.increment(),["prevent"]),["up"])),o[4]||(o[4]=n.withKeys(n.withModifiers(l=>e.decrement(),["prevent"]),["down"]))]}),null,16,["id","aria-valuemax","aria-valuemin","aria-valuenow","color","disabled","inputmode","max","min","model-value","placeholder","size","step","onUpdate:modelValue"]),e.spinButtons?(n.openBlock(),n.createBlock(i,{key:1,"aria-label":e.incrementLabel,color:e.color,disabled:e.disabled||e.max!==void 0&&e.max===e.modelValue,size:e.size,"button-style":"outline",class:"neon-number__increment",icon:"plus",onClick:o[5]||(o[5]=l=>e.increment())},null,8,["aria-label","color","disabled","size"])):n.createCommentVNode("",!0)]),_:1},8,["class"])}const t=u(s,[["render",d]]);module.exports=t;
 //# sourceMappingURL=NeonNumber.vue.cjs.js.map

package/dist/components/user-input/number/NeonNumber.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonNumber.vue.cjs.js","sources":["../../../../src/components/user-input/number/NeonNumber.vue"],"sourcesContent":["<template>\n  <neon-field-group\n    :class=\"[\n      `neon-number--${size}`,\n      `neon-number--${color}`,\n      {\n        'neon-number--disabled': disabled,\n        'neon-number--editable': editable,\n        'neon-number--with-buttons': spinButtons,\n      },\n    ]\"\n    class=\"neon-number\"\n    indicator-style=\"external\"\n  >\n    <neon-button\n      v-if=\"spinButtons\"\n      :aria-label=\"decrementLabel\"\n      :color=\"color\"\n      :disabled=\"disabled || (min !== undefined && min === modelValue)\"\n      :size=\"size\"\n      button-style=\"outline\"\n      class=\"neon-number__decrement\"\n      icon=\"minus\"\n      @click=\"decrement()\"\n    />\n    <neon-input\n      :aria-valuemax=\"max\"\n      :aria-valuemin=\"min\"\n      :aria-valuenow=\"modelValue\"\n      :color=\"color\"\n      :disabled=\"disabled || !editable\"\n      :inputmode=\"inputmode\"\n      :max=\"max\"\n      :min=\"min\"\n      :model-value=\"displayValue\"\n      :placeholder=\"placeholder\"\n      :size=\"size\"\n      :step=\"computedStep\"\n      class=\"neon-number__input\"\n      role=\"spinbutton\"\n      type=\"text\"\n      v-bind=\"sanitizedAttributes\"\n      @blur=\"onBlur()\"\n      @focus=\"onFocus()\"\n      @update:modelValue=\"valueChanged\"\n      @keydown.up.prevent=\"increment()\"\n      @keydown.down.prevent=\"decrement()\"\n    />\n    <neon-button\n      v-if=\"spinButtons\"\n      :aria-label=\"incrementLabel\"\n      :color=\"color\"\n      :disabled=\"disabled || (max !== undefined && max === modelValue)\"\n      :size=\"size\"\n      button-style=\"outline\"\n      class=\"neon-number__increment\"\n      icon=\"plus\"\n      @click=\"increment()\"\n    />\n  </neon-field-group>\n</template>\n\n<script lang=\"ts\" src=\"./NeonNumber.ts\" />\n"],"names":["_createBlock","_component_neon_field_group","_normalizeClass","_ctx","_component_neon_button","_createVNode","_component_neon_input","_mergeProps"],"mappings":"wSACEA,EAAAA,YA0DmBC,EAAA,CAzDhB,MAAKC,EAAAA,eAAA,CAAA,iBAA0BC,EAAA,IAAI,mBAA0BA,EAAA,KAAK,4BAA6CA,EAAA,iCAA2CA,EAAA,qCAA+CA,EAAA,cASpM,aAAa,CAAA,EACnB,kBAAgB,+BAEhB,IAUE,CATMA,EAAA,2BADRH,EAAAA,YAUEI,EAAA,OARC,aAAYD,EAAA,eACZ,MAAOA,EAAA,MACP,SAAUA,YAAaA,EAAA,MAAQ,QAAaA,EAAA,MAAQA,EAAA,WACpD,KAAMA,EAAA,KACP,eAAa,UACb,MAAM,yBACN,KAAK,QACJ,uBAAOA,EAAA,4FAEVE,EAAAA,YAsBEC,EAtBFC,aAsBE,CArBC,gBAAeJ,EAAA,IACf,gBAAeA,EAAA,IACf,gBAAeA,EAAA,WACf,MAAOA,EAAA,MACP,SAAUA,EAAA,UAAQ,CAAKA,EAAA,SACvB,UAAWA,EAAA,UACX,IAAKA,EAAA,IACL,IAAKA,EAAA,IACL,cAAaA,EAAA,aACb,YAAaA,EAAA,YACb,KAAMA,EAAA,KACN,KAAMA,EAAA,aACP,MAAM,qBACN,KAAK,aACL,KAAK,QACGA,EAAA,oBAAmB,CAC1B,sBAAMA,EAAA,OAAM,GACZ,uBAAOA,EAAA,QAAO,GACd,sBAAmBA,EAAA,aACnB,UAAO,2CAAaA,EAAA,UAAS,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,IAAA,CAAA,6CACPA,EAAA,UAAS,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,MAAA,CAAA,4KAG1BA,EAAA,2BADRH,EAAAA,YAUEI,EAAA,OARC,aAAYD,EAAA,eACZ,MAAOA,EAAA,MACP,SAAUA,YAAaA,EAAA,MAAQ,QAAaA,EAAA,MAAQA,EAAA,WACpD,KAAMA,EAAA,KACP,eAAa,UACb,MAAM,yBACN,KAAK,OACJ,uBAAOA,EAAA"}
+{"version":3,"file":"NeonNumber.vue.cjs.js","sources":["../../../../src/components/user-input/number/NeonNumber.vue"],"sourcesContent":["<template>\n  <neon-field-group\n    :class=\"[\n      `neon-number--${size}`,\n      `neon-number--${color}`,\n      {\n        'neon-number--disabled': disabled,\n        'neon-number--editable': editable,\n        'neon-number--with-buttons': spinButtons,\n      },\n    ]\"\n    class=\"neon-number\"\n    indicator-style=\"external\"\n  >\n    <neon-button\n      v-if=\"spinButtons\"\n      :aria-label=\"decrementLabel\"\n      :color=\"color\"\n      :disabled=\"disabled || (min !== undefined && min === modelValue)\"\n      :size=\"size\"\n      button-style=\"outline\"\n      class=\"neon-number__decrement\"\n      icon=\"minus\"\n      @click=\"decrement()\"\n    />\n    <neon-input\n      :id=\"id\"\n      :aria-valuemax=\"max\"\n      :aria-valuemin=\"min\"\n      :aria-valuenow=\"modelValue\"\n      :color=\"color\"\n      :disabled=\"disabled || !editable\"\n      :inputmode=\"inputmode\"\n      :max=\"max\"\n      :min=\"min\"\n      :model-value=\"displayValue\"\n      :placeholder=\"placeholder\"\n      :size=\"size\"\n      :step=\"computedStep\"\n      class=\"neon-number__input\"\n      role=\"spinbutton\"\n      type=\"text\"\n      v-bind=\"sanitizedAttributes\"\n      @blur=\"onBlur()\"\n      @focus=\"onFocus()\"\n      @update:modelValue=\"valueChanged\"\n      @keydown.up.prevent=\"increment()\"\n      @keydown.down.prevent=\"decrement()\"\n    />\n    <neon-button\n      v-if=\"spinButtons\"\n      :aria-label=\"incrementLabel\"\n      :color=\"color\"\n      :disabled=\"disabled || (max !== undefined && max === modelValue)\"\n      :size=\"size\"\n      button-style=\"outline\"\n      class=\"neon-number__increment\"\n      icon=\"plus\"\n      @click=\"increment()\"\n    />\n  </neon-field-group>\n</template>\n\n<script lang=\"ts\" src=\"./NeonNumber.ts\" />\n"],"names":["_createBlock","_component_neon_field_group","_normalizeClass","_ctx","_component_neon_button","_createVNode","_component_neon_input","_mergeProps"],"mappings":"wSACEA,EAAAA,YA2DmBC,EAAA,CA1DhB,MAAKC,EAAAA,eAAA,CAAA,iBAA0BC,EAAA,IAAI,mBAA0BA,EAAA,KAAK,4BAA6CA,EAAA,iCAA2CA,EAAA,qCAA+CA,EAAA,cASpM,aAAa,CAAA,EACnB,kBAAgB,+BAEhB,IAUE,CATMA,EAAA,2BADRH,EAAAA,YAUEI,EAAA,OARC,aAAYD,EAAA,eACZ,MAAOA,EAAA,MACP,SAAUA,YAAaA,EAAA,MAAQ,QAAaA,EAAA,MAAQA,EAAA,WACpD,KAAMA,EAAA,KACP,eAAa,UACb,MAAM,yBACN,KAAK,QACJ,uBAAOA,EAAA,4FAEVE,EAAAA,YAuBEC,EAvBFC,aAuBE,CAtBC,GAAIJ,EAAA,GACJ,gBAAeA,EAAA,IACf,gBAAeA,EAAA,IACf,gBAAeA,EAAA,WACf,MAAOA,EAAA,MACP,SAAUA,EAAA,UAAQ,CAAKA,EAAA,SACvB,UAAWA,EAAA,UACX,IAAKA,EAAA,IACL,IAAKA,EAAA,IACL,cAAaA,EAAA,aACb,YAAaA,EAAA,YACb,KAAMA,EAAA,KACN,KAAMA,EAAA,aACP,MAAM,qBACN,KAAK,aACL,KAAK,QACGA,EAAA,oBAAmB,CAC1B,sBAAMA,EAAA,OAAM,GACZ,uBAAOA,EAAA,QAAO,GACd,sBAAmBA,EAAA,aACnB,UAAO,2CAAaA,EAAA,UAAS,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,IAAA,CAAA,6CACPA,EAAA,UAAS,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,MAAA,CAAA,iLAG1BA,EAAA,2BADRH,EAAAA,YAUEI,EAAA,OARC,aAAYD,EAAA,eACZ,MAAOA,EAAA,MACP,SAAUA,YAAaA,EAAA,MAAQ,QAAaA,EAAA,MAAQA,EAAA,WACpD,KAAMA,EAAA,KACP,eAAa,UACb,MAAM,yBACN,KAAK,OACJ,uBAAOA,EAAA"}

package/dist/components/user-input/number/NeonNumber.vue.es.js

@@ -1,5 +1,5 @@
 import p from "./NeonNumber.es.js";
-import { resolveComponent as l, openBlock as i, createBlock as a, normalizeClass as b, withCtx as v, createCommentVNode as s, createVNode as f, mergeProps as z, withKeys as d, withModifiers as u } from "vue";
+import { resolveComponent as l, openBlock as i, createBlock as a, normalizeClass as b, withCtx as v, createCommentVNode as d, createVNode as f, mergeProps as z, withKeys as s, withModifiers as u } from "vue";
 import $ from "../../../_virtual/_plugin-vue_export-helper.es.js";
 function y(e, n, w, V, B, C) {
   const r = l("neon-button"), m = l("neon-input"), t = l("neon-field-group");
@@ -26,8 +26,9 @@ function y(e, n, w, V, B, C) {
         class: "neon-number__decrement",
         icon: "minus",
         onClick: n[0] || (n[0] = (o) => e.decrement())
-      }, null, 8, ["aria-label", "color", "disabled", "size"])) : s("", !0),
+      }, null, 8, ["aria-label", "color", "disabled", "size"])) : d("", !0),
       f(m, z({
+        id: e.id,
         "aria-valuemax": e.max,
         "aria-valuemin": e.min,
         "aria-valuenow": e.modelValue,
@@ -48,10 +49,10 @@ function y(e, n, w, V, B, C) {
         onFocus: n[2] || (n[2] = (o) => e.onFocus()),
         "onUpdate:modelValue": e.valueChanged,
         onKeydown: [
-          n[3] || (n[3] = d(u((o) => e.increment(), ["prevent"]), ["up"])),
-          n[4] || (n[4] = d(u((o) => e.decrement(), ["prevent"]), ["down"]))
+          n[3] || (n[3] = s(u((o) => e.increment(), ["prevent"]), ["up"])),
+          n[4] || (n[4] = s(u((o) => e.decrement(), ["prevent"]), ["down"]))
         ]
-      }), null, 16, ["aria-valuemax", "aria-valuemin", "aria-valuenow", "color", "disabled", "inputmode", "max", "min", "model-value", "placeholder", "size", "step", "onUpdate:modelValue"]),
+      }), null, 16, ["id", "aria-valuemax", "aria-valuemin", "aria-valuenow", "color", "disabled", "inputmode", "max", "min", "model-value", "placeholder", "size", "step", "onUpdate:modelValue"]),
       e.spinButtons ? (i(), a(r, {
         key: 1,
         "aria-label": e.incrementLabel,
@@ -62,7 +63,7 @@ function y(e, n, w, V, B, C) {
         class: "neon-number__increment",
         icon: "plus",
         onClick: n[5] || (n[5] = (o) => e.increment())
-      }, null, 8, ["aria-label", "color", "disabled", "size"])) : s("", !0)
+      }, null, 8, ["aria-label", "color", "disabled", "size"])) : d("", !0)
     ]),
     _: 1
   }, 8, ["class"]);

package/dist/components/user-input/number/NeonNumber.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonNumber.vue.es.js","sources":["../../../../src/components/user-input/number/NeonNumber.vue"],"sourcesContent":["<template>\n  <neon-field-group\n    :class=\"[\n      `neon-number--${size}`,\n      `neon-number--${color}`,\n      {\n        'neon-number--disabled': disabled,\n        'neon-number--editable': editable,\n        'neon-number--with-buttons': spinButtons,\n      },\n    ]\"\n    class=\"neon-number\"\n    indicator-style=\"external\"\n  >\n    <neon-button\n      v-if=\"spinButtons\"\n      :aria-label=\"decrementLabel\"\n      :color=\"color\"\n      :disabled=\"disabled || (min !== undefined && min === modelValue)\"\n      :size=\"size\"\n      button-style=\"outline\"\n      class=\"neon-number__decrement\"\n      icon=\"minus\"\n      @click=\"decrement()\"\n    />\n    <neon-input\n      :aria-valuemax=\"max\"\n      :aria-valuemin=\"min\"\n      :aria-valuenow=\"modelValue\"\n      :color=\"color\"\n      :disabled=\"disabled || !editable\"\n      :inputmode=\"inputmode\"\n      :max=\"max\"\n      :min=\"min\"\n      :model-value=\"displayValue\"\n      :placeholder=\"placeholder\"\n      :size=\"size\"\n      :step=\"computedStep\"\n      class=\"neon-number__input\"\n      role=\"spinbutton\"\n      type=\"text\"\n      v-bind=\"sanitizedAttributes\"\n      @blur=\"onBlur()\"\n      @focus=\"onFocus()\"\n      @update:modelValue=\"valueChanged\"\n      @keydown.up.prevent=\"increment()\"\n      @keydown.down.prevent=\"decrement()\"\n    />\n    <neon-button\n      v-if=\"spinButtons\"\n      :aria-label=\"incrementLabel\"\n      :color=\"color\"\n      :disabled=\"disabled || (max !== undefined && max === modelValue)\"\n      :size=\"size\"\n      button-style=\"outline\"\n      class=\"neon-number__increment\"\n      icon=\"plus\"\n      @click=\"increment()\"\n    />\n  </neon-field-group>\n</template>\n\n<script lang=\"ts\" src=\"./NeonNumber.ts\" />\n"],"names":["_createBlock","_component_neon_field_group","_normalizeClass","_ctx","_component_neon_button","_createVNode","_component_neon_input","_mergeProps"],"mappings":";;;;;cACEA,EA0DmBC,GAAA;AAAA,IAzDhB,OAAKC,EAAA,CAAA;AAAA,sBAA0BC,EAAA,IAAI;AAAA,sBAA0BA,EAAA,KAAK;AAAA;iCAA6CA,EAAA;AAAA,iCAA2CA,EAAA;AAAA,qCAA+CA,EAAA;AAAA;OASpM,aAAa,CAAA;AAAA,IACnB,mBAAgB;AAAA;eAEhB,MAUE;AAAA,MATMA,EAAA,oBADRH,EAUEI,GAAA;AAAA;QARC,cAAYD,EAAA;AAAA,QACZ,OAAOA,EAAA;AAAA,QACP,UAAUA,cAAaA,EAAA,QAAQ,UAAaA,EAAA,QAAQA,EAAA;AAAA,QACpD,MAAMA,EAAA;AAAA,QACP,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,MAAK;AAAA,QACJ,gCAAOA,EAAA;;MAEVE,EAsBEC,GAtBFC,EAsBE;AAAA,QArBC,iBAAeJ,EAAA;AAAA,QACf,iBAAeA,EAAA;AAAA,QACf,iBAAeA,EAAA;AAAA,QACf,OAAOA,EAAA;AAAA,QACP,UAAUA,EAAA,YAAQ,CAAKA,EAAA;AAAA,QACvB,WAAWA,EAAA;AAAA,QACX,KAAKA,EAAA;AAAA,QACL,KAAKA,EAAA;AAAA,QACL,eAAaA,EAAA;AAAA,QACb,aAAaA,EAAA;AAAA,QACb,MAAMA,EAAA;AAAA,QACN,MAAMA,EAAA;AAAA,QACP,OAAM;AAAA,QACN,MAAK;AAAA,QACL,MAAK;AAAA,SACGA,EAAA,qBAAmB;AAAA,QAC1B,+BAAMA,EAAA,OAAM;AAAA,QACZ,gCAAOA,EAAA,QAAO;AAAA,QACd,uBAAmBA,EAAA;AAAA,QACnB,WAAO;AAAA,qCAAaA,EAAA,UAAS,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,IAAA,CAAA;AAAA,qCACPA,EAAA,UAAS,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,MAAA,CAAA;AAAA;;MAG1BA,EAAA,oBADRH,EAUEI,GAAA;AAAA;QARC,cAAYD,EAAA;AAAA,QACZ,OAAOA,EAAA;AAAA,QACP,UAAUA,cAAaA,EAAA,QAAQ,UAAaA,EAAA,QAAQA,EAAA;AAAA,QACpD,MAAMA,EAAA;AAAA,QACP,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,MAAK;AAAA,QACJ,gCAAOA,EAAA;;;;;;;"}
+{"version":3,"file":"NeonNumber.vue.es.js","sources":["../../../../src/components/user-input/number/NeonNumber.vue"],"sourcesContent":["<template>\n  <neon-field-group\n    :class=\"[\n      `neon-number--${size}`,\n      `neon-number--${color}`,\n      {\n        'neon-number--disabled': disabled,\n        'neon-number--editable': editable,\n        'neon-number--with-buttons': spinButtons,\n      },\n    ]\"\n    class=\"neon-number\"\n    indicator-style=\"external\"\n  >\n    <neon-button\n      v-if=\"spinButtons\"\n      :aria-label=\"decrementLabel\"\n      :color=\"color\"\n      :disabled=\"disabled || (min !== undefined && min === modelValue)\"\n      :size=\"size\"\n      button-style=\"outline\"\n      class=\"neon-number__decrement\"\n      icon=\"minus\"\n      @click=\"decrement()\"\n    />\n    <neon-input\n      :id=\"id\"\n      :aria-valuemax=\"max\"\n      :aria-valuemin=\"min\"\n      :aria-valuenow=\"modelValue\"\n      :color=\"color\"\n      :disabled=\"disabled || !editable\"\n      :inputmode=\"inputmode\"\n      :max=\"max\"\n      :min=\"min\"\n      :model-value=\"displayValue\"\n      :placeholder=\"placeholder\"\n      :size=\"size\"\n      :step=\"computedStep\"\n      class=\"neon-number__input\"\n      role=\"spinbutton\"\n      type=\"text\"\n      v-bind=\"sanitizedAttributes\"\n      @blur=\"onBlur()\"\n      @focus=\"onFocus()\"\n      @update:modelValue=\"valueChanged\"\n      @keydown.up.prevent=\"increment()\"\n      @keydown.down.prevent=\"decrement()\"\n    />\n    <neon-button\n      v-if=\"spinButtons\"\n      :aria-label=\"incrementLabel\"\n      :color=\"color\"\n      :disabled=\"disabled || (max !== undefined && max === modelValue)\"\n      :size=\"size\"\n      button-style=\"outline\"\n      class=\"neon-number__increment\"\n      icon=\"plus\"\n      @click=\"increment()\"\n    />\n  </neon-field-group>\n</template>\n\n<script lang=\"ts\" src=\"./NeonNumber.ts\" />\n"],"names":["_createBlock","_component_neon_field_group","_normalizeClass","_ctx","_component_neon_button","_createVNode","_component_neon_input","_mergeProps"],"mappings":";;;;;cACEA,EA2DmBC,GAAA;AAAA,IA1DhB,OAAKC,EAAA,CAAA;AAAA,sBAA0BC,EAAA,IAAI;AAAA,sBAA0BA,EAAA,KAAK;AAAA;iCAA6CA,EAAA;AAAA,iCAA2CA,EAAA;AAAA,qCAA+CA,EAAA;AAAA;OASpM,aAAa,CAAA;AAAA,IACnB,mBAAgB;AAAA;eAEhB,MAUE;AAAA,MATMA,EAAA,oBADRH,EAUEI,GAAA;AAAA;QARC,cAAYD,EAAA;AAAA,QACZ,OAAOA,EAAA;AAAA,QACP,UAAUA,cAAaA,EAAA,QAAQ,UAAaA,EAAA,QAAQA,EAAA;AAAA,QACpD,MAAMA,EAAA;AAAA,QACP,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,MAAK;AAAA,QACJ,gCAAOA,EAAA;;MAEVE,EAuBEC,GAvBFC,EAuBE;AAAA,QAtBC,IAAIJ,EAAA;AAAA,QACJ,iBAAeA,EAAA;AAAA,QACf,iBAAeA,EAAA;AAAA,QACf,iBAAeA,EAAA;AAAA,QACf,OAAOA,EAAA;AAAA,QACP,UAAUA,EAAA,YAAQ,CAAKA,EAAA;AAAA,QACvB,WAAWA,EAAA;AAAA,QACX,KAAKA,EAAA;AAAA,QACL,KAAKA,EAAA;AAAA,QACL,eAAaA,EAAA;AAAA,QACb,aAAaA,EAAA;AAAA,QACb,MAAMA,EAAA;AAAA,QACN,MAAMA,EAAA;AAAA,QACP,OAAM;AAAA,QACN,MAAK;AAAA,QACL,MAAK;AAAA,SACGA,EAAA,qBAAmB;AAAA,QAC1B,+BAAMA,EAAA,OAAM;AAAA,QACZ,gCAAOA,EAAA,QAAO;AAAA,QACd,uBAAmBA,EAAA;AAAA,QACnB,WAAO;AAAA,qCAAaA,EAAA,UAAS,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,IAAA,CAAA;AAAA,qCACPA,EAAA,UAAS,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,MAAA,CAAA;AAAA;;MAG1BA,EAAA,oBADRH,EAUEI,GAAA;AAAA;QARC,cAAYD,EAAA;AAAA,QACZ,OAAOA,EAAA;AAAA,QACP,UAAUA,cAAaA,EAAA,QAAQ,UAAaA,EAAA,QAAQA,EAAA;AAAA,QACpD,MAAMA,EAAA;AAAA,QACP,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,MAAK;AAAA,QACJ,gCAAOA,EAAA;;;;;;;"}

package/dist/src/common/enums/NeonFunctionalColor.d.ts

@@ -14,6 +14,8 @@ export declare enum NeonFunctionalColor {
     HighContrast = "high-contrast",
     /** Brand is the main brand color palette, this is useful for branded CTAs, text & controls. */
     Brand = "brand",
+    /** Accent is an alternative brand accent palette used when multiple brand colors are required */
+    Accent = "accent",
     /** Primary is the main application color palette. For most applications this will be used by default. */
     Primary = "primary",
     /** Info can be used to convey informational context, e.g. notes & alerts */