primeng 20.2.0 → 20.3.0-rc.1

package/fesm2022/primeng-galleria.mjs

@@ -1,11 +1,14 @@
+export * from 'primeng/types/galleria';
 import { trigger, transition, style as style$1, animate } from '@angular/animations';
-import * as i1 from '@angular/common';
+import * as i2 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, inject, PLATFORM_ID, numberAttribute, booleanAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, Inject, ViewEncapsulation, ChangeDetectionStrategy, Component, HostListener, NgModule } from '@angular/core';
+import { Injectable, InjectionToken, inject, EventEmitter, numberAttribute, booleanAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, HostListener, NgModule } from '@angular/core';
 import { addClass, findSingle, focus, removeClass, uuid, setAttribute, find, getAttribute } from '@primeuix/utils';
 import { PrimeTemplate, SharedModule } from 'primeng/api';
-import { BaseComponent } from 'primeng/basecomponent';
+import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
+import * as i1 from 'primeng/bind';
+import { Bind, BindModule } from 'primeng/bind';
 import { blockBodyScroll, unblockBodyScroll } from 'primeng/dom';
 import { FocusTrap } from 'primeng/focustrap';
 import { TimesIcon, ChevronRightIcon, ChevronLeftIcon, ChevronUpIcon, ChevronDownIcon } from 'primeng/icons';
@@ -92,12 +95,12 @@ const classes = {
 };
 class GalleriaStyle extends BaseStyle {
     name = 'galleria';
-    theme = style;
+    style = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: GalleriaStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: GalleriaStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: GalleriaStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: GalleriaStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: GalleriaStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: GalleriaStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -225,14 +228,18 @@ var GalleriaClasses;
     GalleriaClasses["nextThumbnailIcon"] = "p-galleria-thumbnail-next-icon";
 })(GalleriaClasses || (GalleriaClasses = {}));
 
+const GALLERIA_INSTANCE = new InjectionToken('GALLERIA_INSTANCE');
 /**
  * Galleria is an advanced content gallery component.
  * @group Components
  */
 class Galleria extends BaseComponent {
-    platformId;
     element;
-    cd;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pcGalleria = inject(GALLERIA_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('host'));
+    }
     /**
      * Index of the first item.
      * @group Props
@@ -423,14 +430,12 @@ class Galleria extends BaseComponent {
     maskVisible = false;
     numVisibleLimit = 0;
     _componentStyle = inject(GalleriaStyle);
-    constructor(platformId, element, cd) {
+    templates;
+    constructor(element) {
         super();
-        this.platformId = platformId;
         this.element = element;
-        this.cd = cd;
     }
-    templates;
-    ngAfterContentInit() {
+    onAfterContentInit() {
         this.templates?.forEach((item) => {
             switch (item.getType()) {
                 case 'header':
@@ -469,8 +474,7 @@ class Galleria extends BaseComponent {
             }
         });
     }
-    ngOnChanges(simpleChanges) {
-        super.ngOnChanges(simpleChanges);
+    onChanges(simpleChanges) {
         if (simpleChanges.value && simpleChanges.value.currentValue?.length < this.numVisible) {
             this.numVisibleLimit = simpleChanges.value.currentValue.length;
         }
@@ -527,7 +531,7 @@ class Galleria extends BaseComponent {
             ZIndexUtils.clear(this.mask.nativeElement);
         }
     }
-    ngOnDestroy() {
+    onDestroy() {
         if (this.fullScreen) {
             removeClass(this.document.body, 'p-overflow-hidden');
         }
@@ -535,11 +539,12 @@ class Galleria extends BaseComponent {
             this.disableModality();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Galleria, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.2", type: Galleria, isStandalone: false, selector: "p-galleria", inputs: { activeIndex: "activeIndex", fullScreen: ["fullScreen", "fullScreen", booleanAttribute], id: "id", value: "value", numVisible: ["numVisible", "numVisible", numberAttribute], responsiveOptions: "responsiveOptions", showItemNavigators: ["showItemNavigators", "showItemNavigators", booleanAttribute], showThumbnailNavigators: ["showThumbnailNavigators", "showThumbnailNavigators", booleanAttribute], showItemNavigatorsOnHover: ["showItemNavigatorsOnHover", "showItemNavigatorsOnHover", booleanAttribute], changeItemOnIndicatorHover: ["changeItemOnIndicatorHover", "changeItemOnIndicatorHover", booleanAttribute], circular: ["circular", "circular", booleanAttribute], autoPlay: ["autoPlay", "autoPlay", booleanAttribute], shouldStopAutoplayByClick: ["shouldStopAutoplayByClick", "shouldStopAutoplayByClick", booleanAttribute], transitionInterval: ["transitionInterval", "transitionInterval", numberAttribute], showThumbnails: ["showThumbnails", "showThumbnails", booleanAttribute], thumbnailsPosition: "thumbnailsPosition", verticalThumbnailViewPortHeight: "verticalThumbnailViewPortHeight", showIndicators: ["showIndicators", "showIndicators", booleanAttribute], showIndicatorsOnItem: ["showIndicatorsOnItem", "showIndicatorsOnItem", booleanAttribute], indicatorsPosition: "indicatorsPosition", baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], maskClass: "maskClass", containerClass: "containerClass", containerStyle: "containerStyle", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", visible: "visible" }, outputs: { activeIndexChange: "activeIndexChange", visibleChange: "visibleChange" }, providers: [GalleriaStyle], queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "indicatorTemplate", first: true, predicate: ["indicator"] }, { propertyName: "captionTemplate", first: true, predicate: ["caption"] }, { propertyName: "_closeIconTemplate", first: true, predicate: ["closeicon"] }, { propertyName: "_previousThumbnailIconTemplate", first: true, predicate: ["previousthumbnailicon"] }, { propertyName: "_nextThumbnailIconTemplate", first: true, predicate: ["nextthumbnailicon"] }, { propertyName: "_itemPreviousIconTemplate", first: true, predicate: ["itempreviousicon"] }, { propertyName: "_itemNextIconTemplate", first: true, predicate: ["itemnexticon"] }, { propertyName: "_itemTemplate", first: true, predicate: ["item"] }, { propertyName: "_thumbnailTemplate", first: true, predicate: ["thumbnail"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Galleria, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.4", type: Galleria, isStandalone: false, selector: "p-galleria", inputs: { activeIndex: "activeIndex", fullScreen: ["fullScreen", "fullScreen", booleanAttribute], id: "id", value: "value", numVisible: ["numVisible", "numVisible", numberAttribute], responsiveOptions: "responsiveOptions", showItemNavigators: ["showItemNavigators", "showItemNavigators", booleanAttribute], showThumbnailNavigators: ["showThumbnailNavigators", "showThumbnailNavigators", booleanAttribute], showItemNavigatorsOnHover: ["showItemNavigatorsOnHover", "showItemNavigatorsOnHover", booleanAttribute], changeItemOnIndicatorHover: ["changeItemOnIndicatorHover", "changeItemOnIndicatorHover", booleanAttribute], circular: ["circular", "circular", booleanAttribute], autoPlay: ["autoPlay", "autoPlay", booleanAttribute], shouldStopAutoplayByClick: ["shouldStopAutoplayByClick", "shouldStopAutoplayByClick", booleanAttribute], transitionInterval: ["transitionInterval", "transitionInterval", numberAttribute], showThumbnails: ["showThumbnails", "showThumbnails", booleanAttribute], thumbnailsPosition: "thumbnailsPosition", verticalThumbnailViewPortHeight: "verticalThumbnailViewPortHeight", showIndicators: ["showIndicators", "showIndicators", booleanAttribute], showIndicatorsOnItem: ["showIndicatorsOnItem", "showIndicatorsOnItem", booleanAttribute], indicatorsPosition: "indicatorsPosition", baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], maskClass: "maskClass", containerClass: "containerClass", containerStyle: "containerStyle", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", visible: "visible" }, outputs: { activeIndexChange: "activeIndexChange", visibleChange: "visibleChange" }, providers: [GalleriaStyle, { provide: GALLERIA_INSTANCE, useExisting: Galleria }, { provide: PARENT_INSTANCE, useExisting: Galleria }], queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "indicatorTemplate", first: true, predicate: ["indicator"] }, { propertyName: "captionTemplate", first: true, predicate: ["caption"] }, { propertyName: "_closeIconTemplate", first: true, predicate: ["closeicon"] }, { propertyName: "_previousThumbnailIconTemplate", first: true, predicate: ["previousthumbnailicon"] }, { propertyName: "_nextThumbnailIconTemplate", first: true, predicate: ["nextthumbnailicon"] }, { propertyName: "_itemPreviousIconTemplate", first: true, predicate: ["itempreviousicon"] }, { propertyName: "_itemNextIconTemplate", first: true, predicate: ["itemnexticon"] }, { propertyName: "_itemTemplate", first: true, predicate: ["item"] }, { propertyName: "_thumbnailTemplate", first: true, predicate: ["thumbnail"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
         <div *ngIf="fullScreen; else windowed" #container>
-            <div *ngIf="maskVisible" #mask [ngClass]="cx('mask')" [class]="maskClass" [attr.role]="fullScreen ? 'dialog' : 'region'" [attr.aria-modal]="fullScreen ? 'true' : undefined" (click)="onMaskHide($event)">
-                <p-galleriaContent
+            <div *ngIf="maskVisible" #mask [pBind]="ptm('mask')" [ngClass]="cx('mask')" [class]="maskClass" [attr.role]="fullScreen ? 'dialog' : 'region'" [attr.aria-modal]="fullScreen ? 'true' : undefined" (click)="onMaskHide($event)">
+                <div
+                    pGalleriaContent
                     *ngIf="visible"
                     [@animation]="{
                         value: 'visible',
@@ -554,29 +559,33 @@ class Galleria extends BaseComponent {
                     (activeItemChange)="onActiveItemChange($event)"
                     [ngStyle]="containerStyle"
                     [fullScreen]="fullScreen"
-                ></p-galleriaContent>
+                    [pt]="pt()"
+                    pFocusTrap
+                    [pFocusTrapDisabled]="!fullScreen"
+                ></div>
             </div>
         </div>
 
         <ng-template #windowed>
-            <p-galleriaContent [value]="value" [activeIndex]="activeIndex" [numVisible]="numVisibleLimit || numVisible" (activeItemChange)="onActiveItemChange($event)"></p-galleriaContent>
+            <div pGalleriaContent [pt]="pt()" [value]="value" [activeIndex]="activeIndex" [numVisible]="numVisibleLimit || numVisible" (activeItemChange)="onActiveItemChange($event)"></div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => GalleriaContent), selector: "p-galleriaContent", inputs: ["activeIndex", "value", "numVisible", "fullScreen"], outputs: ["maskHide", "activeItemChange"] }], animations: [
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => FocusTrap), selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "directive", type: i0.forwardRef(() => i1.Bind), selector: "[pBind]", inputs: ["pBind"] }, { kind: "component", type: i0.forwardRef(() => GalleriaContent), selector: "div[pGalleriaContent]", inputs: ["activeIndex", "value", "numVisible", "fullScreen"], outputs: ["maskHide", "activeItemChange"] }], animations: [
             trigger('animation', [
                 transition('void => visible', [style$1({ transform: 'scale(0.7)', opacity: 0 }), animate('{{showTransitionParams}}')]),
                 transition('visible => void', [animate('{{hideTransitionParams}}', style$1({ transform: 'scale(0.7)', opacity: 0 }))])
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Galleria, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Galleria, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-galleria',
                     standalone: false,
                     template: `
         <div *ngIf="fullScreen; else windowed" #container>
-            <div *ngIf="maskVisible" #mask [ngClass]="cx('mask')" [class]="maskClass" [attr.role]="fullScreen ? 'dialog' : 'region'" [attr.aria-modal]="fullScreen ? 'true' : undefined" (click)="onMaskHide($event)">
-                <p-galleriaContent
+            <div *ngIf="maskVisible" #mask [pBind]="ptm('mask')" [ngClass]="cx('mask')" [class]="maskClass" [attr.role]="fullScreen ? 'dialog' : 'region'" [attr.aria-modal]="fullScreen ? 'true' : undefined" (click)="onMaskHide($event)">
+                <div
+                    pGalleriaContent
                     *ngIf="visible"
                     [@animation]="{
                         value: 'visible',
@@ -591,12 +600,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                     (activeItemChange)="onActiveItemChange($event)"
                     [ngStyle]="containerStyle"
                     [fullScreen]="fullScreen"
-                ></p-galleriaContent>
+                    [pt]="pt()"
+                    pFocusTrap
+                    [pFocusTrapDisabled]="!fullScreen"
+                ></div>
             </div>
         </div>
 
         <ng-template #windowed>
-            <p-galleriaContent [value]="value" [activeIndex]="activeIndex" [numVisible]="numVisibleLimit || numVisible" (activeItemChange)="onActiveItemChange($event)"></p-galleriaContent>
+            <div pGalleriaContent [pt]="pt()" [value]="value" [activeIndex]="activeIndex" [numVisible]="numVisibleLimit || numVisible" (activeItemChange)="onActiveItemChange($event)"></div>
         </ng-template>
     `,
                     animations: [
@@ -607,12 +619,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [GalleriaStyle]
+                    providers: [GalleriaStyle, { provide: GALLERIA_INSTANCE, useExisting: Galleria }, { provide: PARENT_INSTANCE, useExisting: Galleria }],
+                    hostDirectives: [Bind]
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { activeIndex: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { activeIndex: [{
                 type: Input
             }], fullScreen: [{
                 type: Input,
@@ -729,9 +739,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
             }] } });
 class GalleriaContent extends BaseComponent {
     galleria;
-    cd;
     differs;
-    elementRef;
+    hostName = 'Galleria';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('root'));
+    }
     get activeIndex() {
         return this._activeIndex;
     }
@@ -745,31 +758,30 @@ class GalleriaContent extends BaseComponent {
     activeItemChange = new EventEmitter();
     closeButton;
     _componentStyle = inject(GalleriaStyle);
+    $pcGalleria = inject(GALLERIA_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
     id;
     _activeIndex = 0;
     slideShowActive = true;
     interval;
     styleClass;
     differ;
-    constructor(galleria, cd, differs, elementRef) {
+    constructor(galleria, differs) {
         super();
         this.galleria = galleria;
-        this.cd = cd;
         this.differs = differs;
-        this.elementRef = elementRef;
         this.id = this.galleria.id || uuid('pn_id_');
         this.differ = this.differs.find(this.galleria).create();
     }
     // For custom fullscreen
     handleFullscreenChange(event) {
-        if (document?.fullscreenElement === this.elementRef.nativeElement?.children[0]) {
+        if (document?.fullscreenElement === this.el.nativeElement?.children[0]) {
             this.fullScreen = true;
         }
         else {
             this.fullScreen = false;
         }
     }
-    ngDoCheck() {
+    onDoCheck() {
         if (isPlatformBrowser(this.galleria.platformId)) {
             const changes = this.differ.diff(this.galleria);
             if (changes && changes.forEachItem.length > 0) {
@@ -820,18 +832,17 @@ class GalleriaContent extends BaseComponent {
     closeAriaLabel() {
         return this.config.translation.aria ? this.config.translation.aria.close : undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: GalleriaContent, deps: [{ token: Galleria }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.2", type: GalleriaContent, isStandalone: false, selector: "p-galleriaContent", inputs: { activeIndex: "activeIndex", value: "value", numVisible: ["numVisible", "numVisible", numberAttribute], fullScreen: ["fullScreen", "fullScreen", booleanAttribute] }, outputs: { maskHide: "maskHide", activeItemChange: "activeItemChange" }, host: { listeners: { "document:fullscreenchange": "handleFullscreenChange($event)" } }, providers: [GalleriaStyle], viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <div [attr.id]="id" [attr.role]="'region'" *ngIf="value && value.length > 0" [class]="cn(cx('root'), galleria.containerClass)" [ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}" pFocusTrap [pFocusTrapDisabled]="!fullScreen">
-            <button *ngIf="galleria.fullScreen" type="button" [class]="cx('closeButton')" (click)="maskHide.emit()" [attr.aria-label]="closeAriaLabel()" [attr.data-pc-section]="'closebutton'">
-                <svg data-p-icon="times" *ngIf="!galleria.closeIconTemplate && !galleria._closeIconTemplate" [class]="cx('closeIcon')" />
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: GalleriaContent, deps: [{ token: Galleria }, { token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.4", type: GalleriaContent, isStandalone: false, selector: "div[pGalleriaContent]", inputs: { activeIndex: "activeIndex", value: "value", numVisible: ["numVisible", "numVisible", numberAttribute], fullScreen: ["fullScreen", "fullScreen", booleanAttribute] }, outputs: { maskHide: "maskHide", activeItemChange: "activeItemChange" }, host: { listeners: { "document:fullscreenchange": "handleFullscreenChange($event)" }, properties: { "attr.id": "id", "attr.role": "\"region\"", "style": "!galleria.fullScreen ? galleria.containerStyle : {}", "class": "cn(cx('root'), galleria?.contentClass)" } }, providers: [GalleriaStyle], viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        <ng-container *ngIf="value && value.length > 0">
+            <button *ngIf="galleria.fullScreen" type="button" [pBind]="ptm('closeButton')" [class]="cx('closeButton')" (click)="maskHide.emit()" [attr.aria-label]="closeAriaLabel()">
+                <svg data-p-icon="times" *ngIf="!galleria.closeIconTemplate && !galleria._closeIconTemplate" [pBind]="ptm('closeIcon')" [class]="cx('closeIcon')" />
                 <ng-template *ngTemplateOutlet="galleria.closeIconTemplate || galleria._closeIconTemplate"></ng-template>
             </button>
-            <div *ngIf="galleria.templates && (galleria.headerFacet || galleria.headerTemplate)" [class]="cx('header')">
-                <p-galleriaItemSlot type="header" [templates]="galleria.templates"></p-galleriaItemSlot>
-            </div>
-            <div [class]="cx('content')" [attr.aria-live]="galleria.autoPlay ? 'polite' : 'off'">
-                <p-galleriaItem
+            <div *ngIf="galleria.templates && (galleria.headerFacet || galleria.headerTemplate)" pGalleriaItemSlot type="header" [templates]="galleria.templates" [pBind]="ptm('header')" [class]="cx('header')"></div>
+            <div [pBind]="ptm('content')" [class]="cx('content')" [attr.aria-live]="galleria.autoPlay ? 'polite' : 'off'">
+                <div
+                    pGalleriaItem
                     [id]="id"
                     [value]="value"
                     [activeIndex]="activeIndex"
@@ -847,9 +858,12 @@ class GalleriaContent extends BaseComponent {
                     [slideShowActive]="slideShowActive"
                     (startSlideShow)="startSlideShow()"
                     (stopSlideShow)="stopSlideShow()"
-                ></p-galleriaItem>
+                    [pt]="pt()"
+                    [class]="cx('itemsContainer')"
+                ></div>
 
-                <p-galleriaThumbnails
+                <div
+                    pGalleriaThumbnails
                     *ngIf="galleria.showThumbnails"
                     [containerId]="id"
                     [value]="value"
@@ -864,30 +878,28 @@ class GalleriaContent extends BaseComponent {
                     [showThumbnailNavigators]="galleria.showThumbnailNavigators"
                     [slideShowActive]="slideShowActive"
                     (stopSlideShow)="stopSlideShow()"
-                ></p-galleriaThumbnails>
+                    [pt]="pt()"
+                ></div>
             </div>
-            <div *ngIf="shouldRenderFooter()" [class]="cx('footer')">
-                <p-galleriaItemSlot type="footer" [templates]="galleria.templates"></p-galleriaItemSlot>
-            </div>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "[data-p-icon=\"times\"]" }, { kind: "directive", type: i0.forwardRef(() => FocusTrap), selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "component", type: i0.forwardRef(() => GalleriaItemSlot), selector: "p-galleriaItemSlot", inputs: ["templates", "index", "item", "type"] }, { kind: "component", type: i0.forwardRef(() => GalleriaItem), selector: "p-galleriaItem", inputs: ["id", "circular", "value", "showItemNavigators", "showIndicators", "slideShowActive", "changeItemOnIndicatorHover", "autoPlay", "templates", "indicatorFacet", "captionFacet", "activeIndex"], outputs: ["startSlideShow", "stopSlideShow", "onActiveIndexChange"] }, { kind: "component", type: i0.forwardRef(() => GalleriaThumbnails), selector: "p-galleriaThumbnails", inputs: ["containerId", "value", "isVertical", "slideShowActive", "circular", "responsiveOptions", "contentHeight", "showThumbnailNavigators", "templates", "numVisible", "activeIndex"], outputs: ["onActiveIndexChange", "stopSlideShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            <div *ngIf="shouldRenderFooter()" pGalleriaItemSlot [pBind]="ptm('footer')" [class]="cx('footer')" type="footer" [templates]="galleria.templates"></div>
+        </ng-container>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "[data-p-icon=\"times\"]" }, { kind: "directive", type: i0.forwardRef(() => i1.Bind), selector: "[pBind]", inputs: ["pBind"] }, { kind: "component", type: i0.forwardRef(() => GalleriaItemSlot), selector: "div[pGalleriaItemSlot]", inputs: ["templates", "index", "item", "type"] }, { kind: "component", type: i0.forwardRef(() => GalleriaItem), selector: "div[pGalleriaItem]", inputs: ["id", "circular", "value", "showItemNavigators", "showIndicators", "slideShowActive", "changeItemOnIndicatorHover", "autoPlay", "templates", "indicatorFacet", "captionFacet", "activeIndex"], outputs: ["startSlideShow", "stopSlideShow", "onActiveIndexChange"] }, { kind: "component", type: i0.forwardRef(() => GalleriaThumbnails), selector: "div[pGalleriaThumbnails]", inputs: ["containerId", "value", "isVertical", "slideShowActive", "circular", "responsiveOptions", "contentHeight", "showThumbnailNavigators", "templates", "numVisible", "activeIndex"], outputs: ["onActiveIndexChange", "stopSlideShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: GalleriaContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: GalleriaContent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'p-galleriaContent',
+                    selector: 'div[pGalleriaContent]',
                     standalone: false,
                     template: `
-        <div [attr.id]="id" [attr.role]="'region'" *ngIf="value && value.length > 0" [class]="cn(cx('root'), galleria.containerClass)" [ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}" pFocusTrap [pFocusTrapDisabled]="!fullScreen">
-            <button *ngIf="galleria.fullScreen" type="button" [class]="cx('closeButton')" (click)="maskHide.emit()" [attr.aria-label]="closeAriaLabel()" [attr.data-pc-section]="'closebutton'">
-                <svg data-p-icon="times" *ngIf="!galleria.closeIconTemplate && !galleria._closeIconTemplate" [class]="cx('closeIcon')" />
+        <ng-container *ngIf="value && value.length > 0">
+            <button *ngIf="galleria.fullScreen" type="button" [pBind]="ptm('closeButton')" [class]="cx('closeButton')" (click)="maskHide.emit()" [attr.aria-label]="closeAriaLabel()">
+                <svg data-p-icon="times" *ngIf="!galleria.closeIconTemplate && !galleria._closeIconTemplate" [pBind]="ptm('closeIcon')" [class]="cx('closeIcon')" />
                 <ng-template *ngTemplateOutlet="galleria.closeIconTemplate || galleria._closeIconTemplate"></ng-template>
             </button>
-            <div *ngIf="galleria.templates && (galleria.headerFacet || galleria.headerTemplate)" [class]="cx('header')">
-                <p-galleriaItemSlot type="header" [templates]="galleria.templates"></p-galleriaItemSlot>
-            </div>
-            <div [class]="cx('content')" [attr.aria-live]="galleria.autoPlay ? 'polite' : 'off'">
-                <p-galleriaItem
+            <div *ngIf="galleria.templates && (galleria.headerFacet || galleria.headerTemplate)" pGalleriaItemSlot type="header" [templates]="galleria.templates" [pBind]="ptm('header')" [class]="cx('header')"></div>
+            <div [pBind]="ptm('content')" [class]="cx('content')" [attr.aria-live]="galleria.autoPlay ? 'polite' : 'off'">
+                <div
+                    pGalleriaItem
                     [id]="id"
                     [value]="value"
                     [activeIndex]="activeIndex"
@@ -903,9 +915,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                     [slideShowActive]="slideShowActive"
                     (startSlideShow)="startSlideShow()"
                     (stopSlideShow)="stopSlideShow()"
-                ></p-galleriaItem>
+                    [pt]="pt()"
+                    [class]="cx('itemsContainer')"
+                ></div>
 
-                <p-galleriaThumbnails
+                <div
+                    pGalleriaThumbnails
                     *ngIf="galleria.showThumbnails"
                     [containerId]="id"
                     [value]="value"
@@ -920,17 +935,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                     [showThumbnailNavigators]="galleria.showThumbnailNavigators"
                     [slideShowActive]="slideShowActive"
                     (stopSlideShow)="stopSlideShow()"
-                ></p-galleriaThumbnails>
-            </div>
-            <div *ngIf="shouldRenderFooter()" [class]="cx('footer')">
-                <p-galleriaItemSlot type="footer" [templates]="galleria.templates"></p-galleriaItemSlot>
+                    [pt]="pt()"
+                ></div>
             </div>
-        </div>
+            <div *ngIf="shouldRenderFooter()" pGalleriaItemSlot [pBind]="ptm('footer')" [class]="cx('footer')" type="footer" [templates]="galleria.templates"></div>
+        </ng-container>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [GalleriaStyle]
+                    providers: [GalleriaStyle],
+                    host: {
+                        '[attr.id]': 'id',
+                        '[attr.role]': '"region"',
+                        '[style]': '!galleria.fullScreen ? galleria.containerStyle : {}',
+                        '[class]': "cn(cx('root'), galleria?.contentClass)"
+                    },
+                    hostDirectives: [Bind]
                 }]
-        }], ctorParameters: () => [{ type: Galleria }, { type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }, { type: i0.ElementRef }], propDecorators: { activeIndex: [{
+        }], ctorParameters: () => [{ type: Galleria }, { type: i0.KeyValueDiffers }], propDecorators: { activeIndex: [{
                 type: Input
             }], value: [{
                 type: Input
@@ -951,7 +972,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                 type: HostListener,
                 args: ['document:fullscreenchange', ['$event']]
             }] } });
-class GalleriaItemSlot {
+class GalleriaItemSlot extends BaseComponent {
+    hostName = 'Galleria';
     templates;
     index;
     get item() {
@@ -969,6 +991,7 @@ class GalleriaItemSlot {
             this.galleria.footerTemplate);
     }
     galleria = inject(Galleria);
+    $pcGalleria = inject(GALLERIA_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
     set item(item) {
         this._item = item;
         if (this.templates && this.templates?.toArray().length > 0) {
@@ -1024,7 +1047,7 @@ class GalleriaItemSlot {
     contentTemplate;
     context;
     _item;
-    ngAfterContentInit() {
+    onAfterContentInit() {
         if (this.templates && this.templates.toArray().length > 0) {
             this.templates?.forEach((item) => {
                 if (item.getType() === this.type) {
@@ -1055,17 +1078,17 @@ class GalleriaItemSlot {
             this.getContentTemplate();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: GalleriaItemSlot, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.2", type: GalleriaItemSlot, isStandalone: false, selector: "p-galleriaItemSlot", inputs: { templates: "templates", index: ["index", "index", numberAttribute], item: "item", type: "type" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: GalleriaItemSlot, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.4", type: GalleriaItemSlot, isStandalone: false, selector: "div[pGalleriaItemSlot]", inputs: { templates: "templates", index: ["index", "index", numberAttribute], item: "item", type: "type" }, usesInheritance: true, ngImport: i0, template: `
         <ng-container *ngIf="shouldRender()">
             <ng-container *ngTemplateOutlet="contentTemplate; context: context"></ng-container>
         </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: GalleriaItemSlot, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: GalleriaItemSlot, decorators: [{
             type: Component,
             args: [{
-                    selector: 'p-galleriaItemSlot',
+                    selector: 'div[pGalleriaItemSlot]',
                     standalone: false,
                     template: `
         <ng-container *ngIf="shouldRender()">
@@ -1086,6 +1109,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
             }] } });
 class GalleriaItem extends BaseComponent {
     galleria;
+    hostName = 'Galleria';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('itemsContainer'));
+    }
     id;
     circular = false;
     value;
@@ -1117,8 +1145,14 @@ class GalleriaItem extends BaseComponent {
         super();
         this.galleria = galleria;
     }
-    ngOnChanges({ autoPlay }) {
-        super.ngOnChanges({ autoPlay });
+    getIndicatorPTOptions(index) {
+        return this.ptm('indicator', {
+            context: {
+                highlighted: this.activeIndex === index
+            }
+        });
+    }
+    onChanges({ autoPlay }) {
         if (autoPlay?.currentValue) {
             this.startSlideShow.emit();
         }
@@ -1215,27 +1249,55 @@ class GalleriaItem extends BaseComponent {
     ariaPageLabel(value) {
         return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.pageLabel?.replace(/{page}/g, value) : undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: GalleriaItem, deps: [{ token: Galleria }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.2", type: GalleriaItem, isStandalone: false, selector: "p-galleriaItem", inputs: { id: "id", circular: ["circular", "circular", booleanAttribute], value: "value", showItemNavigators: ["showItemNavigators", "showItemNavigators", booleanAttribute], showIndicators: ["showIndicators", "showIndicators", booleanAttribute], slideShowActive: ["slideShowActive", "slideShowActive", booleanAttribute], changeItemOnIndicatorHover: ["changeItemOnIndicatorHover", "changeItemOnIndicatorHover", booleanAttribute], autoPlay: ["autoPlay", "autoPlay", booleanAttribute], templates: "templates", indicatorFacet: "indicatorFacet", captionFacet: "captionFacet", activeIndex: "activeIndex" }, outputs: { startSlideShow: "startSlideShow", stopSlideShow: "stopSlideShow", onActiveIndexChange: "onActiveIndexChange" }, host: { properties: { "class": "cx('itemsContainer')" } }, providers: [GalleriaStyle], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-        <div [class]="cx('items')">
-            <button *ngIf="showItemNavigators" type="button" role="navigation" [class]="cx('prevButton')" (click)="navBackward($event)" (focus)="onButtonFocus('left')" (blur)="onButtonBlur('left')">
-                <svg data-p-icon="chevron-left" *ngIf="!galleria.itemPreviousIconTemplate && !galleria._itemPreviousIconTemplate" [class]="cx('prevIcon')" />
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: GalleriaItem, deps: [{ token: Galleria }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.4", type: GalleriaItem, isStandalone: false, selector: "div[pGalleriaItem]", inputs: { id: "id", circular: ["circular", "circular", booleanAttribute], value: "value", showItemNavigators: ["showItemNavigators", "showItemNavigators", booleanAttribute], showIndicators: ["showIndicators", "showIndicators", booleanAttribute], slideShowActive: ["slideShowActive", "slideShowActive", booleanAttribute], changeItemOnIndicatorHover: ["changeItemOnIndicatorHover", "changeItemOnIndicatorHover", booleanAttribute], autoPlay: ["autoPlay", "autoPlay", booleanAttribute], templates: "templates", indicatorFacet: "indicatorFacet", captionFacet: "captionFacet", activeIndex: "activeIndex" }, outputs: { startSlideShow: "startSlideShow", stopSlideShow: "stopSlideShow", onActiveIndexChange: "onActiveIndexChange" }, providers: [GalleriaStyle], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        <div [pBind]="ptm('items')" [class]="cx('items')">
+            <button
+                *ngIf="showItemNavigators"
+                type="button"
+                role="navigation"
+                [pBind]="ptm('prevButton')"
+                [class]="cx('prevButton')"
+                (click)="navBackward($event)"
+                (focus)="onButtonFocus('left')"
+                (blur)="onButtonBlur('left')"
+                data-pc-group-section="itemnavigator"
+            >
+                <svg data-p-icon="chevron-left" *ngIf="!galleria.itemPreviousIconTemplate && !galleria._itemPreviousIconTemplate" [pBind]="ptm('prevIcon')" [class]="cx('prevIcon')" />
                 <ng-template *ngTemplateOutlet="galleria.itemPreviousIconTemplate || galleria._itemPreviousIconTemplate"></ng-template>
             </button>
-            <div [id]="id + '_item_' + activeIndex" role="group" [class]="cx('item')" [attr.aria-label]="ariaSlideNumber(activeIndex + 1)" [attr.aria-roledescription]="ariaSlideLabel()">
-                <p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" [class]="cx('item')"></p-galleriaItemSlot>
-            </div>
-            <button *ngIf="showItemNavigators" type="button" [class]="cx('nextButton')" (click)="navForward($event)" role="navigation" (focus)="onButtonFocus('right')" (blur)="onButtonBlur('right')">
-                <svg data-p-icon="chevron-right" *ngIf="!galleria.itemNextIconTemplate && !galleria._itemNextIconTemplate" [class]="cx('nextIcon')" />
+            <div
+                pGalleriaItemSlot
+                [pBind]="ptm('item')"
+                [class]="cx('item')"
+                [item]="activeItem"
+                [templates]="templates"
+                [id]="id + '_item_' + activeIndex"
+                role="group"
+                [class]="cx('item')"
+                [attr.aria-label]="ariaSlideNumber(activeIndex + 1)"
+                [attr.aria-roledescription]="ariaSlideLabel()"
+            ></div>
+            <button
+                *ngIf="showItemNavigators"
+                type="button"
+                [pBind]="ptm('nextButton')"
+                [class]="cx('nextButton')"
+                (click)="navForward($event)"
+                role="navigation"
+                (focus)="onButtonFocus('right')"
+                (blur)="onButtonBlur('right')"
+                data-pc-group-section="itemnavigator"
+            >
+                <svg data-p-icon="chevron-right" *ngIf="!galleria.itemNextIconTemplate && !galleria._itemNextIconTemplate" [pBind]="ptm('nextIcon')" [class]="cx('nextIcon')" />
                 <ng-template *ngTemplateOutlet="galleria.itemNextIconTemplate || galleria._itemNextIconTemplate"></ng-template>
             </button>
-            <div [class]="cx('caption')" *ngIf="captionFacet || galleria.captionTemplate">
-                <p-galleriaItemSlot type="caption" [item]="activeItem" [templates]="templates"></p-galleriaItemSlot>
-            </div>
+            <div *ngIf="captionFacet || galleria.captionTemplate" pGalleriaItemSlot [pBind]="ptm('caption')" [class]="cx('caption')" type="caption" [item]="activeItem" [templates]="templates"></div>
         </div>
-        <ul *ngIf="showIndicators" [class]="cx('indicatorList')">
+        <ul *ngIf="showIndicators" [pBind]="ptm('indicatorList')" [class]="cx('indicatorList')">
             <li
                 *ngFor="let item of value; let index = index"
+                [pBind]="getIndicatorPTOptions(index)"
                 tabindex="0"
                 (click)="onIndicatorClick(index)"
                 (mouseenter)="onIndicatorMouseEnter(index)"
@@ -1244,38 +1306,69 @@ class GalleriaItem extends BaseComponent {
                 [attr.aria-label]="ariaPageLabel(index + 1)"
                 [attr.aria-selected]="activeIndex === index"
                 [attr.aria-controls]="id + '_item_' + index"
+                [pBind]="ptm('indicator', getIndicatorPTOptions(index))"
             >
-                <button type="button" tabIndex="-1" [class]="cx('indicatorButton')" *ngIf="!indicatorFacet && !galleria.indicatorTemplate"></button>
-                <p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>
+                <button *ngIf="!indicatorFacet && !galleria.indicatorTemplate" type="button" tabIndex="-1" [pBind]="ptm('indicatorButton', getIndicatorPTOptions(index))" [class]="cx('indicatorButton')"></button>
+                <ng-container *ngIf="indicatorFacet || galleria.indicatorTemplate">
+                    <div pGalleriaItemSlot type="indicator" [index]="index" [templates]="templates" [pBind]="ptm('item')"></div>
+                </ng-container>
             </li>
         </ul>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => ChevronRightIcon), selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "component", type: i0.forwardRef(() => ChevronLeftIcon), selector: "[data-p-icon=\"chevron-left\"]" }, { kind: "component", type: i0.forwardRef(() => GalleriaItemSlot), selector: "p-galleriaItemSlot", inputs: ["templates", "index", "item", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => ChevronRightIcon), selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "component", type: i0.forwardRef(() => ChevronLeftIcon), selector: "[data-p-icon=\"chevron-left\"]" }, { kind: "directive", type: i0.forwardRef(() => i1.Bind), selector: "[pBind]", inputs: ["pBind"] }, { kind: "component", type: i0.forwardRef(() => GalleriaItemSlot), selector: "div[pGalleriaItemSlot]", inputs: ["templates", "index", "item", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: GalleriaItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: GalleriaItem, decorators: [{
             type: Component,
             args: [{
-                    selector: 'p-galleriaItem',
+                    selector: 'div[pGalleriaItem]',
                     standalone: false,
                     template: `
-        <div [class]="cx('items')">
-            <button *ngIf="showItemNavigators" type="button" role="navigation" [class]="cx('prevButton')" (click)="navBackward($event)" (focus)="onButtonFocus('left')" (blur)="onButtonBlur('left')">
-                <svg data-p-icon="chevron-left" *ngIf="!galleria.itemPreviousIconTemplate && !galleria._itemPreviousIconTemplate" [class]="cx('prevIcon')" />
+        <div [pBind]="ptm('items')" [class]="cx('items')">
+            <button
+                *ngIf="showItemNavigators"
+                type="button"
+                role="navigation"
+                [pBind]="ptm('prevButton')"
+                [class]="cx('prevButton')"
+                (click)="navBackward($event)"
+                (focus)="onButtonFocus('left')"
+                (blur)="onButtonBlur('left')"
+                data-pc-group-section="itemnavigator"
+            >
+                <svg data-p-icon="chevron-left" *ngIf="!galleria.itemPreviousIconTemplate && !galleria._itemPreviousIconTemplate" [pBind]="ptm('prevIcon')" [class]="cx('prevIcon')" />
                 <ng-template *ngTemplateOutlet="galleria.itemPreviousIconTemplate || galleria._itemPreviousIconTemplate"></ng-template>
             </button>
-            <div [id]="id + '_item_' + activeIndex" role="group" [class]="cx('item')" [attr.aria-label]="ariaSlideNumber(activeIndex + 1)" [attr.aria-roledescription]="ariaSlideLabel()">
-                <p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" [class]="cx('item')"></p-galleriaItemSlot>
-            </div>
-            <button *ngIf="showItemNavigators" type="button" [class]="cx('nextButton')" (click)="navForward($event)" role="navigation" (focus)="onButtonFocus('right')" (blur)="onButtonBlur('right')">
-                <svg data-p-icon="chevron-right" *ngIf="!galleria.itemNextIconTemplate && !galleria._itemNextIconTemplate" [class]="cx('nextIcon')" />
+            <div
+                pGalleriaItemSlot
+                [pBind]="ptm('item')"
+                [class]="cx('item')"
+                [item]="activeItem"
+                [templates]="templates"
+                [id]="id + '_item_' + activeIndex"
+                role="group"
+                [class]="cx('item')"
+                [attr.aria-label]="ariaSlideNumber(activeIndex + 1)"
+                [attr.aria-roledescription]="ariaSlideLabel()"
+            ></div>
+            <button
+                *ngIf="showItemNavigators"
+                type="button"
+                [pBind]="ptm('nextButton')"
+                [class]="cx('nextButton')"
+                (click)="navForward($event)"
+                role="navigation"
+                (focus)="onButtonFocus('right')"
+                (blur)="onButtonBlur('right')"
+                data-pc-group-section="itemnavigator"
+            >
+                <svg data-p-icon="chevron-right" *ngIf="!galleria.itemNextIconTemplate && !galleria._itemNextIconTemplate" [pBind]="ptm('nextIcon')" [class]="cx('nextIcon')" />
                 <ng-template *ngTemplateOutlet="galleria.itemNextIconTemplate || galleria._itemNextIconTemplate"></ng-template>
             </button>
-            <div [class]="cx('caption')" *ngIf="captionFacet || galleria.captionTemplate">
-                <p-galleriaItemSlot type="caption" [item]="activeItem" [templates]="templates"></p-galleriaItemSlot>
-            </div>
+            <div *ngIf="captionFacet || galleria.captionTemplate" pGalleriaItemSlot [pBind]="ptm('caption')" [class]="cx('caption')" type="caption" [item]="activeItem" [templates]="templates"></div>
         </div>
-        <ul *ngIf="showIndicators" [class]="cx('indicatorList')">
+        <ul *ngIf="showIndicators" [pBind]="ptm('indicatorList')" [class]="cx('indicatorList')">
             <li
                 *ngFor="let item of value; let index = index"
+                [pBind]="getIndicatorPTOptions(index)"
                 tabindex="0"
                 (click)="onIndicatorClick(index)"
                 (mouseenter)="onIndicatorMouseEnter(index)"
@@ -1284,17 +1377,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                 [attr.aria-label]="ariaPageLabel(index + 1)"
                 [attr.aria-selected]="activeIndex === index"
                 [attr.aria-controls]="id + '_item_' + index"
+                [pBind]="ptm('indicator', getIndicatorPTOptions(index))"
             >
-                <button type="button" tabIndex="-1" [class]="cx('indicatorButton')" *ngIf="!indicatorFacet && !galleria.indicatorTemplate"></button>
-                <p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>
+                <button *ngIf="!indicatorFacet && !galleria.indicatorTemplate" type="button" tabIndex="-1" [pBind]="ptm('indicatorButton', getIndicatorPTOptions(index))" [class]="cx('indicatorButton')"></button>
+                <ng-container *ngIf="indicatorFacet || galleria.indicatorTemplate">
+                    <div pGalleriaItemSlot type="indicator" [index]="index" [templates]="templates" [pBind]="ptm('item')"></div>
+                </ng-container>
             </li>
         </ul>
     `,
-                    host: {
-                        '[class]': "cx('itemsContainer')"
-                    },
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [GalleriaStyle]
+                    providers: [GalleriaStyle],
+                    hostDirectives: [Bind]
                 }]
         }], ctorParameters: () => [{ type: Galleria }], propDecorators: { id: [{
                 type: Input
@@ -1335,6 +1429,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
             }] } });
 class GalleriaThumbnails extends BaseComponent {
     galleria;
+    hostName = 'Galleria';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('thumbnails'));
+    }
     containerId;
     value;
     isVertical = false;
@@ -1379,8 +1478,7 @@ class GalleriaThumbnails extends BaseComponent {
         super();
         this.galleria = galleria;
     }
-    ngOnInit() {
-        super.ngOnInit();
+    onInit() {
         if (isPlatformBrowser(this.platformId)) {
             this.createStyle();
             if (this.responsiveOptions) {
@@ -1388,7 +1486,7 @@ class GalleriaThumbnails extends BaseComponent {
             }
         }
     }
-    ngAfterContentChecked() {
+    onAfterContentChecked() {
         let totalShiftedItems = this.totalShiftedItems;
         if ((this._oldNumVisible !== this.d_numVisible || this._oldactiveIndex !== this._activeIndex) && this.itemsContainer) {
             if (this._activeIndex <= this.getMedianItemIndex()) {
@@ -1417,8 +1515,7 @@ class GalleriaThumbnails extends BaseComponent {
             this._oldNumVisible = this.d_numVisible;
         }
     }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
+    onAfterViewInit() {
         if (isPlatformBrowser(this.platformId)) {
             this.calculatePosition();
         }
@@ -1705,8 +1802,7 @@ class GalleriaThumbnails extends BaseComponent {
             this.documentResizeListener = null;
         }
     }
-    ngOnDestroy() {
-        super.ngOnDestroy();
+    onDestroy() {
         if (this.responsiveOptions) {
             this.unbindDocumentListeners();
         }
@@ -1723,105 +1819,141 @@ class GalleriaThumbnails extends BaseComponent {
     ariaPageLabel(value) {
         return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.pageLabel?.replace(/{page}/g, value) : undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: GalleriaThumbnails, deps: [{ token: Galleria }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.2", type: GalleriaThumbnails, isStandalone: false, selector: "p-galleriaThumbnails", inputs: { containerId: "containerId", value: "value", isVertical: ["isVertical", "isVertical", booleanAttribute], slideShowActive: ["slideShowActive", "slideShowActive", booleanAttribute], circular: ["circular", "circular", booleanAttribute], responsiveOptions: "responsiveOptions", contentHeight: "contentHeight", showThumbnailNavigators: "showThumbnailNavigators", templates: "templates", numVisible: "numVisible", activeIndex: "activeIndex" }, outputs: { onActiveIndexChange: "onActiveIndexChange", stopSlideShow: "stopSlideShow" }, providers: [GalleriaStyle], viewQueries: [{ propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <div [class]="cx('thumbnails')">
-            <div [class]="cx('thumbnailContent')">
-                <button *ngIf="showThumbnailNavigators" type="button" [class]="cx('thumbnailPrevButton')" (click)="navBackward($event)" pRipple [attr.aria-label]="ariaPrevButtonLabel()">
-                    <ng-container *ngIf="!galleria.previousThumbnailIconTemplate && !galleria._previousThumbnailIconTemplate">
-                        <svg data-p-icon="chevron-left" *ngIf="!isVertical" [class]="cx('thumbnailPrevIcon')" />
-                        <svg data-p-icon="chevron-up" *ngIf="isVertical" [class]="cx('thumbnailPrevIcon')" />
-                    </ng-container>
-                    <ng-template *ngTemplateOutlet="galleria.previousThumbnailIconTemplate || galleria._previousThumbnailIconTemplate"></ng-template>
-                </button>
-                <div [class]="cx('thumbnailsViewport')" [ngStyle]="{ height: isVertical ? contentHeight : '' }">
-                    <div #itemsContainer [class]="cx('thumbnailItems')" (transitionend)="onTransitionEnd()" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" role="tablist">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: GalleriaThumbnails, deps: [{ token: Galleria }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.4", type: GalleriaThumbnails, isStandalone: false, selector: "div[pGalleriaThumbnails]", inputs: { containerId: "containerId", value: "value", isVertical: ["isVertical", "isVertical", booleanAttribute], slideShowActive: ["slideShowActive", "slideShowActive", booleanAttribute], circular: ["circular", "circular", booleanAttribute], responsiveOptions: "responsiveOptions", contentHeight: "contentHeight", showThumbnailNavigators: "showThumbnailNavigators", templates: "templates", numVisible: "numVisible", activeIndex: "activeIndex" }, outputs: { onActiveIndexChange: "onActiveIndexChange", stopSlideShow: "stopSlideShow" }, host: { properties: { "class": "cx(\"thumbnails\")" } }, providers: [GalleriaStyle], viewQueries: [{ propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        <div [pBind]="ptm('thumbnailContent')" [class]="cx('thumbnailContent')">
+            <button
+                *ngIf="showThumbnailNavigators"
+                type="button"
+                [pBind]="ptm('thumbnailPrevButton')"
+                [class]="cx('thumbnailPrevButton')"
+                (click)="navBackward($event)"
+                pRipple
+                [attr.aria-label]="ariaPrevButtonLabel()"
+                data-pc-group-section="thumbnailnavigator"
+            >
+                <ng-container *ngIf="!galleria.previousThumbnailIconTemplate && !galleria._previousThumbnailIconTemplate">
+                    <svg data-p-icon="chevron-left" *ngIf="!isVertical" [pBind]="ptm('thumbnailPrevIcon')" [class]="cx('thumbnailPrevIcon')" />
+                    <svg data-p-icon="chevron-up" *ngIf="isVertical" [pBind]="ptm('thumbnailPrevIcon')" [class]="cx('thumbnailPrevIcon')" />
+                </ng-container>
+                <ng-template *ngTemplateOutlet="galleria.previousThumbnailIconTemplate || galleria._previousThumbnailIconTemplate"></ng-template>
+            </button>
+            <div [pBind]="ptm('thumbnailsViewport')" [class]="cx('thumbnailsViewport')" [ngStyle]="{ height: isVertical ? contentHeight : '' }">
+                <div #itemsContainer [pBind]="ptm('thumbnailItems')" [class]="cx('thumbnailItems')" (transitionend)="onTransitionEnd()" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" role="tablist">
+                    <div
+                        *ngFor="let item of value; let index = index"
+                        [pBind]="ptm('thumbnailItem')"
+                        [class]="cx('thumbnailItem', { index, activeIndex })"
+                        [attr.aria-selected]="activeIndex === index"
+                        [attr.aria-controls]="containerId + '_item_' + index"
+                        (keydown)="onThumbnailKeydown($event, index)"
+                    >
                         <div
-                            *ngFor="let item of value; let index = index"
-                            [class]="cx('thumbnailItem', { index, activeIndex })"
-                            [attr.aria-selected]="activeIndex === index"
-                            [attr.aria-controls]="containerId + '_item_' + index"
-                            [attr.data-pc-section]="'thumbnailitem'"
-                            [attr.data-p-active]="activeIndex === index"
-                            (keydown)="onThumbnailKeydown($event, index)"
+                            [pBind]="ptm('thumbnail')"
+                            [class]="cx('thumbnail')"
+                            [attr.tabindex]="activeIndex === index ? 0 : -1"
+                            [attr.aria-current]="activeIndex === index ? 'page' : undefined"
+                            [attr.aria-label]="ariaPageLabel(index + 1)"
+                            (click)="onItemClick(index)"
+                            (touchend)="onItemClick(index)"
+                            (keydown.enter)="onItemClick(index)"
                         >
-                            <div
-                                [class]="cx('thumbnail')"
-                                [attr.tabindex]="activeIndex === index ? 0 : -1"
-                                [attr.aria-current]="activeIndex === index ? 'page' : undefined"
-                                [attr.aria-label]="ariaPageLabel(index + 1)"
-                                (click)="onItemClick(index)"
-                                (touchend)="onItemClick(index)"
-                                (keydown.enter)="onItemClick(index)"
-                            >
-                                <p-galleriaItemSlot type="thumbnail" [item]="item" [templates]="templates"></p-galleriaItemSlot>
-                            </div>
+                            <div pGalleriaItemSlot type="thumbnail" [pBind]="ptm('thumbnailItem')" [item]="item" [templates]="templates"></div>
                         </div>
                     </div>
                 </div>
-                <button *ngIf="showThumbnailNavigators" type="button" [class]="cx('thumbnailNextButton')" (click)="navForward($event)" pRipple [attr.aria-label]="ariaNextButtonLabel()">
-                    <ng-container *ngIf="!galleria.nextThumbnailIconTemplate && !galleria._nextThumbnailIconTemplate">
-                        <svg data-p-icon="chevron-right" *ngIf="!isVertical" [class]="cx('thumbnailNextIcon')" />
-                        <svg data-p-icon="chevron-down" *ngIf="isVertical" [class]="cx('thumbnailNextIcon')" />
-                    </ng-container>
-                    <ng-template *ngTemplateOutlet="galleria.nextThumbnailIconTemplate || galleria._nextThumbnailIconTemplate"></ng-template>
-                </button>
             </div>
+            <button
+                *ngIf="showThumbnailNavigators"
+                type="button"
+                [pBind]="ptm('thumbnailNextButton')"
+                [class]="cx('thumbnailNextButton')"
+                (click)="navForward($event)"
+                pRipple
+                [attr.aria-label]="ariaNextButtonLabel()"
+                data-pc-group-section="thumbnailnavigator"
+            >
+                <ng-container *ngIf="!galleria.nextThumbnailIconTemplate && !galleria._nextThumbnailIconTemplate">
+                    <svg data-p-icon="chevron-right" *ngIf="!isVertical" [pBind]="ptm('thumbnailNextIcon')" [class]="cx('thumbnailNextIcon')" />
+                    <svg data-p-icon="chevron-down" *ngIf="isVertical" [pBind]="ptm('thumbnailNextIcon')" [class]="cx('thumbnailNextIcon')" />
+                </ng-container>
+                <ng-template *ngTemplateOutlet="galleria.nextThumbnailIconTemplate || galleria._nextThumbnailIconTemplate"></ng-template>
+            </button>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => Ripple), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(() => ChevronRightIcon), selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "component", type: i0.forwardRef(() => ChevronUpIcon), selector: "[data-p-icon=\"chevron-up\"]" }, { kind: "component", type: i0.forwardRef(() => ChevronDownIcon), selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: i0.forwardRef(() => ChevronLeftIcon), selector: "[data-p-icon=\"chevron-left\"]" }, { kind: "component", type: i0.forwardRef(() => GalleriaItemSlot), selector: "p-galleriaItemSlot", inputs: ["templates", "index", "item", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => Ripple), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(() => ChevronRightIcon), selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "component", type: i0.forwardRef(() => ChevronUpIcon), selector: "[data-p-icon=\"chevron-up\"]" }, { kind: "component", type: i0.forwardRef(() => ChevronDownIcon), selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: i0.forwardRef(() => ChevronLeftIcon), selector: "[data-p-icon=\"chevron-left\"]" }, { kind: "directive", type: i0.forwardRef(() => i1.Bind), selector: "[pBind]", inputs: ["pBind"] }, { kind: "component", type: i0.forwardRef(() => GalleriaItemSlot), selector: "div[pGalleriaItemSlot]", inputs: ["templates", "index", "item", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: GalleriaThumbnails, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: GalleriaThumbnails, decorators: [{
             type: Component,
             args: [{
-                    selector: 'p-galleriaThumbnails',
+                    selector: 'div[pGalleriaThumbnails]',
                     standalone: false,
                     template: `
-        <div [class]="cx('thumbnails')">
-            <div [class]="cx('thumbnailContent')">
-                <button *ngIf="showThumbnailNavigators" type="button" [class]="cx('thumbnailPrevButton')" (click)="navBackward($event)" pRipple [attr.aria-label]="ariaPrevButtonLabel()">
-                    <ng-container *ngIf="!galleria.previousThumbnailIconTemplate && !galleria._previousThumbnailIconTemplate">
-                        <svg data-p-icon="chevron-left" *ngIf="!isVertical" [class]="cx('thumbnailPrevIcon')" />
-                        <svg data-p-icon="chevron-up" *ngIf="isVertical" [class]="cx('thumbnailPrevIcon')" />
-                    </ng-container>
-                    <ng-template *ngTemplateOutlet="galleria.previousThumbnailIconTemplate || galleria._previousThumbnailIconTemplate"></ng-template>
-                </button>
-                <div [class]="cx('thumbnailsViewport')" [ngStyle]="{ height: isVertical ? contentHeight : '' }">
-                    <div #itemsContainer [class]="cx('thumbnailItems')" (transitionend)="onTransitionEnd()" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" role="tablist">
+        <div [pBind]="ptm('thumbnailContent')" [class]="cx('thumbnailContent')">
+            <button
+                *ngIf="showThumbnailNavigators"
+                type="button"
+                [pBind]="ptm('thumbnailPrevButton')"
+                [class]="cx('thumbnailPrevButton')"
+                (click)="navBackward($event)"
+                pRipple
+                [attr.aria-label]="ariaPrevButtonLabel()"
+                data-pc-group-section="thumbnailnavigator"
+            >
+                <ng-container *ngIf="!galleria.previousThumbnailIconTemplate && !galleria._previousThumbnailIconTemplate">
+                    <svg data-p-icon="chevron-left" *ngIf="!isVertical" [pBind]="ptm('thumbnailPrevIcon')" [class]="cx('thumbnailPrevIcon')" />
+                    <svg data-p-icon="chevron-up" *ngIf="isVertical" [pBind]="ptm('thumbnailPrevIcon')" [class]="cx('thumbnailPrevIcon')" />
+                </ng-container>
+                <ng-template *ngTemplateOutlet="galleria.previousThumbnailIconTemplate || galleria._previousThumbnailIconTemplate"></ng-template>
+            </button>
+            <div [pBind]="ptm('thumbnailsViewport')" [class]="cx('thumbnailsViewport')" [ngStyle]="{ height: isVertical ? contentHeight : '' }">
+                <div #itemsContainer [pBind]="ptm('thumbnailItems')" [class]="cx('thumbnailItems')" (transitionend)="onTransitionEnd()" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" role="tablist">
+                    <div
+                        *ngFor="let item of value; let index = index"
+                        [pBind]="ptm('thumbnailItem')"
+                        [class]="cx('thumbnailItem', { index, activeIndex })"
+                        [attr.aria-selected]="activeIndex === index"
+                        [attr.aria-controls]="containerId + '_item_' + index"
+                        (keydown)="onThumbnailKeydown($event, index)"
+                    >
                         <div
-                            *ngFor="let item of value; let index = index"
-                            [class]="cx('thumbnailItem', { index, activeIndex })"
-                            [attr.aria-selected]="activeIndex === index"
-                            [attr.aria-controls]="containerId + '_item_' + index"
-                            [attr.data-pc-section]="'thumbnailitem'"
-                            [attr.data-p-active]="activeIndex === index"
-                            (keydown)="onThumbnailKeydown($event, index)"
+                            [pBind]="ptm('thumbnail')"
+                            [class]="cx('thumbnail')"
+                            [attr.tabindex]="activeIndex === index ? 0 : -1"
+                            [attr.aria-current]="activeIndex === index ? 'page' : undefined"
+                            [attr.aria-label]="ariaPageLabel(index + 1)"
+                            (click)="onItemClick(index)"
+                            (touchend)="onItemClick(index)"
+                            (keydown.enter)="onItemClick(index)"
                         >
-                            <div
-                                [class]="cx('thumbnail')"
-                                [attr.tabindex]="activeIndex === index ? 0 : -1"
-                                [attr.aria-current]="activeIndex === index ? 'page' : undefined"
-                                [attr.aria-label]="ariaPageLabel(index + 1)"
-                                (click)="onItemClick(index)"
-                                (touchend)="onItemClick(index)"
-                                (keydown.enter)="onItemClick(index)"
-                            >
-                                <p-galleriaItemSlot type="thumbnail" [item]="item" [templates]="templates"></p-galleriaItemSlot>
-                            </div>
+                            <div pGalleriaItemSlot type="thumbnail" [pBind]="ptm('thumbnailItem')" [item]="item" [templates]="templates"></div>
                         </div>
                     </div>
                 </div>
-                <button *ngIf="showThumbnailNavigators" type="button" [class]="cx('thumbnailNextButton')" (click)="navForward($event)" pRipple [attr.aria-label]="ariaNextButtonLabel()">
-                    <ng-container *ngIf="!galleria.nextThumbnailIconTemplate && !galleria._nextThumbnailIconTemplate">
-                        <svg data-p-icon="chevron-right" *ngIf="!isVertical" [class]="cx('thumbnailNextIcon')" />
-                        <svg data-p-icon="chevron-down" *ngIf="isVertical" [class]="cx('thumbnailNextIcon')" />
-                    </ng-container>
-                    <ng-template *ngTemplateOutlet="galleria.nextThumbnailIconTemplate || galleria._nextThumbnailIconTemplate"></ng-template>
-                </button>
             </div>
+            <button
+                *ngIf="showThumbnailNavigators"
+                type="button"
+                [pBind]="ptm('thumbnailNextButton')"
+                [class]="cx('thumbnailNextButton')"
+                (click)="navForward($event)"
+                pRipple
+                [attr.aria-label]="ariaNextButtonLabel()"
+                data-pc-group-section="thumbnailnavigator"
+            >
+                <ng-container *ngIf="!galleria.nextThumbnailIconTemplate && !galleria._nextThumbnailIconTemplate">
+                    <svg data-p-icon="chevron-right" *ngIf="!isVertical" [pBind]="ptm('thumbnailNextIcon')" [class]="cx('thumbnailNextIcon')" />
+                    <svg data-p-icon="chevron-down" *ngIf="isVertical" [pBind]="ptm('thumbnailNextIcon')" [class]="cx('thumbnailNextIcon')" />
+                </ng-container>
+                <ng-template *ngTemplateOutlet="galleria.nextThumbnailIconTemplate || galleria._nextThumbnailIconTemplate"></ng-template>
+            </button>
         </div>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [GalleriaStyle]
+                    providers: [GalleriaStyle],
+                    host: {
+                        '[class]': 'cx("thumbnails")'
+                    },
+                    hostDirectives: [Bind]
                 }]
         }], ctorParameters: () => [{ type: Galleria }], propDecorators: { containerId: [{
                 type: Input
@@ -1857,14 +1989,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                 type: Input
             }] } });
 class GalleriaModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: GalleriaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: GalleriaModule, declarations: [Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails], imports: [CommonModule, SharedModule, Ripple, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, FocusTrap], exports: [CommonModule, Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: GalleriaModule, imports: [CommonModule, SharedModule, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, CommonModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: GalleriaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: GalleriaModule, declarations: [Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails], imports: [CommonModule, SharedModule, Ripple, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, FocusTrap, BindModule], exports: [CommonModule, Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: GalleriaModule, imports: [CommonModule, SharedModule, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, BindModule, CommonModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: GalleriaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: GalleriaModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, SharedModule, Ripple, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, FocusTrap],
+                    imports: [CommonModule, SharedModule, Ripple, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, FocusTrap, BindModule],
                     exports: [CommonModule, Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails, SharedModule],
                     declarations: [Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails]
                 }]