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

package/dist/collection/components/calcite-date-picker-month/calcite-date-picker-month.js

@@ -434,8 +434,8 @@ export class CalciteDatePickerMonth {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "CLDR locale data for current locale"
       }
@@ -484,8 +484,8 @@ export class CalciteDatePickerMonth {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Event emitted when user hovers the date."
       },
@@ -517,8 +517,8 @@ export class CalciteDatePickerMonth {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

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

@@ -181,7 +181,7 @@ export class CalciteDropdown {
     this.setMaxScrollerHeight();
     const modifiers = this.getModifiers();
     popper
-      ? updatePopper({
+      ? await updatePopper({
         el: menuEl,
         modifiers,
         placement,
@@ -472,8 +472,8 @@ export class CalciteDropdown {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"bottom-leading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"bottom-leading\""
           }],
         "text": "Determines where the dropdown will be positioned relative to the button."
       },
@@ -520,8 +520,8 @@ export class CalciteDropdown {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "readonly"
+            "name": "readonly",
+            "text": undefined
           }],
         "text": "**read-only** The currently selected items"
       },

package/dist/collection/components/calcite-dropdown-group/calcite-dropdown-group.js

@@ -139,8 +139,8 @@ export class CalciteDropdownGroup {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

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

@@ -164,8 +164,7 @@
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 
-:host(:focus),
-.container--link a:focus {
+:host(:focus) {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
@@ -189,26 +188,32 @@
 }
 
 .container--s .dropdown-link {
-  padding-left: 0.75rem;
+  font-size: var(--calcite-font-size--2);
+  line-height: 1rem;
+  padding-right: 0.5rem;
+  padding-left: 1.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.container--m .dropdown-link {
+  font-size: var(--calcite-font-size--1);
+  line-height: 1rem;
   padding-right: 0.75rem;
+  padding-left: 2rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
 
-.container--m .dropdown-link {
-  padding-left: 1rem;
+.container--l .dropdown-link {
+  font-size: var(--calcite-font-size-0);
+  line-height: 1.25rem;
   padding-right: 1rem;
+  padding-left: 2.5rem;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
 
-.container--l .dropdown-link {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
 :host(:hover) .container,
 :host(:active) .container {
   background-color: var(--calcite-ui-foreground-2);
@@ -216,6 +221,11 @@
   text-decoration: none;
 }
 
+:host(:hover) .container--link .dropdown-link,
+:host(:active) .container--link .dropdown-link {
+  color: var(--calcite-ui-text-1);
+}
+
 :host(:focus) .container {
   color: var(--calcite-ui-text-1);
   text-decoration: none;
@@ -236,32 +246,28 @@
   right: 1rem;
 }
 
-:host([active]) .container:not(.container--none-selection) {
+.calcite--rtl .dropdown-link {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+:host([active]) .container:not(.container--none-selection),
+:host([active]) .container--link .dropdown-link {
   color: var(--calcite-ui-text-1);
   font-weight: var(--calcite-font-weight-medium);
 }
 
-:host([active]) .container:not(.container--none-selection):before {
+:host([active]) .container:not(.container--none-selection):before,
+:host([active]) .container--link .dropdown-link:before {
   opacity: 1;
   color: var(--calcite-ui-brand);
 }
 
-:host([active]) .container:not(.container--none-selection) calcite-icon {
+:host([active]) .container:not(.container--none-selection) calcite-icon,
+:host([active]) .container--link .dropdown-link calcite-icon {
   color: var(--calcite-ui-brand);
 }
 
-.container--s.container--none-selection {
-  padding-left: 0.25rem;
-}
-
-.container--m.container--none-selection {
-  padding-left: 0.5rem;
-}
-
-.container--l.container--none-selection {
-  padding-left: 0.75rem;
-}
-
 .container--multi-selection:before,
 .container--none-selection:before {
   display: none;

package/dist/collection/components/calcite-dropdown-item/calcite-dropdown-item.js

@@ -314,8 +314,8 @@ export class CalciteDropdownItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -332,8 +332,8 @@ export class CalciteDropdownItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -355,8 +355,8 @@ export class CalciteDropdownItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

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

@@ -152,8 +152,8 @@ export class CalciteFab {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"plus\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"plus\""
           }],
         "text": "The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/."
       },

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

@@ -2,7 +2,7 @@
  * 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, State, h, Method, Fragment } from "@stencil/core";
+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";
@@ -14,7 +14,12 @@ export class CalciteFilter {
      * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
      */
     this.disabled = false;
-    this.empty = true;
+    /**
+     * The resulting items after filtering.
+     *
+     * @readonly
+     */
+    this.filteredItems = [];
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -22,10 +27,8 @@ export class CalciteFilter {
     // --------------------------------------------------------------------------
     this.filter = debounce((value) => {
       const regex = new RegExp(value, "i");
-      if (this.data.length === 0) {
-        console.warn(`No data was passed to calcite-filter.
-      The data property expects an array of objects`);
-        this.calciteFilterChange.emit([]);
+      if (this.items.length === 0) {
+        this.updateFiltered([]);
         return;
       }
       const find = (input, RE) => {
@@ -45,15 +48,14 @@ export class CalciteFilter {
         });
         return found;
       };
-      const result = this.data.filter((item) => {
+      const result = this.items.filter((item) => {
         return find(item, regex);
       });
-      this.calciteFilterChange.emit(result);
+      this.updateFiltered(result);
     }, filterDebounceInMs);
     this.inputHandler = (event) => {
       const target = event.target;
-      this.empty = target.value === "";
-      this.filter(target.value);
+      this.value = target.value;
     };
     this.keyDownHandler = ({ key }) => {
       if (key === "Escape") {
@@ -61,12 +63,29 @@ export class CalciteFilter {
       }
     };
     this.clear = () => {
-      this.textInput.value = "";
-      this.empty = true;
-      this.calciteFilterChange.emit(this.data);
+      this.value = "";
       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
@@ -76,6 +95,11 @@ export class CalciteFilter {
   async setFocus() {
     focusElement(this.textInput);
   }
+  updateFiltered(filtered) {
+    this.filteredItems.length = 0;
+    this.filteredItems = this.filteredItems.concat(filtered);
+    this.calciteFilterChange.emit(filtered);
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -90,8 +114,8 @@ export class CalciteFilter {
         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) => {
               this.textInput = el;
-            }, type: "text", value: "" })),
-        !this.empty ? (h("button", { "aria-label": this.intlClear || TEXT.clear, class: CSS.clearButton, onClick: this.clear },
+            }, type: "text", value: this.value })),
+        this.value ? (h("button", { "aria-label": this.intlClear || TEXT.clear, class: CSS.clearButton, onClick: this.clear },
           h("calcite-icon", { icon: ICONS.close }))) : null)));
   }
   static get is() { return "calcite-filter"; }
@@ -114,10 +138,28 @@ export class CalciteFilter {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "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,
+      "complexType": {
+        "original": "object[]",
+        "resolved": "object[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The items to filter through. 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.\n\nThis property is required."
+      }
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,
@@ -136,6 +178,29 @@ export class CalciteFilter {
       "reflect": true,
       "defaultValue": "false"
     },
+    "filteredItems": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "CalciteFilter[\"items\"]",
+        "resolved": "object[]",
+        "references": {
+          "CalciteFilter": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "readonly",
+            "text": undefined
+          }],
+        "text": "The resulting items after filtering."
+      },
+      "defaultValue": "[]"
+    },
     "intlClear": {
       "type": "string",
       "mutable": false,
@@ -186,11 +251,25 @@ export class CalciteFilter {
       },
       "attribute": "placeholder",
       "reflect": false
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Filter value."
+      },
+      "attribute": "value",
+      "reflect": false
     }
   }; }
-  static get states() { return {
-    "empty": {}
-  }; }
   static get events() { return [{
       "method": "calciteFilterChange",
       "name": "calciteFilterChange",
@@ -226,4 +305,14 @@ export class CalciteFilter {
     }
   }; }
   static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "data",
+      "methodName": "watchDataHandler"
+    }, {
+      "propName": "items",
+      "methodName": "watchItemsHandler"
+    }, {
+      "propName": "value",
+      "methodName": "valueHandler"
+    }]; }
 }

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

@@ -34,17 +34,25 @@ export class CalciteGraph {
   //
   //--------------------------------------------------------------------------
   render() {
-    const { data, colorStops, width, height, highlightMax, highlightMin } = this;
+    const { data, colorStops, width, height, highlightMax, highlightMin, min, max } = this;
     const id = this.graphId;
     // 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 }));
     }
-    const { min, max } = range(data);
-    const t = translate({ min, max, width, height });
-    const [hMinX] = t([highlightMin, max[1]]);
-    const [hMaxX] = t([highlightMax, max[1]]);
-    const areaPath = area({ data, min, max, t });
+    const { min: rangeMin, max: rangeMax } = range(data);
+    let currentMin = rangeMin;
+    let currentMax = rangeMax;
+    if (min < rangeMin[0]) {
+      currentMin = [min, 0];
+    }
+    if (max > rangeMax[0]) {
+      currentMax = [max, rangeMax[1]];
+    }
+    const t = translate({ min: currentMin, max: currentMax, width, height });
+    const [hMinX] = t([highlightMin, currentMax[1]]);
+    const [hMaxX] = t([highlightMax, currentMax[1]]);
+    const areaPath = area({ data, min: rangeMin, max: rangeMax, t });
     const fill = colorStops ? `url(#linear-gradient-${id})` : undefined;
     return (h("svg", { class: "svg", height: height, preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, width: width },
       colorStops ? (h("defs", null,
@@ -198,6 +206,40 @@ export class CalciteGraph {
       },
       "attribute": "highlight-max",
       "reflect": false
+    },
+    "min": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Lowest point of the range"
+      },
+      "attribute": "min",
+      "reflect": false
+    },
+    "max": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Highest point of the range"
+      },
+      "attribute": "max",
+      "reflect": false
     }
   }; }
   static get elementRef() { return "el"; }

package/dist/collection/components/calcite-graph/util.js

@@ -49,7 +49,7 @@ export function translate({ width, height, min, max }) {
   const rangeX = max[0] - min[0];
   const rangeY = max[1] - min[1];
   return (point) => {
-    const x = (point[0] / rangeX) * width;
+    const x = ((point[0] - min[0]) / rangeX) * width;
     const y = height - (point[1] / rangeY) * height;
     return [x, y];
   };

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

@@ -86,8 +86,8 @@ export class CalciteHandle {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "- stores the activated state of the drag handle.",
-            "name": "internal"
+            "name": "internal",
+            "text": "- stores the activated state of the drag handle."
           }],
         "text": ""
       },

package/dist/collection/components/calcite-inline-editable/calcite-inline-editable.js

@@ -268,8 +268,8 @@ export class CalciteInlineEditable {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Click to edit\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Click to edit\""
           }],
         "text": "specify text to be user for the enable editing button's aria-label, defaults to `Click to edit`"
       },
@@ -289,8 +289,8 @@ export class CalciteInlineEditable {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Cancel\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Cancel\""
           }],
         "text": "specify text to be user for the cancel editing button's aria-label, defaults to `Cancel`"
       },
@@ -310,8 +310,8 @@ export class CalciteInlineEditable {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Save\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Save\""
           }],
         "text": "specify text to be user for the confirm changes button's aria-label, defaults to `Save`"
       },
@@ -369,8 +369,8 @@ export class CalciteInlineEditable {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -387,8 +387,8 @@ export class CalciteInlineEditable {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -405,8 +405,8 @@ export class CalciteInlineEditable {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },