@alyle/ui/slider/slider.d.ts

Minimal Design, a set of components for Angular

import { ElementRef, Renderer2, OnInit, ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, QueryList, InjectionToken, NgZone, AfterViewInit } from '@angular/core';
import { LyTheme2, ThemeVariables, StyleCollection, LyClasses, StyleTemplate, ThemeRef, StyleRenderer } from '@alyle/ui';
import { Color } from '@alyle/ui/color';
import { ControlValueAccessor } from '@angular/forms';
import { Subject } from 'rxjs';
import { FocusMonitor } from '@angular/cdk/a11y';
import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
import * as i0 from "@angular/core";
export interface LySliderTheme {
    /** Styles for Slider Component */
    root?: StyleCollection<((classes: LyClasses<typeof STYLES>) => StyleTemplate)> | ((classes: LyClasses<typeof STYLES>) => StyleTemplate);
    /**
     * Disabled state
     * @param classes Classes
     * @param color color slider (deprecated)
     */
    disabled?: StyleCollection<((classes: LyClasses<typeof STYLES>, color: Color) => StyleTemplate)> | ((classes: LyClasses<typeof STYLES>, color: Color) => StyleTemplate);
    color?: StyleCollection<((classes: LyClasses<typeof STYLES>, color: Color, contrast: Color) => StyleTemplate)> | ((classes: LyClasses<typeof STYLES>, color: Color, contrast: Color) => StyleTemplate);
    appearance?: {
        standard?: StyleCollection<((classes: LyClasses<typeof STYLES>) => StyleTemplate)> | ((classes: LyClasses<typeof STYLES>) => StyleTemplate);
        md?: StyleCollection<((classes: LyClasses<typeof STYLES>) => StyleTemplate)> | ((classes: LyClasses<typeof STYLES>) => StyleTemplate);
        [key: string]: StyleCollection<((classes: LyClasses<typeof STYLES>) => StyleTemplate)> | ((classes: LyClasses<typeof STYLES>) => StyleTemplate) | undefined;
    };
    size?: {
        small?: StyleCollection<((classes: LyClasses<typeof STYLES>) => StyleTemplate)> | ((classes: LyClasses<typeof STYLES>) => StyleTemplate);
        medium?: StyleCollection<((classes: LyClasses<typeof STYLES>) => StyleTemplate)> | ((classes: LyClasses<typeof STYLES>) => StyleTemplate);
        [key: string]: StyleCollection<((classes: LyClasses<typeof STYLES>) => StyleTemplate)> | ((classes: LyClasses<typeof STYLES>) => StyleTemplate) | undefined;
    };
}
export interface LySliderDefaultOptions {
    appearance?: string;
}
export declare const LY_SLIDER_DEFAULT_OPTIONS: InjectionToken<LySliderDefaultOptions>;
export interface LySliderVariables {
    slider?: LySliderTheme;
}
export declare const LY_SLIDER_CONTROL_VALUE_ACCESSOR: {
    provide: InjectionToken<readonly ControlValueAccessor[]>;
    useExisting: import("@angular/core").Type<any>;
    multi: boolean;
};
export declare const STYLES: (theme: ThemeVariables & LySliderVariables, ref: ThemeRef) => {
    $priority: number;
    root: () => (_className: string) => string;
    wrapper: (_className: string) => string;
    track: () => (_className: string) => string;
    bg: any;
    thumbContainer: (_className: string) => string;
    thumbContent: (_className: string) => string;
    thumb: (_className: string) => string;
    thumbLabel: (_className: string) => string;
    thumbLabelValue: (_className: string) => string;
    horizontal: () => (_className: string) => string;
    vertical: () => (_className: string) => string;
    marked: any;
    mark: (_className: string) => string;
    markActive: (_className: string) => string;
    tick: (_className: string) => string;
    tickActive: any;
    thumbVisible: any;
    thumbNotVisible: any;
    thumbContentFocused: any;
    sliding: any;
    disabled: (_className: string) => string;
};
/** A change event emitted by the LySlider component. */
export declare class LySliderChange {
    /** The LySlider that changed. */
    source: LySlider;
    /** The new value of the source slider. */
    value: number | (number | null)[] | null;
    constructor(
    /** The LySlider that changed. */
    source: LySlider, 
    /** The new value of the source slider. */
    value: number | (number | null)[] | null);
}
interface Thumb {
    value: number;
    displayValue: string | number | null;
    percent: number | null;
    styles: {
        [key: string]: string;
    };
    focused?: boolean;
    sliding?: boolean;
    index: number;
}
export interface LySliderMark {
    value: number;
    label: number | string;
}
export declare class LySlider implements OnChanges, OnInit, AfterViewInit, OnDestroy, ControlValueAccessor {
    private _theme;
    private _el;
    private _renderer;
    private _cd;
    readonly sRenderer: StyleRenderer;
    private _ngZone;
    private _focusMonitor;
    private _default;
    /**
     * Identifier used to attribute a touch event to a particular slider.
     * Will be undefined if one of the following conditions is true:
     * - The user isn't dragging using a touch device.
     * - The browser doesn't support `Touch.identifier`.
     * - Dragging hasn't started yet.
     */
    private _touchId;
    /** Keeps track of the last pointer event that was captured by the slider. */
    private _lastPointerEvent;
    /** Used to subscribe to global move and end events */
    protected _document: Document;
    /** The dimensions of the slider. */
    private _sliderDimensions;
    /** Reference to the inner slider wrapper element. */
    readonly _wrapper: ElementRef;
    /** Whether or not to show the thumb. */
    get thumbVisible(): BooleanInput | null;
    set thumbVisible(val: BooleanInput | null);
    /** Whether or not to show the marks, also accepts an array of marks. */
    get marks(): BooleanInput | LySliderMark[];
    set marks(val: BooleanInput | LySliderMark[]);
    /** The maximum value that the slider can have. */
    get max(): number;
    set max(v: NumberInput);
    /** The minimum value that the slider can have. */
    get min(): number;
    set min(v: NumberInput);
    /** The slider appearance style. */
    set appearance(val: string);
    get appearance(): string;
    /** The slider size. */
    size: string | null;
    /** Color of Slider */
    get color(): string;
    set color(val: string);
    /** Whether the slider is vertical. */
    get vertical(): BooleanInput;
    set vertical(val: BooleanInput);
    /** The values at which the thumb will snap. */
    get step(): number;
    set step(v: NumberInput);
    private _step;
    /**
     * Value of a slider, this can be a number or an array of numbers.
     * If the array of numbers has more than one value,
     * then this will create more thumbs
     */
    get value(): number | (number | null)[] | null;
    set value(val: number | (number | null)[] | null);
    /** Whether the slider is disabled. */
    get disabled(): BooleanInput;
    set disabled(val: BooleanInput);
    /**
     * Whether or not to show the thumb label, but if the value is a number,
     * it will show ticks according to the steps. For example: if you set
     * 3 ticks with a step of 10, you will draw a tick every 30 values
     */
    get ticks(): NumberInput | BooleanInput;
    set ticks(val: NumberInput | BooleanInput);
    get _tickList(): number[];
    constructor(_theme: LyTheme2, _el: ElementRef, _renderer: Renderer2, _cd: ChangeDetectorRef, sRenderer: StyleRenderer, _ngZone: NgZone, _focusMonitor: FocusMonitor, _document: any, _default: LySliderDefaultOptions);
    static и: string;
    readonly classes: LyClasses<(theme: ThemeVariables & LySliderVariables, ref: ThemeRef) => {
        $priority: number;
        root: () => (_className: string) => string;
        wrapper: (_className: string) => string;
        track: () => (_className: string) => string;
        bg: any;
        thumbContainer: (_className: string) => string;
        thumbContent: (_className: string) => string;
        thumb: (_className: string) => string;
        thumbLabel: (_className: string) => string;
        thumbLabelValue: (_className: string) => string;
        horizontal: () => (_className: string) => string;
        vertical: () => (_className: string) => string;
        marked: any;
        mark: (_className: string) => string;
        markActive: (_className: string) => string;
        tick: (_className: string) => string;
        tickActive: any;
        thumbVisible: any;
        thumbNotVisible: any;
        thumbContentFocused: any;
        sliding: any;
        disabled: (_className: string) => string;
    }>;
    private _disabled;
    private _disabledClass;
    private _color;
    private _colorClass;
    private _vertical;
    private _verticalClass?;
    private _appearance;
    private _appearanceClass;
    private _value;
    private _thumbsOnSlideStart;
    private _valueOnSlideStart;
    private _min;
    private _max;
    private _stepPrecision?;
    private _closestIndex;
    _changes: Subject<void>;
    /** Min percentage, this is for mark. */
    _minPercent: number;
    /** Max percentage, this is for mark. */
    _maxPercent: number;
    /**
     * Whether or not the thumb is sliding.
     */
    _isSliding: 'keyboard' | 'pointer' | null;
    _slidingThumbValue?: number | null;
    _thumbs: Thumb[];
    _rootClasses: Set<string>;
    _bg?: ElementRef<HTMLDivElement>;
    _track: ElementRef<HTMLDivElement>;
    _ticksRef: ElementRef<HTMLDivElement>;
    _thumbsRef?: QueryList<ElementRef<HTMLDivElement>>;
    displayWith: (value: number | null) => string | number;
    /** Event emitted when the slider value has changed. */
    readonly change: EventEmitter<LySliderChange>;
    /** Event emitted when the slider thumb moves. */
    readonly input: EventEmitter<LySliderChange>;
    /** @docs-private */
    readonly valueChange: EventEmitter<number | (number | null)[] | null>;
    private _thumbVisible;
    private _marks;
    private _marksClass;
    _marksList?: LySliderMark[] | null;
    private _ticks;
    _tickInterval: number;
    private __tickList;
    /** Called when the window has lost focus. */
    private _windowBlur;
    /**
     * The registered callback function called when a blur event occurs on the input element.
     * @docs-private
     */
    onTouched: () => void;
    private _controlValueAccessorChangeFn;
    ngOnChanges(): void;
    ngOnInit(): void;
    ngAfterViewInit(): void;
    ngOnDestroy(): void;
    writeValue(value: any): void;
    /**
     * Registers a function called when the control value changes.
     *
     * @param fn The callback function
     */
    registerOnChange(fn: (value: any) => any): void;
    /**
     * Registers a function called when the control is touched.
     *
     * @param fn The callback function
     */
    registerOnTouched(fn: () => any): void;
    /**
     * Disables the select. Part of the ControlValueAccessor interface required
     * to integrate with Angular's core forms API.
     *
     * @param isDisabled Sets whether the component is disabled.
     */
    setDisabledState(isDisabled: boolean): void;
    _onMouseenter(): void;
    _onFocus(): void;
    _onBlur(): void;
    _onKeydown(event: KeyboardEvent): void;
    _onKeyup(): void;
    private _pointerDown;
    /**
    * Called when the user has moved their pointer after
    * starting to drag. Bound on the document level.
    */
    private _pointerMove;
    /** Called when the user has lifted their pointer. Bound on the document level. */
    private _pointerUp;
    _onFocusThumb(thumb: Thumb): void;
    _onBlurThumb(thumb: Thumb): void;
    private _setOnSlideStart;
    _trackByFn(_index: number, item: Thumb): number;
    private _getDirection;
    private _updateValueFromPosition;
    private _updateThumbs;
    _calculatePosition(percent: number): {
        style: string;
        value: string;
    };
    private _updateTrack;
    /** Emits a change event. */
    private _emitChangeEvent;
    /** Emits an input event. */
    private _emitInputEvent;
    private _createChangeEvent;
    private _roundValueToStep;
    private _transformValue;
    /** Increments the slider by the given number of steps (negative number decrements). */
    private _increment;
    _getHostElement(): any;
    /**
     * Get the bounding client rect of the slider track element.
     * The track is used rather than the native element to ignore the extra space that the thumb can
     * take up.
     */
    private _getSliderDimensions;
    private _updateTickValues;
    /**
     * Focuses the native element.
     */
    private _focusHostElement;
    /**
    * Binds our global move and end events. They're bound at the document level and only while
    * dragging so that the user doesn't have to keep their pointer exactly over the slider
    * as they're swiping across the screen.
    */
    private _bindGlobalEvents;
    /** Removes any global event listeners that we may have added. */
    private _removeGlobalEvents;
    /** Use defaultView of injected document if available or fallback to global window reference */
    private _getWindow;
    static ɵfac: i0.ɵɵFactoryDeclaration<LySlider, [null, null, null, null, null, null, null, null, { optional: true; }]>;
    static ɵcmp: i0.ɵɵComponentDeclaration<LySlider, "ly-slider", ["lySlider"], { "thumbVisible": { "alias": "thumbVisible"; "required": false; }; "marks": { "alias": "marks"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "step": { "alias": "step"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "ticks": { "alias": "ticks"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; }, { "change": "change"; "input": "input"; "valueChange": "valueChange"; }, never, ["ly-mark"], false, never>;
}
export {};