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

package/index.js

@@ -1,4 +1,4 @@
-export { M as MuElement } from './mu-element-CEvBHYiI.js';
+export { M as MuElement } from './mu-element-yEZ17QUl.js';
 export { MuIcon } from './components/mu-icon.js';
 export { MuRange } from './components/mu-range.js';
 export { MuRangeFill } from './components/mu-range-fill.js';
@@ -9,8 +9,18 @@ export { MuSelectItem } from './components/mu-select-item.js';
 export { MuSelectItems } from './components/mu-select-items.js';
 export { MuSelectLabel } from './components/mu-select-label.js';
 export { MuSelectLabelContent } from './components/mu-select-label-content.js';
+export { MuSortable } from './components/mu-sortable.js';
+export { MuSortableItem } from './components/mu-sortable-item.js';
+export { MuSortableTrigger } from './components/mu-sortable-trigger.js';
+export { MuToast } from './components/mu-toast.js';
+export { MuToastItem } from './components/mu-toast-item.js';
+export { Toast } from './utils/Toast.js';
+export { ToastController } from './utils/ToastController.js';
 export { MuTransparent } from './components/mu-transparent.js';
 export { MuTrigger } from './components/mu-trigger.js';
+import './common-BBjg-zl9.js';
 import 'lit';
 import 'lit/decorators.js';
 import 'lit/directives/repeat.js';
+import 'lit/directive-helpers.js';
+import './constants-DPnKJ57t.js';

package/{mu-element-CEvBHYiI.js → mu-element-yEZ17QUl.js}

@@ -1,3 +1,4 @@
+import { p as parseJson, A as AppError, L as LIBRARY_ERROR_SCOPE } from './common-BBjg-zl9.js';
 import { css, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
@@ -36,200 +37,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-const capitalizeFirst = (str) => str[0].toUpperCase().concat(str.slice(1).toLowerCase());
-/**
- * Capitalizes the first letter of a string or each word in a string.
- *
- * @param {string} str - The string to capitalize.
- * @param {object} [options] - Optional parameters.
- * @param {boolean} [options.onlyFirstWord=false] - Whether to capitalize only the first word (default: false).
- * @param {string} [options.splitter=' '] - The delimiter to split the string into words (default: ' ').
- * @param {string} [options.joiner=options.splitter] - The delimiter to join the capitalized words (default: options.splitter).
- * @returns {string} The capitalized string.
- */
-function capitalize(str, options) {
-    const { onlyFirstWord: onlyFirst = false, splitter = ' ', joiner = splitter, } = options || {};
-    if (typeof str !== 'string' || str === '')
-        return str;
-    return (onlyFirst ? [str] : str.split(splitter))
-        .map(capitalizeFirst)
-        .join(joiner);
-}
-
-class AppError extends Error {
-    options;
-    static throw(type, error, options) {
-        return new AppError(options)
-            .push(type, error, options?.pushOptions)
-            .throw();
-    }
-    static async aggregate(aggregateFunc, options) {
-        const appError = new AppError(options);
-        try {
-            await aggregateFunc(appError);
-            appError.end();
-        }
-        catch (error) {
-            if (error instanceof Error) {
-                Error.captureStackTrace(error, options?.stackTraceConstructor ?? AppError.aggregate);
-            }
-            throw error;
-        }
-    }
-    length = 0;
-    errors = {};
-    get message() {
-        return this.toString();
-    }
-    constructor(options) {
-        super();
-        this.options = options;
-    }
-    async catch(catchFunc) {
-        try {
-            await catchFunc();
-        }
-        catch (error) {
-            if (error instanceof AppError) {
-                for (const [type, errors] of Object.entries(error.errors)) {
-                    if (errors)
-                        errors.forEach((err) => this.push(type, err.message, { scope: err.scope }));
-                }
-            }
-            else {
-                if (error instanceof Error) {
-                    Error.captureStackTrace(error, this.catch);
-                }
-                throw error;
-            }
-        }
-    }
-    toString(options) {
-        const formattedErrors = [];
-        Object.keys(this.errors).forEach((errorType) => {
-            const rawErrors = this.errors[errorType];
-            if (!rawErrors)
-                return;
-            const { indentation = 4 } = this.options || {};
-            const formattedErrorType = rawErrors.reduce((result, err) => {
-                const hasMatchedScope = this.matchesScope({
-                    errScope: err.scope,
-                    includesScope: options?.includesScope,
-                    excludesScope: options?.excludesScope,
-                });
-                if (hasMatchedScope) {
-                    result.push(`${result.length + 1}- ${err.message}.`);
-                }
-                return result;
-            }, []);
-            const hasManyErrors = formattedErrorType.length > 1;
-            const indentationPrefix = `${' '.repeat(indentation)}`;
-            if (formattedErrorType.length > 0)
-                formattedErrors.push(`${errorType} Error${hasManyErrors ? 's' : ''}:\n${indentationPrefix}${formattedErrorType.join(`\n${indentationPrefix}`)}`);
-        });
-        return formattedErrors.join('\n');
-    }
-    matchesScope({ errScope, includesScope, excludesScope, }) {
-        if (includesScope === undefined && excludesScope === undefined)
-            return true;
-        if (errScope === undefined)
-            return false;
-        if (excludesScope) {
-            return !excludesScope.some((scope) => errScope.includes(scope));
-        }
-        if (includesScope) {
-            return includesScope.some((scope) => errScope.includes(scope));
-        }
-        return false;
-    }
-    push(type, error, options) {
-        const errorType = capitalize(type, { onlyFirstWord: true });
-        const errors = this.errors[errorType];
-        const newError = Array.isArray(error)
-            ? error.map((err) => ({ message: err, scope: options?.scope }))
-            : [{ message: error, scope: options?.scope }];
-        if (Array.isArray(errors)) {
-            errors.push(...newError);
-        }
-        else {
-            this.errors[errorType] = newError;
-            this.length++;
-        }
-        return this;
-    }
-    throw() {
-        Error.captureStackTrace(this, this.options?.stackTraceConstructor || this.throw);
-        throw this;
-    }
-    end() {
-        if (this.length > 0)
-            this.throw();
-    }
-}
-
-const LIBRARY_ERROR_SCOPE = Symbol('@mustib/utils');
-
-/**
- * Creates a debounced version of the provided function that delays its execution until after
- * a specified number of milliseconds have elapsed since the last time it was invoked.
- *
- * @param func - The function to debounce.
- * @param ms - The number of milliseconds to delay; defaults to 100ms.
- * @returns A debounced version of the input function.
- */
-function debounce(func, ms = 100) {
-    let timeoutId;
-    return function debounced(...args) {
-        clearTimeout(timeoutId);
-        timeoutId = setTimeout(() => func(...args), ms);
-    };
-}
-
-/**
- * Returns a promise that resolves after a specified number of milliseconds.
- *
- * @param milliseconds - The number of milliseconds to wait before resolving the promise. Defaults to 0.
- * @returns A promise that resolves after the specified delay.
- */
-function wait(milliseconds = 0) {
-    return new Promise(r => { setTimeout(r, milliseconds); });
-}
-
-/**
- * Creates a throttled version of the given function that, when invoked repeatedly,
- * will only call the original function at most once every `ms` milliseconds.
- *
- * @param func - The function to throttle.
- * @param ms - The number of milliseconds to throttle invocations to. Defaults to 100ms.
- * @returns A throttled version of the input function.
- */
-function throttle(func, ms = 100) {
-    let isThrottled = false;
-    return function throttled(...args) {
-        if (isThrottled)
-            return;
-        isThrottled = true;
-        func(...args);
-        setTimeout(() => { isThrottled = false; }, ms);
-    };
-}
-
-/**
- * Parses a string as JSON and returns the parsed value. If the string cannot be parsed as JSON,
- * it returns undefined.
- *
- * @param {string} value - The string to parse as JSON.
- * @return {T | undefined} - The parsed JSON value or undefined (since undefined is not a valid JSON).
- */
-function parseJson(value) {
-    try {
-        return JSON.parse(value);
-    }
-    catch (error) {
-        return undefined;
-    }
-}
-
 function getElementBoundaries(element) {
     const { top: elementTop, bottom, left: elementLeft, right, width, height, } = element.getBoundingClientRect();
     const pageWidth = document.documentElement.clientWidth;
@@ -1166,4 +973,4 @@ __decorate([
     })
 ], MuElement.prototype, "eventActionEvents", void 0);
 
-export { EventAction as E, MuElement as M, __decorate as _, disableElementScroll as a, debounce as d, enableElementScroll as e, getElementBoundaries as g, parseJson as p, throttle as t, wait as w };
+export { EventAction as E, MuElement as M, __decorate as _, disableElementScroll as d, enableElementScroll as e, getElementBoundaries as g };

package/mu-toast-DfNHcc7U.d.ts

@@ -0,0 +1,276 @@
+import { TemplateResult, PropertyValues, CSSResultGroup } from 'lit';
+import { MuElement, MuElementComponent } from './components/mu-element.js';
+import { MuIcon } from './components/mu-icon.js';
+import { EventData, CustomEventEmitter } from '@mustib/utils';
+
+type LockedEvent<T = undefined> = EventData<T, T, false, false>;
+
+type AnimationKeyframes = Keyframe[] | PropertyIndexedKeyframes;
+
+type ToastData = {
+  /**
+   * The message to display in the toast
+   */
+  message: string | TemplateResult;
+
+  spinner?: boolean | TemplateResult;
+
+  direction?: 'ltr' | 'rtl';
+
+  /**
+   * The label of the toast
+   */
+  label?: undefined | string | TemplateResult;
+
+  role?: 'alert' | 'status';
+
+  leaveAnimationDuration?: number;
+
+  enterAnimationDuration?: number;
+
+  priority?: 'immediate' | 'normal' | 'important';
+
+  enterAnimationKeyframes?: AnimationKeyframes;
+
+  progressAnimationKeyframes?: AnimationKeyframes;
+
+  leaveAnimationKeyframes?: AnimationKeyframes;
+
+  interactingBehavior?: 'reset-progress' | 'pause-progress' | 'nothing';
+
+  /**
+   * Remove the toast if it is not rendered within the specified time (in ms).
+   * If the toast fails to render in this time, it will be discarded.
+   * If not set, the toast will wait indefinitely to render if queued.
+   */
+  maxRenderWaitTime?: undefined | number;
+
+  /**
+   * The action of the toast
+   */
+  action?:
+    | undefined
+    | ((toast: Toast) => TemplateResult)
+    | {
+        label: string;
+        onClick: (toast: Toast) => void;
+      };
+
+  /**
+   * The duration of the toast
+   */
+  duration?: undefined | number;
+
+  /**
+   * The hue of the toast color
+   */
+  colorHue?: undefined | number;
+
+  closeBtn?: boolean | TemplateResult;
+
+  /**
+   * The name of the icon to display in the toast. This is the name of the icon from the {@link MuIcon} component
+   * @see {@link MuIcon.icons} or a custom lit {@link TemplateResult}
+   */
+  labelIcon?: undefined | keyof typeof MuIcon.icons | TemplateResult;
+};
+
+type Events$3 = {
+    'state.request.remove.toast': LockedEvent<{
+        toast: Toast$1;
+    }>;
+};
+declare class ToastController {
+    private portal;
+    private toastsIdMap;
+    private queuedToastsQueue;
+    toastsQueue: Toast$1[];
+    private _maxVisibleToastsCount;
+    private _stackToasts;
+    interactingBehavior: Toast$1['interactingBehavior'];
+    colorHue: {
+        success: number;
+        error: number;
+        warning: number;
+        info: number;
+    };
+    defaultDuration: number;
+    defaultLeaveAnimationDuration: number;
+    defaultEnterAnimationDuration: number;
+    defaultDirection: "ltr" | "rtl";
+    get maxVisibleToastsCount(): number;
+    set maxVisibleToastsCount(value: number);
+    get position(): MuToast["position"];
+    set position(value: MuToast['position']);
+    set stackToasts(value: boolean);
+    /**
+     * 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(): boolean;
+    constructor(portal: MuToast);
+    gracefulRemoveVisible(): void;
+    gracefulRemoveAll(): void;
+    /**
+     * 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?: Node): void;
+    /**
+     * 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(): void;
+    success(message: string): Toast$1;
+    error(message: string): Toast$1;
+    warning(message: string): Toast$1;
+    info(message: string): Toast$1;
+    create(toastData: ToastData | string): Toast$1;
+    private rolloverQueuedToasts;
+    emitter: CustomEventEmitter<Events$3>;
+}
+
+type Events$2 = {
+    'state.toast-item.first.rendered': LockedEvent<{
+        element: MuToastItem;
+    }>;
+    'state.await.rendering': LockedEvent;
+    'internal.status.enter': LockedEvent;
+    'internal.status.progress': LockedEvent;
+    'internal.status.leave': LockedEvent;
+};
+declare class Toast$1 {
+    private controller;
+    private internalToast;
+    get id(): string;
+    get action(): ((toast: Toast$1) => TemplateResult) | {
+        label: string;
+        onClick: (toast: Toast$1) => void;
+    } | undefined;
+    get message(): string | TemplateResult;
+    get label(): string | TemplateResult | undefined;
+    get role(): "alert" | "status";
+    get duration(): number;
+    get colorHue(): number;
+    get spinner(): boolean | TemplateResult;
+    get labelIcon(): keyof typeof MuIcon.icons | TemplateResult | undefined;
+    get closeBtn(): boolean | TemplateResult;
+    get leaveAnimationDuration(): number;
+    get enterAnimationDuration(): number;
+    get direction(): "rtl" | "ltr";
+    get interactingBehavior(): "reset-progress" | "pause-progress" | "nothing";
+    get status(): "queued" | "await-rendering" | "enter" | "progress" | "leave";
+    get priority(): "immediate" | "normal" | "important";
+    set colorHue(value: number);
+    set spinner(value: boolean | TemplateResult);
+    set labelIcon(value: keyof typeof MuIcon.icons | TemplateResult | undefined);
+    set message(value: string | TemplateResult);
+    set label(value: string | TemplateResult | undefined);
+    set action(value: ((toast: Toast$1) => TemplateResult) | {
+        label: string;
+        onClick: (toast: Toast$1) => void;
+    } | undefined);
+    set closeBtn(value: boolean | TemplateResult);
+    set duration(value: number);
+    constructor({ toastData, controller, }: {
+        toastData: ToastData;
+        controller: ToastController;
+    });
+    private _generateInternalToastData;
+    gracefulRemove(): Promise<void>;
+    remove(): void;
+    pauseProgress(): Promise<void>;
+    resumeProgress(): Promise<void>;
+    resetProgress(): Promise<void>;
+    emitter: CustomEventEmitter<Events$2>;
+}
+
+type MuToastItemComponent = {
+    attributes: Attributes$1;
+    events: Events$1;
+};
+type Events$1 = object;
+type Attributes$1 = MuElementComponent['attributes'];
+declare class MuToastItem extends MuElement {
+    static styles: any[];
+    eventActionData: undefined;
+    _addEventActionAttributes: undefined;
+    toast: Toast$1;
+    progressElement?: HTMLElement;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    private pausedByEvents;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mu-toast-item': MuToastItem;
+    }
+    interface GlobalEventHandlersEventMap extends Events$1 {
+    }
+}
+
+type MuToastComponent = {
+    attributes: Attributes;
+    events: Events;
+};
+type Events = object;
+type Attributes = MuElementComponent['attributes'] & {
+    /**
+     * The position of the toast
+     */
+    position?: 'top-center' | 'bottom-center' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+    /**
+     * Automatically re-parent the toast container to top-layer elements such as
+     * open `<dialog>`s or the fullscreen element. This is useful when the toast
+     * must appear above modals, dialogs or fullscreen content without requiring
+     * manual re-parenting.
+     *
+     * ⚠️ **Performance note:** enabling this feature causes the component to
+     * observe the entire document for attribute and child‑list mutations. It
+     * tracks changes to determine when dialogs are opened or closed, which can
+     * be expensive in applications with frequent DOM modifications. Use only when
+     * necessary and test performance impact in your target environment.
+     */
+    'auto-re-parent'?: boolean;
+    /**
+     * Indicates if the toast is empty
+     * must not be set directly, it is managed internally
+     */
+    empty?: boolean;
+};
+declare class MuToast extends MuElement {
+    static styles?: CSSResultGroup | undefined;
+    protected _addEventActionAttributes: undefined;
+    eventActionData: undefined;
+    controller: ToastController;
+    position: Exclude<Attributes['position'], undefined>;
+    autoReParent: boolean;
+    private setIsEmpty;
+    private _topLayerElements;
+    private _fullscreenElement;
+    private autoReParentObserver;
+    private addTopLayerElement;
+    private removeTopLayerElement;
+    fullscreenReParentHandler: () => void;
+    protected willUpdate(_changedProperties: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mu-toast': MuToast;
+    }
+    interface GlobalEventHandlersEventMap extends Events {
+    }
+}
+
+export { Toast$1 as T, MuToast as b, MuToastItem as c, ToastController as d };
+export type { AnimationKeyframes as A, LockedEvent as L, MuToastComponent as M, MuToastItemComponent as a, ToastData as e };

package/package.json

@@ -3,12 +3,12 @@
   "type": "module",
   "description": "A customizable web-components library with lit",
   "private": false,
-  "version": "0.0.0-alpha.6",
+  "version": "0.0.0-alpha.7",
   "lint-staged": {
     "*.{js,ts,astro}": "biome check --write"
   },
   "dependencies": {
-    "@mustib/utils": "2.8.1"
+    "@mustib/utils": "2.9.0"
   },
   "peerDependencies": {
     "lit": "^3.3.1"

package/utils/Toast.d.ts

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