@hyalo/angular 0.0.0-stage → 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-choice.mjs","names":[],"sources":["../../../projects/hyalo/choice/checkbox.ts","../../../projects/hyalo/choice/checkbox.html","../../../projects/hyalo/choice/radio.ts","../../../projects/hyalo/choice/radio-group.html","../../../projects/hyalo/choice/radio.html","../../../projects/hyalo/choice/switch.ts","../../../projects/hyalo/choice/switch.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  booleanAttribute,\r\n  input,\r\n  model,\r\n  output,\r\n} from '@angular/core';\r\nimport type { FormCheckboxControl } from '@angular/forms/signals';\r\nimport { injectId } from '@hyalo/angular';\r\n\r\nimport { HyIcon } from '@hyalo/angular/icon';\r\n\r\n/**\r\n * A checkbox with a label. It wraps a real `<input type=\"checkbox\">`, so\r\n * Space toggles it, clicking the label works and forms see it.\r\n *\r\n * ```html\r\n * <hy-checkbox [formField]=\"form.terms\">I accept the terms</hy-checkbox>\r\n * <hy-checkbox [(checked)]=\"all\" [indeterminate]=\"some\">Select all</hy-checkbox>\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'hy-checkbox',\r\n  imports: [HyIcon],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'hy-choice hy-checkbox',\r\n    '[attr.data-checked]': 'checked() || null',\r\n    '[attr.data-indeterminate]': 'indeterminate() || null',\r\n    '[attr.data-disabled]': 'disabled() || null',\r\n    '[attr.data-invalid]': '(invalid() && touched()) || null',\r\n  },\r\n  templateUrl: './checkbox.html',\r\n  styleUrl: './choice.css',\r\n})\r\nexport class HyCheckbox implements FormCheckboxControl {\r\n  protected readonly descriptionId = injectId('checkbox-desc');\r\n\r\n  /** Whether the box is checked. Two-way bindable and works with `[formField]`. */\r\n  readonly checked = model(false);\r\n  /** Shows a dash for a partly selected group. Cleared when the user toggles. */\r\n  readonly indeterminate = model(false);\r\n  /** Secondary text under the label. */\r\n  readonly description = input<string>();\r\n  readonly name = input('');\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n  readonly required = input(false, { transform: booleanAttribute });\r\n  readonly invalid = input(false, { transform: booleanAttribute });\r\n  readonly touched = input(false, { transform: booleanAttribute });\r\n  /** Emits when focus leaves the checkbox. */\r\n  readonly touch = output<void>();\r\n\r\n  protected onChange(event: Event): void {\r\n    this.indeterminate.set(false);\r\n    this.checked.set((event.target as HTMLInputElement).checked);\r\n  }\r\n}\r\n","<label class=\"hy-choice__row\">\r\n  <span class=\"hy-choice__control hy-checkbox__box\">\r\n    <input\r\n      type=\"checkbox\"\r\n      class=\"hy-choice__input\"\r\n      [name]=\"name()\"\r\n      [checked]=\"checked()\"\r\n      [indeterminate]=\"indeterminate()\"\r\n      [disabled]=\"disabled()\"\r\n      [required]=\"required()\"\r\n      [attr.aria-invalid]=\"(invalid() && touched()) || null\"\r\n      [attr.aria-describedby]=\"description() ? descriptionId : null\"\r\n      (change)=\"onChange($event)\"\r\n      (blur)=\"touch.emit()\"\r\n    />\r\n    <hy-icon\r\n      class=\"hy-checkbox__mark\"\r\n      [name]=\"indeterminate() ? 'minus' : 'check'\"\r\n      [strokeWidth]=\"2.5\"\r\n    />\r\n  </span>\r\n  <span class=\"hy-choice__label\"><ng-content /></span>\r\n</label>\r\n@if (description()) {\r\n  <p class=\"hy-choice__description\" [id]=\"descriptionId\">{{ description() }}</p>\r\n}\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  booleanAttribute,\r\n  computed,\r\n  inject,\r\n  input,\r\n  model,\r\n  output,\r\n} from '@angular/core';\r\nimport type { FormValueControl } from '@angular/forms/signals';\r\nimport { injectId } from '@hyalo/angular';\r\n\r\n/**\r\n * A group of radio buttons. Holds the value; the radios inside only say\r\n * which value they stand for.\r\n *\r\n * ```html\r\n * <hy-radio-group label=\"Delivery\" [formField]=\"form.delivery\">\r\n *   <hy-radio value=\"standard\" description=\"3 to 5 days\">Standard</hy-radio>\r\n *   <hy-radio value=\"express\">Express</hy-radio>\r\n * </hy-radio-group>\r\n * ```\r\n *\r\n * The radios are native inputs sharing one name, so arrow keys move the\r\n * selection the way the platform does, including in RTL.\r\n */\r\n@Component({\r\n  selector: 'hy-radio-group',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'hy-radio-group',\r\n    role: 'radiogroup',\r\n    '[attr.aria-labelledby]': 'label() ? labelId : null',\r\n    '[attr.aria-invalid]': 'showsError() || null',\r\n    '[attr.aria-required]': 'required() || null',\r\n    '[attr.data-orientation]': 'orientation()',\r\n  },\r\n  templateUrl: './radio-group.html',\r\n  styleUrl: './choice.css',\r\n})\r\nexport class HyRadioGroup<T> implements FormValueControl<T | undefined> {\r\n  protected readonly labelId = injectId('radio-label');\r\n  private readonly generatedName = injectId('radio');\r\n\r\n  /** Selected value. Two-way bindable and works with `[formField]`. */\r\n  readonly value = model<T | undefined>(undefined);\r\n  /** Visible group label. */\r\n  readonly label = input<string>();\r\n  /** Shared input name. Generated when not set. */\r\n  readonly name = input('');\r\n  readonly orientation = input<'vertical' | 'horizontal'>('vertical');\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n  readonly required = input(false, { transform: booleanAttribute });\r\n  readonly invalid = input(false, { transform: booleanAttribute });\r\n  readonly touched = input(false, { transform: booleanAttribute });\r\n  readonly errors = input<readonly { readonly kind: string; readonly message?: string }[]>([]);\r\n  /** Emits when focus leaves a radio. */\r\n  readonly touch = output<void>();\r\n\r\n  readonly groupName = computed(() => this.name() || this.generatedName);\r\n  protected readonly showsError = computed(() => this.invalid() && this.touched());\r\n  protected readonly errorMessage = computed(() => {\r\n    const first = this.errors()[0];\r\n    return first ? (first.message ?? first.kind) : '';\r\n  });\r\n}\r\n\r\n/** One option inside a `hy-radio-group`. */\r\n@Component({\r\n  selector: 'hy-radio',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'hy-choice hy-radio',\r\n    '[attr.data-checked]': 'checked() || null',\r\n    '[attr.data-disabled]': 'isDisabled() || null',\r\n  },\r\n  templateUrl: './radio.html',\r\n  styleUrl: './choice.css',\r\n})\r\nexport class HyRadio<T> {\r\n  protected readonly group = inject<HyRadioGroup<T>>(HyRadioGroup);\r\n  protected readonly descriptionId = injectId('radio-desc');\r\n\r\n  /** The value this radio selects. */\r\n  readonly value = input.required<T>();\r\n  /** Secondary text under the label. */\r\n  readonly description = input<string>();\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n\r\n  protected readonly checked = computed(() => this.group.value() === this.value());\r\n  protected readonly isDisabled = computed(() => this.disabled() || this.group.disabled());\r\n}\r\n","@if (label()) {\r\n  <span class=\"hy-radio-group__label\" [id]=\"labelId\">{{ label() }}</span>\r\n}\r\n<div class=\"hy-radio-group__items\"><ng-content /></div>\r\n@if (showsError()) {\r\n  <p class=\"hy-choice__error\">{{ errorMessage() }}</p>\r\n}\r\n","<label class=\"hy-choice__row\">\r\n  <span class=\"hy-choice__control hy-radio__circle\">\r\n    <input\r\n      type=\"radio\"\r\n      class=\"hy-choice__input\"\r\n      [name]=\"group.groupName()\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-describedby]=\"description() ? descriptionId : null\"\r\n      (change)=\"group.value.set(value())\"\r\n      (blur)=\"group.touch.emit()\"\r\n    />\r\n    <span class=\"hy-radio__dot\" aria-hidden=\"true\"></span>\r\n  </span>\r\n  <span class=\"hy-choice__label\"><ng-content /></span>\r\n</label>\r\n@if (description()) {\r\n  <p class=\"hy-choice__description\" [id]=\"descriptionId\">{{ description() }}</p>\r\n}\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  booleanAttribute,\r\n  input,\r\n  model,\r\n  output,\r\n  signal,\r\n} from '@angular/core';\r\nimport type { FormCheckboxControl } from '@angular/forms/signals';\r\nimport { injectId, rubberband } from '@hyalo/angular';\r\n\r\n/** Movement before a press on the track turns into a drag, in px. */\r\nconst SLOP = 4;\r\n/** Track padding on each side, in px. Matches choice.css. */\r\nconst TRACK_PADDING = 2;\r\n/** Width of the pressed thumb, in rem. Matches choice.css. */\r\nconst PRESSED_THUMB = 1.5;\r\n\r\n/**\r\n * An on/off switch for settings that apply right away. For choices that\r\n * are submitted with a form, a checkbox is usually clearer.\r\n *\r\n * It is a native checkbox with `role=\"switch\"`, so screen readers say\r\n * \"on\" and \"off\" and Space toggles it. The thumb can also be dragged: it\r\n * follows the pointer, and lands on whichever side it is let go nearer.\r\n *\r\n * ```html\r\n * <hy-switch [(checked)]=\"notifications\">Email notifications</hy-switch>\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'hy-switch',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'hy-choice hy-switch',\r\n    '[attr.data-checked]': 'checked() || null',\r\n    '[attr.data-disabled]': 'disabled() || null',\r\n  },\r\n  templateUrl: './switch.html',\r\n  styleUrl: './choice.css',\r\n})\r\nexport class HySwitch implements FormCheckboxControl {\r\n  protected readonly descriptionId = injectId('switch-desc');\r\n  /** Physical thumb offset in px while it is dragged, otherwise null. */\r\n  protected readonly drag = signal<number | null>(null);\r\n  private press: { x: number; from: number; travel: number; dir: number; pos: number } | null =\r\n    null;\r\n  /** Where a finished drag landed, until the click it causes is handled. */\r\n  private landed: boolean | null = null;\r\n\r\n  /** Whether the switch is on. Two-way bindable and works with `[formField]`. */\r\n  readonly checked = model(false);\r\n  /** Secondary text under the label. */\r\n  readonly description = input<string>();\r\n  readonly name = input('');\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n  readonly required = input(false, { transform: booleanAttribute });\r\n  /** Emits when focus leaves the switch. */\r\n  readonly touch = output<void>();\r\n\r\n  protected onChange(event: Event): void {\r\n    this.checked.set((event.target as HTMLInputElement).checked);\r\n  }\r\n\r\n  protected onDown(event: PointerEvent): void {\r\n    if (this.disabled() || event.button !== 0) return;\r\n    const track = event.currentTarget as HTMLElement;\r\n    const rem = parseFloat(getComputedStyle(track.ownerDocument.documentElement).fontSize) || 16;\r\n    const travel = track.clientWidth - 2 * TRACK_PADDING - PRESSED_THUMB * rem;\r\n    this.press = {\r\n      x: event.clientX,\r\n      from: this.checked() ? travel : 0,\r\n      travel,\r\n      dir: getComputedStyle(track).direction === 'rtl' ? -1 : 1,\r\n      pos: this.checked() ? travel : 0,\r\n    };\r\n  }\r\n\r\n  protected onMove(event: PointerEvent): void {\r\n    const press = this.press;\r\n    if (!press) return;\r\n    const moved = (event.clientX - press.x) * press.dir;\r\n    if (this.drag() === null) {\r\n      if (Math.abs(moved) < SLOP) return;\r\n      try {\r\n        (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);\r\n      } catch {\r\n        // The pointer is already gone; the drag still ends on pointerup.\r\n      }\r\n    }\r\n    // Past either end the thumb resists instead of stopping dead.\r\n    const raw = press.from + moved;\r\n    const over = raw < 0 ? raw : raw > press.travel ? raw - press.travel : 0;\r\n    press.pos = Math.min(Math.max(raw, 0), press.travel) + rubberband(over, press.travel);\r\n    this.drag.set(press.pos * press.dir);\r\n  }\r\n\r\n  protected onUp(cancelled = false): void {\r\n    const press = this.press;\r\n    this.press = null;\r\n    if (!press || this.drag() === null) return;\r\n    this.drag.set(null);\r\n    // Decided in logical position, so it is the same in both directions.\r\n    const on = press.pos > press.travel / 2;\r\n    if (cancelled) {\r\n      this.checked.set(on);\r\n      return;\r\n    }\r\n    // The release also clicks the label. That click applies the drag\r\n    // instead of toggling; if no click comes, apply it anyway.\r\n    this.landed = on;\r\n    setTimeout(() => {\r\n      if (this.landed === null) return;\r\n      this.checked.set(this.landed);\r\n      this.landed = null;\r\n    });\r\n  }\r\n\r\n  protected onClick(event: MouseEvent): void {\r\n    if (this.landed === null) return;\r\n    event.preventDefault();\r\n    this.checked.set(this.landed);\r\n    this.landed = null;\r\n  }\r\n}\r\n","<label class=\"hy-choice__row\">\r\n  <span\r\n    class=\"hy-choice__control hy-switch__track\"\r\n    (pointerdown)=\"onDown($event)\"\r\n    (pointermove)=\"onMove($event)\"\r\n    (pointerup)=\"onUp()\"\r\n    (pointercancel)=\"onUp(true)\"\r\n  >\r\n    <input\r\n      type=\"checkbox\"\r\n      role=\"switch\"\r\n      class=\"hy-choice__input\"\r\n      [name]=\"name()\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [required]=\"required()\"\r\n      [attr.aria-checked]=\"checked()\"\r\n      [attr.aria-describedby]=\"description() ? descriptionId : null\"\r\n      (click)=\"onClick($event)\"\r\n      (change)=\"onChange($event)\"\r\n      (blur)=\"touch.emit()\"\r\n    />\r\n    <span\r\n      class=\"hy-switch__thumb\"\r\n      aria-hidden=\"true\"\r\n      [attr.data-dragging]=\"drag() === null ? null : ''\"\r\n      [style.--_drag.px]=\"drag()\"\r\n    ></span>\r\n  </span>\r\n  <span class=\"hy-choice__label\"><ng-content /></span>\r\n</label>\r\n@if (description()) {\r\n  <p class=\"hy-choice__description\" [id]=\"descriptionId\">{{ description() }}</p>\r\n}\r\n"],"mappings":"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"}

package/fesm2022/hyalo-angular-dialog.mjs

@@ -0,0 +1,571 @@
+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 { HyFidelity, HyMotion, HySpring, HyVelocityTracker, MOTION, SPRINGS, injectId, project, rubberband } from "@hyalo/angular";
+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 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";
+	requestAnimationFrame(() => {
+		spring.set(size());
+		spring.to(0, SPRINGS.settle);
+	});
+	let closing = false;
+	const exit = (finish) => {
+		if (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") new ResizeObserver(() => {
+			panel.style.touchAction = panel.scrollHeight > panel.clientHeight + 1 ? "" : "none";
+		}).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);
+	});
+	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);
+	});
+	const release = (e) => {
+		if (!press || e.pointerId !== press.id) return;
+		const wasDragging = press.dragging;
+		press = null;
+		if (!wasDragging) return;
+		delete panel.dataset["dragging"];
+		const swallow = (click) => {
+			click.stopPropagation();
+			click.preventDefault();
+		};
+		panel.addEventListener("click", swallow, {
+			capture: true,
+			once: true
+		});
+		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);
+	panel.addEventListener("pointercancel", release);
+	return exit;
+}
+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()) hyRef.exit = driveSheet(container, cdkRef.overlayRef.backdropElement, extra.sheet, {
+			dismissible,
+			close: () => hyRef.close(),
+			cancelClose: () => hyRef.cancelClose()
+		});
+	}
+	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