@hyalo/angular 0.0.0-stage → 0.3.1

package/fesm2022/hyalo-angular-dialog.mjs

@@ -0,0 +1,600 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ElementRef, Injectable, InjectionToken, Injector, afterNextRender, inject, input } from "@angular/core";
+import { filter, firstValueFrom } from "rxjs";
+import { HyMotion, HySpring, HyVelocityTracker, MOTION, SPRINGS, project, rubberband } from "@hyalo/angular/motion";
+import { HyFidelity, injectId } from "@hyalo/angular/core";
+import { Dialog } from "@angular/cdk/dialog";
+import { HyButton } from "@hyalo/angular/button";
+import { createGlobalPositionStrategy } from "@angular/cdk/overlay";
+const HY_DIALOG_DATA = new InjectionToken("HY_DIALOG_DATA");
+var HyDialogRef = class {
+	cdkRef;
+	closing = false;
+	closed;
+	exit = null;
+	constructor(cdkRef) {
+		this.cdkRef = cdkRef;
+		this.closed = firstValueFrom(cdkRef.closed, { defaultValue: void 0 });
+	}
+	get id() {
+		return this.cdkRef.id;
+	}
+	get containerElement() {
+		return this.cdkRef.overlayRef.overlayElement?.querySelector(".cdk-dialog-container") ?? null;
+	}
+	close(result) {
+		if (this.closing) return;
+		this.closing = true;
+		if (this.exit) {
+			this.exit(() => this.cdkRef.close(result));
+			return;
+		}
+		const pane = this.cdkRef.overlayRef.overlayElement;
+		const backdrop = this.cdkRef.overlayRef.backdropElement;
+		const panel = this.containerElement;
+		pane.dataset["state"] = "closing";
+		backdrop?.setAttribute("data-state", "closing");
+		let done = false;
+		const finish = () => {
+			if (done) return;
+			done = true;
+			pane.removeEventListener("animationend", onEnd);
+			this.cdkRef.close(result);
+		};
+		const onEnd = (event) => {
+			if (event.target === pane || event.target === panel) finish();
+		};
+		pane.addEventListener("animationend", onEnd);
+		setTimeout(finish, MOTION.settle.duration * 1e3 + 80);
+	}
+	cancelClose() {
+		this.closing = false;
+	}
+};
+var HyDialogTitle = class HyDialogTitle {
+	id = injectId("dialog-title");
+	constructor() {
+		const el = inject(ElementRef).nativeElement;
+		afterNextRender(() => el.closest("[role=\"dialog\"], [role=\"alertdialog\"]")?.setAttribute("aria-labelledby", this.id));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyDialogTitle,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: HyDialogTitle,
+		isStandalone: true,
+		selector: "[hyDialogTitle]",
+		host: {
+			properties: { "id": "id" },
+			classAttribute: "hy-dialog__title"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyDialogTitle,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[hyDialogTitle]",
+			host: {
+				class: "hy-dialog__title",
+				"[id]": "id"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+var HyDialogContent = class HyDialogContent {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyDialogContent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: HyDialogContent,
+		isStandalone: true,
+		selector: "[hyDialogContent]",
+		host: { classAttribute: "hy-dialog__content" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyDialogContent,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[hyDialogContent]",
+			host: { class: "hy-dialog__content" }
+		}]
+	}]
+});
+var HyDialogActions = class HyDialogActions {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyDialogActions,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: HyDialogActions,
+		isStandalone: true,
+		selector: "[hyDialogActions]",
+		host: { classAttribute: "hy-dialog__actions" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyDialogActions,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[hyDialogActions]",
+			host: { class: "hy-dialog__actions" }
+		}]
+	}]
+});
+var HyDialogClose = class HyDialogClose {
+	ref = inject(HyDialogRef, { optional: true });
+	hyDialogClose = input(void 0, {
+		...ngDevMode ? { debugName: "hyDialogClose" } : /* istanbul ignore next */ {},
+		transform: (value) => value === "" ? void 0 : value
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyDialogClose,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HyDialogClose,
+		isStandalone: true,
+		selector: "button[hyDialogClose]",
+		inputs: { hyDialogClose: {
+			classPropertyName: "hyDialogClose",
+			publicName: "hyDialogClose",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "type": "button" },
+			listeners: { "click": "ref?.close(hyDialogClose())" }
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyDialogClose,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[hyDialogClose]",
+			host: {
+				type: "button",
+				"(click)": "ref?.close(hyDialogClose())"
+			}
+		}]
+	}],
+	propDecorators: { hyDialogClose: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "hyDialogClose",
+			required: false
+		}]
+	}] }
+});
+const HY_DIALOG_PARTS = [
+	HyDialogTitle,
+	HyDialogContent,
+	HyDialogActions,
+	HyDialogClose
+];
+const SLOP = 10;
+const INTERACTIVE = "button, a[href], input, select, textarea, label, summary, [contenteditable], [role=\"slider\"], [tabindex]:not([tabindex=\"-1\"])";
+function driveSheet(panel, backdrop, side, host) {
+	const lifetime = new ((panel.ownerDocument.defaultView?.AbortController) ?? AbortController)();
+	let disposed = false;
+	let resize;
+	let clickTimer;
+	const vertical = side === "bottom";
+	const rtl = getComputedStyle(panel).direction === "rtl";
+	const sign = vertical ? 1 : side === "end" !== rtl ? 1 : -1;
+	const size = () => (vertical ? panel.offsetHeight : panel.offsetWidth) + 32;
+	panel.classList.add("hy-sheet-driven");
+	if (backdrop) backdrop.style.transition = "none";
+	const paint = (offset) => {
+		const full = size();
+		let shown = offset < 0 ? rubberband(offset, full) : offset;
+		if (!host.dismissible && offset > 0) shown = rubberband(offset, full);
+		const px = `${shown * sign}px`;
+		panel.style.translate = vertical ? `0 ${px}` : `${px} 0`;
+		if (backdrop) backdrop.style.opacity = String(Math.min(1, Math.max(0, 1 - shown / full)));
+	};
+	const spring = new HySpring(0, paint);
+	panel.style.translate = vertical ? "0 100%" : `${sign * 100}% 0`;
+	if (backdrop) backdrop.style.opacity = "0";
+	let enterFrame = requestAnimationFrame(() => {
+		enterFrame = 0;
+		spring.set(size());
+		spring.to(0, SPRINGS.settle);
+	});
+	let closing = false;
+	const exit = (finish) => {
+		cancelAnimationFrame(enterFrame);
+		enterFrame = 0;
+		if (disposed || panel.ownerDocument.hidden) {
+			spring.stop();
+			finish();
+			return;
+		}
+		closing = true;
+		spring.to(size(), {
+			...SPRINGS.settle,
+			onRest: finish
+		});
+	};
+	if (vertical) {
+		const grabber = panel.ownerDocument.createElement("div");
+		grabber.className = "hy-drawer__grabber";
+		grabber.setAttribute("aria-hidden", "true");
+		panel.prepend(grabber);
+		if (typeof ResizeObserver === "function") {
+			resize = new ResizeObserver(() => {
+				panel.style.touchAction = panel.scrollHeight > panel.clientHeight + 1 ? "" : "none";
+			});
+			resize.observe(panel);
+		}
+	}
+	let press = null;
+	const tracker = new HyVelocityTracker();
+	const along = (e) => (vertical ? e.clientY : e.clientX) * sign;
+	const across = (e) => vertical ? e.clientX : e.clientY;
+	const grab = (p, e) => {
+		p.dragging = true;
+		p.x = along(e);
+		p.from = spring.value;
+		spring.stop();
+		if (closing) {
+			closing = false;
+			host.cancelClose();
+		}
+		tracker.reset();
+		tracker.add(spring.value);
+		try {
+			panel.setPointerCapture(e.pointerId);
+		} catch {}
+		panel.dataset["dragging"] = "";
+		panel.ownerDocument.getSelection()?.removeAllRanges();
+	};
+	panel.addEventListener("pointerdown", (e) => {
+		if (e.button !== 0 || !e.isPrimary) return;
+		const target = e.target;
+		const onGrabber = !!target.closest(".hy-drawer__grabber");
+		if (!onGrabber && target.closest(INTERACTIVE)) return;
+		if (vertical && !onGrabber && panel.scrollTop > 0) return;
+		const p = {
+			id: e.pointerId,
+			x: along(e),
+			y: across(e),
+			from: spring.value,
+			dragging: false
+		};
+		press = p;
+		if (spring.running) grab(p, e);
+	}, { signal: lifetime.signal });
+	panel.addEventListener("pointermove", (e) => {
+		if (!press || e.pointerId !== press.id) return;
+		const moved = along(e) - press.x;
+		if (!press.dragging) {
+			const cross = Math.abs(across(e) - press.y);
+			if (cross > SLOP && cross > Math.abs(moved)) {
+				press = null;
+				return;
+			}
+			if (Math.abs(moved) < SLOP) return;
+			grab(press, e);
+			return;
+		}
+		const offset = press.from + moved;
+		tracker.add(offset);
+		spring.set(offset);
+	}, { signal: lifetime.signal });
+	const swallow = (click) => {
+		click.stopPropagation();
+		click.preventDefault();
+	};
+	const release = (e) => {
+		if (!press || e.pointerId !== press.id) return;
+		const wasDragging = press.dragging;
+		press = null;
+		if (!wasDragging) return;
+		delete panel.dataset["dragging"];
+		panel.addEventListener("click", swallow, {
+			capture: true,
+			once: true,
+			signal: lifetime.signal
+		});
+		clearTimeout(clickTimer);
+		clickTimer = setTimeout(() => panel.removeEventListener("click", swallow, { capture: true }));
+		const velocity = e.type === "pointercancel" ? 0 : tracker.velocity();
+		const full = size();
+		const landing = spring.value + project(velocity);
+		const out = Math.abs(velocity) > 400 ? velocity > 0 : landing > full / 2;
+		spring.velocity = velocity;
+		if (out && host.dismissible) host.close();
+		else spring.to(0, SPRINGS.settle);
+	};
+	panel.addEventListener("pointerup", release, { signal: lifetime.signal });
+	panel.addEventListener("pointercancel", release, { signal: lifetime.signal });
+	return {
+		exit,
+		destroy: () => {
+			if (disposed) return;
+			disposed = true;
+			cancelAnimationFrame(enterFrame);
+			spring.stop();
+			resize?.disconnect();
+			lifetime.abort();
+			clearTimeout(clickTimer);
+			press = null;
+		}
+	};
+}
+function openSurface(cdk, motion, fidelity, content, config, extra) {
+	let ref;
+	const dismissible = config.dismissible ?? true;
+	const cdkRef = cdk.open(content, {
+		data: config.data,
+		role: config.role ?? "dialog",
+		ariaLabel: config.label ?? null,
+		autoFocus: config.autoFocus ?? "first-tabbable",
+		restoreFocus: true,
+		ariaModal: true,
+		disableClose: true,
+		hasBackdrop: true,
+		backdropClass: "hy-backdrop",
+		panelClass: extra.panelClass,
+		positionStrategy: extra.positionStrategy,
+		width: extra.width,
+		maxWidth: extra.maxWidth,
+		height: extra.height,
+		providers: (dialogRef) => {
+			ref = new HyDialogRef(dialogRef);
+			return [{
+				provide: HyDialogRef,
+				useValue: ref
+			}, {
+				provide: HY_DIALOG_DATA,
+				useValue: config.data
+			}];
+		}
+	});
+	const hyRef = ref ?? new HyDialogRef(cdkRef);
+	const container = hyRef.containerElement;
+	if (container) {
+		container.classList.add("hy-glass");
+		container.dataset["material"] = fidelity.tier() === "low" ? "solid" : config.material ?? "frosted";
+		container.dataset["thickness"] = "thick";
+		if (extra.sheet && !motion.reduced()) {
+			const driver = driveSheet(container, cdkRef.overlayRef.backdropElement, extra.sheet, {
+				dismissible,
+				close: () => hyRef.close(),
+				cancelClose: () => hyRef.cancelClose()
+			});
+			hyRef.exit = driver.exit;
+			cdkRef.closed.subscribe(() => driver.destroy());
+		}
+	}
+	if (dismissible) {
+		cdkRef.backdropClick.subscribe(() => hyRef.close());
+		cdkRef.keydownEvents.pipe(filter((e) => e.key === "Escape" && !e.defaultPrevented)).subscribe((e) => {
+			e.preventDefault();
+			hyRef.close();
+		});
+	}
+	return hyRef;
+}
+const MAX_WIDTH = {
+	sm: "26rem",
+	md: "36rem",
+	lg: "52rem",
+	full: "72rem"
+};
+var HyConfirmDialog = class HyConfirmDialog {
+	data = inject(HY_DIALOG_DATA);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyConfirmDialog,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyConfirmDialog,
+		isStandalone: true,
+		selector: "hy-confirm-dialog",
+		ngImport: i0,
+		template: "<h2 hyDialogTitle>{{ data.title }}</h2>\r\n@if (data.message) {\r\n  <p hyDialogContent>{{ data.message }}</p>\r\n}\r\n<div hyDialogActions>\r\n  <button hyButton variant=\"ghost\" tone=\"neutral\" [hyDialogClose]=\"false\">\r\n    {{ data.cancelLabel ?? 'Cancel' }}\r\n  </button>\r\n  <button hyButton [tone]=\"data.tone ?? 'primary'\" [hyDialogClose]=\"true\">\r\n    {{ data.confirmLabel ?? 'Confirm' }}\r\n  </button>\r\n</div>\r\n",
+		dependencies: [
+			{
+				kind: "directive",
+				type: HyDialogTitle,
+				selector: "[hyDialogTitle]"
+			},
+			{
+				kind: "directive",
+				type: HyDialogContent,
+				selector: "[hyDialogContent]"
+			},
+			{
+				kind: "directive",
+				type: HyDialogActions,
+				selector: "[hyDialogActions]"
+			},
+			{
+				kind: "directive",
+				type: HyDialogClose,
+				selector: "button[hyDialogClose]",
+				inputs: ["hyDialogClose"]
+			},
+			{
+				kind: "component",
+				type: HyButton,
+				selector: "button[hyButton], a[hyButton]",
+				inputs: [
+					"variant",
+					"size",
+					"tone",
+					"iconOnly",
+					"loading",
+					"disabled"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyConfirmDialog,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-confirm-dialog",
+			imports: [HY_DIALOG_PARTS, HyButton],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<h2 hyDialogTitle>{{ data.title }}</h2>\r\n@if (data.message) {\r\n  <p hyDialogContent>{{ data.message }}</p>\r\n}\r\n<div hyDialogActions>\r\n  <button hyButton variant=\"ghost\" tone=\"neutral\" [hyDialogClose]=\"false\">\r\n    {{ data.cancelLabel ?? 'Cancel' }}\r\n  </button>\r\n  <button hyButton [tone]=\"data.tone ?? 'primary'\" [hyDialogClose]=\"true\">\r\n    {{ data.confirmLabel ?? 'Confirm' }}\r\n  </button>\r\n</div>\r\n"
+		}]
+	}]
+});
+var HyDialog = class HyDialog {
+	cdk = inject(Dialog);
+	motion = inject(HyMotion);
+	fidelity = inject(HyFidelity);
+	open(content, config = {}) {
+		const size = config.size ?? "md";
+		return openSurface(this.cdk, this.motion, this.fidelity, content, config, {
+			panelClass: ["hy-dialog-pane", `hy-dialog--${size}`],
+			maxWidth: MAX_WIDTH[size]
+		});
+	}
+	async confirm(options) {
+		return await this.open(HyConfirmDialog, {
+			data: options,
+			size: "sm",
+			role: "alertdialog"
+		}).closed === true;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyDialog,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyDialog,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyDialog,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+var HyDrawer = class HyDrawer {
+	cdk = inject(Dialog);
+	motion = inject(HyMotion);
+	fidelity = inject(HyFidelity);
+	injector = inject(Injector);
+	open(content, config = {}) {
+		const side = config.side ?? "end";
+		const position = createGlobalPositionStrategy(this.injector);
+		if (side === "bottom") position.bottom("0").centerHorizontally();
+		else if (side === "start") position.start("0").top("0");
+		else position.end("0").top("0");
+		return openSurface(this.cdk, this.motion, this.fidelity, content, config, {
+			panelClass: ["hy-drawer-pane", `hy-drawer--${side}`],
+			positionStrategy: position,
+			width: side === "bottom" ? "100%" : config.size ?? "min(24rem, 100vw - 2.5rem)",
+			height: side === "bottom" ? config.size ?? "auto" : "100%",
+			sheet: side
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyDrawer,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyDrawer,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyDrawer,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+export { HY_DIALOG_DATA, HY_DIALOG_PARTS, HyDialog, HyDialogActions, HyDialogClose, HyDialogContent, HyDialogRef, HyDialogTitle, HyDrawer };
+
+//# sourceMappingURL=hyalo-angular-dialog.mjs.map

package/fesm2022/hyalo-angular-dialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-dialog.mjs","names":["i1.HyDialogTitle","i1.HyDialogContent","i1.HyDialogActions","i1.HyDialogClose"],"sources":["../../../projects/hyalo/dialog/dialog-ref.ts","../../../projects/hyalo/dialog/dialog-parts.ts","../../../projects/hyalo/dialog/sheet.ts","../../../projects/hyalo/dialog/open-surface.ts","../../../projects/hyalo/dialog/dialog.ts","../../../projects/hyalo/dialog/dialog.html","../../../projects/hyalo/dialog/drawer.ts"],"sourcesContent":["import { DialogRef } from '@angular/cdk/dialog';\r\nimport { InjectionToken } from '@angular/core';\r\nimport { firstValueFrom } from 'rxjs';\r\nimport { MOTION } from '@hyalo/angular/motion';\r\n\r\n/** Data passed to a dialog or drawer through `open(..., { data })`. */\r\nexport const HY_DIALOG_DATA = new InjectionToken<unknown>('HY_DIALOG_DATA');\r\n\r\n/**\r\n * Handle to an open dialog or drawer. Inject it in the content component to\r\n * close it, or keep the one `open()` returns.\r\n */\r\nexport class HyDialogRef<R = unknown> {\r\n  private closing = false;\r\n\r\n  /** Resolves with the result once the surface has closed. */\r\n  readonly closed: Promise<R | undefined>;\r\n\r\n  /**\r\n   * @internal Set by surfaces that drive their own exit, like a sheet on a\r\n   * spring. Calls `finish` once the surface is out of view.\r\n   */\r\n  exit: ((finish: () => void) => void) | null = null;\r\n\r\n  /** @internal */\r\n  constructor(private readonly cdkRef: DialogRef<R>) {\r\n    this.closed = firstValueFrom(cdkRef.closed, { defaultValue: undefined });\r\n  }\r\n\r\n  /** Id of the dialog container element. */\r\n  get id(): string {\r\n    return this.cdkRef.id;\r\n  }\r\n\r\n  /** The element with `role=\"dialog\"`. */\r\n  get containerElement(): HTMLElement | null {\r\n    return this.cdkRef.overlayRef.overlayElement?.querySelector('.cdk-dialog-container') ?? null;\r\n  }\r\n\r\n  /**\r\n   * Plays the exit animation, then closes. With reduced motion the exit is\r\n   * a short fade. Calling it again while the animation runs does nothing.\r\n   */\r\n  close(result?: R): void {\r\n    if (this.closing) return;\r\n    this.closing = true;\r\n    if (this.exit) {\r\n      this.exit(() => this.cdkRef.close(result));\r\n      return;\r\n    }\r\n    const pane = this.cdkRef.overlayRef.overlayElement;\r\n    const backdrop = this.cdkRef.overlayRef.backdropElement;\r\n    // The animation runs on the panel inside the pane.\r\n    const panel = this.containerElement;\r\n    pane.dataset['state'] = 'closing';\r\n    backdrop?.setAttribute('data-state', 'closing');\r\n    // The timeout is a safety net in case animationend never fires.\r\n    let done = false;\r\n    const finish = (): void => {\r\n      if (done) return;\r\n      done = true;\r\n      pane.removeEventListener('animationend', onEnd);\r\n      this.cdkRef.close(result);\r\n    };\r\n    // Ignore animations that bubble up from the content, like a button ripple.\r\n    const onEnd = (event: Event): void => {\r\n      if (event.target === pane || event.target === panel) finish();\r\n    };\r\n    pane.addEventListener('animationend', onEnd);\r\n    setTimeout(finish, MOTION.settle.duration * 1000 + 80);\r\n  }\r\n\r\n  /**\r\n   * @internal A sheet grabbed while it was closing stays open, and a later\r\n   * `close()` works again.\r\n   */\r\n  cancelClose(): void {\r\n    this.closing = false;\r\n  }\r\n}\r\n","import { Directive, ElementRef, afterNextRender, inject, input } from '@angular/core';\r\nimport { injectId } from '@hyalo/angular/core';\r\n\r\nimport { HyDialogRef } from './dialog-ref';\r\n\r\n/**\r\n * The dialog or drawer heading. Its id becomes the container's\r\n * `aria-labelledby`, so screen readers announce it on open.\r\n */\r\n@Directive({\r\n  selector: '[hyDialogTitle]',\r\n  host: { class: 'hy-dialog__title', '[id]': 'id' },\r\n})\r\nexport class HyDialogTitle {\r\n  protected readonly id = injectId('dialog-title');\r\n\r\n  constructor() {\r\n    const el = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\r\n    afterNextRender(() =>\r\n      el.closest('[role=\"dialog\"], [role=\"alertdialog\"]')?.setAttribute('aria-labelledby', this.id),\r\n    );\r\n  }\r\n}\r\n\r\n/** The scrollable body. */\r\n@Directive({ selector: '[hyDialogContent]', host: { class: 'hy-dialog__content' } })\r\nexport class HyDialogContent {}\r\n\r\n/** The button row at the bottom. Primary action goes last. */\r\n@Directive({ selector: '[hyDialogActions]', host: { class: 'hy-dialog__actions' } })\r\nexport class HyDialogActions {}\r\n\r\n/** Closes the surrounding dialog or drawer with an optional result. */\r\n@Directive({\r\n  selector: 'button[hyDialogClose]',\r\n  host: { type: 'button', '(click)': 'ref?.close(hyDialogClose())' },\r\n})\r\nexport class HyDialogClose {\r\n  protected readonly ref = inject(HyDialogRef, { optional: true });\r\n  /** The result to close with. A bare attribute closes with `undefined`. */\r\n  readonly hyDialogClose = input<unknown, unknown>(undefined, {\r\n    transform: (value) => (value === '' ? undefined : value),\r\n  });\r\n}\r\n\r\n/** Everything needed to lay out dialog or drawer content. */\r\nexport const HY_DIALOG_PARTS = [\r\n  HyDialogTitle,\r\n  HyDialogContent,\r\n  HyDialogActions,\r\n  HyDialogClose,\r\n] as const;\r\n","import { HySpring, HyVelocityTracker, project, rubberband, SPRINGS } from '@hyalo/angular/motion';\r\nimport type { HyDrawerSide } from './drawer';\r\n\r\n/** Movement before a press turns into a drag, in px. */\r\nconst SLOP = 10;\r\n/** Presses on these stay presses: they never start a drag. */\r\nconst INTERACTIVE =\r\n  'button, a[href], input, select, textarea, label, summary, [contenteditable], [role=\"slider\"], [tabindex]:not([tabindex=\"-1\"])';\r\n\r\n/** @internal What a drawer needs from its HyDialogRef. */\r\nexport interface HySheetHost {\r\n  readonly dismissible: boolean;\r\n  close(): void;\r\n  cancelClose(): void;\r\n}\r\n\r\n/**\r\n * @internal Puts a drawer or bottom sheet on a spring and lets people drag\r\n * it toward its edge to close it.\r\n *\r\n * - Enter and exit run on the same spring, so the panel can be grabbed at\r\n *   any moment, even while it is closing, and it follows from where it is.\r\n * - The drag tracks the pointer 1:1. Pulling the wrong way rubber-bands.\r\n * - On release the flick is projected forward, and the panel springs to\r\n *   whichever end the projection lands nearer, carrying the finger's speed.\r\n * - The backdrop dims in step with how open the panel is.\r\n *\r\n * Returns the exit animation and its lifecycle cleanup.\r\n */\r\nexport function driveSheet(\r\n  panel: HTMLElement,\r\n  backdrop: HTMLElement | null,\r\n  side: HyDrawerSide,\r\n  host: HySheetHost,\r\n): { exit: (finish: () => void) => void; destroy: () => void } {\r\n  const lifetime = new (panel.ownerDocument.defaultView?.AbortController ?? AbortController)();\r\n  let disposed = false;\r\n  let resize: ResizeObserver | undefined;\r\n  let clickTimer: ReturnType<typeof setTimeout> | undefined;\r\n  const vertical = side === 'bottom';\r\n  const rtl = getComputedStyle(panel).direction === 'rtl';\r\n  // +1 when closing moves toward larger x or y.\r\n  const sign = vertical ? 1 : (side === 'end') !== rtl ? 1 : -1;\r\n  // Extra travel so the shadow is gone too.\r\n  const size = (): number => (vertical ? panel.offsetHeight : panel.offsetWidth) + 32;\r\n\r\n  panel.classList.add('hy-sheet-driven');\r\n  if (backdrop) backdrop.style.transition = 'none';\r\n\r\n  /** `offset` is how far the panel has moved out, in px. 0 is open. */\r\n  const paint = (offset: number): void => {\r\n    const full = size();\r\n    // Past the open position, and past closed when it may not close, the\r\n    // panel resists instead of following.\r\n    let shown = offset < 0 ? rubberband(offset, full) : offset;\r\n    if (!host.dismissible && offset > 0) shown = rubberband(offset, full);\r\n    const px = `${shown * sign}px`;\r\n    panel.style.translate = vertical ? `0 ${px}` : `${px} 0`;\r\n    if (backdrop) backdrop.style.opacity = String(Math.min(1, Math.max(0, 1 - shown / full)));\r\n  };\r\n\r\n  const spring = new HySpring(0, paint);\r\n  // Start out of view without measuring yet; the content has not rendered.\r\n  panel.style.translate = vertical ? '0 100%' : `${sign * 100}% 0`;\r\n  if (backdrop) backdrop.style.opacity = '0';\r\n  let enterFrame = requestAnimationFrame(() => {\r\n    enterFrame = 0;\r\n    spring.set(size());\r\n    spring.to(0, SPRINGS.settle);\r\n  });\r\n\r\n  let closing = false;\r\n  const exit = (finish: () => void): void => {\r\n    cancelAnimationFrame(enterFrame);\r\n    enterFrame = 0;\r\n    // A hidden page runs no animation frames, so the spring would never\r\n    // arrive and `closed` would never resolve.\r\n    if (disposed || panel.ownerDocument.hidden) {\r\n      spring.stop();\r\n      finish();\r\n      return;\r\n    }\r\n    closing = true;\r\n    spring.to(size(), { ...SPRINGS.settle, onRest: finish });\r\n  };\r\n\r\n  // Touch scrolling and our drag must not fight. Side drawers drag across\r\n  // the scroll direction. A sheet only takes vertical touches when its\r\n  // content cannot scroll; otherwise it is dragged by the grabber.\r\n  if (vertical) {\r\n    const grabber = panel.ownerDocument.createElement('div');\r\n    grabber.className = 'hy-drawer__grabber';\r\n    grabber.setAttribute('aria-hidden', 'true');\r\n    panel.prepend(grabber);\r\n    if (typeof ResizeObserver === 'function') {\r\n      resize = new ResizeObserver(() => {\r\n        panel.style.touchAction = panel.scrollHeight > panel.clientHeight + 1 ? '' : 'none';\r\n      });\r\n      resize.observe(panel);\r\n    }\r\n  }\r\n\r\n  interface Press {\r\n    readonly id: number;\r\n    x: number;\r\n    readonly y: number;\r\n    from: number;\r\n    dragging: boolean;\r\n  }\r\n  let press: Press | null = null;\r\n  const tracker = new HyVelocityTracker();\r\n  const along = (e: PointerEvent): number => (vertical ? e.clientY : e.clientX) * sign;\r\n  const across = (e: PointerEvent): number => (vertical ? e.clientX : e.clientY);\r\n\r\n  const grab = (p: Press, e: PointerEvent): void => {\r\n    p.dragging = true;\r\n    p.x = along(e);\r\n    p.from = spring.value;\r\n    spring.stop();\r\n    if (closing) {\r\n      // Taken back mid-exit: the sheet stays, and close() can run again.\r\n      closing = false;\r\n      host.cancelClose();\r\n    }\r\n    tracker.reset();\r\n    tracker.add(spring.value);\r\n    try {\r\n      panel.setPointerCapture(e.pointerId);\r\n    } catch {\r\n      // The pointer is already gone, as when it lifted on the same frame.\r\n    }\r\n    panel.dataset['dragging'] = '';\r\n    panel.ownerDocument.getSelection()?.removeAllRanges();\r\n  };\r\n\r\n  panel.addEventListener(\r\n    'pointerdown',\r\n    (e) => {\r\n      if (e.button !== 0 || !e.isPrimary) return;\r\n      const target = e.target as Element;\r\n      const onGrabber = !!target.closest('.hy-drawer__grabber');\r\n      if (!onGrabber && target.closest(INTERACTIVE)) return;\r\n      if (vertical && !onGrabber && panel.scrollTop > 0) return;\r\n      const p: Press = {\r\n        id: e.pointerId,\r\n        x: along(e),\r\n        y: across(e),\r\n        from: spring.value,\r\n        dragging: false,\r\n      };\r\n      press = p;\r\n      // A panel already in motion is caught right away, with no slop.\r\n      if (spring.running) grab(p, e);\r\n    },\r\n    { signal: lifetime.signal },\r\n  );\r\n\r\n  panel.addEventListener(\r\n    'pointermove',\r\n    (e) => {\r\n      if (!press || e.pointerId !== press.id) return;\r\n      const moved = along(e) - press.x;\r\n      if (!press.dragging) {\r\n        const cross = Math.abs(across(e) - press.y);\r\n        if (cross > SLOP && cross > Math.abs(moved)) {\r\n          press = null;\r\n          return;\r\n        }\r\n        if (Math.abs(moved) < SLOP) return;\r\n        grab(press, e);\r\n        return;\r\n      }\r\n      const offset = press.from + moved;\r\n      tracker.add(offset);\r\n      spring.set(offset);\r\n    },\r\n    { signal: lifetime.signal },\r\n  );\r\n\r\n  const swallow = (click: Event): void => {\r\n    click.stopPropagation();\r\n    click.preventDefault();\r\n  };\r\n  const release = (e: PointerEvent): void => {\r\n    if (!press || e.pointerId !== press.id) return;\r\n    const wasDragging = press.dragging;\r\n    press = null;\r\n    if (!wasDragging) return;\r\n    delete panel.dataset['dragging'];\r\n    // A drag must not end in a click on whatever is under the pointer.\r\n    panel.addEventListener('click', swallow, {\r\n      capture: true,\r\n      once: true,\r\n      signal: lifetime.signal,\r\n    });\r\n    clearTimeout(clickTimer);\r\n    clickTimer = setTimeout(() => panel.removeEventListener('click', swallow, { capture: true }));\r\n\r\n    const velocity = e.type === 'pointercancel' ? 0 : tracker.velocity();\r\n    const full = size();\r\n    const landing = spring.value + project(velocity);\r\n    // A clear flick decides by its direction, a slow release by where it lands.\r\n    const out = Math.abs(velocity) > 400 ? velocity > 0 : landing > full / 2;\r\n    spring.velocity = velocity;\r\n    if (out && host.dismissible) host.close();\r\n    else spring.to(0, SPRINGS.settle);\r\n  };\r\n  panel.addEventListener('pointerup', release, { signal: lifetime.signal });\r\n  panel.addEventListener('pointercancel', release, { signal: lifetime.signal });\r\n\r\n  return {\r\n    exit,\r\n    destroy: () => {\r\n      if (disposed) return;\r\n      disposed = true;\r\n      cancelAnimationFrame(enterFrame);\r\n      spring.stop();\r\n      resize?.disconnect();\r\n      lifetime.abort();\r\n      clearTimeout(clickTimer);\r\n      press = null;\r\n    },\r\n  };\r\n}\r\n","import { Dialog, type DialogConfig } from '@angular/cdk/dialog';\r\nimport type { ComponentType } from '@angular/cdk/portal';\r\nimport type { PositionStrategy } from '@angular/cdk/overlay';\r\nimport type { TemplateRef } from '@angular/core';\r\nimport { filter } from 'rxjs';\r\nimport type { HyFidelity, HyMaterial } from '@hyalo/angular/core';\r\nimport type { HyMotion } from '@hyalo/angular/motion';\r\nimport { HY_DIALOG_DATA, HyDialogRef } from './dialog-ref';\r\nimport type { HyDrawerSide } from './drawer';\r\nimport { driveSheet } from './sheet';\r\n\r\n/** Options shared by dialogs and drawers. */\r\nexport interface HySurfaceConfig<D> {\r\n  /** Passed to the content as `HY_DIALOG_DATA`. */\r\n  readonly data?: D;\r\n  /** Accessible name, when the content has no `hyDialogTitle`. */\r\n  readonly label?: string;\r\n  /** Close on Escape and backdrop click. Defaults to true. */\r\n  readonly dismissible?: boolean;\r\n  /** Glass material of the panel. */\r\n  readonly material?: HyMaterial;\r\n  /** Where focus goes on open. Defaults to the first tabbable element. */\r\n  readonly autoFocus?: DialogConfig['autoFocus'];\r\n  /** `alertdialog` for messages that need an answer. */\r\n  readonly role?: 'dialog' | 'alertdialog';\r\n}\r\n\r\n/** @internal Opens a CDK dialog wrapped in a HyDialogRef. */\r\nexport function openSurface<R, D>(\r\n  cdk: Dialog,\r\n  motion: HyMotion,\r\n  fidelity: HyFidelity,\r\n  content: ComponentType<unknown> | TemplateRef<unknown>,\r\n  config: HySurfaceConfig<D>,\r\n  extra: {\r\n    panelClass: string[];\r\n    positionStrategy?: PositionStrategy;\r\n    width?: string;\r\n    maxWidth?: string;\r\n    height?: string;\r\n    /** Drawers and sheets run on a spring and can be dragged closed. */\r\n    sheet?: HyDrawerSide;\r\n  },\r\n): HyDialogRef<R> {\r\n  let ref: HyDialogRef<R> | undefined;\r\n  const dismissible = config.dismissible ?? true;\r\n\r\n  const cdkRef = cdk.open<R, D, unknown>(content, {\r\n    data: config.data,\r\n    role: config.role ?? 'dialog',\r\n    ariaLabel: config.label ?? null,\r\n    autoFocus: config.autoFocus ?? 'first-tabbable',\r\n    restoreFocus: true,\r\n    ariaModal: true,\r\n    // Closing is handled here so the exit animation can play first.\r\n    disableClose: true,\r\n    hasBackdrop: true,\r\n    backdropClass: 'hy-backdrop',\r\n    panelClass: extra.panelClass,\r\n    positionStrategy: extra.positionStrategy,\r\n    width: extra.width,\r\n    maxWidth: extra.maxWidth,\r\n    height: extra.height,\r\n    providers: (dialogRef) => {\r\n      ref = new HyDialogRef<R>(dialogRef);\r\n      return [\r\n        { provide: HyDialogRef, useValue: ref },\r\n        { provide: HY_DIALOG_DATA, useValue: config.data },\r\n      ];\r\n    },\r\n  });\r\n\r\n  const hyRef = ref ?? new HyDialogRef<R>(cdkRef);\r\n  const container = hyRef.containerElement;\r\n  if (container) {\r\n    container.classList.add('hy-glass');\r\n    container.dataset['material'] =\r\n      fidelity.tier() === 'low' ? 'solid' : (config.material ?? 'frosted');\r\n    // Dialogs and sheets are the largest glass on the page, so the thickest.\r\n    container.dataset['thickness'] = 'thick';\r\n    // With reduced motion the CSS cross-fade runs instead of the spring.\r\n    if (extra.sheet && !motion.reduced()) {\r\n      const driver = driveSheet(container, cdkRef.overlayRef.backdropElement, extra.sheet, {\r\n        dismissible,\r\n        close: () => hyRef.close(),\r\n        cancelClose: () => hyRef.cancelClose(),\r\n      });\r\n      hyRef.exit = driver.exit;\r\n      cdkRef.closed.subscribe(() => driver.destroy());\r\n    }\r\n  }\r\n  if (dismissible) {\r\n    cdkRef.backdropClick.subscribe(() => hyRef.close());\r\n    cdkRef.keydownEvents\r\n      .pipe(filter((e) => e.key === 'Escape' && !e.defaultPrevented))\r\n      .subscribe((e) => {\r\n        e.preventDefault();\r\n        hyRef.close();\r\n      });\r\n  }\r\n  return hyRef;\r\n}\r\n","import { Dialog } from '@angular/cdk/dialog';\r\nimport type { ComponentType } from '@angular/cdk/portal';\r\nimport { ChangeDetectionStrategy, Component, Injectable, TemplateRef, inject } from '@angular/core';\r\nimport { HyButton } from '@hyalo/angular/button';\r\n\r\nimport { HyFidelity, type HyTone } from '@hyalo/angular/core';\r\nimport { HyMotion } from '@hyalo/angular/motion';\r\n\r\nimport { HY_DIALOG_DATA, HyDialogRef } from './dialog-ref';\r\nimport { HY_DIALOG_PARTS } from './dialog-parts';\r\nimport { openSurface, type HySurfaceConfig } from './open-surface';\r\n\r\n/** Dialog width. `full` fills the screen on small viewports. */\r\nexport type HyDialogSize = 'sm' | 'md' | 'lg' | 'full';\r\n\r\n// Set inline because the CDK pane's own max-width sits outside our cascade layers.\r\nconst MAX_WIDTH: Record<HyDialogSize, string> = {\r\n  sm: '26rem',\r\n  md: '36rem',\r\n  lg: '52rem',\r\n  full: '72rem',\r\n};\r\n\r\n/** Options for {@link HyDialog.open}. */\r\nexport interface HyDialogConfig<D = unknown> extends HySurfaceConfig<D> {\r\n  readonly size?: HyDialogSize;\r\n}\r\n\r\n/** Options for {@link HyDialog.confirm}. */\r\nexport interface HyConfirmOptions {\r\n  readonly title: string;\r\n  readonly message?: string;\r\n  readonly confirmLabel?: string;\r\n  readonly cancelLabel?: string;\r\n  /** Use `danger` for destructive actions. */\r\n  readonly tone?: HyTone;\r\n}\r\n\r\n@Component({\r\n  selector: 'hy-confirm-dialog',\r\n  imports: [HY_DIALOG_PARTS, HyButton],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  templateUrl: './dialog.html',\r\n})\r\nclass HyConfirmDialog {\r\n  protected readonly data = inject(HY_DIALOG_DATA) as HyConfirmOptions;\r\n}\r\n\r\n/**\r\n * Opens modal dialogs. Focus is trapped inside while open and returns to\r\n * the element that opened it. Escape and a backdrop click close it unless\r\n * `dismissible` is false.\r\n *\r\n * ```ts\r\n * const ref = this.dialog.open(EditAddress, { data: address, size: 'md' });\r\n * const saved = await ref.closed;\r\n *\r\n * if (await this.dialog.confirm({ title: 'Delete this draft?', tone: 'danger', confirmLabel: 'Delete' })) {\r\n *   ...\r\n * }\r\n * ```\r\n *\r\n * In the content component, inject `HyDialogRef` to close and\r\n * `HY_DIALOG_DATA` to read the data. Lay it out with `hyDialogTitle`,\r\n * `hyDialogContent` and `hyDialogActions`.\r\n */\r\n@Injectable({ providedIn: 'root' })\r\nexport class HyDialog {\r\n  private readonly cdk = inject(Dialog);\r\n  private readonly motion = inject(HyMotion);\r\n  private readonly fidelity = inject(HyFidelity);\r\n\r\n  /** Opens a component or template as a dialog. */\r\n  open<R = unknown, D = unknown>(\r\n    content: ComponentType<unknown> | TemplateRef<unknown>,\r\n    config: HyDialogConfig<D> = {},\r\n  ): HyDialogRef<R> {\r\n    const size = config.size ?? 'md';\r\n    return openSurface<R, D>(this.cdk, this.motion, this.fidelity, content, config, {\r\n      panelClass: ['hy-dialog-pane', `hy-dialog--${size}`],\r\n      maxWidth: MAX_WIDTH[size],\r\n    });\r\n  }\r\n\r\n  /** Asks a yes or no question. Resolves to true only when confirmed. */\r\n  async confirm(options: HyConfirmOptions): Promise<boolean> {\r\n    const ref = this.open<boolean, HyConfirmOptions>(HyConfirmDialog, {\r\n      data: options,\r\n      size: 'sm',\r\n      role: 'alertdialog',\r\n    });\r\n    return (await ref.closed) === true;\r\n  }\r\n}\r\n","<h2 hyDialogTitle>{{ data.title }}</h2>\r\n@if (data.message) {\r\n  <p hyDialogContent>{{ data.message }}</p>\r\n}\r\n<div hyDialogActions>\r\n  <button hyButton variant=\"ghost\" tone=\"neutral\" [hyDialogClose]=\"false\">\r\n    {{ data.cancelLabel ?? 'Cancel' }}\r\n  </button>\r\n  <button hyButton [tone]=\"data.tone ?? 'primary'\" [hyDialogClose]=\"true\">\r\n    {{ data.confirmLabel ?? 'Confirm' }}\r\n  </button>\r\n</div>\r\n","import { Dialog } from '@angular/cdk/dialog';\r\nimport { createGlobalPositionStrategy } from '@angular/cdk/overlay';\r\nimport type { ComponentType } from '@angular/cdk/portal';\r\nimport { Injectable, Injector, TemplateRef, inject } from '@angular/core';\r\nimport { HyFidelity } from '@hyalo/angular/core';\r\nimport { HyMotion } from '@hyalo/angular/motion';\r\nimport type { HyDialogRef } from './dialog-ref';\r\nimport { openSurface, type HySurfaceConfig } from './open-surface';\r\n\r\n/**\r\n * Which edge the drawer slides from. `start` and `end` follow the text\r\n * direction, so `end` is the right edge in LTR and the left edge in RTL.\r\n * `bottom` gives a sheet, handy on phones.\r\n */\r\nexport type HyDrawerSide = 'start' | 'end' | 'bottom';\r\n\r\n/** Options for {@link HyDrawer.open}. */\r\nexport interface HyDrawerConfig<D = unknown> extends HySurfaceConfig<D> {\r\n  readonly side?: HyDrawerSide;\r\n  /** Any CSS length. Width for side drawers, height for the bottom sheet. */\r\n  readonly size?: string;\r\n}\r\n\r\n/**\r\n * Opens a modal drawer: navigation on phones, a cart, filters. It behaves\r\n * like a dialog (focus trap, Escape, backdrop, focus restore) and uses the\r\n * same content parts and `HyDialogRef`.\r\n *\r\n * It runs on a spring and follows the pointer: drag it toward its edge, or\r\n * flick it, to close it, and grab it again while it moves. A bottom sheet\r\n * shows a grabber. With reduced motion it cross-fades instead.\r\n *\r\n * ```ts\r\n * this.drawer.open(CartPanel, { side: 'end', label: 'Cart' });\r\n * ```\r\n */\r\n@Injectable({ providedIn: 'root' })\r\nexport class HyDrawer {\r\n  private readonly cdk = inject(Dialog);\r\n  private readonly motion = inject(HyMotion);\r\n  private readonly fidelity = inject(HyFidelity);\r\n  private readonly injector = inject(Injector);\r\n\r\n  /** Opens a component or template in a drawer. */\r\n  open<R = unknown, D = unknown>(\r\n    content: ComponentType<unknown> | TemplateRef<unknown>,\r\n    config: HyDrawerConfig<D> = {},\r\n  ): HyDialogRef<R> {\r\n    const side = config.side ?? 'end';\r\n    const position = createGlobalPositionStrategy(this.injector);\r\n    if (side === 'bottom') position.bottom('0').centerHorizontally();\r\n    else if (side === 'start') position.start('0').top('0');\r\n    else position.end('0').top('0');\r\n\r\n    return openSurface<R, D>(this.cdk, this.motion, this.fidelity, content, config, {\r\n      panelClass: ['hy-drawer-pane', `hy-drawer--${side}`],\r\n      positionStrategy: position,\r\n      width: side === 'bottom' ? '100%' : (config.size ?? 'min(24rem, 100vw - 2.5rem)'),\r\n      height: side === 'bottom' ? (config.size ?? 'auto') : '100%',\r\n      sheet: side,\r\n    });\r\n  }\r\n}\r\n"],"mappings":"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"}