@aurodesignsystem/auro-formkit 5.1.1 → 5.1.2

package/components/radio/demo/api.min.js

@@ -248,8 +248,8 @@ class AuroRadio extends i$2 {
       },
 
       /**
+       * Don't add to api.md since changing of this can easily break a11y.
        * @private
-       * not to add to api.md since changing of this can easily break a11y.
        */
       role: {
         type: String,
@@ -1170,16 +1170,16 @@ class AuroFormValidation {
       }
 
       this.getErrorMessage(elem);
-
-      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          validity: elem.validity,
-          message: elem.errorMessage
-        }
-      }));
     }
+
+    elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        validity: elem.validity,
+        message: elem.errorMessage
+      }
+    }));
   }
 
   /**
@@ -1796,13 +1796,15 @@ class AuroRadioGroup extends i$2 {
    * @returns {void}
    */
   initializeIndex() {
-    if (!this.disabled) {
+    if (!this.disabled && this.items && this.items.length > 0) {
       const index = this.items.findIndex((item) => item.hasAttribute('checked') && !item.hasAttribute('disabled'));
       const nextEnabledIndex = this.items.findIndex((item) => !item.hasAttribute('disabled'));
 
       this.index = index >= 0 ? index : nextEnabledIndex;
-      this.items[this.index].setAttribute('tabindex', 0);
-    }
+
+      if (this.items[this.index]) {
+        this.items[this.index].setAttribute('tabindex', 0);
+      }    }
   }
 
   /**

package/components/radio/demo/index.min.js

@@ -223,8 +223,8 @@ class AuroRadio extends i$2 {
       },
 
       /**
+       * Don't add to api.md since changing of this can easily break a11y.
        * @private
-       * not to add to api.md since changing of this can easily break a11y.
        */
       role: {
         type: String,
@@ -1145,16 +1145,16 @@ class AuroFormValidation {
       }
 
       this.getErrorMessage(elem);
-
-      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          validity: elem.validity,
-          message: elem.errorMessage
-        }
-      }));
     }
+
+    elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        validity: elem.validity,
+        message: elem.errorMessage
+      }
+    }));
   }
 
   /**
@@ -1771,13 +1771,15 @@ class AuroRadioGroup extends i$2 {
    * @returns {void}
    */
   initializeIndex() {
-    if (!this.disabled) {
+    if (!this.disabled && this.items && this.items.length > 0) {
       const index = this.items.findIndex((item) => item.hasAttribute('checked') && !item.hasAttribute('disabled'));
       const nextEnabledIndex = this.items.findIndex((item) => !item.hasAttribute('disabled'));
 
       this.index = index >= 0 ? index : nextEnabledIndex;
-      this.items[this.index].setAttribute('tabindex', 0);
-    }
+
+      if (this.items[this.index]) {
+        this.items[this.index].setAttribute('tabindex', 0);
+      }    }
   }
 
   /**

package/components/radio/dist/auro-radio.d.ts

@@ -71,8 +71,8 @@ export class AuroRadio extends LitElement {
             attribute: boolean;
         };
         /**
+         * Don't add to api.md since changing of this can easily break a11y.
          * @private
-         * not to add to api.md since changing of this can easily break a11y.
          */
         role: {
             type: StringConstructor;

package/components/radio/dist/index.js

@@ -183,8 +183,8 @@ class AuroRadio extends LitElement {
       },
 
       /**
+       * Don't add to api.md since changing of this can easily break a11y.
        * @private
-       * not to add to api.md since changing of this can easily break a11y.
        */
       role: {
         type: String,
@@ -1098,16 +1098,16 @@ class AuroFormValidation {
       }
 
       this.getErrorMessage(elem);
-
-      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          validity: elem.validity,
-          message: elem.errorMessage
-        }
-      }));
     }
+
+    elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        validity: elem.validity,
+        message: elem.errorMessage
+      }
+    }));
   }
 
   /**
@@ -1724,13 +1724,15 @@ class AuroRadioGroup extends LitElement {
    * @returns {void}
    */
   initializeIndex() {
-    if (!this.disabled) {
+    if (!this.disabled && this.items && this.items.length > 0) {
       const index = this.items.findIndex((item) => item.hasAttribute('checked') && !item.hasAttribute('disabled'));
       const nextEnabledIndex = this.items.findIndex((item) => !item.hasAttribute('disabled'));
 
       this.index = index >= 0 ? index : nextEnabledIndex;
-      this.items[this.index].setAttribute('tabindex', 0);
-    }
+
+      if (this.items[this.index]) {
+        this.items[this.index].setAttribute('tabindex', 0);
+      }    }
   }
 
   /**

package/components/radio/dist/registered.js

@@ -183,8 +183,8 @@ class AuroRadio extends LitElement {
       },
 
       /**
+       * Don't add to api.md since changing of this can easily break a11y.
        * @private
-       * not to add to api.md since changing of this can easily break a11y.
        */
       role: {
         type: String,
@@ -1098,16 +1098,16 @@ class AuroFormValidation {
       }
 
       this.getErrorMessage(elem);
-
-      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          validity: elem.validity,
-          message: elem.errorMessage
-        }
-      }));
     }
+
+    elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        validity: elem.validity,
+        message: elem.errorMessage
+      }
+    }));
   }
 
   /**
@@ -1724,13 +1724,15 @@ class AuroRadioGroup extends LitElement {
    * @returns {void}
    */
   initializeIndex() {
-    if (!this.disabled) {
+    if (!this.disabled && this.items && this.items.length > 0) {
       const index = this.items.findIndex((item) => item.hasAttribute('checked') && !item.hasAttribute('disabled'));
       const nextEnabledIndex = this.items.findIndex((item) => !item.hasAttribute('disabled'));
 
       this.index = index >= 0 ? index : nextEnabledIndex;
-      this.items[this.index].setAttribute('tabindex', 0);
-    }
+
+      if (this.items[this.index]) {
+        this.items[this.index].setAttribute('tabindex', 0);
+      }    }
   }
 
   /**

package/components/select/demo/api.min.js

@@ -170,6 +170,14 @@ let AuroElement$4 = class AuroElement extends i$2 {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -1026,16 +1034,16 @@ class AuroFormValidation {
       }
 
       this.getErrorMessage(elem);
-
-      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          validity: elem.validity,
-          message: elem.errorMessage
-        }
-      }));
     }
+
+    elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        validity: elem.validity,
+        message: elem.errorMessage
+      }
+    }));
   }
 
   /**
@@ -4531,6 +4539,14 @@ let AuroElement$3 = class AuroElement extends i$2 {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

package/components/select/demo/index.min.js

@@ -78,6 +78,14 @@ let AuroElement$4 = class AuroElement extends i$2 {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -934,16 +942,16 @@ class AuroFormValidation {
       }
 
       this.getErrorMessage(elem);
-
-      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          validity: elem.validity,
-          message: elem.errorMessage
-        }
-      }));
     }
+
+    elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        validity: elem.validity,
+        message: elem.errorMessage
+      }
+    }));
   }
 
   /**
@@ -4439,6 +4447,14 @@ let AuroElement$3 = class AuroElement extends i$2 {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

package/components/select/dist/index.js

@@ -38,6 +38,14 @@ let AuroElement$3 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -894,16 +902,16 @@ class AuroFormValidation {
       }
 
       this.getErrorMessage(elem);
-
-      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          validity: elem.validity,
-          message: elem.errorMessage
-        }
-      }));
     }
+
+    elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        validity: elem.validity,
+        message: elem.errorMessage
+      }
+    }));
   }
 
   /**
@@ -4393,6 +4401,14 @@ let AuroElement$2 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

package/components/select/dist/registered.js

@@ -38,6 +38,14 @@ let AuroElement$3 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -894,16 +902,16 @@ class AuroFormValidation {
       }
 
       this.getErrorMessage(elem);
-
-      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          validity: elem.validity,
-          message: elem.errorMessage
-        }
-      }));
     }
+
+    elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        validity: elem.validity,
+        message: elem.errorMessage
+      }
+    }));
   }
 
   /**
@@ -4393,6 +4401,14 @@ let AuroElement$2 = class AuroElement extends LitElement {
     };
   }
 
+  /**
+   * Returns true if the element has focus.
+   * @returns {boolean} - Returns true if the element has focus.
+   */
+  get componentHasFocus() {
+    return this.matches(':focus');
+  }
+
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-formkit",
-  "version": "5.1.1",
+  "version": "5.1.2",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {