@esri/calcite-components 1.0.0-next.647 → 1.0.0-next.649

package/dist/collection/components/chip/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-next.647
+ * v1.0.0-next.649
  */
 export const CSS = {
   title: "title",

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-next.647
+ * v1.0.0-next.649
  */
 import { h } from "@stencil/core";
 import Color from "color";
@@ -18,184 +18,12 @@ const defaultValue = normalizeHex(DEFAULT_COLOR.hex());
 const defaultFormat = "auto";
 export class ColorPicker {
   constructor() {
-    //--------------------------------------------------------------------------
-    //
-    //  Public properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.
-     *
-     * When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`.
-     */
-    this.allowEmpty = false;
-    /**
-     * Specifies the appearance style of the component -
-     *
-     * `"solid"` (containing border) or `"minimal"` (no containing border).
-     */
-    this.appearance = "solid";
-    /**
-     * Internal prop for advanced use-cases.
-     *
-     * @internal
-     */
-    this.color = DEFAULT_COLOR;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     */
-    this.disabled = false;
-    /**
-     * The format of `value`.
-     *
-     * When `"auto"`, the format will be inferred from `value` when set.
-     *
-     * @default "auto"
-     */
-    this.format = defaultFormat;
-    /** When `true`, hides the Hex input. */
-    this.hideHex = false;
-    /** When `true`, hides the RGB/HSV channel inputs. */
-    this.hideChannels = false;
-    /** When `true`, hides the saved colors section. */
-    this.hideSaved = false;
-    /**
-     * Accessible name for the RGB section's blue channel.
-     *
-     * @default "B"
-     */
-    this.intlB = TEXT.b;
-    /**
-     * Accessible name for the RGB section's blue channel description.
-     *
-     * @default "Blue"
-     */
-    this.intlBlue = TEXT.blue;
-    /**
-     * Accessible name for the delete color button.
-     *
-     * @default "Delete color"
-     */
-    this.intlDeleteColor = TEXT.deleteColor;
-    /**
-     * Accessible name for the RGB section's green channel.
-     *
-     * @default "G"
-     */
-    this.intlG = TEXT.g;
-    /**
-     * Accessible name for the RGB section's green channel description.
-     *
-     * @default "Green"
-     */
-    this.intlGreen = TEXT.green;
-    /**
-     * Accessible name for the HSV section's hue channel.
-     *
-     * @default "H"
-     */
-    this.intlH = TEXT.h;
-    /**
-     * Accessible name for the HSV mode.
-     *
-     * @default "HSV"
-     */
-    this.intlHsv = TEXT.hsv;
-    /**
-     * Accessible name for the Hex input.
-     *
-     * @default "Hex"
-     */
-    this.intlHex = TEXT.hex;
-    /**
-     * Accessible name for the HSV section's hue channel description.
-     *
-     * @default "Hue"
-     */
-    this.intlHue = TEXT.hue;
-    /**
-     * Accessible name for the Hex input when there is no color selected.
-     *
-     * @default "No color"
-     */
-    this.intlNoColor = TEXT.noColor;
-    /**
-     * Accessible name for the RGB section's red channel.
-     *
-     * @default "R"
-     */
-    this.intlR = TEXT.r;
-    /**
-     * Accessible name for the RGB section's red channel description.
-     *
-     * @default "Red"
-     */
-    this.intlRed = TEXT.red;
-    /**
-     * Accessible name for the RGB mode.
-     *
-     * @default "RGB"
-     */
-    this.intlRgb = TEXT.rgb;
-    /**
-     * Accessible name for the HSV section's saturation channel.
-     *
-     * @default "S"
-     */
-    this.intlS = TEXT.s;
-    /**
-     * Accessible name for the HSV section's saturation channel description.
-     *
-     * @default "Saturation"
-     */
-    this.intlSaturation = TEXT.saturation;
-    /**
-     * Accessible name for the save color button.
-     *
-     * @default "Save color"
-     */
-    this.intlSaveColor = TEXT.saveColor;
-    /**
-     * Accessible name for the saved colors section.
-     *
-     * @default "Saved"
-     */
-    this.intlSaved = TEXT.saved;
-    /**
-     * Accessible name for the HSV section's value channel.
-     *
-     * @default "V"
-     */
-    this.intlV = TEXT.v;
-    /**
-     * Accessible name for the HSV section's value channel description.
-     *
-     * @default "Value"
-     */
-    this.intlValue = TEXT.value;
-    /** Specifies the size of the component. */
-    this.scale = "m";
-    /**
-     * The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object.
-     *
-     * The type will be preserved as the color is updated.
-     *
-     * @default "#007ac2"
-     * @see [CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)
-     * @see [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/color-picker/interfaces.ts#L10)
-     */
-    this.value = defaultValue;
     this.colorFieldAndSliderHovered = false;
     this.hueThumbState = "idle";
     this.internalColorUpdateContext = null;
     this.mode = CSSColorMode.HEX;
     this.shiftKeyChannelAdjustment = 0;
     this.sliderThumbState = "idle";
-    this.colorFieldAndSliderInteractive = false;
-    this.channelMode = "rgb";
-    this.channels = this.toChannels(DEFAULT_COLOR);
-    this.dimensions = DIMENSIONS.m;
-    this.savedColors = [];
     this.handleTabActivate = (event) => {
       this.channelMode = event.currentTarget.getAttribute("data-color-mode");
       this.updateChannelsFromColor(this.color);
@@ -499,6 +327,47 @@ export class ColorPicker {
       this.fieldAndSliderRenderingContext = canvas.getContext("2d");
       this.updateCanvasSize(canvas);
     };
+    this.allowEmpty = false;
+    this.appearance = "solid";
+    this.color = DEFAULT_COLOR;
+    this.disabled = false;
+    this.format = defaultFormat;
+    this.hideHex = false;
+    this.hideChannels = false;
+    this.hideSaved = false;
+    this.intlB = TEXT.b;
+    this.intlBlue = TEXT.blue;
+    this.intlDeleteColor = TEXT.deleteColor;
+    this.intlG = TEXT.g;
+    this.intlGreen = TEXT.green;
+    this.intlH = TEXT.h;
+    this.intlHsv = TEXT.hsv;
+    this.intlHex = TEXT.hex;
+    this.intlHue = TEXT.hue;
+    this.intlNoColor = TEXT.noColor;
+    this.intlR = TEXT.r;
+    this.intlRed = TEXT.red;
+    this.intlRgb = TEXT.rgb;
+    this.intlS = TEXT.s;
+    this.intlSaturation = TEXT.saturation;
+    this.intlSaveColor = TEXT.saveColor;
+    this.intlSaved = TEXT.saved;
+    this.intlV = TEXT.v;
+    this.intlValue = TEXT.value;
+    this.scale = "m";
+    this.storageId = undefined;
+    this.numberingSystem = undefined;
+    this.value = defaultValue;
+    this.colorFieldAndSliderInteractive = false;
+    this.channelMode = "rgb";
+    this.channels = this.toChannels(DEFAULT_COLOR);
+    this.dimensions = DIMENSIONS.m;
+    this.savedColors = [];
+    this.colorFieldScopeTop = undefined;
+    this.colorFieldScopeLeft = undefined;
+    this.scopeOrientation = undefined;
+    this.hueScopeLeft = undefined;
+    this.hueScopeTop = undefined;
   }
   handleColorChange(color, oldColor) {
     this.drawColorFieldAndSlider();

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-next.647
+ * v1.0.0-next.649
  */
 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-next.647
+ * v1.0.0-next.649
  */
 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-next.647
+ * v1.0.0-next.649
  */
 import { h } from "@stencil/core";
 import { hexChar, isLonghandHex, isValidHex, normalizeHex, rgbToHex } from "../color-picker/utils";
@@ -13,35 +13,6 @@ import { setUpLoadableComponent, setComponentLoaded, componentLoaded } from "../
 const DEFAULT_COLOR = Color();
 export class ColorPickerHexInput {
   constructor() {
-    //--------------------------------------------------------------------------
-    //
-    //  Public Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.
-     *
-     * When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`.
-     */
-    this.allowEmpty = false;
-    /**
-     * Accessible name for the Hex input.
-     *
-     * @default "Hex"
-     */
-    this.intlHex = TEXT.hex;
-    /**
-     * Accessible name for the Hex input when there is no color selected.
-     *
-     * @default "No color"
-     */
-    this.intlNoColor = TEXT.noColor;
-    /** Specifies the size of the component. */
-    this.scale = "m";
-    /**
-     * The Hex value.
-     */
-    this.value = normalizeHex(DEFAULT_COLOR.hex());
     this.onCalciteInternalInputBlur = () => {
       const node = this.inputNode;
       const inputValue = node.value;
@@ -59,14 +30,17 @@ export class ColorPickerHexInput {
     this.onInputChange = () => {
       this.internalSetValue(this.inputNode.value, this.value);
     };
-    /**
-     * The last valid/selected color. Used as a fallback if an invalid hex code is entered.
-     */
-    this.internalColor = DEFAULT_COLOR;
     this.previousNonNullValue = this.value;
     this.storeInputRef = (node) => {
       this.inputNode = node;
     };
+    this.allowEmpty = false;
+    this.intlHex = TEXT.hex;
+    this.intlNoColor = TEXT.noColor;
+    this.scale = "m";
+    this.value = normalizeHex(DEFAULT_COLOR.hex());
+    this.numberingSystem = undefined;
+    this.internalColor = DEFAULT_COLOR;
   }
   //--------------------------------------------------------------------------
   //

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-next.647
+ * v1.0.0-next.649
  */
 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-next.647
+ * v1.0.0-next.649
  */
 import { h } from "@stencil/core";
 import Color from "color";
@@ -9,18 +9,8 @@ import { COLORS, CSS } from "./resources";
 import { getThemeName } from "../../utils/dom";
 export class ColorPickerSwatch {
   constructor() {
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * When `true`, the component is active.
-     */
     this.active = false;
-    /**
-     * Specifies the size of the component.
-     */
+    this.color = undefined;
     this.scale = "m";
   }
   handleColorChange(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-next.647
+ * v1.0.0-next.649
  */
 export const CSS = {
   swatch: "swatch",

package/dist/collection/components/combobox/combobox.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-next.647
+ * v1.0.0-next.649
  */
 import { h, Host } from "@stencil/core";
 import { filter } from "../../utils/filter";
@@ -28,55 +28,6 @@ const inputUidPrefix = "combobox-input-";
  */
 export class Combobox {
   constructor() {
-    //--------------------------------------------------------------------------
-    //
-    //  Public Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * When `true`, displays and positions the component.
-     *
-     * @deprecated use `open` instead.
-     */
-    this.active = false;
-    /**When `true`, displays and positions the component. */
-    this.open = false;
-    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
-    this.disabled = false;
-    /** Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar. */
-    this.maxItems = 0;
-    /**
-     * Determines the type of positioning to use for the overlaid content.
-     *
-     * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
-     *
-     * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
-     *
-     */
-    this.overlayPositioning = "absolute";
-    /**
-     * When `true`, the component must have a value in order for the form to submit.
-     *
-     * @internal
-     */
-    this.required = false;
-    /**
-     * specify the selection mode
-     * - multiple: allow any number of selected items (default)
-     * - single: only one selection)
-     * - ancestors: like multiple, but show ancestors of selected items as selected, only deepest children shown in chips
-     */
-    this.selectionMode = "multi";
-    /** Specifies the size of the component. */
-    this.scale = "m";
-    /** The component's value(s) from the selected `calcite-combobox-item`(s). */
-    this.value = null;
-    /**
-     * Accessible name for the component's remove tag when a `calcite-combobox-item` is selected.
-     *
-     * @default "Remove tag"
-     */
-    this.intlRemoveTag = TEXT.removeTag;
     //--------------------------------------------------------------------------
     //
     //  Private State/Props
@@ -84,14 +35,6 @@ export class Combobox {
     //--------------------------------------------------------------------------
     this.placement = defaultMenuPlacement;
     this.internalValueChangeFlag = false;
-    this.items = [];
-    this.groupItems = [];
-    this.selectedItems = [];
-    this.visibleItems = [];
-    this.activeItemIndex = -1;
-    this.activeChipIndex = -1;
-    this.activeDescendant = "";
-    this.text = "";
     this.textInput = null;
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.resizeObserver = createObserver("resize", () => this.setMaxScrollerHeight());
@@ -364,6 +307,31 @@ export class Combobox {
     this.comboboxBlurHandler = (event) => {
       this.setInactiveIfNotContained(event);
     };
+    this.active = false;
+    this.open = false;
+    this.disabled = false;
+    this.label = undefined;
+    this.placeholder = undefined;
+    this.placeholderIcon = undefined;
+    this.maxItems = 0;
+    this.name = undefined;
+    this.allowCustomValues = undefined;
+    this.overlayPositioning = "absolute";
+    this.required = false;
+    this.selectionMode = "multi";
+    this.scale = "m";
+    this.value = null;
+    this.intlRemoveTag = TEXT.removeTag;
+    this.flipPlacements = undefined;
+    this.items = [];
+    this.groupItems = [];
+    this.selectedItems = [];
+    this.visibleItems = [];
+    this.needsIcon = undefined;
+    this.activeItemIndex = -1;
+    this.activeChipIndex = -1;
+    this.activeDescendant = "";
+    this.text = "";
   }
   activeHandler(value) {
     if (this.disabled) {

package/dist/collection/components/combobox/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-next.647
+ * v1.0.0-next.649
  */
 export const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";

package/dist/collection/components/combobox/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-next.647
+ * v1.0.0-next.649
  */
 import { nodeListToArray } from "../../utils/dom";
 import { ComboboxChildSelector } from "./resources";

package/dist/collection/components/combobox-item/combobox-item.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-next.647
+ * v1.0.0-next.649
  */
 import { Host, h } from "@stencil/core";
 import { getElementProp, getSlotted } from "../../utils/dom";
@@ -15,21 +15,6 @@ import { updateHostInteraction } from "../../utils/interactive";
  */
 export class ComboboxItem {
   constructor() {
-    // --------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    // --------------------------------------------------------------------------
-    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
-    this.disabled = false;
-    /**
-     * When `true`, the component is selected.
-     */
-    this.selected = false;
-    /** When `true`, the component is active. */
-    this.active = false;
-    /** The `id` attribute of the component. When omitted, a globally unique identifier is used. */
-    this.guid = guid();
     this.scale = "m";
     // --------------------------------------------------------------------------
     //
@@ -40,6 +25,16 @@ export class ComboboxItem {
       event.preventDefault();
       this.toggleSelected();
     };
+    this.disabled = false;
+    this.selected = false;
+    this.active = false;
+    this.ancestors = undefined;
+    this.guid = guid();
+    this.icon = undefined;
+    this.textLabel = undefined;
+    this.value = undefined;
+    this.constant = undefined;
+    this.filterDisabled = undefined;
   }
   selectedWatchHandler() {
     this.calciteComboboxItemChange.emit(this.el);

package/dist/collection/components/combobox-item/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-next.647
+ * v1.0.0-next.649
  */
 export const CSS = {
   icon: "icon",

package/dist/collection/components/combobox-item-group/combobox-item-group.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-next.647
+ * v1.0.0-next.649
  */
 import { h } from "@stencil/core";
 import { CSS } from "./resources";
@@ -15,6 +15,8 @@ export class ComboboxItemGroup {
   constructor() {
     this.guid = guid();
     this.scale = "m";
+    this.ancestors = undefined;
+    this.label = undefined;
   }
   // --------------------------------------------------------------------------
   //

package/dist/collection/components/combobox-item-group/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-next.647
+ * v1.0.0-next.649
  */
 export const CSS = {
   list: "list",