carbon-components-angular/slider/slider.component.d.ts

Next generation components

/**
 *
 * carbon-angular v0.0.0 | slider.component.d.ts
 *
 * Copyright 2014, 2024 IBM
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0

 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


import { EventEmitter, AfterViewInit, ElementRef, TemplateRef, QueryList, ChangeDetectorRef } from "@angular/core";
import { ControlValueAccessor } from "@angular/forms";
import { EventService } from "carbon-components-angular/utils";
import * as i0 from "@angular/core";
/**
 * Used to select from ranges of values. [See here](https://www.carbondesignsystem.com/components/slider/usage) for usage information.
 *
 * Get started with importing the module:
 *
 * ```typescript
 * import { SliderModule } from 'carbon-components-angular';
 * ```
 *
 * The simplest possible slider usage looks something like:
 *
 * ```html
 *	<cds-slider></cds-slider>
 * ```
 *
 * That will render a slider without labels or alternative value input. Labels can be provided by
 * elements with `[minLabel]` and `[maxLabel]` attributes, and an `input` (may use the `ibmInput` directive) can be supplied
 * for use as an alternative value field.
 *
 * ex:
 *
 * ```html
 * <!-- Full example -->
 * <cds-slider>
 *		<span minLabel>0GB</span>
 *		<span maxLabel>100GB</span>
 *		<input/>
 * </cds-slider>
 *
 * <!-- with just an input -->
 * <cds-slider>
 *		<input/>
 * </cds-slider>
 *
 * <!-- with just one label -->
 * <cds-slider>
 *		<span maxLabel>Maximum</span>
 * </cds-slider>
 * ```
 *
 * Slider supports `NgModel` by default, as well as two way binding to the `value` input.
 *
 * [See demo](../../?path=/story/components-slider--advanced)
 */
export declare class Slider implements AfterViewInit, ControlValueAccessor {
    protected elementRef: ElementRef;
    protected eventService: EventService;
    private changeDetection;
    /** Used to generate unique IDs */
    private static count;
    /** The lower bound of our range */
    set min(v: number);
    get min(): number;
    /** The upper bound of our range */
    set max(v: number);
    get max(): number;
    /** The interval for our range */
    step: number;
    /** Set the initial value. Available for two way binding */
    set value(v: number | number[]);
    get value(): number | number[];
    /** Base ID for the slider. The min and max labels get IDs `${this.id}-bottom-range` and `${this.id}-top-range` respectively */
    id: string;
    /** Value used to "multiply" the `step` when using arrow keys to select values */
    shiftMultiplier: number;
    /** Set to `true` for a loading slider */
    skeleton: boolean;
    /** Sets the text inside the `label` tag */
    label: string | TemplateRef<any>;
    /** Set to `true` for a slider without arrow key interactions. */
    disableArrowKeys: boolean;
    /** Disables the range visually and functionally */
    set disabled(v: boolean);
    get disabled(): boolean;
    /** Emits every time a new value is selected */
    valueChange: EventEmitter<number | number[]>;
    hostClass: boolean;
    thumbs: QueryList<ElementRef>;
    track: ElementRef;
    filledTrack: ElementRef;
    range: ElementRef;
    labelId: string;
    bottomRangeId: string;
    topRangeId: string;
    fractionComplete: number;
    protected isMouseDown: boolean;
    protected inputs: HTMLInputElement[];
    protected _min: number;
    protected _max: number;
    protected _value: number[];
    protected _previousValue: number[];
    protected _disabled: boolean;
    protected _focusedThumbIndex: number;
    constructor(elementRef: ElementRef, eventService: EventService, changeDetection: ChangeDetectorRef);
    ngAfterViewInit(): void;
    trackThumbsBy(index: number, item: any): number;
    /** Send changes back to the model */
    propagateChange: (_: any) => void;
    /** Register a change propagation function for `ControlValueAccessor` */
    registerOnChange(fn: any): void;
    /** Callback to notify the model when our input has been touched */
    onTouched: () => any;
    /** Register a callback to notify when our input has been touched */
    registerOnTouched(fn: any): void;
    /** Receives a value from the model */
    writeValue(v: any): void;
    /**
     * Returns the amount of "completeness" of a value as a fraction of the total track width
     */
    getFractionComplete(value: number): number;
    /** Helper function to return the CSS transform `scaleX` function */
    scaleX(complete: any): string;
    /** Converts a given px value to a "real" value in our range */
    convertToValue(pxAmount: any): number;
    /** Converts a given "real" value to a px value we can update the view with */
    convertToPx(value: any): any;
    /**
     * Increments the value by the step value, or the step value multiplied by the `multiplier` argument.
     *
     * @argument multiplier Defaults to `1`, multiplied with the step value.
     */
    incrementValue(multiplier?: number, index?: number): void;
    /**
     * Decrements the value by the step value, or the step value multiplied by the `multiplier` argument.
     *
     * @argument multiplier Defaults to `1`, multiplied with the step value.
     */
    decrementValue(multiplier?: number, index?: number): void;
    /**
     * Determines if the slider is in range mode.
     */
    isRange(): boolean;
    /**
     * Range mode only.
     * Updates the track width to span from the low thumb to the high thumb
     */
    updateTrackRangeWidth(): void;
    /** Change handler for the optional input */
    onChange(event: any, index: any): void;
    /**
     * Handles clicks on the slider, and setting the value to it's "real" equivalent.
     * Will assign the value to the closest thumb if in range mode.
     * */
    onClick(event: any): void;
    /** Focus handler for the optional input */
    onFocus({ target }: {
        target: any;
    }): void;
    /** Mouse move handler. Responsible for updating the value and visual selection based on mouse movement */
    onMouseMove(event: any): void;
    /**
     * Enables the `onMouseMove` handler
     *
     * @param {boolean} thumb If true then `thumb` is clicked down, otherwise `thumb2` is clicked down.
     */
    onMouseDown(event: any, index?: number): void;
    /** Disables the `onMouseMove` handler */
    onMouseUp(): void;
    /**
     * Calls `incrementValue` for ArrowRight and ArrowUp, `decrementValue` for ArrowLeft and ArrowDown.
     *
     * @param {boolean} thumb If true then `thumb` is pressed down, otherwise `thumb2` is pressed down.
     */
    onKeyDown(event: KeyboardEvent, index?: number): void;
    isTemplate(value: any): boolean;
    /** Get optional input fields */
    protected getInputs(): HTMLInputElement[];
    static ɵfac: i0.ɵɵFactoryDeclaration<Slider, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<Slider, "cds-slider, ibm-slider", never, { "min": "min"; "max": "max"; "step": "step"; "value": "value"; "id": "id"; "shiftMultiplier": "shiftMultiplier"; "skeleton": "skeleton"; "label": "label"; "disableArrowKeys": "disableArrowKeys"; "disabled": "disabled"; }, { "valueChange": "valueChange"; }, never, ["[minLabel]", "[maxLabel]", "input"], false>;
}