@mintplayer/ng-bootstrap 20.1.0 → 20.2.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 (8) hide show
  1. package/dock/index.d.ts +236 -166
  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 +2550 -504
  5. package/fesm2022/mintplayer-ng-bootstrap-dock.mjs.map +1 -1
  6. package/fesm2022/mintplayer-ng-bootstrap-modal.mjs +2 -0
  7. package/fesm2022/mintplayer-ng-bootstrap-modal.mjs.map +1 -1
  8. package/package.json +5 -5
package/dock/index.d.ts CHANGED
@@ -1,178 +1,248 @@
1
1
  import * as i0 from '@angular/core';
2
- import { AfterViewInit, ElementRef, OnDestroy, QueryList, DestroyRef } from '@angular/core';
3
- import { BehaviorSubject, Observable } from 'rxjs';
4
- import { Parentified } from '@mintplayer/parentify';
5
- import * as i6 from '@angular/cdk/portal';
6
- import { DomPortal } from '@angular/cdk/portal';
7
- import { Overlay } from '@angular/cdk/overlay';
8
- import * as i5 from '@angular/common';
9
- import * as i7 from '@mintplayer/ng-bootstrap/card';
10
- import * as i8 from '@mintplayer/ng-bootstrap/instance-of';
11
- import * as i9 from '@mintplayer/ng-bootstrap/splitter';
12
- import * as i10 from '@mintplayer/ng-bootstrap/tab-control';
13
- import * as i11 from '@mintplayer/ng-bootstrap/resizable';
14
-
15
- declare class BsDockPanelComponent implements AfterViewInit {
16
- headerElement: ElementRef<HTMLDivElement>;
17
- contentElement: ElementRef<HTMLDivElement>;
18
- headerPortal?: DomPortal;
19
- contentPortal?: DomPortal;
20
- panelId: string;
21
- ngAfterViewInit(): void;
22
- static ɵfac: i0.ɵɵFactoryDeclaration<BsDockPanelComponent, never>;
23
- static ɵcmp: i0.ɵɵComponentDeclaration<BsDockPanelComponent, "bs-dock-panel", never, { "panelId": { "alias": "panelId"; "required": false; }; }, {}, never, ["bs-dock-panel-header", "*"], false, never>;
24
- }
25
-
26
- declare abstract class BsDockPane {
27
- abstract get isEmpty(): boolean;
28
- }
29
-
30
- interface Point {
31
- x: number;
32
- y: number;
33
- }
34
-
35
- interface Size {
2
+ import { AfterContentInit, TemplateRef, AfterViewInit, EventEmitter, QueryList, ElementRef, ChangeDetectorRef } from '@angular/core';
3
+ import * as i3 from '@angular/common';
4
+
5
+ type DockLayoutNode = DockSplitNode | DockStackNode;
6
+ interface DockSplitNode {
7
+ kind: 'split';
8
+ direction: 'horizontal' | 'vertical';
9
+ /**
10
+ * Relative sizes for the split children. Values do not need to sum to 100; they are treated as flex weights.
11
+ */
12
+ sizes?: number[];
13
+ children: DockLayoutNode[];
14
+ }
15
+ interface DockStackNode {
16
+ kind: 'stack';
17
+ /**
18
+ * Unique pane names that should appear as tabs.
19
+ */
20
+ panes: string[];
21
+ /**
22
+ * Optional caption overrides for each pane.
23
+ */
24
+ titles?: Record<string, string>;
25
+ /**
26
+ * Optional pane name that should be active when the layout is rendered.
27
+ */
28
+ activePane?: string;
29
+ }
30
+ interface DockFloatingPaneBounds {
31
+ left: number;
32
+ top: number;
36
33
  width: number;
37
34
  height: number;
38
35
  }
39
-
40
- declare class BsFloatingPane extends BsDockPane {
41
- constructor(data?: Partial<BsFloatingPane>);
42
- pane?: BsDockPane;
43
- size?: Size;
44
- location?: Point;
45
- get isEmpty(): boolean;
46
- }
47
-
48
- interface BsDockLayout {
49
- rootPane: BsDockPane;
50
- floatingPanes: BsFloatingPane[];
51
- }
52
-
53
- declare enum EPaneType {
54
- documentHost = 1,
55
- splitPane = 2,
56
- contentPane = 3,
57
- tabGroupPane = 4
58
- }
59
-
60
- type SplitPaneOrientation = 'horizontal' | 'vertical';
61
-
62
- declare class BsSplitPane extends BsDockPane {
63
- constructor(data?: Partial<BsSplitPane>);
64
- orientation: SplitPaneOrientation;
65
- panes: BsDockPane[];
66
- get isEmpty(): boolean;
67
- }
68
-
69
- declare class BsContentPane extends BsDockPane {
70
- constructor(data?: Partial<BsContentPane>);
71
- dockPanel: BsDockPanelComponent;
72
- isPinned?: boolean;
73
- get isEmpty(): boolean;
74
- }
75
-
76
- declare class BsTabGroupPane extends BsDockPane {
77
- constructor(data?: Partial<BsTabGroupPane>);
78
- panes: BsContentPane[];
79
- get isEmpty(): boolean;
80
- }
81
-
82
- declare class BsDocumentHost extends BsDockPane {
83
- constructor(data?: Partial<BsDocumentHost>);
84
- rootPane?: BsTabGroupPane;
85
- get isEmpty(): boolean;
86
- }
87
-
88
- declare class BsDockPaneRendererComponent {
89
- private overlay;
90
- constructor(overlay: Overlay, element: ElementRef);
91
- portal: DomPortal;
92
- paneTypes: typeof EPaneType;
93
- readonly BsDocumentHostType: typeof BsDocumentHost;
94
- readonly BsTabGroupType: typeof BsTabGroupPane;
95
- readonly BsSplitterType: typeof BsSplitPane;
96
- readonly BsContentPaneType: typeof BsContentPane;
97
- readonly BsFloatingPaneType: typeof BsFloatingPane;
98
- layout$: BehaviorSubject<BsDockPane | null>;
99
- get layout(): BsDockPane | null;
100
- set layout(value: BsDockPane | null);
101
- private overlayRef?;
102
- moveToOverlay(): void;
103
- disposeOverlay(): void;
104
- static ɵfac: i0.ɵɵFactoryDeclaration<BsDockPaneRendererComponent, never>;
105
- static ɵcmp: i0.ɵɵComponentDeclaration<BsDockPaneRendererComponent, "bs-dock-pane-renderer", never, { "layout": { "alias": "layout"; "required": false; }; }, {}, never, never, false, never>;
106
- }
107
-
108
- declare class BsDockComponent implements OnDestroy {
36
+ interface DockFloatingStackLayout {
37
+ /**
38
+ * Optional developer supplied identifier that can be used to recognize a floating pane instance.
39
+ */
40
+ id?: string;
41
+ /**
42
+ * Absolute coordinates (in CSS pixels) describing where the floating pane should appear.
43
+ */
44
+ bounds: DockFloatingPaneBounds;
45
+ /**
46
+ * Optional z-index override for the floating pane body. Higher values appear above lower ones.
47
+ */
48
+ zIndex?: number;
49
+ /**
50
+ * Root layout rendered inside the floating window.
51
+ */
52
+ root: DockLayoutNode | null;
53
+ /**
54
+ * Pane that should surface in the floating window header.
55
+ */
56
+ 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
+ }
66
+ interface DockLayout {
67
+ root: DockLayoutNode | null;
68
+ floating?: DockFloatingStackLayout[];
69
+ }
70
+ interface DockLayoutSnapshot {
71
+ root: DockLayoutNode | null;
72
+ floating: DockFloatingStackLayout[];
73
+ }
74
+
75
+ declare class BsDockPaneComponent implements AfterContentInit {
76
+ name: string;
77
+ title?: string;
78
+ template: TemplateRef<unknown>;
79
+ ngAfterContentInit(): void;
80
+ static ɵfac: i0.ɵɵFactoryDeclaration<BsDockPaneComponent, never>;
81
+ static ɵcmp: i0.ɵɵComponentDeclaration<BsDockPaneComponent, "bs-dock-pane", never, { "name": { "alias": "name"; "required": false; }; "title": { "alias": "title"; "required": false; }; }, {}, never, ["*"], false, never>;
82
+ }
83
+
84
+ declare class MintDockManagerElement extends HTMLElement {
85
+ private static documentRef;
86
+ static configureDocument(documentRef: Document | null | undefined): void;
87
+ static get observedAttributes(): string[];
88
+ private static instanceCounter;
89
+ private readonly documentRef;
90
+ private readonly windowRef;
91
+ private readonly rootEl;
92
+ private readonly dockedEl;
93
+ private readonly floatingLayerEl;
94
+ private readonly dropIndicator;
95
+ private readonly dropJoystick;
96
+ private readonly dropJoystickButtons;
97
+ private readonly instanceId;
98
+ private dropJoystickTarget;
99
+ private rootLayout;
100
+ private floatingLayouts;
101
+ private pendingTabDragMetrics;
102
+ private resizeState;
103
+ private dragState;
104
+ private floatingDragState;
105
+ private floatingResizeState;
106
+ private pointerTrackingActive;
107
+ private dragPointerTrackingActive;
108
+ private lastDragPointerPosition;
109
+ private pendingDragEndTimeout;
109
110
  constructor();
110
- private paneCache?;
111
- panels$: BehaviorSubject<BsDockPanelComponent[]>;
112
- set panels(value: QueryList<BsDockPanelComponent>);
113
- layout$: BehaviorSubject<BsDockLayout>;
114
- get layout(): BsDockLayout;
115
- set layout(value: BsDockLayout);
116
- floating$: BehaviorSubject<BsDockPaneRendererComponent[]>;
117
- set floatingPanes(value: QueryList<BsDockPaneRendererComponent>);
118
- positionAbsolute: boolean;
119
- positionPx: number;
120
- parentifiedLayout$: Observable<Parentified<BsDockLayout>>;
121
- ngOnDestroy(): void;
122
- static ɵfac: i0.ɵɵFactoryDeclaration<BsDockComponent, never>;
123
- static ɵcmp: i0.ɵɵComponentDeclaration<BsDockComponent, "bs-dock", never, { "layout": { "alias": "layout"; "required": false; }; }, {}, ["panels"], ["*"], false, never>;
124
- }
125
-
126
- interface RemoveFromPaneResult {
127
- /** Indicates if the BsDockPane was removed from the host. */
128
- paneRemoved: boolean;
129
- /** Indicates if the host is empty now, and should also be removed. */
130
- hostIsEmpty: boolean;
131
- }
132
-
133
- interface DragOperation {
134
- offsetX: number;
135
- offsetY: number;
136
- floatingPane: BsFloatingPane;
137
- }
138
-
139
- declare class BsDockService {
140
- buildTraces(layout: BsDockLayout): PaneTraceResult[];
141
- private buildTracesPrivate;
142
- private getChildPanes;
143
- static ɵfac: i0.ɵɵFactoryDeclaration<BsDockService, never>;
144
- static ɵprov: i0.ɵɵInjectableDeclaration<BsDockService>;
145
- }
146
- interface PaneTraceResult {
147
- trace: BsDockPane[];
148
- finished: boolean;
149
- }
150
-
151
- declare class BsDockPanelHeaderComponent {
152
- private dockPanel;
153
- private dock;
154
- private dockService;
155
- private element;
156
- private destroy;
157
- constructor(dockPanel: BsDockPanelComponent, dock: BsDockComponent, dockService: BsDockService, element: ElementRef<HTMLElement>, destroy: DestroyRef);
158
- isMouseDown: boolean;
159
- dragOperation?: DragOperation;
160
- isDragging: boolean;
161
- onMouseDown(ev: MouseEvent): void;
162
- onMouseMove(ev: MouseEvent): void;
163
- removeFromPaneBis(host: BsDockPane, pane: BsDockPane): void;
164
- removeFromPane(host: BsDockPane, panel: BsDockPanelComponent): RemoveFromPaneResult;
165
- onMouseUp(ev: Event): void;
166
- dBlock: boolean;
167
- static ɵfac: i0.ɵɵFactoryDeclaration<BsDockPanelHeaderComponent, never>;
168
- static ɵcmp: i0.ɵɵComponentDeclaration<BsDockPanelHeaderComponent, "bs-dock-panel-header", never, {}, {}, never, ["*"], false, never>;
111
+ connectedCallback(): void;
112
+ disconnectedCallback(): void;
113
+ attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
114
+ get layout(): DockLayoutSnapshot;
115
+ set layout(value: DockLayoutSnapshot | DockLayout | DockLayoutNode | null);
116
+ get snapshot(): DockLayoutSnapshot;
117
+ toJSON(): DockLayoutSnapshot;
118
+ private resolveDocument;
119
+ private resolveWindow;
120
+ private parseLayout;
121
+ private ensureSnapshot;
122
+ private render;
123
+ private renderNode;
124
+ private renderFloatingPanes;
125
+ private beginFloatingDrag;
126
+ private beginFloatingResize;
127
+ private handleFloatingDragMove;
128
+ private endFloatingDrag;
129
+ private updateFloatingDragDropTarget;
130
+ private handleFloatingResizeMove;
131
+ private endFloatingResize;
132
+ private getFloatingPaneZIndex;
133
+ private promoteFloatingPane;
134
+ private getFloatingWrapper;
135
+ private startPointerTracking;
136
+ private stopPointerTrackingIfIdle;
137
+ private getFloatingWindowTitle;
138
+ private updateFloatingWindowTitle;
139
+ private renderSplit;
140
+ private renderStack;
141
+ private beginResize;
142
+ private onPointerMove;
143
+ private onPointerUp;
144
+ private captureTabDragMetrics;
145
+ private clearPendingTabDragMetrics;
146
+ private beginPaneDrag;
147
+ private preparePaneDragSource;
148
+ private endPaneDrag;
149
+ private onDragOver;
150
+ private updateDraggedFloatingPosition;
151
+ private onGlobalDragOver;
152
+ private onDrag;
153
+ private onGlobalDragEnd;
154
+ private updateDraggedFloatingPositionFromPoint;
155
+ private updatePaneDragDropTargetFromPoint;
156
+ private startDragPointerTracking;
157
+ private stopDragPointerTracking;
158
+ private onDragMouseMove;
159
+ private onDragTouchMove;
160
+ private onDragMouseUp;
161
+ private onDragTouchEnd;
162
+ private clearPendingDragEndTimeout;
163
+ private scheduleDeferredDragEnd;
164
+ private onDrop;
165
+ private onDragLeave;
166
+ private handleDrop;
167
+ private handleFloatingStackDrop;
168
+ private insertWeight;
169
+ private removePaneFromStack;
170
+ private findParentSplit;
171
+ private computeDropZone;
172
+ private extractDropZoneFromEvent;
173
+ private findDropZoneByPoint;
174
+ private updateDropJoystickActiveZone;
175
+ private isDropZone;
176
+ private showDropIndicator;
177
+ private hideDropIndicator;
178
+ private findStackAtPoint;
179
+ private findStackElement;
180
+ private activatePane;
181
+ private getNodeAtPath;
182
+ private resolveSplitNode;
183
+ private replaceNodeInTree;
184
+ private cleanupEmptyStackInTree;
185
+ private cleanupSplitIfNecessary;
186
+ private dockNodeBeside;
187
+ private forEachStack;
188
+ private findStackContainingPane;
189
+ private findFirstPaneName;
190
+ private collectFloatingPaneMetadata;
191
+ private normalizeFloatingLayout;
192
+ private formatPath;
193
+ private clonePath;
194
+ private parsePath;
195
+ private pathsEqual;
196
+ private isOrIsAncestorOf;
197
+ private countPanesInTree;
198
+ private resolveStackLocation;
199
+ private removePaneFromLocation;
200
+ private addPaneToLocation;
201
+ private setActivePaneForLocation;
202
+ private cleanupLocation;
203
+ private reorderPaneInLocation;
204
+ private removeFloatingAt;
205
+ private removePaneFromFloating;
206
+ private normalizeSizesArray;
207
+ private normalizeSplitNode;
208
+ private dispatchLayoutChanged;
209
+ private cloneLayoutNode;
210
+ private cloneFloatingArray;
211
+ }
212
+ declare global {
213
+ interface HTMLElementTagNameMap {
214
+ 'mint-dock-manager': MintDockManagerElement;
215
+ }
216
+ }
217
+
218
+ declare class BsDockManagerComponent implements AfterViewInit {
219
+ private readonly changeDetector;
220
+ set layout(value: DockLayoutNode | DockLayout | null);
221
+ get layout(): DockLayoutSnapshot | null;
222
+ layoutChange: EventEmitter<DockLayoutSnapshot | null>;
223
+ layoutSnapshotChange: EventEmitter<DockLayoutSnapshot>;
224
+ layoutString: string | null;
225
+ panes: QueryList<BsDockPaneComponent>;
226
+ managerRef: ElementRef<MintDockManagerElement>;
227
+ protected readonly trackByPane: (_: number, pane: BsDockPaneComponent) => string;
228
+ private _layout;
229
+ constructor(changeDetector: ChangeDetectorRef, documentRef: Document);
230
+ ngAfterViewInit(): void;
231
+ captureLayout(): DockLayoutSnapshot;
232
+ onLayoutChanged(event: Event): void;
233
+ private applyLayout;
234
+ private ensureSnapshot;
235
+ private stringifyLayout;
236
+ private cloneLayout;
237
+ static ɵfac: i0.ɵɵFactoryDeclaration<BsDockManagerComponent, never>;
238
+ static ɵcmp: i0.ɵɵComponentDeclaration<BsDockManagerComponent, "bs-dock-manager", never, { "layout": { "alias": "layout"; "required": false; }; }, { "layoutChange": "layoutChange"; "layoutSnapshotChange": "layoutSnapshotChange"; }, ["panes"], never, false, never>;
169
239
  }
170
240
 
171
241
  declare class BsDockModule {
172
242
  static ɵfac: i0.ɵɵFactoryDeclaration<BsDockModule, never>;
173
- static ɵmod: i0.ɵɵNgModuleDeclaration<BsDockModule, [typeof BsDockComponent, typeof BsDockPanelComponent, typeof BsDockPanelHeaderComponent, typeof BsDockPaneRendererComponent], [typeof i5.AsyncPipe, typeof i6.PortalModule, typeof i7.BsCardModule, typeof i8.BsInstanceOfModule, typeof i9.BsSplitterModule, typeof i10.BsTabControlModule, typeof i11.BsResizableModule], [typeof BsDockComponent, typeof BsDockPanelComponent, typeof BsDockPanelHeaderComponent, typeof BsDockPaneRendererComponent]>;
243
+ static ɵmod: i0.ɵɵNgModuleDeclaration<BsDockModule, [typeof BsDockManagerComponent, typeof BsDockPaneComponent], [typeof i3.CommonModule], [typeof BsDockManagerComponent, typeof BsDockPaneComponent]>;
174
244
  static ɵinj: i0.ɵɵInjectorDeclaration<BsDockModule>;
175
245
  }
176
246
 
177
- export { BsContentPane, BsDockComponent, BsDockModule, BsDockPane, BsDockPaneRendererComponent, BsDockPanelComponent, BsDockPanelHeaderComponent, BsDockService, BsDocumentHost, BsFloatingPane, BsSplitPane, BsTabGroupPane, EPaneType };
178
- export type { BsDockLayout, DragOperation, PaneTraceResult, Point, RemoveFromPaneResult, Size };
247
+ export { BsDockManagerComponent, BsDockModule, BsDockPaneComponent, MintDockManagerElement };
248
+ export type { DockFloatingPaneBounds, DockFloatingStackLayout, DockLayout, DockLayoutNode, DockLayoutSnapshot, DockSplitNode, DockStackNode };
package/fesm2022/mintplayer-ng-bootstrap-carousel.mjs CHANGED
@@ -134,11 +134,11 @@ class BsCarouselComponent {
134
134
  this.resizeObserver?.disconnect();
135
135
  }
136
136
  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] }); }
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}:host ::ng-deep .carousel-indicators [data-bs-target]{background-color:var(--bs-carousel-indicator-active-bg, #fff)}.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] }); }
138
138
  }
139
139
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BsCarouselComponent, decorators: [{
140
140
  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"] }]
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}:host ::ng-deep .carousel-indicators [data-bs-target]{background-color:var(--bs-carousel-indicator-active-bg, #fff)}.wrapper{overflow:hidden}\n"] }]
142
142
  }], ctorParameters: () => [{ type: undefined, decorators: [{
143
143
  type: Inject,
144
144
  args: [PLATFORM_ID]