docu: Update Docu p-button (click) to (onClick)

src/app/showcase/doc/accordion/controlleddoc.ts

@@ -9,9 +9,9 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card">
             <div class="flex mb-3 gap-2 justify-content-end">
-                <p-button (click)="activeIndex = 0" rounded="true" label="1" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 0" />
-                <p-button (click)="activeIndex = 1" rounded="true" label="2" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 1" />
-                <p-button (click)="activeIndex = 2" rounded="true" label="3" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 2" />
+                <p-button (onClick)="activeIndex = 0" rounded="true" label="1" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 0" />
+                <p-button (onClick)="activeIndex = 1" rounded="true" label="2" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 1" />
+                <p-button (onClick)="activeIndex = 2" rounded="true" label="3" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 2" />
             </div>
             <p-accordion (activeIndexChange)="activeIndexChange($event)" [activeIndex]="activeIndex">
                 <p-accordionTab header="Header I">

src/app/showcase/doc/blockui/basicdoc.ts

@@ -8,8 +8,8 @@ import { Code } from '@domain/code';
             <p>The element to block should be placed as a child of BlockUI and <i>blocked</i> property is required to control the state.</p>
         </app-docsectiontext>
         <div class="card">
-            <p-button pRipple label="Block" (click)="blockedPanel = true" />
-            <p-button pRipple label="Unblock" (click)="blockedPanel = false" />
+            <p-button pRipple label="Block" (onClick)="blockedPanel = true" />
+            <p-button pRipple label="Unblock" (onClick)="blockedPanel = false" />
             <p-blockUI [target]="pnl" [blocked]="blockedPanel">
                 <i class="pi pi-lock" style="font-size: 3rem"></i>
             </p-blockUI>
@@ -27,8 +27,8 @@ export class BasicDoc {
     blockedPanel: boolean = false;
 
     code: Code = {
-        basic: `<p-button pRipple label="Block" (click)="blockedPanel = true" />
-<p-button pRipple label="Unblock" (click)="blockedPanel = false" />
+        basic: `<p-button pRipple label="Block" (onClick)="blockedPanel = true" />
+<p-button pRipple label="Unblock" (onClick)="blockedPanel = false" />
 <p-blockUI [target]="pnl" [blocked]="blockedPanel">
     <i class="pi pi-lock" style="font-size: 3rem"></i>
 </p-blockUI>
@@ -38,8 +38,8 @@ export class BasicDoc {
     </p>
 </p-panel>`,
         html: `<div class="card">
-    <p-button pRipple label="Block" (click)="blockedPanel = true" />
-    <p-button pRipple label="Unblock" (click)="blockedPanel = false" />
+    <p-button pRipple label="Block" (onClick)="blockedPanel = true" />
+    <p-button pRipple label="Unblock" (onClick)="blockedPanel = false" />
     <p-blockUI [target]="pnl" [blocked]="blockedPanel">
         <i class="pi pi-lock" style="font-size: 3rem"></i>
     </p-blockUI>

src/app/showcase/doc/blockui/documentdoc.ts

@@ -9,7 +9,7 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card">
             <p-blockUI [blocked]="blockedDocument" />
-            <p-button pRipple label="Block" (click)="blockDocument()" />
+            <p-button pRipple label="Block" (onClick)="blockDocument()" />
         </div>
         <app-code [code]="code" selector="block-ui-document-demo"></app-code>
     `
@@ -31,7 +31,7 @@ export class DocumentDoc {
         basic: `<p-blockUI [blocked]="blockedDocument" />`,
         html: `<div class="card">
     <p-blockUI [blocked]="blockedDocument" />
-    <p-button pRipple label="Block" (click)="blockDocument()" />
+    <p-button pRipple label="Block" (onClick)="blockDocument()" />
 </div>`,
         typescript: `import { Component, ChangeDetectorRef } from '@angular/core';
 import { BlockUIModule } from 'primeng/blockui';

src/app/showcase/doc/confirmdialog/accessibilitydoc.ts

@@ -83,7 +83,7 @@ this.confirmationService.confirm({
     reject: () => rejectFunc()
 });
 
-<p-button (click)="confirm1()" icon="pi pi-check" label="Confirm"></p-button>
+<p-button (onClick)="confirm1()" icon="pi pi-check" label="Confirm"></p-button>
 
 <p-confirmDialog></p-confirmDialog>
         `

src/app/showcase/doc/confirmdialog/basicdoc.ts

@@ -11,8 +11,8 @@ import { Code } from '@domain/code';
         <div class="card flex justify-content-center gap-2">
             <p-toast />
             <p-confirmDialog />
-            <p-button (click)="confirm1($event)" label="Save" [outlined]="true" />
-            <p-button (click)="confirm2($event)" label="Delete" severity="danger" [outlined]="true" />
+            <p-button (onClick)="confirm1($event)" label="Save" [outlined]="true" />
+            <p-button (onClick)="confirm2($event)" label="Delete" severity="danger" [outlined]="true" />
         </div>
         <app-code [code]="code" selector="confirm-dialog-basic-demo"></app-code>
     `,
@@ -65,14 +65,14 @@ export class BasicDoc {
     code: Code = {
         basic: `<p-toast />
 <p-confirmDialog />
-<p-button (click)="confirm1($event)" label="Save" [outlined]="true" />
-<p-button (click)="confirm2($event)" label="Delete" severity="danger" [outlined]="true" />`,
+<p-button (onClick)="confirm1($event)" label="Save" [outlined]="true" />
+<p-button (onClick)="confirm2($event)" label="Delete" severity="danger" [outlined]="true" />`,
 
         html: `<div class="card flex justify-content-center gap-2">
     <p-toast />
     <p-confirmDialog />
-    <p-button (click)="confirm1($event)" label="Save" [outlined]="true" />
-    <p-button (click)="confirm2($event)" label="Delete" severity="danger" [outlined]="true" />
+    <p-button (onClick)="confirm1($event)" label="Save" [outlined]="true" />
+    <p-button (onClick)="confirm2($event)" label="Delete" severity="danger" [outlined]="true" />
 </div>`,
 
         typescript: `import { Component } from '@angular/core';

src/app/showcase/doc/confirmdialog/headlessdoc.ts

@@ -25,7 +25,7 @@ import { Code } from '@domain/code';
                     </div>
                 </ng-template>
             </p-confirmDialog>
-            <p-button (click)="confirm()" icon="pi pi-check" label="Confirm" />
+            <p-button (onClick)="confirm()" icon="pi pi-check" label="Confirm" />
         </div>
         <app-code [code]="code" selector="confirm-dialog-headless-demo"></app-code>
     `,
@@ -79,7 +79,7 @@ export class HeadlessDoc {
         </div>
     </ng-template>
 </p-confirmDialog>
-<p-button (click)="confirm()" icon="pi pi-check" label="Confirm" />`,
+<p-button (onClick)="confirm()" icon="pi pi-check" label="Confirm" />`,
 
         html: `<div class="card flex justify-content-center">
 <p-toast />
@@ -110,7 +110,7 @@ export class HeadlessDoc {
         </div>
     </ng-template>
 </p-confirmDialog>
-<p-button (click)="confirm()" icon="pi pi-check" label="Confirm" />
+<p-button (onClick)="confirm()" icon="pi pi-check" label="Confirm" />
 </div>`,
 
         typescript: `import { Component } from '@angular/core';

src/app/showcase/doc/confirmdialog/positiondoc.ts

@@ -12,18 +12,18 @@ import { Code } from '@domain/code';
             <p-toast />
             <p-confirmDialog key="positionDialog" [position]="position" rejectButtonStyleClass="p-button-outlined" />
             <div class="flex flex-wrap justify-content-center gap-2">
-                <p-button (click)="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" />
-                <p-button (click)="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" />
+                <p-button (onClick)="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" />
+                <p-button (onClick)="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" />
             </div>
             <div class="flex flex-wrap justify-content-center gap-2">
-                <p-button (click)="confirmPosition('top-left')" icon="pi pi-arrow-down" label="TopLeft" severity="secondary" />
-                <p-button (click)="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" />
-                <p-button (click)="confirmPosition('top-right')" icon="pi pi-arrow-down" label="TopRight" severity="secondary" />
+                <p-button (onClick)="confirmPosition('top-left')" icon="pi pi-arrow-down" label="TopLeft" severity="secondary" />
+                <p-button (onClick)="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" />
+                <p-button (onClick)="confirmPosition('top-right')" icon="pi pi-arrow-down" label="TopRight" severity="secondary" />
             </div>
             <div class="flex flex-wrap justify-content-center gap-2">
-                <p-button (click)="confirmPosition('bottom-left')" icon="pi pi-arrow-up" label="BottomLeft" severity="secondary" />
-                <p-button (click)="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" />
-                <p-button (click)="confirmPosition('bottom-right')" icon="pi pi-arrow-up" label="BottomRight" severity="secondary" />
+                <p-button (onClick)="confirmPosition('bottom-left')" icon="pi pi-arrow-up" label="BottomLeft" severity="secondary" />
+                <p-button (onClick)="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" />
+                <p-button (onClick)="confirmPosition('bottom-right')" icon="pi pi-arrow-up" label="BottomRight" severity="secondary" />
             </div>
         </div>
         <app-code [code]="code" selector="confirm-dialog-position-demo"></app-code>

src/app/showcase/doc/confirmdialog/templatedoc.ts

@@ -25,7 +25,7 @@ import { Code } from '@domain/code';
                     </div>
                 </ng-template>
             </p-confirmDialog>
-            <p-button (click)="confirm()" label="Save" />
+            <p-button (onClick)="confirm()" label="Save" />
         </div>
         <app-code [code]="code" selector="confirm-dialog-template-demo"></app-code>
     `,
@@ -64,7 +64,7 @@ export class TemplateDoc {
         </div>
     </ng-template>
 </p-confirmDialog>
-<p-button (click)="confirm()" label="Save" />`,
+<p-button (onClick)="confirm()" label="Save" />`,
 
         html: `<div class="card flex justify-content-center">
     <p-toast />
@@ -76,7 +76,7 @@ export class TemplateDoc {
             </div>
         </ng-template>
     </p-confirmDialog>
-    <p-button (click)="confirm()" label="Save" />
+    <p-button (onClick)="confirm()" label="Save" />
 </div>`,
 
         typescript: `import { Component } from '@angular/core';

src/app/showcase/doc/confirmpopup/basicdoc.ts

@@ -11,8 +11,8 @@ import { Code } from '@domain/code';
         <div class="card flex justify-content-center gap-2">
             <p-toast />
             <p-confirmPopup />
-            <p-button (click)="confirm1($event)" label="Save" [outlined]="true" />
-            <p-button (click)="confirm2($event)" label="Delete" severity="danger" [outlined]="true" />
+            <p-button (onClick)="confirm1($event)" label="Save" [outlined]="true" />
+            <p-button (onClick)="confirm2($event)" label="Delete" severity="danger" [outlined]="true" />
         </div>
         <app-code [code]="code" selector="confirm-popup-basic-demo"></app-code>
     `,

src/app/showcase/doc/confirmpopup/headlessdoc.ts

@@ -15,13 +15,13 @@ import { ConfirmPopup } from 'primeng/confirmpopup';
                     <div class="border-round p-3">
                         <span>{{ message.message }}</span>
                         <div class="flex align-items-center gap-2 mt-3">
-                            <p-button (click)="accept()" label="Save" size="small" />
-                            <p-button (click)="reject()" label="Cancel" [outlined]="true" size="small" />
+                            <p-button (onClick)="accept()" label="Save" size="small" />
+                            <p-button (onClick)="reject()" label="Cancel" [outlined]="true" size="small" />
                         </div>
                     </div>
                 </ng-template>
             </p-confirmPopup>
-            <p-button (click)="confirm($event)" label="Save" />
+            <p-button (onClick)="confirm($event)" label="Save" />
         </div>
         <app-code [code]="code" selector="confirm-popup-headless-demo"></app-code>
     `,
@@ -63,13 +63,13 @@ export class HeadlessDoc {
             <div class="border-round p-3">
                 <span>{{ message.message }}</span>
                 <div class="flex align-items-center gap-2 mt-3">
-                    <p-button (click)="accept()" label="Save" size="small" />
-                    <p-button (click)="reject()" label="Cancel" [outlined]="true" size="small" />
+                    <p-button (onClick)="accept()" label="Save" size="small" />
+                    <p-button (onClick)="reject()" label="Cancel" [outlined]="true" size="small" />
                 </div>
             </div>
         </ng-template>
     </p-confirmPopup>
-<p-button (click)="confirm($event)" label="Save" />`,
+<p-button (onClick)="confirm($event)" label="Save" />`,
 
         html: `<div class="card flex justify-content-center gap-2">
     <p-toast />
@@ -78,13 +78,13 @@ export class HeadlessDoc {
             <div class="border-round p-3">
                 <span>{{ message.message }}</span>
                 <div class="flex align-items-center gap-2 mt-3">
-                    <p-button (click)="accept()" label="Save" size="small" />
-                    <p-button (click)="reject()" label="Cancel" [outlined]="true" size="small" />
+                    <p-button (onClick)="accept()" label="Save" size="small" />
+                    <p-button (onClick)="reject()" label="Cancel" [outlined]="true" size="small" />
                 </div>
             </div>
         </ng-template>
     </p-confirmPopup>
-<p-button (click)="confirm($event)" label="Save" />
+<p-button (onClick)="confirm($event)" label="Save" />
 </div>`,
 
         typescript: `import { Component, ViewChild } from '@angular/core';

src/app/showcase/doc/confirmpopup/templatedoc.ts

@@ -18,7 +18,7 @@ import { Code } from '@domain/code';
                     </div>
                 </ng-template>
             </p-confirmPopup>
-            <p-button (click)="confirm($event)" label="Save" />
+            <p-button (onClick)="confirm($event)" label="Save" />
         </div>
         <app-code [code]="code" selector="confirm-popup-template-demo"></app-code>
     `,
@@ -60,7 +60,7 @@ export class TemplateDoc {
             </div>
         </ng-template>
     </p-confirmPopup>
-<p-button (click)="confirm($event)" label="Save" />`,
+<p-button (onClick)="confirm($event)" label="Save" />`,
 
         html: `<div class="card flex justify-content-center gap-2">
         <p-toast />
@@ -72,7 +72,7 @@ export class TemplateDoc {
                 </div>
             </ng-template>
         </p-confirmPopup>
-    <p-button (click)="confirm($event)" label="Save" />
+    <p-button (onClick)="confirm($event)" label="Save" />
 </div>`,
 
         typescript: `import { Component } from '@angular/core';

src/app/showcase/doc/dialog/basicdoc.ts

@@ -9,7 +9,7 @@ import { Code } from '@domain/code';
         >
 
         <div class="card flex justify-content-center">
-            <p-button (click)="showDialog()" label="Show" />
+            <p-button (onClick)="showDialog()" label="Show" />
             <p-dialog header="Edit Profile" [modal]="true" [(visible)]="visible" [style]="{ width: '25rem' }">
                 <span class="p-text-secondary block mb-5">Update your information.</span>
                 <div class="flex align-items-center gap-3 mb-3">
@@ -21,8 +21,8 @@ import { Code } from '@domain/code';
                     <input pInputText id="email" class="flex-auto" autocomplete="off" />
                 </div>
                 <div class="flex justify-content-end gap-2">
-                    <p-button label="Cancel" severity="secondary" (click)="visible = false" />
-                    <p-button label="Save" (click)="visible = false" />
+                    <p-button label="Cancel" severity="secondary" (onClick)="visible = false" />
+                    <p-button label="Save" (onClick)="visible = false" />
                 </div>
             </p-dialog>
         </div>
@@ -37,7 +37,7 @@ export class BasicDoc {
     }
 
     code: Code = {
-        basic: `<p-button (click)="showDialog()" label="Show" />
+        basic: `<p-button (onClick)="showDialog()" label="Show" />
 <p-dialog header="Edit Profile" [modal]="true" [(visible)]="visible" [style]="{ width: '25rem' }">
     <span class="p-text-secondary block mb-5">Update your information.</span>
     <div class="flex align-items-center gap-3 mb-3">
@@ -49,13 +49,13 @@ export class BasicDoc {
         <input pInputText id="email" class="flex-auto" autocomplete="off" />
     </div>
     <div class="flex justify-content-end gap-2">
-        <p-button label="Cancel" severity="secondary" (click)="visible = false" />
-        <p-button label="Save" (click)="visible = false" />
+        <p-button label="Cancel" severity="secondary" (onClick)="visible = false" />
+        <p-button label="Save" (onClick)="visible = false" />
     </div>
 </p-dialog>`,
 
         html: `<div class="card flex justify-content-center">
-    <p-button (click)="showDialog()" label="Show" />
+    <p-button (onClick)="showDialog()" label="Show" />
     <p-dialog header="Edit Profile" [modal]="true" [(visible)]="visible" [style]="{ width: '25rem' }">
         <span class="p-text-secondary block mb-5">Update your information.</span>
         <div class="flex align-items-center gap-3 mb-3">
@@ -67,8 +67,8 @@ export class BasicDoc {
             <input pInputText id="email" class="flex-auto" autocomplete="off" />
         </div>
         <div class="flex justify-content-end gap-2">
-            <p-button label="Cancel" severity="secondary" (click)="visible = false" />
-            <p-button label="Save" (click)="visible = false" />
+            <p-button label="Cancel" severity="secondary" (onClick)="visible = false" />
+            <p-button label="Save" (onClick)="visible = false" />
         </div>
     </p-dialog>
 </div>`,