import { type EventEmitter } from '../../stencil-public-runtime'; import type { CarouselColorMode, CarouselDirection, CarouselImageFit, CarouselIndicatorPosition, CarouselIndicatorType, CarouselNavPosition, CarouselPageChangeDetail } from './carousel.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/carousel?tab=designer). * * @category Conteúdo * @status stable * @slot default - Slot para os slides do carrossel. Aceita exclusivamente elementos `br-carousel-page`. * * @part container - Elemento raiz do carrossel. Recebe `role="region"` e `aria-roledescription="carousel"`. * @part stage - Área do palco que contém os slides. Recebe `aria-live` e `aria-atomic`. * @part nav-prev - Wrapper do botão de navegação para o slide anterior. * @part nav-next - Wrapper do botão de navegação para o próximo slide. * @part indicator - Wrapper do indicador de páginas. * - Quando `indicatorType="simple"`: renderiza `br-step` em `mode="tablist"`. * - Quando `indicatorType="textual"`: renderiza um `span[aria-live]` com "X/N". * @part play-button - Wrapper do botão de play/pause. Presente apenas quando `autoPlay=true`. */ export declare class Carousel { /** * Referência ao elemento host do componente. */ el: HTMLElement; private activePage; private isPlaying; /** * `true` somente enquanto o timer de autoPlay está ativamente disparando. * Difere de `isPlaying`: ao pausar por hover/foco, `isPlaying` permanece `true` * mas `isRotating` torna-se `false`, liberando o `aria-live` para anunciar * mudanças manuais de slide ao leitor de tela. */ private isRotating; /** Lista de slides. Declarada como @State para que a reatribuição via slotchange acione re-render automaticamente. */ private pages; /** * Identificador único do componente. * Quando omitido, um valor é gerado automaticamente. * * > **Padrão:** valor único gerado por generateUniqueId(). * */ customId: string; /** * Rótulo acessível do carrossel. * Não deve conter a palavra "carrossel" (W3C APG). * Atribuído ao `aria-label` do container raiz. */ readonly ariaLabel: string; /** * Posição dos botões de navegação (prev/next) em relação ao palco. * - `outside`: botões ficam nas laterais externas ao palco. * - `inside`: botões ficam sobrepostos dentro do palco, ocupando toda a altura. */ readonly navPosition: CarouselNavPosition; /** * Define o tipo de indicador de páginas renderizado. * - `simple`: dots usando `br-step` em modo controller. * - `textual`: texto "X/N" com `aria-live`. * - `none`: sem indicador. */ readonly indicatorType: CarouselIndicatorType; /** * Posição do indicador de páginas em relação ao palco. * Ignorada quando `indicatorType="none"`. * - `outside`: indicador fica abaixo do palco. * - `inside`: indicador fica sobreposto ao conteúdo. */ readonly indicatorPosition: CarouselIndicatorPosition; /** * Habilita a navegação circular entre os slides. * Quando true, os botões "Anterior" e "Próximo" permanecem sempre habilitados: avançar a partir do último slide retorna ao primeiro, e retroceder a partir do primeiro leva ao último. * Se autoPlay estiver ativado, o comportamento circular será aplicado automaticamente, independentemente deste valor. * @deprecated Use `circular`. */ readonly isCircular: boolean; /** Habilita navegação circular. Quando informada, tem precedência sobre `isCircular`. */ readonly circular?: boolean; /** * Habilita reprodução automática. * Pausa em hover e foco (W3C). Ativa o loop circular automaticamente. * Não recomendado em dispositivos móveis. * @deprecated Use `autoplay`. */ readonly autoPlay: boolean; /** Habilita reprodução automática. Quando informada, tem precedência sobre `autoPlay`. */ readonly autoplay?: boolean; /** * Intervalo em milissegundos entre cada avanço automático. * Só tem efeito quando `autoPlay=true`. */ readonly interval: number; /** * Direção de navegação automática do carrossel. * - `left`: retrocede (vai para o slide anterior). * - `right`: avança (vai para o próximo slide). * Só tem efeito quando `autoPlay=true`. */ readonly direction: CarouselDirection; /** * Aplica esquema de cores escuro ao componente. */ readonly colorMode: CarouselColorMode; /** * Exibe botões de navegação em dispositivos móveis. * Por padrão os botões são ocultados no breakpoint `sm`. */ readonly mobileNav: boolean; /** * Altura mínima do palco do carrossel. * Aceita qualquer valor CSS válido para `min-height` (ex.: `400px`, `50vh`). */ readonly minHeight: string; /** * Altura do carrossel. * Aceita qualquer valor CSS válido para `height` (ex.: `400px`, `50vh`). */ readonly height: string; /** * Largura máxima do carrossel. * Quando definido, o componente é centralizado horizontalmente. * Aceita qualquer valor CSS válido para `max-width` (ex.: `800px`, `64rem`). */ readonly maxWidth: string; /** * Ajuste aplicado a imagens filhas diretas de `br-carousel-page`. */ readonly imageFit: CarouselImageFit; onActivePageChange(newVal: number, oldVal: number): void; /** * Emitido quando o slide ativo muda. * Disparado por clique nos botões de navegação, clique no indicador de step, * gesto swipe (apenas em mobile, breakpoint < 576px) ou avanço automático. * `activePage` é 1-based: o primeiro slide emite `1`, o segundo `2`, e assim por diante. */ brDidPageChange: EventEmitter; /** Evento canônico emitido quando o slide ativo muda. */ brCarouselPageChange: EventEmitter; /** * Emitido quando a reprodução automática é iniciada ou retomada. */ brDidAutoPlayStart: EventEmitter; /** Evento canônico emitido quando a reprodução automática começa. */ brCarouselAutoplayStart: EventEmitter; /** * Emitido quando a reprodução automática é pausada. */ brDidAutoPlayPause: EventEmitter; /** Evento canônico emitido quando a reprodução automática é pausada. */ brCarouselAutoplayPause: EventEmitter; disconnectedCallback(): void; componentWillLoad(): void; componentDidLoad(): void; /** * Navegação por teclado para o modo tablist (`indicatorType="simple"`). * * O W3C APG Carousel Pattern especifica que, quando os controles de seleção de slide * são implementados como tabs, a interação de teclado segue o * {@link https://www.w3.org/WAI/ARIA/apg/patterns/tabs/ Tabs Pattern (W3C APG)}. * Esse padrão define o comportamento de roving tabindex com as teclas: * - `ArrowLeft` / `ArrowRight` (ou `ArrowUp` / `ArrowDown`): move o foco entre as tabs. * - `Home`: move o foco para a primeira tab. * - `End`: move o foco para a última tab. * * O handler está no `br-carousel` (e não no `br-step`) porque a lógica de * `effectiveCircular` é uma responsabilidade do carrossel, mantendo uma única * fonte de verdade para a navegação circular. * * O evento `keydown` é composto (`composed: true`), portanto borbulha através do * shadow DOM do `br-step-item` até o host do `br-carousel`. */ onTablistKeydown(e: KeyboardEvent): void; /** Métodos públicos */ /** * Avança para o próximo slide. Respeita a prop `isCircular` (ou ativo automaticamente com `autoPlay`). */ nextPage(): Promise; /** * Retorna ao slide anterior. Respeita a prop `isCircular` (ou ativo automaticamente com `autoPlay`). */ previousPage(): Promise; /** * Navega para o slide de número `index` (1 = primeiro slide, 2 = segundo, …). * Valores fora do intervalo válido são ignorados. */ goToPage(index: number): Promise; /** * Retorna o número do slide atualmente ativo (1 = primeiro slide, 2 = segundo, …). */ getActivePage(): Promise; /** * Inicia ou retoma a reprodução automática programaticamente. */ play(): Promise; /** * Pausa a reprodução automática programaticamente. */ pause(): Promise; /** * Retorna `true` se a reprodução automática está ativa no momento. */ getIsPlaying(): Promise; private stepRef; private autoPlayTimer; private isPausedByFocus; /** Rastreia se o cursor está sobre o carrossel (para evitar retomar ao sair do foco enquanto hover ativo). */ private isHovering; /** Quando true, o usuário iniciou explicitamente via botão — hover e foco não pausam a rotação. */ private isUserExplicitlyPlaying; private stageRef; private carouselSwipe; private slotEl; private readonly MOBILE_MQ; private mobileMediaQuery; private static readonly NAVIGATION_KEYS; /** * Retorna os slides atribuídos ao slot do carrossel. * * Usa `slot.assignedElements()` quando o slot já está disponível (após `componentDidLoad`): * a API retorna diretamente a lista interna do browser. * * Recorre a `querySelectorAll` apenas em `componentWillLoad`, quando o shadow DOM * ainda não foi renderizado e `slotEl` é `null`. */ private get slideElements(); /** * Reatualiza a lista de slides e reinicializa os atributos quando o conteúdo * do slot muda (slides adicionados ou removidos dinamicamente). */ private onSlotChange; private onBreakpointChange; private initAutoPlay; /** * Retorna o ID único de um slide pelo índice (0-based). * Prioriza o `customId` definido no próprio `br-carousel-page`, quando presente. * Caso contrário, gera automaticamente no formato `{carousel-id}-slide-{n}`. * Usado para vincular `controls-id` das tabs ao `id` do tabpanel correspondente. */ private slideId; /** * Circular efetivo: ativo quando `isCircular=true` OU quando `autoPlay=true`. * Usar este getter em toda a lógica interna em vez de `this.isCircular` diretamente. */ private get effectiveCircular(); private get effectiveAutoplay(); /** * Reposiciona todos os slides inativos com base no índice ativo. * Slides após o ativo ficam à direita (100%), antes ficam à esquerda (-100%). */ private positionSlides; private initPages; private goTo; /** * Mantém o atributo `active` dos `br-step-item` filhos do `br-step` em sincronia * com o slide ativo. Recebe o novo e o antigo índice para otimizar a atualização (removendo o atributo apenas do item anterior, em vez de iterar por todos os itens). * Se `oldVal` for `null`, atualiza todos os itens (caso de inicialização ou mudança completa de slides). */ private syncStepIndicator; private getDataStage; private scheduleInterval; private clearTimer; private get isPrevDisabled(); private get isNextDisabled(); /** Handlers de eventos do DOM — mouse, foco e interação do usuário. */ private onMouseEnter; private onMouseLeave; private onFocusIn; private onFocusOut; /** Swipe — configuração e limpeza de gestos touch/pointer em mobile. */ private onSwipeLeft; private onSwipeRight; private setupSwipeListeners; private cleanupSwipeListeners; /** * Calcula o índice alvo com base na tecla pressionada no modo tablist. */ private resolveTablistKeyIndex; /** * Move o foco para o `br-step-item` de índice `index`. * * Em modo tablist, a semântica ARIA (`role="tab"`, `tabIndex`, `aria-selected`) é * aplicada diretamente no host do `br-step-item` — não no botão interno, que fica * inerte. Por isso o foco vai para o próprio host, e o ring visual é controlado * via `:host(.role-tab:focus-visible)` no CSS do componente. */ private focusStepItem; private onStepChange; private onPrevClick; private onNextClick; private onPlayToggle; private getCssClassMap; private getHostStyle; private renderPlayButton; private renderNavButton; private renderIndicator; render(): any; }