From 7c238f09da41f2d4ca68bbcfc4a43d933f82bc7f Mon Sep 17 00:00:00 2001
From: Denys Pereverziev <denys@salonkee.lu>
Date: Mon, 7 Oct 2024 13:25:03 +0200
Subject: [PATCH] feat(image): add image description template

---
 src/app/components/image/image.css          |  4 ++++
 src/app/components/image/image.interface.ts |  5 +++++
 src/app/components/image/image.ts           |  9 +++++++++
 src/app/showcase/doc/apidoc/index.json      | 14 ++++++++++++++
 4 files changed, 32 insertions(+)

diff --git a/src/app/components/image/image.css b/src/app/components/image/image.css
index cab0d4246cb..3693e740b40 100755
--- a/src/app/components/image/image.css
+++ b/src/app/components/image/image.css
@@ -67,4 +67,8 @@
         max-width: 100vw;
         max-height: 100vh;
     }
+
+    .p-image-description {
+        line-height: normal;
+    }
 }
diff --git a/src/app/components/image/image.interface.ts b/src/app/components/image/image.interface.ts
index ec6971d07f9..a5e89e79840 100644
--- a/src/app/components/image/image.interface.ts
+++ b/src/app/components/image/image.interface.ts
@@ -29,4 +29,9 @@ export interface ImageTemplates {
      * Custom template of closeicon.
      */
     closeicon(): TemplateRef<any>;
+
+    /**
+     * Custom template of imagedescription.
+     */
+    imagedescription(): TemplateRef<any>;
 }
diff --git a/src/app/components/image/image.ts b/src/app/components/image/image.ts
index 30bf5b64421..b753de3be6f 100755
--- a/src/app/components/image/image.ts
+++ b/src/app/components/image/image.ts
@@ -79,6 +79,9 @@ import { FocusTrapModule } from 'primeng/focustrap';
                     (@animation.done)="onAnimationEnd($event)"
                 >
                     <img [attr.src]="previewImageSrc ? previewImageSrc : src" [attr.srcset]="previewImageSrcSet" [attr.sizes]="previewImageSizes" class="p-image-preview" [ngStyle]="imagePreviewStyle()" (click)="onPreviewImageClick()" />
+                    <div class="p-image-description">
+                        <ng-template *ngTemplateOutlet="imageDescriptionTemplate"></ng-template>
+                    </div>
                 </div>
             </div>
         </span>
@@ -224,6 +227,8 @@ export class Image implements AfterContentInit {
 
     closeIconTemplate: TemplateRef<any> | undefined;
 
+    imageDescriptionTemplate: TemplateRef<any> | undefined;
+
     maskVisible: boolean = false;
 
     previewVisible: boolean = false;
@@ -287,6 +292,10 @@ export class Image implements AfterContentInit {
                     this.closeIconTemplate = item.template;
                     break;
 
+                case 'imagedescription':
+                    this.imageDescriptionTemplate = item.template;
+                    break;
+
                 default:
                     this.indicatorTemplate = item.template;
                     break;
diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json
index 8cc93b7802e..48089ff3ef0 100644
--- a/src/app/showcase/doc/apidoc/index.json
+++ b/src/app/showcase/doc/apidoc/index.json
@@ -10732,6 +10732,14 @@
                             "default": "true",
                             "description": "Specifies if autofocus should happen on show."
                         },
+                        {
+                            "name": "focusOnClose",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Specifies if autofocus should happen on close."
+                        },
                         {
                             "name": "focusTrap",
                             "optional": true,
@@ -12964,6 +12972,12 @@
                         "name": "closeicon",
                         "parameters": [],
                         "description": "Custom template of closeicon."
+                    },
+                    {
+                        "parent": "image",
+                        "name": "imagedescription",
+                        "parameters": [],
+                        "description": "Custom template of imagedescription."
                     }
                 ]
             }