{"version":3,"file":"primeng-galleria.mjs","sources":["../../src/app/components/galleria/galleria.ts","../../src/app/components/galleria/primeng-galleria.ts"],"sourcesContent":["import { AnimationEvent, animate, style, transition, trigger } from '@angular/animations';\nimport { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport {\n AfterContentChecked,\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n DoCheck,\n ElementRef,\n EventEmitter,\n Inject,\n Input,\n KeyValueDiffers,\n NgModule,\n OnChanges,\n OnDestroy,\n OnInit,\n Output,\n PLATFORM_ID,\n QueryList,\n Renderer2,\n SimpleChanges,\n TemplateRef,\n ViewChild,\n ViewEncapsulation,\n booleanAttribute,\n numberAttribute\n} from '@angular/core';\nimport { PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api';\nimport { DomHandler } from 'primeng/dom';\nimport { ChevronLeftIcon } from 'primeng/icons/chevronleft';\nimport { ChevronRightIcon } from 'primeng/icons/chevronright';\nimport { TimesIcon } from 'primeng/icons/times';\nimport { WindowMaximizeIcon } from 'primeng/icons/windowmaximize';\nimport { WindowMinimizeIcon } from 'primeng/icons/windowminimize';\nimport { RippleModule } from 'primeng/ripple';\nimport { VoidListener } from 'primeng/ts-helpers';\nimport { UniqueComponentId, ZIndexUtils } from 'primeng/utils';\nimport { GalleriaResponsiveOptions } from './galleria.interface';\nimport { FocusTrapModule } from 'primeng/focustrap';\n/**\n * Galleria is an advanced content gallery component.\n * @group Components\n */\n@Component({\n selector: 'p-galleria',\n template: `\n \n \n\n \n \n \n `,\n animations: [\n trigger('animation', [\n transition('void => visible', [style({ transform: 'scale(0.7)', opacity: 0 }), animate('{{showTransitionParams}}')]),\n transition('visible => void', [animate('{{hideTransitionParams}}', style({ transform: 'scale(0.7)', opacity: 0 }))])\n ])\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n styleUrls: ['./galleria.css'],\n host: {\n class: 'p-element'\n }\n})\nexport class Galleria implements OnChanges, OnDestroy {\n /**\n * Index of the first item.\n * @group Props\n */\n @Input() get activeIndex(): number {\n return this._activeIndex;\n }\n set activeIndex(activeIndex) {\n this._activeIndex = activeIndex;\n }\n /**\n * Whether to display the component on fullscreen.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) fullScreen: boolean = false;\n /**\n * Unique identifier of the element.\n * @group Props\n */\n @Input() id: string | undefined;\n /**\n * An array of objects to display.\n * @group Props\n */\n @Input() value: any[] | undefined;\n /**\n * Number of items per page.\n * @group Props\n */\n @Input({ transform: numberAttribute }) numVisible: number = 3;\n /**\n * An array of options for responsive design.\n * @see {GalleriaResponsiveOptions}\n * @group Props\n */\n @Input() responsiveOptions: GalleriaResponsiveOptions[] | undefined;\n /**\n * Whether to display navigation buttons in item section.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) showItemNavigators: boolean = false;\n /**\n * Whether to display navigation buttons in thumbnail container.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) showThumbnailNavigators: boolean = true;\n /**\n * Whether to display navigation buttons on item hover.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) showItemNavigatorsOnHover: boolean = false;\n /**\n * When enabled, item is changed on indicator hover.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) changeItemOnIndicatorHover: boolean = false;\n /**\n * Defines if scrolling would be infinite.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) circular: boolean = false;\n /**\n * Items are displayed with a slideshow in autoPlay mode.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) autoPlay: boolean = false;\n /**\n * When enabled, autorun should stop by click.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) shouldStopAutoplayByClick: boolean = true;\n /**\n * Time in milliseconds to scroll items.\n * @group Props\n */\n @Input({ transform: numberAttribute }) transitionInterval: number = 4000;\n /**\n * Whether to display thumbnail container.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) showThumbnails: boolean = true;\n /**\n * Position of thumbnails.\n * @group Props\n */\n @Input() thumbnailsPosition: 'bottom' | 'top' | 'left' | 'right' | undefined = 'bottom';\n /**\n * Height of the viewport in vertical thumbnail.\n * @group Props\n */\n @Input() verticalThumbnailViewPortHeight: string = '300px';\n /**\n * Whether to display indicator container.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) showIndicators: boolean = false;\n /**\n * When enabled, indicator container is displayed on item container.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) showIndicatorsOnItem: boolean = false;\n /**\n * Position of indicators.\n * @group Props\n */\n @Input() indicatorsPosition: 'bottom' | 'top' | 'left' | 'right' | undefined = 'bottom';\n /**\n * Base zIndex value to use in layering.\n * @group Props\n */\n @Input({ transform: numberAttribute }) baseZIndex: number = 0;\n /**\n * Style class of the mask on fullscreen mode.\n * @group Props\n */\n @Input() maskClass: string | undefined;\n /**\n * Style class of the component on fullscreen mode. Otherwise, the 'class' property can be used.\n * @group Props\n */\n @Input() containerClass: string | undefined;\n /**\n * Inline style of the component on fullscreen mode. Otherwise, the 'style' property can be used.\n * @group Props\n */\n @Input() containerStyle: { [klass: string]: any } | null | undefined;\n /**\n * Transition options of the show animation.\n * @group Props\n */\n @Input() showTransitionOptions: string = '150ms cubic-bezier(0, 0, 0.2, 1)';\n /**\n * Transition options of the hide animation.\n * @group Props\n */\n @Input() hideTransitionOptions: string = '150ms cubic-bezier(0, 0, 0.2, 1)';\n /**\n * Specifies the visibility of the mask on fullscreen mode.\n * @group Props\n */\n @Input() get visible(): boolean {\n return this._visible;\n }\n set visible(visible: boolean) {\n this._visible = visible;\n\n if (this._visible && !this.maskVisible) {\n this.maskVisible = true;\n }\n }\n /**\n * Callback to invoke on active index change.\n * @param {number} number - Active index.\n * @group Emits\n */\n @Output() activeIndexChange: EventEmitter = new EventEmitter();\n /**\n * Callback to invoke on visiblity change.\n * @param {boolean} boolean - Visible value.\n * @group Emits\n */\n @Output() visibleChange: EventEmitter = new EventEmitter();\n\n @ViewChild('mask') mask: ElementRef | undefined;\n\n @ViewChild('container') container: ElementRef | undefined;\n\n @ContentChildren(PrimeTemplate) templates: QueryList | undefined;\n\n _visible: boolean = false;\n\n _activeIndex: number = 0;\n\n headerFacet: any;\n\n footerFacet: any;\n\n indicatorFacet: any;\n\n captionFacet: any;\n\n closeIconTemplate: TemplateRef | undefined;\n\n previousThumbnailIconTemplate: TemplateRef | undefined;\n\n nextThumbnailIconTemplate: TemplateRef | undefined;\n\n itemPreviousIconTemplate: TemplateRef | undefined;\n\n itemNextIconTemplate: TemplateRef | undefined;\n\n maskVisible: boolean = false;\n\n numVisibleLimit = 0;\n\n constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) public platformId: any, public element: ElementRef, public cd: ChangeDetectorRef, public config: PrimeNGConfig) {}\n\n ngAfterContentInit() {\n this.templates?.forEach((item) => {\n switch (item.getType()) {\n case 'header':\n this.headerFacet = item.template;\n break;\n\n case 'footer':\n this.footerFacet = item.template;\n break;\n\n case 'indicator':\n this.indicatorFacet = item.template;\n break;\n\n case 'closeicon':\n this.closeIconTemplate = item.template;\n break;\n\n case 'itemnexticon':\n this.itemNextIconTemplate = item.template;\n break;\n\n case 'itempreviousicon':\n this.itemPreviousIconTemplate = item.template;\n break;\n\n case 'previousthumbnailicon':\n this.previousThumbnailIconTemplate = item.template;\n break;\n\n case 'nextthumbnailicon':\n this.nextThumbnailIconTemplate = item.template;\n break;\n\n case 'caption':\n this.captionFacet = item.template;\n break;\n }\n });\n }\n\n ngOnChanges(simpleChanges: SimpleChanges) {\n if (simpleChanges.value && simpleChanges.value.currentValue?.length < this.numVisible) {\n this.numVisibleLimit = simpleChanges.value.currentValue.length;\n } else {\n this.numVisibleLimit = 0;\n }\n }\n\n onMaskHide() {\n this.visible = false;\n this.visibleChange.emit(false);\n }\n\n onActiveItemChange(index: number) {\n if (this.activeIndex !== index) {\n this.activeIndex = index;\n this.activeIndexChange.emit(index);\n }\n }\n\n onAnimationStart(event: AnimationEvent) {\n switch (event.toState) {\n case 'visible':\n this.enableModality();\n setTimeout(() => {\n DomHandler.focus(DomHandler.findSingle(this.container.nativeElement, '[data-pc-section=\"closebutton\"]'));\n }, 25);\n break;\n\n case 'void':\n DomHandler.addClass(this.mask?.nativeElement, 'p-component-overlay-leave');\n break;\n }\n }\n\n onAnimationEnd(event: AnimationEvent) {\n switch (event.toState) {\n case 'void':\n this.disableModality();\n break;\n }\n }\n\n enableModality() {\n DomHandler.blockBodyScroll();\n this.cd.markForCheck();\n\n if (this.mask) {\n ZIndexUtils.set('modal', this.mask.nativeElement, this.baseZIndex || this.config.zIndex.modal);\n }\n }\n\n disableModality() {\n DomHandler.unblockBodyScroll();\n this.maskVisible = false;\n this.cd.markForCheck();\n\n if (this.mask) {\n ZIndexUtils.clear(this.mask.nativeElement);\n }\n }\n\n ngOnDestroy() {\n if (this.fullScreen) {\n DomHandler.removeClass(this.document.body, 'p-overflow-hidden');\n }\n\n if (this.mask) {\n this.disableModality();\n }\n }\n}\n\n@Component({\n selector: 'p-galleriaContent',\n template: `\n 0\"\n [ngClass]=\"{\n 'p-galleria p-component': true,\n 'p-galleria-fullscreen': this.galleria.fullScreen,\n 'p-galleria-indicator-onitem': this.galleria.showIndicatorsOnItem,\n 'p-galleria-item-nav-onhover': this.galleria.showItemNavigatorsOnHover && !this.galleria.fullScreen\n }\"\n [ngStyle]=\"!galleria.fullScreen ? galleria.containerStyle : {}\"\n [class]=\"galleriaClass()\"\n pFocusTrap\n >\n \n \n \n \n \n `,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class GalleriaContent implements DoCheck {\n @Input() get activeIndex(): number {\n return this._activeIndex;\n }\n set activeIndex(activeIndex: number) {\n this._activeIndex = activeIndex;\n }\n\n @Input() value: any[] = [];\n\n @Input({ transform: numberAttribute }) numVisible: number | undefined;\n\n @Output() maskHide: EventEmitter = new EventEmitter();\n\n @Output() activeItemChange: EventEmitter = new EventEmitter();\n\n @ViewChild('closeButton') closeButton: ElementRef | undefined;\n\n id: string;\n\n _activeIndex: number = 0;\n\n slideShowActive: boolean = true;\n\n interval: any;\n\n styleClass: string | undefined;\n\n private differ: any;\n\n constructor(public galleria: Galleria, public cd: ChangeDetectorRef, private differs: KeyValueDiffers, public config: PrimeNGConfig) {\n this.id = this.galleria.id || UniqueComponentId();\n this.differ = this.differs.find(this.galleria).create();\n }\n\n ngDoCheck(): void {\n if (isPlatformBrowser(this.galleria.platformId)) {\n const changes = this.differ.diff(this.galleria as unknown as Record);\n if (changes && changes.forEachItem.length > 0) {\n // Because we change the properties of the parent component,\n // and the children take our entity from the injector.\n // We can tell the children to redraw themselves when we change the properties of the parent component.\n // Since we have an onPush strategy\n this.cd.markForCheck();\n }\n }\n }\n\n galleriaClass() {\n const thumbnailsPosClass = this.galleria.showThumbnails && this.getPositionClass('p-galleria-thumbnails', this.galleria.thumbnailsPosition as string);\n const indicatorPosClass = this.galleria.showIndicators && this.getPositionClass('p-galleria-indicators', this.galleria.indicatorsPosition as string);\n\n return (this.galleria.containerClass ? this.galleria.containerClass + ' ' : '') + (thumbnailsPosClass ? thumbnailsPosClass + ' ' : '') + (indicatorPosClass ? indicatorPosClass + ' ' : '');\n }\n\n startSlideShow() {\n if (isPlatformBrowser(this.galleria.platformId)) {\n this.interval = setInterval(() => {\n let activeIndex = this.galleria.circular && this.value.length - 1 === this.activeIndex ? 0 : this.activeIndex + 1;\n this.onActiveIndexChange(activeIndex);\n this.activeIndex = activeIndex;\n }, this.galleria.transitionInterval);\n\n this.slideShowActive = true;\n }\n }\n\n stopSlideShow() {\n if (this.galleria.autoPlay && !this.galleria.shouldStopAutoplayByClick) {\n return;\n }\n\n if (this.interval) {\n clearInterval(this.interval);\n }\n\n this.slideShowActive = false;\n }\n\n getPositionClass(preClassName: string, position: string) {\n const positions = ['top', 'left', 'bottom', 'right'];\n const pos = positions.find((item) => item === position);\n\n return pos ? `${preClassName}-${pos}` : '';\n }\n\n isVertical() {\n return this.galleria.thumbnailsPosition === 'left' || this.galleria.thumbnailsPosition === 'right';\n }\n\n onActiveIndexChange(index: number) {\n if (this.activeIndex !== index) {\n this.activeIndex = index;\n this.activeItemChange.emit(this.activeIndex);\n }\n }\n\n closeAriaLabel() {\n return this.config.translation.aria ? this.config.translation.aria.close : undefined;\n }\n}\n\n@Component({\n selector: 'p-galleriaItemSlot',\n template: `\n \n \n \n `,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class GalleriaItemSlot {\n @Input() templates: QueryList | undefined;\n\n @Input({ transform: numberAttribute }) index: number | undefined;\n\n @Input() get item(): any {\n return this._item;\n }\n\n set item(item: any) {\n this._item = item;\n if (this.templates) {\n this.templates.forEach((item) => {\n if (item.getType() === this.type) {\n switch (this.type) {\n case 'item':\n case 'caption':\n case 'thumbnail':\n this.context = { $implicit: this.item };\n this.contentTemplate = item.template;\n break;\n }\n }\n });\n }\n }\n\n @Input() type: string | undefined;\n\n contentTemplate: TemplateRef | undefined;\n\n context: any;\n\n _item: any;\n\n ngAfterContentInit() {\n this.templates?.forEach((item) => {\n if (item.getType() === this.type) {\n switch (this.type) {\n case 'item':\n case 'caption':\n case 'thumbnail':\n this.context = { $implicit: this.item };\n this.contentTemplate = item.template;\n break;\n\n case 'indicator':\n this.context = { $implicit: this.index };\n this.contentTemplate = item.template;\n break;\n\n default:\n this.context = {};\n this.contentTemplate = item.template;\n break;\n }\n }\n });\n }\n}\n\n@Component({\n selector: 'p-galleriaItem',\n template: `\n \n
\n
\n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n
\n \n \n \n \n \n \n \n \n