@hyalo/angular 0.1.0 → 0.3.1

package/fesm2022/hyalo-angular-carousel.mjs

@@ -0,0 +1,709 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, TemplateRef, afterNextRender, afterRenderEffect, booleanAttribute, computed, contentChild, contentChildren, inject, input, model, signal, viewChild } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { ɵinjectIsBrowser } from "@hyalo/angular/core";
+import { HyMotion } from "@hyalo/angular/motion";
+import { HyButton } from "@hyalo/angular/button";
+import { HyIcon } from "@hyalo/angular/icon";
+var HyCarouselNavigation = class HyCarouselNavigation {
+	template = inject(TemplateRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyCarouselNavigation,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: HyCarouselNavigation,
+		isStandalone: true,
+		selector: "ng-template[hyCarouselNavigation]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyCarouselNavigation,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[hyCarouselNavigation]" }]
+	}]
+});
+var HySlide = class HySlide {
+	carousel = inject(HyCarousel, { optional: true });
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	active = computed(() => this.carousel?.slides()[this.carousel.current()] === this, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	inactive = computed(() => this.carousel?.mode() === "fade" && !this.active(), ...ngDevMode ? [{ debugName: "inactive" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HySlide,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HySlide,
+		isStandalone: true,
+		selector: "hy-slide",
+		inputs: { label: {
+			classPropertyName: "label",
+			publicName: "label",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"role": "group",
+				"aria-roledescription": "slide"
+			},
+			properties: {
+				"attr.aria-label": "label()",
+				"attr.data-mode": "carousel?.mode()",
+				"attr.data-active": "active()",
+				"attr.inert": "inactive() ? \"\" : null",
+				"attr.aria-hidden": "inactive() ? true : null"
+			}
+		},
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		styles: [":host{display:block;flex:0 0 100%;min-inline-size:0;scroll-snap-align:start;scroll-snap-stop:always}:host([data-mode=\"fade\"]){grid-area:1 / 1;opacity:0;pointer-events:none;transition:opacity var(--hy-carousel-duration) var(--hy-ease-out)}:host([data-mode=\"fade\"][data-active=\"true\"]){opacity:1;pointer-events:auto}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HySlide,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-slide",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				role: "group",
+				"aria-roledescription": "slide",
+				"[attr.aria-label]": "label()",
+				"[attr.data-mode]": "carousel?.mode()",
+				"[attr.data-active]": "active()",
+				"[attr.inert]": "inactive() ? \"\" : null",
+				"[attr.aria-hidden]": "inactive() ? true : null"
+			},
+			template: "<ng-content />",
+			styles: [":host{display:block;flex:0 0 100%;min-inline-size:0;scroll-snap-align:start;scroll-snap-stop:always}:host([data-mode=\"fade\"]){grid-area:1 / 1;opacity:0;pointer-events:none;transition:opacity var(--hy-carousel-duration) var(--hy-ease-out)}:host([data-mode=\"fade\"][data-active=\"true\"]){opacity:1;pointer-events:auto}\n"]
+		}]
+	}],
+	propDecorators: { label: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "label",
+			required: true
+		}]
+	}] }
+});
+var HyCarousel = class HyCarousel {
+	motion = inject(HyMotion);
+	browser = ɵinjectIsBrowser();
+	destroyRef = inject(DestroyRef);
+	viewport = viewChild.required("viewport", ...ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []);
+	label = input("Gallery", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	previousLabel = input("Previous slide", ...ngDevMode ? [{ debugName: "previousLabel" }] : /* istanbul ignore next */ []);
+	nextLabel = input("Next slide", ...ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []);
+	index = model(0, ...ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []);
+	mode = input("slide", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+	pagination = input("dots", ...ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []);
+	paginationLabel = input("Choose slide", ...ngDevMode ? [{ debugName: "paginationLabel" }] : /* istanbul ignore next */ []);
+	loop = input(false, {
+		...ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	scrollbar = input(false, {
+		...ngDevMode ? { debugName: "scrollbar" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	navigation = input("text", ...ngDevMode ? [{ debugName: "navigation" }] : /* istanbul ignore next */ []);
+	navPosition = input("below", ...ngDevMode ? [{ debugName: "navPosition" }] : /* istanbul ignore next */ []);
+	customNavigation = contentChild(HyCarouselNavigation, ...ngDevMode ? [{ debugName: "customNavigation" }] : /* istanbul ignore next */ []);
+	navigationContext = { $implicit: this };
+	slides = contentChildren(HySlide, ...ngDevMode ? [{ debugName: "slides" }] : /* istanbul ignore next */ []);
+	current = computed(() => Math.max(0, Math.min(this.slides().length - 1, Math.trunc(this.index()) || 0)), ...ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []);
+	drag = null;
+	suppressClick = false;
+	ready = signal(false, ...ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []);
+	syncedIndex = -1;
+	syncedMode = null;
+	animated = signal(false, ...ngDevMode ? [{ debugName: "animated" }] : /* istanbul ignore next */ []);
+	viewportWidth = 0;
+	scrollFrame = 0;
+	scrollTarget = null;
+	settleTimer;
+	constructor() {
+		afterRenderEffect(() => {
+			const current = this.current();
+			const mode = this.mode();
+			if (this.ready() && (current !== this.syncedIndex || mode !== this.syncedMode)) {
+				this.syncedIndex = current;
+				this.syncedMode = mode;
+				this.animated.set(false);
+				this.scrollToSlide(false);
+			}
+		});
+		afterNextRender(() => {
+			const viewport = this.viewport().nativeElement;
+			this.viewportWidth = viewport.clientWidth;
+			const resize = typeof ResizeObserver === "function" ? new ResizeObserver(([entry]) => {
+				this.viewportWidth = entry?.contentRect.width ?? viewport.clientWidth;
+				this.scrollToSlide(false);
+			}) : null;
+			resize?.observe(viewport);
+			const onClick = (event) => {
+				if (!this.suppressClick) return;
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				this.suppressClick = false;
+			};
+			viewport.addEventListener("click", onClick, true);
+			this.ready.set(true);
+			this.goTo(this.current(), false);
+			this.destroyRef.onDestroy(() => {
+				viewport.removeEventListener("click", onClick, true);
+				viewport.ownerDocument.defaultView?.cancelAnimationFrame(this.scrollFrame);
+				resize?.disconnect();
+				clearTimeout(this.settleTimer);
+			});
+		});
+	}
+	goTo(index, smooth = true) {
+		const count = this.slides().length;
+		const requested = Number.isFinite(index) ? Math.trunc(index) : 0;
+		this.index.set(this.loop() && count ? (requested % count + count) % count : Math.max(0, Math.min(count - 1, requested)));
+		this.syncedIndex = this.current();
+		this.animated.set(smooth);
+		this.scrollToSlide(smooth);
+	}
+	scrollToSlide(smooth) {
+		if (!this.browser || this.mode() !== "slide") return;
+		const viewport = this.viewport().nativeElement;
+		const slide = viewport.children[this.current()];
+		if (!slide) return;
+		const delta = slide.getBoundingClientRect().x - viewport.getBoundingClientRect().x;
+		clearTimeout(this.settleTimer);
+		this.scrollTarget = smooth && this.motion.enabled() && Math.abs(delta) > 1 ? this.current() : null;
+		if (this.scrollTarget !== null) this.settleTimer = setTimeout(() => {
+			this.scrollToSlide(false);
+		}, 800);
+		viewport.scrollBy?.({
+			left: delta,
+			behavior: smooth && this.motion.enabled() ? "smooth" : "instant"
+		});
+	}
+	onScroll() {
+		if (this.drag || this.scrollTarget !== null || this.mode() !== "slide" || this.scrollFrame) return;
+		const viewport = this.viewport().nativeElement;
+		this.scrollFrame = viewport.ownerDocument.defaultView?.requestAnimationFrame(() => {
+			this.scrollFrame = 0;
+			if (this.drag || this.scrollTarget !== null || this.mode() !== "slide") return;
+			const width = this.viewportWidth || viewport.clientWidth;
+			if (!width) return;
+			const closest = Math.max(0, Math.min(this.slides().length - 1, Math.round(Math.abs(viewport.scrollLeft) / width)));
+			this.syncedIndex = closest;
+			this.index.set(closest);
+		}) ?? 0;
+	}
+	onScrollEnd() {
+		if (this.scrollTarget === null) return;
+		const viewport = this.viewport().nativeElement;
+		const slide = viewport.children[this.scrollTarget];
+		if (slide && Math.abs(slide.getBoundingClientRect().x - viewport.getBoundingClientRect().x) > 1) return;
+		this.scrollTarget = null;
+		clearTimeout(this.settleTimer);
+	}
+	onKey(event) {
+		if (event.target !== this.viewport().nativeElement) return;
+		const rtl = this.viewport().nativeElement.ownerDocument.defaultView?.getComputedStyle(this.viewport().nativeElement).direction === "rtl";
+		let next = this.current();
+		if (event.key === "ArrowRight") next += rtl ? -1 : 1;
+		else if (event.key === "ArrowLeft") next += rtl ? 1 : -1;
+		else if (event.key === "Home") next = 0;
+		else if (event.key === "End") next = this.slides().length - 1;
+		else return;
+		event.preventDefault();
+		this.goTo(next, false);
+	}
+	pointerDown(event) {
+		this.suppressClick = false;
+		this.scrollTarget = null;
+		clearTimeout(this.settleTimer);
+		if (event.pointerType !== "mouse" && this.mode() !== "fade" || event.button !== 0 || event.target.closest("button, a, input, textarea, select")) return;
+		this.viewport().nativeElement.style.scrollSnapType = "none";
+		this.drag = {
+			x: event.clientX,
+			scroll: this.viewport().nativeElement.scrollLeft,
+			time: event.timeStamp,
+			moved: false
+		};
+		this.viewport().nativeElement.setPointerCapture?.(event.pointerId);
+	}
+	pointerMove(event) {
+		if (!this.drag) return;
+		if (event.buttons === 0) {
+			this.pointerCancel();
+			return;
+		}
+		const distance = event.clientX - this.drag.x;
+		if (Math.abs(distance) < 6 && !this.drag.moved) return;
+		this.drag.moved = true;
+		const viewport = this.viewport().nativeElement;
+		viewport.setPointerCapture?.(event.pointerId);
+		if (this.mode() === "slide") viewport.scrollLeft = this.drag.scroll - distance;
+		event.preventDefault();
+	}
+	pointerUp(event) {
+		if (!this.drag) return;
+		const drag = this.drag;
+		this.drag = null;
+		const viewport = this.viewport().nativeElement;
+		if (viewport.hasPointerCapture?.(event.pointerId)) viewport.releasePointerCapture(event.pointerId);
+		viewport.style.removeProperty("scroll-snap-type");
+		if (!drag.moved) return;
+		this.suppressClick = true;
+		const rtl = viewport.ownerDocument.defaultView?.getComputedStyle(viewport).direction === "rtl";
+		const distance = (event.clientX - drag.x) * (rtl ? -1 : 1);
+		const projected = distance + distance / Math.max(1, event.timeStamp - drag.time) * 180;
+		const shift = Math.round(-projected / Math.max(1, viewport.clientWidth));
+		this.goTo(this.current() + shift);
+	}
+	pointerCancel() {
+		this.drag = null;
+		this.viewport().nativeElement.style.removeProperty("scroll-snap-type");
+		this.goTo(this.current(), false);
+	}
+	preventNativeDrag(event) {
+		if (this.drag) event.preventDefault();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyCarousel,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyCarousel,
+		isStandalone: true,
+		selector: "hy-carousel",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			previousLabel: {
+				classPropertyName: "previousLabel",
+				publicName: "previousLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			nextLabel: {
+				classPropertyName: "nextLabel",
+				publicName: "nextLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			index: {
+				classPropertyName: "index",
+				publicName: "index",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			mode: {
+				classPropertyName: "mode",
+				publicName: "mode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			pagination: {
+				classPropertyName: "pagination",
+				publicName: "pagination",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			paginationLabel: {
+				classPropertyName: "paginationLabel",
+				publicName: "paginationLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loop: {
+				classPropertyName: "loop",
+				publicName: "loop",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			scrollbar: {
+				classPropertyName: "scrollbar",
+				publicName: "scrollbar",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			navigation: {
+				classPropertyName: "navigation",
+				publicName: "navigation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			navPosition: {
+				classPropertyName: "navPosition",
+				publicName: "navPosition",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { index: "indexChange" },
+		host: {
+			attributes: {
+				"role": "region",
+				"aria-roledescription": "carousel"
+			},
+			properties: {
+				"attr.aria-label": "label()",
+				"attr.data-mode": "mode()",
+				"attr.data-scrollbar": "scrollbar()",
+				"attr.data-navigation-position": "navPosition()",
+				"style.--hy-carousel-duration": "animated() && motion.enabled() ? \"var(--hy-dur-quick)\" : \"0ms\""
+			}
+		},
+		queries: [{
+			propertyName: "customNavigation",
+			first: true,
+			predicate: HyCarouselNavigation,
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "slides",
+			predicate: HySlide,
+			isSignal: true
+		}],
+		viewQueries: [{
+			propertyName: "viewport",
+			first: true,
+			predicate: ["viewport"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div class=\"frame\">\r\n  <div\r\n    #viewport\r\n    class=\"viewport\"\r\n    tabindex=\"0\"\r\n    role=\"group\"\r\n    [attr.aria-label]=\"label()\"\r\n    (scroll)=\"onScroll()\"\r\n    (scrollend)=\"onScrollEnd()\"\r\n    (keydown)=\"onKey($event)\"\r\n    (pointerdown)=\"pointerDown($event)\"\r\n    (pointermove)=\"pointerMove($event)\"\r\n    (pointerup)=\"pointerUp($event)\"\r\n    (pointercancel)=\"pointerCancel()\"\r\n    (dragstart)=\"preventNativeDrag($event)\"\r\n  >\r\n    <ng-content select=\"hy-slide\" />\r\n  </div>\r\n  <div\r\n    class=\"controls\"\r\n    [class.controls--custom]=\"!!customNavigation()\"\r\n    [class.controls--no-buttons]=\"navigation() === 'none'\"\r\n  >\r\n    @if (navigation() !== 'none') {\r\n      @if (customNavigation(); as custom) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"custom.template\"\r\n          [ngTemplateOutletContext]=\"navigationContext\"\r\n        />\r\n      } @else {\r\n        <button\r\n          class=\"nav-prev\"\r\n          hyButton\r\n          type=\"button\"\r\n          [variant]=\"navPosition() === 'below' ? 'glass' : 'solid'\"\r\n          [iconOnly]=\"navigation() === 'icons'\"\r\n          [attr.aria-label]=\"previousLabel()\"\r\n          [disabled]=\"!slides().length || (!loop() && current() === 0)\"\r\n          (click)=\"goTo(current() - 1)\"\r\n        >\r\n          @if (navigation() === 'icons') {\r\n            <hy-icon class=\"previous-icon\" name=\"chevron-end\" />\r\n          } @else {\r\n            {{ previousLabel() }}\r\n          }\r\n        </button>\r\n      }\r\n    }\r\n    @if (pagination() === 'dots') {\r\n      <div class=\"dots\" role=\"group\" [attr.aria-label]=\"paginationLabel()\">\r\n        @for (slide of slides(); track slide; let i = $index) {\r\n          <button\r\n            type=\"button\"\r\n            [attr.aria-label]=\"slide.label()\"\r\n            [attr.aria-current]=\"current() === i ? 'true' : null\"\r\n            (click)=\"goTo(i)\"\r\n          >\r\n            <span></span>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n    <span [class.sr-only]=\"pagination() !== 'counter'\" aria-live=\"polite\" aria-atomic=\"true\"\r\n      >{{ slides().length ? current() + 1 : 0 }} / {{ slides().length }}</span\r\n    >\r\n    @if (navigation() !== 'none' && !customNavigation()) {\r\n      <button\r\n        class=\"nav-next\"\r\n        hyButton\r\n        type=\"button\"\r\n        [variant]=\"navPosition() === 'below' ? 'glass' : 'solid'\"\r\n        [iconOnly]=\"navigation() === 'icons'\"\r\n        [attr.aria-label]=\"nextLabel()\"\r\n        [disabled]=\"!slides().length || (!loop() && current() >= slides().length - 1)\"\r\n        (click)=\"goTo(current() + 1)\"\r\n      >\r\n        @if (navigation() === 'icons') {\r\n          <hy-icon name=\"chevron-end\" />\r\n        } @else {\r\n          {{ nextLabel() }}\r\n        }\r\n      </button>\r\n    }\r\n  </div>\r\n  <ng-content select=\"ng-template[hyCarouselNavigation]\" />\r\n</div>\r\n",
+		styles: [":host{display:block;min-inline-size:0;container-type:inline-size}.frame{position:relative}.previous-icon{rotate:180deg}.controls--custom{flex-wrap:wrap}.controls--custom .dots{flex-basis:100%;order:2}.controls--no-buttons{justify-content:center}:host([data-navigation-position=\"inside-bottom\"]) .dots,:host([data-navigation-position=\"sides\"]) .dots{background:var(--hy-surface-1);border-radius:var(--hy-radius-pill);padding-inline:var(--hy-space-2)}:host([data-navigation-position=\"inside-bottom\"]) .controls{position:absolute;inset-inline:var(--hy-space-4);inset-block-end:var(--hy-space-4);margin:0}:host([data-navigation-position=\"sides\"]) .controls{position:absolute;inset:0;margin:0;pointer-events:none}:host([data-navigation-position=\"sides\"]) .controls>button{position:absolute;inset-block-start:50%;transform:translateY(-50%);pointer-events:auto}:host([data-navigation-position=\"sides\"]) .controls>.nav-prev{inset-inline-start:var(--hy-space-4)}:host([data-navigation-position=\"sides\"]) .controls>.nav-next{inset-inline-end:var(--hy-space-4)}:host([data-navigation-position=\"sides\"]) .dots,:host([data-navigation-position=\"sides\"]) .controls>span:not(.sr-only){position:absolute;inset-inline:0;inset-block-end:var(--hy-space-3);justify-content:center;text-align:center;pointer-events:auto}.viewport{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;scrollbar-width:none;border-radius:var(--hy-radius-l);touch-action:pan-x pan-y}.viewport::-webkit-scrollbar{display:none}:host([data-scrollbar=\"true\"]) .viewport{scrollbar-width:thin}:host([data-scrollbar=\"true\"]) .viewport::-webkit-scrollbar{display:initial}:host([data-mode=\"fade\"]) .viewport{display:grid;overflow:clip;scroll-snap-type:none;touch-action:pan-y}.dots{display:flex;flex-wrap:wrap;justify-content:center}.dots button{display:grid;place-items:center;inline-size:2rem;block-size:2rem;padding:0;border:0;background:transparent;border-radius:var(--hy-radius-pill);cursor:pointer}.dots span{inline-size:.4rem;block-size:.4rem;border-radius:var(--hy-radius-pill);background:var(--hy-ink-3);transition:transform var(--hy-carousel-duration) var(--hy-ease-out),background-color var(--hy-carousel-duration) ease}.dots button[aria-current] span{background:var(--hy-primary);transform:scaleX(2.5)}.dots button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:-2px}.sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.viewport:focus-visible{outline:2px solid var(--hy-primary);outline-offset:4px}.controls{display:flex;align-items:center;justify-content:space-between;gap:var(--hy-space-3);margin-block-start:var(--hy-space-3);color:var(--hy-ink-2)}@container (max-width:25rem){.controls{display:grid;grid-template-columns:1fr 1fr}.dots,.controls>span:not(.sr-only){grid-column:1 / -1;grid-row:2;justify-self:center}.controls>button:first-child{justify-self:start}.controls>button:last-child{justify-self:end}}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: HyButton,
+				selector: "button[hyButton], a[hyButton]",
+				inputs: [
+					"variant",
+					"size",
+					"tone",
+					"iconOnly",
+					"loading",
+					"disabled"
+				]
+			},
+			{
+				kind: "component",
+				type: HyIcon,
+				selector: "hy-icon",
+				inputs: [
+					"name",
+					"icon",
+					"label",
+					"size",
+					"strokeWidth"
+				]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyCarousel,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-carousel",
+			imports: [
+				HyButton,
+				HyIcon,
+				NgTemplateOutlet
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				role: "region",
+				"aria-roledescription": "carousel",
+				"[attr.aria-label]": "label()",
+				"[attr.data-mode]": "mode()",
+				"[attr.data-scrollbar]": "scrollbar()",
+				"[attr.data-navigation-position]": "navPosition()",
+				"[style.--hy-carousel-duration]": "animated() && motion.enabled() ? \"var(--hy-dur-quick)\" : \"0ms\""
+			},
+			template: "<div class=\"frame\">\r\n  <div\r\n    #viewport\r\n    class=\"viewport\"\r\n    tabindex=\"0\"\r\n    role=\"group\"\r\n    [attr.aria-label]=\"label()\"\r\n    (scroll)=\"onScroll()\"\r\n    (scrollend)=\"onScrollEnd()\"\r\n    (keydown)=\"onKey($event)\"\r\n    (pointerdown)=\"pointerDown($event)\"\r\n    (pointermove)=\"pointerMove($event)\"\r\n    (pointerup)=\"pointerUp($event)\"\r\n    (pointercancel)=\"pointerCancel()\"\r\n    (dragstart)=\"preventNativeDrag($event)\"\r\n  >\r\n    <ng-content select=\"hy-slide\" />\r\n  </div>\r\n  <div\r\n    class=\"controls\"\r\n    [class.controls--custom]=\"!!customNavigation()\"\r\n    [class.controls--no-buttons]=\"navigation() === 'none'\"\r\n  >\r\n    @if (navigation() !== 'none') {\r\n      @if (customNavigation(); as custom) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"custom.template\"\r\n          [ngTemplateOutletContext]=\"navigationContext\"\r\n        />\r\n      } @else {\r\n        <button\r\n          class=\"nav-prev\"\r\n          hyButton\r\n          type=\"button\"\r\n          [variant]=\"navPosition() === 'below' ? 'glass' : 'solid'\"\r\n          [iconOnly]=\"navigation() === 'icons'\"\r\n          [attr.aria-label]=\"previousLabel()\"\r\n          [disabled]=\"!slides().length || (!loop() && current() === 0)\"\r\n          (click)=\"goTo(current() - 1)\"\r\n        >\r\n          @if (navigation() === 'icons') {\r\n            <hy-icon class=\"previous-icon\" name=\"chevron-end\" />\r\n          } @else {\r\n            {{ previousLabel() }}\r\n          }\r\n        </button>\r\n      }\r\n    }\r\n    @if (pagination() === 'dots') {\r\n      <div class=\"dots\" role=\"group\" [attr.aria-label]=\"paginationLabel()\">\r\n        @for (slide of slides(); track slide; let i = $index) {\r\n          <button\r\n            type=\"button\"\r\n            [attr.aria-label]=\"slide.label()\"\r\n            [attr.aria-current]=\"current() === i ? 'true' : null\"\r\n            (click)=\"goTo(i)\"\r\n          >\r\n            <span></span>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n    <span [class.sr-only]=\"pagination() !== 'counter'\" aria-live=\"polite\" aria-atomic=\"true\"\r\n      >{{ slides().length ? current() + 1 : 0 }} / {{ slides().length }}</span\r\n    >\r\n    @if (navigation() !== 'none' && !customNavigation()) {\r\n      <button\r\n        class=\"nav-next\"\r\n        hyButton\r\n        type=\"button\"\r\n        [variant]=\"navPosition() === 'below' ? 'glass' : 'solid'\"\r\n        [iconOnly]=\"navigation() === 'icons'\"\r\n        [attr.aria-label]=\"nextLabel()\"\r\n        [disabled]=\"!slides().length || (!loop() && current() >= slides().length - 1)\"\r\n        (click)=\"goTo(current() + 1)\"\r\n      >\r\n        @if (navigation() === 'icons') {\r\n          <hy-icon name=\"chevron-end\" />\r\n        } @else {\r\n          {{ nextLabel() }}\r\n        }\r\n      </button>\r\n    }\r\n  </div>\r\n  <ng-content select=\"ng-template[hyCarouselNavigation]\" />\r\n</div>\r\n",
+			styles: [":host{display:block;min-inline-size:0;container-type:inline-size}.frame{position:relative}.previous-icon{rotate:180deg}.controls--custom{flex-wrap:wrap}.controls--custom .dots{flex-basis:100%;order:2}.controls--no-buttons{justify-content:center}:host([data-navigation-position=\"inside-bottom\"]) .dots,:host([data-navigation-position=\"sides\"]) .dots{background:var(--hy-surface-1);border-radius:var(--hy-radius-pill);padding-inline:var(--hy-space-2)}:host([data-navigation-position=\"inside-bottom\"]) .controls{position:absolute;inset-inline:var(--hy-space-4);inset-block-end:var(--hy-space-4);margin:0}:host([data-navigation-position=\"sides\"]) .controls{position:absolute;inset:0;margin:0;pointer-events:none}:host([data-navigation-position=\"sides\"]) .controls>button{position:absolute;inset-block-start:50%;transform:translateY(-50%);pointer-events:auto}:host([data-navigation-position=\"sides\"]) .controls>.nav-prev{inset-inline-start:var(--hy-space-4)}:host([data-navigation-position=\"sides\"]) .controls>.nav-next{inset-inline-end:var(--hy-space-4)}:host([data-navigation-position=\"sides\"]) .dots,:host([data-navigation-position=\"sides\"]) .controls>span:not(.sr-only){position:absolute;inset-inline:0;inset-block-end:var(--hy-space-3);justify-content:center;text-align:center;pointer-events:auto}.viewport{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;scrollbar-width:none;border-radius:var(--hy-radius-l);touch-action:pan-x pan-y}.viewport::-webkit-scrollbar{display:none}:host([data-scrollbar=\"true\"]) .viewport{scrollbar-width:thin}:host([data-scrollbar=\"true\"]) .viewport::-webkit-scrollbar{display:initial}:host([data-mode=\"fade\"]) .viewport{display:grid;overflow:clip;scroll-snap-type:none;touch-action:pan-y}.dots{display:flex;flex-wrap:wrap;justify-content:center}.dots button{display:grid;place-items:center;inline-size:2rem;block-size:2rem;padding:0;border:0;background:transparent;border-radius:var(--hy-radius-pill);cursor:pointer}.dots span{inline-size:.4rem;block-size:.4rem;border-radius:var(--hy-radius-pill);background:var(--hy-ink-3);transition:transform var(--hy-carousel-duration) var(--hy-ease-out),background-color var(--hy-carousel-duration) ease}.dots button[aria-current] span{background:var(--hy-primary);transform:scaleX(2.5)}.dots button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:-2px}.sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.viewport:focus-visible{outline:2px solid var(--hy-primary);outline-offset:4px}.controls{display:flex;align-items:center;justify-content:space-between;gap:var(--hy-space-3);margin-block-start:var(--hy-space-3);color:var(--hy-ink-2)}@container (max-width:25rem){.controls{display:grid;grid-template-columns:1fr 1fr}.dots,.controls>span:not(.sr-only){grid-column:1 / -1;grid-row:2;justify-self:center}.controls>button:first-child{justify-self:start}.controls>button:last-child{justify-self:end}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		viewport: [{
+			type: i0.ViewChild,
+			args: ["viewport", { isSignal: true }]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		previousLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previousLabel",
+				required: false
+			}]
+		}],
+		nextLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nextLabel",
+				required: false
+			}]
+		}],
+		index: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "index",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["indexChange"]
+		}],
+		mode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mode",
+				required: false
+			}]
+		}],
+		pagination: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pagination",
+				required: false
+			}]
+		}],
+		paginationLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "paginationLabel",
+				required: false
+			}]
+		}],
+		loop: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loop",
+				required: false
+			}]
+		}],
+		scrollbar: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "scrollbar",
+				required: false
+			}]
+		}],
+		navigation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navigation",
+				required: false
+			}]
+		}],
+		navPosition: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navPosition",
+				required: false
+			}]
+		}],
+		customNavigation: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => HyCarouselNavigation), { isSignal: true }]
+		}],
+		slides: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => HySlide), { isSignal: true }]
+		}]
+	}
+});
+var HyCarouselPrevious = class HyCarouselPrevious {
+	carousel = inject(HyCarousel);
+	blocked = computed(() => !this.carousel.slides().length || !this.carousel.loop() && this.carousel.current() === 0, ...ngDevMode ? [{ debugName: "blocked" }] : /* istanbul ignore next */ []);
+	previous() {
+		if (!this.blocked()) this.carousel.goTo(this.carousel.current() - 1);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyCarouselPrevious,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: HyCarouselPrevious,
+		isStandalone: true,
+		selector: "button[hyCarouselPrevious]",
+		host: {
+			attributes: { "type": "button" },
+			listeners: { "click": "previous()" },
+			properties: {
+				"disabled": "blocked()",
+				"attr.aria-label": "carousel.previousLabel()"
+			},
+			classAttribute: "nav-prev"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyCarouselPrevious,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[hyCarouselPrevious]",
+			host: {
+				class: "nav-prev",
+				type: "button",
+				"[disabled]": "blocked()",
+				"[attr.aria-label]": "carousel.previousLabel()",
+				"(click)": "previous()"
+			}
+		}]
+	}]
+});
+var HyCarouselNext = class HyCarouselNext {
+	carousel = inject(HyCarousel);
+	blocked = computed(() => !this.carousel.slides().length || !this.carousel.loop() && this.carousel.current() >= this.carousel.slides().length - 1, ...ngDevMode ? [{ debugName: "blocked" }] : /* istanbul ignore next */ []);
+	next() {
+		if (!this.blocked()) this.carousel.goTo(this.carousel.current() + 1);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyCarouselNext,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: HyCarouselNext,
+		isStandalone: true,
+		selector: "button[hyCarouselNext]",
+		host: {
+			attributes: { "type": "button" },
+			listeners: { "click": "next()" },
+			properties: {
+				"disabled": "blocked()",
+				"attr.aria-label": "carousel.nextLabel()"
+			},
+			classAttribute: "nav-next"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyCarouselNext,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[hyCarouselNext]",
+			host: {
+				class: "nav-next",
+				type: "button",
+				"[disabled]": "blocked()",
+				"[attr.aria-label]": "carousel.nextLabel()",
+				"(click)": "next()"
+			}
+		}]
+	}]
+});
+const HY_CAROUSEL = [
+	HyCarousel,
+	HySlide,
+	HyCarouselNavigation,
+	HyCarouselPrevious,
+	HyCarouselNext
+];
+export { HY_CAROUSEL, HyCarousel, HyCarouselNavigation, HyCarouselNext, HyCarouselPrevious, HySlide };
+
+//# sourceMappingURL=hyalo-angular-carousel.mjs.map