@esri/calcite-components 1.0.0-beta.66 → 1.0.0-beta.67

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

@@ -74,22 +74,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;
@@ -248,7 +258,7 @@ 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}%`
@@ -393,8 +403,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();
@@ -413,8 +422,12 @@ export class CalciteSlider {
         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
@@ -469,9 +482,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
@@ -494,7 +528,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));
@@ -1057,6 +1091,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,
@@ -1064,7 +1113,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",
@@ -1079,7 +1128,7 @@ export class CalciteSlider {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": "use calciteSliderChange instead",
+            "text": "use calciteSliderInput instead",
             "name": "deprecated"
           }],
         "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."

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

@@ -194,23 +194,23 @@
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand);
 }
 
-:host([switched]) .track {
+:host([checked]) .track {
   background-color: var(--calcite-ui-brand);
   border-color: var(--calcite-ui-brand-hover);
 }
 
-:host([switched]) .handle {
+:host([checked]) .handle {
   left: auto;
   border-color: var(--calcite-ui-brand);
   right: -1px;
 }
 
-:host([switched]:hover) .track {
+:host([checked]:hover) .track {
   background-color: var(--calcite-ui-brand);
   border-color: var(--calcite-ui-brand-hover);
 }
 
-:host([switched]:hover) .handle {
+:host([checked]:hover) .handle {
   border-color: var(--calcite-ui-brand-hover);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand-hover);
 }
@@ -220,17 +220,17 @@
   right: -1px;
 }
 
-:host([switched]) .calcite--rtl .handle {
+:host([checked]) .calcite--rtl .handle {
   right: auto;
   left: -1px;
 }
 
-:host([switched]:active) .calcite--rtl .handle {
+:host([checked]:active) .calcite--rtl .handle {
   right: auto;
   left: -1px;
 }
 
-:host([switched]:focus) .calcite--rtl .handle {
+:host([checked]:focus) .calcite--rtl .handle {
   right: auto;
   left: -1px;
 }

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

@@ -16,8 +16,12 @@ export class CalciteSwitch {
     this.disabled = false;
     /** The scale of the switch */
     this.scale = "m";
-    /** True if the switch is initially on */
+    /** True if the switch is initially on
+     * @deprecated use 'checked' instead.
+     */
     this.switched = false;
+    /** True if the switch is initially on */
+    this.checked = false;
     this.inputEl = document.createElement("input");
     //--------------------------------------------------------------------------
     //
@@ -31,9 +35,6 @@ export class CalciteSwitch {
       }
     };
     this.clickHandler = () => {
-      if (this.labelEl) {
-        return;
-      }
       this.toggle();
     };
   }
@@ -44,8 +45,11 @@ export class CalciteSwitch {
   nameChanged(newName) {
     this.inputEl.name = newName;
   }
-  switchedWatcher(newSwitched) {
-    this.inputEl.checked = newSwitched;
+  switchedWatcher(switched) {
+    this.checked = switched;
+  }
+  checkedWatcher(checked) {
+    this.inputEl.checked = checked;
   }
   //--------------------------------------------------------------------------
   //
@@ -57,7 +61,7 @@ export class CalciteSwitch {
     this.el.focus();
   }
   setupInput() {
-    this.switched && this.inputEl.setAttribute("checked", "");
+    this.checked && this.inputEl.setAttribute("checked", "");
     this.inputEl.disabled = this.disabled;
     this.inputEl.id = `${this.guid}-input`;
     this.inputEl.name = this.name;
@@ -69,9 +73,11 @@ export class CalciteSwitch {
     this.el.appendChild(this.inputEl);
   }
   toggle() {
-    this.switched = !this.switched;
+    this.checked = !this.checked;
     this.calciteSwitchChange.emit({
-      switched: this.switched
+      // todo: We should remove emmitting redudant props in event payload.
+      // https://github.com/Esri/calcite-components/issues/3163
+      switched: this.checked
     });
   }
   //--------------------------------------------------------------------------
@@ -108,7 +114,7 @@ export class CalciteSwitch {
   // --------------------------------------------------------------------------
   render() {
     const dir = getElementDir(this.el);
-    return (h(Host, { "aria-checked": this.switched.toString(), "aria-label": getLabelText(this), onClick: this.clickHandler, role: "switch", tabindex: this.tabindex },
+    return (h(Host, { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), onClick: this.clickHandler, role: "switch", tabindex: this.tabindex },
       h("div", { class: { container: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
         h("div", { class: "track" },
           h("div", { class: "handle" })))));
@@ -198,6 +204,27 @@ export class CalciteSwitch {
       "defaultValue": "\"m\""
     },
     "switched": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "use 'checked' instead.",
+            "name": "deprecated"
+          }],
+        "text": "True if the switch is initially on"
+      },
+      "attribute": "switched",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "checked": {
       "type": "boolean",
       "mutable": true,
       "complexType": {
@@ -211,7 +238,7 @@ export class CalciteSwitch {
         "tags": [],
         "text": "True if the switch is initially on"
       },
-      "attribute": "switched",
+      "attribute": "checked",
       "reflect": true,
       "defaultValue": "false"
     },
@@ -245,7 +272,7 @@ export class CalciteSwitch {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fires when the switched value has changed."
+        "text": "Fires when the checked value has changed."
       },
       "complexType": {
         "original": "any",
@@ -281,6 +308,9 @@ export class CalciteSwitch {
     }, {
       "propName": "switched",
       "methodName": "switchedWatcher"
+    }, {
+      "propName": "checked",
+      "methodName": "checkedWatcher"
     }]; }
   static get listeners() { return [{
       "name": "keydown",

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

@@ -90,7 +90,6 @@
 
 :host {
   display: none;
-  z-index: 10;
   color: var(--calcite-ui-text-3);
 }
 

package/dist/collection/components/calcite-tab-nav/calcite-tab-nav.css

@@ -85,7 +85,6 @@
 }
 
 :host {
-  z-index: 20;
   position: relative;
   display: flex;
 }

package/dist/collection/components/calcite-tile-select/calcite-tile-select.js

@@ -1,4 +1,4 @@
-import { Component, Element, h, Prop, Listen, Watch, State, Method } from "@stencil/core";
+import { Component, Element, Event, h, Prop, Listen, Watch, State, Method } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 import { guid } from "../../utils/guid";
@@ -57,30 +57,42 @@ export class CalciteTileSelect {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  calciteCheckboxChangeEvent(event) {
+  checkboxChangeHandler(event) {
     const checkbox = event.target;
     if (checkbox === this.input) {
       this.checked = checkbox.checked;
     }
+    event.stopPropagation();
+    this.calciteTileSelectChange.emit();
   }
-  calciteCheckboxFocusedChangeEvent(event) {
+  checkboxFocusHandler(event) {
     const checkbox = event.target;
     if (checkbox === this.input) {
       this.focused = event.detail;
     }
+    event.stopPropagation();
   }
-  calciteRadioButtonCheckedChangeEvent(event) {
+  radioButtonChangeHandler(event) {
     const radioButton = event.target;
     if (radioButton === this.input) {
       this.checked = radioButton.checked;
     }
     event.stopPropagation();
+    this.calciteTileSelectChange.emit();
   }
-  calciteRadioButtonFocusedChangeEvent(event) {
+  radioButtonCheckedChangeHandler(event) {
+    const radioButton = event.target;
+    if (radioButton === this.input) {
+      this.checked = radioButton.checked;
+    }
+    event.stopPropagation();
+  }
+  radioButtonFocusHandler(event) {
     const radioButton = event.target;
     if (radioButton === this.input) {
       this.focused = radioButton.focused;
     }
+    event.stopPropagation();
   }
   click(event) {
     const target = event.target;
@@ -388,6 +400,22 @@ export class CalciteTileSelect {
   static get states() { return {
     "focused": {}
   }; }
+  static get events() { return [{
+      "method": "calciteTileSelectChange",
+      "name": "calciteTileSelectChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emits a custom change event.  For checkboxes, it emits when the checkbox is checked or unchecked.  For radios it only emits when it is checked."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
   static get methods() { return {
     "setFocus": {
       "complexType": {
@@ -416,25 +444,31 @@ export class CalciteTileSelect {
     }]; }
   static get listeners() { return [{
       "name": "calciteCheckboxChange",
-      "method": "calciteCheckboxChangeEvent",
+      "method": "checkboxChangeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "calciteInternalCheckboxFocus",
+      "method": "checkboxFocusHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteCheckboxFocusedChange",
-      "method": "calciteCheckboxFocusedChangeEvent",
+      "name": "calciteRadioButtonChange",
+      "method": "radioButtonChangeHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteRadioButtonCheckedChange",
-      "method": "calciteRadioButtonCheckedChangeEvent",
+      "name": "calciteInternalRadioButtonCheckedChange",
+      "method": "radioButtonCheckedChangeHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteRadioButtonFocusedChange",
-      "method": "calciteRadioButtonFocusedChangeEvent",
+      "name": "calciteInternalRadioButtonFocus",
+      "method": "radioButtonFocusHandler",
       "target": undefined,
       "capture": false,
       "passive": false

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

@@ -6,7 +6,7 @@ import List from "../calcite-pick-list/shared-list-render";
 import { getRoundRobinIndex } from "../../utils/array";
 import { createObserver } from "../../utils/observers";
 /**
- * @slot - A slot for adding `calcite-pick-list-item` elements or `calcite-pick-list-group` elements. Items are displayed as a vertical list.
+ * @slot - A slot for adding `calcite-value-list-item` elements. Items are displayed as a vertical list.
  * @slot menu-actions - A slot for adding a button + menu combo for performing actions like sorting.
  */
 export class CalciteValueList {

package/dist/collection/utils/filter.js

@@ -1,7 +1,7 @@
 import { escapeRegExp, forIn } from "lodash-es";
 export const filter = (data, value) => {
   const escapedValue = escapeRegExp(value);
-  const regex = new RegExp(escapedValue, "ig");
+  const regex = new RegExp(escapedValue, "i");
   if (data.length === 0) {
     console.warn(`No data was passed to the filter function.
     The data argument should be an array of objects`);

package/dist/collection/utils/label.js

@@ -1,6 +1,7 @@
 import { closestElementCrossShadowBoundary, queryElementRoots } from "./dom";
 const labelTagName = "calcite-label";
 const labelClickEvent = "calciteInternalLabelClick";
+const onLabelClickMap = new WeakMap();
 const findLabelForComponent = (componentEl) => {
   const id = componentEl.id;
   return ((id && queryElementRoots(componentEl, `${labelTagName}[for="${id}"]`)) ||
@@ -10,16 +11,25 @@ const findLabelForComponent = (componentEl) => {
  * Helper to set up label interactions on connectedCallback.
  */
 export function connectLabel(component) {
-  var _a;
-  component.labelEl = findLabelForComponent(component.el);
-  (_a = component.labelEl) === null || _a === void 0 ? void 0 : _a.addEventListener(labelClickEvent, component.onLabelClick);
+  const labelEl = findLabelForComponent(component.el);
+  if (!labelEl) {
+    return;
+  }
+  component.labelEl = labelEl;
+  const boundOnLabelClick = onLabelClick.bind(component);
+  onLabelClickMap.set(component.el, boundOnLabelClick);
+  component.labelEl.addEventListener(labelClickEvent, boundOnLabelClick);
 }
 /**
  * Helper to tear down label interactions on disconnectedCallback.
  */
 export function disconnectLabel(component) {
-  var _a;
-  (_a = component.labelEl) === null || _a === void 0 ? void 0 : _a.removeEventListener(labelClickEvent, component.onLabelClick);
+  if (!component.labelEl) {
+    return;
+  }
+  const boundOnLabelClick = onLabelClickMap.get(component.el);
+  component.labelEl.removeEventListener(labelClickEvent, boundOnLabelClick);
+  onLabelClickMap.delete(component.el);
 }
 /**
  * Helper to get the label text from a component.
@@ -28,3 +38,10 @@ export function getLabelText(component) {
   var _a, _b;
   return component.label || ((_b = (_a = component.labelEl) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || "";
 }
+function onLabelClick(event) {
+  const containedLabelableChildClicked = this.el.contains(event.detail.sourceEvent.target);
+  if (containedLabelableChildClicked) {
+    return;
+  }
+  this.onLabelClick(event);
+}

package/dist/collection/utils/resources.js

@@ -1,7 +1,24 @@
+const autoTheme = "calcite-theme-auto";
+const darkTheme = "calcite-theme-dark";
+const lightTheme = "calcite-theme-light";
+export const THEMES = [
+  {
+    name: "light",
+    className: lightTheme
+  },
+  {
+    name: "dark",
+    className: darkTheme
+  },
+  {
+    name: "auto",
+    className: autoTheme
+  }
+];
 export const CSS_UTILITY = {
-  autoTheme: "calcite-theme-auto",
-  darkTheme: "calcite-theme-dark",
-  lightTheme: "calcite-theme-light",
+  autoTheme,
+  darkTheme,
+  lightTheme,
   rtl: "calcite--rtl"
 };
 export const TEXT = {