@aurodesignsystem-dev/auro-formkit 0.0.0-pr1160.0 → 0.0.0-pr1166.0

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

@@ -14284,15 +14284,6 @@ class AuroCalendar extends RangeDatepicker {
         type: Object
       },
 
-      /**
-       * Mobile breakpoint for responsive design.
-       * @private
-       */
-      mobileBreakpoint: {
-        type: Number,
-        reflect: false
-      },
-
       /**
        * @private
        */
@@ -29066,21 +29057,11 @@ class AuroDatePicker extends AuroElement$1 {
     this.dropdown.addEventListener('auroDropdown-toggled', () => {
       this.notifyDatepickerToggled();
 
-      // This forces the calendar to render when the dropdown is opened.
-      // It is not rendered by default
       this.calendar.visible = this.dropdown.isPopoverVisible;
 
-      // If on mobile, and the calendar is opened, scroll the focus date into view if the flag is set
-      if (this.dropdown.isPopoverVisible && this.forceScrollOnNextMobileCalendarRender) {
-
-        // Since the calendar is not rendered until the dropdown is opened,
-        // and the auroDropdown-toggled event fires before the popover is actually open,
-        // we need to wait until the next frame to ensure the calendar is fully rendered
-        // and the area we're trying to scroll to is present in the DOM.
-        setTimeout(() => {
-          this.calendar.scrollMonthIntoView(this.formattedFocusDate);
-          this.forceScrollOnNextMobileCalendarRender = false;
-        }, 0);
+      if (this.dropdown.getAttribute('data-show') && this.forceScrollOnNextMobileCalendarRender) {
+        this.calendar.scrollMonthIntoView(this.formattedFocusDate);
+        this.forceScrollOnNextMobileCalendarRender = false;
       }
     });
   }
@@ -29239,13 +29220,10 @@ class AuroDatePicker extends AuroElement$1 {
   handleReadOnly() {
     // --ds-grid-breakpoint-sm
     const docStyle = getComputedStyle(document.documentElement);
-
-    // We need to store this so that we can pass it to calendar
-    this.mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
-    const isMobile = window.innerWidth < this.mobileBreakpoint;
+    const mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
 
     this.inputList.forEach((input) => {
-      if (isMobile) {
+      if (window.innerWidth < mobileBreakpoint) {
         input.setAttribute('readonly', true);
       } else {
         input.removeAttribute('readonly');
@@ -29432,9 +29410,6 @@ class AuroDatePicker extends AuroElement$1 {
       if (!this.calendarFocusDate && this.util.validDateStr(this.value, this.format)) {
         if (!this.dropdown.isPopoverVisible) {
           this.calendarFocusDate = this.value;
-
-          // Let the calendar know to scroll to the focus date when it is next rendered on mobile
-          this.forceScrollOnNextMobileCalendarRender = true;
         }
       }
 
@@ -29886,6 +29861,7 @@ class AuroDatePicker extends AuroElement$1 {
             `
         : undefined
       }
+          <span slot="ariaLabel.clear">${i18n(this.lang, 'clearInput')}</span>
           <span slot="label"><slot name="fromLabel"></slot></span>
         </${this.inputTag}>
       </div>
@@ -29927,6 +29903,7 @@ class AuroDatePicker extends AuroElement$1 {
             `
           : undefined
         }
+            <span slot="ariaLabel.clear">${i18n(this.lang, 'clearInput')}</span>
             <span slot="label"><slot name="toLabel"></slot></span>
           </${this.inputTag}>
         </div>
@@ -30057,7 +30034,6 @@ class AuroDatePicker extends AuroElement$1 {
         .maxDate="${this.maxDate}"
         .minDate="${this.minDate}"
         .monthNames="${this.monthNames}"
-        .mobileBreakpoint="${this.mobileBreakpoint}"
         part="calendar"
       >
         <slot name="ariaLabel.bib.close" slot="ariaLabel.close" @slotchange="${this.handleSlotToSlot}">Close</slot>

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

@@ -14025,15 +14025,6 @@ class AuroCalendar extends RangeDatepicker {
         type: Object
       },
 
-      /**
-       * Mobile breakpoint for responsive design.
-       * @private
-       */
-      mobileBreakpoint: {
-        type: Number,
-        reflect: false
-      },
-
       /**
        * @private
        */
@@ -28807,21 +28798,11 @@ class AuroDatePicker extends AuroElement$1 {
     this.dropdown.addEventListener('auroDropdown-toggled', () => {
       this.notifyDatepickerToggled();
 
-      // This forces the calendar to render when the dropdown is opened.
-      // It is not rendered by default
       this.calendar.visible = this.dropdown.isPopoverVisible;
 
-      // If on mobile, and the calendar is opened, scroll the focus date into view if the flag is set
-      if (this.dropdown.isPopoverVisible && this.forceScrollOnNextMobileCalendarRender) {
-
-        // Since the calendar is not rendered until the dropdown is opened,
-        // and the auroDropdown-toggled event fires before the popover is actually open,
-        // we need to wait until the next frame to ensure the calendar is fully rendered
-        // and the area we're trying to scroll to is present in the DOM.
-        setTimeout(() => {
-          this.calendar.scrollMonthIntoView(this.formattedFocusDate);
-          this.forceScrollOnNextMobileCalendarRender = false;
-        }, 0);
+      if (this.dropdown.getAttribute('data-show') && this.forceScrollOnNextMobileCalendarRender) {
+        this.calendar.scrollMonthIntoView(this.formattedFocusDate);
+        this.forceScrollOnNextMobileCalendarRender = false;
       }
     });
   }
@@ -28980,13 +28961,10 @@ class AuroDatePicker extends AuroElement$1 {
   handleReadOnly() {
     // --ds-grid-breakpoint-sm
     const docStyle = getComputedStyle(document.documentElement);
-
-    // We need to store this so that we can pass it to calendar
-    this.mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
-    const isMobile = window.innerWidth < this.mobileBreakpoint;
+    const mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
 
     this.inputList.forEach((input) => {
-      if (isMobile) {
+      if (window.innerWidth < mobileBreakpoint) {
         input.setAttribute('readonly', true);
       } else {
         input.removeAttribute('readonly');
@@ -29173,9 +29151,6 @@ class AuroDatePicker extends AuroElement$1 {
       if (!this.calendarFocusDate && this.util.validDateStr(this.value, this.format)) {
         if (!this.dropdown.isPopoverVisible) {
           this.calendarFocusDate = this.value;
-
-          // Let the calendar know to scroll to the focus date when it is next rendered on mobile
-          this.forceScrollOnNextMobileCalendarRender = true;
         }
       }
 
@@ -29627,6 +29602,7 @@ class AuroDatePicker extends AuroElement$1 {
             `
         : undefined
       }
+          <span slot="ariaLabel.clear">${i18n(this.lang, 'clearInput')}</span>
           <span slot="label"><slot name="fromLabel"></slot></span>
         </${this.inputTag}>
       </div>
@@ -29668,6 +29644,7 @@ class AuroDatePicker extends AuroElement$1 {
             `
           : undefined
         }
+            <span slot="ariaLabel.clear">${i18n(this.lang, 'clearInput')}</span>
             <span slot="label"><slot name="toLabel"></slot></span>
           </${this.inputTag}>
         </div>
@@ -29798,7 +29775,6 @@ class AuroDatePicker extends AuroElement$1 {
         .maxDate="${this.maxDate}"
         .minDate="${this.minDate}"
         .monthNames="${this.monthNames}"
-        .mobileBreakpoint="${this.mobileBreakpoint}"
         part="calendar"
       >
         <slot name="ariaLabel.bib.close" slot="ariaLabel.close" @slotchange="${this.handleSlotToSlot}">Close</slot>

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

@@ -62,14 +62,6 @@ export class AuroCalendar extends RangeDatepicker {
         dropdown: {
             type: ObjectConstructor;
         };
-        /**
-         * Mobile breakpoint for responsive design.
-         * @private
-         */
-        mobileBreakpoint: {
-            type: NumberConstructor;
-            reflect: boolean;
-        };
         /**
          * @private
          */

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

@@ -541,7 +541,6 @@ export class AuroDatePicker extends AuroElement {
      * @returns {void}
      */
     private handleReadOnly;
-    mobileBreakpoint: number;
     /**
      * Keep the datepicker in sync with the calendar's central date.
      * @private

package/components/datepicker/dist/index.js

@@ -13975,15 +13975,6 @@ class AuroCalendar extends RangeDatepicker {
         type: Object
       },
 
-      /**
-       * Mobile breakpoint for responsive design.
-       * @private
-       */
-      mobileBreakpoint: {
-        type: Number,
-        reflect: false
-      },
-
       /**
        * @private
        */
@@ -28732,21 +28723,11 @@ class AuroDatePicker extends AuroElement$1 {
     this.dropdown.addEventListener('auroDropdown-toggled', () => {
       this.notifyDatepickerToggled();
 
-      // This forces the calendar to render when the dropdown is opened.
-      // It is not rendered by default
       this.calendar.visible = this.dropdown.isPopoverVisible;
 
-      // If on mobile, and the calendar is opened, scroll the focus date into view if the flag is set
-      if (this.dropdown.isPopoverVisible && this.forceScrollOnNextMobileCalendarRender) {
-
-        // Since the calendar is not rendered until the dropdown is opened,
-        // and the auroDropdown-toggled event fires before the popover is actually open,
-        // we need to wait until the next frame to ensure the calendar is fully rendered
-        // and the area we're trying to scroll to is present in the DOM.
-        setTimeout(() => {
-          this.calendar.scrollMonthIntoView(this.formattedFocusDate);
-          this.forceScrollOnNextMobileCalendarRender = false;
-        }, 0);
+      if (this.dropdown.getAttribute('data-show') && this.forceScrollOnNextMobileCalendarRender) {
+        this.calendar.scrollMonthIntoView(this.formattedFocusDate);
+        this.forceScrollOnNextMobileCalendarRender = false;
       }
     });
   }
@@ -28905,13 +28886,10 @@ class AuroDatePicker extends AuroElement$1 {
   handleReadOnly() {
     // --ds-grid-breakpoint-sm
     const docStyle = getComputedStyle(document.documentElement);
-
-    // We need to store this so that we can pass it to calendar
-    this.mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
-    const isMobile = window.innerWidth < this.mobileBreakpoint;
+    const mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
 
     this.inputList.forEach((input) => {
-      if (isMobile) {
+      if (window.innerWidth < mobileBreakpoint) {
         input.setAttribute('readonly', true);
       } else {
         input.removeAttribute('readonly');
@@ -29098,9 +29076,6 @@ class AuroDatePicker extends AuroElement$1 {
       if (!this.calendarFocusDate && this.util.validDateStr(this.value, this.format)) {
         if (!this.dropdown.isPopoverVisible) {
           this.calendarFocusDate = this.value;
-
-          // Let the calendar know to scroll to the focus date when it is next rendered on mobile
-          this.forceScrollOnNextMobileCalendarRender = true;
         }
       }
 
@@ -29552,6 +29527,7 @@ class AuroDatePicker extends AuroElement$1 {
             `
         : undefined
       }
+          <span slot="ariaLabel.clear">${i18n(this.lang, 'clearInput')}</span>
           <span slot="label"><slot name="fromLabel"></slot></span>
         </${this.inputTag}>
       </div>
@@ -29593,6 +29569,7 @@ class AuroDatePicker extends AuroElement$1 {
             `
           : undefined
         }
+            <span slot="ariaLabel.clear">${i18n(this.lang, 'clearInput')}</span>
             <span slot="label"><slot name="toLabel"></slot></span>
           </${this.inputTag}>
         </div>
@@ -29723,7 +29700,6 @@ class AuroDatePicker extends AuroElement$1 {
         .maxDate="${this.maxDate}"
         .minDate="${this.minDate}"
         .monthNames="${this.monthNames}"
-        .mobileBreakpoint="${this.mobileBreakpoint}"
         part="calendar"
       >
         <slot name="ariaLabel.bib.close" slot="ariaLabel.close" @slotchange="${this.handleSlotToSlot}">Close</slot>

package/components/datepicker/dist/registered.js

@@ -13975,15 +13975,6 @@ class AuroCalendar extends RangeDatepicker {
         type: Object
       },
 
-      /**
-       * Mobile breakpoint for responsive design.
-       * @private
-       */
-      mobileBreakpoint: {
-        type: Number,
-        reflect: false
-      },
-
       /**
        * @private
        */
@@ -28732,21 +28723,11 @@ class AuroDatePicker extends AuroElement$1 {
     this.dropdown.addEventListener('auroDropdown-toggled', () => {
       this.notifyDatepickerToggled();
 
-      // This forces the calendar to render when the dropdown is opened.
-      // It is not rendered by default
       this.calendar.visible = this.dropdown.isPopoverVisible;
 
-      // If on mobile, and the calendar is opened, scroll the focus date into view if the flag is set
-      if (this.dropdown.isPopoverVisible && this.forceScrollOnNextMobileCalendarRender) {
-
-        // Since the calendar is not rendered until the dropdown is opened,
-        // and the auroDropdown-toggled event fires before the popover is actually open,
-        // we need to wait until the next frame to ensure the calendar is fully rendered
-        // and the area we're trying to scroll to is present in the DOM.
-        setTimeout(() => {
-          this.calendar.scrollMonthIntoView(this.formattedFocusDate);
-          this.forceScrollOnNextMobileCalendarRender = false;
-        }, 0);
+      if (this.dropdown.getAttribute('data-show') && this.forceScrollOnNextMobileCalendarRender) {
+        this.calendar.scrollMonthIntoView(this.formattedFocusDate);
+        this.forceScrollOnNextMobileCalendarRender = false;
       }
     });
   }
@@ -28905,13 +28886,10 @@ class AuroDatePicker extends AuroElement$1 {
   handleReadOnly() {
     // --ds-grid-breakpoint-sm
     const docStyle = getComputedStyle(document.documentElement);
-
-    // We need to store this so that we can pass it to calendar
-    this.mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
-    const isMobile = window.innerWidth < this.mobileBreakpoint;
+    const mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
 
     this.inputList.forEach((input) => {
-      if (isMobile) {
+      if (window.innerWidth < mobileBreakpoint) {
         input.setAttribute('readonly', true);
       } else {
         input.removeAttribute('readonly');
@@ -29098,9 +29076,6 @@ class AuroDatePicker extends AuroElement$1 {
       if (!this.calendarFocusDate && this.util.validDateStr(this.value, this.format)) {
         if (!this.dropdown.isPopoverVisible) {
           this.calendarFocusDate = this.value;
-
-          // Let the calendar know to scroll to the focus date when it is next rendered on mobile
-          this.forceScrollOnNextMobileCalendarRender = true;
         }
       }
 
@@ -29552,6 +29527,7 @@ class AuroDatePicker extends AuroElement$1 {
             `
         : undefined
       }
+          <span slot="ariaLabel.clear">${i18n(this.lang, 'clearInput')}</span>
           <span slot="label"><slot name="fromLabel"></slot></span>
         </${this.inputTag}>
       </div>
@@ -29593,6 +29569,7 @@ class AuroDatePicker extends AuroElement$1 {
             `
           : undefined
         }
+            <span slot="ariaLabel.clear">${i18n(this.lang, 'clearInput')}</span>
             <span slot="label"><slot name="toLabel"></slot></span>
           </${this.inputTag}>
         </div>
@@ -29723,7 +29700,6 @@ class AuroDatePicker extends AuroElement$1 {
         .maxDate="${this.maxDate}"
         .minDate="${this.minDate}"
         .monthNames="${this.monthNames}"
-        .mobileBreakpoint="${this.mobileBreakpoint}"
         part="calendar"
       >
         <slot name="ariaLabel.bib.close" slot="ariaLabel.close" @slotchange="${this.handleSlotToSlot}">Close</slot>

package/package.json

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