@aurodesignsystem/auro-formkit 3.3.0-beta.2 → 3.4.0

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

@@ -591,6 +591,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
   reset(elem) {
     elem.validity = undefined;
     elem.value = undefined;
+    elem.touched = false;
 
     // Resets the second value of the datepicker in range state
     if (elem.valueEnd) {
@@ -728,7 +729,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
       } else if (elem.type === 'date' && elem.value?.length > 0) {
 
         // Guard Clause: if the value is too short
-        if (elem.value.length < elem.lengthForType) {
+        if (elem.value?.length < elem.lengthForType) {
           
           elem.validity = 'tooShort';
           elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
@@ -798,11 +799,17 @@ let AuroFormValidation$1 = class AuroFormValidation {
     this.getAuroInputs(elem);
 
     // Validate only if noValidate is not true and the input does not have focus
-    const validationShouldRun = force || (!elem.contains(document.activeElement) && elem.value !== undefined) || elem.validateOnInput;
+    let validationShouldRun =
+      force ||
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
       elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
+      validationShouldRun = false;
     } else if (validationShouldRun) {
       elem.validity = 'valid';
       elem.errorMessage = '';
@@ -823,7 +830,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required) {
+      if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -834,7 +841,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
       }
     }
 
-    if (this.auroInputElements?.length > 0) {
+    if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
@@ -913,7 +920,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
         }
       }
     } else {
-      elem.errorMessage = undefined;
+      elem.errorMessage = '';
     }
   }
 };
@@ -9146,6 +9153,7 @@ class AuroFormValidation {
   reset(elem) {
     elem.validity = undefined;
     elem.value = undefined;
+    elem.touched = false;
 
     // Resets the second value of the datepicker in range state
     if (elem.valueEnd) {
@@ -9283,7 +9291,7 @@ class AuroFormValidation {
       } else if (elem.type === 'date' && elem.value?.length > 0) {
 
         // Guard Clause: if the value is too short
-        if (elem.value.length < elem.lengthForType) {
+        if (elem.value?.length < elem.lengthForType) {
           
           elem.validity = 'tooShort';
           elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
@@ -9353,11 +9361,17 @@ class AuroFormValidation {
     this.getAuroInputs(elem);
 
     // Validate only if noValidate is not true and the input does not have focus
-    const validationShouldRun = force || (!elem.contains(document.activeElement) && elem.value !== undefined) || elem.validateOnInput;
+    let validationShouldRun =
+      force ||
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
       elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
+      validationShouldRun = false;
     } else if (validationShouldRun) {
       elem.validity = 'valid';
       elem.errorMessage = '';
@@ -9378,7 +9392,7 @@ class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required) {
+      if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -9389,7 +9403,7 @@ class AuroFormValidation {
       }
     }
 
-    if (this.auroInputElements?.length > 0) {
+    if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
@@ -9468,7 +9482,7 @@ class AuroFormValidation {
         }
       }
     } else {
-      elem.errorMessage = undefined;
+      elem.errorMessage = '';
     }
   }
 }
@@ -9519,6 +9533,7 @@ class BaseInput extends i$2 {
    * @returns {void}
    */
   privateDefaults() {
+    this.touched = false;
     this.util = new AuroInputUtilities();
     this.validation = new AuroFormValidation();
     this.inputIconName = undefined;
@@ -9679,6 +9694,13 @@ class BaseInput extends i$2 {
         type: String
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * Defines the language of an element.
        */
@@ -9880,6 +9902,18 @@ class BaseInput extends i$2 {
       validity: {
         type: String,
         reflect: true
+      },
+
+      /**
+       * Indicates whether the input is in a dirty state (has been interacted with).
+       * @type {boolean}
+       * @default false
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
       }
     };
   }
@@ -10166,15 +10200,7 @@ class BaseInput extends i$2 {
    */
   handleFocusin() {
 
-    /**
-     * The input is considered to be in it's initial state based on
-     * if this.value === undefined. The first time we interact with the
-     * input manually, by applying focusin, we need to flag the
-     * input as no longer in the initial state.
-     */
-    if (this.value === undefined) {
-      this.value = '';
-    }
+    this.touched = true;
   }
 
   /**
@@ -10240,9 +10266,9 @@ class BaseInput extends i$2 {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     }
 
     if (this.type === "date" && !this.format) {
@@ -11600,7 +11626,7 @@ class AuroInput extends BaseInput {
             pattern="${o(this.definePattern())}"
             maxlength="${o(this.maxLength ? this.maxLength : undefined)}"
             minlength="${o(this.minLength ? this.minLength : undefined)}"
-            inputMode="${o(this.inputMode ? this.inputMode : undefined)}"
+            inputMode="${o(this.inputmode ? this.inputmode : undefined)}"
             ?required="${this.required}"
             ?disabled="${this.disabled}"
             aria-describedby="${this.uniqueId}"
@@ -12659,6 +12685,13 @@ class AuroCombobox extends i$2 {
         reflect: true
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * If set, combobox will not filter menuoptions based in input.
        */
@@ -12808,14 +12841,6 @@ class AuroCombobox extends i$2 {
         reflect: true
       },
 
-      /**
-       * @private
-       */
-      isDropdownFullscreen: {
-        type: Boolean,
-        reflect: false
-      },
-
       /**
        * @private
        * specifies the currently active option
@@ -12850,6 +12875,14 @@ class AuroCombobox extends i$2 {
    * @returns {void}
    */
   handleMenuOptions() {
+    // Reset menu matchword UI
+    this.menu.updateItemsState(new Map([
+      [
+        'matchWord',
+        true
+      ]
+    ]));
+
     this.generateOptionsArray();
     this.availableOptions = [];
 
@@ -12957,8 +12990,6 @@ class AuroCombobox extends i$2 {
       return;
     }
 
-    this.isDropdownFullscreen = this.dropdown.isBibFullscreen;
-
     if (!this.dropdown.isPopoverVisible && this.input.value && this.input.value.length > 0) {
       if (this.menu.getAttribute('loading') || (this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
         if (this.menu.hasAttribute('loading') && !this.menu.hasLoadingPlaceholder) {
@@ -12985,6 +13016,13 @@ class AuroCombobox extends i$2 {
     // Listen for the dropdown to be shown or hidden
     this.dropdown.addEventListener("auroDropdown-toggled", (ev) => {
       this.dropdownOpen = ev.detail.expanded;
+
+      // wait a frame in case the bib gets hide immediately after showing because there is no value
+      setTimeout(this.transportInput);
+    });
+
+    this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
+      this.showBib();
     });
 
     // this.dropdown.addEventListener('auroDropdown-show', () => {
@@ -13003,19 +13041,10 @@ class AuroCombobox extends i$2 {
     this.hideBib = this.hideBib.bind(this);
     this.bibtemplate.addEventListener('close-click', this.hideBib);
 
-    this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
-      this.showBib();
-    });
-
     this.transportInput = this.transportInput.bind(this);
-    this.dropdown.addEventListener('auroDropdown-toggled', () => {
-      // wait a frame in case the bib gets hide immediately after showing because there is no value
-      setTimeout(this.transportInput);
-    });
 
-    this.dropdown.addEventListener('auroDropdown-strategy-change', (event) => {
+    this.dropdown.addEventListener('auroDropdown-strategy-change', () => {
       // event when the strategy(bib mode) is changed between fullscreen and floating
-      this.isDropdownFullscreen = event.detail.strategy === 'fullscreen';
       setTimeout(this.transportInput);
     });
   }
@@ -13111,20 +13140,17 @@ class AuroCombobox extends i$2 {
    * @private
    * Dispatches input's keyboard events from host
    * This allows key events from the input to be handled by the parent.
-   * @param {KeyboardEvent} event - The keyboard event.
+   * @param {Event} event - The keyboard event.
    */
-  bubbleUpInputKeyEvent(event) {
+  bubbleUpInputEvent(event) {
+    // Do not need to bubble events if the input is not in bib.
     if (event.currentTarget.parentNode !== this.dropdown) {
+      // prevents browsers to move cursor in input element.
       if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
         event.preventDefault();
       }
-
-      const ke = new KeyboardEvent(event.type, {
-        key: event.key,
-        code: event.code,
-        repeat: event.repeat,
-      });
-      this.dispatchEvent(ke);
+      const dupEvent = new event.constructor(event.type, event);
+      this.dispatchEvent(dupEvent);
     }
   }
 
@@ -13135,14 +13161,22 @@ class AuroCombobox extends i$2 {
    */
   configureInput() {
     // When input is in bibtemplate, make the event to be fired at combobox element
-    this.bubbleUpInputKeyEvent = this.bubbleUpInputKeyEvent.bind(this);
-    this.input.addEventListener('keydown', this.bubbleUpInputKeyEvent);
-    this.input.addEventListener('keyup', this.bubbleUpInputKeyEvent);
-    this.input.addEventListener('input', this.bubbleUpInputKeyEvent);
+    this.bubbleUpInputEvent = this.bubbleUpInputEvent.bind(this);
+
+    const events = [
+      'input',
+      'keydown',
+      'keyup'
+    ];
+    events.forEach((eventType) => {
+      this.input.addEventListener(eventType, this.bubbleUpInputEvent);
+    });
 
     this.addEventListener('keyup', (evt) => {
       if (evt.key.length === 1 || evt.key === 'Backspace' || evt.key === 'Delete') {
-        this.showBib();
+        if (!this.dropdown.isPopoverVisible) {
+          this.showBib();
+        }
       }
     });
 
@@ -13203,8 +13237,8 @@ class AuroCombobox extends i$2 {
     const inputHelpText = this.input.shadowRoot.querySelector('auro-helptext, [auro-helptext');
     const inputAlertIcon = this.input.shadowRoot.querySelector(".alertNotification");
 
-    if (this.dropdown.isPopoverVisible && this.isDropdownFullscreen) {
-      if (this.input.parentNode !== this.bibtemplate) {
+    if (this.dropdown.isPopoverVisible && this.dropdown.isBibFullscreen) {
+      if (this.input.parentNode === this.dropdown) {
         // keep the trigger size the same even after input gets removed
         const parentSize = window.getComputedStyle(this.dropdown.trigger);
         this.dropdown.trigger.style.height = parentSize.height;
@@ -13290,7 +13324,7 @@ class AuroCombobox extends i$2 {
     }
 
     // Force dropdown bib to hide if input value has no matching suggestions
-    if ((!this.availableOptions || this.availableOptions.length === 0) && !this.isDropdownFullscreen) {
+    if ((!this.availableOptions || this.availableOptions.length === 0) && !this.dropdown.isBibFullscreen) {
       this.hideBib();
     }
   }
@@ -13313,7 +13347,7 @@ class AuroCombobox extends i$2 {
       if (evt.key === 'Tab') {
         this.hideBib();
 
-        if (this.dropdown.isPopoverVisible && this.isDropdownFullscreen) {
+        if (this.dropdown.isPopoverVisible && this.dropdown.isBibFullscreen) {
           // if bib is open in fullscreen, just close the bib and do not move the focus to the next focasable element
           evt.preventDefault();
         }
@@ -13538,6 +13572,7 @@ class AuroCombobox extends i$2 {
             setCustomValidityCustomError="${this.setCustomValidityCustomError}"
             .autocomplete="${this.autocomplete}"
             .type="${this.type}"
+            inputmode="${o(this.inputmode)}"
             @input="${this.handleInputValueChange}">
           </${this.inputTag}>
 

package/components/combobox/demo/readme.md

@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.8/auro-combobox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-combobox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

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

@@ -62,6 +62,12 @@ export class AuroCombobox extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        /** Exposes inputmode attribute for input.  */
+        inputmode: {
+            type: StringConstructor;
+            attribute: boolean;
+            reflect: boolean;
+        };
         /**
          * If set, combobox will not filter menuoptions based in input.
          */
@@ -194,13 +200,6 @@ export class AuroCombobox extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
-        /**
-         * @private
-         */
-        isDropdownFullscreen: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
         /**
          * @private
          * specifies the currently active option
@@ -279,7 +278,6 @@ export class AuroCombobox extends LitElement {
      * @returns {void}
      */
     private showBib;
-    isDropdownFullscreen: any;
     /**
      * Binds all behavior needed to the dropdown after rendering.
      * @private
@@ -307,9 +305,9 @@ export class AuroCombobox extends LitElement {
      * @private
      * Dispatches input's keyboard events from host
      * This allows key events from the input to be handled by the parent.
-     * @param {KeyboardEvent} event - The keyboard event.
+     * @param {Event} event - The keyboard event.
      */
-    private bubbleUpInputKeyEvent;
+    private bubbleUpInputEvent;
     /**
      * Binds all behavior needed to the input after rendering.
      * @private