@esri/calcite-components 1.0.0-beta.69 → 1.0.0-beta.72

package/dist/collection/components/calcite-select/calcite-select.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, Fragment, h, Listen, Method, Prop } from "@stencil/core";
-import { focusElement, getElementDir } from "../../utils/dom";
+import { Component, Element, Event, Fragment, h, Listen, Method, Prop, Watch } from "@stencil/core";
+import { focusElement } 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";
 function isOption(optionOrGroup) {
   return optionOrGroup.tagName === "CALCITE-OPTION";
@@ -28,10 +28,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 +52,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 +66,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 +86,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 +117,7 @@ export class CalciteSelect {
     this.updateNativeElement(optionOrGroup, nativeEl);
     if (isOption(optionOrGroup) && optionOrGroup.selected) {
       this.deselectAllExcept(optionOrGroup);
+      this.selectedOption = optionOrGroup;
     }
   }
   //--------------------------------------------------------------------------
@@ -135,7 +157,7 @@ export class CalciteSelect {
       }
     });
     if (futureSelected) {
-      requestAnimationFrame(() => (this.selectedOption = futureSelected));
+      this.selectedOption = futureSelected;
     }
   }
   toNativeElement(optionOrGroup) {
@@ -171,16 +193,16 @@ export class CalciteSelect {
   //  Render Methods
   //
   //--------------------------------------------------------------------------
-  renderChevron(dir) {
-    return (h("div", { class: { [CSS.iconContainer]: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
+  renderChevron() {
+    return (h("div", { class: CSS.iconContainer },
       h("calcite-icon", { class: CSS.icon, icon: "chevron-down", scale: "s" })));
   }
   render() {
-    const dir = getElementDir(this.el);
     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("select", { "aria-label": this.label, class: CSS.select, disabled: this.disabled, onChange: this.handleInternalSelectChange, ref: this.storeSelectRef },
         h("slot", null)),
-      this.renderChevron(dir)));
+      this.renderChevron(),
+      h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-select"; }
   static get encapsulation() { return "shadow"; }
@@ -226,6 +248,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,12 +309,30 @@ 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",
+      "type": "any",
       "mutable": true,
       "complexType": {
         "original": "HTMLCalciteOptionElement",
-        "resolved": "HTMLCalciteOptionElement",
+        "resolved": "any",
         "references": {
           "HTMLCalciteOptionElement": {
             "location": "global"
@@ -269,7 +347,9 @@ export class CalciteSelect {
             "text": undefined
           }],
         "text": "The currently selected option."
-      }
+      },
+      "attribute": "selected-option",
+      "reflect": false
     },
     "width": {
       "type": "string",
@@ -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

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -125,11 +129,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 +139,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 +181,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;
@@ -196,7 +200,7 @@ slot[name=center-row]::slotted(calcite-shell-center-row:not([detached])) {
   border-radius: 0.25rem;
   box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
   position: absolute;
-  animation: in-up var(--calcite-animation-timing) ease-in-out;
+  animation: in-up var(--calcite-internal-animation-timing-slow) ease-in-out;
   box-sizing: border-box;
   bottom: 0.5rem;
   left: var(--calcite-shell-tip-spacing);

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

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -124,7 +128,7 @@
   margin-bottom: 1.5rem;
   margin-left: 0.5rem;
   margin-right: 0.5rem;
-  animation: in-up var(--calcite-animation-timing) ease-in-out;
+  animation: in-up var(--calcite-internal-animation-timing-slow) ease-in-out;
 }
 
 :host([position=end]) {
@@ -156,29 +160,8 @@
   height: 100%;
 }
 
-::slotted(calcite-action-bar) {
-  border-right-width: 1px;
-  border-style: solid;
-  border-color: var(--calcite-ui-border-3);
-}
-
+::slotted(calcite-action-bar),
 ::slotted(calcite-action-bar[position=end]) {
-  border-left-width: 0;
-  border-right-width: 1px;
-  border-style: solid;
-  border-color: var(--calcite-ui-border-3);
-}
-
-.calcite--rtl ::slotted(calcite-action-bar) {
-  border-right-width: 0;
-  border-left-width: 1px;
-  border-style: solid;
-  border-color: var(--calcite-ui-border-3);
-}
-
-.calcite--rtl ::slotted(calcite-action-bar[position=end]) {
-  border-left-width: 0;
-  border-right-width: 1px;
-  border-style: solid;
+  border-inline-end: 1px solid;
   border-color: var(--calcite-ui-border-3);
 }

package/dist/collection/components/calcite-shell-center-row/calcite-shell-center-row.js

@@ -4,8 +4,7 @@
  */
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
-import { getElementDir, getSlotted } from "../../utils/dom";
-import { CSS_UTILITY } from "../../utils/resources";
+import { getSlotted } from "../../utils/dom";
 /**
  * @slot - A slot for adding content to the shell panel.
  * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
@@ -37,11 +36,10 @@ export class CalciteShellCenterRow {
   // --------------------------------------------------------------------------
   render() {
     const { el } = this;
-    const rtl = getElementDir(el) === "rtl";
-    const contentNode = (h("div", { class: { [CSS.content]: true, [CSS_UTILITY.rtl]: rtl } },
+    const contentNode = (h("div", { class: CSS.content },
       h("slot", null)));
     const actionBar = getSlotted(el, SLOTS.actionBar);
-    const actionBarNode = actionBar ? (h("div", { class: { [CSS.actionBarContainer]: true, [CSS_UTILITY.rtl]: rtl } },
+    const actionBarNode = actionBar ? (h("div", { class: CSS.actionBarContainer },
       h("slot", { name: SLOTS.actionBar }))) : null;
     const children = [actionBarNode, contentNode];
     if ((actionBar === null || actionBar === void 0 ? void 0 : actionBar.position) === "end") {

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

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -76,18 +80,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 +91,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: var(--calcite-animation-timing);
+  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 +246,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;
 }