@duetds/components 10.0.0-alpha.8 → 10.0.0

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

@@ -17,6 +17,151 @@ 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. Note that the default has "euros"
+         * so if you use another unit is is essential you set this attribute to reflect that unit.
+         * 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ää {step} {unit}", en: "Add {step} {unit}", sv: "Lägg till {step} {unit}"}
+         */
+        this.accessibleAddDefaults = {
+            fi: "Lisää {step} {unit}",
+            en: "Add {step} {unit}",
+            sv: "Lägg till {step} {unit}",
+        };
+        /**
+         * Accessible label for the add button that is read for screen reader users. The placeholders {step} and {unit}
+         * are replaced with respective properties.
+         * @default {fi: "Lisää {step} {unit}", en: "Add {step} {unit}", sv: "Lägg till {step} {unit}"}
+         */
+        this.accessibleAdd = getLocaleString(this.accessibleAddDefaults, this.language);
+        /**
+         * Defaults for accessibleSubtract
+         * @default {fi: "Vähenn {step} {unit}ä", en: "Subtract {step} {unit}", sv: "Sutrahera {step} {unit}"}
+         */
+        this.accessibleSubtractDefaults = {
+            fi: "Vähennä {step} {unit}",
+            en: "Subtract {step} {unit}",
+            sv: "Subtrahera {step} {unit}",
+        };
+        /**
+         * Accessible label for the subtract button that is read for screen reader users. The placeholders {step} and {unit}
+         * are replaced with respective properties.
+         * @default {fi: "Vähennä {step} {unit}", en: "Subtract {step} {unit}", sv: "Sutrahera {step} {unit}"}
+         */
+        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,13 +270,13 @@ 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.
             this.value = this.localizeValue(value);
             // Finally also set the visible input value and unit.
-            this.duetInputElement.value = `${this.value} ${this.unit}`;
+            this.duetInputElement.value = `${this.value}${this.getUnitString()}`;
         };
         this.add = (ev) => {
             // If this was called via a html button, prevent the default functionality
@@ -180,58 +325,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.
@@ -281,6 +374,10 @@ export class DuetNumberInput {
             this.emitNull(ev);
         }
     }
+    // prefix existing unit with white space or return empty string if no unit
+    getUnitString() {
+        return this.unit ? ` ${this.unit}` : "";
+    }
     formatAnnouncement() {
         const current = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
         if (current == null) {
@@ -294,13 +391,17 @@ export class DuetNumberInput {
      */
     render() {
         const identifier = this.identifier || this.inputId;
-        const maxlength = `${this.localizeValue(this.max)} ${this.unit}`.length;
+        const maxlength = `${this.localizeValue(this.max)}${this.getUnitString()}`.length;
         const cleanedValue = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
-        return (h(Host, { key: '8093a1d061b11762890e8316f35f3aadbb4314d3', class: {
+        return (h(Host, { key: '3b711259b966bd9c4f78db30f9f2b4e1b4816832', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-expand": this.expand,
                 "duet-m-0": this.margin === "none",
-            } }, h("div", { key: '0bb70d7bec69c413f6615987e535327bc2c44bbd', class: "duet-number-container" }, h("duet-input", { key: 'a982640544b7be253b5d8c66d8a67ea55293438a', 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: 'c16ccee69695abcdb5385552dc28cb701e20d340', name: "tooltip" }), h("div", { key: 'e59ef878a5a4237f7955df5aa74ed0f369796fc5', class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { key: 'a9ad3cff4c5393368dce5983d16ef740b7d2f57d', 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: '29db7b9642afb66860b3f5c7951192aa6890a77b' }, this.accessibleSubtract, " ", this.step), h("duet-icon", { key: '2d3351ce5f1246e8f91ab4f94937ba522b8c7b7a', icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { key: 'd01ef0e639112dff95d22e3df9e9efc1cc5ba478', 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: '08371480b73665e20caa60b21a35180e9536f0e2' }, this.accessibleAdd, " ", this.step), h("duet-icon", { key: 'c773a6ff733534fabc60fdce53a157a9935e6a2b', icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { key: '5eefd62f3963ed1f71c3419f8d80110f98f68f74', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
+            } }, h("div", { key: '9e79360b29f5054cbae48be9a4e5198bfb5c81cd', class: "duet-number-container" }, h("duet-input", { key: '1996707bc4c516d3d3f3efe23396fa27d452a3a7', 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.getUnitString()}` : "", 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: 'f64cad6069469eccbaed50411f17420f678b8a93', name: "tooltip" }), h("div", { key: 'aafe9613adb58f91c80b054d31ed53dcdbec57ac', class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { key: '29124495bafec265a9de316918028cf987bf23d1', 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: '64561d65940b243b7f0d8c3b61f617b38be4a0d9' }, this.accessibleSubtract
+            .replace(/\{\s*step\s*\}/, `${this.step}`)
+            .replace(/\{\s*unit\s*\}/, `${this.unit}`)), h("duet-icon", { key: '203aacaee51eb1198b4e9027c5cce9370e83601f', icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { key: 'c62e7ddd60b4528ffa9bc82e7979aa76b12abd19', 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: 'b37e14966167bc6b4c58ed0e4d6a56e2b488bb04' }, this.accessibleAdd
+            .replace(/\{\s*step\s*\}/, `${this.step}`)
+            .replace(/\{\s*unit\s*\}/, `${this.unit}`)), h("duet-icon", { key: 'e24cec3dfa21d4598270d8034ccbc43a59b84dd6', icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { key: 'a9b4c6ee1ac26700b83f3a23fafc0b85ed68dba8', "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 +419,7 @@ export class DuetNumberInput {
         return {
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -344,12 +446,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 +468,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 +492,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 +512,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 +531,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 +550,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 +570,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 +590,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 +610,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 +629,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 +657,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",
@@ -574,16 +676,16 @@ export class DuetNumberInput {
                             "name": "default",
                             "text": "{fi: \"{current} euroa valittuna\", en: \"{current} euros selected\", sv: \"{current} valda euro\"}"
                         }],
-                    "text": "Format of message used to announce current amount when switching between amounts.\nThe string {current} is replaced with the current amount."
+                    "text": "Format of message used to announce current amount when switching between amounts. Note that the default has \"euros\"\nso if you use another unit is is essential you set this attribute to reflect that unit.\nThe string {current} is replaced with the current amount."
                 },
                 "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 +700,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",
@@ -621,18 +723,18 @@ export class DuetNumberInput {
                 "docs": {
                     "tags": [{
                             "name": "default",
-                            "text": "{fi: \"Lis\u00E4\u00E4 summaan\", en: \"Add to the amount\", sv: \"L\u00E4gg till beloppet\"}"
+                            "text": "{fi: \"Lis\u00E4\u00E4 {step} {unit}\", en: \"Add {step} {unit}\", sv: \"L\u00E4gg till {step} {unit}\"}"
                         }],
                     "text": "Defaults for accessibleAdd"
                 },
                 "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  }"
+                "defaultValue": "{\n    fi: \"Lis\u00E4\u00E4 {step} {unit}\",\n    en: \"Add {step} {unit}\",\n    sv: \"L\u00E4gg till {step} {unit}\",\n  }"
             },
             "accessibleAdd": {
                 "type": "string",
+                "attribute": "accessible-add",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -644,18 +746,18 @@ export class DuetNumberInput {
                 "docs": {
                     "tags": [{
                             "name": "default",
-                            "text": "{fi: \"Lis\u00E4\u00E4 summaan\", en: \"Add to the amount\", sv: \"L\u00E4gg till beloppet\"}"
+                            "text": "{fi: \"Lis\u00E4\u00E4 {step} {unit}\", en: \"Add {step} {unit}\", sv: \"L\u00E4gg till {step} {unit}\"}"
                         }],
-                    "text": "Accessible label for the add button that is read for screen reader users."
+                    "text": "Accessible label for the add button that is read for screen reader users. The placeholders {step} and {unit}\nare replaced with respective properties."
                 },
                 "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",
@@ -673,18 +775,18 @@ export class DuetNumberInput {
                 "docs": {
                     "tags": [{
                             "name": "default",
-                            "text": "{fi: \"V\u00E4henn\u00E4 summasta\", en: \"Subtract from the amount\", sv: \"Dra fr\u00E5n beloppet\"}"
+                            "text": "{fi: \"V\u00E4henn {step} {unit}\u00E4\", en: \"Subtract {step} {unit}\", sv: \"Sutrahera {step} {unit}\"}"
                         }],
                     "text": "Defaults for accessibleSubtract"
                 },
                 "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  }"
+                "defaultValue": "{\n    fi: \"V\u00E4henn\u00E4 {step} {unit}\",\n    en: \"Subtract {step} {unit}\",\n    sv: \"Subtrahera {step} {unit}\",\n  }"
             },
             "accessibleSubtract": {
                 "type": "string",
+                "attribute": "accessible-subtract",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -696,18 +798,18 @@ export class DuetNumberInput {
                 "docs": {
                     "tags": [{
                             "name": "default",
-                            "text": "{fi: \"V\u00E4henn\u00E4 summasta\", en: \"Subtract from the amount\", sv: \"Dra fr\u00E5n beloppet\"}"
+                            "text": "{fi: \"V\u00E4henn\u00E4 {step} {unit}\", en: \"Subtract {step} {unit}\", sv: \"Sutrahera {step} {unit}\"}"
                         }],
-                    "text": "Accessible label for the subtract button that is read for screen reader users."
+                    "text": "Accessible label for the subtract button that is read for screen reader users. The placeholders {step} and {unit}\nare replaced with respective properties."
                 },
                 "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 +830,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 +856,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 +876,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 +896,11 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "min": {
                 "type": "number",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -813,12 +915,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 +944,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 +967,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 +987,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 +1007,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 +1027,11 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "error": {
                 "type": "string",
+                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -944,12 +1046,12 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"\""
             },
             "tooltip": {
                 "type": "string",
+                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -964,12 +1066,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 +1086,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 +1106,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 +1126,11 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "role",
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1043,12 +1145,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 +1165,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 +1185,6 @@ export class DuetNumberInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             }
         };