import { default as CxResizeObserver } from '../resize-observer/resize-observer.ts';
import { CortexFormControl, default as CortexElement } from '../../../../base/src/cortex-element.ts';
import { Mark } from '../../../../types/src/range';
import { CSSResultGroup } from 'lit';
import { default as CxTooltip } from '../tooltip/tooltip';

/**
 * @summary Ranges allow the user to select a single value or a range of values using a slider.
 *
 * @slot label - The range's label. Alternatively, you can use the `label` attribute.
 * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
 * @slot marks - Tick marks. Recommended to be a `datalist` element. Inside this slotted element, provide each mark as an `option` element with a `value` attribute and (optional) text content that serves as the label.
 * @slot thumb-min - Custom content for the lower/min thumb (multi mode only). The slotted element will be positioned automatically.
 * @slot thumb-max - Custom content for the upper/max thumb (multi mode only). The slotted element will be positioned automatically.
 *
 * @event cx-blur - Emitted when the control loses focus.
 * @event cx-change - Emitted when an alteration to the control's value is committed by the user.
 * @event cx-focus - Emitted when the control gains focus.
 * @event cx-input - Emitted when the control receives input.
 * @event cx-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 * @event cx-drag-start - Emitted when the user starts dragging the thumb.
 * @event cx-drag-end - Emitted when the user stops dragging the thumb.
 * @event cx-thumb-drag-start - Emitted when the user starts dragging a thumb (multi mode only).
 * @event cx-thumb-drag-end - Emitted when the user stops dragging a thumb (multi mode only).
 * @event cx-range-drag-start - Emitted when the user starts dragging the range bar (multi mode only).
 * @event cx-range-drag-end - Emitted when the user stops dragging the range bar (multi mode only).
 *
 * @csspart form-control - The form control that wraps the label, input, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-input - The range's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 * @csspart base - The component's base wrapper.
 * @csspart input - The internal `<input>` element.
 * @csspart tooltip - The range's tooltip.
 * @csspart thumb - The thumbs (applies to both in multi mode).
 * @csspart thumb-lower - The lower thumb (multi mode).
 * @csspart thumb-upper - The upper thumb (multi mode).
 * @csspart range - The range bar between the thumbs (multi mode).
 *
 * @cssproperty --thumb-size - The size of the thumb.
 * @cssproperty --track-color-active - The color of the portion of the track that represents the current value.
 * @cssproperty --track-color-inactive - The of the portion of the track that represents the remaining value.
 * @cssproperty --track-height - The height of the track.
 * @cssproperty --track-active-offset - The point of origin of the active track.
 */
export default class CxRange extends CortexElement implements CortexFormControl {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-resize-observer': typeof CxResizeObserver;
        'cx-tooltip': typeof CxTooltip;
    };
    private readonly formControlController;
    private readonly hasSlotController;
    private readonly localize;
    private readonly markController;
    private resizeObserver;
    input: HTMLInputElement;
    multiInputMin: HTMLInputElement;
    multiInputMax: HTMLInputElement;
    output: CxTooltip;
    minTooltip: CxTooltip;
    maxTooltip: CxTooltip;
    minThumb: HTMLElement;
    maxThumb: HTMLElement;
    range: HTMLElement;
    multiContainer: HTMLElement;
    private hasFocus;
    private hasTooltip;
    private _multiValue;
    private _singleValue;
    private multiDragTarget;
    private multiIsDragging;
    private multiRangeWidth;
    private multiDragStartValue;
    private thumbConstraints;
    /**
     * Sets the dragging state for the component. This allows us to control the style in CSS.
     */
    state: 'dragging' | 'idle';
    title: string;
    /** The name of the range, submitted as a name/value pair with form data. */
    name: string;
    /**
     * The current value of the range.
     * For single mode: a number (e.g., `50` or `"50"`).
     * For multi mode: an array [min, max] or space-separated string (e.g., `[25, 75]` or `"25 75"`).
     */
    set value(val: number | [number, number]);
    get value(): number | [number, number];
    /** Enables multi-range mode with two thumbs for selecting a range. */
    multi: boolean;
    /** The range's label. If you need to display HTML, use the `label` slot instead. */
    label: string;
    /** The range's help text. If you need to display HTML, use the help-text slot instead. */
    helpText: string;
    /** Disables the range. */
    disabled: boolean;
    /** The minimum acceptable value of the range. */
    min: number;
    /** The maximum acceptable value of the range. */
    max: number;
    /** The interval at which the range will increase and decrease. */
    step: number | undefined;
    /** The minimum spacing between marks labels. */
    markLabelSpacing: number;
    /** The preferred placement of the range's tooltip. */
    tooltipPlacement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
    /**
      Controls when the tooltip is displayed:
  
      - on: always displayed.
      - off: never displayed.
      - auto: displayed on hover or focus.
    */
    tooltipDisplay: 'auto' | 'on' | 'off';
    /** Controls the `hoist` attribute of the tooltip. */
    tooltipHoist: boolean;
    /**
     * A function used to format the tooltip's value. The range's value is passed as the first and only argument. The
     * function should return a string to display in the tooltip.
     */
    tooltipFormatter: (value: number) => string;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string | HTMLElement | undefined;
    /** How close the thumb must be to a mark until snapping occurs. */
    snapThreshold: number;
    /**
     * Displays a tick mark for each step in the range. If no `marks` slot is provided, marks will be auto-generated using the `step` value.
     */
    showMarks: boolean;
    /** The offset of the tooltip from the thumb. */
    tooltipOffset: number;
    /** Disables the min (lower) thumb. Only used in multi mode. */
    minThumbDisabled: boolean;
    /** Disables the max (upper) thumb. Only used in multi mode. */
    maxThumbDisabled: boolean;
    /** Disables dragging the range bar. Only used in multi mode. */
    rangeSlideDisabled: boolean;
    /**
     * Controls the behavior when thumbs are dragged across each other. Only used in multi mode.
     * - 'swap': Thumbs swap positions when crossing (default).
     * - 'block': Thumbs are blocked from crossing each other.
     */
    thumbsCrossover: 'swap' | 'block';
    /** ARIA label for the lower thumb. Only used in multi mode. */
    ariaLabelLower: string | undefined;
    /** ARIA label for the upper thumb. Only used in multi mode. */
    ariaLabelUpper: string | undefined;
    /** Prevents thumbs from visually overlapping when they have the same or close values. Only used in multi mode. */
    noOverlap: boolean;
    /**
     * Controls how thumbs are positioned at the edges (0% and 100%) when no-overlap is enabled.
     * Only used in multi mode with no-overlap.
     * - 'center': Thumb center aligns with the edge (default). Half the thumb may extend outside.
     * - 'inside': Thumbs stay fully within the track bounds.
     */
    thumbEdgeMode: 'center' | 'inside';
    marks: Mark[];
    /** The default value of the form control. Primarily used for resetting the form control. */
    defaultValue: number | [number, number];
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    get minThumbSize(): number;
    get maxThumbSize(): number;
    get multiContainerSize(): number;
    get minThumbOffset(): number;
    get maxThumbOffset(): number;
    /**
     * Gets the track left inset for 'inside' mode.
     * This trims the track on the left to match the min thumb's visual bounds.
     */
    get trackLeftInset(): number;
    /**
     * Gets the track right inset for 'inside' mode.
     * This trims the track on the right to match the max thumb's visual bounds.
     */
    get trackRightInset(): number;
    constructor();
    connectedCallback(): void;
    initMarks(): void;
    disconnectedCallback(): void;
    private handleChange;
    private handleInput;
    private handleBlur;
    private handleFocus;
    private handleMouseUp;
    /**
     * Snaps the value to the nearest snap point to a given x position
     * @param x the x position that is seeked to
     * @returns whether the value has changed
     */
    private snapValue;
    private handleThumbDragStart;
    private handleMaxThumbDragStart;
    private handleMinThumbDragStart;
    private handleMinThumbKeyDown;
    private handleMaxThumbKeyDown;
    private handleMouseDown;
    private handleKeyDown;
    private valueToPercentage;
    private pixelsToValue;
    private syncProgress;
    handleValueChange(): void;
    handleDisabledChange(): void;
    syncRange(): void;
    private handleInvalid;
    /**
     * Sets focus on the range. In multi mode, focuses the min thumb by default, or max if min is disabled.
     * @param options - The focus options to pass to the thumb.
     */
    focus(options?: FocusOptions): void;
    /**
     * Removes focus from the range. In multi mode, blurs both thumbs.
     */
    blur(): void;
    /** Checks if multi mode thumb is available for stepping */
    private isMultiThumbAvailable;
    /** Updates multi value for a specific thumb and returns whether it changed */
    private updateMultiThumbValue;
    /** Finds the next mark value greater than the current value */
    private findNextMark;
    /** Finds the previous mark value less than the current value */
    private findPreviousMark;
    /** Handles step up for single mode */
    private stepUpSingle;
    /** Handles step down for single mode */
    private stepDownSingle;
    /** Handles step up for multi mode */
    private stepUpMulti;
    /** Handles step down for multi mode */
    private stepDownMulti;
    /**
     * Increments the value of the range by the value of the step attribute.
     * @param thumbType - For multi mode, specifies which thumb to move ('min' or 'max')
     * @returns whether the value has changed
     */
    stepUp(thumbType?: 'min' | 'max'): boolean;
    /**
     * Decrements the value of the range by the value of the step attribute.
     * @param thumbType - For multi mode, specifies which thumb to move ('min' or 'max')
     * @returns whether the value has changed
     */
    stepDown(thumbType?: 'min' | 'max'): boolean;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    private handleMultiResize;
    private multiValueToPercent;
    private multiPercentToValue;
    private multiPositionToValue;
    private getConstrainedPercent;
    private getMultiThumbStyle;
    /**
     * Gets the style for the range bar (active portion between thumbs).
     * In 'inside' mode, the bar is trimmed to match the track bounds.
     */
    private getRangeBarStyle;
    private setMultiValue;
    private updateNoOverlapConstraints;
    private initiateMultiThumbDrag;
    private initiateMultiRangeDrag;
    private handleMultiContainerClick;
    private handleMultiKeyDown;
    handleConstraintsChange(): void;
    handleMultiValueChange(): void;
    private renderSingleRange;
    private renderMultiRange;
    render(): import('lit').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-range': CxRange;
    }
}
