From 6c51497d429734b7da9a16b17037dbecd51b5826 Mon Sep 17 00:00:00 2001
From: jacver <92895942+jacver@users.noreply.github.com>
Date: Thu, 11 Apr 2024 11:23:42 -0400
Subject: [PATCH 1/3] conditional close

conditional close and docs update
---
 package-lock.json                           | 5 ++---
 src/app/components/messages/messages.ts     | 4 ++--
 src/app/showcase/doc/apidoc/index.json      | 2 +-
 src/app/showcase/doc/messages/servicedoc.ts | 8 ++++----
 4 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ab21ed6b500..fd49c715bb6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,12 @@
 {
     "name": "primeng",
-    "version": "17.11.0",
-    "version": "17.12.0",
+    "version": "17.13.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "primeng",
-            "version": "17.12.0",
+            "version": "17.13.0",
             "license": "SEE LICENSE IN LICENSE.md",
             "devDependencies": {
                 "@angular-devkit/build-angular": "^17.3.1",
diff --git a/src/app/components/messages/messages.ts b/src/app/components/messages/messages.ts
index a17760e759d..5ae6723ae60 100644
--- a/src/app/components/messages/messages.ts
+++ b/src/app/components/messages/messages.ts
@@ -58,9 +58,9 @@ import { Subscription, timer } from 'rxjs';
                         </ng-container>
                         <ng-template #escapeOut>
                             <span *ngIf="msg.summary" class="p-message-summary" [attr.data-pc-section]="'summary'">{{ msg.summary }}</span>
-                            <span *ngIf="msg.detail" class="p-message-detail" [attr.data-pc-section]="'detail'">{{ msg.detail }}</span>
+                            <span *ngIf="msg.detail" class="p-message-detail" [attr.data-pc-section]="'detail'">{{ msg.detail }} test</span>
                         </ng-template>
-                        <button class="p-message-close p-link" (click)="removeMessage(i)" *ngIf="closable" type="button" pRipple [attr.aria-label]="closeAriaLabel" [attr.data-pc-section]="'closebutton'">
+                        <button class="p-message-close p-link" (click)="removeMessage(i)" *ngIf="msg.closable || (closable && msg.closable)" type="button" pRipple [attr.aria-label]="closeAriaLabel" [attr.data-pc-section]="'closebutton'">
                             <TimesIcon [styleClass]="'p-message-close-icon'" [attr.data-pc-section]="'closeicon'" />
                         </button>
                     </div>
diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json
index c87e1474577..2768ba8a8bf 100644
--- a/src/app/showcase/doc/apidoc/index.json
+++ b/src/app/showcase/doc/apidoc/index.json
@@ -1313,7 +1313,7 @@
             "values": [
                 {
                     "name": "Message",
-                    "description": "Deines valid options for the message.",
+                    "description": "Defines valid options for the message.",
                     "props": [
                         {
                             "name": "severity",
diff --git a/src/app/showcase/doc/messages/servicedoc.ts b/src/app/showcase/doc/messages/servicedoc.ts
index 24c1bf34256..594d616285a 100644
--- a/src/app/showcase/doc/messages/servicedoc.ts
+++ b/src/app/showcase/doc/messages/servicedoc.ts
@@ -32,8 +32,8 @@ export class ServiceDoc {
 
     addMultiple() {
         this.messageService.addAll([
-            { severity: 'success', summary: 'Service Message', detail: 'Via MessageService' },
-            { severity: 'info', summary: 'Info Message', detail: 'Via MessageService' }
+            { severity: 'success', summary: 'Service Message', detail: 'Via MessageService', closable: true },
+            { severity: 'info', summary: 'Info Message', detail: 'Via MessageService', closable: false }
         ]);
     }
 
@@ -75,8 +75,8 @@ export class MessagesServiceDemo {
 
     addMultiple() {
         this.messageService.addAll([
-            {severity:'success', summary:'Service Message', detail:'Via MessageService'},
-            {severity:'info', summary:'Info Message', detail:'Via MessageService'}
+            { severity: 'success', summary: 'Service Message', detail: 'Via MessageService', closable: true },
+            { severity: 'info', summary: 'Info Message', detail: 'Via MessageService', closable: false }
         ]);
     }
     

From 57f02bcff3fb9d326f33b74dcfc12bba7ef9dfc1 Mon Sep 17 00:00:00 2001
From: jacver <92895942+jacver@users.noreply.github.com>
Date: Fri, 12 Apr 2024 09:13:28 -0400
Subject: [PATCH 2/3] PR feedback

---
 src/app/components/messages/messages.ts     | 4 ++--
 src/app/showcase/doc/messages/servicedoc.ts | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/components/messages/messages.ts b/src/app/components/messages/messages.ts
index 5ae6723ae60..67ccdee6d50 100644
--- a/src/app/components/messages/messages.ts
+++ b/src/app/components/messages/messages.ts
@@ -58,9 +58,9 @@ import { Subscription, timer } from 'rxjs';
                         </ng-container>
                         <ng-template #escapeOut>
                             <span *ngIf="msg.summary" class="p-message-summary" [attr.data-pc-section]="'summary'">{{ msg.summary }}</span>
-                            <span *ngIf="msg.detail" class="p-message-detail" [attr.data-pc-section]="'detail'">{{ msg.detail }} test</span>
+                            <span *ngIf="msg.detail" class="p-message-detail" [attr.data-pc-section]="'detail'">{{ msg.detail }}</span>
                         </ng-template>
-                        <button class="p-message-close p-link" (click)="removeMessage(i)" *ngIf="msg.closable || (closable && msg.closable)" type="button" pRipple [attr.aria-label]="closeAriaLabel" [attr.data-pc-section]="'closebutton'">
+                        <button class="p-message-close p-link" (click)="removeMessage(i)" *ngIf="closable && (msg.closable ?? true)" type="button" pRipple [attr.aria-label]="closeAriaLabel" [attr.data-pc-section]="'closebutton'">
                             <TimesIcon [styleClass]="'p-message-close-icon'" [attr.data-pc-section]="'closeicon'" />
                         </button>
                     </div>
diff --git a/src/app/showcase/doc/messages/servicedoc.ts b/src/app/showcase/doc/messages/servicedoc.ts
index 594d616285a..e08b3d4a002 100644
--- a/src/app/showcase/doc/messages/servicedoc.ts
+++ b/src/app/showcase/doc/messages/servicedoc.ts
@@ -32,8 +32,8 @@ export class ServiceDoc {
 
     addMultiple() {
         this.messageService.addAll([
-            { severity: 'success', summary: 'Service Message', detail: 'Via MessageService', closable: true },
-            { severity: 'info', summary: 'Info Message', detail: 'Via MessageService', closable: false }
+            { severity: 'success', summary: 'Service Message', detail: 'Via MessageService' },
+            { severity: 'info', summary: 'Info Message', detail: 'Via MessageService' }
         ]);
     }
 
@@ -75,8 +75,8 @@ export class MessagesServiceDemo {
 
     addMultiple() {
         this.messageService.addAll([
-            { severity: 'success', summary: 'Service Message', detail: 'Via MessageService', closable: true },
-            { severity: 'info', summary: 'Info Message', detail: 'Via MessageService', closable: false }
+            { severity: 'success', summary: 'Service Message', detail: 'Via MessageService' },
+            { severity: 'info', summary: 'Info Message', detail: 'Via MessageService' }
         ]);
     }
     

From 38df04c7b7edc3b9c05b8b2b9c273183fe612681 Mon Sep 17 00:00:00 2001
From: jacver <92895942+jacver@users.noreply.github.com>
Date: Fri, 12 Apr 2024 09:19:56 -0400
Subject: [PATCH 3/3] dynamic ID

---
 src/app/components/messages/messages.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/messages/messages.ts b/src/app/components/messages/messages.ts
index 67ccdee6d50..2b8b2544c49 100644
--- a/src/app/components/messages/messages.ts
+++ b/src/app/components/messages/messages.ts
@@ -42,7 +42,7 @@ import { Subscription, timer } from 'rxjs';
                     role="alert"
                     [@messageAnimation]="{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }"
                 >
-                    <div class="p-message-wrapper" [attr.data-pc-section]="'wrapper'">
+                    <div class="p-message-wrapper" [attr.data-pc-section]="'wrapper'" [attr.id]="msg.id || null">
                         <span *ngIf="msg.icon" [class]="'p-message-icon pi ' + msg.icon" [attr.data-pc-section]="'icon'"> </span>
                         <span class="p-message-icon" *ngIf="!msg.icon">
                             <ng-container>