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

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

@@ -4,9 +4,8 @@
  */
 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 { intersects } from "../../utils/dom";
-import { clamp } from "../../utils/math";
+import { clamp, decimalPlaces } from "../../utils/math";
 import { connectLabel, disconnectLabel } from "../../utils/label";
 import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 export class CalciteSlider {
@@ -46,6 +45,10 @@ export class CalciteSlider {
     this.step = 1;
     /** Currently selected number (if single select) */
     this.value = null;
+    /**
+     * Specify the scale of the slider, defaults to m
+     */
+    this.scale = "m";
     this.guid = `calcite-slider-${guid()}`;
     this.isRange = false;
     this.activeProp = "value";
@@ -260,7 +263,11 @@ export class CalciteSlider {
       h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()),
       h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString())));
     return (h(Host, { id: id, onTouchStart: this.handleTouchStart },
-      h("div", { class: { container: true, "container--range": this.isRange } },
+      h("div", { class: {
+          ["container"]: true,
+          ["container--range"]: this.isRange,
+          [`scale--${this.scale}`]: true
+        } },
         this.renderGraph(),
         h("div", { class: "track", ref: this.storeTrackRef },
           h("div", { class: "track__range", onPointerDown: () => this.dragStart("minMaxValue"), style: {
@@ -281,31 +288,34 @@ export class CalciteSlider {
                 right: mirror ? tickOffset : ""
               } }, this.renderTickLabel(tick)));
           }))),
-        !this.precise && !this.labelHandles && this.isRange && minHandle,
-        !this.hasHistogram &&
-          !this.precise &&
-          this.labelHandles &&
-          this.isRange &&
-          minLabeledHandle,
-        this.precise && !this.labelHandles && this.isRange && minPreciseHandle,
-        this.precise && this.labelHandles && this.isRange && minLabeledPreciseHandle,
-        this.hasHistogram &&
-          !this.precise &&
-          this.labelHandles &&
-          this.isRange &&
-          minHistogramLabeledHandle,
-        !this.precise && !this.labelHandles && handle,
-        !this.hasHistogram && !this.precise && this.labelHandles && labeledHandle,
-        !this.hasHistogram && this.precise && !this.labelHandles && preciseHandle,
-        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,
-        h(HiddenFormInputSlot, { component: this }))));
+        h("div", { class: "thumb-container" },
+          !this.precise && !this.labelHandles && this.isRange && minHandle,
+          !this.hasHistogram &&
+            !this.precise &&
+            this.labelHandles &&
+            this.isRange &&
+            minLabeledHandle,
+          this.precise && !this.labelHandles && this.isRange && minPreciseHandle,
+          this.precise && this.labelHandles && this.isRange && minLabeledPreciseHandle,
+          this.hasHistogram &&
+            !this.precise &&
+            this.labelHandles &&
+            this.isRange &&
+            minHistogramLabeledHandle,
+          !this.precise && !this.labelHandles && handle,
+          !this.hasHistogram && !this.precise && this.labelHandles && labeledHandle,
+          !this.hasHistogram && this.precise && !this.labelHandles && preciseHandle,
+          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,
+          h(HiddenFormInputSlot, { component: this })))));
   }
   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, max: this.max, min: this.min, width: 300 }))) : null;
+    return this.histogram ? (h("calcite-graph", { class: "graph", colorStops: this.histogramStops, data: this.histogram, highlightMax: this.isRange ? this.maxValue : this.value, highlightMin: this.isRange ? this.minValue : this.min, max: this.max, min: this.min })) : null;
   }
   renderTickLabel(tick) {
     const isMinTickLabel = tick === this.min;
@@ -374,7 +384,7 @@ export class CalciteSlider {
     const mirror = this.shouldMirror();
     const { activeProp, max, min, pageStep, step } = this;
     const value = this[activeProp];
-    const key = getKey(event.key);
+    const key = event.key;
     if (key === "Enter" || key === " ") {
       event.preventDefault();
       return;
@@ -408,7 +418,8 @@ export class CalciteSlider {
       return;
     }
     event.preventDefault();
-    this.setValue(activeProp, this.clamp(adjustment, activeProp));
+    const fixedDecimalAdjustment = Number(adjustment.toFixed(decimalPlaces(step)));
+    this.setValue(activeProp, this.clamp(fixedDecimalAdjustment, activeProp));
   }
   clickHandler(event) {
     this.focusActiveHandle(event.clientX);
@@ -546,7 +557,8 @@ export class CalciteSlider {
     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));
+    const clampedValue = this.clamp(this.min + range * (mirror ? 1 - percent : percent));
+    let value = Number(clampedValue.toFixed(decimalPlaces(this.step)));
     if (this.snap && this.step) {
       value = this.getClosestStep(value);
     }
@@ -557,10 +569,10 @@ export class CalciteSlider {
    * @internal
    */
   getClosestStep(num) {
-    num = this.clamp(num);
+    num = Number(this.clamp(num).toFixed(decimalPlaces(this.step)));
     if (this.step) {
       const step = Math.round(num / this.step) * this.step;
-      num = this.clamp(step);
+      num = Number(this.clamp(step).toFixed(decimalPlaces(this.step)));
     }
     return num;
   }
@@ -612,7 +624,7 @@ export class CalciteSlider {
     const hyphenLabel = leftValueLabel;
     const labelOffset = labelFontSize / 2;
     if (labelTransformedOverlap > 0) {
-      hyphenLabel.classList.add("hyphen");
+      hyphenLabel.classList.add("hyphen", "hyphen--wrap");
       if (rightValueLabelStaticHostOffset === 0 && leftValueLabelStaticHostOffset === 0) {
         // Neither handle overlaps the host boundary
         let leftValueLabelTranslate = labelTransformedOverlap / 2 - labelOffset;
@@ -658,7 +670,7 @@ export class CalciteSlider {
       }
     }
     else {
-      hyphenLabel.classList.remove("hyphen");
+      hyphenLabel.classList.remove("hyphen", "hyphen--wrap");
       leftValueLabel.style.transform = `translateX(${leftValueLabelStaticHostOffset}px)`;
       leftValueLabelTransformed.style.transform = `translateX(${leftValueLabelStaticHostOffset}px)`;
       rightValueLabel.style.transform = `translateX(${rightValueLabelStaticHostOffset}px)`;
@@ -1142,6 +1154,29 @@ export class CalciteSlider {
       "attribute": "value",
       "reflect": true,
       "defaultValue": "null"
+    },
+    "scale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Scale",
+        "resolved": "\"l\" | \"m\" | \"s\"",
+        "references": {
+          "Scale": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specify the scale of the slider, defaults to m"
+      },
+      "attribute": "scale",
+      "reflect": false,
+      "defaultValue": "\"m\""
     }
   }; }
   static get states() { return {

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

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :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 {
@@ -75,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {

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

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :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 {
@@ -75,20 +70,22 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
   display: none;
 }
 
+:host {
+  display: inline-block;
+}
+
 :host .split-button__container {
   display: flex;
   align-items: stretch;
 }
-
 :host .split-button__container > calcite-dropdown > calcite-button {
   height: 100%;
   vertical-align: top;
@@ -98,17 +95,14 @@
   --calcite-split-button-background: var(--calcite-ui-brand);
   --calcite-split-button-divider: var(--calcite-ui-foreground-1);
 }
-
 :host([appearance=solid]):host([color=red]) {
   --calcite-split-button-background: var(--calcite-ui-danger);
   --calcite-split-button-divider: var(--calcite-ui-foreground-1);
 }
-
 :host([appearance=solid]):host([color=neutral]) {
   --calcite-split-button-background: var(--calcite-ui-foreground-3);
   --calcite-split-button-divider: var(--calcite-ui-text-1);
 }
-
 :host([appearance=solid]):host([color=inverse]) {
   --calcite-split-button-background: var(--calcite-ui-inverse);
   --calcite-split-button-divider: var(--calcite-ui-foreground-1);
@@ -117,15 +111,12 @@
 :host([appearance=transparent]):host([color=blue]) {
   --calcite-split-button-divider: var(--calcite-ui-brand);
 }
-
 :host([appearance=transparent]):host([color=red]) {
   --calcite-split-button-divider: var(--calcite-ui-danger);
 }
-
 :host([appearance=transparent]):host([color=neutral]) {
   --calcite-split-button-divider: var(--calcite-ui-text-1);
 }
-
 :host([appearance=transparent]):host([color=inverse]) {
   --calcite-split-button-divider: var(--calcite-ui-foreground-1);
 }
@@ -143,17 +134,14 @@
 :host([appearance=outline]):host([color=blue]) {
   --calcite-split-button-divider: var(--calcite-ui-brand);
 }
-
 :host([appearance=clear]):host([color=red]),
 :host([appearance=outline]):host([color=red]) {
   --calcite-split-button-divider: var(--calcite-ui-danger);
 }
-
 :host([appearance=clear]):host([color=neutral]),
 :host([appearance=outline]):host([color=neutral]) {
   --calcite-split-button-divider: var(--calcite-ui-foreground-3);
 }
-
 :host([appearance=clear]):host([color=inverse]),
 :host([appearance=outline]):host([color=inverse]) {
   --calcite-split-button-divider: var(--calcite-ui-inverse);
@@ -172,18 +160,21 @@
 }
 
 .split-button__divider-container {
-  width: 1px;
   display: flex;
+  width: 1px;
   align-items: stretch;
-  transition: 0.15s ease-in-out;
+  transition-property: all;
+  transition-duration: var(--calcite-animation-timing);
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
   background-color: var(--calcite-split-button-background);
 }
 
 .split-button__divider {
-  width: 1px;
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
   display: inline-block;
+  width: 1px;
   background-color: var(--calcite-split-button-divider);
 }
 
@@ -192,7 +183,6 @@
   border-top: 1px solid var(--calcite-split-button-divider);
   border-bottom: 1px solid var(--calcite-split-button-divider);
 }
-
 :host([appearance=outline]):hover .split-button__divider-container,
 :host([appearance=clear]):hover .split-button__divider-container {
   background-color: var(--calcite-split-button-divider);
@@ -207,12 +197,10 @@
 :host([appearance=clear]:focus-within):host([color=blue]) {
   --calcite-split-button-divider: var(--calcite-ui-brand-press);
 }
-
 :host([appearance=outline]:focus-within):host([color=red]),
 :host([appearance=clear]:focus-within):host([color=red]) {
   --calcite-split-button-divider: var(--calcite-ui-danger-press);
 }
-
 :host([appearance=outline]:focus-within) .split-button__divider-container,
 :host([appearance=clear]:focus-within) .split-button__divider-container {
   background-color: var(--calcite-split-button-divider);
@@ -221,7 +209,6 @@
 :host([disabled]) .split-button__divider-container {
   opacity: var(--calcite-ui-opacity-disabled);
 }
-
 :host([disabled]) calcite-dropdown > calcite-button {
   pointer-events: none;
 }

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

@@ -4,7 +4,6 @@
  */
 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.
  */
@@ -36,7 +35,6 @@ export class CalciteSplitButton {
     this.calciteSplitButtonSecondaryClickHandler = (e) => this.calciteSplitButtonSecondaryClick.emit(e);
   }
   render() {
-    const dir = getElementDir(this.el);
     const widthClasses = {
       [CSS.container]: true,
       [CSS.widthAuto]: this.width === "auto",
@@ -44,12 +42,12 @@ export class CalciteSplitButton {
       [CSS.widthFull]: this.width === "full"
     };
     const buttonWidth = this.width === "auto" ? "auto" : "full";
-    return (h("div", { class: widthClasses, dir: dir },
-      h("calcite-button", { appearance: this.appearance, color: this.color, dir: dir, disabled: this.disabled, "icon-end": this.primaryIconEnd ? this.primaryIconEnd : null, "icon-start": this.primaryIconStart ? this.primaryIconStart : null, iconFlipRtl: this.primaryIconFlipRtl ? this.primaryIconFlipRtl : null, label: this.primaryLabel, loading: this.loading, onClick: this.calciteSplitButtonPrimaryClickHandler, scale: this.scale, splitChild: "primary", width: buttonWidth }, this.primaryText),
+    return (h("div", { class: widthClasses },
+      h("calcite-button", { appearance: this.appearance, color: this.color, disabled: this.disabled, "icon-end": this.primaryIconEnd ? this.primaryIconEnd : null, "icon-start": this.primaryIconStart ? this.primaryIconStart : null, iconFlipRtl: this.primaryIconFlipRtl ? this.primaryIconFlipRtl : null, label: this.primaryLabel, loading: this.loading, onClick: this.calciteSplitButtonPrimaryClickHandler, scale: this.scale, splitChild: "primary", width: buttonWidth }, this.primaryText),
       h("div", { class: CSS.dividerContainer },
         h("div", { class: CSS.divider })),
-      h("calcite-dropdown", { active: this.active, dir: dir, onClick: this.calciteSplitButtonSecondaryClickHandler, overlayPositioning: this.overlayPositioning, placement: "bottom-trailing", scale: this.scale, width: this.scale },
-        h("calcite-button", { appearance: this.appearance, color: this.color, dir: dir, disabled: this.disabled, "icon-start": this.dropdownIcon, label: this.dropdownLabel, scale: this.scale, slot: "dropdown-trigger", splitChild: "secondary" }),
+      h("calcite-dropdown", { active: this.active, onClick: this.calciteSplitButtonSecondaryClickHandler, overlayPositioning: this.overlayPositioning, placement: "bottom-trailing", scale: this.scale, width: this.scale },
+        h("calcite-button", { appearance: this.appearance, color: this.color, disabled: this.disabled, "icon-start": this.dropdownIcon, label: this.dropdownLabel, scale: this.scale, slot: "dropdown-trigger", splitChild: "secondary" }),
         h("slot", null))));
   }
   get dropdownIcon() {

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

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :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 {
@@ -75,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -85,25 +79,25 @@
 }
 
 :host {
+  position: relative;
   display: flex;
+  width: 100%;
+  min-width: 100%;
   flex-direction: row;
   flex-wrap: wrap;
-  position: relative;
-  justify-content: space-between;
   align-items: stretch;
-  width: 100%;
-  min-width: 100%;
+  justify-content: space-between;
 }
 
 :host([layout=vertical]) {
-  flex-direction: column;
   flex: 1 1 auto;
+  flex-direction: column;
 }
 
 :host ::slotted(.calcite-stepper-content) {
   display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
   width: 100%;
   min-width: 100%;
+  flex-direction: column;
+  flex-wrap: wrap;
 }

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

@@ -3,7 +3,6 @@
  * 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.
  */
@@ -72,7 +71,7 @@ export class CalciteStepper {
     const itemToFocus = e.target;
     const isFirstItem = this.itemIndex(itemToFocus) === 0;
     const isLastItem = this.itemIndex(itemToFocus) === this.sortedItems.length - 1;
-    switch (getKey(item.key)) {
+    switch (item.key) {
       case "ArrowDown":
       case "ArrowRight":
         if (isLastItem) {