1 | (function (global, factory) {
|
2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('primeng/api'), require('@angular/common'), require('primeng/utils')) :
|
3 | typeof define === 'function' && define.amd ? define('primeng/carousel', ['exports', '@angular/core', 'primeng/api', '@angular/common', 'primeng/utils'], factory) :
|
4 | (global = global || self, factory((global.primeng = global.primeng || {}, global.primeng.carousel = {}), global.ng.core, global.primeng.api, global.ng.common, global.primeng.utils));
|
5 | }(this, (function (exports, core, api, common, utils) { 'use strict';
|
6 |
|
7 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
8 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
9 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
10 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
11 | return c > 3 && r && Object.defineProperty(target, key, r), r;
|
12 | };
|
13 | var __read = (this && this.__read) || function (o, n) {
|
14 | var m = typeof Symbol === "function" && o[Symbol.iterator];
|
15 | if (!m) return o;
|
16 | var i = m.call(o), r, ar = [], e;
|
17 | try {
|
18 | while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
19 | }
|
20 | catch (error) { e = { error: error }; }
|
21 | finally {
|
22 | try {
|
23 | if (r && !r.done && (m = i["return"])) m.call(i);
|
24 | }
|
25 | finally { if (e) throw e.error; }
|
26 | }
|
27 | return ar;
|
28 | };
|
29 | var __spread = (this && this.__spread) || function () {
|
30 | for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
|
31 | return ar;
|
32 | };
|
33 | var Carousel = (function () {
|
34 | function Carousel(el, zone) {
|
35 | this.el = el;
|
36 | this.zone = zone;
|
37 | this.orientation = "horizontal";
|
38 | this.verticalViewPortHeight = "300px";
|
39 | this.contentClass = "";
|
40 | this.dotsContainerClass = "";
|
41 | this.circular = false;
|
42 | this.autoplayInterval = 0;
|
43 | this.onPage = new core.EventEmitter();
|
44 | this._numVisible = 1;
|
45 | this._numScroll = 1;
|
46 | this._oldNumScroll = 0;
|
47 | this.prevState = {
|
48 | numScroll: 0,
|
49 | numVisible: 0,
|
50 | value: []
|
51 | };
|
52 | this.defaultNumScroll = 1;
|
53 | this.defaultNumVisible = 1;
|
54 | this._page = 0;
|
55 | this.isRemainingItemsAdded = false;
|
56 | this.remainingItems = 0;
|
57 | this.swipeThreshold = 20;
|
58 | this.totalShiftedItems = this.page * this.numScroll * -1;
|
59 | }
|
60 | Object.defineProperty(Carousel.prototype, "page", {
|
61 | get: function () {
|
62 | return this._page;
|
63 | },
|
64 | set: function (val) {
|
65 | if (this.isCreated && val !== this._page) {
|
66 | if (this.autoplayInterval) {
|
67 | this.stopAutoplay();
|
68 | this.allowAutoplay = false;
|
69 | }
|
70 | if (val > this._page && val < (this.totalDots() - 1)) {
|
71 | this.step(-1, val);
|
72 | }
|
73 | else if (val < this._page && val !== 0) {
|
74 | this.step(1, val);
|
75 | }
|
76 | }
|
77 | this._page = val;
|
78 | },
|
79 | enumerable: true,
|
80 | configurable: true
|
81 | });
|
82 | Object.defineProperty(Carousel.prototype, "numVisible", {
|
83 | get: function () {
|
84 | return this._numVisible;
|
85 | },
|
86 | set: function (val) {
|
87 | this._numVisible = val;
|
88 | },
|
89 | enumerable: true,
|
90 | configurable: true
|
91 | });
|
92 | Object.defineProperty(Carousel.prototype, "numScroll", {
|
93 | get: function () {
|
94 | return this._numVisible;
|
95 | },
|
96 | set: function (val) {
|
97 | this._numScroll = val;
|
98 | },
|
99 | enumerable: true,
|
100 | configurable: true
|
101 | });
|
102 | Object.defineProperty(Carousel.prototype, "value", {
|
103 | get: function () {
|
104 | return this._value;
|
105 | },
|
106 | set: function (val) {
|
107 | this._value = val;
|
108 | if (this.circular && this._value) {
|
109 | this.setCloneItems();
|
110 | }
|
111 | },
|
112 | enumerable: true,
|
113 | configurable: true
|
114 | });
|
115 | ;
|
116 | Carousel.prototype.ngAfterContentInit = function () {
|
117 | var _this = this;
|
118 | this.id = utils.UniqueComponentId();
|
119 | this.allowAutoplay = !!this.autoplayInterval;
|
120 | if (this.circular) {
|
121 | this.setCloneItems();
|
122 | }
|
123 | if (this.responsiveOptions) {
|
124 | this.defaultNumScroll = this._numScroll;
|
125 | this.defaultNumVisible = this._numVisible;
|
126 | }
|
127 | this.createStyle();
|
128 | this.calculatePosition();
|
129 | if (this.responsiveOptions) {
|
130 | this.bindDocumentListeners();
|
131 | }
|
132 | this.templates.forEach(function (item) {
|
133 | switch (item.getType()) {
|
134 | case 'item':
|
135 | _this.itemTemplate = item.template;
|
136 | break;
|
137 | default:
|
138 | _this.itemTemplate = item.template;
|
139 | break;
|
140 | }
|
141 | });
|
142 | };
|
143 | Carousel.prototype.ngAfterContentChecked = function () {
|
144 | var isCircular = this.isCircular();
|
145 | var totalShiftedItems = this.totalShiftedItems;
|
146 | if (this.value && (this.prevState.numScroll !== this._numScroll || this.prevState.numVisible !== this._numVisible || this.prevState.value.length !== this.value.length)) {
|
147 | if (this.autoplayInterval) {
|
148 | this.stopAutoplay();
|
149 | }
|
150 | this.remainingItems = (this.value.length - this._numVisible) % this._numScroll;
|
151 | var page = this._page;
|
152 | if (this.totalDots() !== 0 && page >= this.totalDots()) {
|
153 | page = this.totalDots() - 1;
|
154 | this._page = page;
|
155 | this.onPage.emit({
|
156 | page: this.page
|
157 | });
|
158 | }
|
159 | totalShiftedItems = (page * this._numScroll) * -1;
|
160 | if (isCircular) {
|
161 | totalShiftedItems -= this._numVisible;
|
162 | }
|
163 | if (page === (this.totalDots() - 1) && this.remainingItems > 0) {
|
164 | totalShiftedItems += (-1 * this.remainingItems) + this._numScroll;
|
165 | this.isRemainingItemsAdded = true;
|
166 | }
|
167 | else {
|
168 | this.isRemainingItemsAdded = false;
|
169 | }
|
170 | if (totalShiftedItems !== this.totalShiftedItems) {
|
171 | this.totalShiftedItems = totalShiftedItems;
|
172 | }
|
173 | this._oldNumScroll = this._numScroll;
|
174 | this.prevState.numScroll = this._numScroll;
|
175 | this.prevState.numVisible = this._numVisible;
|
176 | this.prevState.value = this._value;
|
177 | if (this.totalDots() > 0 && this.itemsContainer && this.itemsContainer.nativeElement) {
|
178 | this.itemsContainer.nativeElement.style.transform = this.isVertical() ? "translate3d(0, " + totalShiftedItems * (100 / this._numVisible) + "%, 0)" : "translate3d(" + totalShiftedItems * (100 / this._numVisible) + "%, 0, 0)";
|
179 | }
|
180 | this.isCreated = true;
|
181 | if (this.autoplayInterval && this.isAutoplay()) {
|
182 | this.startAutoplay();
|
183 | }
|
184 | }
|
185 | if (isCircular) {
|
186 | if (this.page === 0) {
|
187 | totalShiftedItems = -1 * this._numVisible;
|
188 | }
|
189 | else if (totalShiftedItems === 0) {
|
190 | totalShiftedItems = -1 * this.value.length;
|
191 | if (this.remainingItems > 0) {
|
192 | this.isRemainingItemsAdded = true;
|
193 | }
|
194 | }
|
195 | if (totalShiftedItems !== this.totalShiftedItems) {
|
196 | this.totalShiftedItems = totalShiftedItems;
|
197 | }
|
198 | }
|
199 | };
|
200 | Carousel.prototype.createStyle = function () {
|
201 | if (!this.carouselStyle) {
|
202 | this.carouselStyle = document.createElement('style');
|
203 | this.carouselStyle.type = 'text/css';
|
204 | document.body.appendChild(this.carouselStyle);
|
205 | }
|
206 | var innerHTML = "\n #" + this.id + " .ui-carousel-item {\n\t\t\t\tflex: 1 0 " + (100 / this.numVisible) + "%\n\t\t\t}\n ";
|
207 | if (this.responsiveOptions) {
|
208 | this.responsiveOptions.sort(function (data1, data2) {
|
209 | var value1 = data1.breakpoint;
|
210 | var value2 = data2.breakpoint;
|
211 | var result = null;
|
212 | if (value1 == null && value2 != null)
|
213 | result = -1;
|
214 | else if (value1 != null && value2 == null)
|
215 | result = 1;
|
216 | else if (value1 == null && value2 == null)
|
217 | result = 0;
|
218 | else if (typeof value1 === 'string' && typeof value2 === 'string')
|
219 | result = value1.localeCompare(value2, undefined, { numeric: true });
|
220 | else
|
221 | result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
|
222 | return -1 * result;
|
223 | });
|
224 | for (var i = 0; i < this.responsiveOptions.length; i++) {
|
225 | var res = this.responsiveOptions[i];
|
226 | innerHTML += "\n @media screen and (max-width: " + res.breakpoint + ") {\n #" + this.id + " .ui-carousel-item {\n flex: 1 0 " + (100 / res.numVisible) + "%\n }\n }\n ";
|
227 | }
|
228 | }
|
229 | this.carouselStyle.innerHTML = innerHTML;
|
230 | };
|
231 | Carousel.prototype.calculatePosition = function () {
|
232 | if (this.itemsContainer && this.responsiveOptions) {
|
233 | var windowWidth = window.innerWidth;
|
234 | var matchedResponsiveData = {
|
235 | numVisible: this.defaultNumVisible,
|
236 | numScroll: this.defaultNumScroll
|
237 | };
|
238 | for (var i = 0; i < this.responsiveOptions.length; i++) {
|
239 | var res = this.responsiveOptions[i];
|
240 | if (parseInt(res.breakpoint, 10) >= windowWidth) {
|
241 | matchedResponsiveData = res;
|
242 | }
|
243 | }
|
244 | if (this._numScroll !== matchedResponsiveData.numScroll) {
|
245 | var page = this._page;
|
246 | page = Math.floor((page * this._numScroll) / matchedResponsiveData.numScroll);
|
247 | var totalShiftedItems = (matchedResponsiveData.numScroll * this.page) * -1;
|
248 | if (this.isCircular()) {
|
249 | totalShiftedItems -= matchedResponsiveData.numVisible;
|
250 | }
|
251 | this.totalShiftedItems = totalShiftedItems;
|
252 | this._numScroll = matchedResponsiveData.numScroll;
|
253 | this._page = page;
|
254 | this.onPage.emit({
|
255 | page: this.page
|
256 | });
|
257 | }
|
258 | if (this._numVisible !== matchedResponsiveData.numVisible) {
|
259 | this._numVisible = matchedResponsiveData.numVisible;
|
260 | this.setCloneItems();
|
261 | }
|
262 | }
|
263 | };
|
264 | Carousel.prototype.setCloneItems = function () {
|
265 | var _a, _b;
|
266 | this.clonedItemsForStarting = [];
|
267 | this.clonedItemsForFinishing = [];
|
268 | if (this.isCircular()) {
|
269 | (_a = this.clonedItemsForStarting).push.apply(_a, __spread(this.value.slice(-1 * this._numVisible)));
|
270 | (_b = this.clonedItemsForFinishing).push.apply(_b, __spread(this.value.slice(0, this._numVisible)));
|
271 | }
|
272 | };
|
273 | Carousel.prototype.firstIndex = function () {
|
274 | return this.isCircular() ? (-1 * (this.totalShiftedItems + this.numVisible)) : (this.totalShiftedItems * -1);
|
275 | };
|
276 | Carousel.prototype.lastIndex = function () {
|
277 | return this.firstIndex() + this.numVisible - 1;
|
278 | };
|
279 | Carousel.prototype.totalDots = function () {
|
280 | return this.value ? Math.ceil((this.value.length - this._numVisible) / this._numScroll) + 1 : 0;
|
281 | };
|
282 | Carousel.prototype.totalDotsArray = function () {
|
283 | var totalDots = this.totalDots();
|
284 | return totalDots <= 0 ? [] : Array(totalDots).fill(0);
|
285 | };
|
286 | Carousel.prototype.containerClass = function () {
|
287 | return {
|
288 | 'ui-carousel ui-widget': true,
|
289 | 'ui-carousel-vertical': this.isVertical(),
|
290 | 'ui-carousel-horizontal': !this.isVertical()
|
291 | };
|
292 | };
|
293 | Carousel.prototype.contentClasses = function () {
|
294 | return 'ui-carousel-content ' + this.contentClass;
|
295 | };
|
296 | Carousel.prototype.dotsContentClasses = function () {
|
297 | return 'ui-carousel-dots-container ui-helper-reset ' + this.dotsContainerClass;
|
298 | };
|
299 | Carousel.prototype.isVertical = function () {
|
300 | return this.orientation === 'vertical';
|
301 | };
|
302 | Carousel.prototype.isCircular = function () {
|
303 | return this.circular && this.value && this.value.length >= this.numVisible;
|
304 | };
|
305 | Carousel.prototype.isAutoplay = function () {
|
306 | return this.autoplayInterval && this.allowAutoplay;
|
307 | };
|
308 | Carousel.prototype.isForwardNavDisabled = function () {
|
309 | return this.isEmpty() || (this._page >= (this.totalDots() - 1) && !this.isCircular());
|
310 | };
|
311 | Carousel.prototype.isBackwardNavDisabled = function () {
|
312 | return this.isEmpty() || (this._page <= 0 && !this.isCircular());
|
313 | };
|
314 | Carousel.prototype.isEmpty = function () {
|
315 | return !this.value || this.value.length === 0;
|
316 | };
|
317 | Carousel.prototype.navForward = function (e, index) {
|
318 | if (this.isCircular() || this._page < (this.totalDots() - 1)) {
|
319 | this.step(-1, index);
|
320 | }
|
321 | if (this.autoplayInterval) {
|
322 | this.stopAutoplay();
|
323 | this.allowAutoplay = false;
|
324 | }
|
325 | if (e && e.cancelable) {
|
326 | e.preventDefault();
|
327 | }
|
328 | };
|
329 | Carousel.prototype.navBackward = function (e, index) {
|
330 | if (this.isCircular() || this._page !== 0) {
|
331 | this.step(1, index);
|
332 | }
|
333 | if (this.autoplayInterval) {
|
334 | this.stopAutoplay();
|
335 | this.allowAutoplay = false;
|
336 | }
|
337 | if (e && e.cancelable) {
|
338 | e.preventDefault();
|
339 | }
|
340 | };
|
341 | Carousel.prototype.onDotClick = function (e, index) {
|
342 | var page = this._page;
|
343 | if (this.autoplayInterval) {
|
344 | this.stopAutoplay();
|
345 | this.allowAutoplay = false;
|
346 | }
|
347 | if (index > page) {
|
348 | this.navForward(e, index);
|
349 | }
|
350 | else if (index < page) {
|
351 | this.navBackward(e, index);
|
352 | }
|
353 | };
|
354 | Carousel.prototype.step = function (dir, page) {
|
355 | var totalShiftedItems = this.totalShiftedItems;
|
356 | var isCircular = this.isCircular();
|
357 | if (page != null) {
|
358 | totalShiftedItems = (this._numScroll * page) * -1;
|
359 | if (isCircular) {
|
360 | totalShiftedItems -= this._numVisible;
|
361 | }
|
362 | this.isRemainingItemsAdded = false;
|
363 | }
|
364 | else {
|
365 | totalShiftedItems += (this._numScroll * dir);
|
366 | if (this.isRemainingItemsAdded) {
|
367 | totalShiftedItems += this.remainingItems - (this._numScroll * dir);
|
368 | this.isRemainingItemsAdded = false;
|
369 | }
|
370 | var originalShiftedItems = isCircular ? (totalShiftedItems + this._numVisible) : totalShiftedItems;
|
371 | page = Math.abs(Math.floor((originalShiftedItems / this._numScroll)));
|
372 | }
|
373 | if (isCircular && this.page === (this.totalDots() - 1) && dir === -1) {
|
374 | totalShiftedItems = -1 * (this.value.length + this._numVisible);
|
375 | page = 0;
|
376 | }
|
377 | else if (isCircular && this.page === 0 && dir === 1) {
|
378 | totalShiftedItems = 0;
|
379 | page = (this.totalDots() - 1);
|
380 | }
|
381 | else if (page === (this.totalDots() - 1) && this.remainingItems > 0) {
|
382 | totalShiftedItems += ((this.remainingItems * -1) - (this._numScroll * dir));
|
383 | this.isRemainingItemsAdded = true;
|
384 | }
|
385 | if (this.itemsContainer) {
|
386 | this.itemsContainer.nativeElement.style.transform = this.isVertical() ? "translate3d(0, " + totalShiftedItems * (100 / this._numVisible) + "%, 0)" : "translate3d(" + totalShiftedItems * (100 / this._numVisible) + "%, 0, 0)";
|
387 | this.itemsContainer.nativeElement.style.transition = 'transform 500ms ease 0s';
|
388 | }
|
389 | this.totalShiftedItems = totalShiftedItems;
|
390 | this._page = page;
|
391 | this.onPage.emit({
|
392 | page: this.page
|
393 | });
|
394 | };
|
395 | Carousel.prototype.startAutoplay = function () {
|
396 | var _this = this;
|
397 | this.interval = setInterval(function () {
|
398 | if (_this.totalDots() > 0) {
|
399 | if (_this.page === (_this.totalDots() - 1)) {
|
400 | _this.step(-1, 0);
|
401 | }
|
402 | else {
|
403 | _this.step(-1, _this.page + 1);
|
404 | }
|
405 | }
|
406 | }, this.autoplayInterval);
|
407 | };
|
408 | Carousel.prototype.stopAutoplay = function () {
|
409 | if (this.interval) {
|
410 | clearInterval(this.interval);
|
411 | }
|
412 | };
|
413 | Carousel.prototype.onTransitionEnd = function () {
|
414 | if (this.itemsContainer) {
|
415 | this.itemsContainer.nativeElement.style.transition = '';
|
416 | if ((this.page === 0 || this.page === (this.totalDots() - 1)) && this.isCircular()) {
|
417 | this.itemsContainer.nativeElement.style.transform = this.isVertical() ? "translate3d(0, " + this.totalShiftedItems * (100 / this._numVisible) + "%, 0)" : "translate3d(" + this.totalShiftedItems * (100 / this._numVisible) + "%, 0, 0)";
|
418 | }
|
419 | }
|
420 | };
|
421 | Carousel.prototype.onTouchStart = function (e) {
|
422 | var touchobj = e.changedTouches[0];
|
423 | this.startPos = {
|
424 | x: touchobj.pageX,
|
425 | y: touchobj.pageY
|
426 | };
|
427 | };
|
428 | Carousel.prototype.onTouchMove = function (e) {
|
429 | if (e.cancelable) {
|
430 | e.preventDefault();
|
431 | }
|
432 | };
|
433 | Carousel.prototype.onTouchEnd = function (e) {
|
434 | var touchobj = e.changedTouches[0];
|
435 | if (this.isVertical()) {
|
436 | this.changePageOnTouch(e, (touchobj.pageY - this.startPos.y));
|
437 | }
|
438 | else {
|
439 | this.changePageOnTouch(e, (touchobj.pageX - this.startPos.x));
|
440 | }
|
441 | };
|
442 | Carousel.prototype.changePageOnTouch = function (e, diff) {
|
443 | if (Math.abs(diff) > this.swipeThreshold) {
|
444 | if (diff < 0) {
|
445 | this.navForward(e);
|
446 | }
|
447 | else {
|
448 | this.navBackward(e);
|
449 | }
|
450 | }
|
451 | };
|
452 | Carousel.prototype.bindDocumentListeners = function () {
|
453 | var _this = this;
|
454 | if (!this.documentResizeListener) {
|
455 | this.documentResizeListener = function (e) {
|
456 | _this.calculatePosition();
|
457 | };
|
458 | window.addEventListener('resize', this.documentResizeListener);
|
459 | }
|
460 | };
|
461 | Carousel.prototype.unbindDocumentListeners = function () {
|
462 | if (this.documentResizeListener) {
|
463 | window.removeEventListener('resize', this.documentResizeListener);
|
464 | this.documentResizeListener = null;
|
465 | }
|
466 | };
|
467 | Carousel.prototype.ngOnDestroy = function () {
|
468 | if (this.responsiveOptions) {
|
469 | this.unbindDocumentListeners();
|
470 | }
|
471 | if (this.autoplayInterval) {
|
472 | this.stopAutoplay();
|
473 | }
|
474 | };
|
475 | Carousel.ctorParameters = function () { return [
|
476 | { type: core.ElementRef },
|
477 | { type: core.NgZone }
|
478 | ]; };
|
479 | __decorate([
|
480 | core.Input()
|
481 | ], Carousel.prototype, "page", null);
|
482 | __decorate([
|
483 | core.Input()
|
484 | ], Carousel.prototype, "numVisible", null);
|
485 | __decorate([
|
486 | core.Input()
|
487 | ], Carousel.prototype, "numScroll", null);
|
488 | __decorate([
|
489 | core.Input()
|
490 | ], Carousel.prototype, "responsiveOptions", void 0);
|
491 | __decorate([
|
492 | core.Input()
|
493 | ], Carousel.prototype, "orientation", void 0);
|
494 | __decorate([
|
495 | core.Input()
|
496 | ], Carousel.prototype, "verticalViewPortHeight", void 0);
|
497 | __decorate([
|
498 | core.Input()
|
499 | ], Carousel.prototype, "contentClass", void 0);
|
500 | __decorate([
|
501 | core.Input()
|
502 | ], Carousel.prototype, "dotsContainerClass", void 0);
|
503 | __decorate([
|
504 | core.Input()
|
505 | ], Carousel.prototype, "value", null);
|
506 | __decorate([
|
507 | core.Input()
|
508 | ], Carousel.prototype, "circular", void 0);
|
509 | __decorate([
|
510 | core.Input()
|
511 | ], Carousel.prototype, "autoplayInterval", void 0);
|
512 | __decorate([
|
513 | core.Input()
|
514 | ], Carousel.prototype, "style", void 0);
|
515 | __decorate([
|
516 | core.Input()
|
517 | ], Carousel.prototype, "styleClass", void 0);
|
518 | __decorate([
|
519 | core.Output()
|
520 | ], Carousel.prototype, "onPage", void 0);
|
521 | __decorate([
|
522 | core.ViewChild('itemsContainer')
|
523 | ], Carousel.prototype, "itemsContainer", void 0);
|
524 | __decorate([
|
525 | core.ContentChild(api.Header)
|
526 | ], Carousel.prototype, "headerFacet", void 0);
|
527 | __decorate([
|
528 | core.ContentChild(api.Footer)
|
529 | ], Carousel.prototype, "footerFacet", void 0);
|
530 | __decorate([
|
531 | core.ContentChildren(api.PrimeTemplate)
|
532 | ], Carousel.prototype, "templates", void 0);
|
533 | Carousel = __decorate([
|
534 | core.Component({
|
535 | selector: 'p-carousel',
|
536 | template: "\n\t\t<div [attr.id]=\"id\" [ngClass]=\"containerClass()\" [ngStyle]=\"style\" [class]=\"styleClass\">\n\t\t\t<div class=\"ui-carousel-header\" *ngIf=\"headerFacet\">\n\t\t\t\t<ng-content select=\"p-header\"></ng-content>\n\t\t\t</div>\n\t\t\t<div [class]=\"contentClasses()\">\n\t\t\t\t<div class=\"ui-carousel-container\">\n\t\t\t\t\t<button [ngClass]=\"{'ui-carousel-prev ui-button ui-widget ui-state-default ui-corner-all':true, 'ui-state-disabled': isBackwardNavDisabled()}\" [disabled]=\"isBackwardNavDisabled()\" (click)=\"navBackward($event)\">\n\t\t\t\t\t\t<span [ngClass]=\"{'ui-carousel-prev-icon pi': true, 'pi-chevron-left': !isVertical(), 'pi-chevron-up': isVertical()}\"></span>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"ui-carousel-items-content\" [ngStyle]=\"{'height': isVertical() ? verticalViewPortHeight : 'auto'}\">\n\t\t\t\t\t\t<div #itemsContainer class=\"ui-carousel-items-container\" (transitionend)=\"onTransitionEnd()\" (touchend)=\"onTouchEnd($event)\" (touchstart)=\"onTouchStart($event)\" (touchmove)=\"onTouchMove($event)\">\n\t\t\t\t\t\t\t<div *ngFor=\"let item of clonedItemsForStarting; let index = index\" [ngClass]= \"{'ui-carousel-item ui-carousel-item-cloned': true,'ui-carousel-item-active': (totalShiftedItems * -1) === (value.length),\n\t\t\t\t\t\t\t'ui-carousel-item-start': 0 === index,\n\t\t\t\t\t\t\t'ui-carousel-item-end': (clonedItemsForStarting.length - 1) === index}\">\n\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div *ngFor=\"let item of value; let index = index\" [ngClass]= \"{'ui-carousel-item': true,'ui-carousel-item-active': (firstIndex() <= index && lastIndex() >= index),\n\t\t\t\t\t\t\t'ui-carousel-item-start': firstIndex() === index,\n\t\t\t\t\t\t\t'ui-carousel-item-end': lastIndex() === index}\">\n\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div *ngFor=\"let item of clonedItemsForFinishing; let index = index\" [ngClass]= \"{'ui-carousel-item ui-carousel-item-cloned': true,'ui-carousel-item-active': ((totalShiftedItems *-1) === numVisible),\n\t\t\t\t\t\t\t'ui-carousel-item-start': 0 === index,\n\t\t\t\t\t\t\t'ui-carousel-item-end': (clonedItemsForFinishing.length - 1) === index}\">\n\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<button [ngClass]=\"{'ui-carousel-next ui-button ui-widget ui-state-default ui-corner-all': true, 'ui-state-disabled': isForwardNavDisabled()}\" [disabled]=\"isForwardNavDisabled()\" (click)=\"navForward($event)\">\n\t\t\t\t\t\t<span [ngClass]=\"{'ui-carousel-next-icon pi': true, 'pi-chevron-right': !isVertical(), 'pi-chevron-down': isVertical()}\"></span>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<ul [class]=\"dotsContentClasses()\">\n\t\t\t\t\t<li *ngFor=\"let totalDot of totalDotsArray(); let i = index\" [ngClass]=\"{'ui-carousel-dot-item':true,'ui-state-highlight': _page === i}\">\n\t\t\t\t\t\t<button class=\"ui-button ui-widget ui-state-default ui-corner-all\" (click)=\"onDotClick($event, i)\">\n\t\t\t\t\t\t\t<span [ngClass]=\"{'ui-carousel-dot-icon pi':true, 'pi-circle-on': _page === i, 'pi-circle-off': !(_page === i)}\"></span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t\t<div class=\"ui-carousel-footer\" *ngIf=\"footerFacet\">\n\t\t\t\t<ng-content select=\"p-footer\"></ng-content>\n\t\t\t</div>\n\t\t</div>\n ",
|
537 | changeDetection: core.ChangeDetectionStrategy.Default
|
538 | })
|
539 | ], Carousel);
|
540 | return Carousel;
|
541 | }());
|
542 | var CarouselModule = (function () {
|
543 | function CarouselModule() {
|
544 | }
|
545 | CarouselModule = __decorate([
|
546 | core.NgModule({
|
547 | imports: [common.CommonModule, api.SharedModule],
|
548 | exports: [common.CommonModule, Carousel, api.SharedModule],
|
549 | declarations: [Carousel]
|
550 | })
|
551 | ], CarouselModule);
|
552 | return CarouselModule;
|
553 | }());
|
554 |
|
555 | exports.Carousel = Carousel;
|
556 | exports.CarouselModule = CarouselModule;
|
557 |
|
558 | Object.defineProperty(exports, '__esModule', { value: true });
|
559 |
|
560 | })));
|
561 |
|