feat(guided-tour): adiciona novo componente po-guided-tour com tour interativo

[alinecbgml]

po-guided-tour

Descrição

Adiciona novo componente po-guided-tour que oferece um tour interativo e guiado pela aplicação. Este componente destaca elementos da página com um overlay escurecido, exibe um popover com explicações e oferece controles de navegação.

Features

• ✨ Destaque de elementos com overlay escurecido
• 🎯 Popover posicionável com explicações
• ⬅️➡️ Navegação (próximo, anterior, pular, completar)
• 🔒 Bloqueio de interações quando necessário
• 💾 Persistência de estado em localStorage
• 📊 Barra de progresso visual
• ♿ Acessibilidade completa (ARIA labels, navegação por teclado)
• 🎨 Totalmente customizável e responsivo
• ⚡ OnPush change detection para performance

Arquitetura

Interfaces:

• PoGuidedTourStep: Define cada passo do tour
• PoGuidedTourConfig: Configuração geral do tour

Métodos Públicos:

• start(): Inicia o tour
• next(): Vai para o próximo passo
• previous(): Volta para o passo anterior
• goToStep(index): Vai para um passo específico
• complete(): Marca como completo
• cancel(): Cancela sem marcar como completo
• skipTour(): Marca como "não mostrar novamente"
• getCurrentStep(): Obtém o passo atual
• getProgress(): Obtém percentual de progresso

Eventos:

• p-on-complete: Emitido quando o tour termina
• p-on-cancel: Emitido quando o tour é cancelado
• p-on-step-change: Emitido ao mudar de passo

Exemplo de Uso

const tourSteps: PoGuidedTourStep[] = [
  {
    id: 'welcome',
    element: '.welcome-button',
    title: 'Welcome',
    description: 'Click here to get started',
    position: 'bottom',
    blockInteraction: false
  }
];

guidedTour.steps = tourSteps;
guidedTour.start();

Checklist

• Código seguindo style guide do PO UI
• Interfaces TypeScript bem definidas
• Componente com OnPush change detection
• Documentação em JSDoc
• Acessibilidade (ARIA)
• Testes unitários (será adicionado em PR subsequente)
• Documentação Dgeni (será adicionado em PR subsequente)
• Sample Labs (será adicionado em PR subsequente)

Notas

Esta é uma implementação base do componente seguindo os padrões do PO UI Design System. As futuras PRs adicionarão testes unitários, documentação completa e exemplos de uso.