@aurodesignsystem/auro-formkit 5.3.1 → 5.5.0

package/components/datepicker/dist/registered.js

@@ -27948,6 +27948,7 @@ class AuroDatePicker extends AuroElement$1 {
 
     this.touched = false;
     this.disabled = false;
+    this.dvInputOnly = false;
     this.required = false;
     this.onDark = false;
     this.range = false;
@@ -27990,6 +27991,26 @@ class AuroDatePicker extends AuroElement$1 {
      */
     this.dateSlotContent = [];
 
+    /**
+     * @private
+     */
+    this.hasDisplayValueContent = true;
+
+    /**
+     * @private
+     */
+    this.hasFocus = false;
+
+    /**
+     * @private
+     */
+    this.hasValue = false;
+
+    /**
+     * @private
+     */
+    this.hasAllValues = false;
+
     /**
      * @private
      */
@@ -28108,6 +28129,14 @@ class AuroDatePicker extends AuroElement$1 {
         reflect: true
       },
 
+      /**
+       * If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked.
+       */
+      dvInputOnly: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
        */
@@ -28129,6 +28158,14 @@ class AuroDatePicker extends AuroElement$1 {
         reflect: false,
       },
 
+      /**
+       * @private
+       */
+      hasAllValues: {
+        type: Boolean,
+        reflect: false
+      },
+
       /**
        * Specifies the date format. The default is `mm/dd/yyyy`.
        */
@@ -28418,6 +28455,88 @@ class AuroDatePicker extends AuroElement$1 {
     return [];
   }
 
+  /**
+   * Whether the label is being hidden currently based on state.
+   * @returns {boolean} - Returns true if the label is hidden.
+   * @private
+   */
+  get labelHidden() {
+    return this.hasDisplayValueContent && this.dvInputOnly && !this.hasFocus && this.hasAllValues;
+  }
+
+  /**
+   * Whether the displayValue container is being hidden currently based on state.
+   * @returns {boolean} - Returns true if the label is hidden.
+   * @private
+   */
+  get dvHidden() {
+    return !this.hasDisplayValueContent || this.hasFocus || !this.hasAllValues;
+  }
+
+  /**
+   * Returns the input font class based on layout and visibility state.
+   * @private
+   * @returns {string} - The font class for the input.
+   */
+  get displayValueFontClass() {
+    if (this.layout.startsWith('emphasized')) {
+      let typeSize = 'accent-xl';
+
+      if (this.hasDisplayValueContent) {
+        if (!this.hasValue) {
+          typeSize = 'body-sm';
+        }
+      } else if (this.noFocusOrValue) {
+        typeSize = 'body-sm';
+      }
+
+      return typeSize;
+    }
+
+    if (this.layout === 'snowflake') {
+      // same for both hidden and visible
+      return 'body-lg';
+    }
+
+    // edge case for enabling visual overrides in datepicker
+    if (this.layout === 'classic' && this.shape === 'snowflake') {
+      return 'body-lg';
+    }
+
+    // classic layout (default) - same for both hidden and visible
+    return 'body-default';
+  }
+
+  get commonDisplayValueWrapperClasses() {
+    return {
+      'displayValueWrapper': true,
+      'util_displayHiddenVisually': this.dvHidden,
+      [this.displayValueFontClass]: true,
+    };
+  }
+
+  /**
+   * Function to determine if there is any displayValue content to render.
+   * @private
+   * @returns {void}
+   */
+  checkDisplayValueSlotChange() {
+    let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
+
+    // Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
+    if (nodes && nodes[0] && nodes[0].tagName === 'SLOT') {
+      nodes = nodes[0].assignedNodes();
+    }
+
+    let hasContent = false;
+
+    if (nodes.length > 0) {
+      hasContent = true;
+    }
+
+    this.hasDisplayValueContent = hasContent;
+  }
+
   /**
    * Force the calendar view to the focus date when it changes.
    * @private
@@ -28848,11 +28967,13 @@ class AuroDatePicker extends AuroElement$1 {
   setHasValue() {
     if (!this.range) {
       this.hasValue = this.value && this.value.length > 0;
+      this.hasAllValues = this.hasValue;
       return;
     }
 
     // eslint-disable-next-line no-extra-parens
     this.hasValue = (this.value && this.value.length > 0) || (this.valueEnd && this.valueEnd.length > 0);
+    this.hasAllValues = (this.value && this.value.length > 0) && (this.valueEnd && this.valueEnd.length > 0); // eslint-disable-line no-extra-parens
   }
 
   get hasError() {
@@ -29158,21 +29279,23 @@ class AuroDatePicker extends AuroElement$1 {
    */
   renderSnowflakeLayout() {
     const accentsClassMap = {
-      error: this.hasError
+      'error': this.hasError
     };
 
     const inputSectionClassMap = {
-      inputSection: true,
+      'inputSection': true,
 
-      hasValue: this.hasValue,
-      hasFocus: this.hasFocus,
+      'hasValue': this.hasValue,
+      'hasFocus': this.hasFocus,
+      'util_displayHiddenVisually': !this.dvHidden
     };
 
     const labelClassMap = {
-      mainLabel: true,
+      'mainLabel': true,
 
-      hasValue: this.hasValue,
-      hasFocus: this.hasFocus,
+      'hasValue': this.hasValue,
+      'hasFocus': this.hasFocus,
+      'util_displayHiddenVisually': this.labelHidden,
       [this.hasFocus || this.hasValue ? 'body-xs' : 'body-lg']: true,
     };
 
@@ -29190,6 +29313,13 @@ class AuroDatePicker extends AuroElement$1 {
           <div class="${classMap(inputSectionClassMap)}" part="inputSection">
             ${this.renderHtmlInputs()}
           </div>
+          <div class="${classMap(this.commonDisplayValueWrapperClasses)}">
+            <slot name="displayValue" @slotchange=${this.checkDisplayValueSlotChange}>
+              <span>
+                ${this.formatShortDate(this.value)}${this.range ? html$1`–${this.formatShortDate(this.valueEnd)}` : undefined}
+              </span>
+            </slot>
+          </div>
         </div>
         <div class="accents right ${classMap(accentsClassMap)}">
           ${this.hasError

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

@@ -959,9 +959,8 @@ class AuroMenu extends AuroElement$1 {
   /**
    * Handles slot change events.
    * @private
-   * @param {Event} evt - Event object from the browser.
    */
-  handleSlotChange(evt) {
+  handleSlotChange() {
     if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
       this.rootMenu = false;
     }
@@ -976,15 +975,6 @@ class AuroMenu extends AuroElement$1 {
         ]
       ]));
     }
-
-    if (this.value) {
-      this.items.forEach((opt) => {
-        if (opt.value === this.value || (this.multiSelect && this.formattedValue.includes(opt.value))) {
-          this.handleSelectState(opt);
-          this.notifySelectionChange(evt.type);
-        }
-      });
-    }
   }
 
   /**

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

@@ -919,9 +919,8 @@ class AuroMenu extends AuroElement$1 {
   /**
    * Handles slot change events.
    * @private
-   * @param {Event} evt - Event object from the browser.
    */
-  handleSlotChange(evt) {
+  handleSlotChange() {
     if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
       this.rootMenu = false;
     }
@@ -936,15 +935,6 @@ class AuroMenu extends AuroElement$1 {
         ]
       ]));
     }
-
-    if (this.value) {
-      this.items.forEach((opt) => {
-        if (opt.value === this.value || (this.multiSelect && this.formattedValue.includes(opt.value))) {
-          this.handleSelectState(opt);
-          this.notifySelectionChange(evt.type);
-        }
-      });
-    }
   }
 
   /**

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

@@ -118,7 +118,6 @@ export class AuroMenu extends AuroElement {
     /**
      * Handles slot change events.
      * @private
-     * @param {Event} evt - Event object from the browser.
      */
     private handleSlotChange;
     /**

package/components/menu/dist/index.js

@@ -926,9 +926,8 @@ class AuroMenu extends AuroElement$1 {
   /**
    * Handles slot change events.
    * @private
-   * @param {Event} evt - Event object from the browser.
    */
-  handleSlotChange(evt) {
+  handleSlotChange() {
     if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
       this.rootMenu = false;
     }
@@ -943,15 +942,6 @@ class AuroMenu extends AuroElement$1 {
         ]
       ]));
     }
-
-    if (this.value) {
-      this.items.forEach((opt) => {
-        if (opt.value === this.value || (this.multiSelect && this.formattedValue.includes(opt.value))) {
-          this.handleSelectState(opt);
-          this.notifySelectionChange(evt.type);
-        }
-      });
-    }
   }
 
   /**

package/components/menu/dist/registered.js

@@ -885,9 +885,8 @@ class AuroMenu extends AuroElement$1 {
   /**
    * Handles slot change events.
    * @private
-   * @param {Event} evt - Event object from the browser.
    */
-  handleSlotChange(evt) {
+  handleSlotChange() {
     if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
       this.rootMenu = false;
     }
@@ -902,15 +901,6 @@ class AuroMenu extends AuroElement$1 {
         ]
       ]));
     }
-
-    if (this.value) {
-      this.items.forEach((opt) => {
-        if (opt.value === this.value || (this.multiSelect && this.formattedValue.includes(opt.value))) {
-          this.handleSelectState(opt);
-          this.notifySelectionChange(evt.type);
-        }
-      });
-    }
   }
 
   /**

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

@@ -9931,9 +9931,8 @@ class AuroMenu extends AuroElement$4 {
   /**
    * Handles slot change events.
    * @private
-   * @param {Event} evt - Event object from the browser.
    */
-  handleSlotChange(evt) {
+  handleSlotChange() {
     if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
       this.rootMenu = false;
     }
@@ -9948,15 +9947,6 @@ class AuroMenu extends AuroElement$4 {
         ]
       ]));
     }
-
-    if (this.value) {
-      this.items.forEach((opt) => {
-        if (opt.value === this.value || (this.multiSelect && this.formattedValue.includes(opt.value))) {
-          this.handleSelectState(opt);
-          this.notifySelectionChange(evt.type);
-        }
-      });
-    }
   }
 
   /**

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

@@ -9839,9 +9839,8 @@ class AuroMenu extends AuroElement$4 {
   /**
    * Handles slot change events.
    * @private
-   * @param {Event} evt - Event object from the browser.
    */
-  handleSlotChange(evt) {
+  handleSlotChange() {
     if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
       this.rootMenu = false;
     }
@@ -9856,15 +9855,6 @@ class AuroMenu extends AuroElement$4 {
         ]
       ]));
     }
-
-    if (this.value) {
-      this.items.forEach((opt) => {
-        if (opt.value === this.value || (this.multiSelect && this.formattedValue.includes(opt.value))) {
-          this.handleSelectState(opt);
-          this.notifySelectionChange(evt.type);
-        }
-      });
-    }
   }
 
   /**

package/package.json

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