@arcgis/map-components 5.0.0-next.98 → 5.0.0

package/dist/components/arcgis-slider-color-size-legacy/customElement.d.ts

@@ -0,0 +1,461 @@
+/// <reference path="../../index.d.ts" />
+import type ColorSizeStop from "@arcgis/core/renderers/visualVariables/support/ColorSizeStop.js";
+import type { VisualVariable } from "@arcgis/core/widgets/smartMapping/ColorSizeSlider.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { HistogramResult } from "@arcgis/core/smartMapping/statistics/types.js";
+import type { RendererResult } from "@arcgis/core/smartMapping/renderers/univariateColorSize.js";
+import type { ArcgisReferenceElement, IconName } from "../types.js";
+import type { ThumbDragEvent, ThumbChangeEvent } from "@arcgis/core/widgets/Slider/types.js";
+import type { HistogramConfig, ZoomOptions } from "@arcgis/core/widgets/smartMapping/types.js";
+import type { LabelFormatFunction, InputParseFunction } from "@arcgis/core/widgets/types.js";
+import type { SmartMappingSliderBaseState } from "@arcgis/core/widgets/smartMapping/SmartMappingSliderBase.js";
+
+/**
+ * > [!WARNING]
+ * >
+ * > This is a **legacy component**. It relies on an underlying widget as part of our migration to native web components.
+ * >
+ * > A fully native replacement for this component is in development. Once it reaches feature parity, the legacy component will be deprecated and no longer maintained. At that point, development should use the native component.
+ *
+ * The Color Size Slider component is intended for authoring and exploring data-driven visualizations in any
+ * layer that can be rendered with a [ColorVariable](https://developers.arcgis.com/javascript/latest/references/core/renderers/visualVariables/ColorVariable/) and
+ * a [SizeVariable](https://developers.arcgis.com/javascript/latest/references/core/renderers/visualVariables/SizeVariable/). Both visual variables should be used
+ * to visualize the same data variable.
+ *
+ * This slider and visualization style is designed specifically for
+ * 3D thematic visualizations where both size and color are used to visualize the same data variable in order
+ * to minimize confusion because of distortion in perception. For example, a visualization of extruded points
+ * may be difficult to understand if two features of similar sizes (and therefore data values) are located
+ * far apart from one another; the feature furthest from the [Camera](https://developers.arcgis.com/javascript/latest/references/core/Camera/) will appear smaller than
+ * the feature closer to the camera. The color variable can help the user understand that both features have similar values.
+ *
+ * ![Slider Color Size with perspective](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/colorsizeslider-perspective.png "Slider Color Size with perspective")
+ *
+ * See the image below for a summary of the configurable options available on this slider.
+ *
+ * ![Slider Color Size with annotations](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/colorsizeslider-labels.png "Slider Color Size with annotations")
+ *
+ * The [updateFromRendererResult()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-color-size-legacy/#updateFromRendererResult) method can be used to intelligently populate slider properties including
+ * [max](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-color-size-legacy/#max), [min](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-color-size-legacy/#min), [size visual variable](https://developers.arcgis.com/javascript/latest/references/core/renderers/visualVariables/SizeVariable/) configuration,
+ * [color visual variable](https://developers.arcgis.com/javascript/latest/references/core/renderers/visualVariables/ColorVariable/) configuration, and the slider's histogram after the
+ * renderer has been created from the result of the [createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/renderers/univariateColorSize/#createContinuousRenderer) method.
+ *
+ * ```js
+ * const colorAndSizeRendererCreator = await import("@arcgis/core/smartMapping/renderers/univariateColorSize.js");
+ * const viewElement = document.querySelector("arcgis-map")!;
+ * const colorSizeSlider = document.querySelector("arcgis-slider-color-size-legacy")!;
+ *
+ * const featureLayer = new FeatureLayer({
+ *   url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Poverty_by_Age_Boundaries/FeatureServer/1",
+ * });
+ *
+ * await viewElement.viewOnReady();
+ * viewElement.map?.add(featureLayer);
+ *
+ * const params = {
+ *   layer: featureLayer,
+ *   field: "B17020_calc_pctPovE",
+ *   view: viewElement.view,
+ * };
+ *
+ * const rendererResult = await colorAndSizeRendererCreator.createContinuousRenderer(params);
+ *
+ * featureLayer.renderer = rendererResult.renderer;
+ *
+ * const histogramResult = await histogram({
+ *   ...params,
+ *   numBins: 30,
+ * });
+ *
+ * await colorSizeSlider?.updateFromRendererResult(rendererResult, histogramResult);
+ * ```
+ *
+ * This slider should be used to update the corresponding [color](https://developers.arcgis.com/javascript/latest/references/core/renderers/visualVariables/ColorVariable/)
+ * and [size](https://developers.arcgis.com/javascript/latest/references/core/renderers/visualVariables/SizeVariable/) visual variables in a layer's renderer. It is the responsibility of the app developer
+ * to set up event listeners on this slider that update these variables in the appropriate renderer.
+ *
+ * ```js
+ * const updateRendererFromSlider = () => {
+ *   const renderer = featureLayer?.renderer?.clone();
+ *   if (!renderer || !("visualVariables" in renderer) || !renderer.visualVariables?.[0]) {
+ *     return;
+ *   }
+ *   renderer.visualVariables = colorSizeSlider.updateVisualVariables(
+ *     renderer.visualVariables as VisualVariable[],
+ *   );
+ *   featureLayer.renderer = renderer;
+ * };
+ *
+ * colorSizeSlider.addEventListener("arcgisThumbChange", updateRendererFromSlider);
+ * colorSizeSlider.addEventListener("arcgisThumbDrag", updateRendererFromSlider);
+ * colorSizeSlider.addEventListener("arcgisPropertyChange", updateRendererFromSlider);
+ * ```
+ *
+ * @since 5.0
+ * @see [univariateColorSizeRendererCreator](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/renderers/univariateColorSize/)
+ */
+export abstract class ArcgisSliderColorSizeLegacy extends LitElement {
+  /**
+   * If true, the component will not be destroyed automatically when it is
+   * disconnected from the document. This is useful when you want to move the
+   * component to a different place on the page, or temporarily hide it. If this
+   * is set, make sure to call the [destroy()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-color-size-legacy/#destroy) method when you are done to
+   * prevent memory leaks.
+   *
+   * @default false
+   */
+  accessor autoDestroyDisabled: boolean;
+  /**
+   * Only applicable when three thumbs (i.e. handles) are set on the
+   * slider (i.e. when [primaryHandleEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-color-size-legacy/#primaryHandleEnabled) is `true`). This property
+   * indicates whether the position of the outside handles are synced with the middle, or primary,
+   * handle. When enabled, if the primary handle is moved then the outside handle positions are updated
+   * while maintaining a fixed distance from the primary handle.
+   *
+   * @default true
+   * @see [primaryHandleEnabled](https://developers.arcgis.com/javascript/latest/references/core/widgets/smartMapping/ColorSizeSlider/#primaryHandleEnabled)
+   * @example
+   * ```js
+   * // enables the primary handles and syncs it with the others
+   * colorSizeSlider.primaryHandleEnabled = true;
+   * colorSizeSlider.handlesSyncedToPrimary = true;
+   * colorSizeSlider.persistSizeRangeEnabled = true;
+   * ```
+   */
+  accessor handlesSyncedToPrimary: boolean;
+  /**
+   * The histogram associated with the data represented on the slider. The bins are typically
+   * generated using the [histogram](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/statistics/histogram/) statistics function.
+   *
+   * @example
+   * ```js
+   * const histogramResult = await histogram({
+   *   layer: featureLayer,
+   *   field: "fieldName",
+   *   numBins: 30,
+   * });
+   *
+   *  slider.histogramConfig = {
+   *    bins: histogramResult.bins
+   *  };
+   *       ```
+   * @see [histogram](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/statistics/histogram/)
+   */
+  accessor histogramConfig: HistogramConfig | null | undefined;
+  /**
+   * Icon which represents the component.
+   * Typically used when the component is controlled by another component (e.g. by the Expand component).
+   *
+   * @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
+   */
+  accessor icon: IconName;
+  /**
+   * A function used to format user inputs. As opposed to [labelFormatFunction](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-color-size-legacy/#labelFormatFunction), which formats
+   * thumb labels, the `inputFormatFunction` formats thumb values in the input element when the user begins
+   * to edit them.
+   *
+   * The image below demonstrates how slider input values resemble corresponding slider values by default
+   * and won't match the formatting set in `labelFormatFunction`.
+   *
+   * ![Slider without input formatter](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-no-input-formatter.png "Slider without input formatter")
+   *
+   * If you want to format slider input values so they match thumb labels, you can pass the same function set in `labelFormatFunction` to
+   * `inputFormatFunction` for consistent formatting.
+   *
+   * ![Slider with input formatter](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-input-formatter.png "Slider with input formatter")
+   *
+   * However, if an `inputFormatFunction` is specified, you must also write a corresponding
+   * [inputParseFunction](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-color-size-legacy/#inputParseFunction) to parse user inputs to understandable slider values. In most cases, if
+   * you specify an `inputFormatFunction`, you should set the [labelFormatFunction](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-color-size-legacy/#labelFormatFunction) to the same value
+   * for consistency between labels and inputs.
+   *
+   * This property overrides the default input formatter, which formats by calling `toString()` on the input value.
+   *       
+   *
+   * @see [inputParseFunction](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-color-size-legacy/#inputParseFunction)
+   * @example
+   * ```js
+   * // Formats the slider input to abbreviated numbers with units
+   * // e.g. a thumb at position 1500 will render with an input label of 1.5k
+   * slider.inputFormatFunction = (value: number): string => {
+   *   if (value >= 1000000) {
+   *     return (value / 1000000).toPrecision(3) + "m";
+   *   }
+   *   if (value >= 100000) {
+   *     return (value / 1000).toPrecision(3) + "k";
+   *   }
+   *   if (value >= 1000) {
+   *     return (value / 1000).toPrecision(2) + "k";
+   *   }
+   *   return value.toFixed(0);
+   * };
+   *            ```
+   */
+  accessor inputFormatFunction: LabelFormatFunction | null | undefined;
+  /**
+   * Function used to parse slider inputs formatted by the [inputFormatFunction](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-color-size-legacy/#inputFormatFunction).
+   * This property must be set if an `inputFormatFunction` is set. Otherwise the slider values will
+   * likely not update to their expected positions.
+   *
+   * Overrides the default input parses, which is a parsed floating point number.
+   *
+   * @see [inputFormatFunction](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-color-size-legacy/#inputFormatFunction)
+   * @example
+   * ```js
+   * // Parses the slider input (a string value) to a number value understandable to the slider
+   * // This assumes the slider was already configured with an inputFormatFunction
+   * // For example, if the input is 1.5k this function will parse
+   * // it to a value of 1500
+   * colorSlider.inputParseFunction = (value: string): number => {
+   *   const charLength = value.length;
+   *   const valuePrefix = parseFloat(value.substring(0, charLength - 1));
+   *   const finalChar = value.substring(charLength - 1);
+   *
+   *   if (parseFloat(finalChar) >= 0) {
+   *     return parseFloat(value);
+   *   }
+   *   if (finalChar === "k") {
+   *     return valuePrefix * 1000;
+   *   }
+   *   if (finalChar === "m") {
+   *     return valuePrefix * 1000000;
+   *   }
+   *   return parseFloat(value);
+   * };
+   *           ```
+   */
+  accessor inputParseFunction: InputParseFunction | null | undefined;
+  /**
+   * A function used to format labels on the thumbs, min, max, and average values. Overrides the default label formatter. This function also supports date formatting.
+   *
+   * @example
+   * ```js
+   * // For thumb values, rounds each label to whole numbers
+   * slider.labelFormatFunction = (value: number, type?: SliderFormatType): string => {
+   *   return (type === "value") ? value.toFixed(0) : value.toString();
+   * };
+   *           ```
+   */
+  accessor labelFormatFunction: LabelFormatFunction | null | undefined;
+  /**
+   * The maximum value or upper bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-color-size-legacy/#updateFromRendererResult) method,
+   * the user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer
+   * to set up event listeners that update the color and size variables of the appropriate renderer.
+   *
+   * @example
+   * ```js
+   * colorSizeSlider.max = 150;
+   * ```
+   */
+  accessor max: number;
+  /**
+   * The minimum value or lower bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-color-size-legacy/#updateFromRendererResult) method,
+   * the user may change this property by selecting the label containing the min value on the slider UI. It is the responsibility of the app developer
+   * to set up event listeners that update the color and size variables of the appropriate renderer.
+   *
+   * @example
+   * ```js
+   * colorSizeSlider.min = -150;
+   */
+  accessor min: number;
+  /**
+   * Only applicable when three thumbs (i.e. handles) are set on the
+   * slider (i.e. when [primaryHandleEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-color-size-legacy/#primaryHandleEnabled) is `true`).
+   * This property is typically used in diverging, or `above-and-below` renderer configurations.
+   *
+   * When `true`, ensures symbol sizes in the `above` range
+   * are consistent with symbol sizes in the `below` range for all slider thumb positions.
+   * In other words, the size values in the [stops](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-color-size-legacy/#stops) will adjust
+   * proportionally according to the positions of the data values within the
+   * constraints of the size range (maxSize - minSize) as the slider thumbs update.
+   * When `false`, size values in the stops will remain the same even when slider thumb values
+   * change.
+   *
+   * In most cases, this should be set to `true` to keep sizes in the `above` range consistent with
+   * sizes in the `below` range to avoid map misinterpretation.
+   *
+   * @default false
+   * @see [primaryHandleEnabled](https://developers.arcgis.com/javascript/latest/references/core/widgets/smartMapping/ColorSizeSlider/#primaryHandleEnabled)
+   * @example
+   * ```js
+   * colorSizeSlider.primaryHandleEnabled = true;
+   * colorSizeSlider.persistSizeRangeEnabled = true;
+   * ```
+   */
+  accessor persistSizeRangeEnabled: boolean;
+  /**
+   * Defines how slider thumb values should be rounded. This number indicates the number
+   * of decimal places slider thumb _values_ should round to when they have been moved.
+   *
+   * Keep in mind this property rounds thumb values and shouldn't be used exclusively for formatting purposes.
+   *
+   * @default 4
+   * @example
+   * ```js
+   * // Rounds slider thumb values to 7 decimal places
+   * slider.precision = 7;
+   * ```
+   */
+  accessor precision: number;
+  /**
+   * When `true`, the slider will render a third handle between the
+   * two handles already provided by default. This is the primary handle.
+   * Three or five [stops](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-color-size-legacy/#stops) must be defined for the primary handle to render.
+   * The primary handle represents the middle stop.
+   *
+   * When [handlesSyncedToPrimary](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-color-size-legacy/#handlesSyncedToPrimary) is `true`, then
+   * this handle will control the position of the others when moved.
+   *
+   * This is typically used in diverging, or `above-and-below` renderer configurations.
+   *
+   * @default false
+   * @see [handlesSyncedToPrimary](https://developers.arcgis.com/javascript/latest/references/core/widgets/smartMapping/ColorSizeSlider/#handlesSyncedToPrimary)
+   * @see [persistSizeRangeEnabled](https://developers.arcgis.com/javascript/latest/references/core/widgets/smartMapping/ColorSizeSlider/#persistSizeRangeEnabled)
+   * @example
+   * ```js
+   * // enables the primary handles and syncs it with the others
+   * colorSizeSlider.primaryHandleEnabled = true;
+   * colorSizeSlider.handlesSyncedToPrimary = true;
+   * colorSizeSlider.persistSizeRangeEnabled = true;
+   * ```
+   */
+  accessor primaryHandleEnabled: boolean;
+  /**
+   * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
+   *
+   * @see [Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
+   */
+  accessor referenceElement: ArcgisReferenceElement | string | undefined;
+  /** The current state of the component. */
+  get state(): SmartMappingSliderBaseState;
+  /**
+   * The colors and sizes corresponding with data values in the [ColorVariable](https://developers.arcgis.com/javascript/latest/references/core/renderers/visualVariables/ColorVariable/)
+   * and [SizeVariable](https://developers.arcgis.com/javascript/latest/references/core/renderers/visualVariables/SizeVariable/) of the renderer associated with the slider.
+   *
+   * Use the [updateFromRendererResult()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-color-size-legacy/#updateFromRendererResult) method to conveniently construct these stops from a renderer generated from the [createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/renderers/univariateColorSize/#createContinuousRenderer) smart mapping module.
+   *
+   * Use [updateVisualVariables()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-color-size-legacy/#updateVisualVariables) to update the renderer's visual variables with the values matching the slider thumb positions.
+   *
+   * @see [updateFromRendererResult()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-color-size-legacy/#updateFromRendererResult)
+   * @see [updateVisualVariables()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-color-size-legacy/#updateVisualVariables)
+   * @example
+   * ```js
+   * colorSizeSlider.stops = [
+   *   { size: 2, value: colorSizeSlider.min, color: new Color([240, 240, 240, 1]) },
+   *   { size: 24, value: colorSizeSlider.max, color: new Color([0, 0, 255, 1]) },
+   * ]
+   * ```
+   */
+  accessor stops: Array<ColorSizeStop>;
+  /**
+   * Zooms the slider track to the bounds provided in this property. When min and/or max zoom values are provided, the absolute [min](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-color-size-legacy/#min) and
+   * [max](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-color-size-legacy/#max) slider values are preserved and rendered at their typical positions on the slider. However, the
+   *  slider track itself is zoomed so that thumbs cannot be moved above or below the provided min and max zoomed values.
+   *
+   *  When a slider is in a zoomed state, the zoomed ends of the track will appear jagged. In the image below, notice how the
+   *  top thumb cannot be moved past the zoom max of `31` even though the slider max is `200`.
+   *
+   *  ![slider-zoom](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-zoomed.png "Zoomed slider")
+   *
+   *  To exit a zoomed state, the user can click the jagged line or the developer can set the `zoomOptions` to `null`. It
+   *  is up to the developer to provide a UI option for end users to enable zooming on the slider.
+   *
+   *  Setting the `zoomOptions` is useful when the slider is tied to heavily skewed datasets where the histogram renders only one or two bars because of outliers.
+   *
+   *  ![slider-not-zoomed](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-skewed-not-zoomed.png "Unzoomed slider")
+   *
+   *  You can remove the influence of outliers by zooming the slider and regenerating a histogram based on the zoomed min and max. This will provide a better view of the data
+   *  and make the slider more useful to the end user.
+   *
+   * @example
+   * ```js
+   * // zooms the slider so thumbs can only be moved to positions between
+   * // values of 10 and 25 while maintaining the slider's absolute min and max values
+   * slider.zoomOptions = {
+   *   min: 10,
+   *   max: 25
+   * };
+   *           ```
+   * @example
+   * ```js
+   * // disables zooming on the slider
+   * slider.zoomOptions = null;
+   *           ```
+   * @example
+   * ```js
+   * // zooms the slider so thumbs can only be moved to positions above
+   * // value of 10 while maintaining the slider's absolute min value
+   * slider.zoomOptions = {
+   *   min: 10
+   * };
+   *           ```
+   * @example
+   * ```js
+   * // zooms the slider so thumbs can only be moved to positions below
+   * // value of 25 while maintaining the slider's absolute max value
+   * slider.zoomOptions = {
+   *   max: 25
+   * };
+   *           ```
+   */
+  accessor zoomOptions: ZoomOptions | null | undefined;
+  /** Permanently destroy the component. */
+  destroy(): Promise<void>;
+  /**
+   * A convenience function used to update the properties of a Slider Color Size component instance from the
+   * [result](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/renderers/univariateColorSize/#RendererResult) of
+   * the [createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/renderers/univariateColorSize/#createContinuousRenderer)
+   * method. Note that this method always expects `rendererResult` to be defined for the slider to function, but `histogramResult` is optional.
+   *
+   * @param rendererResult - The result object from the [createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/renderers/univariateColorSize/#createContinuousRenderer)
+   *   method.
+   * @param histogramResult - The result histogram object from the [histogram()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/statistics/histogram/#histogram)
+   *   method.
+   * @example
+   * ```js
+   * const rendererResult = await colorAndSizeRendererCreator.createContinuousRenderer(params);
+   *
+   * featureLayer.renderer = rendererResult.renderer;
+   *
+   * const histogramResult = await histogram({
+   *   ...params,
+   *   numBins: 30,
+   * });
+   *
+   * await colorSizeSlider?.updateFromRendererResult(rendererResult, histogramResult);
+   * ```
+   */
+  updateFromRendererResult(rendererResult: RendererResult, histogramResult?: HistogramResult): Promise<void>;
+  /**
+   * A convenience function used to update the visual variables of a renderer generated with the
+   * [createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/renderers/univariateColorSize/#createContinuousRenderer)
+   * method with the values obtained from the slider. This method is useful for cases when the app allows the end user to switch data variables
+   * used to render the data.
+   *
+   * @param variables - The visual variables to update from the renderer associated with the slider. The properties of the
+   *   color and size variables will update based on the slider thumb values.
+   * @returns Returns the input visual variables updated to match the current slider values. These should be set directly
+   *   back to the renderer where they came from.
+   * @example
+   * ```js
+   * const renderer = featureLayer?.renderer?.clone();
+   * renderer.visualVariables = colorSizeSlider.updateVisualVariables(renderer.visualVariables as VisualVariable[]);
+   * featureLayer.renderer = renderer;
+   * ```
+   */
+  updateVisualVariables(variables: VisualVariable[]): VisualVariable[];
+  /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "histogramConfig" | "max" | "min" | "precision" | "state" | "stops" | "zoomOptions"; }>;
+  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider. */
+  readonly arcgisThumbChange: import("@arcgis/lumina").TargetedEvent<this, ThumbChangeEvent>;
+  /** Fires when a user drags a thumb on the component. */
+  readonly arcgisThumbDrag: import("@arcgis/lumina").TargetedEvent<this, ThumbDragEvent>;
+  readonly "@eventTypes": {
+    arcgisPropertyChange: ArcgisSliderColorSizeLegacy["arcgisPropertyChange"]["detail"];
+    arcgisReady: ArcgisSliderColorSizeLegacy["arcgisReady"]["detail"];
+    arcgisThumbChange: ArcgisSliderColorSizeLegacy["arcgisThumbChange"]["detail"];
+    arcgisThumbDrag: ArcgisSliderColorSizeLegacy["arcgisThumbDrag"]["detail"];
+  };
+}

package/dist/components/arcgis-slider-color-size-legacy/customElement.js

@@ -0,0 +1,33 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
+import { c as t } from "../../chunks/runtime.js";
+import o from "@arcgis/core/widgets/smartMapping/ColorSizeSlider.js";
+import { m as s } from "../../chunks/useWidget.js";
+import { LitElement as l, createEvent as a } from "@arcgis/lumina";
+import { usePropertyChange as d } from "@arcgis/lumina/controllers";
+import { css as n } from "lit";
+import { reEmitEvent as i } from "@arcgis/lumina/controllers/accessor";
+const c = n`.esri-widget__heading{color:var(--calcite-color-text-2);margin:0 0 .5rem;font-weight:var(--calcite-font-weight-semibold)}h1.esri-widget__heading{font-size:var(--calcite-font-size-xl)}h2.esri-widget__heading{font-size:var(--calcite-font-size-md)}h3.esri-widget__heading,h4.esri-widget__heading,h5.esri-widget__heading,h6.esri-widget__heading{font-size:var(--calcite-font-size)}.esri-widget{box-sizing:border-box;color:var(--calcite-color-text-2);background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-relative-tight)}.esri-widget *,.esri-widget :before,.esri-widget :after{box-sizing:inherit}.esri-widget.esri-widget--disabled>*{opacity:.4;pointer-events:none}.esri-widget.esri-widget--compact{--esri-widget-padding-y: 0;--esri-widget-padding-x: 0}.esri-widget__anchor{color:var(--calcite-color-text-2)}.esri-widget__anchor:hover{color:var(--calcite-color-text-3)}.esri-widget__anchor:hover,.esri-widget__anchor:focus{text-decoration:underline}.esri-widget__anchor--disabled{opacity:.4;pointer-events:none}.esri-widget__header{background-color:var(--calcite-color-foreground-1);flex:1 0 100%;justify-content:space-between;align-items:center;width:100%;min-height:48px;padding:12px 0 12px 15px;display:flex}.esri-widget__heading{word-break:break-word}.esri-widget__header .esri-widget__heading{width:calc(100% - 48px);text-align:initial;color:var(--calcite-color-text-1);align-items:center;margin:0;padding:0;display:flex}.esri-widget__header-button{appearance:none;cursor:pointer;color:var(--calcite-color-text-2);background-color:var(--calcite-color-foreground-1);border:none;flex:0 0 48px;justify-content:center;align-self:stretch;align-items:center;width:48px;padding:0;display:flex}.esri-widget__footer{background-color:var(--calcite-color-foreground-1);justify-content:center;align-items:center;width:100%;min-height:48px;display:flex}.esri-widget__footer-pagination{color:var(--calcite-color-text-2);justify-content:space-between;align-items:center;display:flex}.esri-widget__footer-pagination-previous-button,.esri-widget__footer-pagination-next-button{cursor:pointer;background-color:var(--calcite-color-foreground-1);border:0;margin:0 7px;padding:12px 15px;transition:background-color .125s ease-in-out}.esri-widget__footer-pagination-previous-button:hover,.esri-widget__footer-pagination-previous-button:focus,.esri-widget__footer-pagination-next-button:hover,.esri-widget__footer-pagination-next-button:focus{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-1)}.esri-menu{visibility:hidden;z-index:1;background-clip:padding;background-color:var(--calcite-color-foreground-1);background-clip:padding-box;width:100%;max-height:0;margin:2px 0 0;padding:0;font-size:var(--calcite-font-size);line-height:var(--calcite-spacing-xl);position:absolute;top:100%;left:0;overflow:hidden;box-shadow:0 1px 2px #0000004d}.esri-menu .esri-menu__header{color:var(--calcite-color-text-inverse);background-color:var(--calcite-color-inverse);padding:6px 12px}.esri-menu__list{margin:0;padding:0;list-style:none}.esri-menu__list-item{cursor:pointer;border-top:1px solid #adadad4d;border-left:3px solid #0000;padding:.8em 1em}.esri-menu__list-item [class^=esri-icon-],.esri-menu__list-item [class*=" esri-icon-"]{padding-right:2.8px}.esri-menu__list-item:first-child{border-top:none}.esri-menu__list-item--focus,.esri-menu__list-item:hover,.esri-menu__list-item:focus{background-color:var(--calcite-color-foreground-1)}.esri-menu__list-item:active{background-color:var(--calcite-color-foreground-current)}.esri-menu__list-item--active,.esri-menu__list-item--active:hover,.esri-menu__list-item--active:focus{background-color:var(--calcite-color-foreground-1);border-left-color:var(--calcite-color-brand)}.esri-widget__table{border-collapse:collapse;color:var(--calcite-color-text-1);border:none;width:100%;line-height:var(--calcite-font-line-height-relative-tight)}.esri-widget__table tr:nth-child(odd){background-color:var(--calcite-color-transparent)}.esri-widget__table tr:nth-child(2n){background-color:var(--calcite-color-transparent-press)}.esri-widget__table tr a{color:var(--calcite-color-text-2)}.esri-widget__table tr a:hover,.esri-widget__table tr a:focus{color:var(--calcite-color-text-1)}.esri-widget__table tr td,.esri-widget__table tr th{vertical-align:top;word-break:break-word;padding:.5em .7em;font-size:var(--calcite-font-size-sm);font-weight:var(--calcite-font-weight-regular)}.esri-widget__table tr th{text-align:left;border-right:3px solid #0000000d;width:50%}.esri-widget__table tr td{width:50%}.esri-input{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-1);border:1px solid #959595;font-size:var(--calcite-font-size)}.esri-input::-ms-clear{display:none}.esri-input::placeholder{opacity:1;color:var(--calcite-color-text-2)}.esri-input:placeholder-shown{text-overflow:ellipsis}.esri-input[type=text],.esri-input[type=password],.esri-input[type=number]{height:32px;padding:0 .5em}calcite-combobox.esri-input{border:none}.esri-widget__content--empty{text-align:center;color:var(--calcite-color-border-input);flex-flow:column wrap;align-items:center;padding:18px 22px;display:flex}.esri-widget__content--empty h1.esri-widget__heading,.esri-widget__content--empty h2.esri-widget__heading,.esri-widget__content--empty h3.esri-widget__heading,.esri-widget__content--empty h4.esri-widget__heading,.esri-widget__content--empty h5.esri-widget__heading{font-weight:var(--calcite-font-weight-regular)}.esri-widget__content-illustration--empty{width:128px;padding:1rem 0}.esri-widget__content-icon--empty{width:32px;padding:.5rem 0}.esri-select{appearance:none;cursor:pointer;color:var(--calcite-color-text-2);background:var(--calcite-color-foreground-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 32 32' width='32' height='32'%3E%3Cpath d='M8 11.207l-4-4V5.793l4 4 4-4v1.414z' fill='%23adadad' fillrule='nonzero'/%3E%3C/svg%3E") 100% no-repeat;border:1px solid #959595;border-radius:0;width:100%;height:32px;margin:0;padding:0 .5em;font-family:inherit;font-size:.85em;display:block}.esri-select[disabled]{cursor:auto}.esri-select::-ms-expand{display:none}.esri-disabled a,.esri-disabled [role=menu],.esri-disabled [role=checkbox],.esri-disabled [class^=esri-icon-],.esri-disabled [class*=" esri-icon-"]{color:var(--calcite-color-text-3)}.keynav-mode .esri-widget:focus,.keynav-mode .esri-widget :focus{z-index:1;outline-offset:2px;outline:2px solid #adadad}.esri-widget__loader-animation{border:.15em solid #adadad4d;border-top-color:var(--calcite-color-border-input);border-radius:100%;width:1em;height:1em;font-size:var(--calcite-font-size-md);animation:1.25s linear infinite esri-rotate;display:block;transform:translateZ(0)}:dir(rtl) .esri-widget__table th{text-align:right;border-left:3px solid #0000000d;border-right:none}:dir(rtl) .esri-select{background-position:0}:dir(rtl) .esri-menu__list-item{border-left:none;border-right:3px solid #0000}:dir(rtl) .esri-menu__list-item [class^=esri-icon-],:dir(rtl) .esri-menu__list-item [class*=" esri-icon-"]{padding-left:2px;padding-right:0}:dir(rtl) .esri-menu__list-item--active{border-right-color:var(--calcite-color-brand)}.esri-icon-font-fallback-text{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.esri-rotating{animation:1.25s linear infinite esri-rotate;transform:translateZ(0)}.esri-clearfix:before,.esri-clearfix:after{content:" ";display:table}.esri-clearfix:after{clear:both}.esri-interactive{cursor:pointer}.esri-hidden{display:none!important}.esri-invisible{visibility:hidden!important}.esri-offscreen{position:absolute;top:-999em;left:-999em}.esri-match-height{flex-direction:column;flex:auto;display:flex;overflow:hidden}@supports (-ms-ime-align: auto){.esri-slider__anchor:focus{outline:1px dotted var(--calcite-color-foreground-current)}}.esri-slider{-webkit-user-select:none;user-select:none;direction:ltr;width:100%;height:100%;display:flex}.esri-disabled{pointer-events:none}.esri-disabled .esri-slider__content,.esri-disabled .esri-slider__min,.esri-disabled .esri-slider__max{opacity:var(--calcite-opacity-light)}.esri-slider--reversed.esri-slider--horizontal{flex-direction:row-reverse}.esri-slider--reversed.esri-slider--vertical{flex-direction:column}.esri-slider--horizontal{flex-direction:row}.esri-slider--horizontal .esri-slider__content{height:auto}.esri-slider--horizontal .esri-slider__track{width:100%;height:2px}.esri-slider--horizontal .esri-slider__segment--interactive:hover{cursor:ew-resize}.esri-slider--horizontal .esri-slider__anchor{width:1px;height:100%}.esri-slider--horizontal .esri-slider__label{text-align:center;margin:0 11px;top:-30px;left:-50px}.esri-slider--horizontal .esri-slider__label-input{text-align:center}.esri-slider--horizontal .esri-slider__max,.esri-slider--horizontal .esri-slider__min{flex:none;width:50px;height:auto;margin:auto}.esri-slider--horizontal .esri-slider__ticks{width:100%;margin:9px 0 0;top:100%;left:0}.esri-slider--horizontal .esri-slider__tick{width:1px;height:5px}.esri-slider--horizontal .esri-slider__tick-label{margin-top:18px}.esri-slider--vertical{flex-direction:column-reverse}.esri-slider--vertical .esri-slider__content{flex-direction:column;width:auto}.esri-slider--vertical .esri-slider__track{flex-direction:column;flex:1 0 0;width:2px;height:100%}.esri-slider--vertical .esri-slider__segment--interactive:hover{cursor:ns-resize}.esri-slider--vertical .esri-slider__anchor{width:100%;height:1px}.esri-slider--vertical .esri-slider__label{text-align:left;top:-10px;left:20px}.esri-slider--vertical .esri-slider__max,.esri-slider--vertical .esri-slider__min{flex:0 0 22px;width:100%;margin:auto}.esri-slider--vertical .esri-slider__ticks{margin:0 0 0 11px;top:0;left:100%}.esri-slider--vertical .esri-slider__tick{width:5px;height:1px}.esri-slider--vertical .esri-slider__tick-label{margin-left:30px}.esri-slider__content{z-index:0;flex:1 0 auto;justify-content:center;align-items:center;margin:auto;line-height:0;display:flex;position:relative}.esri-slider__track{touch-action:none;background-color:var(--calcite-color-border-ghost);display:inline-block;position:relative}.esri-slider__segment{transform-origin:0 0;will-change:transform;touch-action:none;width:100%;height:100%;position:absolute;top:0;left:0}.esri-slider__segment:hover{cursor:pointer}.esri-slider__anchor{touch-action:none;-webkit-user-select:none;user-select:none;background-color:var(--calcite-color-brand);position:absolute}.esri-slider__anchor:focus .esri-slider__thumb,.esri-slider__anchor:focus .esri-slider__label{outline:inherit}.esri-slider__anchor--moving:focus .esri-slider__thumb{cursor:grabbing;border:3px solid var(--calcite-color-brand-press)}.esri-slider__anchor--moving .esri-slider__label:hover,.esri-slider__anchor--moving .esri-slider__label--interactive:hover{cursor:grabbing}.esri-slider__thumb{box-sizing:border-box;z-index:1;touch-action:none;background-color:var(--calcite-color-foreground-2);border:2px solid var(--calcite-color-brand);border-radius:16px;width:16px;height:16px;transition:all .125s ease-in-out;position:absolute;top:-7px;left:-7px}.esri-slider__thumb:hover{cursor:grab;border-width:3px;border-color:var(--calcite-color-brand-press);width:19.2px;height:19.2px;top:-8.6px;left:-8.6px}.esri-slider__label{min-width:80px;line-height:var(--calcite-font-line-height-fixed-xl);position:absolute}.esri-slider__label:hover{cursor:grab}.esri-slider__label--interactive:hover,.esri-slider__max--interactive:hover,.esri-slider__min--interactive:hover{cursor:pointer;text-decoration:underline}.esri-slider__label-input{z-index:1;width:100%;position:relative}.esri-slider__extra-content{display:inline-block}.esri-slider__max,.esri-slider__min{text-align:center;justify-content:center;align-items:center;height:22px;line-height:var(--calcite-font-line-height-fixed-xl);display:flex}.esri-slider__max--interactive:hover,.esri-slider__min--interactive:hover{background-color:var(--calcite-color-foreground-2)}.esri-slider__range-input{text-align:center;width:100%;padding:1px 0}.esri-slider__ticks{z-index:0;height:100%;display:inline-block;position:absolute}.esri-slider__tick{background:var(--calcite-color-foreground-1);position:absolute}.esri-slider__tick-label{width:max-content;position:absolute}:dir(rtl) .esri-slider__label,:dir(rtl) .esri-slider__max,:dir(rtl) .esri-slider__min,:dir(rtl) .esri-slider__tick-label{direction:rtl;unicode-bidi:plaintext}:dir(rtl) .esri-slider__range-input,:dir(rtl) .esri-slider__label-input{unicode-bidi:plaintext}.esri-histogram{direction:ltr;width:100%;height:100%}.esri-histogram__content{width:100%;height:100%}.esri-histogram__svg{width:100%;height:100%;display:inline-block;overflow:hidden}.esri-histogram__data-line{stroke:var(--calcite-color-text-3);stroke-width:1px;shape-rendering:crispEdges}.esri-histogram__label{stroke:var(--calcite-color-text-1);stroke-width:0;direction:ltr;unicode-bidi:plaintext;font-size:var(--calcite-font-size-sm)}.esri-histogram__average-data-line{stroke:var(--calcite-color-text-3)}.esri-histogram__average-symbol{font-family:Georgia\\, serif,sans-serif;font-style:italic}.esri-expand__panel-content .esri-histogram{width:100%}:dir(rtl) .esri-histogram{direction:rtl}:dir(rtl) .esri-histogram .esri-histogram__average-label{direction:rtl;unicode-bidi:plaintext}:host{min-width:260px}.esri-color-size-slider{direction:ltr}.esri-color-size-slider .esri-slider{z-index:1;font-size:var(--calcite-font-size-sm);position:relative}.esri-color-size-slider .esri-slider .esri-slider__content{flex-direction:row;height:240px;margin:0 auto 0 40%}.esri-color-size-slider .esri-slider .esri-slider__track{background-color:var(--calcite-color-transparent);flex:none;display:flex}.esri-color-size-slider .esri-slider .esri-slider__anchor{border-top:1px solid var(--calcite-color-foreground-1);border-bottom:1px solid var(--calcite-color-text-3);width:30px}.esri-color-size-slider .esri-slider .esri-slider__anchor:hover .esri-slider__label,.esri-color-size-slider .esri-slider .esri-slider__anchor:focus .esri-slider__label{text-decoration:underline}.esri-color-size-slider .esri-slider .esri-slider__anchor:hover .esri-slider__thumb,.esri-color-size-slider .esri-slider .esri-slider__anchor:focus .esri-slider__thumb{background-color:var(--calcite-color-inverse-press);border:none;transform:none}.esri-color-size-slider .esri-slider .esri-slider__anchor:hover .esri-slider__thumb:after,.esri-color-size-slider .esri-slider .esri-slider__anchor:focus .esri-slider__thumb:after{border-left-color:var(--calcite-color-inverse-press)}.esri-color-size-slider .esri-slider .esri-slider__anchor:hover .esri-slider__thumb:before,.esri-color-size-slider .esri-slider .esri-slider__anchor:focus .esri-slider__thumb:before{background-color:var(--calcite-color-brand);transform:translate(-1.5px)}.esri-color-size-slider .esri-slider .esri-slider__thumb{background-color:var(--calcite-color-text-3);border:none;border-radius:0;width:6px;height:12px;top:-6px;left:-12px}.esri-color-size-slider .esri-slider .esri-slider__thumb:before{content:"";background-color:var(--calcite-color-text-3);width:3px;height:12px;transition:transform .125s ease-in-out,background-color .125s ease-in-out;position:absolute;top:0;left:-1.5px}.esri-color-size-slider .esri-slider .esri-slider__thumb:after{content:"";border-top:6px solid var(--calcite-color-transparent);border-bottom:6px solid var(--calcite-color-transparent);border-left:6px solid var(--calcite-color-text-3);width:0;height:0;position:absolute;top:0;left:6px}.esri-color-size-slider .esri-slider .esri-slider__label{text-align:right;min-width:50px;line-height:20px;left:auto;right:50px}.esri-color-size-slider .esri-slider .esri-slider__label:hover{background-color:var(--calcite-color-foreground-2)}.esri-color-size-slider .esri-slider .esri-slider__segment:hover{cursor:default}.esri-color-size-slider .esri-slider .esri-slider__range-input{text-align:center;width:50%;margin:auto}.esri-color-size-slider .esri-slider .esri-slider__label-input{text-align:right;width:70px}.esri-color-size-slider .esri-slider .esri-slider__max,.esri-color-size-slider .esri-slider .esri-slider__min{z-index:0;flex:none;width:auto;margin:9px auto;padding:9px 12px;position:relative}.esri-color-size-slider .esri-slider .esri-slider__max:before,.esri-color-size-slider .esri-slider .esri-slider__min:before{z-index:-1;content:"";width:100%;height:100%;position:absolute;top:0;left:0}.esri-color-size-slider .esri-slider .esri-slider__max.esri-slider__range--active,.esri-color-size-slider .esri-slider .esri-slider__min.esri-slider__range--active{background-color:var(--calcite-color-foreground-1)}.esri-color-size-slider .esri-slider .esri-slider__max .esri-slider__range-input,.esri-color-size-slider .esri-slider .esri-slider__min .esri-slider__range-input{margin:0 auto}.esri-color-size-slider .esri-slider .esri-slider__extra-content{height:100%;display:flex}.esri-color-size-slider .esri-slider .esri-histogram__svg{overflow:visible}.esri-color-size-slider .esri-slider .esri-histogram__label{fill:var(--calcite-color-text-2);stroke-width:2px}.esri-color-size-slider .esri-slider .esri-histogram__average-line,.esri-color-size-slider .esri-slider .esri-histogram__label{paint-order:stroke;stroke:var(--calcite-color-border-3)}.esri-color-size-slider .esri-slider .zoom-cap--max{position:absolute;top:0}.esri-color-size-slider .esri-slider .zoom-cap--min{position:absolute;bottom:0}.esri-color-size-slider .esri-slider .zoom-cap{stroke-width:0;width:30px;height:11px}.esri-color-size-slider .esri-slider .zoom-cap:hover{cursor:pointer}.esri-color-size-slider .esri-slider .zoom-cap:hover .zoom-cap--mask{fill:var(--calcite-color-foreground-1)}.esri-color-size-slider .esri-slider .zoom-cap:hover .zoom-cap--line{fill:var(--calcite-color-brand)}.esri-color-size-slider .esri-slider .zoom-cap:hover .zoom-cap--underline,.esri-color-size-slider .esri-slider .zoom-cap .zoom-cap--mask,.esri-color-size-slider .esri-slider .zoom-cap .zoom-cap--line{fill:var(--calcite-color-foreground-1)}.esri-color-size-slider .esri-slider .zoom-cap .zoom-cap--underline{fill:var(--calcite-color-inverse)}.esri-color-size-slider__ramp{width:30px;height:100%;display:flex;position:relative}.esri-color-size-slider__ramp svg{stroke:var(--calcite-color-text-3);stroke-width:1px;width:100%;height:100%;position:absolute;left:0}.esri-color-size-slider__ramp svg rect{width:100%;height:100%}.esri-color-size-slider__ramp svg path{stroke-width:.5px}.esri-color-size-slider__histogram-container{flex:1 1 0;width:120px;height:100%;display:flex}.esri-color-size-slider.esri-color-size-slider--interactive-track .esri-slider .esri-slider__content{margin:0 auto 0 35%}.esri-color-size-slider.esri-color-size-slider--interactive-track .esri-slider .esri-slider__track{background-color:var(--calcite-color-transparent);width:12px}.esri-color-size-slider.esri-color-size-slider--interactive-track .esri-slider__anchor--active .esri-slider__label{text-decoration:underline}.esri-color-size-slider.esri-color-size-slider--interactive-track .esri-slider__anchor--active .esri-slider__thumb{background-color:var(--calcite-color-inverse-press);border:none;transform:none}.esri-color-size-slider.esri-color-size-slider--interactive-track .esri-slider__anchor--active .esri-slider__thumb:after{border-left-color:var(--calcite-color-inverse-press)}.esri-color-size-slider.esri-color-size-slider--interactive-track .esri-slider__anchor--active .esri-slider__thumb:before{background-color:var(--calcite-color-brand);transform:translate(-1.5px)}`, h = s(o);
+class _ extends l {
+  constructor() {
+    super(...arguments), this.widget = h(this), this.viewModel = this.widget.viewModel, this.label = this.widget.label, this.autoDestroyDisabled = !1, this.handlesSyncedToPrimary = this.widget.handlesSyncedToPrimary, this.histogramConfig = this.widget.histogramConfig, this.icon = this.widget.icon, this.inputFormatFunction = this.widget.inputFormatFunction, this.inputParseFunction = this.widget.inputParseFunction, this.labelFormatFunction = this.widget.labelFormatFunction, this.max = this.widget.max, this.min = this.widget.min, this.persistSizeRangeEnabled = this.widget.persistSizeRangeEnabled, this.precision = this.widget.precision, this.primaryHandleEnabled = this.widget.primaryHandleEnabled, this.state = this.widget.state, this.stops = this.widget.stops, this.zoomOptions = this.widget.zoomOptions, this.arcgisPropertyChange = d()("histogramConfig", "max", "min", "precision", "state", "stops", "zoomOptions"), this.arcgisReady = a(), this.arcgisThumbChange = i(() => this.widget, "thumb-change"), this.arcgisThumbDrag = i(() => this.widget, "thumb-drag");
+  }
+  static {
+    this.properties = { label: 16, autoDestroyDisabled: 5, handlesSyncedToPrimary: 5, histogramConfig: 0, icon: 1, inputFormatFunction: 0, inputParseFunction: 0, labelFormatFunction: 0, max: 9, min: 9, persistSizeRangeEnabled: 5, precision: 9, primaryHandleEnabled: 5, referenceElement: 1, state: 32, stops: 0, zoomOptions: 0 };
+  }
+  static {
+    this.styles = c;
+  }
+  async destroy() {
+    await this.manager.destroy();
+  }
+  async updateFromRendererResult(e, r) {
+    return this.widget.updateFromRendererResult(e, r);
+  }
+  updateVisualVariables(e) {
+    return this.widget.updateVisualVariables(e);
+  }
+}
+t("arcgis-slider-color-size-legacy", _);
+export {
+  _ as ArcgisSliderColorSizeLegacy
+};

package/dist/components/arcgis-slider-color-size-legacy/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-slider-color-size-legacy/index.js

@@ -0,0 +1 @@
+export * from "./customElement.js";