@esri/calcite-components 1.0.0-beta.72 → 1.0.0-beta.76

package/dist/collection/components/calcite-input/calcite-input.js

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
-import { getElementDir, getElementProp, setRequestedIcon } from "../../utils/dom";
+import { getElementDir, getElementProp, getSlotted, setRequestedIcon } from "../../utils/dom";
 import { CSS, INPUT_TYPE_ICONS, SLOTS } from "./resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
@@ -12,6 +12,7 @@ import { numberKeys } from "../../utils/key";
 import { isValidNumber, parseNumberString, sanitizeNumberString } from "../../utils/number";
 import { CSS_UTILITY, TEXT } from "../../utils/resources";
 import { decimalPlaces } from "../../utils/math";
+import { createObserver } from "../../utils/observers";
 /**
  * @slot action - A slot for positioning a button next to an input
  */
@@ -74,6 +75,9 @@ export class CalciteInput {
     this.value = "";
     /** keep track of the rendered child type */
     this.childElType = "input";
+    /** whether the value of the input was changed as a result of user typing or not */
+    this.internalValueChange = false;
+    this.mutationObserver = createObserver("mutation", () => this.setDisabledAction());
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -93,11 +97,15 @@ export class CalciteInput {
       }
     };
     this.clearInputValue = (nativeEvent) => {
-      this.setValue("", nativeEvent, true);
+      this.setValue({
+        committing: true,
+        nativeEvent,
+        value: ""
+      });
     };
     this.inputBlurHandler = () => {
       if (this.type === "number") {
-        this.setLocalizedValue(this.value);
+        this.setValue({ value: this.value });
       }
       this.calciteInputBlur.emit({
         element: this.childEl,
@@ -108,7 +116,8 @@ export class CalciteInput {
       }
     };
     this.inputFocusHandler = (event) => {
-      if (event.target !== this.slottedActionEl) {
+      const slottedActionEl = getSlotted(this.el, "action");
+      if (event.target !== slottedActionEl) {
         this.setFocus();
       }
       this.calciteInputFocus.emit({
@@ -121,7 +130,10 @@ export class CalciteInput {
       if (this.disabled || this.readOnly) {
         return;
       }
-      this.setValue(nativeEvent.target.value, nativeEvent);
+      this.setValue({
+        nativeEvent,
+        value: nativeEvent.target.value
+      });
     };
     this.inputKeyDownHandler = (event) => {
       if (this.disabled || this.readOnly) {
@@ -141,11 +153,17 @@ export class CalciteInput {
         if (!isValidNumber(delocalizedValue)) {
           nativeEvent.preventDefault();
         }
-        this.setValue(parseNumberString(delocalizedValue), nativeEvent);
+        this.setValue({
+          nativeEvent,
+          value: parseNumberString(delocalizedValue)
+        });
         this.childNumberEl.value = this.localizedValue;
       }
       else {
-        this.setValue(delocalizeNumberString(value, this.locale), nativeEvent);
+        this.setValue({
+          nativeEvent,
+          value: delocalizeNumberString(value, this.locale)
+        });
       }
     };
     this.inputNumberKeyDownHandler = (event) => {
@@ -168,8 +186,7 @@ export class CalciteInput {
         "Delete",
         "Enter",
         "Escape",
-        "Tab",
-        "-"
+        "Tab"
       ];
       if (event.altKey || event.ctrlKey || event.metaKey) {
         return;
@@ -190,6 +207,22 @@ export class CalciteInput {
           return;
         }
       }
+      if (/[eE]/.test(event.key)) {
+        if (!this.value && !this.childNumberEl.value) {
+          return;
+        }
+        if (this.value && !/[eE]/.test(this.childNumberEl.value)) {
+          return;
+        }
+      }
+      if (event.key === "-") {
+        if (!this.value && !this.childNumberEl.value) {
+          return;
+        }
+        if (this.value && this.childNumberEl.value.split("-").length <= 2) {
+          return;
+        }
+      }
       event.preventDefault();
     };
     this.nudgeNumberValue = (direction, nativeEvent) => {
@@ -200,8 +233,11 @@ export class CalciteInput {
       const inputMin = this.minString ? parseFloat(this.minString) : null;
       const valueNudgeDelayInMs = 100;
       this.incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent);
+      if (this.nudgeNumberValueIntervalId) {
+        window.clearInterval(this.nudgeNumberValueIntervalId);
+      }
       let firstValueNudge = true;
-      this.nudgeNumberValueIntervalId = setInterval(() => {
+      this.nudgeNumberValueIntervalId = window.setInterval(() => {
         if (firstValueNudge) {
           firstValueNudge = false;
           return;
@@ -210,7 +246,7 @@ export class CalciteInput {
       }, valueNudgeDelayInMs);
     };
     this.numberButtonMouseUpAndMouseOutHandler = () => {
-      clearInterval(this.nudgeNumberValueIntervalId);
+      window.clearInterval(this.nudgeNumberValueIntervalId);
     };
     this.numberButtonMouseDownHandler = (event) => {
       event.preventDefault();
@@ -223,27 +259,54 @@ export class CalciteInput {
     this.setChildNumberElRef = (el) => {
       this.childNumberEl = el;
     };
-    this.setLocalizedValue = (value) => {
-      this.localizedValue = localizeNumberString(value, this.locale, this.groupSeparator);
+    this.setInputValue = (newInputValue) => {
+      if (this.type === "text" && !this.childEl) {
+        return;
+      }
+      if (this.type === "number" && !this.childNumberEl) {
+        return;
+      }
+      this[`child${this.type === "number" ? "Number" : ""}El`].value = newInputValue;
+    };
+    this.setPreviousValue = (newPreviousValue) => {
+      this.previousValue =
+        this.type === "number"
+          ? isValidNumber(newPreviousValue)
+            ? newPreviousValue
+            : ""
+          : newPreviousValue;
     };
-    this.setValue = (value, nativeEvent, committing = false) => {
-      const previousValue = this.value;
-      this.value = this.type === "number" ? sanitizeNumberString(value) : value;
+    this.setValue = ({ committing = false, nativeEvent, origin = "internal", value }) => {
+      const previousLocalizedValue = this.type === "number"
+        ? localizeNumberString(this.previousValue, this.locale, this.groupSeparator)
+        : "";
+      const sanitizedValue = this.type === "number" ? sanitizeNumberString(value) : value;
+      const newValue = this.type === "number" && value && !sanitizedValue
+        ? isValidNumber(this.previousValue)
+          ? this.previousValue
+          : ""
+        : sanitizedValue;
+      const newLocalizedValue = this.type === "number"
+        ? localizeNumberString(newValue, this.locale, this.groupSeparator)
+        : "";
+      this.internalValueChange = origin === "internal";
+      this.setPreviousValue(this.value);
+      this.value = newValue;
       if (this.type === "number") {
-        this.setLocalizedValue(this.value);
+        this.localizedValue = newLocalizedValue;
+      }
+      if (origin === "external") {
+        this.setInputValue(this.type === "number" ? newLocalizedValue : newValue);
       }
       if (nativeEvent) {
-        if (this.type === "number") {
-          value = sanitizeNumberString(value);
-        }
         const calciteInputInputEvent = this.calciteInputInput.emit({
           element: this.childEl,
           nativeEvent,
-          value
+          value: this.value
         });
         if (calciteInputInputEvent.defaultPrevented) {
-          this.value = previousValue;
-          this.setLocalizedValue(previousValue);
+          this.value = this.previousValue;
+          this.localizedValue = previousLocalizedValue;
         }
         else if (committing) {
           this.calciteInputChange.emit();
@@ -251,7 +314,7 @@ export class CalciteInput {
       }
     };
     this.inputKeyUpHandler = () => {
-      clearInterval(this.nudgeNumberValueIntervalId);
+      window.clearInterval(this.nudgeNumberValueIntervalId);
     };
   }
   disabledWatcher() {
@@ -268,17 +331,20 @@ export class CalciteInput {
     this.minString = ((_a = this.min) === null || _a === void 0 ? void 0 : _a.toString()) || null;
   }
   valueWatcher(newValue) {
-    if (newValue == null) {
-      this.value = "";
-      return;
-    }
-    if (this.type === "number" &&
-      this.localizedValue !== localizeNumberString(newValue, this.locale)) {
-      this.setLocalizedValue(newValue);
-    }
-    else if (this.childEl && this.childEl.value !== newValue) {
-      this.childEl.value = newValue;
+    if (!this.internalValueChange) {
+      this.setValue({
+        origin: "external",
+        value: newValue == null
+          ? ""
+          : this.type === "number"
+            ? isValidNumber(newValue)
+              ? newValue
+              : this.previousValue || ""
+            : newValue
+      });
+      this.warnAboutInvalidNumberValue(newValue);
     }
+    this.internalValueChange = false;
   }
   updateRequestedIcon() {
     this.requestedIcon = setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
@@ -299,21 +365,27 @@ export class CalciteInput {
     this.scale = getElementProp(this.el, "scale", this.scale);
     this.status = getElementProp(this.el, "status", this.status);
     this.inlineEditableEl = this.el.closest("calcite-inline-editable");
-    this.editingEnabled = (_a = this.inlineEditableEl) === null || _a === void 0 ? void 0 : _a.editingEnabled;
-    if (this.type === "number" && this.value) {
-      if (isValidNumber(this.value)) {
-        this.localizedValue = localizeNumberString(this.value, this.locale, this.groupSeparator);
-      }
-      else {
-        this.value = undefined;
-      }
+    if (this.inlineEditableEl) {
+      this.editingEnabled = this.inlineEditableEl.editingEnabled || false;
+    }
+    this.setPreviousValue(this.value);
+    if (this.type === "number") {
+      this.warnAboutInvalidNumberValue(this.value);
+      this.setValue({
+        origin: "loading",
+        value: isValidNumber(this.value) ? this.value : ""
+      });
     }
     connectLabel(this);
     connectForm(this);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
+    this.setDisabledAction();
   }
   disconnectedCallback() {
+    var _a;
     disconnectLabel(this);
     disconnectForm(this);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   componentWillLoad() {
     var _a, _b;
@@ -322,17 +394,6 @@ export class CalciteInput {
     this.minString = (_b = this.min) === null || _b === void 0 ? void 0 : _b.toString();
     this.requestedIcon = setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
   }
-  componentDidLoad() {
-    this.slottedActionEl = this.el.querySelector("[slot=action]");
-    this.setDisabledAction();
-  }
-  componentShouldUpdate(newValue, oldValue, property) {
-    if (this.type === "number" && property === "value" && newValue && !isValidNumber(newValue)) {
-      this.value = oldValue;
-      return false;
-    }
-    return true;
-  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -363,10 +424,16 @@ export class CalciteInput {
       : nudgedValue;
     const inputValPlaces = decimalPlaces(inputVal);
     const inputStepPlaces = decimalPlaces(inputStep);
-    this.setValue(finalValue.toFixed(Math.max(inputValPlaces, inputStepPlaces)), nativeEvent, true);
+    this.setValue({
+      committing: true,
+      nativeEvent,
+      value: finalValue.toFixed(Math.max(inputValPlaces, inputStepPlaces))
+    });
   }
   onFormReset() {
-    this.setValue(this.defaultValue);
+    this.setValue({
+      value: this.defaultValue
+    });
   }
   syncHiddenFormInput(input) {
     var _a, _b, _c, _d;
@@ -389,14 +456,19 @@ export class CalciteInput {
     }
   }
   setDisabledAction() {
-    if (!this.slottedActionEl) {
+    const slottedActionEl = getSlotted(this.el, "action");
+    if (!slottedActionEl) {
       return;
     }
-    const slottedActionEl = this.slottedActionEl;
     this.disabled
       ? slottedActionEl.setAttribute("disabled", "")
       : slottedActionEl.removeAttribute("disabled");
   }
+  warnAboutInvalidNumberValue(value) {
+    if (this.type === "number" && value && !isValidNumber(value)) {
+      console.warn(`The specified value "${value}" cannot be parsed, or is out of range.`);
+    }
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods

package/dist/collection/components/calcite-input-date-picker/calcite-input-date-picker.css

@@ -1,51 +1,42 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
   --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
   --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
@@ -79,7 +70,6 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :host {
   /* Component spacing variables */
   --calcite-icon-size: 1rem;
@@ -97,7 +87,7 @@
 }
 
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -105,14 +95,15 @@
 }
 
 :host {
-  box-shadow: none;
+  position: relative;
   display: inline-block;
-  vertical-align: top;
   width: 100%;
-  position: relative;
   overflow: visible;
+  vertical-align: top;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-
 :host .menu-container .calcite-popper-anim {
   position: relative;
   z-index: 1;
@@ -123,23 +114,18 @@
   box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
   border-radius: 0.25rem;
 }
-
 :host .menu-container[data-popper-placement^=bottom] .calcite-popper-anim {
   transform: translateY(-5px);
 }
-
 :host .menu-container[data-popper-placement^=top] .calcite-popper-anim {
   transform: translateY(5px);
 }
-
 :host .menu-container[data-popper-placement^=left] .calcite-popper-anim {
   transform: translateX(5px);
 }
-
 :host .menu-container[data-popper-placement^=right] .calcite-popper-anim {
   transform: translateX(-5px);
 }
-
 :host .menu-container[data-popper-placement] .calcite-popper-anim--active {
   opacity: 1;
   visibility: visible;
@@ -147,9 +133,11 @@
 }
 
 .calendar-picker-wrapper {
-  box-shadow: none;
   position: static;
   width: 100%;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   transform: translate3d(0, 0, 0);
 }
 
@@ -160,49 +148,44 @@
 :host([range]) .input-container {
   display: flex;
 }
-
 :host([range]) .input-wrapper {
   flex: 1 1 auto;
 }
-
 :host([range]) .horizontal-arrow-container {
-  background-color: var(--calcite-ui-background);
-  padding-top: 0;
-  padding-bottom: 0;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  display: flex;
+  align-items: center;
   border-width: 1px;
+  border-left-width: 0px;
+  border-right-width: 0px;
   border-style: solid;
   border-color: var(--calcite-ui-border-input);
-  border-left-width: 0;
-  border-right-width: 0;
-  display: flex;
-  align-items: center;
+  background-color: var(--calcite-ui-background);
+  padding-top: 0px;
+  padding-bottom: 0px;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
 }
 
 :host([range][layout=vertical]) .input-wrapper {
   width: 100%;
 }
-
 :host([range][layout=vertical]) .input-container {
   flex-direction: column;
   align-items: flex-start;
 }
-
 :host([range][layout=vertical]) .calendar-picker-wrapper--end {
   transform: translate3d(0, 0, 0);
 }
-
 :host([range][layout=vertical]) .vertical-arrow-container {
   top: 1.5rem;
-  left: 0;
-  padding-left: 0.625rem;
-  padding-right: 0.625rem;
-  margin-left: 1px;
-  margin-right: 1px;
   position: absolute;
+  left: 0px;
   z-index: 10;
+  margin-left: 1px;
+  margin-right: 1px;
   background-color: var(--calcite-ui-foreground-1);
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
 }
 
 :host([scale=s][range]:not([layout=vertical])) .calendar-picker-wrapper {
@@ -222,28 +205,27 @@
   position: absolute;
   z-index: 900;
   transform: scale(0);
-  visibility: hidden;
   pointer-events: none;
+  visibility: hidden;
 }
 
 :host([active]) .menu-container {
-  visibility: visible;
   pointer-events: auto;
+  visibility: visible;
 }
 
 .input .calcite-input__wrapper {
-  margin-top: 0;
+  margin-top: 0px;
 }
 
 :host([range][layout=vertical][scale=m]) .vertical-arrow-container {
   top: 1.5rem;
   padding-left: 0.75rem;
 }
-
 :host([range][layout=vertical][scale=m]) .vertical-arrow-container calcite-icon {
-  width: 0.75rem;
   height: 0.75rem;
-  min-width: 0;
+  width: 0.75rem;
+  min-width: 0px;
 }
 
 :host([range][layout=vertical][scale=l]) .vertical-arrow-container {

package/dist/collection/components/calcite-input-date-picker/calcite-input-date-picker.js

@@ -161,6 +161,9 @@ export class CalciteInputDatePicker {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
+  handleDateOrRangeChange() {
+    this.calciteInputDatePickerChange.emit();
+  }
   calciteDaySelectHandler() {
     if (this.shouldFocusRangeStart() || this.shouldFocusRangeEnd()) {
       return;
@@ -260,7 +263,7 @@ export class CalciteInputDatePicker {
         this.range && (h("div", { class: "input-wrapper", ref: this.setEndWrapper },
           h("calcite-input", { class: {
               input: true,
-              "border-t-color-1": this.layout === "vertical" && this.range
+              "border-top-color-one": this.layout === "vertical" && this.range
             }, disabled: disabled, icon: "calendar", "number-button-type": "none", onCalciteInputBlur: this.inputBlur, onCalciteInputFocus: this.endInputFocus, onCalciteInputInput: this.inputInput, placeholder: (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder, ref: this.setEndInput, scale: this.scale, type: "text", value: formattedEndDate }))))),
       h(HiddenFormInputSlot, { component: this })));
   }
@@ -351,6 +354,7 @@ export class CalciteInputDatePicker {
     }
     if (!this.range) {
       this.value = dateToISO(date);
+      this.calciteDatePickerChange.emit(date);
       return;
     }
     const { focusedInput } = this;
@@ -925,7 +929,10 @@ export class CalciteInputDatePicker {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use `calciteInputDatePickerChange` instead."
+          }],
         "text": "Trigger calcite date change when a user changes the date."
       },
       "complexType": {
@@ -947,6 +954,9 @@ export class CalciteInputDatePicker {
         "tags": [{
             "name": "see",
             "text": " [DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-date-picker/interfaces.ts#L1)"
+          }, {
+            "name": "deprecated",
+            "text": "use `calciteInputDatePickerChange` instead."
           }],
         "text": "Trigger calcite date change when a user changes the date range."
       },
@@ -960,6 +970,21 @@ export class CalciteInputDatePicker {
           }
         }
       }
+    }, {
+      "method": "calciteInputDatePickerChange",
+      "name": "calciteInputDatePickerChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "This event fires when the input date picker value changes."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
     }, {
       "method": "calciteInputDatePickerOpen",
       "name": "calciteInputDatePickerOpen",
@@ -1061,6 +1086,18 @@ export class CalciteInputDatePicker {
       "methodName": "loadLocaleData"
     }]; }
   static get listeners() { return [{
+      "name": "calciteDatePickerChange",
+      "method": "handleDateOrRangeChange",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "calciteDatePickerRangeChange",
+      "method": "handleDateOrRangeChange",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
       "name": "calciteDaySelect",
       "method": "calciteDaySelectHandler",
       "target": undefined,