@mustib/web-components 0.0.0-alpha.6 → 0.0.0-alpha.7

package/utils/Toast.js

@@ -0,0 +1,321 @@
+import { C as CustomEventEmitter, D as DeferredValue } from '../common-BBjg-zl9.js';
+import { T as TOAST_LOCK_SYMBOL } from '../constants-DPnKJ57t.js';
+
+const internalLockKey = Symbol('internal-toast');
+class Toast {
+    get id() {
+        return this.internalToast.id;
+    }
+    get action() {
+        return this.internalToast.action;
+    }
+    get message() {
+        return this.internalToast.message;
+    }
+    get label() {
+        return this.internalToast.label;
+    }
+    get role() {
+        return this.internalToast.role;
+    }
+    get duration() {
+        return this.internalToast.duration;
+    }
+    get colorHue() {
+        return this.internalToast.colorHue;
+    }
+    get spinner() {
+        return this.internalToast.spinner;
+    }
+    get labelIcon() {
+        return this.internalToast.labelIcon;
+    }
+    get closeBtn() {
+        return this.internalToast.closeBtn;
+    }
+    get leaveAnimationDuration() {
+        return this.internalToast.leaveAnimationDuration;
+    }
+    get enterAnimationDuration() {
+        return this.internalToast.enterAnimationDuration;
+    }
+    get direction() {
+        return this.internalToast.direction;
+    }
+    get interactingBehavior() {
+        return this.internalToast.interactingBehavior;
+    }
+    get status() {
+        return this.internalToast.status;
+    }
+    get priority() {
+        return this.internalToast.priority;
+    }
+    set colorHue(value) {
+        this.internalToast.colorHue = value;
+        if (this.internalToast.host.isResolved)
+            this.internalToast.host.resolvedValue.requestUpdate();
+    }
+    set spinner(value) {
+        this.internalToast.spinner = value;
+        if (this.internalToast.host.isResolved)
+            this.internalToast.host.resolvedValue.requestUpdate();
+    }
+    set labelIcon(value) {
+        this.internalToast.labelIcon = value;
+        if (this.internalToast.host.isResolved)
+            this.internalToast.host.resolvedValue.requestUpdate();
+    }
+    set message(value) {
+        this.internalToast.message = value;
+        if (this.internalToast.host.isResolved)
+            this.internalToast.host.resolvedValue.requestUpdate();
+    }
+    set label(value) {
+        this.internalToast.label = value;
+        if (this.internalToast.host.isResolved)
+            this.internalToast.host.resolvedValue.requestUpdate();
+    }
+    set action(value) {
+        this.internalToast.action = value;
+        if (this.internalToast.host.isResolved)
+            this.internalToast.host.resolvedValue.requestUpdate();
+    }
+    set closeBtn(value) {
+        this.internalToast.closeBtn = value;
+        if (this.internalToast.host.isResolved)
+            this.internalToast.host.resolvedValue.requestUpdate();
+    }
+    set duration(value) {
+        this.internalToast.duration = value;
+        if (this.internalToast.progressAnimation.isResolved) {
+            const currTime = this.internalToast.progressAnimation.resolvedValue.currentTime || 0;
+            this.internalToast.progressAnimation.resolvedValue.effect?.updateTiming({
+                duration: +currTime + value,
+            });
+        }
+    }
+    constructor({ toastData, controller, }) {
+        this.emitter = new CustomEventEmitter({
+            'state.await.rendering': {
+                runningBehavior: 'async-sequential',
+                dispatchable: false,
+                lockSymbol: TOAST_LOCK_SYMBOL,
+                beforeAll: () => {
+                    if (!this.internalToast.host.isPending)
+                        return;
+                    this.internalToast.status = 'await-rendering';
+                },
+            },
+            'state.toast-item.first.rendered': {
+                runningBehavior: 'async-sequential',
+                dispatchable: false,
+                lockSymbol: TOAST_LOCK_SYMBOL,
+                beforeAll: (data) => {
+                    if (!this.internalToast.host.isPending)
+                        return;
+                    this.internalToast.host.resolve(data.listenerValue.element);
+                    clearTimeout(this.internalToast.maxRenderWaitTimeTimeoutId);
+                    this.emitter.dispatch('internal.status.enter', undefined, {
+                        lockSymbol: internalLockKey,
+                    });
+                },
+            },
+            'internal.status.enter': {
+                runningBehavior: 'async-sequential',
+                dispatchable: false,
+                lockSymbol: internalLockKey,
+                beforeAll: () => {
+                    if (this.internalToast.status !== 'await-rendering')
+                        return;
+                    let animation;
+                    if (this.internalToast.enterAnimation.isPending) {
+                        animation = new Animation(new KeyframeEffect(this.internalToast.host.resolvedValue, this.internalToast.enterAnimationKeyframes, {
+                            duration: this.internalToast.enterAnimationDuration,
+                            easing: 'ease-in-out',
+                        }));
+                        this.internalToast.enterAnimation.resolve(animation);
+                    }
+                    else {
+                        animation = this.internalToast.enterAnimation.resolvedValue;
+                    }
+                    animation.play();
+                    this.internalToast.status = 'enter';
+                    animation.onfinish = () => {
+                        this.emitter.dispatch('internal.status.progress', undefined, {
+                            lockSymbol: internalLockKey,
+                        });
+                    };
+                },
+            },
+            'internal.status.progress': {
+                runningBehavior: 'async-sequential',
+                dispatchable: false,
+                lockSymbol: internalLockKey,
+                beforeAll: () => {
+                    if (this.internalToast.status !== 'enter')
+                        return;
+                    let animation;
+                    if (this.internalToast.progressAnimation.isPending) {
+                        animation = new Animation(new KeyframeEffect(this.internalToast.host.resolvedValue.progressElement || null, this.internalToast.progressAnimationKeyframes, {
+                            duration: this.internalToast.duration,
+                            easing: 'linear',
+                        }));
+                        this.internalToast.progressAnimation.resolve(animation);
+                    }
+                    else {
+                        animation = this.internalToast.progressAnimation.resolvedValue;
+                    }
+                    animation.play();
+                    this.internalToast.status = 'progress';
+                    animation.onfinish = () => {
+                        this.emitter.dispatch('internal.status.leave', undefined, {
+                            lockSymbol: internalLockKey,
+                        });
+                    };
+                },
+            },
+            'internal.status.leave': {
+                runningBehavior: 'async-sequential',
+                dispatchable: false,
+                lockSymbol: internalLockKey,
+                beforeAll: () => {
+                    if (this.internalToast.status !== 'progress')
+                        return;
+                    let animation;
+                    if (this.internalToast.leaveAnimation.isPending) {
+                        animation = new Animation(new KeyframeEffect(this.internalToast.host.resolvedValue, this.internalToast.leaveAnimationKeyframes, {
+                            duration: this.internalToast.leaveAnimationDuration,
+                            easing: 'ease-in-out',
+                        }));
+                        this.internalToast.leaveAnimation.resolve(animation);
+                    }
+                    else {
+                        animation = this.internalToast.leaveAnimation.resolvedValue;
+                    }
+                    animation.play();
+                    this.internalToast.status = 'leave';
+                    animation.onfinish = () => {
+                        this.remove();
+                    };
+                },
+            },
+        });
+        this.controller = controller;
+        this.internalToast = this._generateInternalToastData(toastData);
+    }
+    _generateInternalToastData(toastData) {
+        const id = crypto.randomUUID();
+        const duration = typeof toastData.duration === 'number'
+            ? toastData.duration
+            : this.controller.defaultDuration;
+        const leaveAnimationDuration = typeof toastData.leaveAnimationDuration === 'number'
+            ? toastData.leaveAnimationDuration
+            : this.controller.defaultLeaveAnimationDuration;
+        const enterAnimationDuration = typeof toastData.enterAnimationDuration === 'number'
+            ? toastData.enterAnimationDuration
+            : this.controller.defaultEnterAnimationDuration;
+        const direction = toastData.direction ?? this.controller.defaultDirection;
+        const transformOrigin = direction === 'rtl' ? 'right' : 'left';
+        const internalToast = {
+            id,
+            action: toastData.action,
+            closeBtn: toastData.closeBtn ?? true,
+            colorHue: typeof toastData.colorHue === 'number'
+                ? toastData.colorHue
+                : this.controller.colorHue.info,
+            duration,
+            enterAnimationDuration,
+            direction,
+            priority: toastData.priority ?? 'normal',
+            host: new DeferredValue(),
+            enterAnimation: new DeferredValue(),
+            progressAnimation: new DeferredValue(),
+            leaveAnimation: new DeferredValue(),
+            enterAnimationKeyframes: toastData.enterAnimationKeyframes ?? [
+                { scale: '0' },
+                { scale: '1' },
+            ],
+            progressAnimationKeyframes: toastData.progressAnimationKeyframes ?? [
+                { scale: '0 1', visibility: 'visible', transformOrigin },
+                { scale: '1 1', visibility: 'visible', transformOrigin },
+            ],
+            leaveAnimationKeyframes: toastData.leaveAnimationKeyframes ?? [
+                { scale: '1' },
+                { scale: '0' },
+            ],
+            interactingBehavior: toastData.interactingBehavior || this.controller.interactingBehavior,
+            leaveAnimationDuration,
+            label: toastData.label,
+            labelIcon: toastData.labelIcon,
+            maxRenderWaitTimeTimeoutId: undefined,
+            message: toastData.message,
+            role: toastData.role || 'status',
+            spinner: toastData.spinner || false,
+            status: 'queued',
+        };
+        if (typeof toastData.maxRenderWaitTime === 'number' &&
+            toastData.maxRenderWaitTime > 0 &&
+            toastData.maxRenderWaitTime !== Infinity) {
+            internalToast.maxRenderWaitTimeTimeoutId = setTimeout(() => {
+                this.remove();
+            }, toastData.maxRenderWaitTime);
+        }
+        return internalToast;
+    }
+    async gracefulRemove() {
+        switch (this.internalToast.status) {
+            case 'queued':
+            case 'await-rendering':
+                this.remove();
+                break;
+            case 'enter':
+                {
+                    const enterAnimation = await this.internalToast.enterAnimation.current;
+                    enterAnimation.finish();
+                    await enterAnimation.finished;
+                    const progressAnimation = await this.internalToast.progressAnimation.current;
+                    progressAnimation.finish();
+                }
+                break;
+            case 'progress':
+                {
+                    const progressAnimation = await this.internalToast.progressAnimation.current;
+                    progressAnimation.finish();
+                }
+                break;
+            case 'leave':
+                break;
+            default:
+                this.internalToast.status;
+                break;
+        }
+    }
+    remove() {
+        this.controller.emitter.dispatch('state.request.remove.toast', {
+            toast: this,
+        }, {
+            lockSymbol: TOAST_LOCK_SYMBOL,
+        });
+    }
+    async pauseProgress() {
+        if (this.internalToast.status === 'leave')
+            return;
+        const animation = await this.internalToast.progressAnimation.current;
+        animation.pause();
+    }
+    async resumeProgress() {
+        if (this.internalToast.status === 'leave')
+            return;
+        const animation = await this.internalToast.progressAnimation.current;
+        animation.play();
+    }
+    async resetProgress() {
+        if (this.internalToast.status === 'leave')
+            return;
+        const animation = await this.internalToast.progressAnimation.current;
+        animation.currentTime = 0;
+    }
+}
+
+export { Toast };

package/utils/ToastController.d.ts

@@ -0,0 +1,6 @@
+import '@mustib/utils';
+export { d as ToastController } from '../mu-toast-DfNHcc7U.js';
+import 'lit';
+import '../components/mu-element.js';
+import '@mustib/utils/browser';
+import '../components/mu-icon.js';

package/utils/ToastController.js

@@ -0,0 +1,189 @@
+import { C as CustomEventEmitter } from '../common-BBjg-zl9.js';
+import { T as TOAST_LOCK_SYMBOL } from '../constants-DPnKJ57t.js';
+import { Toast } from './Toast.js';
+
+class ToastController {
+    get maxVisibleToastsCount() {
+        return this._maxVisibleToastsCount;
+    }
+    set maxVisibleToastsCount(value) {
+        this._maxVisibleToastsCount = value;
+        this.rolloverQueuedToasts();
+    }
+    get position() {
+        return this.portal.position;
+    }
+    set position(value) {
+        this.portal.position = value;
+    }
+    set stackToasts(value) {
+        this._stackToasts = value;
+        this.portal.requestUpdate();
+    }
+    /**
+     * Indicates if toast notifications should stack atop each other,
+     * such that only the latest is fully visible while older toasts
+     * are partially hidden beneath it. This enhances focus and reduces clutter.
+     */
+    get stackToasts() {
+        return this._stackToasts;
+    }
+    constructor(portal) {
+        this.portal = portal;
+        this.toastsIdMap = new Map();
+        this.queuedToastsQueue = [];
+        this.toastsQueue = [];
+        this._maxVisibleToastsCount = 3;
+        this._stackToasts = true;
+        this.interactingBehavior = 'pause-progress';
+        this.colorHue = {
+            success: 120,
+            error: 0,
+            warning: 60,
+            info: 200,
+        };
+        this.defaultDuration = 10000;
+        this.defaultLeaveAnimationDuration = 300;
+        this.defaultEnterAnimationDuration = 300;
+        this.defaultDirection = getComputedStyle(this.portal).direction;
+        this.emitter = new CustomEventEmitter({
+            'state.request.remove.toast': {
+                runningBehavior: 'async-sequential',
+                dispatchable: false,
+                lockSymbol: TOAST_LOCK_SYMBOL,
+                beforeAll: (data) => {
+                    const toast = data.listenerValue.toast;
+                    this.toastsIdMap.delete(toast.id);
+                    if (toast.status === 'queued') {
+                        this.queuedToastsQueue = this.queuedToastsQueue.filter((t) => t.id !== toast.id);
+                        return;
+                    }
+                    this.toastsQueue = this.toastsQueue.filter((t) => t.id !== toast.id);
+                    this.rolloverQueuedToasts();
+                    this.portal.requestUpdate();
+                },
+            },
+        });
+    }
+    gracefulRemoveVisible() {
+        this.toastsQueue.forEach((t) => {
+            t.gracefulRemove();
+        });
+    }
+    gracefulRemoveAll() {
+        this.gracefulRemoveVisible();
+        this.queuedToastsQueue.forEach((t) => {
+            t.remove();
+        });
+    }
+    /**
+     * Re-parents the toast portal to the specified node.
+     *
+     * Useful for ensuring toasts appear correctly when top-layer elements like fullscreen containers
+     * or dialogs are active. The specified node should be a valid container element (not void elements like <img />).
+     *
+     * @param node - The new parent node for the toast portal.
+     */
+    reParent(node = document.body) {
+        if (node === this.portal.parentNode)
+            return;
+        node.appendChild(this.portal);
+    }
+    /**
+     * Makes the toast portal a popover,
+     * ensuring that toasts appear above all other elements
+     * (e.g., dialogs, fullscreen content) in the top-layer.
+     * This is useful for proper overlay stacking and visibility.
+     */
+    popover() {
+        const { portal } = this;
+        portal.popover = 'manual';
+        portal.hidePopover();
+        portal.showPopover();
+    }
+    success(message) {
+        return this.create({
+            message,
+            label: 'Success:',
+            labelIcon: 'checkMark',
+            role: 'status',
+            colorHue: this.colorHue.success,
+        });
+    }
+    error(message) {
+        return this.create({
+            message,
+            label: 'Error:',
+            labelIcon: 'error',
+            role: 'alert',
+            colorHue: this.colorHue.error,
+            priority: 'important',
+        });
+    }
+    warning(message) {
+        return this.create({
+            message,
+            label: 'Warning:',
+            labelIcon: 'warning',
+            role: 'alert',
+            colorHue: this.colorHue.warning,
+            priority: 'important',
+        });
+    }
+    info(message) {
+        return this.create({
+            message,
+            label: 'Info:',
+            role: 'status',
+            labelIcon: 'info',
+            colorHue: this.colorHue.info,
+        });
+    }
+    create(toastData) {
+        const toast = new Toast({
+            toastData: typeof toastData === 'string' ? { message: toastData } : toastData,
+            controller: this,
+        });
+        this.toastsIdMap.set(toast.id, toast);
+        switch (toast.priority) {
+            case 'immediate':
+                this.queuedToastsQueue.unshift(toast);
+                if (this.toastsQueue.length >= this._maxVisibleToastsCount) {
+                    (this.toastsQueue.find((t) => t.priority === 'normal') ||
+                        this.toastsQueue[0])?.remove();
+                }
+                break;
+            case 'important':
+                this.queuedToastsQueue.unshift(toast);
+                if (this.toastsQueue.length >= this._maxVisibleToastsCount) {
+                    (this.toastsQueue.find((t) => t.priority === 'normal') ||
+                        this.toastsQueue[0])?.gracefulRemove();
+                }
+                break;
+            case 'normal':
+                this.queuedToastsQueue.push(toast);
+                break;
+        }
+        this.rolloverQueuedToasts();
+        return toast;
+    }
+    rolloverQueuedToasts() {
+        if (this.toastsQueue.length >= this.maxVisibleToastsCount) {
+            return;
+        }
+        const rolloverToastsCount = this.maxVisibleToastsCount - this.toastsQueue.length;
+        const rolloverToasts = this.queuedToastsQueue.splice(0, rolloverToastsCount);
+        if (rolloverToasts.length === 0) {
+            return;
+        }
+        rolloverToasts.forEach((t) => {
+            t.emitter.dispatch('state.await.rendering', undefined, {
+                lockSymbol: TOAST_LOCK_SYMBOL,
+            });
+        });
+        this.toastsQueue.push(...rolloverToasts);
+        this.portal.requestUpdate();
+    }
+}
+
+export { ToastController };