primeng/fesm2022/primeng-gallery.mjs.map

PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,

{"version":3,"file":"primeng-gallery.mjs","sources":["../../src/gallery/style/gallerystyle.ts","../../src/gallery/gallery-item.ts","../../src/gallery/gallery-header.ts","../../src/gallery/gallery-content.ts","../../src/gallery/gallery-footer.ts","../../src/gallery/gallery-backdrop.ts","../../src/gallery/gallery-toolbar.ts","../../src/gallery/gallery-toolbar-item.ts","../../src/gallery/gallery-prev.ts","../../src/gallery/gallery-next.ts","../../src/gallery/gallery-zoom-in.ts","../../src/gallery/gallery-zoom-out.ts","../../src/gallery/gallery-zoom-toggle.ts","../../src/gallery/gallery-rotate-left.ts","../../src/gallery/gallery-rotate-right.ts","../../src/gallery/gallery-flip-x.ts","../../src/gallery/gallery-flip-y.ts","../../src/gallery/gallery-full-screen.ts","../../src/gallery/gallery-download.ts","../../src/gallery/gallery-thumbnail-item.ts","../../src/gallery/gallery-thumbnail.ts","../../src/gallery/gallery-thumbnail-content.ts","../../src/gallery/gallery.ts","../../src/gallery/primeng-gallery.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { style } from '@primeuix/styles/gallery';\nimport { BaseStyle } from 'primeng/base';\n\nconst classes = {\n    root: 'p-gallery',\n    backdrop: 'p-gallery-backdrop',\n    header: 'p-gallery-header',\n    footer: 'p-gallery-footer',\n    content: 'p-gallery-content',\n    item: 'p-gallery-item',\n    next: 'p-gallery-next',\n    prev: 'p-gallery-prev',\n    toolbar: 'p-gallery-toolbar',\n    toolbarItem: 'p-gallery-toolbar-item',\n    zoomIn: 'p-gallery-action',\n    zoomOut: 'p-gallery-action',\n    zoomToggle: 'p-gallery-action',\n    rotateLeft: 'p-gallery-action',\n    rotateRight: 'p-gallery-action',\n    flipX: 'p-gallery-action',\n    flipY: 'p-gallery-action',\n    download: 'p-gallery-action',\n    fullScreen: 'p-gallery-action',\n    thumbnail: 'p-gallery-thumbnail',\n    thumbnailContent: 'p-gallery-thumbnail-content',\n    thumbnailItem: 'p-gallery-thumbnail-item'\n};\n\n@Injectable()\nexport class GalleryStyle extends BaseStyle {\n    name = 'gallery';\n\n    style = style;\n\n    classes = classes;\n}\n\n/**\n *\n * Gallery groups a collection of contents in items.\n *\n * [Live Demo](https://www.primeng.org/gallery/)\n *\n * @module gallerystyle\n *\n */\nexport enum GalleryClasses {\n    /**\n     * Class name of the root element\n     */\n    root = 'p-gallery',\n    /**\n     * Class name of the backdrop element\n     */\n    backdrop = 'p-gallery-backdrop',\n    /**\n     * Class name of the header element\n     */\n    header = 'p-gallery-header',\n    /**\n     * Class name of the footer element\n     */\n    footer = 'p-gallery-footer',\n    /**\n     * Class name of the content element\n     */\n    content = 'p-gallery-content',\n    /**\n     * Class name of the item element\n     */\n    item = 'p-gallery-item',\n    /**\n     * Class name of the next button element\n     */\n    next = 'p-gallery-next',\n    /**\n     * Class name of the prev button element\n     */\n    prev = 'p-gallery-prev',\n    /**\n     * Class name of the toolbar element\n     */\n    toolbar = 'p-gallery-toolbar',\n    /**\n     * Class name of the toolbar item element\n     */\n    toolbarItem = 'p-gallery-toolbar-item',\n    /**\n     * Class name of the action element\n     */\n    action = 'p-gallery-action',\n    /**\n     * Class name of the thumbnail element\n     */\n    thumbnail = 'p-gallery-thumbnail',\n    /**\n     * Class name of the thumbnail content element\n     */\n    thumbnailContent = 'p-gallery-thumbnail-content',\n    /**\n     * Class name of the thumbnail item element\n     */\n    thumbnailItem = 'p-gallery-thumbnail-item'\n}\n\nexport interface GalleryStyleType extends BaseStyle {}\n","import { afterNextRender, ChangeDetectionStrategy, Component, computed, DestroyRef, effect, inject, input, numberAttribute, signal, ViewEncapsulation } from '@angular/core';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind, BindModule } from 'primeng/bind';\nimport type { GalleryItemPassThrough } from 'primeng/types/gallery';\nimport { Gallery } from './gallery';\n\n/**\n * GalleryItem represents an individual item in the gallery.\n * @group Components\n */\n@Component({\n    selector: 'p-gallery-item',\n    standalone: true,\n    imports: [BindModule],\n    template: `<ng-content></ng-content>`,\n    providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryItem }],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        '[class]': \"gallery.cx('item')\",\n        '[attr.data-scope]': \"'gallery'\",\n        '[attr.data-part]': \"'item'\",\n        '[attr.data-index]': 'index()',\n        '[attr.data-active]': \"isActive() ? '' : null\",\n        '[attr.data-rotating]': \"isRotating() ? '' : null\",\n        '[style.--px-position-x]': 'stylePositionX()',\n        '[style.--px-position-y]': 'stylePositionY()',\n        '[style.--px-scale]': 'scale()',\n        '[style.--px-rotation]': 'styleRotation()',\n        '[style.--px-flip-x]': 'styleFlipX()',\n        '[style.--px-flip-y]': 'styleFlipY()',\n        '(click)': 'handleClick($event)',\n        '(pointerdown)': 'handlePointerDown($event)',\n        '(pointermove)': 'handlePointerMove($event)',\n        '(pointerup)': 'handlePointerUp($event)',\n        '(dragstart)': 'handleDragStart($event)'\n    },\n    hostDirectives: [Bind]\n})\nexport class GalleryItem extends BaseComponent<GalleryItemPassThrough> {\n    componentName = 'GalleryItem';\n\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    /**\n     * The normal scale of the gallery item.\n     * @group Props\n     * @defaultValue 1\n     */\n    normalScale = input(1, { transform: numberAttribute });\n\n    /**\n     * The zoomed scale of the gallery item.\n     * @group Props\n     * @defaultValue 3\n     */\n    zoomedScale = input(3, { transform: numberAttribute });\n\n    gallery = inject(Gallery);\n\n    private _destroyRef = inject(DestroyRef);\n\n    index = signal(-1);\n\n    isActive = computed(() => this.gallery.activeIndex() === this.index());\n\n    dataActive = computed(() => (this.isActive() ? 'true' : 'false'));\n\n    stylePositionX = computed(() => this.position().x + 'px');\n\n    stylePositionY = computed(() => this.position().y + 'px');\n\n    styleRotation = computed(() => this.rotation() + 'deg');\n\n    styleFlipX = computed(() => this.flip().x);\n\n    styleFlipY = computed(() => this.flip().y);\n\n    position = signal({ x: 0, y: 0 });\n\n    scale = signal(1);\n\n    rotation = signal(0);\n\n    isRotating = signal(false);\n\n    flip = signal({ x: 1, y: 1 });\n\n    private registeredIndex: number | null = null;\n\n    private pointerData = new Map<number, { x: number; y: number }>();\n\n    private pointerStart = { x: 0, y: 0 };\n\n    private initialPinchDistance = 0;\n\n    private initialPinchScale = 1;\n\n    private liveScale = 1;\n\n    private livePosition = { x: 0, y: 0 };\n\n    private isDragging = false;\n\n    private dragStart = { x: 0, y: 0 };\n\n    private hasDragged = false;\n\n    private wheelSyncTimer: ReturnType<typeof setTimeout> | null = null;\n\n    private wheelListener: (() => void) | null = null;\n\n    private resizeListener: (() => void) | null = null;\n\n    private imageLoadListener: (() => void) | null = null;\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            const newIndex = this.gallery.registerItem(this.registeredIndex);\n            this.registeredIndex = newIndex;\n            if (newIndex !== this.index()) {\n                this.index.set(newIndex);\n            }\n            this.setupWheelListener();\n            this.setupResizeListener();\n            this.setupImageLoadListener();\n        });\n\n        // Watch activeIndex to recalculate item size\n        effect(() => {\n            const activeIndex = this.gallery.activeIndex();\n            const idx = this.index();\n            if (activeIndex === idx) {\n                this.calculateItemSize();\n            }\n        });\n\n        // Watch rotation changes to recalculate item size\n        effect(() => {\n            this.rotation(); // track rotation\n            const activeIndex = this.gallery.activeIndex();\n            const idx = this.index();\n            if (activeIndex === idx) {\n                this.calculateItemSize();\n            }\n        });\n\n        // Watch fullscreen changes to recalculate item size\n        effect(() => {\n            this.gallery.isFullscreen(); // track fullscreen\n            const activeIndex = this.gallery.activeIndex();\n            const idx = this.index();\n            if (activeIndex === idx) {\n                this.calculateItemSize();\n            }\n        });\n\n        // Watch pendingAction and execute on active item\n        effect(() => {\n            const action = this.gallery.pendingAction();\n            if (!action || !this.isActive()) return;\n\n            switch (action.type) {\n                case 'zoom-in':\n                    this.zoomIn();\n                    break;\n                case 'zoom-out':\n                    this.zoomOut();\n                    break;\n                case 'rotate-left':\n                    this.rotateLeft();\n                    break;\n                case 'rotate-right':\n                    this.rotateRight();\n                    break;\n                case 'flip-x':\n                    this.flipX();\n                    break;\n                case 'flip-y':\n                    this.flipY();\n                    break;\n                case 'download':\n                    this.download();\n                    break;\n            }\n\n            this.gallery.clearPendingAction();\n        });\n\n        // Report item state to gallery\n        effect(() => {\n            const active = this.isActive();\n            const s = this.scale();\n            const r = this.rotation();\n            const f = this.flip();\n            const ns = this.normalScale();\n            if (active) {\n                this.gallery.reportItemState({\n                    zoomed: s > ns,\n                    rotated: r !== 0,\n                    flipped: f.x === -1 || f.y === -1,\n                    scale: s,\n                    rotation: r,\n                    flip: f\n                });\n            }\n        });\n\n        // Sync liveScale/livePosition with signals (for toolbar-triggered changes)\n        effect(() => {\n            this.liveScale = this.scale();\n        });\n\n        effect(() => {\n            const p = this.position();\n            this.livePosition = { x: p.x, y: p.y };\n        });\n\n        // Reset position when scale <= 1\n        effect(() => {\n            if (this.scale() <= 1) {\n                this.position.set({ x: 0, y: 0 });\n            }\n        });\n\n        this._destroyRef.onDestroy(() => {\n            this.wheelListener?.();\n            this.resizeListener?.();\n            this.imageLoadListener?.();\n            if (this.rotateTimer) {\n                clearTimeout(this.rotateTimer);\n            }\n            if (this.wheelSyncTimer) {\n                clearTimeout(this.wheelSyncTimer);\n            }\n        });\n    }\n\n    onAfterViewChecked() {\n        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));\n    }\n\n    private setupImageLoadListener() {\n        const el = this.$el as HTMLElement;\n        const imageElement = el.querySelector('img') as HTMLImageElement;\n        if (!imageElement) return;\n\n        if (imageElement.complete && imageElement.naturalWidth > 0) {\n            this.calculateItemSize();\n        }\n\n        const handler = () => {\n            this.calculateItemSize();\n        };\n        imageElement.addEventListener('load', handler);\n        this.imageLoadListener = () => imageElement.removeEventListener('load', handler);\n    }\n\n    private setupWheelListener() {\n        const el = this.$el as HTMLElement;\n        const handler = (e: WheelEvent) => {\n            if (!e.ctrlKey || !this.isActive()) return;\n\n            e.preventDefault();\n            el.style.transition = 'none';\n\n            const delta = -e.deltaY;\n            const scaleFactor = 1 + delta * 0.01;\n            const newScale = Math.max(this.normalScale(), Math.min(this.zoomedScale(), this.liveScale * scaleFactor));\n\n            const constraints = this.calculateConstraints(newScale);\n            const constrainedX = Math.max(constraints.minX, Math.min(constraints.maxX, this.livePosition.x));\n            const constrainedY = Math.max(constraints.minY, Math.min(constraints.maxY, this.livePosition.y));\n\n            this.liveScale = newScale;\n            this.livePosition = { x: constrainedX, y: constrainedY };\n\n            el.style.setProperty('--px-scale', `${newScale}`);\n            el.style.setProperty('--px-position-x', `${constrainedX}px`);\n            el.style.setProperty('--px-position-y', `${constrainedY}px`);\n\n            if (this.wheelSyncTimer) {\n                clearTimeout(this.wheelSyncTimer);\n            }\n\n            this.wheelSyncTimer = setTimeout(() => {\n                el.style.transition = '';\n                el.style.cursor = this.liveScale > this.normalScale() ? 'zoom-out' : 'zoom-in';\n                this.scale.set(this.liveScale);\n                this.position.set(this.livePosition);\n                this.wheelSyncTimer = null;\n            }, 150);\n        };\n\n        el.addEventListener('wheel', handler, { passive: false });\n        this.wheelListener = () => el.removeEventListener('wheel', handler);\n    }\n\n    private setupResizeListener() {\n        const handler = () => {\n            if (this.gallery.activeIndex() === this.index()) {\n                this.calculateItemSize();\n            }\n        };\n        window.addEventListener('resize', handler);\n        this.resizeListener = () => window.removeEventListener('resize', handler);\n    }\n\n    calculateItemSize() {\n        const contentEl = this.gallery.contentEl();\n        const el = this.$el as HTMLElement;\n        if (!contentEl || !el) return;\n\n        const contentRect = contentEl.getBoundingClientRect();\n        const imageElement = el.firstElementChild as HTMLImageElement;\n        if (!imageElement) return;\n\n        let naturalWidth = imageElement.naturalWidth || imageElement.offsetWidth;\n        let naturalHeight = imageElement.naturalHeight || imageElement.offsetHeight;\n        if (naturalWidth === 0 || naturalHeight === 0) return;\n\n        const isRotated = Math.abs(this.rotation()) % 180 === 90;\n\n        if (isRotated) {\n            [naturalWidth, naturalHeight] = [naturalHeight, naturalWidth];\n        }\n\n        const naturalAspectRatio = naturalWidth / naturalHeight;\n        const contentAspectRatio = contentRect.width / contentRect.height;\n\n        let targetWidth: number, targetHeight: number;\n\n        if (naturalAspectRatio > contentAspectRatio) {\n            targetWidth = Math.min(contentRect.width * 0.99, naturalWidth);\n            targetHeight = targetWidth / naturalAspectRatio;\n        } else {\n            targetHeight = Math.min(contentRect.height * 0.99, naturalHeight);\n            targetWidth = targetHeight * naturalAspectRatio;\n        }\n\n        if (isRotated) {\n            imageElement.style.width = `${targetHeight}px`;\n            imageElement.style.height = `${targetWidth}px`;\n            el.style.width = `${targetHeight > 0 ? targetHeight : 'auto'}px`;\n            el.style.height = `${targetWidth > 0 ? targetWidth : 'auto'}px`;\n        } else {\n            imageElement.style.width = `${targetWidth}px`;\n            imageElement.style.height = `${targetHeight}px`;\n            el.style.width = `${targetWidth > 0 ? targetWidth : 'auto'}px`;\n            el.style.height = `${targetHeight > 0 ? targetHeight : 'auto'}px`;\n        }\n\n        el.style.aspectRatio = `${naturalWidth / naturalHeight}`;\n    }\n\n    calculateConstraints(targetScale?: number) {\n        const contentEl = this.gallery.contentEl();\n        const el = this.$el as HTMLElement;\n        if (!contentEl || !el) return { minX: 0, maxX: 0, minY: 0, maxY: 0 };\n\n        const contentRect = contentEl.getBoundingClientRect();\n        const scaleToUse = targetScale !== undefined ? targetScale : this.liveScale;\n\n        const itemElement = el.firstElementChild as HTMLElement;\n        if (!itemElement) return { minX: 0, maxX: 0, minY: 0, maxY: 0 };\n\n        let originalWidth = itemElement.offsetWidth;\n        let originalHeight = itemElement.offsetHeight;\n\n        const isRotated = Math.abs(this.rotation()) % 180 === 90;\n        if (isRotated) {\n            [originalWidth, originalHeight] = [originalHeight, originalWidth];\n        }\n\n        const scaledWidth = originalWidth * scaleToUse;\n        const scaledHeight = originalHeight * scaleToUse;\n\n        const contentCenterX = contentRect.width / 2;\n        const contentCenterY = contentRect.height / 2;\n\n        const halfScaledWidth = scaledWidth / 2;\n        const halfScaledHeight = scaledHeight / 2;\n\n        const maxX = halfScaledWidth > contentCenterX ? halfScaledWidth - contentCenterX : 0;\n        const minX = halfScaledWidth > contentCenterX ? -(halfScaledWidth - contentCenterX) : 0;\n\n        const maxY = halfScaledHeight > contentCenterY ? halfScaledHeight - contentCenterY : 0;\n        const minY = halfScaledHeight > contentCenterY ? -(halfScaledHeight - contentCenterY) : 0;\n\n        return { minX, maxX, minY, maxY };\n    }\n\n    zoomIn() {\n        this.scale.set(this.zoomedScale());\n        const el = this.$el as HTMLElement;\n        if (el) {\n            el.style.cursor = 'zoom-out';\n        }\n    }\n\n    zoomOut() {\n        this.scale.set(this.normalScale());\n        this.position.set({ x: 0, y: 0 });\n        const el = this.$el as HTMLElement;\n        if (el) {\n            el.style.cursor = 'zoom-in';\n        }\n    }\n\n    rotateLeft() {\n        this.markRotating();\n        this.rotation.update((prev) => prev - 90);\n    }\n\n    rotateRight() {\n        this.markRotating();\n        this.rotation.update((prev) => prev + 90);\n    }\n\n    private rotateTimer: ReturnType<typeof setTimeout> | null = null;\n\n    private markRotating() {\n        this.isRotating.set(true);\n        const el = this.$el as HTMLElement | null;\n        if (el) el.style.transition = '';\n        if (this.rotateTimer) clearTimeout(this.rotateTimer);\n        this.rotateTimer = setTimeout(() => this.isRotating.set(false), 300);\n    }\n\n    flipX() {\n        this.flip.update((prev) => ({ ...prev, x: Math.sign(prev.x) * -1 }));\n    }\n\n    flipY() {\n        this.flip.update((prev) => ({ ...prev, y: Math.sign(prev.y) * -1 }));\n    }\n\n    download() {\n        const el = this.$el as HTMLElement;\n        if (!el) return;\n\n        const imageElement = el.querySelector('img') as HTMLImageElement;\n        if (!imageElement || !imageElement.src) return;\n\n        const link = document.createElement('a');\n        link.href = imageElement.src;\n\n        const urlParts = imageElement.src.split('/');\n        const filename = urlParts[urlParts.length - 1] || 'image.jpg';\n\n        link.download = filename;\n        link.target = '_blank';\n        document.body.appendChild(link);\n        link.click();\n        document.body.removeChild(link);\n    }\n\n    handleClick(e: MouseEvent) {\n        if (this.hasDragged) {\n            this.hasDragged = false;\n            return;\n        }\n\n        const el = this.$el as HTMLElement;\n\n        if (this.liveScale === this.normalScale()) {\n            if (el) {\n                const itemRect = el.getBoundingClientRect();\n                const itemCenterX = itemRect.width / 2;\n                const itemCenterY = itemRect.height / 2;\n\n                const clickX = e.clientX - itemRect.left;\n                const clickY = e.clientY - itemRect.top;\n\n                const offsetX = itemCenterX - clickX;\n                const offsetY = itemCenterY - clickY;\n\n                const zoomedScale = this.zoomedScale();\n                const zoomOffsetX = offsetX * (zoomedScale - 1);\n                const zoomOffsetY = offsetY * (zoomedScale - 1);\n\n                const constraints = this.calculateConstraints(zoomedScale);\n                const constrainedX = Math.max(constraints.minX, Math.min(constraints.maxX, zoomOffsetX));\n                const constrainedY = Math.max(constraints.minY, Math.min(constraints.maxY, zoomOffsetY));\n\n                this.position.set({ x: constrainedX, y: constrainedY });\n            }\n            this.zoomIn();\n        } else {\n            this.zoomOut();\n        }\n    }\n\n    handleDragStart(e: DragEvent) {\n        e.preventDefault();\n    }\n\n    handlePointerDown(e: PointerEvent) {\n        (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n        this.pointerData.set(e.pointerId, { x: e.clientX, y: e.clientY });\n        this.pointerStart = { x: e.clientX, y: e.clientY };\n\n        if (e.pointerType === 'touch' && this.pointerData.size >= 2) {\n            this.isDragging = false;\n            this.initialPinchDistance = 0;\n            this.initialPinchScale = this.liveScale;\n        } else if (this.liveScale > 1) {\n            if (e.pointerType === 'mouse' || (e.pointerType === 'touch' && this.pointerData.size === 1)) {\n                this.isDragging = true;\n                this.dragStart = { x: e.clientX - this.livePosition.x, y: e.clientY - this.livePosition.y };\n                this.hasDragged = false;\n            }\n        }\n    }\n\n    handlePointerMove(e: PointerEvent) {\n        if (!this.pointerData.has(e.pointerId)) return;\n\n        const el = this.$el as HTMLElement;\n        if (!el) return;\n\n        el.style.transition = 'none';\n\n        if (e.pointerType === 'mouse' && !el.style.cursor) {\n            el.style.cursor = this.liveScale > this.normalScale() ? 'zoom-out' : 'zoom-in';\n        }\n\n        this.pointerData.set(e.pointerId, { x: e.clientX, y: e.clientY });\n\n        const pointers = Array.from(this.pointerData.values());\n\n        if (pointers.length === 2) {\n            const [p1, p2] = pointers;\n            const distance = Math.hypot(p2.x - p1.x, p2.y - p1.y);\n\n            this.hasDragged = true;\n\n            if (this.initialPinchDistance === 0) {\n                this.initialPinchDistance = distance;\n                this.initialPinchScale = this.liveScale;\n            } else {\n                const ratio = distance / this.initialPinchDistance;\n                const newScale = Math.max(this.normalScale(), Math.min(this.zoomedScale(), this.initialPinchScale * ratio));\n\n                const constraints = this.calculateConstraints(newScale);\n                const constrainedX = Math.max(constraints.minX, Math.min(constraints.maxX, this.livePosition.x));\n                const constrainedY = Math.max(constraints.minY, Math.min(constraints.maxY, this.livePosition.y));\n\n                this.liveScale = newScale;\n                this.livePosition = { x: constrainedX, y: constrainedY };\n\n                el.style.setProperty('--px-scale', `${newScale}`);\n                el.style.setProperty('--px-position-x', `${constrainedX}px`);\n                el.style.setProperty('--px-position-y', `${constrainedY}px`);\n            }\n        } else if (pointers.length === 1 && this.isDragging) {\n            const pointer = pointers[0];\n            const newX = pointer.x - this.dragStart.x;\n            const newY = pointer.y - this.dragStart.y;\n            const constraints = this.calculateConstraints(this.liveScale);\n\n            const computedX = Math.max(constraints.minX, Math.min(constraints.maxX, newX));\n            const computedY = Math.max(constraints.minY, Math.min(constraints.maxY, newY));\n\n            this.livePosition = { x: computedX, y: computedY };\n\n            el.style.setProperty('--px-position-x', `${computedX}px`);\n            el.style.setProperty('--px-position-y', `${computedY}px`);\n\n            const distFromStart = Math.hypot(pointer.x - this.pointerStart.x, pointer.y - this.pointerStart.y);\n            if (distFromStart > 5) {\n                this.hasDragged = true;\n            }\n        }\n    }\n\n    handlePointerUp(e: PointerEvent) {\n        const el = this.$el as HTMLElement;\n        if (!el) return;\n\n        el.style.transition = '';\n\n        if (e.pointerType === 'mouse') {\n            el.style.cursor = this.liveScale > this.normalScale() ? 'zoom-out' : 'zoom-in';\n        }\n\n        (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);\n        this.pointerData.delete(e.pointerId);\n\n        if (this.pointerData.size < 2) {\n            this.initialPinchDistance = 0;\n            this.initialPinchScale = 1;\n        }\n\n        if (this.pointerData.size === 0) {\n            this.isDragging = false;\n            this.scale.set(this.liveScale);\n            this.position.set(this.livePosition);\n        }\n    }\n}\n","import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind, BindModule } from 'primeng/bind';\nimport { Gallery } from './gallery';\nimport type { GalleryHeaderPassThrough } from 'primeng/types/gallery';\n\n/**\n * GalleryHeader represents the header section of the gallery.\n * @group Components\n */\n@Component({\n    selector: 'p-gallery-header',\n    standalone: true,\n    imports: [BindModule],\n    template: `<ng-content></ng-content>`,\n    providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryHeader }],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        '[class]': \"gallery.cx('header')\",\n        '[attr.data-scope]': \"'gallery'\",\n        '[attr.data-part]': \"'header'\"\n    },\n    hostDirectives: [Bind]\n})\nexport class GalleryHeader extends BaseComponent<GalleryHeaderPassThrough> {\n    componentName = 'GalleryHeader';\n\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    gallery = inject(Gallery);\n\n    onAfterViewChecked() {\n        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));\n    }\n}\n","import { afterNextRender, ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind, BindModule } from 'primeng/bind';\nimport { Gallery } from './gallery';\nimport type { GalleryContentPassThrough } from 'primeng/types/gallery';\n\n/**\n * GalleryContent represents the main content area of the gallery.\n * @group Components\n */\n@Component({\n    selector: 'p-gallery-content',\n    standalone: true,\n    imports: [BindModule],\n    template: `<ng-content></ng-content>`,\n    providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryContent }],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        '[class]': \"gallery.cx('content')\",\n        '[attr.data-scope]': \"'gallery'\",\n        '[attr.data-part]': \"'content'\"\n    },\n    hostDirectives: [Bind]\n})\nexport class GalleryContent extends BaseComponent<GalleryContentPassThrough> {\n    componentName = 'GalleryContent';\n\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    gallery = inject(Gallery);\n\n    onAfterViewChecked() {\n        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));\n    }\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            this.gallery.setContentEl(this.$el);\n        });\n    }\n}\n","import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind, BindModule } from 'primeng/bind';\nimport { Gallery } from './gallery';\nimport type { GalleryFooterPassThrough } from 'primeng/types/gallery';\n\n/**\n * GalleryFooter represents the footer section of the gallery.\n * @group Components\n */\n@Component({\n    selector: 'p-gallery-footer',\n    standalone: true,\n    imports: [BindModule],\n    template: `<ng-content></ng-content>`,\n    providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryFooter }],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        '[class]': \"gallery.cx('footer')\",\n        '[attr.data-scope]': \"'gallery'\",\n        '[attr.data-part]': \"'footer'\"\n    },\n    hostDirectives: [Bind]\n})\nexport class GalleryFooter extends BaseComponent<GalleryFooterPassThrough> {\n    componentName = 'GalleryFooter';\n\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    gallery = inject(Gallery);\n\n    onAfterViewChecked() {\n        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));\n    }\n}\n","import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind, BindModule } from 'primeng/bind';\nimport { Gallery } from './gallery';\nimport type { GalleryBackdropPassThrough } from 'primeng/types/gallery';\n\n/**\n * GalleryBackdrop represents the backdrop element for fullscreen mode.\n * @group Components\n */\n@Component({\n    selector: 'p-gallery-backdrop',\n    standalone: true,\n    imports: [BindModule],\n    template: `<ng-content></ng-content>`,\n    providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryBackdrop }],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        '[class]': \"gallery.cx('backdrop')\",\n        '[attr.data-scope]': \"'gallery'\",\n        '[attr.data-part]': \"'backdrop'\"\n    },\n    hostDirectives: [Bind]\n})\nexport class GalleryBackdrop extends BaseComponent<GalleryBackdropPassThrough> {\n    componentName = 'GalleryBackdrop';\n\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    gallery = inject(Gallery);\n\n    onAfterViewChecked() {\n        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));\n    }\n}\n","import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind, BindModule } from 'primeng/bind';\nimport { Gallery } from './gallery';\nimport type { GalleryToolbarPassThrough } from 'primeng/types/gallery';\n\n/**\n * GalleryToolbar represents the toolbar container.\n * @group Components\n */\n@Component({\n    selector: 'p-gallery-toolbar',\n    standalone: true,\n    imports: [BindModule],\n    template: `<ng-content></ng-content>`,\n    providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryToolbar }],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        '[class]': \"gallery.cx('toolbar')\",\n        '[attr.data-scope]': \"'gallery'\",\n        '[attr.data-part]': \"'toolbar'\"\n    },\n    hostDirectives: [Bind]\n})\nexport class GalleryToolbar extends BaseComponent<GalleryToolbarPassThrough> {\n    componentName = 'GalleryToolbar';\n\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    gallery = inject(Gallery);\n\n    onAfterViewChecked() {\n        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));\n    }\n}\n","import { ChangeDetectionStrategy, Component, inject, input, ViewEncapsulation } from '@angular/core';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind, BindModule } from 'primeng/bind';\nimport { Gallery } from './gallery';\nimport type { GalleryToolbarItemPassThrough } from 'primeng/types/gallery';\n\n/**\n * GalleryToolbarItem represents an individual toolbar item.\n * @group Components\n */\n@Component({\n    selector: 'p-gallery-toolbar-item',\n    standalone: true,\n    imports: [BindModule],\n    template: `<ng-content></ng-content>`,\n    providers: [{ provide: PARENT_INSTANCE, useExisting: GalleryToolbarItem }],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        '[class]': \"gallery.cx('toolbarItem')\",\n        '[attr.data-scope]': \"'gallery'\",\n        '[attr.data-part]': \"'toolbarItem'\",\n        '(click)': 'onClick()'\n    },\n    hostDirectives: [Bind]\n})\nexport class GalleryToolbarItem extends BaseComponent<GalleryToolbarItemPassThrough> {\n    componentName = 'GalleryToolbarItem';\n\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    /**\n     * The action to dispatch when the toolbar item is clicked.\n     * @group Props\n     */\n    action = input<string>();\n\n    gallery = inject(Gallery);\n\n    onAfterViewChecked() {\n        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));\n    }\n\n    onClick() {\n        this.gallery.handleClickAction(this.action());\n    }\n}\n","import { Directive, inject } from '@angular/core';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind } from 'primeng/bind';\nimport { Gallery } from './gallery';\nimport { GalleryStyle } from './style/gallerystyle';\nimport type { GalleryPrevPassThrough } from 'primeng/types/gallery';\n\n/**\n * GalleryPrev represents the previous navigation button.\n * @group Components\n */\n@Directive({\n    selector: '[pGalleryPrev]',\n    standalone: true,\n    providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryPrev }],\n    host: {\n        '[class]': \"gallery.cx('prev')\",\n        '[attr.data-scope]': \"'gallery'\",\n        '[attr.data-part]': \"'prev'\",\n        '(click)': 'onClick()'\n    },\n    hostDirectives: [Bind]\n})\nexport class GalleryPrev extends BaseComponent<GalleryPrevPassThrough> {\n    componentName = 'GalleryPrev';\n\n    gallery = inject(Gallery);\n\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    _componentStyle = inject(GalleryStyle);\n\n    onClick() {\n        this.gallery.handlePrev();\n    }\n\n    onAfterViewChecked() {\n        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));\n    }\n}\n","import { Directive, inject } from '@angular/core';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind } from 'primeng/bind';\nimport { Gallery } from './gallery';\nimport { GalleryStyle } from './style/gallerystyle';\nimport type { GalleryNextPassThrough } from 'primeng/types/gallery';\n\n/**\n * GalleryNext represents the next navigation button.\n * @group Components\n */\n@Directive({\n    selector: '[pGalleryNext]',\n    standalone: true,\n    providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryNext }],\n    host: {\n        '[class]': \"gallery.cx('next')\",\n        '[attr.data-scope]': \"'gallery'\",\n        '[attr.data-part]': \"'next'\",\n        '(click)': 'onClick()'\n    },\n    hostDirectives: [Bind]\n})\nexport class GalleryNext extends BaseComponent<GalleryNextPassThrough> {\n    componentName = 'GalleryNext';\n\n    gallery = inject(Gallery);\n\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    _componentStyle = inject(GalleryStyle);\n\n    onClick() {\n        this.gallery.handleNext();\n    }\n\n    onAfterViewChecked() {\n        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));\n    }\n}\n","import { computed, Directive, inject } from '@angular/core';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind } from 'primeng/bind';\nimport { Gallery } from './gallery';\nimport { GalleryStyle } from './style/gallerystyle';\nimport type { GalleryZoomInPassThrough } from 'primeng/types/gallery';\n\n/**\n * GalleryZoomIn represents the zoom in action button.\n * @group Components\n */\n@Directive({\n    selector: '[pGalleryZoomIn]',\n    standalone: true,\n    providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryZoomIn }],\n    host: {\n        '[class]': \"gallery.cx('zoomIn')\",\n        '[attr.data-scope]': \"'gallery'\",\n        '[attr.data-part]': \"'zoomIn'\",\n        '[attr.data-action]': \"'zoom-in'\",\n        '[attr.disabled]': 'disabledState()',\n        '(click)': 'onClick()'\n    },\n    hostDirectives: [Bind]\n})\nexport class GalleryZoomIn extends BaseComponent<GalleryZoomInPassThrough> {\n    componentName = 'GalleryZoomIn';\n\n    gallery = inject(Gallery);\n\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    _componentStyle = inject(GalleryStyle);\n\n    disabledState = computed(() => (this.gallery.activeItemTransform().zoomed ? true : null));\n\n    onClick() {\n        this.gallery.handleClickAction('zoomIn');\n    }\n\n    onAfterViewChecked() {\n        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));\n    }\n}\n","import { computed, Directive, inject } from '@angular/core';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind } from 'primeng/bind';\nimport { Gallery } from './gallery';\nimport { GalleryStyle } from './style/gallerystyle';\nimport type { GalleryZoomOutPassThrough } from 'primeng/types/gallery';\n\n/**\n * GalleryZoomOut represents the zoom out action button.\n * @group Components\n */\n@Directive({\n    selector: '[pGalleryZoomOut]',\n    standalone: true,\n    providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryZoomOut }],\n    host: {\n        '[class]': \"gallery.cx('zoomOut')\",\n        '[attr.data-scope]': \"'gallery'\",\n        '[attr.data-part]': \"'zoomOut'\",\n        '[attr.data-action]': \"'zoom-out'\",\n        '[attr.disabled]': 'disabledState()',\n        '(click)': 'onClick()'\n    },\n    hostDirectives: [Bind]\n})\nexport class GalleryZoomOut extends BaseComponent<GalleryZoomOutPassThrough> {\n    componentName = 'GalleryZoomOut';\n\n    gallery = inject(Gallery);\n\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    _componentStyle = inject(GalleryStyle);\n\n    disabledState = computed(() => (!this.gallery.activeItemTransform().zoomed ? true : null));\n\n    onClick() {\n        this.gallery.handleClickAction('zoomOut');\n    }\n\n    onAfterViewChecked() {\n        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));\n    }\n}\n","import { Directive, inject } from '@angular/core';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind } from 'primeng/bind';\nimport { Gallery } from './gallery';\nimport { GalleryStyle } from './style/gallerystyle';\nimport type { GalleryZoomTogglePassThrough } from 'primeng/types/gallery';\n\n/**\n * GalleryZoomToggle represents the zoom toggle action button.\n * @group Components\n */\n@Directive({\n    selector: '[pGalleryZoomToggle]',\n    standalone: true,\n    providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryZoomToggle }],\n    host: {\n        '[class]': \"gallery.cx('zoomToggle')\",\n        '[attr.data-scope]': \"'gallery'\",\n        '[attr.data-part]': \"'zoomToggle'\",\n        '[attr.data-action]': \"'zoom-toggle'\",\n        '(click)': 'onToggle()'\n    },\n    hostDirectives: [Bind]\n})\nexport class GalleryZoomToggle extends BaseComponent<GalleryZoomTogglePassThrough> {\n    componentName = 'GalleryZoomToggle';\n\n    gallery = inject(Gallery);\n\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    _componentStyle = inject(GalleryStyle);\n\n    onToggle() {\n        this.gallery.handleClickAction(this.gallery.activeItemTransform().zoomed ? 'zoomOut' : 'zoomIn');\n    }\n\n    onAfterViewChecked() {\n        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));\n    }\n}\n","import { Directive, inject } from '@angular/core';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind } from 'primeng/bind';\nimport { Gallery } from './gallery';\nimport { GalleryStyle } from './style/gallerystyle';\nimport type { GalleryRotateLeftPassThrough } from 'primeng/types/gallery';\n\n/**\n * GalleryRotateLeft represents the rotate left action button.\n * @group Components\n */\n@Directive({\n    selector: '[pGalleryRotateLeft]',\n    standalone: true,\n    providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryRotateLeft }],\n    host: {\n        '[class]': \"gallery.cx('rotateLeft')\",\n        '[attr.data-scope]': \"'gallery'\",\n        '[attr.data-part]': \"'rotateLeft'\",\n        '[attr.data-action]': \"'rotate-left'\",\n        '(click)': 'onClick()'\n    },\n    hostDirectives: [Bind]\n})\nexport class GalleryRotateLeft extends BaseComponent<GalleryRotateLeftPassThrough> {\n    componentName = 'GalleryRotateLeft';\n\n    gallery = inject(Gallery);\n\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    _componentStyle = inject(GalleryStyle);\n\n    onClick() {\n        this.gallery.handleClickAction('rotateLeft');\n    }\n\n    onAfterViewChecked() {\n        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));\n    }\n}\n","import { Directive, inject } from '@angular/core';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind } from 'primeng/bind';\nimport { Gallery } from './gallery';\nimport { GalleryStyle } from './style/gallerystyle';\nimport type { GalleryRotateRightPassThrough } from 'primeng/types/gallery';\n\n/**\n * GalleryRotateRight represents the rotate right action button.\n * @group Components\n */\n@Directive({\n    selector: '[pGalleryRotateRight]',\n    standalone: true,\n    providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryRotateRight }],\n    host: {\n        '[class]': \"gallery.cx('rotateRight')\",\n        '[attr.data-scope]': \"'gallery'\",\n        '[attr.data-part]': \"'rotateRight'\",\n        '[attr.data-action]': \"'rotate-right'\",\n        '(click)': 'onClick()'\n    },\n    hostDirectives: [Bind]\n})\nexport class GalleryRotateRight extends BaseComponent<GalleryRotateRightPassThrough> {\n    componentName = 'GalleryRotateRight';\n\n    gallery = inject(Gallery);\n\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    _componentStyle = inject(GalleryStyle);\n\n    onClick() {\n        this.gallery.handleClickAction('rotateRight');\n    }\n\n    onAfterViewChecked() {\n        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));\n    }\n}\n","import { Directive, inject } from '@angular/core';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind } from 'primeng/bind';\nimport { Gallery } from './gallery';\nimport { GalleryStyle } from './style/gallerystyle';\nimport type { GalleryFlipXPassThrough } from 'primeng/types/gallery';\n\n/**\n * GalleryFlipX represents the horizontal flip action button.\n * @group Components\n */\n@Directive({\n    selector: '[pGalleryFlipX]',\n    standalone: true,\n    providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryFlipX }],\n    host: {\n        '[class]': \"gallery.cx('flipX')\",\n        '[attr.data-scope]': \"'gallery'\",\n        '[attr.data-part]': \"'flipX'\",\n        '[attr.data-action]': \"'flip-x'\",\n        '(click)': 'onClick()'\n    },\n    hostDirectives: [Bind]\n})\nexport class GalleryFlipX extends BaseComponent<GalleryFlipXPassThrough> {\n    componentName = 'GalleryFlipX';\n\n    gallery = inject(Gallery);\n\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    _componentStyle = inject(GalleryStyle);\n\n    onClick() {\n        this.gallery.handleClickAction('flipX');\n    }\n\n    onAfterViewChecked() {\n        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));\n    }\n}\n","import { Directive, inject } from '@angular/core';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind } from 'primeng/bind';\nimport { Gallery } from './gallery';\nimport { GalleryStyle } from './style/gallerystyle';\nimport type { GalleryFlipYPassThrough } from 'primeng/types/gallery';\n\n/**\n * GalleryFlipY represents the vertical flip action button.\n * @group Components\n */\n@Directive({\n    selector: '[pGalleryFlipY]',\n    standalone: true,\n    providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryFlipY }],\n    host: {\n        '[class]': \"gallery.cx('flipY')\",\n        '[attr.data-scope]': \"'gallery'\",\n        '[attr.data-part]': \"'flipY'\",\n        '[attr.data-action]': \"'flip-y'\",\n        '(click)': 'onClick()'\n    },\n    hostDirectives: [Bind]\n})\nexport class GalleryFlipY extends BaseComponent<GalleryFlipYPassThrough> {\n    componentName = 'GalleryFlipY';\n\n    gallery = inject(Gallery);\n\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    _componentStyle = inject(GalleryStyle);\n\n    onClick() {\n        this.gallery.handleClickAction('flipY');\n    }\n\n    onAfterViewChecked() {\n        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));\n    }\n}\n","import { computed, Directive, inject } from '@angular/core';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind } from 'primeng/bind';\nimport { Gallery } from './gallery';\nimport { GalleryStyle } from './style/gallerystyle';\nimport type { GalleryFullScreenPassThrough } from 'primeng/types/gallery';\n\n/**\n * GalleryFullScreen represents the fullscreen toggle button.\n * @group Components\n */\n@Directive({\n    selector: '[pGalleryFullScreen]',\n    standalone: true,\n    providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryFullScreen }],\n    host: {\n        '[class]': \"gallery.cx('fullScreen')\",\n        '[attr.data-scope]': \"'gallery'\",\n        '[attr.data-part]': \"'fullScreen'\",\n        '[attr.data-action]': \"'fullscreen'\",\n        '[attr.data-fullscreen]': 'dataFullscreen()',\n        '(click)': 'onClick()'\n    },\n    hostDirectives: [Bind]\n})\nexport class GalleryFullScreen extends BaseComponent<GalleryFullScreenPassThrough> {\n    componentName = 'GalleryFullScreen';\n\n    gallery = inject(Gallery);\n\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    _componentStyle = inject(GalleryStyle);\n\n    dataFullscreen = computed(() => (this.gallery.isFullscreen() ? '' : null));\n\n    onClick() {\n        this.gallery.handleClickAction('toggleFullScreen');\n    }\n\n    onAfterViewChecked() {\n        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));\n    }\n}\n","import { Directive, inject } from '@angular/core';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind } from 'primeng/bind';\nimport { Gallery } from './gallery';\nimport { GalleryStyle } from './style/gallerystyle';\nimport type { GalleryDownloadPassThrough } from 'primeng/types/gallery';\n\n/**\n * GalleryDownload represents the download action button.\n * @group Components\n */\n@Directive({\n    selector: '[pGalleryDownload]',\n    standalone: true,\n    providers: [GalleryStyle, { provide: PARENT_INSTANCE, useExisting: GalleryDownload }],\n    host: {\n        '[class]': \"gallery.cx('download')\",\n        '[attr.data-scope]': \"'gallery'\",\n        '[attr.data-part]': \"'download'\",\n        '[attr.data-action]': \"'download'\",\n        '(click)': 'onClick()'\n    },\n    hostDirectives: [Bind]\n})\nexport class GalleryDownload extends BaseComponent<GalleryDownloadPassThrough> {\n    componentName = 'GalleryDownload';\n\n    gallery = inject(Gallery);\n\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    _componentStyle = inject(GalleryStyle);\n\n    onClick() {\n        this.gallery.handleClickAction('download');\n    }\n\n    onAfterViewChecked() {\n        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));\n    }\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input, TemplateRef, viewChild, ViewEncapsulation } from '@angular/core';\nimport { Gallery } from './gallery';\n\n/**\n * GalleryThumbnailItem represents an individual thumbnail item.\n * Exposes its content as a TemplateRef so GalleryThumbnail can render it inside a carousel item.\n * @group Components\n */\n@Component({\n    selector: 'p-gallery-thumbnail-item',\n    standalone: true,\n    template: `\n        <ng-template #content>\n            <ng-content></ng-content>\n        </ng-template>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None\n})\nexport class GalleryThumbnailItem {\n    /**\n     * The index of the thumbnail item.\n     * @group Props\n     */\n    index = input<number>();\n\n    gallery = inject(Gallery);\n\n    templateRef = viewChild<TemplateRef<any>>('content');\n\n    isActive = computed(() => {\n        const idx = this.index();\n        return idx !== undefined && this.gallery.activeIndex() === idx;\n    });\n\n    hostClass = computed(() => this.gallery.cx('thumbnailItem'));\n\n    dataActive = computed(() => (this.isActive() ? '' : null));\n\n    onClick() {\n        const idx = this.index();\n        if (idx !== undefined) {\n            this.gallery.selectItem(idx);\n        }\n    }\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, computed, contentChildren, inject, input, numberAttribute, ViewEncapsulation } from '@angular/core';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind, BindModule } from 'primeng/bind';\nimport { CarouselModule } from 'primeng/carousel';\nimpor