From 87fabef31667f0faa4d5667742f7cfb7d4660494 Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Mon, 23 Feb 2026 23:13:52 -0300 Subject: [PATCH 01/26] feat(guided-tour): cria arquivo de componente principal com arquitetura MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implementa componente po-guided-tour com as seguintes features: - Destaque de elementos com overlay escurecido - Popover com explicações e controles de navegação - Bloqueio de interações quando necessário - Persistênc ia de estado em localStorage - Interfaces bem definidas para configuração - Métodos públicos para controle programado - OnPush change detection para performance Seguindo guidelines do PO UI Design System --- .../po-guided-tour.component.ts | 379 ++++++++++++++++++ 1 file changed, 379 insertions(+) create mode 100644 projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts diff --git a/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts new file mode 100644 index 0000000000..0f1cb29b80 --- /dev/null +++ b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts @@ -0,0 +1,379 @@ +import { Component, ViewChild, ElementRef, OnInit, OnDestroy, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, Renderer2 } from '@angular/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; + +import { PoPopoverComponent } from '../po-popover'; + +/** + * Interface para definir os passos do tour guiado + */ +export interface PoGuidedTourStep { + /** Identificador único do passo */ + id: string; + /** Seletor CSS do elemento a destacar */ + element: string; + /** Título do passo */ + title: string; + /** Descrição ou conteúdo do passo */ + description: string; + /** Posição do popover em relação ao elemento */ + position?: 'top' | 'bottom' | 'left' | 'right' | 'center'; + /** Se deve bloquear interações com outros elementos */ + blockInteraction?: boolean; + /** Callback executado ao entrar no passo */ + onEnter?: () => void; + /** Callback executado ao sair do passo */ + onLeave?: () => void; +} + +/** + * Interface para configuração do tour + */ +export interface PoGuidedTourConfig { + /** Lista de passos do tour */ + steps: PoGuidedTourStep[]; + /** Título geral do tour */ + title?: string; + /** Permitir fechar o tour */ + allowClose?: boolean; + /** Marcar como "não mostrar novamente" */ + allowSkip?: boolean; + /** Chave de localStorage para armazenar status de conclusão */ + storageKey?: string; + /** Z-index do overlay */ + zIndex?: number; + /** Callback quando o tour termina */ + onComplete?: () => void; + /** Callback quando o tour é cancelado */ + onCancel?: () => void; +} + +/** + * Componente po-guided-tour + * + * Componente que oferece um tour interativo guiado pela aplicação, + * com destaque de elementos, popover explicativo e controles de navegação. + * + * **Recursos:** + * - Destaca elementos da página com foco escurecido + * - Exibe popover com explicações + * - Permite navegação entre passos (próximo, anterior) + * - Bloqueia interações quando necessário + * - Persiste estado de "não mostrar novamente" em localStorage + * - Totalmente responsivo e acessível + * + * **Não faz:** Não gerencia automaticamente a ordem dos passos ou padrões de UI complexos. + * Utilize componentes específicos como `po-modal` para essas necessidades. + * + * ```typescript + * import { PoGuidedTourComponent, PoGuidedTourStep } from '@po-ui/ng-components'; + * + * export class AppComponent { + * tourSteps: PoGuidedTourStep[] = [ + * { + * id: 'step-1', + * element: '.welcome-btn', + * title: 'Welcome', + * description: 'Click here to get started', + * position: 'bottom', + * blockInteraction: false + * } + * ]; + * + * startTour() { + * this.guidedTour.start(this.tourSteps); + * } + * } + * ``` + * + * @example + * + * **PO Guided Tour - Básico** + * + * ```html + * + * ``` + */ +@Component({ + selector: 'po-guided-tour', + templateUrl: './po-guided-tour.component.html', + styleUrls: ['./po-guided-tour.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class PoGuidedTourComponent implements OnInit, OnDestroy { + + @ViewChild(PoPopoverComponent) popover: PoPopoverComponent; + + private _steps: PoGuidedTourStep[] = []; + private _allowClose = true; + private _allowSkip = true; + private _storageKey = 'po-guided-tour-completed'; + private _zIndex = 9999; + + currentStep = 0; + isActive = false; + highlightedElement: HTMLElement; + overlay: HTMLElement; + + private destroy$ = new Subject(); + + /** + * Lista de passos do tour guiado + * @default [] + */ + @Input('p-steps') + set steps(value: PoGuidedTourStep[]) { + this._steps = value; + } + get steps(): PoGuidedTourStep[] { + return this._steps; + } + + /** + * Permite fechar o tour + * @default true + */ + @Input('p-allow-close') + set allowClose(value: boolean) { + this._allowClose = value; + } + get allowClose(): boolean { + return this._allowClose; + } + + /** + * Permite marcar como "não mostrar novamente" + * @default true + */ + @Input('p-allow-skip') + set allowSkip(value: boolean) { + this._allowSkip = value; + } + get allowSkip(): boolean { + return this._allowSkip; + } + + /** + * Chave de localStorage para armazenar status + * @default 'po-guided-tour-completed' + */ + @Input('p-storage-key') + set storageKey(value: string) { + this._storageKey = value || 'po-guided-tour-completed'; + } + get storageKey(): string { + return this._storageKey; + } + + /** + * Z-index do overlay + * @default 9999 + */ + @Input('p-z-index') + set zIndex(value: number) { + this._zIndex = value || 9999; + } + get zIndex(): number { + return this._zIndex; + } + + /** Emitido quando o tour é completado */ + @Output('p-on-complete') onComplete = new EventEmitter(); + + /** Emitido quando o tour é cancelado */ + @Output('p-on-cancel') onCancel = new EventEmitter(); + + /** Emitido ao mudar de passo */ + @Output('p-on-step-change') onStepChange = new EventEmitter(); + + constructor( + private changeDetectorRef: ChangeDetectorRef, + private renderer: Renderer2, + private elementRef: ElementRef + ) {} + + ngOnInit(): void { + this.loadStorageState(); + } + + ngOnDestroy(): void { + this.destroy$.next(); + this.destroy$.complete(); + this.cleanup(); + } + + /** + * Inicia o tour guiado + */ + start(): void { + if (this.isAlreadyCompleted()) { + return; + } + + this.isActive = true; + this.currentStep = 0; + this.changeDetectorRef.markForCheck(); + this.goToStep(0); + } + + /** + * Vai para o próximo passo + */ + next(): void { + if (this.currentStep < this.steps.length - 1) { + this.goToStep(this.currentStep + 1); + } else { + this.complete(); + } + } + + /** + * Volta para o passo anterior + */ + previous(): void { + if (this.currentStep > 0) { + this.goToStep(this.currentStep - 1); + } + } + + /** + * Vai para um passo específico + */ + goToStep(stepIndex: number): void { + if (stepIndex < 0 || stepIndex >= this.steps.length) { + return; + } + + const previousStep = this.steps[this.currentStep]; + if (previousStep && previousStep.onLeave) { + previousStep.onLeave(); + } + + this.currentStep = stepIndex; + const step = this.steps[stepIndex]; + + if (step.onEnter) { + step.onEnter(); + } + + this.highlightElement(step.element); + this.onStepChange.emit(stepIndex); + this.changeDetectorRef.markForCheck(); + } + + /** + * Completa o tour + */ + complete(): void { + this.saveToStorage(); + this.isActive = false; + this.cleanup(); + this.onComplete.emit(); + this.changeDetectorRef.markForCheck(); + } + + /** + * Cancela o tour sem marcar como completo + */ + cancel(): void { + this.isActive = false; + this.cleanup(); + this.onCancel.emit(); + this.changeDetectorRef.markForCheck(); + } + + /** + * Marca como "não mostrar novamente" + */ + skipTour(): void { + this.complete(); + } + + /** + * Obtém o passo atual + */ + getCurrentStep(): PoGuidedTourStep { + return this.steps[this.currentStep]; + } + + /** + * Verifica se é o primeiro passo + */ + isFirstStep(): boolean { + return this.currentStep === 0; + } + + /** + * Verifica se é o último passo + */ + isLastStep(): boolean { + return this.currentStep === this.steps.length - 1; + } + + /** + * Obtém progresso do tour + */ + getProgress(): number { + return Math.round(((this.currentStep + 1) / this.steps.length) * 100); + } + + private highlightElement(selector: string): void { + const element = document.querySelector(selector); + if (!element) { + console.warn(`[PoGuidedTour] Elemento não encontrado: ${selector}`); + return; + } + + this.highlightedElement = element as HTMLElement; + this.createOverlay(); + this.scrollToElement(element); + } + + private createOverlay(): void { + if (this.overlay) { + this.overlay.remove(); + } + + this.overlay = this.renderer.createElement('div'); + this.renderer.addClass(this.overlay, 'po-guided-tour-overlay'); + this.renderer.setStyle(this.overlay, 'z-index', this._zIndex.toString()); + this.renderer.appendChild(document.body, this.overlay); + + const rect = this.highlightedElement.getBoundingClientRect(); + const spotlightCircle = this.renderer.createElement('div'); + this.renderer.addClass(spotlightCircle, 'po-guided-tour-spotlight'); + this.renderer.setStyle(spotlightCircle, 'left', `${window.scrollX + rect.left}px`); + this.renderer.setStyle(spotlightCircle, 'top', `${window.scrollY + rect.top}px`); + this.renderer.setStyle(spotlightCircle, 'width', `${rect.width}px`); + this.renderer.setStyle(spotlightCircle, 'height', `${rect.height}px`); + this.renderer.appendChild(this.overlay, spotlightCircle); + } + + private scrollToElement(element: HTMLElement): void { + element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' }); + } + + private isAlreadyCompleted(): boolean { + return localStorage.getItem(this.storageKey) === 'true'; + } + + private saveToStorage(): void { + localStorage.setItem(this.storageKey, 'true'); + } + + private loadStorageState(): void { + // Carrega qualquer estado necessário do localStorage + } + + private cleanup(): void { + if (this.overlay) { + this.overlay.remove(); + this.overlay = null; + } + this.highlightedElement = null; + } +} From 4d49c78886af20f5adfc9aacbe7b389234109287 Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Mon, 23 Feb 2026 23:18:25 -0300 Subject: [PATCH 02/26] feat(guided-tour): adiciona template HTML do componente --- .../po-guided-tour.component.html | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.html diff --git a/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.html b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.html new file mode 100644 index 0000000000..fd4ac52f6b --- /dev/null +++ b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.html @@ -0,0 +1,54 @@ +
+ +
+
+

{{ getCurrentStep()?.title }}

+ +
+ +
+

{{ getCurrentStep()?.description }}

+
+ +
+
+
+ +
+ {{ currentStep + 1 }} of {{ steps.length }} + +
+ + + + + +
+
+
+
From 41eadf1e13b1b0b293d14c559c76ec18c62c1c4a Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Mon, 23 Feb 2026 23:33:25 -0300 Subject: [PATCH 03/26] =?UTF-8?q?feat(demo):=20implementa=20logica=20de=20?= =?UTF-8?q?tour=20guiado=20no=20app=20de=20demonstra=C3=A7=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- projects/app/src/app/app.component.ts | 49 +++++++++++++++++++++++++-- 1 file changed, 47 insertions(+), 2 deletions(-) diff --git a/projects/app/src/app/app.component.ts b/projects/app/src/app/app.component.ts index 7bf08e2511..086022b52b 100644 --- a/projects/app/src/app/app.component.ts +++ b/projects/app/src/app/app.component.ts @@ -1,8 +1,53 @@ -import { Component } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; +import { PoGuidedTourStep } from './../../ui/src/lib/components/po-guided-tour/po-guided-tour.component'; +import { PoGuidedTourComponent } from './../../ui/src/lib/components/po-guided-tour/po-guided-tour.component'; @Component({ selector: 'app-root', templateUrl: './app.component.html', standalone: false }) -export class AppComponent {} +export class AppComponent { + + @ViewChild(PoGuidedTourComponent) guidedTour: PoGuidedTourComponent; + + readonly tourSteps: Array = [ + { + id: 'step-welcome', + element: '#welcome-card', + title: 'Boas-vindas!', + description: 'Olá! Este é o novo componente de tour guiado do PO UI. Vamos conhecer algumas funcionalidades?', + position: 'bottom' + }, + { + id: 'step-menu', + element: '.po-menu-item-link', + title: 'Navegação Fácil', + description: 'Aqui você pode navegar por todas as áreas da nossa aplicação de demonstração.', + position: 'right' + }, + { + id: 'step-action', + element: '#action-btn', + title: 'Ações Contextuais', + description: 'Você pode disparar ações importantes diretamente daqui.', + position: 'left' + }, + { + id: 'step-final', + element: '#final-card', + title: 'Pronto para começar?', + description: 'Agora que você conhece o básico, explore à vontade o nosso Design System!', + position: 'top' + } + ]; + + startTour() { + this.guidedTour.start(); + } + + onTourComplete() { + console.log('Tour finalizado com sucesso!'); + } + +} From bb2b88ffed66a14b075de334034caaab6dff5d2e Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Mon, 23 Feb 2026 23:35:03 -0300 Subject: [PATCH 04/26] feat(demo): adiciona template com componentes PO UI para showcase do tour guiado --- projects/app/src/app/app.component.html | 34 +++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/projects/app/src/app/app.component.html b/projects/app/src/app/app.component.html index e69de29bb2..aa52ab50ed 100644 --- a/projects/app/src/app/app.component.html +++ b/projects/app/src/app/app.component.html @@ -0,0 +1,34 @@ +
+ + + +
+ +
+ +
+ +

Este card é o primeiro passo do nosso tour. Ele serve para dar as boas-vindas aos usuários.

+ + + +

Clique no botão abaixo para iniciar a experiência guiada.

+ + +
+ +
+ +

O tour guiado ajuda a aumentar o engajamento e diminuir a curva de aprendizado da sua aplicação.

+ +
+ + + + +
From 8a6252b7190a26501146031e57c1af315460e42b Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Mon, 23 Feb 2026 23:40:56 -0300 Subject: [PATCH 05/26] Create deploy-gh-pages.yml --- .github/workflows/deploy-gh-pages.yml | 36 +++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 .github/workflows/deploy-gh-pages.yml diff --git a/.github/workflows/deploy-gh-pages.yml b/.github/workflows/deploy-gh-pages.yml new file mode 100644 index 0000000000..ba0f2e3f9e --- /dev/null +++ b/.github/workflows/deploy-gh-pages.yml @@ -0,0 +1,36 @@ +name: Deploy Demo to GitHub Pages + +on: + push: + branches: + - demo/guided-tour-gh-pages + +permissions: + contents: write + +jobs: + build-and-deploy: + runs-on: ubuntu-latest + steps: + - name: Checkout 🛎️ + uses: actions/checkout@v4 + + - name: Setup Node.js ⚙️ + uses: actions/setup-node@v4 + with: + node-version: 20 + + - name: Install Dependencies 📦 + run: npm install --legacy-peer-deps + + - name: Build Library 🏗️ + run: npm run build:ui + + - name: Build Demo App 🚀 + run: npx ng build app --base-href /po-angular/ + + - name: Deploy to GitHub Pages 🚀 + uses: JamesIves/github-pages-deploy-action@v4 + with: + folder: dist/app + branch: gh-pages From 388f79528ca284d5f0d9fcd959176aba77db818b Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Tue, 24 Feb 2026 09:13:54 -0300 Subject: [PATCH 06/26] =?UTF-8?q?fix(guided-tour):=20corrige=20erro=20de?= =?UTF-8?q?=20tipagem=20TS=20e=20ajusta=20configura=C3=A7=C3=A3o=20do=20co?= =?UTF-8?q?mponente?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../po-guided-tour.component.ts | 380 +----------------- 1 file changed, 1 insertion(+), 379 deletions(-) diff --git a/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts index 0f1cb29b80..86640b8f98 100644 --- a/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts +++ b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts @@ -1,379 +1 @@ -import { Component, ViewChild, ElementRef, OnInit, OnDestroy, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, Renderer2 } from '@angular/core'; -import { Subject } from 'rxjs'; -import { takeUntil } from 'rxjs/operators'; - -import { PoPopoverComponent } from '../po-popover'; - -/** - * Interface para definir os passos do tour guiado - */ -export interface PoGuidedTourStep { - /** Identificador único do passo */ - id: string; - /** Seletor CSS do elemento a destacar */ - element: string; - /** Título do passo */ - title: string; - /** Descrição ou conteúdo do passo */ - description: string; - /** Posição do popover em relação ao elemento */ - position?: 'top' | 'bottom' | 'left' | 'right' | 'center'; - /** Se deve bloquear interações com outros elementos */ - blockInteraction?: boolean; - /** Callback executado ao entrar no passo */ - onEnter?: () => void; - /** Callback executado ao sair do passo */ - onLeave?: () => void; -} - -/** - * Interface para configuração do tour - */ -export interface PoGuidedTourConfig { - /** Lista de passos do tour */ - steps: PoGuidedTourStep[]; - /** Título geral do tour */ - title?: string; - /** Permitir fechar o tour */ - allowClose?: boolean; - /** Marcar como "não mostrar novamente" */ - allowSkip?: boolean; - /** Chave de localStorage para armazenar status de conclusão */ - storageKey?: string; - /** Z-index do overlay */ - zIndex?: number; - /** Callback quando o tour termina */ - onComplete?: () => void; - /** Callback quando o tour é cancelado */ - onCancel?: () => void; -} - -/** - * Componente po-guided-tour - * - * Componente que oferece um tour interativo guiado pela aplicação, - * com destaque de elementos, popover explicativo e controles de navegação. - * - * **Recursos:** - * - Destaca elementos da página com foco escurecido - * - Exibe popover com explicações - * - Permite navegação entre passos (próximo, anterior) - * - Bloqueia interações quando necessário - * - Persiste estado de "não mostrar novamente" em localStorage - * - Totalmente responsivo e acessível - * - * **Não faz:** Não gerencia automaticamente a ordem dos passos ou padrões de UI complexos. - * Utilize componentes específicos como `po-modal` para essas necessidades. - * - * ```typescript - * import { PoGuidedTourComponent, PoGuidedTourStep } from '@po-ui/ng-components'; - * - * export class AppComponent { - * tourSteps: PoGuidedTourStep[] = [ - * { - * id: 'step-1', - * element: '.welcome-btn', - * title: 'Welcome', - * description: 'Click here to get started', - * position: 'bottom', - * blockInteraction: false - * } - * ]; - * - * startTour() { - * this.guidedTour.start(this.tourSteps); - * } - * } - * ``` - * - * @example - * - * **PO Guided Tour - Básico** - * - * ```html - * - * ``` - */ -@Component({ - selector: 'po-guided-tour', - templateUrl: './po-guided-tour.component.html', - styleUrls: ['./po-guided-tour.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class PoGuidedTourComponent implements OnInit, OnDestroy { - - @ViewChild(PoPopoverComponent) popover: PoPopoverComponent; - - private _steps: PoGuidedTourStep[] = []; - private _allowClose = true; - private _allowSkip = true; - private _storageKey = 'po-guided-tour-completed'; - private _zIndex = 9999; - - currentStep = 0; - isActive = false; - highlightedElement: HTMLElement; - overlay: HTMLElement; - - private destroy$ = new Subject(); - - /** - * Lista de passos do tour guiado - * @default [] - */ - @Input('p-steps') - set steps(value: PoGuidedTourStep[]) { - this._steps = value; - } - get steps(): PoGuidedTourStep[] { - return this._steps; - } - - /** - * Permite fechar o tour - * @default true - */ - @Input('p-allow-close') - set allowClose(value: boolean) { - this._allowClose = value; - } - get allowClose(): boolean { - return this._allowClose; - } - - /** - * Permite marcar como "não mostrar novamente" - * @default true - */ - @Input('p-allow-skip') - set allowSkip(value: boolean) { - this._allowSkip = value; - } - get allowSkip(): boolean { - return this._allowSkip; - } - - /** - * Chave de localStorage para armazenar status - * @default 'po-guided-tour-completed' - */ - @Input('p-storage-key') - set storageKey(value: string) { - this._storageKey = value || 'po-guided-tour-completed'; - } - get storageKey(): string { - return this._storageKey; - } - - /** - * Z-index do overlay - * @default 9999 - */ - @Input('p-z-index') - set zIndex(value: number) { - this._zIndex = value || 9999; - } - get zIndex(): number { - return this._zIndex; - } - - /** Emitido quando o tour é completado */ - @Output('p-on-complete') onComplete = new EventEmitter(); - - /** Emitido quando o tour é cancelado */ - @Output('p-on-cancel') onCancel = new EventEmitter(); - - /** Emitido ao mudar de passo */ - @Output('p-on-step-change') onStepChange = new EventEmitter(); - - constructor( - private changeDetectorRef: ChangeDetectorRef, - private renderer: Renderer2, - private elementRef: ElementRef - ) {} - - ngOnInit(): void { - this.loadStorageState(); - } - - ngOnDestroy(): void { - this.destroy$.next(); - this.destroy$.complete(); - this.cleanup(); - } - - /** - * Inicia o tour guiado - */ - start(): void { - if (this.isAlreadyCompleted()) { - return; - } - - this.isActive = true; - this.currentStep = 0; - this.changeDetectorRef.markForCheck(); - this.goToStep(0); - } - - /** - * Vai para o próximo passo - */ - next(): void { - if (this.currentStep < this.steps.length - 1) { - this.goToStep(this.currentStep + 1); - } else { - this.complete(); - } - } - - /** - * Volta para o passo anterior - */ - previous(): void { - if (this.currentStep > 0) { - this.goToStep(this.currentStep - 1); - } - } - - /** - * Vai para um passo específico - */ - goToStep(stepIndex: number): void { - if (stepIndex < 0 || stepIndex >= this.steps.length) { - return; - } - - const previousStep = this.steps[this.currentStep]; - if (previousStep && previousStep.onLeave) { - previousStep.onLeave(); - } - - this.currentStep = stepIndex; - const step = this.steps[stepIndex]; - - if (step.onEnter) { - step.onEnter(); - } - - this.highlightElement(step.element); - this.onStepChange.emit(stepIndex); - this.changeDetectorRef.markForCheck(); - } - - /** - * Completa o tour - */ - complete(): void { - this.saveToStorage(); - this.isActive = false; - this.cleanup(); - this.onComplete.emit(); - this.changeDetectorRef.markForCheck(); - } - - /** - * Cancela o tour sem marcar como completo - */ - cancel(): void { - this.isActive = false; - this.cleanup(); - this.onCancel.emit(); - this.changeDetectorRef.markForCheck(); - } - - /** - * Marca como "não mostrar novamente" - */ - skipTour(): void { - this.complete(); - } - - /** - * Obtém o passo atual - */ - getCurrentStep(): PoGuidedTourStep { - return this.steps[this.currentStep]; - } - - /** - * Verifica se é o primeiro passo - */ - isFirstStep(): boolean { - return this.currentStep === 0; - } - - /** - * Verifica se é o último passo - */ - isLastStep(): boolean { - return this.currentStep === this.steps.length - 1; - } - - /** - * Obtém progresso do tour - */ - getProgress(): number { - return Math.round(((this.currentStep + 1) / this.steps.length) * 100); - } - - private highlightElement(selector: string): void { - const element = document.querySelector(selector); - if (!element) { - console.warn(`[PoGuidedTour] Elemento não encontrado: ${selector}`); - return; - } - - this.highlightedElement = element as HTMLElement; - this.createOverlay(); - this.scrollToElement(element); - } - - private createOverlay(): void { - if (this.overlay) { - this.overlay.remove(); - } - - this.overlay = this.renderer.createElement('div'); - this.renderer.addClass(this.overlay, 'po-guided-tour-overlay'); - this.renderer.setStyle(this.overlay, 'z-index', this._zIndex.toString()); - this.renderer.appendChild(document.body, this.overlay); - - const rect = this.highlightedElement.getBoundingClientRect(); - const spotlightCircle = this.renderer.createElement('div'); - this.renderer.addClass(spotlightCircle, 'po-guided-tour-spotlight'); - this.renderer.setStyle(spotlightCircle, 'left', `${window.scrollX + rect.left}px`); - this.renderer.setStyle(spotlightCircle, 'top', `${window.scrollY + rect.top}px`); - this.renderer.setStyle(spotlightCircle, 'width', `${rect.width}px`); - this.renderer.setStyle(spotlightCircle, 'height', `${rect.height}px`); - this.renderer.appendChild(this.overlay, spotlightCircle); - } - - private scrollToElement(element: HTMLElement): void { - element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' }); - } - - private isAlreadyCompleted(): boolean { - return localStorage.getItem(this.storageKey) === 'true'; - } - - private saveToStorage(): void { - localStorage.setItem(this.storageKey, 'true'); - } - - private loadStorageState(): void { - // Carrega qualquer estado necessário do localStorage - } - - private cleanup(): void { - if (this.overlay) { - this.overlay.remove(); - this.overlay = null; - } - this.highlightedElement = null; - } -} +fix(guided-tour): corrige erro de tipagem TS e ajusta configuração do componente From 6a91023573a7fc9588e26fa89e2d3a7735011da8 Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Tue, 24 Feb 2026 09:18:01 -0300 Subject: [PATCH 07/26] =?UTF-8?q?Update=20po-guided-tour.componfix(guided-?= =?UTF-8?q?tour):=20restaura=20conte=C3=BAdo=20do=20arquivo=20e=20corrige?= =?UTF-8?q?=20erro=20de=20tipagem=20HTMLElementent.ts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../po-guided-tour.component.ts | 243 +++++++++++++++++- 1 file changed, 242 insertions(+), 1 deletion(-) diff --git a/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts index 86640b8f98..e795edd67a 100644 --- a/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts +++ b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts @@ -1 +1,242 @@ -fix(guided-tour): corrige erro de tipagem TS e ajusta configuração do componente +import { Component, ViewChild, ElementRef, OnInit, OnDestroy, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, Renderer2 } from '@angular/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { PoPopoverComponent } from '../po-popover'; + +export interface PoGuidedTourStep { + id: string; + element: string; + title: string; + description: string; + position?: 'top' | 'bottom' | 'left' | 'right' | 'center'; + blockInteraction?: boolean; + onEnter?: () => void; + onLeave?: () => void; +} + +export interface PoGuidedTourConfig { + steps: PoGuidedTourStep[]; + title?: string; + allowClose?: boolean; + allowSkip?: boolean; + storageKey?: string; + zIndex?: number; + onComplete?: () => void; + onCancel?: () => void; +} + +@Component({ + selector: 'po-guided-tour', + templateUrl: './po-guided-tour.component.html', + styleUrls: ['./po-guided-tour.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class PoGuidedTourComponent implements OnInit, OnDestroy { + @ViewChild(PoPopoverComponent) popover: PoPopoverComponent; + + private _steps: PoGuidedTourStep[] = []; + private _allowClose = true; + private _allowSkip = true; + private _storageKey = 'po-guided-tour-completed'; + private _zIndex = 9999; + + currentStep = 0; + isActive = false; + highlightedElement: HTMLElement | null = null; + overlay: HTMLElement | null = null; + + private destroy$ = new Subject(); + + @Input('p-steps') set steps(value: PoGuidedTourStep[]) { + this._steps = value || []; + } + get steps(): PoGuidedTourStep[] { + return this._steps; + } + + @Input('p-allow-close') set allowClose(value: boolean) { + this._allowClose = value !== false; + } + get allowClose(): boolean { + return this._allowClose; + } + + @Input('p-allow-skip') set allowSkip(value: boolean) { + this._allowSkip = value !== false; + } + get allowSkip(): boolean { + return this._allowSkip; + } + + @Input('p-storage-key') set storageKey(value: string) { + this._storageKey = value || 'po-guided-tour-completed'; + } + get storageKey(): string { + return this._storageKey; + } + + @Input('p-z-index') set zIndex(value: number) { + this._zIndex = value || 9999; + } + get zIndex(): number { + return this._zIndex; + } + + @Output('p-on-complete') onComplete = new EventEmitter(); + @Output('p-on-cancel') onCancel = new EventEmitter(); + @Output('p-on-step-change') onStepChange = new EventEmitter(); + + constructor( + private changeDetectorRef: ChangeDetectorRef, + private renderer: Renderer2, + private elementRef: ElementRef + ) {} + + ngOnInit(): void { + this.loadStorageState(); + } + + ngOnDestroy(): void { + this.destroy$.next(); + this.destroy$.complete(); + this.cleanup(); + } + + start(): void { + if (this.isAlreadyCompleted()) { + return; + } + this.isActive = true; + this.currentStep = 0; + this.changeDetectorRef.markForCheck(); + this.goToStep(0); + } + + next(): void { + if (this.currentStep < this.steps.length - 1) { + this.goToStep(this.currentStep + 1); + } else { + this.complete(); + } + } + + previous(): void { + if (this.currentStep > 0) { + this.goToStep(this.currentStep - 1); + } + } + + goToStep(stepIndex: number): void { + if (stepIndex < 0 || stepIndex >= this.steps.length) { + return; + } + const previousStep = this.steps[this.currentStep]; + if (previousStep && previousStep.onLeave) { + previousStep.onLeave(); + } + + this.currentStep = stepIndex; + const step = this.steps[stepIndex]; + if (step.onEnter) { + step.onEnter(); + } + + this.highlightElement(step.element); + this.onStepChange.emit(stepIndex); + this.changeDetectorRef.markForCheck(); + } + + complete(): void { + this.saveToStorage(); + this.isActive = false; + this.cleanup(); + this.onComplete.emit(); + this.changeDetectorRef.markForCheck(); + } + + cancel(): void { + this.isActive = false; + this.cleanup(); + this.onCancel.emit(); + this.changeDetectorRef.markForCheck(); + } + + skipTour(): void { + this.complete(); + } + + getCurrentStep(): PoGuidedTourStep { + return this.steps[this.currentStep]; + } + + isFirstStep(): boolean { + return this.currentStep === 0; + } + + isLastStep(): boolean { + return this.currentStep === this.steps.length - 1; + } + + getProgress(): number { + return Math.round(((this.currentStep + 1) / this.steps.length) * 100); + } + + private highlightElement(selector: string): void { + const element = document.querySelector(selector); + if (!element) { + console.warn(`[PoGuidedTour] Elemento não encontrado: ${selector}`); + return; + } + + this.highlightedElement = element as HTMLElement; + this.createOverlay(); + this.scrollToElement(this.highlightedElement); + } + + private createOverlay(): void { + if (this.overlay) { + this.overlay.remove(); + } + + this.overlay = this.renderer.createElement('div'); + this.renderer.addClass(this.overlay, 'po-guided-tour-overlay'); + this.renderer.setStyle(this.overlay, 'z-index', this._zIndex.toString()); + this.renderer.appendChild(document.body, this.overlay); + + if (this.highlightedElement && this.overlay) { + const rect = this.highlightedElement.getBoundingClientRect(); + const spotlightCircle = this.renderer.createElement('div'); + this.renderer.addClass(spotlightCircle, 'po-guided-tour-spotlight'); + this.renderer.setStyle(spotlightCircle, 'left', `${window.scrollX + rect.left}px`); + this.renderer.setStyle(spotlightCircle, 'top', `${window.scrollY + rect.top}px`); + this.renderer.setStyle(spotlightCircle, 'width', `${rect.width}px`); + this.renderer.setStyle(spotlightCircle, 'height', `${rect.height}px`); + this.renderer.appendChild(this.overlay, spotlightCircle); + } + } + + private scrollToElement(element: HTMLElement): void { + if (element) { + element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' }); + } + } + + private isAlreadyCompleted(): boolean { + return localStorage.getItem(this.storageKey) === 'true'; + } + + private saveToStorage(): void { + localStorage.setItem(this.storageKey, 'true'); + } + + private loadStorageState(): void { + } + + private cleanup(): void { + if (this.overlay) { + this.overlay.remove(); + this.overlay = null; + } + this.highlightedElement = null; + } +} From 801fb67cf908ec553d59b0bd089a0633736c8695 Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Tue, 24 Feb 2026 09:22:52 -0300 Subject: [PATCH 08/26] Update app.module.tsfix(demo): declara PoGuidedTourComponent no AppModule para resolver erro de build --- projects/app/src/app/app.module.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/projects/app/src/app/app.module.ts b/projects/app/src/app/app.module.ts index c4d03b9a2c..1e7ac2c497 100644 --- a/projects/app/src/app/app.module.ts +++ b/projects/app/src/app/app.module.ts @@ -6,11 +6,20 @@ import { RouterModule } from '@angular/router'; import { PoModule } from '@po-ui/ng-components'; import { AppComponent } from './app.component'; +import { PoGuidedTourComponent } from '../../../../ui/src/lib/components/po-guided-tour/po-guided-tour.component'; @NgModule({ - declarations: [AppComponent], + declarations: [ + AppComponent, + PoGuidedTourComponent + ], bootstrap: [AppComponent], - imports: [BrowserModule, FormsModule, RouterModule.forRoot([], {}), PoModule], + imports: [ + BrowserModule, + FormsModule, + RouterModule.forRoot([], {}), + PoModule + ], providers: [provideHttpClient(withInterceptorsFromDi())] }) export class AppModule {} From ff55059c39cd9d075238dc731c2280f9032a264f Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Tue, 24 Feb 2026 09:27:32 -0300 Subject: [PATCH 09/26] Update app.module.tsfix(demo): corrige path de import do PoGuidedTourComponent no AppModule --- projects/app/src/app/app.module.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/app/src/app/app.module.ts b/projects/app/src/app/app.module.ts index 1e7ac2c497..b83455ecbd 100644 --- a/projects/app/src/app/app.module.ts +++ b/projects/app/src/app/app.module.ts @@ -6,7 +6,7 @@ import { RouterModule } from '@angular/router'; import { PoModule } from '@po-ui/ng-components'; import { AppComponent } from './app.component'; -import { PoGuidedTourComponent } from '../../../../ui/src/lib/components/po-guided-tour/po-guided-tour.component'; +import { PoGuidedTourComponent } from '../../../ui/src/lib/components/po-guided-tour/po-guided-tour.component'; @NgModule({ declarations: [ From e8dd75acf64e71f21bf2f55fed5cb0ed77c641d1 Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Tue, 24 Feb 2026 09:33:04 -0300 Subject: [PATCH 10/26] feat(guided-tour): adiciona arquivo SCSS do componente guided-tour --- .../po-guided-tour.component.scss | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.scss diff --git a/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.scss b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.scss new file mode 100644 index 0000000000..0296d9389d --- /dev/null +++ b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.scss @@ -0,0 +1,19 @@ +.po-guided-tour-overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.7); + pointer-events: none; + overflow: hidden; + z-index: 9999; +} + +.po-guided-tour-spotlight { + position: absolute; + box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7); + border-radius: 4px; + transition: all 0.3s ease-in-out; + pointer-events: auto; +} From fc4ebb16c681c6ef21a2fd909e447dd574b773ce Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Tue, 24 Feb 2026 09:34:57 -0300 Subject: [PATCH 11/26] Create po-guided-tour.module.tsfeat(guided-tour): cria PoGuidedTourModule para encapsular o componente --- .../po-guided-tour/po-guided-tour.module.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 projects/ui/src/lib/components/po-guided-tour/po-guided-tour.module.ts diff --git a/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.module.ts b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.module.ts new file mode 100644 index 0000000000..5dab527934 --- /dev/null +++ b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { PoGuidedTourComponent } from './po-guided-tour.component'; +import { PoPopoverModule } from '../po-popover/po-popover.module'; + +@NgModule({ + imports: [ + CommonModule, + PoPopoverModule + ], + declarations: [ + PoGuidedTourComponent + ], + exports: [ + PoGuidedTourComponent + ] +}) +export class PoGuidedTourModule { } From b499aba1f20333f30c3d5fe45f3ded20b83d3bbc Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Tue, 24 Feb 2026 09:37:46 -0300 Subject: [PATCH 12/26] Update po-guided-tour.componefeat(guided-tour): transforma o componente em standalone para facilitar o uso no demont.ts --- .../components/po-guided-tour/po-guided-tour.component.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts index e795edd67a..85a4816ab9 100644 --- a/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts +++ b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts @@ -1,7 +1,8 @@ import { Component, ViewChild, ElementRef, OnInit, OnDestroy, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, Renderer2 } from '@angular/core'; +import { CommonModule } from '@angular/common'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -import { PoPopoverComponent } from '../po-popover'; +import { PoPopoverModule } from '../po-popover/po-popover.module'; export interface PoGuidedTourStep { id: string; @@ -27,12 +28,14 @@ export interface PoGuidedTourConfig { @Component({ selector: 'po-guided-tour', + standalone: true, + imports: [CommonModule, PoPopoverModule], templateUrl: './po-guided-tour.component.html', styleUrls: ['./po-guided-tour.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) export class PoGuidedTourComponent implements OnInit, OnDestroy { - @ViewChild(PoPopoverComponent) popover: PoPopoverComponent; + @ViewChild('popover') popover: any; private _steps: PoGuidedTourStep[] = []; private _allowClose = true; From a26df22389b3418ec64b1172cd4d86e45f1c6e8d Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Tue, 24 Feb 2026 09:46:59 -0300 Subject: [PATCH 13/26] Update po-guided-tour.component.ts --- .../components/po-guided-tour/po-guided-tour.component.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts index 85a4816ab9..d7506c85fc 100644 --- a/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts +++ b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts @@ -29,9 +29,7 @@ export interface PoGuidedTourConfig { @Component({ selector: 'po-guided-tour', standalone: true, - imports: [CommonModule, PoPopoverModule], - templateUrl: './po-guided-tour.component.html', - styleUrls: ['./po-guided-tour.component.scss'], + imports: [CommonModule, PoPopoverModus'], changeDetection: ChangeDetectionStrategy.OnPush }) export class PoGuidedTourComponent implements OnInit, OnDestroy { @@ -66,7 +64,7 @@ export class PoGuidedTourComponent implements OnInit, OnDestroy { @Input('p-allow-skip') set allowSkip(value: boolean) { this._allowSkip = value !== false; - } + }refactor(guided-tour): remove standalone e volta a ser um componente de modulo get allowSkip(): boolean { return this._allowSkip; } From c12d7794f9e8c8b6ec22d99e86e00e7516fbe6a4 Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Tue, 24 Feb 2026 10:03:27 -0300 Subject: [PATCH 14/26] refactor(guided-tour): remove standalone e volta a ser declarado no modulo --- .../components/po-guided-tour/po-guided-tour.component.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts index d7506c85fc..d287cef71e 100644 --- a/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts +++ b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts @@ -28,8 +28,6 @@ export interface PoGuidedTourConfig { @Component({ selector: 'po-guided-tour', - standalone: true, - imports: [CommonModule, PoPopoverModus'], changeDetection: ChangeDetectionStrategy.OnPush }) export class PoGuidedTourComponent implements OnInit, OnDestroy { @@ -64,7 +62,8 @@ export class PoGuidedTourComponent implements OnInit, OnDestroy { @Input('p-allow-skip') set allowSkip(value: boolean) { this._allowSkip = value !== false; - }refactor(guided-tour): remove standalone e volta a ser um componente de modulo + } + get allowSkip(): boolean { return this._allowSkip; } From 84f342a6744e3e77a88765c265e4390c37cd2bfd Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Tue, 24 Feb 2026 10:07:49 -0300 Subject: [PATCH 15/26] fix(guided-tour): add missing templateUrl and styleUrls to component decorator --- .../lib/components/po-guided-tour/po-guided-tour.component.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts index d287cef71e..4f17f21e5c 100644 --- a/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts +++ b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts @@ -28,6 +28,8 @@ export interface PoGuidedTourConfig { @Component({ selector: 'po-guided-tour', + templateUrl: './po-guided-tour.component.html', + styleUrls: ['./po-guided-tour.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) export class PoGuidedTourComponent implements OnInit, OnDestroy { From 5259752c6d2ccb0ba417c8a4e3d917b4aa60c40d Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Tue, 24 Feb 2026 10:15:18 -0300 Subject: [PATCH 16/26] =?UTF-8?q?fix(demo):=20importa=20PoGuidedTourModule?= =?UTF-8?q?=20ao=20inv=C3=A9s=20do=20componente?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- projects/app/src/app/app.module.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/projects/app/src/app/app.module.ts b/projects/app/src/app/app.module.ts index b83455ecbd..6dcfb912ce 100644 --- a/projects/app/src/app/app.module.ts +++ b/projects/app/src/app/app.module.ts @@ -6,19 +6,18 @@ import { RouterModule } from '@angular/router'; import { PoModule } from '@po-ui/ng-components'; import { AppComponent } from './app.component'; -import { PoGuidedTourComponent } from '../../../ui/src/lib/components/po-guided-tour/po-guided-tour.component'; - +import { PoGuidedTourModule } from '../.././ui/src/lib/components/po-guided-tour/po-guided-tour.module'; @NgModule({ declarations: [ AppComponent, - PoGuidedTourComponent ], bootstrap: [AppComponent], imports: [ BrowserModule, FormsModule, RouterModule.forRoot([], {}), - PoModule + PoModule, + PoGuidedTourModule ], providers: [provideHttpClient(withInterceptorsFromDi())] }) From d7d65885cb37b219253a43b888bf3a98dcbbb4a4 Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Tue, 24 Feb 2026 10:16:43 -0300 Subject: [PATCH 17/26] =?UTF-8?q?fix(demo):=20remove=20importa=C3=A7=C3=A3?= =?UTF-8?q?o=20duplicada=20do=20componente?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- projects/app/src/app/app.component.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/app/src/app/app.component.ts b/projects/app/src/app/app.component.ts index 086022b52b..d969f989b4 100644 --- a/projects/app/src/app/app.component.ts +++ b/projects/app/src/app/app.component.ts @@ -1,6 +1,5 @@ import { Component, ViewChild } from '@angular/core'; import { PoGuidedTourStep } from './../../ui/src/lib/components/po-guided-tour/po-guided-tour.component'; -import { PoGuidedTourComponent } from './../../ui/src/lib/components/po-guided-tour/po-guided-tour.component'; @Component({ selector: 'app-root', From 2d0508e998757dc6c80f7e0cd5e3bd237e5b6cc4 Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Tue, 24 Feb 2026 10:20:39 -0300 Subject: [PATCH 18/26] =?UTF-8?q?feat(guided-tour):=20exporta=20m=C3=B3dul?= =?UTF-8?q?o=20no=20public=20API?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- projects/ui/src/lib/components/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/ui/src/lib/components/index.ts b/projects/ui/src/lib/components/index.ts index edb080fd33..65eeb8abb6 100644 --- a/projects/ui/src/lib/components/index.ts +++ b/projects/ui/src/lib/components/index.ts @@ -17,6 +17,7 @@ export * from './po-dynamic/index'; export * from './po-field/index'; export * from './po-gauge/index'; export * from './po-grid/index'; +export * from './po-guided-tour/index'; export * from './po-helper/index'; export * from './po-icon/index'; export * from './po-image/index'; From 4a6f306aa3e79f836fb4a85bc62caba3eb1bcbeb Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Tue, 24 Feb 2026 10:21:59 -0300 Subject: [PATCH 19/26] =?UTF-8?q?fix(demo):=20usa=20API=20p=C3=BAblica=20p?= =?UTF-8?q?ara=20importar=20PoGuidedTourModule?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- projects/app/src/app/app.module.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/projects/app/src/app/app.module.ts b/projects/app/src/app/app.module.ts index 6dcfb912ce..2cb3aea86e 100644 --- a/projects/app/src/app/app.module.ts +++ b/projects/app/src/app/app.module.ts @@ -6,8 +6,7 @@ import { RouterModule } from '@angular/router'; import { PoModule } from '@po-ui/ng-components'; import { AppComponent } from './app.component'; -import { PoGuidedTourModule } from '../.././ui/src/lib/components/po-guided-tour/po-guided-tour.module'; -@NgModule({ +import { PoGuidedTourModule } from '@po-ui/ng-components';@NgModule({ declarations: [ AppComponent, ], From 8e9c5dd039380c2784c0ae45afd5e254a6487345 Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Tue, 24 Feb 2026 10:25:10 -0300 Subject: [PATCH 20/26] =?UTF-8?q?feat(guided-tour):=20cria=20index.ts=20pa?= =?UTF-8?q?ra=20exportar=20m=C3=B3dulo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- projects/ui/src/lib/components/po-guided-tour/index.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 projects/ui/src/lib/components/po-guided-tour/index.ts diff --git a/projects/ui/src/lib/components/po-guided-tour/index.ts b/projects/ui/src/lib/components/po-guided-tour/index.ts new file mode 100644 index 0000000000..02765ab3ad --- /dev/null +++ b/projects/ui/src/lib/components/po-guided-tour/index.ts @@ -0,0 +1 @@ +export * from './po-guided-tour.module'; From 36258c8af05978658df0e6ea86028a179c560803 Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Tue, 24 Feb 2026 10:29:02 -0300 Subject: [PATCH 21/26] =?UTF-8?q?fix(guided-tour):=20remove=20imports=20de?= =?UTF-8?q?snecess=C3=A1rios=20de=20standalone?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/components/po-guided-tour/po-guided-tour.component.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts index 4f17f21e5c..e04b6544a2 100644 --- a/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts +++ b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.ts @@ -1,9 +1,6 @@ import { Component, ViewChild, ElementRef, OnInit, OnDestroy, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, Renderer2 } from '@angular/core'; -import { CommonModule } from '@angular/common'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -import { PoPopoverModule } from '../po-popover/po-popover.module'; - export interface PoGuidedTourStep { id: string; element: string; From da72d360bde12d118050bc34c3fe03a5747ae395 Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Tue, 24 Feb 2026 10:33:56 -0300 Subject: [PATCH 22/26] feat(guided-tour): adiciona PoGuidedTourModule no components.module --- projects/ui/src/lib/components/components.module.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/projects/ui/src/lib/components/components.module.ts b/projects/ui/src/lib/components/components.module.ts index c79c642c4d..c5009dff11 100644 --- a/projects/ui/src/lib/components/components.module.ts +++ b/projects/ui/src/lib/components/components.module.ts @@ -18,6 +18,7 @@ import { PoFieldModule } from './po-field/po-field.module'; import { PoSwitchModule } from './po-field/po-switch/po-switch.module'; import { PoGaugeModule } from './po-gauge/po-gauge.module'; import { PoGridModule } from './po-grid/po-grid.module'; +import { PoGuidedTourModule } from './po-guided-tour/po-guided-tour.module'; import { PoIconModule } from './po-icon/po-icon.module'; import { PoImageModule } from './po-image/po-image.module'; import { PoInfoModule } from './po-info/po-info.module'; @@ -68,6 +69,7 @@ const PO_MODULES = [ PoFieldModule, PoGaugeModule, PoGridModule, + PoGuidedTourModule, PoIconModule, PoInfoModule, PoListViewModule, From e5d939c8be20c28dad79f14d121b2e9630775eca Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Tue, 24 Feb 2026 10:37:32 -0300 Subject: [PATCH 23/26] fix(guided-tour): remove imports standalone do module --- .../lib/components/po-guided-tour/po-guided-tour.module.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.module.ts b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.module.ts index 5dab527934..74f893a27f 100644 --- a/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.module.ts +++ b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.module.ts @@ -1,12 +1,8 @@ import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; import { PoGuidedTourComponent } from './po-guided-tour.component'; -import { PoPopoverModule } from '../po-popover/po-popover.module'; @NgModule({ imports: [ - CommonModule, - PoPopoverModule ], declarations: [ PoGuidedTourComponent From a211b529378a27cf1223518c197058479b8a5276 Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Tue, 24 Feb 2026 11:15:31 -0300 Subject: [PATCH 24/26] =?UTF-8?q?fix(app):=20corrige=20formata=C3=A7=C3=A3?= =?UTF-8?q?o=20do=20app.module.ts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- projects/app/src/app/app.module.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/projects/app/src/app/app.module.ts b/projects/app/src/app/app.module.ts index 2cb3aea86e..e54bd723d5 100644 --- a/projects/app/src/app/app.module.ts +++ b/projects/app/src/app/app.module.ts @@ -6,8 +6,9 @@ import { RouterModule } from '@angular/router'; import { PoModule } from '@po-ui/ng-components'; import { AppComponent } from './app.component'; -import { PoGuidedTourModule } from '@po-ui/ng-components';@NgModule({ - declarations: [ +import { PoGuidedTourModule } from '@po-ui/ng-components'; +@NgModule({ + declarations: [ AppComponent, ], bootstrap: [AppComponent], From 451ddb06570d4acd9fcb99f931f2d74764a5518c Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Tue, 24 Feb 2026 13:56:12 -0300 Subject: [PATCH 25/26] fix(guided-tour): adiciona CommonModule no imports do module --- .../src/lib/components/po-guided-tour/po-guided-tour.module.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.module.ts b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.module.ts index 74f893a27f..68610777c0 100644 --- a/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.module.ts +++ b/projects/ui/src/lib/components/po-guided-tour/po-guided-tour.module.ts @@ -1,8 +1,10 @@ import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; import { PoGuidedTourComponent } from './po-guided-tour.component'; @NgModule({ imports: [ + CommonModule ], declarations: [ PoGuidedTourComponent From 23303e3bc089eff26e226e87b7f2be02b310cf5d Mon Sep 17 00:00:00 2001 From: alinecbgml Date: Tue, 24 Feb 2026 14:01:45 -0300 Subject: [PATCH 26/26] fix(guided-tour): exporta componente no index para resolver NG3001 --- projects/ui/src/lib/components/po-guided-tour/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/ui/src/lib/components/po-guided-tour/index.ts b/projects/ui/src/lib/components/po-guided-tour/index.ts index 02765ab3ad..c78dab971a 100644 --- a/projects/ui/src/lib/components/po-guided-tour/index.ts +++ b/projects/ui/src/lib/components/po-guided-tour/index.ts @@ -1 +1,2 @@ export * from './po-guided-tour.module'; +export * from './po-guided-tour.component';