@esri/calcite-components 1.0.0-next.292 → 1.0.0-next.296

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

@@ -131,23 +131,19 @@
   color: var(--calcite-ui-background);
 }
 
-:host ::slotted(input) {
-  width: var(--calcite-checkbox-size);
-  height: var(--calcite-checkbox-size);
-}
-
-:host(:hover) .check-svg,
-:host([hovered]) .check-svg {
-  box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
-}
-
 :host([checked]) .check-svg,
 :host([indeterminate]) .check-svg {
   background-color: var(--calcite-ui-brand);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand);
 }
 
-:host .focused .check-svg {
+:host([hovered]) .toggle .check-svg,
+:host .toggle:hover .check-svg {
+  box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
+}
+
+:host .toggle:focus .check-svg,
+:host .toggle:active .check-svg {
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
   transition: 150ms ease-in-out;
 }
@@ -156,4 +152,19 @@
   cursor: default;
   opacity: var(--calcite-ui-opacity-disabled);
   pointer-events: 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;
 }

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"
       },