import { EventEmitter } from '../../stencil-public-runtime'; /** * Posições possíveis para a label. */ export type LoadingLabelPosition = 'top' | 'right' | 'bottom' | 'left'; /** * Modo de exibição do loading. */ export type LoadingMode = 'spinner' | 'progress'; /** * Tamanho visual do loading. */ export type LoadingSize = 'small' | 'medium' | 'large'; /** * Velocidade da animação/transição. */ export type LoadingSpeed = 'slow' | 'normal' | 'fast'; /** * Comportamento ao atingir 100% no modo `determinate`. */ export type LoadingCompletionBehavior = 'persist' | 'reset' | 'hide'; /** * Payload do evento de mudança de progresso. */ export type LoadingChangeDetail = { value: number; }; /** * Payload do evento de conclusão do progresso. */ export type LoadingCompleteDetail = { value: number; completion: LoadingCompletionBehavior; }; /** * Payload do evento de reinício e cancelamento do progresso. */ export type LoadingValueDetail = { value: number; }; /** * Payload do evento de estado lógico no modo indeterminado. */ export type LoadingIndeterminateStateDetail = { active: boolean; }; /** * ## 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/loading?tab=designer). */ export declare class Loading { /** * Define a posição da label em relação ao loading. * @default 'bottom' */ labelPosition: LoadingLabelPosition; /** * Referência ao elemento host do componente, permitindo manipulação direta do DOM para controle de visibilidade e outras interações. */ el: HTMLBrLoadingElement; /** * Identificador único do componente, útil para acessibilidade e testes. * Se não for fornecido, um ID único será gerado automaticamente. * @default Gerado automaticamente no formato 'loading-xxxx' onde 'xxxx' é uma sequência aleatória. */ customId?: string; /** * Define o modo de exibição do componente. * @default 'spinner' */ mode: LoadingMode; /** * Define o tamanho visual nos modos `spinner` e `progress`. * @default 'medium' */ size: LoadingSize; /** * Define a velocidade da animação/transição. * @default 'normal' */ speed: LoadingSpeed; /** * Define o rótulo exibido no modo `spinner`. * No modo `progress`, esta prop não tem efeito. * @default undefined */ label?: string; /** * Define o progresso no modo `progress`. * No modo `spinner`, esta prop não tem efeito. * Valores inválidos são normalizados para `0`. * @default 0 */ value: number; /** * Define o comportamento quando o progresso atinge 100. * No modo `spinner`, esta prop não tem efeito. * @default 'persist' */ completion: LoadingCompletionBehavior; /** * Define se o botão de cancelamento será exibido. * Ao pressionar o botão, o evento `brLoadingCancel` é emitido. * No modo `spinner`, esta prop não tem efeito. * @default false */ cancelable: boolean; /** * Define o texto do botão de cancelamento. * No modo `spinner`, esta prop não tem efeito. * @default 'Cancelar' */ cancelLabel: string; /** * Valor exibido no texto de progresso durante a transição. */ private displayedValue; /** * Referência da animação ativa do texto de progresso. */ private progressAnimationFrameId?; /** Último estado lógico de atividade no modo `spinner`. */ private isIndeterminateActive; /** * Notifica mudança de progresso no modo `progress`. * @event brLoadingChange * Payload (`LoadingChangeDetail`): * - `value` (`number`): progresso normalizado (0 a 100). */ brLoadingChange: EventEmitter; /** * Notifica conclusão do progresso no modo `progress`. * @event brLoadingComplete * Payload (`LoadingCompleteDetail`): * - `value` (`number`): progresso normalizado (0 a 100). * - `completion` (`LoadingCompletionBehavior`): ação aplicada ao atingir 100%. * - `persist`: mantém o loading em 100%. * - `reset`: reinicia o progresso para 0. * - `hide`: oculta o componente. */ brLoadingComplete: EventEmitter; /** * Notifica reinício do progresso no modo `progress`. * @event brLoadingReset * Payload (`LoadingValueDetail`): * - `value` (`number`): valor do progresso após o reset. */ brLoadingReset: EventEmitter; /** * Notifica clique no botão de cancelamento no modo `progress`. * Este evento não altera o progresso automaticamente. * A aplicação consumidora define a ação após o cancelamento (ex.: resetar ou ocultar). * @event brLoadingCancel * Payload (`LoadingValueDetail`): * - `value` (`number`): valor de progresso no momento do cancelamento. */ brLoadingCancel: EventEmitter; /** * Notifica mudança do estado lógico no modo `spinner`. * @event brIndeterminateStateChange * Payload (`LoadingIndeterminateStateDetail`): * - `active` (`boolean`): `true` quando ativo; `false` quando inativo. */ brIndeterminateStateChange: EventEmitter; /** * Notifica que o componente foi exibido. * @event brDidShow * Payload: `void`. */ brDidShow: EventEmitter; /** * Notifica que o componente foi ocultado. * @event brDidHide * Payload: `void`. */ brDidHide: EventEmitter; /** * Reage a mudanças em `value` no modo `progress`. * @param newValue Novo valor recebido. */ handleCompletion(newValue: number): void; /** * Reage a mudanças em `mode` e atualiza o estado lógico de atividade. */ handleModeChange(): void; /** * Etapa do ciclo de vida: antes da primeira renderização. * Inicializa o estado visual do progresso. */ componentWillLoad(): void; /** * Etapa do ciclo de vida: desmontagem do componente. * Libera recursos de animação pendentes. */ disconnectedCallback(): void; /** * Define o valor do progresso. * @param value Valor desejado. * @returns Progresso normalizado. */ setValue(value: number): Promise<{ value: number; }>; /** * Soma um valor ao progresso atual. * @param step Incremento aplicado. * @returns Progresso normalizado. */ incrementValue(step?: number): Promise<{ value: number; }>; /** * Define o progresso como concluído. * @returns Progresso normalizado. */ complete(): Promise<{ value: number; }>; /** * Reinicia o progresso e exibe o componente. * @returns Progresso normalizado. */ reset(): Promise<{ value: number; }>; /** * Exibe o componente. * @returns Estado de visibilidade. */ show(): Promise<{ visible: boolean; }>; /** * Oculta o componente. * @returns Estado de visibilidade. */ hide(): Promise<{ visible: boolean; }>; /** * Trata o clique no botão de cancelamento. */ private handleCancelClick; /** * Aplica a ação configurada ao atingir 100% no modo `progress`. * @param value Valor atual do progresso. */ private applyCompletionBehavior; /** * Inicializa o valor exibido no texto de progresso. */ private initializeProgressDisplay; /** * Libera recursos usados pela animação de progresso. */ private cleanupProgressResources; /** * Emite mudança de estado lógico para o modo `spinner` quando necessário. */ private syncIndeterminateActiveState; /** * Sincroniza o texto de percentual com a transição visual do círculo. * @param targetValue Valor final do progresso normalizado. */ private syncDisplayedProgress; /** * Interpolação para suavizar a animação do percentual. * @param time Progresso normalizado da animação (0 a 1). * @returns Valor interpolado entre 0 e 1. */ private easeProgress; /** Cancela a animação de percentual em andamento. */ private stopProgressAnimation; /** * Atualiza a visibilidade e emite o evento correspondente. * @param visible Define se o componente ficará visível. * @private */ private setVisibility; /** * Normaliza um valor arbitrário de progresso para o intervalo de 0 a 100. * Valores inválidos (incluindo string vazia e NaN) são convertidos para 0. * Também sincroniza `this.value` internamente quando necessário. */ private normalizeInputValue; private toValidProgressValue; /** * Retorna o progresso no intervalo de 0 a 100. * @private */ private get normalizedValue(); /** * Retorna a dimensão do SVG. * @private */ private get dimension(); /** * Retorna a espessura do traço do círculo. * @private */ private get strokeWidth(); /** * Retorna o tamanho da fonte do percentual no modo `progress`. * @private */ private get percentageFontSize(); /** * Retorna a coordenada central do SVG. * @private */ private get center(); /** * Retorna o raio útil do círculo. * @private */ private get radius(); /** * Retorna a circunferência do círculo. * @private */ private get circumference(); /** * Retorna o deslocamento do traço conforme o progresso. * @private */ private get progressOffset(); /** * Monta o mapa de classes CSS do host interno. * @returns Mapa de classes aplicadas. * @private */ private getCssClassMap; /** * Renderiza o modo `spinner`. * @returns Estrutura JSX do spinner. */ private renderIndeterminate; /** * Renderiza spinner com label em qualquer posição. */ private renderSpinnerWithLabelPosition; /** * Renderiza o modo `progress`. * @returns Estrutura JSX do progresso circular. * @private */ private renderDeterminate; /** * Renderiza o componente conforme o modo atual. * @returns Estrutura JSX final. */ render(): any; }