search
@@ -88,7 +60,7 @@
{{ title() }}
}
- @if (!modal() && (title() || hint())) {
+ @if (title() || hint()) {
@if (title()) {
{{ title() }}
@@ -149,4 +121,4 @@ {{ title() }}
}
}
-
+
diff --git a/src/app/shared/components/pokemon-picker/pokemon-picker.component.scss b/src/app/shared/components/pokemon-picker/pokemon-picker.component.scss
index b022725..becb743 100644
--- a/src/app/shared/components/pokemon-picker/pokemon-picker.component.scss
+++ b/src/app/shared/components/pokemon-picker/pokemon-picker.component.scss
@@ -6,8 +6,12 @@
width: 100%;
}
-:host.pp--modal {
- display: contents;
+// Usado dentro de PokemonPickerDialogComponent: o picker preenche o espaço
+// restante da coluna flex do diálogo, em vez de ser um dropdown flutuante.
+:host.pp--expanded {
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
}
.pp-root {
@@ -40,44 +44,14 @@
max-height: 60vh;
}
-.pp--modal {
- .pp-panel {
- position: static;
- flex: 1 1 auto;
- min-height: 0;
- border: none;
- border-radius: 0;
- box-shadow: none;
- padding: 0;
- }
-}
-
-.pp-overlay {
- position: fixed;
- inset: 0;
- z-index: 200;
- background: rgba(0, 0, 0, 0.45);
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 16px;
- box-sizing: border-box;
-}
-
-.pp-dialog {
- width: 100%;
- max-width: 480px;
- // dvh (não vh) evita que o diálogo seja cortado quando a barra de
- // endereço do navegador mobile aparece/some (ex.: Safari iOS).
- max-height: 80dvh;
- display: flex;
- flex-direction: column;
- gap: 12px;
- background: var(--dex-bg);
- border-radius: 20px;
- box-shadow: var(--dex-shadow-xl);
- padding: 16px;
- box-sizing: border-box;
+:host.pp--expanded .pp-panel {
+ position: static;
+ flex: 1 1 auto;
+ min-height: 0;
+ border: none;
+ border-radius: 0;
+ box-shadow: none;
+ padding: 0;
}
.pp-head {
@@ -87,7 +61,7 @@
gap: 12px;
}
-:host:not(.pp--modal) .pp-root > .pp-head {
+.pp-root > .pp-head {
flex-direction: column;
}
diff --git a/src/app/shared/components/pokemon-picker/pokemon-picker.component.ts b/src/app/shared/components/pokemon-picker/pokemon-picker.component.ts
index 0b2d326..b9b60ee 100644
--- a/src/app/shared/components/pokemon-picker/pokemon-picker.component.ts
+++ b/src/app/shared/components/pokemon-picker/pokemon-picker.component.ts
@@ -1,4 +1,3 @@
-import { NgTemplateOutlet } from '@angular/common';
import { Component, computed, effect, ElementRef, HostListener, inject, input, output, signal, ViewChild } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
@@ -15,23 +14,30 @@ import { IconButtonComponent } from '../icon-button/icon-button.component';
const ATTACKING_TYPES = Object.keys(TYPE_CHART);
+/**
+ * Busca/autocomplete de Pokémon. Uso padrão: dropdown inline sobre o campo
+ * de busca (ex.: compare). Para uso como diálogo modal, ver
+ * `PokemonPickerDialogComponent` — este componente não sabe mais nada sobre
+ * overlay/modal, só sobre "estou expandido preenchendo o espaço do meu pai
+ * ou sou um dropdown flutuante" (`alwaysOpen`).
+ */
@Component({
selector: 'app-pokemon-picker',
standalone: true,
- imports: [NgTemplateOutlet, MatIconModule, MatTooltipModule, TypeBadgeComponent, LoadingSpinnerComponent, IconButtonComponent],
+ imports: [MatIconModule, MatTooltipModule, TypeBadgeComponent, LoadingSpinnerComponent, IconButtonComponent],
templateUrl: './pokemon-picker.component.html',
styleUrl: './pokemon-picker.component.scss',
host: {
- '[class.pp--modal]': 'modal()',
+ '[class.pp--expanded]': 'alwaysOpen()',
},
})
export class PokemonPickerComponent {
private pokemonService = inject(PokemonService);
- /** Modo de exibição. Default: dropdown (autocomplete inline). true = popup modal centralizado. */
- modal = input(false);
- /** Força a abertura do dropdown a partir do pai (ex.: escolha de slot no time). */
- open = input(false);
+ /** Mantém a lista de resultados sempre visível, em vez de só ao focar/digitar
+ * (uso: dentro de `PokemonPickerDialogComponent`, onde o painel é o próprio
+ * conteúdo do diálogo, não um dropdown flutuante). */
+ alwaysOpen = input(false);
/** Valor exibido no campo quando o usuário não está digitando (ex.: Pokémon já escolhido). */
value = input('');
/** IDs que não devem aparecer na lista (ex.: os que já estão no time). */
@@ -69,7 +75,7 @@ export class PokemonPickerComponent {
/** Abre ao focar/digitar (uso como autocomplete). */
show = signal(false);
fieldFocused = signal(false);
- panelVisible = computed(() => this.show() || this.open());
+ panelVisible = computed(() => this.show() || this.alwaysOpen());
@ViewChild('root') root?: ElementRef
;
@ViewChild('searchInput') searchInput?: ElementRef;
@@ -91,19 +97,12 @@ export class PokemonPickerComponent {
constructor() {
this.loadData();
+ // Seed único na criação (não um effect): cada instância nasce e morre
+ // com uma "sessão" de busca — não deve resetar o filtro do usuário se
+ // o pai re-renderizar com o mesmo array por outro motivo.
+ this.typeFilter.set(this.preselectTypes());
effect(() => {
- if (this.modal()) {
- if (this.open()) {
- this.resetForOpen();
- }
- } else if (!this.open()) {
- this.show.set(false);
- }
- });
-
- effect(() => {
- if (this.modal()) return;
const v = this.value();
if (v && !this.fieldFocused()) {
this.query.set(v);
@@ -111,22 +110,15 @@ export class PokemonPickerComponent {
});
}
- private resetForOpen(): void {
- this.filtersOpen.set(false);
- this.typeFilter.set(this.preselectTypes());
- this.show.set(true);
- setTimeout(() => this.searchInput?.nativeElement?.focus(), 0);
- }
-
onQueryInput(value: string): void {
this.query.set(value);
- if (!this.modal()) this.show.set(true);
+ this.show.set(true);
this.queryChange.emit(value);
}
onFocus(): void {
this.fieldFocused.set(true);
- if (!this.modal()) this.show.set(true);
+ this.show.set(true);
}
onBlur(): void {
@@ -169,22 +161,21 @@ export class PokemonPickerComponent {
dismiss(): void {
this.show.set(false);
- if (this.open()) {
- this.dismissed.emit();
- }
+ this.dismissed.emit();
}
@HostListener('document:pointerdown', ['$event'])
onGlobalClick(event: PointerEvent): void {
- if (this.modal()) return;
- if ((this.show() || this.open()) && this.root && !this.root.nativeElement.contains(event.target as Node)) {
+ if (this.alwaysOpen()) return;
+ if (this.show() && this.root && !this.root.nativeElement.contains(event.target as Node)) {
this.dismiss();
}
}
@HostListener('document:keydown.escape')
onEscape(): void {
- if (this.show() || this.open()) {
+ if (this.alwaysOpen()) return;
+ if (this.show()) {
this.dismiss();
}
}
@@ -200,4 +191,4 @@ export class PokemonPickerComponent {
paddedId(id: number): string {
return formatPokemonId(id);
}
-}
\ No newline at end of file
+}
diff --git a/src/styles.scss b/src/styles.scss
index 0238a0f..d330625 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -127,6 +127,29 @@ app-root {
}
}
+// Diálogo do picker de Pokémon (ver PokemonPickerDialogComponent): a casca
+// comportamental (focus trap, Escape, clique fora, aria-modal, animação) é
+// do MatDialog; o card visual continua 100% controlado pelo componente —
+// aqui só neutralizamos o container/surface padrão do Material pra não
+// sobrepor esse visual com o dele (mesmo padrão do .app-snackbar acima).
+.pp-dialog-panel {
+ .mat-mdc-dialog-container,
+ .mdc-dialog__surface,
+ .mat-mdc-dialog-surface {
+ background: transparent !important;
+ box-shadow: none !important;
+ border-radius: 0 !important;
+ padding: 0 !important;
+ overflow: visible;
+ }
+}
+
+// Mesma cor do antigo .pp-overlay hand-rolled (o backdrop escuro padrão do
+// CDK é mais claro).
+.pp-dialog-backdrop {
+ background: rgba(0, 0, 0, 0.45);
+}
+
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;