@ux-aspects/ux-aspects/components/slider/slider.component.d.ts

Open source user interface framework for building modern, responsive, mobile big data applications

import { AfterViewInit, DoCheck, ElementRef, EventEmitter, OnInit } from '@angular/core';
import { ColorService } from '../../services/color/index';
import * as i0 from "@angular/core";
export declare class SliderComponent implements OnInit, AfterViewInit, DoCheck {
    readonly colorService: ColorService;
    private readonly _changeDetectorRef;
    /** A single number or a SliderValue object, depending on the slider type specified. */
    value: SliderValue | number;
    /** A set of options to customize the appearance and behavior of the slider. */
    set options(options: SliderOptions);
    /** Whether the slider is disabled. */
    set disabled(disabled: boolean);
    get disabled(): boolean;
    get options(): SliderOptions;
    /** Emits when the `value` changes. */
    valueChange: EventEmitter<SliderValue | number>;
    lowerTooltip: ElementRef;
    upperTooltip: ElementRef;
    track: ElementRef;
    private _value;
    private _disabled;
    _options: SliderOptions;
    sliderType: typeof SliderType;
    sliderStyle: typeof SliderStyle;
    sliderSize: typeof SliderSize;
    sliderSnap: typeof SliderSnap;
    sliderThumb: typeof SliderThumb;
    sliderTickType: typeof SliderTickType;
    sliderThumbEvent: typeof SliderThumbEvent;
    sliderCalloutTrigger: typeof SliderCalloutTrigger;
    tracks: {
        lower: {
            size: number;
            color: string;
        };
        middle: {
            size: number;
            color: string;
        };
        upper: {
            size: number;
            color: string;
        };
    };
    tooltips: {
        lower: {
            visible: boolean;
            position: number;
            label: string;
        };
        upper: {
            visible: boolean;
            position: number;
            label: string;
        };
    };
    thumbs: {
        lower: {
            hover: boolean;
            drag: boolean;
            position: number;
            order: number;
            value: number;
        };
        upper: {
            hover: boolean;
            drag: boolean;
            position: number;
            order: number;
            value: number;
        };
    };
    ticks: SliderTick[];
    defaultOptions: SliderOptions;
    constructor();
    ngOnInit(): void;
    ngDoCheck(): void;
    ngAfterViewInit(): void;
    snapToNearestTick(thumb: SliderThumb, snapTarget: SliderSnap, forwards: boolean): void;
    snapToEnd(thumb: SliderThumb, forwards: boolean): void;
    getThumbValue(thumb: SliderThumb): number;
    getFormattedValue(thumb: SliderThumb): string | number;
    private getThumbState;
    private setThumbState;
    thumbEvent(thumb: SliderThumb, event: SliderThumbEvent): void;
    getAriaValueText(thumb: SliderThumb): string | number;
    private updateTooltips;
    private updateTooltipText;
    private getTooltipElement;
    private getTooltip;
    private updateTooltipPosition;
    private preventTooltipOverlap;
    private clamp;
    updateThumbPosition(event: MouseEvent | TouchEvent, thumb: SliderThumb): void;
    private updateOrderOnDrag;
    private updateOrder;
    private getTickDistances;
    private snapToTick;
    private validateValue;
    private updateOptions;
    private updateValues;
    private setValue;
    private setThumbValue;
    private updateTicks;
    private updateTrackColors;
    /** Map the color value to the correct CSS color value */
    private getTrackColorStyle;
    private getSteps;
    private getTicks;
    private unionTicks;
    private deepMerge;
    private detectValueChange;
    /**
     * Determines whether or not an object conforms to the
     * SliderValue interface.
     * @param value - The object to check - this must be type any
     */
    private isSliderValue;
    private clone;
    static ngAcceptInputType_disabled: boolean | string;
    static ɵfac: i0.ɵɵFactoryDeclaration<SliderComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<SliderComponent, "ux-slider", never, { "value": { "alias": "value"; "required": false; }; "options": { "alias": "options"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, false, never>;
}
export declare enum SliderType {
    Value = 0,
    Range = 1
}
export declare enum SliderStyle {
    Button = 0,
    Line = 1
}
export declare enum SliderSize {
    Narrow = 0,
    Wide = 1
}
export declare enum SliderCalloutTrigger {
    None = 0,
    Hover = 1,
    Drag = 2,
    Persistent = 3,
    Dynamic = 4
}
export interface SliderValue {
    low: number;
    high: number;
}
export declare enum SliderSnap {
    None = 0,
    Minor = 1,
    Major = 2,
    All = 3
}
export declare enum SliderTickType {
    Minor = 0,
    Major = 1
}
export interface SliderOptions {
    type?: SliderType;
    handles?: SliderHandleOptions;
    track?: SliderTrackOptions;
}
export interface SliderHandleOptions {
    style?: SliderStyle;
    callout?: SliderCallout;
    keyboard?: SliderKeyboardOptions;
    aria?: SliderAriaOptions;
}
export interface SliderAriaOptions {
    thumb?: string;
    lowerThumb?: string;
    upperThumb?: string;
}
export interface SliderKeyboardOptions {
    major?: number;
    minor?: number;
}
export interface SliderTrackOptions {
    height?: SliderSize;
    min?: number;
    max?: number;
    ticks?: SliderTicksOptions;
    colors?: SliderTrackColors;
}
export interface SliderTicksOptions {
    snap?: SliderSnap;
    major?: SliderTickOptions;
    minor?: SliderTickOptions;
}
export interface SliderTickOptions {
    show?: boolean;
    steps?: number | number[];
    labels?: boolean;
    formatter?: (value: number) => string | number;
}
export interface SliderTick {
    showTicks: boolean;
    showLabels: boolean;
    type: SliderTickType;
    position: number;
    value: number;
    label: string | number;
}
export interface SliderTrackColors {
    lower?: string | string[];
    range?: string | string[];
    higher?: string | string[];
}
export interface SliderCallout {
    trigger?: SliderCalloutTrigger;
    background?: string;
    color?: string;
    formatter?: (value: number) => string | number;
}
export declare enum SliderThumbEvent {
    None = 0,
    MouseOver = 1,
    MouseLeave = 2,
    DragStart = 3,
    DragEnd = 4
}
export declare enum SliderThumb {
    Lower = 0,
    Upper = 1
}