@esri/calcite-components 1.0.0-next.282 → 1.0.0-next.283

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

@@ -1,7 +1,8 @@
-import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
+import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
 import { focusElement, closestElementCrossShadowBoundary } from "../../utils/dom";
 import { hiddenInputStyle } from "../../utils/form";
+import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 export class CalciteCheckbox {
   constructor() {
     //--------------------------------------------------------------------------
@@ -15,7 +16,7 @@ export class CalciteCheckbox {
     this.disabled = false;
     /**
      * The hovered state of the checkbox.
-     * @private
+     * @internal
      */
     this.hovered = false;
     /**
@@ -56,17 +57,14 @@ export class CalciteCheckbox {
         this.calciteCheckboxChange.emit();
       }
     };
+    this.clickHandler = () => {
+      this.toggle();
+    };
     this.formResetHandler = () => {
       this.checked = this.initialChecked;
     };
-    this.nativeLabelClickHandler = ({ target }) => {
-      if (!this.el.closest("calcite-label") &&
-        target.nodeName === "LABEL" &&
-        target.parentNode.nodeName !== "CALCITE-LABEL" &&
-        this.el.id &&
-        target.htmlFor === this.el.id) {
-        this.toggle();
-      }
+    this.onLabelClick = () => {
+      this.toggle();
     };
   }
   checkedWatcher(newChecked) {
@@ -83,6 +81,7 @@ export class CalciteCheckbox {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus() {
     focusElement(this.input);
   }
@@ -91,14 +90,6 @@ export class CalciteCheckbox {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  onClick(event) {
-    // This line prevents double-triggering when wrapped inside either a <label> or a <calcite-label>
-    // by preventing the browser default behavior, which is to click the label's first input child element
-    if (event.target === this.el) {
-      event.preventDefault();
-    }
-    this.toggle();
-  }
   mouseenter() {
     this.hovered = true;
   }
@@ -126,7 +117,10 @@ export class CalciteCheckbox {
     if (form) {
       form.addEventListener("reset", this.formResetHandler);
     }
-    document.addEventListener("click", this.nativeLabelClickHandler);
+    connectLabel(this);
+  }
+  componentDidLoad() {
+    this.input.setAttribute("aria-label", getLabelText(this));
   }
   disconnectedCallback() {
     this.input.parentNode.removeChild(this.input);
@@ -134,7 +128,7 @@ export class CalciteCheckbox {
     if (form) {
       form.removeEventListener("reset", this.formResetHandler);
     }
-    document.removeEventListener("click", this.nativeLabelClickHandler);
+    disconnectLabel(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -151,22 +145,18 @@ export class CalciteCheckbox {
     this.input.onfocus = this.onInputFocus.bind(this);
     this.input.style.cssText = hiddenInputStyle;
     this.input.type = "checkbox";
-    if (this.label) {
-      this.input.setAttribute("aria-label", this.label);
-    }
-    else {
-      this.input.removeAttribute("aria-label");
-    }
+    this.input.setAttribute("aria-label", getLabelText(this));
     if (this.value) {
       this.input.value = this.value != null ? this.value.toString() : "";
     }
     this.el.appendChild(this.input);
   }
   render() {
-    return (h("div", { class: { focused: this.focused } },
-      h("svg", { class: "check-svg", viewBox: "0 0 16 16" },
-        h("path", { d: this.getPath() })),
-      h("slot", null)));
+    return (h(Host, { onClick: this.clickHandler },
+      h("div", { class: { focused: this.focused, test: true } },
+        h("svg", { class: "check-svg", viewBox: "0 0 16 16" },
+          h("path", { d: this.getPath() })),
+        h("slot", null))));
   }
   static get is() { return "calcite-checkbox"; }
   static get encapsulation() { return "shadow"; }
@@ -186,7 +176,7 @@ export class CalciteCheckbox {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "The checked state of the checkbox."
@@ -204,7 +194,7 @@ export class CalciteCheckbox {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "True if the checkbox is disabled"
@@ -243,7 +233,7 @@ export class CalciteCheckbox {
       "docs": {
         "tags": [{
             "text": undefined,
-            "name": "private"
+            "name": "internal"
           }],
         "text": "The hovered state of the checkbox."
       },
@@ -260,7 +250,7 @@ export class CalciteCheckbox {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "True if the checkbox is initially indeterminate,\nwhich is independent from its checked state\nhttps://css-tricks.com/indeterminate-checkboxes/"
@@ -398,7 +388,7 @@ export class CalciteCheckbox {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }
@@ -415,12 +405,6 @@ export class CalciteCheckbox {
       "methodName": "nameChanged"
     }]; }
   static get listeners() { return [{
-      "name": "click",
-      "method": "onClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
       "name": "mouseenter",
       "method": "mouseenter",
       "target": undefined,

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

@@ -4,7 +4,8 @@ import { guid } from "../../utils/guid";
 import { CSS, TEXT, SLOTS, ICONS } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
 /**
- * @slot image - a slot for adding an image
+ * @slot - A slot for adding text.
+ * @slot image - A slot for adding an image.
  */
 export class CalciteChip {
   constructor() {
@@ -23,6 +24,8 @@ export class CalciteChip {
      * @default "Close"
      */
     this.dismissLabel = TEXT.close;
+    /** flip the icon in rtl */
+    this.iconFlipRtl = false;
     /** specify the scale of the chip, defaults to m */
     this.scale = "m";
     // --------------------------------------------------------------------------
@@ -41,6 +44,7 @@ export class CalciteChip {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus() {
     var _a;
     (_a = this.closeButton) === null || _a === void 0 ? void 0 : _a.focus();
@@ -135,7 +139,7 @@ export class CalciteChip {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Optionally show a button the user can click to dismiss the chip"
@@ -191,13 +195,14 @@ export class CalciteChip {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "flip the icon in rtl"
       },
       "attribute": "icon-flip-rtl",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "false"
     },
     "scale": {
       "type": "string",
@@ -234,7 +239,7 @@ export class CalciteChip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "The assigned value for the chip"
       },
       "attribute": "value",
       "reflect": false
@@ -269,7 +274,7 @@ export class CalciteChip {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

package/dist/collection/components/calcite-color-picker/calcite-color-picker.js

@@ -285,13 +285,13 @@ export class CalciteColorPicker {
       }
       let samplingX;
       let samplingY;
+      const colorFieldAndSliderRect = this.activeColorFieldAndSliderRect;
+      const { clientX, clientY } = event;
       if (this.colorFieldAndSliderHovered) {
-        samplingX = event.offsetX;
-        samplingY = event.offsetY;
+        samplingX = clientX - colorFieldAndSliderRect.x;
+        samplingY = clientY - colorFieldAndSliderRect.y;
       }
       else {
-        const { clientX, clientY } = event;
-        const colorFieldAndSliderRect = this.activeColorFieldAndSliderRect;
         const colorFieldWidth = dimensions.colorField.width;
         const colorFieldHeight = dimensions.colorField.height;
         const hueSliderHeight = dimensions.slider.height;
@@ -467,7 +467,7 @@ export class CalciteColorPicker {
     if (checkMode) {
       const nextMode = parseMode(value);
       if (!nextMode || (format !== "auto" && nextMode !== format)) {
-        console.warn(`ignoring invalid color value: ${value}`);
+        this.showIncompatibleColorWarning(value, format);
         this.value = oldValue;
         return;
       }
@@ -545,12 +545,16 @@ export class CalciteColorPicker {
     }
   }
   connectedCallback() {
-    const { color, format, value } = this;
-    // format is user set
-    const initialValueDefault = format === "auto" ? defaultValue : this.toValue(color, format);
-    const initialValue = format === "auto" || value === defaultValue ? value : initialValueDefault;
+    const { allowEmpty, color, format, value } = this;
+    const valueIsNoColor = allowEmpty && !value;
+    const parsedMode = parseMode(value);
+    const valueIsCompatible = (format === "auto" && parsedMode) || format === parsedMode;
+    const initialColor = valueIsNoColor ? null : valueIsCompatible ? Color(value) : color;
+    if (!valueIsCompatible) {
+      this.showIncompatibleColorWarning(value, format);
+    }
     this.setMode(format);
-    this.handleValueChange(initialValue, initialValueDefault);
+    this.internalColorSet(initialColor, false);
     this.updateDimensions(this.scale);
   }
   disconnectedCallback() {
@@ -615,6 +619,9 @@ export class CalciteColorPicker {
   //  Private Methods
   //
   //--------------------------------------------------------------------------
+  showIncompatibleColorWarning(value, format) {
+    console.warn(`ignoring color value (${value}) as it is not compatible with the current format (${format})`);
+  }
   setMode(format) {
     this.mode = format === "auto" ? this.mode : format;
   }

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

@@ -197,6 +197,7 @@
 
 .input-wrap {
   display: flex;
+  flex-grow: 1;
 }
 
 .input-wrap--single {
@@ -206,7 +207,8 @@
 
 .label {
   padding: 0;
-  display: block;
+  display: flex;
+  font-weight: var(--calcite-font-weight-normal);
   flex: 1 1 auto;
   pointer-events: none;
   overflow: hidden;

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

@@ -1,4 +1,4 @@
-import { Component, h, Prop, State, Listen, Event, Element, Build, Method, Watch, Host } from "@stencil/core";
+import { Component, h, Prop, State, Listen, Event, Element, Method, Watch, Host } from "@stencil/core";
 import { filter } from "../../utils/filter";
 import { getElementDir } from "../../utils/dom";
 import { debounce } from "lodash-es";
@@ -7,7 +7,12 @@ import { createPopper, updatePopper, CSS as PopperCSS } from "../../utils/popper
 import { guid } from "../../utils/guid";
 import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, ComboboxDefaultPlacement } from "./resources";
 import { getItemAncestors, getItemChildren, hasActiveChildren } from "./utils";
+import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
+import { createObserver } from "../../utils/observers";
 const isGroup = (el) => el.tagName === ComboboxItemGroup;
+/**
+ * @slot - A slot for adding `calcite-combobox-item`s.
+ */
 export class CalciteCombobox {
   constructor() {
     //--------------------------------------------------------------------------
@@ -15,7 +20,7 @@ export class CalciteCombobox {
     //  Public Properties
     //
     //--------------------------------------------------------------------------
-    /** Open and close combobox */
+    /** Opens or closes the combobox */
     this.active = false;
     /** Disable combobox input */
     this.disabled = false;
@@ -31,11 +36,6 @@ export class CalciteCombobox {
     this.selectionMode = "multi";
     /** Specify the scale of the combobox, defaults to m */
     this.scale = "m";
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
     this.items = [];
     this.groupItems = [];
     this.selectedItems = [];
@@ -49,7 +49,7 @@ export class CalciteCombobox {
     /** specifies the item wrapper height; it is updated when maxItems is > 0  **/
     this.maxScrollerHeight = 0;
     this.textInput = null;
-    this.observer = null;
+    this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.guid = guid();
     this.inputHeight = 0;
     this.ignoreSelectedEventsFlag = false;
@@ -59,6 +59,9 @@ export class CalciteCombobox {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
+    this.onLabelClick = () => {
+      this.setFocus();
+    };
     this.keydownHandler = (event) => {
       const key = getKey(event.key, getElementDir(this.el));
       switch (key) {
@@ -289,6 +292,7 @@ export class CalciteCombobox {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
+  /** Updates the position of the component. */
   async reposition() {
     const { popper, menuEl } = this;
     const modifiers = this.getModifiers();
@@ -301,6 +305,7 @@ export class CalciteCombobox {
       })
       : this.createPopper();
   }
+  /** Sets focus on the component. */
   async setFocus() {
     var _a;
     this.active = true;
@@ -314,18 +319,14 @@ export class CalciteCombobox {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    if (Build.isBrowser) {
-      this.observer = new MutationObserver(this.updateItems);
-    }
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.createPopper();
+    connectLabel(this);
   }
   componentWillLoad() {
     this.updateItems();
   }
-  componentDidLoad() {
-    var _a;
-    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
-  }
   componentDidRender() {
     if (this.el.offsetHeight !== this.inputHeight) {
       this.reposition();
@@ -334,8 +335,9 @@ export class CalciteCombobox {
   }
   disconnectedCallback() {
     var _a;
-    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     this.destroyPopper();
+    disconnectLabel(this);
   }
   /** when search text is cleared, reset active to  */
   textHandler() {
@@ -603,7 +605,7 @@ export class CalciteCombobox {
     });
   }
   renderInput() {
-    const { active, disabled, placeholder, selectionMode, needsIcon, label, selectedItems } = this;
+    const { active, disabled, placeholder, selectionMode, needsIcon, selectedItems } = this;
     const single = selectionMode === "single";
     const selectedItem = selectedItems[0];
     const showLabel = !active && single && !!selectedItem;
@@ -615,10 +617,10 @@ export class CalciteCombobox {
           label: true,
           "label--spaced": needsIcon
         }, key: "label", onFocus: this.comboboxFocusHandler, tabindex: "0" }, selectedItem.textLabel)),
-      h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": guid, "aria-label": label, class: {
+      h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": guid, "aria-label": getLabelText(this), class: {
           input: true,
+          "input--single": true,
           "input--transparent": this.activeChipIndex > -1,
-          "input--single": single,
           "input--hidden": showLabel,
           "input--icon": single && needsIcon
         }, disabled: disabled, id: `${guid}-input`, key: "input", onBlur: this.comboboxBlurHandler, onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, ref: (el) => (this.textInput = el), type: "text" })));
@@ -658,8 +660,8 @@ export class CalciteCombobox {
     return (h(Host, { onKeyDown: this.keydownHandler },
       h("div", { "aria-autocomplete": "list", "aria-expanded": open.toString(), "aria-haspopup": "listbox", "aria-labelledby": labelId, "aria-owns": guid, class: {
           wrapper: true,
-          "wrapper--active": open,
-          "wrapper--single": single
+          "wrapper--single": single || !this.selectedItems.length,
+          "wrapper--active": open
         }, onClick: this.setFocusClick, ref: this.setReferenceEl, role: "combobox" },
         this.renderIconStart(),
         !single && this.renderChips(),
@@ -690,7 +692,7 @@ export class CalciteCombobox {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Open and close combobox"
+        "text": "Opens or closes the combobox"
       },
       "attribute": "active",
       "reflect": true,
@@ -992,7 +994,7 @@ export class CalciteCombobox {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Updates the position of the component.",
         "tags": []
       }
     },
@@ -1008,7 +1010,7 @@ export class CalciteCombobox {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

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

@@ -4,6 +4,9 @@ import { CSS } from "./resources";
 import { guid } from "../../utils/guid";
 import { getAncestors, getDepth } from "../calcite-combobox/utils";
 import { CSS_UTILITY } from "../../utils/resources";
+/**
+ * @slot - A slot for adding nested `calcite-combobox-item`s.
+ */
 export class CalciteComboboxItem {
   constructor() {
     // --------------------------------------------------------------------------

package/dist/collection/components/calcite-combobox-item-group/calcite-combobox-item-group.js

@@ -4,6 +4,9 @@ import { getAncestors, getDepth } from "../calcite-combobox/utils";
 import { guid } from "../../utils/guid";
 import { getElementDir, getElementProp } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
+/**
+ * @slot - A slot for adding `calcite-combobox-item`s.
+ */
 export class CalciteComboboxItemGroup {
   constructor() {
     this.guid = guid();

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

@@ -65,7 +65,7 @@ export class CalciteDatePicker {
     this.monthHoverChange = (e) => {
       if (!this.startAsDate) {
         this.hoverRange = undefined;
-        return this.hoverRange;
+        return;
       }
       const date = new Date(e.detail);
       this.hoverRange = {
@@ -161,7 +161,12 @@ export class CalciteDatePicker {
         if (this.startAsDate) {
           this.setEndDate(new Date(this.startAsDate));
         }
-        this.setStartDate(date);
+        if (this.activeRange == "end") {
+          this.setEndDate(date);
+        }
+        else {
+          this.setStartDate(date);
+        }
       }
       else if (!this.endAsDate) {
         this.setEndDate(date);
@@ -621,7 +626,7 @@ export class CalciteDatePicker {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Range mode activation"
@@ -673,7 +678,7 @@ export class CalciteDatePicker {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range."

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

@@ -11,12 +11,7 @@ function getSupportedLocale(lang = "") {
   }
   else {
     const base = lang.split("-")[0];
-    if (locales.indexOf(base) > -1) {
-      return base;
-    }
-    else {
-      return "en";
-    }
+    return locales.indexOf(base) > -1 ? base : "en";
   }
 }
 /**

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

@@ -18,6 +18,7 @@ export class CalciteDatePickerDay {
     this.startOfRange = false;
     /** Date is the end of date range */
     this.endOfRange = false;
+    /** Date is being hovered and within the set range */
     this.rangeHover = false;
     /** Date is actively in focus for keyboard navigation */
     this.active = false;
@@ -222,7 +223,7 @@ export class CalciteDatePickerDay {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Date is being hovered and within the set range"
       },
       "attribute": "range-hover",
       "reflect": true,

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

@@ -188,7 +188,7 @@ export class CalciteDatePickerMonth {
    * Determine if the date is in between the start and end dates
    */
   betweenSelectedRange(date) {
-    return (this.startDate &&
+    return !!(this.startDate &&
       this.endDate &&
       date > this.startDate &&
       date < this.endDate &&
@@ -198,7 +198,7 @@ export class CalciteDatePickerMonth {
    * Determine if the date should be in selected state
    */
   isSelected(date) {
-    return (sameDate(date, this.selectedDate) ||
+    return !!(sameDate(date, this.selectedDate) ||
       (this.startDate && sameDate(date, this.startDate)) ||
       (this.endDate && sameDate(date, this.endDate)));
   }
@@ -206,13 +206,13 @@ export class CalciteDatePickerMonth {
    * Determine if the date is the start of the date range
    */
   isStartOfRange(date) {
-    return (!!this.startDate &&
+    return !!(this.startDate &&
       !sameDate(this.startDate, this.endDate) &&
       sameDate(this.startDate, date) &&
       !this.isEndOfRange(date));
   }
   isEndOfRange(date) {
-    return ((!!this.endDate && !sameDate(this.startDate, this.endDate) && sameDate(this.endDate, date)) ||
+    return !!((this.endDate && !sameDate(this.startDate, this.endDate) && sameDate(this.endDate, date)) ||
       (!this.endDate &&
         this.hoverRange &&
         sameDate(this.startDate, this.hoverRange.end) &&
@@ -244,11 +244,11 @@ export class CalciteDatePickerMonth {
   }
   isHoverInRange() {
     if (!this.hoverRange) {
-      return;
+      return false;
     }
     const { start, end } = this.hoverRange;
-    return ((!this.isFocusedOnStart() && !!this.startDate && (!this.endDate || end < this.endDate)) ||
-      (this.isFocusedOnStart() && !!this.startDate && start > this.startDate));
+    return !!((!this.isFocusedOnStart() && this.startDate && (!this.endDate || end < this.endDate)) ||
+      (this.isFocusedOnStart() && this.startDate && start > this.startDate));
   }
   isRangeHover(date) {
     if (!this.hoverRange) {
@@ -437,21 +437,24 @@ export class CalciteDatePickerMonth {
       }
     },
     "hoverRange": {
-      "type": "any",
+      "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "HoverRange",
+        "resolved": "HoverRange",
+        "references": {
+          "HoverRange": {
+            "location": "import",
+            "path": "../../utils/date"
+          }
+        }
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
-      },
-      "attribute": "hover-range",
-      "reflect": false
+        "text": "The range of dates currently being hovered"
+      }
     }
   }; }
   static get events() { return [{