import * as i0 from '@angular/core'; import { ElementRef, NgZone, EventEmitter } from '@angular/core'; import SynRange from '@synergy-design-system/components/components/range/range.component.js'; import { 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 * @since 2.6.0 * * @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']; /** * Sets the range to a readonly state. */ set readonly(v: '' | SynRange['readonly']); get readonly(): SynRange['readonly']; /** * 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 `
` 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; /** * Emitted when an alteration to the control's value is committed by the user. */ synChangeEvent: EventEmitter; /** * Emitted when the control gains focus. */ synFocusEvent: EventEmitter; /** * Emitted when the control receives input. */ synInputEvent: EventEmitter; /** * Emitted when the form control has been checked for validity and its constraints aren't satisfied. */ synInvalidEvent: EventEmitter; /** * Emitted when the user moves a thumb, either via touch or keyboard. * Use `Event.preventDefault()` to prevent movement. */ synMoveEvent: EventEmitter; /** * Support for two way data binding */ valueChange: EventEmitter; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } export { SynRangeComponent };