@esri/calcite-components 1.0.0-next.701 → 1.0.0-next.702

package/dist/components/date-picker.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.701
+ * v1.0.0-next.702
  */
 import { getAssetPath, proxyCustomElement, HTMLElement, createEvent, h, Host, Build } from '@stencil/core/internal/client/index.js';
 import { g as getSupportedLocale, c as connectLocalized, d as disconnectLocalized, n as numberStringFormatter } from './locale.js';
@@ -110,20 +110,23 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
     };
     this.monthHoverChange = (event) => {
-      if (!this.startAsDate) {
+      if (!this.range) {
         this.hoverRange = undefined;
         return;
       }
+      const { valueAsDate } = this;
+      const start = Array.isArray(valueAsDate) && valueAsDate[0];
+      const end = Array.isArray(valueAsDate) && valueAsDate[1];
       const date = new Date(event.detail);
       this.hoverRange = {
         focused: this.activeRange || "start",
-        start: this.startAsDate,
-        end: this.endAsDate
+        start,
+        end
       };
       if (!this.proximitySelectionDisabled) {
-        if (this.endAsDate) {
-          const startDiff = getDaysDiff(date, this.startAsDate);
-          const endDiff = getDaysDiff(date, this.endAsDate);
+        if (end) {
+          const startDiff = getDaysDiff(date, start);
+          const endDiff = getDaysDiff(date, end);
           if (endDiff > 0) {
             this.hoverRange.end = date;
             this.hoverRange.focused = "end";
@@ -142,11 +145,11 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           }
         }
         else {
-          if (date < this.startAsDate) {
+          if (date < start) {
             this.hoverRange = {
               focused: "start",
               start: date,
-              end: this.startAsDate
+              end: start
             };
           }
           else {
@@ -156,12 +159,12 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         }
       }
       else {
-        if (!this.endAsDate) {
-          if (date < this.startAsDate) {
+        if (!end) {
+          if (date < start) {
             this.hoverRange = {
               focused: "start",
               start: date,
-              end: this.startAsDate
+              end: start
             };
           }
           else {
@@ -184,16 +187,23 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Reset active date and close
      */
     this.reset = () => {
-      if (!Array.isArray(this.valueAsDate) &&
-        this.valueAsDate &&
-        this.valueAsDate?.getTime() !== this.activeDate?.getTime()) {
-        this.activeDate = new Date(this.valueAsDate);
-      }
-      if (this.startAsDate && this.startAsDate?.getTime() !== this.activeStartDate?.getTime()) {
-        this.activeStartDate = new Date(this.startAsDate);
+      const { valueAsDate } = this;
+      if (!Array.isArray(valueAsDate) &&
+        valueAsDate &&
+        valueAsDate?.getTime() !== this.activeDate?.getTime()) {
+        this.activeDate = new Date(valueAsDate);
       }
-      if (this.endAsDate && this.endAsDate?.getTime() !== this.activeEndDate?.getTime()) {
-        this.activeEndDate = new Date(this.endAsDate);
+      if (Array.isArray(valueAsDate)) {
+        if (valueAsDate[0] &&
+          valueAsDate[0]?.getTime() !==
+            (this.activeStartDate instanceof Date && this.activeStartDate?.getTime())) {
+          this.activeStartDate = new Date(valueAsDate[0]);
+        }
+        if (valueAsDate[1] &&
+          valueAsDate[1]?.getTime() !==
+            (this.activeStartDate instanceof Date && this.activeEndDate?.getTime())) {
+          this.activeEndDate = new Date(valueAsDate[1]);
+        }
       }
     };
     /**
@@ -214,9 +224,11 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.calciteDatePickerChange.emit();
         return;
       }
-      if (!this.startAsDate || (!this.endAsDate && date < this.startAsDate)) {
-        if (this.startAsDate) {
-          this.setEndDate(new Date(this.startAsDate));
+      const start = this.getStartDate();
+      const end = this.getEndDate();
+      if (!start || (!end && date < start)) {
+        if (start) {
+          this.setEndDate(new Date(start));
         }
         if (this.activeRange == "end") {
           this.setEndDate(date);
@@ -225,7 +237,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           this.setStartDate(date);
         }
       }
-      else if (!this.endAsDate) {
+      else if (!end) {
         this.setEndDate(date);
       }
       else {
@@ -239,8 +251,8 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
             }
           }
           else {
-            const startDiff = getDaysDiff(date, this.startAsDate);
-            const endDiff = getDaysDiff(date, this.endAsDate);
+            const startDiff = getDaysDiff(date, start);
+            const endDiff = getDaysDiff(date, end);
             if (endDiff === 0 || startDiff < 0) {
               this.setStartDate(date);
             }
@@ -257,7 +269,6 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         }
         else {
           this.setStartDate(date);
-          this.endAsDate = this.activeEndDate = undefined;
         }
       }
       this.calciteDatePickerChange.emit();
@@ -291,15 +302,17 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.activeEndDate = newActiveDate;
     }
   }
-  handleValueAsDate(date) {
-    if (!Array.isArray(date) && date && date !== this.activeDate) {
-      this.activeDate = date;
+  valueAsDateWatcher(newValueAsDate) {
+    if (this.range && Array.isArray(newValueAsDate)) {
+      const { activeStartDate, activeEndDate } = this;
+      const newActiveStartDate = newValueAsDate[0];
+      const newActiveEndDate = newValueAsDate[1];
+      this.activeStartDate = activeStartDate !== newActiveStartDate && newActiveStartDate;
+      this.activeEndDate = activeEndDate !== newActiveEndDate && newActiveEndDate;
+    }
+    else if (newValueAsDate && newValueAsDate !== this.activeDate) {
+      this.activeDate = newValueAsDate;
     }
-  }
-  handleRangeChange() {
-    const { startAsDate: startDate, endAsDate: endDate } = this;
-    this.activeEndDate = endDate;
-    this.activeStartDate = startDate;
   }
   onMinChanged(min) {
     if (min) {
@@ -409,38 +422,23 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       h("calcite-date-picker-month", { activeDate: activeDate, endDate: this.range ? endDate : undefined, hoverRange: this.hoverRange, localeData: this.localeData, max: maxDate, min: minDate, onCalciteInternalDatePickerActiveDateChange: this.monthActiveDateChange, onCalciteInternalDatePickerHover: this.monthHoverChange, onCalciteInternalDatePickerMouseOut: this.monthMouseOutChange, onCalciteInternalDatePickerSelect: this.monthDateChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date, startDate: this.range ? date : undefined })
     ]);
   }
-  /**
-   * Update date instance of start if valid
-   *
-   * @param startDate
-   * @param emit
-   */
-  setStartAsDate(startDate, emit) {
-    this.startAsDate = startDate;
-    this.mostRecentRangeValue = this.startAsDate;
-    if (emit) {
-      this.calciteDatePickerRangeChange.emit();
-    }
-  }
-  /**
-   * Update date instance of end if valid
-   *
-   * @param endDate
-   * @param emit
-   */
-  setEndAsDate(endDate, emit) {
-    this.endAsDate = endDate ? setEndOfDay(endDate) : endDate;
-    this.mostRecentRangeValue = this.endAsDate;
-    if (emit) {
-      this.calciteDatePickerRangeChange.emit();
-    }
+  getEndDate() {
+    return (Array.isArray(this.valueAsDate) && this.valueAsDate[1]) || undefined;
   }
   setEndDate(date) {
-    this.setEndAsDate(date, true);
+    const newEndDate = date ? setEndOfDay(date) : date;
+    this.valueAsDate = [this.getStartDate(), date];
+    this.mostRecentRangeValue = newEndDate;
+    this.calciteDatePickerRangeChange.emit();
     this.activeEndDate = date || null;
   }
+  getStartDate() {
+    return Array.isArray(this.valueAsDate) && this.valueAsDate[0];
+  }
   setStartDate(date) {
-    this.setStartAsDate(date, true);
+    this.valueAsDate = [date, this.getEndDate()];
+    this.mostRecentRangeValue = date;
+    this.calciteDatePickerRangeChange.emit();
     this.activeStartDate = date || null;
   }
   /**
@@ -461,9 +459,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   get el() { return this; }
   static get watchers() { return {
     "activeDate": ["activeDateWatcher"],
-    "valueAsDate": ["handleValueAsDate"],
-    "startAsDate": ["handleRangeChange"],
-    "endAsDate": ["handleRangeChange"],
+    "valueAsDate": ["valueAsDateWatcher"],
     "min": ["onMinChanged"],
     "max": ["onMaxChanged"],
     "messageOverrides": ["onMessagesChange"],

package/dist/components/date.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.701
+ * v1.0.0-next.702
  */
 import { n as numberStringFormatter } from './locale.js';
 

package/dist/components/debounce.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.701
+ * v1.0.0-next.702
  */
 /** Detect free variable `global` from Node.js. */
 var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;