@eagami/ui 5.31.0 → 5.32.0

package/fesm2022/eagami-ui.mjs

@@ -15737,6 +15737,8 @@ const FORMAT_PLAIN = (value) => `${value}`;
  * `min`, `max`, and `step`, optional value display, and integrates with
  * Angular forms via `ControlValueAccessor`.
  */
+/** How far the magnet reaches either side of a snap value, in pixels. */
+const SNAP_REACH_PX = 8;
 class SliderComponent {
     i18n = inject(EagamiI18nService);
     trackEl = viewChild('trackEl', /* @ts-ignore */
@@ -15773,6 +15775,13 @@ class SliderComponent {
     ...(ngDevMode ? [{ debugName: "showMinMaxLabels" }] : /* istanbul ignore next */ []));
     formatValue = input(FORMAT_PLAIN, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "formatValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Values the thumb is pulled onto while dragging, each drawn as a tick on
+     * the track. The pull reaches a few pixels either side, so a marked value
+     * can be landed exactly without hunting for it.
+     */
+    snapValues = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapValues" }] : /* istanbul ignore next */ []));
     /** Group thousands with commas in displayed values (ignored when a custom `formatValue` is set). */
     groupThousands = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "groupThousands" }] : /* istanbul ignore next */ []));
@@ -15804,6 +15813,17 @@ class SliderComponent {
         return ((this.clampedValue() - this.min()) / range) * 100;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []));
+    /** Where each snap value's tick sits along the track. */
+    tickPercents = computed(() => {
+        const range = this.max() - this.min();
+        if (range <= 0) {
+            return [];
+        }
+        return this.snapValues()
+            .filter(held => held >= this.min() && held <= this.max())
+            .map(held => ((held - this.min()) / range) * 100);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tickPercents" }] : /* istanbul ignore next */ []));
     /** Formats a value for display, grouping thousands with commas unless a custom `formatValue` is set. */
     formatDisplay(value) {
         const formatter = this.formatValue();
@@ -15890,14 +15910,16 @@ class SliderComponent {
         this.commitValue(next);
     }
     handlePointerDown(event) {
-        if (this.isDisabled()) {
+        if (this.isDisabled() || event.button !== 0) {
             return;
         }
         const track = this.trackEl()?.nativeElement;
         if (!track) {
             return;
         }
-        event.target.setPointerCapture?.(event.pointerId);
+        // Captured on the track rather than whatever child was pressed, so every
+        // later event of the drag flows through the one element listening for it
+        track.setPointerCapture?.(event.pointerId);
         this.dragging.set(true);
         this.updateFromPointer(event, track);
     }
@@ -15905,6 +15927,12 @@ class SliderComponent {
         if (!this.dragging() || this.isDisabled()) {
             return;
         }
+        // A release that never reached us leaves the drag armed, and the thumb
+        // chasing a lifted pointer; a move with no button down stands it down
+        if (event.buttons === 0) {
+            this.handlePointerUp(event);
+            return;
+        }
         const track = this.trackEl()?.nativeElement;
         if (!track) {
             return;
@@ -15915,7 +15943,10 @@ class SliderComponent {
         if (!this.dragging()) {
             return;
         }
-        event.target.releasePointerCapture?.(event.pointerId);
+        const track = this.trackEl()?.nativeElement;
+        if (track?.hasPointerCapture?.(event.pointerId)) {
+            track.releasePointerCapture(event.pointerId);
+        }
         this.dragging.set(false);
         this.onTouched();
     }
@@ -15930,13 +15961,39 @@ class SliderComponent {
         }
         const range = this.max() - this.min();
         const raw = this.min() + ratio * range;
-        this.commitValue(raw);
+        const magnet = this.magnetTarget(raw, rect.width, range);
+        if (magnet !== null) {
+            this.commitValue(magnet, true);
+        }
+        else {
+            this.commitValue(raw);
+        }
     }
-    commitValue(raw) {
+    /** The snap value within the magnet's reach of the pointer, if any. */
+    magnetTarget(raw, trackWidth, range) {
+        const values = this.snapValues();
+        if (!values.length || range <= 0 || trackWidth <= 0) {
+            return null;
+        }
+        const reach = (SNAP_REACH_PX / trackWidth) * range;
+        let best = null;
+        let bestDistance = Infinity;
+        for (const held of values) {
+            const distance = Math.abs(held - raw);
+            if (distance <= reach && distance < bestDistance) {
+                best = held;
+                bestDistance = distance;
+            }
+        }
+        return best;
+    }
+    // Exact for a magnetised value: the snap is the point of it, so the step
+    // grid does not get to round it away
+    commitValue(raw, exact = false) {
         const step = this.step();
         const min = this.min();
         const max = this.max();
-        const snapped = Math.round((raw - min) / step) * step + min;
+        const snapped = exact ? raw : Math.round((raw - min) / step) * step + min;
         const clamped = Math.min(max, Math.max(min, snapped));
         const rounded = Number(clamped.toFixed(10));
         if (rounded === this.value()) {
@@ -15947,13 +16004,13 @@ class SliderComponent {
         this.changed.emit(rounded);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SliderComponent, isStandalone: true, selector: "ea-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", 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 }, size: { classPropertyName: "size", publicName: "size", 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 }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, showMinMaxLabels: { classPropertyName: "showMinMaxLabels", publicName: "showMinMaxLabels", isSignal: true, isRequired: false, transformFunction: null }, formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null }, groupThousands: { classPropertyName: "groupThousands", publicName: "groupThousands", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SliderComponent, isStandalone: true, selector: "ea-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", 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 }, size: { classPropertyName: "size", publicName: "size", 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 }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, showMinMaxLabels: { classPropertyName: "showMinMaxLabels", publicName: "showMinMaxLabels", isSignal: true, isRequired: false, transformFunction: null }, formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null }, snapValues: { classPropertyName: "snapValues", publicName: "snapValues", isSignal: true, isRequired: false, transformFunction: null }, groupThousands: { classPropertyName: "groupThousands", publicName: "groupThousands", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SliderComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["trackEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-slider-field__header\">\n      @if (label(); as labelText) {\n        <ea-field-label\n          [text]=\"labelText\"\n          [labelId]=\"id() + '-label'\"\n          [required]=\"required()\" />\n      }\n      @if (showValue()) {\n        <span class=\"ea-slider-field__value\">\n          {{ formatDisplay(clampedValue()) }}\n        </span>\n      }\n    </div>\n  }\n\n  <div class=\"ea-slider\">\n    <div\n      #trackEl\n      class=\"ea-slider__track\"\n      (pointerdown)=\"handlePointerDown($event)\"\n      (pointermove)=\"handlePointerMove($event)\"\n      (pointerup)=\"handlePointerUp($event)\"\n      (pointercancel)=\"handlePointerUp($event)\">\n      <div\n        class=\"ea-slider__fill\"\n        [style.width.%]=\"percent()\">\n      </div>\n      <div\n        class=\"ea-slider__thumb\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id()\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()\"\n        [attr.aria-valuetext]=\"formatDisplay(clampedValue())\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"errored() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.inset-inline-start.%]=\"percent()\"\n        (keydown)=\"handleKeydown($event)\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-slider__minmax\">\n        <span class=\"ea-slider__minmax-label\">\n          {{ formatDisplay(min()) }}\n        </span>\n        <span class=\"ea-slider__minmax-label\">\n          {{ formatDisplay(max()) }}\n        </span>\n      </div>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-slider-field{display:flex;flex-direction:column;gap:.375em;font-family:var(--font-family-sans);color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-slider-field.ea-slider--2xs{font-size:var(--font-size-2xs)}.ea-slider-field.ea-slider--xs{font-size:var(--font-size-xs)}.ea-slider-field.ea-slider--sm{font-size:var(--font-size-sm)}.ea-slider-field.ea-slider--md{font-size:var(--font-size-md)}.ea-slider-field.ea-slider--lg{font-size:var(--font-size-lg)}.ea-slider-field.ea-slider--xl{font-size:var(--font-size-xl)}.ea-slider-field__header{display:flex;justify-content:space-between;align-items:baseline;gap:.5em}.ea-slider-field__value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-slider{display:flex;flex-direction:column;gap:.25em;width:100%}.ea-slider--2xs .ea-slider{--ea-slider-size: .5rem}.ea-slider--xs .ea-slider{--ea-slider-size: .625rem}.ea-slider--sm .ea-slider{--ea-slider-size: .875rem}.ea-slider--md .ea-slider{--ea-slider-size: 1.125rem}.ea-slider--lg .ea-slider{--ea-slider-size: 1.375rem}.ea-slider--xl .ea-slider{--ea-slider-size: 1.625rem}.ea-slider__track{position:relative;width:100%;height:calc(var(--ea-slider-size, 1.125rem) / 3);background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-slider__fill{position:absolute;top:0;inset-inline-start:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}@media(forced-colors:active){.ea-slider__fill{background-color:Highlight}}.ea-slider__thumb{position:absolute;top:50%;width:var(--ea-slider-size, 1.125rem);height:var(--ea-slider-size, 1.125rem);background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);margin-inline-start:calc(var(--ea-slider-size, 1.125rem) / -2);cursor:grab;transform:translateY(-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}@media(forced-colors:active){.ea-slider__thumb{background-color:Canvas;border-color:CanvasText}}.ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-slider__thumb:focus-visible{outline:none}.ea-slider__minmax{display:flex;justify-content:space-between;margin-top:.25em}.ea-slider__minmax-label{font-size:calc(var(--ea-slider-size, 1.125rem) * .67);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-slider--dragging .ea-slider__thumb{cursor:grabbing;transform:translateY(-50%) scale(1.1)}.ea-slider--disabled{opacity:.5;cursor:not-allowed}.ea-slider--disabled .ea-slider__track,.ea-slider--disabled .ea-slider__thumb{cursor:not-allowed}.ea-slider--error .ea-slider__fill{background-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb{border-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-slider--error .ea-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["trackEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-slider-field__header\">\n      @if (label(); as labelText) {\n        <ea-field-label\n          [text]=\"labelText\"\n          [labelId]=\"id() + '-label'\"\n          [required]=\"required()\" />\n      }\n      @if (showValue()) {\n        <span class=\"ea-slider-field__value\">\n          {{ formatDisplay(clampedValue()) }}\n        </span>\n      }\n    </div>\n  }\n\n  <div class=\"ea-slider\">\n    <div\n      #trackEl\n      class=\"ea-slider__track\"\n      (pointerdown)=\"handlePointerDown($event)\"\n      (pointermove)=\"handlePointerMove($event)\"\n      (pointerup)=\"handlePointerUp($event)\"\n      (pointercancel)=\"handlePointerUp($event)\"\n      (lostpointercapture)=\"handlePointerUp($event)\">\n      <div\n        class=\"ea-slider__fill\"\n        [style.width.%]=\"percent()\">\n      </div>\n      @for (tick of tickPercents(); track $index) {\n        <span\n          class=\"ea-slider__tick\"\n          aria-hidden=\"true\"\n          [style.inset-inline-start.%]=\"tick\">\n        </span>\n      }\n      <div\n        class=\"ea-slider__thumb\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id()\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()\"\n        [attr.aria-valuetext]=\"formatDisplay(clampedValue())\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"errored() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.inset-inline-start.%]=\"percent()\"\n        (keydown)=\"handleKeydown($event)\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-slider__minmax\">\n        <span class=\"ea-slider__minmax-label\">\n          {{ formatDisplay(min()) }}\n        </span>\n        <span class=\"ea-slider__minmax-label\">\n          {{ formatDisplay(max()) }}\n        </span>\n      </div>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-slider-field{display:flex;flex-direction:column;gap:.375em;font-family:var(--font-family-sans);color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-slider-field.ea-slider--2xs{font-size:var(--font-size-2xs)}.ea-slider-field.ea-slider--xs{font-size:var(--font-size-xs)}.ea-slider-field.ea-slider--sm{font-size:var(--font-size-sm)}.ea-slider-field.ea-slider--md{font-size:var(--font-size-md)}.ea-slider-field.ea-slider--lg{font-size:var(--font-size-lg)}.ea-slider-field.ea-slider--xl{font-size:var(--font-size-xl)}.ea-slider-field__header{display:flex;justify-content:space-between;align-items:baseline;gap:.5em}.ea-slider-field__value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-slider{display:flex;flex-direction:column;gap:.25em;width:100%}.ea-slider--2xs .ea-slider{--ea-slider-size: .5rem}.ea-slider--xs .ea-slider{--ea-slider-size: .625rem}.ea-slider--sm .ea-slider{--ea-slider-size: .875rem}.ea-slider--md .ea-slider{--ea-slider-size: 1.125rem}.ea-slider--lg .ea-slider{--ea-slider-size: 1.375rem}.ea-slider--xl .ea-slider{--ea-slider-size: 1.625rem}.ea-slider__track{position:relative;width:100%;height:calc(var(--ea-slider-size, 1.125rem) / 3);background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-slider__fill{position:absolute;top:0;inset-inline-start:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}@media(forced-colors:active){.ea-slider__fill{background-color:Highlight}}.ea-slider__tick{position:absolute;top:50%;width:2px;height:calc(100% + 8px);background-color:var(--color-border-default);border-radius:var(--radius-full);pointer-events:none;transform:translate(-50%,-50%)}@media(forced-colors:active){.ea-slider__tick{background-color:CanvasText}}.ea-slider__thumb{position:absolute;top:50%;width:var(--ea-slider-size, 1.125rem);height:var(--ea-slider-size, 1.125rem);background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);margin-inline-start:calc(var(--ea-slider-size, 1.125rem) / -2);cursor:grab;transform:translateY(-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}@media(forced-colors:active){.ea-slider__thumb{background-color:Canvas;border-color:CanvasText}}.ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-slider__thumb:focus-visible{outline:none}.ea-slider__minmax{display:flex;justify-content:space-between;margin-top:.25em}.ea-slider__minmax-label{font-size:calc(var(--ea-slider-size, 1.125rem) * .67);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-slider--dragging .ea-slider__thumb{cursor:grabbing;transform:translateY(-50%) scale(1.1)}.ea-slider--disabled{opacity:.5;cursor:not-allowed}.ea-slider--disabled .ea-slider__track,.ea-slider--disabled .ea-slider__thumb{cursor:not-allowed}.ea-slider--error .ea-slider__fill{background-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb{border-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-slider--error .ea-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
@@ -15963,8 +16020,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                             useExisting: forwardRef(() => SliderComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"ea-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-slider-field__header\">\n      @if (label(); as labelText) {\n        <ea-field-label\n          [text]=\"labelText\"\n          [labelId]=\"id() + '-label'\"\n          [required]=\"required()\" />\n      }\n      @if (showValue()) {\n        <span class=\"ea-slider-field__value\">\n          {{ formatDisplay(clampedValue()) }}\n        </span>\n      }\n    </div>\n  }\n\n  <div class=\"ea-slider\">\n    <div\n      #trackEl\n      class=\"ea-slider__track\"\n      (pointerdown)=\"handlePointerDown($event)\"\n      (pointermove)=\"handlePointerMove($event)\"\n      (pointerup)=\"handlePointerUp($event)\"\n      (pointercancel)=\"handlePointerUp($event)\">\n      <div\n        class=\"ea-slider__fill\"\n        [style.width.%]=\"percent()\">\n      </div>\n      <div\n        class=\"ea-slider__thumb\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id()\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()\"\n        [attr.aria-valuetext]=\"formatDisplay(clampedValue())\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"errored() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.inset-inline-start.%]=\"percent()\"\n        (keydown)=\"handleKeydown($event)\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-slider__minmax\">\n        <span class=\"ea-slider__minmax-label\">\n          {{ formatDisplay(min()) }}\n        </span>\n        <span class=\"ea-slider__minmax-label\">\n          {{ formatDisplay(max()) }}\n        </span>\n      </div>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-slider-field{display:flex;flex-direction:column;gap:.375em;font-family:var(--font-family-sans);color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-slider-field.ea-slider--2xs{font-size:var(--font-size-2xs)}.ea-slider-field.ea-slider--xs{font-size:var(--font-size-xs)}.ea-slider-field.ea-slider--sm{font-size:var(--font-size-sm)}.ea-slider-field.ea-slider--md{font-size:var(--font-size-md)}.ea-slider-field.ea-slider--lg{font-size:var(--font-size-lg)}.ea-slider-field.ea-slider--xl{font-size:var(--font-size-xl)}.ea-slider-field__header{display:flex;justify-content:space-between;align-items:baseline;gap:.5em}.ea-slider-field__value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-slider{display:flex;flex-direction:column;gap:.25em;width:100%}.ea-slider--2xs .ea-slider{--ea-slider-size: .5rem}.ea-slider--xs .ea-slider{--ea-slider-size: .625rem}.ea-slider--sm .ea-slider{--ea-slider-size: .875rem}.ea-slider--md .ea-slider{--ea-slider-size: 1.125rem}.ea-slider--lg .ea-slider{--ea-slider-size: 1.375rem}.ea-slider--xl .ea-slider{--ea-slider-size: 1.625rem}.ea-slider__track{position:relative;width:100%;height:calc(var(--ea-slider-size, 1.125rem) / 3);background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-slider__fill{position:absolute;top:0;inset-inline-start:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}@media(forced-colors:active){.ea-slider__fill{background-color:Highlight}}.ea-slider__thumb{position:absolute;top:50%;width:var(--ea-slider-size, 1.125rem);height:var(--ea-slider-size, 1.125rem);background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);margin-inline-start:calc(var(--ea-slider-size, 1.125rem) / -2);cursor:grab;transform:translateY(-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}@media(forced-colors:active){.ea-slider__thumb{background-color:Canvas;border-color:CanvasText}}.ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-slider__thumb:focus-visible{outline:none}.ea-slider__minmax{display:flex;justify-content:space-between;margin-top:.25em}.ea-slider__minmax-label{font-size:calc(var(--ea-slider-size, 1.125rem) * .67);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-slider--dragging .ea-slider__thumb{cursor:grabbing;transform:translateY(-50%) scale(1.1)}.ea-slider--disabled{opacity:.5;cursor:not-allowed}.ea-slider--disabled .ea-slider__track,.ea-slider--disabled .ea-slider__thumb{cursor:not-allowed}.ea-slider--error .ea-slider__fill{background-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb{border-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-slider--error .ea-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"] }]
-        }], propDecorators: { trackEl: [{ type: i0.ViewChild, args: ['trackEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], showMinMaxLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMinMaxLabels", required: false }] }], formatValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatValue", required: false }] }], groupThousands: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupThousands", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+                    ], template: "<div\n  class=\"ea-slider-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label() || showValue()) {\n    <div class=\"ea-slider-field__header\">\n      @if (label(); as labelText) {\n        <ea-field-label\n          [text]=\"labelText\"\n          [labelId]=\"id() + '-label'\"\n          [required]=\"required()\" />\n      }\n      @if (showValue()) {\n        <span class=\"ea-slider-field__value\">\n          {{ formatDisplay(clampedValue()) }}\n        </span>\n      }\n    </div>\n  }\n\n  <div class=\"ea-slider\">\n    <div\n      #trackEl\n      class=\"ea-slider__track\"\n      (pointerdown)=\"handlePointerDown($event)\"\n      (pointermove)=\"handlePointerMove($event)\"\n      (pointerup)=\"handlePointerUp($event)\"\n      (pointercancel)=\"handlePointerUp($event)\"\n      (lostpointercapture)=\"handlePointerUp($event)\">\n      <div\n        class=\"ea-slider__fill\"\n        [style.width.%]=\"percent()\">\n      </div>\n      @for (tick of tickPercents(); track $index) {\n        <span\n          class=\"ea-slider__tick\"\n          aria-hidden=\"true\"\n          [style.inset-inline-start.%]=\"tick\">\n        </span>\n      }\n      <div\n        class=\"ea-slider__thumb\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [id]=\"id()\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"!label() ? (ariaLabel() ?? null) : null\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"clampedValue()\"\n        [attr.aria-valuetext]=\"formatDisplay(clampedValue())\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"errored() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        [style.inset-inline-start.%]=\"percent()\"\n        (keydown)=\"handleKeydown($event)\"\n        (blur)=\"handleBlur()\">\n      </div>\n    </div>\n\n    @if (showMinMaxLabels()) {\n      <div class=\"ea-slider__minmax\">\n        <span class=\"ea-slider__minmax-label\">\n          {{ formatDisplay(min()) }}\n        </span>\n        <span class=\"ea-slider__minmax-label\">\n          {{ formatDisplay(max()) }}\n        </span>\n      </div>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-slider-field{display:flex;flex-direction:column;gap:.375em;font-family:var(--font-family-sans);color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-slider-field.ea-slider--2xs{font-size:var(--font-size-2xs)}.ea-slider-field.ea-slider--xs{font-size:var(--font-size-xs)}.ea-slider-field.ea-slider--sm{font-size:var(--font-size-sm)}.ea-slider-field.ea-slider--md{font-size:var(--font-size-md)}.ea-slider-field.ea-slider--lg{font-size:var(--font-size-lg)}.ea-slider-field.ea-slider--xl{font-size:var(--font-size-xl)}.ea-slider-field__header{display:flex;justify-content:space-between;align-items:baseline;gap:.5em}.ea-slider-field__value{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-slider{display:flex;flex-direction:column;gap:.25em;width:100%}.ea-slider--2xs .ea-slider{--ea-slider-size: .5rem}.ea-slider--xs .ea-slider{--ea-slider-size: .625rem}.ea-slider--sm .ea-slider{--ea-slider-size: .875rem}.ea-slider--md .ea-slider{--ea-slider-size: 1.125rem}.ea-slider--lg .ea-slider{--ea-slider-size: 1.375rem}.ea-slider--xl .ea-slider{--ea-slider-size: 1.625rem}.ea-slider__track{position:relative;width:100%;height:calc(var(--ea-slider-size, 1.125rem) / 3);background-color:var(--color-bg-muted);border-radius:var(--radius-full);cursor:pointer;touch-action:none}.ea-slider__fill{position:absolute;top:0;inset-inline-start:0;height:100%;background-color:var(--color-brand-default);border-radius:inherit;transition:var(--transition-colors)}@media(forced-colors:active){.ea-slider__fill{background-color:Highlight}}.ea-slider__tick{position:absolute;top:50%;width:2px;height:calc(100% + 8px);background-color:var(--color-border-default);border-radius:var(--radius-full);pointer-events:none;transform:translate(-50%,-50%)}@media(forced-colors:active){.ea-slider__tick{background-color:CanvasText}}.ea-slider__thumb{position:absolute;top:50%;width:var(--ea-slider-size, 1.125rem);height:var(--ea-slider-size, 1.125rem);background-color:var(--color-neutral-0);border:var(--border-width-medium) solid var(--color-brand-default);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);margin-inline-start:calc(var(--ea-slider-size, 1.125rem) / -2);cursor:grab;transform:translateY(-50%);transition:box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}@media(forced-colors:active){.ea-slider__thumb{background-color:Canvas;border-color:CanvasText}}.ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-slider__thumb:focus-visible{outline:none}.ea-slider__minmax{display:flex;justify-content:space-between;margin-top:.25em}.ea-slider__minmax-label{font-size:calc(var(--ea-slider-size, 1.125rem) * .67);color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.ea-slider--dragging .ea-slider__thumb{cursor:grabbing;transform:translateY(-50%) scale(1.1)}.ea-slider--disabled{opacity:.5;cursor:not-allowed}.ea-slider--disabled .ea-slider__track,.ea-slider--disabled .ea-slider__thumb{cursor:not-allowed}.ea-slider--error .ea-slider__fill{background-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb{border-color:var(--color-error-default)}.ea-slider--error .ea-slider__thumb:focus-visible{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-slider--error .ea-slider__thumb:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"] }]
+        }], propDecorators: { trackEl: [{ type: i0.ViewChild, args: ['trackEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], showMinMaxLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMinMaxLabels", required: false }] }], formatValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatValue", required: false }] }], snapValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapValues", required: false }] }], groupThousands: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupThousands", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /**
  * SVG loading indicator with an accessible `role="status"`. The `label` input