@aurodesignsystem/auro-formkit 3.4.1-rc-602.2.1 → 3.5.0-rc-627.1

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

@@ -758,7 +758,20 @@ let AuroFormValidation$1 = class AuroFormValidation {
        * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
        */
 
-      let hasValue = elem.value && elem.value.length > 0;
+      let hasValue = false;
+
+      // Check string for having a value
+      if (typeof elem.value === "string") {
+        hasValue = elem.value && elem.value.length > 0;
+      }
+
+      // Check array value types for having a value
+      if (Array.isArray(elem.value)) {
+        hasValue = Boolean(
+          elem.value.length > 0 &&
+          elem.value.some((value) => typeof value === "string" && value.length > 0)
+        );
+      }
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
       if (this.auroInputElements?.length === 2) {
@@ -20736,7 +20749,20 @@ class AuroFormValidation {
        * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
        */
 
-      let hasValue = elem.value && elem.value.length > 0;
+      let hasValue = false;
+
+      // Check string for having a value
+      if (typeof elem.value === "string") {
+        hasValue = elem.value && elem.value.length > 0;
+      }
+
+      // Check array value types for having a value
+      if (Array.isArray(elem.value)) {
+        hasValue = Boolean(
+          elem.value.length > 0 &&
+          elem.value.some((value) => typeof value === "string" && value.length > 0)
+        );
+      }
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
       if (this.auroInputElements?.length === 2) {
@@ -20850,6 +20876,9 @@ class AuroFormValidation {
  * @attr {Boolean} bordered - Applies bordered UI variant.
  * @attr {Boolean} borderless - Applies borderless UI variant.
  *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
  *
@@ -21040,13 +21069,6 @@ class BaseInput extends i$2 {
         reflect: true
       },
 
-      /**
-       * Sets the unique ID of the element.
-       */
-      id: {
-        type: String
-      },
-
       /** Exposes inputmode attribute for input.  */
       inputmode: {
         type: String,
@@ -21267,6 +21289,16 @@ class BaseInput extends i$2 {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -21298,6 +21330,7 @@ class BaseInput extends i$2 {
     if (this.tagName.toLowerCase() !== 'auro-input') {
       this.setAttribute('auro-input', true);
     }
+    this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
@@ -22963,7 +22996,7 @@ class AuroInput extends BaseInput {
             : undefined
             }
           </div>
-          <label for=${this.id} class="${e(labelClasses)}" part="label">
+          <label for=${this.inputId} class="${e(labelClasses)}" part="label">
             <slot name="label">
               ${this.label}
             </slot>
@@ -22973,7 +23006,7 @@ class AuroInput extends BaseInput {
             @input="${this.handleInput}"
             @focusin="${this.handleFocusin}"
             @blur="${this.handleBlur}"
-            id="${this.id}"
+            id="${this.inputId}"
             name="${o(this.name)}"
             type="${this.type === 'password' && this.showPassword ? 'text' : this.getInputType(this.type)}"
             pattern="${o(this.definePattern())}"
@@ -23041,7 +23074,7 @@ class AuroInput extends BaseInput {
                   variant="flat"
                   ?onDark="${this.onDark}"
                   class="notificationBtn clearBtn"
-                  aria-label="${i18n(this.lang, 'clearInput')}"
+                  arialabel="${i18n(this.lang, 'clearInput')}"
                   @click="${this.handleClickClear}">
                   <${this.iconTag}
                     customColor

package/components/datepicker/dist/index.js

@@ -732,7 +732,20 @@ let AuroFormValidation$1 = class AuroFormValidation {
        * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
        */
 
-      let hasValue = elem.value && elem.value.length > 0;
+      let hasValue = false;
+
+      // Check string for having a value
+      if (typeof elem.value === "string") {
+        hasValue = elem.value && elem.value.length > 0;
+      }
+
+      // Check array value types for having a value
+      if (Array.isArray(elem.value)) {
+        hasValue = Boolean(
+          elem.value.length > 0 &&
+          elem.value.some((value) => typeof value === "string" && value.length > 0)
+        );
+      }
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
       if (this.auroInputElements?.length === 2) {
@@ -20672,7 +20685,20 @@ class AuroFormValidation {
        * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
        */
 
-      let hasValue = elem.value && elem.value.length > 0;
+      let hasValue = false;
+
+      // Check string for having a value
+      if (typeof elem.value === "string") {
+        hasValue = elem.value && elem.value.length > 0;
+      }
+
+      // Check array value types for having a value
+      if (Array.isArray(elem.value)) {
+        hasValue = Boolean(
+          elem.value.length > 0 &&
+          elem.value.some((value) => typeof value === "string" && value.length > 0)
+        );
+      }
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
       if (this.auroInputElements?.length === 2) {
@@ -20786,6 +20812,9 @@ class AuroFormValidation {
  * @attr {Boolean} bordered - Applies bordered UI variant.
  * @attr {Boolean} borderless - Applies borderless UI variant.
  *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
  *
@@ -20976,13 +21005,6 @@ class BaseInput extends LitElement {
         reflect: true
       },
 
-      /**
-       * Sets the unique ID of the element.
-       */
-      id: {
-        type: String
-      },
-
       /** Exposes inputmode attribute for input.  */
       inputmode: {
         type: String,
@@ -21203,6 +21225,16 @@ class BaseInput extends LitElement {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -21234,6 +21266,7 @@ class BaseInput extends LitElement {
     if (this.tagName.toLowerCase() !== 'auro-input') {
       this.setAttribute('auro-input', true);
     }
+    this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
@@ -22899,7 +22932,7 @@ class AuroInput extends BaseInput {
             : undefined
             }
           </div>
-          <label for=${this.id} class="${classMap(labelClasses)}" part="label">
+          <label for=${this.inputId} class="${classMap(labelClasses)}" part="label">
             <slot name="label">
               ${this.label}
             </slot>
@@ -22909,7 +22942,7 @@ class AuroInput extends BaseInput {
             @input="${this.handleInput}"
             @focusin="${this.handleFocusin}"
             @blur="${this.handleBlur}"
-            id="${this.id}"
+            id="${this.inputId}"
             name="${ifDefined(this.name)}"
             type="${this.type === 'password' && this.showPassword ? 'text' : this.getInputType(this.type)}"
             pattern="${ifDefined(this.definePattern())}"
@@ -22977,7 +23010,7 @@ class AuroInput extends BaseInput {
                   variant="flat"
                   ?onDark="${this.onDark}"
                   class="notificationBtn clearBtn"
-                  aria-label="${i18n(this.lang, 'clearInput')}"
+                  arialabel="${i18n(this.lang, 'clearInput')}"
                   @click="${this.handleClickClear}">
                   <${this.iconTag}
                     customColor

package/components/datepicker/dist/registered.js

@@ -732,7 +732,20 @@ let AuroFormValidation$1 = class AuroFormValidation {
        * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
        */
 
-      let hasValue = elem.value && elem.value.length > 0;
+      let hasValue = false;
+
+      // Check string for having a value
+      if (typeof elem.value === "string") {
+        hasValue = elem.value && elem.value.length > 0;
+      }
+
+      // Check array value types for having a value
+      if (Array.isArray(elem.value)) {
+        hasValue = Boolean(
+          elem.value.length > 0 &&
+          elem.value.some((value) => typeof value === "string" && value.length > 0)
+        );
+      }
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
       if (this.auroInputElements?.length === 2) {
@@ -20672,7 +20685,20 @@ class AuroFormValidation {
        * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
        */
 
-      let hasValue = elem.value && elem.value.length > 0;
+      let hasValue = false;
+
+      // Check string for having a value
+      if (typeof elem.value === "string") {
+        hasValue = elem.value && elem.value.length > 0;
+      }
+
+      // Check array value types for having a value
+      if (Array.isArray(elem.value)) {
+        hasValue = Boolean(
+          elem.value.length > 0 &&
+          elem.value.some((value) => typeof value === "string" && value.length > 0)
+        );
+      }
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
       if (this.auroInputElements?.length === 2) {
@@ -20786,6 +20812,9 @@ class AuroFormValidation {
  * @attr {Boolean} bordered - Applies bordered UI variant.
  * @attr {Boolean} borderless - Applies borderless UI variant.
  *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
  *
@@ -20976,13 +21005,6 @@ class BaseInput extends LitElement {
         reflect: true
       },
 
-      /**
-       * Sets the unique ID of the element.
-       */
-      id: {
-        type: String
-      },
-
       /** Exposes inputmode attribute for input.  */
       inputmode: {
         type: String,
@@ -21203,6 +21225,16 @@ class BaseInput extends LitElement {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -21234,6 +21266,7 @@ class BaseInput extends LitElement {
     if (this.tagName.toLowerCase() !== 'auro-input') {
       this.setAttribute('auro-input', true);
     }
+    this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
@@ -22899,7 +22932,7 @@ class AuroInput extends BaseInput {
             : undefined
             }
           </div>
-          <label for=${this.id} class="${classMap(labelClasses)}" part="label">
+          <label for=${this.inputId} class="${classMap(labelClasses)}" part="label">
             <slot name="label">
               ${this.label}
             </slot>
@@ -22909,7 +22942,7 @@ class AuroInput extends BaseInput {
             @input="${this.handleInput}"
             @focusin="${this.handleFocusin}"
             @blur="${this.handleBlur}"
-            id="${this.id}"
+            id="${this.inputId}"
             name="${ifDefined(this.name)}"
             type="${this.type === 'password' && this.showPassword ? 'text' : this.getInputType(this.type)}"
             pattern="${ifDefined(this.definePattern())}"
@@ -22977,7 +23010,7 @@ class AuroInput extends BaseInput {
                   variant="flat"
                   ?onDark="${this.onDark}"
                   class="notificationBtn clearBtn"
-                  aria-label="${i18n(this.lang, 'clearInput')}"
+                  arialabel="${i18n(this.lang, 'clearInput')}"
                   @click="${this.handleClickClear}">
                   <${this.iconTag}
                     customColor

package/components/form/demo/api.md

@@ -19,9 +19,8 @@ The auro-form element provides users a way to ... (it would be great if you fill
 | [formState](#formState)                |           | `FormState`                                      | {}      |                                                  |
 | [isInitialState](#isInitialState)           | readonly  | `boolean`                                        |         | Mostly internal way to determine if a form is in the initial state. |
 | [mutationEventListener](#mutationEventListener)    |           |                                                  |         |                                                  |
-| [mutationObservers](#mutationObservers)        |           | `MutationObserver[]`                             | []      |                                                  |
 | [reset](#reset)                    |           |                                                  |         |                                                  |
-| [resetElements](#resetElements)            | readonly  | `HTMLButtonElement[]`                            |         | Getter for internal _resetElements.              |
+| [resetElements](#resetElements)            | readonly  | `HTMLButtonElement[]`                            |         | Returns a collection of elements that will reset the form |
 | [sharedInputListener](#sharedInputListener)      |           |                                                  |         |                                                  |
 | [sharedValidationListener](#sharedValidationListener) |           |                                                  |         |                                                  |
 | [submit](#submit)                   |           |                                                  |         |                                                  |
@@ -36,13 +35,10 @@ The auro-form element provides users a way to ... (it would be great if you fill
 | [initializeState](#initializeState)           | `(): void`                        | Initialize (or reinitialize) the form state.     |
 | [isButtonElement](#isButtonElement)           | `(element: HTMLElement): boolean` | Check if the tag name is a button element.<br /><br />**element**: The element to check. |
 | [isFormElement](#isFormElement)             | `(element: HTMLElement): boolean` | Check if the tag name is a form element.<br /><br />**element**: The element to check (attr or tag name). |
-| [mutationEventListener](#mutationEventListener)     | `(): void`                        | Mutation observer for form elements. Slot change does not trigger unless<br />root-level elements are added/removed. This is a workaround to ensure<br />nested form elements are also observed. |
 | [onSlotChange](#onSlotChange)              | `(event: Event): void`            | Slot change event listener. This is the main entry point for the form element.<br /><br />**event**: The slot change event. |
 | [queryAuroElements](#queryAuroElements)         | `(): NodeList`                    | Construct the query strings from elements, append them together, execute, and return the NodeList. |
 | [reset](#reset)                     | `(): void`                        | Reset fires an event called `reset` - just as you would expect from a normal form. |
 | [setDisabledStateOnButtons](#setDisabledStateOnButtons) | `(): void`                        |                                                  |
-| [sharedInputListener](#sharedInputListener)       | `(event: Event): void`            | Shared input listener for all form elements.<br /><br />**event**: The event that is fired from the form element. |
-| [sharedValidationListener](#sharedValidationListener)  | `(event: Event): void`            | Shared validation listener for all form elements.<br /><br />**event**: The event that is fired from the form element. |
 | [submit](#submit)                    | `(): void`                        | Submit fires an event called `submit` - just as you would expect from a normal form. |
 
 ## Events

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

@@ -153,7 +153,10 @@ class AuroForm extends i {
     /** @type {HTMLButtonElement[]} */
     this._resetElements = [];
 
-    /** @type {MutationObserver[]} */
+    /**
+     * @private
+     * @type {MutationObserver[]}
+     */
     this.mutationObservers = [];
 
     // Bind listeners
@@ -268,7 +271,7 @@ class AuroForm extends i {
   }
 
   /**
-   * Getter for internal _resetElements.
+   * Returns a collection of elements that will reset the form
    * @returns {HTMLButtonElement[]}
    */
   get resetElements() {
@@ -498,6 +501,7 @@ class AuroForm extends i {
 
   /**
    * Shared input listener for all form elements.
+   * @private
    * @param {Event} event - The event that is fired from the form element.
    */
   sharedInputListener(event) {
@@ -530,6 +534,7 @@ class AuroForm extends i {
 
   /**
    * Shared validation listener for all form elements.
+   * @private
    * @param {Event} event - The event that is fired from the form element.
    */
   sharedValidationListener(event) {
@@ -585,6 +590,7 @@ class AuroForm extends i {
    * root-level elements are added/removed. This is a workaround to ensure
    * nested form elements are also observed.
    *
+   * @private
    * @returns {void}
    */
   mutationEventListener() {

package/components/form/demo/index.html

@@ -41,6 +41,7 @@
           Prism.highlightAll();
         });
     </script>
+    <script type="module" data-demo-script="true" src="./registerDemoDeps.js"></script>
     <script type="module" data-demo-script="true" src="./index.min.js"></script>
 
     <!-- If additional elements are needed for the demo, add them here. -->