@loomui-ng/ui 0.0.0-stage → 0.1.1

package/fesm2022/loomui-ng-ui-carousel.mjs

@@ -0,0 +1,532 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, afterNextRender, computed, inject, input, output, signal } from "@angular/core";
+import { Directionality } from "@angular/cdk/bidi";
+import EmblaCarousel from "embla-carousel";
+import { buttonVariants } from "@loomui-ng/ui/button";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, cn } from "@loomui-ng/ui/utils";
+import { UiIconSvg } from "@loomui-ng/ui/icon";
+var UiCarousel = class UiCarousel {
+	dir = inject(Directionality);
+	el = inject(ElementRef).nativeElement;
+	opts = input({}, ...ngDevMode ? [{ debugName: "opts" }] : /* istanbul ignore next */ []);
+	plugins = input([], ...ngDevMode ? [{ debugName: "plugins" }] : /* istanbul ignore next */ []);
+	orientation = input("horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	ready = output();
+	api = signal(null, ...ngDevMode ? [{ debugName: "api" }] : /* istanbul ignore next */ []);
+	canPrev = signal(false, ...ngDevMode ? [{ debugName: "canPrev" }] : /* istanbul ignore next */ []);
+	canNext = signal(false, ...ngDevMode ? [{ debugName: "canNext" }] : /* istanbul ignore next */ []);
+	selectedIndex = signal(0, ...ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("relative", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterNextRender(() => this.init());
+		inject(DestroyRef).onDestroy(() => this.api()?.destroy());
+	}
+	init() {
+		const viewport = this.el.querySelector("[data-slot=carousel-content]");
+		if (!viewport) return;
+		const api = EmblaCarousel(viewport, {
+			...this.opts(),
+			axis: this.orientation() === "horizontal" ? "x" : "y",
+			direction: this.dir.value === "rtl" ? "rtl" : "ltr"
+		}, this.plugins());
+		const sync = () => {
+			this.canPrev.set(api.canScrollPrev());
+			this.canNext.set(api.canScrollNext());
+			this.selectedIndex.set(api.selectedScrollSnap());
+		};
+		api.on("select", sync).on("reInit", sync);
+		sync();
+		this.api.set(api);
+		this.ready.emit(api);
+	}
+	scrollPrev() {
+		this.api()?.scrollPrev();
+	}
+	scrollNext() {
+		this.api()?.scrollNext();
+	}
+	scrollTo(i) {
+		this.api()?.scrollTo(i);
+	}
+	onKey(e) {
+		if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+		const rtl = this.dir.value === "rtl";
+		e.preventDefault();
+		e.key === "ArrowLeft" !== rtl ? this.scrollPrev() : this.scrollNext();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiCarousel,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiCarousel,
+		isStandalone: true,
+		selector: "div[uiCarousel], ui-carousel",
+		inputs: {
+			opts: {
+				classPropertyName: "opts",
+				publicName: "opts",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			plugins: {
+				classPropertyName: "plugins",
+				publicName: "plugins",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { ready: "ready" },
+		host: {
+			attributes: {
+				"role": "region",
+				"aria-roledescription": "carousel",
+				"data-slot": "carousel"
+			},
+			listeners: { "keydown": "onKey($event)" },
+			properties: {
+				"attr.dir": "dir.value",
+				"attr.class": "classes()"
+			}
+		},
+		exportAs: ["uiCarousel"],
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiCarousel,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "div[uiCarousel], ui-carousel",
+			hostDirectives: [UiElementHost],
+			exportAs: "uiCarousel",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				role: "region",
+				"aria-roledescription": "carousel",
+				"data-slot": "carousel",
+				"[attr.dir]": "dir.value",
+				"[attr.class]": "classes()",
+				"(keydown)": "onKey($event)"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		opts: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "opts",
+				required: false
+			}]
+		}],
+		plugins: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "plugins",
+				required: false
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		ready: [{
+			type: i0.Output,
+			args: ["ready"]
+		}]
+	}
+});
+var UiCarouselContent = class UiCarouselContent {
+	root = inject(UiCarousel);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	trackClass = computed(() => cn("flex", this.root.orientation() === "horizontal" ? "-ms-4" : "-mt-4 flex-col", this.userClass()), ...ngDevMode ? [{ debugName: "trackClass" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiCarouselContent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiCarouselContent,
+		isStandalone: true,
+		selector: "div[uiCarouselContent], ui-carousel-content",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "carousel-content" },
+			classAttribute: "overflow-hidden"
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `<div [class]="trackClass()"><ng-content /></div>`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiCarouselContent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "div[uiCarouselContent], ui-carousel-content",
+			hostDirectives: [UiElementHost],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"data-slot": "carousel-content",
+				class: "overflow-hidden"
+			},
+			template: `<div [class]="trackClass()"><ng-content /></div>`
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiCarouselItem = class UiCarouselItem {
+	root = inject(UiCarousel);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("min-w-0 shrink-0 grow-0 basis-full", this.root.orientation() === "horizontal" ? "ps-4" : "pt-4", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiCarouselItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiCarouselItem,
+		isStandalone: true,
+		selector: "div[uiCarouselItem], ui-carousel-item",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"role": "group",
+				"aria-roledescription": "slide",
+				"data-slot": "carousel-item"
+			},
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiCarouselItem,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "div[uiCarouselItem], ui-carousel-item",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "group",
+				"aria-roledescription": "slide",
+				"data-slot": "carousel-item",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiCarouselPrevious = class UiCarouselPrevious {
+	root = inject(UiCarousel);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	icon = computed(() => this.root.orientation() === "horizontal" ? "rtl:rotate-180" : "", ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(buttonVariants({
+		variant: "outline",
+		size: "icon-sm"
+	}), "absolute touch-manipulation rounded-full", this.root.orientation() === "horizontal" ? "top-1/2 -start-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiCarouselPrevious,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiCarouselPrevious,
+		isStandalone: true,
+		selector: "button[uiCarouselPrevious], ui-carousel-previous",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"type": "button",
+				"data-slot": "carousel-previous",
+				"data-variant": "outline",
+				"data-size": "icon-sm"
+			},
+			listeners: { "click": "root.scrollPrev()" },
+			properties: {
+				"attr.disabled": "(!root.canPrev()) ? \"\" : null",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `<svg uiIcon="arrow-left" [class]="icon()"></svg><span class="sr-only">Previous slide</span>`,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: UiIconSvg,
+			selector: "svg[uiIcon]",
+			inputs: [
+				"uiIcon",
+				"icon",
+				"size",
+				"strokeWidth",
+				"absoluteStrokeWidth",
+				"color",
+				"label",
+				"class"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiCarouselPrevious,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button[uiCarouselPrevious], ui-carousel-previous",
+			hostDirectives: [UiElementHost],
+			imports: [UiIconSvg],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				type: "button",
+				"data-slot": "carousel-previous",
+				"data-variant": "outline",
+				"data-size": "icon-sm",
+				"[attr.disabled]": "(!root.canPrev()) ? \"\" : null",
+				"[attr.class]": "classes()",
+				"(click)": "root.scrollPrev()"
+			},
+			template: `<svg uiIcon="arrow-left" [class]="icon()"></svg><span class="sr-only">Previous slide</span>`
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiCarouselNext = class UiCarouselNext {
+	root = inject(UiCarousel);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	icon = computed(() => this.root.orientation() === "horizontal" ? "rtl:rotate-180" : "", ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(buttonVariants({
+		variant: "outline",
+		size: "icon-sm"
+	}), "absolute touch-manipulation rounded-full", this.root.orientation() === "horizontal" ? "top-1/2 -end-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiCarouselNext,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiCarouselNext,
+		isStandalone: true,
+		selector: "button[uiCarouselNext], ui-carousel-next",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"type": "button",
+				"data-slot": "carousel-next",
+				"data-variant": "outline",
+				"data-size": "icon-sm"
+			},
+			listeners: { "click": "root.scrollNext()" },
+			properties: {
+				"attr.disabled": "(!root.canNext()) ? \"\" : null",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `<svg uiIcon="arrow-right" [class]="icon()"></svg><span class="sr-only">Next slide</span>`,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: UiIconSvg,
+			selector: "svg[uiIcon]",
+			inputs: [
+				"uiIcon",
+				"icon",
+				"size",
+				"strokeWidth",
+				"absoluteStrokeWidth",
+				"color",
+				"label",
+				"class"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiCarouselNext,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button[uiCarouselNext], ui-carousel-next",
+			hostDirectives: [UiElementHost],
+			imports: [UiIconSvg],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				type: "button",
+				"data-slot": "carousel-next",
+				"data-variant": "outline",
+				"data-size": "icon-sm",
+				"[attr.disabled]": "(!root.canNext()) ? \"\" : null",
+				"[attr.class]": "classes()",
+				"(click)": "root.scrollNext()"
+			},
+			template: `<svg uiIcon="arrow-right" [class]="icon()"></svg><span class="sr-only">Next slide</span>`
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+const UI_CAROUSEL = [
+	UiCarousel,
+	UiCarouselContent,
+	UiCarouselItem,
+	UiCarouselPrevious,
+	UiCarouselNext
+];
+export { UI_CAROUSEL, UiCarousel, UiCarouselContent, UiCarouselItem, UiCarouselNext, UiCarouselPrevious };
+
+//# sourceMappingURL=loomui-ng-ui-carousel.mjs.map

package/fesm2022/loomui-ng-ui-carousel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loomui-ng-ui-carousel.mjs","names":[],"sources":["../../../libs/ui/carousel/carousel.ts"],"sourcesContent":["import {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport { Directionality } from '@angular/cdk/bidi';\nimport EmblaCarousel, { type EmblaCarouselType, type EmblaOptionsType, type EmblaPluginType } from 'embla-carousel';\nimport { buttonVariants } from '@loomui-ng/ui/button';\nimport { cn } from '@loomui-ng/ui/utils';\nimport { UiIconSvg } from '@loomui-ng/ui/icon';\nimport { UiElementHost } from '@loomui-ng/ui/utils';\n\n/**\n * <div uiCarousel [opts]=\"{ loop: true }\" orientation=\"horizontal\">\n *   <div uiCarouselContent>\n *     <div uiCarouselItem>…</div>\n *   </div>\n *   <button uiCarouselPrevious></button>\n *   <button uiCarouselNext></button>\n * </div>\n *\n * Observed (shadcn/Radix variant): root role=\"region\" aria-roledescription=\"carousel\"; items role=\"group\"\n * aria-roledescription=\"slide\"; prev/next are outline icon-sm buttons positioned outside the viewport, disabled at the ends.\n * Behavior is Embla's (drag/swipe/inertia); ArrowLeft/ArrowRight on the focused carousel scroll (mirrored in RTL), as in\n * shadcn's `handleKeyDown`. UNKNOWN: slide-change announcements (shadcn adds no live region).\n */\n@Component({\n  selector: 'div[uiCarousel], ui-carousel', hostDirectives: [UiElementHost],\n  exportAs: 'uiCarousel',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    role: 'region',\n    'aria-roledescription': 'carousel',\n    'data-slot': 'carousel',\n    '[attr.dir]': 'dir.value',\n    '[attr.class]': 'classes()',\n    '(keydown)': 'onKey($event)',\n  },\n  template: `<ng-content />`,\n})\nexport class UiCarousel {\n  protected readonly dir = inject(Directionality);\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  readonly opts = input<Record<string, any>>({});\n  readonly plugins = input<any[]>([]);\n  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');\n  readonly userClass = input<string>('', { alias: 'class' });\n  /** Emits the Embla instance once initialised (for plugins/autoplay control). */\n  readonly ready = output<EmblaCarouselType>();\n\n  readonly api = signal<EmblaCarouselType | null>(null);\n  readonly canPrev = signal(false);\n  readonly canNext = signal(false);\n  readonly selectedIndex = signal(0);\n  protected readonly classes = computed(() => cn('relative', this.userClass()));\n\n  constructor() {\n    afterNextRender(() => this.init());\n    inject(DestroyRef).onDestroy(() => this.api()?.destroy());\n  }\n\n  private init(): void {\n    const viewport = this.el.querySelector<HTMLElement>('[data-slot=carousel-content]');\n    if (!viewport) return;\n    const api = EmblaCarousel(\n      viewport,\n      { ...(this.opts() as EmblaOptionsType), axis: this.orientation() === 'horizontal' ? 'x' : 'y', direction: this.dir.value === 'rtl' ? 'rtl' : 'ltr' },\n      this.plugins() as EmblaPluginType[],\n    );\n    const sync = () => {\n      this.canPrev.set(api.canScrollPrev());\n      this.canNext.set(api.canScrollNext());\n      this.selectedIndex.set(api.selectedScrollSnap());\n    };\n    api.on('select', sync).on('reInit', sync);\n    sync();\n    this.api.set(api);\n    this.ready.emit(api);\n  }\n\n  scrollPrev(): void {\n    this.api()?.scrollPrev();\n  }\n  scrollNext(): void {\n    this.api()?.scrollNext();\n  }\n  scrollTo(i: number): void {\n    this.api()?.scrollTo(i);\n  }\n\n  protected onKey(e: KeyboardEvent): void {\n    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;\n    const rtl = this.dir.value === 'rtl';\n    e.preventDefault();\n    (e.key === 'ArrowLeft') !== rtl ? this.scrollPrev() : this.scrollNext();\n  }\n}\n\n/** Embla viewport (overflow-hidden) wrapping the slide track. */\n@Component({\n  selector: 'div[uiCarouselContent], ui-carousel-content', hostDirectives: [UiElementHost],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { 'data-slot': 'carousel-content', class: 'overflow-hidden' },\n  template: `<div [class]=\"trackClass()\"><ng-content /></div>`,\n})\nexport class UiCarouselContent {\n  private readonly root = inject(UiCarousel);\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly trackClass = computed(() =>\n    cn('flex', this.root.orientation() === 'horizontal' ? '-ms-4' : '-mt-4 flex-col', this.userClass()),\n  );\n}\n\n@Directive({\n  selector: 'div[uiCarouselItem], ui-carousel-item', hostDirectives: [UiElementHost],\n  host: {\n    role: 'group',\n    'aria-roledescription': 'slide',\n    'data-slot': 'carousel-item',\n    '[attr.class]': 'classes()',\n  },\n})\nexport class UiCarouselItem {\n  private readonly root = inject(UiCarousel);\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly classes = computed(() =>\n    cn('min-w-0 shrink-0 grow-0 basis-full', this.root.orientation() === 'horizontal' ? 'ps-4' : 'pt-4', this.userClass()),\n  );\n}\n\n\n@Component({\n  selector: 'button[uiCarouselPrevious], ui-carousel-previous', hostDirectives: [UiElementHost],\n  imports: [UiIconSvg],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    type: 'button',\n    'data-slot': 'carousel-previous',\n    'data-variant': 'outline',\n    'data-size': 'icon-sm',\n    '[attr.disabled]': '(!root.canPrev()) ? \"\" : null',\n    '[attr.class]': 'classes()',\n    '(click)': 'root.scrollPrev()',\n  },\n  template: `<svg uiIcon=\"arrow-left\" [class]=\"icon()\"></svg><span class=\"sr-only\">Previous slide</span>`,\n})\nexport class UiCarouselPrevious {\n  protected readonly root = inject(UiCarousel);\n  readonly userClass = input<string>('', { alias: 'class' });\n  // chevron-right drawn; flipped so it points to the start edge (and mirrors under RTL because `dir` flips `rtl:`)\n  protected readonly icon = computed(() => (this.root.orientation() === 'horizontal' ? 'rtl:rotate-180' : ''));\n  protected readonly classes = computed(() =>\n    cn(\n      buttonVariants({ variant: 'outline', size: 'icon-sm' }),\n      'absolute touch-manipulation rounded-full',\n      this.root.orientation() === 'horizontal' ? 'top-1/2 -start-12 -translate-y-1/2' : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n      this.userClass(),\n    ),\n  );\n}\n\n@Component({\n  selector: 'button[uiCarouselNext], ui-carousel-next', hostDirectives: [UiElementHost],\n  imports: [UiIconSvg],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    type: 'button',\n    'data-slot': 'carousel-next',\n    'data-variant': 'outline',\n    'data-size': 'icon-sm',\n    '[attr.disabled]': '(!root.canNext()) ? \"\" : null',\n    '[attr.class]': 'classes()',\n    '(click)': 'root.scrollNext()',\n  },\n  template: `<svg uiIcon=\"arrow-right\" [class]=\"icon()\"></svg><span class=\"sr-only\">Next slide</span>`,\n})\nexport class UiCarouselNext {\n  protected readonly root = inject(UiCarousel);\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly icon = computed(() => (this.root.orientation() === 'horizontal' ? 'rtl:rotate-180' : ''));\n  protected readonly classes = computed(() =>\n    cn(\n      buttonVariants({ variant: 'outline', size: 'icon-sm' }),\n      'absolute touch-manipulation rounded-full',\n      this.root.orientation() === 'horizontal' ? 'top-1/2 -end-12 -translate-y-1/2' : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n      this.userClass(),\n    ),\n  );\n}\n\nexport const UI_CAROUSEL = [UiCarousel, UiCarouselContent, UiCarouselItem, UiCarouselPrevious, UiCarouselNext] as const;\n"],"mappings":"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"}