@cdevhub/ngx-tw 0.2.1 → 0.4.0

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

@@ -178,39 +178,56 @@ const toNumber = (value, fallback) => {
  */
 class SliderComponent {
     /** Lower bound of the slider scale. Defaults to `0`. */
-    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    min = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
     /** Upper bound of the slider scale. Defaults to `100`. */
-    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    max = input(100, /* @ts-ignore */
+    ...(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 */ []));
+    step = input(1, /* @ts-ignore */
+    ...(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 */ []));
+    color = input('primary', /* @ts-ignore */
+    ...(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 */ []));
+    size = input('md', /* @ts-ignore */
+    ...(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 */ []));
+    variant = input('solid', /* @ts-ignore */
+    ...(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 */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(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 */ []));
+    required = input(false, /* @ts-ignore */
+    ...(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 */ []));
+    range = input(false, /* @ts-ignore */
+    ...(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 */ []));
+    marks = input(false, /* @ts-ignore */
+    ...(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 */ []));
+    showMarkLabels = input(false, /* @ts-ignore */
+    ...(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 */ []));
+    showMinMax = input(false, /* @ts-ignore */
+    ...(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 */ []));
+    showValue = input(false, /* @ts-ignore */
+    ...(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 */ []));
+    label = input(undefined, /* @ts-ignore */
+    ...(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 */ []));
+    description = input(undefined, /* @ts-ignore */
+    ...(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 */ []));
+    valueFormatter = input(undefined, /* @ts-ignore */
+    ...(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 */ []));
+    name = input(undefined, /* @ts-ignore */
+    ...(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. */
@@ -218,17 +235,21 @@ class SliderComponent {
     /** 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 */ []));
+    ariaLabelStart = input('Minimum', /* @ts-ignore */
+    ...(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 */ []));
+    ariaLabelEnd = input('Maximum', /* @ts-ignore */
+    ...(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 */ []));
+    value = model(0, /* @ts-ignore */
+    ...(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 */ []));
+    errorStateMatcher = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
     focusMonitor = inject(FocusMonitor);
     elementRef = inject((ElementRef));
     destroyRef = inject(DestroyRef);
@@ -237,8 +258,10 @@ class SliderComponent {
     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 */ []));
+    _ngControlRev = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_ngControlRev" }] : /* istanbul ignore next */ []));
+    _formSubmitRev = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formSubmitRev" }] : /* istanbul ignore next */ []));
     /** Whether the form control is in an error state per the configured `ErrorStateMatcher`. */
     errorState = computed(() => {
         this._ngControlRev();
@@ -250,14 +273,20 @@ class SliderComponent {
         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 */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
+    region = viewChild.required('region', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "region" }] : /* istanbul ignore next */ []));
+    startThumb = viewChild('startThumb', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startThumb" }] : /* istanbul ignore next */ []));
+    endThumb = viewChild('endThumb', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endThumb" }] : /* istanbul ignore next */ []));
+    singleThumb = viewChild('singleThumb', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "singleThumb" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     onTouched = () => { };
-    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
     /** @internal ID of the host element. */
     uid = nextId++;
     /** @internal */
@@ -271,13 +300,18 @@ class SliderComponent {
     /** @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 */ []));
+    internalStart = linkedSignal(() => toRange(this.value())[0], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalStart" }] : /* istanbul ignore next */ []));
+    internalEnd = linkedSignal(() => toRange(this.value())[1], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalEnd" }] : /* istanbul ignore next */ []));
+    internalSingle = linkedSignal(() => toNumber(this.value(), this.min()), /* @ts-ignore */
+    ...(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 */ []));
+    activeThumb = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeThumb" }] : /* istanbul ignore next */ []));
     /** @internal Which thumb is focused (for bubble visibility). */
-    focusedThumb = signal(null, ...(ngDevMode ? [{ debugName: "focusedThumb" }] : /* istanbul ignore next */ []));
+    focusedThumb = signal(null, /* @ts-ignore */
+    ...(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. */
@@ -298,22 +332,26 @@ class SliderComponent {
     }
     // ── Derived state ─────────────────────────────────────────
     /** @internal Effective disabled state (input OR set via CVA). */
-    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(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 */ []));
+    hasHeader = computed(() => !!this.label() || this.showValue(), /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scaleRange" }] : /* istanbul ignore next */ []));
     /** @internal Whether marks are resolved as a visible list. */
     marksResolved = computed(() => {
         const source = this.marks();
@@ -332,66 +370,89 @@ class SliderComponent {
             out.push({ value: Math.round(v * 1e6) / 1e6 });
         }
         return out;
-    }, ...(ngDevMode ? [{ debugName: "marksResolved" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "marksResolved" }] : /* istanbul ignore next */ []));
     /** @internal */
-    resolvedMarks = computed(() => this.marksResolved(), ...(ngDevMode ? [{ debugName: "resolvedMarks" }] : /* istanbul ignore next */ []));
+    resolvedMarks = computed(() => this.marksResolved(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMarks" }] : /* istanbul ignore next */ []));
     /** @internal */
-    hasVisibleMarks = computed(() => this.marksResolved().length > 0, ...(ngDevMode ? [{ debugName: "hasVisibleMarks" }] : /* istanbul ignore next */ []));
+    hasVisibleMarks = computed(() => this.marksResolved().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasVisibleMarks" }] : /* istanbul ignore next */ []));
     /** @internal */
-    hasMarkLabels = computed(() => this.showMarkLabels() && this.marksResolved().length > 0, ...(ngDevMode ? [{ debugName: "hasMarkLabels" }] : /* istanbul ignore next */ []));
+    hasMarkLabels = computed(() => this.showMarkLabels() && this.marksResolved().length > 0, /* @ts-ignore */
+    ...(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 */ []));
+    startValue = computed(() => this.clampAndSnap(Math.min(this.internalStart(), this.internalEnd())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startValue" }] : /* istanbul ignore next */ []));
     /** @internal */
-    endValue = computed(() => this.clampAndSnap(Math.max(this.internalStart(), this.internalEnd())), ...(ngDevMode ? [{ debugName: "endValue" }] : /* istanbul ignore next */ []));
+    endValue = computed(() => this.clampAndSnap(Math.max(this.internalStart(), this.internalEnd())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endValue" }] : /* istanbul ignore next */ []));
     /** @internal */
-    singleValue = computed(() => this.clampAndSnap(this.internalSingle()), ...(ngDevMode ? [{ debugName: "singleValue" }] : /* istanbul ignore next */ []));
+    singleValue = computed(() => this.clampAndSnap(this.internalSingle()), /* @ts-ignore */
+    ...(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 */ []));
+    effectiveStartMax = computed(() => this.endValue(), /* @ts-ignore */
+    ...(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 */ []));
+    effectiveEndMin = computed(() => this.startValue(), /* @ts-ignore */
+    ...(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 */ []));
+    singlePct = computed(() => this.valuePct(this.singleValue()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "singlePct" }] : /* istanbul ignore next */ []));
     /** @internal */
-    startPct = computed(() => this.valuePct(this.startValue()), ...(ngDevMode ? [{ debugName: "startPct" }] : /* istanbul ignore next */ []));
+    startPct = computed(() => this.valuePct(this.startValue()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startPct" }] : /* istanbul ignore next */ []));
     /** @internal */
-    endPct = computed(() => this.valuePct(this.endValue()), ...(ngDevMode ? [{ debugName: "endPct" }] : /* istanbul ignore next */ []));
+    endPct = computed(() => this.valuePct(this.endValue()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endPct" }] : /* istanbul ignore next */ []));
     /** @internal Fill segment position. */
-    fillLeftPct = computed(() => (this.range() ? this.startPct() : 0), ...(ngDevMode ? [{ debugName: "fillLeftPct" }] : /* istanbul ignore next */ []));
+    fillLeftPct = computed(() => (this.range() ? this.startPct() : 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fillLeftPct" }] : /* istanbul ignore next */ []));
     /** @internal */
-    fillWidthPct = computed(() => this.range() ? this.endPct() - this.startPct() : this.singlePct(), ...(ngDevMode ? [{ debugName: "fillWidthPct" }] : /* istanbul ignore next */ []));
+    fillWidthPct = computed(() => this.range() ? this.endPct() - this.startPct() : this.singlePct(), /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(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 */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
     /** @internal */
-    rootClasses = computed(() => this.variantResult().root(), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    rootClasses = computed(() => this.variantResult().root(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    headerClasses = computed(() => this.variantResult().header(), ...(ngDevMode ? [{ debugName: "headerClasses" }] : /* istanbul ignore next */ []));
+    headerClasses = computed(() => this.variantResult().header(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    labelClasses = computed(() => this.variantResult().label(), ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
+    labelClasses = computed(() => this.variantResult().label(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    valueTextClasses = computed(() => this.variantResult().valueText(), ...(ngDevMode ? [{ debugName: "valueTextClasses" }] : /* istanbul ignore next */ []));
+    valueTextClasses = computed(() => this.variantResult().valueText(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueTextClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    descriptionClasses = computed(() => this.variantResult().description(), ...(ngDevMode ? [{ debugName: "descriptionClasses" }] : /* istanbul ignore next */ []));
+    descriptionClasses = computed(() => this.variantResult().description(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "descriptionClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    regionClasses = computed(() => this.variantResult().region(), ...(ngDevMode ? [{ debugName: "regionClasses" }] : /* istanbul ignore next */ []));
+    regionClasses = computed(() => this.variantResult().region(), /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "railClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
     fillClasses = computed(() => {
         const base = this.variantResult().fill();
@@ -403,17 +464,23 @@ class SliderComponent {
             return `${base} ${FILL_SOLID[color]} ${FILL_OUTLINE_BORDER[color]}`;
         }
         return `${base} ${FILL_SOLID[color]}`;
-    }, ...(ngDevMode ? [{ debugName: "fillClasses" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fillClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    marksRowClasses = computed(() => this.variantResult().marksRow(), ...(ngDevMode ? [{ debugName: "marksRowClasses" }] : /* istanbul ignore next */ []));
+    marksRowClasses = computed(() => this.variantResult().marksRow(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "marksRowClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    markLabelsRowClasses = computed(() => this.variantResult().markLabelsRow(), ...(ngDevMode ? [{ debugName: "markLabelsRowClasses" }] : /* istanbul ignore next */ []));
+    markLabelsRowClasses = computed(() => this.variantResult().markLabelsRow(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markLabelsRowClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    markLabelClasses = computed(() => this.variantResult().markLabel(), ...(ngDevMode ? [{ debugName: "markLabelClasses" }] : /* istanbul ignore next */ []));
+    markLabelClasses = computed(() => this.variantResult().markLabel(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markLabelClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    minMaxRowClasses = computed(() => this.variantResult().minMaxRow(), ...(ngDevMode ? [{ debugName: "minMaxRowClasses" }] : /* istanbul ignore next */ []));
+    minMaxRowClasses = computed(() => this.variantResult().minMaxRow(), /* @ts-ignore */
+    ...(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 */ []));
+    thumbClasses = computed(() => `${this.variantResult().thumb()} ${THUMB_BORDER[this.color()]} ${FOCUS_RING[this.color()]}`, /* @ts-ignore */
+    ...(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
@@ -431,7 +498,8 @@ class SliderComponent {
             map.set(mark.value, inside ? insideClass : outsideClass);
         }
         return { map, outsideClass };
-    }, ...(ngDevMode ? [{ debugName: "markClassMap" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(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();
@@ -456,7 +524,8 @@ class SliderComponent {
             start: classFor('start'),
             end: classFor('end'),
         };
-    }, ...(ngDevMode ? [{ debugName: "bubbleClassMap" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bubbleClassMap" }] : /* istanbul ignore next */ []));
     /** @internal Bubble visibility depends on drag / focus / hover state. */
     bubbleClassFor(thumb) {
         return this.bubbleClassMap()[thumb];
@@ -468,7 +537,8 @@ class SliderComponent {
         if (external)
             return external;
         return this.description() ? this.descriptionId : null;
-    }, ...(ngDevMode ? [{ debugName: "resolvedAriaDescribedby" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAriaDescribedby" }] : /* istanbul ignore next */ []));
     /** @internal */
     resolvedSingleAriaLabel = computed(() => {
         if (this.label())
@@ -476,37 +546,43 @@ class SliderComponent {
         if (this.ariaLabelledby())
             return null;
         return this.ariaLabel() ?? null;
-    }, ...(ngDevMode ? [{ debugName: "resolvedSingleAriaLabel" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedEndAriaLabelledby" }] : /* istanbul ignore next */ []));
     // ── Interactions ───────────────────────────────────────────
     /** Track click: move the nearest thumb to the clicked position and begin a drag. */
     onTrackPointerDown(event) {
@@ -825,8 +901,8 @@ class SliderComponent {
             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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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) {
@@ -977,7 +1053,7 @@ class SliderComponent {
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tw-slider',