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

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

@@ -1,3 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export const CSS = {
   main: "main",
   mainReversed: "main--reversed",

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

@@ -1,10 +1,14 @@
+/*!
+ * 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, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
 import { getElementDir, getSlotted } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 /**
- * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
  * @slot - A slot for adding content to the shell panel.
+ * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
  */
 export class CalciteShellCenterRow {
   constructor() {

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

@@ -1,3 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export const CSS = {
   actionBarContainer: "action-bar-container",
   content: "content"

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

@@ -1,9 +1,13 @@
+/*!
+ * 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 { CSS, SLOTS } from "./resources";
 import { getSlotted } from "../../utils/dom";
 /**
- * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
  * @slot - A slot for adding content to the shell panel.
+ * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
  */
 export class CalciteShellPanel {
   constructor() {

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

@@ -1,3 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export const CSS = {
   content: "content",
   contentHeader: "content__header",

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

@@ -152,8 +152,7 @@
 }
 
 .thumb .handle__label {
-  font-size: 0.75rem;
-  line-height: 1.5;
+  font-size: var(--calcite-font-size--2);
   font-weight: 500;
   line-height: 1;
   color: var(--calcite-ui-text-2);
@@ -368,8 +367,7 @@
 
 .tick__label {
   position: absolute;
-  font-size: 0.75rem;
-  line-height: 1.5;
+  font-size: var(--calcite-font-size--2);
   font-weight: 500;
   color: var(--calcite-ui-text-2);
   width: 4em;

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

@@ -1,8 +1,13 @@
+/*!
+ * 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 { guid } from "../../utils/guid";
 import { getKey } from "../../utils/key";
-import { hasLabel, intersects } from "../../utils/dom";
+import { intersects } from "../../utils/dom";
 import { clamp } from "../../utils/math";
+import { connectLabel, disconnectLabel } from "../../utils/label";
 export class CalciteSlider {
   constructor() {
     //--------------------------------------------------------------------------
@@ -36,11 +41,6 @@ export class CalciteSlider {
     this.step = 1;
     /** Currently selected number (if single select) */
     this.value = null;
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
     this.guid = `calcite-slider-${guid()}`;
     this.isRange = false;
     this.activeProp = "value";
@@ -70,22 +70,32 @@ export class CalciteSlider {
           }
         }
         else {
-          this[this.dragProp] = this.clamp(value, this.dragProp);
+          this.setValue(this.dragProp, this.clamp(value, this.dragProp));
         }
-        this.emitChange();
       }
     };
     this.dragEnd = () => {
       document.removeEventListener("pointermove", this.dragUpdate);
       document.removeEventListener("pointerup", this.dragEnd);
       document.removeEventListener("pointercancel", this.dragEnd);
-      this.emitChange();
       this.focusActiveHandle();
+      if (this.lastDragPropValue != this[this.dragProp]) {
+        this.emitChange();
+      }
       this.dragProp = null;
+      this.lastDragPropValue = null;
       this.minValueDragRange = null;
       this.maxValueDragRange = null;
       this.minMaxValueRange = null;
     };
+    /**
+     * Set the reference of the track Element
+     * @internal
+     * @param node
+     */
+    this.storeTrackRef = (node) => {
+      this.trackEl = node;
+    };
   }
   histogramWatcher(newHistogram) {
     this.hasHistogram = !!newHistogram;
@@ -95,6 +105,12 @@ export class CalciteSlider {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectLabel(this);
+  }
+  disconnectedCallback() {
+    disconnectLabel(this);
+  }
   componentWillLoad() {
     this.isRange = !!(this.maxValue || this.maxValue === 0);
     this.tickValues = this.generateTickValues();
@@ -105,7 +121,6 @@ export class CalciteSlider {
     if (this.histogram) {
       this.hasHistogram = true;
     }
-    this.emitChange();
   }
   componentDidRender() {
     if (this.labelHandles) {
@@ -125,7 +140,8 @@ export class CalciteSlider {
     const max = this.maxValue || this.value;
     const maxProp = this.isRange ? "maxValue" : "value";
     const value = this[maxProp];
-    const minInterval = this.getUnitInterval(min) * 100;
+    const useMinValue = this.shouldUseMinValue();
+    const minInterval = this.getUnitInterval(useMinValue ? this.minValue : min) * 100;
     const maxInterval = this.getUnitInterval(max) * 100;
     const mirror = this.shouldMirror();
     const leftThumbOffset = `${mirror ? 100 - minInterval : minInterval}%`;
@@ -238,16 +254,20 @@ export class CalciteSlider {
     return (h(Host, { id: id, onTouchStart: this.handleTouchStart },
       h("div", { class: { container: true, "container--range": this.isRange } },
         this.renderGraph(),
-        h("div", { class: "track" },
+        h("div", { class: "track", ref: this.storeTrackRef },
           h("div", { class: "track__range", onPointerDown: () => this.dragStart("minMaxValue"), style: {
               left: `${mirror ? 100 - maxInterval : minInterval}%`,
               right: `${mirror ? minInterval : 100 - maxInterval}%`
             } }),
           h("div", { class: "ticks" }, this.tickValues.map((tick) => {
             const tickOffset = `${this.getUnitInterval(tick) * 100}%`;
+            let activeTicks = tick >= min && tick <= max;
+            if (useMinValue) {
+              activeTicks = tick >= this.minValue && tick <= this.maxValue;
+            }
             return (h("span", { class: {
                 tick: true,
-                "tick--active": tick >= min && tick <= max
+                "tick--active": activeTicks
               }, style: {
                 left: mirror ? "" : tickOffset,
                 right: mirror ? tickOffset : ""
@@ -276,7 +296,7 @@ export class CalciteSlider {
   }
   renderGraph() {
     return this.histogram ? (h("div", { class: "graph" },
-      h("calcite-graph", { colorStops: this.histogramStops, data: this.histogram, "data-style": "slider-histogram", height: 48, highlightMax: this.isRange ? this.maxValue : this.value, highlightMin: this.isRange ? this.minValue : this.min, width: 300 }))) : null;
+      h("calcite-graph", { colorStops: this.histogramStops, data: this.histogram, "data-style": "slider-histogram", height: 48, highlightMax: this.isRange ? this.maxValue : this.value, highlightMin: this.isRange ? this.minValue : this.min, max: this.max, min: this.min, width: 300 }))) : null;
   }
   renderTickLabel(tick) {
     const isMinTickLabel = tick === this.min;
@@ -285,7 +305,7 @@ export class CalciteSlider {
         tick__label: true,
         "tick__label--min": isMinTickLabel,
         "tick__label--max": isMaxTickLabel
-      } }, tick.toLocaleString()));
+      } }, Math.min(tick, this.max).toLocaleString()));
     if (this.labelTicks && !this.hasHistogram && !this.isRange) {
       return tickLabel;
     }
@@ -341,11 +361,6 @@ export class CalciteSlider {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  handleLabelFocus(e) {
-    if (e.detail.interactedEl !== this.el && hasLabel(e.detail.labelEl, this.el)) {
-      this.setFocus();
-    }
-  }
   keyDownHandler(event) {
     const mirror = this.shouldMirror();
     const { activeProp, max, min, pageStep, step } = this;
@@ -384,8 +399,7 @@ export class CalciteSlider {
       return;
     }
     event.preventDefault();
-    this[activeProp] = this.clamp(adjustment, activeProp);
-    this.emitChange();
+    this.setValue(activeProp, this.clamp(adjustment, activeProp));
   }
   clickHandler() {
     this.focusActiveHandle();
@@ -401,11 +415,15 @@ export class CalciteSlider {
       }
       else {
         const closerToMax = Math.abs(this.maxValue - position) < Math.abs(this.minValue - position);
-        prop = closerToMax ? "maxValue" : "minValue";
+        prop = closerToMax || position > this.maxValue ? "maxValue" : "minValue";
       }
     }
-    this[prop] = this.clamp(position, prop);
+    this.lastDragPropValue = this[prop];
     this.dragStart(prop);
+    const isThumbActive = this.el.shadowRoot.querySelector(".thumb:active");
+    if (!isThumbActive) {
+      this.setValue(prop, this.clamp(position, prop));
+    }
   }
   handleTouchStart(event) {
     // needed to prevent extra click at the end of a handle drag
@@ -426,9 +444,18 @@ export class CalciteSlider {
   //  Private Methods
   //
   //--------------------------------------------------------------------------
+  onLabelClick() {
+    this.setFocus();
+  }
   shouldMirror() {
     return this.mirrored && !this.hasHistogram;
   }
+  shouldUseMinValue() {
+    if (!this.isRange) {
+      return false;
+    }
+    return ((this.hasHistogram && this.maxValue === 0) || (!this.hasHistogram && this.minValue === 0));
+  }
   generateTickValues() {
     const ticks = [];
     let current = this.min;
@@ -459,9 +486,30 @@ export class CalciteSlider {
         break;
     }
   }
+  emitInput() {
+    this.calciteSliderInput.emit();
+    this.calciteSliderUpdate.emit();
+  }
   emitChange() {
     this.calciteSliderChange.emit();
-    this.calciteSliderUpdate.emit();
+  }
+  /**
+   * Set the prop value if changed at the component level
+   * @param valueProp
+   * @param value
+   */
+  setValue(valueProp, value) {
+    const oldValue = this[valueProp];
+    const valueChanged = oldValue !== value;
+    if (!valueChanged) {
+      return;
+    }
+    this[valueProp] = value;
+    const dragging = this.dragProp;
+    if (!dragging) {
+      this.emitChange();
+    }
+    this.emitInput();
   }
   /**
    * If number is outside range, constrain to min or max
@@ -484,7 +532,7 @@ export class CalciteSlider {
    */
   translate(x) {
     const range = this.max - this.min;
-    const { left, width } = this.el.getBoundingClientRect();
+    const { left, width } = this.trackEl.getBoundingClientRect();
     const percent = (x - left) / width;
     const mirror = this.shouldMirror();
     let value = this.clamp(this.min + range * (mirror ? 1 - percent : percent));
@@ -1047,6 +1095,21 @@ export class CalciteSlider {
     "tickValues": {}
   }; }
   static get events() { return [{
+      "method": "calciteSliderInput",
+      "name": "calciteSliderInput",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires on all updates to the slider.\n:warning: Will be fired frequently during drag. If you are performing any\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
       "method": "calciteSliderChange",
       "name": "calciteSliderChange",
       "bubbles": true,
@@ -1054,7 +1117,7 @@ export class CalciteSlider {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fires on all updates to the slider.\n:warning: Will be fired frequently during drag. If you are performing any\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread."
+        "text": "Fires on when the thumb is released on slider\nIf you need to constantly listen to the drag event,\nplease use calciteSliderInput instead"
       },
       "complexType": {
         "original": "any",
@@ -1069,8 +1132,8 @@ export class CalciteSlider {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": "use calciteSliderChange instead",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "use calciteSliderInput instead"
           }],
         "text": "Fires on all updates to the slider.\n:warning: Will be fired frequently during drag. If you are performing any\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread."
       },
@@ -1104,12 +1167,6 @@ export class CalciteSlider {
       "methodName": "histogramWatcher"
     }]; }
   static get listeners() { return [{
-      "name": "calciteLabelFocus",
-      "method": "handleLabelFocus",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
       "name": "keydown",
       "method": "keyDownHandler",
       "target": undefined,

package/dist/collection/components/calcite-sortable-list/calcite-sortable-list.css

@@ -86,4 +86,17 @@
 
 :host {
   display: flex;
+}
+
+.container {
+  display: flex;
+  flex: 1 1 auto;
+}
+
+.container--vertical {
+  flex-direction: column;
+}
+
+.container--horizontal {
+  flex-direction: row;
 }

package/dist/collection/components/calcite-sortable-list/calcite-sortable-list.js

@@ -1,8 +1,13 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import Sortable from "sortablejs";
 import { Component, Element, Event, Listen, Prop, State, h } from "@stencil/core";
 import { createObserver } from "../../utils/observers";
+import { CSS } from "./resources";
 /**
- * @slot - A slot for adding sortable items
+ * @slot - A slot for adding sortable items.
  */
 export class CalciteSortableList {
   constructor() {
@@ -10,6 +15,10 @@ export class CalciteSortableList {
      * The selector for the handle elements.
      */
     this.handleSelector = "calcite-handle";
+    /**
+     * Indicates the horizontal or vertical orientation of the component.
+     */
+    this.layout = "vertical";
     /**
      * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
      */
@@ -133,7 +142,14 @@ export class CalciteSortableList {
   //
   // --------------------------------------------------------------------------
   render() {
-    return h("slot", null);
+    const { layout } = this;
+    const horizontal = layout === "horizontal" || false;
+    return (h("div", { class: {
+        [CSS.container]: true,
+        [CSS.containerVertical]: !horizontal,
+        [CSS.containerHorizontal]: horizontal
+      } },
+      h("slot", null)));
   }
   static get is() { return "calcite-sortable-list"; }
   static get encapsulation() { return "shadow"; }
@@ -196,6 +212,29 @@ export class CalciteSortableList {
       "reflect": false,
       "defaultValue": "\"calcite-handle\""
     },
+    "layout": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Layout",
+        "resolved": "\"grid\" | \"horizontal\" | \"vertical\"",
+        "references": {
+          "Layout": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates the horizontal or vertical orientation of the component."
+      },
+      "attribute": "layout",
+      "reflect": false,
+      "defaultValue": "\"vertical\""
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/calcite-sortable-list/resources.js

@@ -1,3 +1,10 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export const CSS = {
-  sortItem: "sort-item"
+  sortItem: "sort-item",
+  container: "container",
+  containerHorizontal: "container--horizontal",
+  containerVertical: "container--vertical"
 };

package/dist/collection/components/calcite-split-button/calcite-split-button.js

@@ -1,6 +1,13 @@
+/*!
+ * 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, Prop } from "@stencil/core";
 import { CSS } from "./resources";
 import { getElementDir } from "../../utils/dom";
+/**
+ * @slot - A slot for adding `calcite-dropdown` content.
+ */
 export class CalciteSplitButton {
   constructor() {
     /** specify the appearance style of the button, defaults to solid. */
@@ -137,8 +144,8 @@ export class CalciteSplitButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Is the dropdown currently active or not"
       },

package/dist/collection/components/calcite-split-button/resources.js

@@ -1,3 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export const CSS = {
   container: "split-button__container",
   dividerContainer: "split-button__divider-container",

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

@@ -1,5 +1,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, Listen, Method, Prop, Watch } from "@stencil/core";
 import { getKey } from "../../utils/key";
+/**
+ * @slot - A slot for adding `calcite-stepper-item`s.
+ */
 export class CalciteStepper {
   constructor() {
     //--------------------------------------------------------------------------
@@ -310,8 +317,8 @@ export class CalciteStepper {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       }
@@ -325,8 +332,8 @@ export class CalciteStepper {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "This event fires when the active stepper item has changed."
       },

package/dist/collection/components/calcite-stepper-item/calcite-stepper-item.css

@@ -89,13 +89,13 @@
   --calcite-stepper-item-spacing-unit-m: 0.75rem;
   --calcite-stepper-item-spacing-unit-l: 1rem;
   font-size: var(--calcite-font-size--1);
-  line-height: 1.375;
+  line-height: 1rem;
   margin-right: 0.25rem;
 }
 
 :host([scale=s]) .stepper-item-subtitle {
   font-size: var(--calcite-font-size--2);
-  line-height: 1.375;
+  line-height: 1rem;
 }
 
 :host([scale=m]) {
@@ -103,13 +103,13 @@
   --calcite-stepper-item-spacing-unit-m: 1rem;
   --calcite-stepper-item-spacing-unit-l: 1.25rem;
   font-size: var(--calcite-font-size-0);
-  line-height: 1.375;
+  line-height: 1.25rem;
   margin-right: 0.5rem;
 }
 
 :host([scale=m]) .stepper-item-subtitle {
   font-size: var(--calcite-font-size--1);
-  line-height: 1.375;
+  line-height: 1rem;
 }
 
 :host([scale=l]) {
@@ -117,13 +117,13 @@
   --calcite-stepper-item-spacing-unit-m: 1.25rem;
   --calcite-stepper-item-spacing-unit-l: 1.5rem;
   font-size: var(--calcite-font-size-1);
-  line-height: 1.375;
+  line-height: 1.5rem;
   margin-right: 0.75rem;
 }
 
 :host([scale=l]) .stepper-item-subtitle {
   font-size: var(--calcite-font-size-0);
-  line-height: 1.375;
+  line-height: 1.25rem;
 }
 
 :host {
@@ -131,6 +131,7 @@
   flex-grow: 1;
   flex-direction: column;
   position: relative;
+  margin-bottom: var(--calcite-stepper-item-spacing-unit-s);
 }
 
 :host .container {
@@ -354,7 +355,6 @@
   margin-right: 0;
   margin-top: 0;
   padding-left: var(--calcite-stepper-item-spacing-unit-l);
-  margin-bottom: var(--calcite-stepper-item-spacing-unit-s);
 }
 
 :host([layout=vertical]) .container .stepper-item-icon {