primeng 19.0.0 → 19.0.2

package/fesm2022/primeng-galleria.mjs

@@ -2,7 +2,7 @@ import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, inject, PLATFORM_ID, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, Output, ViewChild, ContentChildren, HostListener, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, inject, PLATFORM_ID, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, Output, ViewChild, ContentChild, ContentChildren, HostListener, NgModule } from '@angular/core';
 import { addClass, focus, findSingle, blockBodyScroll, unblockBodyScroll, removeClass, uuid, setAttribute, find, getAttribute } from '@primeuix/utils';
 import { PrimeTemplate, SharedModule } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
@@ -653,11 +653,22 @@ var GalleriaClasses;
     GalleriaClasses["nextThumbnailIcon"] = "p-galleria-thumbnail-next-icon";
 })(GalleriaClasses || (GalleriaClasses = {}));
 
-const _c0 = ["mask"];
-const _c1 = ["container"];
-const _c2 = () => ({ "p-galleria-mask p-overlay-mask p-overlay-mask-enter": true });
-const _c3 = (a0, a1) => ({ showTransitionParams: a0, hideTransitionParams: a1 });
-const _c4 = a0 => ({ value: "visible", params: a0 });
+const _c0 = ["header"];
+const _c1 = ["footer"];
+const _c2 = ["indicator"];
+const _c3 = ["caption"];
+const _c4 = ["closeicon"];
+const _c5 = ["previousthumbnailicon"];
+const _c6 = ["nextthumbnailicon"];
+const _c7 = ["itempreviousicon"];
+const _c8 = ["itemnexticon"];
+const _c9 = ["item"];
+const _c10 = ["thumbnail"];
+const _c11 = ["mask"];
+const _c12 = ["container"];
+const _c13 = () => ({ "p-galleria-mask p-overlay-mask p-overlay-mask-enter": true });
+const _c14 = (a0, a1) => ({ showTransitionParams: a0, hideTransitionParams: a1 });
+const _c15 = a0 => ({ value: "visible", params: a0 });
 function Galleria_div_0_div_2_p_galleriaContent_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "p-galleriaContent", 7);
@@ -665,7 +676,7 @@ function Galleria_div_0_div_2_p_galleriaContent_2_Template(rf, ctx) { if (rf & 1
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("@animation", i0.ɵɵpureFunction1(9, _c4, i0.ɵɵpureFunction2(6, _c3, ctx_r1.showTransitionOptions, ctx_r1.hideTransitionOptions)))("value", ctx_r1.value)("activeIndex", ctx_r1.activeIndex)("numVisible", ctx_r1.numVisibleLimit || ctx_r1.numVisible)("ngStyle", ctx_r1.containerStyle)("fullScreen", ctx_r1.fullScreen);
+    i0.ɵɵproperty("@animation", i0.ɵɵpureFunction1(9, _c15, i0.ɵɵpureFunction2(6, _c14, ctx_r1.showTransitionOptions, ctx_r1.hideTransitionOptions)))("value", ctx_r1.value)("activeIndex", ctx_r1.activeIndex)("numVisible", ctx_r1.numVisibleLimit || ctx_r1.numVisible)("ngStyle", ctx_r1.containerStyle)("fullScreen", ctx_r1.fullScreen);
 } }
 function Galleria_div_0_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 5, 2);
@@ -674,7 +685,7 @@ function Galleria_div_0_div_2_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵclassMap(ctx_r1.maskClass);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction0(6, _c2));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction0(6, _c13));
     i0.ɵɵattribute("role", ctx_r1.fullScreen ? "dialog" : "region")("aria-modal", ctx_r1.fullScreen ? "true" : undefined);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r1.visible);
@@ -697,9 +708,9 @@ function Galleria_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("value", ctx_r1.value)("activeIndex", ctx_r1.activeIndex)("numVisible", ctx_r1.numVisibleLimit || ctx_r1.numVisible);
 } }
-const _c5 = ["closeButton"];
-const _c6 = (a0, a1, a2) => ({ "p-galleria p-component": true, "p-galleria-fullscreen": a0, "p-galleria-inset-indicators": a1, "p-galleria-hover-navigators": a2 });
-const _c7 = () => ({});
+const _c16 = ["closeButton"];
+const _c17 = (a0, a1, a2) => ({ "p-galleria p-component": true, "p-galleria-fullscreen": a0, "p-galleria-inset-indicators": a1, "p-galleria-hover-navigators": a2 });
+const _c18 = () => ({});
 function GalleriaContent_div_0_button_1_TimesIcon_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "TimesIcon", 11);
 } if (rf & 2) {
@@ -719,9 +730,9 @@ function GalleriaContent_div_0_button_1_Template(rf, ctx) { if (rf & 1) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵattribute("aria-label", ctx_r2.closeAriaLabel())("data-pc-section", "closebutton");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.galleria.closeIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.galleria.closeIconTemplate && !ctx_r2.galleria._closeIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.galleria.closeIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.galleria.closeIconTemplate || ctx_r2.galleria._closeIconTemplate);
 } }
 function GalleriaContent_div_0_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 12);
@@ -764,12 +775,12 @@ function GalleriaContent_div_0_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵclassMap(ctx_r2.galleriaClass());
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(24, _c6, ctx_r2.galleria.fullScreen, ctx_r2.galleria.showIndicatorsOnItem, ctx_r2.galleria.showItemNavigatorsOnHover && !ctx_r2.galleria.fullScreen))("ngStyle", !ctx_r2.galleria.fullScreen ? ctx_r2.galleria.containerStyle : i0.ɵɵpureFunction0(28, _c7))("pFocusTrapDisabled", !ctx_r2.fullScreen);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(24, _c17, ctx_r2.galleria.fullScreen, ctx_r2.galleria.showIndicatorsOnItem, ctx_r2.galleria.showItemNavigatorsOnHover && !ctx_r2.galleria.fullScreen))("ngStyle", !ctx_r2.galleria.fullScreen ? ctx_r2.galleria.containerStyle : i0.ɵɵpureFunction0(28, _c18))("pFocusTrapDisabled", !ctx_r2.fullScreen);
     i0.ɵɵattribute("id", ctx_r2.id)("role", "region");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r2.galleria.fullScreen);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.galleria.templates && ctx_r2.galleria.headerFacet);
+    i0.ɵɵproperty("ngIf", ctx_r2.galleria.templates && (ctx_r2.galleria.headerFacet || ctx_r2.galleria.headerTemplate));
     i0.ɵɵadvance();
     i0.ɵɵattribute("aria-live", ctx_r2.galleria.autoPlay ? "polite" : "off");
     i0.ɵɵadvance();
@@ -777,7 +788,7 @@ function GalleriaContent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r2.galleria.showThumbnails);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.galleria.templates && ctx_r2.galleria.footerFacet);
+    i0.ɵɵproperty("ngIf", ctx_r2.shouldRenderFooter());
 } }
 function GalleriaItemSlot_ng_container_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -791,9 +802,9 @@ function GalleriaItemSlot_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.contentTemplate)("ngTemplateOutletContext", ctx_r0.context);
 } }
-const _c8 = a0 => ({ "p-galleria-prev-button p-galleria-nav-button": true, "p-disabled": a0 });
-const _c9 = a0 => ({ "p-galleria-next-button p-galleria-nav-button": true, "p-disabled": a0 });
-const _c10 = a0 => ({ "p-galleria-indicator": true, "p-galleria-indicator-active": a0 });
+const _c19 = a0 => ({ "p-galleria-prev-button p-galleria-nav-button": true, "p-disabled": a0 });
+const _c20 = a0 => ({ "p-galleria-next-button p-galleria-nav-button": true, "p-disabled": a0 });
+const _c21 = a0 => ({ "p-galleria-indicator": true, "p-galleria-indicator-active": a0 });
 function GalleriaItem_button_1_ChevronLeftIcon_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "ChevronLeftIcon", 9);
 } if (rf & 2) {
@@ -811,11 +822,11 @@ function GalleriaItem_button_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c8, ctx_r1.isNavBackwardDisabled()))("disabled", ctx_r1.isNavBackwardDisabled());
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c19, ctx_r1.isNavBackwardDisabled()))("disabled", ctx_r1.isNavBackwardDisabled());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.galleria.itemPreviousIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.galleria.itemPreviousIconTemplate && !ctx_r1.galleria._itemPreviousIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.galleria.itemPreviousIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.galleria.itemPreviousIconTemplate || ctx_r1.galleria._itemPreviousIconTemplate);
 } }
 function GalleriaItem_button_4_ChevronRightIcon_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "ChevronRightIcon", 9);
@@ -834,11 +845,11 @@ function GalleriaItem_button_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c9, ctx_r1.isNavForwardDisabled()))("disabled", ctx_r1.isNavForwardDisabled());
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c20, ctx_r1.isNavForwardDisabled()))("disabled", ctx_r1.isNavForwardDisabled());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.galleria.itemNextIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.galleria.itemNextIconTemplate && !ctx_r1.galleria._itemNextIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.galleria.itemNextIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.galleria.itemNextIconTemplate || ctx_r1.galleria._itemNextIconTemplate);
 } }
 function GalleriaItem_div_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 10);
@@ -862,10 +873,10 @@ function GalleriaItem_ul_6_li_1_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const index_r5 = ctx.index;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c10, ctx_r1.isIndicatorItemActive(index_r5)));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c21, ctx_r1.isIndicatorItemActive(index_r5)));
     i0.ɵɵattribute("aria-label", ctx_r1.ariaPageLabel(index_r5 + 1))("aria-selected", ctx_r1.activeIndex === index_r5)("aria-controls", ctx_r1.id + "_item_" + index_r5);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.indicatorFacet);
+    i0.ɵɵproperty("ngIf", !ctx_r1.indicatorFacet && !ctx_r1.galleria.indicatorTemplate);
     i0.ɵɵadvance();
     i0.ɵɵproperty("index", index_r5)("templates", ctx_r1.templates);
 } }
@@ -878,11 +889,11 @@ function GalleriaItem_ul_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngForOf", ctx_r1.value);
 } }
-const _c11 = ["itemsContainer"];
-const _c12 = a0 => ({ height: a0 });
-const _c13 = a0 => ({ "p-galleria-thumbnail-prev-button p-galleria-thumbnail-nav-button": true, "p-disabled": a0 });
-const _c14 = (a0, a1, a2, a3) => ({ "p-galleria-thumbnail-item": true, "p-galleria-thumbnail-item-current": a0, "p-galleria-thumbnail-item-active": a1, "p-galleria-thumbnail-item-start": a2, "p-galleria-thumbnail-item-end": a3 });
-const _c15 = a0 => ({ "p-galleria-thumbnail-next-button p-galleria-thumbnail-nav-button": true, "p-disabled": a0 });
+const _c22 = ["itemsContainer"];
+const _c23 = a0 => ({ height: a0 });
+const _c24 = a0 => ({ "p-galleria-thumbnail-prev-button p-galleria-thumbnail-nav-button": true, "p-disabled": a0 });
+const _c25 = (a0, a1, a2, a3) => ({ "p-galleria-thumbnail-item": true, "p-galleria-thumbnail-item-current": a0, "p-galleria-thumbnail-item-active": a1, "p-galleria-thumbnail-item-start": a2, "p-galleria-thumbnail-item-end": a3 });
+const _c26 = a0 => ({ "p-galleria-thumbnail-next-button p-galleria-thumbnail-nav-button": true, "p-disabled": a0 });
 function GalleriaThumbnails_button_2_ng_container_1_ChevronLeftIcon_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "ChevronLeftIcon", 11);
 } if (rf & 2) {
@@ -916,12 +927,12 @@ function GalleriaThumbnails_button_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c13, ctx_r2.isNavBackwardDisabled()))("disabled", ctx_r2.isNavBackwardDisabled());
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c24, ctx_r2.isNavBackwardDisabled()))("disabled", ctx_r2.isNavBackwardDisabled());
     i0.ɵɵattribute("aria-label", ctx_r2.ariaPrevButtonLabel());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.galleria.previousThumbnailIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.galleria.previousThumbnailIconTemplate && !ctx_r2.galleria._previousThumbnailIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.galleria.previousThumbnailIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.galleria.previousThumbnailIconTemplate || ctx_r2.galleria._previousThumbnailIconTemplate);
 } }
 function GalleriaThumbnails_div_6_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -935,7 +946,7 @@ function GalleriaThumbnails_div_6_Template(rf, ctx) { if (rf & 1) {
     const item_r6 = ctx.$implicit;
     const index_r5 = ctx.index;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction4(10, _c14, ctx_r2.activeIndex === index_r5, ctx_r2.isItemActive(index_r5), ctx_r2.firstItemAciveIndex() === index_r5, ctx_r2.lastItemActiveIndex() === index_r5));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction4(10, _c25, ctx_r2.activeIndex === index_r5, ctx_r2.isItemActive(index_r5), ctx_r2.firstItemAciveIndex() === index_r5, ctx_r2.lastItemActiveIndex() === index_r5));
     i0.ɵɵattribute("aria-selected", ctx_r2.activeIndex === index_r5)("aria-controls", ctx_r2.containerId + "_item_" + index_r5)("data-pc-section", "thumbnailitem")("data-p-active", ctx_r2.activeIndex === index_r5);
     i0.ɵɵadvance();
     i0.ɵɵattribute("tabindex", ctx_r2.activeIndex === index_r5 ? 0 : -1)("aria-current", ctx_r2.activeIndex === index_r5 ? "page" : undefined)("aria-label", ctx_r2.ariaPageLabel(index_r5 + 1));
@@ -975,12 +986,12 @@ function GalleriaThumbnails_button_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c15, ctx_r2.isNavForwardDisabled()))("disabled", ctx_r2.isNavForwardDisabled());
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c26, ctx_r2.isNavForwardDisabled()))("disabled", ctx_r2.isNavForwardDisabled());
     i0.ɵɵattribute("aria-label", ctx_r2.ariaNextButtonLabel());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.galleria.nextThumbnailIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.galleria.nextThumbnailIconTemplate && !ctx_r2.galleria._nextThumbnailIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.galleria.nextThumbnailIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.galleria.nextThumbnailIconTemplate || ctx_r2.galleria._nextThumbnailIconTemplate);
 } }
 /**
  * Galleria is an advanced content gallery component.
@@ -1155,15 +1166,28 @@ class Galleria extends BaseComponent {
     container;
     _visible = false;
     _activeIndex = 0;
+    headerTemplate;
     headerFacet;
+    footerTemplate;
     footerFacet;
+    indicatorTemplate;
     indicatorFacet;
+    captionTemplate;
     captionFacet;
+    _closeIconTemplate;
     closeIconTemplate;
+    _previousThumbnailIconTemplate;
     previousThumbnailIconTemplate;
+    _nextThumbnailIconTemplate;
     nextThumbnailIconTemplate;
+    _itemPreviousIconTemplate;
     itemPreviousIconTemplate;
+    _itemNextIconTemplate;
     itemNextIconTemplate;
+    _itemTemplate;
+    itemTemplate;
+    _thumbnailTemplate;
+    thumbnailTemplate;
     maskVisible = false;
     numVisibleLimit = 0;
     _componentStyle = inject(GalleriaStyle);
@@ -1204,6 +1228,12 @@ class Galleria extends BaseComponent {
                 case 'caption':
                     this.captionFacet = item.template;
                     break;
+                case 'item':
+                    this.itemTemplate = item.template;
+                    break;
+                case 'thumbnail':
+                    this.thumbnailTemplate = item.template;
+                    break;
             }
         });
     }
@@ -1271,13 +1301,35 @@ class Galleria extends BaseComponent {
     }
     static ɵfac = function Galleria_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || Galleria)(i0.ɵɵdirectiveInject(PLATFORM_ID), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Galleria, selectors: [["p-galleria"]], contentQueries: function Galleria_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+            i0.ɵɵcontentQuery(dirIndex, _c0, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c1, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c2, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c3, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c4, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c5, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c6, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c7, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c8, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c9, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c10, 4);
             i0.ɵɵcontentQuery(dirIndex, PrimeTemplate, 4);
         } if (rf & 2) {
             let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.footerTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.indicatorTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.captionTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._closeIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._previousThumbnailIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._nextThumbnailIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._itemPreviousIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._itemNextIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._itemTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._thumbnailTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templates = _t);
         } }, viewQuery: function Galleria_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0, 5);
-            i0.ɵɵviewQuery(_c1, 5);
+            i0.ɵɵviewQuery(_c11, 5);
+            i0.ɵɵviewQuery(_c12, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.mask = _t.first);
@@ -1416,11 +1468,44 @@ class Galleria extends BaseComponent {
         }], container: [{
             type: ViewChild,
             args: ['container']
+        }], headerTemplate: [{
+            type: ContentChild,
+            args: ['header', { descendants: false }]
+        }], footerTemplate: [{
+            type: ContentChild,
+            args: ['footer', { descendants: false, static: false }]
+        }], indicatorTemplate: [{
+            type: ContentChild,
+            args: ['indicator', { descendants: false }]
+        }], captionTemplate: [{
+            type: ContentChild,
+            args: ['caption', { descendants: false }]
+        }], _closeIconTemplate: [{
+            type: ContentChild,
+            args: ['closeicon', { descendants: false }]
+        }], _previousThumbnailIconTemplate: [{
+            type: ContentChild,
+            args: ['previousthumbnailicon', { descendants: false }]
+        }], _nextThumbnailIconTemplate: [{
+            type: ContentChild,
+            args: ['nextthumbnailicon', { descendants: false }]
+        }], _itemPreviousIconTemplate: [{
+            type: ContentChild,
+            args: ['itempreviousicon', { descendants: false }]
+        }], _itemNextIconTemplate: [{
+            type: ContentChild,
+            args: ['itemnexticon', { descendants: false }]
+        }], _itemTemplate: [{
+            type: ContentChild,
+            args: ['item', { descendants: false }]
+        }], _thumbnailTemplate: [{
+            type: ContentChild,
+            args: ['thumbnail', { descendants: false, static: false }]
         }], templates: [{
             type: ContentChildren,
             args: [PrimeTemplate]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(Galleria, { className: "Galleria", filePath: "galleria.ts", lineNumber: 87 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(Galleria, { className: "Galleria", filePath: "galleria.ts", lineNumber: 89 }); })();
 class GalleriaContent extends BaseComponent {
     galleria;
     cd;
@@ -1474,6 +1559,9 @@ class GalleriaContent extends BaseComponent {
             }
         }
     }
+    shouldRenderFooter() {
+        return (this.galleria.footerFacet && this.galleria.templates.toArray().length > 0) || this.galleria.footerTemplate;
+    }
     galleriaClass() {
         const thumbnailsPosClass = this.galleria.showThumbnails && this.getPositionClass('p-galleria-thumbnails', this.galleria.thumbnailsPosition);
         const indicatorPosClass = this.galleria.showIndicators && this.getPositionClass('p-galleria-indicators', this.galleria.indicatorsPosition);
@@ -1517,7 +1605,7 @@ class GalleriaContent extends BaseComponent {
     }
     static ɵfac = function GalleriaContent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || GalleriaContent)(i0.ɵɵdirectiveInject(Galleria), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.KeyValueDiffers), i0.ɵɵdirectiveInject(i0.ElementRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GalleriaContent, selectors: [["p-galleriaContent"]], viewQuery: function GalleriaContent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c5, 5);
+            i0.ɵɵviewQuery(_c16, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.closeButton = _t.first);
@@ -1551,10 +1639,10 @@ class GalleriaContent extends BaseComponent {
             [pFocusTrapDisabled]="!fullScreen"
         >
             <button *ngIf="galleria.fullScreen" type="button" class="p-galleria-close-button" (click)="maskHide.emit()" [attr.aria-label]="closeAriaLabel()" [attr.data-pc-section]="'closebutton'">
-                <TimesIcon *ngIf="!galleria.closeIconTemplate" [styleClass]="'p-galleria-close-icon'" />
-                <ng-template *ngTemplateOutlet="galleria.closeIconTemplate"></ng-template>
+                <TimesIcon *ngIf="!galleria.closeIconTemplate && !galleria._closeIconTemplate" [styleClass]="'p-galleria-close-icon'" />
+                <ng-template *ngTemplateOutlet="galleria.closeIconTemplate || galleria._closeIconTemplate"></ng-template>
             </button>
-            <div *ngIf="galleria.templates && galleria.headerFacet" class="p-galleria-header">
+            <div *ngIf="galleria.templates && (galleria.headerFacet || galleria.headerTemplate)" class="p-galleria-header">
                 <p-galleriaItemSlot type="header" [templates]="galleria.templates"></p-galleriaItemSlot>
             </div>
             <div class="p-galleria-content" [attr.aria-live]="galleria.autoPlay ? 'polite' : 'off'">
@@ -1593,7 +1681,7 @@ class GalleriaContent extends BaseComponent {
                     (stopSlideShow)="stopSlideShow()"
                 ></p-galleriaThumbnails>
             </div>
-            <div *ngIf="galleria.templates && galleria.footerFacet" class="p-galleria-footer">
+            <div *ngIf="shouldRenderFooter()" class="p-galleria-footer">
                 <p-galleriaItemSlot type="footer" [templates]="galleria.templates"></p-galleriaItemSlot>
             </div>
         </div>
@@ -1621,16 +1709,28 @@ class GalleriaContent extends BaseComponent {
             type: HostListener,
             args: ['document:fullscreenchange', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GalleriaContent, { className: "GalleriaContent", filePath: "galleria.ts", lineNumber: 478 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GalleriaContent, { className: "GalleriaContent", filePath: "galleria.ts", lineNumber: 503 }); })();
 class GalleriaItemSlot {
     templates;
     index;
     get item() {
         return this._item;
     }
+    shouldRender() {
+        return (this.contentTemplate ||
+            this.galleria._itemTemplate ||
+            this.galleria.itemTemplate ||
+            this.galleria.captionTemplate ||
+            this.galleria.captionTemplate ||
+            this.galleria.captionFacet ||
+            this.galleria.thumbnailTemplate ||
+            this.galleria._thumbnailTemplate ||
+            this.galleria.footerTemplate);
+    }
+    galleria = inject(Galleria);
     set item(item) {
         this._item = item;
-        if (this.templates) {
+        if (this.templates && this.templates?.toArray().length > 0) {
             this.templates.forEach((item) => {
                 if (item.getType() === this.type) {
                     switch (this.type) {
@@ -1640,42 +1740,85 @@ class GalleriaItemSlot {
                             this.context = { $implicit: this.item };
                             this.contentTemplate = item.template;
                             break;
+                        case 'footer':
+                            this.context = { $implicit: this.item };
+                            this.contentTemplate = item.template;
+                            break;
                     }
                 }
             });
         }
+        else {
+            this.getContentTemplate();
+        }
+    }
+    getContentTemplate() {
+        switch (this.type) {
+            case 'item':
+                this.context = { $implicit: this.item };
+                this.contentTemplate = this.galleria._itemTemplate || this.galleria.itemTemplate;
+                break;
+            case 'caption':
+                this.context = { $implicit: this.item };
+                this.contentTemplate = this.galleria.captionTemplate || this.galleria.captionFacet;
+                break;
+            case 'thumbnail':
+                this.context = { $implicit: this.item };
+                this.contentTemplate = this.galleria.thumbnailTemplate || this.galleria._thumbnailTemplate;
+                break;
+            case 'indicator':
+                this.context = { $implicit: this.index };
+                this.contentTemplate = this.galleria.indicatorTemplate || this.galleria.indicatorFacet;
+                break;
+            case 'footer':
+                this.context = { $implicit: this.item };
+                this.contentTemplate = this.galleria.footerTemplate || this.galleria.footerFacet;
+                break;
+            default:
+                this.context = { $implicit: this.item };
+                this.contentTemplate = this.galleria._itemTemplate || this.galleria.itemTemplate;
+        }
     }
     type;
     contentTemplate;
     context;
     _item;
     ngAfterContentInit() {
-        this.templates?.forEach((item) => {
-            if (item.getType() === this.type) {
-                switch (this.type) {
-                    case 'item':
-                    case 'caption':
-                    case 'thumbnail':
-                        this.context = { $implicit: this.item };
-                        this.contentTemplate = item.template;
-                        break;
-                    case 'indicator':
-                        this.context = { $implicit: this.index };
-                        this.contentTemplate = item.template;
-                        break;
-                    default:
-                        this.context = {};
-                        this.contentTemplate = item.template;
-                        break;
+        if (this.templates && this.templates.toArray().length > 0) {
+            this.templates?.forEach((item) => {
+                if (item.getType() === this.type) {
+                    switch (this.type) {
+                        case 'item':
+                        case 'caption':
+                        case 'thumbnail':
+                            this.context = { $implicit: this.item };
+                            this.contentTemplate = item.template;
+                            break;
+                        case 'indicator':
+                            this.context = { $implicit: this.index };
+                            this.contentTemplate = item.template;
+                            break;
+                        case 'footer':
+                            this.context = { $implicit: this.item };
+                            this.contentTemplate = item.template;
+                            break;
+                        default:
+                            this.context = { $implicit: this.item };
+                            this.contentTemplate = item.template;
+                            break;
+                    }
                 }
-            }
-        });
+            });
+        }
+        else {
+            this.getContentTemplate();
+        }
     }
     static ɵfac = function GalleriaItemSlot_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || GalleriaItemSlot)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GalleriaItemSlot, selectors: [["p-galleriaItemSlot"]], inputs: { templates: "templates", index: [2, "index", "index", numberAttribute], item: "item", type: "type" }, standalone: false, features: [i0.ɵɵInputTransformsFeature], decls: 1, vars: 1, consts: [[4, "ngIf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function GalleriaItemSlot_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, GalleriaItemSlot_ng_container_0_Template, 2, 2, "ng-container", 0);
         } if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.contentTemplate);
+            i0.ɵɵproperty("ngIf", ctx.shouldRender());
         } }, dependencies: [i1.NgIf, i1.NgTemplateOutlet], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GalleriaItemSlot, [{
@@ -1684,7 +1827,7 @@ class GalleriaItemSlot {
                 selector: 'p-galleriaItemSlot',
                 standalone: false,
                 template: `
-        <ng-container *ngIf="contentTemplate">
+        <ng-container *ngIf="shouldRender()">
             <ng-container *ngTemplateOutlet="contentTemplate; context: context"></ng-container>
         </ng-container>
     `,
@@ -1700,7 +1843,7 @@ class GalleriaItemSlot {
         }], type: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GalleriaItemSlot, { className: "GalleriaItemSlot", filePath: "galleria.ts", lineNumber: 608 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GalleriaItemSlot, { className: "GalleriaItemSlot", filePath: "galleria.ts", lineNumber: 637 }); })();
 class GalleriaItem {
     galleria;
     id;
@@ -1848,7 +1991,7 @@ class GalleriaItem {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.showItemNavigators);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.captionFacet);
+            i0.ɵɵproperty("ngIf", ctx.captionFacet || ctx.galleria.captionTemplate);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.showIndicators);
         } }, dependencies: () => [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, ChevronRightIcon, ChevronLeftIcon, GalleriaItemSlot], encapsulation: 2, changeDetection: 0 });
@@ -1870,8 +2013,8 @@ class GalleriaItem {
                 (focus)="onButtonFocus('left')"
                 (blur)="onButtonBlur('left')"
             >
-                <ChevronLeftIcon *ngIf="!galleria.itemPreviousIconTemplate" [styleClass]="'p-galleria-prev-icon'" />
-                <ng-template *ngTemplateOutlet="galleria.itemPreviousIconTemplate"></ng-template>
+                <ChevronLeftIcon *ngIf="!galleria.itemPreviousIconTemplate && !galleria._itemPreviousIconTemplate" [styleClass]="'p-galleria-prev-icon'" />
+                <ng-template *ngTemplateOutlet="galleria.itemPreviousIconTemplate || galleria._itemPreviousIconTemplate"></ng-template>
             </button>
             <div [id]="id + '_item_' + activeIndex" role="group" class="p-galleria-item" [attr.aria-label]="ariaSlideNumber(activeIndex + 1)" [attr.aria-roledescription]="ariaSlideLabel()">
                 <p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" class="p-galleria-item"></p-galleriaItemSlot>
@@ -1886,10 +2029,10 @@ class GalleriaItem {
                 (focus)="onButtonFocus('right')"
                 (blur)="onButtonBlur('right')"
             >
-                <ChevronRightIcon *ngIf="!galleria.itemNextIconTemplate" [styleClass]="'p-galleria-next-icon'" />
-                <ng-template *ngTemplateOutlet="galleria.itemNextIconTemplate"></ng-template>
+                <ChevronRightIcon *ngIf="!galleria.itemNextIconTemplate && !galleria._itemNextIconTemplate" [styleClass]="'p-galleria-next-icon'" />
+                <ng-template *ngTemplateOutlet="galleria.itemNextIconTemplate || galleria._itemNextIconTemplate"></ng-template>
             </button>
-            <div class="p-galleria-caption" *ngIf="captionFacet">
+            <div class="p-galleria-caption" *ngIf="captionFacet || galleria.captionTemplate">
                 <p-galleriaItemSlot type="caption" [item]="activeItem" [templates]="templates"></p-galleriaItemSlot>
             </div>
         </div>
@@ -1905,7 +2048,7 @@ class GalleriaItem {
                 [attr.aria-selected]="activeIndex === index"
                 [attr.aria-controls]="id + '_item_' + index"
             >
-                <button type="button" tabIndex="-1" class="p-galleria-indicator-button" *ngIf="!indicatorFacet"></button>
+                <button type="button" tabIndex="-1" class="p-galleria-indicator-button" *ngIf="!indicatorFacet && !galleria.indicatorTemplate"></button>
                 <p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>
             </li>
         </ul>
@@ -1952,7 +2095,7 @@ class GalleriaItem {
         }], activeIndex: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GalleriaItem, { className: "GalleriaItem", filePath: "galleria.ts", lineNumber: 729 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GalleriaItem, { className: "GalleriaItem", filePath: "galleria.ts", lineNumber: 817 }); })();
 class GalleriaThumbnails {
     galleria;
     document;
@@ -2347,7 +2490,7 @@ class GalleriaThumbnails {
     }
     static ɵfac = function GalleriaThumbnails_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || GalleriaThumbnails)(i0.ɵɵdirectiveInject(Galleria), i0.ɵɵdirectiveInject(DOCUMENT), i0.ɵɵdirectiveInject(PLATFORM_ID), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GalleriaThumbnails, selectors: [["p-galleriaThumbnails"]], viewQuery: function GalleriaThumbnails_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c11, 5);
+            i0.ɵɵviewQuery(_c22, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemsContainer = _t.first);
@@ -2365,7 +2508,7 @@ class GalleriaThumbnails {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.showThumbnailNavigators);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(4, _c12, ctx.isVertical ? ctx.contentHeight : ""));
+            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(4, _c23, ctx.isVertical ? ctx.contentHeight : ""));
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngForOf", ctx.value);
             i0.ɵɵadvance();
@@ -2392,11 +2535,11 @@ class GalleriaThumbnails {
                     pRipple
                     [attr.aria-label]="ariaPrevButtonLabel()"
                 >
-                    <ng-container *ngIf="!galleria.previousThumbnailIconTemplate">
+                    <ng-container *ngIf="!galleria.previousThumbnailIconTemplate && !galleria._previousThumbnailIconTemplate">
                         <ChevronLeftIcon *ngIf="!isVertical" [styleClass]="'p-galleria-thumbnail-prev-icon'" />
                         <ChevronUpIcon *ngIf="isVertical" [styleClass]="'p-galleria-thumbnail-prev-icon'" />
                     </ng-container>
-                    <ng-template *ngTemplateOutlet="galleria.previousThumbnailIconTemplate"></ng-template>
+                    <ng-template *ngTemplateOutlet="galleria.previousThumbnailIconTemplate || galleria._previousThumbnailIconTemplate"></ng-template>
                 </button>
                 <div class="p-galleria-thumbnails-viewport" [ngStyle]="{ height: isVertical ? contentHeight : '' }">
                     <div #itemsContainer class="p-galleria-thumbnail-items" (transitionend)="onTransitionEnd()" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" role="tablist">
@@ -2441,11 +2584,11 @@ class GalleriaThumbnails {
                     pRipple
                     [attr.aria-label]="ariaNextButtonLabel()"
                 >
-                    <ng-container *ngIf="!galleria.nextThumbnailIconTemplate">
+                    <ng-container *ngIf="!galleria.nextThumbnailIconTemplate && !galleria._nextThumbnailIconTemplate">
                         <ChevronRightIcon *ngIf="!isVertical" [ngClass]="'p-galleria-thumbnail-next-icon'" />
                         <ChevronDownIcon *ngIf="isVertical" [ngClass]="'p-galleria-thumbnail-next-icon'" />
                     </ng-container>
-                    <ng-template *ngTemplateOutlet="galleria.nextThumbnailIconTemplate"></ng-template>
+                    <ng-template *ngTemplateOutlet="galleria.nextThumbnailIconTemplate || galleria._nextThumbnailIconTemplate"></ng-template>
                 </button>
             </div>
         </div>
@@ -2491,7 +2634,7 @@ class GalleriaThumbnails {
         }], activeIndex: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GalleriaThumbnails, { className: "GalleriaThumbnails", filePath: "galleria.ts", lineNumber: 970 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GalleriaThumbnails, { className: "GalleriaThumbnails", filePath: "galleria.ts", lineNumber: 1058 }); })();
 class GalleriaModule {
     static ɵfac = function GalleriaModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || GalleriaModule)(); };
     static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: GalleriaModule });