@raqm/ui 0.0.0-stage → 0.1.1

package/fesm2022/raqm-ui-drawer.mjs

@@ -0,0 +1,687 @@
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, booleanAttribute, effect, inject, input, signal } from "@angular/core";
+import { RaqmButton } from "@raqm/ui/button";
+import * as i1 from "@raqm/ui/dialog";
+import { RAQM_DIALOG, RAQM_DIALOG_POLICY, RaqmDialogBaseComponent, RaqmDialogCloseDirective, RaqmDialogContentDirective, RaqmDialogDescriptionDirective, RaqmDialogTitleDirective, RaqmDialogTriggerDirective } from "@raqm/ui/dialog";
+import { DialogRef } from "@angular/cdk/dialog";
+const DRAG_THRESHOLD = 8;
+const DISMISS_RATIO = .35;
+const DISMISS_VELOCITY = .5;
+const SETTLE_MS = 200;
+const INTERACTIVE_SELECTOR = "input, textarea, select, button, a[href], [contenteditable=\"true\"], [data-raqm-drawer-no-swipe]";
+function prefersReducedMotion() {
+	return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+var RaqmDrawerSwipeDirective = class RaqmDrawerSwipeDirective {
+	surface = inject(ElementRef).nativeElement;
+	dialog = inject(RAQM_DIALOG, { optional: true });
+	dialogRef = inject(DialogRef, { optional: true });
+	destroyRef = inject(DestroyRef);
+	direction = input("down", ...ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []);
+	release;
+	settleTimer;
+	backdrop = null;
+	onPointerDown = (event) => {
+		if (!event.isPrimary) return;
+		if (event.pointerType === "mouse" && event.button !== 0) return;
+		if (this.release !== void 0 || this.settleTimer !== void 0) return;
+		if (this.dialog !== null && !this.dialog.open()) return;
+		const target = event.target;
+		if (!(target instanceof Element)) return;
+		if (target.closest(INTERACTIVE_SELECTOR)) return;
+		const direction = this.direction();
+		const vertical = direction === "down" || direction === "up";
+		if (this.hasScrollableAncestor(target, vertical)) return;
+		if (event.pointerType === "touch" && !target.closest("[data-raqm-drawer-swipe-handle]")) return;
+		const surface = this.surface;
+		const rect = surface.getBoundingClientRect();
+		const size = vertical ? rect.height : rect.width;
+		if (size <= 0) return;
+		const rtl = getComputedStyle(surface).direction === "rtl";
+		const sign = (direction === "down" ? true : direction === "up" ? false : direction === "right" !== rtl) ? 1 : -1;
+		const startX = event.clientX;
+		const startY = event.clientY;
+		const startedAt = performance.now();
+		const pointerId = event.pointerId;
+		let active = false;
+		let distance = 0;
+		const along = (move) => (vertical ? move.clientY - startY : move.clientX - startX) * sign;
+		const activate = () => {
+			active = true;
+			surface.setAttribute("data-raqm-swiping", "");
+			this.backdrop = this.dialogRef?.overlayRef.backdropElement ?? null;
+			if (this.backdrop) this.backdrop.style.transitionDuration = "0ms";
+			try {
+				surface.setPointerCapture(pointerId);
+			} catch {}
+		};
+		const render = (value) => {
+			const offset = Math.max(0, Math.min(size, value));
+			distance = offset;
+			surface.style.transition = "none";
+			surface.style.transform = `translate3d(${vertical ? 0 : offset * sign}px, ${vertical ? offset * sign : 0}px, 0)`;
+			if (this.backdrop) this.backdrop.style.opacity = String(Math.max(0, 1 - offset / size));
+		};
+		const onMove = (move) => {
+			if (move.pointerId !== pointerId) return;
+			const raw = along(move);
+			if (!active) {
+				const cross = vertical ? move.clientX - startX : move.clientY - startY;
+				if (raw <= DRAG_THRESHOLD || Math.abs(raw) <= Math.abs(cross)) return;
+				move.preventDefault();
+				window.getSelection()?.removeAllRanges();
+				activate();
+			}
+			render(raw);
+		};
+		const finish = (end, cancelled) => {
+			if (end.pointerId !== pointerId) return;
+			this.release?.();
+			this.release = void 0;
+			surface.removeAttribute("data-raqm-swiping");
+			if (surface.hasPointerCapture(pointerId)) surface.releasePointerCapture(pointerId);
+			if (!active) return;
+			const elapsed = Math.max(1, performance.now() - startedAt);
+			const dismiss = !cancelled && (distance >= size * DISMISS_RATIO || distance / elapsed >= DISMISS_VELOCITY);
+			this.settle(dismiss, size, vertical, sign);
+		};
+		const onUp = (up) => finish(up, false);
+		const onCancel = (cancel) => finish(cancel, true);
+		const doc = surface.ownerDocument;
+		doc.addEventListener("pointermove", onMove);
+		doc.addEventListener("pointerup", onUp);
+		doc.addEventListener("pointercancel", onCancel);
+		surface.addEventListener("lostpointercapture", onCancel);
+		this.release = () => {
+			doc.removeEventListener("pointermove", onMove);
+			doc.removeEventListener("pointerup", onUp);
+			doc.removeEventListener("pointercancel", onCancel);
+			surface.removeEventListener("lostpointercapture", onCancel);
+		};
+	};
+	constructor() {
+		this.surface.addEventListener("pointerdown", this.onPointerDown);
+		this.destroyRef.onDestroy(() => {
+			this.surface.removeEventListener("pointerdown", this.onPointerDown);
+			this.release?.();
+			this.release = void 0;
+			this.clearSettleTimer();
+			this.resetSurface();
+		});
+	}
+	settle(dismiss, size, vertical, sign) {
+		const surface = this.surface;
+		const reduced = prefersReducedMotion();
+		if (dismiss) {
+			if (this.dialog === null) {
+				this.resetSurface();
+				return;
+			}
+			if (reduced) {
+				this.resetSurface();
+				this.dialog.closeFromUser();
+				return;
+			}
+			const target = size + 2;
+			surface.style.transition = `transform ${SETTLE_MS}ms var(--raqm-ease-out), opacity ${SETTLE_MS}ms var(--raqm-ease-out)`;
+			surface.style.transform = `translate3d(${vertical ? 0 : target * sign}px, ${vertical ? target * sign : 0}px, 0)`;
+			surface.style.opacity = "0";
+			if (this.backdrop) {
+				this.backdrop.style.transitionDuration = `${SETTLE_MS}ms`;
+				this.backdrop.style.opacity = "0";
+			}
+			this.settleTimer = setTimeout(() => {
+				this.settleTimer = void 0;
+				this.dialog?.closeFromUser();
+			}, SETTLE_MS);
+			return;
+		}
+		surface.style.transition = reduced ? "none" : `transform ${SETTLE_MS}ms var(--raqm-ease-out)`;
+		surface.style.transform = "translate3d(0, 0, 0)";
+		if (this.backdrop) {
+			this.backdrop.style.transitionDuration = reduced ? "0ms" : `${SETTLE_MS}ms`;
+			this.backdrop.style.opacity = "1";
+		}
+		this.settleTimer = setTimeout(() => {
+			this.settleTimer = void 0;
+			this.resetSurface();
+		}, reduced ? 0 : SETTLE_MS);
+	}
+	hasScrollableAncestor(target, vertical) {
+		let node = target;
+		while (node && node !== this.surface) {
+			const style = getComputedStyle(node);
+			const overflow = vertical ? style.overflowY : style.overflowX;
+			if (overflow === "auto" || overflow === "scroll") {
+				if ((vertical ? node.scrollHeight - node.clientHeight : node.scrollWidth - node.clientWidth) > 1) return true;
+			}
+			node = node.parentElement;
+		}
+		return false;
+	}
+	resetSurface() {
+		const surface = this.surface;
+		surface.style.transform = "";
+		surface.style.transition = "";
+		surface.style.opacity = "";
+		surface.removeAttribute("data-raqm-swiping");
+		if (this.backdrop) {
+			this.backdrop.style.opacity = "";
+			this.backdrop.style.transitionDuration = "";
+			this.backdrop = null;
+		}
+	}
+	clearSettleTimer() {
+		if (this.settleTimer !== void 0) {
+			clearTimeout(this.settleTimer);
+			this.settleTimer = void 0;
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmDrawerSwipeDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmDrawerSwipeDirective,
+		isStandalone: true,
+		selector: "[raqm-drawer-swipe]",
+		inputs: { direction: {
+			classPropertyName: "direction",
+			publicName: "direction",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmDrawerSwipeDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[raqm-drawer-swipe]" }]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { direction: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "direction",
+			required: false
+		}]
+	}] }
+});
+const SIDE = {
+	down: "bottom",
+	up: "top",
+	right: "right",
+	left: "left"
+};
+var RaqmDrawerComponent = class RaqmDrawerComponent extends RaqmDialogBaseComponent {
+	swipeDirection = input("down", ...ngDevMode ? [{ debugName: "swipeDirection" }] : /* istanbul ignore next */ []);
+	showSwipeHandle = input(false, {
+		...ngDevMode ? { debugName: "showSwipeHandle" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	floating = input(false, {
+		...ngDevMode ? { debugName: "floating" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	showCloseButton = input(false, {
+		...ngDevMode ? { debugName: "showCloseButton" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	closeLabel = input(void 0, ...ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []);
+	closeButtonVisible = this.showCloseButton;
+	closeLabelText = this.closeLabel;
+	constructor() {
+		super();
+		effect(() => {
+			this.policy?.side?.set(SIDE[this.swipeDirection()]);
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmDrawerComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RaqmDrawerComponent,
+		isStandalone: true,
+		selector: "raqm-drawer",
+		inputs: {
+			swipeDirection: {
+				classPropertyName: "swipeDirection",
+				publicName: "swipeDirection",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showSwipeHandle: {
+				classPropertyName: "showSwipeHandle",
+				publicName: "showSwipeHandle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			floating: {
+				classPropertyName: "floating",
+				publicName: "floating",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showCloseButton: {
+				classPropertyName: "showCloseButton",
+				publicName: "showCloseButton",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeLabel: {
+				classPropertyName: "closeLabel",
+				publicName: "closeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		providers: [{
+			provide: RAQM_DIALOG,
+			useExisting: RaqmDrawerComponent
+		}, {
+			provide: RAQM_DIALOG_POLICY,
+			useFactory: () => ({
+				role: "dialog",
+				contentClass: "raqm-drawer-content",
+				touchOpening: signal(false),
+				dismissOnBackdrop: true,
+				side: signal("bottom"),
+				paneClass: "raqm-drawer-overlay-pane",
+				backdropClass: "raqm-drawer-overlay-backdrop",
+				exitAnimationMs: 300
+			})
+		}],
+		exportAs: ["raqmDrawer"],
+		usesInheritance: true,
+		ngImport: i0,
+		template: "<ng-content />\r\n\r\n<ng-template #panel>\r\n  <div\r\n    class=\"raqm-dialog-content\"\r\n    [class]=\"policy?.contentClass ?? ''\"\r\n    [attr.data-raqm-side]=\"policy?.side?.() ?? null\"\r\n    [attr.data-raqm-swipe-direction]=\"swipeDirection()\"\r\n    [attr.data-raqm-floating]=\"floating() ? '' : null\"\r\n    [attr.dir]=\"panelDir()\"\r\n    [class.raqm-dialog-content--entering]=\"entering()\"\r\n    [class.raqm-dialog-content--closing]=\"closing()\"\r\n    raqm-drawer-swipe\r\n    [direction]=\"swipeDirection()\"\r\n  >\r\n    @if (showSwipeHandle()) {\r\n      <!-- Decorative grab affordance; the gesture itself is on the surface. -->\r\n      <div class=\"raqm-drawer-swipe-handle\" data-raqm-drawer-swipe-handle aria-hidden=\"true\"></div>\r\n    }\r\n\r\n    <div class=\"raqm-drawer-body\">\r\n      <ng-container [ngTemplateOutlet]=\"contentTemplate()\" />\r\n    </div>\r\n\r\n    <!-- Opt-in close control; the library ships none by default. -->\r\n    @if (closeButtonVisible()) {\r\n      <button\r\n        raqm-button=\"ghost\"\r\n        icon-small\r\n        class=\"raqm-dialog-close\"\r\n        [attr.aria-label]=\"closeLabelText()\"\r\n        (click)=\"onCloseButtonClick()\"\r\n      >\r\n        <svg\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          aria-hidden=\"true\"\r\n          focusable=\"false\"\r\n        >\r\n          <path d=\"M18 6 6 18\" />\r\n          <path d=\"m6 6 12 12\" />\r\n        </svg>\r\n      </button>\r\n    }\r\n  </div>\r\n</ng-template>\r\n",
+		styles: [":host{display:contents}.raqm-dialog-content{position:relative;display:grid;gap:calc(var(--raqm-spacing) * 6);box-sizing:border-box;inline-size:calc(100vw - 2rem);inline-size:calc(100dvw - 2rem);max-inline-size:100%;max-block-size:calc(100vh - 2rem);max-block-size:calc(100dvh - 2rem);overflow:auto;padding:calc(var(--raqm-spacing) * 6);border-radius:var(--raqm-radius-xl);background-color:var(--raqm-popover);color:var(--raqm-popover-foreground);font-size:var(--raqm-font-size-sm);line-height:1.25rem;box-shadow:0 0 0 1px color-mix(in oklch,var(--raqm-foreground) 10%,transparent);outline:none}@media(min-width:40rem){.raqm-dialog-content{inline-size:24rem}}.raqm-dialog-content--entering{animation:raqm-dialog-in var(--raqm-duration-fast) var(--raqm-ease-out)}@keyframes raqm-dialog-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}.raqm-dialog-content--closing{opacity:0;transform:scale(.95);transition:opacity var(--raqm-duration-fast) var(--raqm-ease-out),transform var(--raqm-duration-fast) var(--raqm-ease-out)}@media(prefers-reduced-motion:reduce){.raqm-dialog-content,.raqm-dialog-content--closing{animation:none;transition:none}}.raqm-dialog-close{position:absolute;inset-block-start:calc(var(--raqm-spacing) * 4.5);inset-inline-end:calc(var(--raqm-spacing) * 4.5)}@media(forced-colors:active){.raqm-dialog-close{border-color:ButtonText}.raqm-dialog-content{border:1px solid CanvasText}}\n", ".raqm-dialog-content.raqm-drawer-content{position:absolute;display:flex;flex-direction:column;gap:0;box-sizing:border-box;padding:0;border:0 solid var(--raqm-border);border-radius:0;inline-size:100%;max-inline-size:100%;max-block-size:none;background-color:var(--raqm-popover);color:var(--raqm-popover-foreground);font-size:var(--raqm-font-size-sm);line-height:1.25rem;box-shadow:none;overflow:hidden;overscroll-behavior:contain;pointer-events:auto;--raqm-drawer-exit-x: 0px;--raqm-drawer-exit-y: 0px}.raqm-dialog-content.raqm-drawer-content[data-raqm-side=bottom],.raqm-dialog-content.raqm-drawer-content[data-raqm-side=top]{inset-inline:0;block-size:auto;max-block-size:calc(100dvh - 6rem)}.raqm-dialog-content.raqm-drawer-content[data-raqm-side=bottom]{inset-block-end:0;border-block-start-width:1px;border-start-start-radius:var(--raqm-radius-xl);border-start-end-radius:var(--raqm-radius-xl);--raqm-drawer-exit-y: calc(100% + 2px) }.raqm-dialog-content.raqm-drawer-content[data-raqm-side=top]{inset-block-start:0;border-block-end-width:1px;border-end-start-radius:var(--raqm-radius-xl);border-end-end-radius:var(--raqm-radius-xl);--raqm-drawer-exit-y: calc(-100% - 2px) }.raqm-dialog-content.raqm-drawer-content[data-raqm-side=right],.raqm-dialog-content.raqm-drawer-content[data-raqm-side=left]{inset-block:0;block-size:100%;inline-size:75%;max-inline-size:75%;flex-direction:row}.raqm-dialog-content.raqm-drawer-content[data-raqm-side=right]{inset-inline-end:0;border-inline-start-width:1px;border-start-start-radius:var(--raqm-radius-xl);border-end-start-radius:var(--raqm-radius-xl);--raqm-drawer-exit-x: calc(100% + 2px) }.raqm-dialog-content.raqm-drawer-content[data-raqm-side=left]{inset-inline-start:0;border-inline-end-width:1px;border-start-end-radius:var(--raqm-radius-xl);border-end-end-radius:var(--raqm-radius-xl);--raqm-drawer-exit-x: calc(-100% - 2px) }.raqm-dialog-content.raqm-drawer-content[dir=rtl][data-raqm-side=right]{--raqm-drawer-exit-x: calc(-100% - 2px) }.raqm-dialog-content.raqm-drawer-content[dir=rtl][data-raqm-side=left]{--raqm-drawer-exit-x: calc(100% + 2px) }.raqm-dialog-content.raqm-drawer-content[data-raqm-floating]{margin:calc(var(--raqm-spacing) * 2);border-width:1px;border-radius:24px;box-shadow:var(--raqm-shadow-lg)}.raqm-dialog-content.raqm-drawer-content[data-raqm-floating][data-raqm-side=right],.raqm-dialog-content.raqm-drawer-content[data-raqm-floating][data-raqm-side=left]{block-size:auto;max-block-size:none}.raqm-dialog-content.raqm-drawer-content[data-raqm-floating][data-raqm-side=bottom],.raqm-dialog-content.raqm-drawer-content[data-raqm-floating][data-raqm-side=top]{inline-size:auto}.raqm-dialog-content.raqm-drawer-content.raqm-dialog-content--entering{animation:raqm-drawer-in var(--raqm-duration-slower) var(--raqm-ease-emphasized)}.raqm-dialog-content.raqm-drawer-content.raqm-dialog-content--closing{opacity:0;transform:translate3d(var(--raqm-drawer-exit-x),var(--raqm-drawer-exit-y),0);transition:opacity var(--raqm-duration-slower) var(--raqm-ease-emphasized),transform var(--raqm-duration-slower) var(--raqm-ease-emphasized)}.raqm-dialog-content.raqm-drawer-content[data-raqm-swiping]{transition:none;cursor:grabbing;-webkit-user-select:none;user-select:none}.raqm-dialog-content.raqm-drawer-content .raqm-dialog-close{inset-block-start:calc(var(--raqm-spacing) * 3);inset-inline-end:calc(var(--raqm-spacing) * 3)}@keyframes raqm-drawer-in{0%{opacity:0;transform:translate3d(var(--raqm-drawer-exit-x),var(--raqm-drawer-exit-y),0)}to{opacity:1;transform:none}}.raqm-drawer-body{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;overflow-y:auto;overscroll-behavior:contain}.raqm-drawer-swipe-handle{position:relative;z-index:1;display:flex;flex:none;align-items:center;justify-content:center;cursor:grab;touch-action:none}.raqm-drawer-swipe-handle:after{content:\"\";display:block;border-radius:9999px;background-color:var(--raqm-muted)}.raqm-drawer-content[data-raqm-side=bottom] .raqm-drawer-swipe-handle,.raqm-drawer-content[data-raqm-side=top] .raqm-drawer-swipe-handle{flex-direction:row;block-size:calc(var(--raqm-spacing) * 3);inline-size:100%}.raqm-drawer-content[data-raqm-side=bottom] .raqm-drawer-swipe-handle:after,.raqm-drawer-content[data-raqm-side=top] .raqm-drawer-swipe-handle:after{block-size:calc(var(--raqm-spacing) * 1);inline-size:calc(var(--raqm-spacing) * 24)}.raqm-drawer-content[data-raqm-side=bottom] .raqm-drawer-swipe-handle{align-items:flex-end}.raqm-drawer-content[data-raqm-side=top] .raqm-drawer-swipe-handle{align-items:flex-start;order:1}.raqm-drawer-content[data-raqm-side=right] .raqm-drawer-swipe-handle,.raqm-drawer-content[data-raqm-side=left] .raqm-drawer-swipe-handle{flex-direction:column;block-size:100%;inline-size:calc(var(--raqm-spacing) * 3)}.raqm-drawer-content[data-raqm-side=right] .raqm-drawer-swipe-handle:after,.raqm-drawer-content[data-raqm-side=left] .raqm-drawer-swipe-handle:after{block-size:calc(var(--raqm-spacing) * 24);inline-size:calc(var(--raqm-spacing) * 1)}.raqm-drawer-content[data-raqm-side=left] .raqm-drawer-swipe-handle{order:1}@media(min-width:40rem){.raqm-dialog-content.raqm-drawer-content[data-raqm-side=right],.raqm-dialog-content.raqm-drawer-content[data-raqm-side=left]{inline-size:calc(var(--raqm-spacing) * 96);max-inline-size:calc(var(--raqm-spacing) * 96)}}@media(prefers-reduced-motion:reduce){.raqm-dialog-content.raqm-drawer-content{animation:none;transition:none}}@media(forced-colors:active){.raqm-dialog-content.raqm-drawer-content{border-color:CanvasText}.raqm-drawer-swipe-handle:after{background-color:CanvasText}}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: RaqmButton,
+				selector: "button[raqm-button], a[raqm-button]",
+				inputs: [
+					"raqm-button",
+					"extra-small",
+					"small",
+					"large",
+					"icon",
+					"icon-extra-small",
+					"icon-small",
+					"icon-large",
+					"disabled",
+					"tabindex"
+				]
+			},
+			{
+				kind: "directive",
+				type: RaqmDrawerSwipeDirective,
+				selector: "[raqm-drawer-swipe]",
+				inputs: ["direction"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmDrawerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-drawer",
+			imports: [
+				NgTemplateOutlet,
+				RaqmButton,
+				RaqmDrawerSwipeDirective
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			exportAs: "raqmDrawer",
+			providers: [{
+				provide: RAQM_DIALOG,
+				useExisting: RaqmDrawerComponent
+			}, {
+				provide: RAQM_DIALOG_POLICY,
+				useFactory: () => ({
+					role: "dialog",
+					contentClass: "raqm-drawer-content",
+					touchOpening: signal(false),
+					dismissOnBackdrop: true,
+					side: signal("bottom"),
+					paneClass: "raqm-drawer-overlay-pane",
+					backdropClass: "raqm-drawer-overlay-backdrop",
+					exitAnimationMs: 300
+				})
+			}],
+			template: "<ng-content />\r\n\r\n<ng-template #panel>\r\n  <div\r\n    class=\"raqm-dialog-content\"\r\n    [class]=\"policy?.contentClass ?? ''\"\r\n    [attr.data-raqm-side]=\"policy?.side?.() ?? null\"\r\n    [attr.data-raqm-swipe-direction]=\"swipeDirection()\"\r\n    [attr.data-raqm-floating]=\"floating() ? '' : null\"\r\n    [attr.dir]=\"panelDir()\"\r\n    [class.raqm-dialog-content--entering]=\"entering()\"\r\n    [class.raqm-dialog-content--closing]=\"closing()\"\r\n    raqm-drawer-swipe\r\n    [direction]=\"swipeDirection()\"\r\n  >\r\n    @if (showSwipeHandle()) {\r\n      <!-- Decorative grab affordance; the gesture itself is on the surface. -->\r\n      <div class=\"raqm-drawer-swipe-handle\" data-raqm-drawer-swipe-handle aria-hidden=\"true\"></div>\r\n    }\r\n\r\n    <div class=\"raqm-drawer-body\">\r\n      <ng-container [ngTemplateOutlet]=\"contentTemplate()\" />\r\n    </div>\r\n\r\n    <!-- Opt-in close control; the library ships none by default. -->\r\n    @if (closeButtonVisible()) {\r\n      <button\r\n        raqm-button=\"ghost\"\r\n        icon-small\r\n        class=\"raqm-dialog-close\"\r\n        [attr.aria-label]=\"closeLabelText()\"\r\n        (click)=\"onCloseButtonClick()\"\r\n      >\r\n        <svg\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          aria-hidden=\"true\"\r\n          focusable=\"false\"\r\n        >\r\n          <path d=\"M18 6 6 18\" />\r\n          <path d=\"m6 6 12 12\" />\r\n        </svg>\r\n      </button>\r\n    }\r\n  </div>\r\n</ng-template>\r\n",
+			styles: [":host{display:contents}.raqm-dialog-content{position:relative;display:grid;gap:calc(var(--raqm-spacing) * 6);box-sizing:border-box;inline-size:calc(100vw - 2rem);inline-size:calc(100dvw - 2rem);max-inline-size:100%;max-block-size:calc(100vh - 2rem);max-block-size:calc(100dvh - 2rem);overflow:auto;padding:calc(var(--raqm-spacing) * 6);border-radius:var(--raqm-radius-xl);background-color:var(--raqm-popover);color:var(--raqm-popover-foreground);font-size:var(--raqm-font-size-sm);line-height:1.25rem;box-shadow:0 0 0 1px color-mix(in oklch,var(--raqm-foreground) 10%,transparent);outline:none}@media(min-width:40rem){.raqm-dialog-content{inline-size:24rem}}.raqm-dialog-content--entering{animation:raqm-dialog-in var(--raqm-duration-fast) var(--raqm-ease-out)}@keyframes raqm-dialog-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}.raqm-dialog-content--closing{opacity:0;transform:scale(.95);transition:opacity var(--raqm-duration-fast) var(--raqm-ease-out),transform var(--raqm-duration-fast) var(--raqm-ease-out)}@media(prefers-reduced-motion:reduce){.raqm-dialog-content,.raqm-dialog-content--closing{animation:none;transition:none}}.raqm-dialog-close{position:absolute;inset-block-start:calc(var(--raqm-spacing) * 4.5);inset-inline-end:calc(var(--raqm-spacing) * 4.5)}@media(forced-colors:active){.raqm-dialog-close{border-color:ButtonText}.raqm-dialog-content{border:1px solid CanvasText}}\n", ".raqm-dialog-content.raqm-drawer-content{position:absolute;display:flex;flex-direction:column;gap:0;box-sizing:border-box;padding:0;border:0 solid var(--raqm-border);border-radius:0;inline-size:100%;max-inline-size:100%;max-block-size:none;background-color:var(--raqm-popover);color:var(--raqm-popover-foreground);font-size:var(--raqm-font-size-sm);line-height:1.25rem;box-shadow:none;overflow:hidden;overscroll-behavior:contain;pointer-events:auto;--raqm-drawer-exit-x: 0px;--raqm-drawer-exit-y: 0px}.raqm-dialog-content.raqm-drawer-content[data-raqm-side=bottom],.raqm-dialog-content.raqm-drawer-content[data-raqm-side=top]{inset-inline:0;block-size:auto;max-block-size:calc(100dvh - 6rem)}.raqm-dialog-content.raqm-drawer-content[data-raqm-side=bottom]{inset-block-end:0;border-block-start-width:1px;border-start-start-radius:var(--raqm-radius-xl);border-start-end-radius:var(--raqm-radius-xl);--raqm-drawer-exit-y: calc(100% + 2px) }.raqm-dialog-content.raqm-drawer-content[data-raqm-side=top]{inset-block-start:0;border-block-end-width:1px;border-end-start-radius:var(--raqm-radius-xl);border-end-end-radius:var(--raqm-radius-xl);--raqm-drawer-exit-y: calc(-100% - 2px) }.raqm-dialog-content.raqm-drawer-content[data-raqm-side=right],.raqm-dialog-content.raqm-drawer-content[data-raqm-side=left]{inset-block:0;block-size:100%;inline-size:75%;max-inline-size:75%;flex-direction:row}.raqm-dialog-content.raqm-drawer-content[data-raqm-side=right]{inset-inline-end:0;border-inline-start-width:1px;border-start-start-radius:var(--raqm-radius-xl);border-end-start-radius:var(--raqm-radius-xl);--raqm-drawer-exit-x: calc(100% + 2px) }.raqm-dialog-content.raqm-drawer-content[data-raqm-side=left]{inset-inline-start:0;border-inline-end-width:1px;border-start-end-radius:var(--raqm-radius-xl);border-end-end-radius:var(--raqm-radius-xl);--raqm-drawer-exit-x: calc(-100% - 2px) }.raqm-dialog-content.raqm-drawer-content[dir=rtl][data-raqm-side=right]{--raqm-drawer-exit-x: calc(-100% - 2px) }.raqm-dialog-content.raqm-drawer-content[dir=rtl][data-raqm-side=left]{--raqm-drawer-exit-x: calc(100% + 2px) }.raqm-dialog-content.raqm-drawer-content[data-raqm-floating]{margin:calc(var(--raqm-spacing) * 2);border-width:1px;border-radius:24px;box-shadow:var(--raqm-shadow-lg)}.raqm-dialog-content.raqm-drawer-content[data-raqm-floating][data-raqm-side=right],.raqm-dialog-content.raqm-drawer-content[data-raqm-floating][data-raqm-side=left]{block-size:auto;max-block-size:none}.raqm-dialog-content.raqm-drawer-content[data-raqm-floating][data-raqm-side=bottom],.raqm-dialog-content.raqm-drawer-content[data-raqm-floating][data-raqm-side=top]{inline-size:auto}.raqm-dialog-content.raqm-drawer-content.raqm-dialog-content--entering{animation:raqm-drawer-in var(--raqm-duration-slower) var(--raqm-ease-emphasized)}.raqm-dialog-content.raqm-drawer-content.raqm-dialog-content--closing{opacity:0;transform:translate3d(var(--raqm-drawer-exit-x),var(--raqm-drawer-exit-y),0);transition:opacity var(--raqm-duration-slower) var(--raqm-ease-emphasized),transform var(--raqm-duration-slower) var(--raqm-ease-emphasized)}.raqm-dialog-content.raqm-drawer-content[data-raqm-swiping]{transition:none;cursor:grabbing;-webkit-user-select:none;user-select:none}.raqm-dialog-content.raqm-drawer-content .raqm-dialog-close{inset-block-start:calc(var(--raqm-spacing) * 3);inset-inline-end:calc(var(--raqm-spacing) * 3)}@keyframes raqm-drawer-in{0%{opacity:0;transform:translate3d(var(--raqm-drawer-exit-x),var(--raqm-drawer-exit-y),0)}to{opacity:1;transform:none}}.raqm-drawer-body{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;overflow-y:auto;overscroll-behavior:contain}.raqm-drawer-swipe-handle{position:relative;z-index:1;display:flex;flex:none;align-items:center;justify-content:center;cursor:grab;touch-action:none}.raqm-drawer-swipe-handle:after{content:\"\";display:block;border-radius:9999px;background-color:var(--raqm-muted)}.raqm-drawer-content[data-raqm-side=bottom] .raqm-drawer-swipe-handle,.raqm-drawer-content[data-raqm-side=top] .raqm-drawer-swipe-handle{flex-direction:row;block-size:calc(var(--raqm-spacing) * 3);inline-size:100%}.raqm-drawer-content[data-raqm-side=bottom] .raqm-drawer-swipe-handle:after,.raqm-drawer-content[data-raqm-side=top] .raqm-drawer-swipe-handle:after{block-size:calc(var(--raqm-spacing) * 1);inline-size:calc(var(--raqm-spacing) * 24)}.raqm-drawer-content[data-raqm-side=bottom] .raqm-drawer-swipe-handle{align-items:flex-end}.raqm-drawer-content[data-raqm-side=top] .raqm-drawer-swipe-handle{align-items:flex-start;order:1}.raqm-drawer-content[data-raqm-side=right] .raqm-drawer-swipe-handle,.raqm-drawer-content[data-raqm-side=left] .raqm-drawer-swipe-handle{flex-direction:column;block-size:100%;inline-size:calc(var(--raqm-spacing) * 3)}.raqm-drawer-content[data-raqm-side=right] .raqm-drawer-swipe-handle:after,.raqm-drawer-content[data-raqm-side=left] .raqm-drawer-swipe-handle:after{block-size:calc(var(--raqm-spacing) * 24);inline-size:calc(var(--raqm-spacing) * 1)}.raqm-drawer-content[data-raqm-side=left] .raqm-drawer-swipe-handle{order:1}@media(min-width:40rem){.raqm-dialog-content.raqm-drawer-content[data-raqm-side=right],.raqm-dialog-content.raqm-drawer-content[data-raqm-side=left]{inline-size:calc(var(--raqm-spacing) * 96);max-inline-size:calc(var(--raqm-spacing) * 96)}}@media(prefers-reduced-motion:reduce){.raqm-dialog-content.raqm-drawer-content{animation:none;transition:none}}@media(forced-colors:active){.raqm-dialog-content.raqm-drawer-content{border-color:CanvasText}.raqm-drawer-swipe-handle:after{background-color:CanvasText}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		swipeDirection: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "swipeDirection",
+				required: false
+			}]
+		}],
+		showSwipeHandle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showSwipeHandle",
+				required: false
+			}]
+		}],
+		floating: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "floating",
+				required: false
+			}]
+		}],
+		showCloseButton: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showCloseButton",
+				required: false
+			}]
+		}],
+		closeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeLabel",
+				required: false
+			}]
+		}]
+	}
+});
+var RaqmDrawerTriggerDirective = class RaqmDrawerTriggerDirective extends RaqmDialogTriggerDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmDrawerTriggerDirective,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmDrawerTriggerDirective,
+		isStandalone: true,
+		selector: "button[raqm-drawer-trigger]",
+		host: { classAttribute: "raqm-drawer-trigger" },
+		usesInheritance: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmDrawerTriggerDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[raqm-drawer-trigger]",
+			host: { class: "raqm-drawer-trigger" }
+		}]
+	}]
+});
+var RaqmDrawerCloseDirective = class RaqmDrawerCloseDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmDrawerCloseDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmDrawerCloseDirective,
+		isStandalone: true,
+		selector: "button[raqm-drawer-close]",
+		host: { classAttribute: "raqm-drawer-close-control" },
+		hostDirectives: [{ directive: i1.RaqmDialogCloseDirective }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmDrawerCloseDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[raqm-drawer-close]",
+			hostDirectives: [RaqmDialogCloseDirective],
+			host: { class: "raqm-drawer-close-control" }
+		}]
+	}]
+});
+var RaqmDrawerContentDirective = class RaqmDrawerContentDirective extends RaqmDialogContentDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmDrawerContentDirective,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmDrawerContentDirective,
+		isStandalone: true,
+		selector: "ng-template[raqm-drawer-content]",
+		exportAs: ["raqmDrawerContent"],
+		usesInheritance: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmDrawerContentDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[raqm-drawer-content]",
+			exportAs: "raqmDrawerContent"
+		}]
+	}]
+});
+var RaqmDrawerHeaderDirective = class RaqmDrawerHeaderDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmDrawerHeaderDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmDrawerHeaderDirective,
+		isStandalone: true,
+		selector: "[raqm-drawer-header]",
+		host: { classAttribute: "raqm-drawer-header" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmDrawerHeaderDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-drawer-header]",
+			host: { class: "raqm-drawer-header" }
+		}]
+	}]
+});
+var RaqmDrawerFooterDirective = class RaqmDrawerFooterDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmDrawerFooterDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmDrawerFooterDirective,
+		isStandalone: true,
+		selector: "[raqm-drawer-footer]",
+		host: { classAttribute: "raqm-drawer-footer" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmDrawerFooterDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-drawer-footer]",
+			host: { class: "raqm-drawer-footer" }
+		}]
+	}]
+});
+var RaqmDrawerTitleDirective = class RaqmDrawerTitleDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmDrawerTitleDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmDrawerTitleDirective,
+		isStandalone: true,
+		selector: "[raqm-drawer-title]",
+		host: { classAttribute: "raqm-drawer-title" },
+		hostDirectives: [{ directive: i1.RaqmDialogTitleDirective }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmDrawerTitleDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-drawer-title]",
+			hostDirectives: [RaqmDialogTitleDirective],
+			host: { class: "raqm-drawer-title" }
+		}]
+	}]
+});
+var RaqmDrawerDescriptionDirective = class RaqmDrawerDescriptionDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmDrawerDescriptionDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmDrawerDescriptionDirective,
+		isStandalone: true,
+		selector: "[raqm-drawer-description]",
+		host: { classAttribute: "raqm-drawer-description" },
+		hostDirectives: [{ directive: i1.RaqmDialogDescriptionDirective }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmDrawerDescriptionDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-drawer-description]",
+			hostDirectives: [RaqmDialogDescriptionDirective],
+			host: { class: "raqm-drawer-description" }
+		}]
+	}]
+});
+const RaqmDrawer = [
+	RaqmDrawerComponent,
+	RaqmDrawerTriggerDirective,
+	RaqmDrawerCloseDirective,
+	RaqmDrawerContentDirective,
+	RaqmDrawerHeaderDirective,
+	RaqmDrawerFooterDirective,
+	RaqmDrawerTitleDirective,
+	RaqmDrawerDescriptionDirective
+];
+export { RaqmDrawer, RaqmDrawerCloseDirective, RaqmDrawerComponent, RaqmDrawerContentDirective, RaqmDrawerDescriptionDirective, RaqmDrawerFooterDirective, RaqmDrawerHeaderDirective, RaqmDrawerTitleDirective, RaqmDrawerTriggerDirective };
+
+//# sourceMappingURL=raqm-ui-drawer.mjs.map