material 1.0.4 → 3.0.0-next.0

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

@@ -0,0 +1,379 @@
+import { SLIDER_EVENTS } from "../types.js";
+import { arrowSign, getAxis, isRtl } from "./axis.js";
+import { activeElementOf } from "../../../core/dom/focus.js";
+const clientXOf = (e) => "touches" in e ? e.touches[0].clientX : e.clientX;
+const clientYOf = (e) => "touches" in e ? e.touches[0].clientY : e.clientY;
+export const createHandlers = (config, state, uiRenderer, eventHelpers) => {
+    const components = state.component.components || {};
+    const component = state.component;
+    const pointerOf = config.orientation === "vertical" ? clientYOf : clientXOf;
+    const rangeBounds = (isSecondHandle) => {
+        if (!config.range || state.secondValue === null)
+            return [state.min, state.max];
+        return isSecondHandle ? [state.value, state.max] : [state.min, state.secondValue];
+    };
+    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");
+            state.component.element
+                .querySelectorAll(`.${focusClass}`)
+                .forEach((el) => {
+                el.classList.remove(focusClass);
+            });
+            const active = activeElementOf(state.component.element);
+            if (active &&
+                state.component.element.contains(active) &&
+                active.classList.contains(state.component.getClass("slider__handle"))) {
+                active.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 = pointerOf(e);
+        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 = pointerOf(e);
+            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 = pointerOf(e);
+        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 = pointerOf(e);
+            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) {
+                const [low, high] = rangeBounds(isSecondHandle);
+                const clamped = Math.min(high, Math.max(low, newValue));
+                if (isSecondHandle)
+                    state.secondValue = clamped;
+                else
+                    state.value = clamped;
+            }
+            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;
+        if (newValue === null)
+            return;
+        const stepSize = e.shiftKey ? step * 10 : step;
+        if (e.key === "Tab")
+            return;
+        const axis = getAxis(config, isRtl(state.component.element));
+        const sign = arrowSign(axis);
+        const intervals = Math.max(1, Math.floor((state.max - state.min) / step));
+        const page = Math.min(10, Math.max(1, Math.floor(intervals / 10))) * step;
+        const along = axis.vertical ? ["ArrowUp", "ArrowDown"] : ["ArrowRight", "ArrowLeft"];
+        let target;
+        if (e.key === along[0])
+            target = newValue + sign * stepSize;
+        else if (e.key === along[1])
+            target = newValue - sign * stepSize;
+        else if (e.key === "ArrowUp" || e.key === "ArrowRight")
+            target = newValue + stepSize;
+        else if (e.key === "ArrowDown" || e.key === "ArrowLeft")
+            target = newValue - stepSize;
+        else if (e.key === "PageUp")
+            target = newValue + (axis.vertical ? sign : 1) * page;
+        else if (e.key === "PageDown")
+            target = newValue - (axis.vertical ? sign : 1) * page;
+        else if (e.key === "Home")
+            target = state.min;
+        else if (e.key === "End")
+            target = state.max;
+        else
+            return;
+        e.preventDefault();
+        const [low, high] = rangeBounds(isSecondHandle);
+        newValue = Math.min(high, Math.max(low, target));
+        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();
+        }
+        if (!currentHandle)
+            return;
+        lastFocusedHandle = currentHandle;
+        currentHandle.classList.add(`${state.component.getClass("slider__handle")}--focused`);
+        showActiveBubble(isSecondHandle ? secondValueBubble : valueBubble);
+        state.activeBubble = isSecondHandle ? secondValueBubble : valueBubble;
+        render();
+        triggerEvent(SLIDER_EVENTS.FOCUS, e);
+    };
+    const handleBlur = (e, isSecondHandle = false) => {
+        const handleElement = isSecondHandle ? secondHandle : handle;
+        if (!handleElement)
+            return;
+        handleElement.classList.remove(`${state.component.getClass("slider__handle")}--focused`);
+        render();
+        const relatedTarget = e.relatedTarget;
+        const otherHandle = isSecondHandle ? handle : secondHandle;
+        if (!relatedTarget || relatedTarget !== otherHandle) {
+            hideActiveBubble(isSecondHandle ? secondValueBubble : valueBubble, 200);
+        }
+        triggerEvent(SLIDER_EVENTS.BLUR, e);
+    };
+    const listenersFor = (isSecondHandle) => ({
+        press: (e) => handleHandleMouseDown(e, isSecondHandle),
+        keydown: (e) => handleKeyDown(e, isSecondHandle),
+        focus: (e) => handleFocus(e, isSecondHandle),
+        blur: (e) => handleBlur(e, isSecondHandle),
+    });
+    const handleListeners = listenersFor(false);
+    const secondHandleListeners = listenersFor(true);
+    const attach = (element, listeners) => {
+        element.addEventListener("mousedown", listeners.press);
+        element.addEventListener("touchstart", listeners.press, { passive: true });
+        element.addEventListener("keydown", listeners.keydown);
+        element.addEventListener("focus", listeners.focus);
+        element.addEventListener("blur", listeners.blur);
+    };
+    const detach = (element, listeners) => {
+        element.removeEventListener("mousedown", listeners.press);
+        element.removeEventListener("touchstart", listeners.press);
+        element.removeEventListener("keydown", listeners.keydown);
+        element.removeEventListener("focus", listeners.focus);
+        element.removeEventListener("blur", listeners.blur);
+    };
+    const setupEventListeners = () => {
+        if (!handle || !container) {
+            console.warn("Cannot set up event listeners: missing container or handle");
+            return;
+        }
+        container.addEventListener("mousedown", handleTrackMouseDown);
+        container.addEventListener("touchstart", handleTrackMouseDown, {
+            passive: true,
+        });
+        attach(handle, handleListeners);
+        if (config.range && secondHandle)
+            attach(secondHandle, secondHandleListeners);
+    };
+    const cleanupEventListeners = () => {
+        if (!state.component)
+            return;
+        if (container) {
+            container.removeEventListener("mousedown", handleTrackMouseDown);
+            container.removeEventListener("touchstart", handleTrackMouseDown);
+        }
+        if (handle)
+            detach(handle, handleListeners);
+        if (config.range && secondHandle)
+            detach(secondHandle, secondHandleListeners);
+        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

@@ -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/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

@@ -0,0 +1,14 @@
+import { SliderConfig } from "../types.js";
+/**
+ * Enhances structure definition with range slider elements
+ *
+ * @param config Slider configuration
+ * @returns Component enhancer that adds range slider to structure
+ */
+/** What this feature reads off the component it is handed. */
+interface RangeHost {
+    schema?: unknown;
+    getClass: (name: string) => string;
+}
+export declare const withRange: (config: SliderConfig) => <C extends RangeHost>(component: C) => C;
+export {};

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': config.orientation === 'vertical' ? 'vertical' : '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

@@ -0,0 +1,76 @@
+import { SliderColor } from "../types.js";
+import { SliderSize } from "../constants.js";
+import { SliderConfig } from "../types.js";
+/**
+ * Add state management features to slider component
+ * Combines appearance and disabled functionality into a single feature
+ *
+ * @param config Slider configuration
+ * @returns Component enhancer with state management features
+ */
+/** What this feature reads off the component it is handed. */
+interface StatesHost {
+    element: HTMLElement;
+    getClass: (name: string) => string;
+    handle?: HTMLElement;
+    secondHandle?: HTMLElement;
+    structure?: Record<string, HTMLElement | undefined>;
+    formFields?: (HTMLInputElement | null)[] | null;
+    renderTracks?: (state?: unknown) => void;
+}
+export declare const withStates: (config: SliderConfig) => <C extends StatesHost>(component: C) => C & {
+    disabled: {
+        /**
+         * Enables the component
+         * @returns Disabled manager for chaining
+         */
+        enable(): /*elided*/ any;
+        /**
+         * Disables the component
+         * @returns Disabled manager for chaining
+         */
+        disable(): /*elided*/ any;
+        /**
+         * Checks if component is disabled
+         * @returns True if disabled
+         */
+        isDisabled(): boolean;
+    };
+    appearance: {
+        /**
+         * Sets slider color
+         * @param color Color variant
+         * @returns Appearance manager for chaining
+         */
+        setColor(color: SliderColor): /*elided*/ any;
+        /**
+         * Gets slider color
+         * @returns Current color name
+         */
+        getColor(): "error" | "primary" | "secondary" | "tertiary";
+        /**
+         * Sets slider size
+         * @param size Size variant
+         * @returns Appearance manager for chaining
+         */
+        setSize(size: SliderSize): /*elided*/ any;
+        /**
+         * Gets slider size
+         * @returns Current size name
+         */
+        getSize(): "XS" | "S" | "M" | "L" | "XL";
+        /**
+         * Shows or hides tick marks
+         * @param show Whether to show ticks
+         * @returns Appearance manager for chaining
+         */
+        showTicks(show: boolean): /*elided*/ any;
+        /**
+         * Shows or hides current value bubble during interaction
+         * @param show Whether to show value bubble
+         * @returns Appearance manager for chaining
+         */
+        showCurrentValue(show: boolean): /*elided*/ any;
+    };
+};
+export {};

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

@@ -0,0 +1,114 @@
+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 setFieldsDisabled = (disabled) => {
+        for (const field of component.formFields ?? []) {
+            if (field)
+                field.disabled = disabled;
+        }
+    };
+    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");
+        }
+        setFieldsDisabled(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");
+        }
+        setFieldsDisabled(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 (config.disabled === true)
+        disableComponent();
+    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;
+            },
+        },
+    });
+};