@aurodesignsystem/auro-formkit 5.1.1 → 5.1.2

package/components/combobox/dist/index.js

@@ -835,16 +835,16 @@ let AuroFormValidation$1 = 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
+      }
+    }));
   }
 
   /**
@@ -4294,6 +4294,14 @@ let AuroElement$4 = 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');
 
@@ -10031,16 +10039,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
+      }
+    }));
   }
 
   /**
@@ -10132,6 +10140,14 @@ let AuroElement$2$1 = 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');
 
@@ -15561,7 +15577,7 @@ class AuroBibtemplate extends LitElement {
 
 var bibTemplateVersion = '1.0.0';
 
-var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-input]{--ds-auro-input-container-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host #inputInBib::part(accent-right){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
+var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-input]{--ds-auro-input-background-color: transparent;--ds-auro-input-container-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host #inputInBib::part(accent-right){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
 var styleEmphasizedCss = css`:host([layout*=emphasized][shape*=pill]) [auro-input]{width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}`;
 
@@ -15601,6 +15617,14 @@ 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');
 
@@ -16426,7 +16450,7 @@ class AuroCombobox extends AuroElement {
 
       // wait a frame in case the bib gets hide immediately after showing because there is no value
       setTimeout(() => {
-        if (document.activeElement === this) {
+        if (this.componentHasFocus) {
           this.setInputFocus();
         }
       }, 0);
@@ -16591,13 +16615,16 @@ class AuroCombobox extends AuroElement {
      * Validate every time we remove focus from the combo box.
      */
     this.addEventListener('focusout', () => {
-      if (document.activeElement !== this) {
+      if (!this.componentHasFocus) {
         this.validate();
       }
     });
 
     // Handle validation messages from auroFormElement-validated event
     this.input.addEventListener('auroFormElement-validated', (evt) => {
+      // not to bubble up input's validated event.
+      evt.stopPropagation();
+
       this.errorMessage = evt.detail.message;
     });
   }
@@ -16668,7 +16695,7 @@ class AuroCombobox extends AuroElement {
     this.handleMenuOptions();
 
     // Validate only if the value was set programmatically
-    if (document.activeElement !== this) {
+    if (!this.componentHasFocus) {
       this.validate();
     }
 
@@ -16708,7 +16735,7 @@ class AuroCombobox extends AuroElement {
           }
         } else {
           setTimeout(() => {
-            if (document.activeElement !== this) {
+            if (!this.componentHasFocus) {
               this.hideBib();
             }
           }, 0);
@@ -16829,7 +16856,7 @@ class AuroCombobox extends AuroElement {
     }
 
     if (changedProperties.has('availableOptions')) {
-      if (this.availableOptions && this.availableOptions.length > 0 && document.activeElement === this) {
+      if (this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) {
         this.showBib();
       } else {
         this.hideBib();

package/components/combobox/dist/registered.js

@@ -835,16 +835,16 @@ let AuroFormValidation$1 = 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
+      }
+    }));
   }
 
   /**
@@ -4294,6 +4294,14 @@ let AuroElement$4 = 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');
 
@@ -10031,16 +10039,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
+      }
+    }));
   }
 
   /**
@@ -10132,6 +10140,14 @@ let AuroElement$2$1 = 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');
 
@@ -15561,7 +15577,7 @@ class AuroBibtemplate extends LitElement {
 
 var bibTemplateVersion = '1.0.0';
 
-var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-input]{--ds-auro-input-container-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host #inputInBib::part(accent-right){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
+var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-input]{--ds-auro-input-background-color: transparent;--ds-auro-input-container-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host #inputInBib::part(accent-right){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
 var styleEmphasizedCss = css`:host([layout*=emphasized][shape*=pill]) [auro-input]{width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}`;
 
@@ -15601,6 +15617,14 @@ 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');
 
@@ -16426,7 +16450,7 @@ class AuroCombobox extends AuroElement {
 
       // wait a frame in case the bib gets hide immediately after showing because there is no value
       setTimeout(() => {
-        if (document.activeElement === this) {
+        if (this.componentHasFocus) {
           this.setInputFocus();
         }
       }, 0);
@@ -16591,13 +16615,16 @@ class AuroCombobox extends AuroElement {
      * Validate every time we remove focus from the combo box.
      */
     this.addEventListener('focusout', () => {
-      if (document.activeElement !== this) {
+      if (!this.componentHasFocus) {
         this.validate();
       }
     });
 
     // Handle validation messages from auroFormElement-validated event
     this.input.addEventListener('auroFormElement-validated', (evt) => {
+      // not to bubble up input's validated event.
+      evt.stopPropagation();
+
       this.errorMessage = evt.detail.message;
     });
   }
@@ -16668,7 +16695,7 @@ class AuroCombobox extends AuroElement {
     this.handleMenuOptions();
 
     // Validate only if the value was set programmatically
-    if (document.activeElement !== this) {
+    if (!this.componentHasFocus) {
       this.validate();
     }
 
@@ -16708,7 +16735,7 @@ class AuroCombobox extends AuroElement {
           }
         } else {
           setTimeout(() => {
-            if (document.activeElement !== this) {
+            if (!this.componentHasFocus) {
               this.hideBib();
             }
           }, 0);
@@ -16829,7 +16856,7 @@ class AuroCombobox extends AuroElement {
     }
 
     if (changedProperties.has('availableOptions')) {
-      if (this.availableOptions && this.availableOptions.length > 0 && document.activeElement === this) {
+      if (this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) {
         this.showBib();
       } else {
         this.hideBib();

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

@@ -2423,16 +2423,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
+      }
+    }));
   }
 
   /**
@@ -6526,6 +6526,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');
 
@@ -9510,6 +9518,14 @@ 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/counter/demo/index.min.js

@@ -2423,16 +2423,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
+      }
+    }));
   }
 
   /**
@@ -6526,6 +6526,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');
 
@@ -9510,6 +9518,14 @@ 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/counter/dist/index.js

@@ -2376,16 +2376,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
+      }
+    }));
   }
 
   /**
@@ -6479,6 +6479,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');
 
@@ -9463,6 +9471,14 @@ 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/counter/dist/registered.js

@@ -2376,16 +2376,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
+      }
+    }));
   }
 
   /**
@@ -6479,6 +6479,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');
 
@@ -9463,6 +9471,14 @@ 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/datepicker/demo/api.md

@@ -12,6 +12,7 @@
 | [calendarFocusDate](#calendarFocusDate)               | `calendarFocusDate`               |           | `string`   | "value"                                          | The date that will first be visually rendered to the user in the calendar. |
 | [calendarStartDate](#calendarStartDate)               | `calendarStartDate`               |           | `string`   | "undefined"                                      | The first date that may be displayed in the calendar. |
 | [centralDate](#centralDate)                     | `centralDate`                     |           | `string`   |                                                  | The date that determines the currently visible month. |
+| [componentHasFocus](#componentHasFocus)               |                                   | readonly  | `boolean`  |                                                  | Returns true if the element has focus.           |
 | [disabled](#disabled)                        | `disabled`                        |           | `boolean`  | false                                            | If set, disables the datepicker.                 |
 | [error](#error)                           | `error`                           |           | `string`   |                                                  | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
 | [format](#format)                          | `format`                          |           | `string`   | "mm/dd/yyyy"                                     | Specifies the date format. The default is `mm/dd/yyyy`. |

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

@@ -1075,16 +1075,16 @@ let AuroFormValidation$1 = 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
+      }
+    }));
   }
 
   /**
@@ -17947,6 +17947,14 @@ let AuroElement$4 = class AuroElement extends i {
     };
   }
 
+  /**
+   * 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');
 
@@ -23697,16 +23705,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
+      }
+    }));
   }
 
   /**
@@ -23798,6 +23806,14 @@ let AuroElement$2 = class AuroElement extends i {
     };
   }
 
+  /**
+   * 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');
 
@@ -27526,6 +27542,14 @@ let AuroElement$1 = class AuroElement extends i {
     };
   }
 
+  /**
+   * 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');
 
@@ -28782,6 +28806,9 @@ class AuroDatePicker extends AuroElement$1 {
       });
 
       input.addEventListener('auroFormElement-validated', (evt) => {
+        // not to bubble up input's validated event.
+        evt.stopPropagation();
+
         if (evt.detail.validity === 'customError') {
           this.validity = evt.detail.validity;
           this.errorMessage = evt.detail.message;
@@ -29119,7 +29146,6 @@ class AuroDatePicker extends AuroElement$1 {
       }
 
       this.setHasValue();
-      this.validate();
     }
 
     if (changedProperties.has('valueEnd') && this.inputList[1]) {