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