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

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

@@ -2,11 +2,11 @@
  * 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 { Component, Element, Event, h, Host, Method, Prop } from "@stencil/core";
 import { guid } from "../../utils/guid";
-import { focusElement, closestElementCrossShadowBoundary } from "../../utils/dom";
-import { hiddenInputStyle } from "../../utils/form";
+import { HiddenFormInputSlot } from "../../utils/form";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
+import { connectForm, disconnectForm } from "../../utils/form";
 export class CalciteCheckbox {
   constructor() {
     //--------------------------------------------------------------------------
@@ -29,8 +29,12 @@ export class CalciteCheckbox {
      * https://css-tricks.com/indeterminate-checkboxes/
      * */
     this.indeterminate = false;
-    /** The name of the checkbox input */
-    this.name = "";
+    /**
+     * When true, makes the component required for form-submission.
+     *
+     * @internal
+     */
+    this.required = false;
     /** specify the scale of the checkbox, defaults to m */
     this.scale = "m";
     //--------------------------------------------------------------------------
@@ -42,13 +46,6 @@ export class CalciteCheckbox {
     this.indeterminatePath = "M13 8v1H3V8z";
     //--------------------------------------------------------------------------
     //
-    //  State
-    //
-    //--------------------------------------------------------------------------
-    /** The focused state of the checkbox. */
-    this.focused = false;
-    //--------------------------------------------------------------------------
-    //
     //  Private Methods
     //
     //--------------------------------------------------------------------------
@@ -56,26 +53,34 @@ export class CalciteCheckbox {
     this.toggle = () => {
       if (!this.disabled) {
         this.checked = !this.checked;
-        focusElement(this.input);
+        this.setFocus();
         this.indeterminate = false;
         this.calciteCheckboxChange.emit();
       }
     };
+    this.keyDownHandler = (event) => {
+      if (event.key === " " || event.key === "Enter") {
+        this.toggle();
+        event.preventDefault();
+      }
+    };
     this.clickHandler = () => {
       this.toggle();
     };
-    this.formResetHandler = () => {
-      this.checked = this.initialChecked;
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    this.onToggleBlur = () => {
+      this.calciteInternalCheckboxBlur.emit(false);
+    };
+    this.onToggleFocus = () => {
+      this.calciteInternalCheckboxFocus.emit(true);
+    };
+    this.onLabelClick = () => {
+      this.toggle();
     };
-  }
-  checkedWatcher(newChecked) {
-    this.input.checked = newChecked;
-  }
-  disabledChanged(disabled) {
-    this.input.disabled = disabled;
-  }
-  nameChanged(newName) {
-    this.input.name = newName;
   }
   //--------------------------------------------------------------------------
   //
@@ -84,29 +89,8 @@ export class CalciteCheckbox {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    focusElement(this.input);
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  mouseenter() {
-    this.hovered = true;
-  }
-  mouseleave() {
-    this.hovered = false;
-  }
-  onInputBlur() {
-    this.focused = false;
-    this.calciteInternalCheckboxBlur.emit(false);
-  }
-  onInputFocus() {
-    this.focused = true;
-    this.calciteInternalCheckboxFocus.emit(true);
-  }
-  onLabelClick() {
-    this.toggle();
+    var _a;
+    (_a = this.toggleEl) === null || _a === void 0 ? void 0 : _a.focus();
   }
   //--------------------------------------------------------------------------
   //
@@ -115,52 +99,25 @@ export class CalciteCheckbox {
   //--------------------------------------------------------------------------
   connectedCallback() {
     this.guid = this.el.id || `calcite-checkbox-${guid()}`;
-    this.initialChecked = this.checked;
-    this.renderHiddenCheckboxInput();
-    const form = closestElementCrossShadowBoundary(this.el, "form");
-    if (form) {
-      form.addEventListener("reset", this.formResetHandler);
-    }
     connectLabel(this);
-  }
-  componentDidLoad() {
-    this.input.setAttribute("aria-label", getLabelText(this));
+    connectForm(this);
   }
   disconnectedCallback() {
-    this.input.parentNode.removeChild(this.input);
-    const form = closestElementCrossShadowBoundary(this.el, "form");
-    if (form) {
-      form.removeEventListener("reset", this.formResetHandler);
-    }
     disconnectLabel(this);
+    disconnectForm(this);
   }
   // --------------------------------------------------------------------------
   //
   //  Render Methods
   //
   // --------------------------------------------------------------------------
-  renderHiddenCheckboxInput() {
-    this.input = document.createElement("input");
-    this.checked && this.input.setAttribute("checked", "");
-    this.input.disabled = this.disabled;
-    this.input.id = `${this.guid}-input`;
-    this.input.name = this.name;
-    this.input.onblur = this.onInputBlur.bind(this);
-    this.input.onfocus = this.onInputFocus.bind(this);
-    this.input.style.cssText = hiddenInputStyle;
-    this.input.type = "checkbox";
-    this.input.setAttribute("aria-label", getLabelText(this));
-    if (this.value) {
-      this.input.value = this.value != null ? this.value.toString() : "";
-    }
-    this.el.appendChild(this.input);
-  }
   render() {
-    return (h(Host, { onClick: this.clickHandler },
-      h("div", { class: { focused: this.focused } },
+    return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler },
+      h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: "toggle", onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: 0 },
         h("svg", { class: "check-svg", viewBox: "0 0 16 16" },
           h("path", { d: this.getPath() })),
-        h("slot", null))));
+        h("slot", null)),
+      h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-checkbox"; }
   static get encapsulation() { return "shadow"; }
@@ -284,22 +241,42 @@ export class CalciteCheckbox {
       "reflect": false
     },
     "name": {
-      "type": "string",
+      "type": "any",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "any",
+        "resolved": "any",
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "The name of the checkbox input"
       },
       "attribute": "name",
+      "reflect": true
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "When true, makes the component required for form-submission."
+      },
+      "attribute": "required",
       "reflect": true,
-      "defaultValue": "\"\""
+      "defaultValue": "false"
     },
     "scale": {
       "type": "string",
@@ -333,7 +310,7 @@ export class CalciteCheckbox {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "The value of the checkbox input"
@@ -342,9 +319,6 @@ export class CalciteCheckbox {
       "reflect": false
     }
   }; }
-  static get states() { return {
-    "focused": {}
-  }; }
   static get events() { return [{
       "method": "calciteInternalCheckboxBlur",
       "name": "calciteInternalCheckboxBlur",
@@ -416,27 +390,4 @@ export class CalciteCheckbox {
     }
   }; }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "checked",
-      "methodName": "checkedWatcher"
-    }, {
-      "propName": "disabled",
-      "methodName": "disabledChanged"
-    }, {
-      "propName": "name",
-      "methodName": "nameChanged"
-    }]; }
-  static get listeners() { return [{
-      "name": "mouseenter",
-      "method": "mouseenter",
-      "target": undefined,
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "mouseleave",
-      "method": "mouseleave",
-      "target": undefined,
-      "capture": false,
-      "passive": true
-    }]; }
 }

package/dist/collection/components/calcite-color-picker/calcite-color-picker.js

@@ -140,9 +140,9 @@ export class CalciteColorPicker {
      * @see [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-color-picker/interfaces.ts#L10)
      */
     this.value = defaultValue;
-    this.colorUpdateLocked = false;
     this.colorFieldAndSliderHovered = false;
     this.hueThumbState = "idle";
+    this.internalColorUpdateContext = null;
     this.mode = CSSColorMode.HEX;
     this.shiftKeyChannelAdjustment = 0;
     this.sliderThumbState = "idle";
@@ -452,7 +452,7 @@ export class CalciteColorPicker {
     this.drawColorFieldAndSlider();
     this.updateChannelsFromColor(color);
     this.previousColor = oldColor;
-    if (this.colorUpdateLocked) {
+    if (this.internalColorUpdateContext) {
       return;
     }
     this.value = this.toValue(color);
@@ -479,7 +479,10 @@ export class CalciteColorPicker {
       this.setMode(nextMode);
     }
     const dragging = this.sliderThumbState === "drag" || this.hueThumbState === "drag";
-    if (this.colorUpdateLocked) {
+    if (this.internalColorUpdateContext) {
+      if (this.internalColorUpdateContext === "initial") {
+        return;
+      }
       this.calciteColorPickerInput.emit();
       if (!dragging) {
         this.calciteColorPickerChange.emit();
@@ -550,15 +553,15 @@ export class CalciteColorPicker {
   }
   connectedCallback() {
     const { allowEmpty, color, format, value } = this;
-    const valueIsNoColor = allowEmpty && !value;
+    const willSetNoColor = allowEmpty && !value;
     const parsedMode = parseMode(value);
-    const valueIsCompatible = (format === "auto" && parsedMode) || format === parsedMode;
-    const initialColor = valueIsNoColor ? null : valueIsCompatible ? Color(value) : color;
+    const valueIsCompatible = willSetNoColor || (format === "auto" && parsedMode) || format === parsedMode;
+    const initialColor = willSetNoColor ? null : valueIsCompatible ? Color(value) : color;
     if (!valueIsCompatible) {
       this.showIncompatibleColorWarning(value, format);
     }
     this.setMode(format);
-    this.internalColorSet(initialColor, false);
+    this.internalColorSet(initialColor, false, "initial");
     this.updateDimensions(this.scale);
   }
   disconnectedCallback() {
@@ -644,14 +647,14 @@ export class CalciteColorPicker {
     }
     return "none";
   }
-  internalColorSet(color, skipEqual = true) {
+  internalColorSet(color, skipEqual = true, context = "internal") {
     if (skipEqual && colorEqual(color, this.color)) {
       return;
     }
-    this.colorUpdateLocked = true;
+    this.internalColorUpdateContext = context;
     this.color = color;
     this.value = this.toValue(color);
-    this.colorUpdateLocked = false;
+    this.internalColorUpdateContext = null;
   }
   toValue(color, format = this.mode) {
     if (!color) {

package/dist/collection/components/calcite-color-picker-hex-input/calcite-color-picker-hex-input.js

@@ -41,8 +41,8 @@ export class CalciteColorPickerHexInput {
      * The hex value.
      */
     this.value = normalizeHex(DEFAULT_COLOR.hex());
-    this.onCalciteInputBlur = (event) => {
-      const node = event.currentTarget;
+    this.onCalciteInputBlur = () => {
+      const node = this.inputNode;
       const inputValue = node.value;
       const hex = `#${inputValue}`;
       const willClearValue = this.allowEmpty && !inputValue;
@@ -55,9 +55,8 @@ export class CalciteColorPickerHexInput {
           ? ""
           : this.formatForInternalInput(rgbToHex(this.internalColor.object()));
     };
-    this.onInputChange = (event) => {
-      const node = event.currentTarget;
-      const inputValue = node.value;
+    this.onInputChange = () => {
+      const inputValue = this.inputNode.value;
       let value;
       if (inputValue) {
         const hex = inputValue;
@@ -133,8 +132,12 @@ export class CalciteColorPickerHexInput {
   // using @Listen as a workaround for VDOM listener not firing
   onInputKeyDown(event) {
     const { altKey, ctrlKey, metaKey, shiftKey } = event;
-    const { el, inputNode, internalColor, value } = this;
+    const { internalColor, value } = this;
     const key = getKey(event.key);
+    if (key === "Tab" || key === "Enter") {
+      this.onInputChange();
+      return;
+    }
     const isNudgeKey = key === "ArrowDown" || key === "ArrowUp";
     if (isNudgeKey) {
       if (!value) {
@@ -149,16 +152,9 @@ export class CalciteColorPickerHexInput {
       return;
     }
     const withModifiers = altKey || ctrlKey || metaKey;
-    const exceededHexLength = inputNode.value.length >= 6;
-    const focusedElement = el.shadowRoot.activeElement;
-    const hasTextSelection = 
-    // can't use window.getSelection() because of FF bug: https://bugzilla.mozilla.org/show_bug.cgi?id=85686
-    focusedElement.selectionStart != focusedElement.selectionEnd;
     const singleChar = key.length === 1;
     const validHexChar = hexChar.test(key);
-    if (singleChar &&
-      !withModifiers &&
-      (!validHexChar || (!hasTextSelection && exceededHexLength))) {
+    if (singleChar && !withModifiers && !validHexChar) {
       event.preventDefault();
     }
   }
@@ -172,7 +168,7 @@ export class CalciteColorPickerHexInput {
     const hexInputValue = this.formatForInternalInput(value);
     const elementDir = getElementDir(el);
     return (h("div", { class: CSS.container },
-      h("calcite-input", { class: CSS.input, dir: elementDir, label: intlHex, onCalciteInputBlur: this.onCalciteInputBlur, onChange: this.onInputChange, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }),
+      h("calcite-input", { class: CSS.input, dir: elementDir, label: intlHex, maxLength: 6, onCalciteInputBlur: this.onCalciteInputBlur, onCalciteInputChange: this.onInputChange, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }),
       hexInputValue ? (h("calcite-color-picker-swatch", { active: true, class: CSS.preview, color: `#${hexInputValue}`, scale: this.scale })) : null));
   }
   //--------------------------------------------------------------------------

package/dist/collection/components/calcite-combobox/calcite-combobox.css

@@ -350,4 +350,19 @@
 
 .item {
   display: block;
+}
+
+::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;
 }