npm - @mintplayer/ng-bootstrap - Versions diffs - 21.6.0 → 21.8.0 - Mend

@mintplayer/ng-bootstrap 21.6.0 → 21.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (215) hide show

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

@@ -1,6 +1,6 @@
 import { isPlatformServer, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, ElementRef, Directive, PLATFORM_ID, DestroyRef, signal, input, output, computed, viewChild, effect, HostListener, HostBinding, forwardRef, ContentChildren, ViewChild, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { inject, TemplateRef, ElementRef, Directive, PLATFORM_ID, DestroyRef, signal, contentChildren, forwardRef, input, output, computed, viewChild, effect, ChangeDetectionStrategy, Component } from '@angular/core';
 import { FadeInOutAnimation } from '@mintplayer/ng-animations';
 import { Color } from '@mintplayer/ng-bootstrap';
 import { BsSwipeContainerDirective, BsSwipeDirective } from '@mintplayer/ng-swiper/swiper';
@@ -15,22 +15,17 @@ class BsCarouselImageDirective {
         this.itemTemplate = this.templateRef;
         this.id = this.carousel.imageCounter++;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BsCarouselImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: BsCarouselImageDirective, isStandalone: true, selector: "*[bsCarouselImage]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsCarouselImageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BsCarouselImageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '*[bsCarouselImage]',
-                    standalone: true,
                 }]
         }], ctorParameters: () => [] });
 class BsCarouselComponent {
-    set imagesQuery(value) {
-        this.images.set(value);
-        value.forEach((item, index) => item.isFirst = (index === 0));
-    }
     onKeyPress(event) {
         const ev = event;
         if (this.keyboardEvents()) {
@@ -73,7 +68,7 @@ class BsCarouselComponent {
         this.colors = Color;
         this.isServerSide = isPlatformServer(this.platformId);
         this.currentImageIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentImageIndex" }] : []));
-        this.images = signal(null, ...(ngDevMode ? [{ debugName: "images" }] : []));
+        this.images = contentChildren(forwardRef(() => BsCarouselImageDirective), ...(ngDevMode ? [{ debugName: "images" }] : []));
         this.isDestroyed = false;
         // Inputs
         this.indicators = input(false, ...(ngDevMode ? [{ debugName: "indicators" }] : []));
@@ -87,39 +82,40 @@ class BsCarouselComponent {
         this.animationStart = output();
         this.animationEnd = output();
         // Computed signals
-        this.imageCount = computed(() => this.images()?.length ?? 0, ...(ngDevMode ? [{ debugName: "imageCount" }] : []));
-        // Signal-based viewChild for swipeContainer to enable reactive height tracking
-        this.swipeContainerSignal = viewChild('container', ...(ngDevMode ? [{ debugName: "swipeContainerSignal" }] : []));
+        this.imageCount = computed(() => this.images().length, ...(ngDevMode ? [{ debugName: "imageCount" }] : []));
+        this.innerElement = viewChild('innerElement', ...(ngDevMode ? [{ debugName: "innerElement" }] : []));
+        this.swipeContainer = viewChild('container', ...(ngDevMode ? [{ debugName: "swipeContainer" }] : []));
         // Returns 200 when swipeContainer isn't ready or height is null/0, ensuring images render and ResizeObserver triggers
         this.slideHeight = computed(() => {
-            const container = this.swipeContainerSignal();
+            const container = this.swipeContainer();
             const height = container?.currentSlideHeight();
             return (height && height > 0) ? height : 200;
         }, ...(ngDevMode ? [{ debugName: "slideHeight" }] : []));
         this.firstImageTemplate = computed(() => {
             const images = this.images();
-            if (!images)
-                return null;
             if (images.length === 0)
                 return null;
-            const img = images.get(0);
+            const img = images[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);
+            const img = images[images.length - 1];
             if (!img)
                 return null;
             return img.itemTemplate;
         }, ...(ngDevMode ? [{ debugName: "lastImageTemplate" }] : []));
         this.animationsDisabled = false;
         this.imageCounter = 1;
+        // Mark first image whenever images change
+        effect(() => {
+            const images = this.images();
+            images.forEach((item, index) => item.isFirst = (index === 0));
+        });
         // Setup auto-advance interval effect
         effect(() => {
             const intervalTime = this.interval();
@@ -179,7 +175,7 @@ class BsCarouselComponent {
                 break;
             }
             case 'slide':
-                this.swipeContainer.previous();
+                this.swipeContainer()?.previous();
                 break;
         }
     }
@@ -212,7 +208,7 @@ class BsCarouselComponent {
                 break;
             }
             case 'slide':
-                this.swipeContainer.next();
+                this.swipeContainer()?.next();
                 break;
         }
     }
@@ -230,7 +226,7 @@ class BsCarouselComponent {
                 }
                 break;
             case 'slide':
-                this.swipeContainer.goto(index);
+                this.swipeContainer()?.goto(index);
                 break;
         }
     }
@@ -240,12 +236,18 @@ class BsCarouselComponent {
                 // 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);
+            const el = this.innerElement();
+            if (el) {
+                this.resizeObserver.observe(el.nativeElement);
+            }
         }
     }
     ngOnDestroy() {
         this.isDestroyed = true;
-        this.resizeObserver?.unobserve(this.innerElement?.nativeElement);
+        const innerEl = this.innerElement();
+        if (innerEl) {
+            this.resizeObserver?.unobserve(innerEl.nativeElement);
+        }
         this.resizeObserver?.disconnect();
         this.clearAutoAdvance();
     }
@@ -258,90 +260,46 @@ class BsCarouselComponent {
     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: "swipeContainerSignal", first: true, predicate: ["container"], descendants: true, isSignal: true }, { 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]=\"slideHeight()\">\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]=\"slideHeight()\">\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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BsCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.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": "animationsDisabled" } }, queries: [{ propertyName: "images", predicate: i0.forwardRef(() => BsCarouselImageDirective), isSignal: true }], viewQueries: [{ propertyName: "innerElement", first: true, predicate: ["innerElement"], descendants: true, isSignal: true }, { propertyName: "swipeContainer", first: true, predicate: ["container"], descendants: true, isSignal: 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]=\"slideHeight()\">\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]=\"slideHeight()\">\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: "21.0.6", ngImport: i0, type: BsCarouselComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BsCarouselComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-carousel', standalone: true, imports: [
+            args: [{ selector: 'bs-carousel', 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]=\"slideHeight()\">\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]=\"slideHeight()\">\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"] }], swipeContainerSignal: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], innerElement: [{
-                type: ViewChild,
-                args: ['innerElement']
-            }], swipeContainer: [{
-                type: ViewChild,
-                args: ['container']
-            }], imagesQuery: [{
-                type: ContentChildren,
-                args: [forwardRef(() => BsCarouselImageDirective)]
-            }], animationsDisabled: [{
-                type: HostBinding,
-                args: ['@.disabled']
-            }], onKeyPress: [{
-                type: HostListener,
-                args: ['document:keydown.ArrowLeft', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['document:keydown.ArrowRight', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['document:keydown.ArrowUp', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['document:keydown.ArrowDown', ['$event']]
-            }] } });
+                    ], animations: [FadeInOutAnimation], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[@.disabled]': 'animationsDisabled',
+                        '(document:keydown.ArrowLeft)': 'onKeyPress($event)',
+                        '(document:keydown.ArrowRight)': 'onKeyPress($event)',
+                        '(document:keydown.ArrowUp)': 'onKeyPress($event)',
+                        '(document:keydown.ArrowDown)': 'onKeyPress($event)',
+                    }, 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]=\"slideHeight()\">\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]=\"slideHeight()\">\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: { images: [{ type: i0.ContentChildren, args: [forwardRef(() => BsCarouselImageDirective), { isSignal: true }] }], 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: i0.ViewChild, args: ['innerElement', { isSignal: true }] }], swipeContainer: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }] } });
 class BsCarouselImgDirective {
     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: "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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BsCarouselImgDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: BsCarouselImgDirective, isStandalone: true, selector: "img", host: { properties: { "attr.fetch-priority": "fetchPriority" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsCarouselImgDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BsCarouselImgDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'img',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [], propDecorators: { fetchPriority: [{
-                type: HostBinding,
-                args: ['attr.fetch-priority']
-            }] } });
-class BsCarouselModule {
-    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], exports: [BsCarouselComponent,
-            BsCarouselImageDirective,
-            BsCarouselImgDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsCarouselModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsCarouselModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        BsCarouselComponent,
-                        BsCarouselImageDirective,
-                        BsCarouselImgDirective,
-                    ],
-                    exports: [
-                        BsCarouselComponent,
-                        BsCarouselImageDirective,
-                        BsCarouselImgDirective,
-                    ]
+                    host: {
+                        '[attr.fetch-priority]': 'fetchPriority',
+                    },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 /**
  * Generated bundle index. Do not edit.
  */
-export { BsCarouselComponent, BsCarouselImageDirective, BsCarouselImgDirective, BsCarouselModule };
+export { BsCarouselComponent, BsCarouselImageDirective, BsCarouselImgDirective };
 //# sourceMappingURL=mintplayer-ng-bootstrap-carousel.mjs.map