carloshra/nexus-spa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update uikit components

Browse Source
This commit is contained in:
Mehmet Çetin
2025-01-07 11:38:04 +03:00
parent 078d0636b4
commit c89ea65b11
5 changed files with 191 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/views/uikit/listdoc.ts
View File

@@ -1,5 +1,4 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { DataViewModule } from 'primeng/dataview'; import { DataViewModule } from 'primeng/dataview';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';

81
src/views/uikit/mediadoc.ts
View File

@@ -9,52 +9,51 @@ import { Product, ProductService } from '@/src/service/demo/product.service';
import { PhotoService } from '@/src/service/demo/photo.service'; import { PhotoService } from '@/src/service/demo/photo.service';
@Component({ @Component({
standalone:true, standalone: true,
imports:[CommonModule, CarouselModule,ButtonModule,GalleriaModule, ImageModule, TagModule], imports: [CommonModule, CarouselModule, ButtonModule, GalleriaModule, ImageModule, TagModule],
template: `<div class="card"> template: `<div class="card">
<div class="font-semibold text-xl mb-4">Carousel</div> <div class="font-semibold text-xl mb-4">Carousel</div>
<p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="galleriaResponsiveOptions"> <p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="galleriaResponsiveOptions">
<ng-template let-product #item> <ng-template let-product #item>
<div class="border border-surface rounded-border m-2 p-4"> <div class="border border-surface rounded-border m-2 p-4">
<div class="mb-4"> <div class="mb-4">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-full rounded-border" /> <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-full rounded-border" />
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)" class="absolute" styleClass="dark:!bg-surface-900" [ngStyle]="{ 'left.px': 5, 'top.px': 5 }" /> <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)" class="absolute" styleClass="dark:!bg-surface-900" [ngStyle]="{ 'left.px': 5, 'top.px': 5 }" />
</div>
</div> </div>
</div> <div class="mb-4 font-medium">{{ product.name }}</div>
<div class="mb-4 font-medium">{{ product.name }}</div> <div class="flex justify-between items-center">
<div class="flex justify-between items-center"> <div class="mt-0 font-semibold text-xl">{{ '$' + product.price }}</div>
<div class="mt-0 font-semibold text-xl">{{ '$' + product.price }}</div> <span>
<span>
<p-button icon="pi pi-heart" severity="secondary" [outlined]="true" /> <p-button icon="pi pi-heart" severity="secondary" [outlined]="true" />
<p-button icon="pi pi-shopping-cart" styleClass="ml-2" /> <p-button icon="pi pi-shopping-cart" styleClass="ml-2" />
</span> </span>
</div>
</div> </div>
</div> </ng-template>
</ng-template> </p-carousel>
</p-carousel> </div>
</div>
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Image</div> <div class="font-semibold text-xl mb-4">Image</div>
<p-image src="https://primefaces.org/cdn/primeng/images/galleria/galleria10.jpg" alt="Image" width="250" /> <p-image src="https://primefaces.org/cdn/primeng/images/galleria/galleria10.jpg" alt="Image" width="250" />
</div> </div>
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Galleria</div> <div class="font-semibold text-xl mb-4">Galleria</div>
<p-galleria [value]="images" [responsiveOptions]="galleriaResponsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5"> <p-galleria [value]="images" [responsiveOptions]="galleriaResponsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
<ng-template #item let-item> <ng-template #item let-item>
<img [src]="item.itemImageSrc" style="width:100%" /> <img [src]="item.itemImageSrc" style="width:100%" />
</ng-template> </ng-template>
<ng-template #thumbnail let-item> <ng-template #thumbnail let-item>
<img [src]="item.thumbnailImageSrc" /> <img [src]="item.thumbnailImageSrc" />
</ng-template> </ng-template>
</p-galleria> </p-galleria>
</div>`, </div>`,
providers: [ProductService, PhotoService], providers: [ProductService, PhotoService]
}) })
export class MediaDoc implements OnInit { export class MediaDoc implements OnInit {
products!: Product[]; products!: Product[];
images!: any[]; images!: any[];
@@ -96,14 +95,17 @@ export class MediaDoc implements OnInit {
} }
]; ];
constructor(private productService: ProductService, private photoService: PhotoService) { } constructor(
private productService: ProductService,
private photoService: PhotoService
) {}
ngOnInit() { ngOnInit() {
this.productService.getProductsSmall().then(products => { this.productService.getProductsSmall().then((products) => {
this.products = products; this.products = products;
}); });
this.photoService.getImages().then(images => { this.photoService.getImages().then((images) => {
this.images = images; this.images = images;
}); });
} }
@@ -120,5 +122,4 @@ export class MediaDoc implements OnInit {
return 'success'; return 'success';
} }
} }
} }

190
src/views/uikit/menudoc.ts
View File

@@ -14,106 +14,121 @@ import { StepperModule } from 'primeng/stepper';
import { IconField, IconFieldModule } from 'primeng/iconfield'; import { IconField, IconFieldModule } from 'primeng/iconfield';
import { InputIcon, InputIconModule } from 'primeng/inputicon'; import { InputIcon, InputIconModule } from 'primeng/inputicon';
@Component({ @Component({
standalone:true, standalone: true,
imports: [CommonModule, BreadcrumbModule, TieredMenuModule, IconFieldModule, InputIconModule, MenuModule, ButtonModule, ContextMenuModule, MegaMenuModule, PanelMenuModule, TabsModule, MenubarModule, InputTextModule, TabsModule, StepperModule, TabsModule, IconField, InputIcon], imports: [
CommonModule,
BreadcrumbModule,
TieredMenuModule,
IconFieldModule,
InputIconModule,
MenuModule,
ButtonModule,
ContextMenuModule,
MegaMenuModule,
PanelMenuModule,
TabsModule,
MenubarModule,
InputTextModule,
TabsModule,
StepperModule,
TabsModule,
IconField,
InputIcon
],
template: ` template: `
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Menubar</div> <div class="font-semibold text-xl mb-4">Menubar</div>
<p-menubar [model]="nestedMenuItems"> <p-menubar [model]="nestedMenuItems">
<ng-template #end> <ng-template #end>
<p-iconfield> <p-iconfield>
<p-inputicon class="pi pi-search"/> <p-inputicon class="pi pi-search" />
<input type="text" pInputText placeholder="Search"> <input type="text" pInputText placeholder="Search" />
</p-iconfield> </p-iconfield>
</ng-template> </ng-template>
</p-menubar>
</div>
<div class="card">
<div class="font-semibold text-xl mb-4">Breadcrumb</div>
<p-breadcrumb [model]="breadcrumbItems" [home]="breadcrumbHome"></p-breadcrumb>
</div>
</p-menubar> <div class="flex flex-col md:flex-row gap-8">
</div> <div class="md:w-1/2">
<div class="card">
<div class="card"> <div class="font-semibold text-xl mb-4">Steps</div>
<div class="font-semibold text-xl mb-4">Breadcrumb</div> <p-stepper [value]="1">
<p-breadcrumb [model]="breadcrumbItems" [home]="breadcrumbHome"></p-breadcrumb> <p-step-list>
</div> <p-step [value]="1">Header I</p-step>
<p-step [value]="2">Header II</p-step>
<div class="flex flex-col md:flex-row gap-8"> <p-step [value]="3">Header III</p-step>
<div class="md:w-1/2"> </p-step-list>
<div class="card"> </p-stepper>
<div class="font-semibold text-xl mb-4">Steps</div>
<p-stepper [value]="1">
<p-step-list>
<p-step [value]="1">Header I</p-step>
<p-step [value]="2">Header II</p-step>
<p-step [value]="3">Header III</p-step>
</p-step-list>
</p-stepper>
</div>
</div>
<div class="md:w-1/2">
<div class="card">
<div class="font-semibold text-xl mb-4">TabMenu</div>
<p-tabs [value]="0">
<p-tablist>
<p-tab [value]="0">Header I</p-tab>
<p-tab [value]="1">Header II</p-tab>
<p-tab [value]="2">Header III</p-tab>
</p-tablist>
</p-tabs>
</div>
</div> </div>
</div> </div>
<div class="md:w-1/2">
<div class="flex flex-col md:flex-row gap-8 mt-6"> <div class="card">
<div class="md:w-1/3"> <div class="font-semibold text-xl mb-4">TabMenu</div>
<div class="card"> <p-tabs [value]="0">
<div class="font-semibold text-xl mb-4">Tiered Menu</div> <p-tablist>
<p-tieredMenu [model]="tieredMenuItems"></p-tieredMenu> <p-tab [value]="0">Header I</p-tab>
</div> <p-tab [value]="1">Header II</p-tab>
</div> <p-tab [value]="2">Header III</p-tab>
<div class="md:w-1/3"> </p-tablist>
<div class="card"> </p-tabs>
<div class="font-semibold text-xl mb-4">Plain Menu</div>
<p-menu [model]="menuItems"></p-menu>
</div>
</div>
<div class="md:w-1/3">
<div class="card">
<div class="font-semibold text-xl mb-4">Overlay Menu</div>
<p-menu #menu [popup]="true" [model]="overlayMenuItems"></p-menu>
<button type="button" pButton icon="pi pi-chevron-down" label="Options" (click)="menu.toggle($event)" style="width:auto"></button>
</div>
<div class="card" #anchor>
<div class="font-semibold text-xl mb-4">Context Menu</div>
Right click to display.
<p-contextMenu [target]="anchor" [model]="contextMenuItems"></p-contextMenu>
</div>
</div> </div>
</div> </div>
</div>
<div class="flex flex-col md:flex-row gap-8 mt-8"> <div class="flex flex-col md:flex-row gap-8 mt-6">
<div class="md:w-1/2"> <div class="md:w-1/3">
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">MegaMenu | Horizontal</div> <div class="font-semibold text-xl mb-4">Tiered Menu</div>
<p-megaMenu [model]="megaMenuItems" /> <p-tieredmenu [model]="tieredMenuItems"></p-tieredmenu>
<div class="font-semibold text-xl mb-4 mt-8">MegaMenu | Vertical</div>
<p-megaMenu [model]="megaMenuItems" orientation="vertical" />
</div>
</div>
<div class="md:w-1/2">
<div class="card">
<div class="font-semibold text-xl mb-4">PanelMenu</div>
<p-panelMenu [model]="panelMenuItems" />
</div>
</div> </div>
</div> </div>
`, <div class="md:w-1/3">
<div class="card">
<div class="font-semibold text-xl mb-4">Plain Menu</div>
<p-menu [model]="menuItems"></p-menu>
</div>
</div>
<div class="md:w-1/3">
<div class="card">
<div class="font-semibold text-xl mb-4">Overlay Menu</div>
<p-menu #menu [popup]="true" [model]="overlayMenuItems"></p-menu>
<button type="button" pButton icon="pi pi-chevron-down" label="Options" (click)="menu.toggle($event)" style="width:auto"></button>
</div>
<div class="card" #anchor>
<div class="font-semibold text-xl mb-4">Context Menu</div>
Right click to display.
<p-contextmenu [target]="anchor" [model]="contextMenuItems"></p-contextmenu>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row gap-8 mt-8">
<div class="md:w-1/2">
<div class="card">
<div class="font-semibold text-xl mb-4">MegaMenu | Horizontal</div>
<p-megamenu [model]="megaMenuItems" />
<div class="font-semibold text-xl mb-4 mt-8">MegaMenu | Vertical</div>
<p-megamenu [model]="megaMenuItems" orientation="vertical" />
</div>
</div>
<div class="md:w-1/2">
<div class="card">
<div class="font-semibold text-xl mb-4">PanelMenu</div>
<p-panelmenu [model]="panelMenuItems" />
</div>
</div>
</div>
`
}) })
export class MenuDoc { export class MenuDoc {
nestedMenuItems = [ nestedMenuItems = [
{ {
label: 'Customers', label: 'Customers',
@@ -521,5 +536,4 @@ export class MenuDoc {
] ]
} }
]; ];
} }

8
src/views/uikit/miscdoc.ts
View File

@@ -20,10 +20,10 @@ import { OverlayBadgeModule } from 'primeng/overlaybadge';
<div class="font-semibold text-xl mb-4">ProgressBar</div> <div class="font-semibold text-xl mb-4">ProgressBar</div>
<div class="flex flex-col md:flex-row gap-4"> <div class="flex flex-col md:flex-row gap-4">
<div class="md:w-1/2"> <div class="md:w-1/2">
<p-progressBar [value]="value" [showValue]="true"></p-progressBar> <p-progressbar [value]="value" [showValue]="true"></p-progressbar>
</div> </div>
<div class="md:w-1/2"> <div class="md:w-1/2">
<p-progressBar [value]="50" [showValue]="false"></p-progressBar> <p-progressbar [value]="50" [showValue]="false"></p-progressbar>
</div> </div>
</div> </div>
</div> </div>
@@ -70,14 +70,14 @@ import { OverlayBadgeModule } from 'primeng/overlaybadge';
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Avatar</div> <div class="font-semibold text-xl mb-4">Avatar</div>
<div class="font-semibold mb-4">Group</div> <div class="font-semibold mb-4">Group</div>
<p-avatarGroup styleClass="mb-4"> <p-avatargroup styleClass="mb-4">
<p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" size="large" shape="circle"></p-avatar> <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" size="large" shape="circle"></p-avatar>
<p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/asiyajavayant.png" size="large" shape="circle"></p-avatar> <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/asiyajavayant.png" size="large" shape="circle"></p-avatar>
<p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/onyamalimba.png" size="large" shape="circle"></p-avatar> <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/onyamalimba.png" size="large" shape="circle"></p-avatar>
<p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/ionibowcher.png" size="large" shape="circle"></p-avatar> <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/ionibowcher.png" size="large" shape="circle"></p-avatar>
<p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/xuxuefeng.png" size="large" shape="circle"></p-avatar> <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/xuxuefeng.png" size="large" shape="circle"></p-avatar>
<p-avatar label="+2" shape="circle" size="large" [style]="{ 'background-color': '#9c27b0', color: '#ffffff' }"></p-avatar> <p-avatar label="+2" shape="circle" size="large" [style]="{ 'background-color': '#9c27b0', color: '#ffffff' }"></p-avatar>
</p-avatarGroup> </p-avatargroup>
<div class="font-semibold my-4">Label - Circle</div> <div class="font-semibold my-4">Label - Circle</div>
<p-avatar class="mr-2" label="P" size="xlarge" shape="circle"></p-avatar> <p-avatar class="mr-2" label="P" size="xlarge" shape="circle"></p-avatar>

63
src/views/uikit/overlaydoc.ts
View File

@@ -10,12 +10,12 @@ import { InputTextModule } from 'primeng/inputtext';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { TooltipModule } from 'primeng/tooltip'; import { TooltipModule } from 'primeng/tooltip';
import { Product, ProductService } from '@/src/service/demo/product.service'; import { Product, ProductService } from '@/src/service/demo/product.service';
import { TableModule } from 'primeng/table';
@Component({ @Component({
standalone: true, standalone: true,
imports:[ToastModule, DialogModule, ButtonModule, DrawerModule, PopoverModule, ConfirmPopupModule, InputTextModule, FormsModule, TooltipModule], imports: [ToastModule, DialogModule, ButtonModule, DrawerModule, PopoverModule, ConfirmPopupModule, InputTextModule, FormsModule, TooltipModule, TableModule, ToastModule],
template:` template: ` <div class="flex flex-col md:flex-row gap-8">
<div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Dialog</div> <div class="font-semibold text-xl mb-4">Dialog</div>
@@ -28,16 +28,32 @@ import { Product, ProductService } from '@/src/service/demo/product.service';
<p-button label="Save" (click)="close()" /> <p-button label="Save" (click)="close()" />
</ng-template> </ng-template>
</p-dialog> </p-dialog>
<p-button label="Show" [style]="{width: 'auto'}" (click)="open()" /> <p-button label="Show" [style]="{ width: 'auto' }" (click)="open()" />
</div> </div>
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Popover</div> <div class="font-semibold text-xl mb-4">Popover</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<p-button type="button" label="Show" (click)="toggleDataTable(op2, $event)" /> <p-button type="button" label="Show" (click)="toggleDataTable(op2, $event)" />
<p-popover #op2 id="overlay_panel" [style]="{width: '450px'}"> <p-popover #op2 id="overlay_panel" [style]="{ width: '450px' }">
<!-- TABLE --> <p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" dataKey="id" [rows]="5" [paginator]="true" (onRowSelect)="onProductSelect(op2, $event)">
<ng-template #header>
<tr>
<th>Name</th>
<th>Image</th>
<th>Price</th>
</tr>
</ng-template>
<ng-template #body let-product>
<tr [pSelectableRow]="product">
<td>{{ product.name }}</td>
<td><img [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" class="w-16 shadow-sm" /></td>
<td>{{ product.price }}</td>
</tr>
</ng-template>
</p-table>
</p-popover> </p-popover>
<p-toast />
</div> </div>
</div> </div>
@@ -87,10 +103,10 @@ import { Product, ProductService } from '@/src/service/demo/product.service';
</p> </p>
</p-drawer> </p-drawer>
<p-button icon="pi pi-arrow-right" (click)="visibleLeft = true" [style]="{marginRight: '0.25em'}" /> <p-button icon="pi pi-arrow-right" (click)="visibleLeft = true" [style]="{ marginRight: '0.25em' }" />
<p-button icon="pi pi-arrow-left" (click)="visibleRight = true" [style]="{marginRight: '0.25em'}" /> <p-button icon="pi pi-arrow-left" (click)="visibleRight = true" [style]="{ marginRight: '0.25em' }" />
<p-button icon="pi pi-arrow-down" (click)="visibleTop = true" [style]="{marginRight: '0.25em'}" /> <p-button icon="pi pi-arrow-down" (click)="visibleTop = true" [style]="{ marginRight: '0.25em' }" />
<p-button icon="pi pi-arrow-up" (click)="visibleBottom = true" [style]="{marginRight: '0.25em'}" /> <p-button icon="pi pi-arrow-up" (click)="visibleBottom = true" [style]="{ marginRight: '0.25em' }" />
<p-button icon="pi pi-external-link" (click)="visibleFull = true" /> <p-button icon="pi pi-external-link" (click)="visibleFull = true" />
</div> </div>
@@ -105,7 +121,7 @@ import { Product, ProductService } from '@/src/service/demo/product.service';
<p-button label="Delete" icon="pi pi-trash" severity="danger" [style]="{ width: 'auto' }" (click)="openConfirmation()" /> <p-button label="Delete" icon="pi pi-trash" severity="danger" [style]="{ width: 'auto' }" (click)="openConfirmation()" />
<p-dialog header="Confirmation" [(visible)]="displayConfirmation" [style]="{ width: '350px' }" [modal]="true"> <p-dialog header="Confirmation" [(visible)]="displayConfirmation" [style]="{ width: '350px' }" [modal]="true">
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem" > </i> <i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem"> </i>
<span>Are you sure you want to proceed?</span> <span>Are you sure you want to proceed?</span>
</div> </div>
<ng-template #footer> <ng-template #footer>
@@ -119,7 +135,6 @@ import { Product, ProductService } from '@/src/service/demo/product.service';
providers: [ConfirmationService, MessageService, ProductService] providers: [ConfirmationService, MessageService, ProductService]
}) })
export class OverlayDoc implements OnInit { export class OverlayDoc implements OnInit {
images: any[] = []; images: any[] = [];
display: boolean = false; display: boolean = false;
@@ -138,34 +153,44 @@ export class OverlayDoc implements OnInit {
displayConfirmation: boolean = false; displayConfirmation: boolean = false;
constructor(private productService: ProductService, private confirmationService: ConfirmationService, private messageService: MessageService) { } selectedProduct!: Product;
constructor(
private productService: ProductService,
private confirmationService: ConfirmationService,
private messageService: MessageService
) {}
ngOnInit() { ngOnInit() {
this.productService.getProductsSmall().then(products => this.products = products); this.productService.getProductsSmall().then((products) => (this.products = products));
this.images = []; this.images = [];
this.images.push({ this.images.push({
source: 'assets/demo/images/sopranos/sopranos1.jpg', source: 'assets/demo/images/sopranos/sopranos1.jpg',
thumbnail: 'assets/demo/images/sopranos/sopranos1_small.jpg', title: 'Sopranos 1' thumbnail: 'assets/demo/images/sopranos/sopranos1_small.jpg',
title: 'Sopranos 1'
}); });
this.images.push({ this.images.push({
source: 'assets/demo/images/sopranos/sopranos2.jpg', source: 'assets/demo/images/sopranos/sopranos2.jpg',
thumbnail: 'assets/demo/images/sopranos/sopranos2_small.jpg', title: 'Sopranos 2' thumbnail: 'assets/demo/images/sopranos/sopranos2_small.jpg',
title: 'Sopranos 2'
}); });
this.images.push({ this.images.push({
source: 'assets/demo/images/sopranos/sopranos3.jpg', source: 'assets/demo/images/sopranos/sopranos3.jpg',
thumbnail: 'assets/demo/images/sopranos/sopranos3_small.jpg', title: 'Sopranos 3' thumbnail: 'assets/demo/images/sopranos/sopranos3_small.jpg',
title: 'Sopranos 3'
}); });
this.images.push({ this.images.push({
source: 'assets/demo/images/sopranos/sopranos4.jpg', source: 'assets/demo/images/sopranos/sopranos4.jpg',
thumbnail: 'assets/demo/images/sopranos/sopranos4_small.jpg', title: 'Sopranos 4' thumbnail: 'assets/demo/images/sopranos/sopranos4_small.jpg',
title: 'Sopranos 4'
}); });
} }
confirm(event: Event) { confirm(event: Event) {
this.confirmationService.confirm({ this.confirmationService.confirm({
key: 'confirm2', key: 'confirm2',
target: event.target || new EventTarget, target: event.target || new EventTarget(),
message: 'Are you sure that you want to proceed?', message: 'Are you sure that you want to proceed?',
icon: 'pi pi-exclamation-triangle', icon: 'pi pi-exclamation-triangle',
accept: () => { accept: () => {