material 1.0.4 → 3.0.0-next.1

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

@@ -0,0 +1,48 @@
+import { SliderConfig, SliderColor } 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;
+export declare const getExternalTrackRadius: (size?: SliderSize) => number;
+/**
+ * Where a value sits along a track `width` wide, from its fraction of the range.
+ * A continuous slider spans the whole track, so its ends meet the rounded corners; a
+ * discrete one puts its interior steps on a scale inset by a corner radius at each
+ * end, while the first and last steps still reach the edges (Slider.kt drawTrack:
+ * `sliderValueEnd`, `isEndOnFirstOrLastStep`). `inset` is 0 for a continuous slider.
+ */
+export declare const trackPosition: (fraction: number, width: number, inset: number) => number;
+/** The same position as CSS, so a handle stays in place when the track resizes. */
+export declare const trackPositionCss: (fraction: number, inset: number) => string;
+interface VisualState {
+    value: number;
+    secondValue: number | null;
+    min: number;
+    max: number;
+    step: number;
+    pressed?: boolean;
+    activeHandle?: string | null;
+}
+/** Decorative tracks and ticks. Handles and controller retain interaction ownership. */
+/** What this feature reads off the component it is handed. */
+interface TracksHost {
+    getClass: (name: string) => string;
+    element: HTMLElement;
+    container: HTMLElement;
+    handle?: HTMLElement;
+    secondHandle?: HTMLElement;
+    appearance: {
+        setColor: (color: SliderColor) => void;
+    };
+    getSize?: () => SliderSize;
+    setSize?: (size: SliderSize) => void;
+    renderTracks?: (state?: VisualState) => void;
+    setInsetIcon?: (icon: string, atMin?: string) => void;
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+export declare const withTracks: (config: SliderConfig) => <C extends TracksHost>(component: C) => C;
+export {};

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

@@ -0,0 +1,287 @@
+import { SLIDER_SIZES, SLIDER_MEASUREMENTS } from "../constants.js";
+import { PREFIX } from "../../../core/config.js";
+import { cornerToken } from "../../../core/theme/shape.js";
+import { sliderSizeClass } from "../config.js";
+import { setHTML } from "../../../core/dom/html.js";
+import { getAxis, isRtl, lengthOf } from "./axis.js";
+export const getTrackHeight = (size) => {
+    if (typeof size === "number") {
+        return Math.max(size, SLIDER_SIZES.XS);
+    }
+    if (typeof size === "string" && size in SLIDER_SIZES) {
+        return SLIDER_SIZES[size];
+    }
+    return SLIDER_SIZES.XS;
+};
+export const getHandleHeight = (size) => {
+    const trackHeight = getTrackHeight(size);
+    if (trackHeight <= SLIDER_SIZES.S) {
+        return SLIDER_MEASUREMENTS.SMALL_HANDLE_HEIGHT;
+    }
+    return trackHeight + SLIDER_MEASUREMENTS.HANDLE_HEIGHT_OFFSET;
+};
+const TRACK_STEPS = { 8: "small", 12: "medium", 16: "large", 28: "extra-large" };
+export const getExternalTrackRadius = (size) => {
+    const trackHeight = getTrackHeight(size);
+    if (trackHeight <= SLIDER_SIZES.S)
+        return 8;
+    if (trackHeight <= SLIDER_SIZES.M)
+        return 12;
+    if (trackHeight <= SLIDER_SIZES.L)
+        return 16;
+    return 28;
+};
+export const trackPosition = (fraction, width, inset) => inset && fraction > 0 && fraction < 1 ? inset + fraction * (width - 2 * inset) : fraction * width;
+export const trackPositionCss = (fraction, inset) => inset && fraction > 0 && fraction < 1
+    ? `calc(${fraction * 100}% + ${inset * (1 - 2 * fraction)}px)`
+    : `${fraction * 100}%`;
+const A0 = { f: 0, p: 0 };
+const A1 = { f: 1, p: 0 };
+const ap = (f, p) => ({ f, p });
+const add = (a, b) => ap(a.f + b.f, a.p + b.p);
+const sub = (a, b) => ap(a.f - b.f, a.p - b.p);
+const px = (p) => ap(0, p);
+const alongCss = (a, unit = "%") => {
+    const pct = Math.round(a.f * 1e8) / 1e6;
+    const p = Math.round(a.p * 1e6) / 1e6;
+    if (pct === 0)
+        return `${p}px`;
+    if (p === 0)
+        return `${pct}${unit}`;
+    return `calc(${pct}${unit} ${p < 0 ? "-" : "+"} ${Math.abs(p)}px)`;
+};
+const INSET_ICON_PADDING = 10;
+const HANDLE_WIDTH = 4;
+const NARROW_HANDLE_WIDTH = 2;
+export const withTracks = (config) => (component) => {
+    const container = component.container;
+    const element = (className, parent) => {
+        const node = document.createElement("div");
+        node.className = component.getClass(className);
+        parent.append(node);
+        return node;
+    };
+    let axis = getAxis(config);
+    const opposite = { left: "right", right: "left", top: "bottom", bottom: "top" };
+    const at = (node, position) => {
+        node.style[opposite[axis.start]] = "";
+        node.style[axis.start] = position;
+    };
+    const visual = element("slider__visual", container);
+    visual.setAttribute("aria-hidden", "true");
+    const track = element("slider__track", visual);
+    const segments = Array.from({ length: 3 }, () => element("slider__segment", track));
+    const ticks = [element("slider__ticks", visual), element("slider__ticks", visual)];
+    ticks[1].classList.add(component.getClass("slider__ticks--active"));
+    const dots = [element("slider__dot", visual), element("slider__dot", visual)];
+    dots[0].classList.add(component.getClass("slider__dot--start"));
+    const insetIcon = element("slider__inset-icon", visual);
+    insetIcon.hidden = true;
+    let insetMarkup = { icon: config.insetIcon ?? "", atMin: config.insetIconAtMin ?? "" };
+    let shownMarkup = null;
+    let destroyed = false;
+    let size = config.size ?? "XS";
+    let state = {
+        value: config.value ?? 0, secondValue: config.secondValue ?? null,
+        min: config.min ?? 0, max: config.max ?? 100, step: config.step ?? 1,
+    };
+    const narrowed = (which) => {
+        const handle = which === "first" ? component.handle : component.secondHandle;
+        const pressed = !!state.pressed && (state.activeHandle === which || (!config.range && which === "first"));
+        return pressed || !!handle?.classList.contains(component.getClass("slider__handle--focused"));
+    };
+    const render = (next) => {
+        if (destroyed)
+            return;
+        if (next)
+            state = { ...next };
+        axis = getAxis(config, isRtl(component.element));
+        const width = lengthOf(container.getBoundingClientRect(), axis) || 0;
+        const corner = getExternalTrackRadius(size);
+        const inset = config.ticks ? corner : 0;
+        const fraction = (value) => Math.min(1, Math.max(0, state.max === state.min ? 0 : (value - state.min) / (state.max - state.min)));
+        const atValue = (value) => {
+            const f = fraction(value);
+            return ap(f, inset && f > 0 && f < 1 ? inset * (1 - 2 * f) : 0);
+        };
+        const cmp = (a, b) => width > 0 ? a.f * width + a.p - (b.f * width + b.p) : (a.f - b.f) || (a.p - b.p);
+        const gapOf = (which) => px((narrowed(which) ? NARROW_HANDLE_WIDTH : HANDLE_WIDTH) / 2 + SLIDER_MEASUREMENTS.HANDLE_GAP);
+        const firstGap = gapOf("first");
+        const secondGap = gapOf("second");
+        const first = atValue(state.value);
+        const second = atValue(state.secondValue ?? state.max);
+        let parts;
+        let activeStart, activeEnd;
+        if (config.centered) {
+            const zero = atValue(Math.min(state.max, Math.max(state.min, 0)));
+            if (cmp(first, zero) >= 0) {
+                activeStart = zero;
+                activeEnd = first;
+                parts = [[A0, sub(zero, firstGap), false], [zero, sub(first, firstGap), true], [add(first, firstGap), A1, false]];
+            }
+            else {
+                activeStart = first;
+                activeEnd = zero;
+                parts = [[A0, sub(first, firstGap), false], [add(first, firstGap), zero, true], [add(zero, firstGap), A1, false]];
+            }
+        }
+        else if (config.range && state.secondValue !== null) {
+            const lowIsFirst = cmp(first, second) <= 0;
+            const low = lowIsFirst ? first : second;
+            const high = lowIsFirst ? second : first;
+            const lowGap = lowIsFirst ? firstGap : secondGap;
+            const highGap = lowIsFirst ? secondGap : firstGap;
+            activeStart = low;
+            activeEnd = high;
+            parts = [[A0, sub(low, lowGap), false], [add(low, lowGap), sub(high, highGap), true], [add(high, highGap), A1, false]];
+        }
+        else {
+            activeStart = A0;
+            activeEnd = first;
+            parts = [[A0, A0, false], [A0, sub(first, firstGap), true], [add(first, firstGap), A1, false]];
+        }
+        const standard = !config.centered && !(config.range && state.secondValue !== null);
+        const short = (len) => width > 0 ? len.f * width + len.p <= corner : len.f < 0 || (len.f === 0 && len.p <= corner);
+        parts.forEach((part, index) => {
+            const meetsEnd = index !== 1 || standard;
+            if (meetsEnd && short(sub(part[1], part[0])))
+                part[1] = part[0];
+        });
+        segments.forEach((segment, index) => {
+            const [start, end, active] = parts[index] ?? [A0, A0, false];
+            const len = sub(end, start);
+            const drawn = (width > 0 ? len.f * width + len.p < 0 : len.f < 0 || (len.f === 0 && len.p < 0)) ? A0 : len;
+            at(segment, alongCss(start));
+            segment.style[axis.size] = alongCss(drawn);
+            segment.classList.toggle(component.getClass("slider__segment--active"), active);
+        });
+        dots[0].hidden = !!config.ticks || standard || cmp(parts[0][1], parts[0][0]) <= 0;
+        dots[1].hidden = !!config.ticks || cmp(parts[2][1], parts[2][0]) <= 0;
+        at(dots[0], alongCss(px(corner - 2)));
+        at(dots[1], alongCss(ap(1, -(corner + 2))));
+        placeInsetIcon(parts, width);
+        const discrete = !!config.ticks && state.step > 0 && state.max > state.min;
+        ticks.forEach(tick => { tick.hidden = !discrete; });
+        if (discrete) {
+            const stepF = state.step / (state.max - state.min);
+            const repeat = `max(0.01px, ${alongCss(ap(stepF, -2 * inset * stepF))})`;
+            const offset = alongCss(ap(-stepF / 2, inset * (1 + stepF)), axis.vertical ? "cqh" : "cqw");
+            const tickAt = (value) => {
+                const f = fraction(value);
+                return ap(f, inset * (1 - 2 * f));
+            };
+            const last = tickAt(state.min + Math.floor((state.max - state.min) / state.step) * state.step);
+            const holes = [[sub(first, firstGap), add(first, firstGap)]];
+            if (config.range && state.secondValue !== null)
+                holes.push([sub(second, secondGap), add(second, secondGap)]);
+            const mask = (intervals) => {
+                const merged = [];
+                for (const [start, end] of [...intervals].sort((a, b) => cmp(a[0], b[0]))) {
+                    const previous = merged[merged.length - 1];
+                    if (previous && cmp(start, previous[1]) <= 0) {
+                        if (cmp(end, previous[1]) > 0)
+                            previous[1] = end;
+                    }
+                    else
+                        merged.push([start, end]);
+                }
+                const stops = merged.flatMap(([start, end]) => [`black ${alongCss(start)}`, `transparent ${alongCss(start)}`, `transparent ${alongCss(end)}`, `black ${alongCss(end)}`]);
+                const direction = { left: "to right", right: "to left", top: "to bottom", bottom: "to top" }[axis.start];
+                return stops.length ? `linear-gradient(${direction}, black 0px, ${stops.join(",")}, black 100%)` : "none";
+            };
+            ticks.forEach((tick, index) => {
+                tick.style.backgroundSize = axis.vertical ? `100% ${repeat}` : `${repeat} 100%`;
+                tick.style.backgroundPosition = axis.vertical
+                    ? `center ${axis.start} ${offset}`
+                    : `${axis.start} ${offset} center`;
+                tick.style.maskImage = mask(index === 0 ? [...holes, [sub(activeStart, px(2)), add(activeEnd, px(2))]] : holes);
+            });
+            const clip = (fromStart, fromEnd) => ({
+                left: `inset(0 ${fromEnd} 0 ${fromStart})`,
+                right: `inset(0 ${fromStart} 0 ${fromEnd})`,
+                top: `inset(${fromStart} 0 ${fromEnd} 0)`,
+                bottom: `inset(${fromEnd} 0 ${fromStart} 0)`,
+            })[axis.start];
+            const fromEnd = (edge) => `max(0px, calc(100% - ${alongCss(edge)}))`;
+            ticks[0].style.clipPath = clip("0px", fromEnd(add(last, px(2))));
+            ticks[1].style.clipPath = clip(`max(0px, ${alongCss(sub(activeStart, px(2)))})`, `max(0px, calc(100% - min(${alongCss(add(last, px(2)))}, ${alongCss(add(activeEnd, px(2)))})))`);
+        }
+    };
+    function placeInsetIcon(parts, width) {
+        const trackHeight = getTrackHeight(size);
+        const eligible = !config.range && !config.centered && trackHeight >= SLIDER_SIZES.M;
+        const markup = state.value <= state.min && insetMarkup.atMin ? insetMarkup.atMin : insetMarkup.icon;
+        const iconSize = trackHeight >= SLIDER_SIZES.XL ? 32 : 24;
+        const room = iconSize + 2 * INSET_ICON_PADDING;
+        const fits = (len) => width > 0 ? len.f * width + len.p >= room : len.f > 0 || (len.f === 0 && len.p >= room);
+        const onActive = fits(sub(parts[1][1], parts[1][0]));
+        const onInactive = !onActive && fits(sub(parts[2][1], parts[2][0]));
+        insetIcon.hidden = !eligible || !markup || (!onActive && !onInactive);
+        if (insetIcon.hidden)
+            return;
+        if (markup !== shownMarkup) {
+            setHTML(insetIcon, markup);
+            shownMarkup = markup;
+        }
+        insetIcon.style.width = insetIcon.style.height = `${iconSize}px`;
+        at(insetIcon, alongCss(add(onActive ? parts[1][0] : parts[2][0], px(INSET_ICON_PADDING))));
+        insetIcon.classList.toggle(component.getClass("slider__inset-icon--inactive"), onInactive);
+    }
+    component.setInsetIcon = (icon, atMin = "") => {
+        if (destroyed)
+            return;
+        insetMarkup = { icon, atMin };
+        render();
+    };
+    const setSize = (next) => {
+        if (destroyed)
+            return;
+        const previous = sliderSizeClass(size), current = sliderSizeClass(next);
+        if (previous)
+            component.element.classList.remove(previous);
+        if (current)
+            component.element.classList.add(current);
+        size = next;
+        const handleHeight = getHandleHeight(size);
+        container.style[axis.cross] = `${Math.max(handleHeight, SLIDER_MEASUREMENTS.MIN_HEIGHT)}px`;
+        track.style[axis.cross] = `${getTrackHeight(size)}px`;
+        track.style.borderRadius = cornerToken(TRACK_STEPS[getExternalTrackRadius(size)], getExternalTrackRadius(size), PREFIX);
+        for (const handle of [component.handle, component.secondHandle]) {
+            if (handle)
+                handle.style[axis.cross] = `${handleHeight}px`;
+        }
+        component.element.style.setProperty(`--${PREFIX}-slider-handle-height`, `${handleHeight}px`);
+        render();
+    };
+    component.renderTracks = render;
+    component.setSize = setSize;
+    component.getSize = () => size;
+    const setColor = component.appearance.setColor;
+    component.appearance.setColor = (color) => {
+        if (destroyed)
+            return;
+        setColor.call(component.appearance, color);
+        config.color = color;
+    };
+    setSize(size);
+    const resize = () => {
+        if (!destroyed)
+            render();
+    };
+    const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(resize) : null;
+    if (observer)
+        observer.observe(container);
+    else
+        window.addEventListener("resize", resize);
+    const destroy = component.lifecycle.destroy;
+    component.lifecycle.destroy = () => {
+        if (destroyed)
+            return;
+        destroyed = true;
+        observer?.disconnect();
+        if (!observer)
+            window.removeEventListener("resize", resize);
+        destroy.call(component.lifecycle);
+    };
+    return component;
+};

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

@@ -0,0 +1,2 @@
+export { default, default as createSlider } from "./slider.js";
+export type { SliderConfig, SliderComponent, SliderEvent, SliderEvents, } from "./types.js";

package/dist/components/slider/index.js

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

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

@@ -0,0 +1,19 @@
+import { SliderConfig, SliderComponent } from "./types.js";
+/**
+ * Creates a new Slider component
+ *
+ * Slider follows a clear architectural pattern:
+ * 1. Base component - Creates the foundation with event system
+ * 2. Feature enhancement - Adds specific capabilities (range, icons)
+ * 3. DOM creation - Creates DOM elements directly using optimized createElement
+ * 4. Track rendering - Uses decorative DOM and CSS alongside accessible handles
+ * 5. State management - Handles visual states and appearance
+ * 6. Controller - Manages behavior, events, and UI rendering
+ * 7. Lifecycle - Handles component lifecycle events
+ * 8. Public API - Exposes a clean, consistent API
+ *
+ * @param {SliderConfig} config - Slider configuration object
+ * @returns {SliderComponent} Slider component instance
+ */
+declare const createSlider: (config?: SliderConfig) => SliderComponent;
+export default createSlider;

package/dist/components/slider/slider.js

@@ -0,0 +1,27 @@
+import { pipe } from "../../core/compose/pipe.js";
+import { createBase, withElement } from "../../core/compose/component.js";
+import { withEvents, withLifecycle, withIcon, withTextLabel, } from "../../core/compose/features/index.js";
+import { withRange, withStates, withController, withTracks, withDom, } from "./features/index.js";
+import { withAPI } from "./api.js";
+import { createBaseConfig, getElementConfig, getApiConfig } from "./config.js";
+const createSlider = (config = {}) => {
+    const baseConfig = createBaseConfig(config);
+    try {
+        const component = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withRange(baseConfig), withDom(baseConfig), withTextLabel(baseConfig), withIcon(baseConfig), withLifecycle(), withStates(baseConfig), withTracks(baseConfig), withController(baseConfig, () => slider))(baseConfig);
+        const apiOptions = getApiConfig(component);
+        const slider = withAPI(apiOptions)(component);
+        if (baseConfig.on && typeof slider.on === "function") {
+            Object.entries(baseConfig.on).forEach(([event, handler]) => {
+                if (typeof handler === "function") {
+                    slider.on(event, handler);
+                }
+            });
+        }
+        return slider;
+    }
+    catch (error) {
+        console.error("Slider creation error:", error);
+        throw new Error(`Failed to create slider: ${error.message}`);
+    }
+};
+export default createSlider;