1 | import * as i0 from '@angular/core';
|
---|
2 | import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, Output, ContentChildren, NgModule } from '@angular/core';
|
---|
3 | import * as i2 from '@angular/common';
|
---|
4 | import { CommonModule } from '@angular/common';
|
---|
5 | import * as i1 from 'primeng/api';
|
---|
6 | import { PrimeTemplate, SharedModule } from 'primeng/api';
|
---|
7 | import { ZIndexUtils, UniqueComponentId } from 'primeng/utils';
|
---|
8 | import { DomHandler } from 'primeng/dom';
|
---|
9 | import * as i3 from 'primeng/ripple';
|
---|
10 | import { RippleModule } from 'primeng/ripple';
|
---|
11 | import { trigger, transition, style, animate } from '@angular/animations';
|
---|
12 |
|
---|
13 | class 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 | }
|
---|
134 | Galleria.ɵ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 });
|
---|
135 | Galleria.ɵ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 });
|
---|
157 | i0.ɵɵ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 | }] } });
|
---|
246 | class 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 | }
|
---|
299 | GalleriaContent.ɵ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 });
|
---|
300 | GalleriaContent.ɵ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 });
|
---|
326 | i0.ɵɵ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 | }] } });
|
---|
369 | class 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 | }
|
---|
414 | GalleriaItemSlot.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: GalleriaItemSlot, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
---|
415 | GalleriaItemSlot.ɵ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 });
|
---|
420 | i0.ɵɵ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 | }] } });
|
---|
440 | class 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 | }
|
---|
523 | GalleriaItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: GalleriaItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
---|
524 | GalleriaItem.ɵ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 });
|
---|
549 | i0.ɵɵ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 | }] } });
|
---|
609 | class 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 | }
|
---|
903 | GalleriaThumbnails.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: GalleriaThumbnails, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
---|
904 | GalleriaThumbnails.ɵ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 });
|
---|
927 | i0.ɵɵ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 | }] } });
|
---|
986 | class GalleriaModule {
|
---|
987 | }
|
---|
988 | GalleriaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: GalleriaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
---|
989 | GalleriaModule.ɵ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] });
|
---|
990 | GalleriaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: GalleriaModule, imports: [[CommonModule, SharedModule, RippleModule], CommonModule, SharedModule] });
|
---|
991 | i0.ɵɵ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 |
|
---|
1004 | export { Galleria, GalleriaContent, GalleriaItem, GalleriaItemSlot, GalleriaModule, GalleriaThumbnails };
|
---|