{"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} from '@angular/core';\nimport { LicenseManager, 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 { UniqueComponentId, ZIndexUtils } from 'primeng/utils';\n\n@Component({\n selector: 'p-galleria',\n template: `\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, AfterViewInit {\n @Input() get activeIndex(): number {\n return this._activeIndex;\n }\n\n set activeIndex(activeIndex) {\n this._activeIndex = activeIndex;\n }\n\n @Input() fullScreen: boolean = false;\n\n @Input() id: string;\n\n @Input() value: any[];\n\n @Input() numVisible: number = 3;\n\n @Input() responsiveOptions: any[];\n\n @Input() showItemNavigators: boolean = false;\n\n @Input() showThumbnailNavigators: boolean = true;\n\n @Input() showItemNavigatorsOnHover: boolean = false;\n\n @Input() changeItemOnIndicatorHover: boolean = false;\n\n @Input() circular: boolean = false;\n\n @Input() autoPlay: boolean = false;\n\n @Input() transitionInterval: number = 4000;\n\n @Input() showThumbnails: boolean = true;\n\n @Input() thumbnailsPosition: string = 'bottom';\n\n @Input() verticalThumbnailViewPortHeight: string = '300px';\n\n @Input() showIndicators: boolean = false;\n\n @Input() showIndicatorsOnItem: boolean = false;\n\n @Input() indicatorsPosition: string = 'bottom';\n\n @Input() baseZIndex: number = 0;\n\n @Input() maskClass: string;\n\n @Input() containerClass: string;\n\n @Input() containerStyle: any;\n\n @Input() showTransitionOptions: string = '150ms cubic-bezier(0, 0, 0.2, 1)';\n\n @Input() hideTransitionOptions: string = '150ms cubic-bezier(0, 0, 0.2, 1)';\n\n @ViewChild('mask') mask: ElementRef;\n\n @Input() get visible(): boolean {\n return this._visible;\n }\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 @Output() activeIndexChange: EventEmitter = new EventEmitter();\n\n @Output() visibleChange: EventEmitter = new EventEmitter();\n\n @ContentChildren(PrimeTemplate) templates: QueryList;\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;\n\n previousThumbnailIconTemplate: TemplateRef;\n\n nextThumbnailIconTemplate: TemplateRef;\n\n itemPreviousIconTemplate: TemplateRef;\n\n itemNextIconTemplate: TemplateRef;\n\n maskVisible: boolean = false;\n\n constructor(@Inject(DOCUMENT) private document: Document, 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 ngAfterViewInit() {\n LicenseManager.check();\n }\n\n ngOnChanges(simpleChanges: SimpleChanges) {\n if (simpleChanges.value && simpleChanges.value.currentValue?.length < this.numVisible) {\n this.numVisible = simpleChanges.value.currentValue.length;\n }\n }\n\n onMaskHide() {\n this.visible = false;\n this.visibleChange.emit(false);\n }\n\n onActiveItemChange(index) {\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 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.addClass(this.document.body, 'p-overflow-hidden');\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.removeClass(this.document.body, 'p-overflow-hidden');\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 >\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\n set activeIndex(activeIndex: number) {\n this._activeIndex = activeIndex;\n }\n\n @Input() value: any[] = [];\n\n @Input() numVisible: number;\n\n @Output() maskHide: EventEmitter = new EventEmitter();\n\n @Output() activeItemChange: EventEmitter = new EventEmitter();\n\n id: string = this.galleria.id || UniqueComponentId();\n\n _activeIndex: number = 0;\n\n slideShowActive: boolean = true;\n\n interval: any;\n\n styleClass: string;\n\n private differ = this.differs.find(this.galleria).create();\n\n constructor(public galleria: Galleria, public cd: ChangeDetectorRef, private differs: KeyValueDiffers) {}\n\n ngDoCheck(): void {\n const changes = this.differ.diff(this.galleria as unknown as Record);\n\n if (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 galleriaClass() {\n const thumbnailsPosClass = this.galleria.showThumbnails && this.getPositionClass('p-galleria-thumbnails', this.galleria.thumbnailsPosition);\n const indicatorPosClass = this.galleria.showIndicators && this.getPositionClass('p-galleria-indicators', this.galleria.indicatorsPosition);\n\n return (this.galleria.containerClass ? this.galleria.containerClass + ' ' : '') + (thumbnailsPosClass ? thumbnailsPosClass + ' ' : '') + (indicatorPosClass ? indicatorPosClass + ' ' : '');\n }\n\n startSlideShow() {\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 stopSlideShow() {\n if (this.interval) {\n clearInterval(this.interval);\n }\n\n this.slideShowActive = false;\n }\n\n getPositionClass(preClassName, position) {\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) {\n if (this.activeIndex !== index) {\n this.activeIndex = index;\n this.activeItemChange.emit(this.activeIndex);\n }\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;\n\n @Input() index: number;\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;\n\n contentTemplate: TemplateRef;\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