import type { EventEmitter } from '../../stencil-public-runtime'; import { type FormValidationState } from '../../shared/utils/form'; import { type FormValidationChangeDetail } from '../../shared/utils/validator'; import type { SliderDensity, SliderRangeValue, SliderValidator } from './slider.types'; /** * ## Design System * * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/slider?tab=designer). * * @category Formulários * @status stable * @slot ref-start - Conteúdo exibido como referência inicial abaixo da trilha. * @slot ref-end - Conteúdo exibido como referência final abaixo da trilha. * @slot feedback - Mensagem de validação, normalmente um `br-message`. * * @part base - Contêiner principal do slider. * @part layout - Contêiner de layout do slider. * @part body - Área que agrupa trilha e referências. * @part track - Área interativa da trilha. * @part track-visual - Trilha visual do slider. * @part tick-labels - Contêiner das etiquetas das marcações. * @part tick-label - Etiqueta de uma marcação intermediária. * @part filled-track - Trecho preenchido da trilha. * @part value-label - Etiqueta com o valor da alça. * @part value-label-arrow - Seta da etiqueta de valor. * @part thumb - Alça de controle do slider. * @part thumb-start - Alça inicial do slider. * @part thumb-end - Alça final do slider em modo composto. * @part references - Contêiner das referências inicial e final. * @part reference-start - Referência inicial. * @part reference-end - Referência final. * @part reference-bound - Valor fixo de limite renderizado por `show-bounds`. * @part input-wrapper - Contêiner do campo numérico. * @part input - Campo numérico sincronizado com o slider. * @part feedback - Contêiner da mensagem de validação. */ export declare class Slider { elementInternals: ElementInternals; formDisabledCallback(disabled: boolean): void; formResetCallback(): void; formStateRestoreCallback(state: string | File | FormData | null): void; el: HTMLElement; /** * Indica se alguma alça está sendo arrastada. */ private dragging; private formDisabled; /** * Indica se o slot `ref-end` possui conteúdo. */ private hasRefEnd; /** * Indica se o slot `ref-start` possui conteúdo. */ private hasRefStart; private hasFeedbackSlot; private customValidationMessage; private validatorMessage; private isValidating; /** * Identificador único. * Caso não seja fornecido, um ID gerado automaticamente será usado. */ readonly customId: string; /** * Nome do campo, utilizado em formulários nativos (`
`). */ readonly name: string; /** * Texto descritivo associado ao slider para acessibilidade. */ readonly label: string; /** * Valor mínimo aceito pelo slider. */ readonly min: number; /** * Valor máximo aceito pelo slider. */ readonly max: number; /** * Incremento aplicado a cada passo. */ readonly step: number; /** Regra síncrona ou assíncrona aplicada ao número ou intervalo selecionado. */ readonly validator?: SliderValidator; /** * Valor atual do slider (alça inicial no modo composto). */ value: number; /** * Valor da alça final no modo composto (`range`). * Quando não fornecido em modo composto, assume o valor de `max`. * @deprecated Use `rangeValue`. */ valueEnd: number; /** Valor estruturado das duas alças no modo `range`. */ rangeValue?: SliderRangeValue; /** * Desativa o slider, tornando-o não interativo. */ readonly disabled: boolean; /** * Densidade da alça de controle. * `small` = 16px (desktop compacto), `medium` = 20px (desktop padrão), `large` = 24px (mobile). */ readonly density: SliderDensity; /** * Exibe o slider na orientação vertical. * @deprecated Use `orientation`. */ readonly vertical: boolean; /** Orientação canônica. Quando informada, tem precedência sobre `vertical`. */ readonly orientation?: 'horizontal' | 'vertical'; /** * Ativa o modo composto com duas alças para seleção de faixa. */ readonly range: boolean; /** * Exibe etiqueta com o valor atual acima da alça (horizontal) ou à esquerda (vertical). * Ignorado quando `show-input` está ativo. */ readonly showLabel: boolean; /** * Exibe campo de entrada numérico sincronizado com a alça. * Quando ativo, a etiqueta de valor não é exibida. */ readonly showInput: boolean; /** * Exibe gradações na trilha como pequenos espaços que indicam os steps disponíveis, * forçando a alça de controle a saltar entre os valores predefinidos e * impossibilitando a seleção de valores aleatórios. */ readonly showTicks: boolean; /** Exibe os valores das marcações derivadas de `min`, `max` e `step`. */ readonly showTickLabels: boolean; /** * Exibe os limites nas referências inicial e final: `min` no início e `max` no fim * (limites fixos), tanto em modo simples quanto em modo composto (`range`). O valor * selecionado por cada alça é exibido na etiqueta (`show-label`), não nas referências. * Quando ativo, sobrescreve o conteúdo dos slots `ref-start` e `ref-end`. */ readonly showBounds: boolean; onValueChange(newValue: number): void; onValueEndChange(newValue: number): void; onRangeValueChange(newValue?: SliderRangeValue): void; /** * Disparado após alteração do valor da alça inicial. * @deprecated Use o evento nativo `input`. */ brDidChangeValue: EventEmitter; /** * Disparado após alteração do valor da alça final (modo composto). * @deprecated Use o evento nativo `input` e leia `event.target.rangeValue`. */ brDidChangeValueEnd: EventEmitter; /** Emitido ao iniciar e concluir a validação customizada. */ brSliderValidationChange: EventEmitter; private trackEl?; private thumbStartEl?; private thumbEndEl?; private valueLabelStartEl?; private valueLabelEndEl?; private arrowStartEl?; private arrowEndEl?; private cleanupLabelStart?; private cleanupLabelEnd?; private inputEl?; private inputEditing; private draggingThumb; private tickValuesCacheKey; private tickValuesCache; private static readonly MAX_VISUAL_TICKS; private initialValue; private initialValueEnd; private validationRunId; private dragRect; private readonly pointerBatch; componentWillLoad(): void; componentDidLoad(): void; componentDidUpdate(): void; disconnectedCallback(): void; /** Retorna se o slider atende às constraints configuradas. */ checkValidity(): Promise; /** Valida e solicita ao navegador a apresentação do erro atual. */ reportValidity(): Promise; /** Define ou limpa uma mensagem de validade customizada. */ setCustomValidity(message: string): Promise; /** Executa o validator do slider e retorna se o valor atual é válido. */ validate(): Promise; /** Retorna um snapshot serializável da Constraint Validation API. */ getValidationState(): Promise; private get effectiveVertical(); private setupLabelAutoUpdate; private positionLabels; private positionSingleLabel; private getFormValue; private syncRangeValue; private clamp; private snapToStep; private percent; private percentOf; private getFilledStyle; private getTrackMaskStyle; private getTickValues; private getValueFromX; private getValueFromY; private nearerThumb; private applyUpdate; private readonly handlePointerDown; private readonly handlePointerMove; private readonly handlePointerUp; private readonly handleInputInput; private readonly handleInputBlur; private calculateNextSliderValue; handleKeyDown(event: KeyboardEvent): void; private getCssClassMap; private shouldShowValueLabel; private isDisabled; private updateValidity; private getThumbStyle; private setValueLabelElement; private setValueLabelArrowElement; private setThumbElement; private renderValueLabel; private renderThumb; private renderReferences; private renderInput; private renderTrack; private renderTickLabels; render(): any; }