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

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

@@ -2,9 +2,10 @@
  * 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, Fragment, h, Listen, Method, Prop } from "@stencil/core";
+import { Component, Element, Event, Fragment, h, Listen, Method, Prop, Watch } from "@stencil/core";
 import { focusElement, getElementDir } from "../../utils/dom";
 import { connectLabel, disconnectLabel } from "../../utils/label";
+import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { CSS } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
 import { createObserver } from "../../utils/observers";
@@ -28,10 +29,18 @@ export class CalciteSelect {
      * When true, it prevents the option from being selected.
      */
     this.disabled = false;
+    /**
+     * When true, makes the component required for form-submission.
+     *
+     * @internal
+     */
+    this.required = false;
     /**
      * The component scale.
      */
     this.scale = "m";
+    /** The value of the selectedOption */
+    this.value = null;
     /**
      * The component width.
      */
@@ -44,7 +53,7 @@ export class CalciteSelect {
       requestAnimationFrame(() => this.emitChangeEvent());
     };
     this.populateInternalSelect = () => {
-      const optionsAndGroups = Array.from(this.el.children);
+      const optionsAndGroups = Array.from(this.el.children).filter((child) => child.tagName === "CALCITE-OPTION" || child.tagName === "CALCITE-OPTION-GROUP");
       this.clearInternalSelect();
       optionsAndGroups.forEach((optionOrGroup) => { var _a; return (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.append(this.toNativeElement(optionOrGroup)); });
     };
@@ -58,6 +67,13 @@ export class CalciteSelect {
       this.calciteSelectChange.emit();
     };
   }
+  valueHandler(value) {
+    const items = this.el.querySelectorAll("calcite-option");
+    items.forEach((item) => (item.selected = item.value === value));
+  }
+  selectedOptionHandler(selectedOption) {
+    this.value = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value;
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -71,11 +87,17 @@ export class CalciteSelect {
       childList: true
     });
     connectLabel(this);
+    connectForm(this);
   }
   disconnectedCallback() {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     disconnectLabel(this);
+    disconnectForm(this);
+  }
+  componentDidLoad() {
+    var _a, _b;
+    afterConnectDefaultValueSet(this, (_b = (_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "");
   }
   //--------------------------------------------------------------------------
   //
@@ -180,7 +202,8 @@ export class CalciteSelect {
     return (h(Fragment, null,
       h("select", { "aria-label": this.label, class: { [CSS.select]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, disabled: this.disabled, onChange: this.handleInternalSelectChange, ref: this.storeSelectRef },
         h("slot", null)),
-      this.renderChevron(dir)));
+      this.renderChevron(dir),
+      h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-select"; }
   static get encapsulation() { return "shadow"; }
@@ -226,6 +249,44 @@ export class CalciteSelect {
       "attribute": "label",
       "reflect": false
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The select's name. Gets submitted with the form."
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "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": "false"
+    },
     "scale": {
       "type": "string",
       "mutable": false,
@@ -249,6 +310,24 @@ export class CalciteSelect {
       "reflect": true,
       "defaultValue": "\"m\""
     },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The value of the selectedOption"
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "null"
+    },
     "selectedOption": {
       "type": "unknown",
       "mutable": true,
@@ -330,6 +409,13 @@ export class CalciteSelect {
     }
   }; }
   static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "valueHandler"
+    }, {
+      "propName": "selectedOption",
+      "methodName": "selectedOptionHandler"
+    }]; }
   static get listeners() { return [{
       "name": "calciteOptionChange",
       "method": "handleOptionOrGroupChange",

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

@@ -125,11 +125,6 @@
   display: flex;
   flex-direction: row;
   position: relative;
-  border-width: 0;
-  border-top-width: 1px;
-  border-bottom-width: 1px;
-  border-style: solid;
-  border-color: var(--calcite-ui-border-3);
   justify-content: space-between;
   overflow: hidden;
 }
@@ -140,15 +135,11 @@
 
 .content {
   display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
   height: 100%;
   overflow: auto;
   width: 100%;
-  border-width: 0;
-  border-left-width: 1px;
-  border-right-width: 1px;
-  border-style: solid;
-  border-color: var(--calcite-ui-border-3);
-  flex-flow: column nowrap;
 }
 
 .content ::slotted(calcite-shell-center-row),
@@ -186,6 +177,15 @@
   z-index: 1;
 }
 
+::slotted(calcite-panel),
+::slotted(calcite-flow) {
+  border-width: 1px;
+  border-color: var(--calcite-ui-border-3);
+  border-style: solid;
+  border-left-width: 0;
+  border-right-width: 0;
+}
+
 slot[name=center-row]::slotted(calcite-shell-center-row:not([detached])) {
   border-left-width: 1px;
   border-right-width: 1px;

package/dist/collection/components/calcite-shell-panel/calcite-shell-panel.css

@@ -76,18 +76,6 @@
 * Currently only used in Checkbox.
 */
 
-:host {
-  /* Base ":host" styles for the component */
-  box-sizing: border-box;
-  background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-2);
-  font-size: var(--calcite-font-size--1);
-}
-
-:host * {
-  box-sizing: border-box;
-}
-
 :root {
   --calcite-popper-transition: 150ms ease-in-out;
 }
@@ -97,11 +85,25 @@
 }
 
 :host {
+  display: flex;
+  align-items: stretch;
+  flex: 0 1 auto;
+  --calcite-shell-panel-detached-max-height: unset;
+}
+
+.container {
+  box-sizing: border-box;
   display: flex;
   align-items: stretch;
   background-color: transparent;
+  flex: 1 1 auto;
   pointer-events: none;
-  --calcite-shell-panel-detached-max-height: unset;
+  color: var(--calcite-ui-text-2);
+  font-size: var(--calcite-font-size--1);
+}
+
+.container * {
+  box-sizing: border-box;
 }
 
 ::slotted(calcite-panel),
@@ -196,18 +198,33 @@
   max-height: unset;
 }
 
+:host([position=start]) .content--detached ::slotted(calcite-panel),
+:host([position=start]) .content--detached ::slotted(calcite-flow),
+:host([position=end]) .content--detached ::slotted(calcite-panel),
+:host([position=end]) .content--detached ::slotted(calcite-flow) {
+  border-style: none;
+}
+
 .content[hidden] {
   display: none;
 }
 
-:host([position=start]) slot[name=action-bar]::slotted(calcite-action-bar) {
-  border-right-width: 1px;
-  border-right-color: var(--calcite-ui-border-3);
-  border-right-style: solid;
+slot[name=action-bar]::slotted(calcite-action-bar),
+.content ::slotted(calcite-flow),
+.content ::slotted(calcite-panel) {
+  border-width: 1px;
+  border-color: var(--calcite-ui-border-3);
+  border-style: solid;
+}
+
+:host([position=start]) slot[name=action-bar]::slotted(calcite-action-bar),
+:host([position=start]) .content ::slotted(calcite-flow),
+:host([position=start]) .content ::slotted(calcite-panel) {
+  border-inline-start: none;
 }
 
-:host([position=end]) slot[name=action-bar]::slotted(calcite-action-bar) {
-  border-left-width: 1px;
-  border-left-color: var(--calcite-ui-border-3);
-  border-left-style: solid;
+:host([position=end]) slot[name=action-bar]::slotted(calcite-action-bar),
+:host([position=end]) .content ::slotted(calcite-flow),
+:host([position=end]) .content ::slotted(calcite-panel) {
+  border-inline-end: none;
 }

package/dist/collection/components/calcite-shell-panel/calcite-shell-panel.js

@@ -2,7 +2,7 @@
  * 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, Prop, Watch, h, Fragment } from "@stencil/core";
+import { Component, Element, Event, Prop, Watch, h } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
 import { getSlotted } from "../../utils/dom";
 /**
@@ -58,7 +58,7 @@ export class CalciteShellPanel {
     if (position === "end") {
       mainNodes.reverse();
     }
-    return h(Fragment, null, mainNodes);
+    return h("div", { class: { [CSS.container]: true } }, mainNodes);
   }
   static get is() { return "calcite-shell-panel"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/calcite-shell-panel/resources.js

@@ -3,6 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 export const CSS = {
+  container: "container",
   content: "content",
   contentHeader: "content__header",
   contentBody: "content__body",

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

@@ -420,4 +420,19 @@
   right: unset;
   left: 0;
   text-align: left;
+}
+
+::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-slider/calcite-slider.js

@@ -8,6 +8,7 @@ import { getKey } from "../../utils/key";
 import { intersects } from "../../utils/dom";
 import { clamp } from "../../utils/math";
 import { connectLabel, disconnectLabel } from "../../utils/label";
+import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 export class CalciteSlider {
   constructor() {
     //--------------------------------------------------------------------------
@@ -35,6 +36,10 @@ export class CalciteSlider {
     this.mirrored = false;
     /** Use finer point for handles */
     this.precise = false;
+    /**
+     * When true, makes the component required for form-submission.
+     */
+    this.required = false;
     /** When true, enables snap selection along the step interval */
     this.snap = false;
     /** Interval to move on up/down keys */
@@ -107,14 +112,17 @@ export class CalciteSlider {
   //--------------------------------------------------------------------------
   connectedCallback() {
     connectLabel(this);
+    connectForm(this);
   }
   disconnectedCallback() {
     disconnectLabel(this);
+    disconnectForm(this);
   }
   componentWillLoad() {
     this.isRange = !!(this.maxValue || this.maxValue === 0);
     this.tickValues = this.generateTickValues();
     this.value = this.clamp(this.value);
+    afterConnectDefaultValueSet(this, this.value);
     if (this.snap) {
       this.value = this.getClosestStep(this.value);
     }
@@ -292,7 +300,8 @@ export class CalciteSlider {
         this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle,
         !this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle,
         this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle,
-        this.hasHistogram && this.precise && this.labelHandles && histogramLabeledPreciseHandle)));
+        this.hasHistogram && this.precise && this.labelHandles && histogramLabeledPreciseHandle,
+        h(HiddenFormInputSlot, { component: this }))));
   }
   renderGraph() {
     return this.histogram ? (h("div", { class: "graph" },
@@ -980,6 +989,23 @@ export class CalciteSlider {
       "reflect": true,
       "defaultValue": "false"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The name of the slider"
+      },
+      "attribute": "name",
+      "reflect": true
+    },
     "pageStep": {
       "type": "number",
       "mutable": false,
@@ -1015,6 +1041,24 @@ export class CalciteSlider {
       "reflect": false,
       "defaultValue": "false"
     },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, makes the component required for form-submission."
+      },
+      "attribute": "required",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "snap": {
       "type": "boolean",
       "mutable": false,

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

@@ -233,4 +233,19 @@
 :host([checked]:focus) .calcite--rtl .handle {
   right: auto;
   left: -1px;
+}
+
+::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-switch/calcite-switch.js

@@ -2,13 +2,12 @@
  * 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 } from "../../utils/dom";
-import { hiddenInputStyle } from "../../utils/form";
-import { guid } from "../../utils/guid";
+import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
+import { focusElement, getElementDir } from "../../utils/dom";
 import { getKey } from "../../utils/key";
 import { CSS_UTILITY } from "../../utils/resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
+import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 export class CalciteSwitch {
   constructor() {
     //--------------------------------------------------------------------------
@@ -26,24 +25,30 @@ export class CalciteSwitch {
     this.switched = false;
     /** True if the switch is initially on */
     this.checked = false;
-    this.inputEl = document.createElement("input");
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.keyDownHandler = (e) => {
+      const key = getKey(e.key);
+      if (!this.disabled && (key === " " || key === "Enter")) {
+        this.toggle();
+      }
+    };
     this.clickHandler = () => {
       this.toggle();
     };
+    this.setSwitchEl = (el) => {
+      this.switchEl = el;
+    };
   }
   disabledWatcher(newDisabled) {
-    this.inputEl.disabled = newDisabled;
     this.tabindex = newDisabled ? -1 : 0;
   }
-  nameChanged(newName) {
-    this.inputEl.name = newName;
-  }
   switchedWatcher(switched) {
     this.checked = switched;
   }
-  checkedWatcher(checked) {
-    this.inputEl.checked = checked;
-  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -51,31 +56,14 @@ export class CalciteSwitch {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    this.el.focus();
+    focusElement(this.switchEl);
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   onLabelClick() {
     if (!this.disabled) {
       this.toggle();
       this.setFocus();
     }
   }
-  setupInput() {
-    this.checked && this.inputEl.setAttribute("checked", "");
-    this.inputEl.disabled = this.disabled;
-    this.inputEl.id = `${this.guid}-input`;
-    this.inputEl.name = this.name;
-    this.inputEl.style.cssText = hiddenInputStyle;
-    this.inputEl.type = "checkbox";
-    if (this.value) {
-      this.inputEl.value = this.value != null ? this.value.toString() : "";
-    }
-    this.el.appendChild(this.inputEl);
-  }
   toggle() {
     this.checked = !this.checked;
     this.calciteSwitchChange.emit({
@@ -86,35 +74,24 @@ export class CalciteSwitch {
   }
   //--------------------------------------------------------------------------
   //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  keyDownHandler(e) {
-    const key = getKey(e.key);
-    if (!this.disabled && (key === " " || key === "Enter")) {
-      this.toggle();
-    }
-  }
-  //--------------------------------------------------------------------------
-  //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    connectLabel(this);
     const initiallyChecked = this.checked || this.switched;
     if (initiallyChecked) {
       // if either prop is set, we ensure both are synced initially
       this.switched = this.checked = initiallyChecked;
     }
+    connectLabel(this);
+    connectForm(this);
   }
   disconnectedCallback() {
     disconnectLabel(this);
+    disconnectForm(this);
   }
   componentWillLoad() {
-    this.guid = this.el.id || `calcite-switch-${guid()}`;
     this.tabindex = this.el.getAttribute("tabindex") || this.disabled ? -1 : 0;
-    this.setupInput();
   }
   // --------------------------------------------------------------------------
   //
@@ -123,10 +100,11 @@ export class CalciteSwitch {
   // --------------------------------------------------------------------------
   render() {
     const dir = getElementDir(this.el);
-    return (h(Host, { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), onClick: this.clickHandler, role: "switch", tabindex: this.tabindex },
-      h("div", { class: { container: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
+    return (h(Host, { onKeyDown: this.keyDownHandler },
+      h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: { container: true, [CSS_UTILITY.rtl]: dir === "rtl" }, onClick: this.clickHandler, ref: this.setSwitchEl, role: "switch", tabindex: this.tabindex },
         h("div", { class: "track" },
-          h("div", { class: "handle" })))));
+          h("div", { class: "handle" })),
+        h(HiddenFormInputSlot, { component: this }))));
   }
   static get is() { return "calcite-switch"; }
   static get encapsulation() { return "shadow"; }
@@ -181,7 +159,7 @@ export class CalciteSwitch {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "The name of the switch input"
@@ -260,17 +238,16 @@ export class CalciteSwitch {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "The value of the switch input"
       },
       "attribute": "value",
-      "reflect": true
+      "reflect": false
     }
   }; }
   static get states() { return {
-    "guid": {},
     "tabindex": {}
   }; }
   static get events() { return [{
@@ -311,21 +288,8 @@ export class CalciteSwitch {
   static get watchers() { return [{
       "propName": "disabled",
       "methodName": "disabledWatcher"
-    }, {
-      "propName": "name",
-      "methodName": "nameChanged"
     }, {
       "propName": "switched",
       "methodName": "switchedWatcher"
-    }, {
-      "propName": "checked",
-      "methodName": "checkedWatcher"
-    }]; }
-  static get listeners() { return [{
-      "name": "keydown",
-      "method": "keyDownHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
     }]; }
 }

package/dist/collection/components/calcite-tile-select/calcite-tile-select.js

@@ -22,8 +22,6 @@ export class CalciteTileSelect {
     this.disabled = false;
     /** The hidden state of the tile select. */
     this.hidden = false;
-    /** The name of the tile select.  This name will appear in form submissions as either a radio or checkbox identifier based on the `type` property. */
-    this.name = "";
     /** Display an interactive radio or checkbox. */
     this.inputEnabled = false;
     /** The side of the tile that the radio or checkbox appears on when inputEnabled is true. */
@@ -273,11 +271,11 @@ export class CalciteTileSelect {
       "reflect": true
     },
     "name": {
-      "type": "string",
+      "type": "any",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "any",
+        "resolved": "any",
         "references": {}
       },
       "required": false,
@@ -287,8 +285,7 @@ export class CalciteTileSelect {
         "text": "The name of the tile select.  This name will appear in form submissions as either a radio or checkbox identifier based on the `type` property."
       },
       "attribute": "name",
-      "reflect": true,
-      "defaultValue": "\"\""
+      "reflect": true
     },
     "inputEnabled": {
       "type": "boolean",