@synergy-design-system/angular/components/range/index.d.ts

Angular wrappers for the Synergy Design System

import * as i0 from '@angular/core';
import { ElementRef, NgZone, EventEmitter } from '@angular/core';
import { SynRange, SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent, SynMoveEvent } from '@synergy-design-system/components';
export { SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent, SynMoveEvent } from '@synergy-design-system/components';

/**
 * @summary Ranges allow the user to select values within a given range using one or two thumbs.
 * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs
 * @status stable
 *
 * @dependency syn-tooltip
 *
 * @slot label - The range's label. Alternatively, you can use the `label` attribute.
 * @slot prefix - Used to prepend a presentational icon or similar element to the range.
 * @slot suffix - Used to append a presentational icon or similar element to the range.
 * @slot help-text - Text that describes how to use the range.
 * Alternatively, you can use the `help-text` attribute.
 * @slot ticks - Used to display tick marks at specific intervals along the range.
 *
 * @event syn-blur - Emitted when the control loses focus.
 * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
 * @event syn-focus - Emitted when the control gains focus.
 * @event syn-input - Emitted when the control receives input.
 * @event syn-invalid - Emitted when the form control has been checked for validity
 * and its constraints aren't satisfied.
 * @event syn-move - Emitted when the user moves a thumb, either via touch or keyboard.
 * Use `Event.preventDefault()` to prevent movement.
 *
 * @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-help-text - The help text's wrapper.
 * @csspart base - The component's base wrapper.
 * @csspart input-wrapper - The container that wraps the input track and ticks.
 * @csspart track-wrapper - The wrapper for the track.
 * @csspart track - The inactive track.
 * @csspart active-track - The active track.
 * @csspart prefix - The container that wraps the prefix.
 * @csspart suffix - The container that wraps the suffix.
 * @csspart ticks - The container that wraps the tick marks.
 * @csspart thumb - The thumb(s) that the user can drag to change the range.
 *
 * @csspart tooltip__base - The base of the tooltip
 * @csspart tooltip__arrow - The arrow of the tooltip
 * @csspart tooltip__popup - The popup of the tooltip
 * @csspart tooltip__body - The body of the tooltip
 *
 * @cssproperty --thumb-size - The size of a thumb.
 * @cssproperty --thumb-hit-area-size - The clickable area around the thumb.
 * Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4).
 * @cssproperty --track-hit-area-size - The clickable area around the track (top and left).
 * @cssproperty --track-color-active - Color of the track representing the current value.
 * @cssproperty --track-color-inactive - Color 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,
 * starting at the left side of the range.
 */
declare class SynRangeComponent {
    nativeElement: SynRange;
    private _ngZone;
    private modelSignal;
    constructor(e: ElementRef, ngZone: NgZone);
    /**
     * The event that will trigger the ngModel update.
     * By default, this is set to "syn-change".
     */
    set ngModelUpdateOn(v: keyof HTMLElementEventMap);
    get ngModelUpdateOn(): keyof HTMLElementEventMap;
    /**
     * The name of the range, submitted as a name/value pair with form data.
     */
    set name(v: SynRange['name']);
    get name(): SynRange['name'];
    /**
     * The range's label.
     * If you need to display HTML, use the `label` slot instead.
     */
    set label(v: SynRange['label']);
    get label(): SynRange['label'];
    /**
     * The range's help text.
     * If you need to display HTML, use the help-text slot instead.
     */
    set helpText(v: SynRange['helpText']);
    get helpText(): SynRange['helpText'];
    /**
     * Disables the range.
     */
    set disabled(v: '' | SynRange['disabled']);
    get disabled(): SynRange['disabled'];
    /**
     * The minimum acceptable value of the range.
     */
    set min(v: SynRange['min']);
    get min(): SynRange['min'];
    /**
     * The maximum acceptable value of the range.
     */
    set max(v: SynRange['max']);
    get max(): SynRange['max'];
    /**
     * The interval at which the range will increase and decrease.
     */
    set step(v: SynRange['step']);
    get step(): SynRange['step'];
    /**
     * The range's size.
     */
    set size(v: SynRange['size']);
    get size(): SynRange['size'];
    /**
     * The preferred placement of the range's tooltip.
     * Use "none" to disable the tooltip
     */
    set tooltipPlacement(v: SynRange['tooltipPlacement']);
    get tooltipPlacement(): SynRange['tooltipPlacement'];
    /**
     * The current values of the input (in ascending order) as a string of space separated values
     */
    set value(v: SynRange['value']);
    get value(): SynRange['value'];
    /**
  * Set to true to restrict the movement of a thumb to its next and previous thumb.
  This only affects multi range components
   */
    set restrictMovement(v: '' | SynRange['restrictMovement']);
    get restrictMovement(): SynRange['restrictMovement'];
    /**
  * 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.
   */
    set form(v: SynRange['form']);
    get form(): SynRange['form'];
    /**
  * A function used to format the tooltip's value.
  The value of the thumb is passed as the only argument.
  The function should return a string to display in the tooltip.
   */
    set tooltipFormatter(v: SynRange['tooltipFormatter']);
    get tooltipFormatter(): SynRange['tooltipFormatter'];
    /**
     * Emitted when the control loses focus.
     */
    synBlurEvent: EventEmitter<SynBlurEvent>;
    /**
     * Emitted when an alteration to the control's value is committed by the user.
     */
    synChangeEvent: EventEmitter<SynChangeEvent>;
    /**
     * Emitted when the control gains focus.
     */
    synFocusEvent: EventEmitter<SynFocusEvent>;
    /**
     * Emitted when the control receives input.
     */
    synInputEvent: EventEmitter<SynInputEvent>;
    /**
     * Emitted when the form control has been checked for validity and its constraints aren't satisfied.
     */
    synInvalidEvent: EventEmitter<SynInvalidEvent>;
    /**
     * Emitted when the user moves a thumb, either via touch or keyboard.
     * Use `Event.preventDefault()` to prevent movement.
     */
    synMoveEvent: EventEmitter<SynMoveEvent>;
    /**
     * Support for two way data binding
     */
    valueChange: EventEmitter<string | null>;
    static ɵfac: i0.ɵɵFactoryDeclaration<SynRangeComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<SynRangeComponent, "syn-range", never, { "ngModelUpdateOn": { "alias": "ngModelUpdateOn"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "helpText": { "alias": "helpText"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; }; "value": { "alias": "value"; "required": false; }; "restrictMovement": { "alias": "restrictMovement"; "required": false; }; "form": { "alias": "form"; "required": false; }; "tooltipFormatter": { "alias": "tooltipFormatter"; "required": false; }; }, { "synBlurEvent": "synBlurEvent"; "synChangeEvent": "synChangeEvent"; "synFocusEvent": "synFocusEvent"; "synInputEvent": "synInputEvent"; "synInvalidEvent": "synInvalidEvent"; "synMoveEvent": "synMoveEvent"; "valueChange": "valueChange"; }, never, ["*"], true, never>;
}

export { SynRangeComponent };