@esri/calcite-components 1.0.0-beta.68 → 1.0.0-beta.71

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"; }
@@ -236,8 +193,8 @@ export class CalciteCheckbox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The hovered state of the checkbox."
       },
@@ -275,8 +232,8 @@ export class CalciteCheckbox {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The label of the checkbox input"
       },
@@ -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",
@@ -353,8 +327,8 @@ export class CalciteCheckbox {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Emitted when the checkbox is blurred"
       },
@@ -386,8 +360,8 @@ export class CalciteCheckbox {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Emitted when the checkbox is focused"
       },
@@ -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-chip/calcite-chip.js

@@ -164,8 +164,8 @@ export class CalciteChip {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Close\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Close\""
           }],
         "text": "Aria label for the \"x\" button"
       },

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();
@@ -543,23 +546,21 @@ export class CalciteColorPicker {
   //
   //--------------------------------------------------------------------------
   componentWillLoad() {
-    const storageKey = `${DEFAULT_STORAGE_KEY_PREFIX}${this.storageId}`;
-    if (this.storageId && localStorage.getItem(storageKey)) {
-      this.savedColors = JSON.parse(localStorage.getItem(storageKey));
-    }
-  }
-  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);
+    const storageKey = `${DEFAULT_STORAGE_KEY_PREFIX}${this.storageId}`;
+    if (this.storageId && localStorage.getItem(storageKey)) {
+      this.savedColors = JSON.parse(localStorage.getItem(storageKey));
+    }
   }
   disconnectedCallback() {
     document.removeEventListener("mousemove", this.globalMouseMoveHandler);
@@ -644,14 +645,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) {
@@ -850,8 +851,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Internal prop for advanced use-cases."
       },
@@ -874,8 +875,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"auto\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"auto\""
           }],
         "text": "The format of the value property.\n\nWhen \"auto\", the format will be inferred from `value` when set."
       },
@@ -949,8 +950,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"B\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"B\""
           }],
         "text": "Label used for the blue channel"
       },
@@ -970,8 +971,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Blue\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Blue\""
           }],
         "text": "Label used for the blue channel description"
       },
@@ -991,8 +992,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Delete color\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Delete color\""
           }],
         "text": "Label used for the delete color button."
       },
@@ -1012,8 +1013,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"G\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"G\""
           }],
         "text": "Label used for the green channel"
       },
@@ -1033,8 +1034,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Green\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Green\""
           }],
         "text": "Label used for the green channel description"
       },
@@ -1054,8 +1055,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"H\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"H\""
           }],
         "text": "Label used for the hue channel"
       },
@@ -1075,8 +1076,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"HSV\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"HSV\""
           }],
         "text": "Label used for the HSV mode"
       },
@@ -1096,8 +1097,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Hex\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Hex\""
           }],
         "text": "Label used for the hex input"
       },
@@ -1117,8 +1118,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Hue\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Hue\""
           }],
         "text": "Label used for the hue channel description"
       },
@@ -1138,8 +1139,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"No color\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"No color\""
           }],
         "text": "Label used for the hex input when there is no color selected."
       },
@@ -1159,8 +1160,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"R\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"R\""
           }],
         "text": "Label used for the red channel"
       },
@@ -1180,8 +1181,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Red\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Red\""
           }],
         "text": "Label used for the red channel description"
       },
@@ -1201,8 +1202,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"RGB\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"RGB\""
           }],
         "text": "Label used for the RGB mode"
       },
@@ -1222,8 +1223,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"S\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"S\""
           }],
         "text": "Label used for the saturation channel"
       },
@@ -1243,8 +1244,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Saturation\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Saturation\""
           }],
         "text": "Label used for the saturation channel description"
       },
@@ -1264,8 +1265,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Save color\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Save color\""
           }],
         "text": "Label used for the save color button."
       },
@@ -1285,8 +1286,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Saved\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Saved\""
           }],
         "text": "Label used for the saved colors section"
       },
@@ -1306,8 +1307,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"V\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"V\""
           }],
         "text": "Label used for the value channel"
       },
@@ -1327,8 +1328,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Value\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Value\""
           }],
         "text": "Label used for the"
       },
@@ -1393,11 +1394,11 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"#007ac2\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"#007ac2\""
           }, {
-            "text": " [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-color-picker/interfaces.ts#L10)",
-            "name": "see"
+            "name": "see",
+            "text": " [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-color-picker/interfaces.ts#L10)"
           }],
         "text": "The color value.\n\nThis value can be either a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color|CSS string}\na RGB, HSL or HSV object.\n\nThe type will be preserved as the color is updated."
       },