npm - @duetds/components - Versions diffs - 6.2.3 → 6.2.5 - Mend

@duetds/components 6.2.3 → 6.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (566) hide show

package/lib/collection/components/duet-button/duet-button.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { Component, Element, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
@@ -9,137 +9,61 @@ import { getColorByName } from "../../utils/token-utils";
 export class DuetButton {
   constructor() {
     /**
-     * Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button.
+     * Component event handling.
      */
+    this.handleClick = (ev) => {
+      // If this button wants to specifically submit a form
+      // climb up the dom to see if we're in a <form>
+      // and if so, then use JS to submit it.
+      // To understand better, see: https://www.hjorthhansen.dev/shadow-dom-form-participation/
+      if (!this.url && this.element.closest("form")) {
+        ev.preventDefault();
+        this.proxyButton.click();
+      }
+    };
+    this.onFocus = () => {
+      this.duetFocus.emit();
+    };
+    this.onBlur = () => {
+      this.duetBlur.emit();
+    };
+    this.accessibleLabel = undefined;
+    this.accessibleControls = undefined;
     this.accessiblePopup = "false";
-    /**
-     * Details of the component
-     */
+    this.accessibleActiveDescendant = undefined;
+    this.accessibleOwns = undefined;
+    this.accessibleDescribedBy = undefined;
     this.accessibleDetails = undefined;
-    /**
-     * String of id's that indicate alternative labels elements
-     */
     this.accessibleLabelledBy = undefined;
-    /**
-     * Aria description the button
-     */
     this.accessibleDescription = undefined;
-    /**
-     * Loading state of the button
-     */
+    this.accessibleExpanded = undefined;
+    this.accessiblePressed = undefined;
     this.loading = false;
-    /**
-     * Style variation of the button.
-     * @negative - value is deprecated and should be used in combination with negative prop in the future
-     * @destructive - value is deprecated and should be replace with destructive-secondary
-     */
     this.variation = "default";
-    /**
-     * Negative variation, can be combined with Variation to produce negative versions
-     */
     this.negative = false;
-    /**
-     * Theme of the button.
-     */
     this.theme = "";
-    /**
-     * Controls the margin of the component.
-     */
     this.margin = "auto";
-    /**
-     * Controls the padding of the component.
-     */
     this.padding = "auto";
-    /**
-     * Centers the text of a button
-     */
     this.centerText = false;
-    /**
-     * Controls the text wrapping.
-     */
     this.wrapping = "auto";
-    /**
-     * Expands the button to fill 100% of the container width.
-     */
     this.expand = false;
-    /**
-     * Keep the button fixed width even on mobile viewports.
-     */
     this.fixed = false;
-    /**
-     * Makes the button component disabled. This prevents users from being able to
-     * interact with the button, and conveys its inactive state to assistive technologies.
-     */
     this.disabled = false;
-    /**
-     * Allows the button to submit a form.
-     */
+    this.name = undefined;
+    this.value = undefined;
+    this.identifier = undefined;
     this.submit = false;
-    /**
-     * Forces URL to open in a new browser tab. Used together with URL prop.
-     */
     this.external = false;
-    /**
-     * @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();
-    /**
-     * Property to change accessibleLabelExternal defaults on the component.
-     * normally you would handle these strings on an application level and override @accessibleLabelExternal when needed
-     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
-     */
     this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
-    /**
-     * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
-     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
-     */
     this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
-    /**
-     * Icon to display to the left of the button content.
-     * This is ignored/overridden when button is used as an external link.
-     */
     this.icon = "";
-    /**
-     * Custom color to be used for text, as a design token entered in camelCase or
-     * kebab-case. Example: "color-primary".
-     */
     this.color = "";
-    /**
-     * Show icon on the right side of the button content.
-     */
     this.iconRight = false;
-    /**
-     * Icon size.
-     */
     this.iconSize = "medium";
-    /**
-     * Button’s size.
-     */
     this.size = "medium";
-    /**
-     * Whether this button should use styles meant for displaying just an icon.
-     */
     this.iconOnly = false;
-    /**
-     * Component event handling.
-     */
-    this.handleClick = (ev) => {
-      // If this button wants to specifically submit a form
-      // climb up the dom to see if we're in a <form>
-      // and if so, then use JS to submit it.
-      // To understand better, see: https://www.hjorthhansen.dev/shadow-dom-form-participation/
-      if (!this.url && this.element.closest("form")) {
-        ev.preventDefault();
-        this.proxyButton.click();
-      }
-    };
-    this.onFocus = () => {
-      this.duetFocus.emit();
-    };
-    this.onBlur = () => {
-      this.duetBlur.emit();
-    };
+    this.url = undefined;
   }
   /**
    * Component lifecycle events.
@@ -200,15 +124,12 @@ export class DuetButton {
     // enforce consistency for external links
     const icon = isExternalLink ? "action-new-window" : this.icon;
     const iconRight = isExternalLink ? true : this.iconRight;
-    const commonChildren = (h("span", { class: "duet-button-contents", style: { color: getColorByName(this.color) } },
-      icon && (h("div", { "aria-hidden": "true", class: {
-          "duet-button-icon": true,
-          left: !iconRight,
-          right: iconRight,
-          [this.iconSize]: true,
-        } },
-        h("duet-icon", { size: "auto", margin: "none", name: icon, color: "currentColor" }))),
-      h("slot", null)));
+    const commonChildren = (h("span", { class: "duet-button-contents", style: { color: getColorByName(this.color) } }, icon && (h("div", { "aria-hidden": "true", class: {
+        "duet-button-icon": true,
+        left: !iconRight,
+        right: iconRight,
+        [this.iconSize]: true,
+      } }, h("duet-icon", { size: "auto", margin: "none", name: icon, color: "currentColor" }))), h("slot", null)));
     const commonProps = {
       onFocus: this.onFocus,
       onBlur: this.onBlur,
@@ -245,821 +166,826 @@ export class DuetButton {
         "duet-fixed": this.fixed,
         "duet-expand": this.expand,
         "input-button": this.variation === "input-button-primary" || this.variation === "input-button-secondary",
-      } },
-      h("div", { class: {
-          "duet-button-container": true,
-          "duet-button-is-loading": this.loading,
-          "duet-theme-turva": this.theme === "turva",
-          "duet-button-negative": this.negative || this.variation === "negative",
-          [this.variation]: true,
-        } },
-        this.url ? (h("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }),
-          commonChildren,
-          this.external && h("duet-visually-hidden", null,
-            ", ",
-            this.accessibleLabelExternal))) : (h("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, "aria-disabled": this.disabled }), commonChildren)),
-        this.loading && h("duet-spinner", { color: "currentColor" }))));
+      } }, h("div", { class: {
+        "duet-button-container": true,
+        "duet-button-is-loading": this.loading,
+        "duet-theme-turva": this.theme === "turva",
+        "duet-button-negative": this.negative || this.variation === "negative",
+        [this.variation]: true,
+      } }, this.url ? (h("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }), commonChildren, this.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (h("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, "aria-disabled": this.disabled }), commonChildren)), this.loading && h("duet-spinner", { color: "currentColor" }))));
   }
   static get is() { return "duet-button"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["duet-button.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["duet-button.css"]
-  }; }
-  static get properties() { return {
-    "accessibleLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Adds accessible label for the button that is only shown for screen readers.\nTypically, this label text replaces the visible text on the button for\nusers who use assistive technology."
-      },
-      "attribute": "accessible-label",
-      "reflect": false
-    },
-    "accessibleControls": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use this property to add an aria-controls attribute to the button. Use\nthe attribute to point to the unique id of the content that the button manages."
-      },
-      "attribute": "accessible-controls",
-      "reflect": false
-    },
-    "accessiblePopup": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button."
-      },
-      "attribute": "accessible-popup",
-      "reflect": false,
-      "defaultValue": "\"false\""
-    },
-    "accessibleActiveDescendant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates the id of a related component\u2019s visually focused element."
-      },
-      "attribute": "accessible-active-descendant",
-      "reflect": false
-    },
-    "accessibleOwns": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates the id of a component owned by the button."
-      },
-      "attribute": "accessible-owns",
-      "reflect": false
-    },
-    "accessibleDescribedBy": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates the id of a component that describes the button."
-      },
-      "attribute": "accessible-described-by",
-      "reflect": false
-    },
-    "accessibleDetails": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Details of the component"
-      },
-      "attribute": "accessible-details",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "accessibleLabelledBy": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "String of id's that indicate alternative labels elements"
-      },
-      "attribute": "accessible-labelled-by",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "accessibleDescription": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Aria description the button"
-      },
-      "attribute": "accessible-description",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "accessibleExpanded": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If a button expands or collapses adjacent content, then use the ariaExpanded\nprop to add the aria-expanded attribute to the button. Set the value to convey\nthe current expanded (true) or collapsed (false) state of the content."
-      },
-      "attribute": "accessible-expanded",
-      "reflect": false
-    },
-    "accessiblePressed": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Tells screen reader the element is pressed."
-      },
-      "attribute": "accessible-pressed",
-      "reflect": false
-    },
-    "loading": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Loading state of the button"
-      },
-      "attribute": "loading",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "variation": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetButtonVariation",
-        "resolved": "\"default\" | \"destructive\" | \"destructive-primary\" | \"destructive-secondary\" | \"input-button-primary\" | \"input-button-secondary\" | \"negative\" | \"plain\" | \"primary\" | \"secondary\"",
-        "references": {
-          "DuetButtonVariation": {
-            "location": "local"
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "accessibleLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds accessible label for the button that is only shown for screen readers.\nTypically, this label text replaces the visible text on the button for\nusers who use assistive technology."
+        },
+        "attribute": "accessible-label",
+        "reflect": false
+      },
+      "accessibleControls": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this property to add an aria-controls attribute to the button. Use\nthe attribute to point to the unique id of the content that the button manages."
+        },
+        "attribute": "accessible-controls",
+        "reflect": false
+      },
+      "accessiblePopup": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button."
+        },
+        "attribute": "accessible-popup",
+        "reflect": false,
+        "defaultValue": "\"false\""
+      },
+      "accessibleActiveDescendant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a related component\u2019s visually focused element."
+        },
+        "attribute": "accessible-active-descendant",
+        "reflect": false
+      },
+      "accessibleOwns": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a component owned by the button."
+        },
+        "attribute": "accessible-owns",
+        "reflect": false
+      },
+      "accessibleDescribedBy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a component that describes the button."
+        },
+        "attribute": "accessible-described-by",
+        "reflect": false
+      },
+      "accessibleDetails": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Details of the component"
+        },
+        "attribute": "accessible-details",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "accessibleLabelledBy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "String of id's that indicate alternative labels elements"
+        },
+        "attribute": "accessible-labelled-by",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "accessibleDescription": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aria description the button"
+        },
+        "attribute": "accessible-description",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "accessibleExpanded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If a button expands or collapses adjacent content, then use the ariaExpanded\nprop to add the aria-expanded attribute to the button. Set the value to convey\nthe current expanded (true) or collapsed (false) state of the content."
+        },
+        "attribute": "accessible-expanded",
+        "reflect": false
+      },
+      "accessiblePressed": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tells screen reader the element is pressed."
+        },
+        "attribute": "accessible-pressed",
+        "reflect": false
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Loading state of the button"
+        },
+        "attribute": "loading",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "variation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetButtonVariation",
+          "resolved": "\"default\" | \"destructive\" | \"destructive-primary\" | \"destructive-secondary\" | \"input-button-primary\" | \"input-button-secondary\" | \"negative\" | \"plain\" | \"primary\" | \"secondary\"",
+          "references": {
+            "DuetButtonVariation": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "negative",
-            "text": "- value is deprecated and should be used in combination with negative prop in the future"
-          }, {
-            "name": "destructive",
-            "text": "- value is deprecated and should be replace with destructive-secondary"
-          }],
-        "text": "Style variation of the button."
-      },
-      "attribute": "variation",
-      "reflect": false,
-      "defaultValue": "\"default\""
-    },
-    "negative": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Negative variation, can be combined with Variation to produce negative versions"
-      },
-      "attribute": "negative",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "theme": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "DuetTheme",
-        "resolved": "\"\" | \"default\" | \"turva\"",
-        "references": {
-          "DuetTheme": {
-            "location": "import",
-            "path": "../../common-types"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "negative",
+              "text": "- value is deprecated and should be used in combination with negative prop in the future"
+            }, {
+              "name": "destructive",
+              "text": "- value is deprecated and should be replace with destructive-secondary"
+            }],
+          "text": "Style variation of the button."
+        },
+        "attribute": "variation",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
+      "negative": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Negative variation, can be combined with Variation to produce negative versions"
+        },
+        "attribute": "negative",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Theme of the button."
-      },
-      "attribute": "theme",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "margin": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetMargin",
-        "resolved": "\"auto\" | \"none\"",
-        "references": {
-          "DuetMargin": {
-            "location": "import",
-            "path": "../../common-types"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme of the button."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "margin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetMargin",
+          "resolved": "\"auto\" | \"none\"",
+          "references": {
+            "DuetMargin": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Controls the margin of the component."
-      },
-      "attribute": "margin",
-      "reflect": false,
-      "defaultValue": "\"auto\""
-    },
-    "padding": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetPadding",
-        "resolved": "\"auto\" | \"none\"",
-        "references": {
-          "DuetPadding": {
-            "location": "import",
-            "path": "../../common-types"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the margin of the component."
+        },
+        "attribute": "margin",
+        "reflect": false,
+        "defaultValue": "\"auto\""
+      },
+      "padding": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetPadding",
+          "resolved": "\"auto\" | \"none\"",
+          "references": {
+            "DuetPadding": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Controls the padding of the component."
-      },
-      "attribute": "padding",
-      "reflect": false,
-      "defaultValue": "\"auto\""
-    },
-    "centerText": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetButtonTextCentering",
-        "resolved": "boolean",
-        "references": {
-          "DuetButtonTextCentering": {
-            "location": "local"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the padding of the component."
+        },
+        "attribute": "padding",
+        "reflect": false,
+        "defaultValue": "\"auto\""
+      },
+      "centerText": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetButtonTextCentering",
+          "resolved": "boolean",
+          "references": {
+            "DuetButtonTextCentering": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Centers the text of a button"
-      },
-      "attribute": "center-text",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "wrapping": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetButtonWrapping",
-        "resolved": "\"auto\" | \"none\"",
-        "references": {
-          "DuetButtonWrapping": {
-            "location": "local"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Centers the text of a button"
+        },
+        "attribute": "center-text",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "wrapping": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetButtonWrapping",
+          "resolved": "\"auto\" | \"none\"",
+          "references": {
+            "DuetButtonWrapping": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Controls the text wrapping."
-      },
-      "attribute": "wrapping",
-      "reflect": false,
-      "defaultValue": "\"auto\""
-    },
-    "expand": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Expands the button to fill 100% of the container width."
-      },
-      "attribute": "expand",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "fixed": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Keep the button fixed width even on mobile viewports."
-      },
-      "attribute": "fixed",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Makes the button component disabled. This prevents users from being able to\ninteract with the button, and conveys its inactive state to assistive technologies."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The name of the button, which gets paired with the button's value when submitted as part of a form.\nCorresponds with the native HTML name attribute."
-      },
-      "attribute": "name",
-      "reflect": false
-    },
-    "value": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The value of the button, which gets paired with the button's name when submitted as part of a form.\nCorresponds with the native HTML value attribute."
-      },
-      "attribute": "value",
-      "reflect": false
-    },
-    "identifier": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Adds a unique identifier for the button. Please note that with this particular\ncomponent this id is added inside Shadow DOM. If you need an id on the html\nelement, use regular id attribute instead."
-      },
-      "attribute": "identifier",
-      "reflect": false
-    },
-    "submit": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Allows the button to submit a form."
-      },
-      "attribute": "submit",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "external": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Forces URL to open in a new browser tab. Used together with URL prop."
-      },
-      "attribute": "external",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "language": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing"
-          }, {
-            "name": "default",
-            "text": "\"fi\""
-          }],
-        "text": ""
-      },
-      "attribute": "language",
-      "reflect": false,
-      "defaultValue": "getLanguage()"
-    },
-    "accessibleLabelExternalDefaults": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetLangObject | string",
-        "resolved": "DuetLangObject | string",
-        "references": {
-          "DuetLangObject": {
-            "location": "import",
-            "path": "../../utils/language-utils"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the text wrapping."
+        },
+        "attribute": "wrapping",
+        "reflect": false,
+        "defaultValue": "\"auto\""
+      },
+      "expand": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Expands the button to fill 100% of the container width."
+        },
+        "attribute": "expand",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "fixed": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Keep the button fixed width even on mobile viewports."
+        },
+        "attribute": "fixed",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Makes the button component disabled. This prevents users from being able to\ninteract with the button, and conveys its inactive state to assistive technologies."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the button, which gets paired with the button's value when submitted as part of a form.\nCorresponds with the native HTML name attribute."
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the button, which gets paired with the button's name when submitted as part of a form.\nCorresponds with the native HTML value attribute."
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "identifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds a unique identifier for the button. Please note that with this particular\ncomponent this id is added inside Shadow DOM. If you need an id on the html\nelement, use regular id attribute instead."
+        },
+        "attribute": "identifier",
+        "reflect": false
+      },
+      "submit": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Allows the button to submit a form."
+        },
+        "attribute": "submit",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "external": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Forces URL to open in a new browser tab. Used together with URL prop."
+        },
+        "attribute": "external",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "language": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing"
+            }, {
+              "name": "default",
+              "text": "\"fi\""
+            }],
+          "text": ""
+        },
+        "attribute": "language",
+        "reflect": false,
+        "defaultValue": "getLanguage()"
+      },
+      "accessibleLabelExternalDefaults": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetLangObject | string",
+          "resolved": "DuetLangObject | string",
+          "references": {
+            "DuetLangObject": {
+              "location": "import",
+              "path": "../../utils/language-utils"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
-          }],
-        "text": "Property to change accessibleLabelExternal defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabelExternal when needed"
-      },
-      "attribute": "accessible-label-external-default",
-      "reflect": false,
-      "defaultValue": "DuetStringsExternalDefaults"
-    },
-    "accessibleLabelExternal": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
-          }],
-        "text": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
-      },
-      "attribute": "accessible-label-external",
-      "reflect": false,
-      "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetIconName",
-        "resolved": "string",
-        "references": {
-          "DuetIconName": {
-            "location": "import",
-            "path": "../../common-types"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
+            }],
+          "text": "Property to change accessibleLabelExternal defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabelExternal when needed"
+        },
+        "attribute": "accessible-label-external-default",
+        "reflect": false,
+        "defaultValue": "DuetStringsExternalDefaults"
+      },
+      "accessibleLabelExternal": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
+            }],
+          "text": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
+        },
+        "attribute": "accessible-label-external",
+        "reflect": false,
+        "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetIconName",
+          "resolved": "string",
+          "references": {
+            "DuetIconName": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Icon to display to the left of the button content.\nThis is ignored/overridden when button is used as an external link."
-      },
-      "attribute": "icon",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "color": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetColor",
-        "resolved": "string",
-        "references": {
-          "DuetColor": {
-            "location": "import",
-            "path": "../../common-types"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon to display to the left of the button content.\nThis is ignored/overridden when button is used as an external link."
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetColor",
+          "resolved": "string",
+          "references": {
+            "DuetColor": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Custom color to be used for text, as a design token entered in camelCase or\nkebab-case. Example: \"color-primary\"."
-      },
-      "attribute": "color",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "iconRight": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Show icon on the right side of the button content."
-      },
-      "attribute": "icon-right",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "iconSize": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetButtonIconSize",
-        "resolved": "\"large\" | \"medium\" | \"medium-small\" | \"small\"",
-        "references": {
-          "DuetButtonIconSize": {
-            "location": "local"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Custom color to be used for text, as a design token entered in camelCase or\nkebab-case. Example: \"color-primary\"."
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "iconRight": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Show icon on the right side of the button content."
+        },
+        "attribute": "icon-right",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "iconSize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetButtonIconSize",
+          "resolved": "\"large\" | \"medium\" | \"medium-small\" | \"small\"",
+          "references": {
+            "DuetButtonIconSize": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Icon size."
-      },
-      "attribute": "icon-size",
-      "reflect": false,
-      "defaultValue": "\"medium\""
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetButtonSize",
-        "resolved": "\"medium\" | \"small\"",
-        "references": {
-          "DuetButtonSize": {
-            "location": "local"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon size."
+        },
+        "attribute": "icon-size",
+        "reflect": false,
+        "defaultValue": "\"medium\""
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetButtonSize",
+          "resolved": "\"medium\" | \"small\"",
+          "references": {
+            "DuetButtonSize": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Button\u2019s size."
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "\"medium\""
-    },
-    "iconOnly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Whether this button should use styles meant for displaying just an icon."
-      },
-      "attribute": "icon-only",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "url": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A destination to link to, rendered in the href attribute of a link."
-      },
-      "attribute": "url",
-      "reflect": true
-    }
-  }; }
-  static get events() { return [{
-      "method": "duetFocus",
-      "name": "duetFocus",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the button has focus."
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "duetBlur",
-      "name": "duetBlur",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the button loses focus."
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button\u2019s size."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"medium\""
+      },
+      "iconOnly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether this button should use styles meant for displaying just an icon."
+        },
+        "attribute": "icon-only",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A destination to link to, rendered in the href attribute of a link."
+        },
+        "attribute": "url",
+        "reflect": true
       }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "(options?: FocusOptions) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+    };
+  }
+  static get events() {
+    return [{
+        "method": "duetFocus",
+        "name": "duetFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the button has focus."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "duetBlur",
+        "name": "duetBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the button loses focus."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "(options?: FocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "FocusOptions": {
+              "location": "global"
+            }
           },
-          "FocusOptions": {
-            "location": "global"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets focus on the specified `duet-button`. Use this method instead of the global\n`button.focus()`.",
-        "tags": []
+        "docs": {
+          "text": "Sets focus on the specified `duet-button`. Use this method instead of the global\n`button.focus()`.",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "disabled",
-      "methodName": "syncToProxyButton"
-    }, {
-      "propName": "submit",
-      "methodName": "syncToProxyButton"
-    }, {
-      "propName": "value",
-      "methodName": "syncToProxyButton"
-    }, {
-      "propName": "name",
-      "methodName": "syncToProxyButton"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "disabled",
+        "methodName": "syncToProxyButton"
+      }, {
+        "propName": "submit",
+        "methodName": "syncToProxyButton"
+      }, {
+        "propName": "value",
+        "methodName": "syncToProxyButton"
+      }, {
+        "propName": "name",
+        "methodName": "syncToProxyButton"
+      }];
+  }
 }