ngsl-carousel
Version:
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.2.4.
1 lines • 8.98 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"NgslCarouselModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":4}],"declarations":[{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"exports":[{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":22,"character":1},"arguments":[{"selector":".ngsl-carousel-item-directive"}]}],"members":{}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":28,"character":1},"arguments":[{"selector":".ngsl-carousel-dot-directive"}]}],"members":{}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":35,"character":1},"arguments":[{"selector":"ngsl-carousel","exportAs":"ngsl-carousel","template":"<div class=\"ngsl-carousel\">\n <div *ngIf=\"dots\" class=\"dots\" #dotsTrack>\n <div *ngFor=\"let item of dotsList; let i = index\"\n class=\"ngsl-carousel-dot-directive dot\"\n (click)=\"goToSlide(i)\"\n [class.is-current-item]=\"currentSlide === i\">\n <ng-container *ngIf=\"item.isVisible\" [ngTemplateOutlet]=\"item.tpl\"></ng-container>\n </div>\n </div>\n <div class=\"slide\">\n <div class=\"content\">\n <div *ngIf=\"arrows\" class=\"slide-arrows\">\n <input type=\"button\" (click)=\"prev()\" class=\"prev\" [class.is-disabled]=\"currentSlide === 0\" />\n <input type=\"button\" (click)=\"next()\" class=\"next\" [class.is-disabled]=\"currentSlide === items.length - 1\" />\n </div>\n <div class=\"slide-track\" #track [ngStyle]=\"trackWidth\">\n <div *ngFor=\"let item of items\" class=\"ngsl-carousel-item-directive\">\n <ng-container [ngTemplateOutlet]=\"item.tpl\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n</div>\n","styles":[".ngsl-carousel{overflow:hidden;position:relative}.ngsl-carousel .dots{position:absolute;top:30px;right:40px;font-size:0;z-index:10}.ngsl-carousel .dots .dot{display:inline-block;vertical-align:middle;width:10px;height:10px;border-radius:100%;background-color:#768692;box-sizing:border-box;cursor:pointer}.ngsl-carousel .dots .dot+.dot{margin-left:10px}.ngsl-carousel .dots .dot.is-current-item{width:22px;height:22px;position:relative;border:1px solid #fff;background-color:transparent}.ngsl-carousel .dots .dot.is-current-item:after{content:\"\";position:absolute;left:50%;top:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);width:10px;height:10px;border-radius:100%;background-color:#fff}.slide-track{display:flex;flex-direction:row;flex-wrap:nowrap;height:100%}.ngsl-carousel-item-directive{width:100%;height:100%}.slide-arrows input[type=button]{z-index:10;position:absolute;left:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:40px;height:40px;background-color:#768692;opacity:.7;border:0;cursor:pointer;background-repeat:no-repeat;background-position:center}.slide-arrows input[type=button]:hover{opacity:.9}.slide-arrows input[type=button].is-disabled{background-color:#c4bcb7}.slide-arrows input[type=button].is-disabled:hover{opacity:.7}.slide-arrows input[type=button]:focus{outline:0}.slide-arrows input[type=button].prev{-webkit-transform:translateY(-50%) rotate(-180deg);transform:translateY(-50%) rotate(-180deg)}.slide-arrows input[type=button].next{left:auto;right:0}"]}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":44,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵd"}]}]}],"itemsElements":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":45,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵa"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":45,"character":45}}]}]}],"carousel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":46,"character":3},"arguments":["track"]}]}],"dotsList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":50,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵe"}]}]}],"dotElements":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":51,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵb"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":51,"character":44}}]}]}],"dotTrack":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":52,"character":3},"arguments":["dotTrack"]}]}],"timing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3}}]}],"rewindTiming":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":3}}]}],"arrows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3}}]}],"dots":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}}]}],"infinity":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":3}}]}],"dynamicTiming":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":3}}]}],"autoplay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":3}}]}],"perView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":3}}]}],"buildAnimation":[{"__symbolic":"method"}],"changeSlide":[{"__symbolic":"method"}],"goToSlide":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"setSlidesIndex":[{"__symbolic":"method"}],"removeDotsInDomElements":[{"__symbolic":"method"}],"setInitValues":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/animations","name":"AnimationBuilder","line":154,"character":31}]}],"ngAfterContentInit":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[ngslCarouselItem]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[ngslCarouselDot]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}}},"origins":{"NgslCarouselModule":"./src/app/ngsl-carousel/ngsl-carousel.module","ɵa":"./src/app/ngsl-carousel/ngsl-carousel.component","ɵb":"./src/app/ngsl-carousel/ngsl-carousel.component","ɵc":"./src/app/ngsl-carousel/ngsl-carousel.component","ɵd":"./src/app/ngsl-carousel/ngsl-carousel-item.directive","ɵe":"./src/app/ngsl-carousel/ngsl-carousel-dot.directive"},"importAs":"ngsl-carousel"}