material 1.0.4 → 3.0.0-next.1

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

@@ -0,0 +1,345 @@
+import { SLIDER_EVENTS } from "../types.js";
+import { defaultConfig } from "../config.js";
+import { createHandlers } from "./handlers.js";
+import { getExternalTrackRadius, trackPositionCss } from "./tracks.js";
+import { bubbleTransform, getAxis, handleTransform, isRtl, lengthOf, offsetAlong } from "./axis.js";
+import { setFormValue } from "../../../core/dom/form-value.js";
+export const withController = (config, getComponent) => (component) => {
+    const max = config.max !== undefined ? config.max : 100;
+    const state = {
+        component,
+        value: config.value !== undefined ? config.value : 0,
+        secondValue: config.secondValue !== undefined
+            ? config.secondValue
+            : config.range
+                ? max
+                : null,
+        min: config.min !== undefined ? config.min : 0,
+        max,
+        step: config.step !== undefined ? config.step : 1,
+        dragging: false,
+        pressed: false,
+        activeHandle: null,
+        activeBubble: null,
+        valueHideTimer: null,
+    };
+    const eventHelpers = {
+        triggerEvent(eventName, originalEvent = null) {
+            const eventData = {
+                slider: getComponent(),
+                value: state.value,
+                secondValue: state.secondValue,
+                originalEvent,
+                preventDefault: () => {
+                    eventData.defaultPrevented = true;
+                },
+                defaultPrevented: false,
+            };
+            state.component.emit(eventName, eventData);
+            return eventData;
+        },
+    };
+    const getComponents = () => {
+        const components = state.component.components || {};
+        const component = state.component;
+        return {
+            container: component.container || components.container,
+            handle: component.handle || components.handle,
+            valueBubble: component.valueBubble || components.valueBubble,
+            secondHandle: component.secondHandle || components.secondHandle,
+            secondValueBubble: component.secondValueBubble || components.secondValueBubble,
+            ...components,
+        };
+    };
+    const getPercentage = (value) => {
+        const range = state.max - state.min;
+        return range === 0 ? 0 : ((value - state.min) / range) * 100;
+    };
+    const axisNow = () => getAxis(config, isRtl(component.element));
+    const inset = () => config.ticks ? getExternalTrackRadius(component.getSize?.() ?? config.size) : 0;
+    const visualPosition = (percent) => trackPositionCss(Math.min(1, Math.max(0, percent / 100)), inset());
+    const getValueFromPosition = (position) => {
+        const components = getComponents();
+        const { handle, container } = components;
+        if (!handle || !container)
+            return state.min;
+        try {
+            const containerRect = container.getBoundingClientRect();
+            const range = state.max - state.min;
+            const edge = inset();
+            const axis = axisNow();
+            const span = lengthOf(containerRect, axis) - 2 * edge;
+            const along = offsetAlong(position, containerRect, axis) - edge;
+            const fraction = span > 0 ? Math.max(0, Math.min(1, along / span)) : 0;
+            return state.min + fraction * range;
+        }
+        catch (error) {
+            console.warn("Error calculating value from position:", error);
+            return state.min;
+        }
+    };
+    const roundToStep = (value) => {
+        const step = state.step;
+        if (!step || step <= 0)
+            return value;
+        const steps = Math.round((value - state.min) / step);
+        return state.min + steps * step;
+    };
+    const clamp = (value, min = state.min, max = state.max) => Math.min(Math.max(value, min), max);
+    const updateHandlePositions = () => {
+        const components = getComponents();
+        const { handle, container, valueBubble, secondHandle, secondValueBubble } = components;
+        if (!handle || !container)
+            return;
+        const axis = axisNow();
+        const place = (element, value, transform) => {
+            if (axis.vertical)
+                element.style.left = "";
+            if (axis.start === "right")
+                element.style.left = "auto";
+            if (axis.start === "left")
+                element.style.right = "";
+            element.style[axis.start] = visualPosition(getPercentage(value));
+            element.style.transform = transform;
+        };
+        place(handle, state.value, handleTransform(axis));
+        if (valueBubble)
+            place(valueBubble, state.value, bubbleTransform(axis));
+        if (config.range && secondHandle && state.secondValue !== null) {
+            place(secondHandle, state.secondValue, handleTransform(axis));
+            if (secondValueBubble)
+                place(secondValueBubble, state.secondValue, bubbleTransform(axis));
+        }
+        updateHandleAria(handle, state.value);
+        if (config.range && secondHandle && state.secondValue !== null) {
+            updateHandleAria(secondHandle, state.secondValue);
+            handle.setAttribute("aria-valuemax", String(state.secondValue));
+            secondHandle.setAttribute("aria-valuemin", String(state.value));
+        }
+    };
+    const updateHandleAria = (handleElement, value) => {
+        handleElement.setAttribute("aria-valuenow", String(value));
+        if (config.valueFormatter &&
+            config.valueFormatter !== defaultConfig.valueFormatter) {
+            handleElement.setAttribute("aria-valuetext", config.valueFormatter(value));
+        }
+    };
+    const updateValueBubbles = () => {
+        const components = getComponents();
+        const { valueBubble, secondValueBubble } = components;
+        if (!valueBubble)
+            return;
+        const formatter = config.valueFormatter || ((value) => value.toString());
+        valueBubble.textContent = formatter(state.value);
+        if (config.range && secondValueBubble && state.secondValue !== null) {
+            secondValueBubble.textContent = formatter(state.secondValue);
+        }
+    };
+    const showValueBubble = (bubbleElement, show) => {
+        if (!bubbleElement || !config.showValue)
+            return;
+        const bubbleClass = state.component.getClass("slider__value");
+        bubbleElement.classList[show ? "add" : "remove"](`${bubbleClass}--visible`);
+    };
+    const generateTicks = () => {
+    };
+    const updateTicks = () => {
+    };
+    const SETTLE_MS = 450;
+    let rendered = null;
+    let settleTimer = null;
+    const settle = () => {
+        const settling = component.getClass("slider--settling");
+        const changed = rendered !== null &&
+            (rendered.value !== state.value || rendered.secondValue !== state.secondValue);
+        rendered = { value: state.value, secondValue: state.secondValue };
+        if (state.dragging) {
+            if (settleTimer !== null)
+                clearTimeout(settleTimer);
+            settleTimer = null;
+            component.element.classList.remove(settling);
+            return;
+        }
+        if (!changed)
+            return;
+        component.element.classList.add(settling);
+        if (settleTimer !== null)
+            clearTimeout(settleTimer);
+        settleTimer = setTimeout(() => {
+            settleTimer = null;
+            component.element.classList.remove(settling);
+        }, SETTLE_MS);
+    };
+    const render = () => {
+        try {
+            settle();
+            updateHandlePositions();
+            updateValueBubbles();
+            if (component.formFields) {
+                setFormValue(component.formFields[0], String(state.value));
+                if (state.secondValue !== null) {
+                    setFormValue(component.formFields[1], String(state.secondValue));
+                }
+            }
+            if (component.renderTracks) {
+                component.renderTracks(state);
+            }
+        }
+        catch (error) {
+            console.warn("Error rendering UI:", error);
+        }
+    };
+    const uiRenderer = {
+        getPercentage,
+        getValueFromPosition,
+        roundToStep,
+        clamp,
+        showValueBubble,
+        updateUi: render,
+        render,
+    };
+    const handlers = createHandlers(config, state, uiRenderer, eventHelpers);
+    const initController = () => {
+        try {
+            const components = getComponents();
+            if (!components.handle) {
+                console.warn("Cannot initialize slider controller: missing required handle component");
+                return;
+            }
+            const { handle, secondHandle } = components;
+            if (handle) {
+                handle.setAttribute("aria-valuemin", String(state.min));
+                handle.setAttribute("aria-valuemax", String(state.max));
+                handle.setAttribute("aria-valuenow", String(state.value));
+                if (config.range && secondHandle && state.secondValue !== null) {
+                    secondHandle.setAttribute("aria-valuemin", String(state.min));
+                    secondHandle.setAttribute("aria-valuemax", String(state.max));
+                    secondHandle.setAttribute("aria-valuenow", String(state.secondValue));
+                }
+            }
+            handlers.setupEventListeners();
+            render();
+        }
+        catch (error) {
+            console.error("Error initializing slider controller:", error);
+        }
+    };
+    initController();
+    const layout = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => updateHandlePositions()) : null;
+    layout?.observe(component.element);
+    if (component.lifecycle) {
+        const originalDestroy = component.lifecycle.destroy || (() => { });
+        component.lifecycle.destroy = () => {
+            layout?.disconnect();
+            if (settleTimer !== null)
+                clearTimeout(settleTimer);
+            if (state.valueHideTimer !== null)
+                clearTimeout(state.valueHideTimer);
+            handlers.cleanupEventListeners();
+            originalDestroy.call(component.lifecycle);
+        };
+    }
+    return {
+        ...component,
+        slider: {
+            setValue(value, triggerEvent = false) {
+                const ceiling = config.range && state.secondValue !== null ? state.secondValue : state.max;
+                const newValue = clamp(roundToStep(clamp(value, state.min, state.max)), state.min, ceiling);
+                state.value = newValue;
+                render();
+                if (triggerEvent) {
+                    eventHelpers.triggerEvent(SLIDER_EVENTS.CHANGE);
+                }
+                return this;
+            },
+            getValue() {
+                return state.value;
+            },
+            setSecondValue(value, triggerEvent = false) {
+                if (!config.range)
+                    return this;
+                const newValue = clamp(roundToStep(clamp(value, state.min, state.max)), state.value, state.max);
+                state.secondValue = newValue;
+                render();
+                if (triggerEvent) {
+                    eventHelpers.triggerEvent(SLIDER_EVENTS.CHANGE);
+                }
+                return this;
+            },
+            getSecondValue() {
+                return config.range ? state.secondValue : null;
+            },
+            setMin(min) {
+                state.min = min;
+                const components = getComponents();
+                if (components.handle) {
+                    components.handle.setAttribute("aria-valuemin", String(min));
+                }
+                if (config.range && components.secondHandle) {
+                    components.secondHandle.setAttribute("aria-valuemin", String(min));
+                }
+                if (state.value < min)
+                    state.value = min;
+                if (config.range &&
+                    state.secondValue !== null &&
+                    state.secondValue < min) {
+                    state.secondValue = min;
+                }
+                if (config.ticks || config.tickLabels) {
+                    generateTicks();
+                }
+                render();
+                return this;
+            },
+            getMin() {
+                return state.min;
+            },
+            setMax(max) {
+                state.max = max;
+                const components = getComponents();
+                if (components.handle) {
+                    components.handle.setAttribute("aria-valuemax", String(max));
+                }
+                if (config.range && components.secondHandle) {
+                    components.secondHandle.setAttribute("aria-valuemax", String(max));
+                }
+                if (state.value > max)
+                    state.value = max;
+                if (config.range &&
+                    state.secondValue !== null &&
+                    state.secondValue > max) {
+                    state.secondValue = max;
+                }
+                if (config.ticks || config.tickLabels) {
+                    generateTicks();
+                }
+                render();
+                return this;
+            },
+            getMax() {
+                return state.max;
+            },
+            setStep(step) {
+                state.step = step;
+                render();
+                component.element.classList[step > 0 ? "add" : "remove"](`${component.getClass("slider")}--discrete`);
+                if (config.ticks || config.tickLabels) {
+                    generateTicks();
+                    updateTicks();
+                }
+                return this;
+            },
+            getStep() {
+                return state.step;
+            },
+            regenerateTicks() {
+                render();
+                return this;
+            },
+            updateUi() {
+                render();
+                return this;
+            },
+        },
+    };
+};

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

@@ -0,0 +1,22 @@
+import { SliderConfig } from "../types.js";
+import { ElementComponent } from "../../../core/compose/component.js";
+/**
+ * Creates the inner slider DOM structure using optimized createElement
+ * This works alongside withElement to create slider-specific inner elements
+ *
+ * @param config Slider configuration
+ * @returns Component enhancement function
+ */
+export declare const withDom: (config: SliderConfig) => <T extends ElementComponent>(component: T) => T & {
+    container: HTMLElement;
+    handle: HTMLElement;
+    valueBubble: HTMLElement;
+    secondHandle?: HTMLElement;
+    secondValueBubble?: HTMLElement;
+    formFields: (HTMLInputElement | null)[] | null;
+    getContainer: () => HTMLElement;
+    getHandle: () => HTMLElement;
+    getValueBubble: () => HTMLElement;
+    getSecondHandle?: () => HTMLElement | null;
+    getSecondValueBubble?: () => HTMLElement | null;
+};

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

@@ -0,0 +1,124 @@
+import { createElement } from "../../../core/dom/create.js";
+import { setStyles } from "../../../core/dom/utils.js";
+import { createFormValue } from "../../../core/dom/form-value.js";
+export const withDom = (config) => (component) => {
+    const getClass = (className) => component.getClass(className);
+    const min = config.min || 0;
+    const max = config.max || 100;
+    const value = config.value !== undefined ? config.value : min;
+    const isDisabled = config.disabled === true;
+    const formatter = config.valueFormatter || ((val) => val.toString());
+    const valuePercent = ((value - min) / (max - min)) * 100;
+    const container = createElement({
+        tag: "div",
+        className: getClass("slider__container"),
+        container: component.element,
+    });
+    setStyles(container, {
+        position: "relative",
+    });
+    const label = config.label || "";
+    const handleLabel = config.range && label ? `${label} minimum` : label;
+    const secondHandleLabel = label ? `${label} maximum` : "";
+    const handleAttributes = {
+        role: "slider",
+        "aria-valuemin": String(min),
+        "aria-valuemax": String(max),
+        "aria-valuenow": String(value),
+        "aria-orientation": config.orientation === "vertical" ? "vertical" : "horizontal",
+        tabindex: isDisabled ? "-1" : "0",
+        "aria-disabled": isDisabled ? "true" : "false",
+        "data-value": String(value),
+        "data-handle-index": "0",
+    };
+    if (handleLabel) {
+        handleAttributes["aria-label"] = handleLabel;
+    }
+    const handle = createElement({
+        tag: "div",
+        className: getClass("slider__handle"),
+        attributes: handleAttributes,
+        container: container,
+    });
+    setStyles(handle, {
+        left: `${valuePercent}%`,
+    });
+    const valueBubble = createElement({
+        tag: "div",
+        className: getClass("slider__value"),
+        attributes: {
+            "aria-hidden": "true",
+            "data-handle-index": "0",
+        },
+        text: formatter(value),
+        container: container,
+    });
+    setStyles(valueBubble, {
+        left: `${valuePercent}%`,
+    });
+    let secondHandle;
+    let secondValueBubble;
+    if (config.range) {
+        const secondValue = config.secondValue !== undefined ? config.secondValue : max;
+        const secondValuePercent = ((secondValue - min) / (max - min)) * 100;
+        const secondHandleAttributes = {
+            role: "slider",
+            "aria-valuemin": String(min),
+            "aria-valuemax": String(max),
+            "aria-valuenow": String(secondValue),
+            "aria-orientation": config.orientation === "vertical" ? "vertical" : "horizontal",
+            tabindex: isDisabled ? "-1" : "0",
+            "aria-disabled": isDisabled ? "true" : "false",
+            "data-value": String(secondValue),
+            "data-handle-index": "1",
+        };
+        if (secondHandleLabel) {
+            secondHandleAttributes["aria-label"] = secondHandleLabel;
+        }
+        secondHandle = createElement({
+            tag: "div",
+            className: getClass("slider__handle"),
+            attributes: secondHandleAttributes,
+            container: container,
+        });
+        setStyles(secondHandle, {
+            left: `${secondValuePercent}%`,
+        });
+        secondValueBubble = createElement({
+            tag: "div",
+            className: getClass("slider__value"),
+            attributes: {
+                "aria-hidden": "true",
+                "data-handle-index": "1",
+            },
+            text: formatter(secondValue),
+            container: container,
+        });
+        setStyles(secondValueBubble, {
+            left: `${secondValuePercent}%`,
+        });
+    }
+    const name = config.name;
+    const formFields = name
+        ? [
+            createFormValue(component.element, name, String(value), isDisabled),
+            config.range
+                ? createFormValue(component.element, `${name}-end`, String(config.secondValue ?? max), isDisabled)
+                : null,
+        ]
+        : null;
+    return {
+        ...component,
+        container,
+        handle,
+        valueBubble,
+        secondHandle,
+        secondValueBubble,
+        formFields,
+        getContainer: () => container,
+        getHandle: () => handle,
+        getValueBubble: () => valueBubble,
+        getSecondHandle: () => secondHandle || null,
+        getSecondValueBubble: () => secondValueBubble || null,
+    };
+};

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

@@ -0,0 +1,16 @@
+import { SliderConfig, SliderEventHelpers, SliderState, SliderPointerEvent, SliderUiRenderer } from "../types.js";
+export declare const createHandlers: (config: SliderConfig, state: SliderState, uiRenderer: Partial<SliderUiRenderer>, eventHelpers: SliderEventHelpers) => {
+    handleHandleMouseDown: (e: SliderPointerEvent, isSecondHandle?: boolean) => void;
+    handleTrackMouseDown: (e: SliderPointerEvent) => void;
+    handleMouseMove: (e: SliderPointerEvent) => void;
+    handleMouseUp: (e: SliderPointerEvent) => void;
+    handleKeyDown: (e: KeyboardEvent, isSecondHandle?: boolean) => void;
+    handleFocus: (e: FocusEvent, isSecondHandle?: boolean) => void;
+    handleBlur: (e: FocusEvent, isSecondHandle?: boolean) => void;
+    setupEventListeners: () => void;
+    cleanupEventListeners: () => void;
+    showActiveBubble: (bubble: HTMLElement | null) => void;
+    hideActiveBubble: (bubble: HTMLElement | null, delay?: number) => void;
+    hideAllBubbles: () => void;
+    clearKeyboardFocus: () => void;
+};