@arcgis/common-components 4.29.0-beta.9 → 5.0.0-next.113

package/dist/components/arcgis-slider/customElement.d.ts

@@ -0,0 +1,288 @@
+/// <reference path="../../index.d.ts" />
+import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { Use } from '@arcgis/lumina/controllers';
+import { PropertyValues } from 'lit';
+import { SliderData } from './SliderData';
+import { StepsInfo } from './stepsUtils';
+
+declare const useSliderData: (component: LitElement & Omit<Pick<SliderData, "max" | "min" | "precision" | "values">, "set" | "declaredClass" | "destroyed" | "initialized" | "addHandles" | "hasHandles" | "removeHandles" | "watch"> & {
+    autoDestroyDisabled: boolean;
+    destroy: () => Promise<void>;
+}) => SliderData;
+/**
+ * [Read more...](https://developers.arcgis.com/javascript/latest/references/common-components/arcgis-slider/)
+ *
+ * @slot [content-start] - A slot for elements before the track.
+ * @slot [content-end] - A slot for elements after the track.
+ * @slot [popover] - A slot for custom content to be rendered in the popover.
+ */
+export declare class ArcgisSlider extends LitElement {
+    /**
+     * The currently active value of the slider.
+     *
+     * It can be:
+     * - `undefined` when no value is active
+     * - a `number` when a single value is active
+     * - `"all"` when the range is active
+     *
+     * Listen to `arcgisActiveValueChange` to be notified when a value becomes active or inactive.
+     *
+     * @see [arcgisActiveValueChange](#arcgisActiveValueChange)
+     */
+    get activeValue(): number | "all" | undefined;
+    /**
+     * When `true`, allows the slider's values to overlap.
+     *
+     * @default false
+     */
+    allowValuesOverlap: boolean;
+    /** @default false */
+    autoDestroyDisabled: boolean;
+    /**
+     * Indicates whether the slider is disabled.
+     *
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Used to define the full range displayed by the slider.
+     *
+     * The full range is visualized by the track while the [min](#min) and [max](#max) defines the subset of allowed values for the thumbs.
+     *
+     * @see [fullRangeMin](#fullRangeMin)
+     * @example
+     * Slider with a full range from 0 to 100, while only allowing thumb values between 25 and 75.
+     * ```html
+     * <arcgis-slider full-range-min="0" full-range-max="100" min="25" max="75" values="50"></arcgis-slider>
+     * ```
+     */
+    fullRangeMax?: number;
+    /**
+     * Used to define the full range displayed by the slider.
+     *
+     * The full range is visualized by the track while the [min](#min) and [max](#max) defines the subset of allowed values for the thumbs.
+     *
+     * @see [fullRangeMax](#fullRangeMax)
+     * @example
+     * Slider with a full range from 0 to 100, while only allowing thumb values between 25 and 75.
+     * ```html
+     * <arcgis-slider full-range-min="0" full-range-max="100" min="25" max="75" values="50"></arcgis-slider>
+     * ```
+     */
+    fullRangeMin?: number;
+    /**
+     * Used to configure where the fill is placed along the slider track in relation to the value handle.
+     *
+     * Range mode will always display the fill between the min and max handles.
+     *
+     * @default "start"
+     */
+    fillPlacement: "end" | "none" | "start";
+    /** When specified, allows users to customize labels. */
+    labelFormatter?: (value: number, type: "max" | "min" | "value", defaultFormatter: (value: number) => string) => nullish | string;
+    /**
+     * Determines the layout/orientation of the Slider widget.
+     *
+     * @default "horizontal"
+     */
+    layout: "horizontal" | "vertical";
+    /**
+     * The maximum possible data/thumb value of the slider.
+     *
+     * To display the `max` value's label on the slider, set [showRangeLabels](#showRangeLabels) to `true`.
+     * To allow the end user to modify the max value, set [rangeLabelsEditingEnabled](#rangeLabelsEditingEnabled) to `true`.
+     *
+     * @see [rangeLabelsEditingEnabled](#rangeLabelsEditingEnabled)
+     * @see [showRangeLabels](#showRangeLabels)
+     */
+    max: number;
+    /**
+     * The minimum possible data/thumb value of the slider.
+     *
+     * To display the `min` value's label on the slider, set [showRangeLabels](#showRangeLabels) to `true`.
+     * To allow the end user to modify the min value, set [rangeLabelsEditingEnabled](#rangeLabelsEditingEnabled) to `true`.
+     *
+     * @see [rangeLabelsEditingEnabled](#rangeLabelsEditingEnabled)
+     * @see [showRangeLabels](#showRangeLabels)
+     */
+    min: number;
+    /**
+     * When `true`, the slider will display values from high to low.
+     *
+     * @default false
+     */
+    mirrored: boolean;
+    /**
+     * The accessible label of the popover.
+     *
+     * @default ""
+     */
+    popoverLabel: HTMLCalcitePopoverElement["label"];
+    /**
+     * Determines the placement of the popover relative to the track.
+     *
+     * @default "leading"
+     */
+    popoverPlacement: "leading" | "trailing";
+    /**
+     * 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.
+     *
+     * This value also indicates the precision of thumb labels when the data range
+     * is less than `10` (i.e. `(max - min) < 10`).
+     *
+     * When the data range is larger than `10`, labels display with a precision of
+     * no more than two decimal places, though actual slider thumb values will maintain the
+     * precision specified in this property.
+     *
+     * For example, given the default precision of `4`, and the following slider configuration,
+     * The labels of the thumbs will display two decimal places, but the precision of the actual
+     * thumb values will not be lost even when the user slides or moves the thumb.
+     *
+     * Keep in mind this property rounds thumb [values](#values) and shouldn't be used exclusively
+     * for formatting purposes. To format thumb `labels`, use the [labelFormatter](#labelFormatter)
+     * property.
+     *
+     * @default 4
+     * @example
+     * // thumb label will display 50.43
+     * // thumb value will maintain precision, so value will remain at 50.4331
+     * ```html
+     * <arcgis-slider min="0" max="100" values="50.4331" precision="4"></arcgis-slider>
+     * ```
+     */
+    precision: number;
+    /**
+     * Indicates whether to enable editing range values via keyboard input
+     * when the user clicks a [min](#min) or [max](#max) label.
+     * This allows the user to increase or decrease the data range of the slider.
+     *
+     * @default false
+     */
+    rangeLabelsEditingEnabled: boolean;
+    /**
+     * Determines whether the range labels are placed centered with the slider track
+     * or placed below it when the [layout](#layout) is `"horizontal"`.
+     *
+     * @default "center"
+     */
+    rangeLabelsPlacement: "center" | "trailing";
+    /**
+     * Indicates if the user can drag the segment between thumbs to update thumb positions.
+     *
+     * @default false
+     */
+    segmentsDraggingDisabled: boolean;
+    /**
+     * Indicates whether to min and max range labels are visible on the slider.
+     *
+     * @default false
+     */
+    showRangeLabels: boolean;
+    /**
+     * Sets steps, or intervals, on the slider that restrict user
+     * input to specific values. If an array of numbers is passed to this
+     * property, the slider thumbs may only be moved to the positions
+     * specified in the array.
+     *
+     * If a single number is set, then steps are set along the entire
+     * slider range at an interval of the provided value. In this scenario,
+     * the user may only slide the thumbs to values at the provided interval.
+     * For example, if a value of `0.5` is set here, and the slider
+     * [min](#min) is `0` and the slider [max](#max) is `10`, then the user will
+     * only be able to update the thumbs to values of 0, 0.5, 1.0, 1.5, 2.0, etc.
+     *
+     * @example
+     * ```html
+     * // set steps at an interval of 0.5. So the
+     * // slider thumb snaps at values of 0.5, 1.0, 1.5, etc.
+     * <arcgis-slider min="0" max="10" steps="0.5" values="5"></arcgis-slider>
+     * ```
+     * @example
+     * ```html
+     * // Set steps at specific slider positions
+     * <arcgis-slider min="0" max="100" steps="5, 10, 15, 20, 25, 30, 35, 40" values="15, 30"></arcgis-slider>
+     * ```
+     */
+    steps?: number[] | number;
+    /**
+     * Indicates whether to show the value labels on the slider.
+     *
+     * This property can be set to one of the following values:
+     * - `"always"`: Always show the labels.
+     * - `"auto"`: Show the labels only when the thumb representing a value is dragged.
+     * - `"hidden"`: Never show the labels.
+     *
+     * @default "hidden"
+     */
+    valueLabelsDisplay: "always" | "auto" | "hidden";
+    /**
+     * Determines whether the labels are placed before or after the track.
+     *
+     * @default "leading"
+     */
+    valueLabelsPlacement: "leading" | "trailing";
+    /**
+     * Indicates whether to enable editing input values via keyboard input
+     * when the user clicks a label. This allows the user to move the slider
+     * thumb to precise values without sliding the thumbs.
+     *
+     * ![Slider with editable labels](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/slider-edit-label.png)
+     *
+     * @default false
+     */
+    valueLabelsEditingEnabled: boolean;
+    /** An array of numbers representing absolute thumb positions on the slider. */
+    values: number[];
+    messageOverrides?: typeof this.messages._overrides;
+    destroy(): Promise<void>;
+    /**
+     * Fires when the `activeValue` changes because a
+     * thumb or range is focused and blurred.
+     *
+     * This event does not fire when `values` changes.
+     * Use `arcgisInput` or `arcgisChange` instead.
+     *
+     * @see [activeValue](#activeValue)
+     */
+    readonly arcgisActiveValueChange: TargetedEvent<this, void>;
+    /**
+     * Fires when the thumb or range is released on the component.
+     *
+     * Note: To constantly listen to the drag event,
+     * use `arcgisInput` instead.
+     */
+    readonly arcgisChange: TargetedEvent<this, void>;
+    /**
+     * Fires when the thumb or range is being dragged and released on the component.
+     *
+     * Note: Fires frequently during drag. To perform
+     * expensive operations consider using a debounce or throttle to avoid
+     * locking up the main thread.
+     */
+    readonly arcgisInput: TargetedEvent<this, void>;
+    /** Fires when the min or max values are changed by the user. */
+    readonly arcgisRangeChange: TargetedEvent<this, void>;
+    private messages: Partial<{
+        componentLabel: string;
+        maximumValue: string;
+        minimumValue: string;
+        rangeMaximum: string;
+        rangeMinimum: string;
+        sliderValue: string;
+    }> & import('@arcgis/lumina/controllers').T9nMeta<{
+        componentLabel: string;
+        maximumValue: string;
+        minimumValue: string;
+        rangeMaximum: string;
+        rangeMinimum: string;
+        sliderValue: string;
+    }>;
+    "@eventTypes": {
+        "arcgisActiveValueChange": ArcgisSlider["arcgisActiveValueChange"]["detail"];
+        "arcgisChange": ArcgisSlider["arcgisChange"]["detail"];
+        "arcgisInput": ArcgisSlider["arcgisInput"]["detail"];
+        "arcgisRangeChange": ArcgisSlider["arcgisRangeChange"]["detail"];
+    };
+}
+export {};