@aotearoan/neon 28.1.1 → 28.1.2

package/dist/components/presentation/header/NeonHeader.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const l=require("./NeonHeader.cjs.js"),e=require("vue"),r=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),s={key:0,class:"neon-header__subtitle"};function c(t,u,i,p,b,_){const a=e.resolveComponent("neon-breadcrumbs"),o=e.resolveComponent("neon-inline"),n=e.resolveComponent("neon-stack");return e.openBlock(),e.createBlock(n,{class:e.normalizeClass([`neon-header--${t.level}`,"neon-header"])},{default:e.withCtx(()=>[t.level===t.NeonHeaderLevel.Page&&(t.backButton||t.breadcrumbs.length!==0)?(e.openBlock(),e.createBlock(a,{key:0,"back-button":t.backButton,"back-label":t.backLabel,breadcrumbs:t.breadcrumbs},null,8,["back-button","back-label","breadcrumbs"])):e.createCommentVNode("",!0),e.createVNode(o,{class:"neon-header__content"},{default:e.withCtx(()=>[e.createVNode(n,{class:"neon-header__content-copy",gap:"s"},{default:e.withCtx(()=>[e.createVNode(o,{class:"neon-header__title-wrapper",gap:"m"},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.titleLevel),{class:"neon-header__title"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.title),1)]),_:1})),t.slots.labels?(e.openBlock(),e.createBlock(o,{key:0,class:"neon-header__labels",gap:"m"},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"labels")]),_:3})):e.createCommentVNode("",!0)]),_:3}),t.subtitle?(e.openBlock(),e.createElementBlock("span",s,e.toDisplayString(t.subtitle),1)):e.createCommentVNode("",!0)]),_:3}),t.slots.actions?(e.openBlock(),e.createBlock(o,{key:0,class:"neon-header__actions",gap:"s"},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"actions")]),_:3})):e.createCommentVNode("",!0)]),_:3})]),_:3},8,["class"])}const d=r(l,[["render",c]]);module.exports=d;
+"use strict";const l=require("./NeonHeader.cjs.js"),e=require("vue"),r=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),s={key:0,class:"neon-header__subtitle"};function c(t,u,i,p,b,_){const a=e.resolveComponent("neon-breadcrumbs"),o=e.resolveComponent("neon-inline"),n=e.resolveComponent("neon-stack");return e.openBlock(),e.createBlock(n,{class:e.normalizeClass([`neon-header--${t.level}`,"neon-header"])},{default:e.withCtx(()=>[t.level===t.NeonHeaderLevel.Page&&(t.backButton||t.breadcrumbs.length!==0)?(e.openBlock(),e.createBlock(a,{key:0,"back-button":t.backButton,"back-label":t.backLabel,breadcrumbs:t.breadcrumbs},null,8,["back-button","back-label","breadcrumbs"])):e.createCommentVNode("",!0),e.createVNode(o,{class:"neon-header__content"},{default:e.withCtx(()=>[e.createVNode(n,{class:"neon-header__content-copy",gap:"s"},{default:e.withCtx(()=>[e.createVNode(o,{class:"neon-header__title-wrapper",gap:"m"},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.titleLevel),{class:"neon-header__title"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.title),1)]),_:1})),t.slots.labels?(e.openBlock(),e.createBlock(o,{key:0,class:"neon-header__labels",gap:"m"},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"labels")]),_:3})):e.createCommentVNode("",!0)]),_:3}),e.renderSlot(t.$slots,"subtitle",{},()=>[t.subtitle?(e.openBlock(),e.createElementBlock("span",s,e.toDisplayString(t.subtitle),1)):e.createCommentVNode("",!0)])]),_:3}),t.slots.actions?(e.openBlock(),e.createBlock(o,{key:0,class:"neon-header__actions",gap:"s"},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"actions")]),_:3})):e.createCommentVNode("",!0)]),_:3})]),_:3},8,["class"])}const d=r(l,[["render",c]]);module.exports=d;
 //# sourceMappingURL=NeonHeader.vue.cjs.js.map

package/dist/components/presentation/header/NeonHeader.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonHeader.vue.cjs.js","sources":["../../../../src/components/presentation/header/NeonHeader.vue"],"sourcesContent":["<template>\n  <neon-stack :class=\"`neon-header--${level}`\" class=\"neon-header\">\n    <neon-breadcrumbs\n      v-if=\"level === NeonHeaderLevel.Page && (backButton || breadcrumbs.length !== 0)\"\n      :back-button=\"backButton\"\n      :back-label=\"backLabel\"\n      :breadcrumbs=\"breadcrumbs\"\n    />\n    <neon-inline class=\"neon-header__content\">\n      <neon-stack class=\"neon-header__content-copy\" gap=\"s\">\n        <neon-inline class=\"neon-header__title-wrapper\" gap=\"m\">\n          <component :is=\"titleLevel\" class=\"neon-header__title\">{{ title }}</component>\n          <neon-inline v-if=\"slots.labels\" class=\"neon-header__labels\" gap=\"m\">\n            <!-- @slot a slot for adding labels/info popovers next to the title. NOTE: these are rendered in reverse order on mobile -->\n            <slot name=\"labels\"></slot>\n          </neon-inline>\n        </neon-inline>\n        <span v-if=\"subtitle\" class=\"neon-header__subtitle\">{{ subtitle }}</span>\n      </neon-stack>\n      <neon-inline v-if=\"slots.actions\" class=\"neon-header__actions\" gap=\"s\">\n        <!-- @slot a slot for adding contextual action buttons to the header. The wrapper is provided, just add the buttons here in order to apply the correct spacings -->\n        <slot name=\"actions\"></slot>\n      </neon-inline>\n    </neon-inline>\n  </neon-stack>\n</template>\n\n<script lang=\"ts\" src=\"./NeonHeader.ts\" />\n"],"names":["_createBlock","_component_neon_stack","_normalizeClass","_ctx","_component_neon_breadcrumbs","_createVNode","_component_neon_inline","_openBlock","_resolveDynamicComponent","_renderSlot","_createElementBlock","_hoisted_1","_toDisplayString"],"mappings":"8IAiB8B,MAAM,4LAhBlCA,EAAAA,YAuBaC,EAAA,CAvBA,MAAKC,EAAAA,eAAA,CAAA,gBAAkBC,EAAA,KAAK,GAAU,aAAa,CAAA,sBAC9D,IAKE,CAJMA,EAAA,QAAUA,kBAAgB,OAASA,EAAA,YAAcA,EAAA,YAAY,SAAM,kBAD3EH,EAAAA,YAKEI,EAAA,OAHC,cAAaD,EAAA,WACb,aAAYA,EAAA,UACZ,YAAaA,EAAA,6FAEhBE,EAAAA,YAecC,EAAA,CAfD,MAAM,sBAAsB,EAAA,mBACvC,IASa,CATbD,EAAAA,YASaJ,EAAA,CATD,MAAM,4BAA4B,IAAI,wBAChD,IAMc,CANdI,EAAAA,YAMcC,EAAA,CAND,MAAM,6BAA6B,IAAI,wBAClD,IAA8E,EAA9EC,YAAA,EAAAP,EAAAA,YAA8EQ,0BAA9DL,EAAA,UAAU,EAAA,CAAE,MAAM,sBAAoB,mBAAC,IAAW,qCAARA,EAAA,KAAK,EAAA,CAAA,WAC5CA,EAAA,MAAM,sBAAzBH,EAAAA,YAGcM,EAAA,OAHmB,MAAM,sBAAsB,IAAI,wBAE/D,IAA2B,CAA3BG,aAA2BN,EAAA,OAAA,QAAA,+CAGnBA,EAAA,wBAAZO,EAAAA,mBAAyE,OAAzEC,EAAyEC,EAAAA,gBAAlBT,EAAA,QAAQ,EAAA,CAAA,uCAE9CA,EAAA,MAAM,uBAAzBH,EAAAA,YAGcM,EAAA,OAHoB,MAAM,uBAAuB,IAAI,wBAEjE,IAA4B,CAA5BG,aAA4BN,EAAA,OAAA,SAAA"}
+{"version":3,"file":"NeonHeader.vue.cjs.js","sources":["../../../../src/components/presentation/header/NeonHeader.vue"],"sourcesContent":["<template>\n  <neon-stack :class=\"`neon-header--${level}`\" class=\"neon-header\">\n    <neon-breadcrumbs\n      v-if=\"level === NeonHeaderLevel.Page && (backButton || breadcrumbs.length !== 0)\"\n      :back-button=\"backButton\"\n      :back-label=\"backLabel\"\n      :breadcrumbs=\"breadcrumbs\"\n    />\n    <neon-inline class=\"neon-header__content\">\n      <neon-stack class=\"neon-header__content-copy\" gap=\"s\">\n        <neon-inline class=\"neon-header__title-wrapper\" gap=\"m\">\n          <component :is=\"titleLevel\" class=\"neon-header__title\">{{ title }}</component>\n          <neon-inline v-if=\"slots.labels\" class=\"neon-header__labels\" gap=\"m\">\n            <!-- @slot a slot for adding labels/info popovers next to the title. NOTE: these are rendered in reverse order on mobile -->\n            <slot name=\"labels\"></slot>\n          </neon-inline>\n        </neon-inline>\n        <!-- @slot a slot for overriding the default subtitle styling and proving richer content -->\n        <slot name=\"subtitle\">\n          <span v-if=\"subtitle\" class=\"neon-header__subtitle\">{{ subtitle }}</span>\n        </slot>\n      </neon-stack>\n      <neon-inline v-if=\"slots.actions\" class=\"neon-header__actions\" gap=\"s\">\n        <!-- @slot a slot for adding contextual action buttons to the header. The wrapper is provided, just add the buttons here in order to apply the correct spacings -->\n        <slot name=\"actions\"></slot>\n      </neon-inline>\n    </neon-inline>\n  </neon-stack>\n</template>\n\n<script lang=\"ts\" src=\"./NeonHeader.ts\" />\n"],"names":["_createBlock","_component_neon_stack","_normalizeClass","_ctx","_component_neon_breadcrumbs","_createVNode","_component_neon_inline","_openBlock","_resolveDynamicComponent","_renderSlot","_createElementBlock","_hoisted_1","_toDisplayString"],"mappings":"8IAmBgC,MAAM,4LAlBpCA,EAAAA,YA0BaC,EAAA,CA1BA,MAAKC,EAAAA,eAAA,CAAA,gBAAkBC,EAAA,KAAK,GAAU,aAAa,CAAA,sBAC9D,IAKE,CAJMA,EAAA,QAAUA,kBAAgB,OAASA,EAAA,YAAcA,EAAA,YAAY,SAAM,kBAD3EH,EAAAA,YAKEI,EAAA,OAHC,cAAaD,EAAA,WACb,aAAYA,EAAA,UACZ,YAAaA,EAAA,6FAEhBE,EAAAA,YAkBcC,EAAA,CAlBD,MAAM,sBAAsB,EAAA,mBACvC,IAYa,CAZbD,EAAAA,YAYaJ,EAAA,CAZD,MAAM,4BAA4B,IAAI,wBAChD,IAMc,CANdI,EAAAA,YAMcC,EAAA,CAND,MAAM,6BAA6B,IAAI,wBAClD,IAA8E,EAA9EC,YAAA,EAAAP,EAAAA,YAA8EQ,0BAA9DL,EAAA,UAAU,EAAA,CAAE,MAAM,sBAAoB,mBAAC,IAAW,qCAARA,EAAA,KAAK,EAAA,CAAA,WAC5CA,EAAA,MAAM,sBAAzBH,EAAAA,YAGcM,EAAA,OAHmB,MAAM,sBAAsB,IAAI,wBAE/D,IAA2B,CAA3BG,aAA2BN,EAAA,OAAA,QAAA,+CAI/BM,EAAAA,WAEON,uBAFP,IAEO,CADOA,EAAA,wBAAZO,EAAAA,mBAAyE,OAAzEC,EAAyEC,EAAAA,gBAAlBT,EAAA,QAAQ,EAAA,CAAA,yCAGhDA,EAAA,MAAM,uBAAzBH,EAAAA,YAGcM,EAAA,OAHoB,MAAM,uBAAuB,IAAI,wBAEjE,IAA4B,CAA5BG,aAA4BN,EAAA,OAAA,SAAA"}

package/dist/components/presentation/header/NeonHeader.vue.es.js

@@ -1,13 +1,13 @@
 import i from "./NeonHeader.es.js";
-import { resolveComponent as l, openBlock as a, createBlock as o, normalizeClass as m, withCtx as n, createCommentVNode as s, createVNode as r, resolveDynamicComponent as p, createTextVNode as _, toDisplayString as d, renderSlot as b, createElementBlock as k } from "vue";
+import { resolveComponent as l, openBlock as a, createBlock as o, normalizeClass as m, withCtx as n, createCommentVNode as s, createVNode as r, resolveDynamicComponent as p, createTextVNode as _, toDisplayString as b, renderSlot as c, createElementBlock as k } from "vue";
 import f from "../../../_virtual/_plugin-vue_export-helper.es.js";
 const h = {
   key: 0,
   class: "neon-header__subtitle"
 };
-function g(e, y, $, v, B, C) {
-  const u = l("neon-breadcrumbs"), t = l("neon-inline"), c = l("neon-stack");
-  return a(), o(c, {
+function $(e, g, y, v, B, C) {
+  const u = l("neon-breadcrumbs"), t = l("neon-inline"), d = l("neon-stack");
+  return a(), o(d, {
     class: m([`neon-header--${e.level}`, "neon-header"])
   }, {
     default: n(() => [
@@ -19,7 +19,7 @@ function g(e, y, $, v, B, C) {
       }, null, 8, ["back-button", "back-label", "breadcrumbs"])) : s("", !0),
       r(t, { class: "neon-header__content" }, {
         default: n(() => [
-          r(c, {
+          r(d, {
             class: "neon-header__content-copy",
             gap: "s"
           }, {
@@ -31,7 +31,7 @@ function g(e, y, $, v, B, C) {
                 default: n(() => [
                   (a(), o(p(e.titleLevel), { class: "neon-header__title" }, {
                     default: n(() => [
-                      _(d(e.title), 1)
+                      _(b(e.title), 1)
                     ]),
                     _: 1
                   })),
@@ -41,14 +41,16 @@ function g(e, y, $, v, B, C) {
                     gap: "m"
                   }, {
                     default: n(() => [
-                      b(e.$slots, "labels")
+                      c(e.$slots, "labels")
                     ]),
                     _: 3
                   })) : s("", !0)
                 ]),
                 _: 3
               }),
-              e.subtitle ? (a(), k("span", h, d(e.subtitle), 1)) : s("", !0)
+              c(e.$slots, "subtitle", {}, () => [
+                e.subtitle ? (a(), k("span", h, b(e.subtitle), 1)) : s("", !0)
+              ])
             ]),
             _: 3
           }),
@@ -58,7 +60,7 @@ function g(e, y, $, v, B, C) {
             gap: "s"
           }, {
             default: n(() => [
-              b(e.$slots, "actions")
+              c(e.$slots, "actions")
             ]),
             _: 3
           })) : s("", !0)
@@ -69,7 +71,7 @@ function g(e, y, $, v, B, C) {
     _: 3
   }, 8, ["class"]);
 }
-const w = /* @__PURE__ */ f(i, [["render", g]]);
+const w = /* @__PURE__ */ f(i, [["render", $]]);
 export {
   w as default
 };

package/dist/components/presentation/header/NeonHeader.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonHeader.vue.es.js","sources":["../../../../src/components/presentation/header/NeonHeader.vue"],"sourcesContent":["<template>\n  <neon-stack :class=\"`neon-header--${level}`\" class=\"neon-header\">\n    <neon-breadcrumbs\n      v-if=\"level === NeonHeaderLevel.Page && (backButton || breadcrumbs.length !== 0)\"\n      :back-button=\"backButton\"\n      :back-label=\"backLabel\"\n      :breadcrumbs=\"breadcrumbs\"\n    />\n    <neon-inline class=\"neon-header__content\">\n      <neon-stack class=\"neon-header__content-copy\" gap=\"s\">\n        <neon-inline class=\"neon-header__title-wrapper\" gap=\"m\">\n          <component :is=\"titleLevel\" class=\"neon-header__title\">{{ title }}</component>\n          <neon-inline v-if=\"slots.labels\" class=\"neon-header__labels\" gap=\"m\">\n            <!-- @slot a slot for adding labels/info popovers next to the title. NOTE: these are rendered in reverse order on mobile -->\n            <slot name=\"labels\"></slot>\n          </neon-inline>\n        </neon-inline>\n        <span v-if=\"subtitle\" class=\"neon-header__subtitle\">{{ subtitle }}</span>\n      </neon-stack>\n      <neon-inline v-if=\"slots.actions\" class=\"neon-header__actions\" gap=\"s\">\n        <!-- @slot a slot for adding contextual action buttons to the header. The wrapper is provided, just add the buttons here in order to apply the correct spacings -->\n        <slot name=\"actions\"></slot>\n      </neon-inline>\n    </neon-inline>\n  </neon-stack>\n</template>\n\n<script lang=\"ts\" src=\"./NeonHeader.ts\" />\n"],"names":["_createBlock","_component_neon_stack","_normalizeClass","_ctx","_component_neon_breadcrumbs","_createVNode","_component_neon_inline","_openBlock","_resolveDynamicComponent","_renderSlot","_createElementBlock","_hoisted_1","_toDisplayString"],"mappings":";;;;;EAiB8B,OAAM;;;;cAhBlCA,EAuBaC,GAAA;AAAA,IAvBA,OAAKC,EAAA,CAAA,gBAAkBC,EAAA,KAAK,IAAU,aAAa,CAAA;AAAA;eAC9D,MAKE;AAAA,MAJMA,EAAA,UAAUA,kBAAgB,SAASA,EAAA,cAAcA,EAAA,YAAY,WAAM,WAD3EH,EAKEI,GAAA;AAAA;QAHC,eAAaD,EAAA;AAAA,QACb,cAAYA,EAAA;AAAA,QACZ,aAAaA,EAAA;AAAA;MAEhBE,EAecC,GAAA,EAfD,OAAM,uBAAsB,GAAA;AAAA,mBACvC,MASa;AAAA,UATbD,EASaJ,GAAA;AAAA,YATD,OAAM;AAAA,YAA4B,KAAI;AAAA;uBAChD,MAMc;AAAA,cANdI,EAMcC,GAAA;AAAA,gBAND,OAAM;AAAA,gBAA6B,KAAI;AAAA;2BAClD,MAA8E;AAAA,mBAA9EC,EAAA,GAAAP,EAA8EQ,EAA9DL,EAAA,UAAU,GAAA,EAAE,OAAM,wBAAoB;AAAA,+BAAC,MAAW;AAAA,0BAARA,EAAA,KAAK,GAAA,CAAA;AAAA;;;kBAC5CA,EAAA,MAAM,eAAzBH,EAGcM,GAAA;AAAA;oBAHmB,OAAM;AAAA,oBAAsB,KAAI;AAAA;+BAE/D,MAA2B;AAAA,sBAA3BG,EAA2BN,EAAA,QAAA,QAAA;AAAA;;;;;;cAGnBA,EAAA,iBAAZO,EAAyE,QAAzEC,GAAyEC,EAAlBT,EAAA,QAAQ,GAAA,CAAA;;;;UAE9CA,EAAA,MAAM,gBAAzBH,EAGcM,GAAA;AAAA;YAHoB,OAAM;AAAA,YAAuB,KAAI;AAAA;uBAEjE,MAA4B;AAAA,cAA5BG,EAA4BN,EAAA,QAAA,SAAA;AAAA;;;;;;;;;;;"}
+{"version":3,"file":"NeonHeader.vue.es.js","sources":["../../../../src/components/presentation/header/NeonHeader.vue"],"sourcesContent":["<template>\n  <neon-stack :class=\"`neon-header--${level}`\" class=\"neon-header\">\n    <neon-breadcrumbs\n      v-if=\"level === NeonHeaderLevel.Page && (backButton || breadcrumbs.length !== 0)\"\n      :back-button=\"backButton\"\n      :back-label=\"backLabel\"\n      :breadcrumbs=\"breadcrumbs\"\n    />\n    <neon-inline class=\"neon-header__content\">\n      <neon-stack class=\"neon-header__content-copy\" gap=\"s\">\n        <neon-inline class=\"neon-header__title-wrapper\" gap=\"m\">\n          <component :is=\"titleLevel\" class=\"neon-header__title\">{{ title }}</component>\n          <neon-inline v-if=\"slots.labels\" class=\"neon-header__labels\" gap=\"m\">\n            <!-- @slot a slot for adding labels/info popovers next to the title. NOTE: these are rendered in reverse order on mobile -->\n            <slot name=\"labels\"></slot>\n          </neon-inline>\n        </neon-inline>\n        <!-- @slot a slot for overriding the default subtitle styling and proving richer content -->\n        <slot name=\"subtitle\">\n          <span v-if=\"subtitle\" class=\"neon-header__subtitle\">{{ subtitle }}</span>\n        </slot>\n      </neon-stack>\n      <neon-inline v-if=\"slots.actions\" class=\"neon-header__actions\" gap=\"s\">\n        <!-- @slot a slot for adding contextual action buttons to the header. The wrapper is provided, just add the buttons here in order to apply the correct spacings -->\n        <slot name=\"actions\"></slot>\n      </neon-inline>\n    </neon-inline>\n  </neon-stack>\n</template>\n\n<script lang=\"ts\" src=\"./NeonHeader.ts\" />\n"],"names":["_createBlock","_component_neon_stack","_normalizeClass","_ctx","_component_neon_breadcrumbs","_createVNode","_component_neon_inline","_openBlock","_resolveDynamicComponent","_renderSlot","_createElementBlock","_hoisted_1","_toDisplayString"],"mappings":";;;;;EAmBgC,OAAM;;;;cAlBpCA,EA0BaC,GAAA;AAAA,IA1BA,OAAKC,EAAA,CAAA,gBAAkBC,EAAA,KAAK,IAAU,aAAa,CAAA;AAAA;eAC9D,MAKE;AAAA,MAJMA,EAAA,UAAUA,kBAAgB,SAASA,EAAA,cAAcA,EAAA,YAAY,WAAM,WAD3EH,EAKEI,GAAA;AAAA;QAHC,eAAaD,EAAA;AAAA,QACb,cAAYA,EAAA;AAAA,QACZ,aAAaA,EAAA;AAAA;MAEhBE,EAkBcC,GAAA,EAlBD,OAAM,uBAAsB,GAAA;AAAA,mBACvC,MAYa;AAAA,UAZbD,EAYaJ,GAAA;AAAA,YAZD,OAAM;AAAA,YAA4B,KAAI;AAAA;uBAChD,MAMc;AAAA,cANdI,EAMcC,GAAA;AAAA,gBAND,OAAM;AAAA,gBAA6B,KAAI;AAAA;2BAClD,MAA8E;AAAA,mBAA9EC,EAAA,GAAAP,EAA8EQ,EAA9DL,EAAA,UAAU,GAAA,EAAE,OAAM,wBAAoB;AAAA,+BAAC,MAAW;AAAA,0BAARA,EAAA,KAAK,GAAA,CAAA;AAAA;;;kBAC5CA,EAAA,MAAM,eAAzBH,EAGcM,GAAA;AAAA;oBAHmB,OAAM;AAAA,oBAAsB,KAAI;AAAA;+BAE/D,MAA2B;AAAA,sBAA3BG,EAA2BN,EAAA,QAAA,QAAA;AAAA;;;;;;cAI/BM,EAEON,0BAFP,MAEO;AAAA,gBADOA,EAAA,iBAAZO,EAAyE,QAAzEC,GAAyEC,EAAlBT,EAAA,QAAQ,GAAA,CAAA;;;;;UAGhDA,EAAA,MAAM,gBAAzBH,EAGcM,GAAA;AAAA;YAHoB,OAAM;AAAA,YAAuB,KAAI;AAAA;uBAEjE,MAA4B;AAAA,cAA5BG,EAA4BN,EAAA,QAAA,SAAA;AAAA;;;;;;;;;;;"}

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

@@ -1,2 +1,2 @@
-"use strict";const u=require("vue"),g=require("../../../model/common/color/NeonFunctionalColor.cjs.js"),S=require("../../../model/common/size/NeonSize.cjs.js"),q=require("../../../model/user-input/input/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("../../../utils/common/number/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;
+"use strict";const u=require("vue"),g=require("../../../model/common/color/NeonFunctionalColor.cjs.js"),S=require("../../../model/common/size/NeonSize.cjs.js"),q=require("../../../model/user-input/input/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("../../../utils/common/number/NeonNumberUtils.cjs.js"),M=u.defineComponent({name:"NeonNumber",components:{NeonButton:F,NeonFieldGroup:B,NeonInput:x},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),i=t=>{e.disabled||f("update:modelValue",t)},v=u.computed(()=>{const{onBlur:t,onFocus:l,...d}=N;return d}),V=t=>{const l=s.NeonNumberUtils.parseNumber(t),d=t!==""&&t!==null?Math.max(Math.min(l,e.max??Number.MAX_SAFE_INTEGER),e.min??Number.MIN_SAFE_INTEGER):null;(d===null||!isNaN(l))&&i(d)},n=u.computed(()=>e.decimals??(e.percentage?0:void 0)),a=u.computed(()=>e.percentage&&n.value!==void 0?n.value+2:n.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||n.value!==void 0||e.percentage!==void 0)?s.NeonNumberUtils.formatNumber(e.modelValue,{decimals:n.value,format:e.valueTemplate,percentage:e.percentage},e.locale):e.modelValue),c=u.computed(()=>a.value!==void 0&&e.modelValue!==null?e.modelValue.toFixed(a.value):e.modelValue===null?"":`${e.modelValue}`),y=u.computed(()=>o.value?c.value!==void 0?`${c.value}`:"":b.value),r=u.computed(()=>e.step??(e.percentage?.01:1));return{focus:o,sanitizedAttributes:v,computedDecimals:n,computedRawDecimals:a,computedValue:m,computedStep:r,displayValue:y,valueChanged:V,increment:()=>{const t=m.value+r.value,l=e.max!==void 0?Math.min(e.max,t):t;l!==e.modelValue&&i(l)},decrement:()=>{const t=m.value-r.value,l=e.min!==void 0?Math.max(e.min,t):t;l!==e.modelValue&&i(l)},onFocus:()=>o.value=!0,onBlur:()=>o.value=!1}}});module.exports=M;
 //# 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 '@/model/common/color/NeonFunctionalColor';\nimport { NeonSize } from '@/model/common/size/NeonSize';\nimport { NeonInputMode } from '@/model/user-input/input/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 '@/utils/common/number/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":"ibAiBAA,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"}
+{"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 '@/model/common/color/NeonFunctionalColor';\nimport { NeonSize } from '@/model/common/size/NeonSize';\nimport { NeonInputMode } from '@/model/user-input/input/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 '@/utils/common/number/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 !== undefined && props.modelValue !== null\n        ? props.modelValue.toFixed(computedRawDecimals.value)\n        : props.modelValue === null\n        ? ''\n        : `${props.modelValue}`;\n    });\n\n    const displayValue = computed(() => {\n      return focus.value ? (rawValue.value !== undefined ? `${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","displayValue","computedStep","emittedValue"],"mappings":"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"}

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

@@ -1,17 +1,17 @@
 import { defineComponent as g, useAttrs as S, ref as B, computed as a } from "vue";
 import { NeonFunctionalColor as F } from "../../../model/common/color/NeonFunctionalColor.es.js";
-import { NeonSize as p } from "../../../model/common/size/NeonSize.es.js";
-import { NeonInputMode as x } from "../../../model/user-input/input/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 { NeonSize as x } from "../../../model/common/size/NeonSize.es.js";
+import { NeonInputMode as M } from "../../../model/user-input/input/NeonInputMode.es.js";
+import h from "../button/NeonButton.vue.es.js";
+import w from "../field-group/NeonFieldGroup.vue.es.js";
+import E from "../input/NeonInput.vue.es.js";
 import { NeonNumberUtils as f } from "../../../utils/common/number/NeonNumberUtils.es.js";
-const P = g({
+const $ = g({
   name: "NeonNumber",
   components: {
-    NeonButton: M,
-    NeonFieldGroup: h,
-    NeonInput: w
+    NeonButton: h,
+    NeonFieldGroup: w,
+    NeonInput: E
   },
   props: {
     /**
@@ -41,7 +41,7 @@ const P = g({
     /**
      * The component size.
      */
-    size: { type: String, default: p.Medium },
+    size: { type: String, default: x.Medium },
     /**
      * The locale used for display purposes. This defaults to the browser's locale if none is provided.
      */
@@ -78,7 +78,7 @@ const P = g({
     /**
      * The HTML inputmode of the component. Either 'numeric' or 'decimal'.
      */
-    inputmode: { type: String, default: x.Numeric },
+    inputmode: { type: String, default: M.Numeric },
     /**
      * ARIA label for the increment spinner button.
      */
@@ -97,16 +97,16 @@ const P = g({
     "update:modelValue"
   ],
   setup(e, { emit: s }) {
-    const v = S(), o = B(!1), r = (t) => {
+    const v = S(), o = B(!1), i = (t) => {
       e.disabled || s("update:modelValue", t);
     }, N = a(() => {
       const { onBlur: t, onFocus: l, ...m } = v;
       return m;
     }), V = (t) => {
       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;
+      (m === null || !isNaN(l)) && i(m);
+    }, u = a(() => e.decimals ?? (e.percentage ? 0 : void 0)), n = a(() => e.percentage && u.value !== void 0 ? u.value + 2 : u.value), d = 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) ? f.formatNumber(
       e.modelValue,
@@ -116,26 +116,23 @@ const P = g({
         percentage: e.percentage
       },
       e.locale
-    ) : e.modelValue), c = a(() => {
-      var t;
-      return n.value ? (t = e.modelValue) == null ? void 0 : t.toFixed(n.value) : e.modelValue;
-    }), b = a(() => o.value ? c.value ? `${c.value}` : "" : y.value), d = a(() => e.step ?? (e.percentage ? 0.01 : 1));
+    ) : e.modelValue), c = a(() => n.value !== void 0 && e.modelValue !== null ? e.modelValue.toFixed(n.value) : e.modelValue === null ? "" : `${e.modelValue}`), b = a(() => o.value ? c.value !== void 0 ? `${c.value}` : "" : y.value), r = a(() => e.step ?? (e.percentage ? 0.01 : 1));
     return {
       focus: o,
       sanitizedAttributes: N,
       computedDecimals: u,
       computedRawDecimals: n,
-      computedValue: i,
-      computedStep: d,
+      computedValue: d,
+      computedStep: r,
       displayValue: b,
       valueChanged: V,
       increment: () => {
-        const t = i.value + d.value, l = e.max !== void 0 ? Math.min(e.max, t) : t;
-        l !== e.modelValue && r(l);
+        const t = d.value + r.value, l = e.max !== void 0 ? Math.min(e.max, t) : t;
+        l !== e.modelValue && i(l);
       },
       decrement: () => {
-        const t = i.value - d.value, l = e.min !== void 0 ? Math.max(e.min, t) : t;
-        l !== e.modelValue && r(l);
+        const t = d.value - r.value, l = e.min !== void 0 ? Math.max(e.min, t) : t;
+        l !== e.modelValue && i(l);
       },
       onFocus: () => o.value = !0,
       onBlur: () => o.value = !1
@@ -143,6 +140,6 @@ const P = g({
   }
 });
 export {
-  P as default
+  $ as default
 };
 //# sourceMappingURL=NeonNumber.es.js.map

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 '@/model/common/color/NeonFunctionalColor';\nimport { NeonSize } from '@/model/common/size/NeonSize';\nimport { NeonInputMode } from '@/model/user-input/input/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 '@/utils/common/number/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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"}
+{"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 '@/model/common/color/NeonFunctionalColor';\nimport { NeonSize } from '@/model/common/size/NeonSize';\nimport { NeonInputMode } from '@/model/user-input/input/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 '@/utils/common/number/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 !== undefined && props.modelValue !== null\n        ? props.modelValue.toFixed(computedRawDecimals.value)\n        : props.modelValue === null\n        ? ''\n        : `${props.modelValue}`;\n    });\n\n    const displayValue = computed(() => {\n      return focus.value ? (rawValue.value !== undefined ? `${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","displayValue","computedStep","emittedValue"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aotearoan/neon",
   "description": "Neon is a lightweight design library of Vue 3 components with minimal dependencies.",
-  "version": "28.1.1",
+  "version": "28.1.2",
   "main": "./dist/neon.cjs.js",
   "module": "./dist/neon.es.js",
   "types": "./dist/src/neon.d.ts",

package/src/sass/components/_button.scss

@@ -15,8 +15,8 @@
   transition: all ease-in-out var(--neon-animation-speed-fast);
   transition: background ease-in-out 0ms;
 
-  &:active:not(:disabled),
-  &:hover:not(:disabled) {
+  &:active:not(.neon-button--disabled),
+  &:hover:not(.neon-button--disabled) {
     background: linear-gradient(
                     var(--neon-background-gradient-angle),
                     var(--neon-gradient-button-c1) var(--neon-background-gradient-offset-hover),
@@ -24,7 +24,7 @@
     );
   }
 
-  &:focus:not(:disabled):not(.neon-button--no-outline) {
+  &:focus:not(.neon-button--disabled):not(.neon-button--no-outline) {
     @include outline.box-shadow-outline(var(--neon-rgb-#{$from-color}));
   }
 }
@@ -37,18 +37,18 @@
                   var(--neon-background-solid-button-dark-#{$color})
   );
 
-  &:hover:not(:disabled) {
+  &:hover:not(.neon-button--disabled) {
     background: linear-gradient(
                     var(--neon-background-solid-button-light-#{$color}),
                     var(--neon-background-solid-button-light-#{$color})
     );
   }
 
-  &:active:not(:disabled) {
+  &:active:not(.neon-button--disabled) {
     background: var(--neon-background-solid-button-dark-#{$color});
   }
 
-  &:focus:not(:disabled):not(.neon-button--no-outline) {
+  &:focus:not(.neon-button--disabled):not(.neon-button--no-outline) {
     @include outline.box-shadow-outline(var(--neon-background-rgb-solid-button-dark-#{$color}));
   }
 }
@@ -62,8 +62,8 @@
     @include svg.svg-colors(var(--neon-background-outline-button-active-#{$color}));
   }
 
-  &:hover:not(:disabled),
-  &:active:not(:disabled) {
+  &:hover:not(.neon-button--disabled),
+  &:active:not(.neon-button--disabled) {
     @if ($color == 'inverse') {
       @include svg.color-with-svg(var(--neon-color-text-secondary));
     } @else {
@@ -71,17 +71,17 @@
     }
   }
 
-  &:hover:not(:disabled) {
+  &:hover:not(.neon-button--disabled) {
     background: var(--neon-background-outline-button-hover-#{$color});
     border-color: var(--neon-background-outline-button-hover-#{$color});
   }
 
-  &:active:not(:disabled) {
+  &:active:not(.neon-button--disabled) {
     background: var(--neon-background-outline-button-active-#{$color});
     border-color: var(--neon-background-outline-button-active-#{$color});
   }
 
-  &:focus:not(:disabled):not(.neon-button--no-outline) {
+  &:focus:not(.neon-button--disabled):not(.neon-button--no-outline) {
     @include outline.box-shadow-outline(var(--neon-rgb-#{$color}));
   }
 }
@@ -94,19 +94,19 @@
     background: var(--neon-background-color-text-button);
   }
 
-  &:hover:not(:disabled),
-  &:focus:not(:disabled) {
+  &:hover:not(.neon-button--disabled),
+  &:focus:not(.neon-button--disabled) {
     background: var(--neon-background-color-text-button-hover);
   }
 
-  &:active:not(:disabled) {
+  &:active:not(.neon-button--disabled) {
     background: var(--neon-background-color-text-button-active);
   }
 }
 
 @mixin input-button($color) {
-  &:active:not(:disabled),
-  &:focus:not(:disabled) {
+  &:active:not(.neon-button--disabled),
+  &:focus:not(.neon-button--disabled) {
     background-color: rgba(var(--neon-rgb-#{$color}), var(--neon-opacity-input-background-active));
     border: var(--neon-border-width-input) var(--neon-border-style) var(--neon-color-#{$color});
   }
@@ -265,7 +265,7 @@
       text-align: left;
     }
 
-    &:active:not(:disabled) {
+    &:active:not(.neon-button--disabled) {
       .neon-button__label,
       .neon-icon {
         position: relative;

package/src/sass/components/_skeleton-loader.scss

@@ -9,7 +9,7 @@
     display: flex;
     flex-direction: column;
     flex: 0 1 auto;
-    width: fit-content;
+    width: var(--neon-width-skeleton-loader);
     gap: var(--neon-gap-skeleton-loader);
 
     &__item {