PrimeNG Dialog with Search Field

<p-button
  [dt]="headerButtonDt"
  label="Keresés"
  severity="secondary"
  [outlined]="true"
  icon="pi pi-search"
  (onClick)="onSearchDialogOpen()"
/>

protected onSearchDialogOpen(): void {
  this._searchService.searchDialogOpen();
}

import { SearchDialog } from '@/shared/components/search-dialog/search-dialog';
import { inject, Injectable } from '@angular/core';
import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';

@Injectable({
  providedIn: 'root',
})
export class SearchService {
  private readonly _dialogService = inject(DialogService);
  private _dialogRef: DynamicDialogRef | null = null;

  public searchDialogOpen(): void {
    this._dialogRef = this._dialogService.open(SearchDialog, {
      modal: true,
      dismissableMask: true,
      width: '420px',
      data: {},
    });
  }

  public closeDialog(): void {
    this._dialogRef?.close();
  }
}

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { DynamicDialogRef } from 'primeng/dynamicdialog';
import { IconFieldModule } from 'primeng/iconfield';
import { InputIconModule } from 'primeng/inputicon';
import { InputTextModule } from 'primeng/inputtext';

@Component({
  selector: 'app-search-dialog',
  imports: [CommonModule, ButtonModule, IconFieldModule, InputIconModule, InputTextModule],
  templateUrl: './search-dialog.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SearchDialog {
  private readonly _dialogRef = inject(DynamicDialogRef);

  close(): void {
    this._dialogRef.close();
  }
}

<div class="card flex flex-wrap justify-center gap-4">
  <p-iconfield styleClass="w-full">
    <p-inputicon class="pi pi-search" />
    <input type="text" pInputText placeholder="Keresés ..." class="w-full" />
  </p-iconfield>
</div>

import { DialogDesignTokens } from '@primeuix/themes/types/dialog';

export const dialog: DialogDesignTokens = {
  colorScheme: {
    light: {
      root: {
        background: '{surface.0}',
        color: '{surface.900}',
        borderColor: '{surface.200}',
        borderRadius: '1rem',
        shadow: '0 8px 32px rgba(0,0,0,0.08)',
      },
      header: {
        padding: '0',
        gap: '0.75rem',
      },
      title: {
        fontSize: '1.1rem',
        fontWeight: '600',
      },
      content: {
        padding: '1rem',
      },
      footer: {
        padding: '1rem 1.25rem',
        gap: '0.5rem',
      },
    },
    dark: {
      root: {
        background: '{surface.900}',
        color: '{surface.0}',
        borderColor: '{surface.700}',
        borderRadius: '1rem',
        shadow: '0 8px 32px rgba(0,0,0,0.6)',
      },
      header: {
        padding: '1rem 1.25rem',
        gap: '0.75rem',
      },
      title: {
        fontSize: '1.1rem',
        fontWeight: '600',
      },
      content: {
        padding: '1.25rem',
      },
      footer: {
        padding: '1rem 1.25rem',
        gap: '0.5rem',
      },
    },
  },
};