@aurodesignsystem/auro-formkit 5.1.0-rc-1115.1 → 5.1.0-rc-1134.1

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

@@ -28023,6 +28023,7 @@ class AuroDatePicker extends AuroElement$1 {
 
     this.touched = false;
     this.disabled = false;
+    this.dvInputOnly = false;
     this.required = false;
     this.onDark = false;
     this.range = false;
@@ -28065,6 +28066,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
      */
@@ -28183,6 +28204,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.
        */
@@ -28204,6 +28233,14 @@ class AuroDatePicker extends AuroElement$1 {
         reflect: false,
       },
 
+      /**
+       * @private
+       */
+      hasAllValues: {
+        type: Boolean,
+        reflect: false
+      },
+
       /**
        * Specifies the date format. The default is `mm/dd/yyyy`.
        */
@@ -28493,6 +28530,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
@@ -28923,11 +29042,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() {
@@ -29233,21 +29354,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,
     };
 
@@ -29265,6 +29388,13 @@ class AuroDatePicker extends AuroElement$1 {
           <div class="${e$3(inputSectionClassMap)}" part="inputSection">
             ${this.renderHtmlInputs()}
           </div>
+          <div class="${e$3(this.commonDisplayValueWrapperClasses)}">
+            <slot name="displayValue" @slotchange=${this.checkDisplayValueSlotChange}>
+              <span>
+                ${this.formatShortDate(this.value)}${this.range ? u$3`–${this.formatShortDate(this.valueEnd)}` : undefined}
+              </span>
+            </slot>
+          </div>
         </div>
         <div class="accents right ${e$3(accentsClassMap)}">
           ${this.hasError

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

@@ -64,6 +64,13 @@ export class AuroDatePicker extends AuroElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked.
+         */
+        dvInputOnly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         /**
          * When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
          */
@@ -82,6 +89,13 @@ export class AuroDatePicker extends AuroElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * @private
+         */
+        hasAllValues: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         /**
          * Specifies the date format. The default is `mm/dd/yyyy`.
          */
@@ -308,6 +322,7 @@ export class AuroDatePicker extends AuroElement {
     formattedStartDate: boolean;
     touched: boolean;
     disabled: boolean;
+    dvInputOnly: boolean;
     required: boolean;
     onDark: boolean;
     range: boolean;
@@ -332,6 +347,22 @@ export class AuroDatePicker extends AuroElement {
      * @private
      */
     private dateSlotContent;
+    /**
+     * @private
+     */
+    private hasDisplayValueContent;
+    /**
+     * @private
+     */
+    private hasFocus;
+    /**
+     * @private
+     */
+    private hasValue;
+    /**
+     * @private
+     */
+    private hasAllValues;
     /**
      * @private
      */
@@ -379,6 +410,35 @@ export class AuroDatePicker extends AuroElement {
      * @returns {string[]}
      */
     get values(): string[];
+    /**
+     * Whether the label is being hidden currently based on state.
+     * @returns {boolean} - Returns true if the label is hidden.
+     * @private
+     */
+    private get labelHidden();
+    /**
+     * Whether the displayValue container is being hidden currently based on state.
+     * @returns {boolean} - Returns true if the label is hidden.
+     * @private
+     */
+    private get dvHidden();
+    /**
+     * Returns the input font class based on layout and visibility state.
+     * @private
+     * @returns {string} - The font class for the input.
+     */
+    private get displayValueFontClass();
+    get commonDisplayValueWrapperClasses(): {
+        [x: string]: boolean;
+        displayValueWrapper: boolean;
+        util_displayHiddenVisually: boolean;
+    };
+    /**
+     * Function to determine if there is any displayValue content to render.
+     * @private
+     * @returns {void}
+     */
+    private checkDisplayValueSlotChange;
     /**
      * Force the calendar view to the focus date when it changes.
      * @private
@@ -397,7 +457,6 @@ export class AuroDatePicker extends AuroElement {
      * @returns {void}
      */
     focus(focusInput?: string): void;
-    hasFocus: boolean;
     /**
      * Converts valid time number to format used by wc-date-range API.
      * @private
@@ -533,7 +592,6 @@ export class AuroDatePicker extends AuroElement {
      * @private
      */
     private setHasValue;
-    hasValue: boolean;
     get hasError(): boolean;
     updated(changedProperties: any): void;
     monthFirst: boolean;

package/components/datepicker/dist/index.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