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

package/components/mu-toast.js

@@ -0,0 +1,216 @@
+import { M as MuElement, _ as __decorate } from '../mu-element-yEZ17QUl.js';
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import './mu-toast-item.js';
+import { ToastController } from '../utils/ToastController.js';
+import '../common-BBjg-zl9.js';
+import './mu-icon.js';
+import 'lit/directive-helpers.js';
+import '../constants-DPnKJ57t.js';
+import '../utils/Toast.js';
+
+class MuToast extends MuElement {
+    constructor() {
+        super(...arguments);
+        this.controller = new ToastController(this);
+        this.position = 'top-center';
+        this.autoReParent = false;
+        this._topLayerElements = new Set();
+        this._fullscreenElement = null;
+        this.autoReParentObserver = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (mutation.type === 'attributes' &&
+                    mutation.attributeName === 'open' &&
+                    mutation.target instanceof HTMLDialogElement) {
+                    if (mutation.target.open)
+                        this.addTopLayerElement(mutation.target);
+                    else
+                        this.removeTopLayerElement(mutation.target);
+                }
+                if (mutation.removedNodes.length) {
+                    mutation.removedNodes.forEach((node) => {
+                        if (this._topLayerElements.has(node))
+                            this.removeTopLayerElement(node);
+                    });
+                }
+            }
+        });
+        this.fullscreenReParentHandler = () => {
+            if (document.fullscreenElement) {
+                if (this._fullscreenElement)
+                    this._topLayerElements.delete(this._fullscreenElement);
+                this._fullscreenElement = document.fullscreenElement;
+                this.addTopLayerElement(document.fullscreenElement);
+            }
+            else {
+                this.removeTopLayerElement(this._fullscreenElement);
+                this._fullscreenElement = null;
+            }
+        };
+    }
+    setIsEmpty(status) {
+        if (status)
+            this.setAttribute('empty', '');
+        else
+            this.removeAttribute('empty');
+    }
+    addTopLayerElement(element) {
+        this._topLayerElements.add(element);
+        this.controller.reParent(element);
+        this.controller.popover();
+    }
+    removeTopLayerElement(element) {
+        element && this._topLayerElements.delete(element);
+        const nextLayer = [...this._topLayerElements].pop() || document.body;
+        this.controller.reParent(nextLayer);
+        this.controller.popover();
+    }
+    willUpdate(_changedProperties) {
+        super.willUpdate(_changedProperties);
+        this.setIsEmpty(this.controller.toastsQueue.length === 0);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.autoReParent) {
+            document.addEventListener('fullscreenchange', this.fullscreenReParentHandler);
+            this.autoReParentObserver.observe(document.body, {
+                attributes: true,
+                childList: true,
+                subtree: true,
+                attributeFilter: ['open'],
+            });
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('fullscreenchange', this.fullscreenReParentHandler);
+        this.autoReParentObserver.disconnect();
+    }
+    render() {
+        const toastsArray = [...this.controller.toastsQueue];
+        /**
+         * reverse for top position so new toasts stack on top
+         */
+        if (this.position.startsWith('top'))
+            toastsArray.reverse();
+        const toasts = repeat(toastsArray, (toast) => toast.id, (toast, i) => {
+            return html `
+          <mu-toast-item
+            class="toast"
+            style="
+              --bottom-index: ${toastsArray.length - i};
+              --top-index: ${i + 1};
+              direction:${toast.direction};
+            "
+            exportparts='
+              container: toast-item-container,
+              label-icon: toast-item-label-icon,
+              content: toast-item-content,
+              label: toast-item-label,
+              message: toast-item-message,
+              spinner: toast-item-spinner,
+              action-btn: toast-item-action-btn,
+              close-btn: toast-item-close-btn,
+              progress: toast-item-progress,
+            '
+            .toast=${toast}
+          ></mu-toast-item>
+        `;
+        });
+        return html `
+      <div
+        id="container"
+        part="container"
+        ?stack-toasts=${this.controller.stackToasts}
+      > 
+        <slot name="before"></slot>
+        ${toasts}
+        <slot name="after"></slot>
+      </div>
+    `;
+    }
+}
+MuToast.styles = [
+    MuElement.cssBase,
+    css `
+      #container {
+        display: grid;
+        justify-content: center;
+        position: fixed;
+        inset: 5%;
+        height: fit-content;
+        gap: var(--mu-base-rem);
+        width: fit-content;
+        font-weight: normal;
+      }
+
+      .toast {
+        transition: translate 150ms;
+      }
+
+      #container:hover :where(.toast) {
+        translate: 0;
+      }
+
+      :host([position^="top"]) :where(#container) {
+        align-content: start;
+        margin-bottom: auto;
+      }
+
+      :host([position^="bottom"]) :where(#container) {
+        align-content: end;
+        margin-top: auto;
+      }
+
+      :host([position="bottom-center"]) :where(#container),
+      :host([position="top-center"]) :where(#container) {
+        margin-inline: auto;
+      }
+
+      :host([position="bottom-end"]) :where(#container),
+      :host([position="top-end"]) :where(#container) {
+        margin-inline-start: auto;
+      }
+
+      :host([position="bottom-start"]) :where(#container),
+      :host([position="top-start"]) :where(#container) {
+        margin-inline-end: auto;
+      }
+
+      /* for reversed toasts array to work on top positions */
+      :host([position^="top"]) :where(.toast) {
+        z-index: var(--bottom-index);
+      }
+
+      /* Stacking */
+      :host([position^="top"])
+        :where(
+          #container[stack-toasts] .toast:nth-of-type(n + 2)
+        ) {
+        translate: 0 calc(-100% * (var(--top-index) - 1));
+      }
+
+      :host([position^="bottom"])
+        :where(
+          #container[stack-toasts] .toast:not(:last-of-type)
+        ) {
+        translate: 0 calc(100% * (var(--bottom-index) - 1));
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .toast {
+          transition: none;
+        }
+      }
+    `,
+];
+__decorate([
+    property({ type: String, attribute: 'position', reflect: true })
+], MuToast.prototype, "position", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'auto-re-parent' })
+], MuToast.prototype, "autoReParent", void 0);
+MuToast.register('mu-toast');
+
+export { MuToast };

package/components/mu-transparent.js

@@ -1,6 +1,7 @@
-import { _ as __decorate, M as MuElement } from '../mu-element-CEvBHYiI.js';
+import { _ as __decorate, M as MuElement } from '../mu-element-yEZ17QUl.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
+import '../common-BBjg-zl9.js';
 
 /**
  * A base class for "transparent" wrapper components.

package/components/mu-trigger.js

@@ -1,4 +1,5 @@
-import { _ as __decorate, p as parseJson } from '../mu-element-CEvBHYiI.js';
+import { _ as __decorate } from '../mu-element-yEZ17QUl.js';
+import { p as parseJson } from '../common-BBjg-zl9.js';
 import { property } from 'lit/decorators.js';
 import { MuTransparent } from './mu-transparent.js';
 import 'lit';

package/constants-DPnKJ57t.js

@@ -0,0 +1,8 @@
+/**
+ * Symbol used to lock internal toast events.
+ * Prevents external code from dispatching state-changing events,
+ * ensuring only the Toast and ToastController can manage lifecycle.
+ */
+const TOAST_LOCK_SYMBOL = Symbol('toast-lock');
+
+export { TOAST_LOCK_SYMBOL as T };

package/index.d.ts

@@ -19,8 +19,12 @@ export { MuSelectLabel } from './components/mu-select-label.js';
 import { MuSelectLabelContentComponent } from './components/mu-select-label-content.js';
 export { MuSelectLabelContent } from './components/mu-select-label-content.js';
 import { MuSortableComponent } from './components/mu-sortable.js';
+export { MuSortable } from './components/mu-sortable.js';
 import { MuSortableItemComponent } from './components/mu-sortable-item.js';
-import './components/mu-sortable-trigger.js';
+export { MuSortableItem } from './components/mu-sortable-item.js';
+export { MuSortableTrigger } from './components/mu-sortable-trigger.js';
+import { M as MuToastComponent, a as MuToastItemComponent } from './mu-toast-DfNHcc7U.js';
+export { A as AnimationKeyframes, L as LockedEvent, b as MuToast, c as MuToastItem, T as Toast, d as ToastController, e as ToastData } from './mu-toast-DfNHcc7U.js';
 import { MuTransparentComponent } from './components/mu-transparent.js';
 export { MuTransparent } from './components/mu-transparent.js';
 import { MuTriggerComponent } from './components/mu-trigger.js';
@@ -28,6 +32,7 @@ export { MuTrigger } from './components/mu-trigger.js';
 export { MuElement, MuElementComponent } from './components/mu-element.js';
 import 'lit';
 import '@mustib/utils/browser';
+import '@mustib/utils';
 
 type ComponentsAttributes = {
     'mu-select': MuSelectComponent['attributes'];
@@ -44,10 +49,12 @@ type ComponentsAttributes = {
     'mu-trigger': MuTriggerComponent['attributes'];
     'mu-sortable': MuSortableComponent['attributes'];
     'mu-sortable-item': MuSortableItemComponent['attributes'];
+    'mu-toast': MuToastComponent['attributes'];
+    'mu-toast-item': MuToastItemComponent['attributes'];
 };
 type MuComponentsAttributes<GlobalAttributes = Record<string, any>> = {
     [key in keyof ComponentsAttributes]: Partial<ComponentsAttributes[key]> & GlobalAttributes;
 };
 
-export { MuIconComponent, MuRangeComponent, MuRangeFillComponent, MuRangeThumbComponent, MuRangeThumbValueComponent, MuSelectComponent, MuSelectItemComponent, MuSelectItemsComponent, MuSelectLabelComponent, MuSelectLabelContentComponent, MuTransparentComponent, MuTriggerComponent };
+export { MuIconComponent, MuRangeComponent, MuRangeFillComponent, MuRangeThumbComponent, MuRangeThumbValueComponent, MuSelectComponent, MuSelectItemComponent, MuSelectItemsComponent, MuSelectLabelComponent, MuSelectLabelContentComponent, MuSortableComponent, MuSortableItemComponent, MuToastComponent, MuToastItemComponent, MuTransparentComponent, MuTriggerComponent };
 export type { MuComponentsAttributes };

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 };