@raqm/ui 0.0.0-stage → 0.1.0

package/fesm2022/raqm-ui-toast.mjs

@@ -0,0 +1,918 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DOCUMENT, Directive, ElementRef, Injectable, PLATFORM_ID, ViewContainerRef, afterEveryRender, afterNextRender, computed, effect, inject, input, output, signal, untracked, viewChild } from "@angular/core";
+import { isPlatformBrowser } from "@angular/common";
+import { Overlay } from "@angular/cdk/overlay";
+import { TemplatePortal } from "@angular/cdk/portal";
+var RaqmToastService = class RaqmToastService {
+	browser = isPlatformBrowser(inject(PLATFORM_ID));
+	records = signal([], ...ngDevMode ? [{ debugName: "records" }] : /* istanbul ignore next */ []);
+	clocks = /* @__PURE__ */ new Map();
+	document = inject(DOCUMENT);
+	exits = /* @__PURE__ */ new Map();
+	owner = null;
+	paused = false;
+	nextId = 0;
+	destroyed = false;
+	toasts = this.records.asReadonly();
+	visibleToasts = computed(() => this.toasts().filter((t) => !t.ending).slice(0, 3), ...ngDevMode ? [{ debugName: "visibleToasts" }] : /* istanbul ignore next */ []);
+	renderedToasts = computed(() => {
+		const visible = new Set(this.visibleToasts().map((t) => t.id));
+		return this.toasts().filter((t) => t.ending || visible.has(t.id));
+	}, ...ngDevMode ? [{ debugName: "renderedToasts" }] : /* istanbul ignore next */ []);
+	show(options) {
+		const id = options.id ?? this.createId();
+		if (this.destroyed) return id;
+		if (this.records().some((toast) => toast.id === id)) {
+			this.update(id, options);
+			return id;
+		}
+		const toast = {
+			...options,
+			id,
+			timeout: this.timeout(options.timeout),
+			updateKey: 0
+		};
+		this.records.update((records) => [toast, ...records]);
+		this.clocks.set(id, {
+			remaining: toast.timeout,
+			started: 0
+		});
+		this.syncClocks();
+		return id;
+	}
+	success(options) {
+		return this.show({
+			...options,
+			type: "success"
+		});
+	}
+	error(options) {
+		return this.show({
+			...options,
+			type: "error"
+		});
+	}
+	update(id, options) {
+		const previous = this.records().find((toast) => toast.id === id);
+		if (!previous || previous.ending) return;
+		const timeout = this.timeout(options.timeout ?? previous.timeout);
+		this.stopClock(id);
+		this.records.update((records) => records.map((toast) => toast.id === id ? {
+			...toast,
+			...options,
+			id,
+			timeout,
+			updateKey: toast.updateKey + 1
+		} : toast));
+		this.clocks.set(id, {
+			remaining: timeout,
+			started: 0
+		});
+		this.syncClocks();
+	}
+	dismiss(id) {
+		const visible = new Set(this.visibleToasts().map((t) => t.id));
+		const removed = this.records().filter((toast) => !toast.ending && (id === void 0 || toast.id === id));
+		const animate = this.browser && this.owner !== null && !this.document.defaultView?.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		for (const toast of removed) {
+			this.stopClock(toast.id);
+			this.clocks.delete(toast.id);
+		}
+		this.records.update((records) => records.flatMap((toast) => !removed.includes(toast) ? [toast] : animate && visible.has(toast.id) ? [{
+			...toast,
+			ending: true
+		}] : []));
+		for (const toast of removed) if (animate && visible.has(toast.id)) this.exits.set(toast.id, setTimeout(() => {
+			this.exits.delete(toast.id);
+			this.records.update((records) => records.filter((record) => record.id !== toast.id));
+		}, 500));
+		this.syncClocks();
+		for (const toast of removed) toast.onClose?.();
+	}
+	claimViewport(owner) {
+		if (this.owner !== null && this.owner !== owner) return false;
+		this.owner = owner;
+		this.syncClocks();
+		return true;
+	}
+	releaseViewport(owner) {
+		if (this.owner !== owner) return;
+		this.owner = null;
+		for (const timer of this.exits.values()) clearTimeout(timer);
+		this.exits.clear();
+		this.records.update((records) => records.filter((t) => !t.ending));
+		this.paused = false;
+		this.syncClocks();
+	}
+	pauseViewport(owner, paused) {
+		if (this.owner !== owner) return;
+		this.paused = paused;
+		this.syncClocks();
+	}
+	ngOnDestroy() {
+		this.destroyed = true;
+		for (const id of this.clocks.keys()) this.stopClock(id);
+		this.clocks.clear();
+		for (const timer of this.exits.values()) clearTimeout(timer);
+		this.exits.clear();
+		this.records.set([]);
+		this.owner = null;
+	}
+	timeout(value = 5e3) {
+		return Number.isFinite(value) ? Math.max(0, Math.min(value, 2147483647)) : 5e3;
+	}
+	createId() {
+		let id;
+		do
+			id = `raqm-toast-${++this.nextId}`;
+		while (this.records().some((toast) => toast.id === id));
+		return id;
+	}
+	stopClock(id) {
+		const clock = this.clocks.get(id);
+		if (clock?.timer !== void 0) {
+			clearTimeout(clock.timer);
+			clock.timer = void 0;
+			clock.remaining = Math.max(0, clock.remaining - (Date.now() - clock.started));
+		}
+	}
+	syncClocks() {
+		const visible = new Set(this.visibleToasts().map((toast) => toast.id));
+		for (const [id, clock] of this.clocks) if (!this.browser || !this.owner || this.paused || !visible.has(id)) this.stopClock(id);
+		else if (clock.timer === void 0 && this.records().find((t) => t.id === id)?.timeout) {
+			clock.started = Date.now();
+			clock.timer = setTimeout(() => {
+				clock.timer = void 0;
+				this.dismiss(id);
+			}, clock.remaining);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmToastService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmToastService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmToastService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+var RaqmToastComponent = class RaqmToastComponent {
+	toast = input.required(...ngDevMode ? [{ debugName: "toast" }] : /* istanbul ignore next */ []);
+	swipingChange = output();
+	service = inject(RaqmToastService);
+	element = inject(ElementRef).nativeElement;
+	pointer = null;
+	start = {
+		x: 0,
+		y: 0
+	};
+	initial = "";
+	axis = null;
+	firstMove = true;
+	maximum = 0;
+	baseline = {
+		x: 0,
+		y: 0
+	};
+	intended = false;
+	cancelled = false;
+	delta = 0;
+	constructor() {
+		effect(() => {
+			if (this.toast().ending) this.releasePointer();
+		});
+	}
+	pointerDown(event) {
+		if (event.button !== 0 || this.pointer !== null || this.toast().ending || event.target.closest("button,a,input,textarea,select,[role=\"button\"],[contenteditable],[data-base-ui-swipe-ignore],[data-swipe-ignore]")) return;
+		try {
+			this.element.setPointerCapture(event.pointerId);
+		} catch {
+			return;
+		}
+		this.pointer = event.pointerId;
+		this.swipingChange.emit(true);
+		this.start = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		this.baseline = { ...this.start };
+		this.intended = false;
+		this.initial = this.element.ownerDocument.defaultView?.getComputedStyle(this.element).transform ?? "";
+		this.axis = null;
+		this.firstMove = true;
+		this.maximum = this.delta = 0;
+		this.cancelled = false;
+		this.element.setAttribute("data-raqm-swiping", "");
+	}
+	pointerMove(event) {
+		if (event.pointerId !== this.pointer) return;
+		event.preventDefault();
+		if (this.firstMove) {
+			this.start = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			this.firstMove = false;
+		}
+		const x = event.clientX - this.start.x;
+		const y = event.clientY - this.start.y;
+		if (event.movementX < 0 && event.clientX > this.baseline.x || event.movementX > 0 && event.clientX < this.baseline.x) this.baseline.x = event.clientX;
+		if (event.movementY < 0 && event.clientY > this.baseline.y || event.movementY > 0 && event.clientY < this.baseline.y) this.baseline.y = event.clientY;
+		if (!this.axis && Math.hypot(x, y) >= 1) this.axis = Math.abs(x) > Math.abs(y) ? "x" : "y";
+		this.delta = this.axis === "x" ? x : this.axis === "y" ? y : 0;
+		if (!this.intended && this.delta > 0) {
+			this.intended = true;
+			this.maximum = this.delta;
+		} else if (this.intended) {
+			const displacement = this.axis === "x" ? event.clientX - this.baseline.x : event.clientY - this.baseline.y;
+			if (displacement > 40) this.cancelled = false;
+			else if (this.maximum - displacement >= 10) this.cancelled = true;
+		}
+		const damped = this.delta < 0 ? -Math.sqrt(-this.delta) : this.delta;
+		this.element.style.transform = `translate${this.axis === "x" ? "X" : "Y"}(${damped}px) ${this.initial === "none" ? "" : this.initial}`;
+		this.element.style.setProperty("--toast-swipe-movement-x", `${this.axis === "x" ? damped : 0}px`);
+		this.element.style.setProperty("--toast-swipe-movement-y", `${this.axis === "y" ? damped : 0}px`);
+	}
+	pointerEnd(event) {
+		if (event.pointerId !== this.pointer) return;
+		const dismiss = event.type === "pointerup" && this.delta > 40 && !this.cancelled;
+		const direction = this.axis === "x" ? "right" : "down";
+		this.releasePointer();
+		if (dismiss) {
+			this.element.setAttribute("data-raqm-swipe-direction", direction);
+			this.dismiss();
+		} else {
+			this.element.style.removeProperty("--toast-swipe-movement-x");
+			this.element.style.removeProperty("--toast-swipe-movement-y");
+		}
+	}
+	ngOnDestroy() {
+		this.releasePointer();
+	}
+	releasePointer() {
+		const pointer = this.pointer;
+		this.pointer = null;
+		if (pointer !== null) this.swipingChange.emit(false);
+		if (pointer !== null && this.element.hasPointerCapture(pointer)) this.element.releasePointerCapture(pointer);
+		this.element.removeAttribute("data-raqm-swiping");
+		this.element.style.removeProperty("transform");
+	}
+	dismiss(event) {
+		event?.preventDefault();
+		event?.stopPropagation();
+		this.service.dismiss(this.toast().id);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmToastComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmToastComponent,
+		isStandalone: true,
+		selector: "raqm-toast",
+		inputs: { toast: {
+			classPropertyName: "toast",
+			publicName: "toast",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		outputs: { swipingChange: "swipingChange" },
+		host: {
+			attributes: {
+				"tabindex": "-1",
+				"role": "group"
+			},
+			listeners: {
+				"keydown.escape": "dismiss($event)",
+				"pointerdown": "pointerDown($event)",
+				"pointermove": "pointerMove($event)",
+				"pointerup": "pointerEnd($event)",
+				"pointercancel": "pointerEnd($event)",
+				"lostpointercapture": "pointerEnd($event)"
+			},
+			properties: { "attr.data-raqm-type": "toast().type" },
+			classAttribute: "raqm-toast"
+		},
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		styles: [""],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmToastComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-toast",
+			template: "<ng-content />",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-toast",
+				tabindex: "-1",
+				role: "group",
+				"[attr.data-raqm-type]": "toast().type",
+				"(keydown.escape)": "dismiss($event)",
+				"(pointerdown)": "pointerDown($event)",
+				"(pointermove)": "pointerMove($event)",
+				"(pointerup)": "pointerEnd($event)",
+				"(pointercancel)": "pointerEnd($event)",
+				"(lostpointercapture)": "pointerEnd($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		toast: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "toast",
+				required: true
+			}]
+		}],
+		swipingChange: [{
+			type: i0.Output,
+			args: ["swipingChange"]
+		}]
+	}
+});
+var RaqmToastTitleDirective = class RaqmToastTitleDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmToastTitleDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmToastTitleDirective,
+		isStandalone: true,
+		selector: "[raqm-toast-title]",
+		host: { classAttribute: "raqm-toast-title" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmToastTitleDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-toast-title]",
+			host: { class: "raqm-toast-title" }
+		}]
+	}]
+});
+var RaqmToastContentDirective = class RaqmToastContentDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmToastContentDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmToastContentDirective,
+		isStandalone: true,
+		selector: "[raqm-toast-content]",
+		host: { classAttribute: "raqm-toast-content" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmToastContentDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-toast-content]",
+			host: { class: "raqm-toast-content" }
+		}]
+	}]
+});
+var RaqmToastDescriptionDirective = class RaqmToastDescriptionDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmToastDescriptionDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmToastDescriptionDirective,
+		isStandalone: true,
+		selector: "[raqm-toast-description]",
+		host: { classAttribute: "raqm-toast-description" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmToastDescriptionDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-toast-description]",
+			host: { class: "raqm-toast-description" }
+		}]
+	}]
+});
+var RaqmToastActionDirective = class RaqmToastActionDirective {
+	constructor() {
+		const element = inject(ElementRef).nativeElement;
+		if (!element.hasAttribute("type")) element.type = "button";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmToastActionDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmToastActionDirective,
+		isStandalone: true,
+		selector: "button[raqm-toast-action]",
+		host: {
+			attributes: {
+				"data-raqm-variant": "outline",
+				"data-raqm-size": "sm"
+			},
+			classAttribute: "raqm-toast-action raqm-button"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmToastActionDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[raqm-toast-action]",
+			host: {
+				class: "raqm-toast-action raqm-button",
+				"data-raqm-variant": "outline",
+				"data-raqm-size": "sm"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+var RaqmToastCloseComponent = class RaqmToastCloseComponent {
+	root = inject(RaqmToastComponent);
+	constructor() {
+		const element = inject(ElementRef).nativeElement;
+		if (!element.hasAttribute("type")) element.type = "button";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmToastCloseComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmToastCloseComponent,
+		isStandalone: true,
+		selector: "button[raqm-toast-close]",
+		host: {
+			attributes: {
+				"data-raqm-variant": "ghost",
+				"data-raqm-size": "icon-sm"
+			},
+			listeners: { "click": "root.dismiss()" },
+			classAttribute: "raqm-toast-close raqm-button"
+		},
+		ngImport: i0,
+		template: "<ng-content><svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m18 6-12 12M6 6l12 12\" /></svg></ng-content>",
+		isInline: true,
+		styles: [""],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmToastCloseComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button[raqm-toast-close]",
+			template: "<ng-content><svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m18 6-12 12M6 6l12 12\" /></svg></ng-content>",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-toast-close raqm-button",
+				"data-raqm-variant": "ghost",
+				"data-raqm-size": "icon-sm",
+				"(click)": "root.dismiss()"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+var RaqmToastIconComponent = class RaqmToastIconComponent {
+	type = input(...ngDevMode ? [void 0, { debugName: "type" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmToastIconComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RaqmToastIconComponent,
+		isStandalone: true,
+		selector: "raqm-toast-icon",
+		inputs: { type: {
+			classPropertyName: "type",
+			publicName: "type",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "aria-hidden": "true" },
+			properties: { "attr.data-raqm-type": "type()" },
+			classAttribute: "raqm-toast-icon"
+		},
+		ngImport: i0,
+		template: "@if (type()) {\n  <svg\n    viewBox=\"0 0 24 24\"\n    width=\"16\"\n    height=\"16\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    focusable=\"false\"\n  >\n    @switch (type()) {\n      @case ('success') {\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        <path d=\"m9 12 2 2 4-4\" />\n      }\n      @case ('info') {\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        <path d=\"M12 16v-4M12 8h.01\" />\n      }\n      @case ('warning') {\n        <path\n          d=\"m10.3 3.9-8.1 14A2 2 0 0 0 3.9 21h16.2a2 2 0 0 0 1.7-3.1l-8.1-14a2 2 0 0 0-3.4 0ZM12 9v4M12 17h.01\"\n        />\n      }\n      @case ('error') {\n        <path d=\"m7.86 2-5.86 5.86v8.28l5.86 5.86h8.28l5.86-5.86V7.86L16.14 2ZM9 9l6 6M15 9l-6 6\" />\n      }\n      @case ('loading') {\n        <path d=\"M12 2a10 10 0 1 1-7.07 2.93\" />\n      }\n    }\n  </svg>\n}\n",
+		styles: [""],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmToastIconComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-toast-icon",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-toast-icon",
+				"aria-hidden": "true",
+				"[attr.data-raqm-type]": "type()"
+			},
+			template: "@if (type()) {\n  <svg\n    viewBox=\"0 0 24 24\"\n    width=\"16\"\n    height=\"16\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    focusable=\"false\"\n  >\n    @switch (type()) {\n      @case ('success') {\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        <path d=\"m9 12 2 2 4-4\" />\n      }\n      @case ('info') {\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        <path d=\"M12 16v-4M12 8h.01\" />\n      }\n      @case ('warning') {\n        <path\n          d=\"m10.3 3.9-8.1 14A2 2 0 0 0 3.9 21h16.2a2 2 0 0 0 1.7-3.1l-8.1-14a2 2 0 0 0-3.4 0ZM12 9v4M12 17h.01\"\n        />\n      }\n      @case ('error') {\n        <path d=\"m7.86 2-5.86 5.86v8.28l5.86 5.86h8.28l5.86-5.86V7.86L16.14 2ZM9 9l6 6M15 9l-6 6\" />\n      }\n      @case ('loading') {\n        <path d=\"M12 2a10 10 0 1 1-7.07 2.93\" />\n      }\n    }\n  </svg>\n}\n"
+		}]
+	}],
+	propDecorators: { type: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "type",
+			required: false
+		}]
+	}] }
+});
+var RaqmToasterComponent = class RaqmToasterComponent {
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	closeLabel = input.required(...ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []);
+	service = inject(RaqmToastService);
+	document = inject(DOCUMENT);
+	overlay = inject(Overlay);
+	container = inject(ViewContainerRef);
+	host = inject(ElementRef);
+	panel = viewChild.required("panel", ...ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []);
+	overlayRef;
+	observer;
+	announcementTimer;
+	previousFocus = null;
+	hovered = false;
+	focused = false;
+	swiping = false;
+	indices = /* @__PURE__ */ new Map();
+	expanded = signal(false, ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
+	announcement = signal("", ...ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []);
+	ready = signal(false, ...ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []);
+	announcementKey = computed(() => this.service.visibleToasts().map((t) => `${t.id}:${t.updateKey}`).join("|"), ...ngDevMode ? [{ debugName: "announcementKey" }] : /* istanbul ignore next */ []);
+	announced = /* @__PURE__ */ new Map();
+	pendingAnnouncements = /* @__PURE__ */ new Map();
+	constructor() {
+		afterNextRender(() => {
+			if (!this.service.claimViewport(this)) return;
+			const dir = this.document.defaultView?.getComputedStyle(this.host.nativeElement).direction === "rtl" ? "rtl" : "ltr";
+			this.overlayRef = this.overlay.create({
+				positionStrategy: this.overlay.position().global(),
+				scrollStrategy: this.overlay.scrollStrategies.noop(),
+				hasBackdrop: false,
+				panelClass: "raqm-toast-overlay-pane",
+				direction: dir
+			});
+			this.overlayRef.overlayElement.style.pointerEvents = "none";
+			this.overlayRef.attach(new TemplatePortal(this.panel(), this.container));
+			this.document.addEventListener("keydown", this.onDocumentKeydown);
+			if (typeof ResizeObserver !== "undefined") this.observer = new ResizeObserver(() => this.measure());
+			this.ready.set(true);
+		});
+		afterEveryRender(() => {
+			const pane = this.overlayRef?.overlayElement;
+			if (!pane) return;
+			const retained = new Set(this.service.renderedToasts().map((t) => t.id));
+			for (const id of this.indices.keys()) if (!retained.has(id)) this.indices.delete(id);
+			const dir = this.document.defaultView?.getComputedStyle(this.host.nativeElement).direction === "rtl" ? "rtl" : "ltr";
+			this.overlayRef?.setDirection(dir);
+			this.observer?.disconnect();
+			pane.querySelectorAll(".raqm-toast-content").forEach((element) => this.observer?.observe(element));
+			this.measure();
+		});
+		effect(() => {
+			const toasts = this.service.visibleToasts();
+			untracked(() => this.ensureFocus(toasts));
+		});
+		effect(() => {
+			this.announcementKey();
+			if (!this.ready()) return;
+			untracked(() => {
+				const fresh = this.service.visibleToasts().filter((t) => this.announced.get(t.id) !== t.updateKey);
+				this.announced = new Map(this.service.visibleToasts().map((t) => [t.id, t.updateKey]));
+				if (!fresh.length) return;
+				for (const toast of fresh) this.pendingAnnouncements.set(toast.id, toast);
+				if (this.announcementTimer !== void 0) clearTimeout(this.announcementTimer);
+				this.announcement.set("");
+				this.announcementTimer = setTimeout(() => {
+					this.announcementTimer = void 0;
+					this.announcement.set(Array.from(this.pendingAnnouncements.values()).filter((t) => this.service.visibleToasts().some((current) => current.id === t.id && current.updateKey === t.updateKey)).map((t) => [t.title, t.description].filter(Boolean).join(". ")).join(". "));
+					this.pendingAnnouncements.clear();
+				}, 100);
+			});
+		});
+	}
+	ngOnDestroy() {
+		this.restoreFocus();
+		this.document.removeEventListener("keydown", this.onDocumentKeydown);
+		this.observer?.disconnect();
+		if (this.announcementTimer !== void 0) clearTimeout(this.announcementTimer);
+		this.overlayRef?.dispose();
+		this.service.releaseViewport(this);
+	}
+	hover(value) {
+		this.hovered = value;
+		this.syncPause();
+	}
+	focusIn(event) {
+		const previous = event.relatedTarget;
+		if (previous && !this.overlayRef?.overlayElement.contains(previous)) this.previousFocus = previous;
+		this.focused = true;
+		this.syncPause();
+	}
+	focusOut(event) {
+		this.focused = !!event.relatedTarget && !!this.overlayRef?.overlayElement.contains(event.relatedTarget);
+		this.syncPause();
+	}
+	action(toast, event) {
+		toast.action?.onClick(toast.id, event);
+	}
+	toastIndex(toast) {
+		if (!toast.ending) this.indices.set(toast.id, Math.max(0, this.service.visibleToasts().findIndex((t) => t.id === toast.id)));
+		return this.indices.get(toast.id) ?? 0;
+	}
+	swipe(value) {
+		this.swiping = value;
+		this.syncPause();
+	}
+	syncPause() {
+		this.expanded.set(this.hovered || this.focused);
+		this.overlayRef?.overlayElement.querySelectorAll(".raqm-toast").forEach((root) => {
+			root.toggleAttribute("data-raqm-expanded", this.hovered || this.focused);
+		});
+		this.service.pauseViewport(this, this.hovered || this.focused || this.swiping);
+	}
+	measure() {
+		const viewport = this.overlayRef?.overlayElement.querySelector(".raqm-toast-viewport");
+		const roots = Array.from(viewport?.querySelectorAll(".raqm-toast:not([data-raqm-ending-style])") ?? []);
+		const frontHeight = roots[0]?.querySelector(".raqm-toast-content")?.offsetHeight;
+		if (viewport && frontHeight) viewport.style.setProperty("--toast-frontmost-height", `${frontHeight + 2}px`);
+		let offset = 0;
+		for (const root of roots) {
+			root.style.setProperty("--toast-offset-y", `${offset}px`);
+			offset += (root.querySelector(".raqm-toast-content")?.offsetHeight ?? 0) + 2;
+		}
+	}
+	ensureFocus(toasts) {
+		const root = this.document.activeElement?.closest(".raqm-toast");
+		if (!root || !this.overlayRef?.overlayElement.contains(root)) return;
+		if (toasts.some((t) => t.id === root.dataset["raqmToastId"])) return;
+		const next = Array.from(this.overlayRef.overlayElement.querySelectorAll(".raqm-toast")).find((element) => element !== root && toasts.some((t) => t.id === element.dataset["raqmToastId"]));
+		if (toasts.length && next) next.focus();
+		else this.restoreFocus();
+	}
+	restoreFocus() {
+		if (!this.overlayRef?.overlayElement.contains(this.document.activeElement)) return;
+		if (this.previousFocus?.isConnected && !this.previousFocus.closest("[inert]") && !this.previousFocus.matches(":disabled")) this.previousFocus.focus({ preventScroll: true });
+		else this.document.activeElement?.blur();
+		this.focused = false;
+		this.syncPause();
+	}
+	onDocumentKeydown = (event) => {
+		if (event.key !== "F6" || !this.service.visibleToasts().length) return;
+		event.preventDefault();
+		if (this.overlayRef?.overlayElement.contains(this.document.activeElement)) this.restoreFocus();
+		else {
+			this.previousFocus = this.document.activeElement;
+			this.overlayRef?.overlayElement.querySelector(".raqm-toast")?.focus();
+		}
+	};
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmToasterComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RaqmToasterComponent,
+		isStandalone: true,
+		selector: "raqm-toaster",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			closeLabel: {
+				classPropertyName: "closeLabel",
+				publicName: "closeLabel",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		viewQueries: [{
+			propertyName: "panel",
+			first: true,
+			predicate: ["panel"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<ng-template #panel>\r\n  <section\r\n    class=\"raqm-toast-viewport\"\r\n    [attr.aria-label]=\"label()\"\r\n    tabindex=\"-1\"\r\n    (mouseenter)=\"hover(true)\"\r\n    (mouseleave)=\"hover(false)\"\r\n    (focusin)=\"focusIn($event)\"\r\n    (focusout)=\"focusOut($event)\"\r\n  >\r\n    <div class=\"raqm-toast-announcer\" aria-live=\"polite\" aria-atomic=\"true\">\r\n      {{ announcement() }}\r\n    </div>\r\n    @for (toast of service.renderedToasts(); track toast.id) {\r\n      <raqm-toast\r\n        [toast]=\"toast\"\r\n        (swipingChange)=\"swipe($event)\"\r\n        [attr.data-raqm-toast-id]=\"toast.id\"\r\n        [style.--toast-index]=\"toastIndex(toast)\"\r\n        [attr.data-raqm-ending-style]=\"toast.ending ? '' : null\"\r\n        [attr.inert]=\"toast.ending ? '' : null\"\r\n        [attr.aria-hidden]=\"toast.ending ? 'true' : null\"\r\n        [attr.data-raqm-expanded]=\"expanded() ? '' : null\"\r\n        [attr.data-raqm-behind]=\"toastIndex(toast) > 0 ? '' : null\"\r\n        [attr.aria-labelledby]=\"toast.title ? toast.id + '-title' : null\"\r\n        [attr.aria-describedby]=\"toast.description ? toast.id + '-description' : null\"\r\n      >\r\n        <div raqm-toast-content>\r\n          @if (toast.type) {\r\n            <raqm-toast-icon [type]=\"toast.type\" />\r\n          }\r\n          <div class=\"raqm-toast-text\">\r\n            @if (toast.title) {\r\n              <h2 raqm-toast-title [id]=\"toast.id + '-title'\">{{ toast.title }}</h2>\r\n            }\r\n            @if (toast.description) {\r\n              <p raqm-toast-description [id]=\"toast.id + '-description'\">{{ toast.description }}</p>\r\n            }\r\n          </div>\r\n          @if (toast.action; as actionOptions) {\r\n            <button\r\n              raqm-toast-action\r\n              [disabled]=\"actionOptions.disabled ?? false\"\r\n              (click)=\"action(toast, $event)\"\r\n            >\r\n              {{ actionOptions.label }}\r\n            </button>\r\n          }\r\n          <button raqm-toast-close [attr.aria-label]=\"closeLabel()\"></button>\r\n        </div>\r\n      </raqm-toast>\r\n    }\r\n  </section>\r\n</ng-template>\r\n",
+		styles: [":host{display:contents}.raqm-toast-viewport{position:fixed;inset-inline:1rem;inset-block-end:1rem;z-index:50;inline-size:auto;max-inline-size:24rem;margin-inline:auto;outline:none;pointer-events:none}.raqm-toast-announcer{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(min-width:640px){.raqm-toast-viewport{inset-inline-start:auto;inline-size:100%;margin-inline:0}}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: RaqmToastComponent,
+				selector: "raqm-toast",
+				inputs: ["toast"],
+				outputs: ["swipingChange"]
+			},
+			{
+				kind: "directive",
+				type: RaqmToastActionDirective,
+				selector: "button[raqm-toast-action]"
+			},
+			{
+				kind: "component",
+				type: RaqmToastCloseComponent,
+				selector: "button[raqm-toast-close]"
+			},
+			{
+				kind: "directive",
+				type: RaqmToastContentDirective,
+				selector: "[raqm-toast-content]"
+			},
+			{
+				kind: "directive",
+				type: RaqmToastDescriptionDirective,
+				selector: "[raqm-toast-description]"
+			},
+			{
+				kind: "component",
+				type: RaqmToastIconComponent,
+				selector: "raqm-toast-icon",
+				inputs: ["type"]
+			},
+			{
+				kind: "directive",
+				type: RaqmToastTitleDirective,
+				selector: "[raqm-toast-title]"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmToasterComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			imports: [
+				RaqmToastComponent,
+				RaqmToastActionDirective,
+				RaqmToastCloseComponent,
+				RaqmToastContentDirective,
+				RaqmToastDescriptionDirective,
+				RaqmToastIconComponent,
+				RaqmToastTitleDirective
+			],
+			selector: "raqm-toaster",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<ng-template #panel>\r\n  <section\r\n    class=\"raqm-toast-viewport\"\r\n    [attr.aria-label]=\"label()\"\r\n    tabindex=\"-1\"\r\n    (mouseenter)=\"hover(true)\"\r\n    (mouseleave)=\"hover(false)\"\r\n    (focusin)=\"focusIn($event)\"\r\n    (focusout)=\"focusOut($event)\"\r\n  >\r\n    <div class=\"raqm-toast-announcer\" aria-live=\"polite\" aria-atomic=\"true\">\r\n      {{ announcement() }}\r\n    </div>\r\n    @for (toast of service.renderedToasts(); track toast.id) {\r\n      <raqm-toast\r\n        [toast]=\"toast\"\r\n        (swipingChange)=\"swipe($event)\"\r\n        [attr.data-raqm-toast-id]=\"toast.id\"\r\n        [style.--toast-index]=\"toastIndex(toast)\"\r\n        [attr.data-raqm-ending-style]=\"toast.ending ? '' : null\"\r\n        [attr.inert]=\"toast.ending ? '' : null\"\r\n        [attr.aria-hidden]=\"toast.ending ? 'true' : null\"\r\n        [attr.data-raqm-expanded]=\"expanded() ? '' : null\"\r\n        [attr.data-raqm-behind]=\"toastIndex(toast) > 0 ? '' : null\"\r\n        [attr.aria-labelledby]=\"toast.title ? toast.id + '-title' : null\"\r\n        [attr.aria-describedby]=\"toast.description ? toast.id + '-description' : null\"\r\n      >\r\n        <div raqm-toast-content>\r\n          @if (toast.type) {\r\n            <raqm-toast-icon [type]=\"toast.type\" />\r\n          }\r\n          <div class=\"raqm-toast-text\">\r\n            @if (toast.title) {\r\n              <h2 raqm-toast-title [id]=\"toast.id + '-title'\">{{ toast.title }}</h2>\r\n            }\r\n            @if (toast.description) {\r\n              <p raqm-toast-description [id]=\"toast.id + '-description'\">{{ toast.description }}</p>\r\n            }\r\n          </div>\r\n          @if (toast.action; as actionOptions) {\r\n            <button\r\n              raqm-toast-action\r\n              [disabled]=\"actionOptions.disabled ?? false\"\r\n              (click)=\"action(toast, $event)\"\r\n            >\r\n              {{ actionOptions.label }}\r\n            </button>\r\n          }\r\n          <button raqm-toast-close [attr.aria-label]=\"closeLabel()\"></button>\r\n        </div>\r\n      </raqm-toast>\r\n    }\r\n  </section>\r\n</ng-template>\r\n",
+			styles: [":host{display:contents}.raqm-toast-viewport{position:fixed;inset-inline:1rem;inset-block-end:1rem;z-index:50;inline-size:auto;max-inline-size:24rem;margin-inline:auto;outline:none;pointer-events:none}.raqm-toast-announcer{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(min-width:640px){.raqm-toast-viewport{inset-inline-start:auto;inline-size:100%;margin-inline:0}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		closeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeLabel",
+				required: true
+			}]
+		}],
+		panel: [{
+			type: i0.ViewChild,
+			args: ["panel", { isSignal: true }]
+		}]
+	}
+});
+const RaqmToast = [
+	RaqmToastComponent,
+	RaqmToastTitleDirective,
+	RaqmToastContentDirective,
+	RaqmToastDescriptionDirective,
+	RaqmToastActionDirective,
+	RaqmToastCloseComponent,
+	RaqmToastIconComponent,
+	RaqmToasterComponent
+];
+export { RaqmToast, RaqmToastActionDirective, RaqmToastCloseComponent, RaqmToastComponent, RaqmToastContentDirective, RaqmToastDescriptionDirective, RaqmToastIconComponent, RaqmToastService, RaqmToastTitleDirective, RaqmToasterComponent };
+
+//# sourceMappingURL=raqm-ui-toast.mjs.map