@mintplayer/ng-bootstrap 20.1.0 → 20.3.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 (9) hide show
  1. package/carousel/index.d.ts +4 -1
  2. package/dock/index.d.ts +236 -166
  3. package/fesm2022/mintplayer-ng-bootstrap-carousel.mjs +42 -5
  4. package/fesm2022/mintplayer-ng-bootstrap-carousel.mjs.map +1 -1
  5. package/fesm2022/mintplayer-ng-bootstrap-dock.mjs +2550 -504
  6. package/fesm2022/mintplayer-ng-bootstrap-dock.mjs.map +1 -1
  7. package/fesm2022/mintplayer-ng-bootstrap-modal.mjs +2 -0
  8. package/fesm2022/mintplayer-ng-bootstrap-modal.mjs.map +1 -1
  9. package/package.json +5 -5
package/fesm2022/mintplayer-ng-bootstrap-carousel.mjs CHANGED
@@ -37,6 +37,7 @@ class BsCarouselComponent {
37
37
  this.images$ = new BehaviorSubject(null);
38
38
  this.indicators = false;
39
39
  this.keyboardEvents = true;
40
+ this._orientation = 'horizontal';
40
41
  //#region Animation
41
42
  this.animationsDisabled = false;
42
43
  this._animation = 'slide';
@@ -69,6 +70,13 @@ class BsCarouselComponent {
69
70
  });
70
71
  }
71
72
  }
73
+ set orientation(value) {
74
+ this._orientation = value ?? 'horizontal';
75
+ this.cdRef.detectChanges();
76
+ }
77
+ get orientation() {
78
+ return this._orientation;
79
+ }
72
80
  set images(value) {
73
81
  this.images$.next(value);
74
82
  value.forEach((item, index) => item.isFirst = (index === 0));
@@ -85,15 +93,36 @@ class BsCarouselComponent {
85
93
  //#endregion
86
94
  onKeyPress(ev) {
87
95
  if (this.keyboardEvents) {
96
+ let handled = false;
88
97
  switch (ev.key) {
89
98
  case 'ArrowLeft':
90
- this.previousImage();
99
+ if (this.orientation === 'horizontal') {
100
+ this.previousImage();
101
+ handled = true;
102
+ }
91
103
  break;
92
104
  case 'ArrowRight':
93
- this.nextImage();
105
+ if (this.orientation === 'horizontal') {
106
+ this.nextImage();
107
+ handled = true;
108
+ }
109
+ break;
110
+ case 'ArrowUp':
111
+ if (this.orientation === 'vertical') {
112
+ this.previousImage();
113
+ handled = true;
114
+ }
94
115
  break;
116
+ case 'ArrowDown':
117
+ if (this.orientation === 'vertical') {
118
+ this.nextImage();
119
+ handled = true;
120
+ }
121
+ break;
122
+ }
123
+ if (handled) {
124
+ ev.preventDefault();
95
125
  }
96
- ev.preventDefault();
97
126
  }
98
127
  }
99
128
  previousImage() {
@@ -134,11 +163,11 @@ class BsCarouselComponent {
134
163
  this.resizeObserver?.disconnect();
135
164
  }
136
165
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsCarouselComponent, deps: [{ token: PLATFORM_ID }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
137
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: BsCarouselComponent, isStandalone: false, selector: "bs-carousel", inputs: { indicators: "indicators", keyboardEvents: "keyboardEvents", animation: "animation" }, host: { listeners: { "document:keydown.ArrowLeft": "onKeyPress($event)", "document:keydown.ArrowRight": "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\">\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 <div class=\"w-100 position-relative\">\n <ng-container [ngTemplateOutlet]=\"image.itemTemplate\"></ng-container>\n @if (indicators) {\n <div class=\"carousel-indicators\">\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 <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 <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\" [style.height.px]=\"container.currentSlideHeight$ | async\">\n @if (indicators) {\n <div class=\"carousel-indicators\">\n @for (image of (images$ | async); track image.id; let i = $index) {\n <button type=\"button\" (click)=\"container.goto(i)\"\n [class.active]=\"(container.imageIndex$ | async) === i\" data-bs-target\n [attr.aria-current]=\"(container.imageIndex$ | async) === i ? true : null\"\n [attr.aria-label]=\"'Slide ' + i\"></button>\n }\n </div>\n }\n <div class=\"carousel-inner overflow-hidden text-nowrap pe-none\" #innerElement>\n <div bsSwipeContainer #container=\"bsSwipeContainer\" [minimumOffset]=\"50\" [(imageIndex)]=\"currentImageIndex\">\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 <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 <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\">\n @if (indicators) {\n <div class=\"carousel-indicators\">\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\">\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 <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 <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}.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", "imageIndex"], outputs: ["imageIndexChange"], exportAs: ["bsSwipeContainer"] }, { kind: "directive", type: i3.BsNoNoscriptDirective, selector: "[bsNoNoscript]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [FadeInOutAnimation] }); }
166
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", 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]=\"orientation === 'vertical' ? (swipeContainer?.currentSlideHeight$ | async) : null\">\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)=\"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 <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}:host ::ng-deep .carousel.carousel-vertical .carousel-inner{flex:1 1 auto}: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-icon,:host ::ng-deep .carousel-control-vertical .carousel-control-next-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] }); }
138
167
  }
139
168
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsCarouselComponent, decorators: [{
140
169
  type: Component,
141
- args: [{ selector: 'bs-carousel', standalone: false, animations: [FadeInOutAnimation], template: "@if (isServerSide) {\n <div class=\"carousel mx-auto noscript\">\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 <div class=\"w-100 position-relative\">\n <ng-container [ngTemplateOutlet]=\"image.itemTemplate\"></ng-container>\n @if (indicators) {\n <div class=\"carousel-indicators\">\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 <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 <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\" [style.height.px]=\"container.currentSlideHeight$ | async\">\n @if (indicators) {\n <div class=\"carousel-indicators\">\n @for (image of (images$ | async); track image.id; let i = $index) {\n <button type=\"button\" (click)=\"container.goto(i)\"\n [class.active]=\"(container.imageIndex$ | async) === i\" data-bs-target\n [attr.aria-current]=\"(container.imageIndex$ | async) === i ? true : null\"\n [attr.aria-label]=\"'Slide ' + i\"></button>\n }\n </div>\n }\n <div class=\"carousel-inner overflow-hidden text-nowrap pe-none\" #innerElement>\n <div bsSwipeContainer #container=\"bsSwipeContainer\" [minimumOffset]=\"50\" [(imageIndex)]=\"currentImageIndex\">\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 <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 <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\">\n @if (indicators) {\n <div class=\"carousel-indicators\">\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\">\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 <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 <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}.wrapper{overflow:hidden}\n"] }]
170
+ 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]=\"orientation === 'vertical' ? (swipeContainer?.currentSlideHeight$ | async) : null\">\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)=\"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 <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}:host ::ng-deep .carousel.carousel-vertical .carousel-inner{flex:1 1 auto}: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-icon,:host ::ng-deep .carousel-control-vertical .carousel-control-next-icon{transform:rotate(-90deg)}:host ::ng-deep .carousel-control-vertical.carousel-control-next .carousel-control-next-icon{transform:rotate(90deg)}.wrapper{overflow:hidden}\n"] }]
142
171
  }], ctorParameters: () => [{ type: undefined, decorators: [{
143
172
  type: Inject,
144
173
  args: [PLATFORM_ID]
@@ -146,6 +175,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
146
175
  type: Input
147
176
  }], keyboardEvents: [{
148
177
  type: Input
178
+ }], orientation: [{
179
+ type: Input
149
180
  }], innerElement: [{
150
181
  type: ViewChild,
151
182
  args: ['innerElement']
@@ -166,6 +197,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
166
197
  }, {
167
198
  type: HostListener,
168
199
  args: ['document:keydown.ArrowRight', ['$event']]
200
+ }, {
201
+ type: HostListener,
202
+ args: ['document:keydown.ArrowUp', ['$event']]
203
+ }, {
204
+ type: HostListener,
205
+ args: ['document:keydown.ArrowDown', ['$event']]
169
206
  }] } });
170
207
 
171
208
  class BsCarouselImgDirective {