@area8975/ui 0.2.2-dev.48 → 0.2.2-dev.50

package/fesm2022/area8975-ui-toast.mjs

@@ -0,0 +1,269 @@
+import * as i0 from "@angular/core";
+import { Component, Injectable, booleanAttribute, computed, effect, input, output, signal } from "@angular/core";
+import { UiCardComponent } from "@area8975/ui/card";
+import { NgIcon, provideIcons } from "@ng-icons/core";
+import { heroXMark } from "@ng-icons/heroicons/outline";
+import { heroCheckCircleSolid, heroExclamationTriangleSolid, heroInformationCircleSolid, heroXCircleSolid } from "@ng-icons/heroicons/solid";
+const INTENT_ICONS = {
+	info: "heroInformationCircleSolid",
+	success: "heroCheckCircleSolid",
+	warning: "heroExclamationTriangleSolid",
+	danger: "heroXCircleSolid"
+};
+const INTENT_COLOURS = {
+	info: "text-primary-600",
+	success: "text-success-600",
+	warning: "text-warning-600",
+	danger: "text-danger-600"
+};
+var UiToastComponent = class UiToastComponent {
+	intent = input("info", ...ngDevMode ? [{ debugName: "intent" }] : /* istanbul ignore next */ []);
+	classes = input("", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	dismissable = input(false, {
+		...ngDevMode ? { debugName: "dismissable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	timeoutMs = input(null, ...ngDevMode ? [{ debugName: "timeoutMs" }] : /* istanbul ignore next */ []);
+	dismissed = output();
+	icon = computed(() => INTENT_ICONS[this.intent()], ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	iconColour = computed(() => INTENT_COLOURS[this.intent()], ...ngDevMode ? [{ debugName: "iconColour" }] : /* istanbul ignore next */ []);
+	role = computed(() => this.intent() === "danger" ? "alert" : "status", ...ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []);
+	hovered = false;
+	focused = false;
+	timer;
+	startedAt = 0;
+	remaining = 0;
+	constructor() {
+		effect((onCleanup) => {
+			const timeoutMs = this.timeoutMs();
+			if (timeoutMs === null) return;
+			this.remaining = timeoutMs;
+			this.updateTimer();
+			onCleanup(() => this.stopTimer());
+		});
+	}
+	setHovered(hovered) {
+		this.hovered = hovered;
+		this.updateTimer();
+	}
+	setFocused(focused) {
+		this.focused = focused;
+		this.updateTimer();
+	}
+	updateTimer() {
+		if (this.hovered || this.focused) this.stopTimer();
+		else if (this.timeoutMs() !== null && this.timer === void 0) this.startTimer();
+	}
+	startTimer() {
+		this.startedAt = Date.now();
+		this.timer = setTimeout(() => this.dismissed.emit(), this.remaining);
+	}
+	stopTimer() {
+		if (this.timer === void 0) return;
+		clearTimeout(this.timer);
+		this.timer = void 0;
+		this.remaining -= Date.now() - this.startedAt;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiToastComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiToastComponent,
+		isStandalone: true,
+		selector: "ui-toast",
+		inputs: {
+			intent: {
+				classPropertyName: "intent",
+				publicName: "intent",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			classes: {
+				classPropertyName: "classes",
+				publicName: "classes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dismissable: {
+				classPropertyName: "dismissable",
+				publicName: "dismissable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			timeoutMs: {
+				classPropertyName: "timeoutMs",
+				publicName: "timeoutMs",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { dismissed: "dismissed" },
+		host: { listeners: {
+			"mouseenter": "setHovered(true)",
+			"mouseleave": "setHovered(false)",
+			"focusin": "setFocused(true)",
+			"focusout": "setFocused(false)"
+		} },
+		providers: [provideIcons({
+			heroInformationCircleSolid,
+			heroCheckCircleSolid,
+			heroExclamationTriangleSolid,
+			heroXCircleSolid,
+			heroXMark
+		})],
+		ngImport: i0,
+		template: "<ui-card\n    radius=\"xl\"\n    class=\"p-4 w-full max-w-xs\"\n    [class]=\"classes()\"\n    [attr.role]=\"role()\"\n    tabindex=\"-1\"\n>\n    <div class=\"flex gap-x-3\">\n        <div class=\"inline-flex\" [class]=\"iconColour()\">\n            <ng-icon\n                [name]=\"icon()\"\n                class=\"shrink-0\"\n                size=\"24\"\n            />\n        </div>\n        <div class=\"grow\">\n            <p class=\"text-layer-foreground ui-text-body\">\n                <ng-content />\n            </p>\n        </div>\n        @if (dismissable()) {\n            <button\n                type=\"button\"\n                aria-label=\"Dismiss\"\n                (click)=\"dismissed.emit()\"\n            >\n                <ng-icon name=\"heroXMark\" />\n            </button>\n        }\n    </div>\n</ui-card>\n",
+		dependencies: [{
+			kind: "component",
+			type: NgIcon,
+			selector: "ng-icon",
+			inputs: [
+				"name",
+				"svg",
+				"size",
+				"strokeWidth",
+				"color"
+			]
+		}, {
+			kind: "component",
+			type: UiCardComponent,
+			selector: "ui-card",
+			inputs: ["radius"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiToastComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-toast",
+			imports: [NgIcon, UiCardComponent],
+			host: {
+				"(mouseenter)": "setHovered(true)",
+				"(mouseleave)": "setHovered(false)",
+				"(focusin)": "setFocused(true)",
+				"(focusout)": "setFocused(false)"
+			},
+			providers: [provideIcons({
+				heroInformationCircleSolid,
+				heroCheckCircleSolid,
+				heroExclamationTriangleSolid,
+				heroXCircleSolid,
+				heroXMark
+			})],
+			template: "<ui-card\n    radius=\"xl\"\n    class=\"p-4 w-full max-w-xs\"\n    [class]=\"classes()\"\n    [attr.role]=\"role()\"\n    tabindex=\"-1\"\n>\n    <div class=\"flex gap-x-3\">\n        <div class=\"inline-flex\" [class]=\"iconColour()\">\n            <ng-icon\n                [name]=\"icon()\"\n                class=\"shrink-0\"\n                size=\"24\"\n            />\n        </div>\n        <div class=\"grow\">\n            <p class=\"text-layer-foreground ui-text-body\">\n                <ng-content />\n            </p>\n        </div>\n        @if (dismissable()) {\n            <button\n                type=\"button\"\n                aria-label=\"Dismiss\"\n                (click)=\"dismissed.emit()\"\n            >\n                <ng-icon name=\"heroXMark\" />\n            </button>\n        }\n    </div>\n</ui-card>\n"
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		intent: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "intent",
+				required: false
+			}]
+		}],
+		classes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "classes",
+				required: false
+			}]
+		}],
+		dismissable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dismissable",
+				required: false
+			}]
+		}],
+		timeoutMs: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "timeoutMs",
+				required: false
+			}]
+		}],
+		dismissed: [{
+			type: i0.Output,
+			args: ["dismissed"]
+		}]
+	}
+});
+var UiToastService = class UiToastService {
+	_toasts = signal([], ...ngDevMode ? [{ debugName: "_toasts" }] : /* istanbul ignore next */ []);
+	nextId = 0;
+	toasts = this._toasts.asReadonly();
+	show(message, options = {}) {
+		const id = this.nextId++;
+		const toast = {
+			id,
+			message,
+			templateContext: {
+				$implicit: options.context,
+				dismiss: () => this.dismiss(id)
+			},
+			intent: options.intent ?? "info",
+			dismissable: options.dismissable ?? true,
+			timeoutMs: options.timeoutMs
+		};
+		this._toasts.update((toasts) => [...toasts, toast]);
+		return id;
+	}
+	dismiss(id) {
+		this._toasts.update((toasts) => toasts.filter((toast) => toast.id !== id));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiToastService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiToastService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiToastService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+const ToastIntents = [
+	"info",
+	"success",
+	"warning",
+	"danger"
+];
+export { ToastIntents, UiToastComponent, UiToastService };
+
+//# sourceMappingURL=area8975-ui-toast.mjs.map

package/fesm2022/area8975-ui-toast.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-toast.mjs","names":[],"sources":["../../../projects/ui/toast/toast.component.ts","../../../projects/ui/toast/toast.component.html","../../../projects/ui/toast/toast.service.ts","../../../projects/ui/toast/toast.types.ts"],"sourcesContent":["import {\n    booleanAttribute,\n    Component,\n    computed,\n    effect,\n    input,\n    output\n} from '@angular/core';\n\nimport { UiCardComponent } from '@area8975/ui/card';\nimport { IconType, NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroXMark } from '@ng-icons/heroicons/outline';\nimport {\n    heroCheckCircleSolid,\n    heroExclamationTriangleSolid,\n    heroInformationCircleSolid,\n    heroXCircleSolid\n} from '@ng-icons/heroicons/solid';\n\nimport { ToastIntent } from './toast.types';\n\n\nconst INTENT_ICONS: Record<ToastIntent, IconType> = {\n    info: 'heroInformationCircleSolid',\n    success: 'heroCheckCircleSolid',\n    warning: 'heroExclamationTriangleSolid',\n    danger: 'heroXCircleSolid'\n};\n\nconst INTENT_COLOURS: Record<ToastIntent, string> = {\n    info: 'text-primary-600',\n    success: 'text-success-600',\n    warning: 'text-warning-600',\n    danger: 'text-danger-600'\n};\n\n@Component({\n    selector: 'ui-toast',\n    templateUrl: './toast.component.html',\n    imports: [NgIcon, UiCardComponent],\n    host: {\n        '(mouseenter)': 'setHovered(true)',\n        '(mouseleave)': 'setHovered(false)',\n        '(focusin)': 'setFocused(true)',\n        '(focusout)': 'setFocused(false)'\n    },\n    providers: [provideIcons({\n        heroInformationCircleSolid,\n        heroCheckCircleSolid,\n        heroExclamationTriangleSolid,\n        heroXCircleSolid,\n        heroXMark\n    })]\n})\nexport class UiToastComponent {\n    readonly intent = input<ToastIntent>('info');\n    readonly classes = input<string>('');\n    readonly dismissable = input(false, { transform: booleanAttribute });\n\n    /** ms before the toast dismisses itself, paused while hovered or focused. null never times out. */\n    readonly timeoutMs = input<number | null>(null);\n\n    readonly dismissed = output<void>();\n\n    protected readonly icon = computed(() => INTENT_ICONS[this.intent()]);\n    protected readonly iconColour = computed(() =>\n        INTENT_COLOURS[this.intent()]\n    );\n\n    // errors interrupt the screen reader, everything else waits its turn\n    protected readonly role = computed(() =>\n        this.intent() === 'danger' ? 'alert' : 'status'\n    );\n\n    private hovered = false;\n    private focused = false;\n\n    private timer?: ReturnType<typeof setTimeout>;\n    private startedAt = 0;\n    private remaining = 0;\n\n    constructor() {\n        effect(onCleanup => {\n            const timeoutMs = this.timeoutMs();\n\n            if (timeoutMs === null) {\n                return;\n            }\n\n            this.remaining = timeoutMs;\n            this.updateTimer();\n\n            onCleanup(() => this.stopTimer());\n        });\n    }\n\n    protected setHovered(hovered: boolean): void {\n        this.hovered = hovered;\n        this.updateTimer();\n    }\n\n    protected setFocused(focused: boolean): void {\n        this.focused = focused;\n        this.updateTimer();\n    }\n\n    private updateTimer(): void {\n        if (this.hovered || this.focused) {\n            this.stopTimer();\n        } else if (this.timeoutMs() !== null && this.timer === undefined) {\n            this.startTimer();\n        }\n    }\n\n    private startTimer(): void {\n        this.startedAt = Date.now();\n        this.timer = setTimeout(() => this.dismissed.emit(), this.remaining);\n    }\n\n    // keeps whatever time was left so the countdown carries on after a pause\n    private stopTimer(): void {\n        if (this.timer === undefined) {\n            return;\n        }\n\n        clearTimeout(this.timer);\n        this.timer = undefined;\n        this.remaining -= Date.now() - this.startedAt;\n    }\n}\n","<ui-card\n    radius=\"xl\"\n    class=\"p-4 w-full max-w-xs\"\n    [class]=\"classes()\"\n    [attr.role]=\"role()\"\n    tabindex=\"-1\"\n>\n    <div class=\"flex gap-x-3\">\n        <div class=\"inline-flex\" [class]=\"iconColour()\">\n            <ng-icon\n                [name]=\"icon()\"\n                class=\"shrink-0\"\n                size=\"24\"\n            />\n        </div>\n        <div class=\"grow\">\n            <p class=\"text-layer-foreground ui-text-body\">\n                <ng-content />\n            </p>\n        </div>\n        @if (dismissable()) {\n            <button\n                type=\"button\"\n                aria-label=\"Dismiss\"\n                (click)=\"dismissed.emit()\"\n            >\n                <ng-icon name=\"heroXMark\" />\n            </button>\n        }\n    </div>\n</ui-card>\n","import { Injectable, signal } from '@angular/core';\n\nimport { Toast, ToastMessage, ToastOptions } from './toast.types';\n\n\n@Injectable({ providedIn: 'root' })\nexport class UiToastService {\n    private readonly _toasts = signal<Toast[]>([]);\n    private nextId = 0;\n\n    readonly toasts = this._toasts.asReadonly();\n\n    show<ContextType>(\n        message: ToastMessage<ContextType>,\n        options: ToastOptions<ContextType> = {}\n    ): number {\n        const id = this.nextId++;\n\n        const toast: Toast = {\n            id,\n            message,\n            templateContext: {\n                $implicit: options.context,\n                dismiss: () => this.dismiss(id)\n            },\n            intent: options.intent ?? 'info',\n            dismissable: options.dismissable ?? true,\n            timeoutMs: options.timeoutMs\n        };\n\n        this._toasts.update(toasts => [...toasts, toast]);\n\n        return id;\n    }\n\n    dismiss(id: number): void {\n        this._toasts.update(toasts => toasts.filter(toast => toast.id !== id));\n    }\n}\n","import { TemplateRef } from '@angular/core';\n\n\nexport const ToastIntents = [\n    'info',\n    'success',\n    'warning',\n    'danger'\n] as const;\n\nexport type ToastIntent = typeof ToastIntents[number];\n\n/** What a toast template receives: `let-data` for the context, `let-dismiss=\"dismiss\"` to close it. */\nexport interface ToastTemplateContext<ContextType = unknown> {\n    $implicit: ContextType;\n    dismiss: () => void;\n}\n\nexport type ToastMessage<ContextType = unknown> =\n    | string\n    | TemplateRef<ToastTemplateContext<ContextType>>;\n\nexport interface Toast {\n    id: number;\n    message: ToastMessage;\n    templateContext: ToastTemplateContext;\n    intent: ToastIntent;\n    dismissable: boolean;\n\n    // null never times out, undefined falls back to the toaster's timeout\n    timeoutMs?: number | null;\n}\n\nexport type ToastOptions<ContextType = unknown> =\n    & Partial<\n        Pick<Toast, 'intent' | 'dismissable' | 'timeoutMs'>\n    >\n    & {\n        context?: ContextType;\n    };\n"],"mappings":"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"}

package/fesm2022/area8975-ui-toaster.mjs

@@ -0,0 +1,117 @@
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { Component, computed, inject, input } from "@angular/core";
+import { UiToastComponent, UiToastService } from "@area8975/ui/toast";
+const POSITION_CLASSES = {
+	"top-left": "top-0 left-0 items-start flex-col-reverse",
+	"top-center": "top-0 left-1/2 -translate-x-1/2 items-center flex-col-reverse",
+	"top-right": "top-0 right-0 items-end flex-col-reverse",
+	"bottom-left": "bottom-0 left-0 items-start flex-col",
+	"bottom-center": "bottom-0 left-1/2 -translate-x-1/2 items-center flex-col",
+	"bottom-right": "bottom-0 right-0 items-end flex-col"
+};
+var UiToasterComponent = class UiToasterComponent {
+	position = input("bottom-right", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	timeoutMs = input(null, ...ngDevMode ? [{ debugName: "timeoutMs" }] : /* istanbul ignore next */ []);
+	toastService = inject(UiToastService);
+	positionClasses = computed(() => POSITION_CLASSES[this.position()], ...ngDevMode ? [{ debugName: "positionClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiToasterComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiToasterComponent,
+		isStandalone: true,
+		selector: "ui-toaster",
+		inputs: {
+			position: {
+				classPropertyName: "position",
+				publicName: "position",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			timeoutMs: {
+				classPropertyName: "timeoutMs",
+				publicName: "timeoutMs",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<section\n    class=\"z-50 box-content fixed flex px-4 py-2.5 w-full max-w-xs pointer-events-none\"\n    [class]=\"positionClasses()\"\n    aria-label=\"Notifications\"\n>\n    @for (toast of toastService.toasts(); track toast.id) {\n        <div\n            class=\"ui-toaster--item\"\n            animate.enter=\"ui-toaster--enter\"\n            animate.leave=\"ui-toaster--leave\"\n        >\n            <div class=\"ui-toaster--item-inner\">\n                <ui-toast\n                    class=\"block py-1.5 w-full pointer-events-auto\"\n                    [intent]=\"toast.intent\"\n                    [dismissable]=\"toast.dismissable\"\n                    [timeoutMs]=\"toast.timeoutMs === undefined ? timeoutMs() : toast.timeoutMs\"\n                    (dismissed)=\"toastService.dismiss(toast.id)\"\n                >\n                    @if (typeof toast.message === 'string') {\n                        {{ toast.message }}\n                    } @else {\n                        <ng-container\n                            *ngTemplateOutlet=\"toast.message; context: toast.templateContext\"\n                        />\n                    }\n                </ui-toast>\n            </div>\n        </div>\n    }\n</section>\n",
+		styles: [".ui-toaster--item{display:grid;grid-template-rows:1fr;width:100%}.ui-toaster--item-inner{min-height:0}.ui-toaster--enter>.ui-toaster--item-inner,.ui-toaster--leave>.ui-toaster--item-inner{overflow:hidden}.ui-toaster--enter{animation:ui-toaster-reveal .3s ease-out}.ui-toaster--leave{animation:ui-toaster-reveal .3s ease-in reverse forwards}@keyframes ui-toaster-reveal{0%{grid-template-rows:0fr;opacity:0}50%{grid-template-rows:1fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: UiToastComponent,
+			selector: "ui-toast",
+			inputs: [
+				"intent",
+				"classes",
+				"dismissable",
+				"timeoutMs"
+			],
+			outputs: ["dismissed"]
+		}, {
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiToasterComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-toaster",
+			imports: [UiToastComponent, NgTemplateOutlet],
+			template: "<section\n    class=\"z-50 box-content fixed flex px-4 py-2.5 w-full max-w-xs pointer-events-none\"\n    [class]=\"positionClasses()\"\n    aria-label=\"Notifications\"\n>\n    @for (toast of toastService.toasts(); track toast.id) {\n        <div\n            class=\"ui-toaster--item\"\n            animate.enter=\"ui-toaster--enter\"\n            animate.leave=\"ui-toaster--leave\"\n        >\n            <div class=\"ui-toaster--item-inner\">\n                <ui-toast\n                    class=\"block py-1.5 w-full pointer-events-auto\"\n                    [intent]=\"toast.intent\"\n                    [dismissable]=\"toast.dismissable\"\n                    [timeoutMs]=\"toast.timeoutMs === undefined ? timeoutMs() : toast.timeoutMs\"\n                    (dismissed)=\"toastService.dismiss(toast.id)\"\n                >\n                    @if (typeof toast.message === 'string') {\n                        {{ toast.message }}\n                    } @else {\n                        <ng-container\n                            *ngTemplateOutlet=\"toast.message; context: toast.templateContext\"\n                        />\n                    }\n                </ui-toast>\n            </div>\n        </div>\n    }\n</section>\n",
+			styles: [".ui-toaster--item{display:grid;grid-template-rows:1fr;width:100%}.ui-toaster--item-inner{min-height:0}.ui-toaster--enter>.ui-toaster--item-inner,.ui-toaster--leave>.ui-toaster--item-inner{overflow:hidden}.ui-toaster--enter{animation:ui-toaster-reveal .3s ease-out}.ui-toaster--leave{animation:ui-toaster-reveal .3s ease-in reverse forwards}@keyframes ui-toaster-reveal{0%{grid-template-rows:0fr;opacity:0}50%{grid-template-rows:1fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}\n"]
+		}]
+	}],
+	propDecorators: {
+		position: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "position",
+				required: false
+			}]
+		}],
+		timeoutMs: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "timeoutMs",
+				required: false
+			}]
+		}]
+	}
+});
+const ToasterPositions = [
+	"top-left",
+	"top-center",
+	"top-right",
+	"bottom-left",
+	"bottom-center",
+	"bottom-right"
+];
+export { ToasterPositions, UiToasterComponent };
+
+//# sourceMappingURL=area8975-ui-toaster.mjs.map

package/fesm2022/area8975-ui-toaster.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-toaster.mjs","names":[],"sources":["../../../projects/ui/toaster/toaster.component.ts","../../../projects/ui/toaster/toaster.component.html","../../../projects/ui/toaster/toaster.types.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { Component, computed, inject, input } from '@angular/core';\n\nimport { UiToastComponent } from '@area8975/ui/toast';\nimport { UiToastService } from '@area8975/ui/toast';\n\nimport { ToasterPosition } from './toaster.types';\n\n\n// top stacks are reversed so the newest toast is always nearest the edge\nconst POSITION_CLASSES: Record<ToasterPosition, string> = {\n    'top-left': 'top-0 left-0 items-start flex-col-reverse',\n    'top-center':\n        'top-0 left-1/2 -translate-x-1/2 items-center flex-col-reverse',\n    'top-right': 'top-0 right-0 items-end flex-col-reverse',\n    'bottom-left': 'bottom-0 left-0 items-start flex-col',\n    'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2 items-center flex-col',\n    'bottom-right': 'bottom-0 right-0 items-end flex-col'\n};\n\n@Component({\n    selector: 'ui-toaster',\n    templateUrl: './toaster.component.html',\n    styleUrl: './toaster.component.css',\n    imports: [UiToastComponent, NgTemplateOutlet]\n})\nexport class UiToasterComponent {\n    readonly position = input<ToasterPosition>('bottom-right');\n    readonly timeoutMs = input<number | null>(null);\n\n    protected readonly toastService = inject(UiToastService);\n\n    protected readonly positionClasses = computed(() =>\n        POSITION_CLASSES[this.position()]\n    );\n}\n","<section\n    class=\"z-50 box-content fixed flex px-4 py-2.5 w-full max-w-xs pointer-events-none\"\n    [class]=\"positionClasses()\"\n    aria-label=\"Notifications\"\n>\n    @for (toast of toastService.toasts(); track toast.id) {\n        <div\n            class=\"ui-toaster--item\"\n            animate.enter=\"ui-toaster--enter\"\n            animate.leave=\"ui-toaster--leave\"\n        >\n            <div class=\"ui-toaster--item-inner\">\n                <ui-toast\n                    class=\"block py-1.5 w-full pointer-events-auto\"\n                    [intent]=\"toast.intent\"\n                    [dismissable]=\"toast.dismissable\"\n                    [timeoutMs]=\"toast.timeoutMs === undefined ? timeoutMs() : toast.timeoutMs\"\n                    (dismissed)=\"toastService.dismiss(toast.id)\"\n                >\n                    @if (typeof toast.message === 'string') {\n                        {{ toast.message }}\n                    } @else {\n                        <ng-container\n                            *ngTemplateOutlet=\"toast.message; context: toast.templateContext\"\n                        />\n                    }\n                </ui-toast>\n            </div>\n        </div>\n    }\n</section>\n","export const ToasterPositions = [\n    'top-left',\n    'top-center',\n    'top-right',\n    'bottom-left',\n    'bottom-center',\n    'bottom-right'\n] as const;\n\nexport type ToasterPosition = typeof ToasterPositions[number];\n"],"mappings":";;;;AAUA,MAAM,mBAAoD;CACtD,YAAY;CACZ,cACI;CACJ,aAAa;CACb,eAAe;CACf,iBAAiB;CACjB,gBAAgB;AACnB;AAQD,IAAa,qBAAb,MAAa,mBAAkB;CAClB,WAAW,MAAuB,gBAAe,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CACjD,YAAY,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAE5B,eAAe,OAAO,cAAc;CAEpC,kBAAkB,eACjC,iBAAiB,KAAK,SAAQ,IACjC,GAAA,YAAA,CAAA,EAAA,WAAA,kBAAA,CAAA,+BAAA,CAAA,CAAA;CARQ,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAkB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAlB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAkB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UC1B/B;EA+BA,QAAA,CAAA,meAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDPc;GAAgB,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;GAAA;GAAA,SAAA,CAAA,WAAA;EAAA,GAAA;GAAA,MAAA;GAAA,MAAE;GAAgB,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;CAAA,CAAA;;AAEnC,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAkB,YAAA,CAAA;EAN9B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAY,SAGb,CAAC,kBAAkB,gBAAgB;GAAC,UAAA;GAAA,QAAA,CAAA,meAAA;EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;AExBjD,MAAa,mBAAmB;CAC5B;CACA;CACA;CACA;CACA;CACA;AACM"}

package/fesm2022/area8975-ui-tooltip.mjs

@@ -0,0 +1,196 @@
+import * as i0 from "@angular/core";
+import { Component, ElementRef, computed, inject, input, signal, viewChild } from "@angular/core";
+import { UiOverlayComponent } from "@area8975/ui/overlay";
+var UiTooltipComponent = class UiTooltipComponent {
+	anchor = inject(ElementRef);
+	content = viewChild("content", {
+		...ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {},
+		read: ElementRef
+	});
+	text = input.required(...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+	placement = input("top", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
+	trigger = input("hover", ...ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []);
+	classes = input("", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	isOpen = input(signal(false), ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	closeBehaviour = computed(() => this.trigger() === "click" ? "whenClickOutside" : "none", ...ngDevMode ? [{ debugName: "closeBehaviour" }] : /* istanbul ignore next */ []);
+	generatedClasses = computed(() => [
+		"ui-tooltip",
+		"ui-text-caption",
+		this.classes()
+	].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
+	onHover(isHovering) {
+		if (this.trigger() === "hover") this.isOpen().set(isHovering);
+	}
+	onFocus(isFocused) {
+		if (["hover", "focus"].includes(this.trigger())) this.isOpen().set(isFocused);
+	}
+	onClick() {
+		if (this.trigger() === "click") this.isOpen().update((value) => !value);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiTooltipComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiTooltipComponent,
+		isStandalone: true,
+		selector: "ui-tooltip",
+		inputs: {
+			text: {
+				classPropertyName: "text",
+				publicName: "text",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			placement: {
+				classPropertyName: "placement",
+				publicName: "placement",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			trigger: {
+				classPropertyName: "trigger",
+				publicName: "trigger",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			classes: {
+				classPropertyName: "classes",
+				publicName: "classes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			isOpen: {
+				classPropertyName: "isOpen",
+				publicName: "isOpen",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			listeners: {
+				"mouseenter": "onHover(true)",
+				"mouseleave": "onHover(false)",
+				"focusin": "onFocus(true)",
+				"focusout": "onFocus(false)",
+				"click": "onClick()"
+			},
+			classAttribute: "inline-flex size-fit"
+		},
+		viewQueries: [{
+			propertyName: "content",
+			first: true,
+			predicate: ["content"],
+			descendants: true,
+			read: ElementRef,
+			isSignal: true
+		}],
+		exportAs: ["uiTooltip"],
+		ngImport: i0,
+		template: "<ui-overlay\n    [isOpen]=\"isOpen()\"\n    [closeBehaviour]=\"closeBehaviour()\"\n    [content]=\"content()\"\n    [anchor]=\"anchor\"\n    [placement]=\"placement()\"\n>\n    <ng-content />\n\n    @if (isOpen()()) {\n        <div #content class=\"p-1.5\" style=\"position: fixed; z-index: 60\">\n            <div role=\"tooltip\" [class]=\"generatedClasses()\">{{ text() }}</div>\n        </div>\n    }\n</ui-overlay>\n",
+		styles: ["@layer properties;.ui-tooltip{max-width:var(--container-xs, 20rem);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--tooltip-line);background-color:var(--tooltip);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);color:var(--tooltip-foreground);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
+		dependencies: [{
+			kind: "component",
+			type: UiOverlayComponent,
+			selector: "ui-overlay",
+			inputs: [
+				"content",
+				"anchor",
+				"closeBehaviour",
+				"isOpen",
+				"placement",
+				"offset",
+				"viewportPadding",
+				"matchWidth"
+			],
+			exportAs: ["uiOverlay"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiTooltipComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-tooltip",
+			exportAs: "uiTooltip",
+			imports: [UiOverlayComponent],
+			host: {
+				class: "inline-flex size-fit",
+				"(mouseenter)": "onHover(true)",
+				"(mouseleave)": "onHover(false)",
+				"(focusin)": "onFocus(true)",
+				"(focusout)": "onFocus(false)",
+				"(click)": "onClick()"
+			},
+			template: "<ui-overlay\n    [isOpen]=\"isOpen()\"\n    [closeBehaviour]=\"closeBehaviour()\"\n    [content]=\"content()\"\n    [anchor]=\"anchor\"\n    [placement]=\"placement()\"\n>\n    <ng-content />\n\n    @if (isOpen()()) {\n        <div #content class=\"p-1.5\" style=\"position: fixed; z-index: 60\">\n            <div role=\"tooltip\" [class]=\"generatedClasses()\">{{ text() }}</div>\n        </div>\n    }\n</ui-overlay>\n",
+			styles: ["@layer properties;.ui-tooltip{max-width:var(--container-xs, 20rem);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--tooltip-line);background-color:var(--tooltip);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);color:var(--tooltip-foreground);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	propDecorators: {
+		content: [{
+			type: i0.ViewChild,
+			args: ["content", {
+				read: ElementRef,
+				isSignal: true
+			}]
+		}],
+		text: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "text",
+				required: true
+			}]
+		}],
+		placement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placement",
+				required: false
+			}]
+		}],
+		trigger: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "trigger",
+				required: false
+			}]
+		}],
+		classes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "classes",
+				required: false
+			}]
+		}],
+		isOpen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isOpen",
+				required: false
+			}]
+		}]
+	}
+});
+export { UiTooltipComponent };
+
+//# sourceMappingURL=area8975-ui-tooltip.mjs.map

package/fesm2022/area8975-ui-tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-tooltip.mjs","names":[],"sources":["../../../projects/ui/tooltip/tooltip.component.ts","../../../projects/ui/tooltip/tooltip.component.html"],"sourcesContent":["import {\n    Component,\n    computed,\n    ElementRef,\n    inject,\n    input,\n    signal,\n    viewChild,\n    WritableSignal\n} from '@angular/core';\n\nimport { UiOverlayComponent } from '@area8975/ui/overlay';\nimport { UiOverlayCloseBehaviour } from '@area8975/ui/overlay';\nimport { Placement } from '@floating-ui/dom';\n\nimport { UiTooltipTrigger } from './tooltip.types';\n\n\n@Component({\n    selector: 'ui-tooltip',\n    exportAs: 'uiTooltip',\n    templateUrl: './tooltip.component.html',\n    styleUrl: './tooltip.component.css',\n    imports: [UiOverlayComponent],\n    host: {\n        class: 'inline-flex size-fit',\n        '(mouseenter)': 'onHover(true)',\n        '(mouseleave)': 'onHover(false)',\n        '(focusin)': 'onFocus(true)',\n        '(focusout)': 'onFocus(false)',\n        '(click)': 'onClick()'\n    }\n})\nexport class UiTooltipComponent {\n    protected readonly anchor = inject(ElementRef<HTMLElement>);\n    protected readonly content = viewChild('content', { read: ElementRef });\n\n    readonly text = input.required<string>();\n    readonly placement = input<Placement>('top');\n    readonly trigger = input<UiTooltipTrigger>('hover');\n    readonly classes = input<string>('');\n\n    readonly isOpen = input<WritableSignal<boolean>>(signal(false));\n\n    protected readonly closeBehaviour = computed<UiOverlayCloseBehaviour>(() =>\n        this.trigger() === 'click'\n            ? 'whenClickOutside'\n            : 'none'\n    );\n\n    protected readonly generatedClasses = computed(() =>\n        ['ui-tooltip', 'ui-text-caption', this.classes()]\n            .filter(Boolean)\n            .join(' ')\n    );\n\n    protected onHover(isHovering: boolean) {\n        if (this.trigger() === 'hover') {\n            this.isOpen().set(isHovering);\n        }\n    }\n\n    // Hover also listens to focus so keyboard users still get the tooltip\n    protected onFocus(isFocused: boolean) {\n        if (['hover', 'focus'].includes(this.trigger())) {\n            this.isOpen().set(isFocused);\n        }\n    }\n\n    protected onClick() {\n        if (this.trigger() === 'click') {\n            this.isOpen().update(value => !value);\n        }\n    }\n}\n","<ui-overlay\n    [isOpen]=\"isOpen()\"\n    [closeBehaviour]=\"closeBehaviour()\"\n    [content]=\"content()\"\n    [anchor]=\"anchor\"\n    [placement]=\"placement()\"\n>\n    <ng-content />\n\n    @if (isOpen()()) {\n        <div #content class=\"p-1.5\" style=\"position: fixed; z-index: 60\">\n            <div role=\"tooltip\" [class]=\"generatedClasses()\">{{ text() }}</div>\n        </div>\n    }\n</ui-overlay>\n"],"mappings":"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"}