source: trip-planner-front/node_modules/primeng/fesm2020/primeng-galleria.mjs@ 1ad8e64

Last change on this file since 1ad8e64 was 59329aa, checked in by Ema <ema_spirova@…>, 3 years ago

adding photos
  • Property mode set to 100644
File size: 62.1 KB
RevLine 
[59329aa]1import * as i0 from '@angular/core';
2import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, Output, ContentChildren, NgModule } from '@angular/core';
3import * as i2 from '@angular/common';
4import { CommonModule } from '@angular/common';
5import * as i1 from 'primeng/api';
6import { PrimeTemplate, SharedModule } from 'primeng/api';
7import { ZIndexUtils, UniqueComponentId } from 'primeng/utils';
8import { DomHandler } from 'primeng/dom';
9import * as i3 from 'primeng/ripple';
10import { RippleModule } from 'primeng/ripple';
11import { trigger, transition, style, animate } from '@angular/animations';
12
13class Galleria {
14 constructor(element, cd, config) {
15 this.element = element;
16 this.cd = cd;
17 this.config = config;
18 this.fullScreen = false;
19 this.numVisible = 3;
20 this.showItemNavigators = false;
21 this.showThumbnailNavigators = true;
22 this.showItemNavigatorsOnHover = false;
23 this.changeItemOnIndicatorHover = false;
24 this.circular = false;
25 this.autoPlay = false;
26 this.transitionInterval = 4000;
27 this.showThumbnails = true;
28 this.thumbnailsPosition = "bottom";
29 this.verticalThumbnailViewPortHeight = "300px";
30 this.showIndicators = false;
31 this.showIndicatorsOnItem = false;
32 this.indicatorsPosition = "bottom";
33 this.baseZIndex = 0;
34 this.showTransitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
35 this.hideTransitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
36 this.activeIndexChange = new EventEmitter();
37 this.visibleChange = new EventEmitter();
38 this._visible = false;
39 this._activeIndex = 0;
40 this.maskVisible = false;
41 }
42 get activeIndex() {
43 return this._activeIndex;
44 }
45 ;
46 set activeIndex(activeIndex) {
47 this._activeIndex = activeIndex;
48 }
49 get visible() {
50 return this._visible;
51 }
52 ;
53 set visible(visible) {
54 this._visible = visible;
55 if (this._visible && !this.maskVisible) {
56 this.maskVisible = true;
57 }
58 }
59 ngAfterContentInit() {
60 this.templates.forEach((item) => {
61 switch (item.getType()) {
62 case 'header':
63 this.headerFacet = item.template;
64 break;
65 case 'footer':
66 this.footerFacet = item.template;
67 break;
68 case 'indicator':
69 this.indicatorFacet = item.template;
70 break;
71 case 'caption':
72 this.captionFacet = item.template;
73 break;
74 }
75 });
76 }
77 ngOnChanges(simpleChanges) {
78 if (simpleChanges.value && simpleChanges.value.currentValue?.length < this.numVisible) {
79 this.numVisible = simpleChanges.value.currentValue.length;
80 }
81 }
82 onMaskHide() {
83 this.visible = false;
84 this.visibleChange.emit(false);
85 }
86 onActiveItemChange(index) {
87 if (this.activeIndex !== index) {
88 this.activeIndex = index;
89 this.activeIndexChange.emit(index);
90 }
91 }
92 onAnimationStart(event) {
93 switch (event.toState) {
94 case 'visible':
95 this.enableModality();
96 break;
97 case 'void':
98 DomHandler.addClass(this.mask.nativeElement, 'p-component-overlay-leave');
99 break;
100 }
101 }
102 onAnimationEnd(event) {
103 switch (event.toState) {
104 case 'void':
105 this.disableModality();
106 break;
107 }
108 }
109 enableModality() {
110 DomHandler.addClass(document.body, 'p-overflow-hidden');
111 this.cd.markForCheck();
112 if (this.mask) {
113 ZIndexUtils.set('modal', this.mask.nativeElement, this.baseZIndex || this.config.zIndex.modal);
114 }
115 }
116 disableModality() {
117 DomHandler.removeClass(document.body, 'p-overflow-hidden');
118 this.maskVisible = false;
119 this.cd.markForCheck();
120 if (this.mask) {
121 ZIndexUtils.clear(this.mask.nativeElement);
122 }
123 }
124 ngOnDestroy() {
125 if (this.fullScreen) {
126 DomHandler.removeClass(document.body, 'p-overflow-hidden');
127 }
128 if (this.mask) {
129 this.disableModality();
130 }
131 }
132}
133Galleria.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Galleria, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
134Galleria.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: Galleria, selector: "p-galleria", inputs: { activeIndex: "activeIndex", fullScreen: "fullScreen", id: "id", value: "value", numVisible: "numVisible", responsiveOptions: "responsiveOptions", showItemNavigators: "showItemNavigators", showThumbnailNavigators: "showThumbnailNavigators", showItemNavigatorsOnHover: "showItemNavigatorsOnHover", changeItemOnIndicatorHover: "changeItemOnIndicatorHover", circular: "circular", autoPlay: "autoPlay", transitionInterval: "transitionInterval", showThumbnails: "showThumbnails", thumbnailsPosition: "thumbnailsPosition", verticalThumbnailViewPortHeight: "verticalThumbnailViewPortHeight", showIndicators: "showIndicators", showIndicatorsOnItem: "showIndicatorsOnItem", indicatorsPosition: "indicatorsPosition", baseZIndex: "baseZIndex", maskClass: "maskClass", containerClass: "containerClass", containerStyle: "containerStyle", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", visible: "visible" }, outputs: { activeIndexChange: "activeIndexChange", visibleChange: "visibleChange" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
135 <div *ngIf="fullScreen;else windowed">
136 <div *ngIf="maskVisible" #mask [ngClass]="{'p-galleria-mask p-component-overlay p-component-overlay-enter':true, 'p-galleria-visible': this.visible}" [class]="maskClass">
137 <p-galleriaContent *ngIf="visible" [@animation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@animation.start)="onAnimationStart($event)" (@animation.done)="onAnimationEnd($event)"
138 [value]="value" [activeIndex]="activeIndex" [numVisible]="numVisible" (maskHide)="onMaskHide()" (activeItemChange)="onActiveItemChange($event)" [ngStyle]="containerStyle"></p-galleriaContent>
139 </div>
140 </div>
141
142 <ng-template #windowed>
143 <p-galleriaContent [value]="value" [activeIndex]="activeIndex" [numVisible]="numVisible" (activeItemChange)="onActiveItemChange($event)"></p-galleriaContent>
144 </ng-template>
145 `, isInline: true, styles: [".p-galleria-content{display:flex;flex-direction:column}.p-galleria-item-wrapper{display:flex;flex-direction:column;position:relative}.p-galleria-item-container{position:relative;display:flex;height:100%}.p-galleria-item-nav{position:absolute;top:50%;margin-top:-.5rem;display:inline-flex;justify-content:center;align-items:center;overflow:hidden}.p-galleria-item-prev{left:0;border-top-left-radius:0;border-bottom-left-radius:0}.p-galleria-item-next{right:0;border-top-right-radius:0;border-bottom-right-radius:0}.p-galleria-item{display:flex;justify-content:center;align-items:center;height:100%;width:100%}.p-galleria-item-nav-onhover .p-galleria-item-nav{pointer-events:none;opacity:0;transition:opacity .2s ease-in-out}.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav{pointer-events:all;opacity:1}.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled{pointer-events:none}.p-galleria-caption{position:absolute;bottom:0;left:0;width:100%}.p-galleria-thumbnail-wrapper{display:flex;flex-direction:column;overflow:auto;flex-shrink:0}.p-galleria-thumbnail-prev,.p-galleria-thumbnail-next{align-self:center;flex:0 0 auto;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.p-galleria-thumbnail-prev span,.p-galleria-thumbnail-next span{display:flex;justify-content:center;align-items:center}.p-galleria-thumbnail-container{display:flex;flex-direction:row}.p-galleria-thumbnail-items-container{overflow:hidden;width:100%}.p-galleria-thumbnail-items{display:flex}.p-galleria-thumbnail-item{overflow:auto;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.5}.p-galleria-thumbnail-item:hover{opacity:1;transition:opacity .3s}.p-galleria-thumbnail-item-current{opacity:1}.p-galleria-thumbnails-left .p-galleria-content,.p-galleria-thumbnails-right .p-galleria-content,.p-galleria-thumbnails-left .p-galleria-item-wrapper,.p-galleria-thumbnails-right .p-galleria-item-wrapper{flex-direction:row}.p-galleria-thumbnails-left p-galleriaitem,.p-galleria-thumbnails-top p-galleriaitem{order:2}.p-galleria-thumbnails-left p-galleriathumbnails,.p-galleria-thumbnails-top p-galleriathumbnails{order:1}.p-galleria-thumbnails-left .p-galleria-thumbnail-container,.p-galleria-thumbnails-right .p-galleria-thumbnail-container{flex-direction:column;flex-grow:1}.p-galleria-thumbnails-left .p-galleria-thumbnail-items,.p-galleria-thumbnails-right .p-galleria-thumbnail-items{flex-direction:column;height:100%}.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,.p-galleria-thumbnails-right .p-galleria-thumbnail-wrapper{height:100%}.p-galleria-indicators{display:flex;align-items:center;justify-content:center}.p-galleria-indicator>button{display:inline-flex;align-items:center}.p-galleria-indicators-left .p-galleria-item-wrapper,.p-galleria-indicators-right .p-galleria-item-wrapper{flex-direction:row;align-items:center}.p-galleria-indicators-left .p-galleria-item-container,.p-galleria-indicators-top .p-galleria-item-container{order:2}.p-galleria-indicators-left .p-galleria-indicators,.p-galleria-indicators-top .p-galleria-indicators{order:1}.p-galleria-indicators-left .p-galleria-indicators,.p-galleria-indicators-right .p-galleria-indicators{flex-direction:column}.p-galleria-indicator-onitem .p-galleria-indicators{position:absolute;display:flex;z-index:1}.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators{top:0;left:0;width:100%;align-items:flex-start}.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators{right:0;top:0;height:100%;align-items:flex-end}.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators{bottom:0;left:0;width:100%;align-items:flex-end}.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators{left:0;top:0;height:100%;align-items:flex-start}.p-galleria-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:transparent;transition-property:background-color}.p-galleria-close{position:absolute;top:0;right:0;display:flex;justify-content:center;align-items:center;overflow:hidden}.p-galleria-mask .p-galleria-item-nav{position:fixed;top:50%;margin-top:-.5rem}.p-galleria-mask.p-galleria-mask-leave{background-color:transparent}.p-items-hidden .p-galleria-thumbnail-item{visibility:hidden}.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active{visibility:visible}\n"], components: [{ type: i0.forwardRef(function () { return GalleriaContent; }), selector: "p-galleriaContent", inputs: ["activeIndex", "value", "numVisible"], outputs: ["maskHide", "activeItemChange"] }], directives: [{ type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i2.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i2.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
146 trigger('animation', [
147 transition('void => visible', [
148 style({ transform: 'scale(0.7)', opacity: 0 }),
149 animate('{{showTransitionParams}}')
150 ]),
151 transition('visible => void', [
152 animate('{{hideTransitionParams}}', style({ transform: 'scale(0.7)', opacity: 0 }))
153 ])
154 ])
155 ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
156i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Galleria, decorators: [{
157 type: Component,
158 args: [{ selector: 'p-galleria', template: `
159 <div *ngIf="fullScreen;else windowed">
160 <div *ngIf="maskVisible" #mask [ngClass]="{'p-galleria-mask p-component-overlay p-component-overlay-enter':true, 'p-galleria-visible': this.visible}" [class]="maskClass">
161 <p-galleriaContent *ngIf="visible" [@animation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@animation.start)="onAnimationStart($event)" (@animation.done)="onAnimationEnd($event)"
162 [value]="value" [activeIndex]="activeIndex" [numVisible]="numVisible" (maskHide)="onMaskHide()" (activeItemChange)="onActiveItemChange($event)" [ngStyle]="containerStyle"></p-galleriaContent>
163 </div>
164 </div>
165
166 <ng-template #windowed>
167 <p-galleriaContent [value]="value" [activeIndex]="activeIndex" [numVisible]="numVisible" (activeItemChange)="onActiveItemChange($event)"></p-galleriaContent>
168 </ng-template>
169 `, animations: [
170 trigger('animation', [
171 transition('void => visible', [
172 style({ transform: 'scale(0.7)', opacity: 0 }),
173 animate('{{showTransitionParams}}')
174 ]),
175 transition('visible => void', [
176 animate('{{hideTransitionParams}}', style({ transform: 'scale(0.7)', opacity: 0 }))
177 ])
178 ])
179 ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
180 'class': 'p-element'
181 }, styles: [".p-galleria-content{display:flex;flex-direction:column}.p-galleria-item-wrapper{display:flex;flex-direction:column;position:relative}.p-galleria-item-container{position:relative;display:flex;height:100%}.p-galleria-item-nav{position:absolute;top:50%;margin-top:-.5rem;display:inline-flex;justify-content:center;align-items:center;overflow:hidden}.p-galleria-item-prev{left:0;border-top-left-radius:0;border-bottom-left-radius:0}.p-galleria-item-next{right:0;border-top-right-radius:0;border-bottom-right-radius:0}.p-galleria-item{display:flex;justify-content:center;align-items:center;height:100%;width:100%}.p-galleria-item-nav-onhover .p-galleria-item-nav{pointer-events:none;opacity:0;transition:opacity .2s ease-in-out}.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav{pointer-events:all;opacity:1}.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled{pointer-events:none}.p-galleria-caption{position:absolute;bottom:0;left:0;width:100%}.p-galleria-thumbnail-wrapper{display:flex;flex-direction:column;overflow:auto;flex-shrink:0}.p-galleria-thumbnail-prev,.p-galleria-thumbnail-next{align-self:center;flex:0 0 auto;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.p-galleria-thumbnail-prev span,.p-galleria-thumbnail-next span{display:flex;justify-content:center;align-items:center}.p-galleria-thumbnail-container{display:flex;flex-direction:row}.p-galleria-thumbnail-items-container{overflow:hidden;width:100%}.p-galleria-thumbnail-items{display:flex}.p-galleria-thumbnail-item{overflow:auto;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.5}.p-galleria-thumbnail-item:hover{opacity:1;transition:opacity .3s}.p-galleria-thumbnail-item-current{opacity:1}.p-galleria-thumbnails-left .p-galleria-content,.p-galleria-thumbnails-right .p-galleria-content,.p-galleria-thumbnails-left .p-galleria-item-wrapper,.p-galleria-thumbnails-right .p-galleria-item-wrapper{flex-direction:row}.p-galleria-thumbnails-left p-galleriaitem,.p-galleria-thumbnails-top p-galleriaitem{order:2}.p-galleria-thumbnails-left p-galleriathumbnails,.p-galleria-thumbnails-top p-galleriathumbnails{order:1}.p-galleria-thumbnails-left .p-galleria-thumbnail-container,.p-galleria-thumbnails-right .p-galleria-thumbnail-container{flex-direction:column;flex-grow:1}.p-galleria-thumbnails-left .p-galleria-thumbnail-items,.p-galleria-thumbnails-right .p-galleria-thumbnail-items{flex-direction:column;height:100%}.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,.p-galleria-thumbnails-right .p-galleria-thumbnail-wrapper{height:100%}.p-galleria-indicators{display:flex;align-items:center;justify-content:center}.p-galleria-indicator>button{display:inline-flex;align-items:center}.p-galleria-indicators-left .p-galleria-item-wrapper,.p-galleria-indicators-right .p-galleria-item-wrapper{flex-direction:row;align-items:center}.p-galleria-indicators-left .p-galleria-item-container,.p-galleria-indicators-top .p-galleria-item-container{order:2}.p-galleria-indicators-left .p-galleria-indicators,.p-galleria-indicators-top .p-galleria-indicators{order:1}.p-galleria-indicators-left .p-galleria-indicators,.p-galleria-indicators-right .p-galleria-indicators{flex-direction:column}.p-galleria-indicator-onitem .p-galleria-indicators{position:absolute;display:flex;z-index:1}.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators{top:0;left:0;width:100%;align-items:flex-start}.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators{right:0;top:0;height:100%;align-items:flex-end}.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators{bottom:0;left:0;width:100%;align-items:flex-end}.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators{left:0;top:0;height:100%;align-items:flex-start}.p-galleria-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:transparent;transition-property:background-color}.p-galleria-close{position:absolute;top:0;right:0;display:flex;justify-content:center;align-items:center;overflow:hidden}.p-galleria-mask .p-galleria-item-nav{position:fixed;top:50%;margin-top:-.5rem}.p-galleria-mask.p-galleria-mask-leave{background-color:transparent}.p-items-hidden .p-galleria-thumbnail-item{visibility:hidden}.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active{visibility:visible}\n"] }]
182 }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.PrimeNGConfig }]; }, propDecorators: { activeIndex: [{
183 type: Input
184 }], fullScreen: [{
185 type: Input
186 }], id: [{
187 type: Input
188 }], value: [{
189 type: Input
190 }], numVisible: [{
191 type: Input
192 }], responsiveOptions: [{
193 type: Input
194 }], showItemNavigators: [{
195 type: Input
196 }], showThumbnailNavigators: [{
197 type: Input
198 }], showItemNavigatorsOnHover: [{
199 type: Input
200 }], changeItemOnIndicatorHover: [{
201 type: Input
202 }], circular: [{
203 type: Input
204 }], autoPlay: [{
205 type: Input
206 }], transitionInterval: [{
207 type: Input
208 }], showThumbnails: [{
209 type: Input
210 }], thumbnailsPosition: [{
211 type: Input
212 }], verticalThumbnailViewPortHeight: [{
213 type: Input
214 }], showIndicators: [{
215 type: Input
216 }], showIndicatorsOnItem: [{
217 type: Input
218 }], indicatorsPosition: [{
219 type: Input
220 }], baseZIndex: [{
221 type: Input
222 }], maskClass: [{
223 type: Input
224 }], containerClass: [{
225 type: Input
226 }], containerStyle: [{
227 type: Input
228 }], showTransitionOptions: [{
229 type: Input
230 }], hideTransitionOptions: [{
231 type: Input
232 }], mask: [{
233 type: ViewChild,
234 args: ['mask']
235 }], visible: [{
236 type: Input
237 }], activeIndexChange: [{
238 type: Output
239 }], visibleChange: [{
240 type: Output
241 }], templates: [{
242 type: ContentChildren,
243 args: [PrimeTemplate]
244 }] } });
245class GalleriaContent {
246 constructor(galleria, cd) {
247 this.galleria = galleria;
248 this.cd = cd;
249 this.value = [];
250 this.maskHide = new EventEmitter();
251 this.activeItemChange = new EventEmitter();
252 this.id = this.galleria.id || UniqueComponentId();
253 this.slideShowActicve = false;
254 this._activeIndex = 0;
255 this.slideShowActive = true;
256 }
257 get activeIndex() {
258 return this._activeIndex;
259 }
260 ;
261 set activeIndex(activeIndex) {
262 this._activeIndex = activeIndex;
263 }
264 galleriaClass() {
265 const thumbnailsPosClass = this.galleria.showThumbnails && this.getPositionClass('p-galleria-thumbnails', this.galleria.thumbnailsPosition);
266 const indicatorPosClass = this.galleria.showIndicators && this.getPositionClass('p-galleria-indicators', this.galleria.indicatorsPosition);
267 return (this.galleria.containerClass ? this.galleria.containerClass + " " : '') + (thumbnailsPosClass ? thumbnailsPosClass + " " : '') + (indicatorPosClass ? indicatorPosClass + " " : '');
268 }
269 startSlideShow() {
270 this.interval = setInterval(() => {
271 let activeIndex = (this.galleria.circular && (this.value.length - 1) === this.activeIndex) ? 0 : (this.activeIndex + 1);
272 this.onActiveIndexChange(activeIndex);
273 this.activeIndex = activeIndex;
274 }, this.galleria.transitionInterval);
275 this.slideShowActive = true;
276 }
277 stopSlideShow() {
278 if (this.interval) {
279 clearInterval(this.interval);
280 }
281 this.slideShowActive = false;
282 }
283 getPositionClass(preClassName, position) {
284 const positions = ['top', 'left', 'bottom', 'right'];
285 const pos = positions.find(item => item === position);
286 return pos ? `${preClassName}-${pos}` : '';
287 }
288 isVertical() {
289 return this.galleria.thumbnailsPosition === 'left' || this.galleria.thumbnailsPosition === 'right';
290 }
291 onActiveIndexChange(index) {
292 if (this.activeIndex !== index) {
293 this.activeIndex = index;
294 this.activeItemChange.emit(this.activeIndex);
295 }
296 }
297}
298GalleriaContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: GalleriaContent, deps: [{ token: Galleria }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
299GalleriaContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: GalleriaContent, selector: "p-galleriaContent", inputs: { activeIndex: "activeIndex", value: "value", numVisible: "numVisible" }, outputs: { maskHide: "maskHide", activeItemChange: "activeItemChange" }, ngImport: i0, template: `
300 <div [attr.id]="id" *ngIf="value && value.length > 0" [ngClass]="{'p-galleria p-component': true, 'p-galleria-fullscreen': this.galleria.fullScreen,
301 'p-galleria-indicator-onitem': this.galleria.showIndicatorsOnItem, 'p-galleria-item-nav-onhover': this.galleria.showItemNavigatorsOnHover && !this.galleria.fullScreen}"
302 [ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}" [class]="galleriaClass()">
303 <button *ngIf="galleria.fullScreen" type="button" class="p-galleria-close p-link" (click)="maskHide.emit()" pRipple>
304 <span class="p-galleria-close-icon pi pi-times"></span>
305 </button>
306 <div *ngIf="galleria.templates && galleria.headerFacet" class="p-galleria-header">
307 <p-galleriaItemSlot type="header" [templates]="galleria.templates"></p-galleriaItemSlot>
308 </div>
309 <div class="p-galleria-content">
310 <p-galleriaItem [value]="value" [activeIndex]="activeIndex" [circular]="galleria.circular" [templates]="galleria.templates" (onActiveIndexChange)="onActiveIndexChange($event)"
311 [showIndicators]="galleria.showIndicators" [changeItemOnIndicatorHover]="galleria.changeItemOnIndicatorHover" [indicatorFacet]="galleria.indicatorFacet"
312 [captionFacet]="galleria.captionFacet" [showItemNavigators]="galleria.showItemNavigators" [autoPlay]="galleria.autoPlay" [slideShowActive]="slideShowActive"
313 (startSlideShow)="startSlideShow()" (stopSlideShow)="stopSlideShow()"></p-galleriaItem>
314
315 <p-galleriaThumbnails *ngIf="galleria.showThumbnails" [containerId]="id" [value]="value" (onActiveIndexChange)="onActiveIndexChange($event)" [activeIndex]="activeIndex" [templates]="galleria.templates"
316 [numVisible]="numVisible" [responsiveOptions]="galleria.responsiveOptions" [circular]="galleria.circular"
317 [isVertical]="isVertical()" [contentHeight]="galleria.verticalThumbnailViewPortHeight" [showThumbnailNavigators]="galleria.showThumbnailNavigators"
318 [slideShowActive]="slideShowActive" (stopSlideShow)="stopSlideShow()"></p-galleriaThumbnails>
319 </div>
320 <div *ngIf="galleria.templates && galleria.footerFacet" class="p-galleria-footer">
321 <p-galleriaItemSlot type="footer" [templates]="galleria.templates"></p-galleriaItemSlot>
322 </div>
323 </div>
324 `, isInline: true, components: [{ type: i0.forwardRef(function () { return GalleriaItemSlot; }), selector: "p-galleriaItemSlot", inputs: ["templates", "index", "item", "type"] }, { type: i0.forwardRef(function () { return GalleriaItem; }), selector: "p-galleriaItem", inputs: ["circular", "value", "showItemNavigators", "showIndicators", "slideShowActive", "changeItemOnIndicatorHover", "autoPlay", "templates", "indicatorFacet", "captionFacet", "activeIndex"], outputs: ["startSlideShow", "stopSlideShow", "onActiveIndexChange"] }, { type: i0.forwardRef(function () { return GalleriaThumbnails; }), selector: "p-galleriaThumbnails", inputs: ["containerId", "value", "isVertical", "slideShowActive", "circular", "responsiveOptions", "contentHeight", "showThumbnailNavigators", "templates", "numVisible", "activeIndex"], outputs: ["onActiveIndexChange", "stopSlideShow"] }], directives: [{ type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i2.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i2.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i0.forwardRef(function () { return i3.Ripple; }), selector: "[pRipple]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
325i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: GalleriaContent, decorators: [{
326 type: Component,
327 args: [{
328 selector: 'p-galleriaContent',
329 template: `
330 <div [attr.id]="id" *ngIf="value && value.length > 0" [ngClass]="{'p-galleria p-component': true, 'p-galleria-fullscreen': this.galleria.fullScreen,
331 'p-galleria-indicator-onitem': this.galleria.showIndicatorsOnItem, 'p-galleria-item-nav-onhover': this.galleria.showItemNavigatorsOnHover && !this.galleria.fullScreen}"
332 [ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}" [class]="galleriaClass()">
333 <button *ngIf="galleria.fullScreen" type="button" class="p-galleria-close p-link" (click)="maskHide.emit()" pRipple>
334 <span class="p-galleria-close-icon pi pi-times"></span>
335 </button>
336 <div *ngIf="galleria.templates && galleria.headerFacet" class="p-galleria-header">
337 <p-galleriaItemSlot type="header" [templates]="galleria.templates"></p-galleriaItemSlot>
338 </div>
339 <div class="p-galleria-content">
340 <p-galleriaItem [value]="value" [activeIndex]="activeIndex" [circular]="galleria.circular" [templates]="galleria.templates" (onActiveIndexChange)="onActiveIndexChange($event)"
341 [showIndicators]="galleria.showIndicators" [changeItemOnIndicatorHover]="galleria.changeItemOnIndicatorHover" [indicatorFacet]="galleria.indicatorFacet"
342 [captionFacet]="galleria.captionFacet" [showItemNavigators]="galleria.showItemNavigators" [autoPlay]="galleria.autoPlay" [slideShowActive]="slideShowActive"
343 (startSlideShow)="startSlideShow()" (stopSlideShow)="stopSlideShow()"></p-galleriaItem>
344
345 <p-galleriaThumbnails *ngIf="galleria.showThumbnails" [containerId]="id" [value]="value" (onActiveIndexChange)="onActiveIndexChange($event)" [activeIndex]="activeIndex" [templates]="galleria.templates"
346 [numVisible]="numVisible" [responsiveOptions]="galleria.responsiveOptions" [circular]="galleria.circular"
347 [isVertical]="isVertical()" [contentHeight]="galleria.verticalThumbnailViewPortHeight" [showThumbnailNavigators]="galleria.showThumbnailNavigators"
348 [slideShowActive]="slideShowActive" (stopSlideShow)="stopSlideShow()"></p-galleriaThumbnails>
349 </div>
350 <div *ngIf="galleria.templates && galleria.footerFacet" class="p-galleria-footer">
351 <p-galleriaItemSlot type="footer" [templates]="galleria.templates"></p-galleriaItemSlot>
352 </div>
353 </div>
354 `,
355 changeDetection: ChangeDetectionStrategy.OnPush
356 }]
357 }], ctorParameters: function () { return [{ type: Galleria }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { activeIndex: [{
358 type: Input
359 }], value: [{
360 type: Input
361 }], numVisible: [{
362 type: Input
363 }], maskHide: [{
364 type: Output
365 }], activeItemChange: [{
366 type: Output
367 }] } });
368class GalleriaItemSlot {
369 get item() {
370 return this._item;
371 }
372 ;
373 set item(item) {
374 this._item = item;
375 if (this.templates) {
376 this.templates.forEach((item) => {
377 if (item.getType() === this.type) {
378 switch (this.type) {
379 case 'item':
380 case 'caption':
381 case 'thumbnail':
382 this.context = { $implicit: this.item };
383 this.contentTemplate = item.template;
384 break;
385 }
386 }
387 });
388 }
389 }
390 ngAfterContentInit() {
391 this.templates.forEach((item) => {
392 if (item.getType() === this.type) {
393 switch (this.type) {
394 case 'item':
395 case 'caption':
396 case 'thumbnail':
397 this.context = { $implicit: this.item };
398 this.contentTemplate = item.template;
399 break;
400 case 'indicator':
401 this.context = { $implicit: this.index };
402 this.contentTemplate = item.template;
403 break;
404 default:
405 this.context = {};
406 this.contentTemplate = item.template;
407 break;
408 }
409 }
410 });
411 }
412}
413GalleriaItemSlot.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: GalleriaItemSlot, deps: [], target: i0.ɵɵFactoryTarget.Component });
414GalleriaItemSlot.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: GalleriaItemSlot, selector: "p-galleriaItemSlot", inputs: { templates: "templates", index: "index", item: "item", type: "type" }, ngImport: i0, template: `
415 <ng-container *ngIf="contentTemplate">
416 <ng-container *ngTemplateOutlet="contentTemplate; context: context"></ng-container>
417 </ng-container>
418 `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
419i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: GalleriaItemSlot, decorators: [{
420 type: Component,
421 args: [{
422 selector: 'p-galleriaItemSlot',
423 template: `
424 <ng-container *ngIf="contentTemplate">
425 <ng-container *ngTemplateOutlet="contentTemplate; context: context"></ng-container>
426 </ng-container>
427 `,
428 changeDetection: ChangeDetectionStrategy.OnPush
429 }]
430 }], propDecorators: { templates: [{
431 type: Input
432 }], index: [{
433 type: Input
434 }], item: [{
435 type: Input
436 }], type: [{
437 type: Input
438 }] } });
439class GalleriaItem {
440 constructor() {
441 this.circular = false;
442 this.showItemNavigators = false;
443 this.showIndicators = true;
444 this.slideShowActive = true;
445 this.changeItemOnIndicatorHover = true;
446 this.autoPlay = false;
447 this.startSlideShow = new EventEmitter();
448 this.stopSlideShow = new EventEmitter();
449 this.onActiveIndexChange = new EventEmitter();
450 this._activeIndex = 0;
451 }
452 get activeIndex() {
453 return this._activeIndex;
454 }
455 ;
456 set activeIndex(activeIndex) {
457 this._activeIndex = activeIndex;
458 this.activeItem = this.value[this._activeIndex];
459 }
460 ngOnInit() {
461 if (this.autoPlay) {
462 this.startSlideShow.emit();
463 }
464 }
465 next() {
466 let nextItemIndex = this.activeIndex + 1;
467 let activeIndex = this.circular && this.value.length - 1 === this.activeIndex
468 ? 0
469 : nextItemIndex;
470 this.onActiveIndexChange.emit(activeIndex);
471 }
472 prev() {
473 let prevItemIndex = this.activeIndex !== 0 ? this.activeIndex - 1 : 0;
474 let activeIndex = this.circular && this.activeIndex === 0
475 ? this.value.length - 1
476 : prevItemIndex;
477 this.onActiveIndexChange.emit(activeIndex);
478 }
479 stopTheSlideShow() {
480 if (this.slideShowActive && this.stopSlideShow) {
481 this.stopSlideShow.emit();
482 }
483 }
484 navForward(e) {
485 this.stopTheSlideShow();
486 this.next();
487 if (e && e.cancelable) {
488 e.preventDefault();
489 }
490 }
491 navBackward(e) {
492 this.stopTheSlideShow();
493 this.prev();
494 if (e && e.cancelable) {
495 e.preventDefault();
496 }
497 }
498 onIndicatorClick(index) {
499 this.stopTheSlideShow();
500 this.onActiveIndexChange.emit(index);
501 }
502 onIndicatorMouseEnter(index) {
503 if (this.changeItemOnIndicatorHover) {
504 this.stopTheSlideShow();
505 this.onActiveIndexChange.emit(index);
506 }
507 }
508 onIndicatorKeyDown(index) {
509 this.stopTheSlideShow();
510 this.onActiveIndexChange.emit(index);
511 }
512 isNavForwardDisabled() {
513 return !this.circular && this.activeIndex === (this.value.length - 1);
514 }
515 isNavBackwardDisabled() {
516 return !this.circular && this.activeIndex === 0;
517 }
518 isIndicatorItemActive(index) {
519 return this.activeIndex === index;
520 }
521}
522GalleriaItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: GalleriaItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
523GalleriaItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: GalleriaItem, selector: "p-galleriaItem", inputs: { circular: "circular", value: "value", showItemNavigators: "showItemNavigators", showIndicators: "showIndicators", slideShowActive: "slideShowActive", changeItemOnIndicatorHover: "changeItemOnIndicatorHover", autoPlay: "autoPlay", templates: "templates", indicatorFacet: "indicatorFacet", captionFacet: "captionFacet", activeIndex: "activeIndex" }, outputs: { startSlideShow: "startSlideShow", stopSlideShow: "stopSlideShow", onActiveIndexChange: "onActiveIndexChange" }, ngImport: i0, template: `
524 <div class="p-galleria-item-wrapper">
525 <div class="p-galleria-item-container">
526 <button *ngIf="showItemNavigators" type="button" [ngClass]="{'p-galleria-item-prev p-galleria-item-nav p-link': true, 'p-disabled': this.isNavBackwardDisabled()}" (click)="navBackward($event)" [disabled]="isNavBackwardDisabled()" pRipple>
527 <span class="p-galleria-item-prev-icon pi pi-chevron-left"></span>
528 </button>
529 <p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" class="p-galleria-item"></p-galleriaItemSlot>
530 <button *ngIf="showItemNavigators" type="button" [ngClass]="{'p-galleria-item-next p-galleria-item-nav p-link': true,'p-disabled': this.isNavForwardDisabled()}" (click)="navForward($event)" [disabled]="isNavForwardDisabled()" pRipple>
531 <span class="p-galleria-item-next-icon pi pi-chevron-right"></span>
532 </button>
533 <div class="p-galleria-caption" *ngIf="captionFacet">
534 <p-galleriaItemSlot type="caption" [item]="activeItem" [templates]="templates"></p-galleriaItemSlot>
535 </div>
536 </div>
537 <ul *ngIf="showIndicators" class="p-galleria-indicators p-reset">
538 <li *ngFor="let item of value; let index = index;" tabindex="0"
539 (click)="onIndicatorClick(index)" (mouseenter)="onIndicatorMouseEnter(index)" (keydown.enter)="onIndicatorKeyDown(index)"
540 [ngClass]="{'p-galleria-indicator': true,'p-highlight': isIndicatorItemActive(index)}">
541 <button type="button" tabIndex="-1" class="p-link" *ngIf="!indicatorFacet">
542 </button>
543 <p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>
544 </li>
545 </ul>
546 </div>
547 `, isInline: true, components: [{ type: GalleriaItemSlot, selector: "p-galleriaItemSlot", inputs: ["templates", "index", "item", "type"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.Ripple, selector: "[pRipple]" }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
548i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: GalleriaItem, decorators: [{
549 type: Component,
550 args: [{
551 selector: 'p-galleriaItem',
552 template: `
553 <div class="p-galleria-item-wrapper">
554 <div class="p-galleria-item-container">
555 <button *ngIf="showItemNavigators" type="button" [ngClass]="{'p-galleria-item-prev p-galleria-item-nav p-link': true, 'p-disabled': this.isNavBackwardDisabled()}" (click)="navBackward($event)" [disabled]="isNavBackwardDisabled()" pRipple>
556 <span class="p-galleria-item-prev-icon pi pi-chevron-left"></span>
557 </button>
558 <p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" class="p-galleria-item"></p-galleriaItemSlot>
559 <button *ngIf="showItemNavigators" type="button" [ngClass]="{'p-galleria-item-next p-galleria-item-nav p-link': true,'p-disabled': this.isNavForwardDisabled()}" (click)="navForward($event)" [disabled]="isNavForwardDisabled()" pRipple>
560 <span class="p-galleria-item-next-icon pi pi-chevron-right"></span>
561 </button>
562 <div class="p-galleria-caption" *ngIf="captionFacet">
563 <p-galleriaItemSlot type="caption" [item]="activeItem" [templates]="templates"></p-galleriaItemSlot>
564 </div>
565 </div>
566 <ul *ngIf="showIndicators" class="p-galleria-indicators p-reset">
567 <li *ngFor="let item of value; let index = index;" tabindex="0"
568 (click)="onIndicatorClick(index)" (mouseenter)="onIndicatorMouseEnter(index)" (keydown.enter)="onIndicatorKeyDown(index)"
569 [ngClass]="{'p-galleria-indicator': true,'p-highlight': isIndicatorItemActive(index)}">
570 <button type="button" tabIndex="-1" class="p-link" *ngIf="!indicatorFacet">
571 </button>
572 <p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>
573 </li>
574 </ul>
575 </div>
576 `,
577 changeDetection: ChangeDetectionStrategy.OnPush
578 }]
579 }], propDecorators: { circular: [{
580 type: Input
581 }], value: [{
582 type: Input
583 }], showItemNavigators: [{
584 type: Input
585 }], showIndicators: [{
586 type: Input
587 }], slideShowActive: [{
588 type: Input
589 }], changeItemOnIndicatorHover: [{
590 type: Input
591 }], autoPlay: [{
592 type: Input
593 }], templates: [{
594 type: Input
595 }], indicatorFacet: [{
596 type: Input
597 }], captionFacet: [{
598 type: Input
599 }], startSlideShow: [{
600 type: Output
601 }], stopSlideShow: [{
602 type: Output
603 }], onActiveIndexChange: [{
604 type: Output
605 }], activeIndex: [{
606 type: Input
607 }] } });
608class GalleriaThumbnails {
609 constructor(cd) {
610 this.cd = cd;
611 this.isVertical = false;
612 this.slideShowActive = false;
613 this.circular = false;
614 this.contentHeight = "300px";
615 this.showThumbnailNavigators = true;
616 this.onActiveIndexChange = new EventEmitter();
617 this.stopSlideShow = new EventEmitter();
618 this.startPos = null;
619 this.thumbnailsStyle = null;
620 this.sortedResponsiveOptions = null;
621 this.totalShiftedItems = 0;
622 this.page = 0;
623 this._numVisible = 0;
624 this.d_numVisible = 0;
625 this._oldNumVisible = 0;
626 this._activeIndex = 0;
627 this._oldactiveIndex = 0;
628 }
629 get numVisible() {
630 return this._numVisible;
631 }
632 ;
633 set numVisible(numVisible) {
634 this._numVisible = numVisible;
635 this._oldNumVisible = this.d_numVisible;
636 this.d_numVisible = numVisible;
637 }
638 get activeIndex() {
639 return this._activeIndex;
640 }
641 ;
642 set activeIndex(activeIndex) {
643 this._oldactiveIndex = this._activeIndex;
644 this._activeIndex = activeIndex;
645 }
646 ngOnInit() {
647 this.createStyle();
648 if (this.responsiveOptions) {
649 this.bindDocumentListeners();
650 }
651 }
652 ngAfterContentChecked() {
653 let totalShiftedItems = this.totalShiftedItems;
654 if ((this._oldNumVisible !== this.d_numVisible || this._oldactiveIndex !== this._activeIndex) && this.itemsContainer) {
655 if (this._activeIndex <= this.getMedianItemIndex()) {
656 totalShiftedItems = 0;
657 }
658 else if (this.value.length - this.d_numVisible + this.getMedianItemIndex() < this._activeIndex) {
659 totalShiftedItems = this.d_numVisible - this.value.length;
660 }
661 else if (this.value.length - this.d_numVisible < this._activeIndex && this.d_numVisible % 2 === 0) {
662 totalShiftedItems = (this._activeIndex * -1) + this.getMedianItemIndex() + 1;
663 }
664 else {
665 totalShiftedItems = (this._activeIndex * -1) + this.getMedianItemIndex();
666 }
667 if (totalShiftedItems !== this.totalShiftedItems) {
668 this.totalShiftedItems = totalShiftedItems;
669 }
670 if (this.itemsContainer && this.itemsContainer.nativeElement) {
671 this.itemsContainer.nativeElement.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
672 }
673 if (this._oldactiveIndex !== this._activeIndex) {
674 DomHandler.removeClass(this.itemsContainer.nativeElement, 'p-items-hidden');
675 this.itemsContainer.nativeElement.style.transition = 'transform 500ms ease 0s';
676 }
677 this._oldactiveIndex = this._activeIndex;
678 this._oldNumVisible = this.d_numVisible;
679 }
680 }
681 ngAfterViewInit() {
682 this.calculatePosition();
683 }
684 createStyle() {
685 if (!this.thumbnailsStyle) {
686 this.thumbnailsStyle = document.createElement('style');
687 this.thumbnailsStyle.type = 'text/css';
688 document.body.appendChild(this.thumbnailsStyle);
689 }
690 let innerHTML = `
691 #${this.containerId} .p-galleria-thumbnail-item {
692 flex: 1 0 ${(100 / this.d_numVisible)}%
693 }
694 `;
695 if (this.responsiveOptions) {
696 this.sortedResponsiveOptions = [...this.responsiveOptions];
697 this.sortedResponsiveOptions.sort((data1, data2) => {
698 const value1 = data1.breakpoint;
699 const value2 = data2.breakpoint;
700 let result = null;
701 if (value1 == null && value2 != null)
702 result = -1;
703 else if (value1 != null && value2 == null)
704 result = 1;
705 else if (value1 == null && value2 == null)
706 result = 0;
707 else if (typeof value1 === 'string' && typeof value2 === 'string')
708 result = value1.localeCompare(value2, undefined, { numeric: true });
709 else
710 result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
711 return -1 * result;
712 });
713 for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {
714 let res = this.sortedResponsiveOptions[i];
715 innerHTML += `
716 @media screen and (max-width: ${res.breakpoint}) {
717 #${this.containerId} .p-galleria-thumbnail-item {
718 flex: 1 0 ${(100 / res.numVisible)}%
719 }
720 }
721 `;
722 }
723 }
724 this.thumbnailsStyle.innerHTML = innerHTML;
725 }
726 calculatePosition() {
727 if (this.itemsContainer && this.sortedResponsiveOptions) {
728 let windowWidth = window.innerWidth;
729 let matchedResponsiveData = {
730 numVisible: this._numVisible
731 };
732 for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {
733 let res = this.sortedResponsiveOptions[i];
734 if (parseInt(res.breakpoint, 10) >= windowWidth) {
735 matchedResponsiveData = res;
736 }
737 }
738 if (this.d_numVisible !== matchedResponsiveData.numVisible) {
739 this.d_numVisible = matchedResponsiveData.numVisible;
740 this.cd.markForCheck();
741 }
742 }
743 }
744 getTabIndex(index) {
745 return this.isItemActive(index) ? 0 : null;
746 }
747 navForward(e) {
748 this.stopTheSlideShow();
749 let nextItemIndex = this._activeIndex + 1;
750 if (nextItemIndex + this.totalShiftedItems > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) < this.getTotalPageNumber() - 1 || this.circular)) {
751 this.step(-1);
752 }
753 let activeIndex = this.circular && (this.value.length - 1) === this._activeIndex ? 0 : nextItemIndex;
754 this.onActiveIndexChange.emit(activeIndex);
755 if (e.cancelable) {
756 e.preventDefault();
757 }
758 }
759 navBackward(e) {
760 this.stopTheSlideShow();
761 let prevItemIndex = this._activeIndex !== 0 ? this._activeIndex - 1 : 0;
762 let diff = prevItemIndex + this.totalShiftedItems;
763 if ((this.d_numVisible - diff - 1) > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) !== 0 || this.circular)) {
764 this.step(1);
765 }
766 let activeIndex = this.circular && this._activeIndex === 0 ? this.value.length - 1 : prevItemIndex;
767 this.onActiveIndexChange.emit(activeIndex);
768 if (e.cancelable) {
769 e.preventDefault();
770 }
771 }
772 onItemClick(index) {
773 this.stopTheSlideShow();
774 let selectedItemIndex = index;
775 if (selectedItemIndex !== this._activeIndex) {
776 const diff = selectedItemIndex + this.totalShiftedItems;
777 let dir = 0;
778 if (selectedItemIndex < this._activeIndex) {
779 dir = (this.d_numVisible - diff - 1) - this.getMedianItemIndex();
780 if (dir > 0 && (-1 * this.totalShiftedItems) !== 0) {
781 this.step(dir);
782 }
783 }
784 else {
785 dir = this.getMedianItemIndex() - diff;
786 if (dir < 0 && (-1 * this.totalShiftedItems) < this.getTotalPageNumber() - 1) {
787 this.step(dir);
788 }
789 }
790 this.activeIndex = selectedItemIndex;
791 this.onActiveIndexChange.emit(this.activeIndex);
792 }
793 }
794 step(dir) {
795 let totalShiftedItems = this.totalShiftedItems + dir;
796 if (dir < 0 && (-1 * totalShiftedItems) + this.d_numVisible > (this.value.length - 1)) {
797 totalShiftedItems = this.d_numVisible - this.value.length;
798 }
799 else if (dir > 0 && totalShiftedItems > 0) {
800 totalShiftedItems = 0;
801 }
802 if (this.circular) {
803 if (dir < 0 && this.value.length - 1 === this._activeIndex) {
804 totalShiftedItems = 0;
805 }
806 else if (dir > 0 && this._activeIndex === 0) {
807 totalShiftedItems = this.d_numVisible - this.value.length;
808 }
809 }
810 if (this.itemsContainer) {
811 DomHandler.removeClass(this.itemsContainer.nativeElement, 'p-items-hidden');
812 this.itemsContainer.nativeElement.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
813 this.itemsContainer.nativeElement.style.transition = 'transform 500ms ease 0s';
814 }
815 this.totalShiftedItems = totalShiftedItems;
816 }
817 stopTheSlideShow() {
818 if (this.slideShowActive && this.stopSlideShow) {
819 this.stopSlideShow.emit();
820 }
821 }
822 changePageOnTouch(e, diff) {
823 if (diff < 0) { // left
824 this.navForward(e);
825 }
826 else { // right
827 this.navBackward(e);
828 }
829 }
830 getTotalPageNumber() {
831 return this.value.length > this.d_numVisible ? (this.value.length - this.d_numVisible) + 1 : 0;
832 }
833 getMedianItemIndex() {
834 let index = Math.floor(this.d_numVisible / 2);
835 return (this.d_numVisible % 2) ? index : index - 1;
836 }
837 onTransitionEnd() {
838 if (this.itemsContainer && this.itemsContainer.nativeElement) {
839 DomHandler.addClass(this.itemsContainer.nativeElement, 'p-items-hidden');
840 this.itemsContainer.nativeElement.style.transition = '';
841 }
842 }
843 onTouchEnd(e) {
844 let touchobj = e.changedTouches[0];
845 if (this.isVertical) {
846 this.changePageOnTouch(e, (touchobj.pageY - this.startPos.y));
847 }
848 else {
849 this.changePageOnTouch(e, (touchobj.pageX - this.startPos.x));
850 }
851 }
852 onTouchMove(e) {
853 if (e.cancelable) {
854 e.preventDefault();
855 }
856 }
857 onTouchStart(e) {
858 let touchobj = e.changedTouches[0];
859 this.startPos = {
860 x: touchobj.pageX,
861 y: touchobj.pageY
862 };
863 }
864 isNavBackwardDisabled() {
865 return (!this.circular && this._activeIndex === 0) || (this.value.length <= this.d_numVisible);
866 }
867 isNavForwardDisabled() {
868 return (!this.circular && this._activeIndex === (this.value.length - 1)) || (this.value.length <= this.d_numVisible);
869 }
870 firstItemAciveIndex() {
871 return this.totalShiftedItems * -1;
872 }
873 lastItemActiveIndex() {
874 return this.firstItemAciveIndex() + this.d_numVisible - 1;
875 }
876 isItemActive(index) {
877 return this.firstItemAciveIndex() <= index && this.lastItemActiveIndex() >= index;
878 }
879 bindDocumentListeners() {
880 if (!this.documentResizeListener) {
881 this.documentResizeListener = () => {
882 this.calculatePosition();
883 };
884 window.addEventListener('resize', this.documentResizeListener);
885 }
886 }
887 unbindDocumentListeners() {
888 if (this.documentResizeListener) {
889 window.removeEventListener('resize', this.documentResizeListener);
890 this.documentResizeListener = null;
891 }
892 }
893 ngOnDestroy() {
894 if (this.responsiveOptions) {
895 this.unbindDocumentListeners();
896 }
897 if (this.thumbnailsStyle) {
898 this.thumbnailsStyle.parentNode.removeChild(this.thumbnailsStyle);
899 }
900 }
901}
902GalleriaThumbnails.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: GalleriaThumbnails, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
903GalleriaThumbnails.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: GalleriaThumbnails, selector: "p-galleriaThumbnails", inputs: { containerId: "containerId", value: "value", isVertical: "isVertical", slideShowActive: "slideShowActive", circular: "circular", responsiveOptions: "responsiveOptions", contentHeight: "contentHeight", showThumbnailNavigators: "showThumbnailNavigators", templates: "templates", numVisible: "numVisible", activeIndex: "activeIndex" }, outputs: { onActiveIndexChange: "onActiveIndexChange", stopSlideShow: "stopSlideShow" }, viewQueries: [{ propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true }], ngImport: i0, template: `
904 <div class="p-galleria-thumbnail-wrapper">
905 <div class="p-galleria-thumbnail-container">
906 <button *ngIf="showThumbnailNavigators" type="button" [ngClass]="{'p-galleria-thumbnail-prev p-link': true, 'p-disabled': this.isNavBackwardDisabled()}" (click)="navBackward($event)" [disabled]="isNavBackwardDisabled()" pRipple>
907 <span [ngClass]="{'p-galleria-thumbnail-prev-icon pi': true, 'pi-chevron-left': !this.isVertical, 'pi-chevron-up': this.isVertical}"></span>
908 </button>
909 <div class="p-galleria-thumbnail-items-container" [ngStyle]="{'height': isVertical ? contentHeight : ''}">
910 <div #itemsContainer class="p-galleria-thumbnail-items" (transitionend)="onTransitionEnd()"
911 (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" (touchend)="onTouchEnd($event)">
912 <div *ngFor="let item of value; let index = index;" [ngClass]="{'p-galleria-thumbnail-item': true, 'p-galleria-thumbnail-item-current': activeIndex === index, 'p-galleria-thumbnail-item-active': isItemActive(index),
913 'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index, 'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index }">
914 <div class="p-galleria-thumbnail-item-content" [attr.tabindex]="getTabIndex(index)" (click)="onItemClick(index)" (keydown.enter)="onItemClick(index)">
915 <p-galleriaItemSlot type="thumbnail" [item]="item" [templates]="templates"></p-galleriaItemSlot>
916 </div>
917 </div>
918 </div>
919 </div>
920 <button *ngIf="showThumbnailNavigators" type="button" [ngClass]="{'p-galleria-thumbnail-next p-link': true, 'p-disabled': this.isNavForwardDisabled()}" (click)="navForward($event)" [disabled]="isNavForwardDisabled()" pRipple>
921 <span [ngClass]="{'p-galleria-thumbnail-next-icon pi': true, 'pi-chevron-right': !this.isVertical, 'pi-chevron-down': this.isVertical}"></span>
922 </button>
923 </div>
924 </div>
925 `, isInline: true, components: [{ type: GalleriaItemSlot, selector: "p-galleriaItemSlot", inputs: ["templates", "index", "item", "type"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.Ripple, selector: "[pRipple]" }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
926i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: GalleriaThumbnails, decorators: [{
927 type: Component,
928 args: [{
929 selector: 'p-galleriaThumbnails',
930 template: `
931 <div class="p-galleria-thumbnail-wrapper">
932 <div class="p-galleria-thumbnail-container">
933 <button *ngIf="showThumbnailNavigators" type="button" [ngClass]="{'p-galleria-thumbnail-prev p-link': true, 'p-disabled': this.isNavBackwardDisabled()}" (click)="navBackward($event)" [disabled]="isNavBackwardDisabled()" pRipple>
934 <span [ngClass]="{'p-galleria-thumbnail-prev-icon pi': true, 'pi-chevron-left': !this.isVertical, 'pi-chevron-up': this.isVertical}"></span>
935 </button>
936 <div class="p-galleria-thumbnail-items-container" [ngStyle]="{'height': isVertical ? contentHeight : ''}">
937 <div #itemsContainer class="p-galleria-thumbnail-items" (transitionend)="onTransitionEnd()"
938 (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" (touchend)="onTouchEnd($event)">
939 <div *ngFor="let item of value; let index = index;" [ngClass]="{'p-galleria-thumbnail-item': true, 'p-galleria-thumbnail-item-current': activeIndex === index, 'p-galleria-thumbnail-item-active': isItemActive(index),
940 'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index, 'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index }">
941 <div class="p-galleria-thumbnail-item-content" [attr.tabindex]="getTabIndex(index)" (click)="onItemClick(index)" (keydown.enter)="onItemClick(index)">
942 <p-galleriaItemSlot type="thumbnail" [item]="item" [templates]="templates"></p-galleriaItemSlot>
943 </div>
944 </div>
945 </div>
946 </div>
947 <button *ngIf="showThumbnailNavigators" type="button" [ngClass]="{'p-galleria-thumbnail-next p-link': true, 'p-disabled': this.isNavForwardDisabled()}" (click)="navForward($event)" [disabled]="isNavForwardDisabled()" pRipple>
948 <span [ngClass]="{'p-galleria-thumbnail-next-icon pi': true, 'pi-chevron-right': !this.isVertical, 'pi-chevron-down': this.isVertical}"></span>
949 </button>
950 </div>
951 </div>
952 `,
953 changeDetection: ChangeDetectionStrategy.OnPush
954 }]
955 }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { containerId: [{
956 type: Input
957 }], value: [{
958 type: Input
959 }], isVertical: [{
960 type: Input
961 }], slideShowActive: [{
962 type: Input
963 }], circular: [{
964 type: Input
965 }], responsiveOptions: [{
966 type: Input
967 }], contentHeight: [{
968 type: Input
969 }], showThumbnailNavigators: [{
970 type: Input
971 }], templates: [{
972 type: Input
973 }], onActiveIndexChange: [{
974 type: Output
975 }], stopSlideShow: [{
976 type: Output
977 }], itemsContainer: [{
978 type: ViewChild,
979 args: ['itemsContainer']
980 }], numVisible: [{
981 type: Input
982 }], activeIndex: [{
983 type: Input
984 }] } });
985class GalleriaModule {
986}
987GalleriaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: GalleriaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
988GalleriaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: GalleriaModule, declarations: [Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails], imports: [CommonModule, SharedModule, RippleModule], exports: [CommonModule, Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails, SharedModule] });
989GalleriaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: GalleriaModule, imports: [[CommonModule, SharedModule, RippleModule], CommonModule, SharedModule] });
990i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: GalleriaModule, decorators: [{
991 type: NgModule,
992 args: [{
993 imports: [CommonModule, SharedModule, RippleModule],
994 exports: [CommonModule, Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails, SharedModule],
995 declarations: [Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails]
996 }]
997 }] });
998
999/**
1000 * Generated bundle index. Do not edit.
1001 */
1002
1003export { Galleria, GalleriaContent, GalleriaItem, GalleriaItemSlot, GalleriaModule, GalleriaThumbnails };
Note: See TracBrowser for help on using the repository browser.