primeng
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [![npm downloads](https://img.shields.io/npm/dm/primeng.sv
1 lines • 12.9 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"Carousel":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"p-carousel","template":"\n\t\t<div [attr.id]=\"id\" [ngClass]=\"{'p-carousel p-component':true, 'p-carousel-vertical': isVertical(), 'p-carousel-horizontal': !isVertical()}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n\t\t\t<div class=\"p-carousel-header\" *ngIf=\"headerFacet || headerTemplate\">\n <ng-content select=\"p-header\"></ng-content>\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n\t\t\t</div>\n\t\t\t<div [class]=\"contentClass\" [ngClass]=\"'p-carousel-content'\">\n\t\t\t\t<div class=\"p-carousel-container\">\n\t\t\t\t\t<button type=\"button\" *ngIf=\"showNavigators\" [ngClass]=\"{'p-carousel-prev p-link':true, 'p-disabled': isBackwardNavDisabled()}\" [disabled]=\"isBackwardNavDisabled()\" (click)=\"navBackward($event)\" pRipple>\n\t\t\t\t\t\t<span [ngClass]=\"{'p-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=\"p-carousel-items-content\" [ngStyle]=\"{'height': isVertical() ? verticalViewPortHeight : 'auto'}\">\n\t\t\t\t\t\t<div #itemsContainer class=\"p-carousel-items-container\" (transitionend)=\"onTransitionEnd()\" (touchend)=\"onTouchEnd($event)\" (touchstart)=\"onTouchStart($event)\" (touchmove)=\"onTouchMove($event)\">\n <div *ngFor=\"let item of clonedItemsForStarting; let index = index\" [ngClass]= \"{'p-carousel-item p-carousel-item-cloned': true,\n 'p-carousel-item-active': (totalShiftedItems * -1) === (value.length),\n\t\t\t\t\t\t\t 'p-carousel-item-start': 0 === index,\n\t\t\t\t\t\t\t 'p-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 <div *ngFor=\"let item of value; let index = index\" [ngClass]= \"{'p-carousel-item': true,\n 'p-carousel-item-active': (firstIndex() <= index && lastIndex() >= index),\n\t\t\t\t\t\t\t 'p-carousel-item-start': firstIndex() === index,\n\t\t\t\t\t\t\t 'p-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 <div *ngFor=\"let item of clonedItemsForFinishing; let index = index\" [ngClass]= \"{'p-carousel-item p-carousel-item-cloned': true,\n 'p-carousel-item-active': ((totalShiftedItems *-1) === numVisible),\n\t\t\t\t\t\t\t 'p-carousel-item-start': 0 === index,\n\t\t\t\t\t\t\t 'p-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 type=\"button\" *ngIf=\"showNavigators\" [ngClass]=\"{'p-carousel-next p-link': true, 'p-disabled': isForwardNavDisabled()}\" [disabled]=\"isForwardNavDisabled()\" (click)=\"navForward($event)\" pRipple>\n\t\t\t\t\t\t<span [ngClass]=\"{'p-carousel-prev-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 [ngClass]=\"'p-carousel-indicators p-reset'\" [class]=\"indicatorsContentClass\" [ngStyle]=\"indicatorsContentStyle\" *ngIf=\"showIndicators\">\n\t\t\t\t\t<li *ngFor=\"let totalDot of totalDotsArray(); let i = index\" [ngClass]=\"{'p-carousel-indicator':true,'p-highlight': _page === i}\">\n\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"'p-link'\" (click)=\"onDotClick($event, i)\" [class]=\"indicatorStyleClass\" [ngStyle]=\"indicatorStyle\"></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=\"p-carousel-footer\" *ngIf=\"footerFacet || footerTemplate\">\n <ng-content select=\"p-footer\"></ng-content>\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n\t\t\t</div>\n\t\t</div>\n ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":57,"character":21},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":58,"character":19},"member":"None"},"styles":[".p-carousel,.p-carousel-content{display:flex;flex-direction:column}.p-carousel-content{overflow:auto}.p-carousel-next,.p-carousel-prev{-ms-grid-row-align:center;align-items:center;align-self:center;display:flex;flex-grow:0;flex-shrink:0;justify-content:center;overflow:hidden;position:relative}.p-carousel-container{display:flex;flex-direction:row}.p-carousel-items-content{overflow:hidden;width:100%}.p-carousel-indicators,.p-carousel-items-container{display:flex;flex-direction:row}.p-carousel-indicators{flex-wrap:wrap;justify-content:center}.p-carousel-indicator>button{align-items:center;display:flex;justify-content:center}.p-carousel-vertical .p-carousel-container{flex-direction:column}.p-carousel-vertical .p-carousel-items-container{flex-direction:column;height:100%}.p-items-hidden .p-carousel-item{visibility:hidden}.p-items-hidden .p-carousel-item.p-carousel-item-active{visibility:visible}"]}]}],"members":{"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":2}}]}],"numVisible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":2}}]}],"numScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":2}}]}],"responsiveOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":2}}]}],"orientation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":100,"character":2}}]}],"verticalViewPortHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":2}}]}],"contentClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":2}}]}],"indicatorsContentClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":106,"character":2}}]}],"indicatorsContentStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":2}}]}],"indicatorStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":2}}]}],"indicatorStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":112,"character":2}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":2}}]}],"circular":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":121,"character":2}}]}],"showIndicators":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":2}}]}],"showNavigators":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":125,"character":2}}]}],"autoplayInterval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":2}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":2}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":131,"character":2}}]}],"onPage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":133,"character":5}}]}],"itemsContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":135,"character":2},"arguments":["itemsContainer"]}]}],"headerFacet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":137,"character":2},"arguments":[{"__symbolic":"reference","module":"primeng/api","name":"Header","line":137,"character":15}]}]}],"footerFacet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":139,"character":5},"arguments":[{"__symbolic":"reference","module":"primeng/api","name":"Footer","line":139,"character":18}]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":141,"character":2},"arguments":[{"__symbolic":"reference","module":"primeng/api","name":"PrimeTemplate","line":141,"character":18}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":201,"character":24},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":201,"character":49},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":201,"character":68}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterContentChecked":[{"__symbolic":"method"}],"createStyle":[{"__symbolic":"method"}],"calculatePosition":[{"__symbolic":"method"}],"setCloneItems":[{"__symbolic":"method"}],"firstIndex":[{"__symbolic":"method"}],"lastIndex":[{"__symbolic":"method"}],"totalDots":[{"__symbolic":"method"}],"totalDotsArray":[{"__symbolic":"method"}],"isVertical":[{"__symbolic":"method"}],"isCircular":[{"__symbolic":"method"}],"isAutoplay":[{"__symbolic":"method"}],"isForwardNavDisabled":[{"__symbolic":"method"}],"isBackwardNavDisabled":[{"__symbolic":"method"}],"isEmpty":[{"__symbolic":"method"}],"navForward":[{"__symbolic":"method"}],"navBackward":[{"__symbolic":"method"}],"onDotClick":[{"__symbolic":"method"}],"step":[{"__symbolic":"method"}],"startAutoplay":[{"__symbolic":"method"}],"stopAutoplay":[{"__symbolic":"method"}],"onTransitionEnd":[{"__symbolic":"method"}],"onTouchStart":[{"__symbolic":"method"}],"onTouchMove":[{"__symbolic":"method"}],"onTouchEnd":[{"__symbolic":"method"}],"changePageOnTouch":[{"__symbolic":"method"}],"bindDocumentListeners":[{"__symbolic":"method"}],"unbindDocumentListeners":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"CarouselModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":679,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":680,"character":11},{"__symbolic":"reference","module":"primeng/api","name":"SharedModule","line":680,"character":25},{"__symbolic":"reference","module":"primeng/ripple","name":"RippleModule","line":680,"character":39}],"exports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":681,"character":11},{"__symbolic":"reference","name":"Carousel"},{"__symbolic":"reference","module":"primeng/api","name":"SharedModule","line":681,"character":35}],"declarations":[{"__symbolic":"reference","name":"Carousel"}]}]}],"members":{}}},"origins":{"Carousel":"./carousel","CarouselModule":"./carousel"},"importAs":"primeng/carousel"}