@aotearoan/neon 23.2.5 → 23.3.1

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":"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"}

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 */

package/dist/src/common/models/NeonCarouselImage.d.ts

@@ -11,4 +11,8 @@ export interface NeonCarouselImage {
      * Alt text to be displayed with the image for accessibility.
      */
     alt?: string;
+    /**
+     * Image title to be displayed with the image.
+     */
+    title?: string;
 }

package/dist/src/components/feedback/dialog/NeonDialog.d.ts

@@ -618,9 +618,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             required: true;
         };
         dismissible: {
-            type: BooleanConstructor; /**
-             * The color of the button for the confirm (positive) action.
-             */
+            type: BooleanConstructor;
             default: boolean;
         };
         opaque: {
@@ -631,6 +629,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: BooleanConstructor;
             default: boolean;
         };
+        breakpoint: {
+            type: () => import("../../../neon").NeonResponsive;
+            default: import("../../../neon").NeonResponsive;
+        };
     }>, {
         modal: import("vue").Ref<null, null>;
         close: () => void;
@@ -640,9 +642,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             required: true;
         };
         dismissible: {
-            type: BooleanConstructor; /**
-             * The color of the button for the confirm (positive) action.
-             */
+            type: BooleanConstructor;
             default: boolean;
         };
         opaque: {
@@ -653,10 +653,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: BooleanConstructor;
             default: boolean;
         };
+        breakpoint: {
+            type: () => import("../../../neon").NeonResponsive;
+            default: import("../../../neon").NeonResponsive;
+        };
     }>> & Readonly<{
         onClose?: ((...args: any[]) => any) | undefined;
     }>, {
         dismissible: boolean;
+        breakpoint: import("../../../neon").NeonResponsive;
         opaque: boolean;
         showTopNav: boolean;
     }, {}, {

package/dist/src/components/layout/modal/NeonModal.d.ts

@@ -1,3 +1,4 @@
+import { NeonResponsive } from '@/common/enums/NeonResponsive';
 /**
  * A modal dialog component. This will be rendered above the content of the main window and can either be dismissed by the user or configured to require user interaction before dismissal.
  */
@@ -30,6 +31,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Responsive breakpoint below which point the modal becomes fullscreen.
+     * Supports NeonResponsive.Mobile & NeonResponsive.MobileLarge.
+     */
+    breakpoint: {
+        type: () => NeonResponsive;
+        default: NeonResponsive;
+    };
 }>, {
     modal: import("vue").Ref<null, null>;
     close: () => void;
@@ -62,10 +71,19 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Responsive breakpoint below which point the modal becomes fullscreen.
+     * Supports NeonResponsive.Mobile & NeonResponsive.MobileLarge.
+     */
+    breakpoint: {
+        type: () => NeonResponsive;
+        default: NeonResponsive;
+    };
 }>> & Readonly<{
     onClose?: ((...args: any[]) => any) | undefined;
 }>, {
     dismissible: boolean;
+    breakpoint: NeonResponsive;
     opaque: boolean;
     showTopNav: boolean;
 }, {}, {
@@ -80,8 +98,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         size: {
             type: () => import("../../../neon").NeonButtonSize;
-            default: import("../../../neon").NeonButtonSize;
-        };
+            default: import("../../../neon").NeonButtonSize; /**
+             * Emitted when the modal is closed.
+             * @type {void}
+             */
+        }; /**
+         * Emitted when the modal is closed.
+         * @type {void}
+         */
         color: {
             type: () => import("../../../neon").NeonFunctionalColor;
             default: import("../../../neon").NeonFunctionalColor;
@@ -179,8 +203,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         size: {
             type: () => import("../../../neon").NeonButtonSize;
-            default: import("../../../neon").NeonButtonSize;
-        };
+            default: import("../../../neon").NeonButtonSize; /**
+             * Emitted when the modal is closed.
+             * @type {void}
+             */
+        }; /**
+         * Emitted when the modal is closed.
+         * @type {void}
+         */
         color: {
             type: () => import("../../../neon").NeonFunctionalColor;
             default: import("../../../neon").NeonFunctionalColor;
@@ -273,12 +303,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             inverse: {
                 type: BooleanConstructor;
-                default: boolean; /**
-                 * Whether the user is allowed to dismiss the modal by clicking outside the modal or pressing escape.
-                 */
-            }; /**
-             * Whether the user is allowed to dismiss the modal by clicking outside the modal or pressing escape.
-             */
+                default: boolean;
+            };
             disabled: {
                 type: BooleanConstructor;
                 default: boolean;
@@ -294,12 +320,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             inverse: {
                 type: BooleanConstructor;
-                default: boolean; /**
-                 * Whether the user is allowed to dismiss the modal by clicking outside the modal or pressing escape.
-                 */
-            }; /**
-             * Whether the user is allowed to dismiss the modal by clicking outside the modal or pressing escape.
-             */
+                default: boolean;
+            };
             disabled: {
                 type: BooleanConstructor;
                 default: boolean;