@mintplayer/ng-bootstrap 20.3.0 → 20.5.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 (6) hide show
  1. package/dock/index.d.ts +16 -12
  2. package/fesm2022/mintplayer-ng-bootstrap-carousel.mjs +2 -2
  3. package/fesm2022/mintplayer-ng-bootstrap-carousel.mjs.map +1 -1
  4. package/fesm2022/mintplayer-ng-bootstrap-dock.mjs +447 -180
  5. package/fesm2022/mintplayer-ng-bootstrap-dock.mjs.map +1 -1
  6. package/package.json +2 -2
package/dock/index.d.ts CHANGED
@@ -18,10 +18,6 @@ interface DockStackNode {
18
18
  * Unique pane names that should appear as tabs.
19
19
  */
20
20
  panes: string[];
21
- /**
22
- * Optional caption overrides for each pane.
23
- */
24
- titles?: Record<string, string>;
25
21
  /**
26
22
  * Optional pane name that should be active when the layout is rendered.
27
23
  */
@@ -54,22 +50,22 @@ interface DockFloatingStackLayout {
54
50
  * Pane that should surface in the floating window header.
55
51
  */
56
52
  activePane?: string;
57
- /**
58
- * @deprecated Legacy support for snapshots created before floating windows supported nested layouts.
59
- */
60
- panes?: string[];
61
- /**
62
- * @deprecated Legacy support for snapshots created before floating windows supported nested layouts.
63
- */
64
- titles?: Record<string, string>;
65
53
  }
66
54
  interface DockLayout {
67
55
  root: DockLayoutNode | null;
68
56
  floating?: DockFloatingStackLayout[];
57
+ /**
58
+ * Optional caption overrides per pane name, scoped to the entire manager.
59
+ */
60
+ titles?: Record<string, string>;
69
61
  }
70
62
  interface DockLayoutSnapshot {
71
63
  root: DockLayoutNode | null;
72
64
  floating: DockFloatingStackLayout[];
65
+ /**
66
+ * Optional caption overrides per pane name, scoped to the entire manager.
67
+ */
68
+ titles?: Record<string, string>;
73
69
  }
74
70
 
75
71
  declare class BsDockPaneComponent implements AfterContentInit {
@@ -98,6 +94,7 @@ declare class MintDockManagerElement extends HTMLElement {
98
94
  private dropJoystickTarget;
99
95
  private rootLayout;
100
96
  private floatingLayouts;
97
+ private titles;
101
98
  private pendingTabDragMetrics;
102
99
  private resizeState;
103
100
  private dragState;
@@ -158,6 +155,9 @@ declare class MintDockManagerElement extends HTMLElement {
158
155
  private onDragMouseMove;
159
156
  private onDragTouchMove;
160
157
  private onDragMouseUp;
158
+ private convertPendingTabDragToFloating;
159
+ private computeHeaderInsertIndex;
160
+ private reorderPaneInLocationAtIndex;
161
161
  private onDragTouchEnd;
162
162
  private clearPendingDragEndTimeout;
163
163
  private scheduleDeferredDragEnd;
@@ -170,6 +170,8 @@ declare class MintDockManagerElement extends HTMLElement {
170
170
  private findParentSplit;
171
171
  private computeDropZone;
172
172
  private extractDropZoneFromEvent;
173
+ private handleDragPointerUpCommon;
174
+ private findDropZoneInTargets;
173
175
  private findDropZoneByPoint;
174
176
  private updateDropJoystickActiveZone;
175
177
  private isDropZone;
@@ -177,6 +179,7 @@ declare class MintDockManagerElement extends HTMLElement {
177
179
  private hideDropIndicator;
178
180
  private findStackAtPoint;
179
181
  private findStackElement;
182
+ private findStackInTargets;
180
183
  private activatePane;
181
184
  private getNodeAtPath;
182
185
  private resolveSplitNode;
@@ -188,6 +191,7 @@ declare class MintDockManagerElement extends HTMLElement {
188
191
  private findStackContainingPane;
189
192
  private findFirstPaneName;
190
193
  private collectFloatingPaneMetadata;
194
+ private collectPaneNames;
191
195
  private normalizeFloatingLayout;
192
196
  private formatPath;
193
197
  private clonePath;
package/fesm2022/mintplayer-ng-bootstrap-carousel.mjs CHANGED
@@ -163,11 +163,11 @@ class BsCarouselComponent {
163
163
  this.resizeObserver?.disconnect();
164
164
  }
165
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 }); }
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] }); }
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]=\"swipeContainer?.currentSlideHeight$ | async\">\n @if (indicators) {\n <div class=\"carousel-indicators\" [class.carousel-indicators-vertical]=\"orientation === 'vertical'\"\n [style.height.px]=\"orientation === 'vertical' ? (swipeContainer?.maxSlideHeight$ | async) : null\">\n @for (image of (images$ | async); track image.id; let i = $index) {\n <button type=\"button\" (click)=\"swipeContainer?.goto(i)\"\n [class.active]=\"(swipeContainer?.imageIndex$ | async) === i\" data-bs-target\n [attr.aria-current]=\"(swipeContainer?.imageIndex$ | async) === i ? true : null\"\n [attr.aria-label]=\"'Slide ' + i\"></button>\n }\n </div>\n }\n <div class=\"carousel-inner overflow-hidden pe-none\" [class.text-nowrap]=\"orientation === 'horizontal'\"\n [class.carousel-inner-vertical]=\"orientation === 'vertical'\" #innerElement\n [style.height.px]=\"swipeContainer?.currentSlideHeight$ | async\">\n <div bsSwipeContainer #container=\"bsSwipeContainer\" [minimumOffset]=\"50\" [(imageIndex)]=\"currentImageIndex\"\n [orientation]=\"orientation\">\n <div class=\"carousel-item\" bsSwipe [offside]=\"true\">\n <ng-container *ngTemplateOutlet=\"lastImageTemplate$ | async\"></ng-container>\n </div>\n @for (image of (images$ | async); track image.id) {\n <div class=\"carousel-item\" [class.active]=\"true\" bsSwipe>\n <ng-container *ngTemplateOutlet=\"image.itemTemplate\"></ng-container>\n </div>\n }\n <div class=\"carousel-item\" bsSwipe [offside]=\"true\">\n <ng-container *ngTemplateOutlet=\"firstImageTemplate$ | async\"></ng-container>\n </div>\n </div>\n </div>\n <button class=\"carousel-control-prev\" type=\"button\" (click)=\"previousImage()\"\n [class.carousel-control-vertical]=\"orientation === 'vertical'\">\n <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n <span class=\"visually-hidden\">Previous</span>\n </button>\n <button class=\"carousel-control-next\" type=\"button\" (click)=\"nextImage()\"\n [class.carousel-control-vertical]=\"orientation === 'vertical'\">\n <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n <span class=\"visually-hidden\">Next</span>\n </button>\n </div>\n }\n @case ('fade') {\n <div class=\"carousel fade mx-auto\" [class.carousel-vertical]=\"orientation === 'vertical'\">\n @if (indicators) {\n <div class=\"carousel-indicators\" [class.carousel-indicators-vertical]=\"orientation === 'vertical'\"\n [style.height.px]=\"orientation === 'vertical' ? (swipeContainer?.currentSlideHeight$ | async) : null\">\n @for (image of (images$ | async); track image.id; let i = $index) {\n <button type=\"button\" (click)=\"currentImageIndex = i\"\n [class.active]=\"currentImageIndex === i\" data-bs-target\n [attr.aria-current]=\"currentImageIndex === i ? true : null\"\n [attr.aria-label]=\"'Slide ' + i\"></button>\n }\n </div>\n }\n <div class=\"carousel-inner\" [class.carousel-inner-vertical]=\"orientation === 'vertical'\">\n @for (image of (images$ | async); track image.id; let i = $index) {\n @if (currentImageIndex === i) {\n <div class=\"carousel-item\" [class.active]=\"true\" @fadeInOut>\n <ng-container [ngTemplateOutlet]=\"image.itemTemplate\"></ng-container>\n </div>\n }\n }\n </div>\n <button class=\"carousel-control-prev\" type=\"button\" (click)=\"previousImage()\"\n [class.carousel-control-vertical]=\"orientation === 'vertical'\">\n <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n <span class=\"visually-hidden\">Previous</span>\n </button>\n <button class=\"carousel-control-next\" type=\"button\" (click)=\"nextImage()\"\n [class.carousel-control-vertical]=\"orientation === 'vertical'\">\n <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n <span class=\"visually-hidden\">Next</span>\n </button>\n </div>\n }\n }\n}", styles: [":host ::ng-deep .carousel{position:relative}:host ::ng-deep .carousel.pointer-event{touch-action:pan-y}:host ::ng-deep .carousel-inner{position:relative;width:100%;overflow:hidden}:host ::ng-deep .carousel-inner:after{display:block;clear:both;content:\"\"}:host ::ng-deep .carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;backface-visibility:hidden;transition:transform .6s ease-in-out}@media (prefers-reduced-motion: reduce){:host ::ng-deep .carousel-item{transition:none}}:host ::ng-deep .carousel-item.active,:host ::ng-deep .carousel-item-next,:host ::ng-deep .carousel-item-prev{display:block}:host ::ng-deep .carousel-item-next:not(.carousel-item-start),:host ::ng-deep .active.carousel-item-end{transform:translate(100%)}:host ::ng-deep .carousel-item-prev:not(.carousel-item-end),:host ::ng-deep .active.carousel-item-start{transform:translate(-100%)}:host ::ng-deep .carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}:host ::ng-deep .carousel-fade .carousel-item.active,:host ::ng-deep .carousel-fade .carousel-item-next.carousel-item-start,:host ::ng-deep .carousel-fade .carousel-item-prev.carousel-item-end{z-index:1;opacity:1}:host ::ng-deep .carousel-fade .active.carousel-item-start,:host ::ng-deep .carousel-fade .active.carousel-item-end{z-index:0;opacity:0;transition:opacity 0s .6s}@media (prefers-reduced-motion: reduce){:host ::ng-deep .carousel-fade .active.carousel-item-start,:host ::ng-deep .carousel-fade .active.carousel-item-end{transition:none}}:host ::ng-deep .carousel-control-prev,:host ::ng-deep .carousel-control-next{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff;text-align:center;background:none;filter:var(--bs-carousel-control-icon-filter);border:0;opacity:.5;transition:opacity .15s ease}@media (prefers-reduced-motion: reduce){:host ::ng-deep .carousel-control-prev,:host ::ng-deep .carousel-control-next{transition:none}}:host ::ng-deep .carousel-control-prev:hover,:host ::ng-deep .carousel-control-prev:focus,:host ::ng-deep .carousel-control-next:hover,:host ::ng-deep .carousel-control-next:focus{color:#fff;text-decoration:none;outline:0;opacity:.9}:host ::ng-deep .carousel-control-prev{left:0}:host ::ng-deep .carousel-control-next{right:0}:host ::ng-deep .carousel-control-prev-icon,:host ::ng-deep .carousel-control-next-icon{display:inline-block;width:2rem;height:2rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}:host ::ng-deep .carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e\")}:host ::ng-deep .carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e\")}:host ::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:1rem;margin-left:15%}:host ::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:var(--bs-carousel-indicator-active-bg);background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media (prefers-reduced-motion: reduce){:host ::ng-deep .carousel-indicators [data-bs-target]{transition:none}}:host ::ng-deep .carousel-indicators .active{opacity:1}:host ::ng-deep .carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:var(--bs-carousel-caption-color);text-align:center}:host ::ng-deep .carousel-dark{--bs-carousel-indicator-active-bg: #000;--bs-carousel-caption-color: #000;--bs-carousel-control-icon-filter: invert(1) grayscale(100)}:host ::ng-deep :root,:host ::ng-deep [data-bs-theme=light]{--bs-carousel-indicator-active-bg: #fff;--bs-carousel-caption-color: #fff;--bs-carousel-control-icon-filter: }:host ::ng-deep [data-bs-theme=dark]{--bs-carousel-indicator-active-bg: #000;--bs-carousel-caption-color: #000;--bs-carousel-control-icon-filter: invert(1) grayscale(100)}:host ::ng-deep .carousel{min-height:100px;max-width:500px}:host ::ng-deep .carousel.noscript .carousel-inner{grid-template-rows:100%;grid-template-columns:100%}:host ::ng-deep .carousel.noscript .carousel-control-prev,:host ::ng-deep .carousel.noscript .carousel-control-next{display:none;z-index:10}:host ::ng-deep .carousel.noscript .carousel-item{display:block;opacity:0;transition:opacity .4s ease-in-out;grid-row:1;grid-column:1}:host ::ng-deep .carousel.noscript .car-radio.noscript:checked+.carousel-item{opacity:1;z-index:5}:host ::ng-deep .carousel.noscript .car-radio.noscript:checked+.carousel-item+label.carousel-control-prev,:host ::ng-deep .carousel.noscript .car-radio.noscript:checked+.carousel-item+label.carousel-control-prev+.carousel-control-next{display:flex}:host ::ng-deep .carousel.noscript .carousel-indicators{z-index:10}:host ::ng-deep .carousel .carousel-item>*{width:100%!important}:host ::ng-deep .carousel-indicators [data-bs-target]{background-color:var(--bs-carousel-indicator-active-bg, #fff)}:host ::ng-deep .carousel.carousel-vertical{display:flex;flex-direction:row;align-items:stretch;gap:1rem;flex-wrap:nowrap}:host ::ng-deep .carousel.carousel-vertical .carousel-inner{order:1;flex:1 1 auto}:host ::ng-deep .carousel.carousel-vertical .carousel-indicators{order:0}:host ::ng-deep .carousel.carousel-vertical .carousel-control-prev,:host ::ng-deep .carousel.carousel-vertical .carousel-control-next{width:100%;left:0;right:0}:host ::ng-deep .carousel.carousel-vertical .carousel-control-prev.carousel-control-vertical,:host ::ng-deep .carousel.carousel-vertical .carousel-control-next.carousel-control-vertical{justify-content:center}:host ::ng-deep .carousel-inner-vertical{display:flex;flex-direction:column;height:100%}:host ::ng-deep .carousel-inner-vertical .carousel-item{flex:1 1 auto;display:block}:host ::ng-deep .carousel-indicators-vertical{position:static;flex-direction:column;justify-content:center;align-items:stretch;margin:0;gap:.5rem;height:100%}:host ::ng-deep .carousel-indicators-vertical [data-bs-target]{width:auto;height:.75rem}:host ::ng-deep .carousel-control-vertical{top:0;bottom:auto;height:2.5rem;align-items:center}:host ::ng-deep .carousel-control-vertical.carousel-control-next{top:auto;bottom:0}:host ::ng-deep .carousel-control-vertical.carousel-control-prev .carousel-control-prev-icon{transform:rotate(90deg)}:host ::ng-deep .carousel-control-vertical.carousel-control-next .carousel-control-next-icon{transform:rotate(90deg)}.wrapper{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.BsSwipeDirective, selector: "[bsSwipe]", inputs: ["offside"] }, { kind: "directive", type: i2.BsSwipeContainerDirective, selector: "[bsSwipeContainer]", inputs: ["minimumOffset", "orientation", "imageIndex"], outputs: ["imageIndexChange"], exportAs: ["bsSwipeContainer"] }, { kind: "directive", type: i3.BsNoNoscriptDirective, selector: "[bsNoNoscript]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [FadeInOutAnimation] }); }
167
167
  }
168
168
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsCarouselComponent, decorators: [{
169
169
  type: Component,
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"] }]
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]=\"swipeContainer?.currentSlideHeight$ | async\">\n @if (indicators) {\n <div class=\"carousel-indicators\" [class.carousel-indicators-vertical]=\"orientation === 'vertical'\"\n [style.height.px]=\"orientation === 'vertical' ? (swipeContainer?.maxSlideHeight$ | async) : null\">\n @for (image of (images$ | async); track image.id; let i = $index) {\n <button type=\"button\" (click)=\"swipeContainer?.goto(i)\"\n [class.active]=\"(swipeContainer?.imageIndex$ | async) === i\" data-bs-target\n [attr.aria-current]=\"(swipeContainer?.imageIndex$ | async) === i ? true : null\"\n [attr.aria-label]=\"'Slide ' + i\"></button>\n }\n </div>\n }\n <div class=\"carousel-inner overflow-hidden pe-none\" [class.text-nowrap]=\"orientation === 'horizontal'\"\n [class.carousel-inner-vertical]=\"orientation === 'vertical'\" #innerElement\n [style.height.px]=\"swipeContainer?.currentSlideHeight$ | async\">\n <div bsSwipeContainer #container=\"bsSwipeContainer\" [minimumOffset]=\"50\" [(imageIndex)]=\"currentImageIndex\"\n [orientation]=\"orientation\">\n <div class=\"carousel-item\" bsSwipe [offside]=\"true\">\n <ng-container *ngTemplateOutlet=\"lastImageTemplate$ | async\"></ng-container>\n </div>\n @for (image of (images$ | async); track image.id) {\n <div class=\"carousel-item\" [class.active]=\"true\" bsSwipe>\n <ng-container *ngTemplateOutlet=\"image.itemTemplate\"></ng-container>\n </div>\n }\n <div class=\"carousel-item\" bsSwipe [offside]=\"true\">\n <ng-container *ngTemplateOutlet=\"firstImageTemplate$ | async\"></ng-container>\n </div>\n </div>\n </div>\n <button class=\"carousel-control-prev\" type=\"button\" (click)=\"previousImage()\"\n [class.carousel-control-vertical]=\"orientation === 'vertical'\">\n <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n <span class=\"visually-hidden\">Previous</span>\n </button>\n <button class=\"carousel-control-next\" type=\"button\" (click)=\"nextImage()\"\n [class.carousel-control-vertical]=\"orientation === 'vertical'\">\n <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n <span class=\"visually-hidden\">Next</span>\n </button>\n </div>\n }\n @case ('fade') {\n <div class=\"carousel fade mx-auto\" [class.carousel-vertical]=\"orientation === 'vertical'\">\n @if (indicators) {\n <div class=\"carousel-indicators\" [class.carousel-indicators-vertical]=\"orientation === 'vertical'\"\n [style.height.px]=\"orientation === 'vertical' ? (swipeContainer?.currentSlideHeight$ | async) : null\">\n @for (image of (images$ | async); track image.id; let i = $index) {\n <button type=\"button\" (click)=\"currentImageIndex = i\"\n [class.active]=\"currentImageIndex === i\" data-bs-target\n [attr.aria-current]=\"currentImageIndex === i ? true : null\"\n [attr.aria-label]=\"'Slide ' + i\"></button>\n }\n </div>\n }\n <div class=\"carousel-inner\" [class.carousel-inner-vertical]=\"orientation === 'vertical'\">\n @for (image of (images$ | async); track image.id; let i = $index) {\n @if (currentImageIndex === i) {\n <div class=\"carousel-item\" [class.active]=\"true\" @fadeInOut>\n <ng-container [ngTemplateOutlet]=\"image.itemTemplate\"></ng-container>\n </div>\n }\n }\n </div>\n <button class=\"carousel-control-prev\" type=\"button\" (click)=\"previousImage()\"\n [class.carousel-control-vertical]=\"orientation === 'vertical'\">\n <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n <span class=\"visually-hidden\">Previous</span>\n </button>\n <button class=\"carousel-control-next\" type=\"button\" (click)=\"nextImage()\"\n [class.carousel-control-vertical]=\"orientation === 'vertical'\">\n <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n <span class=\"visually-hidden\">Next</span>\n </button>\n </div>\n }\n }\n}", styles: [":host ::ng-deep .carousel{position:relative}:host ::ng-deep .carousel.pointer-event{touch-action:pan-y}:host ::ng-deep .carousel-inner{position:relative;width:100%;overflow:hidden}:host ::ng-deep .carousel-inner:after{display:block;clear:both;content:\"\"}:host ::ng-deep .carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;backface-visibility:hidden;transition:transform .6s ease-in-out}@media (prefers-reduced-motion: reduce){:host ::ng-deep .carousel-item{transition:none}}:host ::ng-deep .carousel-item.active,:host ::ng-deep .carousel-item-next,:host ::ng-deep .carousel-item-prev{display:block}:host ::ng-deep .carousel-item-next:not(.carousel-item-start),:host ::ng-deep .active.carousel-item-end{transform:translate(100%)}:host ::ng-deep .carousel-item-prev:not(.carousel-item-end),:host ::ng-deep .active.carousel-item-start{transform:translate(-100%)}:host ::ng-deep .carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}:host ::ng-deep .carousel-fade .carousel-item.active,:host ::ng-deep .carousel-fade .carousel-item-next.carousel-item-start,:host ::ng-deep .carousel-fade .carousel-item-prev.carousel-item-end{z-index:1;opacity:1}:host ::ng-deep .carousel-fade .active.carousel-item-start,:host ::ng-deep .carousel-fade .active.carousel-item-end{z-index:0;opacity:0;transition:opacity 0s .6s}@media (prefers-reduced-motion: reduce){:host ::ng-deep .carousel-fade .active.carousel-item-start,:host ::ng-deep .carousel-fade .active.carousel-item-end{transition:none}}:host ::ng-deep .carousel-control-prev,:host ::ng-deep .carousel-control-next{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff;text-align:center;background:none;filter:var(--bs-carousel-control-icon-filter);border:0;opacity:.5;transition:opacity .15s ease}@media (prefers-reduced-motion: reduce){:host ::ng-deep .carousel-control-prev,:host ::ng-deep .carousel-control-next{transition:none}}:host ::ng-deep .carousel-control-prev:hover,:host ::ng-deep .carousel-control-prev:focus,:host ::ng-deep .carousel-control-next:hover,:host ::ng-deep .carousel-control-next:focus{color:#fff;text-decoration:none;outline:0;opacity:.9}:host ::ng-deep .carousel-control-prev{left:0}:host ::ng-deep .carousel-control-next{right:0}:host ::ng-deep .carousel-control-prev-icon,:host ::ng-deep .carousel-control-next-icon{display:inline-block;width:2rem;height:2rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}:host ::ng-deep .carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e\")}:host ::ng-deep .carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e\")}:host ::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:1rem;margin-left:15%}:host ::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:var(--bs-carousel-indicator-active-bg);background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media (prefers-reduced-motion: reduce){:host ::ng-deep .carousel-indicators [data-bs-target]{transition:none}}:host ::ng-deep .carousel-indicators .active{opacity:1}:host ::ng-deep .carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:var(--bs-carousel-caption-color);text-align:center}:host ::ng-deep .carousel-dark{--bs-carousel-indicator-active-bg: #000;--bs-carousel-caption-color: #000;--bs-carousel-control-icon-filter: invert(1) grayscale(100)}:host ::ng-deep :root,:host ::ng-deep [data-bs-theme=light]{--bs-carousel-indicator-active-bg: #fff;--bs-carousel-caption-color: #fff;--bs-carousel-control-icon-filter: }:host ::ng-deep [data-bs-theme=dark]{--bs-carousel-indicator-active-bg: #000;--bs-carousel-caption-color: #000;--bs-carousel-control-icon-filter: invert(1) grayscale(100)}:host ::ng-deep .carousel{min-height:100px;max-width:500px}:host ::ng-deep .carousel.noscript .carousel-inner{grid-template-rows:100%;grid-template-columns:100%}:host ::ng-deep .carousel.noscript .carousel-control-prev,:host ::ng-deep .carousel.noscript .carousel-control-next{display:none;z-index:10}:host ::ng-deep .carousel.noscript .carousel-item{display:block;opacity:0;transition:opacity .4s ease-in-out;grid-row:1;grid-column:1}:host ::ng-deep .carousel.noscript .car-radio.noscript:checked+.carousel-item{opacity:1;z-index:5}:host ::ng-deep .carousel.noscript .car-radio.noscript:checked+.carousel-item+label.carousel-control-prev,:host ::ng-deep .carousel.noscript .car-radio.noscript:checked+.carousel-item+label.carousel-control-prev+.carousel-control-next{display:flex}:host ::ng-deep .carousel.noscript .carousel-indicators{z-index:10}:host ::ng-deep .carousel .carousel-item>*{width:100%!important}:host ::ng-deep .carousel-indicators [data-bs-target]{background-color:var(--bs-carousel-indicator-active-bg, #fff)}:host ::ng-deep .carousel.carousel-vertical{display:flex;flex-direction:row;align-items:stretch;gap:1rem;flex-wrap:nowrap}:host ::ng-deep .carousel.carousel-vertical .carousel-inner{order:1;flex:1 1 auto}:host ::ng-deep .carousel.carousel-vertical .carousel-indicators{order:0}:host ::ng-deep .carousel.carousel-vertical .carousel-control-prev,:host ::ng-deep .carousel.carousel-vertical .carousel-control-next{width:100%;left:0;right:0}:host ::ng-deep .carousel.carousel-vertical .carousel-control-prev.carousel-control-vertical,:host ::ng-deep .carousel.carousel-vertical .carousel-control-next.carousel-control-vertical{justify-content:center}:host ::ng-deep .carousel-inner-vertical{display:flex;flex-direction:column;height:100%}:host ::ng-deep .carousel-inner-vertical .carousel-item{flex:1 1 auto;display:block}:host ::ng-deep .carousel-indicators-vertical{position:static;flex-direction:column;justify-content:center;align-items:stretch;margin:0;gap:.5rem;height:100%}:host ::ng-deep .carousel-indicators-vertical [data-bs-target]{width:auto;height:.75rem}:host ::ng-deep .carousel-control-vertical{top:0;bottom:auto;height:2.5rem;align-items:center}:host ::ng-deep .carousel-control-vertical.carousel-control-next{top:auto;bottom:0}:host ::ng-deep .carousel-control-vertical.carousel-control-prev .carousel-control-prev-icon{transform:rotate(90deg)}:host ::ng-deep .carousel-control-vertical.carousel-control-next .carousel-control-next-icon{transform:rotate(90deg)}.wrapper{overflow:hidden}\n"] }]
171
171
  }], ctorParameters: () => [{ type: undefined, decorators: [{
172
172
  type: Inject,
173
173
  args: [PLATFORM_ID]