primeng 22.1.1 → 22.1.2

package/fesm2022/primeng-gallery.mjs

@@ -1,1382 +1,2091 @@
-export * from 'primeng/types/gallery';
-import { NgTemplateOutlet, isPlatformServer } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Injectable, inject, input, numberAttribute, DestroyRef, signal, computed, afterNextRender, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, viewChild, booleanAttribute, contentChildren, model, output, NgModule } from '@angular/core';
-import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
-import * as i1 from 'primeng/bind';
-import { Bind, BindModule } from 'primeng/bind';
-import { SharedModule } from 'primeng/api';
-import { style } from '@primeuix/styles/gallery';
-import { BaseStyle } from 'primeng/base';
-import * as i2 from 'primeng/carousel';
-import { CarouselModule } from 'primeng/carousel';
-
+import { NgTemplateOutlet, isPlatformServer } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, Injectable, NgModule, ViewEncapsulation, afterNextRender, booleanAttribute, computed, contentChildren, effect, inject, input, model, numberAttribute, output, signal, viewChild } from "@angular/core";
+import { BaseComponent, PARENT_INSTANCE } from "primeng/basecomponent";
+import * as i1 from "primeng/bind";
+import { Bind, BindModule } from "primeng/bind";
+import { SharedModule } from "primeng/api";
+import { style } from "@primeuix/styles/gallery";
+import { BaseStyle } from "primeng/base";
+import * as i2 from "primeng/carousel";
+import { CarouselModule } from "primeng/carousel";
+export * from "primeng/types/gallery";
 const classes = {
-    root: 'p-gallery',
-    backdrop: 'p-gallery-backdrop',
-    header: 'p-gallery-header',
-    footer: 'p-gallery-footer',
-    content: 'p-gallery-content',
-    item: 'p-gallery-item',
-    next: 'p-gallery-next',
-    prev: 'p-gallery-prev',
-    toolbar: 'p-gallery-toolbar',
-    toolbarItem: 'p-gallery-toolbar-item',
-    zoomIn: 'p-gallery-action',
-    zoomOut: 'p-gallery-action',
-    zoomToggle: 'p-gallery-action',
-    rotateLeft: 'p-gallery-action',
-    rotateRight: 'p-gallery-action',
-    flipX: 'p-gallery-action',
-    flipY: 'p-gallery-action',
-    download: 'p-gallery-action',
-    fullScreen: 'p-gallery-action',
-    thumbnail: 'p-gallery-thumbnail',
-    thumbnailContent: 'p-gallery-thumbnail-content',
-    thumbnailItem: 'p-gallery-thumbnail-item'
+	root: "p-gallery",
+	backdrop: "p-gallery-backdrop",
+	header: "p-gallery-header",
+	footer: "p-gallery-footer",
+	content: "p-gallery-content",
+	item: "p-gallery-item",
+	next: "p-gallery-next",
+	prev: "p-gallery-prev",
+	toolbar: "p-gallery-toolbar",
+	toolbarItem: "p-gallery-toolbar-item",
+	zoomIn: "p-gallery-action",
+	zoomOut: "p-gallery-action",
+	zoomToggle: "p-gallery-action",
+	rotateLeft: "p-gallery-action",
+	rotateRight: "p-gallery-action",
+	flipX: "p-gallery-action",
+	flipY: "p-gallery-action",
+	download: "p-gallery-action",
+	fullScreen: "p-gallery-action",
+	thumbnail: "p-gallery-thumbnail",
+	thumbnailContent: "p-gallery-thumbnail-content",
+	thumbnailItem: "p-gallery-thumbnail-item"
+};
+var GalleryStyle = class GalleryStyle extends BaseStyle {
+	name = "gallery";
+	style = style;
+	classes = classes;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryStyle
+	});
 };
-class GalleryStyle extends BaseStyle {
-    name = 'gallery';
-    style = style;
-    classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryStyle, decorators: [{
-            type: Injectable
-        }] });
-/**
- *
- * Gallery groups a collection of contents in items.
- *
- * [Live Demo](https://www.primeng.org/gallery/)
- *
- * @module gallerystyle
- *
- */
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GalleryStyle,
+	decorators: [{ type: Injectable }]
+});
 var GalleryClasses;
-(function (GalleryClasses) {
-    /**
-     * Class name of the root element
-     */
-    GalleryClasses["root"] = "p-gallery";
-    /**
-     * Class name of the backdrop element
-     */
-    GalleryClasses["backdrop"] = "p-gallery-backdrop";
-    /**
-     * Class name of the header element
-     */
-    GalleryClasses["header"] = "p-gallery-header";
-    /**
-     * Class name of the footer element
-     */
-    GalleryClasses["footer"] = "p-gallery-footer";
-    /**
-     * Class name of the content element
-     */
-    GalleryClasses["content"] = "p-gallery-content";
-    /**
-     * Class name of the item element
-     */
-    GalleryClasses["item"] = "p-gallery-item";
-    /**
-     * Class name of the next button element
-     */
-    GalleryClasses["next"] = "p-gallery-next";
-    /**
-     * Class name of the prev button element
-     */
-    GalleryClasses["prev"] = "p-gallery-prev";
-    /**
-     * Class name of the toolbar element
-     */
-    GalleryClasses["toolbar"] = "p-gallery-toolbar";
-    /**
-     * Class name of the toolbar item element
-     */
-    GalleryClasses["toolbarItem"] = "p-gallery-toolbar-item";
-    /**
-     * Class name of the action element
-     */
-    GalleryClasses["action"] = "p-gallery-action";
-    /**
-     * Class name of the thumbnail element
-     */
-    GalleryClasses["thumbnail"] = "p-gallery-thumbnail";
-    /**
-     * Class name of the thumbnail content element
-     */
-    GalleryClasses["thumbnailContent"] = "p-gallery-thumbnail-content";
-    /**
-     * Class name of the thumbnail item element
-     */
-    GalleryClasses["thumbnailItem"] = "p-gallery-thumbnail-item";
+(function(GalleryClasses) {
+	GalleryClasses["root"] = "p-gallery";
+	GalleryClasses["backdrop"] = "p-gallery-backdrop";
+	GalleryClasses["header"] = "p-gallery-header";
+	GalleryClasses["footer"] = "p-gallery-footer";
+	GalleryClasses["content"] = "p-gallery-content";
+	GalleryClasses["item"] = "p-gallery-item";
+	GalleryClasses["next"] = "p-gallery-next";
+	GalleryClasses["prev"] = "p-gallery-prev";
+	GalleryClasses["toolbar"] = "p-gallery-toolbar";
+	GalleryClasses["toolbarItem"] = "p-gallery-toolbar-item";
+	GalleryClasses["action"] = "p-gallery-action";
+	GalleryClasses["thumbnail"] = "p-gallery-thumbnail";
+	GalleryClasses["thumbnailContent"] = "p-gallery-thumbnail-content";
+	GalleryClasses["thumbnailItem"] = "p-gallery-thumbnail-item";
 })(GalleryClasses || (GalleryClasses = {}));
-
-/**
- * GalleryItem represents an individual item in the gallery.
- * @group Components
- */
-class GalleryItem extends BaseComponent {
-    componentName = 'GalleryItem';
-    bindDirectiveInstance = inject(Bind, { self: true });
-    /**
-     * The normal scale of the gallery item.
-     * @group Props
-     * @defaultValue 1
-     */
-    normalScale = input(1, { ...(ngDevMode ? { debugName: "normalScale" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    /**
-     * The zoomed scale of the gallery item.
-     * @group Props
-     * @defaultValue 3
-     */
-    zoomedScale = input(3, { ...(ngDevMode ? { debugName: "zoomedScale" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    gallery = inject(Gallery);
-    _destroyRef = inject(DestroyRef);
-    index = signal(-1, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
-    isActive = computed(() => this.gallery.activeIndex() === this.index(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
-    dataActive = computed(() => (this.isActive() ? 'true' : 'false'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dataActive" }] : /* istanbul ignore next */ []));
-    stylePositionX = computed(() => this.position().x + 'px', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "stylePositionX" }] : /* istanbul ignore next */ []));
-    stylePositionY = computed(() => this.position().y + 'px', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "stylePositionY" }] : /* istanbul ignore next */ []));
-    styleRotation = computed(() => this.rotation() + 'deg', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "styleRotation" }] : /* istanbul ignore next */ []));
-    styleFlipX = computed(() => this.flip().x, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "styleFlipX" }] : /* istanbul ignore next */ []));
-    styleFlipY = computed(() => this.flip().y, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "styleFlipY" }] : /* istanbul ignore next */ []));
-    position = signal({ x: 0, y: 0 }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-    scale = signal(1, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []));
-    rotation = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rotation" }] : /* istanbul ignore next */ []));
-    isRotating = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isRotating" }] : /* istanbul ignore next */ []));
-    flip = signal({ x: 1, y: 1 }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "flip" }] : /* istanbul ignore next */ []));
-    registeredIndex = null;
-    pointerData = new Map();
-    pointerStart = { x: 0, y: 0 };
-    initialPinchDistance = 0;
-    initialPinchScale = 1;
-    liveScale = 1;
-    livePosition = { x: 0, y: 0 };
-    isDragging = false;
-    dragStart = { x: 0, y: 0 };
-    hasDragged = false;
-    wheelSyncTimer = null;
-    wheelListener = null;
-    resizeListener = null;
-    imageLoadListener = null;
-    constructor() {
-        super();
-        afterNextRender(() => {
-            const newIndex = this.gallery.registerItem(this.registeredIndex);
-            this.registeredIndex = newIndex;
-            if (newIndex !== this.index()) {
-                this.index.set(newIndex);
-            }
-            this.setupWheelListener();
-            this.setupResizeListener();
-            this.setupImageLoadListener();
-        });
-        // Watch activeIndex to recalculate item size
-        effect(() => {
-            const activeIndex = this.gallery.activeIndex();
-            const idx = this.index();
-            if (activeIndex === idx) {
-                this.calculateItemSize();
-            }
-        });
-        // Watch rotation changes to recalculate item size
-        effect(() => {
-            this.rotation(); // track rotation
-            const activeIndex = this.gallery.activeIndex();
-            const idx = this.index();
-            if (activeIndex === idx) {
-                this.calculateItemSize();
-            }
-        });
-        // Watch fullscreen changes to recalculate item size
-        effect(() => {
-            this.gallery.isFullscreen(); // track fullscreen
-            const activeIndex = this.gallery.activeIndex();
-            const idx = this.index();
-            if (activeIndex === idx) {
-                this.calculateItemSize();
-            }
-        });
-        // Watch pendingAction and execute on active item
-        effect(() => {
-            const action = this.gallery.pendingAction();
-            if (!action || !this.isActive())
-                return;
-            switch (action.type) {
-                case 'zoom-in':
-                    this.zoomIn();
-                    break;
-                case 'zoom-out':
-                    this.zoomOut();
-                    break;
-                case 'rotate-left':
-                    this.rotateLeft();
-                    break;
-                case 'rotate-right':
-                    this.rotateRight();
-                    break;
-                case 'flip-x':
-                    this.flipX();
-                    break;
-                case 'flip-y':
-                    this.flipY();
-                    break;
-                case 'download':
-                    this.download();
-                    break;
-            }
-            this.gallery.clearPendingAction();
-        });
-        // Report item state to gallery
-        effect(() => {
-            const active = this.isActive();
-            const s = this.scale();
-            const r = this.rotation();
-            const f = this.flip();
-            const ns = this.normalScale();
-            if (active) {
-                this.gallery.reportItemState({
-                    zoomed: s > ns,
-                    rotated: r !== 0,
-                    flipped: f.x === -1 || f.y === -1,
-                    scale: s,
-                    rotation: r,
-                    flip: f
-                });
-            }
-        });
-        // Sync liveScale/livePosition with signals (for toolbar-triggered changes)
-        effect(() => {
-            this.liveScale = this.scale();
-        });
-        effect(() => {
-            const p = this.position();
-            this.livePosition = { x: p.x, y: p.y };
-        });
-        // Reset position when scale <= 1
-        effect(() => {
-            if (this.scale() <= 1) {
-                this.position.set({ x: 0, y: 0 });
-            }
-        });
-        this._destroyRef.onDestroy(() => {
-            this.wheelListener?.();
-            this.resizeListener?.();
-            this.imageLoadListener?.();
-            if (this.rotateTimer) {
-                clearTimeout(this.rotateTimer);
-            }
-            if (this.wheelSyncTimer) {
-                clearTimeout(this.wheelSyncTimer);
-            }
-        });
-    }
-    rotateTimer = null;
-    markRotating() {
-        this.isRotating.set(true);
-        const el = this.$el;
-        if (el)
-            el.style.transition = '';
-        if (this.rotateTimer)
-            clearTimeout(this.rotateTimer);
-        this.rotateTimer = setTimeout(() => this.isRotating.set(false), 300);
-    }
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    setupImageLoadListener() {
-        const el = this.$el;
-        const imageElement = el.querySelector('img');
-        if (!imageElement)
-            return;
-        if (imageElement.complete && imageElement.naturalWidth > 0) {
-            this.calculateItemSize();
-        }
-        const handler = () => {
-            this.calculateItemSize();
-        };
-        imageElement.addEventListener('load', handler);
-        this.imageLoadListener = () => imageElement.removeEventListener('load', handler);
-    }
-    setupWheelListener() {
-        const el = this.$el;
-        const handler = (e) => {
-            if (!e.ctrlKey || !this.isActive())
-                return;
-            e.preventDefault();
-            el.style.transition = 'none';
-            const delta = -e.deltaY;
-            const scaleFactor = 1 + delta * 0.01;
-            const newScale = Math.max(this.normalScale(), Math.min(this.zoomedScale(), this.liveScale * scaleFactor));
-            const constraints = this.calculateConstraints(newScale);
-            const constrainedX = Math.max(constraints.minX, Math.min(constraints.maxX, this.livePosition.x));
-            const constrainedY = Math.max(constraints.minY, Math.min(constraints.maxY, this.livePosition.y));
-            this.liveScale = newScale;
-            this.livePosition = { x: constrainedX, y: constrainedY };
-            el.style.setProperty('--px-scale', `${newScale}`);
-            el.style.setProperty('--px-position-x', `${constrainedX}px`);
-            el.style.setProperty('--px-position-y', `${constrainedY}px`);
-            if (this.wheelSyncTimer) {
-                clearTimeout(this.wheelSyncTimer);
-            }
-            this.wheelSyncTimer = setTimeout(() => {
-                el.style.transition = '';
-                el.style.cursor = this.liveScale > this.normalScale() ? 'zoom-out' : 'zoom-in';
-                this.scale.set(this.liveScale);
-                this.position.set(this.livePosition);
-                this.wheelSyncTimer = null;
-            }, 150);
-        };
-        el.addEventListener('wheel', handler, { passive: false });
-        this.wheelListener = () => el.removeEventListener('wheel', handler);
-    }
-    setupResizeListener() {
-        const handler = () => {
-            if (this.gallery.activeIndex() === this.index()) {
-                this.calculateItemSize();
-            }
-        };
-        window.addEventListener('resize', handler);
-        this.resizeListener = () => window.removeEventListener('resize', handler);
-    }
-    calculateItemSize() {
-        const contentEl = this.gallery.contentEl();
-        const el = this.$el;
-        if (!contentEl || !el)
-            return;
-        const contentRect = contentEl.getBoundingClientRect();
-        const imageElement = el.firstElementChild;
-        if (!imageElement)
-            return;
-        let naturalWidth = imageElement.naturalWidth || imageElement.offsetWidth;
-        let naturalHeight = imageElement.naturalHeight || imageElement.offsetHeight;
-        if (naturalWidth === 0 || naturalHeight === 0)
-            return;
-        const isRotated = Math.abs(this.rotation()) % 180 === 90;
-        if (isRotated) {
-            [naturalWidth, naturalHeight] = [naturalHeight, naturalWidth];
-        }
-        const naturalAspectRatio = naturalWidth / naturalHeight;
-        const contentAspectRatio = contentRect.width / contentRect.height;
-        let targetWidth, targetHeight;
-        if (naturalAspectRatio > contentAspectRatio) {
-            targetWidth = Math.min(contentRect.width * 0.99, naturalWidth);
-            targetHeight = targetWidth / naturalAspectRatio;
-        }
-        else {
-            targetHeight = Math.min(contentRect.height * 0.99, naturalHeight);
-            targetWidth = targetHeight * naturalAspectRatio;
-        }
-        if (isRotated) {
-            imageElement.style.width = `${targetHeight}px`;
-            imageElement.style.height = `${targetWidth}px`;
-            el.style.width = `${targetHeight > 0 ? targetHeight : 'auto'}px`;
-            el.style.height = `${targetWidth > 0 ? targetWidth : 'auto'}px`;
-        }
-        else {
-            imageElement.style.width = `${targetWidth}px`;
-            imageElement.style.height = `${targetHeight}px`;
-            el.style.width = `${targetWidth > 0 ? targetWidth : 'auto'}px`;
-            el.style.height = `${targetHeight > 0 ? targetHeight : 'auto'}px`;
-        }
-        el.style.aspectRatio = `${naturalWidth / naturalHeight}`;
-    }
-    calculateConstraints(targetScale) {
-        const contentEl = this.gallery.contentEl();
-        const el = this.$el;
-        if (!contentEl || !el)
-            return { minX: 0, maxX: 0, minY: 0, maxY: 0 };
-        const contentRect = contentEl.getBoundingClientRect();
-        const scaleToUse = targetScale !== undefined ? targetScale : this.liveScale;
-        const itemElement = el.firstElementChild;
-        if (!itemElement)
-            return { minX: 0, maxX: 0, minY: 0, maxY: 0 };
-        let originalWidth = itemElement.offsetWidth;
-        let originalHeight = itemElement.offsetHeight;
-        const isRotated = Math.abs(this.rotation()) % 180 === 90;
-        if (isRotated) {
-            [originalWidth, originalHeight] = [originalHeight, originalWidth];
-        }
-        const scaledWidth = originalWidth * scaleToUse;
-        const scaledHeight = originalHeight * scaleToUse;
-        const contentCenterX = contentRect.width / 2;
-        const contentCenterY = contentRect.height / 2;
-        const halfScaledWidth = scaledWidth / 2;
-        const halfScaledHeight = scaledHeight / 2;
-        const maxX = halfScaledWidth > contentCenterX ? halfScaledWidth - contentCenterX : 0;
-        const minX = halfScaledWidth > contentCenterX ? -(halfScaledWidth - contentCenterX) : 0;
-        const maxY = halfScaledHeight > contentCenterY ? halfScaledHeight - contentCenterY : 0;
-        const minY = halfScaledHeight > contentCenterY ? -(halfScaledHeight - contentCenterY) : 0;
-        return { minX, maxX, minY, maxY };
-    }
-    zoomIn() {
-        this.scale.set(this.zoomedScale());
-        const el = this.$el;
-        if (el) {
-            el.style.cursor = 'zoom-out';
-        }
-    }
-    zoomOut() {
-        this.scale.set(this.normalScale());
-        this.position.set({ x: 0, y: 0 });
-        const el = this.$el;
-        if (el) {
-            el.style.cursor = 'zoom-in';
-        }
-    }
-    rotateLeft() {
-        this.markRotating();
-        this.rotation.update((prev) => prev - 90);
-    }
-    rotateRight() {
-        this.markRotating();
-        this.rotation.update((prev) => prev + 90);
-    }
-    flipX() {
-        this.flip.update((prev) => ({ ...prev, x: Math.sign(prev.x) * -1 }));
-    }
-    flipY() {
-        this.flip.update((prev) => ({ ...prev, y: Math.sign(prev.y) * -1 }));
-    }
-    download() {
-        const el = this.$el;
-        if (!el)
-            return;
-        const imageElement = el.querySelector('img');
-        if (!imageElement || !imageElement.src)
-            return;
-        const link = document.createElement('a');
-        link.href = imageElement.src;
-        const urlParts = imageElement.src.split('/');
-        const filename = urlParts[urlParts.length - 1] || 'image.jpg';
-        link.download = filename;
-        link.target = '_blank';
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-    }
-    handleClick(e) {
-        if (this.hasDragged) {
-            this.hasDragged = false;
-            return;
-        }
-        const el = this.$el;
-        if (this.liveScale === this.normalScale()) {
-            if (el) {
-                const itemRect = el.getBoundingClientRect();
-                const itemCenterX = itemRect.width / 2;
-                const itemCenterY = itemRect.height / 2;
-                const clickX = e.clientX - itemRect.left;
-                const clickY = e.clientY - itemRect.top;
-                const offsetX = itemCenterX - clickX;
-                const offsetY = itemCenterY - clickY;
-                const zoomedScale = this.zoomedScale();
-                const zoomOffsetX = offsetX * (zoomedScale - 1);
-                const zoomOffsetY = offsetY * (zoomedScale - 1);
-                const constraints = this.calculateConstraints(zoomedScale);
-                const constrainedX = Math.max(constraints.minX, Math.min(constraints.maxX, zoomOffsetX));
-                const constrainedY = Math.max(constraints.minY, Math.min(constraints.maxY, zoomOffsetY));
-                this.position.set({ x: constrainedX, y: constrainedY });
-            }
-            this.zoomIn();
-        }
-        else {
-            this.zoomOut();
-        }
-    }
-    handleDragStart(e) {
-        e.preventDefault();
-    }
-    handlePointerDown(e) {
-        e.currentTarget.setPointerCapture(e.pointerId);
-        this.pointerData.set(e.pointerId, { x: e.clientX, y: e.clientY });
-        this.pointerStart = { x: e.clientX, y: e.clientY };
-        if (e.pointerType === 'touch' && this.pointerData.size >= 2) {
-            this.isDragging = false;
-            this.initialPinchDistance = 0;
-            this.initialPinchScale = this.liveScale;
-        }
-        else if (this.liveScale > 1) {
-            if (e.pointerType === 'mouse' || (e.pointerType === 'touch' && this.pointerData.size === 1)) {
-                this.isDragging = true;
-                this.dragStart = { x: e.clientX - this.livePosition.x, y: e.clientY - this.livePosition.y };
-                this.hasDragged = false;
-            }
-        }
-    }
-    handlePointerMove(e) {
-        if (!this.pointerData.has(e.pointerId))
-            return;
-        const el = this.$el;
-        if (!el)
-            return;
-        el.style.transition = 'none';
-        if (e.pointerType === 'mouse' && !el.style.cursor) {
-            el.style.cursor = this.liveScale > this.normalScale() ? 'zoom-out' : 'zoom-in';
-        }
-        this.pointerData.set(e.pointerId, { x: e.clientX, y: e.clientY });
-        const pointers = Array.from(this.pointerData.values());
-        if (pointers.length === 2) {
-            const [p1, p2] = pointers;
-            const distance = Math.hypot(p2.x - p1.x, p2.y - p1.y);
-            this.hasDragged = true;
-            if (this.initialPinchDistance === 0) {
-                this.initialPinchDistance = distance;
-                this.initialPinchScale = this.liveScale;
-            }
-            else {
-                const ratio = distance / this.initialPinchDistance;
-                const newScale = Math.max(this.normalScale(), Math.min(this.zoomedScale(), this.initialPinchScale * ratio));
-                const constraints = this.calculateConstraints(newScale);
-                const constrainedX = Math.max(constraints.minX, Math.min(constraints.maxX, this.livePosition.x));
-                const constrainedY = Math.max(constraints.minY, Math.min(constraints.maxY, this.livePosition.y));
-                this.liveScale = newScale;
-                this.livePosition = { x: constrainedX, y: constrainedY };
-                el.style.setProperty('--px-scale', `${newScale}`);
-                el.style.setProperty('--px-position-x', `${constrainedX}px`);
-                el.style.setProperty('--px-position-y', `${constrainedY}px`);
-            }
-        }
-        else if (pointers.length === 1 && this.isDragging) {
-            const pointer = pointers[0];
-            const newX = pointer.x - this.dragStart.x;
-            const newY = pointer.y - this.dragStart.y;
-            const constraints = this.calculateConstraints(this.liveScale);
-            const computedX = Math.max(constraints.minX, Math.min(constraints.maxX, newX));
-            const computedY = Math.max(constraints.minY, Math.min(constraints.maxY, newY));
-            this.livePosition = { x: computedX, y: computedY };
-            el.style.setProperty('--px-position-x', `${computedX}px`);
-            el.style.setProperty('--px-position-y', `${computedY}px`);
-            const distFromStart = Math.hypot(pointer.x - this.pointerStart.x, pointer.y - this.pointerStart.y);
-            if (distFromStart > 5) {
-                this.hasDragged = true;
-            }
-        }
-    }
-    handlePointerUp(e) {
-        const el = this.$el;
-        if (!el)
-            return;
-        el.style.transition = '';
-        if (e.pointerType === 'mouse') {
-            el.style.cursor = this.liveScale > this.normalScale() ? 'zoom-out' : 'zoom-in';
-        }
-        e.currentTarget.releasePointerCapture(e.pointerId);
-        this.pointerData.delete(e.pointerId);
-        if (this.pointerData.size < 2) {
-            this.initialPinchDistance = 0;
-            this.initialPinchScale = 1;
-        }
-        if (this.pointerData.size === 0) {
-            this.isDragging = false;
-            this.scale.set(this.liveScale);
-            this.position.set(this.livePosition);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: GalleryItem, isStandalone: true, selector: "p-gallery-item", inputs: { normalScale: { classPropertyName: "normalScale", publicName: "normalScale", isSignal: true, isRequired: false, transformFunction: null }, zoomedScale: { classPropertyName: "zoomedScale", publicName: "zoomedScale", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClick($event)", "pointerdown": "handlePointerDown($event)", "pointermove": "handlePointerMove($event)", "pointerup": "handlePointerUp($event)", "dragstart": "handleDragStart($event)" }, properties: { "class": "gallery.cx('item')", "attr.data-scope": "'gallery'", "attr.data-part": "'item'", "attr.data-index": "index()", "attr.data-active": "isActive() ? '' : null", "attr.data-rotating": "isRotating() ? '' : null", "style.--px-position-x": "stylePositionX()", "style.--px-position-y": "stylePositionY()", "style.--px-scale": "scale()", "style.--px-rotation": "styleRotation()", "style.--px-flip-x": "styleFlipX()", "style.--px-flip-y": "styleFlipY()" } }, providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryItem }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryItem, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'p-gallery-item',
-                    standalone: true,
-                    imports: [BindModule],
-                    template: `<ng-content></ng-content>`,
-                    providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryItem }],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: {
-                        '[class]': "gallery.cx('item')",
-                        '[attr.data-scope]': "'gallery'",
-                        '[attr.data-part]': "'item'",
-                        '[attr.data-index]': 'index()',
-                        '[attr.data-active]': "isActive() ? '' : null",
-                        '[attr.data-rotating]': "isRotating() ? '' : null",
-                        '[style.--px-position-x]': 'stylePositionX()',
-                        '[style.--px-position-y]': 'stylePositionY()',
-                        '[style.--px-scale]': 'scale()',
-                        '[style.--px-rotation]': 'styleRotation()',
-                        '[style.--px-flip-x]': 'styleFlipX()',
-                        '[style.--px-flip-y]': 'styleFlipY()',
-                        '(click)': 'handleClick($event)',
-                        '(pointerdown)': 'handlePointerDown($event)',
-                        '(pointermove)': 'handlePointerMove($event)',
-                        '(pointerup)': 'handlePointerUp($event)',
-                        '(dragstart)': 'handleDragStart($event)'
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }], ctorParameters: () => [], propDecorators: { normalScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "normalScale", required: false }] }], zoomedScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomedScale", required: false }] }] } });
-
-/**
- * GalleryHeader represents the header section of the gallery.
- * @group Components
- */
-class GalleryHeader extends BaseComponent {
-    componentName = 'GalleryHeader';
-    bindDirectiveInstance = inject(Bind, { self: true });
-    gallery = inject(Gallery);
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryHeader, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: GalleryHeader, isStandalone: true, selector: "p-gallery-header", host: { properties: { "class": "gallery.cx('header')", "attr.data-scope": "'gallery'", "attr.data-part": "'header'" } }, providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryHeader }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryHeader, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'p-gallery-header',
-                    standalone: true,
-                    imports: [BindModule],
-                    template: `<ng-content></ng-content>`,
-                    providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryHeader }],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: {
-                        '[class]': "gallery.cx('header')",
-                        '[attr.data-scope]': "'gallery'",
-                        '[attr.data-part]': "'header'"
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }] });
-
-/**
- * GalleryContent represents the main content area of the gallery.
- * @group Components
- */
-class GalleryContent extends BaseComponent {
-    componentName = 'GalleryContent';
-    bindDirectiveInstance = inject(Bind, { self: true });
-    gallery = inject(Gallery);
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    constructor() {
-        super();
-        afterNextRender(() => {
-            this.gallery.setContentEl(this.$el);
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: GalleryContent, isStandalone: true, selector: "p-gallery-content", host: { properties: { "class": "gallery.cx('content')", "attr.data-scope": "'gallery'", "attr.data-part": "'content'" } }, providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryContent }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryContent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'p-gallery-content',
-                    standalone: true,
-                    imports: [BindModule],
-                    template: `<ng-content></ng-content>`,
-                    providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryContent }],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: {
-                        '[class]': "gallery.cx('content')",
-                        '[attr.data-scope]': "'gallery'",
-                        '[attr.data-part]': "'content'"
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }], ctorParameters: () => [] });
-
-/**
- * GalleryFooter represents the footer section of the gallery.
- * @group Components
- */
-class GalleryFooter extends BaseComponent {
-    componentName = 'GalleryFooter';
-    bindDirectiveInstance = inject(Bind, { self: true });
-    gallery = inject(Gallery);
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryFooter, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: GalleryFooter, isStandalone: true, selector: "p-gallery-footer", host: { properties: { "class": "gallery.cx('footer')", "attr.data-scope": "'gallery'", "attr.data-part": "'footer'" } }, providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryFooter }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryFooter, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'p-gallery-footer',
-                    standalone: true,
-                    imports: [BindModule],
-                    template: `<ng-content></ng-content>`,
-                    providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryFooter }],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: {
-                        '[class]': "gallery.cx('footer')",
-                        '[attr.data-scope]': "'gallery'",
-                        '[attr.data-part]': "'footer'"
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }] });
-
-/**
- * GalleryBackdrop represents the backdrop element for fullscreen mode.
- * @group Components
- */
-class GalleryBackdrop extends BaseComponent {
-    componentName = 'GalleryBackdrop';
-    bindDirectiveInstance = inject(Bind, { self: true });
-    gallery = inject(Gallery);
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryBackdrop, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: GalleryBackdrop, isStandalone: true, selector: "p-gallery-backdrop", host: { properties: { "class": "gallery.cx('backdrop')", "attr.data-scope": "'gallery'", "attr.data-part": "'backdrop'" } }, providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryBackdrop }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryBackdrop, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'p-gallery-backdrop',
-                    standalone: true,
-                    imports: [BindModule],
-                    template: `<ng-content></ng-content>`,
-                    providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryBackdrop }],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: {
-                        '[class]': "gallery.cx('backdrop')",
-                        '[attr.data-scope]': "'gallery'",
-                        '[attr.data-part]': "'backdrop'"
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }] });
-
-/**
- * GalleryToolbar represents the toolbar container.
- * @group Components
- */
-class GalleryToolbar extends BaseComponent {
-    componentName = 'GalleryToolbar';
-    bindDirectiveInstance = inject(Bind, { self: true });
-    gallery = inject(Gallery);
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryToolbar, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: GalleryToolbar, isStandalone: true, selector: "p-gallery-toolbar", host: { properties: { "class": "gallery.cx('toolbar')", "attr.data-scope": "'gallery'", "attr.data-part": "'toolbar'" } }, providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryToolbar }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryToolbar, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'p-gallery-toolbar',
-                    standalone: true,
-                    imports: [BindModule],
-                    template: `<ng-content></ng-content>`,
-                    providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryToolbar }],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: {
-                        '[class]': "gallery.cx('toolbar')",
-                        '[attr.data-scope]': "'gallery'",
-                        '[attr.data-part]': "'toolbar'"
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }] });
-
-/**
- * GalleryToolbarItem represents an individual toolbar item.
- * @group Components
- */
-class GalleryToolbarItem extends BaseComponent {
-    componentName = 'GalleryToolbarItem';
-    bindDirectiveInstance = inject(Bind, { self: true });
-    /**
-     * The action to dispatch when the toolbar item is clicked.
-     * @group Props
-     */
-    action = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "action" }] : /* istanbul ignore next */ []));
-    gallery = inject(Gallery);
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    onClick() {
-        this.gallery.handleClickAction(this.action());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryToolbarItem, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: GalleryToolbarItem, isStandalone: true, selector: "p-gallery-toolbar-item", inputs: { action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class": "gallery.cx('toolbarItem')", "attr.data-scope": "'gallery'", "attr.data-part": "'toolbarItem'" } }, providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryToolbarItem }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryToolbarItem, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'p-gallery-toolbar-item',
-                    standalone: true,
-                    imports: [BindModule],
-                    template: `<ng-content></ng-content>`,
-                    providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryToolbarItem }],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: {
-                        '[class]': "gallery.cx('toolbarItem')",
-                        '[attr.data-scope]': "'gallery'",
-                        '[attr.data-part]': "'toolbarItem'",
-                        '(click)': 'onClick()'
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }], propDecorators: { action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }] } });
-
-/**
- * GalleryPrev represents the previous navigation button.
- * @group Components
- */
-class GalleryPrev extends BaseComponent {
-    componentName = 'GalleryPrev';
-    gallery = inject(Gallery);
-    bindDirectiveInstance = inject(Bind, { self: true });
-    _componentStyle = inject(GalleryStyle);
-    onClick() {
-        this.gallery.handlePrev();
-    }
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryPrev, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: GalleryPrev, isStandalone: true, selector: "[pGalleryPrev]", host: { listeners: { "click": "onClick()" }, properties: { "class": "gallery.cx('prev')", "attr.data-scope": "'gallery'", "attr.data-part": "'prev'" } }, providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryPrev }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryPrev, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[pGalleryPrev]',
-                    standalone: true,
-                    providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryPrev }],
-                    host: {
-                        '[class]': "gallery.cx('prev')",
-                        '[attr.data-scope]': "'gallery'",
-                        '[attr.data-part]': "'prev'",
-                        '(click)': 'onClick()'
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }] });
-
-/**
- * GalleryNext represents the next navigation button.
- * @group Components
- */
-class GalleryNext extends BaseComponent {
-    componentName = 'GalleryNext';
-    gallery = inject(Gallery);
-    bindDirectiveInstance = inject(Bind, { self: true });
-    _componentStyle = inject(GalleryStyle);
-    onClick() {
-        this.gallery.handleNext();
-    }
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryNext, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: GalleryNext, isStandalone: true, selector: "[pGalleryNext]", host: { listeners: { "click": "onClick()" }, properties: { "class": "gallery.cx('next')", "attr.data-scope": "'gallery'", "attr.data-part": "'next'" } }, providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryNext }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryNext, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[pGalleryNext]',
-                    standalone: true,
-                    providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryNext }],
-                    host: {
-                        '[class]': "gallery.cx('next')",
-                        '[attr.data-scope]': "'gallery'",
-                        '[attr.data-part]': "'next'",
-                        '(click)': 'onClick()'
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }] });
-
-/**
- * GalleryZoomIn represents the zoom in action button.
- * @group Components
- */
-class GalleryZoomIn extends BaseComponent {
-    componentName = 'GalleryZoomIn';
-    gallery = inject(Gallery);
-    bindDirectiveInstance = inject(Bind, { self: true });
-    _componentStyle = inject(GalleryStyle);
-    disabledState = computed(() => (this.gallery.activeItemTransform().zoomed ? true : null), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
-    onClick() {
-        this.gallery.handleClickAction('zoomIn');
-    }
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryZoomIn, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: GalleryZoomIn, isStandalone: true, selector: "[pGalleryZoomIn]", host: { listeners: { "click": "onClick()" }, properties: { "class": "gallery.cx('zoomIn')", "attr.data-scope": "'gallery'", "attr.data-part": "'zoomIn'", "attr.data-action": "'zoom-in'", "attr.disabled": "disabledState()" } }, providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryZoomIn }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryZoomIn, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[pGalleryZoomIn]',
-                    standalone: true,
-                    providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryZoomIn }],
-                    host: {
-                        '[class]': "gallery.cx('zoomIn')",
-                        '[attr.data-scope]': "'gallery'",
-                        '[attr.data-part]': "'zoomIn'",
-                        '[attr.data-action]': "'zoom-in'",
-                        '[attr.disabled]': 'disabledState()',
-                        '(click)': 'onClick()'
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }] });
-
-/**
- * GalleryZoomOut represents the zoom out action button.
- * @group Components
- */
-class GalleryZoomOut extends BaseComponent {
-    componentName = 'GalleryZoomOut';
-    gallery = inject(Gallery);
-    bindDirectiveInstance = inject(Bind, { self: true });
-    _componentStyle = inject(GalleryStyle);
-    disabledState = computed(() => (!this.gallery.activeItemTransform().zoomed ? true : null), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
-    onClick() {
-        this.gallery.handleClickAction('zoomOut');
-    }
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryZoomOut, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: GalleryZoomOut, isStandalone: true, selector: "[pGalleryZoomOut]", host: { listeners: { "click": "onClick()" }, properties: { "class": "gallery.cx('zoomOut')", "attr.data-scope": "'gallery'", "attr.data-part": "'zoomOut'", "attr.data-action": "'zoom-out'", "attr.disabled": "disabledState()" } }, providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryZoomOut }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryZoomOut, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[pGalleryZoomOut]',
-                    standalone: true,
-                    providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryZoomOut }],
-                    host: {
-                        '[class]': "gallery.cx('zoomOut')",
-                        '[attr.data-scope]': "'gallery'",
-                        '[attr.data-part]': "'zoomOut'",
-                        '[attr.data-action]': "'zoom-out'",
-                        '[attr.disabled]': 'disabledState()',
-                        '(click)': 'onClick()'
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }] });
-
-/**
- * GalleryZoomToggle represents the zoom toggle action button.
- * @group Components
- */
-class GalleryZoomToggle extends BaseComponent {
-    componentName = 'GalleryZoomToggle';
-    gallery = inject(Gallery);
-    bindDirectiveInstance = inject(Bind, { self: true });
-    _componentStyle = inject(GalleryStyle);
-    onToggle() {
-        this.gallery.handleClickAction(this.gallery.activeItemTransform().zoomed ? 'zoomOut' : 'zoomIn');
-    }
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryZoomToggle, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: GalleryZoomToggle, isStandalone: true, selector: "[pGalleryZoomToggle]", host: { listeners: { "click": "onToggle()" }, properties: { "class": "gallery.cx('zoomToggle')", "attr.data-scope": "'gallery'", "attr.data-part": "'zoomToggle'", "attr.data-action": "'zoom-toggle'" } }, providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryZoomToggle }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryZoomToggle, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[pGalleryZoomToggle]',
-                    standalone: true,
-                    providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryZoomToggle }],
-                    host: {
-                        '[class]': "gallery.cx('zoomToggle')",
-                        '[attr.data-scope]': "'gallery'",
-                        '[attr.data-part]': "'zoomToggle'",
-                        '[attr.data-action]': "'zoom-toggle'",
-                        '(click)': 'onToggle()'
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }] });
-
-/**
- * GalleryRotateLeft represents the rotate left action button.
- * @group Components
- */
-class GalleryRotateLeft extends BaseComponent {
-    componentName = 'GalleryRotateLeft';
-    gallery = inject(Gallery);
-    bindDirectiveInstance = inject(Bind, { self: true });
-    _componentStyle = inject(GalleryStyle);
-    onClick() {
-        this.gallery.handleClickAction('rotateLeft');
-    }
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryRotateLeft, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: GalleryRotateLeft, isStandalone: true, selector: "[pGalleryRotateLeft]", host: { listeners: { "click": "onClick()" }, properties: { "class": "gallery.cx('rotateLeft')", "attr.data-scope": "'gallery'", "attr.data-part": "'rotateLeft'", "attr.data-action": "'rotate-left'" } }, providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryRotateLeft }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryRotateLeft, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[pGalleryRotateLeft]',
-                    standalone: true,
-                    providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryRotateLeft }],
-                    host: {
-                        '[class]': "gallery.cx('rotateLeft')",
-                        '[attr.data-scope]': "'gallery'",
-                        '[attr.data-part]': "'rotateLeft'",
-                        '[attr.data-action]': "'rotate-left'",
-                        '(click)': 'onClick()'
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }] });
-
-/**
- * GalleryRotateRight represents the rotate right action button.
- * @group Components
- */
-class GalleryRotateRight extends BaseComponent {
-    componentName = 'GalleryRotateRight';
-    gallery = inject(Gallery);
-    bindDirectiveInstance = inject(Bind, { self: true });
-    _componentStyle = inject(GalleryStyle);
-    onClick() {
-        this.gallery.handleClickAction('rotateRight');
-    }
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryRotateRight, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: GalleryRotateRight, isStandalone: true, selector: "[pGalleryRotateRight]", host: { listeners: { "click": "onClick()" }, properties: { "class": "gallery.cx('rotateRight')", "attr.data-scope": "'gallery'", "attr.data-part": "'rotateRight'", "attr.data-action": "'rotate-right'" } }, providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryRotateRight }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryRotateRight, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[pGalleryRotateRight]',
-                    standalone: true,
-                    providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryRotateRight }],
-                    host: {
-                        '[class]': "gallery.cx('rotateRight')",
-                        '[attr.data-scope]': "'gallery'",
-                        '[attr.data-part]': "'rotateRight'",
-                        '[attr.data-action]': "'rotate-right'",
-                        '(click)': 'onClick()'
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }] });
-
-/**
- * GalleryFlipX represents the horizontal flip action button.
- * @group Components
- */
-class GalleryFlipX extends BaseComponent {
-    componentName = 'GalleryFlipX';
-    gallery = inject(Gallery);
-    bindDirectiveInstance = inject(Bind, { self: true });
-    _componentStyle = inject(GalleryStyle);
-    onClick() {
-        this.gallery.handleClickAction('flipX');
-    }
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryFlipX, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: GalleryFlipX, isStandalone: true, selector: "[pGalleryFlipX]", host: { listeners: { "click": "onClick()" }, properties: { "class": "gallery.cx('flipX')", "attr.data-scope": "'gallery'", "attr.data-part": "'flipX'", "attr.data-action": "'flip-x'" } }, providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryFlipX }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryFlipX, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[pGalleryFlipX]',
-                    standalone: true,
-                    providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryFlipX }],
-                    host: {
-                        '[class]': "gallery.cx('flipX')",
-                        '[attr.data-scope]': "'gallery'",
-                        '[attr.data-part]': "'flipX'",
-                        '[attr.data-action]': "'flip-x'",
-                        '(click)': 'onClick()'
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }] });
-
-/**
- * GalleryFlipY represents the vertical flip action button.
- * @group Components
- */
-class GalleryFlipY extends BaseComponent {
-    componentName = 'GalleryFlipY';
-    gallery = inject(Gallery);
-    bindDirectiveInstance = inject(Bind, { self: true });
-    _componentStyle = inject(GalleryStyle);
-    onClick() {
-        this.gallery.handleClickAction('flipY');
-    }
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryFlipY, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: GalleryFlipY, isStandalone: true, selector: "[pGalleryFlipY]", host: { listeners: { "click": "onClick()" }, properties: { "class": "gallery.cx('flipY')", "attr.data-scope": "'gallery'", "attr.data-part": "'flipY'", "attr.data-action": "'flip-y'" } }, providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryFlipY }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryFlipY, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[pGalleryFlipY]',
-                    standalone: true,
-                    providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryFlipY }],
-                    host: {
-                        '[class]': "gallery.cx('flipY')",
-                        '[attr.data-scope]': "'gallery'",
-                        '[attr.data-part]': "'flipY'",
-                        '[attr.data-action]': "'flip-y'",
-                        '(click)': 'onClick()'
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }] });
-
-/**
- * GalleryFullScreen represents the fullscreen toggle button.
- * @group Components
- */
-class GalleryFullScreen extends BaseComponent {
-    componentName = 'GalleryFullScreen';
-    gallery = inject(Gallery);
-    bindDirectiveInstance = inject(Bind, { self: true });
-    _componentStyle = inject(GalleryStyle);
-    dataFullscreen = computed(() => (this.gallery.isFullscreen() ? '' : null), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dataFullscreen" }] : /* istanbul ignore next */ []));
-    onClick() {
-        this.gallery.handleClickAction('toggleFullScreen');
-    }
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryFullScreen, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: GalleryFullScreen, isStandalone: true, selector: "[pGalleryFullScreen]", host: { listeners: { "click": "onClick()" }, properties: { "class": "gallery.cx('fullScreen')", "attr.data-scope": "'gallery'", "attr.data-part": "'fullScreen'", "attr.data-action": "'fullscreen'", "attr.data-fullscreen": "dataFullscreen()" } }, providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryFullScreen }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryFullScreen, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[pGalleryFullScreen]',
-                    standalone: true,
-                    providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryFullScreen }],
-                    host: {
-                        '[class]': "gallery.cx('fullScreen')",
-                        '[attr.data-scope]': "'gallery'",
-                        '[attr.data-part]': "'fullScreen'",
-                        '[attr.data-action]': "'fullscreen'",
-                        '[attr.data-fullscreen]': 'dataFullscreen()',
-                        '(click)': 'onClick()'
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }] });
-
-/**
- * GalleryDownload represents the download action button.
- * @group Components
- */
-class GalleryDownload extends BaseComponent {
-    componentName = 'GalleryDownload';
-    gallery = inject(Gallery);
-    bindDirectiveInstance = inject(Bind, { self: true });
-    _componentStyle = inject(GalleryStyle);
-    onClick() {
-        this.gallery.handleClickAction('download');
-    }
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryDownload, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: GalleryDownload, isStandalone: true, selector: "[pGalleryDownload]", host: { listeners: { "click": "onClick()" }, properties: { "class": "gallery.cx('download')", "attr.data-scope": "'gallery'", "attr.data-part": "'download'", "attr.data-action": "'download'" } }, providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryDownload }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryDownload, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[pGalleryDownload]',
-                    standalone: true,
-                    providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryDownload }],
-                    host: {
-                        '[class]': "gallery.cx('download')",
-                        '[attr.data-scope]': "'gallery'",
-                        '[attr.data-part]': "'download'",
-                        '[attr.data-action]': "'download'",
-                        '(click)': 'onClick()'
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }] });
-
-/**
- * GalleryThumbnailItem represents an individual thumbnail item.
- * Exposes its content as a TemplateRef so GalleryThumbnail can render it inside a carousel item.
- * @group Components
- */
-class GalleryThumbnailItem {
-    /**
-     * The index of the thumbnail item.
-     * @group Props
-     */
-    index = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "index" }] : /* istanbul ignore next */ []));
-    gallery = inject(Gallery);
-    templateRef = viewChild('content', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
-    isActive = computed(() => {
-        const idx = this.index();
-        return idx !== undefined && this.gallery.activeIndex() === idx;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
-    hostClass = computed(() => this.gallery.cx('thumbnailItem'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
-    dataActive = computed(() => (this.isActive() ? '' : null), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dataActive" }] : /* istanbul ignore next */ []));
-    onClick() {
-        const idx = this.index();
-        if (idx !== undefined) {
-            this.gallery.selectItem(idx);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryThumbnailItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.5", type: GalleryThumbnailItem, isStandalone: true, selector: "p-gallery-thumbnail-item", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `
+var GalleryItem = class GalleryItem extends BaseComponent {
+	componentName = "GalleryItem";
+	bindDirectiveInstance = inject(Bind, { self: true });
+	normalScale = input(1, {
+		...ngDevMode ? { debugName: "normalScale" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	zoomedScale = input(3, {
+		...ngDevMode ? { debugName: "zoomedScale" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	gallery = inject(Gallery);
+	_destroyRef = inject(DestroyRef);
+	index = signal(-1, ...ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []);
+	isActive = computed(() => this.gallery.activeIndex() === this.index(), ...ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []);
+	dataActive = computed(() => this.isActive() ? "true" : "false", ...ngDevMode ? [{ debugName: "dataActive" }] : /* istanbul ignore next */ []);
+	stylePositionX = computed(() => this.position().x + "px", ...ngDevMode ? [{ debugName: "stylePositionX" }] : /* istanbul ignore next */ []);
+	stylePositionY = computed(() => this.position().y + "px", ...ngDevMode ? [{ debugName: "stylePositionY" }] : /* istanbul ignore next */ []);
+	styleRotation = computed(() => this.rotation() + "deg", ...ngDevMode ? [{ debugName: "styleRotation" }] : /* istanbul ignore next */ []);
+	styleFlipX = computed(() => this.flip().x, ...ngDevMode ? [{ debugName: "styleFlipX" }] : /* istanbul ignore next */ []);
+	styleFlipY = computed(() => this.flip().y, ...ngDevMode ? [{ debugName: "styleFlipY" }] : /* istanbul ignore next */ []);
+	position = signal({
+		x: 0,
+		y: 0
+	}, ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	scale = signal(1, ...ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []);
+	rotation = signal(0, ...ngDevMode ? [{ debugName: "rotation" }] : /* istanbul ignore next */ []);
+	isRotating = signal(false, ...ngDevMode ? [{ debugName: "isRotating" }] : /* istanbul ignore next */ []);
+	flip = signal({
+		x: 1,
+		y: 1
+	}, ...ngDevMode ? [{ debugName: "flip" }] : /* istanbul ignore next */ []);
+	registeredIndex = null;
+	pointerData = /* @__PURE__ */ new Map();
+	pointerStart = {
+		x: 0,
+		y: 0
+	};
+	initialPinchDistance = 0;
+	initialPinchScale = 1;
+	liveScale = 1;
+	livePosition = {
+		x: 0,
+		y: 0
+	};
+	isDragging = false;
+	dragStart = {
+		x: 0,
+		y: 0
+	};
+	hasDragged = false;
+	wheelSyncTimer = null;
+	wheelListener = null;
+	resizeListener = null;
+	imageLoadListener = null;
+	constructor() {
+		super();
+		afterNextRender(() => {
+			const newIndex = this.gallery.registerItem(this.registeredIndex);
+			this.registeredIndex = newIndex;
+			if (newIndex !== this.index()) this.index.set(newIndex);
+			this.setupWheelListener();
+			this.setupResizeListener();
+			this.setupImageLoadListener();
+		});
+		effect(() => {
+			if (this.gallery.activeIndex() === this.index()) this.calculateItemSize();
+		});
+		effect(() => {
+			this.rotation();
+			if (this.gallery.activeIndex() === this.index()) this.calculateItemSize();
+		});
+		effect(() => {
+			this.gallery.isFullscreen();
+			if (this.gallery.activeIndex() === this.index()) this.calculateItemSize();
+		});
+		effect(() => {
+			const action = this.gallery.pendingAction();
+			if (!action || !this.isActive()) return;
+			switch (action.type) {
+				case "zoom-in":
+					this.zoomIn();
+					break;
+				case "zoom-out":
+					this.zoomOut();
+					break;
+				case "rotate-left":
+					this.rotateLeft();
+					break;
+				case "rotate-right":
+					this.rotateRight();
+					break;
+				case "flip-x":
+					this.flipX();
+					break;
+				case "flip-y":
+					this.flipY();
+					break;
+				case "download": this.download();
+			}
+			this.gallery.clearPendingAction();
+		});
+		effect(() => {
+			const active = this.isActive();
+			const s = this.scale();
+			const r = this.rotation();
+			const f = this.flip();
+			const ns = this.normalScale();
+			if (active) this.gallery.reportItemState({
+				zoomed: s > ns,
+				rotated: r !== 0,
+				flipped: f.x === -1 || f.y === -1,
+				scale: s,
+				rotation: r,
+				flip: f
+			});
+		});
+		effect(() => {
+			this.liveScale = this.scale();
+		});
+		effect(() => {
+			const p = this.position();
+			this.livePosition = {
+				x: p.x,
+				y: p.y
+			};
+		});
+		effect(() => {
+			if (this.scale() <= 1) this.position.set({
+				x: 0,
+				y: 0
+			});
+		});
+		this._destroyRef.onDestroy(() => {
+			this.wheelListener?.();
+			this.resizeListener?.();
+			this.imageLoadListener?.();
+			if (this.rotateTimer) clearTimeout(this.rotateTimer);
+			if (this.wheelSyncTimer) clearTimeout(this.wheelSyncTimer);
+		});
+	}
+	rotateTimer = null;
+	markRotating() {
+		this.isRotating.set(true);
+		const el = this.$el;
+		if (el) el.style.transition = "";
+		if (this.rotateTimer) clearTimeout(this.rotateTimer);
+		this.rotateTimer = setTimeout(() => this.isRotating.set(false), 300);
+	}
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	setupImageLoadListener() {
+		const imageElement = this.$el.querySelector("img");
+		if (!imageElement) return;
+		if (imageElement.complete && imageElement.naturalWidth > 0) this.calculateItemSize();
+		const handler = () => {
+			this.calculateItemSize();
+		};
+		imageElement.addEventListener("load", handler);
+		this.imageLoadListener = () => imageElement.removeEventListener("load", handler);
+	}
+	setupWheelListener() {
+		const el = this.$el;
+		const handler = (e) => {
+			if (!e.ctrlKey || !this.isActive()) return;
+			e.preventDefault();
+			el.style.transition = "none";
+			const scaleFactor = 1 + -e.deltaY * .01;
+			const newScale = Math.max(this.normalScale(), Math.min(this.zoomedScale(), this.liveScale * scaleFactor));
+			const constraints = this.calculateConstraints(newScale);
+			const constrainedX = Math.max(constraints.minX, Math.min(constraints.maxX, this.livePosition.x));
+			const constrainedY = Math.max(constraints.minY, Math.min(constraints.maxY, this.livePosition.y));
+			this.liveScale = newScale;
+			this.livePosition = {
+				x: constrainedX,
+				y: constrainedY
+			};
+			el.style.setProperty("--px-scale", `${newScale}`);
+			el.style.setProperty("--px-position-x", `${constrainedX}px`);
+			el.style.setProperty("--px-position-y", `${constrainedY}px`);
+			if (this.wheelSyncTimer) clearTimeout(this.wheelSyncTimer);
+			this.wheelSyncTimer = setTimeout(() => {
+				el.style.transition = "";
+				el.style.cursor = this.liveScale > this.normalScale() ? "zoom-out" : "zoom-in";
+				this.scale.set(this.liveScale);
+				this.position.set(this.livePosition);
+				this.wheelSyncTimer = null;
+			}, 150);
+		};
+		el.addEventListener("wheel", handler, { passive: false });
+		this.wheelListener = () => el.removeEventListener("wheel", handler);
+	}
+	setupResizeListener() {
+		const handler = () => {
+			if (this.gallery.activeIndex() === this.index()) this.calculateItemSize();
+		};
+		window.addEventListener("resize", handler);
+		this.resizeListener = () => window.removeEventListener("resize", handler);
+	}
+	calculateItemSize() {
+		const contentEl = this.gallery.contentEl();
+		const el = this.$el;
+		if (!contentEl || !el) return;
+		const contentRect = contentEl.getBoundingClientRect();
+		const imageElement = el.firstElementChild;
+		if (!imageElement) return;
+		let naturalWidth = imageElement.naturalWidth || imageElement.offsetWidth;
+		let naturalHeight = imageElement.naturalHeight || imageElement.offsetHeight;
+		if (naturalWidth === 0 || naturalHeight === 0) return;
+		const isRotated = Math.abs(this.rotation()) % 180 === 90;
+		if (isRotated) [naturalWidth, naturalHeight] = [naturalHeight, naturalWidth];
+		const naturalAspectRatio = naturalWidth / naturalHeight;
+		const contentAspectRatio = contentRect.width / contentRect.height;
+		let targetWidth, targetHeight;
+		if (naturalAspectRatio > contentAspectRatio) {
+			targetWidth = Math.min(contentRect.width * .99, naturalWidth);
+			targetHeight = targetWidth / naturalAspectRatio;
+		} else {
+			targetHeight = Math.min(contentRect.height * .99, naturalHeight);
+			targetWidth = targetHeight * naturalAspectRatio;
+		}
+		if (isRotated) {
+			imageElement.style.width = `${targetHeight}px`;
+			imageElement.style.height = `${targetWidth}px`;
+			el.style.width = `${targetHeight > 0 ? targetHeight : "auto"}px`;
+			el.style.height = `${targetWidth > 0 ? targetWidth : "auto"}px`;
+		} else {
+			imageElement.style.width = `${targetWidth}px`;
+			imageElement.style.height = `${targetHeight}px`;
+			el.style.width = `${targetWidth > 0 ? targetWidth : "auto"}px`;
+			el.style.height = `${targetHeight > 0 ? targetHeight : "auto"}px`;
+		}
+		el.style.aspectRatio = `${naturalWidth / naturalHeight}`;
+	}
+	calculateConstraints(targetScale) {
+		const contentEl = this.gallery.contentEl();
+		const el = this.$el;
+		if (!contentEl || !el) return {
+			minX: 0,
+			maxX: 0,
+			minY: 0,
+			maxY: 0
+		};
+		const contentRect = contentEl.getBoundingClientRect();
+		const scaleToUse = targetScale !== void 0 ? targetScale : this.liveScale;
+		const itemElement = el.firstElementChild;
+		if (!itemElement) return {
+			minX: 0,
+			maxX: 0,
+			minY: 0,
+			maxY: 0
+		};
+		let originalWidth = itemElement.offsetWidth;
+		let originalHeight = itemElement.offsetHeight;
+		if (Math.abs(this.rotation()) % 180 === 90) [originalWidth, originalHeight] = [originalHeight, originalWidth];
+		const scaledWidth = originalWidth * scaleToUse;
+		const scaledHeight = originalHeight * scaleToUse;
+		const contentCenterX = contentRect.width / 2;
+		const contentCenterY = contentRect.height / 2;
+		const halfScaledWidth = scaledWidth / 2;
+		const halfScaledHeight = scaledHeight / 2;
+		const maxX = halfScaledWidth > contentCenterX ? halfScaledWidth - contentCenterX : 0;
+		const minX = halfScaledWidth > contentCenterX ? -(halfScaledWidth - contentCenterX) : 0;
+		const maxY = halfScaledHeight > contentCenterY ? halfScaledHeight - contentCenterY : 0;
+		return {
+			minX,
+			maxX,
+			minY: halfScaledHeight > contentCenterY ? -(halfScaledHeight - contentCenterY) : 0,
+			maxY
+		};
+	}
+	zoomIn() {
+		this.scale.set(this.zoomedScale());
+		const el = this.$el;
+		if (el) el.style.cursor = "zoom-out";
+	}
+	zoomOut() {
+		this.scale.set(this.normalScale());
+		this.position.set({
+			x: 0,
+			y: 0
+		});
+		const el = this.$el;
+		if (el) el.style.cursor = "zoom-in";
+	}
+	rotateLeft() {
+		this.markRotating();
+		this.rotation.update((prev) => prev - 90);
+	}
+	rotateRight() {
+		this.markRotating();
+		this.rotation.update((prev) => prev + 90);
+	}
+	flipX() {
+		this.flip.update((prev) => ({
+			...prev,
+			x: Math.sign(prev.x) * -1
+		}));
+	}
+	flipY() {
+		this.flip.update((prev) => ({
+			...prev,
+			y: Math.sign(prev.y) * -1
+		}));
+	}
+	download() {
+		const el = this.$el;
+		if (!el) return;
+		const imageElement = el.querySelector("img");
+		if (!imageElement || !imageElement.src) return;
+		const link = document.createElement("a");
+		link.href = imageElement.src;
+		const urlParts = imageElement.src.split("/");
+		link.download = urlParts[urlParts.length - 1] || "image.jpg";
+		link.target = "_blank";
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+	}
+	handleClick(e) {
+		if (this.hasDragged) {
+			this.hasDragged = false;
+			return;
+		}
+		const el = this.$el;
+		if (this.liveScale === this.normalScale()) {
+			if (el) {
+				const itemRect = el.getBoundingClientRect();
+				const itemCenterX = itemRect.width / 2;
+				const itemCenterY = itemRect.height / 2;
+				const clickX = e.clientX - itemRect.left;
+				const clickY = e.clientY - itemRect.top;
+				const offsetX = itemCenterX - clickX;
+				const offsetY = itemCenterY - clickY;
+				const zoomedScale = this.zoomedScale();
+				const zoomOffsetX = offsetX * (zoomedScale - 1);
+				const zoomOffsetY = offsetY * (zoomedScale - 1);
+				const constraints = this.calculateConstraints(zoomedScale);
+				const constrainedX = Math.max(constraints.minX, Math.min(constraints.maxX, zoomOffsetX));
+				const constrainedY = Math.max(constraints.minY, Math.min(constraints.maxY, zoomOffsetY));
+				this.position.set({
+					x: constrainedX,
+					y: constrainedY
+				});
+			}
+			this.zoomIn();
+		} else this.zoomOut();
+	}
+	handleDragStart(e) {
+		e.preventDefault();
+	}
+	handlePointerDown(e) {
+		e.currentTarget.setPointerCapture(e.pointerId);
+		this.pointerData.set(e.pointerId, {
+			x: e.clientX,
+			y: e.clientY
+		});
+		this.pointerStart = {
+			x: e.clientX,
+			y: e.clientY
+		};
+		if (e.pointerType === "touch" && this.pointerData.size >= 2) {
+			this.isDragging = false;
+			this.initialPinchDistance = 0;
+			this.initialPinchScale = this.liveScale;
+		} else if (this.liveScale > 1) {
+			if (e.pointerType === "mouse" || e.pointerType === "touch" && this.pointerData.size === 1) {
+				this.isDragging = true;
+				this.dragStart = {
+					x: e.clientX - this.livePosition.x,
+					y: e.clientY - this.livePosition.y
+				};
+				this.hasDragged = false;
+			}
+		}
+	}
+	handlePointerMove(e) {
+		if (!this.pointerData.has(e.pointerId)) return;
+		const el = this.$el;
+		if (!el) return;
+		el.style.transition = "none";
+		if (e.pointerType === "mouse" && !el.style.cursor) el.style.cursor = this.liveScale > this.normalScale() ? "zoom-out" : "zoom-in";
+		this.pointerData.set(e.pointerId, {
+			x: e.clientX,
+			y: e.clientY
+		});
+		const pointers = Array.from(this.pointerData.values());
+		if (pointers.length === 2) {
+			const [p1, p2] = pointers;
+			const distance = Math.hypot(p2.x - p1.x, p2.y - p1.y);
+			this.hasDragged = true;
+			if (this.initialPinchDistance === 0) {
+				this.initialPinchDistance = distance;
+				this.initialPinchScale = this.liveScale;
+			} else {
+				const ratio = distance / this.initialPinchDistance;
+				const newScale = Math.max(this.normalScale(), Math.min(this.zoomedScale(), this.initialPinchScale * ratio));
+				const constraints = this.calculateConstraints(newScale);
+				const constrainedX = Math.max(constraints.minX, Math.min(constraints.maxX, this.livePosition.x));
+				const constrainedY = Math.max(constraints.minY, Math.min(constraints.maxY, this.livePosition.y));
+				this.liveScale = newScale;
+				this.livePosition = {
+					x: constrainedX,
+					y: constrainedY
+				};
+				el.style.setProperty("--px-scale", `${newScale}`);
+				el.style.setProperty("--px-position-x", `${constrainedX}px`);
+				el.style.setProperty("--px-position-y", `${constrainedY}px`);
+			}
+		} else if (pointers.length === 1 && this.isDragging) {
+			const pointer = pointers[0];
+			const newX = pointer.x - this.dragStart.x;
+			const newY = pointer.y - this.dragStart.y;
+			const constraints = this.calculateConstraints(this.liveScale);
+			const computedX = Math.max(constraints.minX, Math.min(constraints.maxX, newX));
+			const computedY = Math.max(constraints.minY, Math.min(constraints.maxY, newY));
+			this.livePosition = {
+				x: computedX,
+				y: computedY
+			};
+			el.style.setProperty("--px-position-x", `${computedX}px`);
+			el.style.setProperty("--px-position-y", `${computedY}px`);
+			if (Math.hypot(pointer.x - this.pointerStart.x, pointer.y - this.pointerStart.y) > 5) this.hasDragged = true;
+		}
+	}
+	handlePointerUp(e) {
+		const el = this.$el;
+		if (!el) return;
+		el.style.transition = "";
+		if (e.pointerType === "mouse") el.style.cursor = this.liveScale > this.normalScale() ? "zoom-out" : "zoom-in";
+		e.currentTarget.releasePointerCapture(e.pointerId);
+		this.pointerData.delete(e.pointerId);
+		if (this.pointerData.size < 2) {
+			this.initialPinchDistance = 0;
+			this.initialPinchScale = 1;
+		}
+		if (this.pointerData.size === 0) {
+			this.isDragging = false;
+			this.scale.set(this.liveScale);
+			this.position.set(this.livePosition);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: GalleryItem,
+		isStandalone: true,
+		selector: "p-gallery-item",
+		inputs: {
+			normalScale: {
+				classPropertyName: "normalScale",
+				publicName: "normalScale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			zoomedScale: {
+				classPropertyName: "zoomedScale",
+				publicName: "zoomedScale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			listeners: {
+				"click": "handleClick($event)",
+				"pointerdown": "handlePointerDown($event)",
+				"pointermove": "handlePointerMove($event)",
+				"pointerup": "handlePointerUp($event)",
+				"dragstart": "handleDragStart($event)"
+			},
+			properties: {
+				"class": "gallery.cx('item')",
+				"attr.data-scope": "'gallery'",
+				"attr.data-part": "'item'",
+				"attr.data-index": "index()",
+				"attr.data-active": "isActive() ? '' : null",
+				"attr.data-rotating": "isRotating() ? '' : null",
+				"style.--px-position-x": "stylePositionX()",
+				"style.--px-position-y": "stylePositionY()",
+				"style.--px-scale": "scale()",
+				"style.--px-rotation": "styleRotation()",
+				"style.--px-flip-x": "styleFlipX()",
+				"style.--px-flip-y": "styleFlipY()"
+			}
+		},
+		providers: [{
+			provide: PARENT_INSTANCE,
+			useExisting: GalleryItem
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: `<ng-content></ng-content>`,
+		isInline: true,
+		dependencies: [{
+			kind: "ngmodule",
+			type: BindModule
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GalleryItem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "p-gallery-item",
+			standalone: true,
+			imports: [BindModule],
+			template: `<ng-content></ng-content>`,
+			providers: [{
+				provide: PARENT_INSTANCE,
+				useExisting: GalleryItem
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				"[class]": "gallery.cx('item')",
+				"[attr.data-scope]": "'gallery'",
+				"[attr.data-part]": "'item'",
+				"[attr.data-index]": "index()",
+				"[attr.data-active]": "isActive() ? '' : null",
+				"[attr.data-rotating]": "isRotating() ? '' : null",
+				"[style.--px-position-x]": "stylePositionX()",
+				"[style.--px-position-y]": "stylePositionY()",
+				"[style.--px-scale]": "scale()",
+				"[style.--px-rotation]": "styleRotation()",
+				"[style.--px-flip-x]": "styleFlipX()",
+				"[style.--px-flip-y]": "styleFlipY()",
+				"(click)": "handleClick($event)",
+				"(pointerdown)": "handlePointerDown($event)",
+				"(pointermove)": "handlePointerMove($event)",
+				"(pointerup)": "handlePointerUp($event)",
+				"(dragstart)": "handleDragStart($event)"
+			},
+			hostDirectives: [Bind]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		normalScale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "normalScale",
+				required: false
+			}]
+		}],
+		zoomedScale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "zoomedScale",
+				required: false
+			}]
+		}]
+	}
+});
+var GalleryHeader = class GalleryHeader extends BaseComponent {
+	componentName = "GalleryHeader";
+	bindDirectiveInstance = inject(Bind, { self: true });
+	gallery = inject(Gallery);
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryHeader,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: GalleryHeader,
+		isStandalone: true,
+		selector: "p-gallery-header",
+		host: { properties: {
+			"class": "gallery.cx('header')",
+			"attr.data-scope": "'gallery'",
+			"attr.data-part": "'header'"
+		} },
+		providers: [{
+			provide: PARENT_INSTANCE,
+			useExisting: GalleryHeader
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: `<ng-content></ng-content>`,
+		isInline: true,
+		dependencies: [{
+			kind: "ngmodule",
+			type: BindModule
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GalleryHeader,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "p-gallery-header",
+			standalone: true,
+			imports: [BindModule],
+			template: `<ng-content></ng-content>`,
+			providers: [{
+				provide: PARENT_INSTANCE,
+				useExisting: GalleryHeader
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				"[class]": "gallery.cx('header')",
+				"[attr.data-scope]": "'gallery'",
+				"[attr.data-part]": "'header'"
+			},
+			hostDirectives: [Bind]
+		}]
+	}]
+});
+var GalleryContent = class GalleryContent extends BaseComponent {
+	componentName = "GalleryContent";
+	bindDirectiveInstance = inject(Bind, { self: true });
+	gallery = inject(Gallery);
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	constructor() {
+		super();
+		afterNextRender(() => {
+			this.gallery.setContentEl(this.$el);
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryContent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: GalleryContent,
+		isStandalone: true,
+		selector: "p-gallery-content",
+		host: { properties: {
+			"class": "gallery.cx('content')",
+			"attr.data-scope": "'gallery'",
+			"attr.data-part": "'content'"
+		} },
+		providers: [{
+			provide: PARENT_INSTANCE,
+			useExisting: GalleryContent
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: `<ng-content></ng-content>`,
+		isInline: true,
+		dependencies: [{
+			kind: "ngmodule",
+			type: BindModule
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GalleryContent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "p-gallery-content",
+			standalone: true,
+			imports: [BindModule],
+			template: `<ng-content></ng-content>`,
+			providers: [{
+				provide: PARENT_INSTANCE,
+				useExisting: GalleryContent
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				"[class]": "gallery.cx('content')",
+				"[attr.data-scope]": "'gallery'",
+				"[attr.data-part]": "'content'"
+			},
+			hostDirectives: [Bind]
+		}]
+	}],
+	ctorParameters: () => []
+});
+var GalleryFooter = class GalleryFooter extends BaseComponent {
+	componentName = "GalleryFooter";
+	bindDirectiveInstance = inject(Bind, { self: true });
+	gallery = inject(Gallery);
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryFooter,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: GalleryFooter,
+		isStandalone: true,
+		selector: "p-gallery-footer",
+		host: { properties: {
+			"class": "gallery.cx('footer')",
+			"attr.data-scope": "'gallery'",
+			"attr.data-part": "'footer'"
+		} },
+		providers: [{
+			provide: PARENT_INSTANCE,
+			useExisting: GalleryFooter
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: `<ng-content></ng-content>`,
+		isInline: true,
+		dependencies: [{
+			kind: "ngmodule",
+			type: BindModule
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GalleryFooter,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "p-gallery-footer",
+			standalone: true,
+			imports: [BindModule],
+			template: `<ng-content></ng-content>`,
+			providers: [{
+				provide: PARENT_INSTANCE,
+				useExisting: GalleryFooter
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				"[class]": "gallery.cx('footer')",
+				"[attr.data-scope]": "'gallery'",
+				"[attr.data-part]": "'footer'"
+			},
+			hostDirectives: [Bind]
+		}]
+	}]
+});
+var GalleryBackdrop = class GalleryBackdrop extends BaseComponent {
+	componentName = "GalleryBackdrop";
+	bindDirectiveInstance = inject(Bind, { self: true });
+	gallery = inject(Gallery);
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryBackdrop,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: GalleryBackdrop,
+		isStandalone: true,
+		selector: "p-gallery-backdrop",
+		host: { properties: {
+			"class": "gallery.cx('backdrop')",
+			"attr.data-scope": "'gallery'",
+			"attr.data-part": "'backdrop'"
+		} },
+		providers: [{
+			provide: PARENT_INSTANCE,
+			useExisting: GalleryBackdrop
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: `<ng-content></ng-content>`,
+		isInline: true,
+		dependencies: [{
+			kind: "ngmodule",
+			type: BindModule
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GalleryBackdrop,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "p-gallery-backdrop",
+			standalone: true,
+			imports: [BindModule],
+			template: `<ng-content></ng-content>`,
+			providers: [{
+				provide: PARENT_INSTANCE,
+				useExisting: GalleryBackdrop
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				"[class]": "gallery.cx('backdrop')",
+				"[attr.data-scope]": "'gallery'",
+				"[attr.data-part]": "'backdrop'"
+			},
+			hostDirectives: [Bind]
+		}]
+	}]
+});
+var GalleryToolbar = class GalleryToolbar extends BaseComponent {
+	componentName = "GalleryToolbar";
+	bindDirectiveInstance = inject(Bind, { self: true });
+	gallery = inject(Gallery);
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryToolbar,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: GalleryToolbar,
+		isStandalone: true,
+		selector: "p-gallery-toolbar",
+		host: { properties: {
+			"class": "gallery.cx('toolbar')",
+			"attr.data-scope": "'gallery'",
+			"attr.data-part": "'toolbar'"
+		} },
+		providers: [{
+			provide: PARENT_INSTANCE,
+			useExisting: GalleryToolbar
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: `<ng-content></ng-content>`,
+		isInline: true,
+		dependencies: [{
+			kind: "ngmodule",
+			type: BindModule
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GalleryToolbar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "p-gallery-toolbar",
+			standalone: true,
+			imports: [BindModule],
+			template: `<ng-content></ng-content>`,
+			providers: [{
+				provide: PARENT_INSTANCE,
+				useExisting: GalleryToolbar
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				"[class]": "gallery.cx('toolbar')",
+				"[attr.data-scope]": "'gallery'",
+				"[attr.data-part]": "'toolbar'"
+			},
+			hostDirectives: [Bind]
+		}]
+	}]
+});
+var GalleryToolbarItem = class GalleryToolbarItem extends BaseComponent {
+	componentName = "GalleryToolbarItem";
+	bindDirectiveInstance = inject(Bind, { self: true });
+	action = input(...ngDevMode ? [void 0, { debugName: "action" }] : /* istanbul ignore next */ []);
+	gallery = inject(Gallery);
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	onClick() {
+		this.gallery.handleClickAction(this.action());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryToolbarItem,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: GalleryToolbarItem,
+		isStandalone: true,
+		selector: "p-gallery-toolbar-item",
+		inputs: { action: {
+			classPropertyName: "action",
+			publicName: "action",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			listeners: { "click": "onClick()" },
+			properties: {
+				"class": "gallery.cx('toolbarItem')",
+				"attr.data-scope": "'gallery'",
+				"attr.data-part": "'toolbarItem'"
+			}
+		},
+		providers: [{
+			provide: PARENT_INSTANCE,
+			useExisting: GalleryToolbarItem
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: `<ng-content></ng-content>`,
+		isInline: true,
+		dependencies: [{
+			kind: "ngmodule",
+			type: BindModule
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GalleryToolbarItem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "p-gallery-toolbar-item",
+			standalone: true,
+			imports: [BindModule],
+			template: `<ng-content></ng-content>`,
+			providers: [{
+				provide: PARENT_INSTANCE,
+				useExisting: GalleryToolbarItem
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				"[class]": "gallery.cx('toolbarItem')",
+				"[attr.data-scope]": "'gallery'",
+				"[attr.data-part]": "'toolbarItem'",
+				"(click)": "onClick()"
+			},
+			hostDirectives: [Bind]
+		}]
+	}],
+	propDecorators: { action: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "action",
+			required: false
+		}]
+	}] }
+});
+var GalleryPrev = class GalleryPrev extends BaseComponent {
+	componentName = "GalleryPrev";
+	gallery = inject(Gallery);
+	bindDirectiveInstance = inject(Bind, { self: true });
+	_componentStyle = inject(GalleryStyle);
+	onClick() {
+		this.gallery.handlePrev();
+	}
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryPrev,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: GalleryPrev,
+		isStandalone: true,
+		selector: "[pGalleryPrev]",
+		host: {
+			listeners: { "click": "onClick()" },
+			properties: {
+				"class": "gallery.cx('prev')",
+				"attr.data-scope": "'gallery'",
+				"attr.data-part": "'prev'"
+			}
+		},
+		providers: [GalleryStyle, {
+			provide: PARENT_INSTANCE,
+			useExisting: GalleryPrev
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GalleryPrev,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[pGalleryPrev]",
+			standalone: true,
+			providers: [GalleryStyle, {
+				provide: PARENT_INSTANCE,
+				useExisting: GalleryPrev
+			}],
+			host: {
+				"[class]": "gallery.cx('prev')",
+				"[attr.data-scope]": "'gallery'",
+				"[attr.data-part]": "'prev'",
+				"(click)": "onClick()"
+			},
+			hostDirectives: [Bind]
+		}]
+	}]
+});
+var GalleryNext = class GalleryNext extends BaseComponent {
+	componentName = "GalleryNext";
+	gallery = inject(Gallery);
+	bindDirectiveInstance = inject(Bind, { self: true });
+	_componentStyle = inject(GalleryStyle);
+	onClick() {
+		this.gallery.handleNext();
+	}
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryNext,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: GalleryNext,
+		isStandalone: true,
+		selector: "[pGalleryNext]",
+		host: {
+			listeners: { "click": "onClick()" },
+			properties: {
+				"class": "gallery.cx('next')",
+				"attr.data-scope": "'gallery'",
+				"attr.data-part": "'next'"
+			}
+		},
+		providers: [GalleryStyle, {
+			provide: PARENT_INSTANCE,
+			useExisting: GalleryNext
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GalleryNext,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[pGalleryNext]",
+			standalone: true,
+			providers: [GalleryStyle, {
+				provide: PARENT_INSTANCE,
+				useExisting: GalleryNext
+			}],
+			host: {
+				"[class]": "gallery.cx('next')",
+				"[attr.data-scope]": "'gallery'",
+				"[attr.data-part]": "'next'",
+				"(click)": "onClick()"
+			},
+			hostDirectives: [Bind]
+		}]
+	}]
+});
+var GalleryZoomIn = class GalleryZoomIn extends BaseComponent {
+	componentName = "GalleryZoomIn";
+	gallery = inject(Gallery);
+	bindDirectiveInstance = inject(Bind, { self: true });
+	_componentStyle = inject(GalleryStyle);
+	disabledState = computed(() => this.gallery.activeItemTransform().zoomed ? true : null, ...ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []);
+	onClick() {
+		this.gallery.handleClickAction("zoomIn");
+	}
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryZoomIn,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: GalleryZoomIn,
+		isStandalone: true,
+		selector: "[pGalleryZoomIn]",
+		host: {
+			listeners: { "click": "onClick()" },
+			properties: {
+				"class": "gallery.cx('zoomIn')",
+				"attr.data-scope": "'gallery'",
+				"attr.data-part": "'zoomIn'",
+				"attr.data-action": "'zoom-in'",
+				"attr.disabled": "disabledState()"
+			}
+		},
+		providers: [GalleryStyle, {
+			provide: PARENT_INSTANCE,
+			useExisting: GalleryZoomIn
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GalleryZoomIn,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[pGalleryZoomIn]",
+			standalone: true,
+			providers: [GalleryStyle, {
+				provide: PARENT_INSTANCE,
+				useExisting: GalleryZoomIn
+			}],
+			host: {
+				"[class]": "gallery.cx('zoomIn')",
+				"[attr.data-scope]": "'gallery'",
+				"[attr.data-part]": "'zoomIn'",
+				"[attr.data-action]": "'zoom-in'",
+				"[attr.disabled]": "disabledState()",
+				"(click)": "onClick()"
+			},
+			hostDirectives: [Bind]
+		}]
+	}]
+});
+var GalleryZoomOut = class GalleryZoomOut extends BaseComponent {
+	componentName = "GalleryZoomOut";
+	gallery = inject(Gallery);
+	bindDirectiveInstance = inject(Bind, { self: true });
+	_componentStyle = inject(GalleryStyle);
+	disabledState = computed(() => !this.gallery.activeItemTransform().zoomed ? true : null, ...ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []);
+	onClick() {
+		this.gallery.handleClickAction("zoomOut");
+	}
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryZoomOut,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: GalleryZoomOut,
+		isStandalone: true,
+		selector: "[pGalleryZoomOut]",
+		host: {
+			listeners: { "click": "onClick()" },
+			properties: {
+				"class": "gallery.cx('zoomOut')",
+				"attr.data-scope": "'gallery'",
+				"attr.data-part": "'zoomOut'",
+				"attr.data-action": "'zoom-out'",
+				"attr.disabled": "disabledState()"
+			}
+		},
+		providers: [GalleryStyle, {
+			provide: PARENT_INSTANCE,
+			useExisting: GalleryZoomOut
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GalleryZoomOut,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[pGalleryZoomOut]",
+			standalone: true,
+			providers: [GalleryStyle, {
+				provide: PARENT_INSTANCE,
+				useExisting: GalleryZoomOut
+			}],
+			host: {
+				"[class]": "gallery.cx('zoomOut')",
+				"[attr.data-scope]": "'gallery'",
+				"[attr.data-part]": "'zoomOut'",
+				"[attr.data-action]": "'zoom-out'",
+				"[attr.disabled]": "disabledState()",
+				"(click)": "onClick()"
+			},
+			hostDirectives: [Bind]
+		}]
+	}]
+});
+var GalleryZoomToggle = class GalleryZoomToggle extends BaseComponent {
+	componentName = "GalleryZoomToggle";
+	gallery = inject(Gallery);
+	bindDirectiveInstance = inject(Bind, { self: true });
+	_componentStyle = inject(GalleryStyle);
+	onToggle() {
+		this.gallery.handleClickAction(this.gallery.activeItemTransform().zoomed ? "zoomOut" : "zoomIn");
+	}
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryZoomToggle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: GalleryZoomToggle,
+		isStandalone: true,
+		selector: "[pGalleryZoomToggle]",
+		host: {
+			listeners: { "click": "onToggle()" },
+			properties: {
+				"class": "gallery.cx('zoomToggle')",
+				"attr.data-scope": "'gallery'",
+				"attr.data-part": "'zoomToggle'",
+				"attr.data-action": "'zoom-toggle'"
+			}
+		},
+		providers: [GalleryStyle, {
+			provide: PARENT_INSTANCE,
+			useExisting: GalleryZoomToggle
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GalleryZoomToggle,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[pGalleryZoomToggle]",
+			standalone: true,
+			providers: [GalleryStyle, {
+				provide: PARENT_INSTANCE,
+				useExisting: GalleryZoomToggle
+			}],
+			host: {
+				"[class]": "gallery.cx('zoomToggle')",
+				"[attr.data-scope]": "'gallery'",
+				"[attr.data-part]": "'zoomToggle'",
+				"[attr.data-action]": "'zoom-toggle'",
+				"(click)": "onToggle()"
+			},
+			hostDirectives: [Bind]
+		}]
+	}]
+});
+var GalleryRotateLeft = class GalleryRotateLeft extends BaseComponent {
+	componentName = "GalleryRotateLeft";
+	gallery = inject(Gallery);
+	bindDirectiveInstance = inject(Bind, { self: true });
+	_componentStyle = inject(GalleryStyle);
+	onClick() {
+		this.gallery.handleClickAction("rotateLeft");
+	}
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryRotateLeft,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: GalleryRotateLeft,
+		isStandalone: true,
+		selector: "[pGalleryRotateLeft]",
+		host: {
+			listeners: { "click": "onClick()" },
+			properties: {
+				"class": "gallery.cx('rotateLeft')",
+				"attr.data-scope": "'gallery'",
+				"attr.data-part": "'rotateLeft'",
+				"attr.data-action": "'rotate-left'"
+			}
+		},
+		providers: [GalleryStyle, {
+			provide: PARENT_INSTANCE,
+			useExisting: GalleryRotateLeft
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GalleryRotateLeft,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[pGalleryRotateLeft]",
+			standalone: true,
+			providers: [GalleryStyle, {
+				provide: PARENT_INSTANCE,
+				useExisting: GalleryRotateLeft
+			}],
+			host: {
+				"[class]": "gallery.cx('rotateLeft')",
+				"[attr.data-scope]": "'gallery'",
+				"[attr.data-part]": "'rotateLeft'",
+				"[attr.data-action]": "'rotate-left'",
+				"(click)": "onClick()"
+			},
+			hostDirectives: [Bind]
+		}]
+	}]
+});
+var GalleryRotateRight = class GalleryRotateRight extends BaseComponent {
+	componentName = "GalleryRotateRight";
+	gallery = inject(Gallery);
+	bindDirectiveInstance = inject(Bind, { self: true });
+	_componentStyle = inject(GalleryStyle);
+	onClick() {
+		this.gallery.handleClickAction("rotateRight");
+	}
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryRotateRight,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: GalleryRotateRight,
+		isStandalone: true,
+		selector: "[pGalleryRotateRight]",
+		host: {
+			listeners: { "click": "onClick()" },
+			properties: {
+				"class": "gallery.cx('rotateRight')",
+				"attr.data-scope": "'gallery'",
+				"attr.data-part": "'rotateRight'",
+				"attr.data-action": "'rotate-right'"
+			}
+		},
+		providers: [GalleryStyle, {
+			provide: PARENT_INSTANCE,
+			useExisting: GalleryRotateRight
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GalleryRotateRight,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[pGalleryRotateRight]",
+			standalone: true,
+			providers: [GalleryStyle, {
+				provide: PARENT_INSTANCE,
+				useExisting: GalleryRotateRight
+			}],
+			host: {
+				"[class]": "gallery.cx('rotateRight')",
+				"[attr.data-scope]": "'gallery'",
+				"[attr.data-part]": "'rotateRight'",
+				"[attr.data-action]": "'rotate-right'",
+				"(click)": "onClick()"
+			},
+			hostDirectives: [Bind]
+		}]
+	}]
+});
+var GalleryFlipX = class GalleryFlipX extends BaseComponent {
+	componentName = "GalleryFlipX";
+	gallery = inject(Gallery);
+	bindDirectiveInstance = inject(Bind, { self: true });
+	_componentStyle = inject(GalleryStyle);
+	onClick() {
+		this.gallery.handleClickAction("flipX");
+	}
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryFlipX,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: GalleryFlipX,
+		isStandalone: true,
+		selector: "[pGalleryFlipX]",
+		host: {
+			listeners: { "click": "onClick()" },
+			properties: {
+				"class": "gallery.cx('flipX')",
+				"attr.data-scope": "'gallery'",
+				"attr.data-part": "'flipX'",
+				"attr.data-action": "'flip-x'"
+			}
+		},
+		providers: [GalleryStyle, {
+			provide: PARENT_INSTANCE,
+			useExisting: GalleryFlipX
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GalleryFlipX,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[pGalleryFlipX]",
+			standalone: true,
+			providers: [GalleryStyle, {
+				provide: PARENT_INSTANCE,
+				useExisting: GalleryFlipX
+			}],
+			host: {
+				"[class]": "gallery.cx('flipX')",
+				"[attr.data-scope]": "'gallery'",
+				"[attr.data-part]": "'flipX'",
+				"[attr.data-action]": "'flip-x'",
+				"(click)": "onClick()"
+			},
+			hostDirectives: [Bind]
+		}]
+	}]
+});
+var GalleryFlipY = class GalleryFlipY extends BaseComponent {
+	componentName = "GalleryFlipY";
+	gallery = inject(Gallery);
+	bindDirectiveInstance = inject(Bind, { self: true });
+	_componentStyle = inject(GalleryStyle);
+	onClick() {
+		this.gallery.handleClickAction("flipY");
+	}
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryFlipY,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: GalleryFlipY,
+		isStandalone: true,
+		selector: "[pGalleryFlipY]",
+		host: {
+			listeners: { "click": "onClick()" },
+			properties: {
+				"class": "gallery.cx('flipY')",
+				"attr.data-scope": "'gallery'",
+				"attr.data-part": "'flipY'",
+				"attr.data-action": "'flip-y'"
+			}
+		},
+		providers: [GalleryStyle, {
+			provide: PARENT_INSTANCE,
+			useExisting: GalleryFlipY
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GalleryFlipY,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[pGalleryFlipY]",
+			standalone: true,
+			providers: [GalleryStyle, {
+				provide: PARENT_INSTANCE,
+				useExisting: GalleryFlipY
+			}],
+			host: {
+				"[class]": "gallery.cx('flipY')",
+				"[attr.data-scope]": "'gallery'",
+				"[attr.data-part]": "'flipY'",
+				"[attr.data-action]": "'flip-y'",
+				"(click)": "onClick()"
+			},
+			hostDirectives: [Bind]
+		}]
+	}]
+});
+var GalleryFullScreen = class GalleryFullScreen extends BaseComponent {
+	componentName = "GalleryFullScreen";
+	gallery = inject(Gallery);
+	bindDirectiveInstance = inject(Bind, { self: true });
+	_componentStyle = inject(GalleryStyle);
+	dataFullscreen = computed(() => this.gallery.isFullscreen() ? "" : null, ...ngDevMode ? [{ debugName: "dataFullscreen" }] : /* istanbul ignore next */ []);
+	onClick() {
+		this.gallery.handleClickAction("toggleFullScreen");
+	}
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryFullScreen,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: GalleryFullScreen,
+		isStandalone: true,
+		selector: "[pGalleryFullScreen]",
+		host: {
+			listeners: { "click": "onClick()" },
+			properties: {
+				"class": "gallery.cx('fullScreen')",
+				"attr.data-scope": "'gallery'",
+				"attr.data-part": "'fullScreen'",
+				"attr.data-action": "'fullscreen'",
+				"attr.data-fullscreen": "dataFullscreen()"
+			}
+		},
+		providers: [GalleryStyle, {
+			provide: PARENT_INSTANCE,
+			useExisting: GalleryFullScreen
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GalleryFullScreen,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[pGalleryFullScreen]",
+			standalone: true,
+			providers: [GalleryStyle, {
+				provide: PARENT_INSTANCE,
+				useExisting: GalleryFullScreen
+			}],
+			host: {
+				"[class]": "gallery.cx('fullScreen')",
+				"[attr.data-scope]": "'gallery'",
+				"[attr.data-part]": "'fullScreen'",
+				"[attr.data-action]": "'fullscreen'",
+				"[attr.data-fullscreen]": "dataFullscreen()",
+				"(click)": "onClick()"
+			},
+			hostDirectives: [Bind]
+		}]
+	}]
+});
+var GalleryDownload = class GalleryDownload extends BaseComponent {
+	componentName = "GalleryDownload";
+	gallery = inject(Gallery);
+	bindDirectiveInstance = inject(Bind, { self: true });
+	_componentStyle = inject(GalleryStyle);
+	onClick() {
+		this.gallery.handleClickAction("download");
+	}
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryDownload,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: GalleryDownload,
+		isStandalone: true,
+		selector: "[pGalleryDownload]",
+		host: {
+			listeners: { "click": "onClick()" },
+			properties: {
+				"class": "gallery.cx('download')",
+				"attr.data-scope": "'gallery'",
+				"attr.data-part": "'download'",
+				"attr.data-action": "'download'"
+			}
+		},
+		providers: [GalleryStyle, {
+			provide: PARENT_INSTANCE,
+			useExisting: GalleryDownload
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GalleryDownload,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[pGalleryDownload]",
+			standalone: true,
+			providers: [GalleryStyle, {
+				provide: PARENT_INSTANCE,
+				useExisting: GalleryDownload
+			}],
+			host: {
+				"[class]": "gallery.cx('download')",
+				"[attr.data-scope]": "'gallery'",
+				"[attr.data-part]": "'download'",
+				"[attr.data-action]": "'download'",
+				"(click)": "onClick()"
+			},
+			hostDirectives: [Bind]
+		}]
+	}]
+});
+var GalleryThumbnailItem = class GalleryThumbnailItem {
+	index = input(...ngDevMode ? [void 0, { debugName: "index" }] : /* istanbul ignore next */ []);
+	gallery = inject(Gallery);
+	templateRef = viewChild("content", ...ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []);
+	isActive = computed(() => {
+		const idx = this.index();
+		return idx !== void 0 && this.gallery.activeIndex() === idx;
+	}, ...ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []);
+	hostClass = computed(() => this.gallery.cx("thumbnailItem"), ...ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []);
+	dataActive = computed(() => this.isActive() ? "" : null, ...ngDevMode ? [{ debugName: "dataActive" }] : /* istanbul ignore next */ []);
+	onClick() {
+		const idx = this.index();
+		if (idx !== void 0) this.gallery.selectItem(idx);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryThumbnailItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.0",
+		type: GalleryThumbnailItem,
+		isStandalone: true,
+		selector: "p-gallery-thumbnail-item",
+		inputs: { index: {
+			classPropertyName: "index",
+			publicName: "index",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		viewQueries: [{
+			propertyName: "templateRef",
+			first: true,
+			predicate: ["content"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
         <ng-template #content>
             <ng-content></ng-content>
         </ng-template>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryThumbnailItem, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'p-gallery-thumbnail-item',
-                    standalone: true,
-                    template: `
+    `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GalleryThumbnailItem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "p-gallery-thumbnail-item",
+			standalone: true,
+			template: `
         <ng-template #content>
             <ng-content></ng-content>
         </ng-template>
     `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
-                }]
-        }], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], templateRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
-
-/**
- * GalleryThumbnail represents the thumbnail carousel wrapper.
- * @group Components
- */
-class GalleryThumbnail extends BaseComponent {
-    componentName = 'GalleryThumbnail';
-    bindDirectiveInstance = inject(Bind, { self: true });
-    gallery = inject(Gallery);
-    /**
-     * Whether the carousel should auto size items.
-     * @group Props
-     * @defaultValue true
-     */
-    autoSize = input(true, { ...(ngDevMode ? { debugName: "autoSize" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Whether the carousel should loop.
-     * @group Props
-     * @defaultValue true
-     */
-    loop = input(true, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Alignment of the carousel items.
-     * @group Props
-     * @defaultValue 'center'
-     */
-    align = input('center', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-    /**
-     * Spacing between carousel items in pixels.
-     * @group Props
-     * @defaultValue 8
-     */
-    spacing = input(8, { ...(ngDevMode ? { debugName: "spacing" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    /**
-     * Orientation of the carousel.
-     * @group Props
-     * @defaultValue 'horizontal'
-     */
-    orientation = input('horizontal', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-    /**
-     * Scroll snap type applied to the track.
-     * @group Props
-     * @defaultValue 'mandatory'
-     */
-    snapType = input('mandatory', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "snapType" }] : /* istanbul ignore next */ []));
-    /**
-     * How many slides are visible per page.
-     * @group Props
-     * @defaultValue 1
-     */
-    slidesPerPage = input(1, { ...(ngDevMode ? { debugName: "slidesPerPage" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    thumbnailItems = contentChildren(GalleryThumbnailItem, { ...(ngDevMode ? { debugName: "thumbnailItems" } : /* istanbul ignore next */ {}), descendants: true });
-    slide = computed(() => this.gallery.activeIndex(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "slide" }] : /* istanbul ignore next */ []));
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    onItemKeydown(event, index) {
-        const items = this.thumbnailItems();
-        switch (event.code) {
-            case 'Enter':
-            case 'Space':
-                event.preventDefault();
-                items[index]?.onClick();
-                break;
-            case 'ArrowRight':
-            case 'ArrowDown':
-                event.preventDefault();
-                this.focusItem((index + 1) % items.length);
-                break;
-            case 'ArrowLeft':
-            case 'ArrowUp':
-                event.preventDefault();
-                this.focusItem((index - 1 + items.length) % items.length);
-                break;
-            case 'Home':
-                event.preventDefault();
-                this.focusItem(0);
-                break;
-            case 'End':
-                event.preventDefault();
-                this.focusItem(items.length - 1);
-                break;
-        }
-    }
-    focusItem(nextIndex) {
-        this.gallery.selectItem(nextIndex);
-        const carouselItems = this.$el?.querySelectorAll('[data-pc-name="pccarouselitem"][tabindex]');
-        carouselItems?.[nextIndex]?.focus();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryThumbnail, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: GalleryThumbnail, isStandalone: true, selector: "p-gallery-thumbnail", inputs: { autoSize: { classPropertyName: "autoSize", publicName: "autoSize", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, snapType: { classPropertyName: "snapType", publicName: "snapType", isSignal: true, isRequired: false, transformFunction: null }, slidesPerPage: { classPropertyName: "slidesPerPage", publicName: "slidesPerPage", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "gallery.cx('thumbnail')", "attr.data-scope": "'gallery'", "attr.data-part": "'thumbnail'" } }, providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryThumbnail }], queries: [{ propertyName: "thumbnailItems", predicate: GalleryThumbnailItem, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	propDecorators: {
+		index: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "index",
+				required: false
+			}]
+		}],
+		templateRef: [{
+			type: i0.ViewChild,
+			args: ["content", { isSignal: true }]
+		}]
+	}
+});
+var GalleryThumbnail = class GalleryThumbnail extends BaseComponent {
+	componentName = "GalleryThumbnail";
+	bindDirectiveInstance = inject(Bind, { self: true });
+	gallery = inject(Gallery);
+	autoSize = input(true, {
+		...ngDevMode ? { debugName: "autoSize" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	loop = input(true, {
+		...ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	align = input("center", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	spacing = input(8, {
+		...ngDevMode ? { debugName: "spacing" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	orientation = input("horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	snapType = input("mandatory", ...ngDevMode ? [{ debugName: "snapType" }] : /* istanbul ignore next */ []);
+	slidesPerPage = input(1, {
+		...ngDevMode ? { debugName: "slidesPerPage" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	thumbnailItems = contentChildren(GalleryThumbnailItem, {
+		...ngDevMode ? { debugName: "thumbnailItems" } : /* istanbul ignore next */ {},
+		descendants: true
+	});
+	slide = computed(() => this.gallery.activeIndex(), ...ngDevMode ? [{ debugName: "slide" }] : /* istanbul ignore next */ []);
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	onItemKeydown(event, index) {
+		const items = this.thumbnailItems();
+		switch (event.code) {
+			case "Enter":
+			case "Space":
+				event.preventDefault();
+				items[index]?.onClick();
+				break;
+			case "ArrowRight":
+			case "ArrowDown":
+				event.preventDefault();
+				this.focusItem((index + 1) % items.length);
+				break;
+			case "ArrowLeft":
+			case "ArrowUp":
+				event.preventDefault();
+				this.focusItem((index - 1 + items.length) % items.length);
+				break;
+			case "Home":
+				event.preventDefault();
+				this.focusItem(0);
+				break;
+			case "End":
+				event.preventDefault();
+				this.focusItem(items.length - 1);
+		}
+	}
+	focusItem(nextIndex) {
+		this.gallery.selectItem(nextIndex);
+		(this.$el?.querySelectorAll("[data-pc-name=\"pccarouselitem\"][tabindex]"))?.[nextIndex]?.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryThumbnail,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: GalleryThumbnail,
+		isStandalone: true,
+		selector: "p-gallery-thumbnail",
+		inputs: {
+			autoSize: {
+				classPropertyName: "autoSize",
+				publicName: "autoSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loop: {
+				classPropertyName: "loop",
+				publicName: "loop",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			align: {
+				classPropertyName: "align",
+				publicName: "align",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			spacing: {
+				classPropertyName: "spacing",
+				publicName: "spacing",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			snapType: {
+				classPropertyName: "snapType",
+				publicName: "snapType",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			slidesPerPage: {
+				classPropertyName: "slidesPerPage",
+				publicName: "slidesPerPage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "gallery.cx('thumbnail')",
+			"attr.data-scope": "'gallery'",
+			"attr.data-part": "'thumbnail'"
+		} },
+		providers: [{
+			provide: PARENT_INSTANCE,
+			useExisting: GalleryThumbnail
+		}],
+		queries: [{
+			propertyName: "thumbnailItems",
+			predicate: GalleryThumbnailItem,
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: `
         <p-carousel
             [autoSize]="autoSize()"
             [loop]="loop()"
@@ -1401,15 +2110,74 @@ class GalleryThumbnail extends BaseComponent {
                 }
             </p-carousel-content>
         </p-carousel>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CarouselModule }, { kind: "component", type: i2.Carousel, selector: "p-carousel", inputs: ["align", "loop", "snapType", "spacing", "autoSize", "slidesPerPage", "slide"], outputs: ["onPageChange", "onSlideChange"] }, { kind: "component", type: i2.CarouselContent, selector: "p-carousel-content" }, { kind: "component", type: i2.CarouselItem, selector: "p-carousel-item", inputs: ["value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryThumbnail, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'p-gallery-thumbnail',
-                    standalone: true,
-                    imports: [BindModule, NgTemplateOutlet, CarouselModule],
-                    template: `
+    `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: BindModule
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: CarouselModule
+			},
+			{
+				kind: "component",
+				type: i2.Carousel,
+				selector: "p-carousel",
+				inputs: [
+					"align",
+					"loop",
+					"snapType",
+					"spacing",
+					"autoSize",
+					"slidesPerPage",
+					"slide"
+				],
+				outputs: ["onPageChange", "onSlideChange"]
+			},
+			{
+				kind: "component",
+				type: i2.CarouselContent,
+				selector: "p-carousel-content"
+			},
+			{
+				kind: "component",
+				type: i2.CarouselItem,
+				selector: "p-carousel-item",
+				inputs: ["value"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GalleryThumbnail,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "p-gallery-thumbnail",
+			standalone: true,
+			imports: [
+				BindModule,
+				NgTemplateOutlet,
+				CarouselModule
+			],
+			template: `
         <p-carousel
             [autoSize]="autoSize()"
             [loop]="loop()"
@@ -1435,423 +2203,627 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             </p-carousel-content>
         </p-carousel>
     `,
-                    providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryThumbnail }],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: {
-                        '[class]': "gallery.cx('thumbnail')",
-                        '[attr.data-scope]': "'gallery'",
-                        '[attr.data-part]': "'thumbnail'"
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }], propDecorators: { autoSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSize", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], snapType: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapType", required: false }] }], slidesPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "slidesPerPage", required: false }] }], thumbnailItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => GalleryThumbnailItem), { ...{ descendants: true }, isSignal: true }] }] } });
-
-/**
- * GalleryThumbnailContent represents the thumbnail carousel content area.
- * @group Components
- */
-class GalleryThumbnailContent extends BaseComponent {
-    componentName = 'GalleryThumbnailContent';
-    bindDirectiveInstance = inject(Bind, { self: true });
-    gallery = inject(Gallery);
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryThumbnailContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: GalleryThumbnailContent, isStandalone: true, selector: "p-gallery-thumbnail-content", host: { properties: { "class": "gallery.cx('thumbnailContent')", "attr.data-scope": "'gallery'", "attr.data-part": "'thumbnailContent'" } }, providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryThumbnailContent }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryThumbnailContent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'p-gallery-thumbnail-content',
-                    standalone: true,
-                    imports: [BindModule],
-                    template: `<ng-content></ng-content>`,
-                    providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryThumbnailContent }],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: {
-                        '[class]': "gallery.cx('thumbnailContent')",
-                        '[attr.data-scope]': "'gallery'",
-                        '[attr.data-part]': "'thumbnailContent'"
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }] });
-
-/**
- * Gallery is the main container component for the Gallery.
- * @group Components
- */
-class Gallery extends BaseComponent {
-    componentName = 'Gallery';
-    bindDirectiveInstance = inject(Bind, { self: true });
-    /**
-     * The index of the active item.
-     * @group Props
-     * @defaultValue 0
-     */
-    activeIndex = model(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
-    /**
-     * When defined, puts the fullscreen state in controlled mode; the value drives whether the gallery is fullscreen and changes are reported via onFullscreenChange instead of being handled internally.
-     * @group Props
-     */
-    fullscreen = input(undefined, { ...(ngDevMode ? { debugName: "fullscreen" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
-    /**
-     * Whether pressing the Escape key exits fullscreen mode.
-     * @defaultValue true
-     * @group Props
-     */
-    closeOnEscape = input(true, { ...(ngDevMode ? { debugName: "closeOnEscape" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Callback fired when the gallery's active index changes.
-     * @param {GalleryActiveIndexChangeEvent} event - Custom active index change event.
-     * @group Emits
-     */
-    onActiveIndexChange = output();
-    /**
-     * Callback fired when the fullscreen state should change (controlled mode).
-     * @param {boolean} value - The next fullscreen state.
-     * @group Emits
-     */
-    onFullscreenChange = output();
-    /**
-     * Callback fired when the active item's zoom scale changes.
-     * @param {number} scale - The current zoom scale.
-     * @group Emits
-     */
-    onZoomChange = output();
-    /**
-     * Callback fired when the active item's rotation changes.
-     * @param {number} rotation - The current rotation in degrees.
-     * @group Emits
-     */
-    onRotateChange = output();
-    /**
-     * Callback fired when the active item's flip state changes.
-     * @param {{ x: number; y: number }} flip - The current flip state.
-     * @group Emits
-     */
-    onFlipChange = output();
-    _componentStyle = inject(GalleryStyle);
-    isFullscreenInternal = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isFullscreenInternal" }] : /* istanbul ignore next */ []));
-    fullscreenResizeTimer = null;
-    destroyed = false;
-    isFullscreen = computed(() => this.fullscreen() ?? this.isFullscreenInternal(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isFullscreen" }] : /* istanbul ignore next */ []));
-    activeItemTransform = signal({ zoomed: false, rotated: false, flipped: false }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeItemTransform" }] : /* istanbul ignore next */ []));
-    pendingAction = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "pendingAction" }] : /* istanbul ignore next */ []));
-    itemCounter = 0;
-    contentEl = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentEl" }] : /* istanbul ignore next */ []));
-    dataFullscreen = computed(() => (this.isFullscreen() ? '' : null), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dataFullscreen" }] : /* istanbul ignore next */ []));
-    dataZoomed = computed(() => (this.activeItemTransform().zoomed ? '' : null), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dataZoomed" }] : /* istanbul ignore next */ []));
-    dataRotated = computed(() => (this.activeItemTransform().rotated ? '' : null), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dataRotated" }] : /* istanbul ignore next */ []));
-    dataFlipped = computed(() => (this.activeItemTransform().flipped ? '' : null), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dataFlipped" }] : /* istanbul ignore next */ []));
-    onNativeFullscreenChange = () => {
-        const active = this.document?.fullscreenElement === this.$el;
-        this.isFullscreenInternal.set(active);
-        if (this.fullscreen() !== undefined && this.fullscreen() !== active) {
-            this.onFullscreenChange.emit(active);
-        }
-        if (this.fullscreenResizeTimer)
-            clearTimeout(this.fullscreenResizeTimer);
-        this.fullscreenResizeTimer = setTimeout(() => {
-            this.fullscreenResizeTimer = null;
-            window.dispatchEvent(new Event('resize'));
-        }, 100);
-    };
-    prevReported = null;
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    registerItem(existingIndex) {
-        if (existingIndex !== null) {
-            if (existingIndex >= this.itemCounter) {
-                this.itemCounter = existingIndex + 1;
-            }
-            return existingIndex;
-        }
-        const newIndex = this.itemCounter;
-        this.itemCounter += 1;
-        return newIndex;
-    }
-    handleNext() {
-        if (this.itemCounter <= 0)
-            return;
-        const newIndex = (this.activeIndex() + 1) % this.itemCounter;
-        this.activeIndex.set(newIndex);
-        this.onActiveIndexChange.emit({ value: newIndex });
-    }
-    handlePrev() {
-        if (this.itemCounter <= 0)
-            return;
-        const newIndex = (this.activeIndex() - 1 + this.itemCounter) % this.itemCounter;
-        this.activeIndex.set(newIndex);
-        this.onActiveIndexChange.emit({ value: newIndex });
-    }
-    selectItem(index) {
-        if (index < 0 || index >= this.itemCounter)
-            return;
-        this.activeIndex.set(index);
-        this.onActiveIndexChange.emit({ value: index });
-    }
-    dispatchAction(type) {
-        this.pendingAction.set({ type, timestamp: Date.now() });
-    }
-    clearPendingAction() {
-        this.pendingAction.set(null);
-    }
-    constructor() {
-        super();
-        effect(() => {
-            const fullscreenActive = this.fullscreen();
-            if (fullscreenActive === undefined || isPlatformServer(this.platformId))
-                return;
-            const el = this.$el;
-            if (!el || !this.document)
-                return;
-            const isNativeFullscreen = this.document.fullscreenElement === el;
-            if (fullscreenActive && !isNativeFullscreen) {
-                el.requestFullscreen?.()?.catch(() => { });
-            }
-            else if (!fullscreenActive && this.document.fullscreenElement) {
-                this.document.exitFullscreen?.()?.catch(() => { });
-            }
-        });
-    }
-    onInit() {
-        super.onInit();
-        if (!isPlatformServer(this.platformId)) {
-            this.document?.addEventListener('fullscreenchange', this.onNativeFullscreenChange);
-        }
-    }
-    onDestroy() {
-        this.destroyed = true;
-        if (this.fullscreenResizeTimer) {
-            clearTimeout(this.fullscreenResizeTimer);
-            this.fullscreenResizeTimer = null;
-        }
-        this.document?.removeEventListener('fullscreenchange', this.onNativeFullscreenChange);
-        if (this.document?.fullscreenElement === this.$el) {
-            this.document.exitFullscreen?.().catch(() => { });
-        }
-        super.onDestroy();
-    }
-    handleKeyDown(event) {
-        if (event.key === 'ArrowRight') {
-            event.preventDefault();
-            this.handleNext();
-        }
-        else if (event.key === 'ArrowLeft') {
-            event.preventDefault();
-            this.handlePrev();
-        }
-        else if (event.key === 'Escape' && this.closeOnEscape() && this.isFullscreen()) {
-            event.preventDefault();
-            this.toggleFullScreen();
-        }
-    }
-    toggleFullScreen() {
-        if (this.fullscreen() !== undefined) {
-            this.onFullscreenChange.emit(!this.fullscreen());
-            return;
-        }
-        const el = this.$el;
-        if (!el || isPlatformServer(this.platformId))
-            return;
-        if (this.document?.fullscreenElement) {
-            this.document.exitFullscreen?.();
-        }
-        else {
-            el.requestFullscreen?.();
-        }
-    }
-    reportItemState(itemState) {
-        if (this.destroyed)
-            return;
-        this.activeItemTransform.set({ zoomed: itemState.zoomed, rotated: itemState.rotated, flipped: itemState.flipped });
-        const prev = this.prevReported;
-        if (!prev || prev.scale !== itemState.scale)
-            this.onZoomChange.emit(itemState.scale);
-        if (!prev || prev.rotation !== itemState.rotation)
-            this.onRotateChange.emit(itemState.rotation);
-        if (!prev || prev.flip.x !== itemState.flip.x || prev.flip.y !== itemState.flip.y)
-            this.onFlipChange.emit(itemState.flip);
-        this.prevReported = { scale: itemState.scale, rotation: itemState.rotation, flip: itemState.flip };
-    }
-    handleClickAction(action) {
-        if (!action)
-            return;
-        const actionMap = {
-            zoomIn: () => this.dispatchAction('zoom-in'),
-            zoomOut: () => this.dispatchAction('zoom-out'),
-            rotateLeft: () => this.dispatchAction('rotate-left'),
-            rotateRight: () => this.dispatchAction('rotate-right'),
-            flipX: () => this.dispatchAction('flip-x'),
-            flipY: () => this.dispatchAction('flip-y'),
-            download: () => this.dispatchAction('download'),
-            next: () => this.handleNext(),
-            prev: () => this.handlePrev(),
-            toggleFullScreen: () => this.toggleFullScreen()
-        };
-        actionMap[action]?.();
-    }
-    setContentEl(el) {
-        this.contentEl.set(el);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Gallery, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: Gallery, isStandalone: true, selector: "p-gallery", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", onActiveIndexChange: "onActiveIndexChange", onFullscreenChange: "onFullscreenChange", onZoomChange: "onZoomChange", onRotateChange: "onRotateChange", onFlipChange: "onFlipChange" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "handleKeyDown($event)" }, properties: { "class": "cx('root')", "attr.data-scope": "'gallery'", "attr.data-part": "'root'", "attr.data-fullscreen": "dataFullscreen()", "attr.data-zoomed": "dataZoomed()", "attr.data-rotated": "dataRotated()", "attr.data-flipped": "dataFlipped()" } }, providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: Gallery }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Gallery, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'p-gallery',
-                    standalone: true,
-                    imports: [BindModule],
-                    template: `<ng-content></ng-content>`,
-                    providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: Gallery }],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: {
-                        '[class]': "cx('root')",
-                        tabindex: '0',
-                        '[attr.data-scope]': "'gallery'",
-                        '[attr.data-part]': "'root'",
-                        '[attr.data-fullscreen]': 'dataFullscreen()',
-                        '[attr.data-zoomed]': 'dataZoomed()',
-                        '[attr.data-rotated]': 'dataRotated()',
-                        '[attr.data-flipped]': 'dataFlipped()',
-                        '(keydown)': 'handleKeyDown($event)'
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }], ctorParameters: () => [], propDecorators: { activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], onActiveIndexChange: [{ type: i0.Output, args: ["onActiveIndexChange"] }], onFullscreenChange: [{ type: i0.Output, args: ["onFullscreenChange"] }], onZoomChange: [{ type: i0.Output, args: ["onZoomChange"] }], onRotateChange: [{ type: i0.Output, args: ["onRotateChange"] }], onFlipChange: [{ type: i0.Output, args: ["onFlipChange"] }] } });
-class GalleryModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.5", ngImport: i0, type: GalleryModule, imports: [Gallery, GalleryItem,
-            GalleryHeader,
-            GalleryContent,
-            GalleryFooter,
-            GalleryBackdrop,
-            GalleryToolbar,
-            GalleryToolbarItem,
-            GalleryPrev,
-            GalleryNext,
-            GalleryZoomIn,
-            GalleryZoomOut,
-            GalleryZoomToggle,
-            GalleryRotateLeft,
-            GalleryRotateRight,
-            GalleryFlipX,
-            GalleryFlipY,
-            GalleryFullScreen,
-            GalleryDownload,
-            GalleryThumbnail,
-            GalleryThumbnailContent,
-            GalleryThumbnailItem,
-            SharedModule], exports: [Gallery, GalleryItem,
-            GalleryHeader,
-            GalleryContent,
-            GalleryFooter,
-            GalleryBackdrop,
-            GalleryToolbar,
-            GalleryToolbarItem,
-            GalleryPrev,
-            GalleryNext,
-            GalleryZoomIn,
-            GalleryZoomOut,
-            GalleryZoomToggle,
-            GalleryRotateLeft,
-            GalleryRotateRight,
-            GalleryFlipX,
-            GalleryFlipY,
-            GalleryFullScreen,
-            GalleryDownload,
-            GalleryThumbnail,
-            GalleryThumbnailContent,
-            GalleryThumbnailItem,
-            SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryModule, imports: [Gallery,
-            GalleryItem,
-            GalleryHeader,
-            GalleryContent,
-            GalleryFooter,
-            GalleryBackdrop,
-            GalleryToolbar,
-            GalleryToolbarItem,
-            GalleryThumbnail,
-            GalleryThumbnailContent,
-            SharedModule, SharedModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: GalleryModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        Gallery,
-                        GalleryItem,
-                        GalleryHeader,
-                        GalleryContent,
-                        GalleryFooter,
-                        GalleryBackdrop,
-                        GalleryToolbar,
-                        GalleryToolbarItem,
-                        GalleryPrev,
-                        GalleryNext,
-                        GalleryZoomIn,
-                        GalleryZoomOut,
-                        GalleryZoomToggle,
-                        GalleryRotateLeft,
-                        GalleryRotateRight,
-                        GalleryFlipX,
-                        GalleryFlipY,
-                        GalleryFullScreen,
-                        GalleryDownload,
-                        GalleryThumbnail,
-                        GalleryThumbnailContent,
-                        GalleryThumbnailItem,
-                        SharedModule
-                    ],
-                    exports: [
-                        Gallery,
-                        GalleryItem,
-                        GalleryHeader,
-                        GalleryContent,
-                        GalleryFooter,
-                        GalleryBackdrop,
-                        GalleryToolbar,
-                        GalleryToolbarItem,
-                        GalleryPrev,
-                        GalleryNext,
-                        GalleryZoomIn,
-                        GalleryZoomOut,
-                        GalleryZoomToggle,
-                        GalleryRotateLeft,
-                        GalleryRotateRight,
-                        GalleryFlipX,
-                        GalleryFlipY,
-                        GalleryFullScreen,
-                        GalleryDownload,
-                        GalleryThumbnail,
-                        GalleryThumbnailContent,
-                        GalleryThumbnailItem,
-                        SharedModule
-                    ]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+			providers: [{
+				provide: PARENT_INSTANCE,
+				useExisting: GalleryThumbnail
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				"[class]": "gallery.cx('thumbnail')",
+				"[attr.data-scope]": "'gallery'",
+				"[attr.data-part]": "'thumbnail'"
+			},
+			hostDirectives: [Bind]
+		}]
+	}],
+	propDecorators: {
+		autoSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autoSize",
+				required: false
+			}]
+		}],
+		loop: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loop",
+				required: false
+			}]
+		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
+		spacing: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "spacing",
+				required: false
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		snapType: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "snapType",
+				required: false
+			}]
+		}],
+		slidesPerPage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "slidesPerPage",
+				required: false
+			}]
+		}],
+		thumbnailItems: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => GalleryThumbnailItem), {
+				descendants: true,
+				isSignal: true
+			}]
+		}]
+	}
+});
+var GalleryThumbnailContent = class GalleryThumbnailContent extends BaseComponent {
+	componentName = "GalleryThumbnailContent";
+	bindDirectiveInstance = inject(Bind, { self: true });
+	gallery = inject(Gallery);
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryThumbnailContent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: GalleryThumbnailContent,
+		isStandalone: true,
+		selector: "p-gallery-thumbnail-content",
+		host: { properties: {
+			"class": "gallery.cx('thumbnailContent')",
+			"attr.data-scope": "'gallery'",
+			"attr.data-part": "'thumbnailContent'"
+		} },
+		providers: [{
+			provide: PARENT_INSTANCE,
+			useExisting: GalleryThumbnailContent
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: `<ng-content></ng-content>`,
+		isInline: true,
+		dependencies: [{
+			kind: "ngmodule",
+			type: BindModule
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GalleryThumbnailContent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "p-gallery-thumbnail-content",
+			standalone: true,
+			imports: [BindModule],
+			template: `<ng-content></ng-content>`,
+			providers: [{
+				provide: PARENT_INSTANCE,
+				useExisting: GalleryThumbnailContent
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				"[class]": "gallery.cx('thumbnailContent')",
+				"[attr.data-scope]": "'gallery'",
+				"[attr.data-part]": "'thumbnailContent'"
+			},
+			hostDirectives: [Bind]
+		}]
+	}]
+});
+var Gallery = class Gallery extends BaseComponent {
+	componentName = "Gallery";
+	bindDirectiveInstance = inject(Bind, { self: true });
+	activeIndex = model(0, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
+	fullscreen = input(void 0, {
+		...ngDevMode ? { debugName: "fullscreen" } : /* istanbul ignore next */ {},
+		transform: (value) => value === void 0 ? void 0 : booleanAttribute(value)
+	});
+	closeOnEscape = input(true, {
+		...ngDevMode ? { debugName: "closeOnEscape" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	onActiveIndexChange = output();
+	onFullscreenChange = output();
+	onZoomChange = output();
+	onRotateChange = output();
+	onFlipChange = output();
+	_componentStyle = inject(GalleryStyle);
+	isFullscreenInternal = signal(false, ...ngDevMode ? [{ debugName: "isFullscreenInternal" }] : /* istanbul ignore next */ []);
+	fullscreenResizeTimer = null;
+	destroyed = false;
+	isFullscreen = computed(() => this.fullscreen() ?? this.isFullscreenInternal(), ...ngDevMode ? [{ debugName: "isFullscreen" }] : /* istanbul ignore next */ []);
+	activeItemTransform = signal({
+		zoomed: false,
+		rotated: false,
+		flipped: false
+	}, ...ngDevMode ? [{ debugName: "activeItemTransform" }] : /* istanbul ignore next */ []);
+	pendingAction = signal(null, ...ngDevMode ? [{ debugName: "pendingAction" }] : /* istanbul ignore next */ []);
+	itemCounter = 0;
+	contentEl = signal(null, ...ngDevMode ? [{ debugName: "contentEl" }] : /* istanbul ignore next */ []);
+	dataFullscreen = computed(() => this.isFullscreen() ? "" : null, ...ngDevMode ? [{ debugName: "dataFullscreen" }] : /* istanbul ignore next */ []);
+	dataZoomed = computed(() => this.activeItemTransform().zoomed ? "" : null, ...ngDevMode ? [{ debugName: "dataZoomed" }] : /* istanbul ignore next */ []);
+	dataRotated = computed(() => this.activeItemTransform().rotated ? "" : null, ...ngDevMode ? [{ debugName: "dataRotated" }] : /* istanbul ignore next */ []);
+	dataFlipped = computed(() => this.activeItemTransform().flipped ? "" : null, ...ngDevMode ? [{ debugName: "dataFlipped" }] : /* istanbul ignore next */ []);
+	onNativeFullscreenChange = () => {
+		const active = this.document?.fullscreenElement === this.$el;
+		this.isFullscreenInternal.set(active);
+		if (this.fullscreen() !== void 0 && this.fullscreen() !== active) this.onFullscreenChange.emit(active);
+		if (this.fullscreenResizeTimer) clearTimeout(this.fullscreenResizeTimer);
+		this.fullscreenResizeTimer = setTimeout(() => {
+			this.fullscreenResizeTimer = null;
+			window.dispatchEvent(new Event("resize"));
+		}, 100);
+	};
+	prevReported = null;
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	registerItem(existingIndex) {
+		if (existingIndex !== null) {
+			if (existingIndex >= this.itemCounter) this.itemCounter = existingIndex + 1;
+			return existingIndex;
+		}
+		const newIndex = this.itemCounter;
+		this.itemCounter += 1;
+		return newIndex;
+	}
+	handleNext() {
+		if (this.itemCounter <= 0) return;
+		const newIndex = (this.activeIndex() + 1) % this.itemCounter;
+		this.activeIndex.set(newIndex);
+		this.onActiveIndexChange.emit({ value: newIndex });
+	}
+	handlePrev() {
+		if (this.itemCounter <= 0) return;
+		const newIndex = (this.activeIndex() - 1 + this.itemCounter) % this.itemCounter;
+		this.activeIndex.set(newIndex);
+		this.onActiveIndexChange.emit({ value: newIndex });
+	}
+	selectItem(index) {
+		if (index < 0 || index >= this.itemCounter) return;
+		this.activeIndex.set(index);
+		this.onActiveIndexChange.emit({ value: index });
+	}
+	dispatchAction(type) {
+		this.pendingAction.set({
+			type,
+			timestamp: Date.now()
+		});
+	}
+	clearPendingAction() {
+		this.pendingAction.set(null);
+	}
+	constructor() {
+		super();
+		effect(() => {
+			const fullscreenActive = this.fullscreen();
+			if (fullscreenActive === void 0 || isPlatformServer(this.platformId)) return;
+			const el = this.$el;
+			if (!el || !this.document) return;
+			const isNativeFullscreen = this.document.fullscreenElement === el;
+			if (fullscreenActive && !isNativeFullscreen) el.requestFullscreen?.()?.catch(() => {});
+			else if (!fullscreenActive && this.document.fullscreenElement) this.document.exitFullscreen?.()?.catch(() => {});
+		});
+	}
+	onInit() {
+		super.onInit();
+		if (!isPlatformServer(this.platformId)) this.document?.addEventListener("fullscreenchange", this.onNativeFullscreenChange);
+	}
+	onDestroy() {
+		this.destroyed = true;
+		if (this.fullscreenResizeTimer) {
+			clearTimeout(this.fullscreenResizeTimer);
+			this.fullscreenResizeTimer = null;
+		}
+		this.document?.removeEventListener("fullscreenchange", this.onNativeFullscreenChange);
+		if (this.document?.fullscreenElement === this.$el) this.document.exitFullscreen?.().catch(() => {});
+		super.onDestroy();
+	}
+	handleKeyDown(event) {
+		if (event.key === "ArrowRight") {
+			event.preventDefault();
+			this.handleNext();
+		} else if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			this.handlePrev();
+		} else if (event.key === "Escape" && this.closeOnEscape() && this.isFullscreen()) {
+			event.preventDefault();
+			this.toggleFullScreen();
+		}
+	}
+	toggleFullScreen() {
+		if (this.fullscreen() !== void 0) {
+			this.onFullscreenChange.emit(!this.fullscreen());
+			return;
+		}
+		const el = this.$el;
+		if (!el || isPlatformServer(this.platformId)) return;
+		if (this.document?.fullscreenElement) this.document.exitFullscreen?.();
+		else el.requestFullscreen?.();
+	}
+	reportItemState(itemState) {
+		if (this.destroyed) return;
+		this.activeItemTransform.set({
+			zoomed: itemState.zoomed,
+			rotated: itemState.rotated,
+			flipped: itemState.flipped
+		});
+		const prev = this.prevReported;
+		if (!prev || prev.scale !== itemState.scale) this.onZoomChange.emit(itemState.scale);
+		if (!prev || prev.rotation !== itemState.rotation) this.onRotateChange.emit(itemState.rotation);
+		if (!prev || prev.flip.x !== itemState.flip.x || prev.flip.y !== itemState.flip.y) this.onFlipChange.emit(itemState.flip);
+		this.prevReported = {
+			scale: itemState.scale,
+			rotation: itemState.rotation,
+			flip: itemState.flip
+		};
+	}
+	handleClickAction(action) {
+		if (!action) return;
+		({
+			zoomIn: () => this.dispatchAction("zoom-in"),
+			zoomOut: () => this.dispatchAction("zoom-out"),
+			rotateLeft: () => this.dispatchAction("rotate-left"),
+			rotateRight: () => this.dispatchAction("rotate-right"),
+			flipX: () => this.dispatchAction("flip-x"),
+			flipY: () => this.dispatchAction("flip-y"),
+			download: () => this.dispatchAction("download"),
+			next: () => this.handleNext(),
+			prev: () => this.handlePrev(),
+			toggleFullScreen: () => this.toggleFullScreen()
+		})[action]?.();
+	}
+	setContentEl(el) {
+		this.contentEl.set(el);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Gallery,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: Gallery,
+		isStandalone: true,
+		selector: "p-gallery",
+		inputs: {
+			activeIndex: {
+				classPropertyName: "activeIndex",
+				publicName: "activeIndex",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			fullscreen: {
+				classPropertyName: "fullscreen",
+				publicName: "fullscreen",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeOnEscape: {
+				classPropertyName: "closeOnEscape",
+				publicName: "closeOnEscape",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			activeIndex: "activeIndexChange",
+			onActiveIndexChange: "onActiveIndexChange",
+			onFullscreenChange: "onFullscreenChange",
+			onZoomChange: "onZoomChange",
+			onRotateChange: "onRotateChange",
+			onFlipChange: "onFlipChange"
+		},
+		host: {
+			attributes: { "tabindex": "0" },
+			listeners: { "keydown": "handleKeyDown($event)" },
+			properties: {
+				"class": "cx('root')",
+				"attr.data-scope": "'gallery'",
+				"attr.data-part": "'root'",
+				"attr.data-fullscreen": "dataFullscreen()",
+				"attr.data-zoomed": "dataZoomed()",
+				"attr.data-rotated": "dataRotated()",
+				"attr.data-flipped": "dataFlipped()"
+			}
+		},
+		providers: [GalleryStyle, {
+			provide: PARENT_INSTANCE,
+			useExisting: Gallery
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: `<ng-content></ng-content>`,
+		isInline: true,
+		dependencies: [{
+			kind: "ngmodule",
+			type: BindModule
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: Gallery,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "p-gallery",
+			standalone: true,
+			imports: [BindModule],
+			template: `<ng-content></ng-content>`,
+			providers: [GalleryStyle, {
+				provide: PARENT_INSTANCE,
+				useExisting: Gallery
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				"[class]": "cx('root')",
+				tabindex: "0",
+				"[attr.data-scope]": "'gallery'",
+				"[attr.data-part]": "'root'",
+				"[attr.data-fullscreen]": "dataFullscreen()",
+				"[attr.data-zoomed]": "dataZoomed()",
+				"[attr.data-rotated]": "dataRotated()",
+				"[attr.data-flipped]": "dataFlipped()",
+				"(keydown)": "handleKeyDown($event)"
+			},
+			hostDirectives: [Bind]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		activeIndex: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeIndex",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["activeIndexChange"]
+		}],
+		fullscreen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fullscreen",
+				required: false
+			}]
+		}],
+		closeOnEscape: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeOnEscape",
+				required: false
+			}]
+		}],
+		onActiveIndexChange: [{
+			type: i0.Output,
+			args: ["onActiveIndexChange"]
+		}],
+		onFullscreenChange: [{
+			type: i0.Output,
+			args: ["onFullscreenChange"]
+		}],
+		onZoomChange: [{
+			type: i0.Output,
+			args: ["onZoomChange"]
+		}],
+		onRotateChange: [{
+			type: i0.Output,
+			args: ["onRotateChange"]
+		}],
+		onFlipChange: [{
+			type: i0.Output,
+			args: ["onFlipChange"]
+		}]
+	}
+});
+var GalleryModule = class GalleryModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryModule,
+		imports: [
+			Gallery,
+			GalleryItem,
+			GalleryHeader,
+			GalleryContent,
+			GalleryFooter,
+			GalleryBackdrop,
+			GalleryToolbar,
+			GalleryToolbarItem,
+			GalleryPrev,
+			GalleryNext,
+			GalleryZoomIn,
+			GalleryZoomOut,
+			GalleryZoomToggle,
+			GalleryRotateLeft,
+			GalleryRotateRight,
+			GalleryFlipX,
+			GalleryFlipY,
+			GalleryFullScreen,
+			GalleryDownload,
+			GalleryThumbnail,
+			GalleryThumbnailContent,
+			GalleryThumbnailItem,
+			SharedModule
+		],
+		exports: [
+			Gallery,
+			GalleryItem,
+			GalleryHeader,
+			GalleryContent,
+			GalleryFooter,
+			GalleryBackdrop,
+			GalleryToolbar,
+			GalleryToolbarItem,
+			GalleryPrev,
+			GalleryNext,
+			GalleryZoomIn,
+			GalleryZoomOut,
+			GalleryZoomToggle,
+			GalleryRotateLeft,
+			GalleryRotateRight,
+			GalleryFlipX,
+			GalleryFlipY,
+			GalleryFullScreen,
+			GalleryDownload,
+			GalleryThumbnail,
+			GalleryThumbnailContent,
+			GalleryThumbnailItem,
+			SharedModule
+		]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GalleryModule,
+		imports: [
+			Gallery,
+			GalleryItem,
+			GalleryHeader,
+			GalleryContent,
+			GalleryFooter,
+			GalleryBackdrop,
+			GalleryToolbar,
+			GalleryToolbarItem,
+			GalleryThumbnail,
+			GalleryThumbnailContent,
+			SharedModule,
+			SharedModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GalleryModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				Gallery,
+				GalleryItem,
+				GalleryHeader,
+				GalleryContent,
+				GalleryFooter,
+				GalleryBackdrop,
+				GalleryToolbar,
+				GalleryToolbarItem,
+				GalleryPrev,
+				GalleryNext,
+				GalleryZoomIn,
+				GalleryZoomOut,
+				GalleryZoomToggle,
+				GalleryRotateLeft,
+				GalleryRotateRight,
+				GalleryFlipX,
+				GalleryFlipY,
+				GalleryFullScreen,
+				GalleryDownload,
+				GalleryThumbnail,
+				GalleryThumbnailContent,
+				GalleryThumbnailItem,
+				SharedModule
+			],
+			exports: [
+				Gallery,
+				GalleryItem,
+				GalleryHeader,
+				GalleryContent,
+				GalleryFooter,
+				GalleryBackdrop,
+				GalleryToolbar,
+				GalleryToolbarItem,
+				GalleryPrev,
+				GalleryNext,
+				GalleryZoomIn,
+				GalleryZoomOut,
+				GalleryZoomToggle,
+				GalleryRotateLeft,
+				GalleryRotateRight,
+				GalleryFlipX,
+				GalleryFlipY,
+				GalleryFullScreen,
+				GalleryDownload,
+				GalleryThumbnail,
+				GalleryThumbnailContent,
+				GalleryThumbnailItem,
+				SharedModule
+			]
+		}]
+	}]
+});
 export { Gallery, GalleryBackdrop, GalleryClasses, GalleryContent, GalleryDownload, GalleryFlipX, GalleryFlipY, GalleryFooter, GalleryFullScreen, GalleryHeader, GalleryItem, GalleryModule, GalleryNext, GalleryPrev, GalleryRotateLeft, GalleryRotateRight, GalleryStyle, GalleryThumbnail, GalleryThumbnailContent, GalleryThumbnailItem, GalleryToolbar, GalleryToolbarItem, GalleryZoomIn, GalleryZoomOut, GalleryZoomToggle };
-//# sourceMappingURL=primeng-gallery.mjs.map
+
+//# sourceMappingURL=primeng-gallery.mjs.map