@geoscene/map-components 4.34.9 → 5.0.19

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

@@ -0,0 +1,418 @@
+/// <reference path="../../index.d.ts" />
+import type ClassBreaksRenderer from "@geoscene/core/renderers/ClassBreaksRenderer.js";
+import type SizeStop from "@geoscene/core/renderers/visualVariables/support/SizeStop.js";
+import type { PublicLitElement as LitElement } from "@geoscene/lumina";
+import type { RendererResult } from "@geoscene/core/smartMapping/renderers/univariateColorSize.js";
+import type { HistogramResult } from "@geoscene/core/smartMapping/statistics/types.js";
+import type { GeosceneReferenceElement, IconName } from "../types.js";
+import type { ThumbDragEvent, ThumbChangeEvent } from "@geoscene/core/widgets/Slider/types.js";
+import type { HistogramConfig, ZoomOptions } from "@geoscene/core/widgets/smartMapping/types.js";
+import type { LabelFormatFunction, InputParseFunction } from "@geoscene/core/widgets/types.js";
+import type { BinaryColorSizeSliderStyle } from "@geoscene/core/widgets/smartMapping/BinaryColorSizeSlider.js";
+import type { SmartMappingSliderBaseState } from "@geoscene/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 Binary Color Size Slider component is intended for authoring and exploring diverging data-driven visualizations in any
+ * layer that can be rendered with an above and below theme for a [SizeVariable](https://doc.geoscene.cn/javascript/5.0/references/core/renderers/visualVariables/SizeVariable/).
+ *
+ * The [updateFromRendererResult()](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/smartMapping/BinaryColorSizeSlider/#fromRendererResult)
+ * method can be used to intelligently populate slider properties including [max](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-slider-binary-color-size-legacy/#max), [min](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-slider-binary-color-size-legacy/#min), [size visual variable](https://doc.geoscene.cn/javascript/5.0/references/core/renderers/visualVariables/SizeVariable/)
+ * configuration, and the slider's histogram after the renderer has been created from the result of the
+ * [createContinuousRenderer()](https://doc.geoscene.cn/javascript/5.0/references/core/smartMapping/renderers/univariateColorSize/#createContinuousRenderer) method.
+ *
+ * ```js
+ * const univariateColorSizeRendererCreator = await import(
+ *   "@geoscene/core/smartMapping/renderers/univariateColorSize.js"
+ * );
+ * const viewElement = document.querySelector("geoscene-map")!;
+ * const binaryColorSizeSlider = document.querySelector("geoscene-slider-binary-color-size-legacy");
+ *
+ * const featureLayer = new FeatureLayer({
+ *   url: "https://services.geoscene.cn/P3ePLMYs2RVChkJx/geoscene/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,
+ *   theme: "above-and-below",
+ * };
+ *
+ * const rendererResult = await univariateColorSizeRendererCreator.createContinuousRenderer(params);
+ *
+ * featureLayer.renderer = rendererResult.renderer;
+ *
+ * const histogramResult = await histogram({
+ *   ...params,
+ *   numBins: 30,
+ * });
+ *
+ * await binaryColorSizeSlider?.updateFromRendererResult(rendererResult, histogramResult);
+ * ```
+ *
+ * This slider should be used to update an above and below (diverging) visualization in a layer's renderer.
+ * It is the responsibility of the app developer to set up event listeners on that update the size variable of the appropriate renderer.
+ *
+ * ```js
+ * const updateRendererFromSlider = async () => {
+ *   const result = await binaryColorSizeSlider.updateRenderer(featureLayer.renderer);
+ *   featureLayer.renderer = result;
+ * };
+ *
+ * binaryColorSizeSlider.addEventListener("geosceneThumbChange", updateRendererFromSlider);
+ * binaryColorSizeSlider.addEventListener("geosceneThumbDrag", updateRendererFromSlider);
+ * binaryColorSizeSlider.addEventListener("geoscenePropertyChange", updateRendererFromSlider);
+ * ```
+ *
+ * @since 5.0
+ * @see [univariateColorSizeRendererCreator](https://doc.geoscene.cn/javascript/5.0/references/core/smartMapping/renderers/univariateColorSize/)
+ */
+export abstract class GeosceneSliderBinaryColorSizeLegacy 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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-slider-binary-color-size-legacy/#destroy) method when you are done to
+   * prevent memory leaks.
+   *
+   * @default false
+   */
+  accessor autoDestroyDisabled: boolean;
+  /**
+   * 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
+   * @example
+   * ```js
+   * // enables the primary handles and syncs it with the others
+   * binaryColorSizeSlider.handlesSyncedToPrimary = true;
+   * ```
+   */
+  accessor handlesSyncedToPrimary: boolean;
+  /**
+   * The histogram associated with the data represented on the slider. The bins are typically
+   * generated using the [histogram](https://doc.geoscene.cn/javascript/5.0/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://doc.geoscene.cn/javascript/5.0/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://doc.geoscene.cn/calcite-design-system/icons/)
+   */
+  accessor icon: IconName;
+  /**
+   * A function used to format user inputs. As opposed to [labelFormatFunction](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-slider-binary-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://doc.geoscene.cn/javascript/5.0/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://doc.geoscene.cn/javascript/5.0/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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-slider-binary-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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-slider-binary-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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-slider-binary-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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-slider-binary-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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-slider-binary-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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-slider-binary-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 size variable of the appropriate renderer.
+   *
+   * @example
+   * ```js
+   * binaryColorSizeSlider.max = 150;
+   * ```
+   */
+  accessor max: number;
+  /**
+   * The minimum value or lower bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-slider-binary-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 size variable of the appropriate renderer.
+   *
+   * @example
+   * ```js
+   * binaryColorSizeSlider.min = -150;
+   * ```
+   */
+  accessor min: number;
+  /**
+   * 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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-slider-binary-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
+   * @example
+   * ```js
+   * binaryColorSizeSlider.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;
+  /**
+   * 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://doc.geoscene.cn/javascript/5.0/programming-patterns/#associate-components-with-a-map-or-scene-component)
+   */
+  accessor referenceElement: GeosceneReferenceElement | string | undefined;
+  /**
+   * Exposes various properties of the widget that can be styled. The result object from the [createContinuousRenderer()](https://doc.geoscene.cn/javascript/5.0/references/core/smartMapping/renderers/univariateColorSize/#createContinuousRenderer)
+   * method can be used to match the `trackBelowFillColor` and `trackAboveFillColor` to the current layer symbology.
+   *
+   * @example
+   * ```js
+   * binaryColorSizeSlider.sliderStyle = {
+   *   trackAboveFillColor: rendererResult.renderer.classBreakInfos[1].symbol.color ?? new Color([149, 149, 149]),
+   *   trackBackgroundColor: new Color([224, 224, 224]),
+   *   trackBelowFillColor: rendererResult.renderer.classBreakInfos[0].symbol.color ?? new Color([149, 149, 149]),
+   * };
+   * ```
+   */
+  accessor sliderStyle: BinaryColorSizeSliderStyle;
+  /** The current state of the component. */
+  get state(): SmartMappingSliderBaseState;
+  /**
+   * The size stops from the [SizeVariable](https://doc.geoscene.cn/javascript/5.0/references/core/renderers/visualVariables/SizeVariable/)
+   * to link to the slider. You must provide either three or five stops. The minimum size
+   * should be represented in the size property of the middle stop. The maximum size should be represented in either first or last stops.
+   *
+   * @example
+   * ```js
+   * binaryColorSizeSlider.stops = [
+   *   { value: 8, size: 7 },
+   *   { value: 15, size: 3 },
+   *   { value: 40, size: 17 },
+   *   { value: 64, size: 30 }
+   * ];
+   * ```
+   */
+  accessor stops: Array<SizeStop>;
+  /**
+   * Zooms the slider track to the bounds provided in this property. When min and/or max zoom values are provided, the absolute [min](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-slider-binary-color-size-legacy/#min) and
+   * [max](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-slider-binary-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://doc.geoscene.cn/javascript/5.0/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://doc.geoscene.cn/javascript/5.0/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 Binary Color Size Slider component instance from the
+   * [result](https://doc.geoscene.cn/javascript/5.0/references/core/smartMapping/renderers/univariateColorSize/#RendererResult) of
+   * the [createContinuousRenderer()](https://doc.geoscene.cn/javascript/5.0/references/core/smartMapping/renderers/univariateColorSize/#createContinuousRenderer)
+   * method. This method is useful for cases when the app allows the end user to switch data variables used to render the data.
+   * 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://doc.geoscene.cn/javascript/5.0/references/core/smartMapping/renderers/univariateColorSize/#createContinuousRenderer)
+   *   method.
+   * @param histogramResult - The result histogram object from the [histogram()](https://doc.geoscene.cn/javascript/5.0/references/core/smartMapping/statistics/histogram/#histogram)
+   *   method.
+   * @example
+   * ```js
+   * const rendererResult = await univariateColorSizeRendererCreator.createContinuousRenderer(params);
+   *
+   * featureLayer.renderer = rendererResult.renderer;
+   *
+   * const histogramResult = await histogram({
+   *   ...params,
+   *   numBins: 30,
+   * });
+   *
+   * await binaryColorSizeSlider?.updateFromRendererResult(rendererResult, histogramResult)
+   * ```
+   */
+  updateFromRendererResult(rendererResult: RendererResult, histogramResult?: HistogramResult): Promise<void>;
+  /**
+   * A convenience function used to update the input renderer based on
+   * the values of the slider [stops](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/smartMapping/BinaryColorSizeSlider/#stops).
+   *
+   * @param renderer - The renderer to update from the slider values.
+   * @returns Returns the updated renderer.
+   * @example
+   * ```js
+   * const updatedRenderer = await binaryColorSizeSlider.updateRenderer(featureLayer.renderer as ClassBreaksRenderer);
+   * featureLayer.renderer = updatedRenderer;
+   * ```
+   */
+  updateRenderer(renderer: ClassBreaksRenderer): Promise<ClassBreaksRenderer | null | undefined>;
+  /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
+  readonly geoscenePropertyChange: import("@geoscene/lumina").TargetedEvent<this, { name: "histogramConfig" | "max" | "min" | "precision" | "sliderStyle" | "state" | "zoomOptions"; }>;
+  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  readonly geosceneReady: import("@geoscene/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 geosceneThumbChange: import("@geoscene/lumina").TargetedEvent<this, ThumbChangeEvent>;
+  /** Fires when a user drags a thumb on the component. */
+  readonly geosceneThumbDrag: import("@geoscene/lumina").TargetedEvent<this, ThumbDragEvent>;
+  readonly "@eventTypes": {
+    geoscenePropertyChange: GeosceneSliderBinaryColorSizeLegacy["geoscenePropertyChange"]["detail"];
+    geosceneReady: GeosceneSliderBinaryColorSizeLegacy["geosceneReady"]["detail"];
+    geosceneThumbChange: GeosceneSliderBinaryColorSizeLegacy["geosceneThumbChange"]["detail"];
+    geosceneThumbDrag: GeosceneSliderBinaryColorSizeLegacy["geosceneThumbDrag"]["detail"];
+  };
+}

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

@@ -0,0 +1,33 @@
+/* COPYRIGHT GeoScene - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as t } from "../../chunks/runtime.js";
+import o from "@geoscene/core/widgets/smartMapping/BinaryColorSizeSlider.js";
+import { m as s } from "../../chunks/useWidget.js";
+import { LitElement as l, createEvent as a } from "@geoscene/lumina";
+import { usePropertyChange as n } from "@geoscene/lumina/controllers";
+import { css as d } from "lit";
+import { reEmitEvent as i } from "@geoscene/lumina/controllers/accessor";
+const c = d`.geoscene-widget__heading{color:var(--calcite-color-text-2);margin:0 0 .5rem;font-weight:var(--calcite-font-weight-semibold)}h1.geoscene-widget__heading{font-size:var(--calcite-font-size-xl)}h2.geoscene-widget__heading{font-size:var(--calcite-font-size-md)}h3.geoscene-widget__heading,h4.geoscene-widget__heading,h5.geoscene-widget__heading,h6.geoscene-widget__heading{font-size:var(--calcite-font-size)}.geoscene-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)}.geoscene-widget *,.geoscene-widget :before,.geoscene-widget :after{box-sizing:inherit}.geoscene-widget.geoscene-widget--disabled>*{opacity:.4;pointer-events:none}.geoscene-widget.geoscene-widget--compact{--geoscene-widget-padding-y: 0;--geoscene-widget-padding-x: 0}.geoscene-widget__anchor{color:var(--calcite-color-text-2)}.geoscene-widget__anchor:hover{color:var(--calcite-color-text-3)}.geoscene-widget__anchor:hover,.geoscene-widget__anchor:focus{text-decoration:underline}.geoscene-widget__anchor--disabled{opacity:.4;pointer-events:none}.geoscene-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}.geoscene-widget__heading{word-break:break-word}.geoscene-widget__header .geoscene-widget__heading{width:calc(100% - 48px);text-align:initial;color:var(--calcite-color-text-1);align-items:center;margin:0;padding:0;display:flex}.geoscene-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}.geoscene-widget__footer{background-color:var(--calcite-color-foreground-1);justify-content:center;align-items:center;width:100%;min-height:48px;display:flex}.geoscene-widget__footer-pagination{color:var(--calcite-color-text-2);justify-content:space-between;align-items:center;display:flex}.geoscene-widget__footer-pagination-previous-button,.geoscene-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}.geoscene-widget__footer-pagination-previous-button:hover,.geoscene-widget__footer-pagination-previous-button:focus,.geoscene-widget__footer-pagination-next-button:hover,.geoscene-widget__footer-pagination-next-button:focus{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-1)}.geoscene-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}.geoscene-menu .geoscene-menu__header{color:var(--calcite-color-text-inverse);background-color:var(--calcite-color-inverse);padding:6px 12px}.geoscene-menu__list{margin:0;padding:0;list-style:none}.geoscene-menu__list-item{cursor:pointer;border-top:1px solid #adadad4d;border-left:3px solid #0000;padding:.8em 1em}.geoscene-menu__list-item [class^=geoscene-icon-],.geoscene-menu__list-item [class*=" geoscene-icon-"]{padding-right:2.8px}.geoscene-menu__list-item:first-child{border-top:none}.geoscene-menu__list-item--focus,.geoscene-menu__list-item:hover,.geoscene-menu__list-item:focus{background-color:var(--calcite-color-foreground-1)}.geoscene-menu__list-item:active{background-color:var(--calcite-color-foreground-current)}.geoscene-menu__list-item--active,.geoscene-menu__list-item--active:hover,.geoscene-menu__list-item--active:focus{background-color:var(--calcite-color-foreground-1);border-left-color:var(--calcite-color-brand)}.geoscene-widget__table{border-collapse:collapse;color:var(--calcite-color-text-1);border:none;width:100%;line-height:var(--calcite-font-line-height-relative-tight)}.geoscene-widget__table tr:nth-child(odd){background-color:var(--calcite-color-transparent)}.geoscene-widget__table tr:nth-child(2n){background-color:var(--calcite-color-transparent-press)}.geoscene-widget__table tr a{color:var(--calcite-color-text-2)}.geoscene-widget__table tr a:hover,.geoscene-widget__table tr a:focus{color:var(--calcite-color-text-1)}.geoscene-widget__table tr td,.geoscene-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)}.geoscene-widget__table tr th{text-align:left;border-right:3px solid #0000000d;width:50%}.geoscene-widget__table tr td{width:50%}.geoscene-input{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-1);border:1px solid #959595;font-size:var(--calcite-font-size)}.geoscene-input::-ms-clear{display:none}.geoscene-input::placeholder{opacity:1;color:var(--calcite-color-text-2)}.geoscene-input:placeholder-shown{text-overflow:ellipsis}.geoscene-input[type=text],.geoscene-input[type=password],.geoscene-input[type=number]{height:32px;padding:0 .5em}calcite-combobox.geoscene-input{border:none}.geoscene-widget__content--empty{text-align:center;color:var(--calcite-color-border-input);flex-flow:column wrap;align-items:center;padding:18px 22px;display:flex}.geoscene-widget__content--empty h1.geoscene-widget__heading,.geoscene-widget__content--empty h2.geoscene-widget__heading,.geoscene-widget__content--empty h3.geoscene-widget__heading,.geoscene-widget__content--empty h4.geoscene-widget__heading,.geoscene-widget__content--empty h5.geoscene-widget__heading{font-weight:var(--calcite-font-weight-regular)}.geoscene-widget__content-illustration--empty{width:128px;padding:1rem 0}.geoscene-widget__content-icon--empty{width:32px;padding:.5rem 0}.geoscene-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}.geoscene-select[disabled]{cursor:auto}.geoscene-select::-ms-expand{display:none}.geoscene-disabled a,.geoscene-disabled [role=menu],.geoscene-disabled [role=checkbox],.geoscene-disabled [class^=geoscene-icon-],.geoscene-disabled [class*=" geoscene-icon-"]{color:var(--calcite-color-text-3)}.keynav-mode .geoscene-widget:focus,.keynav-mode .geoscene-widget :focus{z-index:1;outline-offset:2px;outline:2px solid #adadad}.geoscene-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 geoscene-rotate;display:block;transform:translateZ(0)}:dir(rtl) .geoscene-widget__table th{text-align:right;border-left:3px solid #0000000d;border-right:none}:dir(rtl) .geoscene-select{background-position:0}:dir(rtl) .geoscene-menu__list-item{border-left:none;border-right:3px solid #0000}:dir(rtl) .geoscene-menu__list-item [class^=geoscene-icon-],:dir(rtl) .geoscene-menu__list-item [class*=" geoscene-icon-"]{padding-left:2px;padding-right:0}:dir(rtl) .geoscene-menu__list-item--active{border-right-color:var(--calcite-color-brand)}.geoscene-icon-font-fallback-text{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.geoscene-rotating{animation:1.25s linear infinite geoscene-rotate;transform:translateZ(0)}.geoscene-clearfix:before,.geoscene-clearfix:after{content:" ";display:table}.geoscene-clearfix:after{clear:both}.geoscene-interactive{cursor:pointer}.geoscene-hidden{display:none!important}.geoscene-invisible{visibility:hidden!important}.geoscene-offscreen{position:absolute;top:-999em;left:-999em}.geoscene-match-height{flex-direction:column;flex:auto;display:flex;overflow:hidden}@supports (-ms-ime-align: auto){.geoscene-slider__anchor:focus{outline:1px dotted var(--calcite-color-foreground-current)}}.geoscene-slider{-webkit-user-select:none;user-select:none;direction:ltr;width:100%;height:100%;display:flex}.geoscene-disabled{pointer-events:none}.geoscene-disabled .geoscene-slider__content,.geoscene-disabled .geoscene-slider__min,.geoscene-disabled .geoscene-slider__max{opacity:var(--calcite-opacity-light)}.geoscene-slider--reversed.geoscene-slider--horizontal{flex-direction:row-reverse}.geoscene-slider--reversed.geoscene-slider--vertical{flex-direction:column}.geoscene-slider--horizontal{flex-direction:row}.geoscene-slider--horizontal .geoscene-slider__content{height:auto}.geoscene-slider--horizontal .geoscene-slider__track{width:100%;height:2px}.geoscene-slider--horizontal .geoscene-slider__segment--interactive:hover{cursor:ew-resize}.geoscene-slider--horizontal .geoscene-slider__anchor{width:1px;height:100%}.geoscene-slider--horizontal .geoscene-slider__label{text-align:center;margin:0 11px;top:-30px;left:-50px}.geoscene-slider--horizontal .geoscene-slider__label-input{text-align:center}.geoscene-slider--horizontal .geoscene-slider__max,.geoscene-slider--horizontal .geoscene-slider__min{flex:none;width:50px;height:auto;margin:auto}.geoscene-slider--horizontal .geoscene-slider__ticks{width:100%;margin:9px 0 0;top:100%;left:0}.geoscene-slider--horizontal .geoscene-slider__tick{width:1px;height:5px}.geoscene-slider--horizontal .geoscene-slider__tick-label{margin-top:18px}.geoscene-slider--vertical{flex-direction:column-reverse}.geoscene-slider--vertical .geoscene-slider__content{flex-direction:column;width:auto}.geoscene-slider--vertical .geoscene-slider__track{flex-direction:column;flex:1 0 0;width:2px;height:100%}.geoscene-slider--vertical .geoscene-slider__segment--interactive:hover{cursor:ns-resize}.geoscene-slider--vertical .geoscene-slider__anchor{width:100%;height:1px}.geoscene-slider--vertical .geoscene-slider__label{text-align:left;top:-10px;left:20px}.geoscene-slider--vertical .geoscene-slider__max,.geoscene-slider--vertical .geoscene-slider__min{flex:0 0 22px;width:100%;margin:auto}.geoscene-slider--vertical .geoscene-slider__ticks{margin:0 0 0 11px;top:0;left:100%}.geoscene-slider--vertical .geoscene-slider__tick{width:5px;height:1px}.geoscene-slider--vertical .geoscene-slider__tick-label{margin-left:30px}.geoscene-slider__content{z-index:0;flex:1 0 auto;justify-content:center;align-items:center;margin:auto;line-height:0;display:flex;position:relative}.geoscene-slider__track{touch-action:none;background-color:var(--calcite-color-border-ghost);display:inline-block;position:relative}.geoscene-slider__segment{transform-origin:0 0;will-change:transform;touch-action:none;width:100%;height:100%;position:absolute;top:0;left:0}.geoscene-slider__segment:hover{cursor:pointer}.geoscene-slider__anchor{touch-action:none;-webkit-user-select:none;user-select:none;background-color:var(--calcite-color-brand);position:absolute}.geoscene-slider__anchor:focus .geoscene-slider__thumb,.geoscene-slider__anchor:focus .geoscene-slider__label{outline:inherit}.geoscene-slider__anchor--moving:focus .geoscene-slider__thumb{cursor:grabbing;border:3px solid var(--calcite-color-brand-press)}.geoscene-slider__anchor--moving .geoscene-slider__label:hover,.geoscene-slider__anchor--moving .geoscene-slider__label--interactive:hover{cursor:grabbing}.geoscene-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}.geoscene-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}.geoscene-slider__label{min-width:80px;line-height:var(--calcite-font-line-height-fixed-xl);position:absolute}.geoscene-slider__label:hover{cursor:grab}.geoscene-slider__label--interactive:hover,.geoscene-slider__max--interactive:hover,.geoscene-slider__min--interactive:hover{cursor:pointer;text-decoration:underline}.geoscene-slider__label-input{z-index:1;width:100%;position:relative}.geoscene-slider__extra-content{display:inline-block}.geoscene-slider__max,.geoscene-slider__min{text-align:center;justify-content:center;align-items:center;height:22px;line-height:var(--calcite-font-line-height-fixed-xl);display:flex}.geoscene-slider__max--interactive:hover,.geoscene-slider__min--interactive:hover{background-color:var(--calcite-color-foreground-2)}.geoscene-slider__range-input{text-align:center;width:100%;padding:1px 0}.geoscene-slider__ticks{z-index:0;height:100%;display:inline-block;position:absolute}.geoscene-slider__tick{background:var(--calcite-color-foreground-1);position:absolute}.geoscene-slider__tick-label{width:max-content;position:absolute}:dir(rtl) .geoscene-slider__label,:dir(rtl) .geoscene-slider__max,:dir(rtl) .geoscene-slider__min,:dir(rtl) .geoscene-slider__tick-label{direction:rtl;unicode-bidi:plaintext}:dir(rtl) .geoscene-slider__range-input,:dir(rtl) .geoscene-slider__label-input{unicode-bidi:plaintext}.geoscene-histogram{direction:ltr;width:100%;height:100%}.geoscene-histogram__content{width:100%;height:100%}.geoscene-histogram__svg{width:100%;height:100%;display:inline-block;overflow:hidden}.geoscene-histogram__data-line{stroke:var(--calcite-color-text-3);stroke-width:1px;shape-rendering:crispEdges}.geoscene-histogram__label{stroke:var(--calcite-color-text-1);stroke-width:0;direction:ltr;unicode-bidi:plaintext;font-size:var(--calcite-font-size-sm)}.geoscene-histogram__average-data-line{stroke:var(--calcite-color-text-3)}.geoscene-histogram__average-symbol{font-family:Georgia\\, serif,sans-serif;font-style:italic}.geoscene-expand__panel-content .geoscene-histogram{width:100%}:dir(rtl) .geoscene-histogram{direction:rtl}:dir(rtl) .geoscene-histogram .geoscene-histogram__average-label{direction:rtl;unicode-bidi:plaintext}:host{min-width:260px}.geoscene-binary-color-size-slider{direction:ltr}.geoscene-binary-color-size-slider .geoscene-slider{z-index:1;font-size:var(--calcite-font-size-sm);position:relative}.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__content{flex-direction:row;height:240px;margin:0 auto 0 40%}.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__track{background-color:var(--calcite-color-transparent);flex:none;display:flex}.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__anchor{border-top:1px solid var(--calcite-color-foreground-1);border-bottom:1px solid var(--calcite-color-text-3);width:30px}.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__anchor:hover .geoscene-slider__label,.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__anchor:focus .geoscene-slider__label{text-decoration:underline}.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__anchor:hover .geoscene-slider__thumb,.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__anchor:focus .geoscene-slider__thumb{background-color:var(--calcite-color-inverse-press);border:none;transform:none}.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__anchor:hover .geoscene-slider__thumb:after,.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__anchor:focus .geoscene-slider__thumb:after{border-left-color:var(--calcite-color-inverse-press)}.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__anchor:hover .geoscene-slider__thumb:before,.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__anchor:focus .geoscene-slider__thumb:before{background-color:var(--calcite-color-brand);transform:translate(-1.5px)}.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__thumb{background-color:var(--calcite-color-text-3);border:none;border-radius:0;width:6px;height:12px;top:-6px;left:-12px}.geoscene-binary-color-size-slider .geoscene-slider .geoscene-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}.geoscene-binary-color-size-slider .geoscene-slider .geoscene-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}.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__label{text-align:right;min-width:50px;line-height:20px;left:auto;right:50px}.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__label:hover{background-color:var(--calcite-color-foreground-2)}.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__segment:hover{cursor:default}.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__range-input{text-align:center;width:50%;margin:auto}.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__label-input{text-align:right;width:70px}.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__max,.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__min{z-index:0;flex:none;width:auto;margin:9px auto;padding:9px 12px;position:relative}.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__max:before,.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__min:before{z-index:-1;content:"";width:100%;height:100%;position:absolute;top:0;left:0}.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__max.geoscene-slider__range--active,.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__min.geoscene-slider__range--active{background-color:var(--calcite-color-foreground-1)}.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__max .geoscene-slider__range-input,.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__min .geoscene-slider__range-input{margin:0 auto}.geoscene-binary-color-size-slider .geoscene-slider .geoscene-slider__extra-content{height:100%;display:flex}.geoscene-binary-color-size-slider .geoscene-slider .geoscene-histogram__svg{overflow:visible}.geoscene-binary-color-size-slider .geoscene-slider .geoscene-histogram__label{fill:var(--calcite-color-text-2);stroke-width:2px}.geoscene-binary-color-size-slider .geoscene-slider .geoscene-histogram__average-line,.geoscene-binary-color-size-slider .geoscene-slider .geoscene-histogram__label{paint-order:stroke;stroke:var(--calcite-color-border-3)}.geoscene-binary-color-size-slider .geoscene-slider .zoom-cap--max{position:absolute;top:0}.geoscene-binary-color-size-slider .geoscene-slider .zoom-cap--min{position:absolute;bottom:0}.geoscene-binary-color-size-slider .geoscene-slider .zoom-cap{stroke-width:0;width:30px;height:11px}.geoscene-binary-color-size-slider .geoscene-slider .zoom-cap:hover{cursor:pointer}.geoscene-binary-color-size-slider .geoscene-slider .zoom-cap:hover .zoom-cap--mask{fill:var(--calcite-color-foreground-1)}.geoscene-binary-color-size-slider .geoscene-slider .zoom-cap:hover .zoom-cap--line{fill:var(--calcite-color-brand)}.geoscene-binary-color-size-slider .geoscene-slider .zoom-cap:hover .zoom-cap--underline,.geoscene-binary-color-size-slider .geoscene-slider .zoom-cap .zoom-cap--mask,.geoscene-binary-color-size-slider .geoscene-slider .zoom-cap .zoom-cap--line{fill:var(--calcite-color-foreground-1)}.geoscene-binary-color-size-slider .geoscene-slider .zoom-cap .zoom-cap--underline{fill:var(--calcite-color-inverse)}.geoscene-binary-color-size-slider__ramp{width:30px;height:100%;display:flex;position:relative}.geoscene-binary-color-size-slider__ramp svg{stroke:var(--calcite-color-text-3);stroke-width:1px;width:100%;height:100%;position:absolute;left:0}.geoscene-binary-color-size-slider__ramp svg rect{width:100%;height:100%}.geoscene-binary-color-size-slider__ramp svg path{stroke-width:.5px}.geoscene-binary-color-size-slider__histogram-container{flex:1 1 0;width:120px;height:100%;display:flex}.geoscene-binary-color-size-slider.geoscene-binary-color-size-slider--interactive-track .geoscene-slider .geoscene-slider__content{margin:0 auto 0 35%}.geoscene-binary-color-size-slider.geoscene-binary-color-size-slider--interactive-track .geoscene-slider .geoscene-slider__track{background-color:var(--calcite-color-transparent);width:12px}.geoscene-binary-color-size-slider.geoscene-binary-color-size-slider--interactive-track .geoscene-slider__anchor--active .geoscene-slider__label{text-decoration:underline}.geoscene-binary-color-size-slider.geoscene-binary-color-size-slider--interactive-track .geoscene-slider__anchor--active .geoscene-slider__thumb{background-color:var(--calcite-color-inverse-press);border:none;transform:none}.geoscene-binary-color-size-slider.geoscene-binary-color-size-slider--interactive-track .geoscene-slider__anchor--active .geoscene-slider__thumb:after{border-left-color:var(--calcite-color-inverse-press)}.geoscene-binary-color-size-slider.geoscene-binary-color-size-slider--interactive-track .geoscene-slider__anchor--active .geoscene-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.sliderStyle = this.widget.style, this.state = this.widget.state, this.stops = this.widget.stops, this.zoomOptions = this.widget.zoomOptions, this.geoscenePropertyChange = n()("histogramConfig", "max", "min", "precision", "sliderStyle", "state", "zoomOptions"), this.geosceneReady = a(), this.geosceneThumbChange = i(() => this.widget, "thumb-change"), this.geosceneThumbDrag = 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, referenceElement: 1, sliderStyle: 0, 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);
+  }
+  async updateRenderer(e) {
+    return this.widget.updateRenderer(e);
+  }
+}
+t("geoscene-slider-binary-color-size-legacy", _);
+export {
+  _ as GeosceneSliderBinaryColorSizeLegacy
+};

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

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