@duetds/components 10.0.0-alpha.2 → 10.0.0-alpha.20

package/lib/collection/components/duet-number-input/duet-number-input.js

@@ -17,6 +17,148 @@ export class DuetNumberInput {
     constructor() {
         this.inputId = createID("DuetInput");
         this.proxyId = createID("DuetInput");
+        /**
+         * The currently active language. This setting changes the accessible labels to match the
+         * chosen language.
+         * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+         * @default "fi"
+         */
+        this.language = getLanguage();
+        /**
+         * Locale used to format the entered value. Note that localization is used only for decimal separator, as using thousands
+         * separators would break keyboard input.
+         */
+        this.locale = getLocale(this.language).locale;
+        /**
+         * Unit for the number input.
+         */
+        this.unit = getLocale(this.language).money;
+        /**
+         * Details of the component
+         */
+        this.accessibleDetails = undefined;
+        /**
+         * String of id's that indicate alternative labels elements
+         */
+        this.accessibleLabelledBy = undefined;
+        /**
+         * Aria description the button
+         */
+        this.accessibleDescription = undefined;
+        /**
+         * Defaults for accessibleLive
+         * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"}
+         */
+        this.accessibleLiveDefaults = {
+            fi: "{current} euroa valittuna",
+            en: "{current} euros selected",
+            sv: "{current} euro valt",
+        };
+        /**
+         * Format of message used to announce current amount when switching between amounts.
+         * The string {current} is replaced with the current amount.
+         * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"}
+         */
+        this.accessibleLive = getLocaleString(this.accessibleLiveDefaults, this.language);
+        /**
+         * Disables the aria-live messaging used internally in this component. This could be useful when you want to use custom aria-live messages instead.
+         */
+        this.accessibleLiveEnabled = true;
+        /**
+         * Defaults for accessibleAdd
+         * @default {fi: "Lisää summaan", en: "Add to the amount", sv: "Lägg till beloppet"}
+         */
+        this.accessibleAddDefaults = {
+            fi: "Lisää summaan",
+            en: "Add to the amount",
+            sv: "Lägg till beloppet",
+        };
+        /**
+         * Accessible label for the add button that is read for screen reader users.
+         * @default {fi: "Lisää summaan", en: "Add to the amount", sv: "Lägg till beloppet"}
+         */
+        this.accessibleAdd = getLocaleString(this.accessibleAddDefaults, this.language);
+        /**
+         * Defaults for accessibleSubtract
+         * @default {fi: "Vähennä summasta", en: "Subtract from the amount", sv: "Dra från beloppet"}
+         */
+        this.accessibleSubtractDefaults = {
+            fi: "Vähennä summasta",
+            en: "Subtract from the amount",
+            sv: "Dra från beloppet",
+        };
+        /**
+         * Accessible label for the subtract button that is read for screen reader users.
+         * @default {fi: "Vähennä summasta", en: "Subtract from the amount", sv: "Dra från beloppet"}
+         */
+        this.accessibleSubtract = getLocaleString(this.accessibleSubtractDefaults, this.language);
+        /**
+         * Theme of the input.
+         */
+        this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Expands the input to fill 100% of the container width.
+         */
+        this.expand = false;
+        /**
+         * Minimum value.
+         */
+        this.min = 0;
+        /**
+         * Defaults for Label
+         * @default  {fi: "Etiketti", en: "Label", sv: "Märka"}
+         */
+        this.labelDefaults = {
+            fi: "Nimilappu",
+            en: "Label",
+            sv: "Etikett",
+        };
+        /**
+         * Label for the number input.
+         * @default  {fi: "Etiketti", en: "Label", sv: "Märka"}
+         */
+        this.label = getLocaleString(this.labelDefaults, this.language);
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
+        this.labelHidden = false;
+        /**
+         * Maximum value.
+         */
+        this.max = 1000000;
+        /**
+         * Display the input in error state along with an error message.
+         */
+        this.error = "";
+        /**
+         * Tooltip to display next to the label of the input.
+         */
+        this.tooltip = "";
+        /**
+         * Step amount.
+         */
+        this.step = 5000;
+        /**
+         * Controls whether or not value gets rounded to the nearest
+         * multiple of a step on blur. Set to "false" to disable this behaviour.
+         */
+        this.rounding = true;
+        /**
+         * Makes the number input component disabled. This prevents users from being able to
+         * interact with the input, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Set whether the input is required or not. Please note that this is required for
+         * accessible inputs when the user is required to fill them. When using this property
+         * you need to also set “novalidate” attribute to your form element to prevent
+         * browser from displaying its own validation errors.
+         */
+        this.required = false;
         /**
          * Component event handling.
          */
@@ -125,7 +267,7 @@ export class DuetNumberInput {
         };
         this.localizeValue = (value) => {
             // Returns a localized string that can be used as input value.
-            return value.toLocaleString(this.locale);
+            return value.toLocaleString(this.locale, { useGrouping: false });
         };
         this.setValue = (value) => {
             // Set the localized prop value.
@@ -180,58 +322,6 @@ export class DuetNumberInput {
             this.value = this.localizeValue(newValue);
             this.emitChange(ev);
         };
-        this.language = getLanguage();
-        this.locale = getLocale(this.language).locale;
-        this.unit = getLocale(this.language).money;
-        this.focusedValue = undefined;
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleControls = undefined;
-        this.accessibleDetails = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleDescription = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.accessibleLiveDefaults = {
-            fi: "{current} euroa valittuna",
-            en: "{current} euros selected",
-            sv: "{current} euro valt",
-        };
-        this.accessibleLive = getLocaleString(this.accessibleLiveDefaults, this.language);
-        this.accessibleLiveEnabled = true;
-        this.accessibleAddDefaults = {
-            fi: "Lisää summaan",
-            en: "Add to the amount",
-            sv: "Lägg till beloppet",
-        };
-        this.accessibleAdd = getLocaleString(this.accessibleAddDefaults, this.language);
-        this.accessibleSubtractDefaults = {
-            fi: "Vähennä summasta",
-            en: "Subtract from the amount",
-            sv: "Dra från beloppet",
-        };
-        this.accessibleSubtract = getLocaleString(this.accessibleSubtractDefaults, this.language);
-        this.theme = "";
-        this.margin = "auto";
-        this.expand = false;
-        this.identifier = undefined;
-        this.min = 0;
-        this.labelDefaults = {
-            fi: "Nimilappu",
-            en: "Label",
-            sv: "Etikett",
-        };
-        this.label = getLocaleString(this.labelDefaults, this.language);
-        this.labelHidden = false;
-        this.max = 1000000;
-        this.name = undefined;
-        this.error = "";
-        this.tooltip = "";
-        this.step = 5000;
-        this.rounding = true;
-        this.role = undefined;
-        this.disabled = false;
-        this.required = false;
-        this.value = undefined;
     }
     /**
      * Component lifecycle events.
@@ -296,11 +386,11 @@ export class DuetNumberInput {
         const identifier = this.identifier || this.inputId;
         const maxlength = `${this.localizeValue(this.max)} ${this.unit}`.length;
         const cleanedValue = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
-        return (h(Host, { key: '27634a68033872b85ed0ac1d2baa3ab694680d41', class: {
+        return (h(Host, { key: 'c404181a5a36be60ded0501cd754f3a370276db3', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-expand": this.expand,
                 "duet-m-0": this.margin === "none",
-            } }, h("div", { key: '6827f8b2e63c45d4c1a102af1cc451806e22c6b2', class: "duet-number-container" }, h("duet-input", { key: '6ebc92848603fb489852d878a1d26aa75401527d', ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value} ${this.unit}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, h("slot", { key: '8d5588224b8d90b55c49aedf839923eccff05d0f', name: "tooltip" }), h("div", { key: '26ecdb715139c53e42ad0365ddde6b73b66ba525', class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { key: '9ee76518bfa2851ddb3c195b1f2ae44b55b81a94', disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, h("duet-visually-hidden", { key: 'af735c2a71d3ec8f158bad31f424f58eda96b371' }, this.accessibleSubtract, " ", this.step), h("duet-icon", { key: '315b5a60f0c2930f1ebdbf54fa61b6f00ca2a2cc', icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { key: '9b0f29334057be1214d1ed30a1cf192f5a40bca2', disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, h("duet-visually-hidden", { key: 'dad3dcf4e65c811e03147889494f664b875f0b95' }, this.accessibleAdd, " ", this.step), h("duet-icon", { key: 'd9662ee9fd8d82605e4ee26c0b00826500674b0a', icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { key: '974d023f255a72941f249af920c4ffbff4786b37', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
+            } }, h("div", { key: '674688689d6202a4b7a3778c0172af68e20b0673', class: "duet-number-container" }, h("duet-input", { key: 'f5281ca4fa9f5b26a159dc7e7b92ca9a54528bf7', ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value} ${this.unit}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, h("slot", { key: '3f1c547afcc40014095f197036f787645147bd11', name: "tooltip" }), h("div", { key: 'a868daa539f87cef017c2018287a1a45e1354cad', class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { key: 'e85bd5edd04e493c634a8b73f4a5c26529fee463', disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, h("duet-visually-hidden", { key: '514347e9e62cee33816675da9bf05e4767024cf7' }, this.accessibleSubtract, " ", this.step), h("duet-icon", { key: '1bbad2c355ee306483fb5f7f24569d129a6b8550', icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { key: '8ad6cf3c4dfc1a719c1226a81fc11118f2dbb034', disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, h("duet-visually-hidden", { key: '6235a14251c9d2e5730f4a783aee9fda6d53450d' }, this.accessibleAdd, " ", this.step), h("duet-icon", { key: '2ffc06061b4c9fcbdc4cde17c75055caba64bd10', icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { key: '8248ba0993751f21e7a33df4d70c6db8246ceed5', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
     }
     static get is() { return "duet-number-input"; }
     static get encapsulation() { return "shadow"; }
@@ -318,6 +408,7 @@ export class DuetNumberInput {
         return {
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -344,12 +435,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": false,
                 "defaultValue": "getLanguage()"
             },
             "locale": {
                 "type": "string",
+                "attribute": "locale",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLocale",
@@ -366,16 +457,16 @@ export class DuetNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Locale used to format the entered value."
+                    "text": "Locale used to format the entered value. Note that localization is used only for decimal separator, as using thousands\nseparators would break keyboard input."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "locale",
                 "reflect": false,
                 "defaultValue": "getLocale(this.language).locale"
             },
             "unit": {
                 "type": "string",
+                "attribute": "unit",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -390,12 +481,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "unit",
                 "reflect": false,
                 "defaultValue": "getLocale(this.language).money"
             },
             "accessibleActiveDescendant": {
                 "type": "string",
+                "attribute": "accessible-active-descendant",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -410,11 +501,11 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-active-descendant",
                 "reflect": false
             },
             "accessibleControls": {
                 "type": "string",
+                "attribute": "accessible-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -429,11 +520,11 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-controls",
                 "reflect": false
             },
             "accessibleDetails": {
                 "type": "string",
+                "attribute": "accessible-details",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -448,12 +539,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-details",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabelledBy": {
                 "type": "string",
+                "attribute": "accessible-labelled-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -468,12 +559,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDescription": {
                 "type": "string",
+                "attribute": "accessible-description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -488,12 +579,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleOwns": {
                 "type": "string",
+                "attribute": "accessible-owns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -508,11 +599,11 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-owns",
                 "reflect": false
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -527,11 +618,11 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false
             },
             "accessibleLiveDefaults": {
                 "type": "string",
+                "attribute": "accessible-live-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -555,12 +646,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-live-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"{current} euroa valittuna\",\n    en: \"{current} euros selected\",\n    sv: \"{current} euro valt\",\n  }"
             },
             "accessibleLive": {
                 "type": "string",
+                "attribute": "accessible-live",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -578,12 +669,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-live",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLiveDefaults, this.language)"
             },
             "accessibleLiveEnabled": {
                 "type": "boolean",
+                "attribute": "accessible-live-enabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -598,12 +689,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-live-enabled",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "accessibleAddDefaults": {
                 "type": "string",
+                "attribute": "accessible-add-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -627,12 +718,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-add-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"Lis\u00E4\u00E4 summaan\",\n    en: \"Add to the amount\",\n    sv: \"L\u00E4gg till beloppet\",\n  }"
             },
             "accessibleAdd": {
                 "type": "string",
+                "attribute": "accessible-add",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -650,12 +741,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-add",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleAddDefaults, this.language)"
             },
             "accessibleSubtractDefaults": {
                 "type": "string",
+                "attribute": "accessible-subtract-defaults",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -679,12 +770,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-subtract-defaults",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"V\u00E4henn\u00E4 summasta\",\n    en: \"Subtract from the amount\",\n    sv: \"Dra fr\u00E5n beloppet\",\n  }"
             },
             "accessibleSubtract": {
                 "type": "string",
+                "attribute": "accessible-subtract",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -702,12 +793,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-subtract",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleSubtractDefaults, this.language)"
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -728,12 +819,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -754,12 +845,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "expand": {
                 "type": "boolean",
+                "attribute": "expand",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -774,12 +865,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expand",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -794,11 +885,11 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "min": {
                 "type": "number",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -813,12 +904,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "labelDefaults": {
                 "type": "string",
+                "attribute": "label-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -842,12 +933,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"Nimilappu\",\n    en: \"Label\",\n    sv: \"Etikett\",\n  }"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -865,12 +956,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.labelDefaults, this.language)"
             },
             "labelHidden": {
                 "type": "boolean",
+                "attribute": "label-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -885,12 +976,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "max": {
                 "type": "number",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -905,12 +996,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max",
                 "reflect": false,
                 "defaultValue": "1000000"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -925,11 +1016,11 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "error": {
                 "type": "string",
+                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -944,12 +1035,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "tooltip": {
                 "type": "string",
+                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -964,12 +1055,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "step": {
                 "type": "number",
+                "attribute": "step",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -984,12 +1075,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "step",
                 "reflect": false,
                 "defaultValue": "5000"
             },
             "rounding": {
                 "type": "boolean",
+                "attribute": "rounding",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1004,12 +1095,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "rounding",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "role": {
                 "type": "string",
+                "attribute": "role",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -1024,11 +1115,11 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "role",
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1043,12 +1134,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1063,12 +1154,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -1083,7 +1174,6 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             }
         };