@cdevhub/ngx-tw 0.5.0 → 0.6.0

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

@@ -1,12 +1,11 @@
 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 { input, computed, model, output, inject, ElementRef, DestroyRef, viewChild, signal, linkedSignal, untracked, afterNextRender, isDevMode, ChangeDetectionStrategy, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NgControl, NgForm, FormGroupDirective } from '@angular/forms';
+import { NgControl } 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';
+import { wireErrorState } from '@cdevhub/ngx-tw/core';
 
 /**
  * `tw-slider` — select a single value or a contiguous range from a numeric scale.
@@ -177,11 +176,27 @@ const toNumber = (value, fallback) => {
  * ```
  */
 class SliderComponent {
-    /** Lower bound of the slider scale. Defaults to `0`. */
-    min = input(0, /* @ts-ignore */
+    /**
+     * Lower bound of the slider scale. Defaults to `0`.
+     *
+     * Accepts `undefined` so `[formField]` type-checks under `strictTemplates`:
+     * signal forms writes the `min` control binding from the field's own
+     * `min()` state, which is `number | undefined`. `undefined` resolves back to
+     * the documented default through {@link min}.
+     */
+    minInput = input(0, { ...(ngDevMode ? { debugName: "minInput" } : /* istanbul ignore next */ {}), alias: 'min' });
+    /**
+     * Upper bound of the slider scale. Defaults to `100`.
+     *
+     * Accepts `undefined` for the same reason as {@link minInput}; `undefined`
+     * resolves back to the documented default through {@link max}.
+     */
+    maxInput = input(100, { ...(ngDevMode ? { debugName: "maxInput" } : /* istanbul ignore next */ {}), alias: 'max' });
+    /** @internal Resolved lower bound — the `min` input with its documented `0` default restored when the binding resolves to `undefined`. Every internal reader goes through this, never through the raw input. */
+    min = computed(() => this.minInput() ?? 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
-    /** Upper bound of the slider scale. Defaults to `100`. */
-    max = input(100, /* @ts-ignore */
+    /** @internal Resolved upper bound — the `max` input with its documented `100` default restored when the binding resolves to `undefined`. */
+    max = computed(() => this.maxInput() ?? 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, /* @ts-ignore */
@@ -198,9 +213,26 @@ class SliderComponent {
     /** When true, prevents interaction and applies muted styling. Defaults to `false`. */
     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, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** When true, sets `aria-required="true"` on the thumb for assistive tech. Also inferred from `Validators.required` on a bound control, so a reactive/template-driven form does not have to state it twice. Defaults to `false`. */
+    requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : /* istanbul ignore next */ {}), alias: 'required' });
+    /**
+     * @internal Shared `errorState` / `required` / `errors` derivation — see
+     * `wireErrorState`. Declared here, above `required`, because class field
+     * initializers run in declaration order.
+     */
+    errorWiring = wireErrorState({
+        ngControl: () => this.ngControl,
+        matcher: () => this.errorStateMatcher(),
+        required: () => this.requiredInput(),
+        // Read focus so blur-driven `touched` transitions repaint the error
+        // border even when the underlying control's status/value didn't change.
+        track: [() => this.focusedThumb()],
+    });
+    /**
+     * @internal Resolved required state: the `required` input OR'd with
+     * `Validators.required` on a bound `NgControl`.
+     */
+    required = this.errorWiring.required;
     /** When true, the slider selects a `[start, end]` range and renders two thumbs. Defaults to `false`. */
     range = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
@@ -228,11 +260,11 @@ class SliderComponent {
     /** Optional form name attribute. Purely informational — the component does not render a native input. */
     name = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-    /** Accessible name for the single-value thumb when no visible label is provided. */
+    /** Accessible name for the single-value thumb when no visible label is provided. Defaults to `undefined`. Alias: `aria-label`. */
     ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
-    /** ID of an external element labelling the single-value thumb. */
+    /** ID of an external element labelling the single-value thumb. Defaults to `undefined`. Alias: `aria-labelledby`. */
     ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
-    /** ID of an external element describing the slider. */
+    /** ID of an external element describing the slider. Defaults to `undefined`. Alias: `aria-describedby`. */
     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', /* @ts-ignore */
@@ -240,12 +272,38 @@ class SliderComponent {
     /** Accessible name for the end (upper) thumb in range mode. Defaults to `"Maximum"`. */
     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. */
+    /**
+     * Two-way bound slider value. A `number` for single mode, or `[start, end]`
+     * for range mode. Updates on every interaction. Defaults to `0`.
+     *
+     * The two-way binding mints a `valueChange` output, which fires on every
+     * value mutation the user causes — each drag move and each key step, plus the
+     * commit. Note the slider differs from `tw-checkbox` / `tw-switch` /
+     * `tw-radio-group`, where the minted output is the *any-change* channel:
+     * here, a programmatic write from a bound form (`FormControl.setValue`,
+     * `ngModel`) reaches the rendered value through the CVA path without passing
+     * through this model, so it does **not** emit `valueChange`. To observe
+     * programmatic writes, use the form control's own `valueChanges`.
+     *
+     * For the two user-gesture channels, prefer `(input)` for live feedback and
+     * `(change)` for commit — see their docs below.
+     */
     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. */
+    /**
+     * Fires continuously while the user drags or holds a key — the *live* channel,
+     * for previewing a value that is not yet committed. Payload matches the
+     * current `value`. Template event name is `input` — the TS-side identifier is
+     * `valueInput` to avoid shadowing the imported `input` factory. Never fires
+     * for a programmatic write.
+     */
     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`. */
+    /**
+     * Fires when the user commits a change (pointer release, key release, or blur
+     * after keyboard change) — the *commit* channel, for saving or querying on a
+     * settled value. Payload matches the current `value`. Never fires for a
+     * programmatic write; use `(input)` if you need every intermediate 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, /* @ts-ignore */
@@ -255,26 +313,8 @@ class SliderComponent {
     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, /* @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();
-        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);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
+    errorState = this.errorWiring.errorState;
     region = viewChild.required('region', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "region" }] : /* istanbul ignore next */ []));
     startThumb = viewChild('startThumb', /* @ts-ignore */
@@ -304,7 +344,16 @@ class SliderComponent {
     ...(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 */
+    // `min()` is read untracked deliberately. It is only the fallback for a
+    // non-numeric `value`, but tracking it made a bounds change re-run this
+    // computation — and `writeValue()` sets this signal directly without ever
+    // writing the `value` model, so the re-derivation recomputed from a model the
+    // CVA write never updated and silently discarded the written value. A
+    // reactive-forms slider whose `min` moved lost its value and snapped to the
+    // new bound. Clamping is unaffected: `singleValue` clamps on read, so a
+    // bounds change still constrains what is displayed and emitted — it just no
+    // longer destroys what was stored.
+    internalSingle = linkedSignal(() => toNumber(this.value(), untracked(() => 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, /* @ts-ignore */
@@ -876,21 +925,7 @@ class SliderComponent {
         // 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.errorWiring.connect();
         this.destroyRef.onDestroy(() => {
             this.focusMonitor.stopMonitoring(this.elementRef);
             for (const { target } of this.capturedPointers.values()) {
@@ -902,7 +937,7 @@ class SliderComponent {
         });
     }
     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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SliderComponent, isStandalone: true, selector: "tw-slider", inputs: { minInput: { classPropertyName: "minInput", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, maxInput: { classPropertyName: "maxInput", 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 }, requiredInput: { classPropertyName: "requiredInput", 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) {
@@ -1213,7 +1248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[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 }] }] } });
+        }], ctorParameters: () => [], propDecorators: { minInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], maxInput: [{ 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 }] }], requiredInput: [{ 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.