@mintplayer/ng-bootstrap 20.6.3 → 21.1.0

package/fesm2022/mintplayer-ng-bootstrap-carousel.mjs

@@ -1,121 +1,63 @@
-import * as i1 from '@angular/common';
-import { isPlatformServer, AsyncPipe, NgTemplateOutlet } from '@angular/common';
+import { isPlatformServer, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, PLATFORM_ID, HostListener, Input, HostBinding, forwardRef, ContentChildren, ViewChild, Inject, Component, NgModule } from '@angular/core';
+import { inject, TemplateRef, ElementRef, Directive, PLATFORM_ID, DestroyRef, signal, input, output, computed, effect, HostListener, HostBinding, forwardRef, ContentChildren, ViewChild, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { FadeInOutAnimation } from '@mintplayer/ng-animations';
 import { Color } from '@mintplayer/ng-bootstrap';
-import { BehaviorSubject, map } from 'rxjs';
-import * as i2 from '@mintplayer/ng-swiper/swiper';
-import { BsSwiperModule } from '@mintplayer/ng-swiper/swiper';
-import * as i3 from '@mintplayer/ng-bootstrap/no-noscript';
+import { BsSwipeContainerDirective, BsSwipeDirective } from '@mintplayer/ng-swiper/swiper';
 import { BsNoNoscriptDirective } from '@mintplayer/ng-bootstrap/no-noscript';
 
 class BsCarouselImageDirective {
-    constructor(templateRef, carousel, element) {
-        this.templateRef = templateRef;
-        this.element = element;
+    constructor() {
+        this.templateRef = inject((TemplateRef));
+        this.carousel = inject(BsCarouselComponent);
+        this.element = inject((ElementRef));
         this.isFirst = false;
         this.itemTemplate = this.templateRef;
-        this.id = carousel.imageCounter++;
+        this.id = this.carousel.imageCounter++;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsCarouselImageDirective, deps: [{ token: i0.TemplateRef }, { token: BsCarouselComponent }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: BsCarouselImageDirective, isStandalone: false, selector: "*[bsCarouselImage]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsCarouselImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: BsCarouselImageDirective, isStandalone: true, selector: "*[bsCarouselImage]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsCarouselImageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsCarouselImageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '*[bsCarouselImage]',
-                    standalone: false,
+                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: BsCarouselComponent }, { type: i0.ElementRef }] });
+        }], ctorParameters: () => [] });
 
 class BsCarouselComponent {
-    constructor(platformId, cdRef) {
-        this.cdRef = cdRef;
-        this.colors = Color;
-        this.currentImageIndex = 0;
-        this.images$ = new BehaviorSubject(null);
-        this.indicators = false;
-        this.keyboardEvents = true;
-        this._orientation = 'horizontal';
-        //#region Animation
-        this.animationsDisabled = false;
-        this._animation = 'slide';
-        this.imageCounter = 1;
-        this.isServerSide = isPlatformServer(platformId);
-        this.imageCount$ = this.images$.pipe(map((images) => images?.length ?? 0));
-        this.firstImageTemplate$ = this.images$.pipe(map((images) => {
-            if (!images)
-                return null;
-            if (images.length === 0)
-                return null;
-            const img = images.get(0);
-            if (!img)
-                return null;
-            return img.itemTemplate;
-        }));
-        this.lastImageTemplate$ = this.images$.pipe(map((images) => {
-            if (!images)
-                return null;
-            if (images.length === 0)
-                return null;
-            const img = images.get(images.length - 1);
-            if (!img)
-                return null;
-            return img.itemTemplate;
-        }));
-        if (!isPlatformServer(platformId)) {
-            this.resizeObserver = new ResizeObserver((entries) => {
-                this.cdRef.detectChanges();
-            });
-        }
-    }
-    set orientation(value) {
-        this._orientation = value ?? 'horizontal';
-        this.cdRef.detectChanges();
-    }
-    get orientation() {
-        return this._orientation;
-    }
-    set images(value) {
-        this.images$.next(value);
+    set imagesQuery(value) {
+        this.images.set(value);
         value.forEach((item, index) => item.isFirst = (index === 0));
     }
-    set animation(value) {
-        this.animationsDisabled = true;
-        this._animation = value;
-        setTimeout(() => this.animationsDisabled = false, 20);
-        setTimeout(() => this.cdRef.detectChanges(), 50);
-    }
-    get animation() {
-        return this._animation;
-    }
-    //#endregion
-    onKeyPress(ev) {
-        if (this.keyboardEvents) {
+    onKeyPress(event) {
+        const ev = event;
+        if (this.keyboardEvents()) {
             let handled = false;
+            const orientation = this.orientation();
             switch (ev.key) {
                 case 'ArrowLeft':
-                    if (this.orientation === 'horizontal') {
-                        this.previousImage();
+                    if (orientation === 'horizontal') {
+                        this.previous();
                         handled = true;
                     }
                     break;
                 case 'ArrowRight':
-                    if (this.orientation === 'horizontal') {
-                        this.nextImage();
+                    if (orientation === 'horizontal') {
+                        this.next();
                         handled = true;
                     }
                     break;
                 case 'ArrowUp':
-                    if (this.orientation === 'vertical') {
-                        this.previousImage();
+                    if (orientation === 'vertical') {
+                        this.previous();
                         handled = true;
                     }
                     break;
                 case 'ArrowDown':
-                    if (this.orientation === 'vertical') {
-                        this.nextImage();
+                    if (orientation === 'vertical') {
+                        this.next();
                         handled = true;
                     }
                     break;
@@ -125,72 +67,207 @@ class BsCarouselComponent {
             }
         }
     }
-    previousImage() {
-        switch (this.animation) {
+    constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        this.destroyRef = inject(DestroyRef);
+        this.colors = Color;
+        this.isServerSide = isPlatformServer(this.platformId);
+        this.currentImageIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentImageIndex" }] : []));
+        this.images = signal(null, ...(ngDevMode ? [{ debugName: "images" }] : []));
+        // Inputs
+        this.indicators = input(false, ...(ngDevMode ? [{ debugName: "indicators" }] : []));
+        this.keyboardEvents = input(true, ...(ngDevMode ? [{ debugName: "keyboardEvents" }] : []));
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+        this.animation = input('slide', ...(ngDevMode ? [{ debugName: "animation" }] : []));
+        this.interval = input(null, ...(ngDevMode ? [{ debugName: "interval" }] : []));
+        this.wrap = input(true, ...(ngDevMode ? [{ debugName: "wrap" }] : []));
+        // Outputs
+        this.slideChange = output();
+        this.animationStart = output();
+        this.animationEnd = output();
+        // Computed signals
+        this.imageCount = computed(() => this.images()?.length ?? 0, ...(ngDevMode ? [{ debugName: "imageCount" }] : []));
+        this.firstImageTemplate = computed(() => {
+            const images = this.images();
+            if (!images)
+                return null;
+            if (images.length === 0)
+                return null;
+            const img = images.get(0);
+            if (!img)
+                return null;
+            return img.itemTemplate;
+        }, ...(ngDevMode ? [{ debugName: "firstImageTemplate" }] : []));
+        this.lastImageTemplate = computed(() => {
+            const images = this.images();
+            if (!images)
+                return null;
+            if (images.length === 0)
+                return null;
+            const img = images.get(images.length - 1);
+            if (!img)
+                return null;
+            return img.itemTemplate;
+        }, ...(ngDevMode ? [{ debugName: "lastImageTemplate" }] : []));
+        this.animationsDisabled = false;
+        this.imageCounter = 1;
+        // Setup auto-advance interval effect
+        effect(() => {
+            const intervalTime = this.interval();
+            this.clearAutoAdvance();
+            if (intervalTime && intervalTime > 0) {
+                this.intervalId = setInterval(() => {
+                    this.next();
+                }, intervalTime);
+            }
+        });
+        // Emit slideChange when currentImageIndex changes
+        effect(() => {
+            const index = this.currentImageIndex();
+            this.slideChange.emit(index);
+        });
+        // Cleanup on destroy
+        this.destroyRef.onDestroy(() => {
+            this.clearAutoAdvance();
+            this.resizeObserver?.disconnect();
+        });
+    }
+    clearAutoAdvance() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+            this.intervalId = undefined;
+        }
+    }
+    previous() {
+        const animation = this.animation();
+        const imageCount = this.imageCount();
+        const wrap = this.wrap();
+        switch (animation) {
             case 'fade':
-                if (this.currentImageIndex > 0) {
-                    this.currentImageIndex--;
+            case 'none': {
+                const currentIndex = this.currentImageIndex();
+                if (currentIndex > 0) {
+                    if (animation === 'none') {
+                        this.animationStart.emit();
+                    }
+                    this.currentImageIndex.set(currentIndex - 1);
+                    if (animation === 'none') {
+                        this.animationEnd.emit();
+                    }
                 }
-                else {
-                    this.currentImageIndex = this.images$.value.length - 1;
+                else if (wrap) {
+                    if (animation === 'none') {
+                        this.animationStart.emit();
+                    }
+                    this.currentImageIndex.set(imageCount - 1);
+                    if (animation === 'none') {
+                        this.animationEnd.emit();
+                    }
                 }
                 break;
+            }
             case 'slide':
                 this.swipeContainer.previous();
                 break;
         }
     }
-    nextImage() {
-        switch (this.animation) {
+    next() {
+        const animation = this.animation();
+        const imageCount = this.imageCount();
+        const wrap = this.wrap();
+        switch (animation) {
             case 'fade':
-                if (this.currentImageIndex < this.images$.value.length - 1) {
-                    this.currentImageIndex++;
+            case 'none': {
+                const currentIndex = this.currentImageIndex();
+                if (currentIndex < imageCount - 1) {
+                    if (animation === 'none') {
+                        this.animationStart.emit();
+                    }
+                    this.currentImageIndex.set(currentIndex + 1);
+                    if (animation === 'none') {
+                        this.animationEnd.emit();
+                    }
                 }
-                else {
-                    this.currentImageIndex = 0;
+                else if (wrap) {
+                    if (animation === 'none') {
+                        this.animationStart.emit();
+                    }
+                    this.currentImageIndex.set(0);
+                    if (animation === 'none') {
+                        this.animationEnd.emit();
+                    }
                 }
                 break;
+            }
             case 'slide':
                 this.swipeContainer.next();
                 break;
         }
     }
+    goto(index) {
+        const animation = this.animation();
+        switch (animation) {
+            case 'fade':
+            case 'none':
+                if (animation === 'none') {
+                    this.animationStart.emit();
+                }
+                this.currentImageIndex.set(index);
+                if (animation === 'none') {
+                    this.animationEnd.emit();
+                }
+                break;
+            case 'slide':
+                this.swipeContainer.goto(index);
+                break;
+        }
+    }
     ngAfterViewInit() {
-        this.resizeObserver?.observe(this.innerElement.nativeElement);
+        if (!this.isServerSide) {
+            this.resizeObserver = new ResizeObserver(() => {
+                // Signals automatically trigger change detection in zoneless mode
+                // The resize will be picked up by the observe-size directive
+            });
+            this.resizeObserver.observe(this.innerElement.nativeElement);
+        }
     }
     ngOnDestroy() {
-        this.resizeObserver?.unobserve(this.innerElement.nativeElement);
+        this.resizeObserver?.unobserve(this.innerElement?.nativeElement);
         this.resizeObserver?.disconnect();
+        this.clearAutoAdvance();
+    }
+    onContainerAnimationStart() {
+        this.animationStart.emit();
+    }
+    onContainerAnimationEnd() {
+        this.animationEnd.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsCarouselComponent, deps: [{ token: PLATFORM_ID }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: BsCarouselComponent, isStandalone: false, selector: "bs-carousel", inputs: { indicators: "indicators", keyboardEvents: "keyboardEvents", orientation: "orientation", animation: "animation" }, host: { listeners: { "document:keydown.ArrowLeft": "onKeyPress($event)", "document:keydown.ArrowRight": "onKeyPress($event)", "document:keydown.ArrowUp": "onKeyPress($event)", "document:keydown.ArrowDown": "onKeyPress($event)" }, properties: { "@.disabled": "this.animationsDisabled" } }, queries: [{ propertyName: "images", predicate: i0.forwardRef(() => BsCarouselImageDirective) }], viewQueries: [{ propertyName: "innerElement", first: true, predicate: ["innerElement"], descendants: true }, { propertyName: "swipeContainer", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "@if (isServerSide) {\n    <div class=\"carousel mx-auto noscript\" [class.carousel-vertical]=\"orientation === 'vertical'\">\n        <div class=\"carousel-inner d-grid\">\n            @let images = images$ | async;\n            @if (imageCount$ | async; as imageCount) {\n                @for (image of images; track image.id; let i = $index) {\n                    <input type=\"radio\" [id]=\"'car-' + i\" [name]=\"'car'\" class=\"car-radio d-none\" bsNoNoscript [checked]=\"i === 0\">\n                    <div class=\"carousel-item fade d-flex flex-row h-100 align-items-center\"\n                        [class.flex-column]=\"orientation === 'vertical'\">\n                        <div class=\"w-100 position-relative\">\n                            <ng-container [ngTemplateOutlet]=\"image.itemTemplate\"></ng-container>\n                            @if (indicators) {\n                                <div class=\"carousel-indicators\"\n                                    [class.carousel-indicators-vertical]=\"orientation === 'vertical'\">\n                                    @for (image of images; track image.id; let j = $index) {\n                                        <label [attr.for]=\"'car-' + (j % imageCount)\" [class.active]=\"i === j\" data-bs-target></label>\n                                    }\n                                </div>\n                            }\n                        </div>\n                    </div>\n                    \n                    <label class=\"carousel-control-prev cursor-pointer\" [for]=\"'car-' + ((i - 1 + imageCount) % imageCount)\"\n                        [class.carousel-control-vertical]=\"orientation === 'vertical'\">\n                        <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n                        <span class=\"visually-hidden\">Previous</span>\n                    </label>\n                    <label class=\"carousel-control-next cursor-pointer\" [for]=\"'car-' + ((i + 1) % imageCount)\"\n                        [class.carousel-control-vertical]=\"orientation === 'vertical'\">\n                        <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n                        <span class=\"visually-hidden\">Next</span>\n                    </label>\n                }\n            }\n        </div>\n    </div>\n} @else {\n    @switch (animation) {\n        @case ('slide') {\n            <div class=\"carousel slide mx-auto\" [class.carousel-vertical]=\"orientation === 'vertical'\"\n                [style.height.px]=\"swipeContainer?.currentSlideHeight$ | async\">\n                @if (indicators) {\n                    <div class=\"carousel-indicators\" [class.carousel-indicators-vertical]=\"orientation === 'vertical'\"\n                        [style.height.px]=\"orientation === 'vertical' ? (swipeContainer?.maxSlideHeight$ | async) : null\">\n                        @for (image of (images$ | async); track image.id; let i = $index) {\n                            <button type=\"button\" (click)=\"swipeContainer?.goto(i)\"\n                                [class.active]=\"(swipeContainer?.imageIndex$ | async) === i\" data-bs-target\n                                [attr.aria-current]=\"(swipeContainer?.imageIndex$ | async) === i ? true : null\"\n                                [attr.aria-label]=\"'Slide ' + i\"></button>\n                        }\n                    </div>\n                }\n                <div class=\"carousel-inner overflow-hidden pe-none\" [class.text-nowrap]=\"orientation === 'horizontal'\"\n                    [class.carousel-inner-vertical]=\"orientation === 'vertical'\" #innerElement\n                    [style.height.px]=\"swipeContainer?.currentSlideHeight$ | async\">\n                    <div bsSwipeContainer #container=\"bsSwipeContainer\" [minimumOffset]=\"50\" [(imageIndex)]=\"currentImageIndex\"\n                        [orientation]=\"orientation\">\n                        <div class=\"carousel-item\" bsSwipe [offside]=\"true\">\n                            <ng-container *ngTemplateOutlet=\"lastImageTemplate$ | async\"></ng-container>\n                        </div>\n                        @for (image of (images$ | async); track image.id) {\n                            <div class=\"carousel-item\" [class.active]=\"true\" bsSwipe>\n                                <ng-container *ngTemplateOutlet=\"image.itemTemplate\"></ng-container>\n                            </div>\n                        }\n                        <div class=\"carousel-item\" bsSwipe [offside]=\"true\">\n                            <ng-container *ngTemplateOutlet=\"firstImageTemplate$ | async\"></ng-container>\n                        </div>\n                    </div>\n                </div>\n                <button class=\"carousel-control-prev\" type=\"button\" (click)=\"previousImage()\"\n                    [class.carousel-control-vertical]=\"orientation === 'vertical'\">\n                    <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Previous</span>\n                </button>\n                <button class=\"carousel-control-next\" type=\"button\" (click)=\"nextImage()\"\n                    [class.carousel-control-vertical]=\"orientation === 'vertical'\">\n                    <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Next</span>\n                </button>\n            </div>\n        }\n        @case ('fade') {\n            <div class=\"carousel fade mx-auto\" [class.carousel-vertical]=\"orientation === 'vertical'\">\n                @if (indicators) {\n                    <div class=\"carousel-indicators\" [class.carousel-indicators-vertical]=\"orientation === 'vertical'\"\n                        [style.height.px]=\"orientation === 'vertical' ? (swipeContainer?.currentSlideHeight$ | async) : null\">\n                        @for (image of (images$ | async); track image.id; let i = $index) {\n                            <button type=\"button\" (click)=\"currentImageIndex = i\"\n                                [class.active]=\"currentImageIndex === i\" data-bs-target\n                                [attr.aria-current]=\"currentImageIndex === i ? true : null\"\n                                [attr.aria-label]=\"'Slide ' + i\"></button>\n                        }\n                    </div>\n                }\n                <div class=\"carousel-inner\" [class.carousel-inner-vertical]=\"orientation === 'vertical'\">\n                    @for (image of (images$ | async); track image.id; let i = $index) {\n                        @if (currentImageIndex === i) {\n                            <div class=\"carousel-item\" [class.active]=\"true\" @fadeInOut>\n                                <ng-container [ngTemplateOutlet]=\"image.itemTemplate\"></ng-container>\n                            </div>\n                        }\n                    }\n                </div>\n                <button class=\"carousel-control-prev\" type=\"button\" (click)=\"previousImage()\"\n                    [class.carousel-control-vertical]=\"orientation === 'vertical'\">\n                    <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Previous</span>\n                </button>\n                <button class=\"carousel-control-next\" type=\"button\" (click)=\"nextImage()\"\n                    [class.carousel-control-vertical]=\"orientation === 'vertical'\">\n                    <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Next</span>\n                </button>\n            </div>\n        }\n    }\n}", styles: [":host ::ng-deep .carousel{position:relative}:host ::ng-deep .carousel.pointer-event{touch-action:pan-y}:host ::ng-deep .carousel-inner{position:relative;width:100%;overflow:hidden}:host ::ng-deep .carousel-inner:after{display:block;clear:both;content:\"\"}:host ::ng-deep .carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;backface-visibility:hidden;transition:transform .6s ease-in-out}@media (prefers-reduced-motion: reduce){:host ::ng-deep .carousel-item{transition:none}}:host ::ng-deep .carousel-item.active,:host ::ng-deep .carousel-item-next,:host ::ng-deep .carousel-item-prev{display:block}:host ::ng-deep .carousel-item-next:not(.carousel-item-start),:host ::ng-deep .active.carousel-item-end{transform:translate(100%)}:host ::ng-deep .carousel-item-prev:not(.carousel-item-end),:host ::ng-deep .active.carousel-item-start{transform:translate(-100%)}:host ::ng-deep .carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}:host ::ng-deep .carousel-fade .carousel-item.active,:host ::ng-deep .carousel-fade .carousel-item-next.carousel-item-start,:host ::ng-deep .carousel-fade .carousel-item-prev.carousel-item-end{z-index:1;opacity:1}:host ::ng-deep .carousel-fade .active.carousel-item-start,:host ::ng-deep .carousel-fade .active.carousel-item-end{z-index:0;opacity:0;transition:opacity 0s .6s}@media (prefers-reduced-motion: reduce){:host ::ng-deep .carousel-fade .active.carousel-item-start,:host ::ng-deep .carousel-fade .active.carousel-item-end{transition:none}}:host ::ng-deep .carousel-control-prev,:host ::ng-deep .carousel-control-next{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff;text-align:center;background:none;filter:var(--bs-carousel-control-icon-filter);border:0;opacity:.5;transition:opacity .15s ease}@media (prefers-reduced-motion: reduce){:host ::ng-deep .carousel-control-prev,:host ::ng-deep .carousel-control-next{transition:none}}:host ::ng-deep .carousel-control-prev:hover,:host ::ng-deep .carousel-control-prev:focus,:host ::ng-deep .carousel-control-next:hover,:host ::ng-deep .carousel-control-next:focus{color:#fff;text-decoration:none;outline:0;opacity:.9}:host ::ng-deep .carousel-control-prev{left:0}:host ::ng-deep .carousel-control-next{right:0}:host ::ng-deep .carousel-control-prev-icon,:host ::ng-deep .carousel-control-next-icon{display:inline-block;width:2rem;height:2rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}:host ::ng-deep .carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e\")}:host ::ng-deep .carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e\")}:host ::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:1rem;margin-left:15%}:host ::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:var(--bs-carousel-indicator-active-bg);background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media (prefers-reduced-motion: reduce){:host ::ng-deep .carousel-indicators [data-bs-target]{transition:none}}:host ::ng-deep .carousel-indicators .active{opacity:1}:host ::ng-deep .carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:var(--bs-carousel-caption-color);text-align:center}:host ::ng-deep .carousel-dark{--bs-carousel-indicator-active-bg: #000;--bs-carousel-caption-color: #000;--bs-carousel-control-icon-filter: invert(1) grayscale(100)}:host ::ng-deep :root,:host ::ng-deep [data-bs-theme=light]{--bs-carousel-indicator-active-bg: #fff;--bs-carousel-caption-color: #fff;--bs-carousel-control-icon-filter: }:host ::ng-deep [data-bs-theme=dark]{--bs-carousel-indicator-active-bg: #000;--bs-carousel-caption-color: #000;--bs-carousel-control-icon-filter: invert(1) grayscale(100)}:host ::ng-deep .carousel{min-height:100px;max-width:500px}:host ::ng-deep .carousel.noscript .carousel-inner{grid-template-rows:100%;grid-template-columns:100%}:host ::ng-deep .carousel.noscript .carousel-control-prev,:host ::ng-deep .carousel.noscript .carousel-control-next{display:none;z-index:10}:host ::ng-deep .carousel.noscript .carousel-item{display:block;opacity:0;transition:opacity .4s ease-in-out;grid-row:1;grid-column:1}:host ::ng-deep .carousel.noscript .car-radio.noscript:checked+.carousel-item{opacity:1;z-index:5}:host ::ng-deep .carousel.noscript .car-radio.noscript:checked+.carousel-item+label.carousel-control-prev,:host ::ng-deep .carousel.noscript .car-radio.noscript:checked+.carousel-item+label.carousel-control-prev+.carousel-control-next{display:flex}:host ::ng-deep .carousel.noscript .carousel-indicators{z-index:10}:host ::ng-deep .carousel .carousel-item>*{width:100%!important}:host ::ng-deep .carousel-indicators [data-bs-target]{background-color:var(--bs-carousel-indicator-active-bg, #fff)}:host ::ng-deep .carousel.carousel-vertical{display:flex;flex-direction:row;align-items:stretch;gap:1rem;flex-wrap:nowrap}:host ::ng-deep .carousel.carousel-vertical .carousel-inner{order:1;flex:1 1 auto}:host ::ng-deep .carousel.carousel-vertical .carousel-indicators{order:0}:host ::ng-deep .carousel.carousel-vertical .carousel-control-prev,:host ::ng-deep .carousel.carousel-vertical .carousel-control-next{width:100%;left:0;right:0}:host ::ng-deep .carousel.carousel-vertical .carousel-control-prev.carousel-control-vertical,:host ::ng-deep .carousel.carousel-vertical .carousel-control-next.carousel-control-vertical{justify-content:center}:host ::ng-deep .carousel-inner-vertical{display:flex;flex-direction:column;height:100%}:host ::ng-deep .carousel-inner-vertical .carousel-item{flex:1 1 auto;display:block}:host ::ng-deep .carousel-indicators-vertical{position:static;flex-direction:column;justify-content:center;align-items:stretch;margin:0;gap:.5rem;height:100%}:host ::ng-deep .carousel-indicators-vertical [data-bs-target]{width:auto;height:.75rem}:host ::ng-deep .carousel-control-vertical{top:0;bottom:auto;height:2.5rem;align-items:center}:host ::ng-deep .carousel-control-vertical.carousel-control-next{top:auto;bottom:0}:host ::ng-deep .carousel-control-vertical.carousel-control-prev .carousel-control-prev-icon{transform:rotate(90deg)}:host ::ng-deep .carousel-control-vertical.carousel-control-next .carousel-control-next-icon{transform:rotate(90deg)}.wrapper{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.BsSwipeDirective, selector: "[bsSwipe]", inputs: ["offside"] }, { kind: "directive", type: i2.BsSwipeContainerDirective, selector: "[bsSwipeContainer]", inputs: ["minimumOffset", "orientation", "imageIndex"], outputs: ["imageIndexChange"], exportAs: ["bsSwipeContainer"] }, { kind: "directive", type: i3.BsNoNoscriptDirective, selector: "[bsNoNoscript]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [FadeInOutAnimation] }); }
+    onImageIndexChange(index) {
+        this.currentImageIndex.set(index);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BsCarouselComponent, isStandalone: true, selector: "bs-carousel", inputs: { indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null }, keyboardEvents: { classPropertyName: "keyboardEvents", publicName: "keyboardEvents", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slideChange: "slideChange", animationStart: "animationStart", animationEnd: "animationEnd" }, host: { listeners: { "document:keydown.ArrowLeft": "onKeyPress($event)", "document:keydown.ArrowRight": "onKeyPress($event)", "document:keydown.ArrowUp": "onKeyPress($event)", "document:keydown.ArrowDown": "onKeyPress($event)" }, properties: { "@.disabled": "this.animationsDisabled" } }, queries: [{ propertyName: "imagesQuery", predicate: i0.forwardRef(() => BsCarouselImageDirective) }], viewQueries: [{ propertyName: "innerElement", first: true, predicate: ["innerElement"], descendants: true }, { propertyName: "swipeContainer", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "@if (isServerSide) {\n    <div class=\"carousel mx-auto noscript\" [class.carousel-vertical]=\"orientation() === 'vertical'\">\n        <div class=\"carousel-inner d-grid\">\n            @let imagesValue = images();\n            @if (imageCount(); as imageCount) {\n                @for (image of imagesValue; track image.id; let i = $index) {\n                    <input type=\"radio\" [id]=\"'car-' + i\" [name]=\"'car'\" class=\"car-radio d-none\" bsNoNoscript [checked]=\"i === 0\">\n                    <div class=\"carousel-item fade d-flex flex-row h-100 align-items-center\"\n                        [class.flex-column]=\"orientation() === 'vertical'\">\n                        <div class=\"w-100 position-relative\">\n                            <ng-container [ngTemplateOutlet]=\"image.itemTemplate\"></ng-container>\n                            @if (indicators()) {\n                                <div class=\"carousel-indicators\"\n                                    [class.carousel-indicators-vertical]=\"orientation() === 'vertical'\">\n                                    @for (image of imagesValue; track image.id; let j = $index) {\n                                        <label [attr.for]=\"'car-' + (j % imageCount)\" [class.active]=\"i === j\" data-bs-target></label>\n                                    }\n                                </div>\n                            }\n                        </div>\n                    </div>\n\n                    <label class=\"carousel-control-prev cursor-pointer\" [for]=\"'car-' + ((i - 1 + imageCount) % imageCount)\"\n                        [class.carousel-control-vertical]=\"orientation() === 'vertical'\">\n                        <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n                        <span class=\"visually-hidden\">Previous</span>\n                    </label>\n                    <label class=\"carousel-control-next cursor-pointer\" [for]=\"'car-' + ((i + 1) % imageCount)\"\n                        [class.carousel-control-vertical]=\"orientation() === 'vertical'\">\n                        <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n                        <span class=\"visually-hidden\">Next</span>\n                    </label>\n                }\n            }\n        </div>\n    </div>\n} @else {\n    @switch (animation()) {\n        @case ('slide') {\n            <div class=\"carousel slide mx-auto\" [class.carousel-vertical]=\"orientation() === 'vertical'\"\n                [style.height.px]=\"swipeContainer.currentSlideHeight()\">\n                @if (indicators()) {\n                    <div class=\"carousel-indicators\" [class.carousel-indicators-vertical]=\"orientation() === 'vertical'\">\n                        @for (image of images(); track image.id; let i = $index) {\n                            <button type=\"button\" (click)=\"swipeContainer.goto(i)\"\n                                [class.active]=\"swipeContainer.imageIndex() === i\" data-bs-target\n                                [attr.aria-current]=\"swipeContainer.imageIndex() === i ? true : null\"\n                                [attr.aria-label]=\"'Slide ' + i\"></button>\n                        }\n                    </div>\n                }\n                <div class=\"carousel-inner overflow-hidden pe-none\" [class.text-nowrap]=\"orientation() === 'horizontal'\"\n                    [class.carousel-inner-vertical]=\"orientation() === 'vertical'\" #innerElement\n                    [style.height.px]=\"swipeContainer.currentSlideHeight()\">\n                    <div bsSwipeContainer #container=\"bsSwipeContainer\" [minimumOffset]=\"50\"\n                        (imageIndexChange)=\"onImageIndexChange($event)\"\n                        (animationStart)=\"onContainerAnimationStart()\"\n                        (animationEnd)=\"onContainerAnimationEnd()\"\n                        [orientation]=\"orientation()\">\n                        <div class=\"carousel-item\" bsSwipe [offside]=\"true\">\n                            <ng-container *ngTemplateOutlet=\"lastImageTemplate()\"></ng-container>\n                        </div>\n                        @for (image of images(); track image.id) {\n                            <div class=\"carousel-item\" [class.active]=\"true\" bsSwipe>\n                                <ng-container *ngTemplateOutlet=\"image.itemTemplate\"></ng-container>\n                            </div>\n                        }\n                        <div class=\"carousel-item\" bsSwipe [offside]=\"true\">\n                            <ng-container *ngTemplateOutlet=\"firstImageTemplate()\"></ng-container>\n                        </div>\n                    </div>\n                </div>\n                <button class=\"carousel-control-prev\" type=\"button\" (click)=\"previous()\"\n                    [class.carousel-control-vertical]=\"orientation() === 'vertical'\"\n                    aria-label=\"Previous slide\">\n                    <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Previous</span>\n                </button>\n                <button class=\"carousel-control-next\" type=\"button\" (click)=\"next()\"\n                    [class.carousel-control-vertical]=\"orientation() === 'vertical'\"\n                    aria-label=\"Next slide\">\n                    <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Next</span>\n                </button>\n            </div>\n        }\n        @case ('fade') {\n            <div class=\"carousel fade mx-auto\" [class.carousel-vertical]=\"orientation() === 'vertical'\">\n                @if (indicators()) {\n                    <div class=\"carousel-indicators\" [class.carousel-indicators-vertical]=\"orientation() === 'vertical'\">\n                        @for (image of images(); track image.id; let i = $index) {\n                            <button type=\"button\" (click)=\"goto(i)\"\n                                [class.active]=\"currentImageIndex() === i\" data-bs-target\n                                [attr.aria-current]=\"currentImageIndex() === i ? true : null\"\n                                [attr.aria-label]=\"'Slide ' + i\"></button>\n                        }\n                    </div>\n                }\n                <div class=\"carousel-inner\" #innerElement>\n                    @for (image of images(); track image.id; let i = $index) {\n                        @if (currentImageIndex() === i) {\n                            <div class=\"carousel-item\" [class.active]=\"true\" @fadeInOut>\n                                <ng-container [ngTemplateOutlet]=\"image.itemTemplate\"></ng-container>\n                            </div>\n                        }\n                    }\n                </div>\n                <button class=\"carousel-control-prev\" type=\"button\" (click)=\"previous()\"\n                    [class.carousel-control-vertical]=\"orientation() === 'vertical'\"\n                    aria-label=\"Previous slide\">\n                    <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Previous</span>\n                </button>\n                <button class=\"carousel-control-next\" type=\"button\" (click)=\"next()\"\n                    [class.carousel-control-vertical]=\"orientation() === 'vertical'\"\n                    aria-label=\"Next slide\">\n                    <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Next</span>\n                </button>\n            </div>\n        }\n        @case ('none') {\n            <div class=\"carousel mx-auto\" [class.carousel-vertical]=\"orientation() === 'vertical'\">\n                @if (indicators()) {\n                    <div class=\"carousel-indicators\" [class.carousel-indicators-vertical]=\"orientation() === 'vertical'\">\n                        @for (image of images(); track image.id; let i = $index) {\n                            <button type=\"button\" (click)=\"goto(i)\"\n                                [class.active]=\"currentImageIndex() === i\" data-bs-target\n                                [attr.aria-current]=\"currentImageIndex() === i ? true : null\"\n                                [attr.aria-label]=\"'Slide ' + i\"></button>\n                        }\n                    </div>\n                }\n                <div class=\"carousel-inner\" #innerElement>\n                    @for (image of images(); track image.id; let i = $index) {\n                        @if (currentImageIndex() === i) {\n                            <div class=\"carousel-item\" [class.active]=\"true\">\n                                <ng-container [ngTemplateOutlet]=\"image.itemTemplate\"></ng-container>\n                            </div>\n                        }\n                    }\n                </div>\n                <button class=\"carousel-control-prev\" type=\"button\" (click)=\"previous()\"\n                    [class.carousel-control-vertical]=\"orientation() === 'vertical'\"\n                    aria-label=\"Previous slide\">\n                    <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Previous</span>\n                </button>\n                <button class=\"carousel-control-next\" type=\"button\" (click)=\"next()\"\n                    [class.carousel-control-vertical]=\"orientation() === 'vertical'\"\n                    aria-label=\"Next slide\">\n                    <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Next</span>\n                </button>\n            </div>\n        }\n    }\n}\n", styles: [":host ::ng-deep .carousel{position:relative}:host ::ng-deep .carousel.pointer-event{touch-action:pan-y}:host ::ng-deep .carousel-inner{position:relative;width:100%;overflow:hidden}:host ::ng-deep .carousel-inner:after{display:block;clear:both;content:\"\"}:host ::ng-deep .carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;backface-visibility:hidden;transition:transform .6s ease-in-out}@media(prefers-reduced-motion:reduce){:host ::ng-deep .carousel-item{transition:none}}:host ::ng-deep .carousel-item.active,:host ::ng-deep .carousel-item-next,:host ::ng-deep .carousel-item-prev{display:block}:host ::ng-deep .carousel-item-next:not(.carousel-item-start),:host ::ng-deep .active.carousel-item-end{transform:translate(100%)}:host ::ng-deep .carousel-item-prev:not(.carousel-item-end),:host ::ng-deep .active.carousel-item-start{transform:translate(-100%)}:host ::ng-deep .carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}:host ::ng-deep .carousel-fade .carousel-item.active,:host ::ng-deep .carousel-fade .carousel-item-next.carousel-item-start,:host ::ng-deep .carousel-fade .carousel-item-prev.carousel-item-end{z-index:1;opacity:1}:host ::ng-deep .carousel-fade .active.carousel-item-start,:host ::ng-deep .carousel-fade .active.carousel-item-end{z-index:0;opacity:0;transition:opacity 0s .6s}@media(prefers-reduced-motion:reduce){:host ::ng-deep .carousel-fade .active.carousel-item-start,:host ::ng-deep .carousel-fade .active.carousel-item-end{transition:none}}:host ::ng-deep .carousel-control-prev,:host ::ng-deep .carousel-control-next{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff;text-align:center;background:none;filter:var(--bs-carousel-control-icon-filter);border:0;opacity:.5;transition:opacity .15s ease}@media(prefers-reduced-motion:reduce){:host ::ng-deep .carousel-control-prev,:host ::ng-deep .carousel-control-next{transition:none}}:host ::ng-deep .carousel-control-prev:hover,:host ::ng-deep .carousel-control-prev:focus,:host ::ng-deep .carousel-control-next:hover,:host ::ng-deep .carousel-control-next:focus{color:#fff;text-decoration:none;outline:0;opacity:.9}:host ::ng-deep .carousel-control-prev{left:0}:host ::ng-deep .carousel-control-next{right:0}:host ::ng-deep .carousel-control-prev-icon,:host ::ng-deep .carousel-control-next-icon{display:inline-block;width:2rem;height:2rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}:host ::ng-deep .carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e\")}:host ::ng-deep .carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e\")}:host ::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:1rem;margin-left:15%}:host ::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:var(--bs-carousel-indicator-active-bg);background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media(prefers-reduced-motion:reduce){:host ::ng-deep .carousel-indicators [data-bs-target]{transition:none}}:host ::ng-deep .carousel-indicators .active{opacity:1}:host ::ng-deep .carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:var(--bs-carousel-caption-color);text-align:center}:host ::ng-deep .carousel-dark{--bs-carousel-indicator-active-bg: #000;--bs-carousel-caption-color: #000;--bs-carousel-control-icon-filter: invert(1) grayscale(100)}:host ::ng-deep :root,:host ::ng-deep [data-bs-theme=light]{--bs-carousel-indicator-active-bg: #fff;--bs-carousel-caption-color: #fff;--bs-carousel-control-icon-filter: }:host ::ng-deep [data-bs-theme=dark]{--bs-carousel-indicator-active-bg: #000;--bs-carousel-caption-color: #000;--bs-carousel-control-icon-filter: invert(1) grayscale(100)}:host ::ng-deep .carousel{min-height:100px;max-width:500px}:host ::ng-deep .carousel.noscript .carousel-inner{grid-template-rows:100%;grid-template-columns:100%}:host ::ng-deep .carousel.noscript .carousel-control-prev,:host ::ng-deep .carousel.noscript .carousel-control-next{display:none;z-index:10}:host ::ng-deep .carousel.noscript .carousel-item{display:block;opacity:0;transition:opacity .4s ease-in-out;grid-row:1;grid-column:1}:host ::ng-deep .carousel.noscript .car-radio.noscript:checked+.carousel-item{opacity:1;z-index:5}:host ::ng-deep .carousel.noscript .car-radio.noscript:checked+.carousel-item+label.carousel-control-prev,:host ::ng-deep .carousel.noscript .car-radio.noscript:checked+.carousel-item+label.carousel-control-prev+.carousel-control-next{display:flex}:host ::ng-deep .carousel.noscript .carousel-indicators{z-index:10}:host ::ng-deep .carousel .carousel-item>*{width:100%!important}:host ::ng-deep .carousel-indicators [data-bs-target]{background-color:var(--bs-carousel-indicator-active-bg, #fff)}:host ::ng-deep .carousel.carousel-vertical .carousel-control-prev,:host ::ng-deep .carousel.carousel-vertical .carousel-control-next{width:100%;left:0;right:0}:host ::ng-deep .carousel.carousel-vertical .carousel-control-prev.carousel-control-vertical,:host ::ng-deep .carousel.carousel-vertical .carousel-control-next.carousel-control-vertical{justify-content:center}:host ::ng-deep .carousel.carousel-vertical .carousel-control-prev-icon,:host ::ng-deep .carousel.carousel-vertical .carousel-control-next-icon{background-color:#00000080;border-radius:50%;padding:1.5rem;background-size:50%;box-shadow:0 2px 8px #0000004d}:host ::ng-deep .carousel-inner-vertical{display:flex;flex-direction:column}:host ::ng-deep .carousel-inner-vertical .carousel-item{flex:0 0 auto;display:flex!important;flex-direction:column;justify-content:center;align-items:center}:host ::ng-deep .carousel-indicators-vertical{position:absolute;inset:50% auto auto 0;transform:translateY(-50%);flex-direction:column;justify-content:center;align-items:center;margin:0;margin-left:.5rem;gap:.5rem}:host ::ng-deep .carousel-indicators-vertical [data-bs-target]{width:12px;height:12px;border-radius:50%;background-color:#ffffff80;border:none;box-shadow:0 1px 3px #0000004d;opacity:.7;transition:opacity .15s ease}:host ::ng-deep .carousel-indicators-vertical [data-bs-target].active{opacity:1;background-color:#fff}:host ::ng-deep .carousel-control-vertical{top:0;bottom:auto;height:2.5rem;align-items:center}:host ::ng-deep .carousel-control-vertical.carousel-control-next{top:auto;bottom:0}:host ::ng-deep .carousel-control-vertical.carousel-control-prev .carousel-control-prev-icon{transform:rotate(90deg)}:host ::ng-deep .carousel-control-vertical.carousel-control-next .carousel-control-next-icon{transform:rotate(90deg)}.wrapper{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: BsSwipeContainerDirective, selector: "[bsSwipeContainer]", inputs: ["minimumOffset", "animation", "orientation", "imageIndex"], outputs: ["imageIndexChange", "animationStart", "animationEnd"], exportAs: ["bsSwipeContainer"] }, { kind: "directive", type: BsSwipeDirective, selector: "[bsSwipe]", inputs: ["offside"] }, { kind: "directive", type: BsNoNoscriptDirective, selector: "[bsNoNoscript]" }], animations: [FadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsCarouselComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsCarouselComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-carousel', standalone: false, animations: [FadeInOutAnimation], template: "@if (isServerSide) {\n    <div class=\"carousel mx-auto noscript\" [class.carousel-vertical]=\"orientation === 'vertical'\">\n        <div class=\"carousel-inner d-grid\">\n            @let images = images$ | async;\n            @if (imageCount$ | async; as imageCount) {\n                @for (image of images; track image.id; let i = $index) {\n                    <input type=\"radio\" [id]=\"'car-' + i\" [name]=\"'car'\" class=\"car-radio d-none\" bsNoNoscript [checked]=\"i === 0\">\n                    <div class=\"carousel-item fade d-flex flex-row h-100 align-items-center\"\n                        [class.flex-column]=\"orientation === 'vertical'\">\n                        <div class=\"w-100 position-relative\">\n                            <ng-container [ngTemplateOutlet]=\"image.itemTemplate\"></ng-container>\n                            @if (indicators) {\n                                <div class=\"carousel-indicators\"\n                                    [class.carousel-indicators-vertical]=\"orientation === 'vertical'\">\n                                    @for (image of images; track image.id; let j = $index) {\n                                        <label [attr.for]=\"'car-' + (j % imageCount)\" [class.active]=\"i === j\" data-bs-target></label>\n                                    }\n                                </div>\n                            }\n                        </div>\n                    </div>\n                    \n                    <label class=\"carousel-control-prev cursor-pointer\" [for]=\"'car-' + ((i - 1 + imageCount) % imageCount)\"\n                        [class.carousel-control-vertical]=\"orientation === 'vertical'\">\n                        <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n                        <span class=\"visually-hidden\">Previous</span>\n                    </label>\n                    <label class=\"carousel-control-next cursor-pointer\" [for]=\"'car-' + ((i + 1) % imageCount)\"\n                        [class.carousel-control-vertical]=\"orientation === 'vertical'\">\n                        <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n                        <span class=\"visually-hidden\">Next</span>\n                    </label>\n                }\n            }\n        </div>\n    </div>\n} @else {\n    @switch (animation) {\n        @case ('slide') {\n            <div class=\"carousel slide mx-auto\" [class.carousel-vertical]=\"orientation === 'vertical'\"\n                [style.height.px]=\"swipeContainer?.currentSlideHeight$ | async\">\n                @if (indicators) {\n                    <div class=\"carousel-indicators\" [class.carousel-indicators-vertical]=\"orientation === 'vertical'\"\n                        [style.height.px]=\"orientation === 'vertical' ? (swipeContainer?.maxSlideHeight$ | async) : null\">\n                        @for (image of (images$ | async); track image.id; let i = $index) {\n                            <button type=\"button\" (click)=\"swipeContainer?.goto(i)\"\n                                [class.active]=\"(swipeContainer?.imageIndex$ | async) === i\" data-bs-target\n                                [attr.aria-current]=\"(swipeContainer?.imageIndex$ | async) === i ? true : null\"\n                                [attr.aria-label]=\"'Slide ' + i\"></button>\n                        }\n                    </div>\n                }\n                <div class=\"carousel-inner overflow-hidden pe-none\" [class.text-nowrap]=\"orientation === 'horizontal'\"\n                    [class.carousel-inner-vertical]=\"orientation === 'vertical'\" #innerElement\n                    [style.height.px]=\"swipeContainer?.currentSlideHeight$ | async\">\n                    <div bsSwipeContainer #container=\"bsSwipeContainer\" [minimumOffset]=\"50\" [(imageIndex)]=\"currentImageIndex\"\n                        [orientation]=\"orientation\">\n                        <div class=\"carousel-item\" bsSwipe [offside]=\"true\">\n                            <ng-container *ngTemplateOutlet=\"lastImageTemplate$ | async\"></ng-container>\n                        </div>\n                        @for (image of (images$ | async); track image.id) {\n                            <div class=\"carousel-item\" [class.active]=\"true\" bsSwipe>\n                                <ng-container *ngTemplateOutlet=\"image.itemTemplate\"></ng-container>\n                            </div>\n                        }\n                        <div class=\"carousel-item\" bsSwipe [offside]=\"true\">\n                            <ng-container *ngTemplateOutlet=\"firstImageTemplate$ | async\"></ng-container>\n                        </div>\n                    </div>\n                </div>\n                <button class=\"carousel-control-prev\" type=\"button\" (click)=\"previousImage()\"\n                    [class.carousel-control-vertical]=\"orientation === 'vertical'\">\n                    <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Previous</span>\n                </button>\n                <button class=\"carousel-control-next\" type=\"button\" (click)=\"nextImage()\"\n                    [class.carousel-control-vertical]=\"orientation === 'vertical'\">\n                    <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Next</span>\n                </button>\n            </div>\n        }\n        @case ('fade') {\n            <div class=\"carousel fade mx-auto\" [class.carousel-vertical]=\"orientation === 'vertical'\">\n                @if (indicators) {\n                    <div class=\"carousel-indicators\" [class.carousel-indicators-vertical]=\"orientation === 'vertical'\"\n                        [style.height.px]=\"orientation === 'vertical' ? (swipeContainer?.currentSlideHeight$ | async) : null\">\n                        @for (image of (images$ | async); track image.id; let i = $index) {\n                            <button type=\"button\" (click)=\"currentImageIndex = i\"\n                                [class.active]=\"currentImageIndex === i\" data-bs-target\n                                [attr.aria-current]=\"currentImageIndex === i ? true : null\"\n                                [attr.aria-label]=\"'Slide ' + i\"></button>\n                        }\n                    </div>\n                }\n                <div class=\"carousel-inner\" [class.carousel-inner-vertical]=\"orientation === 'vertical'\">\n                    @for (image of (images$ | async); track image.id; let i = $index) {\n                        @if (currentImageIndex === i) {\n                            <div class=\"carousel-item\" [class.active]=\"true\" @fadeInOut>\n                                <ng-container [ngTemplateOutlet]=\"image.itemTemplate\"></ng-container>\n                            </div>\n                        }\n                    }\n                </div>\n                <button class=\"carousel-control-prev\" type=\"button\" (click)=\"previousImage()\"\n                    [class.carousel-control-vertical]=\"orientation === 'vertical'\">\n                    <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Previous</span>\n                </button>\n                <button class=\"carousel-control-next\" type=\"button\" (click)=\"nextImage()\"\n                    [class.carousel-control-vertical]=\"orientation === 'vertical'\">\n                    <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Next</span>\n                </button>\n            </div>\n        }\n    }\n}", styles: [":host ::ng-deep .carousel{position:relative}:host ::ng-deep .carousel.pointer-event{touch-action:pan-y}:host ::ng-deep .carousel-inner{position:relative;width:100%;overflow:hidden}:host ::ng-deep .carousel-inner:after{display:block;clear:both;content:\"\"}:host ::ng-deep .carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;backface-visibility:hidden;transition:transform .6s ease-in-out}@media (prefers-reduced-motion: reduce){:host ::ng-deep .carousel-item{transition:none}}:host ::ng-deep .carousel-item.active,:host ::ng-deep .carousel-item-next,:host ::ng-deep .carousel-item-prev{display:block}:host ::ng-deep .carousel-item-next:not(.carousel-item-start),:host ::ng-deep .active.carousel-item-end{transform:translate(100%)}:host ::ng-deep .carousel-item-prev:not(.carousel-item-end),:host ::ng-deep .active.carousel-item-start{transform:translate(-100%)}:host ::ng-deep .carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}:host ::ng-deep .carousel-fade .carousel-item.active,:host ::ng-deep .carousel-fade .carousel-item-next.carousel-item-start,:host ::ng-deep .carousel-fade .carousel-item-prev.carousel-item-end{z-index:1;opacity:1}:host ::ng-deep .carousel-fade .active.carousel-item-start,:host ::ng-deep .carousel-fade .active.carousel-item-end{z-index:0;opacity:0;transition:opacity 0s .6s}@media (prefers-reduced-motion: reduce){:host ::ng-deep .carousel-fade .active.carousel-item-start,:host ::ng-deep .carousel-fade .active.carousel-item-end{transition:none}}:host ::ng-deep .carousel-control-prev,:host ::ng-deep .carousel-control-next{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff;text-align:center;background:none;filter:var(--bs-carousel-control-icon-filter);border:0;opacity:.5;transition:opacity .15s ease}@media (prefers-reduced-motion: reduce){:host ::ng-deep .carousel-control-prev,:host ::ng-deep .carousel-control-next{transition:none}}:host ::ng-deep .carousel-control-prev:hover,:host ::ng-deep .carousel-control-prev:focus,:host ::ng-deep .carousel-control-next:hover,:host ::ng-deep .carousel-control-next:focus{color:#fff;text-decoration:none;outline:0;opacity:.9}:host ::ng-deep .carousel-control-prev{left:0}:host ::ng-deep .carousel-control-next{right:0}:host ::ng-deep .carousel-control-prev-icon,:host ::ng-deep .carousel-control-next-icon{display:inline-block;width:2rem;height:2rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}:host ::ng-deep .carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e\")}:host ::ng-deep .carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e\")}:host ::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:1rem;margin-left:15%}:host ::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:var(--bs-carousel-indicator-active-bg);background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media (prefers-reduced-motion: reduce){:host ::ng-deep .carousel-indicators [data-bs-target]{transition:none}}:host ::ng-deep .carousel-indicators .active{opacity:1}:host ::ng-deep .carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:var(--bs-carousel-caption-color);text-align:center}:host ::ng-deep .carousel-dark{--bs-carousel-indicator-active-bg: #000;--bs-carousel-caption-color: #000;--bs-carousel-control-icon-filter: invert(1) grayscale(100)}:host ::ng-deep :root,:host ::ng-deep [data-bs-theme=light]{--bs-carousel-indicator-active-bg: #fff;--bs-carousel-caption-color: #fff;--bs-carousel-control-icon-filter: }:host ::ng-deep [data-bs-theme=dark]{--bs-carousel-indicator-active-bg: #000;--bs-carousel-caption-color: #000;--bs-carousel-control-icon-filter: invert(1) grayscale(100)}:host ::ng-deep .carousel{min-height:100px;max-width:500px}:host ::ng-deep .carousel.noscript .carousel-inner{grid-template-rows:100%;grid-template-columns:100%}:host ::ng-deep .carousel.noscript .carousel-control-prev,:host ::ng-deep .carousel.noscript .carousel-control-next{display:none;z-index:10}:host ::ng-deep .carousel.noscript .carousel-item{display:block;opacity:0;transition:opacity .4s ease-in-out;grid-row:1;grid-column:1}:host ::ng-deep .carousel.noscript .car-radio.noscript:checked+.carousel-item{opacity:1;z-index:5}:host ::ng-deep .carousel.noscript .car-radio.noscript:checked+.carousel-item+label.carousel-control-prev,:host ::ng-deep .carousel.noscript .car-radio.noscript:checked+.carousel-item+label.carousel-control-prev+.carousel-control-next{display:flex}:host ::ng-deep .carousel.noscript .carousel-indicators{z-index:10}:host ::ng-deep .carousel .carousel-item>*{width:100%!important}:host ::ng-deep .carousel-indicators [data-bs-target]{background-color:var(--bs-carousel-indicator-active-bg, #fff)}:host ::ng-deep .carousel.carousel-vertical{display:flex;flex-direction:row;align-items:stretch;gap:1rem;flex-wrap:nowrap}:host ::ng-deep .carousel.carousel-vertical .carousel-inner{order:1;flex:1 1 auto}:host ::ng-deep .carousel.carousel-vertical .carousel-indicators{order:0}:host ::ng-deep .carousel.carousel-vertical .carousel-control-prev,:host ::ng-deep .carousel.carousel-vertical .carousel-control-next{width:100%;left:0;right:0}:host ::ng-deep .carousel.carousel-vertical .carousel-control-prev.carousel-control-vertical,:host ::ng-deep .carousel.carousel-vertical .carousel-control-next.carousel-control-vertical{justify-content:center}:host ::ng-deep .carousel-inner-vertical{display:flex;flex-direction:column;height:100%}:host ::ng-deep .carousel-inner-vertical .carousel-item{flex:1 1 auto;display:block}:host ::ng-deep .carousel-indicators-vertical{position:static;flex-direction:column;justify-content:center;align-items:stretch;margin:0;gap:.5rem;height:100%}:host ::ng-deep .carousel-indicators-vertical [data-bs-target]{width:auto;height:.75rem}:host ::ng-deep .carousel-control-vertical{top:0;bottom:auto;height:2.5rem;align-items:center}:host ::ng-deep .carousel-control-vertical.carousel-control-next{top:auto;bottom:0}:host ::ng-deep .carousel-control-vertical.carousel-control-prev .carousel-control-prev-icon{transform:rotate(90deg)}:host ::ng-deep .carousel-control-vertical.carousel-control-next .carousel-control-next-icon{transform:rotate(90deg)}.wrapper{overflow:hidden}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { indicators: [{
-                type: Input
-            }], keyboardEvents: [{
-                type: Input
-            }], orientation: [{
-                type: Input
-            }], innerElement: [{
+            args: [{ selector: 'bs-carousel', standalone: true, imports: [
+                        NgTemplateOutlet,
+                        BsSwipeContainerDirective,
+                        BsSwipeDirective,
+                        BsNoNoscriptDirective,
+                    ], animations: [FadeInOutAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isServerSide) {\n    <div class=\"carousel mx-auto noscript\" [class.carousel-vertical]=\"orientation() === 'vertical'\">\n        <div class=\"carousel-inner d-grid\">\n            @let imagesValue = images();\n            @if (imageCount(); as imageCount) {\n                @for (image of imagesValue; track image.id; let i = $index) {\n                    <input type=\"radio\" [id]=\"'car-' + i\" [name]=\"'car'\" class=\"car-radio d-none\" bsNoNoscript [checked]=\"i === 0\">\n                    <div class=\"carousel-item fade d-flex flex-row h-100 align-items-center\"\n                        [class.flex-column]=\"orientation() === 'vertical'\">\n                        <div class=\"w-100 position-relative\">\n                            <ng-container [ngTemplateOutlet]=\"image.itemTemplate\"></ng-container>\n                            @if (indicators()) {\n                                <div class=\"carousel-indicators\"\n                                    [class.carousel-indicators-vertical]=\"orientation() === 'vertical'\">\n                                    @for (image of imagesValue; track image.id; let j = $index) {\n                                        <label [attr.for]=\"'car-' + (j % imageCount)\" [class.active]=\"i === j\" data-bs-target></label>\n                                    }\n                                </div>\n                            }\n                        </div>\n                    </div>\n\n                    <label class=\"carousel-control-prev cursor-pointer\" [for]=\"'car-' + ((i - 1 + imageCount) % imageCount)\"\n                        [class.carousel-control-vertical]=\"orientation() === 'vertical'\">\n                        <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n                        <span class=\"visually-hidden\">Previous</span>\n                    </label>\n                    <label class=\"carousel-control-next cursor-pointer\" [for]=\"'car-' + ((i + 1) % imageCount)\"\n                        [class.carousel-control-vertical]=\"orientation() === 'vertical'\">\n                        <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n                        <span class=\"visually-hidden\">Next</span>\n                    </label>\n                }\n            }\n        </div>\n    </div>\n} @else {\n    @switch (animation()) {\n        @case ('slide') {\n            <div class=\"carousel slide mx-auto\" [class.carousel-vertical]=\"orientation() === 'vertical'\"\n                [style.height.px]=\"swipeContainer.currentSlideHeight()\">\n                @if (indicators()) {\n                    <div class=\"carousel-indicators\" [class.carousel-indicators-vertical]=\"orientation() === 'vertical'\">\n                        @for (image of images(); track image.id; let i = $index) {\n                            <button type=\"button\" (click)=\"swipeContainer.goto(i)\"\n                                [class.active]=\"swipeContainer.imageIndex() === i\" data-bs-target\n                                [attr.aria-current]=\"swipeContainer.imageIndex() === i ? true : null\"\n                                [attr.aria-label]=\"'Slide ' + i\"></button>\n                        }\n                    </div>\n                }\n                <div class=\"carousel-inner overflow-hidden pe-none\" [class.text-nowrap]=\"orientation() === 'horizontal'\"\n                    [class.carousel-inner-vertical]=\"orientation() === 'vertical'\" #innerElement\n                    [style.height.px]=\"swipeContainer.currentSlideHeight()\">\n                    <div bsSwipeContainer #container=\"bsSwipeContainer\" [minimumOffset]=\"50\"\n                        (imageIndexChange)=\"onImageIndexChange($event)\"\n                        (animationStart)=\"onContainerAnimationStart()\"\n                        (animationEnd)=\"onContainerAnimationEnd()\"\n                        [orientation]=\"orientation()\">\n                        <div class=\"carousel-item\" bsSwipe [offside]=\"true\">\n                            <ng-container *ngTemplateOutlet=\"lastImageTemplate()\"></ng-container>\n                        </div>\n                        @for (image of images(); track image.id) {\n                            <div class=\"carousel-item\" [class.active]=\"true\" bsSwipe>\n                                <ng-container *ngTemplateOutlet=\"image.itemTemplate\"></ng-container>\n                            </div>\n                        }\n                        <div class=\"carousel-item\" bsSwipe [offside]=\"true\">\n                            <ng-container *ngTemplateOutlet=\"firstImageTemplate()\"></ng-container>\n                        </div>\n                    </div>\n                </div>\n                <button class=\"carousel-control-prev\" type=\"button\" (click)=\"previous()\"\n                    [class.carousel-control-vertical]=\"orientation() === 'vertical'\"\n                    aria-label=\"Previous slide\">\n                    <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Previous</span>\n                </button>\n                <button class=\"carousel-control-next\" type=\"button\" (click)=\"next()\"\n                    [class.carousel-control-vertical]=\"orientation() === 'vertical'\"\n                    aria-label=\"Next slide\">\n                    <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Next</span>\n                </button>\n            </div>\n        }\n        @case ('fade') {\n            <div class=\"carousel fade mx-auto\" [class.carousel-vertical]=\"orientation() === 'vertical'\">\n                @if (indicators()) {\n                    <div class=\"carousel-indicators\" [class.carousel-indicators-vertical]=\"orientation() === 'vertical'\">\n                        @for (image of images(); track image.id; let i = $index) {\n                            <button type=\"button\" (click)=\"goto(i)\"\n                                [class.active]=\"currentImageIndex() === i\" data-bs-target\n                                [attr.aria-current]=\"currentImageIndex() === i ? true : null\"\n                                [attr.aria-label]=\"'Slide ' + i\"></button>\n                        }\n                    </div>\n                }\n                <div class=\"carousel-inner\" #innerElement>\n                    @for (image of images(); track image.id; let i = $index) {\n                        @if (currentImageIndex() === i) {\n                            <div class=\"carousel-item\" [class.active]=\"true\" @fadeInOut>\n                                <ng-container [ngTemplateOutlet]=\"image.itemTemplate\"></ng-container>\n                            </div>\n                        }\n                    }\n                </div>\n                <button class=\"carousel-control-prev\" type=\"button\" (click)=\"previous()\"\n                    [class.carousel-control-vertical]=\"orientation() === 'vertical'\"\n                    aria-label=\"Previous slide\">\n                    <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Previous</span>\n                </button>\n                <button class=\"carousel-control-next\" type=\"button\" (click)=\"next()\"\n                    [class.carousel-control-vertical]=\"orientation() === 'vertical'\"\n                    aria-label=\"Next slide\">\n                    <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Next</span>\n                </button>\n            </div>\n        }\n        @case ('none') {\n            <div class=\"carousel mx-auto\" [class.carousel-vertical]=\"orientation() === 'vertical'\">\n                @if (indicators()) {\n                    <div class=\"carousel-indicators\" [class.carousel-indicators-vertical]=\"orientation() === 'vertical'\">\n                        @for (image of images(); track image.id; let i = $index) {\n                            <button type=\"button\" (click)=\"goto(i)\"\n                                [class.active]=\"currentImageIndex() === i\" data-bs-target\n                                [attr.aria-current]=\"currentImageIndex() === i ? true : null\"\n                                [attr.aria-label]=\"'Slide ' + i\"></button>\n                        }\n                    </div>\n                }\n                <div class=\"carousel-inner\" #innerElement>\n                    @for (image of images(); track image.id; let i = $index) {\n                        @if (currentImageIndex() === i) {\n                            <div class=\"carousel-item\" [class.active]=\"true\">\n                                <ng-container [ngTemplateOutlet]=\"image.itemTemplate\"></ng-container>\n                            </div>\n                        }\n                    }\n                </div>\n                <button class=\"carousel-control-prev\" type=\"button\" (click)=\"previous()\"\n                    [class.carousel-control-vertical]=\"orientation() === 'vertical'\"\n                    aria-label=\"Previous slide\">\n                    <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Previous</span>\n                </button>\n                <button class=\"carousel-control-next\" type=\"button\" (click)=\"next()\"\n                    [class.carousel-control-vertical]=\"orientation() === 'vertical'\"\n                    aria-label=\"Next slide\">\n                    <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n                    <span class=\"visually-hidden\">Next</span>\n                </button>\n            </div>\n        }\n    }\n}\n", styles: [":host ::ng-deep .carousel{position:relative}:host ::ng-deep .carousel.pointer-event{touch-action:pan-y}:host ::ng-deep .carousel-inner{position:relative;width:100%;overflow:hidden}:host ::ng-deep .carousel-inner:after{display:block;clear:both;content:\"\"}:host ::ng-deep .carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;backface-visibility:hidden;transition:transform .6s ease-in-out}@media(prefers-reduced-motion:reduce){:host ::ng-deep .carousel-item{transition:none}}:host ::ng-deep .carousel-item.active,:host ::ng-deep .carousel-item-next,:host ::ng-deep .carousel-item-prev{display:block}:host ::ng-deep .carousel-item-next:not(.carousel-item-start),:host ::ng-deep .active.carousel-item-end{transform:translate(100%)}:host ::ng-deep .carousel-item-prev:not(.carousel-item-end),:host ::ng-deep .active.carousel-item-start{transform:translate(-100%)}:host ::ng-deep .carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}:host ::ng-deep .carousel-fade .carousel-item.active,:host ::ng-deep .carousel-fade .carousel-item-next.carousel-item-start,:host ::ng-deep .carousel-fade .carousel-item-prev.carousel-item-end{z-index:1;opacity:1}:host ::ng-deep .carousel-fade .active.carousel-item-start,:host ::ng-deep .carousel-fade .active.carousel-item-end{z-index:0;opacity:0;transition:opacity 0s .6s}@media(prefers-reduced-motion:reduce){:host ::ng-deep .carousel-fade .active.carousel-item-start,:host ::ng-deep .carousel-fade .active.carousel-item-end{transition:none}}:host ::ng-deep .carousel-control-prev,:host ::ng-deep .carousel-control-next{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff;text-align:center;background:none;filter:var(--bs-carousel-control-icon-filter);border:0;opacity:.5;transition:opacity .15s ease}@media(prefers-reduced-motion:reduce){:host ::ng-deep .carousel-control-prev,:host ::ng-deep .carousel-control-next{transition:none}}:host ::ng-deep .carousel-control-prev:hover,:host ::ng-deep .carousel-control-prev:focus,:host ::ng-deep .carousel-control-next:hover,:host ::ng-deep .carousel-control-next:focus{color:#fff;text-decoration:none;outline:0;opacity:.9}:host ::ng-deep .carousel-control-prev{left:0}:host ::ng-deep .carousel-control-next{right:0}:host ::ng-deep .carousel-control-prev-icon,:host ::ng-deep .carousel-control-next-icon{display:inline-block;width:2rem;height:2rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}:host ::ng-deep .carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e\")}:host ::ng-deep .carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e\")}:host ::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:1rem;margin-left:15%}:host ::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:var(--bs-carousel-indicator-active-bg);background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media(prefers-reduced-motion:reduce){:host ::ng-deep .carousel-indicators [data-bs-target]{transition:none}}:host ::ng-deep .carousel-indicators .active{opacity:1}:host ::ng-deep .carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:var(--bs-carousel-caption-color);text-align:center}:host ::ng-deep .carousel-dark{--bs-carousel-indicator-active-bg: #000;--bs-carousel-caption-color: #000;--bs-carousel-control-icon-filter: invert(1) grayscale(100)}:host ::ng-deep :root,:host ::ng-deep [data-bs-theme=light]{--bs-carousel-indicator-active-bg: #fff;--bs-carousel-caption-color: #fff;--bs-carousel-control-icon-filter: }:host ::ng-deep [data-bs-theme=dark]{--bs-carousel-indicator-active-bg: #000;--bs-carousel-caption-color: #000;--bs-carousel-control-icon-filter: invert(1) grayscale(100)}:host ::ng-deep .carousel{min-height:100px;max-width:500px}:host ::ng-deep .carousel.noscript .carousel-inner{grid-template-rows:100%;grid-template-columns:100%}:host ::ng-deep .carousel.noscript .carousel-control-prev,:host ::ng-deep .carousel.noscript .carousel-control-next{display:none;z-index:10}:host ::ng-deep .carousel.noscript .carousel-item{display:block;opacity:0;transition:opacity .4s ease-in-out;grid-row:1;grid-column:1}:host ::ng-deep .carousel.noscript .car-radio.noscript:checked+.carousel-item{opacity:1;z-index:5}:host ::ng-deep .carousel.noscript .car-radio.noscript:checked+.carousel-item+label.carousel-control-prev,:host ::ng-deep .carousel.noscript .car-radio.noscript:checked+.carousel-item+label.carousel-control-prev+.carousel-control-next{display:flex}:host ::ng-deep .carousel.noscript .carousel-indicators{z-index:10}:host ::ng-deep .carousel .carousel-item>*{width:100%!important}:host ::ng-deep .carousel-indicators [data-bs-target]{background-color:var(--bs-carousel-indicator-active-bg, #fff)}:host ::ng-deep .carousel.carousel-vertical .carousel-control-prev,:host ::ng-deep .carousel.carousel-vertical .carousel-control-next{width:100%;left:0;right:0}:host ::ng-deep .carousel.carousel-vertical .carousel-control-prev.carousel-control-vertical,:host ::ng-deep .carousel.carousel-vertical .carousel-control-next.carousel-control-vertical{justify-content:center}:host ::ng-deep .carousel.carousel-vertical .carousel-control-prev-icon,:host ::ng-deep .carousel.carousel-vertical .carousel-control-next-icon{background-color:#00000080;border-radius:50%;padding:1.5rem;background-size:50%;box-shadow:0 2px 8px #0000004d}:host ::ng-deep .carousel-inner-vertical{display:flex;flex-direction:column}:host ::ng-deep .carousel-inner-vertical .carousel-item{flex:0 0 auto;display:flex!important;flex-direction:column;justify-content:center;align-items:center}:host ::ng-deep .carousel-indicators-vertical{position:absolute;inset:50% auto auto 0;transform:translateY(-50%);flex-direction:column;justify-content:center;align-items:center;margin:0;margin-left:.5rem;gap:.5rem}:host ::ng-deep .carousel-indicators-vertical [data-bs-target]{width:12px;height:12px;border-radius:50%;background-color:#ffffff80;border:none;box-shadow:0 1px 3px #0000004d;opacity:.7;transition:opacity .15s ease}:host ::ng-deep .carousel-indicators-vertical [data-bs-target].active{opacity:1;background-color:#fff}:host ::ng-deep .carousel-control-vertical{top:0;bottom:auto;height:2.5rem;align-items:center}:host ::ng-deep .carousel-control-vertical.carousel-control-next{top:auto;bottom:0}:host ::ng-deep .carousel-control-vertical.carousel-control-prev .carousel-control-prev-icon{transform:rotate(90deg)}:host ::ng-deep .carousel-control-vertical.carousel-control-next .carousel-control-next-icon{transform:rotate(90deg)}.wrapper{overflow:hidden}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { indicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicators", required: false }] }], keyboardEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardEvents", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], slideChange: [{ type: i0.Output, args: ["slideChange"] }], animationStart: [{ type: i0.Output, args: ["animationStart"] }], animationEnd: [{ type: i0.Output, args: ["animationEnd"] }], innerElement: [{
                 type: ViewChild,
                 args: ['innerElement']
             }], swipeContainer: [{
                 type: ViewChild,
                 args: ['container']
-            }], images: [{
+            }], imagesQuery: [{
                 type: ContentChildren,
                 args: [forwardRef(() => BsCarouselImageDirective)]
             }], animationsDisabled: [{
                 type: HostBinding,
                 args: ['@.disabled']
-            }], animation: [{
-                type: Input
             }], onKeyPress: [{
                 type: HostListener,
                 args: ['document:keydown.ArrowLeft', ['$event']]
@@ -206,49 +283,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
             }] } });
 
 class BsCarouselImgDirective {
-    constructor(image) {
-        this.fetchPriority = (image && image.isFirst) ? 'high' : 'low';
+    constructor() {
+        this.image = inject(BsCarouselImageDirective, { optional: true });
+        this.fetchPriority = (this.image && this.image.isFirst) ? 'high' : 'low';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsCarouselImgDirective, deps: [{ token: BsCarouselImageDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: BsCarouselImgDirective, isStandalone: false, selector: "img", host: { properties: { "attr.fetch-priority": "this.fetchPriority" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsCarouselImgDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: BsCarouselImgDirective, isStandalone: true, selector: "img", host: { properties: { "attr.fetch-priority": "this.fetchPriority" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsCarouselImgDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsCarouselImgDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'img',
-                    standalone: false,
+                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: BsCarouselImageDirective }], propDecorators: { fetchPriority: [{
+        }], ctorParameters: () => [], propDecorators: { fetchPriority: [{
                 type: HostBinding,
                 args: ['attr.fetch-priority']
             }] } });
 
 class BsCarouselModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.13", ngImport: i0, type: BsCarouselModule, declarations: [BsCarouselComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: BsCarouselModule, imports: [BsCarouselComponent,
             BsCarouselImageDirective,
-            BsCarouselImgDirective], imports: [AsyncPipe,
-            NgTemplateOutlet,
-            BsSwiperModule,
-            BsNoNoscriptDirective], exports: [BsCarouselComponent,
+            BsCarouselImgDirective], exports: [BsCarouselComponent,
             BsCarouselImageDirective,
             BsCarouselImgDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsCarouselModule, imports: [BsSwiperModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsCarouselModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BsCarouselModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsCarouselModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
+                    imports: [
                         BsCarouselComponent,
                         BsCarouselImageDirective,
                         BsCarouselImgDirective,
                     ],
-                    imports: [
-                        AsyncPipe,
-                        NgTemplateOutlet,
-                        BsSwiperModule,
-                        BsNoNoscriptDirective
-                    ],
                     exports: [
                         BsCarouselComponent,
                         BsCarouselImageDirective,