ng-mat-carousel
Version:
Carousel component for Angular using Material Design.
916 lines (907 loc) • 29.8 kB
JavaScript
import { animate, style, AnimationBuilder } from '@angular/animations';
import { ListKeyManager } from '@angular/cdk/a11y';
import { isPlatformBrowser, CommonModule } from '@angular/common';
import { Component, Input, ViewChild, TemplateRef, EventEmitter, Renderer2, Inject, PLATFORM_ID, Output, ContentChildren, HostListener, Injectable, NgModule } from '@angular/core';
import { Subject, BehaviorSubject, interval } from 'rxjs';
import { takeUntil, filter } from 'rxjs/operators';
import { DomSanitizer, HammerGestureConfig, HAMMER_GESTURE_CONFIG, HammerModule } from '@angular/platform-browser';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
/**
* @fileoverview added by tsickle
* Generated from: lib/carousel-slide/carousel-slide.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MatCarouselSlideComponent {
/**
* @param {?} sanitizer
*/
constructor(sanitizer) {
this.sanitizer = sanitizer;
this.overlayColor = '#00000040';
this.hideOverlay = false;
this.ariaLabel = '';
this.disabled = false; // implements ListKeyManagerOption
// implements ListKeyManagerOption
this.load = false;
}
/**
* @return {?}
*/
ngOnInit() {
if (this.image) {
this.image = this.sanitizer.bypassSecurityTrustStyle(`url("${this.image}")`);
}
}
}
MatCarouselSlideComponent.decorators = [
{ type: Component, args: [{
selector: 'mat-carousel-slide',
template: "<ng-template>\n <div class=\"carousel-slide\" [style.background-image]=\"image\">\n <div class=\"carousel-slide-content\"><ng-content></ng-content></div>\n <div\n *ngIf=\"!hideOverlay\"\n class=\"carousel-slide-overlay\"\n [attr.aria-label] = \"ariaLabel\"\n [style.background-color]=\"overlayColor\"\n ></div>\n </div>\n</ng-template>\n",
styles: [".carousel-slide{background-position:50%;background-repeat:no-repeat;background-size:cover}.carousel-slide,.carousel-slide-overlay{height:100%;position:absolute;width:100%;z-index:auto}.carousel-slide-content{height:100%;position:absolute;width:100%;z-index:1}"]
}] }
];
/** @nocollapse */
MatCarouselSlideComponent.ctorParameters = () => [
{ type: DomSanitizer }
];
MatCarouselSlideComponent.propDecorators = {
image: [{ type: Input }],
overlayColor: [{ type: Input }],
hideOverlay: [{ type: Input }],
ariaLabel: [{ type: Input }],
disabled: [{ type: Input }],
load: [{ type: Input }],
templateRef: [{ type: ViewChild, args: [TemplateRef,] }]
};
if (false) {
/** @type {?} */
MatCarouselSlideComponent.prototype.image;
/** @type {?} */
MatCarouselSlideComponent.prototype.overlayColor;
/** @type {?} */
MatCarouselSlideComponent.prototype.hideOverlay;
/** @type {?} */
MatCarouselSlideComponent.prototype.ariaLabel;
/** @type {?} */
MatCarouselSlideComponent.prototype.disabled;
/** @type {?} */
MatCarouselSlideComponent.prototype.load;
/** @type {?} */
MatCarouselSlideComponent.prototype.templateRef;
/** @type {?} */
MatCarouselSlideComponent.prototype.sanitizer;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/carousel.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {number} */
const Direction = {
left: 0,
right: 1,
index: 2,
};
Direction[Direction.left] = 'left';
Direction[Direction.right] = 'right';
Direction[Direction.index] = 'index';
class MatCarouselComponent {
/**
* @param {?} animationBuilder
* @param {?} renderer
* @param {?} platformId
*/
constructor(animationBuilder, renderer, platformId) {
this.animationBuilder = animationBuilder;
this.renderer = renderer;
this.platformId = platformId;
this.timings = '250ms ease-in';
this.lazyLoad = false;
this.hideArrows = true;
this.hideIndicators = true;
this.ariaLabel = 'Sliding carousel';
this.color = 'accent';
this.maintainAspectRatio = true;
this.proportion = 25;
this.slideHeight = '100%';
this.useKeyboard = false;
this.useMouseWheel = false;
this.changeEmitter = new EventEmitter();
this._autoplay = true;
this.autoplay$ = new Subject();
this.interval$ = new BehaviorSubject(5000);
this.slides$ = new BehaviorSubject(null);
this._maxWidth = 'auto';
this.maxWidth$ = new Subject();
this._loop = true;
this.loop$ = new Subject();
this._orientation = 'ltr';
this.orientation$ = new Subject();
this.timerStop$ = new Subject();
this.destroy$ = new Subject();
this.playing = false;
}
/**
* @param {?} value
* @return {?}
*/
set autoplay(value) {
this.autoplay$.next(value);
this._autoplay = value;
}
/**
* @param {?} value
* @return {?}
*/
set interval(value) {
this.interval$.next(value);
}
/**
* @return {?}
*/
get loop() {
return this._loop;
}
/**
* @param {?} value
* @return {?}
*/
set loop(value) {
this.loop$.next(value);
this._loop = value;
}
/**
* @return {?}
*/
get maxWidth() {
return this._maxWidth;
}
/**
* @param {?} value
* @return {?}
*/
set maxWidth(value) {
this._maxWidth = value;
this.maxWidth$.next();
}
/**
* @param {?} value
* @return {?}
*/
set slides(value) {
this.slides$.next(value);
}
/**
* @return {?}
*/
get orientation() {
return this._orientation;
}
/**
* @param {?} value
* @return {?}
*/
set orientation(value) {
this.orientation$.next(value);
this._orientation = value;
}
/**
* @return {?}
*/
get currentIndex() {
if (this.listKeyManager) {
return this.listKeyManager.activeItemIndex;
}
return 0;
}
/**
* @return {?}
*/
get currentSlide() {
if (this.listKeyManager) {
return this.listKeyManager.activeItem;
}
return null;
}
/**
* @param {?} event
* @return {?}
*/
onKeyUp(event) {
if (this.useKeyboard && !this.playing) {
this.listKeyManager.onKeydown(event);
}
}
/**
* @return {?}
*/
onMouseEnter() {
this.stopTimer();
}
/**
* @return {?}
*/
onMouseLeave() {
this.startTimer(this._autoplay);
}
/**
* @param {?} event
* @return {?}
*/
onMouseWheel(event) {
if (this.useMouseWheel) {
event.preventDefault(); // prevent window to scroll
// prevent window to scroll
/** @type {?} */
const deltaY = Math.sign(event.deltaY);
if (deltaY > 0) {
this.next();
}
else if (deltaY < 0) {
this.previous();
}
}
}
/**
* @param {?} event
* @return {?}
*/
onResize(event) {
// Reset carousel when width is resized
// in order to avoid major glitches.
/** @type {?} */
const w = this.getWidth();
if (w !== this.width) {
this.width = w;
this.slideTo(0);
}
}
/**
* @return {?}
*/
ngAfterContentInit() {
if (!this.lazyLoad) {
this.slidesList.forEach((/**
* @param {?} slide
* @return {?}
*/
(slide) => slide.load = true));
}
else {
this.slidesList.first.load = true;
setTimeout((/**
* @return {?}
*/
() => {
this.slidesList.find((/**
* @param {?} s
* @param {?} i
* @return {?}
*/
(s, i) => i === 1 % this.slidesList.length)).load = true;
this.slidesList.find((/**
* @param {?} s
* @param {?} i
* @return {?}
*/
(s, i) => i === (this.slidesList.length - 1) % this.slidesList.length)).load = true;
}), this.interval$.getValue() / 2);
}
this.listKeyManager = new ListKeyManager(this.slidesList)
.withVerticalOrientation(false)
.withHorizontalOrientation(this._orientation)
.withWrap(this._loop);
this.listKeyManager.updateActiveItem(0);
this.listKeyManager.change
.pipe(takeUntil(this.destroy$))
.subscribe((/**
* @return {?}
*/
() => this.playAnimation()));
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.width = this.getWidth();
this.autoplay$.pipe(takeUntil(this.destroy$)).subscribe((/**
* @param {?} value
* @return {?}
*/
value => {
this.stopTimer();
this.startTimer(value);
}));
this.interval$.pipe(takeUntil(this.destroy$)).subscribe((/**
* @param {?} value
* @return {?}
*/
value => {
this.stopTimer();
this.resetTimer(value);
this.startTimer(this._autoplay);
}));
this.maxWidth$
.pipe(takeUntil(this.destroy$))
.subscribe((/**
* @return {?}
*/
() => this.slideTo(0)));
this.loop$
.pipe(takeUntil(this.destroy$))
.subscribe((/**
* @param {?} value
* @return {?}
*/
value => this.listKeyManager.withWrap(value)));
this.orientation$
.pipe(takeUntil(this.destroy$))
.subscribe((/**
* @param {?} value
* @return {?}
*/
value => this.listKeyManager.withHorizontalOrientation(value)));
this.slides$
.pipe(takeUntil(this.destroy$), filter((/**
* @param {?} value
* @return {?}
*/
value => value && value < this.slidesList.length)))
.subscribe((/**
* @param {?} value
* @return {?}
*/
value => this.resetSlides(value)));
}
/**
* @return {?}
*/
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
/**
* @return {?}
*/
next() {
this.goto(Direction.right);
}
/**
* @return {?}
*/
previous() {
this.goto(Direction.left);
}
/**
* @param {?} index
* @return {?}
*/
slideTo(index) {
this.goto(Direction.index, index);
}
/**
* @param {?} event
* @param {?} slideElem
* @return {?}
*/
onPan(event, slideElem) {
// https://github.com/angular/angular/issues/10541#issuecomment-346539242
// if y velocity is greater, it's a panup/pandown, so ignore.
if (Math.abs(event.velocityY) > Math.abs(event.velocityX)) {
return;
}
/** @type {?} */
let deltaX = event.deltaX;
if (this.isOutOfBounds()) {
deltaX *= 0.2; // decelerate movement;
}
this.renderer.setStyle(slideElem, 'cursor', 'grabbing');
this.renderer.setStyle(this.carouselList.nativeElement, 'transform', this.getTranslation(this.getOffset() + deltaX));
}
/**
* @param {?} event
* @param {?} slideElem
* @return {?}
*/
onPanEnd(event, slideElem) {
this.renderer.removeStyle(slideElem, 'cursor');
if (!this.isOutOfBounds() &&
Math.abs(event.deltaX) > this.getWidth() * 0.25) {
if (event.deltaX <= 0) {
this.next();
return;
}
this.previous();
return;
}
this.playAnimation(); // slide back, don't change current index
}
/**
* @private
* @return {?}
*/
isOutOfBounds() {
/** @type {?} */
const sign = this.orientation === 'rtl' ? -1 : 1;
/** @type {?} */
const left = sign *
(this.carouselList.nativeElement.getBoundingClientRect().left -
this.carouselList.nativeElement.offsetParent.getBoundingClientRect()
.left);
/** @type {?} */
const lastIndex = this.slidesList.length - 1;
/** @type {?} */
const width = -this.getWidth() * lastIndex;
return ((this.listKeyManager.activeItemIndex === 0 && left >= 0) ||
(this.listKeyManager.activeItemIndex === lastIndex && left <= width));
}
/**
* @private
* @return {?}
*/
isVisible() {
if (!isPlatformBrowser(this.platformId)) {
return false;
}
/** @type {?} */
const elem = this.carouselContainer.nativeElement;
/** @type {?} */
const docViewTop = window.pageYOffset;
/** @type {?} */
const docViewBottom = docViewTop + window.innerHeight;
/** @type {?} */
const elemOffset = elem.getBoundingClientRect();
/** @type {?} */
const elemTop = docViewTop + elemOffset.top;
/** @type {?} */
const elemBottom = elemTop + elemOffset.height;
return elemBottom <= docViewBottom || elemTop >= docViewTop;
}
/**
* @private
* @return {?}
*/
getOffset() {
/** @type {?} */
const offset = this.listKeyManager.activeItemIndex * this.getWidth();
/** @type {?} */
const sign = this.orientation === 'rtl' ? 1 : -1;
return sign * offset;
}
/**
* @private
* @param {?} offset
* @return {?}
*/
getTranslation(offset) {
return `translateX(${offset}px)`;
}
/**
* @private
* @return {?}
*/
getWidth() {
return this.carouselContainer.nativeElement.clientWidth;
}
/**
* @private
* @param {?} direction
* @param {?=} index
* @return {?}
*/
goto(direction, index) {
if (!this.playing) {
/** @type {?} */
const rtl = this.orientation === 'rtl';
switch (direction) {
case Direction.left:
return rtl
? this.listKeyManager.setNextItemActive()
: this.listKeyManager.setPreviousItemActive();
case Direction.right:
return rtl
? this.listKeyManager.setPreviousItemActive()
: this.listKeyManager.setNextItemActive();
case Direction.index:
return this.listKeyManager.setActiveItem(index);
}
}
}
/**
* @private
* @return {?}
*/
playAnimation() {
/** @type {?} */
const translation = this.getTranslation(this.getOffset());
/** @type {?} */
const factory = this.animationBuilder.build(animate(this.timings, style({ transform: translation })));
/** @type {?} */
const animation = factory.create(this.carouselList.nativeElement);
animation.onStart((/**
* @return {?}
*/
() => {
this.playing = true;
}));
animation.onDone((/**
* @return {?}
*/
() => {
this.changeEmitter.emit(this.currentIndex);
this.playing = false;
if (this.lazyLoad) {
this.slidesList.find((/**
* @param {?} s
* @param {?} i
* @return {?}
*/
(s, i) => i === (this.currentIndex + 1) % this.slidesList.length)).load = true;
this.slidesList.find((/**
* @param {?} s
* @param {?} i
* @return {?}
*/
(s, i) => i === (this.currentIndex - 1 + this.slidesList.length) % this.slidesList.length)).load = true;
this.slidesList.find((/**
* @param {?} s
* @param {?} i
* @return {?}
*/
(s, i) => i === this.currentIndex)).load = true;
}
this.renderer.setStyle(this.carouselList.nativeElement, 'transform', translation);
animation.destroy();
}));
animation.play();
}
/**
* @private
* @param {?} slides
* @return {?}
*/
resetSlides(slides) {
this.slidesList.reset(this.slidesList.toArray().slice(0, slides));
}
/**
* @private
* @param {?} value
* @return {?}
*/
resetTimer(value) {
this.timer$ = interval(value);
}
/**
* @private
* @param {?} autoplay
* @return {?}
*/
startTimer(autoplay) {
if (!autoplay) {
return;
}
this.timer$
.pipe(takeUntil(this.timerStop$), takeUntil(this.destroy$), filter((/**
* @return {?}
*/
() => this.isVisible())))
.subscribe((/**
* @return {?}
*/
() => {
this.listKeyManager.withWrap(true).setNextItemActive();
this.listKeyManager.withWrap(this.loop);
}));
}
/**
* @private
* @return {?}
*/
stopTimer() {
this.timerStop$.next();
}
}
MatCarouselComponent.decorators = [
{ type: Component, args: [{
selector: 'mat-carousel',
template: "<div\n #carouselContainer\n class=\"carousel\"\n tabindex=\"0\"\n [style.max-width]=\"maxWidth\"\n [style.height]=\"!maintainAspectRatio ? '100%' : 'auto'\"\n>\n <ul\n #carouselList\n class=\"carousel-list\"\n role=\"listbox\"\n [attr.aria-label]=\"ariaLabel\"\n [style.flex-direction]=\"orientation === 'rtl' ? 'row-reverse' : 'row'\"\n [style.height]=\"!maintainAspectRatio ? '100%' : 'auto'\"\n >\n <li\n #carouselSlide\n *ngFor=\"let slide of slidesList\"\n class=\"carousel-slide\"\n role=\"option\"\n [style.padding-bottom]=\"maintainAspectRatio && proportion ? proportion + '%': '0px'\"\n [style.height]=\"!maintainAspectRatio && slideHeight ? slideHeight : '0px'\"\n (panleft)=\"onPan($event, carouselSlide)\"\n (panright)=\"onPan($event, carouselSlide)\"\n (panend)=\"onPanEnd($event, carouselSlide)\"\n (pancancel)=\"onPanEnd($event, carouselSlide)\"\n >\n <ng-container *ngIf=\"slide.load\" [ngTemplateOutlet]=\"slide.templateRef\"></ng-container>\n </li>\n </ul>\n\n <button\n *ngIf=\"!hideArrows\"\n mat-icon-button\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Previous slide\"\n [color]=\"color\"\n [disabled]=\"!loop && currentIndex == 0\"\n (click)=\"previous()\"\n >\n <mat-icon\n *ngIf=\"svgIconOverrides?.arrowBack; else: defaultArrowBack\"\n [svgIcon]=\"svgIconOverrides.arrowBack\"\n ></mat-icon>\n <ng-template #defaultArrowBack>\n <mat-icon>arrow_back</mat-icon>\n </ng-template>\n </button>\n <button\n *ngIf=\"!hideArrows\"\n mat-icon-button\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Next slide\"\n [color]=\"color\"\n [disabled]=\"!loop && currentIndex == slidesList.length - 1\"\n (click)=\"next()\"\n >\n <mat-icon\n *ngIf=\"svgIconOverrides?.arrowForward; else: defaultArrowForward\"\n [svgIcon]=\"svgIconOverrides.arrowForward\"\n ></mat-icon>\n <ng-template #defaultArrowForward>\n <mat-icon>arrow_forward</mat-icon>\n </ng-template>\n </button>\n\n <div\n *ngIf=\"!hideIndicators\"\n class=\"carousel-indicators\"\n tabindex=\"-1\"\n [style.flex-direction]=\"orientation === 'rtl' ? 'row-reverse' : 'row'\"\n >\n <button\n *ngFor=\"let slide of slidesList; let i = index\"\n type=\"button\"\n tabindex=\"-1\"\n mat-mini-fab\n [color]=\"color\"\n [attr.aria-label]=\"'Slide #' + i\"\n [disabled]=\"i == currentIndex\"\n (click)=\"slideTo(i)\"\n (focus)=\"carouselContainer.focus()\"\n ></button>\n </div>\n</div>\n",
styles: [".carousel{outline:none;overflow:hidden;position:relative;width:100%}.carousel>button{position:absolute;top:50%;transform:translateY(-50%);z-index:1}.carousel>button:first-of-type{left:30px}.carousel>button:last-of-type{right:30px}.carousel-list{list-style:none;margin:0;padding:0}.carousel-list,.carousel-slide{display:flex;position:relative;width:100%}.carousel-slide{flex-shrink:0;height:0}.carousel-slide:hover{cursor:-webkit-grab;cursor:grab}.carousel-indicators{bottom:15px;display:flex;left:50%;outline:none;position:absolute;transform:translateX(-50%);z-index:1}.carousel-indicators>button{height:10px;margin:7.5px;width:10px}"]
}] }
];
/** @nocollapse */
MatCarouselComponent.ctorParameters = () => [
{ type: AnimationBuilder },
{ type: Renderer2 },
{ type: undefined, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }
];
MatCarouselComponent.propDecorators = {
timings: [{ type: Input }],
lazyLoad: [{ type: Input }],
svgIconOverrides: [{ type: Input }],
autoplay: [{ type: Input }],
interval: [{ type: Input }],
loop: [{ type: Input }],
hideArrows: [{ type: Input }],
hideIndicators: [{ type: Input }],
ariaLabel: [{ type: Input }],
color: [{ type: Input }],
maxWidth: [{ type: Input }],
maintainAspectRatio: [{ type: Input }],
proportion: [{ type: Input }],
slideHeight: [{ type: Input }],
slides: [{ type: Input }],
useKeyboard: [{ type: Input }],
useMouseWheel: [{ type: Input }],
orientation: [{ type: Input }],
changeEmitter: [{ type: Output }],
slidesList: [{ type: ContentChildren, args: [MatCarouselSlideComponent,] }],
carouselContainer: [{ type: ViewChild, args: ['carouselContainer',] }],
carouselList: [{ type: ViewChild, args: ['carouselList',] }],
onKeyUp: [{ type: HostListener, args: ['keyup', ['$event'],] }],
onMouseEnter: [{ type: HostListener, args: ['mouseenter',] }],
onMouseLeave: [{ type: HostListener, args: ['mouseleave',] }],
onMouseWheel: [{ type: HostListener, args: ['mousewheel', ['$event'],] }],
onResize: [{ type: HostListener, args: ['window:resize', ['$event'],] }]
};
if (false) {
/** @type {?} */
MatCarouselComponent.prototype.timings;
/** @type {?} */
MatCarouselComponent.prototype.lazyLoad;
/** @type {?} */
MatCarouselComponent.prototype.svgIconOverrides;
/** @type {?} */
MatCarouselComponent.prototype.hideArrows;
/** @type {?} */
MatCarouselComponent.prototype.hideIndicators;
/** @type {?} */
MatCarouselComponent.prototype.ariaLabel;
/** @type {?} */
MatCarouselComponent.prototype.color;
/** @type {?} */
MatCarouselComponent.prototype.maintainAspectRatio;
/** @type {?} */
MatCarouselComponent.prototype.proportion;
/** @type {?} */
MatCarouselComponent.prototype.slideHeight;
/** @type {?} */
MatCarouselComponent.prototype.useKeyboard;
/** @type {?} */
MatCarouselComponent.prototype.useMouseWheel;
/** @type {?} */
MatCarouselComponent.prototype.changeEmitter;
/** @type {?} */
MatCarouselComponent.prototype.slidesList;
/**
* @type {?}
* @private
*/
MatCarouselComponent.prototype.carouselContainer;
/**
* @type {?}
* @private
*/
MatCarouselComponent.prototype.carouselList;
/** @type {?} */
MatCarouselComponent.prototype.listKeyManager;
/**
* @type {?}
* @private
*/
MatCarouselComponent.prototype._autoplay;
/**
* @type {?}
* @private
*/
MatCarouselComponent.prototype.autoplay$;
/**
* @type {?}
* @private
*/
MatCarouselComponent.prototype.interval$;
/**
* @type {?}
* @private
*/
MatCarouselComponent.prototype.slides$;
/**
* @type {?}
* @private
*/
MatCarouselComponent.prototype._maxWidth;
/**
* @type {?}
* @private
*/
MatCarouselComponent.prototype.maxWidth$;
/**
* @type {?}
* @private
*/
MatCarouselComponent.prototype._loop;
/**
* @type {?}
* @private
*/
MatCarouselComponent.prototype.loop$;
/**
* @type {?}
* @private
*/
MatCarouselComponent.prototype._orientation;
/**
* @type {?}
* @private
*/
MatCarouselComponent.prototype.orientation$;
/**
* @type {?}
* @private
*/
MatCarouselComponent.prototype.timer$;
/**
* @type {?}
* @private
*/
MatCarouselComponent.prototype.timerStop$;
/**
* @type {?}
* @private
*/
MatCarouselComponent.prototype.destroy$;
/**
* @type {?}
* @private
*/
MatCarouselComponent.prototype.playing;
/**
* @type {?}
* @private
*/
MatCarouselComponent.prototype.width;
/**
* @type {?}
* @private
*/
MatCarouselComponent.prototype.animationBuilder;
/**
* @type {?}
* @private
*/
MatCarouselComponent.prototype.renderer;
/**
* @type {?}
* @private
*/
MatCarouselComponent.prototype.platformId;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/carousel.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MatCarouselHammerConfig extends HammerGestureConfig {
constructor() {
super(...arguments);
this.overrides = {
pinch: { enable: false },
rotate: { enable: false }
};
}
}
MatCarouselHammerConfig.decorators = [
{ type: Injectable }
];
if (false) {
/** @type {?} */
MatCarouselHammerConfig.prototype.overrides;
}
class MatCarouselModule {
/**
* @return {?}
*/
static forRoot() {
return {
ngModule: MatCarouselModule,
providers: [
{ provide: HAMMER_GESTURE_CONFIG, useClass: MatCarouselHammerConfig }
]
};
}
}
MatCarouselModule.decorators = [
{ type: NgModule, args: [{
declarations: [MatCarouselComponent, MatCarouselSlideComponent],
imports: [CommonModule, MatButtonModule, MatIconModule, HammerModule],
exports: [MatCarouselComponent, MatCarouselSlideComponent]
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: lib/carousel.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function MatCarousel() { }
if (false) {
/** @type {?} */
MatCarousel.prototype.timings;
/** @type {?} */
MatCarousel.prototype.autoplay;
/** @type {?} */
MatCarousel.prototype.interval;
/** @type {?} */
MatCarousel.prototype.loop;
/** @type {?} */
MatCarousel.prototype.hideArrows;
/** @type {?} */
MatCarousel.prototype.hideIndicators;
/** @type {?} */
MatCarousel.prototype.color;
/** @type {?} */
MatCarousel.prototype.maxWidth;
/** @type {?} */
MatCarousel.prototype.proportion;
/** @type {?} */
MatCarousel.prototype.slides;
/** @type {?} */
MatCarousel.prototype.svgIconOverrides;
/** @type {?} */
MatCarousel.prototype.lazyLoad;
/** @type {?} */
MatCarousel.prototype.useKeyboard;
/** @type {?} */
MatCarousel.prototype.useMouseWheel;
/** @type {?} */
MatCarousel.prototype.orientation;
/** @type {?} */
MatCarousel.prototype.ariaLabel;
}
/**
* @record
*/
function SvgIconOverrides() { }
if (false) {
/** @type {?} */
SvgIconOverrides.prototype.arrowBack;
/** @type {?} */
SvgIconOverrides.prototype.arrowForward;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/carousel-slide/carousel-slide.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function MatCarouselSlide() { }
if (false) {
/** @type {?} */
MatCarouselSlide.prototype.image;
/** @type {?} */
MatCarouselSlide.prototype.overlayColor;
/** @type {?} */
MatCarouselSlide.prototype.hideOverlay;
/** @type {?} */
MatCarouselSlide.prototype.disabled;
/** @type {?} */
MatCarouselSlide.prototype.load;
/** @type {?} */
MatCarouselSlide.prototype.ariaLabel;
}
/**
* @fileoverview added by tsickle
* Generated from: public_api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ng-mat-carousel.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { MatCarouselComponent, MatCarouselHammerConfig, MatCarouselModule, MatCarouselSlideComponent };
//# sourceMappingURL=ng-mat-carousel.js.map