mtrl 0.8.0-next.8 → 0.8.0

package/dist/components/slider/features/handlers.js

@@ -0,0 +1,389 @@
+import { SLIDER_EVENTS } from "../types.js";
+export const createHandlers = (config, state, uiRenderer, eventHelpers) => {
+    const components = state.component?.components || {};
+    const component = state.component || {};
+    const container = component.container || components.container || null;
+    const handle = component.handle || components.handle || null;
+    const valueBubble = component.valueBubble || components.valueBubble || null;
+    const secondHandle = component.secondHandle || components.secondHandle || null;
+    const secondValueBubble = component.secondValueBubble || components.secondValueBubble || null;
+    const { getValueFromPosition = () => 0, roundToStep = (value) => value, clamp = (value) => value, showValueBubble = () => { }, render = () => { }, } = uiRenderer;
+    const { triggerEvent = () => ({ defaultPrevented: false }) } = eventHelpers;
+    let hasActualDragStarted = false;
+    let initialX = 0;
+    const DRAG_THRESHOLD = 3;
+    let lastFocusedHandle = null;
+    const clearBubbleHideTimer = () => {
+        if (state.valueHideTimer) {
+            clearTimeout(state.valueHideTimer);
+            state.valueHideTimer = null;
+        }
+    };
+    const hideAllBubbles = () => {
+        clearBubbleHideTimer();
+        if (valueBubble)
+            showValueBubble(valueBubble, false);
+        if (secondValueBubble)
+            showValueBubble(secondValueBubble, false);
+    };
+    const showActiveBubble = (bubble) => {
+        hideAllBubbles();
+        if (bubble && config.showValue)
+            showValueBubble(bubble, true);
+    };
+    const hideActiveBubble = (bubble, delay = 0) => {
+        clearBubbleHideTimer();
+        if (!bubble || !config.showValue)
+            return;
+        if (delay > 0) {
+            state.valueHideTimer = setTimeout(() => {
+                showValueBubble(bubble, false);
+            }, delay);
+        }
+        else {
+            showValueBubble(bubble, false);
+        }
+    };
+    const clearKeyboardFocus = () => {
+        if (handle)
+            handle.classList.remove(`${state.component.getClass("slider-handle")}--focused`);
+        if (secondHandle)
+            secondHandle.classList.remove(`${state.component.getClass("slider-handle")}--focused`);
+        try {
+            const focusClass = state.component.getClass("slider-handle--focused");
+            document.querySelectorAll(`.${focusClass}`).forEach((el) => {
+                el.classList.remove(focusClass);
+            });
+            if (document.activeElement?.classList.contains(state.component.getClass("slider-handle"))) {
+                document.activeElement.blur();
+            }
+        }
+        catch (error) {
+            console.warn("Error clearing keyboard focus:", error);
+        }
+    };
+    const handleHandleMouseDown = (e, isSecondHandle = false) => {
+        if (!state.component ||
+            (state.component.disabled && state.component.disabled.isDisabled())) {
+            return;
+        }
+        if (e.type === "mousedown") {
+            e.preventDefault();
+        }
+        e.stopPropagation();
+        hideAllBubbles();
+        clearKeyboardFocus();
+        initialX = e.type.includes("touch") ? e.touches[0].clientX : e.clientX;
+        state.dragging = false;
+        state.pressed = true;
+        hasActualDragStarted = false;
+        state.activeHandle = isSecondHandle ? "second" : "first";
+        state.activeBubble = isSecondHandle ? secondValueBubble : valueBubble;
+        showActiveBubble(state.activeBubble);
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+        document.addEventListener("touchmove", handleMouseMove, { passive: false });
+        document.addEventListener("touchend", handleMouseUp);
+        render();
+        triggerEvent(SLIDER_EVENTS.START, e);
+    };
+    const handleTrackMouseDown = (e) => {
+        if (!state.component ||
+            (state.component.disabled && state.component.disabled.isDisabled()) ||
+            !container) {
+            return;
+        }
+        if (e.type === "mousedown") {
+            e.preventDefault();
+        }
+        hideAllBubbles();
+        clearKeyboardFocus();
+        let isSecondHandle = false;
+        try {
+            const position = e.type.includes("touch")
+                ? e.touches[0].clientX
+                : e.clientX;
+            let newValue = getValueFromPosition(position);
+            if (config.snapToSteps && state.step > 0)
+                newValue = roundToStep(newValue);
+            newValue = clamp(newValue, state.min, state.max);
+            if (config.range && state.secondValue !== null) {
+                const distToFirst = Math.abs(newValue - state.value);
+                const distToSecond = Math.abs(newValue - state.secondValue);
+                isSecondHandle = distToSecond < distToFirst;
+                isSecondHandle
+                    ? (state.secondValue = newValue)
+                    : (state.value = newValue);
+            }
+            else {
+                if (config.centered &&
+                    state.component.slider &&
+                    state.component.slider.setValue) {
+                    state.component.slider.setValue(newValue, false);
+                }
+                else {
+                    state.value = newValue;
+                }
+            }
+            render();
+            triggerEvent(SLIDER_EVENTS.INPUT, e);
+        }
+        catch (error) {
+            console.warn("Error handling track click:", error);
+        }
+        state.activeHandle = isSecondHandle ? "second" : "first";
+        state.activeBubble = isSecondHandle ? secondValueBubble : valueBubble;
+        initialX = e.type.includes("touch") ? e.touches[0].clientX : e.clientX;
+        if (config.centered && !config.range) {
+            showActiveBubble(state.activeBubble);
+            document.addEventListener("mousemove", handleMouseMove);
+            document.addEventListener("mouseup", handleMouseUp);
+            document.addEventListener("touchmove", handleMouseMove, {
+                passive: false,
+            });
+            document.addEventListener("touchend", handleMouseUp);
+            state.pressed = false;
+            triggerEvent(SLIDER_EVENTS.START, e);
+        }
+        else {
+            state.dragging = false;
+            state.pressed = false;
+            hasActualDragStarted = false;
+            showActiveBubble(state.activeBubble);
+            document.addEventListener("mousemove", handleMouseMove);
+            document.addEventListener("mouseup", handleMouseUp);
+            document.addEventListener("touchmove", handleMouseMove, {
+                passive: false,
+            });
+            document.addEventListener("touchend", handleMouseUp);
+            render();
+            triggerEvent(SLIDER_EVENTS.START, e);
+        }
+    };
+    const handleMouseMove = (e) => {
+        if (!state.activeHandle || !container)
+            return;
+        e.preventDefault();
+        try {
+            const currentX = e.type.includes("touch")
+                ? e.touches[0].clientX
+                : e.clientX;
+            if (!hasActualDragStarted &&
+                Math.abs(currentX - initialX) >= DRAG_THRESHOLD) {
+                hasActualDragStarted = true;
+                state.dragging = true;
+                state.component.element.classList.add(`${state.component.getClass("slider")}--dragging`);
+            }
+            let newValue = getValueFromPosition(currentX);
+            if (config.snapToSteps && state.step > 0)
+                newValue = roundToStep(newValue);
+            newValue = clamp(newValue, state.min, state.max);
+            const isSecondHandle = state.activeHandle === "second";
+            if (config.range && state.secondValue !== null) {
+                if (isSecondHandle) {
+                    if (newValue >= state.value) {
+                        state.secondValue = newValue;
+                    }
+                    else {
+                        hideActiveBubble(state.activeBubble, 0);
+                        state.secondValue = state.value;
+                        state.value = newValue;
+                        state.activeHandle = "first";
+                        state.activeBubble = valueBubble;
+                        showActiveBubble(state.activeBubble);
+                    }
+                }
+                else {
+                    if (newValue <= state.secondValue) {
+                        state.value = newValue;
+                    }
+                    else {
+                        hideActiveBubble(state.activeBubble, 0);
+                        state.value = state.secondValue;
+                        state.secondValue = newValue;
+                        state.activeHandle = "second";
+                        state.activeBubble = secondValueBubble;
+                        showActiveBubble(state.activeBubble);
+                    }
+                }
+            }
+            else {
+                if (config.centered) {
+                    state.previousValue = state.value;
+                }
+                state.value = newValue;
+            }
+            render();
+            triggerEvent(SLIDER_EVENTS.INPUT, e);
+        }
+        catch (error) {
+            console.warn("Error during slider drag:", error);
+        }
+    };
+    const handleMouseUp = (e) => {
+        if (!state.activeHandle)
+            return;
+        e.preventDefault();
+        state.dragging = false;
+        state.pressed = false;
+        hasActualDragStarted = false;
+        state.component.element.classList.remove(`${state.component.getClass("slider")}--dragging`);
+        hideActiveBubble(state.activeBubble, 1000);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        document.removeEventListener("touchmove", handleMouseMove);
+        document.removeEventListener("touchend", handleMouseUp);
+        state.activeHandle = null;
+        render();
+        triggerEvent(SLIDER_EVENTS.CHANGE, e);
+        triggerEvent(SLIDER_EVENTS.END, e);
+    };
+    const handleKeyDown = (e, isSecondHandle = false) => {
+        if (state.component.disabled && state.component.disabled.isDisabled())
+            return;
+        const step = state.step || 1;
+        let newValue = isSecondHandle ? state.secondValue : state.value;
+        const stepSize = e.shiftKey ? step * 10 : step;
+        if (e.key === "Tab")
+            return;
+        let valueChanged = false;
+        switch (e.key) {
+            case "ArrowRight":
+            case "ArrowUp":
+                e.preventDefault();
+                newValue = Math.min(newValue + stepSize, state.max);
+                valueChanged = true;
+                break;
+            case "ArrowLeft":
+            case "ArrowDown":
+                e.preventDefault();
+                newValue = Math.max(newValue - stepSize, state.min);
+                valueChanged = true;
+                break;
+            case "Home":
+                e.preventDefault();
+                newValue = state.min;
+                valueChanged = true;
+                break;
+            case "End":
+                e.preventDefault();
+                newValue = state.max;
+                valueChanged = true;
+                break;
+            case "PageUp":
+                e.preventDefault();
+                newValue = Math.min(newValue + step * 10, state.max);
+                valueChanged = true;
+                break;
+            case "PageDown":
+                e.preventDefault();
+                newValue = Math.max(newValue - step * 10, state.min);
+                valueChanged = true;
+                break;
+            default:
+                return;
+        }
+        if (!valueChanged)
+            return;
+        state.activeBubble = isSecondHandle ? secondValueBubble : valueBubble;
+        showActiveBubble(state.activeBubble);
+        if (isSecondHandle) {
+            state.secondValue = newValue;
+        }
+        else {
+            if (config.centered) {
+                state.previousValue = state.value;
+            }
+            state.value = newValue;
+        }
+        render();
+        triggerEvent(SLIDER_EVENTS.INPUT, e);
+        triggerEvent(SLIDER_EVENTS.CHANGE, e);
+    };
+    const handleFocus = (e, isSecondHandle = false) => {
+        if (state.component.disabled && state.component.disabled.isDisabled())
+            return;
+        const currentHandle = isSecondHandle ? secondHandle : handle;
+        if (lastFocusedHandle && lastFocusedHandle !== currentHandle) {
+            hideAllBubbles();
+        }
+        lastFocusedHandle = currentHandle;
+        currentHandle.classList.add(`${state.component.getClass("slider-handle")}--focused`);
+        showActiveBubble(isSecondHandle ? secondValueBubble : valueBubble);
+        state.activeBubble = isSecondHandle ? secondValueBubble : valueBubble;
+        triggerEvent(SLIDER_EVENTS.FOCUS, e);
+    };
+    const handleBlur = (e, isSecondHandle = false) => {
+        const handleElement = isSecondHandle ? secondHandle : handle;
+        handleElement.classList.remove(`${state.component.getClass("slider-handle")}--focused`);
+        const relatedTarget = e.relatedTarget;
+        const otherHandle = isSecondHandle ? handle : secondHandle;
+        if (!relatedTarget || relatedTarget !== otherHandle) {
+            hideActiveBubble(isSecondHandle ? secondValueBubble : valueBubble, 200);
+        }
+        triggerEvent(SLIDER_EVENTS.BLUR, e);
+    };
+    const setupEventListeners = () => {
+        if (!state.component || !handle) {
+            console.warn("Cannot set up event listeners: missing component or handle");
+            return;
+        }
+        container.addEventListener("mousedown", handleTrackMouseDown);
+        container.addEventListener("touchstart", handleTrackMouseDown, {
+            passive: true,
+        });
+        handle.addEventListener("mousedown", (e) => handleHandleMouseDown(e, false));
+        handle.addEventListener("touchstart", (e) => handleHandleMouseDown(e, false), { passive: true });
+        handle.addEventListener("keydown", (e) => handleKeyDown(e, false));
+        handle.addEventListener("focus", (e) => handleFocus(e, false));
+        handle.addEventListener("blur", (e) => handleBlur(e, false));
+        if (config.range && secondHandle) {
+            secondHandle.addEventListener("mousedown", (e) => handleHandleMouseDown(e, true));
+            secondHandle.addEventListener("touchstart", (e) => handleHandleMouseDown(e, true), { passive: true });
+            secondHandle.addEventListener("keydown", (e) => handleKeyDown(e, true));
+            secondHandle.addEventListener("focus", (e) => handleFocus(e, true));
+            secondHandle.addEventListener("blur", (e) => handleBlur(e, true));
+        }
+    };
+    const cleanupEventListeners = () => {
+        if (!state.component)
+            return;
+        if (container) {
+            container.removeEventListener("mousedown", handleTrackMouseDown);
+            container.removeEventListener("touchstart", handleTrackMouseDown);
+        }
+        if (handle) {
+            handle.removeEventListener("mousedown", (e) => handleHandleMouseDown(e, false));
+            handle.removeEventListener("touchstart", (e) => handleHandleMouseDown(e, false));
+            handle.removeEventListener("keydown", (e) => handleKeyDown(e, false));
+            handle.removeEventListener("focus", (e) => handleFocus(e, false));
+            handle.removeEventListener("blur", (e) => handleBlur(e, false));
+        }
+        if (config.range && secondHandle) {
+            secondHandle.removeEventListener("mousedown", (e) => handleHandleMouseDown(e, true));
+            secondHandle.removeEventListener("touchstart", (e) => handleHandleMouseDown(e, true));
+            secondHandle.removeEventListener("keydown", (e) => handleKeyDown(e, true));
+            secondHandle.removeEventListener("focus", (e) => handleFocus(e, true));
+            secondHandle.removeEventListener("blur", (e) => handleBlur(e, true));
+        }
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        document.removeEventListener("touchmove", handleMouseMove);
+        document.removeEventListener("touchend", handleMouseUp);
+    };
+    return {
+        handleHandleMouseDown,
+        handleTrackMouseDown,
+        handleMouseMove,
+        handleMouseUp,
+        handleKeyDown,
+        handleFocus,
+        handleBlur,
+        setupEventListeners,
+        cleanupEventListeners,
+        showActiveBubble,
+        hideActiveBubble,
+        hideAllBubbles,
+        clearKeyboardFocus,
+    };
+};

package/dist/components/slider/features/index.d.ts

@@ -1,5 +1,5 @@
-export { withRange } from "./range";
-export { withStates } from "./states";
-export { withController } from "./controller";
-export { withCanvas } from "./canvas";
-export { withDom } from "./dom";
+export { withRange } from "./range.js";
+export { withStates } from "./states.js";
+export { withController } from "./controller.js";
+export { withTracks } from "./tracks.js";
+export { withDom } from "./dom.js";

package/dist/components/slider/features/index.js

@@ -0,0 +1,5 @@
+export { withRange } from "./range.js";
+export { withStates } from "./states.js";
+export { withController } from "./controller.js";
+export { withTracks } from "./tracks.js";
+export { withDom } from "./dom.js";

package/dist/components/slider/features/range.d.ts

@@ -1,4 +1,4 @@
-import { SliderConfig } from '../types';
+import { SliderConfig } from "../types.js";
 /**
  * Enhances structure definition with range slider elements
  *

package/dist/components/slider/features/range.js

@@ -0,0 +1,70 @@
+import { createElement } from "../../../core/dom/create.js";
+export const withRange = (config) => component => {
+    if (!config.range || !config.secondValue || !component.schema) {
+        return component;
+    }
+    try {
+        const min = config.min || 0;
+        const max = config.max || 100;
+        const secondValue = config.secondValue;
+        const secondValuePercent = ((secondValue - min) / (max - min)) * 100;
+        const formatter = config.valueFormatter || (val => val.toString());
+        const isDisabled = config.disabled === true;
+        const getClass = component.getClass;
+        const schema = JSON.parse(JSON.stringify(component.schema));
+        const rootClasses = schema.element.options.className || [];
+        if (Array.isArray(rootClasses)) {
+            rootClasses.push(getClass('slider--range'));
+        }
+        else {
+            schema.element.options.className = `${rootClasses} ${getClass('slider--range')}`.trim();
+        }
+        const containerChildren = schema.element.children.container.children;
+        containerChildren.secondHandle = {
+            name: 'secondHandle',
+            creator: createElement,
+            options: {
+                tag: 'div',
+                className: getClass('slider-handle'),
+                attributes: {
+                    role: 'slider',
+                    'aria-valuemin': String(min),
+                    'aria-valuemax': String(max),
+                    'aria-valuenow': String(secondValue),
+                    'aria-orientation': 'horizontal',
+                    tabindex: isDisabled ? '-1' : '0',
+                    'aria-disabled': isDisabled ? 'true' : 'false',
+                    'data-value': String(secondValue),
+                    'data-handle-index': '1'
+                },
+                style: {
+                    left: `${secondValuePercent}%`
+                }
+            }
+        };
+        containerChildren.secondValueBubble = {
+            name: 'secondValueBubble',
+            creator: createElement,
+            options: {
+                tag: 'div',
+                className: getClass('slider-value'),
+                attributes: {
+                    'aria-hidden': 'true',
+                    'data-handle-index': '1'
+                },
+                text: formatter(secondValue),
+                style: {
+                    left: `${secondValuePercent}%`
+                }
+            }
+        };
+        return {
+            ...component,
+            schema
+        };
+    }
+    catch (error) {
+        console.warn('Error enhancing structure with range functionality:', error);
+        return component;
+    }
+};

package/dist/components/slider/features/states.d.ts

@@ -1,4 +1,4 @@
-import { SliderConfig } from "../types";
+import { SliderConfig } from "../types.js";
 /**
  * Add state management features to slider component
  * Combines appearance and disabled functionality into a single feature

package/dist/components/slider/features/states.js

@@ -0,0 +1,119 @@
+import { SLIDER_COLORS } from "../types.js";
+import { SLIDER_SIZES } from "../constants.js";
+export const withStates = (config) => (component) => {
+    const handle = component.handle ?? component.structure?.handle;
+    const secondHandle = component.secondHandle ?? component.structure?.secondHandle;
+    const isDisabled = config.disabled === true;
+    let initialization = null;
+    if (isDisabled) {
+        initialization = setTimeout(() => {
+            disableComponent();
+        }, 0);
+    }
+    function disableComponent() {
+        component.element.classList.add(`${component.getClass("slider")}--disabled`);
+        component.element.setAttribute("aria-disabled", "true");
+        if (handle) {
+            handle.tabIndex = -1;
+            handle.setAttribute("aria-disabled", "true");
+        }
+        if (config.range && secondHandle) {
+            secondHandle.tabIndex = -1;
+            secondHandle.setAttribute("aria-disabled", "true");
+        }
+        if (component.renderTracks) {
+            component.renderTracks();
+        }
+    }
+    function enableComponent() {
+        component.element.classList.remove(`${component.getClass("slider")}--disabled`);
+        component.element.setAttribute("aria-disabled", "false");
+        if (handle) {
+            handle.tabIndex = 0;
+            handle.setAttribute("aria-disabled", "false");
+        }
+        if (config.range && secondHandle) {
+            secondHandle.tabIndex = 0;
+            secondHandle.setAttribute("aria-disabled", "false");
+        }
+        if (component.renderTracks) {
+            component.renderTracks();
+        }
+    }
+    function getActiveColor() {
+        return (Object.values(SLIDER_COLORS).find((colorName) => component.element.classList.contains(`${component.getClass("slider")}--${colorName}`)) || SLIDER_COLORS.PRIMARY);
+    }
+    function getActiveSize() {
+        const sizeKeys = Object.keys(SLIDER_SIZES);
+        const foundKey = sizeKeys.find((sizeKey) => component.element.classList.contains(`${component.getClass("slider")}--${sizeKey.toLowerCase()}`));
+        return foundKey || "XS";
+    }
+    if (component.lifecycle) {
+        const originalDestroy = component.lifecycle.destroy;
+        component.lifecycle.destroy = () => {
+            if (initialization !== null)
+                clearTimeout(initialization);
+            originalDestroy.call(component.lifecycle);
+        };
+    }
+    return Object.assign(component, {
+        disabled: {
+            enable() {
+                enableComponent();
+                return this;
+            },
+            disable() {
+                disableComponent();
+                return this;
+            },
+            isDisabled() {
+                return component.element.classList.contains(`${component.getClass("slider")}--disabled`);
+            },
+        },
+        appearance: {
+            setColor(color) {
+                Object.values(SLIDER_COLORS).forEach((colorName) => {
+                    component.element.classList.remove(`${component.getClass("slider")}--${colorName}`);
+                });
+                if (color !== SLIDER_COLORS.PRIMARY) {
+                    component.element.classList.add(`${component.getClass("slider")}--${color}`);
+                }
+                return this;
+            },
+            getColor() {
+                return getActiveColor();
+            },
+            setSize(size) {
+                const sizeKeys = Object.keys(SLIDER_SIZES);
+                sizeKeys.forEach((sizeKey) => {
+                    component.element.classList.remove(`${component.getClass("slider")}--${sizeKey.toLowerCase()}`);
+                });
+                let sizeKey;
+                if (typeof size === "string" && size in SLIDER_SIZES) {
+                    sizeKey = size;
+                }
+                else if (typeof size === "number") {
+                    const entry = Object.entries(SLIDER_SIZES).find(([, value]) => value === size);
+                    sizeKey = entry ? entry[0] : "XS";
+                }
+                else {
+                    sizeKey = "XS";
+                }
+                component.element.classList.add(`${component.getClass("slider")}--${sizeKey.toLowerCase()}`);
+                return this;
+            },
+            getSize() {
+                return getActiveSize();
+            },
+            showTicks(show) {
+                config.ticks = show;
+                component.renderTracks?.();
+                return this;
+            },
+            showCurrentValue(show) {
+                config.showValue = show;
+                return this;
+            },
+        },
+    });
+};

package/dist/components/slider/features/tracks.d.ts

@@ -0,0 +1,13 @@
+import { SliderConfig } from "../types.js";
+import { SliderSize } from "../constants.js";
+export declare const getTrackHeight: (size?: SliderSize) => number;
+/**
+ * Gets the handle height based on the slider size
+ */
+export declare const getHandleHeight: (size?: SliderSize) => number;
+/**
+ * Gets the external track radius based on the slider size
+ */
+export declare const getExternalTrackRadius: (size?: SliderSize) => number;
+/** Decorative tracks and ticks. Handles and controller retain interaction ownership. */
+export declare const withTracks: (config: SliderConfig) => (component: any) => any;