PrimeNG

npm install primeng
npm install primeicons  # Optional: for built-in icons

import { bootstrapApplication } from '@angular/platform-browser';
import { providePrimeNG } from 'primeng/config';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent, {
  providers: [
    providePrimeNG({
      theme: {
        preset: 'Aura'
      }
    })
  ]
});

import { Component } from '@angular/core';
import { Button } from 'primeng/button';
import { InputText } from 'primeng/inputtext';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [Button, InputText],
  template: `
    <input pInputText placeholder="Enter text" />
    <p-button label="Submit" />
  `
})
export class ExampleComponent {}

import { NgModule } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';

@NgModule({
  imports: [ButtonModule, InputTextModule],
  // ...
})
export class AppModule {}

// Core Services
class ConfirmationService {
  confirm(confirmation: Confirmation): void;
  close(): void;
}

class MessageService {
  add(message: Message): void;
  addAll(messages: Message[]): void;
  clear(key?: string): void;
}

class OverlayService {
  onShow: Subject<any>;
  onHide: Subject<any>;
}

class FilterService {
  filter(data: any[], fields: string[], filterValue: any, filterMatchMode: string): any[];
  filters: { [key: string]: (value: any, filter: any, filterLocale?: string) => boolean };
}

// Menu System
interface MenuItem {
  label?: string;
  icon?: string;
  command?: (event?: any) => void;
  url?: string;
  routerLink?: any;
  items?: MenuItem[];
  expanded?: boolean;
  disabled?: boolean;
  visible?: boolean;
  target?: string;
  separator?: boolean;
  badge?: string;
  badgeStyleClass?: string;
  style?: any;
  styleClass?: string;
  title?: string;
  id?: string;
}

// Selection System
interface SelectItem {
  label?: string;
  value: any;
  styleClass?: string;
  icon?: string;
  title?: string;
  disabled?: boolean;
}

interface SelectItemGroup {
  label: string;
  value?: any;
  items: SelectItem[];
}

// Tree Data
interface TreeNode {
  label?: string;
  data?: any;
  icon?: string;
  expandedIcon?: string;
  collapsedIcon?: string;
  children?: TreeNode[];
  leaf?: boolean;
  expanded?: boolean;
  type?: string;
  parent?: TreeNode;
  partialSelected?: boolean;
  styleClass?: string;
  draggable?: boolean;
  droppable?: boolean;
  selectable?: boolean;
  key?: string;
}

// Data Operations
interface LazyLoadEvent {
  first?: number;
  rows?: number;
  sortField?: string;
  sortOrder?: number;
  multiSortMeta?: SortMeta[];
  filters?: { [key: string]: FilterMetadata };
  globalFilter?: any;
  filterMatchModes?: { [key: string]: string };
}

interface SortMeta {
  field: string;
  order: number;
}

interface FilterMetadata {
  value?: any;
  matchMode?: string;
  operator?: string;
}

// Template Directives
@Directive({ selector: '[pTemplate]' })
class PrimeTemplate {
  name: string;
  type: string;
}

// Usage in components
@Component({
  template: `
    <p-table [value]="data">
      <ng-template pTemplate="header">
        <tr><th>Name</th><th>Age</th></tr>
      </ng-template>
      <ng-template pTemplate="body" let-item>
        <tr><td>{{item.name}}</td><td>{{item.age}}</td></tr>
      </ng-template>
    </p-table>
  `
})

// Icon Constants
const PrimeIcons = {
  ALIGN_CENTER: 'pi pi-align-center',
  ALIGN_JUSTIFY: 'pi pi-align-justify',
  ALIGN_LEFT: 'pi pi-align-left',
  ALIGN_RIGHT: 'pi pi-align-right',
  ARROW_DOWN: 'pi pi-arrow-down',
  ARROW_LEFT: 'pi pi-arrow-left',
  ARROW_RIGHT: 'pi pi-arrow-right',
  ARROW_UP: 'pi pi-arrow-up',
  CHECK: 'pi pi-check',
  TIMES: 'pi pi-times',
  PLUS: 'pi pi-plus',
  MINUS: 'pi pi-minus',
  SEARCH: 'pi pi-search',
  // ... 200+ more icons
};

import { CheckIcon } from 'primeng/icons/check';
import { TimesIcon } from 'primeng/icons/times';
import { SearchIcon } from 'primeng/icons/search';

interface PrimeNGConfigType {
  ripple?: boolean;
  inputStyle?: 'outlined' | 'filled';
  theme?: {
    preset?: string;
    options?: any;
  };
  translation?: Translation;
  filterMatchModeOptions?: {
    text: FilterMatchMode[];
    numeric: FilterMatchMode[];
    date: FilterMatchMode[];
  };
  zIndex?: ZIndex;
}

interface ZIndex {
  modal?: number;
  overlay?: number;
  menu?: number;
  tooltip?: number;
}

interface Translation {
  accept?: string;
  reject?: string;
  choose?: string;
  upload?: string;
  cancel?: string;
  clear?: string;
  // ... more translation keys
}