npm - @esri/calcite-components - Versions diffs - 1.0.0-next.596 → 1.0.0-next.598 - Mend

@esri/calcite-components 1.0.0-next.596 → 1.0.0-next.598

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1195) hide show

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

@@ -1,9 +1,9 @@
 /*!
  * 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-next.596
+ * v1.0.0-next.598
  */
-import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
+import { h } from "@stencil/core";
 import Color from "color";
 import { CSS, DEFAULT_COLOR, DEFAULT_STORAGE_KEY_PREFIX, DIMENSIONS, HSV_LIMITS, RGB_LIMITS, TEXT } from "./resources";
 import { focusElement, getElementDir } from "../../utils/dom";
@@ -445,10 +445,9 @@ export class ColorPicker {
         ? [intlRed, intlGreen, intlBlue]
         : [intlHue, intlSaturation, intlValue];
       const direction = getElementDir(this.el);
-      return (h("calcite-tab", { active: active, class: CSS.control, key: channelMode },
-        h("div", { class: CSS.channels, dir: "ltr" }, channels.map((channel, index) =>
-        /* the channel container is ltr, so we apply the host's direction */
-        this.renderChannel(channel, index, channelLabels[index], channelAriaLabels[index], direction)))));
+      return (h("calcite-tab", { active: active, class: CSS.control, key: channelMode }, h("div", { class: CSS.channels, dir: "ltr" }, channels.map((channel, index) =>
+      /* 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", 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 = () => {
@@ -624,42 +623,21 @@ export class ColorPicker {
     const hueLeft = hueScopeLeft !== null && hueScopeLeft !== void 0 ? hueScopeLeft : (colorFieldWidth * DEFAULT_COLOR.hue()) / HSV_LIMITS.h;
     const noColor = color === null;
     const vertical = scopeOrientation === "vertical";
-    return (h("div", { class: CSS.container },
-      h("div", { class: CSS.colorFieldAndSliderWrap },
-        h("canvas", { class: {
-            [CSS.colorFieldAndSlider]: true,
-            [CSS.colorFieldAndSliderInteractive]: colorFieldAndSliderInteractive
-          }, 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: {
-          [CSS.controlSection]: true,
-          [CSS.section]: true
-        } },
-        hideHex ? null : (h("div", { class: CSS.hexOptions },
-          h("span", { class: {
-              [CSS.header]: true,
-              [CSS.headerHex]: true
-            } }, intlHex),
-          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
-          }, scale: hexInputScale },
-          h("calcite-tab-nav", { slot: "tab-nav" },
-            this.renderChannelsTabTitle("rgb"),
-            this.renderChannelsTabTitle("hsv")),
-          this.renderChannelsTab("rgb"),
-          this.renderChannelsTab("hsv"))))),
-      hideSaved ? null : (h("div", { class: { [CSS.savedColorsSection]: true, [CSS.section]: true } },
-        h("div", { class: CSS.header },
-          h("label", null, intlSaved),
-          h("div", { class: CSS.savedColorsButtons },
-            h("calcite-button", { appearance: "transparent", class: CSS.deleteColor, color: "neutral", disabled: noColor, iconStart: "minus", label: intlDeleteColor, onClick: this.deleteColor, scale: hexInputScale, type: "button" }),
-            h("calcite-button", { appearance: "transparent", class: CSS.saveColor, color: "neutral", disabled: noColor, iconStart: "plus", label: intlSaveColor, onClick: this.saveColor, scale: hexInputScale, type: "button" }))),
-        savedColors.length > 0 ? (h("div", { class: CSS.savedColors }, [
-          ...savedColors.map((color) => (h("calcite-color-picker-swatch", { active: selectedColorInHex === color, class: CSS.savedColor, color: color, key: color, onClick: this.handleSavedColorSelect, onKeyDown: this.handleSavedColorKeyDown, scale: scale, tabIndex: 0 })))
-        ])) : null))));
+    return (h("div", { class: CSS.container }, h("div", { class: CSS.colorFieldAndSliderWrap }, h("canvas", { class: {
+        [CSS.colorFieldAndSlider]: true,
+        [CSS.colorFieldAndSliderInteractive]: colorFieldAndSliderInteractive
+      }, 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: {
+        [CSS.controlSection]: true,
+        [CSS.section]: true
+      } }, hideHex ? null : (h("div", { class: CSS.hexOptions }, h("span", { class: {
+        [CSS.header]: true,
+        [CSS.headerHex]: true
+      } }, intlHex), 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
+      }, scale: hexInputScale }, h("calcite-tab-nav", { slot: "tab-nav" }, this.renderChannelsTabTitle("rgb"), this.renderChannelsTabTitle("hsv")), this.renderChannelsTab("rgb"), this.renderChannelsTab("hsv"))))), hideSaved ? null : (h("div", { class: { [CSS.savedColorsSection]: true, [CSS.section]: true } }, h("div", { class: CSS.header }, h("label", null, intlSaved), h("div", { class: CSS.savedColorsButtons }, h("calcite-button", { appearance: "transparent", class: CSS.deleteColor, color: "neutral", disabled: noColor, iconStart: "minus", label: intlDeleteColor, onClick: this.deleteColor, scale: hexInputScale, type: "button" }), h("calcite-button", { appearance: "transparent", class: CSS.saveColor, color: "neutral", disabled: noColor, iconStart: "plus", label: intlSaveColor, onClick: this.saveColor, scale: hexInputScale, type: "button" }))), savedColors.length > 0 ? (h("div", { class: CSS.savedColors }, [
+      ...savedColors.map((color) => (h("calcite-color-picker-swatch", { active: selectedColorInHex === color, class: CSS.savedColor, color: color, key: color, onClick: this.handleSavedColorSelect, onKeyDown: this.handleSavedColorKeyDown, scale: scale, tabIndex: 0 })))
+    ])) : null))));
   }
   // --------------------------------------------------------------------------
   //
@@ -845,751 +823,772 @@ export class ColorPicker {
   }
   static get is() { return "calcite-color-picker"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["color-picker.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["color-picker.css"]
-  }; }
-  static get properties() { return {
-    "allowEmpty": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component.\n\nWhen true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty."
-      },
-      "attribute": "allow-empty",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "appearance": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ColorAppearance",
-        "resolved": "\"default\" | \"minimal\" | \"solid\"",
-        "references": {
-          "ColorAppearance": {
-            "location": "import",
-            "path": "./interfaces"
+  static get originalStyleUrls() {
+    return {
+      "$": ["color-picker.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["color-picker.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "allowEmpty": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component.\n\nWhen true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty."
+        },
+        "attribute": "allow-empty",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "appearance": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ColorAppearance",
+          "resolved": "\"default\" | \"minimal\" | \"solid\"",
+          "references": {
+            "ColorAppearance": {
+              "location": "import",
+              "path": "./interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "specify the appearance - solid (containing border), or minimal (no containing border)"
-      },
-      "attribute": "appearance",
-      "reflect": true,
-      "defaultValue": "\"solid\""
-    },
-    "color": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "InternalColor | null",
-        "resolved": "Color<ColorParam>",
-        "references": {
-          "InternalColor": {
-            "location": "import",
-            "path": "./interfaces"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "specify the appearance - solid (containing border), or minimal (no containing border)"
+        },
+        "attribute": "appearance",
+        "reflect": true,
+        "defaultValue": "\"solid\""
+      },
+      "color": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "InternalColor | null",
+          "resolved": "Color<ColorParam>",
+          "references": {
+            "InternalColor": {
+              "location": "import",
+              "path": "./interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": "Internal prop for advanced use-cases."
-      },
-      "defaultValue": "DEFAULT_COLOR"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, disabled prevents user interaction."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "format": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Format",
-        "resolved": "\"auto\" | \"hex\" | \"hexa\" | \"hsl\" | \"hsl-css\" | \"hsla\" | \"hsla-css\" | \"hsv\" | \"hsva\" | \"rgb\" | \"rgb-css\" | \"rgba\" | \"rgba-css\"",
-        "references": {
-          "Format": {
-            "location": "import",
-            "path": "./utils"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Internal prop for advanced use-cases."
+        },
+        "defaultValue": "DEFAULT_COLOR"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, disabled prevents user interaction."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "format": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Format",
+          "resolved": "\"auto\" | \"hex\" | \"hexa\" | \"hsl\" | \"hsl-css\" | \"hsla\" | \"hsla-css\" | \"hsv\" | \"hsva\" | \"rgb\" | \"rgb-css\" | \"rgba\" | \"rgba-css\"",
+          "references": {
+            "Format": {
+              "location": "import",
+              "path": "./utils"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"auto\""
-          }],
-        "text": "The format of the value property.\n\nWhen \"auto\", the format will be inferred from `value` when set."
-      },
-      "attribute": "format",
-      "reflect": true,
-      "defaultValue": "defaultFormat"
-    },
-    "hideHex": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, hides the hex input"
-      },
-      "attribute": "hide-hex",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "hideChannels": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, hides the RGB/HSV channel inputs"
-      },
-      "attribute": "hide-channels",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "hideSaved": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, hides the saved colors section"
-      },
-      "attribute": "hide-saved",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "intlB": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"B\""
-          }],
-        "text": "Label used for the blue channel"
-      },
-      "attribute": "intl-b",
-      "reflect": false,
-      "defaultValue": "TEXT.b"
-    },
-    "intlBlue": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Blue\""
-          }],
-        "text": "Label used for the blue channel description"
-      },
-      "attribute": "intl-blue",
-      "reflect": false,
-      "defaultValue": "TEXT.blue"
-    },
-    "intlDeleteColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Delete color\""
-          }],
-        "text": "Label used for the delete color button."
-      },
-      "attribute": "intl-delete-color",
-      "reflect": false,
-      "defaultValue": "TEXT.deleteColor"
-    },
-    "intlG": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"G\""
-          }],
-        "text": "Label used for the green channel"
-      },
-      "attribute": "intl-g",
-      "reflect": false,
-      "defaultValue": "TEXT.g"
-    },
-    "intlGreen": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Green\""
-          }],
-        "text": "Label used for the green channel description"
-      },
-      "attribute": "intl-green",
-      "reflect": false,
-      "defaultValue": "TEXT.green"
-    },
-    "intlH": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"H\""
-          }],
-        "text": "Label used for the hue channel"
-      },
-      "attribute": "intl-h",
-      "reflect": false,
-      "defaultValue": "TEXT.h"
-    },
-    "intlHsv": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"HSV\""
-          }],
-        "text": "Label used for the HSV mode"
-      },
-      "attribute": "intl-hsv",
-      "reflect": false,
-      "defaultValue": "TEXT.hsv"
-    },
-    "intlHex": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Hex\""
-          }],
-        "text": "Label used for the hex input"
-      },
-      "attribute": "intl-hex",
-      "reflect": false,
-      "defaultValue": "TEXT.hex"
-    },
-    "intlHue": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Hue\""
-          }],
-        "text": "Label used for the hue channel description"
-      },
-      "attribute": "intl-hue",
-      "reflect": false,
-      "defaultValue": "TEXT.hue"
-    },
-    "intlNoColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"No color\""
-          }],
-        "text": "Label used for the hex input when there is no color selected."
-      },
-      "attribute": "intl-no-color",
-      "reflect": false,
-      "defaultValue": "TEXT.noColor"
-    },
-    "intlR": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"R\""
-          }],
-        "text": "Label used for the red channel"
-      },
-      "attribute": "intl-r",
-      "reflect": false,
-      "defaultValue": "TEXT.r"
-    },
-    "intlRed": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Red\""
-          }],
-        "text": "Label used for the red channel description"
-      },
-      "attribute": "intl-red",
-      "reflect": false,
-      "defaultValue": "TEXT.red"
-    },
-    "intlRgb": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"RGB\""
-          }],
-        "text": "Label used for the RGB mode"
-      },
-      "attribute": "intl-rgb",
-      "reflect": false,
-      "defaultValue": "TEXT.rgb"
-    },
-    "intlS": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"S\""
-          }],
-        "text": "Label used for the saturation channel"
-      },
-      "attribute": "intl-s",
-      "reflect": false,
-      "defaultValue": "TEXT.s"
-    },
-    "intlSaturation": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Saturation\""
-          }],
-        "text": "Label used for the saturation channel description"
-      },
-      "attribute": "intl-saturation",
-      "reflect": false,
-      "defaultValue": "TEXT.saturation"
-    },
-    "intlSaveColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Save color\""
-          }],
-        "text": "Label used for the save color button."
-      },
-      "attribute": "intl-save-color",
-      "reflect": false,
-      "defaultValue": "TEXT.saveColor"
-    },
-    "intlSaved": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Saved\""
-          }],
-        "text": "Label used for the saved colors section"
-      },
-      "attribute": "intl-saved",
-      "reflect": false,
-      "defaultValue": "TEXT.saved"
-    },
-    "intlV": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"V\""
-          }],
-        "text": "Label used for the value channel"
-      },
-      "attribute": "intl-v",
-      "reflect": false,
-      "defaultValue": "TEXT.v"
-    },
-    "intlValue": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Value\""
-          }],
-        "text": "Label used for the"
-      },
-      "attribute": "intl-value",
-      "reflect": false,
-      "defaultValue": "TEXT.value"
-    },
-    "scale": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Scale",
-        "resolved": "\"l\" | \"m\" | \"s\"",
-        "references": {
-          "Scale": {
-            "location": "import",
-            "path": "../interfaces"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"auto\""
+            }],
+          "text": "The format of the value property.\n\nWhen \"auto\", the format will be inferred from `value` when set."
+        },
+        "attribute": "format",
+        "reflect": true,
+        "defaultValue": "defaultFormat"
+      },
+      "hideHex": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, hides the hex input"
+        },
+        "attribute": "hide-hex",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "hideChannels": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, hides the RGB/HSV channel inputs"
+        },
+        "attribute": "hide-channels",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "hideSaved": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, hides the saved colors section"
+        },
+        "attribute": "hide-saved",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "intlB": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"B\""
+            }],
+          "text": "Label used for the blue channel"
+        },
+        "attribute": "intl-b",
+        "reflect": false,
+        "defaultValue": "TEXT.b"
+      },
+      "intlBlue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Blue\""
+            }],
+          "text": "Label used for the blue channel description"
+        },
+        "attribute": "intl-blue",
+        "reflect": false,
+        "defaultValue": "TEXT.blue"
+      },
+      "intlDeleteColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Delete color\""
+            }],
+          "text": "Label used for the delete color button."
+        },
+        "attribute": "intl-delete-color",
+        "reflect": false,
+        "defaultValue": "TEXT.deleteColor"
+      },
+      "intlG": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"G\""
+            }],
+          "text": "Label used for the green channel"
+        },
+        "attribute": "intl-g",
+        "reflect": false,
+        "defaultValue": "TEXT.g"
+      },
+      "intlGreen": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Green\""
+            }],
+          "text": "Label used for the green channel description"
+        },
+        "attribute": "intl-green",
+        "reflect": false,
+        "defaultValue": "TEXT.green"
+      },
+      "intlH": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"H\""
+            }],
+          "text": "Label used for the hue channel"
+        },
+        "attribute": "intl-h",
+        "reflect": false,
+        "defaultValue": "TEXT.h"
+      },
+      "intlHsv": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"HSV\""
+            }],
+          "text": "Label used for the HSV mode"
+        },
+        "attribute": "intl-hsv",
+        "reflect": false,
+        "defaultValue": "TEXT.hsv"
+      },
+      "intlHex": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Hex\""
+            }],
+          "text": "Label used for the hex input"
+        },
+        "attribute": "intl-hex",
+        "reflect": false,
+        "defaultValue": "TEXT.hex"
+      },
+      "intlHue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Hue\""
+            }],
+          "text": "Label used for the hue channel description"
+        },
+        "attribute": "intl-hue",
+        "reflect": false,
+        "defaultValue": "TEXT.hue"
+      },
+      "intlNoColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"No color\""
+            }],
+          "text": "Label used for the hex input when there is no color selected."
+        },
+        "attribute": "intl-no-color",
+        "reflect": false,
+        "defaultValue": "TEXT.noColor"
+      },
+      "intlR": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"R\""
+            }],
+          "text": "Label used for the red channel"
+        },
+        "attribute": "intl-r",
+        "reflect": false,
+        "defaultValue": "TEXT.r"
+      },
+      "intlRed": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Red\""
+            }],
+          "text": "Label used for the red channel description"
+        },
+        "attribute": "intl-red",
+        "reflect": false,
+        "defaultValue": "TEXT.red"
+      },
+      "intlRgb": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"RGB\""
+            }],
+          "text": "Label used for the RGB mode"
+        },
+        "attribute": "intl-rgb",
+        "reflect": false,
+        "defaultValue": "TEXT.rgb"
+      },
+      "intlS": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"S\""
+            }],
+          "text": "Label used for the saturation channel"
+        },
+        "attribute": "intl-s",
+        "reflect": false,
+        "defaultValue": "TEXT.s"
+      },
+      "intlSaturation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Saturation\""
+            }],
+          "text": "Label used for the saturation channel description"
+        },
+        "attribute": "intl-saturation",
+        "reflect": false,
+        "defaultValue": "TEXT.saturation"
+      },
+      "intlSaveColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Save color\""
+            }],
+          "text": "Label used for the save color button."
+        },
+        "attribute": "intl-save-color",
+        "reflect": false,
+        "defaultValue": "TEXT.saveColor"
+      },
+      "intlSaved": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Saved\""
+            }],
+          "text": "Label used for the saved colors section"
+        },
+        "attribute": "intl-saved",
+        "reflect": false,
+        "defaultValue": "TEXT.saved"
+      },
+      "intlV": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"V\""
+            }],
+          "text": "Label used for the value channel"
+        },
+        "attribute": "intl-v",
+        "reflect": false,
+        "defaultValue": "TEXT.v"
+      },
+      "intlValue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Value\""
+            }],
+          "text": "Label used for the"
+        },
+        "attribute": "intl-value",
+        "reflect": false,
+        "defaultValue": "TEXT.value"
+      },
+      "scale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The scale of the color picker."
-      },
-      "attribute": "scale",
-      "reflect": true,
-      "defaultValue": "\"m\""
-    },
-    "storageId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Storage ID for colors."
-      },
-      "attribute": "storage-id",
-      "reflect": true
-    },
-    "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": true
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "ColorValue | null",
-        "resolved": "HSL | HSL & ObjectWithAlpha | HSV | HSV & ObjectWithAlpha | RGB | RGB & ObjectWithAlpha | string",
-        "references": {
-          "ColorValue": {
-            "location": "import",
-            "path": "./interfaces"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The scale of the color picker."
+        },
+        "attribute": "scale",
+        "reflect": true,
+        "defaultValue": "\"m\""
+      },
+      "storageId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Storage ID for colors."
+        },
+        "attribute": "storage-id",
+        "reflect": true
+      },
+      "numberingSystem": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "NumberingSystem",
+          "resolved": "\"arab\" | \"arabext\" | \"bali\" | \"beng\" | \"deva\" | \"fullwide\" | \"gujr\" | \"guru\" | \"hanidec\" | \"khmr\" | \"knda\" | \"laoo\" | \"latn\" | \"limb\" | \"mlym\" | \"mong\" | \"mymr\" | \"orya\" | \"tamldec\" | \"telu\" | \"thai\" | \"tibt\"",
+          "references": {
+            "NumberingSystem": {
+              "location": "import",
+              "path": "../../utils/locale"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"#007ac2\""
-          }, {
-            "name": "see",
-            "text": "[CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)"
-          }, {
-            "name": "see",
-            "text": "[ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/color-picker/interfaces.ts#L10)"
-          }],
-        "text": "The component's value.\n\nThis value can be either a CSS color string,\na RGB, HSL or HSV object.\n\nThe type will be preserved as the color is updated."
-      },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "defaultValue"
-    }
-  }; }
-  static get states() { return {
-    "colorFieldAndSliderInteractive": {},
-    "channelMode": {},
-    "channels": {},
-    "dimensions": {},
-    "savedColors": {},
-    "colorFieldScopeTop": {},
-    "colorFieldScopeLeft": {},
-    "scopeOrientation": {},
-    "hueScopeLeft": {},
-    "hueScopeTop": {}
-  }; }
-  static get events() { return [{
-      "method": "calciteColorPickerChange",
-      "name": "calciteColorPickerChange",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the color value has changed."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calciteColorPickerInput",
-      "name": "calciteColorPickerInput",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires as the color value changes.\n\nThis is similar to the change event with the exception of dragging. When dragging the color field or hue slider thumb, this event fires as the thumb is moved."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the Unicode numeral system used by the component for localization."
+        },
+        "attribute": "numbering-system",
+        "reflect": true
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "ColorValue | null",
+          "resolved": "HSL | HSL & ObjectWithAlpha | HSV | HSV & ObjectWithAlpha | RGB | RGB & ObjectWithAlpha | string",
+          "references": {
+            "ColorValue": {
+              "location": "import",
+              "path": "./interfaces"
+            }
           }
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets focus on the component.",
-        "tags": []
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"#007ac2\""
+            }, {
+              "name": "see",
+              "text": "[CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)"
+            }, {
+              "name": "see",
+              "text": "[ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/color-picker/interfaces.ts#L10)"
+            }],
+          "text": "The component's value.\n\nThis value can be either a CSS color string,\na RGB, HSL or HSV object.\n\nThe type will be preserved as the color is updated."
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "defaultValue"
       }
-    }
-  }; }
+    };
+  }
+  static get states() {
+    return {
+      "colorFieldAndSliderInteractive": {},
+      "channelMode": {},
+      "channels": {},
+      "dimensions": {},
+      "savedColors": {},
+      "colorFieldScopeTop": {},
+      "colorFieldScopeLeft": {},
+      "scopeOrientation": {},
+      "hueScopeLeft": {},
+      "hueScopeTop": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "calciteColorPickerChange",
+        "name": "calciteColorPickerChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the color value has changed."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteColorPickerInput",
+        "name": "calciteColorPickerInput",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires as the color value changes.\n\nThis is similar to the change event with the exception of dragging. When dragging the color field or hue slider thumb, this event fires as the thumb is moved."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus on the component.",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "color",
-      "methodName": "handleColorChange"
-    }, {
-      "propName": "format",
-      "methodName": "handleFormatChange"
-    }, {
-      "propName": "scale",
-      "methodName": "handleScaleChange"
-    }, {
-      "propName": "value",
-      "methodName": "handleValueChange"
-    }]; }
-  static get listeners() { return [{
-      "name": "keydown",
-      "method": "handleChannelKeyUpOrDown",
-      "target": undefined,
-      "capture": true,
-      "passive": false
-    }, {
-      "name": "keyup",
-      "method": "handleChannelKeyUpOrDown",
-      "target": undefined,
-      "capture": true,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "color",
+        "methodName": "handleColorChange"
+      }, {
+        "propName": "format",
+        "methodName": "handleFormatChange"
+      }, {
+        "propName": "scale",
+        "methodName": "handleScaleChange"
+      }, {
+        "propName": "value",
+        "methodName": "handleValueChange"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "handleChannelKeyUpOrDown",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }, {
+        "name": "keyup",
+        "method": "handleChannelKeyUpOrDown",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }];
+  }
 }