@fuse_ui/toast 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/fuse_ui-toast.mjs +176 -0
  2. package/fesm2022/fuse_ui-toast.mjs.map +1 -0
  3. package/package.json +59 -0
  4. package/types/fuse_ui-toast.d.ts +54 -0
package/fesm2022/fuse_ui-toast.mjs ADDED
@@ -0,0 +1,176 @@
1
+ import * as i0 from '@angular/core';
2
+ import { input, output, signal, computed, ChangeDetectionStrategy, Component, inject, ApplicationRef, EnvironmentInjector, DestroyRef, createComponent, Injectable } from '@angular/core';
3
+ import { outputToObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
4
+ import { take } from 'rxjs';
5
+
6
+ class FuseToastComponent {
7
+ // ─── Public @Input() API ────────────────────────────────────────────────────
8
+ message = input('', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
9
+ type = input('info', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
10
+ action = input(null, ...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
11
+ // ─── Public @Output() API ───────────────────────────────────────────────────
12
+ toastClose = output();
13
+ // ─── Internal signal state ──────────────────────────────────────────────────
14
+ isVisible = signal(true, ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
15
+ // ─── Host class computation ─────────────────────────────────────────────────
16
+ hostClasses = computed(() => [
17
+ 'fuse-toast',
18
+ `fuse-toast--${this.type()}`,
19
+ !this.isVisible() ? 'fuse-toast--leaving' : '',
20
+ ]
21
+ .filter(Boolean)
22
+ .join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
23
+ // ─── Public API (callable by FuseToastService via ref.instance) ─────────────
24
+ close() {
25
+ this.isVisible.set(false);
26
+ }
27
+ // ─── Template event handlers ─────────────────────────────────────────────────
28
+ onActionClick() {
29
+ this.action()?.callback();
30
+ this.close();
31
+ }
32
+ onAnimationEnd() {
33
+ // Called by the host (animationend) binding. Only emit after the leave
34
+ // animation; the enter animation end is ignored because isVisible() is true.
35
+ if (!this.isVisible()) {
36
+ this.toastClose.emit();
37
+ }
38
+ }
39
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
40
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuseToastComponent, isStandalone: true, selector: "fuse-toast", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toastClose: "toastClose" }, host: { attributes: { "role": "alert", "aria-live": "polite" }, listeners: { "animationend": "onAnimationEnd()" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div class=\"fuse-toast__inner\">\n\n <!-- Type icon -->\n <span class=\"fuse-toast__icon\" aria-hidden=\"true\">\n @switch (type()) {\n @case ('success') {\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\"\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\"\n clip-rule=\"evenodd\" />\n </svg>\n }\n @case ('warning') {\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\"\n d=\"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z\"\n clip-rule=\"evenodd\" />\n </svg>\n }\n @case ('error') {\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\"\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\"\n clip-rule=\"evenodd\" />\n </svg>\n }\n @default {\n <!-- Info (default): info circle -->\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\"\n d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z\"\n clip-rule=\"evenodd\" />\n </svg>\n }\n }\n </span>\n\n <!-- Message -->\n <span class=\"fuse-toast__message\">{{ message() }}</span>\n\n <!-- Optional action button -->\n @if (action()) {\n <button\n class=\"fuse-toast__action\"\n type=\"button\"\n (click)=\"onActionClick()\"\n >\n {{ action()?.label }}\n </button>\n }\n\n <!-- Close button -->\n <button\n class=\"fuse-toast__close\"\n type=\"button\"\n aria-label=\"Dismiss notification\"\n (click)=\"close()\"\n >\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n <path d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n </svg>\n </button>\n\n</div>\n", styles: ["@keyframes fuse-toast-in{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fuse-toast-out{0%{transform:translate(0);opacity:1}to{transform:translate(110%);opacity:0}}:host{--fuse-toast-bg: var(--fuse-color-surface, #ffffff);--fuse-toast-radius: var(--fuse-radius-lg, 10px);--fuse-toast-shadow: var(--fuse-shadow-lg, 0 8px 24px rgba(0, 0, 0, .12));--fuse-toast-border-width: 1px;--fuse-toast-min-width: 280px;--fuse-toast-max-width: 420px;--fuse-toast-padding: var(--fuse-space-4, 1rem) var(--fuse-space-5, 1.25rem);--fuse-toast-gap: var(--fuse-space-3, .75rem);--fuse-toast-icon-size: 20px;--fuse-toast-info-color: var(--fuse-color-primary, #6366f1);--fuse-toast-info-bg: var(--fuse-color-primary-subtle, #eef2ff);--fuse-toast-success-color: var(--fuse-color-success, #16a34a);--fuse-toast-success-bg: var(--fuse-color-success-subtle, #f0fdf4);--fuse-toast-warning-color: var(--fuse-color-warning-dark, #d97706);--fuse-toast-warning-bg: var(--fuse-color-warning-subtle, #fffbeb);--fuse-toast-error-color: var(--fuse-color-danger, #dc2626);--fuse-toast-error-bg: var(--fuse-color-danger-subtle, #fef2f2);--fuse-toast-text-color: var(--fuse-color-text, #1e293b);--fuse-toast-close-color: var(--fuse-color-text-muted, #94a3b8);--fuse-toast-action-color: var(--fuse-toast-info-color);display:block;min-width:var(--fuse-toast-min-width);max-width:var(--fuse-toast-max-width);animation:fuse-toast-in .25s cubic-bezier(.16,1,.3,1) forwards}:host.fuse-toast--leaving{animation:fuse-toast-out .2s ease-in forwards}.fuse-toast{background-color:var(--fuse-toast-bg);border-radius:var(--fuse-toast-radius);box-shadow:var(--fuse-toast-shadow);border-left:4px solid var(--fuse-toast-accent)}.fuse-toast--info{--fuse-toast-accent: var(--fuse-toast-info-color)}.fuse-toast--success{--fuse-toast-accent: var(--fuse-toast-success-color)}.fuse-toast--warning{--fuse-toast-accent: var(--fuse-toast-warning-color)}.fuse-toast--error{--fuse-toast-accent: var(--fuse-toast-error-color)}.fuse-toast__inner{display:flex;align-items:center;gap:var(--fuse-toast-gap);padding:var(--fuse-toast-padding)}.fuse-toast__icon{flex-shrink:0;width:var(--fuse-toast-icon-size);height:var(--fuse-toast-icon-size);display:flex;align-items:center;justify-content:center}.fuse-toast__icon svg{width:100%;height:100%}.fuse-toast--info .fuse-toast__icon{color:var(--fuse-toast-info-color)}.fuse-toast--success .fuse-toast__icon{color:var(--fuse-toast-success-color)}.fuse-toast--warning .fuse-toast__icon{color:var(--fuse-toast-warning-color)}.fuse-toast--error .fuse-toast__icon{color:var(--fuse-toast-error-color)}.fuse-toast__message{flex:1;font-size:var(--fuse-font-size-sm, .875rem);line-height:1.5;color:var(--fuse-toast-text-color)}.fuse-toast__action{flex-shrink:0;background:none;border:none;padding:.25em .5em;font-size:var(--fuse-font-size-sm, .875rem);font-weight:600;color:var(--fuse-toast-action-color);cursor:pointer;border-radius:var(--fuse-radius-sm, 4px);white-space:nowrap}.fuse-toast__action:hover{background-color:var(--fuse-color-surface-muted, #f1f5f9)}.fuse-toast--info .fuse-toast__action{color:var(--fuse-toast-info-color)}.fuse-toast--success .fuse-toast__action{color:var(--fuse-toast-success-color)}.fuse-toast--warning .fuse-toast__action{color:var(--fuse-toast-warning-color)}.fuse-toast--error .fuse-toast__action{color:var(--fuse-toast-error-color)}.fuse-toast__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:none;border:none;padding:0;color:var(--fuse-toast-close-color);cursor:pointer;border-radius:var(--fuse-radius-sm, 4px);transition:color .15s ease,background-color .15s ease}.fuse-toast__close svg{width:16px;height:16px}.fuse-toast__close:hover{color:var(--fuse-toast-text-color);background-color:var(--fuse-color-surface-muted, #f1f5f9)}:host-context(.ios){--fuse-toast-radius: var(--fuse-radius-xl, 14px);--fuse-toast-shadow: var(--fuse-shadow-xl, 0 12px 32px rgba(0, 0, 0, .16))}:host-context(.md){--fuse-toast-radius: var(--fuse-radius-xs, 4px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
41
+ }
42
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseToastComponent, decorators: [{
43
+ type: Component,
44
+ args: [{ selector: 'fuse-toast', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
45
+ '[class]': 'hostClasses()',
46
+ 'role': 'alert',
47
+ 'aria-live': 'polite',
48
+ '(animationend)': 'onAnimationEnd()',
49
+ }, template: "<div class=\"fuse-toast__inner\">\n\n <!-- Type icon -->\n <span class=\"fuse-toast__icon\" aria-hidden=\"true\">\n @switch (type()) {\n @case ('success') {\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\"\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\"\n clip-rule=\"evenodd\" />\n </svg>\n }\n @case ('warning') {\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\"\n d=\"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z\"\n clip-rule=\"evenodd\" />\n </svg>\n }\n @case ('error') {\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\"\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\"\n clip-rule=\"evenodd\" />\n </svg>\n }\n @default {\n <!-- Info (default): info circle -->\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\"\n d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z\"\n clip-rule=\"evenodd\" />\n </svg>\n }\n }\n </span>\n\n <!-- Message -->\n <span class=\"fuse-toast__message\">{{ message() }}</span>\n\n <!-- Optional action button -->\n @if (action()) {\n <button\n class=\"fuse-toast__action\"\n type=\"button\"\n (click)=\"onActionClick()\"\n >\n {{ action()?.label }}\n </button>\n }\n\n <!-- Close button -->\n <button\n class=\"fuse-toast__close\"\n type=\"button\"\n aria-label=\"Dismiss notification\"\n (click)=\"close()\"\n >\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n <path d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n </svg>\n </button>\n\n</div>\n", styles: ["@keyframes fuse-toast-in{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fuse-toast-out{0%{transform:translate(0);opacity:1}to{transform:translate(110%);opacity:0}}:host{--fuse-toast-bg: var(--fuse-color-surface, #ffffff);--fuse-toast-radius: var(--fuse-radius-lg, 10px);--fuse-toast-shadow: var(--fuse-shadow-lg, 0 8px 24px rgba(0, 0, 0, .12));--fuse-toast-border-width: 1px;--fuse-toast-min-width: 280px;--fuse-toast-max-width: 420px;--fuse-toast-padding: var(--fuse-space-4, 1rem) var(--fuse-space-5, 1.25rem);--fuse-toast-gap: var(--fuse-space-3, .75rem);--fuse-toast-icon-size: 20px;--fuse-toast-info-color: var(--fuse-color-primary, #6366f1);--fuse-toast-info-bg: var(--fuse-color-primary-subtle, #eef2ff);--fuse-toast-success-color: var(--fuse-color-success, #16a34a);--fuse-toast-success-bg: var(--fuse-color-success-subtle, #f0fdf4);--fuse-toast-warning-color: var(--fuse-color-warning-dark, #d97706);--fuse-toast-warning-bg: var(--fuse-color-warning-subtle, #fffbeb);--fuse-toast-error-color: var(--fuse-color-danger, #dc2626);--fuse-toast-error-bg: var(--fuse-color-danger-subtle, #fef2f2);--fuse-toast-text-color: var(--fuse-color-text, #1e293b);--fuse-toast-close-color: var(--fuse-color-text-muted, #94a3b8);--fuse-toast-action-color: var(--fuse-toast-info-color);display:block;min-width:var(--fuse-toast-min-width);max-width:var(--fuse-toast-max-width);animation:fuse-toast-in .25s cubic-bezier(.16,1,.3,1) forwards}:host.fuse-toast--leaving{animation:fuse-toast-out .2s ease-in forwards}.fuse-toast{background-color:var(--fuse-toast-bg);border-radius:var(--fuse-toast-radius);box-shadow:var(--fuse-toast-shadow);border-left:4px solid var(--fuse-toast-accent)}.fuse-toast--info{--fuse-toast-accent: var(--fuse-toast-info-color)}.fuse-toast--success{--fuse-toast-accent: var(--fuse-toast-success-color)}.fuse-toast--warning{--fuse-toast-accent: var(--fuse-toast-warning-color)}.fuse-toast--error{--fuse-toast-accent: var(--fuse-toast-error-color)}.fuse-toast__inner{display:flex;align-items:center;gap:var(--fuse-toast-gap);padding:var(--fuse-toast-padding)}.fuse-toast__icon{flex-shrink:0;width:var(--fuse-toast-icon-size);height:var(--fuse-toast-icon-size);display:flex;align-items:center;justify-content:center}.fuse-toast__icon svg{width:100%;height:100%}.fuse-toast--info .fuse-toast__icon{color:var(--fuse-toast-info-color)}.fuse-toast--success .fuse-toast__icon{color:var(--fuse-toast-success-color)}.fuse-toast--warning .fuse-toast__icon{color:var(--fuse-toast-warning-color)}.fuse-toast--error .fuse-toast__icon{color:var(--fuse-toast-error-color)}.fuse-toast__message{flex:1;font-size:var(--fuse-font-size-sm, .875rem);line-height:1.5;color:var(--fuse-toast-text-color)}.fuse-toast__action{flex-shrink:0;background:none;border:none;padding:.25em .5em;font-size:var(--fuse-font-size-sm, .875rem);font-weight:600;color:var(--fuse-toast-action-color);cursor:pointer;border-radius:var(--fuse-radius-sm, 4px);white-space:nowrap}.fuse-toast__action:hover{background-color:var(--fuse-color-surface-muted, #f1f5f9)}.fuse-toast--info .fuse-toast__action{color:var(--fuse-toast-info-color)}.fuse-toast--success .fuse-toast__action{color:var(--fuse-toast-success-color)}.fuse-toast--warning .fuse-toast__action{color:var(--fuse-toast-warning-color)}.fuse-toast--error .fuse-toast__action{color:var(--fuse-toast-error-color)}.fuse-toast__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:none;border:none;padding:0;color:var(--fuse-toast-close-color);cursor:pointer;border-radius:var(--fuse-radius-sm, 4px);transition:color .15s ease,background-color .15s ease}.fuse-toast__close svg{width:16px;height:16px}.fuse-toast__close:hover{color:var(--fuse-toast-text-color);background-color:var(--fuse-color-surface-muted, #f1f5f9)}:host-context(.ios){--fuse-toast-radius: var(--fuse-radius-xl, 14px);--fuse-toast-shadow: var(--fuse-shadow-xl, 0 12px 32px rgba(0, 0, 0, .16))}:host-context(.md){--fuse-toast-radius: var(--fuse-radius-xs, 4px)}\n"] }]
50
+ }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], toastClose: [{ type: i0.Output, args: ["toastClose"] }] } });
51
+
52
+ // ─── Service ──────────────────────────────────────────────────────────────────
53
+ class FuseToastService {
54
+ appRef = inject(ApplicationRef);
55
+ injector = inject(EnvironmentInjector);
56
+ destroyRef = inject(DestroyRef);
57
+ /** One container element per position, created lazily. */
58
+ containers = new Map();
59
+ show(message, options) {
60
+ const type = options?.type ?? 'info';
61
+ const duration = options?.duration ?? 3000;
62
+ const position = options?.position ?? 'top-right';
63
+ // ── Create the component ────────────────────────────────────────────────
64
+ const ref = createComponent(FuseToastComponent, {
65
+ environmentInjector: this.injector,
66
+ });
67
+ ref.setInput('message', message);
68
+ ref.setInput('type', type);
69
+ if (options?.action) {
70
+ ref.setInput('action', options.action);
71
+ }
72
+ this.appRef.attachView(ref.hostView);
73
+ const node = ref.hostView.rootNodes[0];
74
+ this.getContainer(position).appendChild(node);
75
+ // ── Cleanup: called after the leave animation ends ──────────────────────
76
+ const cleanup = () => {
77
+ this.appRef.detachView(ref.hostView);
78
+ ref.destroy();
79
+ node.remove();
80
+ };
81
+ outputToObservable(ref.instance.toastClose)
82
+ .pipe(take(1), takeUntilDestroyed(this.destroyRef))
83
+ .subscribe(cleanup);
84
+ // ── Auto-dismiss ────────────────────────────────────────────────────────
85
+ let timeoutId = null;
86
+ const toastRef = {
87
+ dismiss: () => ref.instance.close(),
88
+ };
89
+ if (duration > 0) {
90
+ timeoutId = setTimeout(() => toastRef.dismiss(), duration);
91
+ }
92
+ // Cancel the timer if the user manually dismisses before it fires
93
+ outputToObservable(ref.instance.toastClose)
94
+ .pipe(take(1), takeUntilDestroyed(this.destroyRef))
95
+ .subscribe(() => {
96
+ if (timeoutId !== null)
97
+ clearTimeout(timeoutId);
98
+ });
99
+ return toastRef;
100
+ }
101
+ // ─── Convenience wrappers ──────────────────────────────────────────────────
102
+ success(message, options) {
103
+ return this.show(message, { ...options, type: 'success' });
104
+ }
105
+ error(message, options) {
106
+ return this.show(message, { ...options, type: 'error' });
107
+ }
108
+ warning(message, options) {
109
+ return this.show(message, { ...options, type: 'warning' });
110
+ }
111
+ info(message, options) {
112
+ return this.show(message, { ...options, type: 'info' });
113
+ }
114
+ // ─── Container management ─────────────────────────────────────────────────
115
+ getContainer(position) {
116
+ if (!this.containers.has(position)) {
117
+ const el = document.createElement('div');
118
+ el.className = `fuse-toast-container fuse-toast-container--${position}`;
119
+ // Layout styles applied inline so they work without a global stylesheet
120
+ el.style.cssText = [
121
+ 'position:fixed',
122
+ 'z-index:9999',
123
+ 'display:flex',
124
+ 'flex-direction:column',
125
+ 'gap:8px',
126
+ 'pointer-events:none',
127
+ ].join(';');
128
+ // Allow the toast items themselves to be interactive
129
+ el.style.setProperty('--fuse-toast-pe', 'auto');
130
+ this.applyPositionStyles(el, position);
131
+ document.body.appendChild(el);
132
+ this.containers.set(position, el);
133
+ // Remove container when the service is destroyed (app teardown)
134
+ this.destroyRef.onDestroy(() => {
135
+ el.remove();
136
+ this.containers.delete(position);
137
+ });
138
+ }
139
+ return this.containers.get(position);
140
+ }
141
+ applyPositionStyles(el, position) {
142
+ switch (position) {
143
+ case 'top-right':
144
+ Object.assign(el.style, { top: '16px', right: '16px' });
145
+ break;
146
+ case 'top-left':
147
+ Object.assign(el.style, { top: '16px', left: '16px' });
148
+ break;
149
+ case 'top-center':
150
+ Object.assign(el.style, { top: '16px', left: '50%', transform: 'translateX(-50%)' });
151
+ break;
152
+ case 'bottom-right':
153
+ Object.assign(el.style, { bottom: '16px', right: '16px' });
154
+ break;
155
+ case 'bottom-left':
156
+ Object.assign(el.style, { bottom: '16px', left: '16px' });
157
+ break;
158
+ case 'bottom-center':
159
+ Object.assign(el.style, { bottom: '16px', left: '50%', transform: 'translateX(-50%)' });
160
+ break;
161
+ }
162
+ }
163
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
164
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseToastService, providedIn: 'root' });
165
+ }
166
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseToastService, decorators: [{
167
+ type: Injectable,
168
+ args: [{ providedIn: 'root' }]
169
+ }] });
170
+
171
+ /**
172
+ * Generated bundle index. Do not edit.
173
+ */
174
+
175
+ export { FuseToastComponent, FuseToastService };
176
+ //# sourceMappingURL=fuse_ui-toast.mjs.map
package/fesm2022/fuse_ui-toast.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fuse_ui-toast.mjs","sources":["../../../../packages/toast/src/lib/toast/fuse-toast.component.ts","../../../../packages/toast/src/lib/toast/fuse-toast.component.html","../../../../packages/toast/src/lib/toast/fuse-toast.service.ts","../../../../packages/toast/src/fuse_ui-toast.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n input,\n output,\n signal,\n} from '@angular/core';\n\nexport type FuseToastType = 'info' | 'success' | 'warning' | 'error';\n\n@Component({\n selector: 'fuse-toast',\n standalone: true,\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './fuse-toast.component.html',\n styleUrl: './fuse-toast.component.scss',\n host: {\n '[class]': 'hostClasses()',\n 'role': 'alert',\n 'aria-live': 'polite',\n '(animationend)': 'onAnimationEnd()',\n },\n})\nexport class FuseToastComponent {\n // ─── Public @Input() API ────────────────────────────────────────────────────\n\n readonly message = input('');\n readonly type = input<FuseToastType>('info');\n readonly action = input<{ label: string; callback: () => void } | null>(null);\n\n // ─── Public @Output() API ───────────────────────────────────────────────────\n\n readonly toastClose = output<void>();\n\n // ─── Internal signal state ──────────────────────────────────────────────────\n\n protected readonly isVisible = signal(true);\n\n // ─── Host class computation ─────────────────────────────────────────────────\n\n protected readonly hostClasses = computed(() =>\n [\n 'fuse-toast',\n `fuse-toast--${this.type()}`,\n !this.isVisible() ? 'fuse-toast--leaving' : '',\n ]\n .filter(Boolean)\n .join(' ')\n );\n\n // ─── Public API (callable by FuseToastService via ref.instance) ─────────────\n\n close(): void {\n this.isVisible.set(false);\n }\n\n // ─── Template event handlers ─────────────────────────────────────────────────\n\n protected onActionClick(): void {\n this.action()?.callback();\n this.close();\n }\n\n protected onAnimationEnd(): void {\n // Called by the host (animationend) binding. Only emit after the leave\n // animation; the enter animation end is ignored because isVisible() is true.\n if (!this.isVisible()) {\n this.toastClose.emit();\n }\n }\n}\n","<div class=\"fuse-toast__inner\">\n\n <!-- Type icon -->\n <span class=\"fuse-toast__icon\" aria-hidden=\"true\">\n @switch (type()) {\n @case ('success') {\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\"\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\"\n clip-rule=\"evenodd\" />\n </svg>\n }\n @case ('warning') {\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\"\n d=\"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z\"\n clip-rule=\"evenodd\" />\n </svg>\n }\n @case ('error') {\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\"\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\"\n clip-rule=\"evenodd\" />\n </svg>\n }\n @default {\n <!-- Info (default): info circle -->\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\"\n d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z\"\n clip-rule=\"evenodd\" />\n </svg>\n }\n }\n </span>\n\n <!-- Message -->\n <span class=\"fuse-toast__message\">{{ message() }}</span>\n\n <!-- Optional action button -->\n @if (action()) {\n <button\n class=\"fuse-toast__action\"\n type=\"button\"\n (click)=\"onActionClick()\"\n >\n {{ action()?.label }}\n </button>\n }\n\n <!-- Close button -->\n <button\n class=\"fuse-toast__close\"\n type=\"button\"\n aria-label=\"Dismiss notification\"\n (click)=\"close()\"\n >\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n <path d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n </svg>\n </button>\n\n</div>\n","import {\n ApplicationRef,\n DestroyRef,\n EmbeddedViewRef,\n EnvironmentInjector,\n Injectable,\n createComponent,\n inject,\n} from '@angular/core';\nimport { outputToObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { take } from 'rxjs';\nimport { FuseToastComponent, FuseToastType } from './fuse-toast.component';\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport type FuseToastPosition =\n | 'top-right'\n | 'top-left'\n | 'top-center'\n | 'bottom-right'\n | 'bottom-left'\n | 'bottom-center';\n\nexport interface FuseToastOptions {\n type?: FuseToastType;\n /** Auto-dismiss after ms. Pass 0 to disable auto-dismiss. Default: 3000 */\n duration?: number;\n action?: { label: string; callback: () => void };\n position?: FuseToastPosition;\n}\n\nexport interface FuseToastRef {\n /** Trigger the leave animation then remove the toast. */\n dismiss(): void;\n}\n\n// ─── Service ──────────────────────────────────────────────────────────────────\n\n@Injectable({ providedIn: 'root' })\nexport class FuseToastService {\n private readonly appRef = inject(ApplicationRef);\n private readonly injector = inject(EnvironmentInjector);\n private readonly destroyRef = inject(DestroyRef);\n\n /** One container element per position, created lazily. */\n private readonly containers = new Map<FuseToastPosition, HTMLElement>();\n\n show(message: string, options?: FuseToastOptions): FuseToastRef {\n const type = options?.type ?? 'info';\n const duration = options?.duration ?? 3000;\n const position = options?.position ?? 'top-right';\n\n // ── Create the component ────────────────────────────────────────────────\n const ref = createComponent(FuseToastComponent, {\n environmentInjector: this.injector,\n });\n\n ref.setInput('message', message);\n ref.setInput('type', type);\n if (options?.action) {\n ref.setInput('action', options.action);\n }\n\n this.appRef.attachView(ref.hostView);\n\n const node = (ref.hostView as EmbeddedViewRef<unknown>).rootNodes[0] as HTMLElement;\n this.getContainer(position).appendChild(node);\n\n // ── Cleanup: called after the leave animation ends ──────────────────────\n const cleanup = (): void => {\n this.appRef.detachView(ref.hostView);\n ref.destroy();\n node.remove();\n };\n\n outputToObservable(ref.instance.toastClose)\n .pipe(take(1), takeUntilDestroyed(this.destroyRef))\n .subscribe(cleanup);\n\n // ── Auto-dismiss ────────────────────────────────────────────────────────\n let timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n const toastRef: FuseToastRef = {\n dismiss: () => ref.instance.close(),\n };\n\n if (duration > 0) {\n timeoutId = setTimeout(() => toastRef.dismiss(), duration);\n }\n\n // Cancel the timer if the user manually dismisses before it fires\n outputToObservable(ref.instance.toastClose)\n .pipe(take(1), takeUntilDestroyed(this.destroyRef))\n .subscribe(() => {\n if (timeoutId !== null) clearTimeout(timeoutId);\n });\n\n return toastRef;\n }\n\n // ─── Convenience wrappers ──────────────────────────────────────────────────\n\n success(message: string, options?: Omit<FuseToastOptions, 'type'>): FuseToastRef {\n return this.show(message, { ...options, type: 'success' });\n }\n\n error(message: string, options?: Omit<FuseToastOptions, 'type'>): FuseToastRef {\n return this.show(message, { ...options, type: 'error' });\n }\n\n warning(message: string, options?: Omit<FuseToastOptions, 'type'>): FuseToastRef {\n return this.show(message, { ...options, type: 'warning' });\n }\n\n info(message: string, options?: Omit<FuseToastOptions, 'type'>): FuseToastRef {\n return this.show(message, { ...options, type: 'info' });\n }\n\n // ─── Container management ─────────────────────────────────────────────────\n\n private getContainer(position: FuseToastPosition): HTMLElement {\n if (!this.containers.has(position)) {\n const el = document.createElement('div');\n el.className = `fuse-toast-container fuse-toast-container--${position}`;\n\n // Layout styles applied inline so they work without a global stylesheet\n el.style.cssText = [\n 'position:fixed',\n 'z-index:9999',\n 'display:flex',\n 'flex-direction:column',\n 'gap:8px',\n 'pointer-events:none',\n ].join(';');\n\n // Allow the toast items themselves to be interactive\n el.style.setProperty('--fuse-toast-pe', 'auto');\n\n this.applyPositionStyles(el, position);\n document.body.appendChild(el);\n this.containers.set(position, el);\n\n // Remove container when the service is destroyed (app teardown)\n this.destroyRef.onDestroy(() => {\n el.remove();\n this.containers.delete(position);\n });\n }\n\n return this.containers.get(position)!;\n }\n\n private applyPositionStyles(el: HTMLElement, position: FuseToastPosition): void {\n switch (position) {\n case 'top-right':\n Object.assign(el.style, { top: '16px', right: '16px' });\n break;\n case 'top-left':\n Object.assign(el.style, { top: '16px', left: '16px' });\n break;\n case 'top-center':\n Object.assign(el.style, { top: '16px', left: '50%', transform: 'translateX(-50%)' });\n break;\n case 'bottom-right':\n Object.assign(el.style, { bottom: '16px', right: '16px' });\n break;\n case 'bottom-left':\n Object.assign(el.style, { bottom: '16px', left: '16px' });\n break;\n case 'bottom-center':\n Object.assign(el.style, { bottom: '16px', left: '50%', transform: 'translateX(-50%)' });\n break;\n }\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/package.json ADDED
@@ -0,0 +1,59 @@
1
+ {
2
+ "name": "@fuse_ui/toast",
3
+ "version": "0.0.1",
4
+ "license": "MIT",
5
+ "publishConfig": {
6
+ "access": "public"
7
+ },
8
+ "keywords": [
9
+ "fuse-ui",
10
+ "angular",
11
+ "ionic",
12
+ "ionic8",
13
+ "angular18",
14
+ "angular19",
15
+ "angular20",
16
+ "angular21",
17
+ "ui-components",
18
+ "design-system",
19
+ "css-variables",
20
+ "signals",
21
+ "standalone",
22
+ "multi-theme",
23
+ "dark-mode",
24
+ "fluid-typography",
25
+ "animated"
26
+ ],
27
+ "peerDependencies": {
28
+ "@angular/core": ">=18.0.0",
29
+ "@angular/common": ">=18.0.0",
30
+ "rxjs": ">=7.4.0"
31
+ },
32
+ "peerDependenciesMeta": {
33
+ "@ionic/angular": {
34
+ "optional": true
35
+ }
36
+ },
37
+ "sideEffects": [
38
+ "*.css",
39
+ "**/*.scss"
40
+ ],
41
+ "engines": {
42
+ "node": ">=20.0.0"
43
+ },
44
+ "module": "fesm2022/fuse_ui-toast.mjs",
45
+ "typings": "types/fuse_ui-toast.d.ts",
46
+ "exports": {
47
+ "./package.json": {
48
+ "default": "./package.json"
49
+ },
50
+ ".": {
51
+ "types": "./types/fuse_ui-toast.d.ts",
52
+ "default": "./fesm2022/fuse_ui-toast.mjs"
53
+ }
54
+ },
55
+ "type": "module",
56
+ "dependencies": {
57
+ "tslib": "^2.3.0"
58
+ }
59
+ }
package/types/fuse_ui-toast.d.ts ADDED
@@ -0,0 +1,54 @@
1
+ import * as _angular_core from '@angular/core';
2
+
3
+ type FuseToastType = 'info' | 'success' | 'warning' | 'error';
4
+ declare class FuseToastComponent {
5
+ readonly message: _angular_core.InputSignal<string>;
6
+ readonly type: _angular_core.InputSignal<FuseToastType>;
7
+ readonly action: _angular_core.InputSignal<{
8
+ label: string;
9
+ callback: () => void;
10
+ } | null>;
11
+ readonly toastClose: _angular_core.OutputEmitterRef<void>;
12
+ protected readonly isVisible: _angular_core.WritableSignal<boolean>;
13
+ protected readonly hostClasses: _angular_core.Signal<string>;
14
+ close(): void;
15
+ protected onActionClick(): void;
16
+ protected onAnimationEnd(): void;
17
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<FuseToastComponent, never>;
18
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<FuseToastComponent, "fuse-toast", never, { "message": { "alias": "message"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "action": { "alias": "action"; "required": false; "isSignal": true; }; }, { "toastClose": "toastClose"; }, never, never, true, never>;
19
+ }
20
+
21
+ type FuseToastPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
22
+ interface FuseToastOptions {
23
+ type?: FuseToastType;
24
+ /** Auto-dismiss after ms. Pass 0 to disable auto-dismiss. Default: 3000 */
25
+ duration?: number;
26
+ action?: {
27
+ label: string;
28
+ callback: () => void;
29
+ };
30
+ position?: FuseToastPosition;
31
+ }
32
+ interface FuseToastRef {
33
+ /** Trigger the leave animation then remove the toast. */
34
+ dismiss(): void;
35
+ }
36
+ declare class FuseToastService {
37
+ private readonly appRef;
38
+ private readonly injector;
39
+ private readonly destroyRef;
40
+ /** One container element per position, created lazily. */
41
+ private readonly containers;
42
+ show(message: string, options?: FuseToastOptions): FuseToastRef;
43
+ success(message: string, options?: Omit<FuseToastOptions, 'type'>): FuseToastRef;
44
+ error(message: string, options?: Omit<FuseToastOptions, 'type'>): FuseToastRef;
45
+ warning(message: string, options?: Omit<FuseToastOptions, 'type'>): FuseToastRef;
46
+ info(message: string, options?: Omit<FuseToastOptions, 'type'>): FuseToastRef;
47
+ private getContainer;
48
+ private applyPositionStyles;
49
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<FuseToastService, never>;
50
+ static ɵprov: _angular_core.ɵɵInjectableDeclaration<FuseToastService>;
51
+ }
52
+
53
+ export { FuseToastComponent, FuseToastService };
54
+ export type { FuseToastOptions, FuseToastPosition, FuseToastRef, FuseToastType };