@esri/calcite-components 1.0.0-beta.81 → 1.0.0-beta.84

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import Color from "color";
@@ -43,6 +43,7 @@ export class ColorPicker {
      * The format of the value property.
      *
      * When "auto", the format will be inferred from `value` when set.
+     *
      * @default "auto"
      */
     this.format = defaultFormat;
@@ -52,80 +53,117 @@ export class ColorPicker {
     this.hideChannels = false;
     /** When true, hides the saved colors section */
     this.hideSaved = false;
-    /** Label used for the blue channel
+    /**
+     * Label used for the blue channel
+     *
      * @default "B"
      */
     this.intlB = TEXT.b;
-    /** Label used for the blue channel description
+    /**
+     * Label used for the blue channel description
+     *
      * @default "Blue"
      */
     this.intlBlue = TEXT.blue;
-    /** Label used for the delete color button.
+    /**
+     * Label used for the delete color button.
+     *
      * @default "Delete color"
      */
     this.intlDeleteColor = TEXT.deleteColor;
-    /** Label used for the green channel
+    /**
+     * Label used for the green channel
+     *
      * @default "G"
      */
     this.intlG = TEXT.g;
-    /** Label used for the green channel description
+    /**
+     * Label used for the green channel description
+     *
      * @default "Green"
      */
     this.intlGreen = TEXT.green;
-    /** Label used for the hue channel
+    /**
+     * Label used for the hue channel
+     *
      * @default "H"
      */
     this.intlH = TEXT.h;
-    /** Label used for the HSV mode
+    /**
+     * Label used for the HSV mode
+     *
      * @default "HSV"
      */
     this.intlHsv = TEXT.hsv;
-    /** Label used for the hex input
+    /**
+     * Label used for the hex input
+     *
      * @default "Hex"
      */
     this.intlHex = TEXT.hex;
-    /** Label used for the hue channel description
+    /**
+     * Label used for the hue channel description
+     *
      * @default "Hue"
      */
     this.intlHue = TEXT.hue;
     /**
      * Label used for the hex input when there is no color selected.
+     *
      * @default "No color"
      */
     this.intlNoColor = TEXT.noColor;
-    /** Label used for the red channel
+    /**
+     * Label used for the red channel
+     *
      * @default "R"
      */
     this.intlR = TEXT.r;
-    /** Label used for the red channel description
+    /**
+     * Label used for the red channel description
+     *
      * @default "Red"
      */
     this.intlRed = TEXT.red;
-    /** Label used for the RGB mode
+    /**
+     * Label used for the RGB mode
+     *
      * @default "RGB"
      */
     this.intlRgb = TEXT.rgb;
-    /** Label used for the saturation channel
+    /**
+     * Label used for the saturation channel
+     *
      * @default "S"
      */
     this.intlS = TEXT.s;
-    /** Label used for the saturation channel description
+    /**
+     * Label used for the saturation channel description
+     *
      * @default "Saturation"
      */
     this.intlSaturation = TEXT.saturation;
-    /** Label used for the save color button.
+    /**
+     * Label used for the save color button.
+     *
      * @default "Save color"
      */
     this.intlSaveColor = TEXT.saveColor;
-    /** Label used for the saved colors section
+    /**
+     * Label used for the saved colors section
+     *
      * @default "Saved"
      */
     this.intlSaved = TEXT.saved;
-    /** Label used for the value channel
+    /**
+     * Label used for the value channel
+     *
      * @default "V"
      */
     this.intlV = TEXT.v;
-    /** Label used for the
+    /**
+     * Label used for the
+     *
      * @default "Value"
      */
     this.intlValue = TEXT.value;
@@ -140,6 +178,7 @@ export class ColorPicker {
      * a RGB, HSL or HSV object.
      *
      * The type will be preserved as the color is updated.
+     *
      * @default "#007ac2"
      * @see [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/color-picker/interfaces.ts#L10)
      */
@@ -247,7 +286,7 @@ export class ColorPicker {
         this.handleSavedColorSelect(event);
       }
     };
-    this.handleColorFieldAndSliderMouseLeave = () => {
+    this.handleColorFieldAndSliderPointerLeave = () => {
       this.colorFieldAndSliderInteractive = false;
       this.colorFieldAndSliderHovered = false;
       if (this.sliderThumbState !== "drag" && this.hueThumbState !== "drag") {
@@ -256,27 +295,28 @@ export class ColorPicker {
         this.drawColorFieldAndSlider();
       }
     };
-    this.handleColorFieldAndSliderMouseDown = (event) => {
+    this.handleColorFieldAndSliderPointerDown = (event) => {
+      var _a, _b;
       const { offsetX, offsetY } = event;
       const region = this.getCanvasRegion(offsetY);
       if (region === "color-field") {
         this.hueThumbState = "drag";
         this.captureColorFieldColor(offsetX, offsetY);
-        this.colorFieldScopeNode.focus();
+        (_a = this.colorFieldScopeNode) === null || _a === void 0 ? void 0 : _a.focus();
       }
       else if (region === "slider") {
         this.sliderThumbState = "drag";
         this.captureHueSliderColor(offsetX);
-        this.hueScopeNode.focus();
+        (_b = this.hueScopeNode) === null || _b === void 0 ? void 0 : _b.focus();
       }
       // prevent text selection outside of color field & slider area
       event.preventDefault();
-      document.addEventListener("mousemove", this.globalMouseMoveHandler);
-      document.addEventListener("mouseup", this.globalMouseUpHandler, { once: true });
+      document.addEventListener("pointermove", this.globalPointerMoveHandler);
+      document.addEventListener("pointerup", this.globalPointerUpHandler, { once: true });
       this.activeColorFieldAndSliderRect =
         this.fieldAndSliderRenderingContext.canvas.getBoundingClientRect();
     };
-    this.globalMouseUpHandler = () => {
+    this.globalPointerUpHandler = () => {
       const previouslyDragging = this.sliderThumbState === "drag" || this.hueThumbState === "drag";
       this.hueThumbState = "idle";
       this.sliderThumbState = "idle";
@@ -286,7 +326,7 @@ export class ColorPicker {
         this.calciteColorPickerChange.emit();
       }
     };
-    this.globalMouseMoveHandler = (event) => {
+    this.globalPointerMoveHandler = (event) => {
       const { el, dimensions } = this;
       const sliderThumbDragging = this.sliderThumbState === "drag";
       const hueThumbDragging = this.hueThumbState === "drag";
@@ -313,7 +353,7 @@ export class ColorPicker {
           samplingX = 0;
         }
         else {
-          samplingX = colorFieldWidth;
+          samplingX = colorFieldWidth - 1;
         }
         if (clientY < colorFieldAndSliderRect.y + colorFieldHeight + hueSliderHeight &&
           clientY > colorFieldAndSliderRect.y) {
@@ -333,7 +373,7 @@ export class ColorPicker {
         this.captureHueSliderColor(samplingX);
       }
     };
-    this.handleColorFieldAndSliderMouseEnterOrMove = ({ offsetX, offsetY }) => {
+    this.handleColorFieldAndSliderPointerEnterOrMove = ({ offsetX, offsetY }) => {
       const { dimensions: { colorField, slider, thumb } } = this;
       this.colorFieldAndSliderInteractive = offsetY <= colorField.height + slider.height;
       this.colorFieldAndSliderHovered = true;
@@ -409,7 +449,7 @@ export class ColorPicker {
         /* the channel container is ltr, so we apply the host's direction */
         this.renderChannel(channel, index, channelLabels[index], channelAriaLabels[index], direction)))));
     };
-    this.renderChannel = (value, index, label, ariaLabel, direction) => (h("calcite-input", { class: CSS.channel, "data-channel-index": index, dir: direction, label: ariaLabel, numberButtonType: "none", onCalciteInputChange: this.handleChannelChange, onCalciteInputInput: this.handleChannelInput, prefixText: label, scale: this.scale === "l" ? "m" : "s", type: "number", value: value === null || value === void 0 ? void 0 : value.toString() }));
+    this.renderChannel = (value, index, label, ariaLabel, direction) => (h("calcite-input", { class: CSS.channel, "data-channel-index": index, dir: direction, label: ariaLabel, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputChange: this.handleChannelChange, onCalciteInputInput: this.handleChannelInput, onKeyDown: this.handleKeyDown, prefixText: label, scale: this.scale === "l" ? "m" : "s", type: "number", value: value === null || value === void 0 ? void 0 : value.toString() }));
     this.deleteColor = () => {
       const colorToDelete = this.color.hex();
       const inStorage = this.savedColors.indexOf(colorToDelete) > -1;
@@ -451,13 +491,7 @@ export class ColorPicker {
     };
     this.initColorFieldAndSlider = (canvas) => {
       this.fieldAndSliderRenderingContext = canvas.getContext("2d");
-      this.setCanvasContextSize(canvas, {
-        width: this.dimensions.colorField.width,
-        height: this.dimensions.colorField.height +
-          this.dimensions.slider.height +
-          this.getSliderCapSpacing() * 2
-      });
-      this.drawColorFieldAndSlider();
+      this.updateCanvasSize(canvas);
     };
   }
   handleColorChange(color, oldColor) {
@@ -470,7 +504,9 @@ export class ColorPicker {
     this.internalColorSet(this.color, false, "internal");
   }
   handleScaleChange(scale = "m") {
+    var _a;
     this.updateDimensions(scale);
+    this.updateCanvasSize((_a = this.fieldAndSliderRenderingContext) === null || _a === void 0 ? void 0 : _a.canvas);
   }
   handleValueChange(value, oldValue) {
     const { allowEmpty, format } = this;
@@ -567,8 +603,8 @@ export class ColorPicker {
     }
   }
   disconnectedCallback() {
-    document.removeEventListener("mousemove", this.globalMouseMoveHandler);
-    document.removeEventListener("mouseup", this.globalMouseUpHandler);
+    document.removeEventListener("pointermove", this.globalPointerMoveHandler);
+    document.removeEventListener("pointerup", this.globalPointerUpHandler);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -592,7 +628,7 @@ export class ColorPicker {
         h("canvas", { class: {
             [CSS.colorFieldAndSlider]: true,
             [CSS.colorFieldAndSliderInteractive]: colorFieldAndSliderInteractive
-          }, onMouseDown: this.handleColorFieldAndSliderMouseDown, onMouseEnter: this.handleColorFieldAndSliderMouseEnterOrMove, onMouseLeave: this.handleColorFieldAndSliderMouseLeave, onMouseMove: this.handleColorFieldAndSliderMouseEnterOrMove, ref: this.initColorFieldAndSlider }),
+          }, onPointerDown: this.handleColorFieldAndSliderPointerDown, onPointerEnter: this.handleColorFieldAndSliderPointerEnterOrMove, onPointerLeave: this.handleColorFieldAndSliderPointerLeave, onPointerMove: this.handleColorFieldAndSliderPointerEnterOrMove, ref: this.initColorFieldAndSlider }),
         h("div", { "aria-label": vertical ? this.intlValue : this.intlSaturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color === null || color === void 0 ? void 0 : color.saturationv() : color === null || color === void 0 ? void 0 : color.value()) || "0", class: { [CSS.scope]: true, [CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: { top: `${colorFieldScopeTop || 0}px`, left: `${colorFieldScopeLeft || 0}px` }, tabindex: "0" }),
         h("div", { "aria-label": this.intlHue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": (color === null || color === void 0 ? void 0 : color.round().hue()) || DEFAULT_COLOR.round().hue(), class: { [CSS.scope]: true, [CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: { top: `${hueTop}px`, left: `${hueLeft}px` }, tabindex: "0" })),
       hideHex && hideChannels ? null : (h("div", { class: {
@@ -604,7 +640,7 @@ export class ColorPicker {
               [CSS.header]: true,
               [CSS.headerHex]: true
             } }, intlHex),
-          h("calcite-color-picker-hex-input", { allowEmpty: allowEmpty, class: CSS.control, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: hexInputScale, value: selectedColorInHex }))),
+          h("calcite-color-picker-hex-input", { allowEmpty: allowEmpty, class: CSS.control, numberingSystem: this.numberingSystem, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: hexInputScale, value: selectedColorInHex }))),
         hideChannels ? null : (h("calcite-tabs", { class: {
             [CSS.colorModeContainer]: true,
             [CSS.splitSection]: true
@@ -629,6 +665,11 @@ export class ColorPicker {
   //  Private Methods
   //
   //--------------------------------------------------------------------------
+  handleKeyDown(event) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+    }
+  }
   showIncompatibleColorWarning(value, format) {
     console.warn(`ignoring color value (${value}) as it is not compatible with the current format (${format})`);
   }
@@ -711,6 +752,18 @@ export class ColorPicker {
     const context = canvas.getContext("2d");
     context.scale(devicePixelRatio, devicePixelRatio);
   }
+  updateCanvasSize(canvas) {
+    if (!canvas) {
+      return;
+    }
+    this.setCanvasContextSize(canvas, {
+      width: this.dimensions.colorField.width,
+      height: this.dimensions.colorField.height +
+        this.dimensions.slider.height +
+        this.getSliderCapSpacing() * 2
+    });
+    this.drawColorFieldAndSlider();
+  }
   containsPoint(testPointX, testPointY, boundsX, boundsY, boundsRadius) {
     return (Math.pow(testPointX - boundsX, 2) + Math.pow(testPointY - boundsY, 2) <=
       Math.pow(boundsRadius, 2));
@@ -1400,6 +1453,23 @@ export class ColorPicker {
       "attribute": "storage-id",
       "reflect": false
     },
+    "numberingSystem": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "standard UniCode numeral system tag for localization"
+      },
+      "attribute": "numbering-system",
+      "reflect": false
+    },
     "value": {
       "type": "string",
       "mutable": true,

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

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 export {};

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 import Color from "color";
 export const CSS = {

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 export function rgbToHex(color) {
   const { r, g, b } = color;

package/dist/collection/components/color-picker-hex-input/color-picker-hex-input.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { hexChar, isLonghandHex, isValidHex, normalizeHex, rgbToHex } from "../color-picker/utils";
@@ -25,11 +25,13 @@ export class ColorPickerHexInput {
     this.allowEmpty = false;
     /**
      * Label used for the hex input.
+     *
      * @default "Hex"
      */
     this.intlHex = TEXT.hex;
     /**
      * Label used for the hex input when there is no color selected.
+     *
      * @default "No color"
      */
     this.intlNoColor = TEXT.noColor;
@@ -41,7 +43,7 @@ export class ColorPickerHexInput {
      * The hex value.
      */
     this.value = normalizeHex(DEFAULT_COLOR.hex());
-    this.onCalciteInputBlur = () => {
+    this.onCalciteInternalInputBlur = () => {
       const node = this.inputNode;
       const inputValue = node.value;
       const hex = `#${inputValue}`;
@@ -127,7 +129,7 @@ export class ColorPickerHexInput {
     const { intlHex, value } = this;
     const hexInputValue = this.formatForInternalInput(value);
     return (h("div", { class: CSS.container },
-      h("calcite-input", { class: CSS.input, label: intlHex, maxLength: 6, onCalciteInputBlur: this.onCalciteInputBlur, onCalciteInputChange: this.onInputChange, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }),
+      h("calcite-input", { class: CSS.input, label: intlHex, maxLength: 6, numberingSystem: this.numberingSystem, onCalciteInputChange: this.onInputChange, onCalciteInternalInputBlur: this.onCalciteInternalInputBlur, onKeyDown: this.handleKeyDown, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }),
       hexInputValue ? (h("calcite-color-picker-swatch", { active: true, class: CSS.preview, color: `#${hexInputValue}`, scale: this.scale })) : null));
   }
   //--------------------------------------------------------------------------
@@ -175,6 +177,11 @@ export class ColorPickerHexInput {
   nudgeRGBChannels(color, amount) {
     return Color.rgb(color.array().map((channel) => channel + amount));
   }
+  handleKeyDown(event) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+    }
+  }
   static get is() { return "calcite-color-picker-hex-input"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -284,6 +291,23 @@ export class ColorPickerHexInput {
       "attribute": "value",
       "reflect": true,
       "defaultValue": "normalizeHex(DEFAULT_COLOR.hex())"
+    },
+    "numberingSystem": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "standard UniCode numeral system tag for localization"
+      },
+      "attribute": "numbering-system",
+      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/components/color-picker-hex-input/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 export const CSS = {
   container: "container",

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, h, Prop, Watch } from "@stencil/core";
 import Color from "color";

package/dist/collection/components/color-picker-swatch/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 export const CSS = {
   swatch: "swatch",

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

@@ -128,14 +128,13 @@
   display: flex;
   background-color: var(--calcite-ui-foreground-1);
   color: var(--calcite-ui-text-1);
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input);
   padding: calc(var(--calcite-combobox-item-spacing-unit-s) / 4) var(--calcite-combobox-item-spacing-unit-l);
 }
 
-:host(:focus-within) .wrapper, .wrapper--active {
+:host(:focus-within) .wrapper, 
+.wrapper--active {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
@@ -233,7 +232,8 @@
   padding-right: var(--calcite-combobox-item-spacing-unit-l);
 }
 
-.icon-end, .icon-start {
+.icon-end, 
+.icon-start {
   display: flex;
   width: 1rem;
   cursor: pointer;