@esri/calcite-components 1.0.0-beta.70 → 1.0.0-beta.74

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

@@ -4,7 +4,6 @@
  */
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
 import { getElementDir, getElementProp, setRequestedIcon } from "../../utils/dom";
-import { getKey } from "../../utils/key";
 import { CSS, INPUT_TYPE_ICONS, SLOTS } from "./resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
@@ -71,6 +70,8 @@ export class CalciteInput {
      * Note that the following types add type-specific icons by default: `date`, `email`, `password`, `search`, `tel`, `time`
      */
     this.type = "text";
+    /** input value */
+    this.value = "";
     /** keep track of the rendered child type */
     this.childElType = "input";
     //--------------------------------------------------------------------------
@@ -86,13 +87,13 @@ export class CalciteInput {
       if (this.readOnly || this.disabled) {
         return;
       }
-      if (this.isClearable && getKey(event.key) === "Escape") {
+      if (this.isClearable && event.key === "Escape") {
         this.clearInputValue(event);
         event.preventDefault();
       }
     };
     this.clearInputValue = (nativeEvent) => {
-      this.setValue(null, nativeEvent, true);
+      this.setValue("", nativeEvent, true);
     };
     this.inputBlurHandler = () => {
       if (this.type === "number") {
@@ -167,8 +168,7 @@ export class CalciteInput {
         "Delete",
         "Enter",
         "Escape",
-        "Tab",
-        "-"
+        "Tab"
       ];
       if (event.altKey || event.ctrlKey || event.metaKey) {
         return;
@@ -189,6 +189,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) => {
@@ -199,20 +215,19 @@ export class CalciteInput {
       const inputMin = this.minString ? parseFloat(this.minString) : null;
       const valueNudgeDelayInMs = 100;
       this.incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent);
-      let nudgeNumberValueIntervalCount = 0;
-      this.nudgeNumberValueIntervalId = setInterval(() => {
-        nudgeNumberValueIntervalCount !== 0
-          ? this.incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent)
-          : null;
-        nudgeNumberValueIntervalCount++;
+      let firstValueNudge = true;
+      this.nudgeNumberValueIntervalId = window.setInterval(() => {
+        if (firstValueNudge) {
+          firstValueNudge = false;
+          return;
+        }
+        this.incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent);
       }, valueNudgeDelayInMs);
     };
     this.numberButtonMouseUpAndMouseOutHandler = () => {
-      clearInterval(this.nudgeNumberValueIntervalId);
+      window.clearInterval(this.nudgeNumberValueIntervalId);
     };
     this.numberButtonMouseDownHandler = (event) => {
-      // todo, when dropping ie11 support, refactor to use stepup/stepdown
-      // prevent blur and re-focus of input on mousedown
       event.preventDefault();
       const direction = event.target.dataset.adjustment;
       this.nudgeNumberValue(direction, event);
@@ -228,18 +243,19 @@ export class CalciteInput {
     };
     this.setValue = (value, nativeEvent, committing = false) => {
       const previousValue = this.value;
-      this.value = this.type === "number" ? sanitizeNumberString(value) : value;
       if (this.type === "number") {
-        this.setLocalizedValue(this.value);
+        const sanitizedValue = sanitizeNumberString(value);
+        this.value = sanitizedValue;
+        this.setLocalizedValue(sanitizedValue);
+      }
+      else {
+        this.value = value;
       }
       if (nativeEvent) {
-        if (this.type === "number" && (value === null || value === void 0 ? void 0 : value.endsWith("."))) {
-          return;
-        }
         const calciteInputInputEvent = this.calciteInputInput.emit({
           element: this.childEl,
           nativeEvent,
-          value
+          value: this.value
         });
         if (calciteInputInputEvent.defaultPrevented) {
           this.value = previousValue;
@@ -251,7 +267,7 @@ export class CalciteInput {
       }
     };
     this.inputKeyUpHandler = () => {
-      clearInterval(this.nudgeNumberValueIntervalId);
+      window.clearInterval(this.nudgeNumberValueIntervalId);
     };
   }
   disabledWatcher() {
@@ -268,6 +284,10 @@ 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);
@@ -280,8 +300,7 @@ export class CalciteInput {
     this.requestedIcon = setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
   }
   get isClearable() {
-    var _a;
-    return !this.isTextarea && (this.clearable || this.type === "search") && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    return !this.isTextarea && (this.clearable || this.type === "search") && this.value.length > 0;
   }
   get isTextarea() {
     return this.childElType === "textarea";
@@ -292,17 +311,18 @@ export class CalciteInput {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
     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.inlineEditableEl) {
+      this.editingEnabled = this.inlineEditableEl.editingEnabled || false;
+    }
     if (this.type === "number" && this.value) {
       if (isValidNumber(this.value)) {
         this.localizedValue = localizeNumberString(this.value, this.locale, this.groupSeparator);
       }
       else {
-        this.value = undefined;
+        this.value = "";
       }
     }
     connectLabel(this);
@@ -405,7 +425,7 @@ export class CalciteInput {
       h("calcite-progress", { label: this.intlLoading, type: "indeterminate" })));
     const inputClearButton = (h("button", { class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: this.disabled ? -1 : 0, type: "button" },
       h("calcite-icon", { icon: "x", scale: "s" })));
-    const iconEl = (h("calcite-icon", { class: CSS.inputIcon, dir: dir, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: "s" }));
+    const iconEl = (h("calcite-icon", { class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: "s" }));
     const isHorizontalNumberButton = this.numberButtonType === "horizontal";
     const numberButtonsHorizontalUp = (h("button", { class: {
         [CSS.numberButtonItem]: true,
@@ -422,7 +442,7 @@ export class CalciteInput {
       numberButtonsHorizontalDown));
     const prefixText = h("div", { class: CSS.prefix }, this.prefixText);
     const suffixText = h("div", { class: CSS.suffix }, this.suffixText);
-    const localeNumberInput = this.type === "number" ? (h("input", { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint, inputMode: this.el.inputMode, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, tabIndex: this.disabled ? -1 : 0, type: "text", value: this.localizedValue })) : null;
+    const localeNumberInput = this.type === "number" ? (h("input", { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint, inputMode: this.el.inputMode, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, type: "text", value: this.localizedValue })) : null;
     const childEl = this.type !== "number"
       ? [
         h(this.childElType, { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, class: {
@@ -434,8 +454,8 @@ export class CalciteInput {
       ]
       : null;
     return (h(Host, { onClick: this.inputFocusHandler, onKeyDown: this.keyDownHandler },
-      h("div", { class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, dir: dir },
-        this.type === "number" && this.numberButtonType === "horizontal"
+      h("div", { class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
+        this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
           ? numberButtonsHorizontalDown
           : null,
         this.prefixText ? prefixText : null,
@@ -447,11 +467,11 @@ export class CalciteInput {
           this.loading ? loader : null),
         h("div", { class: CSS.actionWrapper },
           h("slot", { name: SLOTS.action })),
-        this.type === "number" && this.numberButtonType === "vertical"
+        this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly
           ? numberButtonsVertical
           : null,
         this.suffixText ? suffixText : null,
-        this.type === "number" && this.numberButtonType === "horizontal"
+        this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
           ? numberButtonsHorizontalUp
           : null,
         h(HiddenFormInputSlot, { component: this }))));
@@ -1040,7 +1060,8 @@ export class CalciteInput {
         "text": "input value"
       },
       "attribute": "value",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"\""
     }
   }; }
   static get states() { return {

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

@@ -1,53 +1,48 @@
 /* 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: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -75,7 +70,6 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :host {
   /* Component spacing variables */
   --calcite-icon-size: 1rem;
@@ -93,7 +87,7 @@
 }
 
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -101,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;
@@ -119,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;
@@ -143,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);
 }
 
@@ -156,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 {
@@ -218,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

@@ -4,9 +4,7 @@
  */
 import { Component, h, Prop, Element, Host, State, Listen, Watch, Method, Event, Build } from "@stencil/core";
 import { getLocaleData } from "../calcite-date-picker/utils";
-import { getElementDir } from "../../utils/dom";
 import { dateFromRange, inRange, dateFromISO, dateToISO, parseDateString, sameDate } from "../../utils/date";
-import { getKey } from "../../utils/key";
 import { TEXT } from "../calcite-date-picker/resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
@@ -33,6 +31,10 @@ export class CalciteInputDatePicker {
      * @default "Next month"
      */
     this.intlNextMonth = TEXT.nextMonth;
+    /** Localized string for "year" (used for aria label)
+     * @default "Year"
+     */
+    this.intlYear = TEXT.year;
     /** BCP 47 language tag for desired language and country format */
     this.locale = document.documentElement.lang || "en";
     /** specify the scale of the date picker */
@@ -70,7 +72,7 @@ export class CalciteInputDatePicker {
       this.active = false;
     };
     this.keyUpHandler = (e) => {
-      if (getKey(e.key) === "Escape") {
+      if (e.key === "Escape") {
         this.active = false;
       }
     };
@@ -145,6 +147,12 @@ export class CalciteInputDatePicker {
       this.end = undefined;
     }
   }
+  onMinChanged(min) {
+    this.minAsDate = dateFromISO(min);
+  }
+  onMaxChanged(max) {
+    this.maxAsDate = dateFromISO(max);
+  }
   activeHandler() {
     this.reposition();
   }
@@ -153,6 +161,9 @@ export class CalciteInputDatePicker {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
+  handleDateOrRangeChange() {
+    this.calciteInputDatePickerChange.emit();
+  }
   calciteDaySelectHandler() {
     if (this.shouldFocusRangeStart() || this.shouldFocusRangeEnd()) {
       return;
@@ -216,6 +227,8 @@ export class CalciteInputDatePicker {
   }
   async componentWillLoad() {
     await this.loadLocaleData();
+    this.onMinChanged(this.min);
+    this.onMaxChanged(this.max);
   }
   disconnectedCallback() {
     this.destroyPopper();
@@ -231,9 +244,8 @@ export class CalciteInputDatePicker {
       : null;
     const formattedEndDate = endDate ? endDate.toLocaleDateString(this.locale) : "";
     const formattedDate = date ? date.toLocaleDateString(this.locale) : "";
-    const dir = getElementDir(this.el);
     return (h(Host, { onBlur: this.deactivate, onKeyUp: this.keyUpHandler, role: "application" },
-      this.localeData && (h("div", { "aria-expanded": this.active.toString(), class: "input-container", dir: dir, role: "application" },
+      this.localeData && (h("div", { "aria-expanded": this.active.toString(), class: "input-container", role: "application" },
         h("div", { class: "input-wrapper", ref: this.setStartWrapper },
           h("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", label: getLabelText(this), "number-button-type": "none", onCalciteInputBlur: this.inputBlur, onCalciteInputFocus: this.startInputFocus, onCalciteInputInput: this.inputInput, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, ref: this.setStartInput, scale: this.scale, type: "text", value: formattedDate })),
         h("div", { "aria-hidden": (!this.active).toString(), class: "menu-container", ref: this.setMenuEl },
@@ -243,7 +255,7 @@ export class CalciteInputDatePicker {
               [PopperCSS.animation]: true,
               [PopperCSS.animationActive]: this.active
             }, onTransitionEnd: this.transitionEnd },
-            h("calcite-date-picker", { activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, locale: this.locale, max: this.max, maxAsDate: this.maxAsDate, min: this.min, minAsDate: this.minAsDate, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, startAsDate: this.startAsDate, tabIndex: 0, valueAsDate: this.valueAsDate }))),
+            h("calcite-date-picker", { activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, locale: this.locale, max: this.max, maxAsDate: this.maxAsDate, min: this.min, minAsDate: this.minAsDate, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, startAsDate: this.startAsDate, tabIndex: 0, valueAsDate: this.valueAsDate }))),
         this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" },
           h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))),
         this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" },
@@ -251,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 })));
   }
@@ -342,6 +354,7 @@ export class CalciteInputDatePicker {
     }
     if (!this.range) {
       this.value = dateToISO(date);
+      this.calciteDatePickerChange.emit(date);
       return;
     }
     const { focusedInput } = this;
@@ -600,7 +613,7 @@ export class CalciteInputDatePicker {
     },
     "min": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -617,7 +630,7 @@ export class CalciteInputDatePicker {
     },
     "max": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -709,6 +722,27 @@ export class CalciteInputDatePicker {
       "reflect": false,
       "defaultValue": "TEXT.nextMonth"
     },
+    "intlYear": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "\"Year\""
+          }],
+        "text": "Localized string for \"year\" (used for aria label)"
+      },
+      "attribute": "intl-year",
+      "reflect": false,
+      "defaultValue": "TEXT.year"
+    },
     "locale": {
       "type": "string",
       "mutable": false,
@@ -895,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": {
@@ -917,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."
       },
@@ -930,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",
@@ -1005,6 +1060,12 @@ export class CalciteInputDatePicker {
   static get watchers() { return [{
       "propName": "value",
       "methodName": "valueHandler"
+    }, {
+      "propName": "min",
+      "methodName": "onMinChanged"
+    }, {
+      "propName": "max",
+      "methodName": "onMaxChanged"
     }, {
       "propName": "active",
       "methodName": "activeHandler"
@@ -1025,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,