@esri/calcite-components 1.0.0-next.294 → 1.0.0-next.298

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

@@ -2,16 +2,17 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
-import { getElementDir, getElementProp, setRequestedIcon, closestElementCrossShadowBoundary } from "../../utils/dom";
+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";
 import { getDecimalSeparator, delocalizeNumberString, localizeNumberString } from "../../utils/locale";
 import { numberKeys } from "../../utils/key";
-import { hiddenInputStyle } from "../../utils/form";
 import { isValidNumber, parseNumberString, sanitizeNumberString } from "../../utils/number";
 import { CSS_UTILITY, TEXT } from "../../utils/resources";
+import { decimalPlaces } from "../../utils/math";
 /**
  * @slot action - A slot for positioning a button next to an input
  */
@@ -34,6 +35,8 @@ export class CalciteInput {
     this.disabled = false;
     /** for number values, displays the locale's group separator */
     this.groupSeparator = false;
+    /** when true, the component will not be visible */
+    this.hidden = false;
     /**
      * string to override English loading text
      * @default "Loading"
@@ -60,6 +63,8 @@ export class CalciteInput {
     this.scale = "m";
     /** specify the status of the input field, determines message and icons */
     this.status = "idle";
+    /** @internal adds inline styles for text input when slotted in calcite-inline-editable */
+    this.editingEnabled = false;
     /**
      * specify the input type
      *
@@ -68,6 +73,20 @@ export class CalciteInput {
     this.type = "text";
     /** keep track of the rendered child type */
     this.childElType = "input";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.keyDownHandler = (event) => {
+      if (this.readOnly || this.disabled) {
+        return;
+      }
+      if (this.isClearable && getKey(event.key) === "Escape") {
+        this.clearInputValue(event);
+        event.preventDefault();
+      }
+    };
     this.clearInputValue = (nativeEvent) => {
       this.setValue(null, nativeEvent, true);
     };
@@ -190,12 +209,6 @@ export class CalciteInput {
       const direction = event.target.dataset.adjustment;
       this.nudgeNumberValue(direction, event);
     };
-    this.reset = (nativeEvent) => {
-      if (this.type === "number") {
-        nativeEvent.preventDefault();
-      }
-      this.setValue(this.defaultValue, nativeEvent);
-    };
     this.setChildElRef = (el) => {
       this.childEl = el;
     };
@@ -272,10 +285,10 @@ export class CalciteInput {
   //--------------------------------------------------------------------------
   connectedCallback() {
     var _a;
-    this.form = closestElementCrossShadowBoundary(this.el, "form");
-    (_a = this.form) === null || _a === void 0 ? void 0 : _a.addEventListener("reset", this.reset);
     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);
@@ -285,16 +298,15 @@ export class CalciteInput {
       }
     }
     connectLabel(this);
+    connectForm(this);
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.form) === null || _a === void 0 ? void 0 : _a.removeEventListener("reset", this.reset);
     disconnectLabel(this);
+    disconnectForm(this);
   }
   componentWillLoad() {
     var _a, _b;
     this.childElType = this.type === "textarea" ? "textarea" : "input";
-    this.defaultValue = this.value;
     this.maxString = (_a = this.max) === null || _a === void 0 ? void 0 : _a.toString();
     this.minString = (_b = this.min) === null || _b === void 0 ? void 0 : _b.toString();
     this.requestedIcon = setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
@@ -302,9 +314,6 @@ export class CalciteInput {
   componentDidLoad() {
     this.slottedActionEl = this.el.querySelector("[slot=action]");
     this.setDisabledAction();
-    if (this.type === "number" && this.childEl) {
-      this.childEl.style.cssText = hiddenInputStyle;
-    }
   }
   componentShouldUpdate(newValue, oldValue, property) {
     if (this.type === "number" && property === "value" && newValue && !isValidNumber(newValue)) {
@@ -315,20 +324,6 @@ export class CalciteInput {
   }
   //--------------------------------------------------------------------------
   //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  keyDownHandler(event) {
-    if (this.readOnly || this.disabled) {
-      return;
-    }
-    if (this.isClearable && getKey(event.key) === "Escape") {
-      this.clearInputValue(event);
-      event.preventDefault();
-    }
-  }
-  //--------------------------------------------------------------------------
-  //
   //  Public Methods
   //
   //--------------------------------------------------------------------------
@@ -342,11 +337,6 @@ export class CalciteInput {
       (_b = this.childEl) === null || _b === void 0 ? void 0 : _b.focus();
     }
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   onLabelClick() {
     this.setFocus();
   }
@@ -356,13 +346,36 @@ export class CalciteInput {
     const inputVal = value && value !== "" ? parseFloat(value) : 0;
     let newValue = value;
     if (direction === "up" && ((!inputMax && inputMax !== 0) || inputVal < inputMax)) {
-      newValue = (inputVal + inputStep).toString();
+      newValue = (inputVal + inputStep).toFixed(decimalPlaces(inputStep)).toString();
     }
     if (direction === "down" && ((!inputMin && inputMin !== 0) || inputVal > inputMin)) {
-      newValue = (inputVal - inputStep).toString();
+      newValue = (inputVal - inputStep).toFixed(decimalPlaces(inputStep)).toString();
     }
     this.setValue(newValue, nativeEvent, true);
   }
+  onFormReset() {
+    this.setValue(this.defaultValue);
+  }
+  syncHiddenFormInput(input) {
+    var _a, _b, _c, _d;
+    if (this.type === "number") {
+      input.type = "number";
+      input.min = (_b = (_a = this.min) === null || _a === void 0 ? void 0 : _a.toString(10)) !== null && _b !== void 0 ? _b : "";
+      input.max = (_d = (_c = this.max) === null || _c === void 0 ? void 0 : _c.toString(10)) !== null && _d !== void 0 ? _d : "";
+    }
+    else if (this.type === "text") {
+      input.type = "text";
+      if (this.minLength != null) {
+        input.minLength = this.minLength;
+      }
+      if (this.maxLength != null) {
+        input.maxLength = this.maxLength;
+      }
+    }
+    else if (this.type === "password") {
+      input.type = "password";
+    }
+  }
   setDisabledAction() {
     if (!this.slottedActionEl) {
       return;
@@ -400,13 +413,18 @@ 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, 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 childEl = [
-      h(this.childElType, { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, name: this.name, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, onKeyUp: this.inputKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || this.type === "number" ? -1 : null, type: this.type, value: this.value }),
-      this.isTextarea ? (h("div", { class: CSS.resizeIconWrapper },
-        h("calcite-icon", { icon: "chevron-down", scale: "s" }))) : null
-    ];
-    return (h(Host, { onClick: this.inputFocusHandler },
+    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 childEl = this.type !== "number"
+      ? [
+        h(this.childElType, { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, class: {
+            [CSS.editingEnabled]: this.editingEnabled,
+            [CSS.inlineChild]: !!this.inlineEditableEl
+          }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint, inputMode: this.el.inputMode, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, name: this.name, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, onKeyUp: this.inputKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: this.type, value: this.value }),
+        this.isTextarea ? (h("div", { class: CSS.resizeIconWrapper },
+          h("calcite-icon", { icon: "chevron-down", scale: "s" }))) : null
+      ]
+      : 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"
           ? numberButtonsHorizontalDown
@@ -426,10 +444,11 @@ export class CalciteInput {
         this.suffixText ? suffixText : null,
         this.type === "number" && this.numberButtonType === "horizontal"
           ? numberButtonsHorizontalUp
-          : null)));
+          : null,
+        h(HiddenFormInputSlot, { component: this }))));
   }
   static get is() { return "calcite-input"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["calcite-input.scss"]
   }; }
@@ -532,6 +551,24 @@ export class CalciteInput {
       "reflect": false,
       "defaultValue": "false"
     },
+    "hidden": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "when true, the component will not be visible"
+      },
+      "attribute": "hidden",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "icon": {
       "type": "any",
       "mutable": false,
@@ -759,7 +796,7 @@ export class CalciteInput {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "The name of the input"
@@ -940,6 +977,27 @@ export class CalciteInput {
       "attribute": "suffix-text",
       "reflect": false
     },
+    "editingEnabled": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": "adds inline styles for text input when slotted in calcite-inline-editable"
+          }],
+        "text": ""
+      },
+      "attribute": "editing-enabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "type": {
       "type": "string",
       "mutable": false,
@@ -967,7 +1025,7 @@ export class CalciteInput {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "input value"
@@ -1087,11 +1145,4 @@ export class CalciteInput {
       "propName": "type",
       "methodName": "updateRequestedIcon"
     }]; }
-  static get listeners() { return [{
-      "name": "keydown",
-      "method": "keyDownHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
 }

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

@@ -3,18 +3,20 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 export const CSS = {
-  loader: "calcite-input__loader",
-  clearButton: "calcite-input__clear-button",
-  inputIcon: "calcite-input__icon",
-  prefix: "calcite-input__prefix",
-  suffix: "calcite-input__suffix",
-  numberButtonWrapper: "calcite-input__number-button-wrapper",
-  buttonItemHorizontal: "calcite-input__number-button-item--horizontal",
-  wrapper: "calcite-input__element-wrapper",
-  inputWrapper: "calcite-input__wrapper",
-  actionWrapper: "calcite-input__action-wrapper",
-  resizeIconWrapper: "calcite-input__resize-icon-wrapper",
-  numberButtonItem: "calcite-input__number-button-item"
+  loader: "loader",
+  clearButton: "clear-button",
+  editingEnabled: "editing-enabled",
+  inlineChild: "inline-child",
+  inputIcon: "icon",
+  prefix: "prefix",
+  suffix: "suffix",
+  numberButtonWrapper: "number-button-wrapper",
+  buttonItemHorizontal: "number-button-item--horizontal",
+  wrapper: "element-wrapper",
+  inputWrapper: "wrapper",
+  actionWrapper: "action-wrapper",
+  resizeIconWrapper: "resize-icon-wrapper",
+  numberButtonItem: "number-button-item"
 };
 export const INPUT_TYPE_ICONS = {
   tel: "phone",

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

@@ -250,4 +250,19 @@
 
 :host([range][layout=vertical][active]) .vertical-arrow-container {
   display: none;
+}
+
+::slotted(input[slot=hidden-form-input]) {
+  bottom: 0 !important;
+  left: 0 !important;
+  margin: 0 !important;
+  opacity: 0 !important;
+  outline: none !important;
+  padding: 0 !important;
+  position: absolute !important;
+  right: 0 !important;
+  top: 0 !important;
+  transform: none !important;
+  -webkit-appearance: none !important;
+  z-index: -1 !important;
 }