material 3.3.1 → 3.3.3

package/dist/components/slider/api.js

@@ -1,108 +0,0 @@
-export const withAPI = (options) => (component) => {
-    return {
-        ...component,
-        element: component.element,
-        setValue(value, triggerEvent = false) {
-            options.slider.setValue(value, triggerEvent);
-            return this;
-        },
-        getValue() {
-            return options.slider.getValue();
-        },
-        setSecondValue(value, triggerEvent = false) {
-            options.slider.setSecondValue(value, triggerEvent);
-            return this;
-        },
-        getSecondValue() {
-            return options.slider.getSecondValue();
-        },
-        setMin(min) {
-            options.slider.setMin(min);
-            return this;
-        },
-        getMin() {
-            return options.slider.getMin();
-        },
-        setMax(max) {
-            options.slider.setMax(max);
-            return this;
-        },
-        getMax() {
-            return options.slider.getMax();
-        },
-        setStep(step) {
-            options.slider.setStep(step);
-            return this;
-        },
-        getStep() {
-            return options.slider.getStep();
-        },
-        enable() {
-            options.disabled.enable();
-            return this;
-        },
-        disable() {
-            options.disabled.disable();
-            return this;
-        },
-        isDisabled() {
-            return options.disabled.isDisabled();
-        },
-        setColor(color) {
-            options.appearance.setColor(color);
-            return this;
-        },
-        getColor() {
-            return options.appearance.getColor();
-        },
-        setSize(size) {
-            options.appearance.setSize(size);
-            return this;
-        },
-        getSize() {
-            return options.appearance.getSize();
-        },
-        showTicks(show) {
-            options.appearance.showTicks(show);
-            return this;
-        },
-        showCurrentValue(show) {
-            options.appearance.showCurrentValue(show);
-            return this;
-        },
-        setLabel(text) {
-            if (options.text?.setText)
-                options.text.setText(text);
-            return this;
-        },
-        getLabel() {
-            return options.text?.getText ? options.text.getText() : "";
-        },
-        setInsetIcon(icon, atMin) {
-            options.insetIcon.setInsetIcon(icon, atMin);
-            return this;
-        },
-        setIcon(iconHtml) {
-            if (options.icon?.setIcon)
-                options.icon.setIcon(iconHtml);
-            return this;
-        },
-        getIcon() {
-            return options.icon?.getIcon ? options.icon.getIcon() : "";
-        },
-        on(event, handler) {
-            if (options.events?.on)
-                options.events.on(event, handler);
-            return this;
-        },
-        off(event, handler) {
-            if (options.events?.off)
-                options.events.off(event, handler);
-            return this;
-        },
-        destroy() {
-            if (options.lifecycle?.destroy)
-                options.lifecycle.destroy();
-        },
-    };
-};

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

@@ -1,379 +0,0 @@
-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/range.js

@@ -1,70 +0,0 @@
-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;
-    }
-};