ngx-bootstrap
Version:
Angular Bootstrap
849 lines (841 loc) • 41.5 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, input, output, effect, PLATFORM_ID, Inject, Component, HostBinding, NgModule } from '@angular/core';
import { isPlatformBrowser, NgStyle } from '@angular/common';
import { getBsVer, LinkedList } from 'ngx-bootstrap/utils';
class CarouselConfig {
constructor() {
/* Default interval of auto changing of slides */
this.interval = 5000;
/* Is loop of auto changing of slides can be paused */
this.noPause = false;
/* Is slides can wrap from the last to the first slide */
this.noWrap = false;
/* Show carousel-indicators */
this.showIndicators = true;
/* Slides can be paused on focus */
this.pauseOnFocus = false;
/* If `true` - carousel indicators indicate slides chunks works ONLY if singleSlideOffset = FALSE */
this.indicatorsByChunk = false;
/* If value more then 1 — carousel works in multilist mode */
this.itemsPerSlide = 1;
/* If `true` — carousel shifts by one element. By default carousel shifts by number
of visible elements (itemsPerSlide field) */
this.singleSlideOffset = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CarouselConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CarouselConfig, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CarouselConfig, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
/**
* Returns the index of the last element in the array where predicate is true, and -1
* otherwise.
* @param array The source array to search in
* @param predicate find calls predicate once for each element of the array, in descending
* order, until it finds one where predicate returns true. If such an element is found,
* findLastIndex immediately returns that element index. Otherwise, findLastIndex returns -1.
*/
function findLastIndex(array, predicate) {
let l = array.length;
while (l--) {
if (predicate(array[l], l, array)) {
return l;
}
}
return -1;
}
function chunkByNumber(array, size) {
const out = [];
const n = Math.ceil(array.length / size);
let i = 0;
while (i < n) {
const chunk = array.splice(0, i === n - 1 && size < array.length ? array.length : size);
out.push(chunk);
i++;
}
return out;
}
function isNumber(value) {
return typeof value === 'number' || Object.prototype.toString.call(value) === '[object Number]';
}
/***
* pause (not yet supported) (?string='hover') - event group name which pauses
* the cycling of the carousel, if hover pauses on mouseenter and resumes on
* mouseleave keyboard (not yet supported) (?boolean=true) - if false
* carousel will not react to keyboard events
* note: swiping not yet supported
*/
/****
* Problems:
* 1) if we set an active slide via model changes, .active class remains on a
* current slide.
* 2) if we have only one slide, we shouldn't show prev/next nav buttons
* 3) if first or last slide is active and noWrap is true, there should be
* "disabled" class on the nav buttons.
* 4) default interval should be equal 5000
*/
var Direction;
(function (Direction) {
Direction[Direction["UNKNOWN"] = 0] = "UNKNOWN";
Direction[Direction["NEXT"] = 1] = "NEXT";
Direction[Direction["PREV"] = 2] = "PREV";
})(Direction || (Direction = {}));
let _currentId = 1;
/**
* Base element to create carousel
*/
class CarouselComponent {
get slides() {
return this._slides.toArray();
}
get isFirstSlideVisible() {
const indexes = this.getVisibleIndexes();
if (!indexes || (indexes instanceof Array && !indexes.length)) {
return false;
}
return indexes.includes(0);
}
get isLastSlideVisible() {
const indexes = this.getVisibleIndexes();
if (!indexes || (indexes instanceof Array && !indexes.length)) {
return false;
}
return indexes.includes(this._slides.length - 1);
}
get activeSlide() {
return this._currentActiveSlide || 0;
}
set activeSlide(index) {
if (this.multilist) {
return;
}
if (isNumber(index)) {
this.customActiveSlide = index;
}
if (this._slides.length && index !== this._currentActiveSlide) {
this._select(index);
}
}
get _bsVer() {
return getBsVer();
}
constructor(_config, cdr, platformId) {
this._config = _config;
this.cdr = cdr;
this.platformId = platformId;
/* If `true` — carousel will not cycle continuously and will have hard stops (prevent looping) */
this.noWrap = input(this._config.noWrap, ...(ngDevMode ? [{ debugName: "noWrap" }] : []));
/* If `true` — will disable pausing on carousel mouse hover */
this.noPause = input(this._config.noPause, ...(ngDevMode ? [{ debugName: "noPause" }] : []));
/* If `true` — carousel-indicators are visible */
this.showIndicators = input(this._config.showIndicators, ...(ngDevMode ? [{ debugName: "showIndicators" }] : []));
/* If `true` - autoplay will be stopped on focus */
this.pauseOnFocus = input(this._config.pauseOnFocus, ...(ngDevMode ? [{ debugName: "pauseOnFocus" }] : []));
/* If `true` - carousel indicators indicate slides chunks
works ONLY if singleSlideOffset = FALSE */
this.indicatorsByChunk = input(this._config.indicatorsByChunk, ...(ngDevMode ? [{ debugName: "indicatorsByChunk" }] : []));
/* If value more then 1 — carousel works in multilist mode */
this.itemsPerSlide = input(this._config.itemsPerSlide, ...(ngDevMode ? [{ debugName: "itemsPerSlide" }] : []));
/* If `true` — carousel shifts by one element. By default carousel shifts by number
of visible elements (itemsPerSlide field) */
this.singleSlideOffset = input(this._config.singleSlideOffset, ...(ngDevMode ? [{ debugName: "singleSlideOffset" }] : []));
/** Turn on/off animation. Animation doesn't work for multilist carousel */
this.isAnimated = input(false, ...(ngDevMode ? [{ debugName: "isAnimated" }] : []));
/** Will be emitted when active slide has been changed. Part of two-way-bindable [(activeSlide)] property */
this.activeSlideChange = output();
/** Will be emitted when active slides has been changed in multilist mode */
this.slideRangeChange = output();
/** Index of currently displayed slide(started for 0) */
// eslint-disable-next-line @angular-eslint/no-input-rename
this.activeSlideInput = input(0, { ...(ngDevMode ? { debugName: "activeSlideInput" } : {}), alias: 'activeSlide' });
/* Index to start display slides from it */
this.startFromIndex = input(0, ...(ngDevMode ? [{ debugName: "startFromIndex" }] : []));
/**
* Delay of item cycling in milliseconds. If false, carousel won't cycle
* automatically.
*/
this.interval = input(this._config.interval, ...(ngDevMode ? [{ debugName: "interval" }] : []));
this._slides = new LinkedList();
this._currentVisibleSlidesIndex = 0;
this.isPlaying = false;
this.destroyed = false;
this._indicatorsByChunk = false;
this.currentId = 0;
this.getActive = (slide) => slide.active;
this.makeSlidesConsistent = (slides) => {
slides.forEach((slide, index) => slide.item.order = index);
};
this.currentId = _currentId++;
// Watch for activeSlide input changes
effect(() => {
const index = this.activeSlideInput();
if (this.multilist) {
return;
}
if (isNumber(index)) {
this.customActiveSlide = index;
}
if (this._slides.length && index !== this._currentActiveSlide) {
this._select(index);
}
});
// Watch for interval changes and restart timer
effect(() => {
const _ = this.interval();
this.restartTimer();
});
}
ngAfterViewInit() {
setTimeout(() => {
if (this.singleSlideOffset()) {
this._indicatorsByChunk = false;
}
else {
this._indicatorsByChunk = this.indicatorsByChunk();
}
if (this.multilist) {
this._chunkedSlides = chunkByNumber(this.mapSlidesAndIndexes(), this.itemsPerSlide());
this.selectInitialSlides();
}
if (this.customActiveSlide && !this.multilist) {
this._select(this.customActiveSlide);
}
}, 0);
}
ngOnDestroy() {
this.destroyed = true;
this.resetTimer();
}
/**
* Adds new slide. If this slide is first in collection - set it as active
* and starts auto changing
* @param slide
*/
addSlide(slide) {
this._slides.add(slide);
if (this.multilist && this._slides.length <= this.itemsPerSlide()) {
slide.active = true;
}
if (!this.multilist && this.isAnimated()) {
slide.isAnimated = true;
}
if (!this.multilist && this._slides.length === 1) {
this._currentActiveSlide = undefined;
if (!this.customActiveSlide) {
this.activeSlide = 0;
}
this.play();
}
if (this.multilist && this._slides.length > this.itemsPerSlide()) {
this.play();
}
}
/**
* Removes specified slide. If this slide is active - will roll to another
* slide
* @param slide
*/
removeSlide(slide) {
const remIndex = this._slides.indexOf(slide);
if (this._currentActiveSlide === remIndex) {
// removing of active slide
let nextSlideIndex;
if (this._slides.length > 1) {
// if this slide last - will roll to first slide, if noWrap flag is
// FALSE or to previous, if noWrap is TRUE in case, if this slide in
// middle of collection, index of next slide is same to removed
nextSlideIndex = !this.isLast(remIndex)
? remIndex
: this.noWrap() ? remIndex - 1 : 0;
}
this._slides.remove(remIndex);
// prevents exception with changing some value after checking
setTimeout(() => {
this._select(nextSlideIndex);
}, 0);
}
else {
this._slides.remove(remIndex);
const currentSlideIndex = this.getCurrentSlideIndex();
setTimeout(() => {
// after removing, need to actualize index of current active slide
this._currentActiveSlide = currentSlideIndex;
this.activeSlideChange.emit(this._currentActiveSlide);
}, 0);
}
}
nextSlideFromInterval(force = false) {
this.move(Direction.NEXT, force);
}
/**
* Rolling to next slide
* @param force: {boolean} if true - will ignore noWrap flag
*/
nextSlide(force = false) {
if (this.isPlaying) {
this.restartTimer();
}
this.move(Direction.NEXT, force);
}
/**
* Rolling to previous slide
* @param force: {boolean} if true - will ignore noWrap flag
*/
previousSlide(force = false) {
if (this.isPlaying) {
this.restartTimer();
}
this.move(Direction.PREV, force);
}
getFirstVisibleIndex() {
return this.slides.findIndex(this.getActive);
}
getLastVisibleIndex() {
return findLastIndex(this.slides, this.getActive);
}
move(direction, force = false) {
const firstVisibleIndex = this.getFirstVisibleIndex();
const lastVisibleIndex = this.getLastVisibleIndex();
if (this.noWrap()) {
if (direction === Direction.NEXT &&
this.isLast(lastVisibleIndex) ||
direction === Direction.PREV &&
firstVisibleIndex === 0) {
return;
}
}
if (!this.multilist) {
this.activeSlide = this.findNextSlideIndex(direction, force) || 0;
}
else {
this.moveMultilist(direction);
}
}
/**
* Swith slides by enter, space and arrows keys
* @internal
*/
keydownPress(event) {
if (event.keyCode === 13 || event.key === 'Enter' || event.keyCode === 32 || event.key === 'Space') {
this.nextSlide();
event.preventDefault();
return;
}
if (event.keyCode === 37 || event.key === 'LeftArrow') {
this.previousSlide();
return;
}
if (event.keyCode === 39 || event.key === 'RightArrow') {
this.nextSlide();
return;
}
}
/**
* Play on mouse leave
* @internal
*/
onMouseLeave() {
if (!this.pauseOnFocus()) {
this.play();
}
}
/**
* Play on mouse up
* @internal
*/
onMouseUp() {
if (!this.pauseOnFocus()) {
this.play();
}
}
/**
* When slides on focus autoplay is stopped(optional)
* @internal
*/
pauseFocusIn() {
if (this.pauseOnFocus()) {
this.isPlaying = false;
this.resetTimer();
}
}
/**
* When slides out of focus autoplay is started
* @internal
*/
pauseFocusOut() {
this.play();
}
/**
* Rolling to specified slide
* @param index: {number} index of slide, which must be shown
*/
selectSlide(index) {
if (this.isPlaying) {
this.restartTimer();
}
if (!this.multilist) {
this.activeSlide = this._indicatorsByChunk ? index * this.itemsPerSlide() : index;
}
else {
this.selectSlideRange(this._indicatorsByChunk ? index * this.itemsPerSlide() : index);
}
}
/**
* Starts a auto changing of slides
*/
play() {
if (!this.isPlaying) {
this.isPlaying = true;
this.restartTimer();
}
}
/**
* Stops a auto changing of slides
*/
pause() {
if (!this.noPause()) {
this.isPlaying = false;
this.resetTimer();
}
}
/**
* Finds and returns index of currently displayed slide
*/
getCurrentSlideIndex() {
return this._slides.findIndex(this.getActive);
}
/**
* Defines, whether the specified index is last in collection
* @param index
*/
isLast(index) {
return index + 1 >= this._slides.length;
}
/**
* Defines, whether the specified index is first in collection
* @param index
*/
isFirst(index) {
return index === 0;
}
indicatorsSlides() {
return this.slides.filter((slide, index) => !this._indicatorsByChunk || index % this.itemsPerSlide() === 0);
}
selectInitialSlides() {
const startIndex = this.startFromIndex() <= this._slides.length
? this.startFromIndex()
: 0;
this.hideSlides();
if (this.singleSlideOffset()) {
this._slidesWithIndexes = this.mapSlidesAndIndexes();
if (this._slides.length - startIndex < this.itemsPerSlide()) {
const slidesToAppend = this._slidesWithIndexes.slice(0, startIndex);
this._slidesWithIndexes = [
...this._slidesWithIndexes,
...slidesToAppend
]
.slice(slidesToAppend.length)
.slice(0, this.itemsPerSlide());
}
else {
this._slidesWithIndexes = this._slidesWithIndexes.slice(startIndex, startIndex + this.itemsPerSlide());
}
this._slidesWithIndexes.forEach((slide) => slide.item.active = true);
this.makeSlidesConsistent(this._slidesWithIndexes);
}
else {
this.selectRangeByNestedIndex(startIndex);
}
this.slideRangeChange.emit(this.getVisibleIndexes());
}
/**
* Defines next slide index, depending of direction
* @param direction: Direction(UNKNOWN|PREV|NEXT)
* @param force: {boolean} if TRUE - will ignore noWrap flag, else will
* return undefined if next slide require wrapping
*/
findNextSlideIndex(direction, force) {
let nextSlideIndex = 0;
if (!force &&
(this.isLast(this.activeSlide) &&
direction !== Direction.PREV &&
this.noWrap())) {
return;
}
switch (direction) {
case Direction.NEXT:
// if this is last slide, not force, looping is disabled
// and need to going forward - select current slide, as a next
if (typeof this._currentActiveSlide === 'undefined') {
nextSlideIndex = 0;
break;
}
if (!this.isLast(this._currentActiveSlide)) {
nextSlideIndex = this._currentActiveSlide + 1;
break;
}
nextSlideIndex = !force && this.noWrap() ? this._currentActiveSlide : 0;
break;
case Direction.PREV:
// if this is first slide, not force, looping is disabled
// and need to going backward - select current slide, as a next
if (typeof this._currentActiveSlide === 'undefined') {
nextSlideIndex = 0;
break;
}
if (this._currentActiveSlide > 0) {
nextSlideIndex = this._currentActiveSlide - 1;
break;
}
if (!force && this.noWrap()) {
nextSlideIndex = this._currentActiveSlide;
break;
}
nextSlideIndex = this._slides.length - 1;
break;
default:
throw new Error('Unknown direction');
}
return nextSlideIndex;
}
mapSlidesAndIndexes() {
return this.slides
.slice()
.map((slide, index) => {
return {
index,
item: slide
};
});
}
selectSlideRange(index) {
if (this.isIndexInRange(index)) {
return;
}
this.hideSlides();
if (!this.singleSlideOffset()) {
this.selectRangeByNestedIndex(index);
}
else {
const startIndex = this.isIndexOnTheEdges(index)
? index
: index - this.itemsPerSlide() + 1;
const endIndex = this.isIndexOnTheEdges(index)
? index + this.itemsPerSlide()
: index + 1;
this._slidesWithIndexes = this.mapSlidesAndIndexes().slice(startIndex, endIndex);
this.makeSlidesConsistent(this._slidesWithIndexes);
this._slidesWithIndexes.forEach((slide) => slide.item.active = true);
}
this.slideRangeChange.emit(this.getVisibleIndexes());
}
selectRangeByNestedIndex(index) {
if (!this._chunkedSlides) {
return;
}
const selectedRange = this._chunkedSlides
.map((slidesList, i) => {
return {
index: i,
list: slidesList
};
})
.find((slidesList) => {
return slidesList.list.find(slide => slide.index === index) !== undefined;
});
if (!selectedRange) {
return;
}
this._currentVisibleSlidesIndex = selectedRange.index;
this._chunkedSlides[selectedRange.index].forEach((slide) => {
slide.item.active = true;
});
}
isIndexOnTheEdges(index) {
return (index + 1 - this.itemsPerSlide() <= 0 ||
index + this.itemsPerSlide() <= this._slides.length);
}
isIndexInRange(index) {
if (this.singleSlideOffset() && this._slidesWithIndexes) {
const visibleIndexes = this._slidesWithIndexes.map((slide) => slide.index);
return visibleIndexes.indexOf(index) >= 0;
}
return (index <= this.getLastVisibleIndex() &&
index >= this.getFirstVisibleIndex());
}
hideSlides() {
this.slides.forEach((slide) => slide.active = false);
}
isVisibleSlideListLast() {
if (!this._chunkedSlides) {
return false;
}
return this._currentVisibleSlidesIndex === this._chunkedSlides.length - 1;
}
isVisibleSlideListFirst() {
return this._currentVisibleSlidesIndex === 0;
}
moveSliderByOneItem(direction) {
let firstVisibleIndex;
let lastVisibleIndex;
let indexToHide;
let indexToShow;
if (this.noWrap()) {
firstVisibleIndex = this.getFirstVisibleIndex();
lastVisibleIndex = this.getLastVisibleIndex();
indexToHide = direction === Direction.NEXT
? firstVisibleIndex
: lastVisibleIndex;
indexToShow = direction !== Direction.NEXT
? firstVisibleIndex - 1
: !this.isLast(lastVisibleIndex)
? lastVisibleIndex + 1 : 0;
const slideToHide = this._slides.get(indexToHide);
if (slideToHide) {
slideToHide.active = false;
}
const slideToShow = this._slides.get(indexToShow);
if (slideToShow) {
slideToShow.active = true;
}
const slidesToReorder = this.mapSlidesAndIndexes().filter((slide) => slide.item.active);
this.makeSlidesConsistent(slidesToReorder);
if (this.singleSlideOffset()) {
this._slidesWithIndexes = slidesToReorder;
}
this.slideRangeChange.emit(this.getVisibleIndexes());
return;
}
if (!this._slidesWithIndexes || !this._slidesWithIndexes[0]) {
return;
}
let index;
firstVisibleIndex = this._slidesWithIndexes[0].index;
lastVisibleIndex = this._slidesWithIndexes[this._slidesWithIndexes.length - 1].index;
if (direction === Direction.NEXT) {
this._slidesWithIndexes.shift();
index = this.isLast(lastVisibleIndex)
? 0
: lastVisibleIndex + 1;
const item = this._slides.get(index);
if (item) {
this._slidesWithIndexes.push({ index, item });
}
}
else {
this._slidesWithIndexes.pop();
index = this.isFirst(firstVisibleIndex)
? this._slides.length - 1
: firstVisibleIndex - 1;
const item = this._slides.get(index);
if (item) {
this._slidesWithIndexes = [{ index, item }, ...this._slidesWithIndexes];
}
}
this.hideSlides();
this._slidesWithIndexes.forEach(slide => slide.item.active = true);
this.makeSlidesConsistent(this._slidesWithIndexes);
this.slideRangeChange.emit(this._slidesWithIndexes.map((slide) => slide.index));
}
moveMultilist(direction) {
if (this.singleSlideOffset()) {
this.moveSliderByOneItem(direction);
}
else {
this.hideSlides();
if (this.noWrap()) {
this._currentVisibleSlidesIndex = direction === Direction.NEXT
? this._currentVisibleSlidesIndex + 1
: this._currentVisibleSlidesIndex - 1;
}
else if (direction === Direction.NEXT) {
this._currentVisibleSlidesIndex = this.isVisibleSlideListLast()
? 0
: this._currentVisibleSlidesIndex + 1;
}
else {
if (this.isVisibleSlideListFirst()) {
this._currentVisibleSlidesIndex = this._chunkedSlides
? this._chunkedSlides.length - 1
: 0;
}
else {
this._currentVisibleSlidesIndex = this._currentVisibleSlidesIndex - 1;
}
}
if (this._chunkedSlides) {
this._chunkedSlides[this._currentVisibleSlidesIndex].forEach((slide) => slide.item.active = true);
}
this.slideRangeChange.emit(this.getVisibleIndexes());
}
}
getVisibleIndexes() {
if (!this.singleSlideOffset() && this._chunkedSlides) {
return this._chunkedSlides[this._currentVisibleSlidesIndex]
.map((slide) => slide.index);
}
if (this._slidesWithIndexes) {
return this._slidesWithIndexes.map((slide) => slide.index);
}
}
/**
* Sets a slide, which specified through index, as active
* @param index
*/
_select(index) {
if (isNaN(index)) {
this.pause();
return;
}
if (!this.multilist && typeof this._currentActiveSlide !== 'undefined') {
const currentSlide = this._slides.get(this._currentActiveSlide);
if (typeof currentSlide !== 'undefined') {
currentSlide.active = false;
}
}
const nextSlide = this._slides.get(index);
if (typeof nextSlide !== 'undefined') {
this._currentActiveSlide = index;
nextSlide.active = true;
this.activeSlideChange.emit(index);
this.cdr.markForCheck();
}
}
/**
* Starts loop of auto changing of slides - zoneless version
*/
restartTimer() {
this.resetTimer();
const intervalValue = +this.interval();
if (!isNaN(intervalValue) && intervalValue > 0 && isPlatformBrowser(this.platformId)) {
this.currentInterval = window.setInterval(() => {
const nInterval = +this.interval();
if (this.isPlaying &&
!isNaN(nInterval) &&
nInterval > 0 &&
this.slides.length) {
this.nextSlideFromInterval();
this.cdr.markForCheck();
}
else {
this.pause();
}
}, intervalValue);
}
}
get multilist() {
return this.itemsPerSlide() > 1;
}
/**
* Stops loop of auto changing of slides
*/
resetTimer() {
if (this.currentInterval) {
clearInterval(this.currentInterval);
this.currentInterval = void 0;
}
}
checkDisabledClass(buttonType) {
if (buttonType === 'prev') {
return (this.activeSlide === 0 && this.noWrap() && !this.multilist) || (this.isFirstSlideVisible && this.noWrap() && this.multilist);
}
return (this.isLast(this.activeSlide) && this.noWrap() && !this.multilist) || (this.isLastSlideVisible && this.noWrap() && this.multilist);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CarouselComponent, deps: [{ token: CarouselConfig }, { token: i0.ChangeDetectorRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CarouselComponent, isStandalone: true, selector: "carousel", inputs: { noWrap: { classPropertyName: "noWrap", publicName: "noWrap", isSignal: true, isRequired: false, transformFunction: null }, noPause: { classPropertyName: "noPause", publicName: "noPause", isSignal: true, isRequired: false, transformFunction: null }, showIndicators: { classPropertyName: "showIndicators", publicName: "showIndicators", isSignal: true, isRequired: false, transformFunction: null }, pauseOnFocus: { classPropertyName: "pauseOnFocus", publicName: "pauseOnFocus", isSignal: true, isRequired: false, transformFunction: null }, indicatorsByChunk: { classPropertyName: "indicatorsByChunk", publicName: "indicatorsByChunk", isSignal: true, isRequired: false, transformFunction: null }, itemsPerSlide: { classPropertyName: "itemsPerSlide", publicName: "itemsPerSlide", isSignal: true, isRequired: false, transformFunction: null }, singleSlideOffset: { classPropertyName: "singleSlideOffset", publicName: "singleSlideOffset", isSignal: true, isRequired: false, transformFunction: null }, isAnimated: { classPropertyName: "isAnimated", publicName: "isAnimated", isSignal: true, isRequired: false, transformFunction: null }, activeSlideInput: { classPropertyName: "activeSlideInput", publicName: "activeSlide", isSignal: true, isRequired: false, transformFunction: null }, startFromIndex: { classPropertyName: "startFromIndex", publicName: "startFromIndex", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeSlideChange: "activeSlideChange", slideRangeChange: "slideRangeChange" }, ngImport: i0, template: "<div (mouseenter)=\"pause()\"\n (mouseleave)=\"onMouseLeave()\"\n (mouseup)=\"onMouseUp()\"\n (keydown)=\"keydownPress($event)\"\n (focusin)=\"pauseFocusIn()\"\n (focusout)=\"pauseFocusOut()\"\n [id]=\"'carousel' + currentId\"\n class=\"carousel slide\" tabindex=\"0\">\n @if (!_bsVer.isBs5 && showIndicators() && slides.length > 1) {\n <ol class=\"carousel-indicators\">\n @for (slide of indicatorsSlides(); track slide; let i = $index) {\n <li\n [class.active]=\"slide.active === true\"\n (click)=\"selectSlide(i)\">\n </li>\n }\n </ol>\n }\n @if (_bsVer.isBs5 && showIndicators() && slides.length > 1) {\n <div class=\"carousel-indicators\">\n @for (slide of indicatorsSlides(); track slide; let i = $index) {\n <button\n [class.active]=\"slide.active === true\"\n (click)=\"selectSlide(i)\"\n type=\"button\"\n [attr.data-bs-target]=\"'#carousel' + currentId\"\n [attr.data-bs-slide-to]=\"i\" aria-current=\"true\"\n >\n </button>\n }\n </div>\n }\n <div class=\"carousel-inner\" [ngStyle]=\"{'display': multilist ? 'flex' : 'block'}\">\n <ng-content></ng-content>\n </div>\n @if (slides.length > 1) {\n <a class=\"left carousel-control carousel-control-prev\"\n href=\"javascript:void(0);\"\n [class.disabled]=\"checkDisabledClass('prev')\"\n [attr.data-bs-target]=\"'#carousel' + currentId\"\n (click)=\"previousSlide()\"\n tabindex=\"0\" role=\"button\">\n <span class=\"icon-prev carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n <span class=\"sr-only visually-hidden\">Previous</span>\n </a>\n }\n\n @if (slides.length > 1) {\n <a class=\"right carousel-control carousel-control-next\"\n href=\"javascript:void(0);\"\n (click)=\"nextSlide()\"\n [class.disabled]=\"checkDisabledClass('next')\"\n [attr.data-bs-target]=\"'#carousel' + currentId\"\n tabindex=\"0\" role=\"button\">\n <span class=\"icon-next carousel-control-next-icon\" aria-hidden=\"true\"></span>\n <span class=\"sr-only visually-hidden\">Next</span>\n </a>\n }\n</div>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CarouselComponent, decorators: [{
type: Component,
args: [{ selector: 'carousel', standalone: true, imports: [NgStyle], template: "<div (mouseenter)=\"pause()\"\n (mouseleave)=\"onMouseLeave()\"\n (mouseup)=\"onMouseUp()\"\n (keydown)=\"keydownPress($event)\"\n (focusin)=\"pauseFocusIn()\"\n (focusout)=\"pauseFocusOut()\"\n [id]=\"'carousel' + currentId\"\n class=\"carousel slide\" tabindex=\"0\">\n @if (!_bsVer.isBs5 && showIndicators() && slides.length > 1) {\n <ol class=\"carousel-indicators\">\n @for (slide of indicatorsSlides(); track slide; let i = $index) {\n <li\n [class.active]=\"slide.active === true\"\n (click)=\"selectSlide(i)\">\n </li>\n }\n </ol>\n }\n @if (_bsVer.isBs5 && showIndicators() && slides.length > 1) {\n <div class=\"carousel-indicators\">\n @for (slide of indicatorsSlides(); track slide; let i = $index) {\n <button\n [class.active]=\"slide.active === true\"\n (click)=\"selectSlide(i)\"\n type=\"button\"\n [attr.data-bs-target]=\"'#carousel' + currentId\"\n [attr.data-bs-slide-to]=\"i\" aria-current=\"true\"\n >\n </button>\n }\n </div>\n }\n <div class=\"carousel-inner\" [ngStyle]=\"{'display': multilist ? 'flex' : 'block'}\">\n <ng-content></ng-content>\n </div>\n @if (slides.length > 1) {\n <a class=\"left carousel-control carousel-control-prev\"\n href=\"javascript:void(0);\"\n [class.disabled]=\"checkDisabledClass('prev')\"\n [attr.data-bs-target]=\"'#carousel' + currentId\"\n (click)=\"previousSlide()\"\n tabindex=\"0\" role=\"button\">\n <span class=\"icon-prev carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n <span class=\"sr-only visually-hidden\">Previous</span>\n </a>\n }\n\n @if (slides.length > 1) {\n <a class=\"right carousel-control carousel-control-next\"\n href=\"javascript:void(0);\"\n (click)=\"nextSlide()\"\n [class.disabled]=\"checkDisabledClass('next')\"\n [attr.data-bs-target]=\"'#carousel' + currentId\"\n tabindex=\"0\" role=\"button\">\n <span class=\"icon-next carousel-control-next-icon\" aria-hidden=\"true\"></span>\n <span class=\"sr-only visually-hidden\">Next</span>\n </a>\n }\n</div>\n" }]
}], ctorParameters: () => [{ type: CarouselConfig }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }], propDecorators: { noWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "noWrap", required: false }] }], noPause: [{ type: i0.Input, args: [{ isSignal: true, alias: "noPause", required: false }] }], showIndicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIndicators", required: false }] }], pauseOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseOnFocus", required: false }] }], indicatorsByChunk: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorsByChunk", required: false }] }], itemsPerSlide: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerSlide", required: false }] }], singleSlideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleSlideOffset", required: false }] }], isAnimated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAnimated", required: false }] }], activeSlideChange: [{ type: i0.Output, args: ["activeSlideChange"] }], slideRangeChange: [{ type: i0.Output, args: ["slideRangeChange"] }], activeSlideInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeSlide", required: false }] }], startFromIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "startFromIndex", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }] } });
class SlideComponent {
constructor(carousel) {
/** Is current slide active */
this.active = false;
// eslint-disable-next-line @angular-eslint/no-input-rename
this.activeInput = input(undefined, { ...(ngDevMode ? { debugName: "activeInput" } : {}), alias: 'active' });
this.itemWidth = '100%';
this.order = 0;
this.isAnimated = false;
/** Wraps element by appropriate CSS classes */
this.addClass = true;
this.multilist = false;
this.carousel = carousel;
// Watch for active input changes (only when explicitly bound)
effect(() => {
const activeValue = this.activeInput();
if (activeValue !== undefined) {
this.active = activeValue;
}
});
}
/** Fires changes in container collection after adding a new slide instance */
ngOnInit() {
this.carousel.addSlide(this);
this.itemWidth = `${100 / this.carousel.itemsPerSlide()}%`;
this.multilist = this.carousel?.itemsPerSlide() > 1;
}
/** Fires changes in container collection after removing of this slide instance */
ngOnDestroy() {
this.carousel.removeSlide(this);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SlideComponent, deps: [{ token: CarouselComponent }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: SlideComponent, isStandalone: true, selector: "slide", inputs: { activeInput: { classPropertyName: "activeInput", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "!active", "class.multilist-margin": "multilist", "class.active": "this.active", "style.width": "this.itemWidth", "style.order": "this.order", "class.carousel-animation": "this.isAnimated", "class.item": "this.addClass", "class.carousel-item": "this.addClass" } }, ngImport: i0, template: `
<div [class.active]="active" class="item">
<ng-content></ng-content>
</div>
`, isInline: true, styles: [":host.carousel-animation{transition:opacity .6s ease,visibility .6s ease;float:left}:host.carousel-animation.active{opacity:1;visibility:visible}:host.carousel-animation:not(.active){display:block;position:absolute;opacity:0;visibility:hidden}:host.multilist-margin{margin-right:auto}:host.carousel-item{perspective:1000px}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SlideComponent, decorators: [{
type: Component,
args: [{ selector: 'slide', template: `
<div [class.active]="active" class="item">
<ng-content></ng-content>
</div>
`, host: {
'[attr.aria-hidden]': '!active',
'[class.multilist-margin]': 'multilist'
}, standalone: true, styles: [":host.carousel-animation{transition:opacity .6s ease,visibility .6s ease;float:left}:host.carousel-animation.active{opacity:1;visibility:visible}:host.carousel-animation:not(.active){display:block;position:absolute;opacity:0;visibility:hidden}:host.multilist-margin{margin-right:auto}:host.carousel-item{perspective:1000px}\n"] }]
}], ctorParameters: () => [{ type: CarouselComponent }], propDecorators: { active: [{
type: HostBinding,
args: ['class.active']
}], activeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], itemWidth: [{
type: HostBinding,
args: ['style.width']
}], order: [{
type: HostBinding,
args: ['style.order']
}], isAnimated: [{
type: HostBinding,
args: ['class.carousel-animation']
}], addClass: [{
type: HostBinding,
args: ['class.item']
}, {
type: HostBinding,
args: ['class.carousel-item']
}] } });
class CarouselModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: CarouselModule, imports: [SlideComponent, CarouselComponent], exports: [SlideComponent, CarouselComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CarouselModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CarouselModule, decorators: [{
type: NgModule,
args: [{
imports: [SlideComponent, CarouselComponent],
exports: [SlideComponent, CarouselComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { CarouselComponent, CarouselConfig, CarouselModule, SlideComponent };
//# sourceMappingURL=ngx-bootstrap-carousel.mjs.map