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

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

@@ -6,6 +6,7 @@ import { Component, Element, Event, Fragment, h, Listen, Method, Prop, State } f
 import { getElementDir } from "../../utils/dom";
 import { guid } from "../../utils/guid";
 import { connectLabel, disconnectLabel } from "../../utils/label";
+import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { TEXT } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
 export class CalciteRating {
@@ -33,6 +34,12 @@ export class CalciteRating {
      * @default "Stars: ${num}"
      */
     this.intlStars = TEXT.stars;
+    /**
+     * When true, makes the component required for form-submission.
+     *
+     * @internal
+     */
+    this.required = false;
     this.guid = `calcite-ratings-${guid()}`;
   }
   //--------------------------------------------------------------------------
@@ -42,9 +49,11 @@ export class CalciteRating {
   //--------------------------------------------------------------------------
   connectedCallback() {
     connectLabel(this);
+    connectForm(this);
   }
   disconnectedCallback() {
     disconnectLabel(this);
+    disconnectForm(this);
   }
   //--------------------------------------------------------------------------
   //
@@ -93,7 +102,8 @@ export class CalciteRating {
         !!count && h("span", { class: "number--count" },
           "(", count === null || count === void 0 ? void 0 :
           count.toString(),
-          ")"))) : null));
+          ")"))) : null,
+      h(HiddenFormInputSlot, { component: this })));
   }
   //--------------------------------------------------------------------------
   //
@@ -254,6 +264,23 @@ export class CalciteRating {
       "attribute": "average",
       "reflect": true
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The name of the rating"
+      },
+      "attribute": "name",
+      "reflect": true
+    },
     "intlRating": {
       "type": "string",
       "mutable": false,
@@ -266,8 +293,8 @@ export class CalciteRating {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Rating\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Rating\""
           }],
         "text": "Localized string for \"Rating\" (used for aria label)"
       },
@@ -287,14 +314,35 @@ export class CalciteRating {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Stars: ${num}\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Stars: ${num}\""
           }],
         "text": "Localized string for labelling each star, `${num}` in the string will be replaced by the number"
       },
       "attribute": "intl-stars",
       "reflect": false,
       "defaultValue": "TEXT.stars"
+    },
+    "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"
     }
   }; }
   static get states() { return {

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

@@ -60,8 +60,8 @@ export class CalciteScrim {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Loading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Loading\""
           }],
         "text": "string to override English loading text"
       },

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

@@ -242,4 +242,19 @@ select:disabled {
 
 .select:focus ~ .icon-container {
   border-color: transparent;
+}
+
+::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-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 : "");
   }
   //--------------------------------------------------------------------------
   //
@@ -96,6 +118,7 @@ export class CalciteSelect {
     this.updateNativeElement(optionOrGroup, nativeEl);
     if (isOption(optionOrGroup) && optionOrGroup.selected) {
       this.deselectAllExcept(optionOrGroup);
+      this.selectedOption = optionOrGroup;
     }
   }
   //--------------------------------------------------------------------------
@@ -135,7 +158,7 @@ export class CalciteSelect {
       }
     });
     if (futureSelected) {
-      requestAnimationFrame(() => (this.selectedOption = futureSelected));
+      this.selectedOption = futureSelected;
     }
   }
   toNativeElement(optionOrGroup) {
@@ -180,7 +203,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 +250,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 +311,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,
@@ -265,8 +345,8 @@ export class CalciteSelect {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "readonly"
+            "name": "readonly",
+            "text": undefined
           }],
         "text": "The currently selected option."
       }
@@ -330,6 +410,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;
 }
@@ -99,11 +87,69 @@
 :host {
   display: flex;
   align-items: stretch;
-  background-color: transparent;
+  flex: 0 1 auto;
   pointer-events: none;
   --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;
+  color: var(--calcite-ui-text-2);
+  font-size: var(--calcite-font-size--1);
+}
+
+.container * {
+  box-sizing: border-box;
+}
+
+:host(:hover) .separator:not(:hover):not(:focus),
+:host(:focus-within) .separator:not(:hover):not(:focus) {
+  opacity: 1;
+  background-color: var(--calcite-ui-border-3);
+}
+
+.separator {
+  position: absolute;
+  background-color: transparent;
+  bottom: 0;
+  display: flex;
+  height: 100%;
+  opacity: 0;
+  pointer-events: auto;
+  top: 0;
+  transition-property: all;
+  transition-duration: 150ms;
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
+  width: 0.125rem;
+  z-index: 10;
+  cursor: col-resize;
+  outline: none;
+}
+
+.separator:hover {
+  opacity: 1;
+  background-color: var(--calcite-ui-border-2);
+}
+
+.separator:focus {
+  background-color: var(--calcite-ui-brand);
+  opacity: 1;
+}
+
+:host([position=start]) .separator {
+  inset-inline-end: -2px;
+}
+
+:host([position=end]) .separator {
+  inset-inline-start: -2px;
+}
+
 ::slotted(calcite-panel),
 ::slotted(calcite-flow) {
   flex: 1 1 auto;
@@ -196,18 +242,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;
 }