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

package/dist/cjs/calcite-chip.cjs.entry.js

@@ -1,19 +1,19 @@
 /*!
  * 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
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7e0f281f.js');
-const dom = require('./dom-fc9f7c5b.js');
-const guid = require('./guid-e00c2fae.js');
-const conditionalSlot = require('./conditionalSlot-4561a4a4.js');
-const loadable = require('./loadable-2c272f47.js');
-require('./resources-a0a90579.js');
-require('./observers-e85167a1.js');
+const index = require('./index-a88aeb73.js');
+const dom = require('./dom-070a27d9.js');
+const guid = require('./guid-4c7db122.js');
+const conditionalSlot = require('./conditionalSlot-f67c6a2b.js');
+const loadable = require('./loadable-e1b975eb.js');
+require('./resources-1db9ff52.js');
+require('./observers-7629d33c.js');
 
 const CSS = {
   title: "title",
@@ -38,35 +38,6 @@ const Chip = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.calciteChipDismiss = index.createEvent(this, "calciteChipDismiss", 6);
-    //--------------------------------------------------------------------------
-    //
-    //  Public Properties
-    //
-    //--------------------------------------------------------------------------
-    /** Specifies the appearance style of the component. */
-    this.appearance = "solid";
-    /** Specifies the color for the component. */
-    this.color = "grey";
-    /**
-     * When `true`, a close button is added to the component.
-     *
-     * @deprecated use `closable` instead.
-     */
-    this.dismissible = false;
-    /** When `true`, a close button is added to the component. */
-    this.closable = false;
-    /**
-     * Accessible name for the component's close button.
-     *
-     * @default "Close"
-     */
-    this.dismissLabel = TEXT.close;
-    /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
-    this.iconFlipRtl = false;
-    /** Specifies the size of the component. */
-    this.scale = "m";
-    /** When `true`, hides the component. */
-    this.closed = false;
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -78,6 +49,16 @@ const Chip = class {
       this.closed = true;
     };
     this.guid = guid.guid();
+    this.appearance = "solid";
+    this.color = "grey";
+    this.dismissible = false;
+    this.closable = false;
+    this.dismissLabel = TEXT.close;
+    this.icon = undefined;
+    this.iconFlipRtl = false;
+    this.scale = "m";
+    this.value = undefined;
+    this.closed = false;
   }
   handleDismissible(value) {
     this.closable = value;

package/dist/cjs/calcite-color-picker_3.cjs.entry.js

@@ -1,22 +1,22 @@
 /*!
  * 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
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7e0f281f.js');
-const dom = require('./dom-fc9f7c5b.js');
-const utils = require('./utils-e7e05a1a.js');
-const math = require('./math-abf27752.js');
-const interactive = require('./interactive-f768090a.js');
-const key = require('./key-25858919.js');
-const loadable = require('./loadable-2c272f47.js');
-const debounce = require('./debounce-60b87419.js');
-require('./resources-a0a90579.js');
-require('./guid-e00c2fae.js');
+const index = require('./index-a88aeb73.js');
+const dom = require('./dom-070a27d9.js');
+const utils = require('./utils-fece558c.js');
+const math = require('./math-921a2029.js');
+const interactive = require('./interactive-6a565a7d.js');
+const key = require('./key-3910ca3f.js');
+const loadable = require('./loadable-e1b975eb.js');
+const debounce = require('./debounce-63a14cdf.js');
+require('./resources-1db9ff52.js');
+require('./guid-4c7db122.js');
 
 /** Error message constants. */
 var FUNC_ERROR_TEXT = 'Expected a function';
@@ -2304,184 +2304,12 @@ const ColorPicker = class {
     index.registerInstance(this, hostRef);
     this.calciteColorPickerChange = index.createEvent(this, "calciteColorPickerChange", 6);
     this.calciteColorPickerInput = index.createEvent(this, "calciteColorPickerInput", 6);
-    //--------------------------------------------------------------------------
-    //
-    //  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$1;
-    /**
-     * 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 = utils.CSSColorMode.HEX;
     this.shiftKeyChannelAdjustment = 0;
     this.sliderThumbState = "idle";
-    this.colorFieldAndSliderInteractive = false;
-    this.channelMode = "rgb";
-    this.channels = this.toChannels(DEFAULT_COLOR$1);
-    this.dimensions = DIMENSIONS.m;
-    this.savedColors = [];
     this.handleTabActivate = (event) => {
       this.channelMode = event.currentTarget.getAttribute("data-color-mode");
       this.updateChannelsFromColor(this.color);
@@ -2785,6 +2613,47 @@ const ColorPicker = class {
       this.fieldAndSliderRenderingContext = canvas.getContext("2d");
       this.updateCanvasSize(canvas);
     };
+    this.allowEmpty = false;
+    this.appearance = "solid";
+    this.color = DEFAULT_COLOR$1;
+    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$1);
+    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();
@@ -3141,35 +3010,6 @@ const ColorPickerHexInput = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.calciteColorPickerHexInputChange = index.createEvent(this, "calciteColorPickerHexInputChange", 6);
-    //--------------------------------------------------------------------------
-    //
-    //  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 = utils.normalizeHex(DEFAULT_COLOR.hex());
     this.onCalciteInternalInputBlur = () => {
       const node = this.inputNode;
       const inputValue = node.value;
@@ -3187,14 +3027,17 @@ const ColorPickerHexInput = class {
     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 = utils.normalizeHex(DEFAULT_COLOR.hex());
+    this.numberingSystem = undefined;
+    this.internalColor = DEFAULT_COLOR;
   }
   //--------------------------------------------------------------------------
   //
@@ -3342,18 +3185,8 @@ const colorPickerSwatchCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyfra
 const ColorPickerSwatch = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * When `true`, the component is active.
-     */
     this.active = false;
-    /**
-     * Specifies the size of the component.
-     */
+    this.color = undefined;
     this.scale = "m";
   }
   handleColorChange(color$1) {

package/dist/cjs/calcite-combobox_3.cjs.entry.js

@@ -1,26 +1,26 @@
 /*!
  * 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
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7e0f281f.js');
-const filter = require('./filter-a1586bab.js');
-const floatingUi = require('./floating-ui-e6837eef.js');
-const guid = require('./guid-e00c2fae.js');
-const dom = require('./dom-fc9f7c5b.js');
-const label = require('./label-af7b6837.js');
-const form = require('./form-bdafdc1e.js');
-const observers = require('./observers-e85167a1.js');
-const interactive = require('./interactive-f768090a.js');
-const openCloseComponent = require('./openCloseComponent-b3922bdb.js');
-const loadable = require('./loadable-2c272f47.js');
-const debounce = require('./debounce-60b87419.js');
-const conditionalSlot = require('./conditionalSlot-4561a4a4.js');
-require('./resources-a0a90579.js');
+const index = require('./index-a88aeb73.js');
+const filter = require('./filter-3f434023.js');
+const floatingUi = require('./floating-ui-1ef94755.js');
+const guid = require('./guid-4c7db122.js');
+const dom = require('./dom-070a27d9.js');
+const label = require('./label-5d1f5c7e.js');
+const form = require('./form-8c6d38a0.js');
+const observers = require('./observers-7629d33c.js');
+const interactive = require('./interactive-6a565a7d.js');
+const openCloseComponent = require('./openCloseComponent-beba6cfa.js');
+const loadable = require('./loadable-e1b975eb.js');
+const debounce = require('./debounce-63a14cdf.js');
+const conditionalSlot = require('./conditionalSlot-f67c6a2b.js');
+require('./resources-1db9ff52.js');
 
 const ComboboxItem$1 = "CALCITE-COMBOBOX-ITEM";
 const ComboboxItemGroup$1 = "CALCITE-COMBOBOX-ITEM-GROUP";
@@ -72,68 +72,11 @@ const Combobox = class {
     this.calciteComboboxOpen = index.createEvent(this, "calciteComboboxOpen", 6);
     //--------------------------------------------------------------------------
     //
-    //  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
     //
     //--------------------------------------------------------------------------
     this.placement = floatingUi.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 = observers.createObserver("mutation", () => this.updateItems());
     this.resizeObserver = observers.createObserver("resize", () => this.setMaxScrollerHeight());
@@ -406,6 +349,31 @@ const Combobox = class {
     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) {
@@ -908,21 +876,6 @@ const ComboboxItem = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.calciteComboboxItemChange = index.createEvent(this, "calciteComboboxItemChange", 6);
-    // --------------------------------------------------------------------------
-    //
-    //  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.guid();
     this.scale = "m";
     // --------------------------------------------------------------------------
     //
@@ -933,6 +886,16 @@ const ComboboxItem = class {
       event.preventDefault();
       this.toggleSelected();
     };
+    this.disabled = false;
+    this.selected = false;
+    this.active = false;
+    this.ancestors = undefined;
+    this.guid = guid.guid();
+    this.icon = undefined;
+    this.textLabel = undefined;
+    this.value = undefined;
+    this.constant = undefined;
+    this.filterDisabled = undefined;
   }
   selectedWatchHandler() {
     this.calciteComboboxItemChange.emit(this.el);
@@ -1029,6 +992,8 @@ const ComboboxItemGroup = class {
     index.registerInstance(this, hostRef);
     this.guid = guid.guid();
     this.scale = "m";
+    this.ancestors = undefined;
+    this.label = undefined;
   }
   // --------------------------------------------------------------------------
   //