mtrl 0.8.0-next.8 → 0.8.0

package/dist/components/button/api.js

@@ -0,0 +1,265 @@
+import { addClass } from "../../core/index.js";
+export const withAPI = ({ disabled, lifecycle }) => (component) => {
+    const textAPI = {
+        setText: (content) => {
+            component.text.setText(content);
+            return textAPI;
+        },
+        getText: () => component.text.getText(),
+        getElement: () => component.text.getElement(),
+    };
+    const iconAPI = {
+        setIcon: (html) => {
+            component.icon.setIcon(html);
+            return iconAPI;
+        },
+        getIcon: () => component.icon.getIcon(),
+        getElement: () => component.icon.getElement(),
+    };
+    const buttonComponent = {
+        element: component.element,
+        text: textAPI,
+        icon: iconAPI,
+        disabled,
+        lifecycle,
+        getClass: component.getClass,
+        on: (event, handler) => {
+            if (component.on) {
+                component.on(event, handler);
+            }
+            return buttonComponent;
+        },
+        off: (event, handler) => {
+            if (component.off) {
+                component.off(event, handler);
+            }
+            return buttonComponent;
+        },
+        addClass: (...classes) => {
+            if (component.addClass) {
+                component.addClass(...classes);
+            }
+            else {
+                addClass(component.element, ...classes);
+            }
+            return buttonComponent;
+        },
+        getValue: () => component.element.value,
+        setValue(value) {
+            component.element.value = value;
+            return buttonComponent;
+        },
+        enable() {
+            disabled.enable();
+            return buttonComponent;
+        },
+        disable() {
+            disabled.disable();
+            return buttonComponent;
+        },
+        setText(content) {
+            component.text.setText(content);
+            return buttonComponent;
+        },
+        getText() {
+            return component.text.getText();
+        },
+        hasIcon() {
+            const iconElement = component.icon.getElement();
+            return (!!iconElement &&
+                !!iconElement.innerHTML.trim() &&
+                !!iconElement.parentNode);
+        },
+        setIcon(icon) {
+            const compName = component.componentName || "button";
+            const buttonClass = component.getClass(compName);
+            if (!icon) {
+                const iconElement = component.icon.getElement();
+                if (iconElement && iconElement.parentNode) {
+                    iconElement.parentNode.removeChild(iconElement);
+                    component.icon.getElement = () => null;
+                    component.icon.getIcon = () => "";
+                }
+                component.element.classList.remove(`${buttonClass}--icon`);
+            }
+            else if (!buttonComponent.hasIcon()) {
+                const newIconElement = document.createElement("span");
+                newIconElement.className = `${component.getClass("button-icon")}`;
+                newIconElement.innerHTML = icon;
+                if (component.element.firstChild) {
+                    component.element.insertBefore(newIconElement, component.element.firstChild);
+                }
+                else {
+                    component.element.appendChild(newIconElement);
+                }
+                component.icon.getElement = () => newIconElement;
+                component.icon.getIcon = () => icon;
+                component.element.classList.add(`${buttonClass}--icon`);
+            }
+            else {
+                const iconElement = component.icon.getElement();
+                if (iconElement) {
+                    iconElement.innerHTML = icon;
+                }
+            }
+            return buttonComponent;
+        },
+        getIcon() {
+            return buttonComponent.hasIcon() ? component.icon.getIcon() : "";
+        },
+        setVariant(variant) {
+            const compName = component.componentName || "button";
+            const buttonClass = component.getClass(compName);
+            const variantClasses = [
+                "filled",
+                "tonal",
+                "outlined",
+                "elevated",
+                "text",
+            ].map((v) => `${buttonClass}--${v}`);
+            variantClasses.forEach((cls) => {
+                component.element.classList.remove(cls);
+            });
+            component.element.classList.add(`${buttonClass}--${variant}`);
+            return buttonComponent;
+        },
+        getVariant() {
+            const compName = component.componentName || "button";
+            const buttonClass = component.getClass(compName);
+            const variants = ["filled", "tonal", "outlined", "elevated", "text"];
+            for (const variant of variants) {
+                if (component.element.classList.contains(`${buttonClass}--${variant}`)) {
+                    return variant;
+                }
+            }
+            return "filled";
+        },
+        getSize() {
+            const compName = component.componentName || "button";
+            const buttonClass = component.getClass(compName);
+            const sizes = ["xs", "s", "m", "l", "xl"];
+            for (const size of sizes) {
+                if (component.element.classList.contains(`${buttonClass}--${size}`)) {
+                    return size;
+                }
+            }
+            return "s";
+        },
+        setSize(size) {
+            const compName = component.componentName || "button";
+            const buttonClass = component.getClass(compName);
+            const sizeClasses = ["xs", "s", "m", "l", "xl"].map((s) => `${buttonClass}--${s}`);
+            sizeClasses.forEach((cls) => {
+                component.element.classList.remove(cls);
+            });
+            component.element.classList.add(`${buttonClass}--${size}`);
+            return buttonComponent;
+        },
+        getShape() {
+            const compName = component.componentName || "button";
+            const buttonClass = component.getClass(compName);
+            const shapes = ["round", "square"];
+            for (const shape of shapes) {
+                if (component.element.classList.contains(`${buttonClass}--${shape}`)) {
+                    return shape;
+                }
+            }
+            return "round";
+        },
+        setShape(shape) {
+            const compName = component.componentName || "button";
+            const buttonClass = component.getClass(compName);
+            const shapeClasses = ["round", "square"].map((s) => `${buttonClass}--${s}`);
+            shapeClasses.forEach((cls) => {
+                component.element.classList.remove(cls);
+            });
+            component.element.classList.add(`${buttonClass}--${shape}`);
+            return buttonComponent;
+        },
+        setActive(active) {
+            if (active) {
+                component.element.classList.add(`${component.getClass("button")}--active`);
+            }
+            else {
+                component.element.classList.remove(`${component.getClass("button")}--active`);
+            }
+            return buttonComponent;
+        },
+        setSelected(selected) {
+            component.toggle?.setSelected(selected);
+            return buttonComponent;
+        },
+        isSelected: () => component.toggle?.isSelected() ?? false,
+        setAriaLabel(label) {
+            component.element.setAttribute("aria-label", label);
+            return buttonComponent;
+        },
+        destroy() {
+            lifecycle.destroy();
+        },
+    };
+    if (component.progress) {
+        buttonComponent.progress = component.progress;
+    }
+    if (component.showProgress) {
+        buttonComponent.showProgress = async () => {
+            await component.showProgress();
+            return buttonComponent;
+        };
+    }
+    if (component.showProgressSync) {
+        buttonComponent.showProgressSync = () => {
+            component.showProgressSync();
+            return buttonComponent;
+        };
+    }
+    if (component.hideProgress) {
+        buttonComponent.hideProgress = async () => {
+            await component.hideProgress();
+            return buttonComponent;
+        };
+    }
+    if (component.hideProgressSync) {
+        buttonComponent.hideProgressSync = () => {
+            component.hideProgressSync();
+            return buttonComponent;
+        };
+    }
+    if (component.setProgress) {
+        buttonComponent.setProgress = async (value) => {
+            await component.setProgress(value);
+            return buttonComponent;
+        };
+    }
+    if (component.setProgressSync) {
+        buttonComponent.setProgressSync = (value) => {
+            component.setProgressSync(value);
+            return buttonComponent;
+        };
+    }
+    if (component.setIndeterminate) {
+        buttonComponent.setIndeterminate = async (indeterminate) => {
+            await component.setIndeterminate(indeterminate);
+            return buttonComponent;
+        };
+    }
+    if (component.setIndeterminateSync) {
+        buttonComponent.setIndeterminateSync = (indeterminate) => {
+            component.setIndeterminateSync(indeterminate);
+            return buttonComponent;
+        };
+    }
+    if (component.setLoading) {
+        buttonComponent.setLoading = async (loading, text) => {
+            await component.setLoading(loading, text);
+            return buttonComponent;
+        };
+    }
+    if (component.setLoadingSync) {
+        buttonComponent.setLoadingSync = (loading, text) => {
+            component.setLoadingSync(loading, text);
+            return buttonComponent;
+        };
+    }
+    return buttonComponent;
+};

package/dist/components/button/button.d.ts

@@ -1,4 +1,4 @@
-import { ButtonConfig } from "./types";
+import { ButtonConfig } from "./types.js";
 /**
  * Creates a new Button component with the specified configuration.
  *

package/dist/components/button/button.js

@@ -0,0 +1,25 @@
+import { pipe } from "../../core/compose/index.js";
+import { createBase, withElement } from "../../core/compose/component.js";
+import { withEvents, withText, withIcon, withVariant, withSize, withRipple, withDisabled, withLifecycle, } from "../../core/compose/features/index.js";
+import { withProgress } from "./features/progress.js";
+import { withToggle } from "./features/toggle.js";
+import { withAPI } from "./api.js";
+import { createBaseConfig, getElementConfig, getApiConfig } from "./config.js";
+const createButton = (config = {}) => {
+    const baseConfig = createBaseConfig(config);
+    try {
+        const button = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withVariant(baseConfig), withSize(baseConfig), withText(baseConfig), withIcon(baseConfig), withDisabled(baseConfig), withToggle(baseConfig), withProgress(baseConfig), withRipple(baseConfig), withLifecycle(), (component) => {
+            if (baseConfig.shape && component.element) {
+                const className = `${baseConfig.prefix}-${baseConfig.componentName}--${baseConfig.shape}`;
+                component.element.classList.add(className);
+            }
+            return component;
+        }, (comp) => withAPI(getApiConfig(comp))(comp))(baseConfig);
+        return button;
+    }
+    catch (error) {
+        console.error("Button creation error:", error);
+        throw new Error(`Failed to create button: ${error.message}`);
+    }
+};
+export default createButton;

package/dist/components/button/config.d.ts

@@ -1,4 +1,4 @@
-import { ButtonConfig } from "./types";
+import { ButtonConfig } from "./types.js";
 /**
  * Default configuration for the Button component.
  * These values will be used when not explicitly specified by the user.

package/dist/components/button/config.js

@@ -0,0 +1,51 @@
+import { createComponentConfig, createElementConfig, } from "../../core/config/component.js";
+import { BUTTON_VARIANTS, BUTTON_TYPES, DEFAULT_RIPPLE_CONFIG, BUTTON_SIZES, BUTTON_SHAPES, } from "./constants.js";
+export const defaultConfig = {
+    variant: BUTTON_VARIANTS.FILLED,
+    size: BUTTON_SIZES.S,
+    shape: BUTTON_SHAPES.ROUND,
+    disabled: false,
+    type: BUTTON_TYPES.BUTTON,
+    ripple: true,
+    rippleConfig: {
+        duration: DEFAULT_RIPPLE_CONFIG.DURATION,
+        timing: DEFAULT_RIPPLE_CONFIG.TIMING,
+        opacity: DEFAULT_RIPPLE_CONFIG.OPACITY,
+    },
+};
+export const createBaseConfig = (config = {}) => createComponentConfig(defaultConfig, config, "button");
+export const getElementConfig = (config) => {
+    const attributes = {
+        type: config.type || "button",
+    };
+    if (config.disabled === true) {
+        attributes.disabled = true;
+    }
+    if (config.value !== undefined) {
+        attributes.value = config.value;
+    }
+    if (config.ariaLabel) {
+        attributes["aria-label"] = config.ariaLabel;
+    }
+    return createElementConfig(config, {
+        tag: "button",
+        attributes,
+        className: config.class,
+        forwardEvents: {
+            click: (component) => !component.element.disabled,
+            focus: true,
+            blur: true,
+        },
+    });
+};
+export const getApiConfig = (comp) => ({
+    disabled: {
+        enable: () => comp.disabled.enable(),
+        disable: () => comp.disabled.disable(),
+        isDisabled: () => comp.disabled.isDisabled(),
+    },
+    lifecycle: {
+        destroy: () => comp.lifecycle.destroy(),
+    },
+});
+export default defaultConfig;

package/dist/components/button/constants.js

@@ -0,0 +1,35 @@
+export const BUTTON_VARIANTS = {
+    FILLED: "filled",
+    TONAL: "tonal",
+    OUTLINED: "outlined",
+    ELEVATED: "elevated",
+    TEXT: "text",
+};
+export const BUTTON_SIZES = {
+    XS: "xs",
+    S: "s",
+    M: "m",
+    L: "l",
+    XL: "xl",
+};
+export const BUTTON_SHAPES = {
+    ROUND: "round",
+    SQUARE: "square",
+};
+export const BUTTON_TYPES = {
+    BUTTON: "button",
+    SUBMIT: "submit",
+    RESET: "reset",
+};
+export const BUTTON_CLASSES = {
+    ROOT: "button",
+    ICON: "button-icon",
+    TEXT: "button-text",
+    ACTIVE: "button-active",
+    DISABLED: "button-disabled",
+};
+export const DEFAULT_RIPPLE_CONFIG = {
+    DURATION: 450,
+    TIMING: "cubic-bezier(0.4, 0.0, 0.2, 1)",
+    OPACITY: ["0.7", "0"],
+};

package/dist/components/button/features/progress.d.ts

@@ -1,5 +1,5 @@
-import type { ProgressComponent } from "../../progress/types";
-import { ButtonConfig } from "../types";
+import type { ProgressComponent } from "../../progress/types.js";
+import { ButtonConfig } from "../types.js";
 /**
  * Component with progress capabilities
  */

package/dist/components/button/features/progress.js

@@ -0,0 +1,163 @@
+import { addClass, removeClass } from "../../../core/dom/index.js";
+const createProgressLazy = async (config) => {
+    const { default: createProgress } = await import("../../progress/progress.js");
+    return createProgress(config);
+};
+export const withProgress = (config) => (component) => {
+    if (!config.progress) {
+        return component;
+    }
+    let progressEventHandlers = {};
+    const progressConfig = typeof config.progress === "boolean"
+        ? { variant: "circular", size: 20, thickness: 2, indeterminate: true }
+        : (() => {
+            const { on, ...restConfig } = config.progress;
+            if (on) {
+                progressEventHandlers = on;
+            }
+            return {
+                variant: "circular",
+                size: 20,
+                thickness: 2,
+                indeterminate: true,
+                ...restConfig,
+            };
+        })();
+    let progress = null;
+    let progressPromise = null;
+    let isLoading = false;
+    let originalText = "";
+    const ensureProgress = async () => {
+        if (progress)
+            return progress;
+        if (!progressPromise) {
+            progressPromise = createProgressLazy(progressConfig).then((p) => {
+                progress = p;
+                addClass(progress.element, component.getClass("button-progress"));
+                progress.element.style.display = "none";
+                Object.entries(progressEventHandlers).forEach(([event, handler]) => {
+                    progress.on(event, handler);
+                });
+                component.progress = progress;
+                return progress;
+            });
+        }
+        return progressPromise;
+    };
+    const getProgressInsertionPoint = () => {
+        const iconElement = component.element.querySelector(`.${component.getClass("button-icon")}`);
+        if (iconElement && iconElement.nextSibling) {
+            return iconElement.nextSibling;
+        }
+        return component.element.firstChild;
+    };
+    component.showProgress = async function () {
+        const p = await ensureProgress();
+        if (p.element) {
+            if (!component.element.contains(p.element)) {
+                const insertPoint = getProgressInsertionPoint();
+                if (insertPoint) {
+                    component.element.insertBefore(p.element, insertPoint);
+                }
+                else {
+                    component.element.appendChild(p.element);
+                }
+            }
+            p.element.style.display = "";
+            addClass(component.element, `${component.getClass("button")}--progress`);
+            const iconElement = component.element.querySelector(`.${component.getClass("button-icon")}`);
+            if (iconElement instanceof HTMLElement) {
+                iconElement.style.display = "none";
+            }
+        }
+        return component;
+    };
+    component.showProgressSync = function () {
+        component.showProgress();
+        return component;
+    };
+    component.hideProgress = async function () {
+        if (!progress)
+            return component;
+        progress.element.style.display = "none";
+        removeClass(component.element, `${component.getClass("button")}--progress`);
+        const iconElement = component.element.querySelector(`.${component.getClass("button-icon")}`);
+        if (iconElement instanceof HTMLElement) {
+            iconElement.style.display = "";
+        }
+        return component;
+    };
+    component.hideProgressSync = function () {
+        component.hideProgress();
+        return component;
+    };
+    component.setProgress = async function (value) {
+        const p = await ensureProgress();
+        p.setValue(value);
+        return component;
+    };
+    component.setProgressSync = function (value) {
+        component.setProgress(value);
+        return component;
+    };
+    component.setIndeterminate = async function (indeterminate) {
+        const p = await ensureProgress();
+        p.setIndeterminate(indeterminate);
+        return component;
+    };
+    component.setIndeterminateSync = function (indeterminate) {
+        component.setIndeterminate(indeterminate);
+        return component;
+    };
+    component.setLoading = async function (loading, text) {
+        if (loading && !isLoading) {
+            if (component.setText && component.getText) {
+                originalText = component.getText();
+            }
+            isLoading = true;
+            await component.showProgress();
+            if (component.disabled?.disable) {
+                component.disabled.disable();
+            }
+            if (text && component.setText) {
+                component.setText(text);
+            }
+        }
+        else if (!loading && isLoading) {
+            isLoading = false;
+            await component.hideProgress();
+            if (component.disabled?.enable) {
+                component.disabled.enable();
+            }
+            if (text && component.setText) {
+                component.setText(text);
+            }
+            else if (originalText && component.setText) {
+                component.setText(originalText);
+            }
+        }
+        return component;
+    };
+    component.setLoadingSync = function (loading, text) {
+        component.setLoading(loading, text);
+        return component;
+    };
+    if (component.lifecycle) {
+        const originalDestroy = component.lifecycle.destroy;
+        component.lifecycle.destroy = () => {
+            if (progress) {
+                progress.destroy();
+            }
+            if (progress && progress.element.parentNode) {
+                progress.element.parentNode.removeChild(progress.element);
+            }
+            originalDestroy();
+        };
+    }
+    if (config.showProgress) {
+        ensureProgress().then(() => {
+            component.showProgress();
+        });
+    }
+    return component;
+};

package/dist/components/button/features/toggle.d.ts

@@ -1,4 +1,4 @@
-import { ButtonConfig } from "../types";
+import { ButtonConfig } from "../types.js";
 /**
  * Toggle state manager
  * @category Components

package/dist/components/button/features/toggle.js

@@ -0,0 +1,33 @@
+export const withToggle = (config) => (component) => {
+    if (!config.toggle) {
+        return component;
+    }
+    const { element } = component;
+    const buttonClass = component.getClass("button");
+    let selected = false;
+    const apply = (next) => {
+        selected = next;
+        element.classList.toggle(`${buttonClass}--selected`, next);
+        element.setAttribute("aria-pressed", String(next));
+    };
+    element.classList.add(`${buttonClass}--toggle`);
+    apply(config.selected === true);
+    if (config.toggleOnClick !== false) {
+        element.addEventListener("click", () => {
+            if (element.disabled)
+                return;
+            apply(!selected);
+            component.emit?.("change", { selected });
+        });
+    }
+    return {
+        ...component,
+        toggle: {
+            setSelected: (next) => {
+                if (next !== selected)
+                    apply(next);
+            },
+            isSelected: () => selected,
+        },
+    };
+};

package/dist/components/button/index.d.ts

@@ -2,6 +2,6 @@
  * Button component module
  * @module components/button
  */
-export { default } from "./button";
-export type { ButtonConfig, ButtonComponent, ButtonVariant } from "./types";
-export type { ButtonSize, ButtonShape } from "./constants";
+export { default } from "./button.js";
+export type { ButtonConfig, ButtonComponent, ButtonVariant } from "./types.js";
+export type { ButtonSize, ButtonShape } from "./constants.js";

package/dist/components/button/index.js

@@ -0,0 +1 @@
+export { default } from "./button.js";

package/dist/components/button/types.d.ts

@@ -1,6 +1,6 @@
-import { BaseComponentConfig } from "../../core/config/component";
-import { ProgressConfig, ProgressComponent } from "../progress/types";
-import { ButtonSize, ButtonShape } from "./constants";
+import { BaseComponentConfig } from "../../core/config/component.js";
+import { ProgressConfig, ProgressComponent } from "../progress/types.js";
+import { ButtonSize, ButtonShape } from "./constants.js";
 /**
  * Button variant types - controls the visual style of the button
  * @category Components

package/dist/components/button/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/button-group/button-group.d.ts

@@ -1,4 +1,4 @@
-import { ButtonGroupConfig, ButtonGroupComponent } from './types';
+import { ButtonGroupConfig, ButtonGroupComponent } from "./types.js";
 /**
  * Creates a new Button Group component
  *