primeng
Version:
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,
1,002 lines (989 loc) • 96.9 kB
JavaScript
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';
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'
};
class GalleryStyle extends BaseStyle {
name = 'gallery';
style = style;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GalleryStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GalleryStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GalleryStyle, decorators: [{
type: Injectable
}] });
/**
*
* Gallery groups a collection of contents in items.
*
* [Live Demo](https://www.primeng.org/gallery/)
*
* @module gallerystyle
*
*/
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";
})(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);
}
});
}
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);
}
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);
}
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.0.6", ngImport: i0, type: GalleryItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", 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.0.6", 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.0.6", ngImport: i0, type: GalleryHeader, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", 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.0.6", 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.0.6", ngImport: i0, type: GalleryContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", 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.0.6", 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.0.6", ngImport: i0, type: GalleryFooter, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", 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.0.6", 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.0.6", ngImport: i0, type: GalleryBackdrop, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", 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.0.6", 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.0.6", ngImport: i0, type: GalleryToolbar, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", 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.0.6", 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.0.6", ngImport: i0, type: GalleryToolbarItem, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", 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.0.6", 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.0.6", ngImport: i0, type: GalleryPrev, deps: null, target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", 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.0.6", 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.0.6", ngImport: i0, type: GalleryNext, deps: null, target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", 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.0.6", 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.0.6", ngImport: i0, type: GalleryZoomIn, deps: null, target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", 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.0.6", 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.0.6", ngImport: i0, type: GalleryZoomOut, deps: null, target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", 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.0.6", 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.0.6", ngImport: i0, type: GalleryZoomToggle, deps: null, target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: