import { type EventEmitter } from '../../stencil-public-runtime'; import type { LoadingChangeDetail, LoadingCompleteDetail, LoadingCompletionBehavior, LoadingIndeterminateStateDetail, LoadingLabelPosition, LoadingMode, LoadingSize, LoadingSpeed, LoadingValueDetail } from './loading.types'; /** * Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/loading?tab=designer). * * @category Feedback * @status stable * @slot label - Rótulo customizado do loading. Quando utilizado, a prop `label` é ignorada. * @slot cancel-button - Conteúdo customizado do botão de cancelar. Quando utilizado, a prop `cancelLabel` é ignorada. * * @part container - Wrapper principal do loading. * @part wrapper - Wrapper do conteúdo do spinner/progress. * @part svg - Elemento SVG principal do loading. * @part percentage - Texto de percentual no modo `progress`. * @part label-wrapper - Wrapper do rótulo no modo `spinner`. * @part cancel-button - Botão de cancelamento no modo `progress` cancelável. */ export declare class Loading { /** * Referência ao elemento host do componente, permitindo manipulação direta do DOM para controle de visibilidade e outras interações. */ el: HTMLBrLoadingElement; /** * Valor exibido no texto de progresso durante a transição. */ private displayedValue; /** * Define a posição da label em relação ao loading. * @default 'bottom' */ labelPosition: LoadingLabelPosition; /** * Identificador único do componente. * Quando omitido, um valor é gerado automaticamente. * * > **Padrão:** valor único gerado por generateUniqueId(). * */ 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' * @deprecated Use `density`. */ size: LoadingSize; /** Densidade visual canônica. Quando informada, tem precedência sobre `size`. */ density?: LoadingSize; /** * Remove o espaçamento externo e oculta visualmente o rótulo, mantendo-o * disponível para tecnologias assistivas. Use em áreas compactas, como * controles de paginação ou campos de formulário. * @default false */ compact: boolean; /** * 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; /** * 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; /** * 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.: limpar 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; /** Evento canônico emitido quando o loading é exibido. */ brLoadingShow: EventEmitter; /** * Notifica que o componente foi ocultado. * @event brDidHide * Payload: `void`. */ brDidHide: EventEmitter; /** Evento canônico emitido quando o loading é ocultado. */ brLoadingHide: EventEmitter; /** * Etapa do ciclo de vida: desmontagem do componente. * Libera recursos de animação pendentes. */ disconnectedCallback(): void; /** * Etapa do ciclo de vida: antes da primeira renderização. * Inicializa o estado visual do progresso. */ componentWillLoad(): 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; }>; /** * Referência da animação ativa do texto de progresso. */ private progressAnimationFrameId?; /** Último estado lógico de atividade no modo `spinner`. */ private isIndeterminateActive; /** * 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(); /** * 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; /** * 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; }