primeng 20.3.0 → 21.0.0-rc.1

package/fesm2022/primeng-galleria.mjs

@@ -1,10 +1,9 @@
 export * from 'primeng/types/galleria';
-import { trigger, transition, style as style$1, animate } from '@angular/animations';
 import * as i2 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 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 { Injectable, InjectionToken, inject, input, computed, signal, EventEmitter, numberAttribute, booleanAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, HostListener, NgModule } from '@angular/core';
+import { findSingle, focus, removeClass, uuid, setAttribute, find, getAttribute, addClass } from '@primeuix/utils';
 import { PrimeTemplate, SharedModule } from 'primeng/api';
 import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
 import * as i1 from 'primeng/bind';
@@ -12,13 +11,15 @@ 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';
+import * as i3 from 'primeng/motion';
+import { MotionModule } from 'primeng/motion';
 import { Ripple } from 'primeng/ripple';
 import { ZIndexUtils } from 'primeng/utils';
 import { style } from '@primeuix/styles/galleria';
 import { BaseStyle } from 'primeng/base';
 
 const classes = {
-    mask: 'p-galleria-mask p-overlay-mask p-overlay-mask-enter',
+    mask: 'p-galleria-mask p-overlay-mask',
     root: ({ instance }) => {
         const thumbnailsPosClass = instance.galleria.showThumbnails && instance.getPositionClass('p-galleria-thumbnails', instance.galleria.thumbnailsPosition);
         const indicatorPosClass = instance.galleria.showIndicators && instance.getPositionClass('p-galleria-indicators', instance.galleria.indicatorsPosition);
@@ -97,10 +98,10 @@ class GalleriaStyle extends BaseStyle {
     name = 'galleria';
     style = style;
     classes = classes;
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: GalleriaStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: GalleriaStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: GalleriaStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: GalleriaStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -368,14 +369,38 @@ class Galleria extends BaseComponent {
     containerStyle;
     /**
      * Transition options of the show animation.
+     * @deprecated since v21.0.0. Use `motionOptions` instead.
      * @group Props
      */
     showTransitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
     /**
      * Transition options of the hide animation.
+     * @deprecated since v21.0.0. Use `motionOptions` instead.
      * @group Props
      */
     hideTransitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
+    /**
+     * The motion options.
+     * @group Props
+     */
+    motionOptions = input(undefined, { ...(ngDevMode ? { debugName: "motionOptions" } : {}) });
+    computedMotionOptions = computed(() => {
+        return {
+            ...this.ptm('motion'),
+            ...this.motionOptions()
+        };
+    }, { ...(ngDevMode ? { debugName: "computedMotionOptions" } : {}) });
+    /**
+     * The mask motion options.
+     * @group Props
+     */
+    maskMotionOptions = input(undefined, { ...(ngDevMode ? { debugName: "maskMotionOptions" } : {}) });
+    computedMaskMotionOptions = computed(() => {
+        return {
+            ...this.ptm('maskMotion'),
+            ...this.maskMotionOptions()
+        };
+    }, { ...(ngDevMode ? { debugName: "computedMaskMotionOptions" } : {}) });
     /**
      * Specifies the visibility of the mask on fullscreen mode.
      * @group Props
@@ -387,8 +412,15 @@ class Galleria extends BaseComponent {
         this._visible = visible;
         if (this._visible && !this.maskVisible) {
             this.maskVisible = true;
+            this.renderMask.set(true);
+            this.renderContent.set(true);
+        }
+        else if (!this._visible && this.maskVisible) {
+            this.maskVisible = false;
         }
     }
+    renderMask = signal(false, { ...(ngDevMode ? { debugName: "renderMask" } : {}) });
+    renderContent = signal(false, { ...(ngDevMode ? { debugName: "renderContent" } : {}) });
     /**
      * Callback to invoke on active index change.
      * @param {number} number - Active index.
@@ -401,35 +433,79 @@ class Galleria extends BaseComponent {
      * @group Emits
      */
     visibleChange = new EventEmitter();
-    mask;
     container;
     _visible = false;
     _activeIndex = 0;
+    /**
+     * Custom header template.
+     * @group Templates
+     */
     headerTemplate;
     headerFacet;
+    /**
+     * Custom footer template.
+     * @group Templates
+     */
     footerTemplate;
     footerFacet;
+    /**
+     * Custom indicator template.
+     * @group Templates
+     */
     indicatorTemplate;
     indicatorFacet;
+    /**
+     * Custom caption template.
+     * @group Templates
+     */
     captionTemplate;
     captionFacet;
+    /**
+     * Custom close icon template.
+     * @group Templates
+     */
     _closeIconTemplate;
     closeIconTemplate;
+    /**
+     * Custom previous thumbnail icon template.
+     * @group Templates
+     */
     _previousThumbnailIconTemplate;
     previousThumbnailIconTemplate;
+    /**
+     * Custom next thumbnail icon template.
+     * @group Templates
+     */
     _nextThumbnailIconTemplate;
     nextThumbnailIconTemplate;
+    /**
+     * Custom item previous icon template.
+     * @group Templates
+     */
     _itemPreviousIconTemplate;
     itemPreviousIconTemplate;
+    /**
+     * Custom item next icon template.
+     * @group Templates
+     */
     _itemNextIconTemplate;
     itemNextIconTemplate;
+    /**
+     * Custom item template.
+     * @group Templates
+     */
     _itemTemplate;
     itemTemplate;
+    /**
+     * Custom thumbnail template.
+     * @group Templates
+     */
     _thumbnailTemplate;
     thumbnailTemplate;
     maskVisible = false;
     numVisibleLimit = 0;
     _componentStyle = inject(GalleriaStyle);
+    mask;
     templates;
     constructor(element) {
         super();
@@ -494,41 +570,43 @@ class Galleria extends BaseComponent {
             this.activeIndexChange.emit(index);
         }
     }
-    onAnimationStart(event) {
-        switch (event.toState) {
-            case 'visible':
-                this.enableModality();
-                setTimeout(() => {
-                    const focusTarget = findSingle(this.container?.nativeElement, '[data-pc-section="closebutton"]');
-                    if (focusTarget)
-                        focus(focusTarget);
-                }, 25);
-                break;
-            case 'void':
-                addClass(this.mask?.nativeElement, 'p-overlay-mask-leave');
-                break;
+    onBeforeEnter(event) {
+        this.mask = event.element?.parentElement;
+        this.enableModality();
+        setTimeout(() => {
+            const focusTarget = findSingle(this.container?.nativeElement, '[data-pc-section="closebutton"]');
+            if (focusTarget)
+                focus(focusTarget);
+        }, 25);
+    }
+    onBeforeLeave() {
+        if (this.mask) {
+            this.maskVisible = false;
         }
     }
-    onAnimationEnd(event) {
-        switch (event.toState) {
-            case 'void':
-                this.disableModality();
-                break;
+    onAfterLeave() {
+        this.disableModality();
+        this.renderContent.set(false);
+    }
+    onMaskAfterLeave() {
+        if (!this.renderContent()) {
+            this.renderMask.set(false);
         }
     }
     enableModality() {
+        //@ts-ignore
         blockBodyScroll();
         this.cd.markForCheck();
         if (this.mask) {
-            ZIndexUtils.set('modal', this.mask.nativeElement, this.baseZIndex || this.config.zIndex.modal);
+            ZIndexUtils.set('modal', this.mask, this.baseZIndex || this.config.zIndex.modal);
         }
     }
     disableModality() {
+        //@ts-ignore
         unblockBodyScroll();
-        this.maskVisible = false;
         this.cd.markForCheck();
         if (this.mask) {
-            ZIndexUtils.clear(this.mask.nativeElement);
+            ZIndexUtils.clear(this.mask);
         }
     }
     onDestroy() {
@@ -539,84 +617,109 @@ class Galleria extends BaseComponent {
             this.disableModality();
         }
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Galleria, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: Galleria, isStandalone: false, selector: "p-galleria", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: false, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, numVisible: { classPropertyName: "numVisible", publicName: "numVisible", isSignal: false, isRequired: false, transformFunction: numberAttribute }, responsiveOptions: { classPropertyName: "responsiveOptions", publicName: "responsiveOptions", isSignal: false, isRequired: false, transformFunction: null }, showItemNavigators: { classPropertyName: "showItemNavigators", publicName: "showItemNavigators", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showThumbnailNavigators: { classPropertyName: "showThumbnailNavigators", publicName: "showThumbnailNavigators", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showItemNavigatorsOnHover: { classPropertyName: "showItemNavigatorsOnHover", publicName: "showItemNavigatorsOnHover", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, changeItemOnIndicatorHover: { classPropertyName: "changeItemOnIndicatorHover", publicName: "changeItemOnIndicatorHover", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, circular: { classPropertyName: "circular", publicName: "circular", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, shouldStopAutoplayByClick: { classPropertyName: "shouldStopAutoplayByClick", publicName: "shouldStopAutoplayByClick", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, transitionInterval: { classPropertyName: "transitionInterval", publicName: "transitionInterval", isSignal: false, isRequired: false, transformFunction: numberAttribute }, showThumbnails: { classPropertyName: "showThumbnails", publicName: "showThumbnails", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, thumbnailsPosition: { classPropertyName: "thumbnailsPosition", publicName: "thumbnailsPosition", isSignal: false, isRequired: false, transformFunction: null }, verticalThumbnailViewPortHeight: { classPropertyName: "verticalThumbnailViewPortHeight", publicName: "verticalThumbnailViewPortHeight", isSignal: false, isRequired: false, transformFunction: null }, showIndicators: { classPropertyName: "showIndicators", publicName: "showIndicators", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showIndicatorsOnItem: { classPropertyName: "showIndicatorsOnItem", publicName: "showIndicatorsOnItem", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, indicatorsPosition: { classPropertyName: "indicatorsPosition", publicName: "indicatorsPosition", isSignal: false, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, maskClass: { classPropertyName: "maskClass", publicName: "maskClass", isSignal: false, isRequired: false, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: false, isRequired: false, transformFunction: null }, containerStyle: { classPropertyName: "containerStyle", publicName: "containerStyle", isSignal: false, isRequired: false, transformFunction: null }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null }, maskMotionOptions: { classPropertyName: "maskMotionOptions", publicName: "maskMotionOptions", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null } }, 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: "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 [pBind]="ptm('mask')" [ngClass]="cx('mask')" [class]="maskClass" [attr.role]="fullScreen ? 'dialog' : 'region'" [attr.aria-modal]="fullScreen ? 'true' : undefined" (click)="onMaskHide($event)">
+            @if (renderMask()) {
                 <div
-                    pGalleriaContent
-                    *ngIf="visible"
-                    [@animation]="{
-                        value: 'visible',
-                        params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
-                    }"
-                    (@animation.start)="onAnimationStart($event)"
-                    (@animation.done)="onAnimationEnd($event)"
-                    [value]="value"
-                    [activeIndex]="activeIndex"
-                    [numVisible]="numVisibleLimit || numVisible"
-                    (maskHide)="onMaskHide()"
-                    (activeItemChange)="onActiveItemChange($event)"
-                    [ngStyle]="containerStyle"
-                    [fullScreen]="fullScreen"
-                    [pt]="pt()"
-                    pFocusTrap
-                    [pFocusTrapDisabled]="!fullScreen"
-                ></div>
-            </div>
+                    [pBind]="ptm('mask')"
+                    [pMotion]="maskVisible"
+                    [pMotionAppear]="true"
+                    [pMotionEnterActiveClass]="fullScreen ? 'p-overlay-mask-enter-active' : ''"
+                    [pMotionLeaveActiveClass]="fullScreen ? 'p-overlay-mask-leave-active' : ''"
+                    [pMotionOptions]="computedMaskMotionOptions()"
+                    (pMotionOnAfterLeave)="onMaskAfterLeave()"
+                    [ngClass]="cx('mask')"
+                    [class]="maskClass"
+                    [attr.role]="fullScreen ? 'dialog' : 'region'"
+                    [attr.aria-modal]="fullScreen ? 'true' : undefined"
+                    (click)="onMaskHide($event)"
+                >
+                    @if (renderContent()) {
+                        <div
+                            pGalleriaContent
+                            [pMotion]="visible"
+                            [pMotionAppear]="true"
+                            [pMotionName]="'p-galleria'"
+                            [pMotionOptions]="computedMotionOptions()"
+                            (pMotionOnBeforeEnter)="onBeforeEnter($event)"
+                            (pMotionOnBeforeLeave)="onBeforeLeave()"
+                            (pMotionOnAfterLeave)="onAfterLeave()"
+                            [value]="value"
+                            [activeIndex]="activeIndex"
+                            [numVisible]="numVisibleLimit || numVisible"
+                            (maskHide)="onMaskHide()"
+                            (activeItemChange)="onActiveItemChange($event)"
+                            [ngStyle]="containerStyle"
+                            [fullScreen]="fullScreen"
+                            [pt]="pt()"
+                            pFocusTrap
+                            [pFocusTrapDisabled]="!fullScreen"
+                            [unstyled]="unstyled()"
+                        ></div>
+                    }
+                </div>
+            }
         </div>
 
         <ng-template #windowed>
-            <div pGalleriaContent [pt]="pt()" [value]="value" [activeIndex]="activeIndex" [numVisible]="numVisibleLimit || numVisible" (activeItemChange)="onActiveItemChange($event)"></div>
+            <div pGalleriaContent [pt]="pt()" [unstyled]="unstyled()" [value]="value" [activeIndex]="activeIndex" [numVisible]="numVisibleLimit || numVisible" (activeItemChange)="onActiveItemChange($event)"></div>
         </ng-template>
-    `, 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 });
+    `, 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: "directive", type: i0.forwardRef(() => i3.MotionDirective), selector: "[pMotion]", inputs: ["pMotion", "pMotionName", "pMotionType", "pMotionSafe", "pMotionDisabled", "pMotionAppear", "pMotionEnter", "pMotionLeave", "pMotionDuration", "pMotionHideStrategy", "pMotionEnterFromClass", "pMotionEnterToClass", "pMotionEnterActiveClass", "pMotionLeaveFromClass", "pMotionLeaveToClass", "pMotionLeaveActiveClass", "pMotionOptions"], outputs: ["pMotionOnBeforeEnter", "pMotionOnEnter", "pMotionOnAfterEnter", "pMotionOnEnterCancelled", "pMotionOnBeforeLeave", "pMotionOnLeave", "pMotionOnAfterLeave", "pMotionOnLeaveCancelled"] }, { kind: "component", type: i0.forwardRef(() => GalleriaContent), selector: "div[pGalleriaContent]", inputs: ["activeIndex", "value", "numVisible", "fullScreen"], outputs: ["maskHide", "activeItemChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Galleria, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Galleria, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-galleria',
                     standalone: false,
                     template: `
         <div *ngIf="fullScreen; else windowed" #container>
-            <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)">
+            @if (renderMask()) {
                 <div
-                    pGalleriaContent
-                    *ngIf="visible"
-                    [@animation]="{
-                        value: 'visible',
-                        params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
-                    }"
-                    (@animation.start)="onAnimationStart($event)"
-                    (@animation.done)="onAnimationEnd($event)"
-                    [value]="value"
-                    [activeIndex]="activeIndex"
-                    [numVisible]="numVisibleLimit || numVisible"
-                    (maskHide)="onMaskHide()"
-                    (activeItemChange)="onActiveItemChange($event)"
-                    [ngStyle]="containerStyle"
-                    [fullScreen]="fullScreen"
-                    [pt]="pt()"
-                    pFocusTrap
-                    [pFocusTrapDisabled]="!fullScreen"
-                ></div>
-            </div>
+                    [pBind]="ptm('mask')"
+                    [pMotion]="maskVisible"
+                    [pMotionAppear]="true"
+                    [pMotionEnterActiveClass]="fullScreen ? 'p-overlay-mask-enter-active' : ''"
+                    [pMotionLeaveActiveClass]="fullScreen ? 'p-overlay-mask-leave-active' : ''"
+                    [pMotionOptions]="computedMaskMotionOptions()"
+                    (pMotionOnAfterLeave)="onMaskAfterLeave()"
+                    [ngClass]="cx('mask')"
+                    [class]="maskClass"
+                    [attr.role]="fullScreen ? 'dialog' : 'region'"
+                    [attr.aria-modal]="fullScreen ? 'true' : undefined"
+                    (click)="onMaskHide($event)"
+                >
+                    @if (renderContent()) {
+                        <div
+                            pGalleriaContent
+                            [pMotion]="visible"
+                            [pMotionAppear]="true"
+                            [pMotionName]="'p-galleria'"
+                            [pMotionOptions]="computedMotionOptions()"
+                            (pMotionOnBeforeEnter)="onBeforeEnter($event)"
+                            (pMotionOnBeforeLeave)="onBeforeLeave()"
+                            (pMotionOnAfterLeave)="onAfterLeave()"
+                            [value]="value"
+                            [activeIndex]="activeIndex"
+                            [numVisible]="numVisibleLimit || numVisible"
+                            (maskHide)="onMaskHide()"
+                            (activeItemChange)="onActiveItemChange($event)"
+                            [ngStyle]="containerStyle"
+                            [fullScreen]="fullScreen"
+                            [pt]="pt()"
+                            pFocusTrap
+                            [pFocusTrapDisabled]="!fullScreen"
+                            [unstyled]="unstyled()"
+                        ></div>
+                    }
+                </div>
+            }
         </div>
 
         <ng-template #windowed>
-            <div pGalleriaContent [pt]="pt()" [value]="value" [activeIndex]="activeIndex" [numVisible]="numVisibleLimit || numVisible" (activeItemChange)="onActiveItemChange($event)"></div>
+            <div pGalleriaContent [pt]="pt()" [unstyled]="unstyled()" [value]="value" [activeIndex]="activeIndex" [numVisible]="numVisibleLimit || numVisible" (activeItemChange)="onActiveItemChange($event)"></div>
         </ng-template>
     `,
-                    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: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     providers: [GalleriaStyle, { provide: GALLERIA_INSTANCE, useExisting: Galleria }, { provide: PARENT_INSTANCE, useExisting: Galleria }],
@@ -688,15 +791,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], hideTransitionOptions: [{
                 type: Input
-            }], visible: [{
+            }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], maskMotionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskMotionOptions", required: false }] }], visible: [{
                 type: Input
             }], activeIndexChange: [{
                 type: Output
             }], visibleChange: [{
                 type: Output
-            }], mask: [{
-                type: ViewChild,
-                args: ['mask']
             }], container: [{
                 type: ViewChild,
                 args: ['container']
@@ -743,7 +843,7 @@ class GalleriaContent extends BaseComponent {
     hostName = 'Galleria';
     bindDirectiveInstance = inject(Bind, { self: true });
     onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptm('root'));
+        this.bindDirectiveInstance.setAttrs(this.getPTOptions('root'));
     }
     get activeIndex() {
         return this._activeIndex;
@@ -832,15 +932,23 @@ 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.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: `
+    getPTOptions(key) {
+        return this.ptm(key, {
+            context: {
+                pt: this.pt(),
+                unstyled: this.unstyled()
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: GalleriaContent, deps: [{ token: Galleria }, { token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.1", 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'))" } }, 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')" />
+            <button *ngIf="galleria.fullScreen" type="button" [pBind]="getPTOptions('closeButton')" [class]="cx('closeButton')" (click)="maskHide.emit()" [attr.aria-label]="closeAriaLabel()">
+                <svg data-p-icon="times" *ngIf="!galleria.closeIconTemplate && !galleria._closeIconTemplate" [pBind]="getPTOptions('closeIcon')" [class]="cx('closeIcon')" />
                 <ng-template *ngTemplateOutlet="galleria.closeIconTemplate || galleria._closeIconTemplate"></ng-template>
             </button>
-            <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 *ngIf="galleria.templates && (galleria.headerFacet || galleria.headerTemplate)" pGalleriaItemSlot [unstyled]="unstyled()" type="header" [templates]="galleria.templates" [pBind]="getPTOptions('header')" [class]="cx('header')"></div>
+            <div [pBind]="getPTOptions('content')" [class]="cx('content')" [attr.aria-live]="galleria.autoPlay ? 'polite' : 'off'">
                 <div
                     pGalleriaItem
                     [id]="id"
@@ -859,6 +967,7 @@ class GalleriaContent extends BaseComponent {
                     (startSlideShow)="startSlideShow()"
                     (stopSlideShow)="stopSlideShow()"
                     [pt]="pt()"
+                    [unstyled]="unstyled()"
                     [class]="cx('itemsContainer')"
                 ></div>
 
@@ -879,25 +988,26 @@ class GalleriaContent extends BaseComponent {
                     [slideShowActive]="slideShowActive"
                     (stopSlideShow)="stopSlideShow()"
                     [pt]="pt()"
+                    [unstyled]="unstyled()"
                 ></div>
             </div>
-            <div *ngIf="shouldRenderFooter()" pGalleriaItemSlot [pBind]="ptm('footer')" [class]="cx('footer')" type="footer" [templates]="galleria.templates"></div>
+            <div *ngIf="shouldRenderFooter()" pGalleriaItemSlot [pBind]="getPTOptions('footer')" [class]="cx('footer')" type="footer" [templates]="galleria.templates" [unstyled]="unstyled()"></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.4", ngImport: i0, type: GalleriaContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: GalleriaContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'div[pGalleriaContent]',
                     standalone: false,
                     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')" />
+            <button *ngIf="galleria.fullScreen" type="button" [pBind]="getPTOptions('closeButton')" [class]="cx('closeButton')" (click)="maskHide.emit()" [attr.aria-label]="closeAriaLabel()">
+                <svg data-p-icon="times" *ngIf="!galleria.closeIconTemplate && !galleria._closeIconTemplate" [pBind]="getPTOptions('closeIcon')" [class]="cx('closeIcon')" />
                 <ng-template *ngTemplateOutlet="galleria.closeIconTemplate || galleria._closeIconTemplate"></ng-template>
             </button>
-            <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 *ngIf="galleria.templates && (galleria.headerFacet || galleria.headerTemplate)" pGalleriaItemSlot [unstyled]="unstyled()" type="header" [templates]="galleria.templates" [pBind]="getPTOptions('header')" [class]="cx('header')"></div>
+            <div [pBind]="getPTOptions('content')" [class]="cx('content')" [attr.aria-live]="galleria.autoPlay ? 'polite' : 'off'">
                 <div
                     pGalleriaItem
                     [id]="id"
@@ -916,6 +1026,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                     (startSlideShow)="startSlideShow()"
                     (stopSlideShow)="stopSlideShow()"
                     [pt]="pt()"
+                    [unstyled]="unstyled()"
                     [class]="cx('itemsContainer')"
                 ></div>
 
@@ -936,9 +1047,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                     [slideShowActive]="slideShowActive"
                     (stopSlideShow)="stopSlideShow()"
                     [pt]="pt()"
+                    [unstyled]="unstyled()"
                 ></div>
             </div>
-            <div *ngIf="shouldRenderFooter()" pGalleriaItemSlot [pBind]="ptm('footer')" [class]="cx('footer')" type="footer" [templates]="galleria.templates"></div>
+            <div *ngIf="shouldRenderFooter()" pGalleriaItemSlot [pBind]="getPTOptions('footer')" [class]="cx('footer')" type="footer" [templates]="galleria.templates" [unstyled]="unstyled()"></div>
         </ng-container>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -947,7 +1059,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         '[attr.id]': 'id',
                         '[attr.role]': '"region"',
                         '[style]': '!galleria.fullScreen ? galleria.containerStyle : {}',
-                        '[class]': "cn(cx('root'), galleria?.contentClass)"
+                        '[class]': "cn(cx('root'))"
                     },
                     hostDirectives: [Bind]
                 }]
@@ -1016,31 +1128,34 @@ class GalleriaItemSlot extends BaseComponent {
             this.getContentTemplate();
         }
     }
+    getTemplateFromQueryList(type) {
+        return this.galleria.templates?.find((item) => item.getType() === type)?.template;
+    }
     getContentTemplate() {
         switch (this.type) {
             case 'item':
                 this.context = { $implicit: this.item };
-                this.contentTemplate = this.galleria._itemTemplate || this.galleria.itemTemplate;
+                this.contentTemplate = this.galleria._itemTemplate || this.getTemplateFromQueryList('item');
                 break;
             case 'caption':
                 this.context = { $implicit: this.item };
-                this.contentTemplate = this.galleria.captionTemplate || this.galleria.captionFacet;
+                this.contentTemplate = this.galleria.captionTemplate || this.getTemplateFromQueryList('caption');
                 break;
             case 'thumbnail':
                 this.context = { $implicit: this.item };
-                this.contentTemplate = this.galleria.thumbnailTemplate || this.galleria._thumbnailTemplate;
+                this.contentTemplate = this.galleria._thumbnailTemplate || this.getTemplateFromQueryList('thumbnail');
                 break;
             case 'indicator':
                 this.context = { $implicit: this.index };
-                this.contentTemplate = this.galleria.indicatorTemplate || this.galleria.indicatorFacet;
+                this.contentTemplate = this.galleria.indicatorTemplate || this.getTemplateFromQueryList('indicator');
                 break;
             case 'footer':
                 this.context = { $implicit: this.item };
-                this.contentTemplate = this.galleria.footerTemplate || this.galleria.footerFacet;
+                this.contentTemplate = this.galleria.footerTemplate || this.getTemplateFromQueryList('footer');
                 break;
             default:
                 this.context = { $implicit: this.item };
-                this.contentTemplate = this.galleria._itemTemplate || this.galleria.itemTemplate;
+                this.contentTemplate = this.galleria._itemTemplate || this.getTemplateFromQueryList('item');
         }
     }
     type;
@@ -1078,14 +1193,14 @@ class GalleriaItemSlot extends BaseComponent {
             this.getContentTemplate();
         }
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: GalleriaItemSlot, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.1", 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: 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.4", ngImport: i0, type: GalleriaItemSlot, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: GalleriaItemSlot, decorators: [{
             type: Component,
             args: [{
                     selector: 'div[pGalleriaItemSlot]',
@@ -1249,8 +1364,8 @@ 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.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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: GalleriaItem, deps: [{ token: Galleria }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.1", 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"
@@ -1269,6 +1384,7 @@ class GalleriaItem extends BaseComponent {
             <div
                 pGalleriaItemSlot
                 [pBind]="ptm('item')"
+                [unstyled]="unstyled()"
                 [class]="cx('item')"
                 [item]="activeItem"
                 [templates]="templates"
@@ -1292,7 +1408,7 @@ class GalleriaItem extends BaseComponent {
                 <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 *ngIf="captionFacet || galleria.captionTemplate" pGalleriaItemSlot [pBind]="ptm('caption')" [class]="cx('caption')" type="caption" [item]="activeItem" [templates]="templates"></div>
+            <div *ngIf="captionFacet || galleria.captionTemplate" pGalleriaItemSlot [pBind]="ptm('caption')" [unstyled]="unstyled()" [class]="cx('caption')" type="caption" [item]="activeItem" [templates]="templates"></div>
         </div>
         <ul *ngIf="showIndicators" [pBind]="ptm('indicatorList')" [class]="cx('indicatorList')">
             <li
@@ -1307,16 +1423,17 @@ class GalleriaItem extends BaseComponent {
                 [attr.aria-selected]="activeIndex === index"
                 [attr.aria-controls]="id + '_item_' + index"
                 [pBind]="ptm('indicator', getIndicatorPTOptions(index))"
+                [attr.data-p-active]="isIndicatorItemActive(index)"
             >
                 <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>
+                    <div pGalleriaItemSlot type="indicator" [index]="index" [templates]="templates" [pBind]="ptm('item')" [unstyled]="unstyled()"></div>
                 </ng-container>
             </li>
         </ul>
     `, 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.4", ngImport: i0, type: GalleriaItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: GalleriaItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'div[pGalleriaItem]',
@@ -1340,6 +1457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             <div
                 pGalleriaItemSlot
                 [pBind]="ptm('item')"
+                [unstyled]="unstyled()"
                 [class]="cx('item')"
                 [item]="activeItem"
                 [templates]="templates"
@@ -1363,7 +1481,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 <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 *ngIf="captionFacet || galleria.captionTemplate" pGalleriaItemSlot [pBind]="ptm('caption')" [class]="cx('caption')" type="caption" [item]="activeItem" [templates]="templates"></div>
+            <div *ngIf="captionFacet || galleria.captionTemplate" pGalleriaItemSlot [pBind]="ptm('caption')" [unstyled]="unstyled()" [class]="cx('caption')" type="caption" [item]="activeItem" [templates]="templates"></div>
         </div>
         <ul *ngIf="showIndicators" [pBind]="ptm('indicatorList')" [class]="cx('indicatorList')">
             <li
@@ -1378,10 +1496,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 [attr.aria-selected]="activeIndex === index"
                 [attr.aria-controls]="id + '_item_' + index"
                 [pBind]="ptm('indicator', getIndicatorPTOptions(index))"
+                [attr.data-p-active]="isIndicatorItemActive(index)"
             >
                 <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>
+                    <div pGalleriaItemSlot type="indicator" [index]="index" [templates]="templates" [pBind]="ptm('item')" [unstyled]="unstyled()"></div>
                 </ng-container>
             </li>
         </ul>
@@ -1508,7 +1627,8 @@ class GalleriaThumbnails extends BaseComponent {
                 this.itemsContainer.nativeElement.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
             }
             if (this._oldactiveIndex !== this._activeIndex) {
-                removeClass(this.itemsContainer.nativeElement, 'p-items-hidden');
+                this.document.body.setAttribute('data-p-items-hidden', 'false');
+                !this.$unstyled() && removeClass(this.itemsContainer.nativeElement, 'p-items-hidden');
                 this.itemsContainer.nativeElement.style.transition = 'transform 500ms ease 0s';
             }
             this._oldactiveIndex = this._activeIndex;
@@ -1531,7 +1651,7 @@ class GalleriaThumbnails extends BaseComponent {
                 flex: 1 0 ${100 / this.d_numVisible}%
             }
         `;
-        if (this.responsiveOptions) {
+        if (this.responsiveOptions && !this.$unstyled()) {
             this.sortedResponsiveOptions = [...this.responsiveOptions];
             this.sortedResponsiveOptions.sort((data1, data2) => {
                 const value1 = data1.breakpoint;
@@ -1718,7 +1838,8 @@ class GalleriaThumbnails extends BaseComponent {
             }
         }
         if (this.itemsContainer) {
-            removeClass(this.itemsContainer.nativeElement, 'p-items-hidden');
+            this.document.body.setAttribute('data-p-items-hidden', 'false');
+            !this.$unstyled() && removeClass(this.itemsContainer.nativeElement, 'p-items-hidden');
             this.itemsContainer.nativeElement.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
             this.itemsContainer.nativeElement.style.transition = 'transform 500ms ease 0s';
         }
@@ -1748,7 +1869,8 @@ class GalleriaThumbnails extends BaseComponent {
     }
     onTransitionEnd() {
         if (this.itemsContainer && this.itemsContainer.nativeElement) {
-            addClass(this.itemsContainer.nativeElement, 'p-items-hidden');
+            this.document.body.setAttribute('data-p-items-hidden', 'true');
+            !this.$unstyled() && addClass(this.itemsContainer.nativeElement, 'p-items-hidden');
             this.itemsContainer.nativeElement.style.transition = '';
         }
     }
@@ -1819,8 +1941,8 @@ 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.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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: GalleriaThumbnails, deps: [{ token: Galleria }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.1", 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"
@@ -1847,6 +1969,7 @@ class GalleriaThumbnails extends BaseComponent {
                         [attr.aria-selected]="activeIndex === index"
                         [attr.aria-controls]="containerId + '_item_' + index"
                         (keydown)="onThumbnailKeydown($event, index)"
+                        [attr.data-p-active]="activeIndex === index"
                     >
                         <div
                             [pBind]="ptm('thumbnail')"
@@ -1858,7 +1981,7 @@ class GalleriaThumbnails extends BaseComponent {
                             (touchend)="onItemClick(index)"
                             (keydown.enter)="onItemClick(index)"
                         >
-                            <div pGalleriaItemSlot type="thumbnail" [pBind]="ptm('thumbnailItem')" [item]="item" [templates]="templates"></div>
+                            <div pGalleriaItemSlot type="thumbnail" [pBind]="ptm('thumbnailItem')" [item]="item" [templates]="templates" [unstyled]="unstyled()"></div>
                         </div>
                     </div>
                 </div>
@@ -1882,7 +2005,7 @@ class GalleriaThumbnails extends BaseComponent {
         </div>
     `, 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.4", ngImport: i0, type: GalleriaThumbnails, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: GalleriaThumbnails, decorators: [{
             type: Component,
             args: [{
                     selector: 'div[pGalleriaThumbnails]',
@@ -1914,6 +2037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         [attr.aria-selected]="activeIndex === index"
                         [attr.aria-controls]="containerId + '_item_' + index"
                         (keydown)="onThumbnailKeydown($event, index)"
+                        [attr.data-p-active]="activeIndex === index"
                     >
                         <div
                             [pBind]="ptm('thumbnail')"
@@ -1925,7 +2049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                             (touchend)="onItemClick(index)"
                             (keydown.enter)="onItemClick(index)"
                         >
-                            <div pGalleriaItemSlot type="thumbnail" [pBind]="ptm('thumbnailItem')" [item]="item" [templates]="templates"></div>
+                            <div pGalleriaItemSlot type="thumbnail" [pBind]="ptm('thumbnailItem')" [item]="item" [templates]="templates" [unstyled]="unstyled()"></div>
                         </div>
                     </div>
                 </div>
@@ -1989,14 +2113,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 class GalleriaModule {
-    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] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: GalleriaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: GalleriaModule, declarations: [Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails], imports: [CommonModule, SharedModule, Ripple, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, FocusTrap, BindModule, MotionModule], exports: [CommonModule, Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: GalleriaModule, imports: [CommonModule, SharedModule, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, BindModule, MotionModule, CommonModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: GalleriaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: GalleriaModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, SharedModule, Ripple, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, FocusTrap, BindModule],
+                    imports: [CommonModule, SharedModule, Ripple, TimesIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, FocusTrap, BindModule, MotionModule],
                     exports: [CommonModule, Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails, SharedModule],
                     declarations: [Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails]
                 }]