@sixbell-telco/sdk/components/forms/range/src/range.component.d.ts

A collection of reusable components designed for use in Sixbell Telco Angular projects

import { ControlValueAccessor, FormControl, FormGroup } from '@angular/forms';
import * as i0 from "@angular/core";
/** Possible range slider color variants */
export type RangeVariantProps = 'primary' | 'secondary' | 'tertiary' | 'success' | 'info' | 'error' | 'warning' | 'accent' | null | undefined;
/** Possible range slider size variants */
export type RangeSizeProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null | undefined;
/** Configuration object for range slider styling */
export type RangeProps = {
    variant?: RangeVariantProps;
    size?: RangeSizeProps;
};
/**
 * A customizable range slider component with form integration
 *
 * @remarks
 * Implements ControlValueAccessor for seamless Angular form integration.
 * Supports step markers and custom styling variants.
 *
 * @example
 * ```html
 * <!-- Basic usage -->
 * <st-range [(value)]="sliderValue"></st-range>
 * ```
 *
 * @example
 * <!-- With form integration and steps -->
 * <st-range
 *   variant="accent"
 *   size="lg"
 *   label="Volume"
 *   [min]="0"
 *   [max]="100"
 *   [steps]="4"
 *   [parentForm]="audioForm"
 *   formControlName="volume"
 * ></st-range>
 * ```
 */
export declare class RangeComponent implements ControlValueAccessor {
    /**
     * Range slider color variant
     * @defaultValue 'primary'
     */
    variant: import("@angular/core").InputSignal<RangeVariantProps>;
    /**
     * Range slider size variant
     * @defaultValue 'xs'
     */
    size: import("@angular/core").InputSignal<RangeSizeProps>;
    /**
     * Label text displayed with the range slider
     */
    label: import("@angular/core").InputSignal<string>;
    /**
     * HTML name attribute for the range slider
     */
    name: import("@angular/core").InputSignal<string | null>;
    /**
     * Minimum value of the range slider
     * @defaultValue 0
     */
    min: import("@angular/core").InputSignal<number>;
    /**
     * Maximum value of the range slider
     * @defaultValue 100
     */
    max: import("@angular/core").InputSignal<number>;
    /**
     * Whether to show min/max values
     * @defaultValue true
     */
    showRange: import("@angular/core").InputSignal<boolean>;
    /**
     * Number of steps to display (0 for continuous)
     * @defaultValue 0
     */
    steps: import("@angular/core").InputSignal<number>;
    /**
     * @internal
     * Computed array of step markers
     */
    stepsQuantity: import("@angular/core").Signal<unknown[]>;
    /**
     * @internal
     * Computed size between steps
     */
    jumpSize: import("@angular/core").Signal<number>;
    /**
     * Two-way bindable range value
     */
    value: import("@angular/core").ModelSignal<number>;
    /**
     * Parent form group for reactive forms
     */
    parentForm: import("@angular/core").InputSignal<FormGroup<any> | null>;
    /**
     * Form control name for reactive forms
     */
    formControlName: import("@angular/core").InputSignal<string>;
    /**
     * @internal
     * Gets the associated FormControl instance
     */
    get formField(): FormControl | null;
    private onControlChange;
    private onControlTouch;
    /**
     * Whether the range slider is disabled
     * @defaultValue false
     */
    disabled: import("@angular/core").ModelSignal<boolean>;
    /**
     * Event emitted when range value changes
     */
    valueUpdated: import("@angular/core").OutputEmitterRef<number>;
    /**
     * @internal
     * Computed class string for the range slider
     */
    componentClass: import("@angular/core").Signal<string>;
    writeValue(obj: any): void;
    registerOnChange(fn: any): void;
    registerOnTouched(fn: any): void;
    setDisabledState(isDisabled: boolean): void;
    /**
     * @internal
     * Handles range value changes
     */
    handleChange(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<RangeComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<RangeComponent, "st-range", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "showRange": { "alias": "showRange"; "required": false; "isSignal": true; }; "steps": { "alias": "steps"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "parentForm": { "alias": "parentForm"; "required": false; "isSignal": true; }; "formControlName": { "alias": "formControlName"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "valueUpdated": "valueUpdated"; }, never, never, true, never>;
}