@aurodesignsystem-dev/auro-formkit 0.0.0-pr784.0 → 0.0.0-pr785.1

package/components/counter/dist/registered.js

@@ -2234,24 +2234,13 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Check if validation should run
+    // Validate only if noValidate is not true and the input does not have focus
     let validationShouldRun =
-
-      // If the validation was forced
       force ||
-
-      // If the validation should run on input
-      elem.validateOnInput ||
-
-      // State-based checks
-      (
-        // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
-
-        // And element has been touched or is untouched but has a value
-        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
-      );
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -4712,7 +4701,7 @@ class AuroFloatingUI {
    */
   mirrorSize() {
     // mirror the boxsize from bibSizer
-    if (this.element.bibSizer) {
+    if (this.element.bibSizer && this.element.matchWidth) {
       const sizerStyle = window.getComputedStyle(this.element.bibSizer);
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
       if (sizerStyle.width !== '0px') {
@@ -4924,7 +4913,7 @@ class AuroFloatingUI {
     if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
       return;
     }
-    
+
     // if fullscreen bib is in fullscreen mode, do not close
     if (this.element.bib.hasAttribute('isfullscreen')) {
       return;
@@ -5112,7 +5101,7 @@ class AuroFloatingUI {
 
             event.preventDefault();
             this.handleClick();
-          } 
+          }
           break;
         case 'mouseenter':
           if (this.element.hoverToggle) {
@@ -6509,6 +6498,9 @@ class AuroDropdown extends AuroElement$3 {
 
     this.parentBorder = false;
 
+    /** @private */
+    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
+
     this.privateDefaults();
   }
 
@@ -6942,12 +6934,14 @@ class AuroDropdown extends AuroElement$3 {
     if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
       this.handleTriggerContentSlotChange();
     }
+  }
 
-    if (changedProperties.has('isPopoverVisible')) {
-      this.updateFocusTrap();
-      if (!this.isPopoverVisible && this.hasFocus) {
-        this.trigger.focus();
-      }
+  handleDropdownToggle(event) {
+    this.updateFocusTrap();
+    this.isPopoverVisible = event.detail.expanded;
+    const eventType = event.detail.eventType || "unknown";
+    if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
+      this.trigger.focus();
     }
   }
 
@@ -6955,6 +6949,7 @@ class AuroDropdown extends AuroElement$3 {
 
     // Configure the floater to, this will generate the ID for the bib
     this.floater.configure(this, 'auroDropdown');
+    this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
 
     /**
      * @description Let subscribers know that the dropdown ID ha been generated and added.

package/components/datepicker/demo/api.md

@@ -50,13 +50,12 @@
 
 | Method                        | Type                                   | Description                                      |
 |-------------------------------|----------------------------------------|--------------------------------------------------|
-| [clear](#clear)                       | `(): void`                             | Clears the current value(s) of the datepicker.   |
 | [focus](#focus)                       | `(focusInput: string): void`           | Focuses the datepicker trigger input.<br /><br />**focusInput**: Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input. |
+| [formatShortDate](#formatShortDate)             | `(date: any): string`                  | Simple formatter that ONLY WORKS FOR US DATES.<br />Returns formatted date like Apr 21 or Dec 25.<br /><br />**date**: undefined |
 | [renderHtmlActionClear](#renderHtmlActionClear)       | `(): TemplateResult`                   |                                                  |
 | [renderHtmlIconCalendar](#renderHtmlIconCalendar)      | `(): TemplateResult`                   |                                                  |
 | [renderHtmlIconError](#renderHtmlIconError)         | `(): TemplateResult`                   |                                                  |
 | [renderHtmlInputs](#renderHtmlInputs)            | `(): TemplateResult`                   |                                                  |
-| [renderLayoutFromAttributes](#renderLayoutFromAttributes)  | `(): TemplateResult`                   |                                                  |
 | [reset](#reset)                       | `(): void`                             | Resets component to initial state.               |
 | [resetLayoutClasses](#resetLayoutClasses)          | `(): void`                             |                                                  |
 | [resetShapeClasses](#resetShapeClasses)           | `(): void`                             |                                                  |

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

@@ -989,24 +989,13 @@ let AuroFormValidation$1 = class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Check if validation should run
+    // Validate only if noValidate is not true and the input does not have focus
     let validationShouldRun =
-
-      // If the validation was forced
       force ||
-
-      // If the validation should run on input
-      elem.validateOnInput ||
-
-      // State-based checks
-      (
-        // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
-
-        // And element has been touched or is untouched but has a value
-        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
-      );
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -1566,9 +1555,9 @@ var shapeSizeCss$2 = i$2`.wrapper{overflow:hidden}.shape-classic-xl,.shape-class
 
 var classicLayoutColor = i$2``;
 
-var snowflakeStyle = i$2`.accents{flex-grow:0;flex-shrink:0;display:flex;align-items:center;justify-content:center}.accents.left{padding-right:var(--ds-size-100, 0.5rem)}.accents.right{width:var(--ds-size-400, 2rem)}.mainContent{height:100%;max-height:100%;flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center}.inputSection{display:flex;flex-direction:row;align-items:center;width:100%;max-width:250px;margin:0 auto}.inputSection:not(:is(.disabled,.hasFocus,.hasValue)) .inputDivider{display:none}.inputContainer{display:flex;flex-direction:row;align-items:center;width:100%}.inputContainer:first-of-type{justify-content:flex-end}.inputContainer:last-of-type{justify-content:flex-start}:host([disabled]) .inputSection{display:none}:host([layout*=snowflake]) [auro-input]{flex:1;text-align:center}:host([layout*=snowflake]) [auro-input]::part(label),:host([layout*=snowflake]) [auro-input]::part(accent-left),:host([layout*=snowflake]) [auro-input]::part(accent-right){display:none}:host([layout*=snowflake]) [auro-input]::part(input){padding-bottom:unset;text-align:center;font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);transition:unset}:host([layout*=snowflake]) [auro-input]::part(wrapper){min-height:unset;max-height:unset;box-shadow:unset}:host([layout*=snowflake]) [auro-input]::part(wrapper) .mainContent{padding-bottom:unset}:host([layout*=snowflake]) [auro-input]::part(inputHelpText){display:none}:host([layout*=snowflake]) [auro-dropdown]::part(trigger){width:100%}:host([layout*=snowflake]) .dpTriggerContent{width:100%}:host([layout*=snowflake]) .wrapper{height:60px;width:calc(100% - 48px);display:flex;flex-direction:row;justify-content:space-between;padding-left:24px;padding-right:24px}:host([layout*=snowflake]) label{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);font-weight:450;letter-spacing:0}:host([layout*=snowflake]) label.hasFocus,:host([layout*=snowflake]) label.hasValue{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-height-xs, 1rem)}:host([layout*=snowflake]) .inputDivider{height:18px;margin:4px 12px;width:2px}`;
+var snowflakeStyle = i$2`.accents{flex-grow:0;flex-shrink:0;display:flex;align-items:center;justify-content:center}.accents.left{padding-right:var(--ds-size-100, 0.5rem)}.accents.right{width:var(--ds-size-400, 2rem)}.mainContent{height:100%;max-height:100%;flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center}.inputSection{display:flex;flex-direction:row;align-items:center;width:100%;max-width:250px;margin:0 auto}.inputSection:not(:is(.disabled,.hasFocus,.hasValue)) .inputDivider{display:none}.inputContainer{display:flex;flex-direction:row;align-items:center;width:100%}.inputContainer:first-of-type{justify-content:flex-end}.inputContainer:last-of-type{justify-content:flex-start}:host([disabled]) .inputSection{display:none}:host([layout*=snowflake]) [auro-input]{flex:1;text-align:center}:host([layout*=snowflake]) [auro-input]::part(label),:host([layout*=snowflake]) [auro-input]::part(accent-left),:host([layout*=snowflake]) [auro-input]::part(accent-right){display:none}:host([layout*=snowflake]) [auro-input]::part(input){padding-bottom:unset;text-align:center;font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);transition:unset}:host([layout*=snowflake]) [auro-input]::part(wrapper){min-height:unset;max-height:unset;box-shadow:unset}:host([layout*=snowflake]) [auro-input]::part(wrapper) .mainContent{padding-bottom:unset}:host([layout*=snowflake]) [auro-input]::part(inputHelpText){display:none}:host([layout*=snowflake]) [auro-input]::part(displayValue){justify-content:center;font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem)}:host([layout*=snowflake]) [auro-dropdown]::part(trigger){width:100%}:host([layout*=snowflake]) .dpTriggerContent{width:100%}:host([layout*=snowflake]) .wrapper{height:60px;width:calc(100% - 48px);display:flex;flex-direction:row;justify-content:space-between;padding-left:24px;padding-right:24px}:host([layout*=snowflake]) label{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);font-weight:450;letter-spacing:0}:host([layout*=snowflake]) label.hasFocus,:host([layout*=snowflake]) label.hasValue{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-height-xs, 1rem)}:host([layout*=snowflake]) .inputDivider{height:18px;margin:4px 12px;width:2px}`;
 
-var snowflakeColors = i$2`:host([layout=snowflake])[disabled] .mainContent label ::slotted(*){color:var(--ds-auro-icon-color)}:host([layout=snowflake]) label{color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([layout=snowflake]) .inputDivider{background-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([layout=snowflake]) .error{color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host([layout=snowflake]) [auro-input]::part(input)::placeholder{color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([layout=snowflake]) [auro-dropdown]:not(:is([error],.hasFocus))::part(wrapper){--ds-auro-dropdown-trigger-border-color: transparent}`;
+var snowflakeColors = i$2`:host([layout=snowflake])[disabled] .mainContent label ::slotted(*){color:var(--ds-auro-icon-color)}:host([layout=snowflake]) label{color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([layout=snowflake]) .inputDivider{background-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([layout=snowflake]) .error{color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host([layout=snowflake]) [auro-input]::part(input)::placeholder{color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([layout=snowflake]) [auro-input]::part(displayValue){background-color:inherit}:host([layout=snowflake]) [auro-dropdown]:not(:is([error],.hasFocus))::part(wrapper){--ds-auro-dropdown-trigger-border-color: transparent}`;
 
 var styleCss$d = i$2`:host{--calendar-width: 336px;--mobile-footer-height: 150px;--mobile-header-height: 68px;height:100vh;height:100dvh}.calendars{display:flex;flex-direction:row}.calendarNavButtons{position:absolute;top:var(--ds-size-200, 1rem);right:var(--ds-size-50, 0.25rem);left:var(--ds-size-50, 0.25rem)}.calendarNavBtn{display:flex;width:var(--ds-size-500, 2.5rem);height:var(--ds-size-500, 2.5rem);align-items:center;justify-content:center;border-width:1px;border-style:solid;border-radius:50%;cursor:pointer}.prevMonth,.nextMonth{position:absolute;top:0}.prevMonth{left:0}.nextMonth{right:0}.headerActions{padding:0 var(--ds-size-200, 1rem)}.mobileHeader{width:100%;height:var(--mobile-header-height);z-index:1;align-items:center;flex-direction:row}.headerDateFrom{display:flex;height:var(--mobile-header-height);flex:1;flex-direction:column;justify-content:center;padding:0 var(--ds-size-150, 0.75rem) 0 var(--ds-size-200, 1rem)}.mobileDateLabel{font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}.headerDateTo{height:calc(var(--mobile-header-height) - var(--ds-size-300, 1.5rem));padding:var(--ds-size-300, 1.5rem) var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host(:not([noRange])) .headerDateTo{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center}:host(:not([noRange])) .headerDateTo:after{position:absolute;top:calc(50% + 10px);left:0;display:block;width:1px;height:var(--ds-size-300, 1.5rem);content:"";transform:translateY(-50%)}.mobileFooter{display:none;width:100%;align-items:flex-end;flex-direction:column;justify-content:flex-end}.mobileFooterActions{position:relative;bottom:0;left:50%;display:none;width:calc(100% - var(--ds-size-200, 1rem)*2);align-items:flex-end;flex-direction:column;justify-content:flex-end;padding:var(--ds-size-150) calc(var(--ds-size-200, 1rem));transform:translateX(-50%)}.mobileFooterActions auro-button{width:100%}:host([isfullscreen]){width:100%;max-height:100dvh;overflow:hidden}:host([isfullscreen]) .prevMonth,:host([isfullscreen]) .nextMonth{display:none}:host([isfullscreen]) .mobileHeader,:host([isfullscreen]) .mobileFooter,:host([isfullscreen]) .mobileFooterActions{display:flex}:host([isfullscreen]) .calendarWrapper{display:flex;flex-direction:column}:host([isfullscreen]) .calendars{display:flex;flex-direction:column;flex:1;align-items:center;width:100%;overscroll-behavior:contain}:host([isfullscreen]) .calendars:after{display:block;width:100%;height:var(--mobile-footer-height);content:""}`;
 
@@ -16116,7 +16105,7 @@ class AuroFloatingUI {
    */
   mirrorSize() {
     // mirror the boxsize from bibSizer
-    if (this.element.bibSizer) {
+    if (this.element.bibSizer && this.element.matchWidth) {
       const sizerStyle = window.getComputedStyle(this.element.bibSizer);
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
       if (sizerStyle.width !== '0px') {
@@ -16328,7 +16317,7 @@ class AuroFloatingUI {
     if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
       return;
     }
-    
+
     // if fullscreen bib is in fullscreen mode, do not close
     if (this.element.bib.hasAttribute('isfullscreen')) {
       return;
@@ -16516,7 +16505,7 @@ class AuroFloatingUI {
 
             event.preventDefault();
             this.handleClick();
-          } 
+          }
           break;
         case 'mouseenter':
           if (this.element.hoverToggle) {
@@ -17913,6 +17902,9 @@ class AuroDropdown extends AuroElement$4 {
 
     this.parentBorder = false;
 
+    /** @private */
+    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
+
     this.privateDefaults();
   }
 
@@ -18346,12 +18338,14 @@ class AuroDropdown extends AuroElement$4 {
     if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
       this.handleTriggerContentSlotChange();
     }
+  }
 
-    if (changedProperties.has('isPopoverVisible')) {
-      this.updateFocusTrap();
-      if (!this.isPopoverVisible && this.hasFocus) {
-        this.trigger.focus();
-      }
+  handleDropdownToggle(event) {
+    this.updateFocusTrap();
+    this.isPopoverVisible = event.detail.expanded;
+    const eventType = event.detail.eventType || "unknown";
+    if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
+      this.trigger.focus();
     }
   }
 
@@ -18359,6 +18353,7 @@ class AuroDropdown extends AuroElement$4 {
 
     // Configure the floater to, this will generate the ID for the bib
     this.floater.configure(this, 'auroDropdown');
+    this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
 
     /**
      * @description Let subscribers know that the dropdown ID ha been generated and added.
@@ -23518,24 +23513,13 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Check if validation should run
+    // Validate only if noValidate is not true and the input does not have focus
     let validationShouldRun =
-
-      // If the validation was forced
       force ||
-
-      // If the validation should run on input
-      elem.validateOnInput ||
-
-      // State-based checks
-      (
-        // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
-
-        // And element has been touched or is untouched but has a value
-        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
-      );
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -24486,9 +24470,9 @@ class BaseInput extends AuroElement$2 {
     this.inputElement.value = "";
     this.value = "";
     this.labelElement.classList.remove('inputElement-label--sticky');
-    this.notifyValueChanged();
     this.focus();
     this.validation.validate(this);
+    this.notifyValueChanged();
   }
 
   /**
@@ -24583,20 +24567,13 @@ class BaseInput extends AuroElement$2 {
   }
 
   /**
-   * Resets component to initial state, including resetting the touched state and validity.
+   * Resets component to initial state.
    * @returns {void}
    */
   reset() {
     this.validation.reset(this);
   }
 
-  /**
-   * Clears the input value
-   */
-  clear() {
-    this.value = undefined;
-  }
-
   /**
    * Sets configuration data used elsewhere based on the `type` attribute.
    * @private
@@ -28002,6 +27979,15 @@ class AuroDatePicker extends AuroElement$1 {
     this.layout = 'classic';
     this.shape = 'classic';
     this.size = 'lg';
+
+    /**
+     * @private
+     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
+     */
+    this.constructor.shadowRootOptions = {
+      ...i.shadowRootOptions,
+      delegatesFocus: true,
+    };
   }
 
   // This function is to define props used within the scope of this component
@@ -28711,7 +28697,7 @@ class AuroDatePicker extends AuroElement$1 {
    */
   resetValues() {
     this.inputList.forEach((input) => {
-      input.clear();
+      input.reset();
     });
   }
 
@@ -28721,15 +28707,8 @@ class AuroDatePicker extends AuroElement$1 {
    */
   reset() {
     this.resetValues();
-    this.validation.reset(this);
-  }
 
-  /**
-   * Clears the current value(s) of the datepicker.
-   * @returns {void}
-   */
-  clear() {
-    this.resetValues();
+    this.validation.reset(this);
   }
 
   /**
@@ -28746,6 +28725,7 @@ class AuroDatePicker extends AuroElement$1 {
     }
 
     this.hasFocus = true;
+    this.dropdown.show();
 
     // shadowroot active element is null if we focus the datepicker itself
     if (this.shadowRoot.activeElement === null) {
@@ -29069,6 +29049,9 @@ class AuroDatePicker extends AuroElement$1 {
     `;
   }
 
+  /**
+   * @private
+   */
   renderLayoutFromAttributes() {
     switch (this.layout) {
       case 'snowflake':
@@ -29081,6 +29064,43 @@ class AuroDatePicker extends AuroElement$1 {
     }
   }
 
+  // eslint-disable-next-line no-warning-comments
+  // TODO: move this to date utility when time allows :(
+  /**
+   * Simple formatter that ONLY WORKS FOR US DATES.
+   * Returns formatted date like Apr 21 or Dec 25.
+   * @param date
+   * @return {string}
+   */
+  formatShortDate(date) {
+    // should render like Apr 21
+    const options = {
+      month: 'short',
+      day: '2-digit'
+    };
+
+    return new Date(date).toLocaleDateString('en-US', options).replace(',', '');
+  }
+
+  /**
+   * Format and render the provided date value.
+   * @private
+   * @param dateValue
+   * @return {TemplateResult}
+   */
+  renderDisplayTextDate(dateValue) {
+    return u$3`
+        <div>
+          <div class="displayValueText">
+            ${dateValue && this.util.validDateStr(dateValue, this.format)
+              ? this.formatShortDate(dateValue)
+              : undefined
+            }
+          </div>
+        </div>
+    `;
+  }
+
   renderHtmlInputs() {
     const inputClasses = {
       "util_displayHiddenVisually": !this.hasValue && !this.hasFocus
@@ -29096,7 +29116,7 @@ class AuroDatePicker extends AuroElement$1 {
           .max="${this.maxDate}"
           .min="${this.minDate}"
           id="${this.generateRandomString(12)}"
-          placeholder="MM/DD"
+          .placeholder="${this.placeholder}"
           simple
           bordered
           noValidate
@@ -29112,6 +29132,9 @@ class AuroDatePicker extends AuroElement$1 {
           setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
           inputmode="${o(this.inputmode)}"
         >
+          <span slot="displayValue">
+            ${this.renderDisplayTextDate(this.value)}
+          </span>
           <span slot="label"><slot name="fromLabel"></slot></span>
         </${this.inputTag}>
       </div>
@@ -29142,6 +29165,9 @@ class AuroDatePicker extends AuroElement$1 {
             setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
             ?disabled="${this.disabled}"
             part="input">
+            <span slot="displayValue">
+              ${this.renderDisplayTextDate(this.valueEnd)}
+            </span>
             <span slot="label"><slot name="toLabel"></slot></span>
           </${this.inputTag}>
         </div>