@ojiepermana/angular 22.1.13 → 22.2.0

package/fesm2022/ojiepermana-angular-component-carousel.mjs

@@ -1,224 +1,515 @@
-import { isPlatformBrowser } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Directive, input, output, signal, inject, PLATFORM_ID, computed, effect, forwardRef, Component, viewChild } from '@angular/core';
-import EmblaCarousel from 'embla-carousel';
-import { cn } from '@ojiepermana/angular/component/utils/core';
-
-class CarouselContextBase {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CarouselContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: CarouselContextBase, isStandalone: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CarouselContextBase, decorators: [{
-            type: Directive
-        }] });
-class CarouselComponent extends CarouselContextBase {
-    orientation = input('horizontal', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-    opts = input({}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "opts" }] : /* istanbul ignore next */ []));
-    plugins = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "plugins" }] : /* istanbul ignore next */ []));
-    keyboard = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "keyboard" }] : /* istanbul ignore next */ []));
-    label = input('Carousel', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    apiReady = output();
-    apiChange = output();
-    selectedIndex = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
-    slideCount = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "slideCount" }] : /* istanbul ignore next */ []));
-    canScrollPrev = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "canScrollPrev" }] : /* istanbul ignore next */ []));
-    canScrollNext = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "canScrollNext" }] : /* istanbul ignore next */ []));
-    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-    viewport = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []));
-    api = null;
-    classes = computed(() => cn('relative block', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    constructor() {
-        super();
-        effect((onCleanup) => {
-            const viewport = this.viewport();
-            const orientation = this.orientation();
-            const opts = this.opts();
-            const plugins = this.plugins();
-            if (!this.isBrowser || !viewport) {
-                this.api = null;
-                this.resetState();
-                return;
-            }
-            const carousel = EmblaCarousel(viewport, { ...opts, axis: orientation === 'horizontal' ? 'x' : 'y' }, [...plugins]);
-            const updateState = () => this.updateState(carousel);
-            this.api = carousel;
-            this.apiChange.emit(carousel);
-            this.apiReady.emit(carousel);
-            updateState();
-            carousel.on('select', updateState);
-            carousel.on('reInit', updateState);
-            carousel.on('resize', updateState);
-            onCleanup(() => {
-                carousel.destroy();
-                if (this.api === carousel) {
-                    this.api = null;
-                    this.apiChange.emit(null);
-                    this.resetState();
-                }
-            });
-        });
-    }
-    registerViewport(viewport) {
-        this.viewport.set(viewport);
-    }
-    unregisterViewport(viewport) {
-        if (this.viewport() === viewport) {
-            this.viewport.set(null);
-        }
-    }
-    scrollPrev() {
-        this.api?.scrollPrev();
-    }
-    scrollNext() {
-        this.api?.scrollNext();
-    }
-    scrollTo(index) {
-        this.api?.scrollTo(index);
-    }
-    onKeydown(event) {
-        if (!this.keyboard())
-            return;
-        const horizontal = this.orientation() === 'horizontal';
-        const previousKey = horizontal ? 'ArrowLeft' : 'ArrowUp';
-        const nextKey = horizontal ? 'ArrowRight' : 'ArrowDown';
-        if (event.key === previousKey) {
-            event.preventDefault();
-            this.scrollPrev();
-            return;
-        }
-        if (event.key === nextKey) {
-            event.preventDefault();
-            this.scrollNext();
-            return;
-        }
-        if (event.key === 'Home') {
-            event.preventDefault();
-            this.scrollTo(0);
-            return;
-        }
-        if (event.key === 'End') {
-            event.preventDefault();
-            this.scrollTo(Math.max(0, this.slideCount() - 1));
-        }
-    }
-    updateState(carousel) {
-        this.slideCount.set(carousel.scrollSnapList().length);
-        this.selectedIndex.set(carousel.selectedScrollSnap());
-        this.canScrollPrev.set(carousel.canScrollPrev());
-        this.canScrollNext.set(carousel.canScrollNext());
-    }
-    resetState() {
-        this.selectedIndex.set(0);
-        this.slideCount.set(0);
-        this.canScrollPrev.set(false);
-        this.canScrollNext.set(false);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: CarouselComponent, isStandalone: true, selector: "Carousel", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, opts: { classPropertyName: "opts", publicName: "opts", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null }, keyboard: { classPropertyName: "keyboard", publicName: "keyboard", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apiReady: "apiReady", apiChange: "apiChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "classes()", "attr.role": "\"region\"", "attr.aria-roledescription": "\"carousel\"", "attr.aria-label": "label()", "attr.data-orientation": "orientation()", "attr.tabindex": "keyboard() ? 0 : null" } }, providers: [{ provide: CarouselContextBase, useExisting: forwardRef(() => CarouselComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CarouselComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'Carousel',
-                    providers: [{ provide: CarouselContextBase, useExisting: forwardRef(() => CarouselComponent) }],
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.role]': '"region"',
-                        '[attr.aria-roledescription]': '"carousel"',
-                        '[attr.aria-label]': 'label()',
-                        '[attr.data-orientation]': 'orientation()',
-                        '[attr.tabindex]': 'keyboard() ? 0 : null',
-                        '(keydown)': 'onKeydown($event)',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], opts: [{ type: i0.Input, args: [{ isSignal: true, alias: "opts", required: false }] }], plugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "plugins", required: false }] }], keyboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboard", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], apiReady: [{ type: i0.Output, args: ["apiReady"] }], apiChange: [{ type: i0.Output, args: ["apiChange"] }] } });
-class CarouselContentComponent {
-    ctx = inject(CarouselContextBase);
-    viewport = viewChild('viewport', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    contentClasses = computed(() => cn('flex', this.ctx.orientation() === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentClasses" }] : /* istanbul ignore next */ []));
-    ngAfterViewInit() {
-        const viewport = this.viewport()?.nativeElement;
-        if (viewport)
-            this.ctx.registerViewport(viewport);
-    }
-    ngOnDestroy() {
-        const viewport = this.viewport()?.nativeElement;
-        if (viewport)
-            this.ctx.unregisterViewport(viewport);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CarouselContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.4", type: CarouselContentComponent, isStandalone: true, selector: "CarouselContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "\"block\"" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: `
+import { isPlatformBrowser } from "@angular/common";
+import * as i0 from "@angular/core";
+import { Component, Directive, PLATFORM_ID, computed, effect, forwardRef, inject, input, output, signal, viewChild } from "@angular/core";
+import EmblaCarousel from "embla-carousel";
+import { cn } from "@ojiepermana/angular/component/utils/core";
+var CarouselContextBase = class CarouselContextBase {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: CarouselContextBase,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: CarouselContextBase,
+		isStandalone: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: CarouselContextBase,
+	decorators: [{ type: Directive }]
+});
+var CarouselComponent = class CarouselComponent extends CarouselContextBase {
+	orientation = input("horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	opts = input({}, ...ngDevMode ? [{ debugName: "opts" }] : /* istanbul ignore next */ []);
+	plugins = input([], ...ngDevMode ? [{ debugName: "plugins" }] : /* istanbul ignore next */ []);
+	keyboard = input(true, ...ngDevMode ? [{ debugName: "keyboard" }] : /* istanbul ignore next */ []);
+	label = input("Carousel", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	apiReady = output();
+	apiChange = output();
+	selectedIndex = signal(0, ...ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []);
+	slideCount = signal(0, ...ngDevMode ? [{ debugName: "slideCount" }] : /* istanbul ignore next */ []);
+	canScrollPrev = signal(false, ...ngDevMode ? [{ debugName: "canScrollPrev" }] : /* istanbul ignore next */ []);
+	canScrollNext = signal(false, ...ngDevMode ? [{ debugName: "canScrollNext" }] : /* istanbul ignore next */ []);
+	isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+	viewport = signal(null, ...ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []);
+	api = null;
+	classes = computed(() => cn("relative block", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		super();
+		effect((onCleanup) => {
+			const viewport = this.viewport();
+			const orientation = this.orientation();
+			const opts = this.opts();
+			const plugins = this.plugins();
+			if (!this.isBrowser || !viewport) {
+				this.api = null;
+				this.resetState();
+				return;
+			}
+			const carousel = EmblaCarousel(viewport, {
+				...opts,
+				axis: orientation === "horizontal" ? "x" : "y"
+			}, [...plugins]);
+			const updateState = () => this.updateState(carousel);
+			this.api = carousel;
+			this.apiChange.emit(carousel);
+			this.apiReady.emit(carousel);
+			updateState();
+			carousel.on("select", updateState);
+			carousel.on("reInit", updateState);
+			carousel.on("resize", updateState);
+			onCleanup(() => {
+				carousel.destroy();
+				if (this.api === carousel) {
+					this.api = null;
+					this.apiChange.emit(null);
+					this.resetState();
+				}
+			});
+		});
+	}
+	registerViewport(viewport) {
+		this.viewport.set(viewport);
+	}
+	unregisterViewport(viewport) {
+		if (this.viewport() === viewport) this.viewport.set(null);
+	}
+	scrollPrev() {
+		this.api?.scrollPrev();
+	}
+	scrollNext() {
+		this.api?.scrollNext();
+	}
+	scrollTo(index) {
+		this.api?.scrollTo(index);
+	}
+	onKeydown(event) {
+		if (!this.keyboard()) return;
+		const horizontal = this.orientation() === "horizontal";
+		const previousKey = horizontal ? "ArrowLeft" : "ArrowUp";
+		const nextKey = horizontal ? "ArrowRight" : "ArrowDown";
+		if (event.key === previousKey) {
+			event.preventDefault();
+			this.scrollPrev();
+			return;
+		}
+		if (event.key === nextKey) {
+			event.preventDefault();
+			this.scrollNext();
+			return;
+		}
+		if (event.key === "Home") {
+			event.preventDefault();
+			this.scrollTo(0);
+			return;
+		}
+		if (event.key === "End") {
+			event.preventDefault();
+			this.scrollTo(Math.max(0, this.slideCount() - 1));
+		}
+	}
+	updateState(carousel) {
+		this.slideCount.set(carousel.scrollSnapList().length);
+		this.selectedIndex.set(carousel.selectedScrollSnap());
+		this.canScrollPrev.set(carousel.canScrollPrev());
+		this.canScrollNext.set(carousel.canScrollNext());
+	}
+	resetState() {
+		this.selectedIndex.set(0);
+		this.slideCount.set(0);
+		this.canScrollPrev.set(false);
+		this.canScrollNext.set(false);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: CarouselComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: CarouselComponent,
+		isStandalone: true,
+		selector: "Carousel",
+		inputs: {
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			opts: {
+				classPropertyName: "opts",
+				publicName: "opts",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			plugins: {
+				classPropertyName: "plugins",
+				publicName: "plugins",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			keyboard: {
+				classPropertyName: "keyboard",
+				publicName: "keyboard",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			apiReady: "apiReady",
+			apiChange: "apiChange"
+		},
+		host: {
+			listeners: { "keydown": "onKeydown($event)" },
+			properties: {
+				"class": "classes()",
+				"attr.role": "\"region\"",
+				"attr.aria-roledescription": "\"carousel\"",
+				"attr.aria-label": "label()",
+				"attr.data-orientation": "orientation()",
+				"attr.tabindex": "keyboard() ? 0 : null"
+			}
+		},
+		providers: [{
+			provide: CarouselContextBase,
+			useExisting: forwardRef(() => CarouselComponent)
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: CarouselComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "Carousel",
+			providers: [{
+				provide: CarouselContextBase,
+				useExisting: forwardRef(() => CarouselComponent)
+			}],
+			host: {
+				"[class]": "classes()",
+				"[attr.role]": "\"region\"",
+				"[attr.aria-roledescription]": "\"carousel\"",
+				"[attr.aria-label]": "label()",
+				"[attr.data-orientation]": "orientation()",
+				"[attr.tabindex]": "keyboard() ? 0 : null",
+				"(keydown)": "onKeydown($event)"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		opts: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "opts",
+				required: false
+			}]
+		}],
+		plugins: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "plugins",
+				required: false
+			}]
+		}],
+		keyboard: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "keyboard",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		apiReady: [{
+			type: i0.Output,
+			args: ["apiReady"]
+		}],
+		apiChange: [{
+			type: i0.Output,
+			args: ["apiChange"]
+		}]
+	}
+});
+var CarouselContentComponent = class CarouselContentComponent {
+	ctx = inject(CarouselContextBase);
+	viewport = viewChild("viewport", ...ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	contentClasses = computed(() => cn("flex", this.ctx.orientation() === "horizontal" ? "-ml-4" : "-mt-4 flex-col", this.class()), ...ngDevMode ? [{ debugName: "contentClasses" }] : /* istanbul ignore next */ []);
+	ngAfterViewInit() {
+		const viewport = this.viewport()?.nativeElement;
+		if (viewport) this.ctx.registerViewport(viewport);
+	}
+	ngOnDestroy() {
+		const viewport = this.viewport()?.nativeElement;
+		if (viewport) this.ctx.unregisterViewport(viewport);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: CarouselContentComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.0",
+		type: CarouselContentComponent,
+		isStandalone: true,
+		selector: "CarouselContent",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: { "class": "\"block\"" } },
+		viewQueries: [{
+			propertyName: "viewport",
+			first: true,
+			predicate: ["viewport"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
     <div #viewport class="overflow-hidden">
       <div [class]="contentClasses()"><ng-content /></div>
     </div>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CarouselContentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'CarouselContent',
-                    host: {
-                        '[class]': '"block"',
-                    },
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: CarouselContentComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "CarouselContent",
+			host: { "[class]": "\"block\"" },
+			template: `
     <div #viewport class="overflow-hidden">
       <div [class]="contentClasses()"><ng-content /></div>
     </div>
-  `,
-                }]
-        }], propDecorators: { viewport: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class CarouselItemComponent {
-    ctx = inject(CarouselContextBase);
-    ariaLabel = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('min-w-0 shrink-0 grow-0 basis-full', this.ctx.orientation() === 'horizontal' ? 'pl-4' : 'pt-4', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CarouselItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: CarouselItemComponent, isStandalone: true, selector: "CarouselItem", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "\"group\"", "attr.aria-roledescription": "\"slide\"", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CarouselItemComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'CarouselItem',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.role]': '"group"',
-                        '[attr.aria-roledescription]': '"slide"',
-                        '[attr.aria-label]': 'ariaLabel()',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class CarouselPreviousComponent {
-    ctx = inject(CarouselContextBase);
-    label = input('Previous slide', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn(carouselButtonClasses, carouselPreviousPlacement(this.ctx.orientation()), this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CarouselPreviousComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: CarouselPreviousComponent, isStandalone: true, selector: "button[CarouselPrevious]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "ctx.scrollPrev()" }, properties: { "class": "classes()", "attr.aria-label": "label()", "disabled": "!ctx.canScrollPrev() || null" } }, ngImport: i0, template: `
+  `
+		}]
+	}],
+	propDecorators: {
+		viewport: [{
+			type: i0.ViewChild,
+			args: ["viewport", { isSignal: true }]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var CarouselItemComponent = class CarouselItemComponent {
+	ctx = inject(CarouselContextBase);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("min-w-0 shrink-0 grow-0 basis-full", this.ctx.orientation() === "horizontal" ? "pl-4" : "pt-4", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: CarouselItemComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: CarouselItemComponent,
+		isStandalone: true,
+		selector: "CarouselItem",
+		inputs: {
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "classes()",
+			"attr.role": "\"group\"",
+			"attr.aria-roledescription": "\"slide\"",
+			"attr.aria-label": "ariaLabel()"
+		} },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: CarouselItemComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "CarouselItem",
+			host: {
+				"[class]": "classes()",
+				"[attr.role]": "\"group\"",
+				"[attr.aria-roledescription]": "\"slide\"",
+				"[attr.aria-label]": "ariaLabel()"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: {
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var CarouselPreviousComponent = class CarouselPreviousComponent {
+	ctx = inject(CarouselContextBase);
+	label = input("Previous slide", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(carouselButtonClasses, carouselPreviousPlacement(this.ctx.orientation()), this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: CarouselPreviousComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: CarouselPreviousComponent,
+		isStandalone: true,
+		selector: "button[CarouselPrevious]",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "type": "button" },
+			listeners: { "click": "ctx.scrollPrev()" },
+			properties: {
+				"class": "classes()",
+				"attr.aria-label": "label()",
+				"disabled": "!ctx.canScrollPrev() || null"
+			}
+		},
+		ngImport: i0,
+		template: `
     <svg
       aria-hidden="true"
       class="h-4 w-4"
@@ -231,20 +522,27 @@ class CarouselPreviousComponent {
     >
       <path d="m15 18-6-6 6-6" />
     </svg>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CarouselPreviousComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'button[CarouselPrevious]',
-                    host: {
-                        '[class]': 'classes()',
-                        type: 'button',
-                        '[attr.aria-label]': 'label()',
-                        '[disabled]': '!ctx.canScrollPrev() || null',
-                        '(click)': 'ctx.scrollPrev()',
-                    },
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: CarouselPreviousComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button[CarouselPrevious]",
+			host: {
+				"[class]": "classes()",
+				type: "button",
+				"[attr.aria-label]": "label()",
+				"[disabled]": "!ctx.canScrollPrev() || null",
+				"(click)": "ctx.scrollPrev()"
+			},
+			template: `
     <svg
       aria-hidden="true"
       class="h-4 w-4"
@@ -257,19 +555,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     >
       <path d="m15 18-6-6 6-6" />
     </svg>
-  `,
-                }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class CarouselNextComponent {
-    ctx = inject(CarouselContextBase);
-    label = input('Next slide', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn(carouselButtonClasses, carouselNextPlacement(this.ctx.orientation()), this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CarouselNextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: CarouselNextComponent, isStandalone: true, selector: "button[CarouselNext]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "ctx.scrollNext()" }, properties: { "class": "classes()", "attr.aria-label": "label()", "disabled": "!ctx.canScrollNext() || null" } }, ngImport: i0, template: `
+  `
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var CarouselNextComponent = class CarouselNextComponent {
+	ctx = inject(CarouselContextBase);
+	label = input("Next slide", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(carouselButtonClasses, carouselNextPlacement(this.ctx.orientation()), this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: CarouselNextComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: CarouselNextComponent,
+		isStandalone: true,
+		selector: "button[CarouselNext]",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "type": "button" },
+			listeners: { "click": "ctx.scrollNext()" },
+			properties: {
+				"class": "classes()",
+				"attr.aria-label": "label()",
+				"disabled": "!ctx.canScrollNext() || null"
+			}
+		},
+		ngImport: i0,
+		template: `
     <svg
       aria-hidden="true"
       class="h-4 w-4"
@@ -282,20 +635,27 @@ class CarouselNextComponent {
     >
       <path d="m9 18 6-6-6-6" />
     </svg>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CarouselNextComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'button[CarouselNext]',
-                    host: {
-                        '[class]': 'classes()',
-                        type: 'button',
-                        '[attr.aria-label]': 'label()',
-                        '[disabled]': '!ctx.canScrollNext() || null',
-                        '(click)': 'ctx.scrollNext()',
-                    },
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: CarouselNextComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button[CarouselNext]",
+			host: {
+				"[class]": "classes()",
+				type: "button",
+				"[attr.aria-label]": "label()",
+				"[disabled]": "!ctx.canScrollNext() || null",
+				"(click)": "ctx.scrollNext()"
+			},
+			template: `
     <svg
       aria-hidden="true"
       class="h-4 w-4"
@@ -308,23 +668,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     >
       <path d="m9 18 6-6-6-6" />
     </svg>
-  `,
-                }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-const carouselButtonClasses = 'absolute inline-flex h-8 w-8 items-center justify-center rounded-full border border-border bg-background p-0 text-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50';
+  `
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+const carouselButtonClasses = "absolute inline-flex h-8 w-8 items-center justify-center rounded-full border border-border bg-background p-0 text-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50";
 function carouselPreviousPlacement(orientation) {
-    return orientation === 'horizontal'
-        ? '-left-12 top-1/2 -translate-y-1/2'
-        : '-top-12 left-1/2 -translate-x-1/2 rotate-90';
+	return orientation === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90";
 }
 function carouselNextPlacement(orientation) {
-    return orientation === 'horizontal'
-        ? '-right-12 top-1/2 -translate-y-1/2'
-        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90';
+	return orientation === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90";
 }
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { CarouselComponent, CarouselContentComponent, CarouselContextBase, CarouselItemComponent, CarouselNextComponent, CarouselPreviousComponent };
+export { CarouselComponent, CarouselContentComponent, CarouselContextBase, CarouselItemComponent, CarouselNextComponent, CarouselPreviousComponent };