@esri/calcite-components 1.0.0-next.646 → 1.0.0-next.648

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

@@ -1,15 +1,15 @@
 /*!
  * 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.646
+ * v1.0.0-next.648
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-3db52168.js';
-import { g as getSlotted } from './dom-c7442d5a.js';
-import { g as guid } from './guid-2a3eda01.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-a259d062.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable-b4a4f025.js';
-import './resources-ffa9b8d6.js';
-import './observers-92bc8914.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-d13d66db.js';
+import { g as getSlotted } from './dom-c8898dc4.js';
+import { g as guid } from './guid-eaa87c08.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-18733fbb.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable-5df6cd58.js';
+import './resources-72c02e33.js';
+import './observers-32d3cec9.js';
 
 const CSS = {
   title: "title",
@@ -34,35 +34,6 @@ const Chip = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.calciteChipDismiss = 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
@@ -74,6 +45,16 @@ const Chip = class {
       this.closed = true;
     };
     this.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/esm/calcite-color-picker_3.entry.js

@@ -1,18 +1,18 @@
 /*!
  * 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.646
+ * v1.0.0-next.648
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-3db52168.js';
-import { i as isPrimaryPointerButton, a as getElementDir, f as focusElement, e as getThemeName } from './dom-c7442d5a.js';
-import { n as normalizeHex, C as CSSColorMode, p as parseMode, c as colorEqual, i as isValidHex, a as isLonghandHex, r as rgbToHex, b as hexChar } from './utils-4cfc4b8d.js';
-import { c as clamp } from './math-e6e57679.js';
-import { u as updateHostInteraction } from './interactive-26387dc4.js';
-import { i as isActivationKey } from './key-411c120d.js';
-import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-b4a4f025.js';
-import { d as debounce, i as isObject } from './debounce-a80cea2e.js';
-import './resources-ffa9b8d6.js';
-import './guid-2a3eda01.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-d13d66db.js';
+import { i as isPrimaryPointerButton, a as getElementDir, f as focusElement, e as getThemeName } from './dom-c8898dc4.js';
+import { n as normalizeHex, C as CSSColorMode, p as parseMode, c as colorEqual, i as isValidHex, a as isLonghandHex, r as rgbToHex, b as hexChar } from './utils-52beb63a.js';
+import { c as clamp } from './math-e1907584.js';
+import { u as updateHostInteraction } from './interactive-ee7f9950.js';
+import { i as isActivationKey } from './key-23509709.js';
+import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-5df6cd58.js';
+import { d as debounce, i as isObject } from './debounce-6bf69804.js';
+import './resources-72c02e33.js';
+import './guid-eaa87c08.js';
 
 /** Error message constants. */
 var FUNC_ERROR_TEXT = 'Expected a function';
@@ -2300,184 +2300,12 @@ const ColorPicker = class {
     registerInstance(this, hostRef);
     this.calciteColorPickerChange = createEvent(this, "calciteColorPickerChange", 6);
     this.calciteColorPickerInput = 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 = 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);
@@ -2781,6 +2609,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();
@@ -3137,35 +3006,6 @@ const ColorPickerHexInput = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.calciteColorPickerHexInputChange = 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 = normalizeHex(DEFAULT_COLOR.hex());
     this.onCalciteInternalInputBlur = () => {
       const node = this.inputNode;
       const inputValue = node.value;
@@ -3183,14 +3023,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 = normalizeHex(DEFAULT_COLOR.hex());
+    this.numberingSystem = undefined;
+    this.internalColor = DEFAULT_COLOR;
   }
   //--------------------------------------------------------------------------
   //
@@ -3338,18 +3181,8 @@ const colorPickerSwatchCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyfra
 const ColorPickerSwatch = class {
   constructor(hostRef) {
     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/esm/calcite-combobox_3.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.646
+ * v1.0.0-next.648
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3db52168.js';
-import { f as filter } from './filter-5334a2b2.js';
-import { d as defaultMenuPlacement, f as filterComputedPlacements, c as connectFloatingUI, u as updateAfterClose, r as reposition, a as disconnectFloatingUI, F as FloatingCSS } from './floating-ui-39e24e16.js';
-import { g as guid } from './guid-2a3eda01.js';
-import { n as nodeListToArray, i as isPrimaryPointerButton, t as toAriaBoolean, h as getElementProp, g as getSlotted } from './dom-c7442d5a.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-2102b073.js';
-import { s as submitForm, c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from './form-a676c099.js';
-import { c as createObserver } from './observers-92bc8914.js';
-import { u as updateHostInteraction } from './interactive-26387dc4.js';
-import { c as connectOpenCloseComponent, d as disconnectOpenCloseComponent } from './openCloseComponent-092b548c.js';
-import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-b4a4f025.js';
-import { d as debounce } from './debounce-a80cea2e.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-a259d062.js';
-import './resources-ffa9b8d6.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-d13d66db.js';
+import { f as filter } from './filter-978322da.js';
+import { d as defaultMenuPlacement, f as filterComputedPlacements, c as connectFloatingUI, u as updateAfterClose, r as reposition, a as disconnectFloatingUI, F as FloatingCSS } from './floating-ui-fc1dd50c.js';
+import { g as guid } from './guid-eaa87c08.js';
+import { n as nodeListToArray, i as isPrimaryPointerButton, t as toAriaBoolean, h as getElementProp, g as getSlotted } from './dom-c8898dc4.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-226b0181.js';
+import { s as submitForm, c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from './form-44011828.js';
+import { c as createObserver } from './observers-32d3cec9.js';
+import { u as updateHostInteraction } from './interactive-ee7f9950.js';
+import { c as connectOpenCloseComponent, d as disconnectOpenCloseComponent } from './openCloseComponent-333b893d.js';
+import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-5df6cd58.js';
+import { d as debounce } from './debounce-6bf69804.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-18733fbb.js';
+import './resources-72c02e33.js';
 
 const ComboboxItem$1 = "CALCITE-COMBOBOX-ITEM";
 const ComboboxItemGroup$1 = "CALCITE-COMBOBOX-ITEM-GROUP";
@@ -68,68 +68,11 @@ const Combobox = class {
     this.calciteComboboxOpen = 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 = 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());
@@ -402,6 +345,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) {
@@ -904,21 +872,6 @@ const ComboboxItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.calciteComboboxItemChange = 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();
     this.scale = "m";
     // --------------------------------------------------------------------------
     //
@@ -929,6 +882,16 @@ const ComboboxItem = class {
       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);
@@ -1025,6 +988,8 @@ const ComboboxItemGroup = class {
     registerInstance(this, hostRef);
     this.guid = guid();
     this.scale = "m";
+    this.ancestors = undefined;
+    this.label = undefined;
   }
   // --------------------------------------------------------------------------
   //