forty-cdk 0.2.0 → 0.3.0

package/fesm2022/forty-cdk-slider.mjs

@@ -0,0 +1,803 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, DOCUMENT, model, input, computed, booleanAttribute, output, signal, DestroyRef, Directive, numberAttribute } from '@angular/core';
+import { createDefaults, FormUiControlBase, injectTextDirection, Collection, injectHiddenInput, snapToStep, registerHandle } from 'forty-cdk/core';
+
+const FOR_SLIDER_CONTEXT = new InjectionToken('FOR_SLIDER_CONTEXT');
+function injectSliderContext(piece) {
+    const ctx = inject(FOR_SLIDER_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/slider] ${piece} must be used inside a [forSlider] element.`);
+    }
+    return ctx;
+}
+
+/**
+ * Library fallback for slider defaults, read at the root injector when no
+ * consumer has called `provideForSliderDefaults`. Exported for the shared defaults
+ * contract spec; not re-exported from the primitive's public entry.
+ */
+const FOR_SLIDER_FALLBACK_DEFAULTS = {
+    largeStep: 10,
+};
+const { token, provideDefaults } = createDefaults('FOR_SLIDER_DEFAULTS', FOR_SLIDER_FALLBACK_DEFAULTS);
+/** Token holding the resolved slider defaults for the current scope. */
+const FOR_SLIDER_DEFAULTS = token;
+/**
+ * Configures forty-cdk slider defaults for this injector scope. Partial
+ * overrides inherit unspecified keys from the parent scope (or library
+ * defaults at the root).
+ */
+function provideForSliderDefaults(defaults = {}) {
+    return provideDefaults(defaults);
+}
+
+/**
+ * Headless implementation of the [WAI-ARIA Slider pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/)
+ * (single thumb) and [Slider (Multi-Thumb)](https://www.w3.org/WAI/ARIA/apg/patterns/slider-multi-thumb/)
+ * (range / N thumbs). Implements `FormValueControl<readonly number[]>` from
+ * `@angular/forms/signals` for `[formField]` auto-wiring.
+ *
+ * Selection is always modeled as `readonly number[]`:
+ * - 1 entry → single-thumb slider.
+ * - 2 entries → range slider.
+ * - N entries → multi-thumb slider.
+ *
+ * Values are kept clamped to `[min, max]` and snapped to `step` increments.
+ * In multi-thumb mode they're constrained between neighbors so thumbs can't
+ * cross (`minStepsBetweenThumbs` forces a minimum gap, in step units).
+ *
+ * The `model()` change emitter (`(valueChange)`) fires only on internal
+ * updates (drag, keyboard, track click), never on consumer writes via
+ * `[(value)]` — observe transitions without binding back.
+ *
+ * For trailing-edge work (network calls, undo entries) bind `(valueCommit)`
+ * instead — it fires once at the end of an interaction with the final value
+ * array, never per drag step.
+ */
+class ForSlider extends FormUiControlBase {
+    #host = inject(ElementRef);
+    #document = inject(DOCUMENT);
+    #defaults = inject(FOR_SLIDER_DEFAULTS);
+    /**
+     * Two-way bindable. Selected values, one per thumb. Single-thumb sliders
+     * keep one entry, range sliders two, multi-thumb N. Values must be sorted
+     * ascending for multi-thumb; thumb-by-thumb clamping keeps the order
+     * during interaction. Defaults to `[0]`; set an explicit `[(value)]`
+     * when `min` is non-zero.
+     */
+    value = model([0], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Minimum value. Falls back to `0` internally. A slider's bounds are scalar
+     * by the ARIA slider pattern, but since Signal Forms v22 `FormUiControl.min`
+     * is typed `NonNullable<TValue>` — an array for this control — so `min` and
+     * `max` are excluded from the `FormValueControl` `implements` clause, and
+     * the transform widens the write type to satisfy the `[formField]` template
+     * type-check (which pushes `readonly number[] | undefined`). The form never
+     * produces a `min`/`max` state for an array-valued field at runtime (the
+     * `min()`/`max()` validators only apply to numeric fields), so non-number
+     * writes normalize to `undefined`.
+     */
+    min = input(0, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: (value) => typeof value === 'number' ? value : undefined });
+    /**
+     * Maximum value. Falls back to `100` internally. Excluded from the
+     * `FormValueControl` `implements` clause and write-type-widened — see
+     * {@link min}.
+     */
+    max = input(100, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: (value) => typeof value === 'number' ? value : undefined });
+    /**
+     * Increment values snap to. Fractional steps (e.g. `0.1`) are supported: the
+     * snapped value is rounded to the step's decimal precision so float noise
+     * (`0.1 * 3`) can't spuriously emit `valueCommit` or leak into
+     * `aria-valuenow`.
+     */
+    step = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /**
+     * Step used for PageUp / PageDown. Defaults to 10× `step`. The default is
+     * read from `provideForSliderDefaults` for the surrounding scope.
+     */
+    largeStep = input(this.#defaults.largeStep, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "largeStep" }] : /* istanbul ignore next */ []));
+    /** Effective minimum (defaults `0` when input is unset). Exposed to children via context. */
+    minValue = computed(() => this.min() ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minValue" }] : /* istanbul ignore next */ []));
+    /** Effective maximum (defaults `100`). Exposed to children via context. */
+    maxValue = computed(() => this.max() ?? 100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /**
+     * Writing direction. When unset (default `null`), the inherited ambient
+     * direction is resolved from the nearest ancestor carrying a `dir` attribute
+     * (or `<html dir>`), defaulting to `'ltr'`. An explicit `[dir]` always wins.
+     * The resolved value is reflected to the host `dir` attribute and flips the
+     * horizontal increase direction in RTL.
+     */
+    _dirInput = input(null, { ...(ngDevMode ? { debugName: "_dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
+    dir = injectTextDirection(this._dirInput);
+    /**
+     * Visual inversion. Flips the mapping between value and screen position
+     * (e.g. horizontal LTR with `inverted=true`: max sits on the left).
+     * Keyboard semantics still target "toward max" with ArrowUp / ArrowRight
+     * (LTR), independent of visual flip.
+     */
+    inverted = input(false, { ...(ngDevMode ? { debugName: "inverted" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Multi-thumb only: minimum gap between adjacent thumbs, in step units.
+     * Default `0` (touch but never cross — non-passing per APG).
+     */
+    minStepsBetweenThumbs = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minStepsBetweenThumbs" }] : /* istanbul ignore next */ []));
+    /**
+     * Emitted at the end of a value-changing interaction — pointerup /
+     * pointercancel after a drag, or keyup after one or more keyboard
+     * adjustments — with the final value array. Use it to defer expensive work
+     * (network calls,
+     * history entries) to the trailing edge of the interaction instead of
+     * running it per step. Stays silent when nothing changed (e.g. press +
+     * release without movement, or a non-navigation key on a focused thumb).
+     */
+    valueCommit = output();
+    #thumbs = new Collection();
+    #trackEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#trackEl" }] : /* istanbul ignore next */ []));
+    #destroyRef = inject(DestroyRef);
+    #activeDragCleanups = new Set();
+    #interactionMutated = false;
+    #armedThumb = null;
+    fractions = computed(() => {
+        const min = this.minValue();
+        const max = this.maxValue();
+        const inv = this.inverted();
+        const span = max - min;
+        if (span <= 0) {
+            return this.value().map(() => 0);
+        }
+        return this.value().map((v) => {
+            const f = (v - min) / span;
+            const clamped = f < 0 ? 0 : f > 1 ? 1 : f;
+            return inv ? 1 - clamped : clamped;
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fractions" }] : /* istanbul ignore next */ []));
+    /**
+     * Range start fraction. Visual semantics: in single-thumb mode the range
+     * always grows from the min edge to the thumb (`0 → fraction[0]`); in
+     * multi-thumb mode it spans `min(values) → max(values)`. `inverted` is
+     * already baked into the fractions, so consumers can paint blindly.
+     */
+    rangeStart = computed(() => {
+        const fr = this.fractions();
+        if (fr.length === 0) {
+            return 0;
+        }
+        if (fr.length === 1) {
+            return Math.min(fr[0], this.inverted() ? 1 : 0);
+        }
+        return Math.min(...fr);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeStart" }] : /* istanbul ignore next */ []));
+    rangeEnd = computed(() => {
+        const fr = this.fractions();
+        if (fr.length === 0) {
+            return 0;
+        }
+        if (fr.length === 1) {
+            return Math.max(fr[0], this.inverted() ? 1 : 0);
+        }
+        return Math.max(...fr);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeEnd" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        const stringValues = computed(() => this.value().map((v) => String(v)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stringValues" }] : /* istanbul ignore next */ []));
+        injectHiddenInput({
+            name: this.name,
+            values: stringValues,
+            disabled: this.effectiveDisabled,
+        });
+        this.#destroyRef.onDestroy(() => {
+            for (const cleanup of this.#activeDragCleanups) {
+                cleanup();
+            }
+            this.#activeDragCleanups.clear();
+        });
+    }
+    setValueAt(index, raw) {
+        if (this.effectiveDisabled() || this.readonly()) {
+            return;
+        }
+        const current = this.value();
+        if (index < 0 || index >= current.length) {
+            return;
+        }
+        const next = this.#clampForIndex(current, index, raw);
+        if (next === current[index]) {
+            return;
+        }
+        const updated = current.slice();
+        updated[index] = next;
+        this.value.set(updated);
+        this.#interactionMutated = true;
+        this.#armedThumb = index;
+    }
+    bumpAt(index, key, large) {
+        if (this.effectiveDisabled() || this.readonly()) {
+            return;
+        }
+        const current = this.value();
+        if (index < 0 || index >= current.length) {
+            return;
+        }
+        const direction = this.#directionFor(key);
+        if (direction === 0) {
+            return;
+        }
+        const stepUnit = large ? this.largeStep() : this.step();
+        const target = current[index] + direction * stepUnit;
+        this.setValueAt(index, target);
+    }
+    setExtreme(index, which) {
+        if (this.effectiveDisabled() || this.readonly()) {
+            return;
+        }
+        this.setValueAt(index, which === 'min' ? this.minValue() : this.maxValue());
+    }
+    pointerToValue(clientX, clientY) {
+        const track = this.#trackEl();
+        const min = this.minValue();
+        const max = this.maxValue();
+        if (!track) {
+            return min;
+        }
+        const rect = track.getBoundingClientRect();
+        const horizontal = this.orientation() === 'horizontal';
+        let fraction;
+        if (horizontal) {
+            const width = rect.width || 1;
+            fraction = (clientX - rect.left) / width;
+            if (this.dir() === 'rtl') {
+                fraction = 1 - fraction;
+            }
+        }
+        else {
+            const height = rect.height || 1;
+            // Vertical default: bottom = min, top = max.
+            fraction = (rect.bottom - clientY) / height;
+        }
+        if (this.inverted()) {
+            fraction = 1 - fraction;
+        }
+        fraction = fraction < 0 ? 0 : fraction > 1 ? 1 : fraction;
+        return min + fraction * (max - min);
+    }
+    nearestThumbIndex(target) {
+        const values = this.value();
+        if (values.length === 0) {
+            return -1;
+        }
+        let bestIndex = 0;
+        let bestDelta = Math.abs(values[0] - target);
+        let bestValue = values[0];
+        for (let i = 1; i < values.length; i++) {
+            const value = values[i];
+            const delta = Math.abs(value - target);
+            if (delta < bestDelta) {
+                bestIndex = i;
+                bestDelta = delta;
+                bestValue = value;
+            }
+            else if (delta === bestDelta) {
+                if (target > bestValue) {
+                    bestIndex = i;
+                    bestValue = value;
+                }
+            }
+        }
+        return bestIndex;
+    }
+    beginDrag(index, event) {
+        if (this.effectiveDisabled() || this.readonly()) {
+            return;
+        }
+        const pointerId = event.pointerId;
+        const move = (e) => {
+            if (e.pointerId !== pointerId) {
+                return;
+            }
+            e.preventDefault();
+            this.setValueAt(index, this.pointerToValue(e.clientX, e.clientY));
+        };
+        // Drag tracking listens on the document's defaultView (the window)
+        // so the pointer can leave the slider track without losing the drag.
+        // Read it through the injected DOCUMENT to stay SSR-friendly — pointer
+        // events themselves only fire in the browser, so the optional chain
+        // simply makes this a no-op on the server.
+        const win = this.#document.defaultView;
+        const cleanup = () => {
+            win?.removeEventListener('pointermove', move);
+            win?.removeEventListener('pointerup', stop);
+            win?.removeEventListener('pointercancel', stop);
+            this.#activeDragCleanups.delete(cleanup);
+        };
+        const stop = (e) => {
+            if (e.pointerId !== pointerId) {
+                return;
+            }
+            cleanup();
+            this.markTouched();
+            this.commitInteraction();
+        };
+        win?.addEventListener('pointermove', move);
+        win?.addEventListener('pointerup', stop);
+        win?.addEventListener('pointercancel', stop);
+        this.#activeDragCleanups.add(cleanup);
+    }
+    setTrack(el) {
+        this.#trackEl.set(el);
+    }
+    trackElement() {
+        return this.#trackEl();
+    }
+    markTouched() {
+        if (!this.touched()) {
+            super.markTouched();
+        }
+    }
+    /**
+     * Emit `valueCommit` if the running interaction mutated the value at least
+     * once, and clear the flag. Pointer drags call this on pointerup with no
+     * argument (the drag's own pointerup is already scoped to one thumb). Thumbs
+     * call it on keyup of a navigation key, passing their own `thumbIndex` so a
+     * keyup on a thumb that did not arm the pending commit (e.g. a second thumb
+     * focused and released without moving) cannot mis-attribute or steal another
+     * thumb's pending commit — only the thumb that armed it commits.
+     */
+    commitInteraction(thumbIndex) {
+        if (!this.#interactionMutated) {
+            return;
+        }
+        if (thumbIndex !== undefined && this.#armedThumb !== thumbIndex) {
+            return;
+        }
+        this.#interactionMutated = false;
+        this.#armedThumb = null;
+        this.valueCommit.emit(this.value());
+    }
+    /**
+     * Move focus to a thumb, implementing `FormUiControl.focus` from
+     * `@angular/forms/signals`. Without this override Signal Forms would focus
+     * the host `role="group"` wrapper — which is not focusable and carries no
+     * keyboard map — so focus-on-error would silently go nowhere. Targets the
+     * first registered thumb (the roving-tabindex entry point); no-op when the
+     * slider is disabled or has no thumbs.
+     */
+    focus(options) {
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        this.#thumbs.items()[0]?.host.focus(options);
+    }
+    registerThumb(handle) {
+        this.#thumbs.register(handle);
+    }
+    unregisterThumb(handle) {
+        this.#thumbs.unregister(handle);
+    }
+    onFocusOut(event) {
+        const next = event.relatedTarget;
+        if (next && this.#host.nativeElement.contains(next)) {
+            return;
+        }
+        this.markTouched();
+    }
+    /** Snap, clamp, and (multi-thumb) keep within neighbor bounds. */
+    #clampForIndex(values, index, raw) {
+        const min = this.minValue();
+        const max = this.maxValue();
+        const step = this.step();
+        const gap = this.minStepsBetweenThumbs() * step;
+        const snapped = snapToStep(raw, step, min);
+        let lo = min;
+        let hi = max;
+        if (index > 0) {
+            lo = Math.max(lo, values[index - 1] + gap);
+        }
+        if (index < values.length - 1) {
+            hi = Math.min(hi, values[index + 1] - gap);
+        }
+        return snapped < lo ? lo : snapped > hi ? hi : snapped;
+    }
+    /**
+     * Returns +1 / -1 / 0 for the keyboard direction's effect on the value,
+     * resolving orientation × dir × inverted. Up / Right (LTR) increase by
+     * default; `inverted` flips both axes.
+     */
+    #directionFor(key) {
+        let positive;
+        switch (key) {
+            case 'ArrowUp':
+                positive = true;
+                break;
+            case 'ArrowDown':
+                positive = false;
+                break;
+            case 'ArrowRight':
+                positive = this.dir() !== 'rtl';
+                break;
+            case 'ArrowLeft':
+                positive = this.dir() === 'rtl';
+                break;
+            default:
+                return 0;
+        }
+        if (this.inverted()) {
+            positive = !positive;
+        }
+        return positive ? 1 : -1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForSlider, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForSlider, isStandalone: true, selector: "[forSlider]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, largeStep: { classPropertyName: "largeStep", publicName: "largeStep", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, _dirInput: { classPropertyName: "_dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, minStepsBetweenThumbs: { classPropertyName: "minStepsBetweenThumbs", publicName: "minStepsBetweenThumbs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueCommit: "valueCommit" }, host: { attributes: { "role": "group" }, listeners: { "focusout": "onFocusOut($event)" }, properties: { "attr.aria-disabled": "effectiveDisabled() ? \"true\" : null", "attr.aria-readonly": "readonly() ? \"true\" : null", "attr.aria-required": "required() ? \"true\" : null", "attr.aria-invalid": "invalid() ? \"true\" : null", "attr.aria-busy": "pending() ? \"true\" : null", "attr.data-orientation": "orientation()", "attr.data-disabled": "effectiveDisabled() ? \"\" : null", "attr.data-readonly": "readonly() ? \"\" : null", "attr.dir": "dir()" } }, providers: [{ provide: FOR_SLIDER_CONTEXT, useExisting: ForSlider }], exportAs: ["forSlider"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForSlider, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forSlider]',
+                    exportAs: 'forSlider',
+                    host: {
+                        role: 'group',
+                        '[attr.aria-disabled]': 'effectiveDisabled() ? "true" : null',
+                        '[attr.aria-readonly]': 'readonly() ? "true" : null',
+                        '[attr.aria-required]': 'required() ? "true" : null',
+                        '[attr.aria-invalid]': 'invalid() ? "true" : null',
+                        '[attr.aria-busy]': 'pending() ? "true" : null',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-disabled]': 'effectiveDisabled() ? "" : null',
+                        '[attr.data-readonly]': 'readonly() ? "" : null',
+                        '[attr.dir]': 'dir()',
+                        '(focusout)': 'onFocusOut($event)',
+                    },
+                    providers: [{ provide: FOR_SLIDER_CONTEXT, useExisting: ForSlider }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], largeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "largeStep", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], _dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], inverted: [{ type: i0.Input, args: [{ isSignal: true, alias: "inverted", required: false }] }], minStepsBetweenThumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "minStepsBetweenThumbs", required: false }] }], valueCommit: [{ type: i0.Output, args: ["valueCommit"] }] } });
+
+/**
+ * The clickable track surface. PointerDown anywhere on the track that isn't
+ * a thumb finds the nearest thumb, jumps it to the clicked position, focuses
+ * it, and starts a drag (so the user can keep refining without releasing).
+ *
+ * Thumbs handle their own pointerdown, so a click directly on a thumb
+ * skips the "nearest" lookup and drags that specific thumb.
+ *
+ * Reflects `data-orientation` and `data-disabled` so consumers can paint
+ * the track from CSS. Position the visible track however you want — this
+ * directive just owns the bounding-rect for the math.
+ */
+class ForSliderTrack {
+    ctx = injectSliderContext('ForSliderTrack');
+    #host = inject(ElementRef);
+    constructor() {
+        this.ctx.setTrack(this.#host.nativeElement);
+        inject(DestroyRef).onDestroy(() => this.ctx.setTrack(null));
+    }
+    onPointerDown(event) {
+        if (this.ctx.effectiveDisabled() || this.ctx.readonly()) {
+            return;
+        }
+        // Only react to primary button / touch / pen contact.
+        if (event.button !== undefined && event.button !== 0) {
+            return;
+        }
+        // Direct thumb clicks are handled by the thumb's own listener; the thumb
+        // calls `stopPropagation()` so we don't double-handle.
+        event.preventDefault();
+        const target = this.ctx.pointerToValue(event.clientX, event.clientY);
+        const index = this.ctx.nearestThumbIndex(target);
+        if (index < 0) {
+            return;
+        }
+        this.ctx.setValueAt(index, target);
+        this.ctx.beginDrag(index, event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForSliderTrack, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForSliderTrack, isStandalone: true, selector: "[forSliderTrack]", host: { listeners: { "pointerdown": "onPointerDown($event)" }, properties: { "attr.data-orientation": "ctx.orientation()", "attr.data-disabled": "ctx.effectiveDisabled() ? \"\" : null" } }, exportAs: ["forSliderTrack"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForSliderTrack, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forSliderTrack]',
+                    exportAs: 'forSliderTrack',
+                    host: {
+                        '[attr.data-orientation]': 'ctx.orientation()',
+                        '[attr.data-disabled]': 'ctx.effectiveDisabled() ? "" : null',
+                        '(pointerdown)': 'onPointerDown($event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Optional decorative band between the slider's lowest and highest thumbs
+ * (or `0 → thumb` for single-thumb sliders). The directive doesn't paint
+ * anything — it exposes start / end fractions as CSS variables and `data-*`
+ * so the consumer can size and position it from styles.
+ *
+ * Custom properties on the host:
+ * - `--for-slider-range-start` — fraction `[0, 1]`.
+ * - `--for-slider-range-end` — fraction `[0, 1]`.
+ * - `--for-slider-range-size` — `end - start`, useful for `width` / `height`.
+ *
+ * The fractions already account for `inverted`, so painting can be blind.
+ * Combine with `data-orientation` to pick the right CSS axis.
+ */
+class ForSliderRange {
+    ctx = injectSliderContext('ForSliderRange');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForSliderRange, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForSliderRange, isStandalone: true, selector: "[forSliderRange]", host: { properties: { "attr.data-orientation": "ctx.orientation()", "attr.data-disabled": "ctx.effectiveDisabled() ? \"\" : null", "style.--for-slider-range-start": "ctx.rangeStart()", "style.--for-slider-range-end": "ctx.rangeEnd()", "style.--for-slider-range-size": "ctx.rangeEnd() - ctx.rangeStart()" } }, exportAs: ["forSliderRange"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForSliderRange, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forSliderRange]',
+                    exportAs: 'forSliderRange',
+                    host: {
+                        '[attr.data-orientation]': 'ctx.orientation()',
+                        '[attr.data-disabled]': 'ctx.effectiveDisabled() ? "" : null',
+                        '[style.--for-slider-range-start]': 'ctx.rangeStart()',
+                        '[style.--for-slider-range-end]': 'ctx.rangeEnd()',
+                        '[style.--for-slider-range-size]': 'ctx.rangeEnd() - ctx.rangeStart()',
+                    },
+                }]
+        }] });
+
+/**
+ * One slider thumb. Apply on any focusable element (commonly `<span>` /
+ * `<div>` with the directive's auto-injected `tabindex`). The directive
+ * sets `role="slider"`, the live `aria-value*` attributes, keyboard
+ * handling, and starts a drag on pointerdown.
+ *
+ * `[index]` is the 0-based position in the parent slider's `value()` array
+ * — pass the loop index when rendering N thumbs:
+ *
+ * ```html
+ * @for (v of value(); let i = $index; track i) {
+ *   <span forSliderThumb [index]="i" [label]="i === 0 ? 'Min' : 'Max'"></span>
+ * }
+ * ```
+ *
+ * Custom property exposed:
+ * - `--for-slider-thumb-position` — fraction `[0, 1]` already accounting
+ *   for `inverted`. Use it via e.g.
+ *   `inset-inline-start: calc(var(--for-slider-thumb-position) * 100%)`.
+ */
+class ForSliderThumb {
+    ctx = injectSliderContext('ForSliderThumb');
+    #host = inject(ElementRef);
+    /** Position in the parent slider's `value()` array (0-based). */
+    index = input.required({ ...(ngDevMode ? { debugName: "index" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Optional fixed label for assistive tech (e.g. "Minimum price",
+     * "Maximum price"). Mirrored as `aria-label`. Use `[labelledby]`
+     * instead if the label lives elsewhere in the DOM.
+     */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    labelledby = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledby" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional human-readable value override (e.g. "$1,200" instead of "1200").
+     * Mirrored as `aria-valuetext` only when non-empty; when omitted, no
+     * `aria-valuetext` is emitted so assistive tech reads `aria-valuenow`.
+     */
+    valueText = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
+    tabindex = computed(() => (this.ctx.effectiveDisabled() ? -1 : 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
+    currentValue = computed(() => {
+        const i = this.index();
+        const values = this.ctx.value();
+        if (i < 0 || i >= values.length) {
+            return this.ctx.minValue();
+        }
+        return values[i];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
+    fraction = computed(() => {
+        const i = this.index();
+        const fr = this.ctx.fractions();
+        if (i < 0 || i >= fr.length) {
+            return 0;
+        }
+        return fr[i];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fraction" }] : /* istanbul ignore next */ []));
+    ariaValueNow = computed(() => this.currentValue(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaValueNow" }] : /* istanbul ignore next */ []));
+    ariaValueText = computed(() => this.valueText() || null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaValueText" }] : /* istanbul ignore next */ []));
+    ariaValueMin = computed(() => {
+        const i = this.index();
+        const values = this.ctx.value();
+        if (i > 0 && i < values.length) {
+            // Multi-thumb non-passing: this thumb's lower bound is the previous
+            // thumb's value (matches APG multi-thumb guidance).
+            return values[i - 1];
+        }
+        return this.ctx.minValue();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaValueMin" }] : /* istanbul ignore next */ []));
+    ariaValueMax = computed(() => {
+        const i = this.index();
+        const values = this.ctx.value();
+        if (i >= 0 && i < values.length - 1) {
+            return values[i + 1];
+        }
+        return this.ctx.maxValue();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaValueMax" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const handle = {
+            host: this.#host.nativeElement,
+            index: this.index,
+        };
+        registerHandle(handle, (h) => this.ctx.registerThumb(h), (h) => this.ctx.unregisterThumb(h));
+    }
+    onKeyDown(event) {
+        if (this.ctx.effectiveDisabled() || this.ctx.readonly()) {
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowUp':
+            case 'ArrowDown':
+            case 'ArrowLeft':
+            case 'ArrowRight':
+                event.preventDefault();
+                this.ctx.bumpAt(this.index(), event.key, false);
+                return;
+            case 'PageUp':
+                event.preventDefault();
+                this.ctx.bumpAt(this.index(), 'ArrowUp', true);
+                return;
+            case 'PageDown':
+                event.preventDefault();
+                this.ctx.bumpAt(this.index(), 'ArrowDown', true);
+                return;
+            case 'Home':
+                event.preventDefault();
+                this.ctx.setExtreme(this.index(), 'min');
+                return;
+            case 'End':
+                event.preventDefault();
+                this.ctx.setExtreme(this.index(), 'max');
+                return;
+            default:
+                return;
+        }
+    }
+    onKeyUp(event) {
+        switch (event.key) {
+            case 'ArrowUp':
+            case 'ArrowDown':
+            case 'ArrowLeft':
+            case 'ArrowRight':
+            case 'PageUp':
+            case 'PageDown':
+            case 'Home':
+            case 'End':
+                this.ctx.commitInteraction(this.index());
+                return;
+            default:
+                return;
+        }
+    }
+    onPointerDown(event) {
+        if (this.ctx.effectiveDisabled() || this.ctx.readonly()) {
+            return;
+        }
+        if (event.button !== undefined && event.button !== 0) {
+            return;
+        }
+        // Stop the track's pointerdown handler from re-running "nearest thumb"
+        // — clicking directly on a thumb should drag *that* thumb.
+        event.stopPropagation();
+        event.preventDefault();
+        this.#host.nativeElement.focus();
+        this.ctx.beginDrag(this.index(), event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForSliderThumb, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForSliderThumb, isStandalone: true, selector: "[forSliderThumb]", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelledby: { classPropertyName: "labelledby", publicName: "labelledby", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "slider" }, listeners: { "keydown": "onKeyDown($event)", "keyup": "onKeyUp($event)", "pointerdown": "onPointerDown($event)" }, properties: { "attr.tabindex": "tabindex()", "attr.aria-valuemin": "ariaValueMin()", "attr.aria-valuemax": "ariaValueMax()", "attr.aria-valuenow": "ariaValueNow()", "attr.aria-valuetext": "ariaValueText()", "attr.aria-orientation": "ctx.orientation()", "attr.aria-label": "label() || null", "attr.aria-labelledby": "labelledby() || null", "attr.aria-disabled": "ctx.effectiveDisabled() ? \"true\" : null", "attr.aria-readonly": "ctx.readonly() ? \"true\" : null", "attr.data-orientation": "ctx.orientation()", "attr.data-disabled": "ctx.effectiveDisabled() ? \"\" : null", "attr.data-readonly": "ctx.readonly() ? \"\" : null", "attr.data-index": "index()", "style.--for-slider-thumb-position": "fraction()" } }, exportAs: ["forSliderThumb"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForSliderThumb, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forSliderThumb]',
+                    exportAs: 'forSliderThumb',
+                    host: {
+                        role: 'slider',
+                        '[attr.tabindex]': 'tabindex()',
+                        '[attr.aria-valuemin]': 'ariaValueMin()',
+                        '[attr.aria-valuemax]': 'ariaValueMax()',
+                        '[attr.aria-valuenow]': 'ariaValueNow()',
+                        '[attr.aria-valuetext]': 'ariaValueText()',
+                        '[attr.aria-orientation]': 'ctx.orientation()',
+                        '[attr.aria-label]': 'label() || null',
+                        '[attr.aria-labelledby]': 'labelledby() || null',
+                        '[attr.aria-disabled]': 'ctx.effectiveDisabled() ? "true" : null',
+                        '[attr.aria-readonly]': 'ctx.readonly() ? "true" : null',
+                        '[attr.data-orientation]': 'ctx.orientation()',
+                        '[attr.data-disabled]': 'ctx.effectiveDisabled() ? "" : null',
+                        '[attr.data-readonly]': 'ctx.readonly() ? "" : null',
+                        '[attr.data-index]': 'index()',
+                        '[style.--for-slider-thumb-position]': 'fraction()',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(keyup)': 'onKeyUp($event)',
+                        '(pointerdown)': 'onPointerDown($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelledby", required: false }] }], valueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueText", required: false }] }] } });
+
+/**
+ * Exact public names of every `ForSlider` input, its models included. Spread it into the
+ * `inputs` array of a `hostDirectives` entry so a wrapper component re-exposes the
+ * primitive's full surface — the Signal Forms members `[formField]` binds among them —
+ * without hand-maintaining the list. Always spread into an inline object literal as shown
+ * below: the literal is what keeps the entry statically analyzable for consumers compiling
+ * against the published package. An anti-drift spec fails when this list no longer matches
+ * the directive's actual API. See `docs/wrapping-form-primitives.md` for both supported
+ * wrapping patterns.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   selector: 'div[mySlider]',
+ *   template: '',
+ *   hostDirectives: [
+ *     {
+ *       directive: ForSlider,
+ *       inputs: [...FOR_SLIDER_HOST_DIRECTIVE_INPUTS],
+ *       outputs: [...FOR_SLIDER_HOST_DIRECTIVE_OUTPUTS],
+ *     },
+ *   ],
+ * })
+ * export class MySlider {}
+ * ```
+ */
+const FOR_SLIDER_HOST_DIRECTIVE_INPUTS = [
+    'value',
+    'dir',
+    'dirty',
+    'disabled',
+    'errors',
+    'invalid',
+    'inverted',
+    'largeStep',
+    'max',
+    'min',
+    'minStepsBetweenThumbs',
+    'name',
+    'orientation',
+    'pending',
+    'readonly',
+    'required',
+    'step',
+    'touched',
+];
+/**
+ * Exact public names of every `ForSlider` output, the Signal Forms `touch` output
+ * included. Spread it into the `outputs` array of the same `hostDirectives` entry as
+ * {@link FOR_SLIDER_HOST_DIRECTIVE_INPUTS}.
+ */
+const FOR_SLIDER_HOST_DIRECTIVE_OUTPUTS = [
+    'valueChange',
+    'valueCommit',
+    'touchedChange',
+    'touch',
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FOR_SLIDER_CONTEXT, FOR_SLIDER_DEFAULTS, FOR_SLIDER_HOST_DIRECTIVE_INPUTS, FOR_SLIDER_HOST_DIRECTIVE_OUTPUTS, ForSlider, ForSliderRange, ForSliderThumb, ForSliderTrack, provideForSliderDefaults };
+//# sourceMappingURL=forty-cdk-slider.mjs.map