@mustib/web-components 0.0.0-alpha.0

package/mu-element-CZDI_RCY.js

@@ -0,0 +1,1117 @@
+import { css, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { staticProperty } from './decorators.js';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __classPrivateFieldGet(receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    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;
+    const pageHeight = document.documentElement.clientHeight;
+    const elementRight = pageWidth - right;
+    const elementBottom = pageHeight - bottom;
+    const isTopInPage = elementTop >= 0 && elementTop <= pageHeight;
+    const isBottomInPage = elementBottom >= 0 && elementBottom <= pageHeight;
+    const isLeftInPage = elementLeft >= 0 && elementLeft <= pageWidth;
+    const isRightInPage = elementRight >= 0 && elementRight <= pageWidth;
+    const isTopVisible = isTopInPage && (isLeftInPage || isRightInPage);
+    const isTopFullyVisible = isTopInPage && isLeftInPage && isRightInPage;
+    const isBottomVisible = isBottomInPage && (isLeftInPage || isRightInPage);
+    const isBottomFullyVisible = isBottomInPage && isLeftInPage && isRightInPage;
+    const isLeftVisible = isLeftInPage && (isTopInPage || isBottomInPage);
+    const isLeftFullyVisible = isLeftInPage && isTopInPage && isBottomInPage;
+    const isRightVisible = isRightInPage && (isTopInPage || isBottomInPage);
+    const isRightFullyVisible = isRightInPage && isTopInPage && isBottomInPage;
+    const isFullyVisible = isTopFullyVisible &&
+        isBottomFullyVisible &&
+        isLeftFullyVisible &&
+        isRightFullyVisible;
+    return {
+        elementTop,
+        elementBottom,
+        elementLeft,
+        elementRight,
+        width,
+        height,
+        isTopVisible,
+        isTopFullyVisible,
+        isBottomVisible,
+        isBottomFullyVisible,
+        isLeftVisible,
+        isLeftFullyVisible,
+        isRightVisible,
+        isRightFullyVisible,
+        isFullyVisible,
+    };
+}
+
+const getScrollbarWidthErrorScope = [Symbol('@mustib/utils/getScrollbarWidth'), LIBRARY_ERROR_SCOPE];
+/**
+ * Returns the width of the scrollbar for a given HTML element or the document.
+ * Handles both horizontal ('x') and vertical ('y') scrollbars, and accounts for element borders.
+ *
+ * - For the document, calculates the scrollbar width using window and document dimensions.
+ * - For an HTMLElement, computes the difference between offset and client dimensions,
+ *   subtracting border widths to isolate the scrollbar size.
+ *
+ * @param options - Configuration object.
+ * @param options.element - The target element or document. Defaults to `document`.
+ * @param options.direction - Scrollbar direction: `'x'` for horizontal, `'y'` for vertical. Defaults to `'y'`.
+ * @returns The scrollbar width in pixels. Returns `0` if no scrollbar is present or calculation is not possible.
+ *
+ * @throws AppError<'Invalid'> If `element` is provided and is not an HTMLElement or Document.
+ */
+function getScrollbarWidth(options) {
+    const { element = document, direction = 'y' } = options ?? {};
+    if (!element || element === document)
+        return direction === 'x' ? window.innerHeight - document.documentElement.clientHeight : window.innerWidth - document.documentElement.clientWidth;
+    if (!(element instanceof HTMLElement)) {
+        return AppError.throw('Invalid', "Invalid argument: 'element' must be an HTMLElement.", {
+            pushOptions: {
+                scope: getScrollbarWidthErrorScope
+            }
+        });
+    }
+    // Get the computed styles of the element to determine border widths.
+    const computedStyle = window.getComputedStyle(element);
+    // Parse float values for border widths, defaulting to 0 if not a number.
+    const borderStartWidth = parseFloat(direction === 'x' ? computedStyle.borderTopWidth : computedStyle.borderLeftWidth) ?? 0;
+    const borderEndWidth = parseFloat(direction === 'x' ? computedStyle.borderBottomWidth : computedStyle.borderRightWidth) ?? 0;
+    // Calculate the total horizontal border width.
+    const totalBorderWidth = borderStartWidth + borderEndWidth;
+    // Calculate the raw difference between offsetWidth (includes borders and scrollbar)
+    // and clientWidth (includes content and padding, but not borders or scrollbar).
+    const rawDiff = direction === 'x' ? element.offsetHeight - element.clientHeight : element.offsetWidth - element.clientWidth;
+    // The scrollbar width is this raw difference minus the total border width.
+    // We use Math.max to ensure the result is not negative, as overlay scrollbars
+    // might result in a 0 or negative difference with their layout behavior.
+    const scrollbarWidth = Math.max(0, rawDiff - totalBorderWidth);
+    return scrollbarWidth;
+}
+
+/**
+ * Finds the closest ancestor element (including the starting element) that matches the given selector,
+ * traversing through shadow DOM boundaries if necessary.
+ *
+ * This function behaves like `Element.closest`, but will continue searching across shadow roots
+ * by moving up to the host element of each shadow root encountered.
+ *
+ * @param selector - A string containing a selector to match against.
+ * @param startEl - The element from which to start searching.
+ * @returns The closest matching ancestor element, or `null` if none is found.
+ */
+function closestPierce(selector, startEl) {
+    let el = startEl;
+    while (el && el instanceof HTMLElement) {
+        const found = el.closest(selector);
+        if (found)
+            return found;
+        const root = el.getRootNode();
+        // only continue if in shadow dom, otherwise we're done
+        el = root instanceof ShadowRoot ? root.host : null;
+    }
+    return null;
+}
+
+const disableAttribute = 'data-mustib-scroll-disabled';
+const marginRightVar = `--${disableAttribute}-margin-right-end`;
+const scrollbarWidthVar = `--${disableAttribute}-scrollbar-width`;
+const style = document.createElement('style');
+style.dataset.id = (`${disableAttribute}-style`);
+style.innerHTML = `
+  [${disableAttribute}] {
+    overflow: hidden !important;
+    overscroll-behavior: contain !important;
+    margin-right: calc(var(${marginRightVar}) + var(${scrollbarWidthVar})) !important;
+  }
+`;
+function disableElementScroll(options) {
+    const { element = document.body, scrollbarElement = document } = {};
+    if (!style.isConnected)
+        document.head.appendChild(style);
+    if (element.hasAttribute(disableAttribute))
+        return;
+    const baseMarginRight = getComputedStyle(element).marginRight;
+    const baseMarginRightWithoutPixels = +baseMarginRight.slice(0, -2);
+    const scrollbarWidth = getScrollbarWidth({ element: scrollbarElement });
+    element.setAttribute(disableAttribute, '');
+    element.style.setProperty(marginRightVar, `${baseMarginRightWithoutPixels}px`);
+    element.style.setProperty(scrollbarWidthVar, `${scrollbarWidth}px`);
+}
+function enableElementScroll(options) {
+    const element = document.body;
+    if (!element.hasAttribute(disableAttribute))
+        return;
+    element.removeAttribute(disableAttribute);
+    element.style.removeProperty(marginRightVar);
+    element.style.removeProperty(scrollbarWidthVar);
+}
+
+/* eslint-disable no-multi-assign */
+/* eslint-disable no-console */
+const defaultGenerateDataHandler = (data) => data;
+class EventAction {
+    /**
+     * A map of memoized actions where keys are the matchedTargets and the values are an object where the keys are the registered EventAction event names for that element and the values are an the parsed actions array for that event
+     */
+    static memoizedElementActions = new Map();
+    static defaultActions = {
+        '#prevent': {
+            handler(data) {
+                data.event.preventDefault();
+            },
+            generateDataHandler: defaultGenerateDataHandler,
+            overridable: false
+        },
+        '#stop': {
+            handler(data) {
+                data.event.stopPropagation();
+            },
+            generateDataHandler: defaultGenerateDataHandler,
+            overridable: false
+        },
+        "#nothing": {
+            handler() { },
+            generateDataHandler: defaultGenerateDataHandler,
+            overridable: false,
+        },
+        '#debug': {
+            handler: console.log,
+            generateDataHandler: defaultGenerateDataHandler,
+            overridable: false
+        },
+        '#log': {
+            handler(data) {
+                const param = data.actionParam;
+                if (param !== '') {
+                    console.log(param);
+                }
+                else {
+                    console.log(`(${data.eventName}) event dispatched by (${data.matchedTarget.tagName.toLowerCase()}) element ${data._parsedAction.hasOr ? '(with or action type)' : ''}`, `with switches(${data._parsedAction.switches?.map(s => `${s.name}${s.param !== '' ? `:${s.param}` : ''}`).join(', ')})`);
+                }
+            },
+            generateDataHandler: defaultGenerateDataHandler,
+            overridable: false
+        }
+    };
+    static defaultSwitches = {
+        '#key': {
+            handler(data) {
+                if (!(data.event instanceof KeyboardEvent))
+                    return false;
+                let keysArray;
+                if (Array.isArray(data.switchParam)) {
+                    keysArray = data.switchParam;
+                }
+                else if (typeof data.switchParam === 'string') {
+                    keysArray = data.switchParam.replace(/Space/g, ' ').split(',').map(k => k === '' ? ',' : k);
+                }
+                if (!keysArray || keysArray.length === 0)
+                    return false;
+                return keysArray.includes(data.event.key);
+            },
+            overridable: false,
+            dynamic: false,
+        },
+        '#special-key': {
+            handler(data) {
+                if (!(data.event instanceof KeyboardEvent))
+                    return false;
+                switch (data.switchParam) {
+                    case 'ctrl':
+                        return data.event.ctrlKey;
+                    case 'alt':
+                        return data.event.altKey;
+                    case 'shift':
+                        return data.event.shiftKey;
+                    case 'meta':
+                        return data.event.metaKey;
+                    default:
+                        return false;
+                }
+            },
+            overridable: false,
+            dynamic: false
+        }
+    };
+    /**
+     * Finds the first matched element from the `event.composedPath()` that is contained in the `event.currentTarget` and matches the given attribute.
+     *
+     * It receives an object with the following parameters:
+     *
+     * - attributeName: The name of the attribute to match (without brackets).
+     * - event: The Event whose composedPath and currentTarget are used for the search.
+     */
+    static getMatchedTarget({ attributeName, event }) {
+        const { currentTarget } = event;
+        if (!(currentTarget instanceof HTMLElement))
+            return undefined;
+        for (const el of event.composedPath()) {
+            if (!(el instanceof HTMLElement))
+                continue;
+            if (!currentTarget.contains(el))
+                break;
+            if (el.matches(`[${attributeName}]`)) {
+                return el;
+            }
+        }
+        return undefined;
+    }
+    /**
+     * **NOTE:** It must be used when working on shadow dom elements, because {@link EventAction.getMatchedTarget getMatchedTarget} does not work for shadow dom elements.
+     *
+     * This function is similar to {@link EventAction.getMatchedTarget getMatchedTarget}, but instead uses {@link closestPierce} to determine if the target matches the attributeName is contained in the closest element that matches currTargetSelector.
+     *
+     * it receives an object with the following parameters:
+     *
+     * - attributeName: The name of the attribute to match (without brackets).
+     * - event: The Event whose composedPath and currentTarget are used for the search.
+     * - currTargetSelector: The selector that is used to determine if the target is contained in the currentTarget.
+     */
+    static getMatchedTargetPierce({ attributeName, event, currTargetSelector }) {
+        for (const el of event.composedPath()) {
+            if (!(el instanceof HTMLElement))
+                continue;
+            if (!closestPierce(currTargetSelector, el))
+                break;
+            if (el.hasAttribute(attributeName)) {
+                return el;
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Returns the HTML data attribute name for the given event name.
+     *
+     * @param eventName - The name of the event.
+     * @returns The HTML data attribute name for the event.
+     */
+    static getEventAttributeName(eventName) {
+        return `data-${eventName}`;
+    }
+    /**
+     * Parse an action name and returns an object with the following properties:
+     * - name: The name of the action.
+     * - hasOr: A boolean indicating whether the action name starts with "||".
+     *
+     * @param name - The name of the action to parse.
+     */
+    static parseActionName(name) {
+        const trimmedName = name.trim();
+        const hasOr = trimmedName.startsWith('||');
+        return { name: hasOr ? trimmedName.slice(2) : trimmedName, hasOr };
+    }
+    /**
+     * Parse an action string and returns a {@link ParsedAction parsed action}.
+     *
+     * @param actionString - The action string to parse.
+     *
+     * @example
+     *
+     * parseActionString('switch1:param1? switch2:param2? ||action:param');
+     * {
+     *  name: 'action',
+     *  param: 'param',
+     *  hasOr: true,
+     *  switches: [
+     *    {name: 'switch1', param: 'param1'},
+     *    {name: 'switch2', param: 'param2'}
+     *  ]
+     * }
+     */
+    static parseActionString(actionString) {
+        const trimmed = actionString.replace(/\s+/g, ' ').trim();
+        if (trimmed === '')
+            return { name: '', param: '', switches: [], hasOr: false };
+        const switchIndex = trimmed.lastIndexOf('?');
+        const hasSwitches = switchIndex !== -1;
+        const paramIndex = trimmed.lastIndexOf(':');
+        const hasParam = paramIndex !== -1 && paramIndex > switchIndex;
+        const name = hasSwitches ? trimmed.slice(switchIndex + 1, hasParam ? paramIndex : undefined) : trimmed.slice(0, hasParam ? paramIndex : undefined);
+        const param = hasParam ? trimmed.slice(paramIndex + 1) : '';
+        let switches = [];
+        if (hasSwitches) {
+            const _switchString = trimmed.slice(0, switchIndex);
+            const switchesArray = _switchString.split('?');
+            switches = switchesArray.map(switchString => {
+                const switchParamIndex = switchString.indexOf(':');
+                const hasSwitchParam = switchParamIndex !== -1;
+                const switchName = hasSwitchParam ? switchString.slice(0, switchParamIndex) : switchString;
+                const switchParam = hasSwitchParam ? switchString.slice(switchParamIndex + 1) : '';
+                return { name: switchName.trim(), param: switchParam.trim() };
+            });
+        }
+        return { param: param.trim(), switches, ...EventAction.parseActionName(name) };
+    }
+    actions = { ...EventAction.defaultActions };
+    switches = {};
+    currTargetSelector;
+    /**
+     * A custom function to get the event attribute name.
+     * @see {@link EventAction.getEventAttributeName getEventAttributeName}
+     */
+    getEventAttributeName;
+    /**
+     * A custom function to get the matched target element.
+     * @see {@link EventAction.getMatchedTarget getMatchedTarget}
+     */
+    getMatchedTarget;
+    constructor(options) {
+        this.registerSwitches(EventAction.defaultSwitches);
+        const { actions, generateDataHandler, switches, getEventAttributeName, getMatchedTarget, currTargetSelector } = options ?? {};
+        if (getMatchedTarget && currTargetSelector !== undefined) {
+            console.warn(`currentTargetSelector (${currTargetSelector}) is useless when getTargetElement is defined`, this);
+        }
+        this.currTargetSelector = currTargetSelector;
+        if (getMatchedTarget)
+            (this.getMatchedTarget = getMatchedTarget);
+        if (getEventAttributeName)
+            (this.getEventAttributeName = getEventAttributeName);
+        if (switches)
+            this.registerSwitches(switches);
+        if (actions)
+            this.registerActions(actions, { generateDataHandler });
+    }
+    /**
+     * A quick way to add multiple event action listeners to an element.
+     *
+     * @param element - The element to register the event listeners on.
+     * @param eventsNames - An array of event names to register listeners for element.
+     *
+     * @returns This instance, for method chaining.
+     */
+    addListeners(element, eventsNames) {
+        eventsNames.forEach(eventName => {
+            element.addEventListener(eventName, this.listener);
+        });
+        return this;
+    }
+    /**
+     * A quick way to remove multiple event action listeners from an element.
+     *
+     * @param element - The element to remove event listeners from.
+     * @param eventsNames - An array of event names to remove their listeners from element.
+     *
+     * @returns This instance, for method chaining.
+     */
+    removeListeners(element, eventsNames) {
+        eventsNames.forEach(eventName => {
+            element.removeEventListener(eventName, this.listener);
+        });
+        EventAction.memoizedElementActions.delete(element);
+        return this;
+    }
+    /**
+     * Adds switches to the event action instance.
+     *
+     * @param switches - An object where the keys are switch names and the values are either a switch handler or a custom switch object.
+     *
+     * @see {@link SwitchHandlerOrCustomSwitch}.
+     *
+     * @returns This instance, for method chaining.
+     */
+    registerSwitches(switches) {
+        for (const [name, _switch] of Object.entries(switches)) {
+            const existingSwitch = this.switches[name];
+            if (existingSwitch && !existingSwitch.overridable) {
+                console.warn(`Switch named (${name}) is already registered and cannot be overridden`, this);
+                continue;
+            }
+            const $switch = typeof _switch === 'function' ? {
+                handler: _switch,
+                override: false,
+                overridable: true,
+                dynamic: false,
+            } : _switch;
+            const switchData = {
+                handler: $switch.handler,
+                overridable: $switch.overridable ?? true,
+                dynamic: $switch.dynamic ?? false
+            };
+            if (existingSwitch && !$switch.override) {
+                console.warn(`Switch named (${name}) is already registered and need (override) option to be true to be overridden`);
+                continue;
+            }
+            this.switches[name] = switchData;
+        }
+        return this;
+    }
+    /**
+     * Adds actions to the event action.
+     *
+     * @param actions - An object where the keys are action names and the values are either an action handler or a custom action object.
+     * @param options - An optional object with these properties:
+     *  - {@link RegisteredActionData.generateDataHandler `generateDataHandler`} A default `generateDataHandler` for all provided actions instead of adding it to each action.
+     *
+     * @see {@link ActionHandlerOrCustomAction}.
+     *
+     * @returns This instance, for method chaining.
+     */
+    registerActions(actions, options) {
+        for (const [name, _action] of Object.entries(actions)) {
+            const existingAction = this.actions[name];
+            if (existingAction && !existingAction.overridable) {
+                console.warn(`Action named (${name}) is already registered and cannot be overridden`, this);
+                continue;
+            }
+            const action = typeof _action === 'function' ? {
+                handler: _action,
+                override: false,
+                overridable: true,
+                generateDataHandler: options?.generateDataHandler
+            } : _action;
+            const actionData = {
+                handler: action.handler,
+                overridable: action.overridable ?? true,
+                generateDataHandler: action.generateDataHandler ?? options?.generateDataHandler
+            };
+            if (existingAction && !action.override) {
+                console.warn(`Action named (${name}) is already registered and need (override) option to be true to be overridden`);
+                continue;
+            }
+            this.actions[name] = actionData;
+        }
+        return this;
+    }
+    /**
+     * Parses an attribute string and returns a parsed actions array.
+     */
+    parseActionsString(attributeString) {
+        const json = parseJson(attributeString);
+        if (Array.isArray(json)) {
+            return json.reduce((result, actionData) => {
+                if (typeof actionData === 'string') {
+                    result.push(EventAction.parseActionString(actionData));
+                }
+                else if (Array.isArray(actionData) &&
+                    actionData.length > 0 &&
+                    typeof actionData[0] === 'string') {
+                    switch (actionData.length) {
+                        case 1:
+                            result.push(EventAction.parseActionString(actionData[0]));
+                            break;
+                        case 2:
+                            result.push({
+                                param: actionData[1],
+                                switches: [],
+                                ...EventAction.parseActionName(actionData[0])
+                            });
+                            break;
+                        default:
+                            result.push({
+                                param: actionData[1],
+                                switches: actionData.slice(2).map(switchData => {
+                                    const [name = '', param = ''] = Array.isArray(switchData) ? switchData : switchData.split(':');
+                                    return {
+                                        name,
+                                        param
+                                    };
+                                }),
+                                ...EventAction.parseActionName(actionData[0])
+                            });
+                            break;
+                    }
+                }
+                else if (typeof actionData === 'object' && actionData !== null) {
+                    result.push(actionData);
+                }
+                return result;
+            }, []);
+        }
+        return attributeString
+            .split('&&')
+            .map(EventAction.parseActionString);
+    }
+    /**
+     * for internal use
+     *
+     * Used to get the matched target for an event
+     */
+    _getMatchedTarget({ attributeName, event }) {
+        if (this.getMatchedTarget) {
+            return this.getMatchedTarget({
+                attributeName,
+                event
+            });
+        }
+        if (this.currTargetSelector !== undefined && this.currTargetSelector !== '') {
+            return EventAction.getMatchedTargetPierce({
+                attributeName,
+                event,
+                currTargetSelector: this.currTargetSelector
+            });
+        }
+        return EventAction.getMatchedTarget({
+            attributeName,
+            event
+        });
+    }
+    /**
+     * Executes the parsed actions array and their switches.
+     *
+     * It expects an object with the following properties:
+     * - `parsedActions`: the parsed actions array.
+     * - `matchedTarget`: the matched target for the event.
+     * - `event`: the event.
+     * - `eventName`: the name of the event.
+     *
+     * @returns an object with the following properties:
+     * - `executedActions`: the executed actions array.
+     */
+    executeParsedActions({ event, eventName, matchedTarget, parsedActions }) {
+        const staticSwitches = {};
+        const executedActions = [];
+        for (const parsedAction of parsedActions) {
+            if (parsedAction.name === '')
+                continue;
+            const action = this.actions[parsedAction.name];
+            if (!action) {
+                console.warn(`There is no registered action with the name (${parsedAction.name}) for the event (${eventName})`, matchedTarget);
+                continue;
+            }
+            const checkSwitches = parsedAction.switches.length === 0 ? true : parsedAction.switches.every(switchData => {
+                const staticValue = staticSwitches[switchData.name]?.get(switchData.param);
+                if (staticValue !== undefined)
+                    return staticValue;
+                const switchAction = this.switches[switchData.name];
+                if (!switchAction) {
+                    console.warn(`There is no registered switch with the name (${switchData.name}) for the event (${eventName})`, matchedTarget);
+                    return false;
+                }
+                const value = switchAction.handler({
+                    actionParam: parsedAction.param,
+                    event: event,
+                    matchedTarget,
+                    eventName,
+                    switchParam: switchData.param,
+                    actionName: parsedAction.name,
+                    _parsedAction: parsedAction
+                });
+                if (!switchAction.dynamic) {
+                    const map = staticSwitches[switchData.name] ||= new Map();
+                    map.set(switchData.param, value);
+                }
+                return value;
+            });
+            if (!checkSwitches)
+                continue;
+            const handlerData = {
+                actionParam: parsedAction.param,
+                event: event,
+                matchedTarget,
+                eventName,
+                _parsedAction: parsedAction,
+            };
+            action.handler(action.generateDataHandler ? action.generateDataHandler(handlerData) : handlerData);
+            executedActions.push(parsedAction);
+            if (parsedAction.hasOr) {
+                break;
+            }
+        }
+        return { executedActions };
+    }
+    /**
+     * Memoizes and Parses an action string into a parsed actions array if it is not memoized,
+     *
+     * @param data - An object containing the matched target, event name, and action string.
+     * @returns The memoized parsed actions array.
+     */
+    getOrMemoizeParsedActions(data) {
+        const { matchedTarget, eventName, actionStr } = data;
+        let memoizedTargetEvents = EventAction.memoizedElementActions.get(matchedTarget);
+        if (!memoizedTargetEvents) {
+            const events = {};
+            EventAction.memoizedElementActions.set(matchedTarget, events);
+            memoizedTargetEvents = events;
+        }
+        const parsedActions = memoizedTargetEvents[eventName] ||= this.parseActionsString(actionStr);
+        return parsedActions;
+    }
+    /**
+     * The event listener function.
+     *
+     * it returns undefined or an object with the following properties:
+     * - `matchedTarget`: the matched target for the event.
+     * - `attributeName`: the name of the attribute that contains the event actions.
+     * - `parsedActions`: the parsed actions array.
+     * - `executedActions`: the executed actions array.
+     *
+     * The returned object can be useful for debugging purposes, and can also be used when the listener is not the actual event listener handler if that is needed.
+     */
+    listener = (e) => {
+        const eventName = e.type;
+        const attributeName = (this.getEventAttributeName ?? EventAction.getEventAttributeName)(eventName);
+        const matchedTarget = this._getMatchedTarget({ attributeName, event: e });
+        if (!matchedTarget)
+            return undefined;
+        const actionStr = matchedTarget.getAttribute(attributeName);
+        if (actionStr === null || actionStr === '')
+            return undefined;
+        const parsedActions = this.getOrMemoizeParsedActions({
+            matchedTarget,
+            eventName,
+            actionStr
+        });
+        const { executedActions } = this.executeParsedActions({
+            event: e,
+            eventName,
+            matchedTarget,
+            parsedActions
+        });
+        return {
+            matchedTarget,
+            attributeName,
+            parsedActions,
+            executedActions
+        };
+    };
+}
+
+var _a, _MUElement_muElements;
+let count = 0;
+class MUElement extends LitElement {
+    static register(tagName) {
+        if (customElements.get(tagName))
+            return;
+        customElements.define(tagName, this);
+    }
+    get interactable() {
+        return !(this.disabled || this.readonly);
+    }
+    constructor() {
+        super();
+        this.disabled = false;
+        this.readonly = false;
+        /**
+         * If true, do not add {@link https://mustib.github.io/mustib-utils/v2/utilities/browser/eventaction/ event action} attributes
+         *
+         * By default mu-element will call `_addEventActionAttributes` in connectedCallback if it is not undefined and `noEventActionAttributes` is false
+         */
+        this.noEventActionAttributes = false;
+        Reflect.defineProperty(this, 'muId', {
+            value: `mu-element-${++count}`,
+            configurable: false,
+            writable: false,
+            enumerable: true
+        });
+    }
+    generateIsReadyPromise({ timeout = 1000, onTimeout = () => {
+        console.warn('timeout reached for isReady promise', this);
+    } } = {}) {
+        const obj = {
+            status: 'pending',
+            resolved: false,
+        };
+        obj.promise = new Promise((r) => {
+            const timeoutId = setTimeout(() => {
+                if (obj.resolved)
+                    return;
+                obj.resolved = true;
+                obj.status = 'fail';
+                onTimeout?.();
+                r(true);
+            }, timeout);
+            obj.resolve = () => {
+                if (obj.resolved)
+                    return;
+                clearTimeout(timeoutId);
+                obj.resolved = true;
+                obj.status = 'success';
+                r(true);
+            };
+        });
+        return obj;
+    }
+    getMuElementById(id) {
+        return __classPrivateFieldGet(_a, _a, "f", _MUElement_muElements).get(id);
+    }
+    closestPierce(selector) {
+        return _a.closestPierce(selector, this);
+    }
+    /**
+     * This method gets the next or previous navigable item from the given index.
+     *
+     * If an item not found and switchBack is true, it will go the other direction to find an item
+     *
+     * It takes An optional object with the following properties:
+     *  - `fromIndex` - The index to start searching from.
+     *
+     *  - `direction` - The direction to search in, can be (`next` or `prev`).
+     *
+     *  - `switchBack` - A boolean Whether to search in the other direction if an item is not found.
+     *
+     *  - `items` - The array of items to search in.
+     *
+     *  - `isNavigable` - A function that takes an item and returns a boolean indicating whether the item is navigable.
+     *
+     *  - `shouldBreak` - An optional function that takes an item and returns a boolean indicating whether to break the loop.
+     */
+    getNavigationItem(data) {
+        const { direction, switchBack = false, items, fromIndex = direction === 'next' ? -1 : items.length, isNavigable, shouldBreak } = data;
+        let navigationItem;
+        const getItem = ({ endIndex, startIndex }) => {
+            const numOfRetries = endIndex + 1 - startIndex;
+            for (let i = 0; i < numOfRetries && !navigationItem; i++) {
+                const itemIndex = direction === 'next' ? startIndex + i : endIndex - i;
+                const item = items[itemIndex];
+                if (item) {
+                    if (shouldBreak?.(item))
+                        break;
+                    if (isNavigable(item)) {
+                        navigationItem = item;
+                    }
+                }
+            }
+        };
+        if (direction === 'next') {
+            getItem({
+                startIndex: fromIndex + 1,
+                endIndex: items.length - 1
+            });
+        }
+        else {
+            getItem({
+                startIndex: 0,
+                endIndex: fromIndex - 1
+            });
+        }
+        if (!navigationItem && switchBack) {
+            if (direction === 'next') {
+                getItem({
+                    startIndex: 0,
+                    endIndex: fromIndex - 1
+                });
+            }
+            else {
+                getItem({
+                    startIndex: fromIndex + 1,
+                    endIndex: items.length - 1
+                });
+            }
+        }
+        return navigationItem;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.dataset.muId = this.muId;
+        if (!this.id)
+            this.id = this.muId;
+        __classPrivateFieldGet(_a, _a, "f", _MUElement_muElements).set(this.muId, { element: this });
+        this.updateComplete.then(() => {
+            this.eventActionData?.eventAction.addListeners(this, this.eventActionEvents || this.eventActionData.events);
+            if (!this.noEventActionAttributes)
+                this._addEventActionAttributes?.();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        __classPrivateFieldGet(_a, _a, "f", _MUElement_muElements).delete(this.muId);
+        this.eventActionData?.eventAction.removeListeners(this, this.eventActionEvents || this.eventActionData.events);
+    }
+}
+_a = MUElement;
+_MUElement_muElements = { value: new Map() };
+MUElement.closestPierce = closestPierce;
+MUElement.css = {
+    focus: css `
+    --focus-color: oklch(from currentColor l c h / 0.5);
+    box-shadow: 0 0 0 var(--focus-width, 2px) var(--mu-focus-color, var(--focus-color)) inset;
+  `
+};
+MUElement.cssColors = css `
+  --mu-color-100: hsl(var(--mu-hue), 20%, 95%);
+  --mu-color-200: hsl(var(--mu-hue), 30%, 85%);
+  --mu-color-300: hsl(var(--mu-hue), 40%, 75%);
+  --mu-color-400: hsl(var(--mu-hue), 50%, 65%);
+  --mu-color-500: hsl(var(--mu-hue), 60%, 55%);
+  --mu-color-600: hsl(var(--mu-hue), 70%, 45%);
+  --mu-color-700: hsl(var(--mu-hue), 80%, 35%);
+  --mu-color-800: hsl(var(--mu-hue), 90%, 25%);
+  --mu-color-900: hsl(var(--mu-hue), 100%, 15%);
+`;
+MUElement.cssBase = css `
+    *, *::before, *::after, :where(:host) {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font: inherit;
+      border: none;
+      outline: none;
+    }
+
+    .truncate {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    :where(:host) {
+      ${_a.cssColors}
+      --mu-base-rem: 10px;
+      --mu-hue: 240;
+      display: block;
+      font-size: calc(var(--mu-base-rem) * 1.6);
+      color: var(--mu-color-100);
+      font-family: sans-serif;
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      max-width: 100%;
+    }
+
+    @media (prefers-color-scheme: light) {
+      :where(:host) {
+        color: var(--mu-color-900);
+      }
+    }
+
+    :where(:host([readonly]), :host([disabled])) {
+      user-select: none;
+      cursor: not-allowed;
+    }
+  `;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MUElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MUElement.prototype, "readonly", void 0);
+__decorate([
+    staticProperty({
+        converter: Boolean
+    })
+], MUElement.prototype, "noEventActionAttributes", void 0);
+__decorate([
+    staticProperty({
+        converter: parseJson
+    })
+], 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 };