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

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

@@ -1,3 +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.
+ */
 import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import Color from "color";
 import { CSS, DEFAULT_COLOR, DEFAULT_STORAGE_KEY_PREFIX, DIMENSIONS, HSV_LIMITS, RGB_LIMITS, TEXT } from "./resources";
@@ -136,9 +140,9 @@ export class CalciteColorPicker {
      * @see [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-color-picker/interfaces.ts#L10)
      */
     this.value = defaultValue;
-    this.colorUpdateLocked = false;
     this.colorFieldAndSliderHovered = false;
     this.hueThumbState = "idle";
+    this.internalColorUpdateContext = null;
     this.mode = CSSColorMode.HEX;
     this.shiftKeyChannelAdjustment = 0;
     this.sliderThumbState = "idle";
@@ -448,7 +452,7 @@ export class CalciteColorPicker {
     this.drawColorFieldAndSlider();
     this.updateChannelsFromColor(color);
     this.previousColor = oldColor;
-    if (this.colorUpdateLocked) {
+    if (this.internalColorUpdateContext) {
       return;
     }
     this.value = this.toValue(color);
@@ -475,7 +479,10 @@ export class CalciteColorPicker {
       this.setMode(nextMode);
     }
     const dragging = this.sliderThumbState === "drag" || this.hueThumbState === "drag";
-    if (this.colorUpdateLocked) {
+    if (this.internalColorUpdateContext) {
+      if (this.internalColorUpdateContext === "initial") {
+        return;
+      }
       this.calciteColorPickerInput.emit();
       if (!dragging) {
         this.calciteColorPickerChange.emit();
@@ -539,23 +546,21 @@ export class CalciteColorPicker {
   //
   //--------------------------------------------------------------------------
   componentWillLoad() {
-    const storageKey = `${DEFAULT_STORAGE_KEY_PREFIX}${this.storageId}`;
-    if (this.storageId && localStorage.getItem(storageKey)) {
-      this.savedColors = JSON.parse(localStorage.getItem(storageKey));
-    }
-  }
-  connectedCallback() {
     const { allowEmpty, color, format, value } = this;
-    const valueIsNoColor = allowEmpty && !value;
+    const willSetNoColor = allowEmpty && !value;
     const parsedMode = parseMode(value);
-    const valueIsCompatible = (format === "auto" && parsedMode) || format === parsedMode;
-    const initialColor = valueIsNoColor ? null : valueIsCompatible ? Color(value) : color;
+    const valueIsCompatible = willSetNoColor || (format === "auto" && parsedMode) || format === parsedMode;
+    const initialColor = willSetNoColor ? null : valueIsCompatible ? Color(value) : color;
     if (!valueIsCompatible) {
       this.showIncompatibleColorWarning(value, format);
     }
     this.setMode(format);
-    this.internalColorSet(initialColor, false);
+    this.internalColorSet(initialColor, false, "initial");
     this.updateDimensions(this.scale);
+    const storageKey = `${DEFAULT_STORAGE_KEY_PREFIX}${this.storageId}`;
+    if (this.storageId && localStorage.getItem(storageKey)) {
+      this.savedColors = JSON.parse(localStorage.getItem(storageKey));
+    }
   }
   disconnectedCallback() {
     document.removeEventListener("mousemove", this.globalMouseMoveHandler);
@@ -640,14 +645,14 @@ export class CalciteColorPicker {
     }
     return "none";
   }
-  internalColorSet(color, skipEqual = true) {
+  internalColorSet(color, skipEqual = true, context = "internal") {
     if (skipEqual && colorEqual(color, this.color)) {
       return;
     }
-    this.colorUpdateLocked = true;
+    this.internalColorUpdateContext = context;
     this.color = color;
     this.value = this.toValue(color);
-    this.colorUpdateLocked = false;
+    this.internalColorUpdateContext = null;
   }
   toValue(color, format = this.mode) {
     if (!color) {
@@ -846,8 +851,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Internal prop for advanced use-cases."
       },
@@ -870,8 +875,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"auto\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"auto\""
           }],
         "text": "The format of the value property.\n\nWhen \"auto\", the format will be inferred from `value` when set."
       },
@@ -945,8 +950,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"B\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"B\""
           }],
         "text": "Label used for the blue channel"
       },
@@ -966,8 +971,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Blue\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Blue\""
           }],
         "text": "Label used for the blue channel description"
       },
@@ -987,8 +992,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Delete color\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Delete color\""
           }],
         "text": "Label used for the delete color button."
       },
@@ -1008,8 +1013,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"G\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"G\""
           }],
         "text": "Label used for the green channel"
       },
@@ -1029,8 +1034,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Green\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Green\""
           }],
         "text": "Label used for the green channel description"
       },
@@ -1050,8 +1055,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"H\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"H\""
           }],
         "text": "Label used for the hue channel"
       },
@@ -1071,8 +1076,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"HSV\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"HSV\""
           }],
         "text": "Label used for the HSV mode"
       },
@@ -1092,8 +1097,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Hex\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Hex\""
           }],
         "text": "Label used for the hex input"
       },
@@ -1113,8 +1118,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Hue\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Hue\""
           }],
         "text": "Label used for the hue channel description"
       },
@@ -1134,8 +1139,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"No color\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"No color\""
           }],
         "text": "Label used for the hex input when there is no color selected."
       },
@@ -1155,8 +1160,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"R\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"R\""
           }],
         "text": "Label used for the red channel"
       },
@@ -1176,8 +1181,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Red\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Red\""
           }],
         "text": "Label used for the red channel description"
       },
@@ -1197,8 +1202,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"RGB\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"RGB\""
           }],
         "text": "Label used for the RGB mode"
       },
@@ -1218,8 +1223,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"S\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"S\""
           }],
         "text": "Label used for the saturation channel"
       },
@@ -1239,8 +1244,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Saturation\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Saturation\""
           }],
         "text": "Label used for the saturation channel description"
       },
@@ -1260,8 +1265,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Save color\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Save color\""
           }],
         "text": "Label used for the save color button."
       },
@@ -1281,8 +1286,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Saved\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Saved\""
           }],
         "text": "Label used for the saved colors section"
       },
@@ -1302,8 +1307,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"V\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"V\""
           }],
         "text": "Label used for the value channel"
       },
@@ -1323,8 +1328,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Value\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Value\""
           }],
         "text": "Label used for the"
       },
@@ -1389,11 +1394,11 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"#007ac2\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"#007ac2\""
           }, {
-            "text": " [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-color-picker/interfaces.ts#L10)",
-            "name": "see"
+            "name": "see",
+            "text": " [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-color-picker/interfaces.ts#L10)"
           }],
         "text": "The color value.\n\nThis value can be either a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color|CSS string}\na RGB, HSL or HSV object.\n\nThe type will be preserved as the color is updated."
       },

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

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

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

@@ -1,3 +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.
+ */
 import Color from "color";
 export const CSS = {
   container: "container",

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

@@ -1,3 +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.
+ */
 export function rgbToHex(color) {
   const { r, g, b } = color;
   return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b

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

@@ -1,3 +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.
+ */
 import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { hexChar, hexToRGB, isLonghandHex, isValidHex, normalizeHex, rgbToHex } from "../calcite-color-picker/utils";
 import Color from "color";
@@ -37,8 +41,8 @@ export class CalciteColorPickerHexInput {
      * The hex value.
      */
     this.value = normalizeHex(DEFAULT_COLOR.hex());
-    this.onCalciteInputBlur = (event) => {
-      const node = event.currentTarget;
+    this.onCalciteInputBlur = () => {
+      const node = this.inputNode;
       const inputValue = node.value;
       const hex = `#${inputValue}`;
       const willClearValue = this.allowEmpty && !inputValue;
@@ -51,9 +55,8 @@ export class CalciteColorPickerHexInput {
           ? ""
           : this.formatForInternalInput(rgbToHex(this.internalColor.object()));
     };
-    this.onInputChange = (event) => {
-      const node = event.currentTarget;
-      const inputValue = node.value;
+    this.onInputChange = () => {
+      const inputValue = this.inputNode.value;
       let value;
       if (inputValue) {
         const hex = inputValue;
@@ -129,8 +132,12 @@ export class CalciteColorPickerHexInput {
   // using @Listen as a workaround for VDOM listener not firing
   onInputKeyDown(event) {
     const { altKey, ctrlKey, metaKey, shiftKey } = event;
-    const { el, inputNode, internalColor, value } = this;
+    const { internalColor, value } = this;
     const key = getKey(event.key);
+    if (key === "Tab" || key === "Enter") {
+      this.onInputChange();
+      return;
+    }
     const isNudgeKey = key === "ArrowDown" || key === "ArrowUp";
     if (isNudgeKey) {
       if (!value) {
@@ -145,16 +152,9 @@ export class CalciteColorPickerHexInput {
       return;
     }
     const withModifiers = altKey || ctrlKey || metaKey;
-    const exceededHexLength = inputNode.value.length >= 6;
-    const focusedElement = el.shadowRoot.activeElement;
-    const hasTextSelection = 
-    // can't use window.getSelection() because of FF bug: https://bugzilla.mozilla.org/show_bug.cgi?id=85686
-    focusedElement.selectionStart != focusedElement.selectionEnd;
     const singleChar = key.length === 1;
     const validHexChar = hexChar.test(key);
-    if (singleChar &&
-      !withModifiers &&
-      (!validHexChar || (!hasTextSelection && exceededHexLength))) {
+    if (singleChar && !withModifiers && !validHexChar) {
       event.preventDefault();
     }
   }
@@ -168,7 +168,7 @@ export class CalciteColorPickerHexInput {
     const hexInputValue = this.formatForInternalInput(value);
     const elementDir = getElementDir(el);
     return (h("div", { class: CSS.container },
-      h("calcite-input", { class: CSS.input, dir: elementDir, label: intlHex, onCalciteInputBlur: this.onCalciteInputBlur, onChange: this.onInputChange, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }),
+      h("calcite-input", { class: CSS.input, dir: elementDir, label: intlHex, maxLength: 6, onCalciteInputBlur: this.onCalciteInputBlur, onCalciteInputChange: this.onInputChange, 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));
   }
   //--------------------------------------------------------------------------
@@ -225,8 +225,8 @@ export class CalciteColorPickerHexInput {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Hex\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Hex\""
           }],
         "text": "Label used for the hex input."
       },
@@ -246,8 +246,8 @@ export class CalciteColorPickerHexInput {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"No color\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"No color\""
           }],
         "text": "Label used for the hex input when there is no color selected."
       },

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

@@ -1,3 +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.
+ */
 export const CSS = {
   container: "container",
   preview: "preview",

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

@@ -1,3 +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.
+ */
 import { Component, Element, h, Prop, Watch } from "@stencil/core";
 import Color from "color";
 import { COLORS, CSS } from "./resources";
@@ -78,8 +82,8 @@ export class CalciteColorPickerSwatch {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "https ://developer.mozilla.org/en-US/docs/Web/CSS/color_value",
-            "name": "see"
+            "name": "see",
+            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"
           }],
         "text": "The color value."
       },

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

@@ -1,3 +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.
+ */
 export const CSS = {
   swatch: "swatch",
   noColorIcon: "no-color-icon"

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

@@ -127,14 +127,13 @@
 
 .wrapper {
   display: flex;
-  flex-wrap: wrap;
   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: var(--calcite-combobox-item-spacing-unit-s) var(--calcite-combobox-item-spacing-unit-l) 0 var(--calcite-combobox-item-spacing-unit-l);
+  padding: 0 var(--calcite-combobox-item-spacing-unit-l) 0 var(--calcite-combobox-item-spacing-unit-l);
 }
 
 :host(:focus-within) .wrapper,
@@ -149,6 +148,17 @@
   flex-wrap: nowrap;
 }
 
+.grid-input {
+  display: flex;
+  flex-grow: 1;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .input {
   flex-grow: 1;
   font-family: inherit;
@@ -234,6 +244,10 @@
   width: 1rem;
 }
 
+.icon-end {
+  flex: none;
+}
+
 .popper-container {
   width: 100%;
   display: block;
@@ -313,8 +327,7 @@
 }
 
 .chip {
-  margin-right: var(--calcite-combobox-item-spacing-unit-s);
-  margin-bottom: var(--calcite-combobox-item-spacing-unit-s);
+  margin: calc(var(--calcite-combobox-item-spacing-unit-s) / 2) var(--calcite-combobox-item-spacing-unit-s) calc(var(--calcite-combobox-item-spacing-unit-s) / 2) 0;
   max-width: 100%;
 }
 
@@ -337,4 +350,19 @@
 
 .item {
   display: block;
+}
+
+::slotted(input[slot=hidden-form-input]) {
+  bottom: 0 !important;
+  left: 0 !important;
+  margin: 0 !important;
+  opacity: 0 !important;
+  outline: none !important;
+  padding: 0 !important;
+  position: absolute !important;
+  right: 0 !important;
+  top: 0 !important;
+  transform: none !important;
+  -webkit-appearance: none !important;
+  z-index: -1 !important;
 }