feat(ready): notify readiness of the component #190

AlaskaAirlines · Feb 13, 2023 · f80799d · f80799d
1 parent 9e11c21
commit f80799d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git a/docs/api.md b/docs/api.md
@@ -17,6 +17,7 @@
 | `id`             | `id`             | `String`  |         | Set the unique ID of an element.                 |
 | `loading`        | `loading`        | `Boolean` | false   | If set to true button text will be replaced with `auro-loader` and become disabled |
 | `ondark`         | `ondark`         | `Boolean` | false   | Set value for on-dark version of auro-button     |
+| `ready`          | `ready`          | `Boolean` | false   | When false the component API should not be called. |
 | `secondary`      | `secondary`      | `Boolean` | false   | Set value for secondary version of auro-button   |
 | `slim`           | `slim`           | `Boolean` | false   | Set value for slim version of auro-button        |
 | `svgIconLeft`    | `svgIconLeft`    | `String`  |         | **DEPRECATED** Use auro-icon                     |
@@ -26,6 +27,12 @@
 | `type`           | `type`           | `String`  |         | The type of the button. Possible values are: `submit`, `reset`, `button` |
 | `value`          | `value`          | `String`  |         | Defines the value associated with the button which is submitted with the form data. |
 
+## Events
+
+| Event              | Type               | Description                                      |
+|--------------------|--------------------|--------------------------------------------------|
+| `auroButton-ready` | `CustomEvent<any>` | Notifies that the component has finished initializing. |
+
 ## Slots
 
 | Name | Description                  |

diff --git a/src/auro-button.js b/src/auro-button.js
@@ -27,6 +27,8 @@ import { isFocusVisibleSupported, isFocusVisiblePolyfillAvailable } from './util
  * @attr {String} title - Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
  * @attr {String} type - The type of the button. Possible values are: `submit`, `reset`, `button`
  * @attr {String} value - Defines the value associated with the button which is submitted with the form data.
+ * @prop {Boolean} ready - When false the component API should not be called.
+ * @fires auroButton-ready - Notifies that the component has finished initializing.
  * @attr {String} svgIconLeft - **DEPRECATED** Use auro-icon
  * @attr {String} svgIconRight - **DEPRECATED** Use auro-icon
  *
@@ -39,6 +41,7 @@ class AuroButton extends LitElement {
     this.disabled = false;
     this.loading = false;
     this.ondark = false;
+    this.ready = false;
     this.secondary = false;
     this.tertiary = false;
     this.slim = false;
@@ -111,6 +114,7 @@ class AuroButton extends LitElement {
       id:               { type: String },
       svgIconLeft:      { type: String },
       svgIconRight:     { type: String },
+      ready:            { type: Boolean },
     };
   }
 
@@ -135,6 +139,24 @@ class AuroButton extends LitElement {
     return this.svg;
   }
 
+  /**
+   * @private
+   * @returns {void} Marks the component as ready and sends event.
+   */
+  notifyReady() {
+    this.ready = true;
+
+    this.dispatchEvent(new CustomEvent('auroButton-ready', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    }));
+  }
+
+  firstUpdated() {
+    this.notifyReady();
+  }
+
   render() {
 
     const classes = {