@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/fesm2022/slotted-angular-slider.mjs

@@ -0,0 +1,586 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, numberAttribute, input, booleanAttribute, output, ElementRef, viewChild, HostAttributeToken, signal, computed, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { createNumberFormat } from '@slotted/core/number';
+import { normaliseValues, fractionOfValue, thumbBounds, nearestThumb, fractionAtPoint, valueAtFraction, moveThumb, sameValues } from '@slotted/core/slider';
+import { createControllable } from '@slotted/core/state';
+import { SlField } from '@slotted/angular/field';
+import { injectLocale } from '@slotted/angular/i18n';
+
+const FALLBACK = {
+    orientation: 'horizontal',
+    size: 'md',
+    valueLabel: 'auto',
+};
+const SLIDER_DEFAULTS = new InjectionToken('slotted slider defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once what its sliders look like, rather than
+ * repeating the same inputs on every scale. A slider that states any of them
+ * itself still wins, and a slider inside a field takes the field's step before
+ * this token's. The locale its values are written in comes from the language
+ * in force (`provideSlotted`).
+ */
+function provideSliderDefaults(defaults) {
+    return {
+        provide: SLIDER_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a slider renders as here, before it states anything of its own. */
+function injectSliderDefaults() {
+    return inject(SLIDER_DEFAULTS);
+}
+
+/** `undefined` stays absent; anything else becomes a number. */
+const optionalNumber = (value) => value === undefined || value === null || value === '' ? undefined : numberAttribute(value);
+const toArray = (value) => Array.isArray(value) ? [...value] : [value];
+/**
+ * A scale, a rail and one thumb per value.
+ *
+ * **Every thumb is a real `input[type="range"]`.** Angular Material's own
+ * thumbs are `input[matSliderThumb]` elements, and the element is taken for the
+ * same reasons: it carries the `slider` role, `aria-valuenow`, `aria-valuemin`,
+ * `aria-valuemax`, form submission, form reset and `disabled` without the
+ * family writing any of them. It is invisible and unhittable, filling the thumb
+ * it lives in, so the thumb a reader sees is this family's own element.
+ *
+ * **The family owns the keyboard and the pointer.** Browsers disagree about a
+ * range input's larger step — Chrome moves Page Up by a tenth of the range and
+ * Firefox by one step — and `largeStep` has to mean one thing in both bindings.
+ *
+ * **Two thumbs cannot cross, and the accessibility tree says so.** Each input's
+ * own `min` and `max` follow its neighbour, which is what the APG's multi-thumb
+ * pattern requires of the dependent sliders' announced range.
+ *
+ * **Unset means ask the field.** `disabled`, `readOnly` and `invalid` default to
+ * `undefined` rather than `false`.
+ */
+class SlSlider {
+    /**
+     * Present means the consumer owns the value, for the life of the component.
+     * An array makes a range; a number makes one thumb, and the shape handed in
+     * is the shape every request carries back.
+     */
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** The value an uncontrolled slider starts from, read once. */
+    defaultValue = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+    min = input(0, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: (raw) => optionalNumber(raw) ?? 0 });
+    max = input(100, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: (raw) => optionalNumber(raw) ?? 100 });
+    step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: (raw) => optionalNumber(raw) ?? 1 });
+    /** The amount `Shift` and the page keys move by. Defaults to `step * 10`. */
+    largeStep = input(undefined, { ...(ngDevMode ? { debugName: "largeStep" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    /** How many steps must stay between two neighbouring thumbs. */
+    minStepsBetween = input(0, { ...(ngDevMode ? { debugName: "minStepsBetween" } : /* istanbul ignore next */ {}), transform: (raw) => optionalNumber(raw) ?? 0 });
+    /** Where the filled portion starts. Defaults to `min`. */
+    origin = input('min', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "origin" }] : /* istanbul ignore next */ []));
+    /** The ticks drawn beside the rail. A mark's label becomes its announced value. */
+    marks = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "marks" }] : /* istanbul ignore next */ []));
+    /** How the value is written, through `Intl.NumberFormat`. */
+    format = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    /** BCP 47. Unset, the language in force decides. */
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    /** The accessible name of each thumb, in order. */
+    thumbLabels = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "thumbLabels" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    orientation = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    valueLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueLabel" }] : /* istanbul ignore next */ []));
+    /** Unstated rather than `false`, so the control defers to the field. */
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: (raw) => (raw === undefined ? undefined : booleanAttribute(raw)) });
+    readOnly = input(undefined, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: (raw) => (raw === undefined ? undefined : booleanAttribute(raw)) });
+    invalid = input(undefined, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: (raw) => (raw === undefined ? undefined : booleanAttribute(raw)) });
+    /**
+     * One output for one transition, carrying the value, the value it replaces,
+     * the reason, the originating event and `cancel()`. There is no `[(value)]`,
+     * because a two-way binding has one slot and can carry none of those; a form
+     * gets the same movement through `ControlValueAccessor`.
+     */
+    valueChange = output();
+    /**
+     * The end of a drag, or a key that settled the value. A drag emits a hundred
+     * changes and one commit; this is the commit.
+     */
+    valueCommit = output();
+    element = inject(ElementRef).nativeElement;
+    track = viewChild('track', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "track" }] : /* istanbul ignore next */ []));
+    field = inject(SlField, { optional: true });
+    defaults = injectSliderDefaults();
+    appLocale = injectLocale();
+    writtenId = inject(new HostAttributeToken('id'), { optional: true });
+    writtenName = inject(new HostAttributeToken('name'), { optional: true });
+    writtenForm = inject(new HostAttributeToken('form'), { optional: true });
+    writtenLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    writtenDescribedBy = inject(new HostAttributeToken('aria-describedby'), {
+        optional: true,
+    });
+    writtenInvalid = inject(new HostAttributeToken('aria-invalid'), {
+        optional: true,
+    });
+    writtenRequired = inject(new HostAttributeToken('aria-required'), {
+        optional: true,
+    });
+    /** What the family holds when nobody else owns it. */
+    own = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "own" }] : /* istanbul ignore next */ []));
+    formValue = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formValue" }] : /* istanbul ignore next */ []));
+    formDisabled = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    dragging = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    onChangeFn = () => undefined;
+    onTouchedFn = () => undefined;
+    scale = computed(() => ({
+        min: this.min(),
+        max: this.max(),
+        step: this.step(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []));
+    /** The shape the consumer handed in is the shape every request carries back. */
+    isRange = computed(() => {
+        const bound = this.value();
+        return Array.isArray(bound ?? this.defaultValue());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRange" }] : /* istanbul ignore next */ []));
+    values = computed(() => {
+        const bound = this.value();
+        const held = bound ?? this.formValue() ?? this.own() ?? this.defaultValue();
+        return normaliseValues(toArray(held), this.scale());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
+    formatter = computed(() => {
+        const options = this.format();
+        return createNumberFormat({
+            locale: this.locale() ?? this.appLocale(),
+            ...(options === undefined ? {} : { options }),
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? this.field?.resolvedSize() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedOrientation = computed(() => this.orientation() ?? this.defaults.orientation, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedOrientation" }] : /* istanbul ignore next */ []));
+    resolvedValueLabel = computed(() => this.valueLabel() ?? this.defaults.valueLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedValueLabel" }] : /* istanbul ignore next */ []));
+    resolvedDisabled = computed(() => this.disabled() ?? this.formDisabled() ?? this.field?.resolvedDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDisabled" }] : /* istanbul ignore next */ []));
+    resolvedReadOnly = computed(() => this.readOnly() ?? this.field?.resolvedReadOnly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedReadOnly" }] : /* istanbul ignore next */ []));
+    resolvedInvalid = computed(() => this.invalid() ?? this.field?.invalid(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedInvalid" }] : /* istanbul ignore next */ []));
+    inert = computed(() => this.resolvedDisabled() === true || this.resolvedReadOnly() === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inert" }] : /* istanbul ignore next */ []));
+    controlId = computed(() => this.writtenId ?? this.field?.ids().control ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    submissionName = computed(() => this.writtenName, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "submissionName" }] : /* istanbul ignore next */ []));
+    submissionForm = computed(() => this.writtenForm, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "submissionForm" }] : /* istanbul ignore next */ []));
+    markList = computed(() => {
+        const marks = this.marks();
+        if (marks === undefined)
+            return [];
+        return marks.map((mark) => (typeof mark === 'number' ? { value: mark } : mark));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markList" }] : /* istanbul ignore next */ []));
+    marksMode = computed(() => {
+        const marks = this.markList();
+        if (marks.length === 0)
+            return null;
+        return marks.some((mark) => mark.label !== undefined) ? 'labelled' : 'ticks';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "marksMode" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => {
+        const merged = [this.writtenDescribedBy, this.field?.describedBy()].filter(Boolean);
+        return merged.length === 0 ? null : merged.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    ariaInvalid = computed(() => this.writtenInvalid ?? (this.resolvedInvalid() === true ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
+    ariaRequired = computed(() => this.writtenRequired ?? (this.field?.required() === true ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
+    /** Where the fill starts, which is an end of the scale or a point on it. */
+    span = computed(() => {
+        const values = this.values();
+        const scale = this.scale();
+        const origin = this.origin();
+        const originValue = origin === 'min' ? scale.min : origin === 'max' ? scale.max : origin;
+        const first = values[0] ?? scale.min;
+        const last = values[values.length - 1] ?? scale.min;
+        const start = values.length > 1 ? first : Math.min(originValue, first);
+        const end = values.length > 1 ? last : Math.max(originValue, first);
+        return {
+            start: fractionOfValue(start, scale) * 100,
+            end: fractionOfValue(end, scale) * 100,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "span" }] : /* istanbul ignore next */ []));
+    outputText = computed(() => this.values()
+        .map((value) => this.valueTextOf(value))
+        .join(' – '), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outputText" }] : /* istanbul ignore next */ []));
+    /** The native element, for `focus()` on the root and for a consumer's own query. */
+    get sliderElement() {
+        return this.element;
+    }
+    /** The one action a value cannot express: putting focus on a named thumb. */
+    focusThumb(index = 0) {
+        this.thumbInputs()[index]?.focus();
+    }
+    percentOf(value) {
+        return fractionOfValue(value, this.scale()) * 100;
+    }
+    edgeOf(value) {
+        if (value === this.min())
+            return 'start';
+        if (value === this.max())
+            return 'end';
+        return null;
+    }
+    boundsAt(index) {
+        return thumbBounds({
+            ...this.scale(),
+            values: this.values(),
+            index,
+            minStepsBetween: this.minStepsBetween(),
+        });
+    }
+    thumbLabelAt(index) {
+        const labels = this.thumbLabels();
+        if (labels?.[index] !== undefined)
+            return labels[index];
+        return this.values().length > 1 ? null : this.writtenLabel;
+    }
+    /**
+     * The APG names `aria-valuetext` for a value that is not user-friendly, and
+     * gives "Monday" as its example. A mark that already carries a label is that
+     * string, so a five-step quality scale announces "Medium" rather than "50".
+     */
+    valueTextOf(value) {
+        const labelled = this.markList().find((mark) => mark.value === value && mark.label !== undefined);
+        return labelled?.label ?? this.formatter().format(value);
+    }
+    onTouched() {
+        this.onTouchedFn();
+    }
+    writeValue(value) {
+        this.formValue.set(value === null || value === undefined ? null : normaliseValues(toArray(value), this.scale()));
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    onPointerDown(event) {
+        if (this.inert() || event.button !== 0)
+            return;
+        const target = this.valueAtPointer(event);
+        if (target === null)
+            return;
+        const index = nearestThumb(this.values(), target);
+        if (index === -1)
+            return;
+        event.preventDefault();
+        this.thumbInputs()[index]?.focus();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        this.dragging.set(index);
+        this.move(index, target, 'pointer', event);
+    }
+    onPointerMove(event) {
+        const index = this.dragging();
+        if (index === null)
+            return;
+        const target = this.valueAtPointer(event);
+        if (target === null)
+            return;
+        this.move(index, target, 'pointer', event);
+    }
+    onPointerUp(event) {
+        if (this.dragging() === null)
+            return;
+        const host = event.currentTarget;
+        if (host.hasPointerCapture(event.pointerId))
+            host.releasePointerCapture(event.pointerId);
+        this.dragging.set(null);
+        this.valueCommit.emit(this.shape(this.values()));
+    }
+    /**
+     * The whole keyboard table, and `preventDefault()` on every key in it. The
+     * inline arrows follow the reading direction — in a mirrored document
+     * `ArrowRight` moves the thumb toward the end of the track the reader sees —
+     * and the block arrows do not, because a scale has a direction and bidi is
+     * not it.
+     */
+    onKeyDown(index, event) {
+        if (event.defaultPrevented || this.inert())
+            return;
+        const step = this.step();
+        const large = this.largeStep() ?? step * 10;
+        const amount = event.shiftKey ? large : step;
+        const inlineSign = this.isRtl() ? -1 : 1;
+        const current = this.values()[index] ?? this.min();
+        const bounds = this.boundsAt(index);
+        const stepBy = (direction, by) => {
+            event.preventDefault();
+            this.move(index, current + direction * by, 'keyboard', event);
+            this.valueCommit.emit(this.shape(this.values()));
+        };
+        switch (event.key) {
+            case 'ArrowRight':
+                stepBy(inlineSign, amount);
+                return;
+            case 'ArrowLeft':
+                stepBy(-inlineSign, amount);
+                return;
+            case 'ArrowUp':
+                stepBy(1, amount);
+                return;
+            case 'ArrowDown':
+                stepBy(-1, amount);
+                return;
+            case 'PageUp':
+                stepBy(1, large);
+                return;
+            case 'PageDown':
+                stepBy(-1, large);
+                return;
+            case 'Home':
+                event.preventDefault();
+                this.move(index, bounds.min, 'keyboard', event);
+                this.valueCommit.emit(this.shape(this.values()));
+                return;
+            case 'End':
+                event.preventDefault();
+                this.move(index, bounds.max, 'keyboard', event);
+                this.valueCommit.emit(this.shape(this.values()));
+                return;
+            default:
+        }
+    }
+    thumbInputs() {
+        return Array.from(this.element.querySelectorAll('[data-part="input"]'));
+    }
+    /**
+     * Which way the inline arrows move, read from the element rather than from an
+     * input: a right-to-left document is a property of the page.
+     */
+    isRtl() {
+        const track = this.track()?.nativeElement;
+        return track !== undefined && getComputedStyle(track).direction === 'rtl';
+    }
+    valueAtPointer(event) {
+        const track = this.track()?.nativeElement;
+        if (track === undefined)
+            return null;
+        const rect = track.getBoundingClientRect();
+        const fraction = fractionAtPoint({ x: event.clientX, y: event.clientY }, { rect, orientation: this.resolvedOrientation(), rtl: this.isRtl() });
+        return valueAtFraction(fraction, this.scale());
+    }
+    shape(values) {
+        return this.isRange() ? values : (values[0] ?? this.min());
+    }
+    move(index, next, reason, source) {
+        const values = this.values();
+        const moved = moveThumb({
+            ...this.scale(),
+            values,
+            index,
+            next,
+            minStepsBetween: this.minStepsBetween(),
+        });
+        if (moved === values)
+            return;
+        this.request(moved, reason, source);
+    }
+    /**
+     * Asks to move, and moves nothing the consumer owns. A refused request stops
+     * here: a control that wrote the value regardless would show one the consumer
+     * never accepted.
+     */
+    request(next, reason, source) {
+        const current = this.values();
+        if (sameValues(next, current))
+            return;
+        let cancelled = false;
+        /* The request is built over the shape the consumer handed in, so the value
+           it carries and the value they passed are the same kind of thing — and so
+           `cancel()` still belongs to the object that owns it. */
+        const state = createControllable({
+            controlled: undefined,
+            initial: this.shape(current),
+            equals: (a, b) => (Array.isArray(a) && Array.isArray(b) ? sameValues(a, b) : Object.is(a, b)),
+            onRequest: (pending) => {
+                this.valueChange.emit(pending);
+                cancelled = pending.cancelled;
+            },
+        });
+        state.request(this.shape(next), reason, source);
+        if (cancelled)
+            return;
+        this.onChangeFn(this.shape(next));
+        /* A controlled slider never moves its own value: it asks, and waits. */
+        if (this.value() !== undefined)
+            return;
+        this.formValue.set(next);
+        this.own.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlSlider, isStandalone: true, selector: "[slSlider]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, largeStep: { classPropertyName: "largeStep", publicName: "largeStep", isSignal: true, isRequired: false, transformFunction: null }, minStepsBetween: { classPropertyName: "minStepsBetween", publicName: "minStepsBetween", isSignal: true, isRequired: false, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: true, isRequired: false, transformFunction: null }, marks: { classPropertyName: "marks", publicName: "marks", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, thumbLabels: { classPropertyName: "thumbLabels", publicName: "thumbLabels", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, valueLabel: { classPropertyName: "valueLabel", publicName: "valueLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", valueCommit: "valueCommit" }, host: { attributes: { "data-ui": "slider", "data-part": "root" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-orientation": "resolvedOrientation()", "attr.data-value-label": "resolvedValueLabel()", "attr.data-marks": "marksMode()", "attr.data-dragging": "dragging() === null ? null : ''", "attr.data-disabled": "resolvedDisabled() === true ? '' : null", "attr.data-invalid": "resolvedInvalid() === true ? '' : null", "attr.data-readonly": "resolvedReadOnly() === true ? '' : null" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlSlider), multi: true }], viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], exportAs: ["slSlider"], ngImport: i0, template: `@if (resolvedValueLabel() !== 'none') {
+      <output data-part="output" [attr.for]="controlId()">{{ outputText() }}</output>
+    }
+    <div
+      data-part="control"
+      (pointerdown)="onPointerDown($event)"
+      (pointermove)="onPointerMove($event)"
+      (pointerup)="onPointerUp($event)"
+      (pointercancel)="onPointerUp($event)"
+    >
+      <div data-part="track" #track>
+        <div
+          data-part="indicator"
+          [style.--_start]="span().start"
+          [style.--_end]="span().end"
+        ></div>
+        @for (mark of markList(); track mark.value) {
+          <span
+            data-part="mark"
+            [attr.data-edge]="edgeOf(mark.value)"
+            [style.--_position]="percentOf(mark.value)"
+          >
+            @if (mark.label !== undefined) {
+              <span data-part="mark-label">{{ mark.label }}</span>
+            }
+          </span>
+        }
+        @for (thumbValue of values(); track $index) {
+          <div
+            data-part="thumb"
+            [attr.data-index]="$index"
+            [attr.data-active]="dragging() === $index ? '' : null"
+            [style.--_position]="percentOf(thumbValue)"
+          >
+            <input
+              data-part="input"
+              type="range"
+              [attr.id]="$index === 0 ? controlId() : controlId() + '-' + $index"
+              [attr.name]="submissionName()"
+              [attr.form]="submissionForm()"
+              [attr.aria-label]="thumbLabelAt($index)"
+              [attr.aria-describedby]="describedBy()"
+              [attr.aria-invalid]="ariaInvalid()"
+              [attr.aria-required]="ariaRequired()"
+              [attr.aria-readonly]="resolvedReadOnly() === true ? 'true' : null"
+              [attr.aria-orientation]="resolvedOrientation()"
+              [attr.aria-valuetext]="valueTextOf(thumbValue)"
+              [attr.disabled]="resolvedDisabled() === true ? '' : null"
+              [min]="boundsAt($index).min"
+              [max]="boundsAt($index).max"
+              [step]="step()"
+              [value]="thumbValue"
+              (keydown)="onKeyDown($index, $event)"
+              (blur)="onTouched()"
+            />
+            <span data-part="bubble" aria-hidden="true">{{ valueTextOf(thumbValue) }}</span>
+          </div>
+        }
+      </div>
+    </div>`, isInline: true, styles: ["@layer slotted.components{[data-ui=slider][data-part=root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_thumb-size: var( --slotted-slider-thumb-size, calc(var(--_icon-size) + var(--slotted-space-2, .25rem)) );--_track-size: var(--slotted-slider-track-size, var(--slotted-space-3, .375rem));--_control-size: max(var(--slotted-target-min, 24px), var(--_thumb-size));--_mark-gap: calc( (var(--_thumb-size) - var(--_track-size)) / 2 + var(--slotted-space-1, .125rem) );--_mark-length: var(--slotted-space-2, .25rem);--_mark-label-line: calc( var(--slotted-font-size-xs, .75rem) * var(--slotted-line-height-xs, 1.4) );--_mark-label-size: calc(var(--_thumb-size) * 3);--_bubble-size: calc( var(--slotted-font-size-xs, .75rem) * var(--slotted-line-height-xs, 1.4) + var(--slotted-space-1, .125rem) * 2 + var(--slotted-space-2, .25rem) );color:var(--slotted-slider-color, var(--slotted-text, CanvasText));display:flex;flex-direction:column;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);min-inline-size:0}[data-ui=slider][data-part=root][data-orientation=horizontal]{inline-size:100%}[data-ui=slider][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: var(--slotted-control-icon-size-sm, 14px)}[data-ui=slider][data-part=root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: var(--slotted-control-icon-size-md, 16px)}[data-ui=slider][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: var(--slotted-control-icon-size-lg, 18px)}[data-ui=slider]>[data-part=output]{align-self:flex-end;color:var(--slotted-slider-output-color, var(--slotted-text, CanvasText));font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--slotted-line-height-sm, 1.45);unicode-bidi:plaintext}[data-ui=slider] [data-part=control]{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;position:relative;touch-action:none;-webkit-tap-highlight-color:transparent}[data-ui=slider][data-orientation=horizontal] [data-part=control]{block-size:var(--_control-size);inline-size:100%;padding-inline:calc(var(--_thumb-size) / 2)}[data-ui=slider][data-orientation=horizontal]:not([data-value-label=none]) [data-part=control]{margin-block-start:max(0px,calc(var(--_bubble-size) - var(--_gap)))}[data-ui=slider][data-orientation=vertical] [data-part=control]{block-size:calc(var(--slotted-slider-length, calc(var(--_thumb-size) * 10)) + var(--_thumb-size));inline-size:var(--_control-size);padding-block:calc(var(--_thumb-size) / 2)}[data-ui=slider][data-orientation=horizontal][data-marks=ticks] [data-part=control]{margin-block-end:var(--_mark-length)}[data-ui=slider][data-orientation=horizontal][data-marks=labelled] [data-part=control]{margin-block-end:calc(var(--_mark-length) + var(--slotted-space-1, .125rem) + var(--_mark-label-line))}[data-ui=slider][data-orientation=vertical][data-marks=ticks] [data-part=control]{margin-inline-end:var(--_mark-length)}[data-ui=slider][data-orientation=vertical][data-marks=labelled] [data-part=control]{margin-inline-end:calc(var(--_mark-length) + var(--slotted-space-1, .125rem) + var(--_mark-label-size))}[data-ui=slider] [data-part=track]{background-color:var(--slotted-slider-track-color, var(--slotted-surface-sunken, Canvas));border:var(--slotted-control-border-width, 1px) solid var(--slotted-slider-track-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-radius-full, 9999px);box-sizing:border-box;position:relative}[data-ui=slider][data-orientation=horizontal] [data-part=track]{block-size:var(--_track-size);inline-size:100%}[data-ui=slider][data-orientation=vertical] [data-part=track]{block-size:100%;inline-size:var(--_track-size)}[data-ui=slider] [data-part=indicator]{--_edge-overlap: calc(var(--slotted-control-border-width, 1px) * -1);background-color:var(--slotted-slider-indicator-color, var(--slotted-tone-accent-solid));border-radius:inherit;position:absolute}[data-ui=slider][data-orientation=horizontal] [data-part=indicator]{inset-block:var(--_edge-overlap);inset-inline-start:calc(var(--_start, 0) * 1%);inline-size:calc((var(--_end, 0) - var(--_start, 0)) * 1%)}[data-ui=slider][data-orientation=vertical] [data-part=indicator]{inset-inline:var(--_edge-overlap);inset-block-end:calc(var(--_start, 0) * 1%);block-size:calc((var(--_end, 0) - var(--_start, 0)) * 1%)}[data-ui=slider] [data-part=mark]{background-color:var(--slotted-slider-mark-color, var(--slotted-border-strong, CanvasText));position:absolute}[data-ui=slider][data-orientation=horizontal] [data-part=mark]{block-size:var(--_mark-length);inline-size:var(--slotted-border-width-thin, 1px);inset-block-start:calc(100% + var(--_mark-gap));inset-inline-start:calc(var(--_position, 0) * 1%);margin-inline-start:calc(var(--slotted-border-width-thin, 1px) / -2)}[data-ui=slider][data-orientation=vertical] [data-part=mark]{block-size:var(--slotted-border-width-thin, 1px);inline-size:var(--_mark-length);inset-inline-start:calc(100% + var(--_mark-gap));inset-block-end:calc(var(--_position, 0) * 1%);margin-block-end:calc(var(--slotted-border-width-thin, 1px) / -2)}[data-ui=slider] [data-part=mark-label]{color:var(--slotted-slider-mark-label-color, var(--slotted-text-muted, GrayText));display:block;font-size:var(--slotted-font-size-xs, .75rem);inline-size:max-content;line-height:var(--slotted-line-height-xs, 1.4);max-inline-size:var(--_mark-label-size);overflow-wrap:anywhere;position:absolute;text-align:center;unicode-bidi:plaintext}[data-ui=slider][data-orientation=horizontal] [data-part=mark-label]{inset-block-start:calc(100% + var(--slotted-space-1, .125rem));inset-inline-start:50%;translate:-50% 0}[data-ui=slider][data-orientation=horizontal] [data-part=mark][data-edge=start] [data-part=mark-label]{inset-inline-start:0;text-align:start;translate:0 0}[data-ui=slider][data-orientation=horizontal] [data-part=mark][data-edge] [data-part=mark-label]{max-inline-size:none}[data-ui=slider][data-orientation=horizontal] [data-part=mark][data-edge=end] [data-part=mark-label]{inset-inline-end:0;inset-inline-start:auto;text-align:end;translate:0 0}[data-ui=slider][data-orientation=horizontal]:dir(rtl) [data-part=mark]:not([data-edge]) [data-part=mark-label]{translate:50% 0}[data-ui=slider][data-orientation=vertical] [data-part=mark-label]{inset-block-start:50%;inset-inline-start:calc(100% + var(--slotted-space-1, .125rem));text-align:start;translate:0 -50%}[data-ui=slider] [data-part=thumb]{background-color:var(--slotted-slider-thumb-color, var(--slotted-surface, Canvas));block-size:var(--_thumb-size);border:var(--slotted-border-width-thick, 2px) solid var(--slotted-slider-thumb-border-color, var(--slotted-tone-accent-solid));border-radius:var(--slotted-radius-full, 9999px);box-shadow:var(--slotted-slider-thumb-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;cursor:grab;display:block;inline-size:var(--_thumb-size);position:absolute;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),scale var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=slider][data-orientation=horizontal] [data-part=thumb]{inset-block-start:50%;inset-inline-start:calc(var(--_position, 0) * 1%);margin-block-start:calc(var(--_thumb-size) / -2);margin-inline-start:calc(var(--_thumb-size) / -2)}[data-ui=slider][data-orientation=vertical] [data-part=thumb]{inset-block-end:calc(var(--_position, 0) * 1%);inset-inline-start:50%;margin-block-end:calc(var(--_thumb-size) / -2);margin-inline-start:calc(var(--_thumb-size) / -2)}[data-ui=slider] [data-part=input]{appearance:none;block-size:100%;inline-size:100%;inset:0;margin:0;opacity:0;outline:none;padding:0;pointer-events:none;position:absolute}[data-ui=slider] [data-part=input]::-webkit-slider-thumb{appearance:none;block-size:0;inline-size:0}[data-ui=slider] [data-part=input]::-webkit-slider-runnable-track{block-size:0}[data-ui=slider] [data-part=bubble]{background-color:var(--slotted-slider-bubble-background, var(--slotted-surface-inverse));border-radius:var(--slotted-radius-sm, 4px);color:var(--slotted-slider-bubble-color, var(--slotted-text-inverse));font-size:var(--slotted-font-size-xs, .75rem);font-variant-numeric:tabular-nums;inline-size:max-content;line-height:var(--slotted-line-height-xs, 1.4);max-inline-size:calc(var(--_thumb-size) * 4);opacity:0;padding-block:var(--slotted-space-1, .125rem);padding-inline:var(--slotted-space-3, .375rem);pointer-events:none;position:absolute;text-align:center;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);unicode-bidi:plaintext}[data-ui=slider][data-orientation=horizontal] [data-part=bubble]{inset-block-end:calc(100% + var(--slotted-space-2, .25rem));inset-inline-start:50%;translate:-50% 0}[data-ui=slider][data-orientation=horizontal]:dir(rtl) [data-part=bubble]{translate:50% 0}[data-ui=slider][data-orientation=vertical] [data-part=bubble]{inset-block-start:50%;inset-inline-end:calc(100% + var(--slotted-space-2, .25rem));translate:0 -50%}[data-ui=slider][data-value-label=always] [data-part=bubble],[data-ui=slider][data-dragging] [data-part=thumb][data-active] [data-part=bubble],[data-ui=slider] [data-part=thumb]:has(>[data-part=input]:focus-visible) [data-part=bubble]{opacity:1}[data-ui=slider][data-value-label=none] [data-part=bubble]{display:none}[data-ui=slider]:not([data-disabled]):not([data-readonly]) [data-part=thumb]:hover:not(:disabled){background-color:var( --slotted-slider-thumb-hover-background, var(--slotted-tone-accent-surface) )}[data-ui=slider]:not([data-disabled]):not([data-readonly]) [data-part=thumb]:active:not(:disabled),[data-ui=slider][data-dragging]:not([data-disabled]):not([data-readonly]) [data-part=thumb][data-active]{cursor:grabbing;scale:1.15}[data-ui=slider] [data-part=thumb]:has(>[data-part=input]:focus-visible){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=slider][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-slider-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui=slider][data-invalid] [data-part=indicator]{background-color:var( --slotted-slider-invalid-indicator-color, var(--slotted-tone-danger-solid) )}[data-ui=slider][data-invalid] [data-part=thumb]{--_invalid-edge-width: var( --slotted-slider-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-slider-invalid-thumb-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var( --slotted-slider-invalid-thumb-border-color, var(--slotted-tone-danger-border) );box-shadow:var(--_invalid-edge)}[data-ui=slider][data-invalid] [data-part=thumb]:has(>[data-part=input]:focus-visible){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui=slider][data-part=root][data-readonly] [data-part=control],[data-ui=slider][data-part=root][data-readonly] [data-part=thumb]{cursor:default}[data-ui=slider][data-part=root][data-readonly] [data-part=indicator]{background-color:var(--slotted-slider-readonly-indicator-color, var(--slotted-text-muted))}[data-ui=slider][data-part=root][data-readonly] [data-part=thumb]{border-color:var( --slotted-slider-readonly-thumb-border-color, var(--slotted-control-border-color, ButtonBorder) )}[data-ui=slider][data-part=root][data-disabled] [data-part=track],[data-ui=slider][data-part=root]:has([data-part=input]:disabled) [data-part=track]{background-color:var( --slotted-slider-disabled-track-color, var(--slotted-disabled-background) );border-color:var(--slotted-slider-disabled-border-color, var(--slotted-disabled-border))}[data-ui=slider][data-part=root][data-disabled] [data-part=indicator],[data-ui=slider][data-part=root]:has([data-part=input]:disabled) [data-part=indicator]{background-color:var( --slotted-slider-disabled-indicator-color, var(--slotted-disabled-foreground) )}[data-ui=slider][data-part=root][data-disabled] [data-part=thumb],[data-ui=slider][data-part=root]:has([data-part=input]:disabled) [data-part=thumb]{background-color:var( --slotted-slider-disabled-thumb-color, var(--slotted-disabled-background) );border-color:var(--slotted-slider-disabled-border-color, var(--slotted-disabled-border));box-shadow:none;cursor:not-allowed}[data-ui=slider][data-part=root][data-disabled] [data-part=control],[data-ui=slider][data-part=root][data-disabled]>[data-part=output],[data-ui=slider][data-part=root][data-disabled] [data-part=mark-label]{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=slider][data-part=root][data-disabled] [data-part=mark]{background-color:var(--slotted-disabled-foreground)}@media(forced-colors:active){[data-ui=slider] [data-part=track]{background-color:ButtonFace;border-color:ButtonBorder}[data-ui=slider] [data-part=indicator]{background-color:Highlight}[data-ui=slider] [data-part=thumb]{background-color:ButtonFace;border-color:ButtonBorder}[data-ui=slider] [data-part=mark]{background-color:CanvasText}[data-ui=slider][data-part=root][data-disabled] [data-part=indicator],[data-ui=slider][data-part=root][data-disabled] [data-part=thumb]{background-color:Canvas;border-color:GrayText}[data-ui=slider][data-invalid] [data-part=thumb]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-border-width-thick, 2px) + var(--_invalid-edge-width)))}[data-ui=slider][data-invalid] [data-part=thumb]:has(>[data-part=input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSlider, decorators: [{
+            type: Component,
+            args: [{ selector: '[slSlider]', standalone: true, exportAs: 'slSlider', template: `@if (resolvedValueLabel() !== 'none') {
+      <output data-part="output" [attr.for]="controlId()">{{ outputText() }}</output>
+    }
+    <div
+      data-part="control"
+      (pointerdown)="onPointerDown($event)"
+      (pointermove)="onPointerMove($event)"
+      (pointerup)="onPointerUp($event)"
+      (pointercancel)="onPointerUp($event)"
+    >
+      <div data-part="track" #track>
+        <div
+          data-part="indicator"
+          [style.--_start]="span().start"
+          [style.--_end]="span().end"
+        ></div>
+        @for (mark of markList(); track mark.value) {
+          <span
+            data-part="mark"
+            [attr.data-edge]="edgeOf(mark.value)"
+            [style.--_position]="percentOf(mark.value)"
+          >
+            @if (mark.label !== undefined) {
+              <span data-part="mark-label">{{ mark.label }}</span>
+            }
+          </span>
+        }
+        @for (thumbValue of values(); track $index) {
+          <div
+            data-part="thumb"
+            [attr.data-index]="$index"
+            [attr.data-active]="dragging() === $index ? '' : null"
+            [style.--_position]="percentOf(thumbValue)"
+          >
+            <input
+              data-part="input"
+              type="range"
+              [attr.id]="$index === 0 ? controlId() : controlId() + '-' + $index"
+              [attr.name]="submissionName()"
+              [attr.form]="submissionForm()"
+              [attr.aria-label]="thumbLabelAt($index)"
+              [attr.aria-describedby]="describedBy()"
+              [attr.aria-invalid]="ariaInvalid()"
+              [attr.aria-required]="ariaRequired()"
+              [attr.aria-readonly]="resolvedReadOnly() === true ? 'true' : null"
+              [attr.aria-orientation]="resolvedOrientation()"
+              [attr.aria-valuetext]="valueTextOf(thumbValue)"
+              [attr.disabled]="resolvedDisabled() === true ? '' : null"
+              [min]="boundsAt($index).min"
+              [max]="boundsAt($index).max"
+              [step]="step()"
+              [value]="thumbValue"
+              (keydown)="onKeyDown($index, $event)"
+              (blur)="onTouched()"
+            />
+            <span data-part="bubble" aria-hidden="true">{{ valueTextOf(thumbValue) }}</span>
+          </div>
+        }
+      </div>
+    </div>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlSlider), multi: true }], host: {
+                        'data-ui': 'slider',
+                        'data-part': 'root',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-orientation]': 'resolvedOrientation()',
+                        '[attr.data-value-label]': 'resolvedValueLabel()',
+                        '[attr.data-marks]': 'marksMode()',
+                        '[attr.data-dragging]': "dragging() === null ? null : ''",
+                        '[attr.data-disabled]': "resolvedDisabled() === true ? '' : null",
+                        '[attr.data-invalid]': "resolvedInvalid() === true ? '' : null",
+                        '[attr.data-readonly]': "resolvedReadOnly() === true ? '' : null",
+                    }, styles: ["@layer slotted.components{[data-ui=slider][data-part=root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_thumb-size: var( --slotted-slider-thumb-size, calc(var(--_icon-size) + var(--slotted-space-2, .25rem)) );--_track-size: var(--slotted-slider-track-size, var(--slotted-space-3, .375rem));--_control-size: max(var(--slotted-target-min, 24px), var(--_thumb-size));--_mark-gap: calc( (var(--_thumb-size) - var(--_track-size)) / 2 + var(--slotted-space-1, .125rem) );--_mark-length: var(--slotted-space-2, .25rem);--_mark-label-line: calc( var(--slotted-font-size-xs, .75rem) * var(--slotted-line-height-xs, 1.4) );--_mark-label-size: calc(var(--_thumb-size) * 3);--_bubble-size: calc( var(--slotted-font-size-xs, .75rem) * var(--slotted-line-height-xs, 1.4) + var(--slotted-space-1, .125rem) * 2 + var(--slotted-space-2, .25rem) );color:var(--slotted-slider-color, var(--slotted-text, CanvasText));display:flex;flex-direction:column;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);min-inline-size:0}[data-ui=slider][data-part=root][data-orientation=horizontal]{inline-size:100%}[data-ui=slider][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: var(--slotted-control-icon-size-sm, 14px)}[data-ui=slider][data-part=root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: var(--slotted-control-icon-size-md, 16px)}[data-ui=slider][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: var(--slotted-control-icon-size-lg, 18px)}[data-ui=slider]>[data-part=output]{align-self:flex-end;color:var(--slotted-slider-output-color, var(--slotted-text, CanvasText));font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--slotted-line-height-sm, 1.45);unicode-bidi:plaintext}[data-ui=slider] [data-part=control]{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;position:relative;touch-action:none;-webkit-tap-highlight-color:transparent}[data-ui=slider][data-orientation=horizontal] [data-part=control]{block-size:var(--_control-size);inline-size:100%;padding-inline:calc(var(--_thumb-size) / 2)}[data-ui=slider][data-orientation=horizontal]:not([data-value-label=none]) [data-part=control]{margin-block-start:max(0px,calc(var(--_bubble-size) - var(--_gap)))}[data-ui=slider][data-orientation=vertical] [data-part=control]{block-size:calc(var(--slotted-slider-length, calc(var(--_thumb-size) * 10)) + var(--_thumb-size));inline-size:var(--_control-size);padding-block:calc(var(--_thumb-size) / 2)}[data-ui=slider][data-orientation=horizontal][data-marks=ticks] [data-part=control]{margin-block-end:var(--_mark-length)}[data-ui=slider][data-orientation=horizontal][data-marks=labelled] [data-part=control]{margin-block-end:calc(var(--_mark-length) + var(--slotted-space-1, .125rem) + var(--_mark-label-line))}[data-ui=slider][data-orientation=vertical][data-marks=ticks] [data-part=control]{margin-inline-end:var(--_mark-length)}[data-ui=slider][data-orientation=vertical][data-marks=labelled] [data-part=control]{margin-inline-end:calc(var(--_mark-length) + var(--slotted-space-1, .125rem) + var(--_mark-label-size))}[data-ui=slider] [data-part=track]{background-color:var(--slotted-slider-track-color, var(--slotted-surface-sunken, Canvas));border:var(--slotted-control-border-width, 1px) solid var(--slotted-slider-track-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-radius-full, 9999px);box-sizing:border-box;position:relative}[data-ui=slider][data-orientation=horizontal] [data-part=track]{block-size:var(--_track-size);inline-size:100%}[data-ui=slider][data-orientation=vertical] [data-part=track]{block-size:100%;inline-size:var(--_track-size)}[data-ui=slider] [data-part=indicator]{--_edge-overlap: calc(var(--slotted-control-border-width, 1px) * -1);background-color:var(--slotted-slider-indicator-color, var(--slotted-tone-accent-solid));border-radius:inherit;position:absolute}[data-ui=slider][data-orientation=horizontal] [data-part=indicator]{inset-block:var(--_edge-overlap);inset-inline-start:calc(var(--_start, 0) * 1%);inline-size:calc((var(--_end, 0) - var(--_start, 0)) * 1%)}[data-ui=slider][data-orientation=vertical] [data-part=indicator]{inset-inline:var(--_edge-overlap);inset-block-end:calc(var(--_start, 0) * 1%);block-size:calc((var(--_end, 0) - var(--_start, 0)) * 1%)}[data-ui=slider] [data-part=mark]{background-color:var(--slotted-slider-mark-color, var(--slotted-border-strong, CanvasText));position:absolute}[data-ui=slider][data-orientation=horizontal] [data-part=mark]{block-size:var(--_mark-length);inline-size:var(--slotted-border-width-thin, 1px);inset-block-start:calc(100% + var(--_mark-gap));inset-inline-start:calc(var(--_position, 0) * 1%);margin-inline-start:calc(var(--slotted-border-width-thin, 1px) / -2)}[data-ui=slider][data-orientation=vertical] [data-part=mark]{block-size:var(--slotted-border-width-thin, 1px);inline-size:var(--_mark-length);inset-inline-start:calc(100% + var(--_mark-gap));inset-block-end:calc(var(--_position, 0) * 1%);margin-block-end:calc(var(--slotted-border-width-thin, 1px) / -2)}[data-ui=slider] [data-part=mark-label]{color:var(--slotted-slider-mark-label-color, var(--slotted-text-muted, GrayText));display:block;font-size:var(--slotted-font-size-xs, .75rem);inline-size:max-content;line-height:var(--slotted-line-height-xs, 1.4);max-inline-size:var(--_mark-label-size);overflow-wrap:anywhere;position:absolute;text-align:center;unicode-bidi:plaintext}[data-ui=slider][data-orientation=horizontal] [data-part=mark-label]{inset-block-start:calc(100% + var(--slotted-space-1, .125rem));inset-inline-start:50%;translate:-50% 0}[data-ui=slider][data-orientation=horizontal] [data-part=mark][data-edge=start] [data-part=mark-label]{inset-inline-start:0;text-align:start;translate:0 0}[data-ui=slider][data-orientation=horizontal] [data-part=mark][data-edge] [data-part=mark-label]{max-inline-size:none}[data-ui=slider][data-orientation=horizontal] [data-part=mark][data-edge=end] [data-part=mark-label]{inset-inline-end:0;inset-inline-start:auto;text-align:end;translate:0 0}[data-ui=slider][data-orientation=horizontal]:dir(rtl) [data-part=mark]:not([data-edge]) [data-part=mark-label]{translate:50% 0}[data-ui=slider][data-orientation=vertical] [data-part=mark-label]{inset-block-start:50%;inset-inline-start:calc(100% + var(--slotted-space-1, .125rem));text-align:start;translate:0 -50%}[data-ui=slider] [data-part=thumb]{background-color:var(--slotted-slider-thumb-color, var(--slotted-surface, Canvas));block-size:var(--_thumb-size);border:var(--slotted-border-width-thick, 2px) solid var(--slotted-slider-thumb-border-color, var(--slotted-tone-accent-solid));border-radius:var(--slotted-radius-full, 9999px);box-shadow:var(--slotted-slider-thumb-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;cursor:grab;display:block;inline-size:var(--_thumb-size);position:absolute;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),scale var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=slider][data-orientation=horizontal] [data-part=thumb]{inset-block-start:50%;inset-inline-start:calc(var(--_position, 0) * 1%);margin-block-start:calc(var(--_thumb-size) / -2);margin-inline-start:calc(var(--_thumb-size) / -2)}[data-ui=slider][data-orientation=vertical] [data-part=thumb]{inset-block-end:calc(var(--_position, 0) * 1%);inset-inline-start:50%;margin-block-end:calc(var(--_thumb-size) / -2);margin-inline-start:calc(var(--_thumb-size) / -2)}[data-ui=slider] [data-part=input]{appearance:none;block-size:100%;inline-size:100%;inset:0;margin:0;opacity:0;outline:none;padding:0;pointer-events:none;position:absolute}[data-ui=slider] [data-part=input]::-webkit-slider-thumb{appearance:none;block-size:0;inline-size:0}[data-ui=slider] [data-part=input]::-webkit-slider-runnable-track{block-size:0}[data-ui=slider] [data-part=bubble]{background-color:var(--slotted-slider-bubble-background, var(--slotted-surface-inverse));border-radius:var(--slotted-radius-sm, 4px);color:var(--slotted-slider-bubble-color, var(--slotted-text-inverse));font-size:var(--slotted-font-size-xs, .75rem);font-variant-numeric:tabular-nums;inline-size:max-content;line-height:var(--slotted-line-height-xs, 1.4);max-inline-size:calc(var(--_thumb-size) * 4);opacity:0;padding-block:var(--slotted-space-1, .125rem);padding-inline:var(--slotted-space-3, .375rem);pointer-events:none;position:absolute;text-align:center;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);unicode-bidi:plaintext}[data-ui=slider][data-orientation=horizontal] [data-part=bubble]{inset-block-end:calc(100% + var(--slotted-space-2, .25rem));inset-inline-start:50%;translate:-50% 0}[data-ui=slider][data-orientation=horizontal]:dir(rtl) [data-part=bubble]{translate:50% 0}[data-ui=slider][data-orientation=vertical] [data-part=bubble]{inset-block-start:50%;inset-inline-end:calc(100% + var(--slotted-space-2, .25rem));translate:0 -50%}[data-ui=slider][data-value-label=always] [data-part=bubble],[data-ui=slider][data-dragging] [data-part=thumb][data-active] [data-part=bubble],[data-ui=slider] [data-part=thumb]:has(>[data-part=input]:focus-visible) [data-part=bubble]{opacity:1}[data-ui=slider][data-value-label=none] [data-part=bubble]{display:none}[data-ui=slider]:not([data-disabled]):not([data-readonly]) [data-part=thumb]:hover:not(:disabled){background-color:var( --slotted-slider-thumb-hover-background, var(--slotted-tone-accent-surface) )}[data-ui=slider]:not([data-disabled]):not([data-readonly]) [data-part=thumb]:active:not(:disabled),[data-ui=slider][data-dragging]:not([data-disabled]):not([data-readonly]) [data-part=thumb][data-active]{cursor:grabbing;scale:1.15}[data-ui=slider] [data-part=thumb]:has(>[data-part=input]:focus-visible){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=slider][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-slider-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui=slider][data-invalid] [data-part=indicator]{background-color:var( --slotted-slider-invalid-indicator-color, var(--slotted-tone-danger-solid) )}[data-ui=slider][data-invalid] [data-part=thumb]{--_invalid-edge-width: var( --slotted-slider-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-slider-invalid-thumb-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var( --slotted-slider-invalid-thumb-border-color, var(--slotted-tone-danger-border) );box-shadow:var(--_invalid-edge)}[data-ui=slider][data-invalid] [data-part=thumb]:has(>[data-part=input]:focus-visible){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui=slider][data-part=root][data-readonly] [data-part=control],[data-ui=slider][data-part=root][data-readonly] [data-part=thumb]{cursor:default}[data-ui=slider][data-part=root][data-readonly] [data-part=indicator]{background-color:var(--slotted-slider-readonly-indicator-color, var(--slotted-text-muted))}[data-ui=slider][data-part=root][data-readonly] [data-part=thumb]{border-color:var( --slotted-slider-readonly-thumb-border-color, var(--slotted-control-border-color, ButtonBorder) )}[data-ui=slider][data-part=root][data-disabled] [data-part=track],[data-ui=slider][data-part=root]:has([data-part=input]:disabled) [data-part=track]{background-color:var( --slotted-slider-disabled-track-color, var(--slotted-disabled-background) );border-color:var(--slotted-slider-disabled-border-color, var(--slotted-disabled-border))}[data-ui=slider][data-part=root][data-disabled] [data-part=indicator],[data-ui=slider][data-part=root]:has([data-part=input]:disabled) [data-part=indicator]{background-color:var( --slotted-slider-disabled-indicator-color, var(--slotted-disabled-foreground) )}[data-ui=slider][data-part=root][data-disabled] [data-part=thumb],[data-ui=slider][data-part=root]:has([data-part=input]:disabled) [data-part=thumb]{background-color:var( --slotted-slider-disabled-thumb-color, var(--slotted-disabled-background) );border-color:var(--slotted-slider-disabled-border-color, var(--slotted-disabled-border));box-shadow:none;cursor:not-allowed}[data-ui=slider][data-part=root][data-disabled] [data-part=control],[data-ui=slider][data-part=root][data-disabled]>[data-part=output],[data-ui=slider][data-part=root][data-disabled] [data-part=mark-label]{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=slider][data-part=root][data-disabled] [data-part=mark]{background-color:var(--slotted-disabled-foreground)}@media(forced-colors:active){[data-ui=slider] [data-part=track]{background-color:ButtonFace;border-color:ButtonBorder}[data-ui=slider] [data-part=indicator]{background-color:Highlight}[data-ui=slider] [data-part=thumb]{background-color:ButtonFace;border-color:ButtonBorder}[data-ui=slider] [data-part=mark]{background-color:CanvasText}[data-ui=slider][data-part=root][data-disabled] [data-part=indicator],[data-ui=slider][data-part=root][data-disabled] [data-part=thumb]{background-color:Canvas;border-color:GrayText}[data-ui=slider][data-invalid] [data-part=thumb]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-border-width-thick, 2px) + var(--_invalid-edge-width)))}[data-ui=slider][data-invalid] [data-part=thumb]:has(>[data-part=input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], largeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "largeStep", required: false }] }], minStepsBetween: [{ type: i0.Input, args: [{ isSignal: true, alias: "minStepsBetween", required: false }] }], origin: [{ type: i0.Input, args: [{ isSignal: true, alias: "origin", required: false }] }], marks: [{ type: i0.Input, args: [{ isSignal: true, alias: "marks", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], thumbLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbLabels", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], valueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], valueCommit: [{ type: i0.Output, args: ["valueCommit"] }], track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SLIDER_DEFAULTS, SlSlider, injectSliderDefaults, provideSliderDefaults };
+//# sourceMappingURL=slotted-angular-slider.mjs.map