@cdevhub/ngx-tw 0.2.0

package/fesm2022/cdevhub-ngx-tw-slider.mjs

@@ -0,0 +1,1147 @@
+import * as i0 from '@angular/core';
+import { input, model, output, inject, ElementRef, DestroyRef, signal, computed, viewChild, linkedSignal, afterNextRender, isDevMode, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgControl, NgForm, FormGroupDirective } from '@angular/forms';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
+import { merge } from 'rxjs';
+import { tv } from 'tailwind-variants';
+import { TW_ERROR_STATE_MATCHER } from '@cdevhub/ngx-tw/core';
+
+/**
+ * `tw-slider` — select a single value or a contiguous range from a numeric scale.
+ *
+ * Composition usecases:
+ * - Single-value control bound via `[(value)]`.
+ * - Range selector via `[range]="true"` with a `[number, number]` value.
+ * - Quantised scale via `[step]` and optional tick `[marks]`.
+ * - Custom mark labels for semantic scales (temperature, volume, brightness).
+ * - Forms: works with template-driven, reactive, and signal forms through `ControlValueAccessor`.
+ */
+// ── Static color lookups (Tailwind v4 scans class strings statically) ──
+const FILL_SOLID = {
+    primary: 'bg-primary-500',
+    secondary: 'bg-secondary-500',
+    accent: 'bg-accent-500',
+    neutral: 'bg-fg',
+    info: 'bg-info-500',
+    success: 'bg-success-500',
+    warning: 'bg-warning-500',
+    error: 'bg-error-500',
+};
+const FILL_SOFT = {
+    primary: 'bg-primary-300',
+    secondary: 'bg-secondary-300',
+    accent: 'bg-accent-300',
+    neutral: 'bg-fg-muted',
+    info: 'bg-info-300',
+    success: 'bg-success-300',
+    warning: 'bg-warning-300',
+    error: 'bg-error-300',
+};
+const FILL_OUTLINE_BORDER = {
+    primary: 'border-primary-500',
+    secondary: 'border-secondary-500',
+    accent: 'border-accent-500',
+    neutral: 'border-fg',
+    info: 'border-info-500',
+    success: 'border-success-500',
+    warning: 'border-warning-500',
+    error: 'border-error-500',
+};
+const THUMB_BORDER = {
+    primary: 'border-primary-500',
+    secondary: 'border-secondary-500',
+    accent: 'border-accent-500',
+    neutral: 'border-fg',
+    info: 'border-info-500',
+    success: 'border-success-500',
+    warning: 'border-warning-500',
+    error: 'border-error-500',
+};
+const FOCUS_RING = {
+    primary: 'focus-visible:outline-primary-500',
+    secondary: 'focus-visible:outline-secondary-500',
+    accent: 'focus-visible:outline-accent-500',
+    neutral: 'focus-visible:outline-fg',
+    info: 'focus-visible:outline-info-500',
+    success: 'focus-visible:outline-success-500',
+    warning: 'focus-visible:outline-warning-500',
+    error: 'focus-visible:outline-error-500',
+};
+// ── tv() config ──────────────────────────────────────────────────
+const sliderVariants = tv({
+    slots: {
+        root: 'flex flex-col w-full select-none',
+        header: 'flex items-center justify-between gap-3',
+        label: 'text-sm font-medium text-fg empty:hidden',
+        valueText: 'text-sm text-fg-muted font-medium tabular-nums',
+        description: 'text-xs text-fg-muted empty:hidden',
+        region: 'relative flex items-center touch-none',
+        rail: 'relative w-full rounded-full bg-surface-muted transition-colors duration-normal motion-reduce:transition-none',
+        fill: 'absolute inset-y-0 rounded-full transition-colors duration-normal motion-reduce:transition-none',
+        marksRow: 'absolute inset-0 pointer-events-none',
+        mark: 'absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface transition-colors duration-normal motion-reduce:transition-none',
+        markActive: '',
+        thumb: 'absolute top-1/2 -translate-x-1/2 -translate-y-1/2 inline-flex items-center justify-center rounded-full border-2 bg-surface-raised shadow-sm cursor-grab active:cursor-grabbing touch-none focus-visible:outline-2 focus-visible:outline-offset-2 transition-[transform,box-shadow] duration-fast motion-reduce:transition-none hover:shadow-md data-[dragging=true]:shadow-md data-[dragging=true]:scale-110',
+        bubble: 'absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-0.5 rounded-md bg-fg text-surface text-xs font-medium tabular-nums whitespace-nowrap pointer-events-none opacity-0 transition-opacity duration-fast motion-reduce:transition-none',
+        bubbleVisible: 'opacity-100',
+        markLabelsRow: 'relative w-full mt-2',
+        markLabel: 'absolute top-0 -translate-x-1/2 text-xs text-fg-muted tabular-nums whitespace-nowrap',
+        minMaxRow: 'flex items-center justify-between mt-2 text-xs text-fg-muted tabular-nums',
+    },
+    variants: {
+        size: {
+            // Thumb sizes follow the square-interactive scale (WCAG 2.2 SC 2.5.8 target-size).
+            // Rail/mark/region adjust independently for proportional visual weight.
+            xs: {
+                rail: 'h-1',
+                thumb: 'size-6',
+                mark: 'size-2',
+                region: 'h-6 py-1',
+            },
+            sm: {
+                rail: 'h-1.5',
+                thumb: 'size-7',
+                mark: 'size-2.5',
+                region: 'h-7 py-1',
+            },
+            md: {
+                rail: 'h-2',
+                thumb: 'size-8',
+                mark: 'size-3',
+                region: 'h-8 py-1.5',
+            },
+            lg: {
+                rail: 'h-2.5',
+                thumb: 'size-9',
+                mark: 'size-3',
+                region: 'h-9 py-2',
+            },
+            xl: {
+                rail: 'h-3',
+                thumb: 'size-10',
+                mark: 'size-3',
+                region: 'h-10 py-2',
+            },
+        },
+        variant: {
+            solid: {},
+            soft: {},
+            outline: {
+                rail: 'border border-border bg-transparent',
+                fill: 'border border-transparent',
+            },
+        },
+        disabled: {
+            true: { root: 'opacity-50 pointer-events-none' },
+            false: { root: '' },
+        },
+        hasHeader: {
+            true: { root: 'gap-2' },
+            false: { root: 'gap-0' },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'solid',
+        disabled: false,
+        hasHeader: false,
+    },
+}, { twMerge: true });
+let nextId = 0;
+const DEFAULT_FORMATTER = (value) => {
+    if (Number.isInteger(value))
+        return String(value);
+    return String(Math.round(value * 100) / 100);
+};
+const clamp = (value, lo, hi) => value < lo ? lo : value > hi ? hi : value;
+const toRange = (value) => {
+    if (Array.isArray(value))
+        return [value[0], value[1]];
+    return [0, typeof value === 'number' ? value : 0];
+};
+const toNumber = (value, fallback) => {
+    if (Array.isArray(value))
+        return value[1];
+    return typeof value === 'number' ? value : fallback;
+};
+/**
+ * Select a single value or a numeric range from a scale.
+ *
+ * @example
+ * ```html
+ * <tw-slider [(value)]="volume" [min]="0" [max]="100" [step]="5" />
+ * <tw-slider range [(value)]="priceRange" [min]="0" [max]="1000" [step]="10" showMinMax />
+ * <tw-slider [marks]="true" [step]="25" showMarkLabels label="Brightness" />
+ * ```
+ */
+class SliderComponent {
+    /** Lower bound of the slider scale. Defaults to `0`. */
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Upper bound of the slider scale. Defaults to `100`. */
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Step increment used for snapping, keyboard nav, and auto-generated marks. Pass `null` for continuous values. Defaults to `1`. */
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /** Semantic color for the filled portion and thumb border. Defaults to `'primary'`. */
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Overall scale of the rail, thumb, and typography. Defaults to `'md'`. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Visual style of the fill: `'solid'` (vivid), `'soft'` (muted), or `'outline'` (rail bordered, fill color-500). Defaults to `'solid'`. */
+    variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** When true, prevents interaction and applies muted styling. Defaults to `false`. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** When true, sets `aria-required="true"` on the thumb for assistive tech. Defaults to `false`. */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** When true, the slider selects a `[start, end]` range and renders two thumbs. Defaults to `false`. */
+    range = input(false, ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    /** Tick marks: `true` auto-generates one mark per step, an array supplies custom marks, `false` renders no marks. Defaults to `false`. */
+    marks = input(false, ...(ngDevMode ? [{ debugName: "marks" }] : /* istanbul ignore next */ []));
+    /** When true, renders the mark labels beneath the rail. Requires `marks` to resolve to a list. Defaults to `false`. */
+    showMarkLabels = input(false, ...(ngDevMode ? [{ debugName: "showMarkLabels" }] : /* istanbul ignore next */ []));
+    /** When true, renders the min and max values at the ends of the scale. Defaults to `false`. */
+    showMinMax = input(false, ...(ngDevMode ? [{ debugName: "showMinMax" }] : /* istanbul ignore next */ []));
+    /** When true, renders a value bubble above the active thumb (on hover/focus/drag) and the current value in the header. Defaults to `false`. */
+    showValue = input(false, ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
+    /** Optional visible label rendered above the rail. When set, the slider is wired to the label via `aria-labelledby`. */
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Optional secondary description rendered under the label. Mirrored to `aria-describedby`. */
+    description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Custom formatter for the value bubble, min/max labels, and `aria-valuetext`. Defaults to an integer or 2-decimal string. */
+    valueFormatter = input(undefined, ...(ngDevMode ? [{ debugName: "valueFormatter" }] : /* istanbul ignore next */ []));
+    /** Optional form name attribute. Purely informational — the component does not render a native input. */
+    name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the single-value thumb when no visible label is provided. */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** ID of an external element labelling the single-value thumb. */
+    ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    /** ID of an external element describing the slider. */
+    ariaDescribedby = input(undefined, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    /** Accessible name for the start (lower) thumb in range mode. Defaults to `"Minimum"`. */
+    ariaLabelStart = input('Minimum', ...(ngDevMode ? [{ debugName: "ariaLabelStart" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the end (upper) thumb in range mode. Defaults to `"Maximum"`. */
+    ariaLabelEnd = input('Maximum', ...(ngDevMode ? [{ debugName: "ariaLabelEnd" }] : /* istanbul ignore next */ []));
+    /** Two-way bound slider value. A `number` for single mode, or `[start, end]` for range mode. Updates on every interaction. */
+    value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Fires continuously while the user drags or holds a key. Payload matches the current `value`. Template event name is `input` — the TS-side identifier is `valueInput` to avoid shadowing the imported `input` factory. */
+    valueInput = output({ alias: 'input' });
+    /** Fires when the user commits a change (pointer release, key release, or blur after keyboard change). Payload matches the current `value`. */
+    change = output();
+    /** Per-instance override of the {@link ErrorStateMatcher}. When omitted, the component uses the `TW_ERROR_STATE_MATCHER` token's value. */
+    errorStateMatcher = input(undefined, ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+    focusMonitor = inject(FocusMonitor);
+    elementRef = inject((ElementRef));
+    destroyRef = inject(DestroyRef);
+    directionality = inject(Directionality, { optional: true });
+    ngControl = inject(NgControl, { optional: true, self: true });
+    parentForm = inject(NgForm, { optional: true });
+    parentFormGroup = inject(FormGroupDirective, { optional: true });
+    defaultMatcher = inject(TW_ERROR_STATE_MATCHER);
+    _ngControlRev = signal(0, ...(ngDevMode ? [{ debugName: "_ngControlRev" }] : /* istanbul ignore next */ []));
+    _formSubmitRev = signal(0, ...(ngDevMode ? [{ debugName: "_formSubmitRev" }] : /* istanbul ignore next */ []));
+    /** Whether the form control is in an error state per the configured `ErrorStateMatcher`. */
+    errorState = computed(() => {
+        this._ngControlRev();
+        this._formSubmitRev();
+        // Read focus so blur-driven `touched` transitions repaint the error
+        // border even when the underlying control's status/value didn't change.
+        this.focusedThumb();
+        const matcher = this.errorStateMatcher() ?? this.defaultMatcher;
+        const form = this.parentFormGroup ??
+            this.parentForm;
+        return matcher.isErrorState(this.ngControl?.control ?? null, form);
+    }, ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
+    region = viewChild.required('region');
+    startThumb = viewChild('startThumb', ...(ngDevMode ? [{ debugName: "startThumb" }] : /* istanbul ignore next */ []));
+    endThumb = viewChild('endThumb', ...(ngDevMode ? [{ debugName: "endThumb" }] : /* istanbul ignore next */ []));
+    singleThumb = viewChild('singleThumb', ...(ngDevMode ? [{ debugName: "singleThumb" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    /** @internal ID of the host element. */
+    uid = nextId++;
+    /** @internal */
+    labelId = `tw-slider-${this.uid}-label`;
+    /** @internal */
+    descriptionId = `tw-slider-${this.uid}-description`;
+    /** @internal */
+    singleThumbId = `tw-slider-${this.uid}-thumb`;
+    /** @internal */
+    startThumbId = `tw-slider-${this.uid}-start`;
+    /** @internal */
+    endThumbId = `tw-slider-${this.uid}-end`;
+    /** @internal Internal values during drag / interaction, independent of external model. */
+    internalStart = linkedSignal(() => toRange(this.value())[0], ...(ngDevMode ? [{ debugName: "internalStart" }] : /* istanbul ignore next */ []));
+    internalEnd = linkedSignal(() => toRange(this.value())[1], ...(ngDevMode ? [{ debugName: "internalEnd" }] : /* istanbul ignore next */ []));
+    internalSingle = linkedSignal(() => toNumber(this.value(), this.min()), ...(ngDevMode ? [{ debugName: "internalSingle" }] : /* istanbul ignore next */ []));
+    /** @internal Which thumb currently has an active pointer gesture (or null). Bound in the template to drive the pressed-thumb styling. */
+    activeThumb = signal(null, ...(ngDevMode ? [{ debugName: "activeThumb" }] : /* istanbul ignore next */ []));
+    /** @internal Which thumb is focused (for bubble visibility). */
+    focusedThumb = signal(null, ...(ngDevMode ? [{ debugName: "focusedThumb" }] : /* istanbul ignore next */ []));
+    /** @internal Set of pointer IDs currently captured per-thumb for release tracking. */
+    capturedPointers = new Map();
+    /** @internal Tracks whether a keyboard interaction has mutated the value since last blur. */
+    keyboardDirty = false;
+    constructor() {
+        // Material-style CVA wiring: declare ourselves as the value accessor on any
+        // host-level `NgControl` (FormControlDirective, NgModel, etc.). This avoids
+        // the circular-DI that a static `NG_VALUE_ACCESSOR` provider would create
+        // because `NgControl` is injected with `self: true` on the same element.
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+        afterNextRender(() => {
+            if (isDevMode() && !this.hasAccessibleName()) {
+                console.warn('[tw-slider] No accessible name provided. Supply a `label` input, `aria-label`, or `aria-labelledby`. In range mode, `ariaLabelStart` and `ariaLabelEnd` are used as fallbacks.');
+            }
+        });
+    }
+    // ── Derived state ─────────────────────────────────────────
+    /** @internal Effective disabled state (input OR set via CVA). */
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** @internal Whether a label/value header row should render. */
+    hasHeader = computed(() => !!this.label() || this.showValue(), ...(ngDevMode ? [{ debugName: "hasHeader" }] : /* istanbul ignore next */ []));
+    /** @internal Effective step: min 0 (continuous). */
+    effectiveStep = computed(() => {
+        const s = this.step();
+        if (s === null || s === undefined)
+            return 0;
+        return Math.abs(s);
+    }, ...(ngDevMode ? [{ debugName: "effectiveStep" }] : /* istanbul ignore next */ []));
+    /** @internal Current scale range. */
+    scaleRange = computed(() => {
+        const lo = this.min();
+        const hi = this.max();
+        return hi > lo ? hi - lo : 0;
+    }, ...(ngDevMode ? [{ debugName: "scaleRange" }] : /* istanbul ignore next */ []));
+    /** @internal Whether marks are resolved as a visible list. */
+    marksResolved = computed(() => {
+        const source = this.marks();
+        const lo = this.min();
+        const hi = this.max();
+        if (Array.isArray(source)) {
+            return source.filter((m) => m.value >= lo && m.value <= hi);
+        }
+        if (source !== true)
+            return [];
+        const step = this.effectiveStep();
+        if (step <= 0 || this.scaleRange() <= 0)
+            return [];
+        const out = [];
+        for (let v = lo; v <= hi + 1e-9; v += step) {
+            out.push({ value: Math.round(v * 1e6) / 1e6 });
+        }
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "marksResolved" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    resolvedMarks = computed(() => this.marksResolved(), ...(ngDevMode ? [{ debugName: "resolvedMarks" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    hasVisibleMarks = computed(() => this.marksResolved().length > 0, ...(ngDevMode ? [{ debugName: "hasVisibleMarks" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    hasMarkLabels = computed(() => this.showMarkLabels() && this.marksResolved().length > 0, ...(ngDevMode ? [{ debugName: "hasMarkLabels" }] : /* istanbul ignore next */ []));
+    /** @internal Clamped current values. */
+    startValue = computed(() => this.clampAndSnap(Math.min(this.internalStart(), this.internalEnd())), ...(ngDevMode ? [{ debugName: "startValue" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    endValue = computed(() => this.clampAndSnap(Math.max(this.internalStart(), this.internalEnd())), ...(ngDevMode ? [{ debugName: "endValue" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    singleValue = computed(() => this.clampAndSnap(this.internalSingle()), ...(ngDevMode ? [{ debugName: "singleValue" }] : /* istanbul ignore next */ []));
+    /** @internal aria-valuemax for the start thumb (cannot cross end thumb). */
+    effectiveStartMax = computed(() => this.endValue(), ...(ngDevMode ? [{ debugName: "effectiveStartMax" }] : /* istanbul ignore next */ []));
+    /** @internal aria-valuemin for the end thumb (cannot go below start thumb). */
+    effectiveEndMin = computed(() => this.startValue(), ...(ngDevMode ? [{ debugName: "effectiveEndMin" }] : /* istanbul ignore next */ []));
+    /** @internal Percentage position of the single thumb on the rail. */
+    singlePct = computed(() => this.valuePct(this.singleValue()), ...(ngDevMode ? [{ debugName: "singlePct" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    startPct = computed(() => this.valuePct(this.startValue()), ...(ngDevMode ? [{ debugName: "startPct" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    endPct = computed(() => this.valuePct(this.endValue()), ...(ngDevMode ? [{ debugName: "endPct" }] : /* istanbul ignore next */ []));
+    /** @internal Fill segment position. */
+    fillLeftPct = computed(() => (this.range() ? this.startPct() : 0), ...(ngDevMode ? [{ debugName: "fillLeftPct" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    fillWidthPct = computed(() => this.range() ? this.endPct() - this.startPct() : this.singlePct(), ...(ngDevMode ? [{ debugName: "fillWidthPct" }] : /* istanbul ignore next */ []));
+    /** @internal Formatted display of the current value for the header. */
+    headerValueText = computed(() => {
+        if (this.range()) {
+            return `${this.format(this.startValue())} – ${this.format(this.endValue())}`;
+        }
+        return this.format(this.singleValue());
+    }, ...(ngDevMode ? [{ debugName: "headerValueText" }] : /* istanbul ignore next */ []));
+    // ── tv slot classes ─────────────────────────────────────────
+    variantResult = computed(() => sliderVariants({
+        size: this.size(),
+        variant: this.variant(),
+        disabled: this.isDisabled(),
+        hasHeader: this.hasHeader(),
+    }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    rootClasses = computed(() => this.variantResult().root(), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    headerClasses = computed(() => this.variantResult().header(), ...(ngDevMode ? [{ debugName: "headerClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    labelClasses = computed(() => this.variantResult().label(), ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    valueTextClasses = computed(() => this.variantResult().valueText(), ...(ngDevMode ? [{ debugName: "valueTextClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    descriptionClasses = computed(() => this.variantResult().description(), ...(ngDevMode ? [{ debugName: "descriptionClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    regionClasses = computed(() => this.variantResult().region(), ...(ngDevMode ? [{ debugName: "regionClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    railClasses = computed(() => {
+        const base = this.variantResult().rail();
+        if (this.variant() === 'outline')
+            return base;
+        return base;
+    }, ...(ngDevMode ? [{ debugName: "railClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    fillClasses = computed(() => {
+        const base = this.variantResult().fill();
+        const variant = this.variant();
+        const color = this.color();
+        if (variant === 'soft')
+            return `${base} ${FILL_SOFT[color]}`;
+        if (variant === 'outline') {
+            return `${base} ${FILL_SOLID[color]} ${FILL_OUTLINE_BORDER[color]}`;
+        }
+        return `${base} ${FILL_SOLID[color]}`;
+    }, ...(ngDevMode ? [{ debugName: "fillClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    marksRowClasses = computed(() => this.variantResult().marksRow(), ...(ngDevMode ? [{ debugName: "marksRowClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    markLabelsRowClasses = computed(() => this.variantResult().markLabelsRow(), ...(ngDevMode ? [{ debugName: "markLabelsRowClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    markLabelClasses = computed(() => this.variantResult().markLabel(), ...(ngDevMode ? [{ debugName: "markLabelClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    minMaxRowClasses = computed(() => this.variantResult().minMaxRow(), ...(ngDevMode ? [{ debugName: "minMaxRowClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    thumbClasses = computed(() => `${this.variantResult().thumb()} ${THUMB_BORDER[this.color()]} ${FOCUS_RING[this.color()]}`, ...(ngDevMode ? [{ debugName: "thumbClasses" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Memoized class map for mark dots — keyed by mark value. Recomputed
+     * only when the variant slots, fill range, or marks list changes; lookups
+     * from the template (`markClassFor(markValue)`) are O(1) Map reads.
+     */
+    markClassMap = computed(() => {
+        const base = this.variantResult().mark();
+        const lo = this.range() ? this.startValue() : this.min();
+        const hi = this.range() ? this.endValue() : this.singleValue();
+        const insideClass = `${base} bg-surface`;
+        const outsideClass = `${base} bg-fg-muted/30`;
+        const map = new Map();
+        for (const mark of this.marksResolved()) {
+            const inside = mark.value >= lo && mark.value <= hi;
+            map.set(mark.value, inside ? insideClass : outsideClass);
+        }
+        return { map, outsideClass };
+    }, ...(ngDevMode ? [{ debugName: "markClassMap" }] : /* istanbul ignore next */ []));
+    /** @internal Mark dot color depends on whether it falls inside the filled segment. */
+    markClassFor(markValue) {
+        const { map, outsideClass } = this.markClassMap();
+        return map.get(markValue) ?? outsideClass;
+    }
+    /**
+     * @internal Memoized bubble classes per thumb — enumerated once per
+     * dependency change so each `bubbleClassFor(thumb)` is a single object
+     * property read.
+     */
+    bubbleClassMap = computed(() => {
+        const base = this.variantResult().bubble();
+        if (!this.showValue()) {
+            return { single: base, start: base, end: base };
+        }
+        const visibleClass = `${base} ${this.variantResult().bubbleVisible()}`;
+        const active = this.activeThumb();
+        const focused = this.focusedThumb();
+        const classFor = (thumb) => active === thumb || focused === thumb ? visibleClass : base;
+        return {
+            single: classFor('single'),
+            start: classFor('start'),
+            end: classFor('end'),
+        };
+    }, ...(ngDevMode ? [{ debugName: "bubbleClassMap" }] : /* istanbul ignore next */ []));
+    /** @internal Bubble visibility depends on drag / focus / hover state. */
+    bubbleClassFor(thumb) {
+        return this.bubbleClassMap()[thumb];
+    }
+    // ── Accessible-name resolution ─────────────────────────────
+    /** @internal */
+    resolvedAriaDescribedby = computed(() => {
+        const external = this.ariaDescribedby();
+        if (external)
+            return external;
+        return this.description() ? this.descriptionId : null;
+    }, ...(ngDevMode ? [{ debugName: "resolvedAriaDescribedby" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    resolvedSingleAriaLabel = computed(() => {
+        if (this.label())
+            return null;
+        if (this.ariaLabelledby())
+            return null;
+        return this.ariaLabel() ?? null;
+    }, ...(ngDevMode ? [{ debugName: "resolvedSingleAriaLabel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    resolvedSingleAriaLabelledby = computed(() => {
+        if (this.label())
+            return this.labelId;
+        return this.ariaLabelledby() ?? null;
+    }, ...(ngDevMode ? [{ debugName: "resolvedSingleAriaLabelledby" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    resolvedStartAriaLabel = computed(() => {
+        if (this.ariaLabelledby() || this.label())
+            return null;
+        return this.ariaLabelStart();
+    }, ...(ngDevMode ? [{ debugName: "resolvedStartAriaLabel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    resolvedStartAriaLabelledby = computed(() => {
+        if (this.ariaLabelledby())
+            return this.ariaLabelledby() ?? null;
+        return this.label() ? this.labelId : null;
+    }, ...(ngDevMode ? [{ debugName: "resolvedStartAriaLabelledby" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    resolvedEndAriaLabel = computed(() => {
+        if (this.ariaLabelledby() || this.label())
+            return null;
+        return this.ariaLabelEnd();
+    }, ...(ngDevMode ? [{ debugName: "resolvedEndAriaLabel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    resolvedEndAriaLabelledby = computed(() => {
+        if (this.ariaLabelledby())
+            return this.ariaLabelledby() ?? null;
+        return this.label() ? this.labelId : null;
+    }, ...(ngDevMode ? [{ debugName: "resolvedEndAriaLabelledby" }] : /* istanbul ignore next */ []));
+    // ── Interactions ───────────────────────────────────────────
+    /** Track click: move the nearest thumb to the clicked position and begin a drag. */
+    onTrackPointerDown(event) {
+        if (this.isDisabled())
+            return;
+        if (event.button !== 0 && event.pointerType === 'mouse')
+            return;
+        // Ignore presses that started on a thumb — its own handler runs.
+        const target = event.target;
+        if (target?.closest('[role="slider"]'))
+            return;
+        const nearest = this.nearestThumbFor(event.clientX);
+        const thumbEl = this.thumbElementFor(nearest);
+        if (!thumbEl)
+            return;
+        thumbEl.focus();
+        this.updateValueFromClientX(nearest, event.clientX, true);
+        this.beginDrag(nearest, thumbEl, event);
+    }
+    /** Thumb press: capture pointer and begin a drag gesture. */
+    onThumbPointerDown(event, thumb) {
+        if (this.isDisabled())
+            return;
+        if (event.button !== 0 && event.pointerType === 'mouse')
+            return;
+        const target = event.currentTarget;
+        target.focus();
+        this.beginDrag(thumb, target, event);
+    }
+    beginDrag(thumb, thumbEl, event) {
+        event.preventDefault();
+        try {
+            thumbEl.setPointerCapture(event.pointerId);
+        }
+        catch {
+            // setPointerCapture can throw in some synthetic test environments — degrade gracefully.
+        }
+        this.activeThumb.set(thumb);
+        this.capturedPointers.set(event.pointerId, { thumb, target: thumbEl });
+        thumbEl.addEventListener('pointermove', this.onPointerMove);
+        thumbEl.addEventListener('pointerup', this.onPointerUp);
+        thumbEl.addEventListener('pointercancel', this.onPointerUp);
+    }
+    onPointerMove = (event) => {
+        const entry = this.capturedPointers.get(event.pointerId);
+        if (!entry)
+            return;
+        this.updateValueFromClientX(entry.thumb, event.clientX, false);
+    };
+    onPointerUp = (event) => {
+        const entry = this.capturedPointers.get(event.pointerId);
+        if (!entry)
+            return;
+        const { target } = entry;
+        try {
+            target.releasePointerCapture(event.pointerId);
+        }
+        catch {
+            // noop
+        }
+        target.removeEventListener('pointermove', this.onPointerMove);
+        target.removeEventListener('pointerup', this.onPointerUp);
+        target.removeEventListener('pointercancel', this.onPointerUp);
+        this.capturedPointers.delete(event.pointerId);
+        if (this.capturedPointers.size === 0) {
+            this.activeThumb.set(null);
+        }
+        this.commitValue();
+    };
+    /** Keyboard navigation: arrows for step, PageUp/Down for 10% jumps, Home/End for extremes. */
+    onThumbKeyDown(event, thumb) {
+        if (this.isDisabled())
+            return;
+        const rtl = this.directionality?.value === 'rtl';
+        const range = this.scaleRange();
+        const step = this.effectiveStep() || range / 100 || 1;
+        const bigStep = range > 0 ? range / 10 : step * 10;
+        let delta = 0;
+        let jumpTo = null;
+        switch (event.key) {
+            case 'ArrowRight':
+                delta = rtl ? -step : step;
+                break;
+            case 'ArrowUp':
+                delta = step;
+                break;
+            case 'ArrowLeft':
+                delta = rtl ? step : -step;
+                break;
+            case 'ArrowDown':
+                delta = -step;
+                break;
+            case 'PageUp':
+                delta = bigStep;
+                break;
+            case 'PageDown':
+                delta = -bigStep;
+                break;
+            case 'Home':
+                jumpTo = this.min();
+                break;
+            case 'End':
+                jumpTo = this.max();
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        const current = this.getThumbValue(thumb);
+        const next = jumpTo !== null ? jumpTo : current + delta;
+        this.setThumbValue(thumb, next, /* emitInput */ true);
+        this.commitValue();
+        this.keyboardDirty = true;
+    }
+    /** @internal */
+    onThumbBlur() {
+        this.focusedThumb.set(null);
+        if (this.keyboardDirty) {
+            this.keyboardDirty = false;
+            this.onTouched();
+        }
+        else {
+            this.onTouched();
+        }
+    }
+    // ── Value math ─────────────────────────────────────────────
+    /** @internal Clamp to min/max and snap to step. Returns a finite number. */
+    clampAndSnap(raw) {
+        if (!Number.isFinite(raw))
+            return this.min();
+        const lo = this.min();
+        const hi = this.max();
+        const bounded = clamp(raw, lo, hi);
+        const step = this.effectiveStep();
+        if (step <= 0)
+            return bounded;
+        const snapped = Math.round((bounded - lo) / step) * step + lo;
+        // Protect against floating-point drift that pushes values just past max.
+        return clamp(snapped, lo, hi);
+    }
+    /** @internal Percent of value along the scale, in [0, 100]. */
+    valuePct(value) {
+        const range = this.scaleRange();
+        if (range <= 0)
+            return 0;
+        return ((value - this.min()) / range) * 100;
+    }
+    /** @internal Format a single number using the configured formatter. */
+    format(value) {
+        const fmt = this.valueFormatter() ?? DEFAULT_FORMATTER;
+        return fmt(value);
+    }
+    getThumbValue(thumb) {
+        if (thumb === 'start')
+            return this.startValue();
+        if (thumb === 'end')
+            return this.endValue();
+        return this.singleValue();
+    }
+    setThumbValue(thumb, raw, emitInput) {
+        const snapped = this.clampAndSnap(raw);
+        if (thumb === 'single') {
+            if (snapped === this.internalSingle())
+                return;
+            this.internalSingle.set(snapped);
+        }
+        else if (thumb === 'start') {
+            const clamped = Math.min(snapped, this.internalEnd());
+            if (clamped === this.internalStart())
+                return;
+            this.internalStart.set(clamped);
+        }
+        else {
+            const clamped = Math.max(snapped, this.internalStart());
+            if (clamped === this.internalEnd())
+                return;
+            this.internalEnd.set(clamped);
+        }
+        const current = this.currentValue();
+        this.value.set(current);
+        if (emitInput)
+            this.valueInput.emit(current);
+    }
+    updateValueFromClientX(thumb, clientX, focusThumb) {
+        const regionEl = this.region().nativeElement;
+        const rect = regionEl.getBoundingClientRect();
+        if (rect.width <= 0)
+            return;
+        const rtl = this.directionality?.value === 'rtl';
+        const ratio = (clientX - rect.left) / rect.width;
+        const pct = clamp(rtl ? 1 - ratio : ratio, 0, 1);
+        const raw = this.min() + pct * this.scaleRange();
+        this.setThumbValue(thumb, raw, true);
+        if (focusThumb) {
+            const thumbEl = this.thumbElementFor(thumb);
+            thumbEl?.focus();
+        }
+    }
+    thumbElementFor(thumb) {
+        if (thumb === 'single')
+            return this.singleThumb()?.nativeElement;
+        if (thumb === 'start')
+            return this.startThumb()?.nativeElement;
+        return this.endThumb()?.nativeElement;
+    }
+    nearestThumbFor(clientX) {
+        if (!this.range())
+            return 'single';
+        const regionEl = this.region().nativeElement;
+        const rect = regionEl.getBoundingClientRect();
+        if (rect.width <= 0)
+            return 'start';
+        const rtl = this.directionality?.value === 'rtl';
+        const ratio = (clientX - rect.left) / rect.width;
+        const pct = clamp(rtl ? 1 - ratio : ratio, 0, 1);
+        const target = this.min() + pct * this.scaleRange();
+        const distStart = Math.abs(target - this.startValue());
+        const distEnd = Math.abs(target - this.endValue());
+        if (distStart === distEnd) {
+            // Prefer the end thumb when to the right of the fill, start otherwise.
+            return target >= this.endValue() ? 'end' : 'start';
+        }
+        return distStart < distEnd ? 'start' : 'end';
+    }
+    currentValue() {
+        if (this.range())
+            return [this.startValue(), this.endValue()];
+        return this.singleValue();
+    }
+    commitValue() {
+        const current = this.currentValue();
+        this.value.set(current);
+        this.onChange(current);
+        this.change.emit(current);
+    }
+    hasAccessibleName() {
+        if (this.label() || this.ariaLabel() || this.ariaLabelledby())
+            return true;
+        // In range mode, explicit per-thumb labels default to Minimum/Maximum.
+        return this.range();
+    }
+    // ── ControlValueAccessor ──────────────────────────────────
+    writeValue(value) {
+        if (value === null || value === undefined) {
+            this.internalSingle.set(this.clampAndSnap(this.min()));
+            this.internalStart.set(this.clampAndSnap(this.min()));
+            this.internalEnd.set(this.clampAndSnap(this.max()));
+            return;
+        }
+        if (Array.isArray(value)) {
+            const [start, end] = value;
+            this.internalStart.set(this.clampAndSnap(start));
+            this.internalEnd.set(this.clampAndSnap(end));
+        }
+        else {
+            this.internalSingle.set(this.clampAndSnap(value));
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    // ── Lifecycle ─────────────────────────────────────────────
+    ngOnInit() {
+        this.focusMonitor
+            .monitor(this.elementRef, true)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((origin) => {
+            if (origin === null) {
+                this.focusedThumb.set(null);
+                return;
+            }
+            const active = this.elementRef.nativeElement.ownerDocument?.activeElement;
+            if (!active)
+                return;
+            if (active === this.singleThumb()?.nativeElement)
+                this.focusedThumb.set('single');
+            else if (active === this.startThumb()?.nativeElement)
+                this.focusedThumb.set('start');
+            else if (active === this.endThumb()?.nativeElement)
+                this.focusedThumb.set('end');
+            else
+                this.focusedThumb.set(null);
+        });
+        // Re-run the error-state matcher when the bound control's status/value
+        // changes or the parent form is submitted. `ngOnInit` is the natural
+        // mount point — by here, the parent `FormControl*` directive's
+        // `ngOnChanges` has already populated `ngControl.control`.
+        const ctrl = this.ngControl?.control;
+        if (ctrl) {
+            const streams = [ctrl.statusChanges, ctrl.valueChanges].filter((s) => !!s);
+            if (streams.length) {
+                merge(...streams)
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe(() => this._ngControlRev.update((v) => v + 1));
+            }
+        }
+        const submit = this.parentFormGroup?.ngSubmit ?? this.parentForm?.ngSubmit;
+        if (submit) {
+            submit
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => this._formSubmitRev.update((v) => v + 1));
+        }
+        this.destroyRef.onDestroy(() => {
+            this.focusMonitor.stopMonitoring(this.elementRef);
+            for (const { target } of this.capturedPointers.values()) {
+                target.removeEventListener('pointermove', this.onPointerMove);
+                target.removeEventListener('pointerup', this.onPointerUp);
+                target.removeEventListener('pointercancel', this.onPointerUp);
+            }
+            this.capturedPointers.clear();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SliderComponent, isStandalone: true, selector: "tw-slider", inputs: { 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 }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, marks: { classPropertyName: "marks", publicName: "marks", isSignal: true, isRequired: false, transformFunction: null }, showMarkLabels: { classPropertyName: "showMarkLabels", publicName: "showMarkLabels", isSignal: true, isRequired: false, transformFunction: null }, showMinMax: { classPropertyName: "showMinMax", publicName: "showMinMax", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelStart: { classPropertyName: "ariaLabelStart", publicName: "ariaLabelStart", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelEnd: { classPropertyName: "ariaLabelEnd", publicName: "ariaLabelEnd", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueInput: "input", change: "change" }, host: { properties: { "class": "rootClasses()", "attr.data-disabled": "isDisabled() || null" } }, viewQueries: [{ propertyName: "region", first: true, predicate: ["region"], descendants: true, isSignal: true }, { propertyName: "startThumb", first: true, predicate: ["startThumb"], descendants: true, isSignal: true }, { propertyName: "endThumb", first: true, predicate: ["endThumb"], descendants: true, isSignal: true }, { propertyName: "singleThumb", first: true, predicate: ["singleThumb"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (hasHeader()) {
+      <div [class]="headerClasses()">
+        @if (label(); as lbl) {
+          <span [id]="labelId" [class]="labelClasses()">{{ lbl }}</span>
+        } @else {
+          <span></span>
+        }
+        @if (showValue()) {
+          <span [class]="valueTextClasses()">{{ headerValueText() }}</span>
+        }
+      </div>
+    }
+    @if (description(); as desc) {
+      <span [id]="descriptionId" [class]="descriptionClasses()">{{ desc }}</span>
+    }
+
+    <div
+      #region
+      [class]="regionClasses()"
+      (pointerdown)="onTrackPointerDown($event)"
+    >
+      <div [class]="railClasses()">
+        <div
+          [class]="fillClasses()"
+          [style.left.%]="fillLeftPct()"
+          [style.width.%]="fillWidthPct()"
+        ></div>
+
+        @if (hasVisibleMarks()) {
+          <div [class]="marksRowClasses()">
+            @for (m of resolvedMarks(); track m.value) {
+              <span
+                [class]="markClassFor(m.value)"
+                [style.left.%]="valuePct(m.value)"
+              ></span>
+            }
+          </div>
+        }
+
+        @if (range()) {
+          <button
+            type="button"
+            #startThumb
+            [class]="thumbClasses()"
+            [style.left.%]="startPct()"
+            role="slider"
+            [id]="startThumbId"
+            [attr.aria-label]="resolvedStartAriaLabel()"
+            [attr.aria-labelledby]="resolvedStartAriaLabelledby()"
+            [attr.aria-describedby]="resolvedAriaDescribedby()"
+            [attr.aria-valuemin]="min()"
+            [attr.aria-valuemax]="effectiveStartMax()"
+            [attr.aria-valuenow]="startValue()"
+            [attr.aria-valuetext]="format(startValue())"
+            [attr.aria-orientation]="'horizontal'"
+            [attr.aria-disabled]="isDisabled() || null"
+            [attr.aria-required]="required() || null"
+            [attr.aria-invalid]="errorState() || null"
+            [attr.data-dragging]="activeThumb() === 'start'"
+            [attr.tabindex]="isDisabled() ? -1 : 0"
+            (pointerdown)="onThumbPointerDown($event, 'start')"
+            (keydown)="onThumbKeyDown($event, 'start')"
+            (blur)="onThumbBlur()"
+          >
+            <span
+              aria-hidden="true"
+              [class]="bubbleClassFor('start')"
+            >{{ format(startValue()) }}</span>
+          </button>
+          <button
+            type="button"
+            #endThumb
+            [class]="thumbClasses()"
+            [style.left.%]="endPct()"
+            role="slider"
+            [id]="endThumbId"
+            [attr.aria-label]="resolvedEndAriaLabel()"
+            [attr.aria-labelledby]="resolvedEndAriaLabelledby()"
+            [attr.aria-describedby]="resolvedAriaDescribedby()"
+            [attr.aria-valuemin]="effectiveEndMin()"
+            [attr.aria-valuemax]="max()"
+            [attr.aria-valuenow]="endValue()"
+            [attr.aria-valuetext]="format(endValue())"
+            [attr.aria-orientation]="'horizontal'"
+            [attr.aria-disabled]="isDisabled() || null"
+            [attr.aria-required]="required() || null"
+            [attr.aria-invalid]="errorState() || null"
+            [attr.data-dragging]="activeThumb() === 'end'"
+            [attr.tabindex]="isDisabled() ? -1 : 0"
+            (pointerdown)="onThumbPointerDown($event, 'end')"
+            (keydown)="onThumbKeyDown($event, 'end')"
+            (blur)="onThumbBlur()"
+          >
+            <span
+              aria-hidden="true"
+              [class]="bubbleClassFor('end')"
+            >{{ format(endValue()) }}</span>
+          </button>
+        } @else {
+          <button
+            type="button"
+            #singleThumb
+            [class]="thumbClasses()"
+            [style.left.%]="singlePct()"
+            role="slider"
+            [id]="singleThumbId"
+            [attr.aria-label]="resolvedSingleAriaLabel()"
+            [attr.aria-labelledby]="resolvedSingleAriaLabelledby()"
+            [attr.aria-describedby]="resolvedAriaDescribedby()"
+            [attr.aria-valuemin]="min()"
+            [attr.aria-valuemax]="max()"
+            [attr.aria-valuenow]="singleValue()"
+            [attr.aria-valuetext]="format(singleValue())"
+            [attr.aria-orientation]="'horizontal'"
+            [attr.aria-disabled]="isDisabled() || null"
+            [attr.aria-required]="required() || null"
+            [attr.aria-invalid]="errorState() || null"
+            [attr.data-dragging]="activeThumb() === 'single'"
+            [attr.tabindex]="isDisabled() ? -1 : 0"
+            (pointerdown)="onThumbPointerDown($event, 'single')"
+            (keydown)="onThumbKeyDown($event, 'single')"
+            (blur)="onThumbBlur()"
+          >
+            <span
+              aria-hidden="true"
+              [class]="bubbleClassFor('single')"
+            >{{ format(singleValue()) }}</span>
+          </button>
+        }
+      </div>
+    </div>
+
+    @if (hasMarkLabels()) {
+      <div [class]="markLabelsRowClasses()" aria-hidden="true">
+        @for (m of resolvedMarks(); track m.value) {
+          <span [class]="markLabelClasses()" [style.left.%]="valuePct(m.value)">
+            {{ m.label ?? format(m.value) }}
+          </span>
+        }
+      </div>
+    }
+
+    @if (showMinMax()) {
+      <div [class]="minMaxRowClasses()" aria-hidden="true">
+        <span>{{ format(min()) }}</span>
+        <span>{{ format(max()) }}</span>
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SliderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-slider',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @if (hasHeader()) {
+      <div [class]="headerClasses()">
+        @if (label(); as lbl) {
+          <span [id]="labelId" [class]="labelClasses()">{{ lbl }}</span>
+        } @else {
+          <span></span>
+        }
+        @if (showValue()) {
+          <span [class]="valueTextClasses()">{{ headerValueText() }}</span>
+        }
+      </div>
+    }
+    @if (description(); as desc) {
+      <span [id]="descriptionId" [class]="descriptionClasses()">{{ desc }}</span>
+    }
+
+    <div
+      #region
+      [class]="regionClasses()"
+      (pointerdown)="onTrackPointerDown($event)"
+    >
+      <div [class]="railClasses()">
+        <div
+          [class]="fillClasses()"
+          [style.left.%]="fillLeftPct()"
+          [style.width.%]="fillWidthPct()"
+        ></div>
+
+        @if (hasVisibleMarks()) {
+          <div [class]="marksRowClasses()">
+            @for (m of resolvedMarks(); track m.value) {
+              <span
+                [class]="markClassFor(m.value)"
+                [style.left.%]="valuePct(m.value)"
+              ></span>
+            }
+          </div>
+        }
+
+        @if (range()) {
+          <button
+            type="button"
+            #startThumb
+            [class]="thumbClasses()"
+            [style.left.%]="startPct()"
+            role="slider"
+            [id]="startThumbId"
+            [attr.aria-label]="resolvedStartAriaLabel()"
+            [attr.aria-labelledby]="resolvedStartAriaLabelledby()"
+            [attr.aria-describedby]="resolvedAriaDescribedby()"
+            [attr.aria-valuemin]="min()"
+            [attr.aria-valuemax]="effectiveStartMax()"
+            [attr.aria-valuenow]="startValue()"
+            [attr.aria-valuetext]="format(startValue())"
+            [attr.aria-orientation]="'horizontal'"
+            [attr.aria-disabled]="isDisabled() || null"
+            [attr.aria-required]="required() || null"
+            [attr.aria-invalid]="errorState() || null"
+            [attr.data-dragging]="activeThumb() === 'start'"
+            [attr.tabindex]="isDisabled() ? -1 : 0"
+            (pointerdown)="onThumbPointerDown($event, 'start')"
+            (keydown)="onThumbKeyDown($event, 'start')"
+            (blur)="onThumbBlur()"
+          >
+            <span
+              aria-hidden="true"
+              [class]="bubbleClassFor('start')"
+            >{{ format(startValue()) }}</span>
+          </button>
+          <button
+            type="button"
+            #endThumb
+            [class]="thumbClasses()"
+            [style.left.%]="endPct()"
+            role="slider"
+            [id]="endThumbId"
+            [attr.aria-label]="resolvedEndAriaLabel()"
+            [attr.aria-labelledby]="resolvedEndAriaLabelledby()"
+            [attr.aria-describedby]="resolvedAriaDescribedby()"
+            [attr.aria-valuemin]="effectiveEndMin()"
+            [attr.aria-valuemax]="max()"
+            [attr.aria-valuenow]="endValue()"
+            [attr.aria-valuetext]="format(endValue())"
+            [attr.aria-orientation]="'horizontal'"
+            [attr.aria-disabled]="isDisabled() || null"
+            [attr.aria-required]="required() || null"
+            [attr.aria-invalid]="errorState() || null"
+            [attr.data-dragging]="activeThumb() === 'end'"
+            [attr.tabindex]="isDisabled() ? -1 : 0"
+            (pointerdown)="onThumbPointerDown($event, 'end')"
+            (keydown)="onThumbKeyDown($event, 'end')"
+            (blur)="onThumbBlur()"
+          >
+            <span
+              aria-hidden="true"
+              [class]="bubbleClassFor('end')"
+            >{{ format(endValue()) }}</span>
+          </button>
+        } @else {
+          <button
+            type="button"
+            #singleThumb
+            [class]="thumbClasses()"
+            [style.left.%]="singlePct()"
+            role="slider"
+            [id]="singleThumbId"
+            [attr.aria-label]="resolvedSingleAriaLabel()"
+            [attr.aria-labelledby]="resolvedSingleAriaLabelledby()"
+            [attr.aria-describedby]="resolvedAriaDescribedby()"
+            [attr.aria-valuemin]="min()"
+            [attr.aria-valuemax]="max()"
+            [attr.aria-valuenow]="singleValue()"
+            [attr.aria-valuetext]="format(singleValue())"
+            [attr.aria-orientation]="'horizontal'"
+            [attr.aria-disabled]="isDisabled() || null"
+            [attr.aria-required]="required() || null"
+            [attr.aria-invalid]="errorState() || null"
+            [attr.data-dragging]="activeThumb() === 'single'"
+            [attr.tabindex]="isDisabled() ? -1 : 0"
+            (pointerdown)="onThumbPointerDown($event, 'single')"
+            (keydown)="onThumbKeyDown($event, 'single')"
+            (blur)="onThumbBlur()"
+          >
+            <span
+              aria-hidden="true"
+              [class]="bubbleClassFor('single')"
+            >{{ format(singleValue()) }}</span>
+          </button>
+        }
+      </div>
+    </div>
+
+    @if (hasMarkLabels()) {
+      <div [class]="markLabelsRowClasses()" aria-hidden="true">
+        @for (m of resolvedMarks(); track m.value) {
+          <span [class]="markLabelClasses()" [style.left.%]="valuePct(m.value)">
+            {{ m.label ?? format(m.value) }}
+          </span>
+        }
+      </div>
+    }
+
+    @if (showMinMax()) {
+      <div [class]="minMaxRowClasses()" aria-hidden="true">
+        <span>{{ format(min()) }}</span>
+        <span>{{ format(max()) }}</span>
+      </div>
+    }
+  `,
+                    host: {
+                        '[class]': 'rootClasses()',
+                        '[attr.data-disabled]': 'isDisabled() || null',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { 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 }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], marks: [{ type: i0.Input, args: [{ isSignal: true, alias: "marks", required: false }] }], showMarkLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMarkLabels", required: false }] }], showMinMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMinMax", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], valueFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormatter", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaLabelStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelStart", required: false }] }], ariaLabelEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelEnd", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueInput: [{ type: i0.Output, args: ["input"] }], change: [{ type: i0.Output, args: ["change"] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], region: [{ type: i0.ViewChild, args: ['region', { isSignal: true }] }], startThumb: [{ type: i0.ViewChild, args: ['startThumb', { isSignal: true }] }], endThumb: [{ type: i0.ViewChild, args: ['endThumb', { isSignal: true }] }], singleThumb: [{ type: i0.ViewChild, args: ['singleThumb', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SliderComponent };
+//# sourceMappingURL=cdevhub-ngx-tw-slider.mjs.map