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

package/dist/collection/components/calcite-filter/calcite-filter.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,7 +70,6 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :host {
   /* Base ":host" styles for the component */
   box-sizing: border-box;
@@ -83,13 +77,12 @@
   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;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -108,33 +101,32 @@
 }
 
 label {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
   position: relative;
-  width: 100%;
   margin-left: 0.25rem;
   margin-right: 0.25rem;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  overflow: hidden;
 }
 
 input[type=text] {
-  background-color: transparent;
-  border-style: none;
-  font-family: inherit;
-  color: var(--calcite-ui-text-1);
-  font-size: var(--calcite-font-size--2);
-  line-height: 1rem;
   margin-bottom: 0.25rem;
   width: 100%;
+  border-style: none;
+  background-color: transparent;
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   padding-right: 0.25rem;
   padding-left: 1.5rem;
-  transition: padding 150ms ease-in-out, box-shadow 150ms ease-in-out;
+  font-family: inherit;
+  font-size: var(--calcite-font-size--2);
+  line-height: 1rem;
+  color: var(--calcite-ui-text-1);
+  transition: padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing);
 }
-
 input[type=text]::-ms-clear {
   display: none;
 }
@@ -144,52 +136,32 @@ calcite-input {
 }
 
 .search-icon {
-  display: flex;
-  left: 0;
   position: absolute;
+  display: flex;
   color: var(--calcite-ui-text-2);
-  transition: left 150ms ease-in-out, right 150ms ease-in-out, opacity 150ms ease-in-out;
-}
-
-.calcite--rtl .search-icon {
-  right: 0;
+  inset-inline-start: 0;
+  transition: left var(--calcite-animation-timing), right var(--calcite-animation-timing), opacity var(--calcite-animation-timing);
 }
 
 input[type=text]:focus {
   border-color: var(--calcite-ui-brand);
   outline: 2px solid transparent;
   outline-offset: 2px;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  padding-inline: 0.25rem;
 }
-
 input[type=text]:focus ~ .search-icon {
-  left: calc(1rem * -1);
+  inset-inline-start: calc(1rem * -1);
   opacity: 0;
 }
 
-.calcite--rtl input[type=text] {
-  padding-left: 0.25rem;
-  padding-right: 1.5rem;
-}
-
-.calcite--rtl input[type=text]:focus {
-  padding-right: 1.25rem;
-}
-
-.calcite--rtl input[type=text]:focus ~ .search-icon {
-  right: calc(1rem * -1);
-}
-
 .clear-button {
-  color: var(--calcite-ui-text-2);
-  background-color: transparent;
-  border-width: 0;
-  cursor: pointer;
   display: flex;
+  cursor: pointer;
   align-items: center;
+  border-width: 0px;
+  background-color: transparent;
+  color: var(--calcite-ui-text-2);
 }
-
 .clear-button:hover, .clear-button:focus {
   color: var(--calcite-ui-text-1);
 }

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

@@ -5,8 +5,7 @@
 import { Component, Element, Event, Prop, h, Method, Fragment, Watch } from "@stencil/core";
 import { debounce, forIn } from "lodash-es";
 import { CSS, ICONS, TEXT } from "./resources";
-import { CSS_UTILITY } from "../../utils/resources";
-import { focusElement, getElementDir } from "../../utils/dom";
+import { focusElement } from "../../utils/dom";
 const filterDebounceInMs = 250;
 export class CalciteFilter {
   constructor() {
@@ -67,25 +66,12 @@ export class CalciteFilter {
       this.setFocus();
     };
   }
-  watchDataHandler(value) {
-    this.items = value;
-  }
   watchItemsHandler() {
     this.filter(this.value);
   }
   valueHandler(value) {
     this.filter(value);
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  connectedCallback() {
-    if (this.data && !this.items) {
-      this.items = this.data;
-    }
-  }
   // --------------------------------------------------------------------------
   //
   //  Public Methods
@@ -98,7 +84,7 @@ export class CalciteFilter {
   updateFiltered(filtered) {
     this.filteredItems.length = 0;
     this.filteredItems = this.filteredItems.concat(filtered);
-    this.calciteFilterChange.emit(filtered);
+    this.calciteFilterChange.emit();
   }
   // --------------------------------------------------------------------------
   //
@@ -106,13 +92,12 @@ export class CalciteFilter {
   //
   // --------------------------------------------------------------------------
   render() {
-    const rtl = getElementDir(this.el) === "rtl";
     const { disabled } = this;
     return (h(Fragment, null,
       disabled ? h("calcite-scrim", null) : null,
       h("div", { class: CSS.container },
-        h("label", { class: rtl ? CSS_UTILITY.rtl : null },
-          h("calcite-input", { "aria-label": this.intlLabel || TEXT.filterLabel, class: rtl ? CSS_UTILITY.rtl : null, disabled: this.disabled, icon: ICONS.search, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
+        h("label", null,
+          h("calcite-input", { "aria-label": this.intlLabel || TEXT.filterLabel, disabled: this.disabled, icon: ICONS.search, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
               this.textInput = el;
             }, type: "text", value: this.value })),
         this.value ? (h("button", { "aria-label": this.intlClear || TEXT.clear, class: CSS.clearButton, onClick: this.clear },
@@ -127,24 +112,6 @@ export class CalciteFilter {
     "$": ["calcite-filter.css"]
   }; }
   static get properties() { return {
-    "data": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "object[]",
-        "resolved": "object[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "use `items` instead."
-          }],
-        "text": "The input data. The filter uses this as the starting point, and returns items\nthat contain the string entered in the input, using a partial match and recursive search."
-      }
-    },
     "items": {
       "type": "unknown",
       "mutable": true,
@@ -153,7 +120,7 @@ export class CalciteFilter {
         "resolved": "object[]",
         "references": {}
       },
-      "required": false,
+      "required": true,
       "optional": false,
       "docs": {
         "tags": [],
@@ -281,8 +248,8 @@ export class CalciteFilter {
         "text": "This event fires when the filter text changes."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }
@@ -306,9 +273,6 @@ export class CalciteFilter {
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
-      "propName": "data",
-      "methodName": "watchDataHandler"
-    }, {
       "propName": "items",
       "methodName": "watchItemsHandler"
     }, {

package/dist/collection/components/calcite-flow/calcite-flow.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,7 +70,6 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :host {
   /* Base ":host" styles for the component */
   box-sizing: border-box;
@@ -83,13 +77,12 @@
   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;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -97,64 +90,63 @@
 }
 
 :host {
+  position: relative;
   display: flex;
+  width: 100%;
   flex: 1 1 auto;
   align-items: stretch;
   background-color: transparent;
-  width: 100%;
   overflow: hidden;
-  position: relative;
 }
-
 :host .frame {
+  position: relative;
+  margin: 0px;
   display: flex;
-  flex: 1 1 auto;
-  align-items: stretch;
   width: 100%;
-  padding: 0;
-  margin: 0;
+  flex: 1 1 auto;
   flex-direction: column;
-  position: relative;
+  align-items: stretch;
+  padding: 0px;
 }
-
 :host ::slotted(calcite-panel) {
   height: 100%;
 }
-
 :host ::slotted(.calcite-match-height:last-child) {
   display: flex;
   flex: 1 1 auto;
   overflow: hidden;
 }
-
 :host .frame--advancing {
-  animation: calcite-frame-advance 150ms ease-in-out;
+  animation: calcite-frame-advance var(--calcite-animation-timing);
 }
-
 :host .frame--retreating {
-  animation: calcite-frame-retreat 150ms ease-in-out;
+  animation: calcite-frame-retreat var(--calcite-animation-timing);
 }
-
 @keyframes calcite-frame-advance {
   0% {
-    --bg-opacity: 0.5;
+    --tw-bg-opacity: 0.5;
+  }
+  0% {
     transform: translate3d(50px, 0, 0);
   }
-
   100% {
-    --bg-opacity: 1;
+    --tw-bg-opacity: 1;
+  }
+  100% {
     transform: translate3d(0, 0, 0);
   }
 }
-
 @keyframes calcite-frame-retreat {
   0% {
-    --bg-opacity: 0.5;
+    --tw-bg-opacity: 0.5;
+  }
+  0% {
     transform: translate3d(-50px, 0, 0);
   }
-
   100% {
-    --bg-opacity: 1;
+    --tw-bg-opacity: 1;
+  }
+  100% {
     transform: translate3d(0, 0, 0);
   }
 }

package/dist/collection/components/calcite-graph/calcite-graph.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]) {
@@ -91,16 +85,13 @@
 .svg {
   fill: currentColor;
   stroke: transparent;
-  margin: 0;
-  padding: 0;
+  margin: 0px;
   display: block;
-}
-
-:host([data-style=slider-histogram]) svg {
+  height: 100%;
   width: 100%;
+  padding: 0px;
 }
-
-:host([data-style=slider-histogram]) svg .graph-path--highlight {
+.svg .graph-path--highlight {
   fill: var(--calcite-ui-brand);
   opacity: 0.5;
 }

package/dist/collection/components/calcite-graph/calcite-graph.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, Prop, h } from "@stencil/core";
+import { Component, Element, Prop, h, forceUpdate } from "@stencil/core";
 import { guid } from "../../utils/guid";
 import { area, range, translate } from "./util";
+import { createObserver } from "../../utils/observers";
 export class CalciteGraph {
   constructor() {
     //--------------------------------------------------------------------------
@@ -17,25 +18,31 @@ export class CalciteGraph {
      * These data points should be sorted by x-axis value
      */
     this.data = [];
-    /** Width of graph in pixels*/
-    this.width = 300;
-    /** Width of graph in pixels*/
-    this.height = 100;
     //--------------------------------------------------------------------------
     //
     //  Private State/Props
     //
     //--------------------------------------------------------------------------
     this.graphId = `calcite-graph-${guid()}`;
+    this.resizeObserver = createObserver("resize", () => forceUpdate(this));
   }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
   render() {
-    const { data, colorStops, width, height, highlightMax, highlightMin, min, max } = this;
+    const { data, colorStops, el, highlightMax, highlightMin, min, max } = this;
     const id = this.graphId;
+    const { clientHeight: height, clientWidth: width } = el;
     // if we have no data, return empty svg
     if (!data || data.length === 0) {
       return (h("svg", { class: "svg", height: height, preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, width: width }));
@@ -137,42 +144,6 @@ export class CalciteGraph {
         "text": "Array of values describing a single color stop ([offset, color, opacity])\nThese color stops should be sorted by offset value"
       }
     },
-    "width": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Width of graph in pixels"
-      },
-      "attribute": "width",
-      "reflect": false,
-      "defaultValue": "300"
-    },
-    "height": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Width of graph in pixels"
-      },
-      "attribute": "height",
-      "reflect": false,
-      "defaultValue": "100"
-    },
     "highlightMin": {
       "type": "number",
       "mutable": false,