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

package/fesm2022/slotted-angular-number-field.mjs

@@ -0,0 +1,966 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, contentChild, computed, signal, DestroyRef, ViewEncapsulation, ChangeDetectionStrategy, Component, numberAttribute, booleanAttribute, output, ElementRef, HostAttributeToken, effect, forwardRef, Directive } from '@angular/core';
+import { injectMessages, injectLocale } from '@slotted/angular/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { numberFieldMessages } from '@slotted/core/i18n';
+import { STEP_REPEAT_DELAY_COARSE, STEP_REPEAT_DELAY, STEP_REPEAT_INTERVAL, createNumberFormat, snapToStep, stepNumber, SCRUB_SENSITIVITY, createScrub } from '@slotted/core/number';
+import { SlField } from '@slotted/angular/field';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { clamp } from '@slotted/core/measure';
+import { createControllable } from '@slotted/core/state';
+
+const FALLBACK = {
+    clamp: 'blur',
+    formatOn: 'change',
+    size: 'md',
+    stepper: 'stacked',
+    variant: 'outline',
+};
+const NUMBER_FIELD_DEFAULTS = new InjectionToken('slotted number field defaults', { providedIn: 'root', factory: () => FALLBACK });
+/**
+ * An application decides once what its number fields look like, rather than
+ * repeating the same inputs on every amount in a form. A control that states
+ * any of them itself still wins.
+ *
+ * The locale and the two buttons' words come from the language in force
+ * (`provideSlotted`): one locale for the whole application decides the decimal
+ * separator, the grouping and the numbering system, and a form where one field
+ * reads `1.234` as a thousand and another as one point two three four is a
+ * form that loses money.
+ */
+function provideNumberFieldDefaults(defaults) {
+    return {
+        provide: NUMBER_FIELD_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a number field renders as here, before it states anything of its own. */
+function injectNumberFieldDefaults() {
+    return inject(NUMBER_FIELD_DEFAULTS);
+}
+/**
+ * What the frame needs to know about the control inside it, and what the
+ * control needs the frame to call.
+ *
+ * It is an abstract class rather than an import so the two directives can
+ * depend on each other without a cycle — the shape `field` and `text-field`
+ * already have. The input provides itself as this, and the frame queries it.
+ */
+class SlNumberFieldControl {
+}
+
+/**
+ * The frame: one number, and the two buttons that move it.
+ *
+ * **It is not the control.** The element carrying `data-ui` is the consumer's
+ * own box with no role; the `input` inside it holds the value, the identifier
+ * and the APG's `spinbutton` role. WAI-ARIA settles the shape: a `spinbutton`
+ * may hold only non-interactive presentational children, so the two steppers
+ * are the control's siblings rather than its children.
+ *
+ * **The split arrangement is written in the order it is painted.** Decrement
+ * before the value and increment after it, rather than one box reordered with
+ * `order`, so the reading order and the painted order are the same one.
+ *
+ * **Angular pays one element for that frame, and React pays none.** React can
+ * render a wrapper from inside a component; an Angular directive cannot create
+ * a box around its own host. `slNumberFieldInput` injects this class, so a
+ * control written without the frame is a compile-time failure rather than a
+ * silent one.
+ */
+class SlNumberField {
+    /** Defaults to the field, then to the token, then to `md`. */
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Defaults to the token, then to `outline`. */
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Where the two steppers sit. Defaults to the token, then to `stacked`. */
+    stepper = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stepper" }] : /* istanbul ignore next */ []));
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * `increment` and `decrement` buttons' accessible names.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    defaults = injectNumberFieldDefaults();
+    field = inject(SlField, { optional: true });
+    /**
+     * The control inside. It provides itself as `SlNumberFieldControl`, so the
+     * frame can read the bounds, the submission name and the shared states
+     * without either directive importing the other.
+     */
+    control = contentChild(SlNumberFieldControl, { ...(ngDevMode ? { debugName: "control" } : /* istanbul ignore next */ {}), descendants: true });
+    resolvedSize = computed(() => this.size() ?? this.field?.resolvedSize() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedVariant = computed(() => this.variant() ?? this.defaults.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    resolvedStepper = computed(() => this.stepper() ?? this.defaults.stepper, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedStepper" }] : /* istanbul ignore next */ []));
+    /** The family's words in the language in force, with this field's `messages` laid over them. */
+    t = injectMessages(numberFieldMessages, this.messages);
+    /** Whether a `slNumberFieldScrub` inside is being dragged. */
+    scrubbing = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrubbing" }] : /* istanbul ignore next */ []));
+    /** A control nobody can change has two buttons that would lie about it. */
+    inert = computed(() => {
+        const control = this.control();
+        return control?.resolvedDisabled() === true || control?.resolvedReadOnly() === true;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inert" }] : /* istanbul ignore next */ []));
+    incrementDisabled = computed(() => this.inert() || this.control()?.atMax() === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "incrementDisabled" }] : /* istanbul ignore next */ []));
+    decrementDisabled = computed(() => this.inert() || this.control()?.atMin() === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "decrementDisabled" }] : /* istanbul ignore next */ []));
+    hiddenValue = computed(() => {
+        const value = this.control()?.numberValue() ?? null;
+        return value === null ? '' : String(value);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hiddenValue" }] : /* istanbul ignore next */ []));
+    delay;
+    interval;
+    constructor() {
+        /* A button unmounted mid-press would otherwise leave a timer running. */
+        inject(DestroyRef).onDestroy(() => this.release());
+    }
+    /**
+     * One step now, then repeating while the button is held. A coarse pointer
+     * waits longer before the first repeat, because a finger that is starting to
+     * scroll rests on the button first.
+     */
+    press(direction, event) {
+        if (event.button !== 0)
+            return;
+        /* Focus stays on the value: the button is out of the tab order and the
+           caret is what the reader came back to. */
+        event.preventDefault();
+        const control = this.control();
+        if (control === undefined)
+            return;
+        control.stepBy(direction, event);
+        this.release();
+        const wait = event.pointerType === 'touch' ? STEP_REPEAT_DELAY_COARSE : STEP_REPEAT_DELAY;
+        this.delay = setTimeout(() => {
+            this.interval = setInterval(() => control.stepBy(direction, undefined), STEP_REPEAT_INTERVAL);
+        }, wait);
+    }
+    release() {
+        clearTimeout(this.delay);
+        clearInterval(this.interval);
+        this.delay = undefined;
+        this.interval = undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNumberField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlNumberField, isStandalone: true, selector: "[slNumberField]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, stepper: { classPropertyName: "stepper", publicName: "stepper", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "number-field", "data-part": "root" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-stepper": "resolvedStepper()", "attr.data-disabled": "control()?.resolvedDisabled() === true ? '' : null", "attr.data-invalid": "control()?.resolvedInvalid() === true ? '' : null", "attr.data-readonly": "control()?.resolvedReadOnly() === true ? '' : null", "attr.data-scrubbing": "scrubbing() ? '' : null" } }, queries: [{ propertyName: "control", first: true, predicate: SlNumberFieldControl, descendants: true, isSignal: true }], exportAs: ["slNumberField"], ngImport: i0, template: `@if (resolvedStepper() === 'split') {
+      <button
+        data-part="decrement"
+        type="button"
+        tabindex="-1"
+        [attr.aria-controls]="control()?.controlId()"
+        [attr.aria-label]="t('decrement')"
+        [disabled]="decrementDisabled()"
+        (pointerdown)="press(-1, $event)"
+        (pointerup)="release()"
+        (pointerleave)="release()"
+        (pointercancel)="release()"
+      >
+        <span slIcon><svg slGlyph name="minus"></svg></span>
+      </button>
+    }
+    <ng-content select="[slNumberFieldStart]" />
+    <ng-content />
+    <ng-content select="[slNumberFieldEnd]" />
+    @if (resolvedStepper() === 'split') {
+      <button
+        data-part="increment"
+        type="button"
+        tabindex="-1"
+        [attr.aria-controls]="control()?.controlId()"
+        [attr.aria-label]="t('increment')"
+        [disabled]="incrementDisabled()"
+        (pointerdown)="press(1, $event)"
+        (pointerup)="release()"
+        (pointerleave)="release()"
+        (pointercancel)="release()"
+      >
+        <span slIcon><svg slGlyph name="plus"></svg></span>
+      </button>
+    } @else if (resolvedStepper() === 'stacked') {
+      <span data-part="stepper">
+        <button
+          data-part="increment"
+          type="button"
+          tabindex="-1"
+          [attr.aria-controls]="control()?.controlId()"
+          [attr.aria-label]="t('increment')"
+          [disabled]="incrementDisabled()"
+          (pointerdown)="press(1, $event)"
+          (pointerup)="release()"
+          (pointerleave)="release()"
+          (pointercancel)="release()"
+        >
+          <!-- Both halves draw the down chevron; the stylesheet turns the
+               increment's half a turn. -->
+          <span slIcon><svg slGlyph name="chevron-down"></svg></span>
+        </button>
+        <button
+          data-part="decrement"
+          type="button"
+          tabindex="-1"
+          [attr.aria-controls]="control()?.controlId()"
+          [attr.aria-label]="t('decrement')"
+          [disabled]="decrementDisabled()"
+          (pointerdown)="press(-1, $event)"
+          (pointerup)="release()"
+          (pointerleave)="release()"
+          (pointercancel)="release()"
+        >
+          <span slIcon><svg slGlyph name="chevron-down"></svg></span>
+        </button>
+      </span>
+    }
+    @if (control()?.submissionName(); as submissionName) {
+      <input
+        type="hidden"
+        [attr.name]="submissionName"
+        [attr.form]="control()?.submissionForm()"
+        [value]="hiddenValue()"
+      />
+    }`, isInline: true, styles: ["@layer slotted.components{[data-ui=number-field][data-part=root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-floor: var(--slotted-number-field-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px);--_stepper-size: var( --slotted-number-field-stepper-size, max( var(--slotted-target-min, 24px), min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) ) );--_action-size: var( --slotted-number-field-action-size, min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_inset: max( 0px, calc( (var(--_height) - 2 * var(--slotted-control-border-width, 1px) - var(--_action-size)) / 2 ) );--_action-radius: max( var(--slotted-radius-xs, 2px), calc(var(--slotted-number-field-radius, var(--slotted-control-radius, 4px)) - var(--_inset)) );--_column-inset: var(--slotted-space-1, 2px);--_column-radius: max( var(--slotted-radius-xs, 2px), calc( var(--slotted-number-field-radius, var(--slotted-control-radius, 4px)) - var(--_column-inset) ) );align-items:center;background-color:var(--slotted-number-field-background, var(--slotted-control-surface, Field));border:var(--slotted-control-border-width, 1px) solid var(--slotted-number-field-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-number-field-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-number-field-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-number-field-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);inline-size:100%;min-inline-size:0;min-block-size:var(--_height);padding-inline:var(--_padding-inline);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)}[data-ui=number-field]>[data-part=input]{background-color:transparent;align-self:stretch;margin-block:calc(var(--slotted-control-border-width, 1px) * -1);border:0;color:inherit;flex:1 1 auto;font:inherit;font-variant-numeric:tabular-nums;outline:none;padding:0;min-inline-size:0;text-overflow:ellipsis;unicode-bidi:plaintext}[data-ui=number-field]:dir(rtl)>[data-part=input]{text-align:right}[data-ui=number-field]>[data-part=input]::placeholder{color:var(--slotted-number-field-placeholder-color, var(--slotted-text-muted, GrayText));text-overflow:ellipsis}[data-ui=number-field][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px));--_inner-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui=number-field][data-part=root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px)}[data-ui=number-field][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px));--_inner-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui=number-field][data-part=root][data-variant=subtle]{background-color:var( --slotted-number-field-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-number-field-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=number-field][data-part=root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}@media(forced-colors:active){[data-ui=number-field][data-part=root][data-variant=plain]{border-color:ButtonBorder}}[data-ui=number-field]>[data-part=start],[data-ui=number-field]>[data-part=end]{align-items:center;color:var(--slotted-number-field-adornment-color, var(--slotted-text-muted, GrayText));display:inline-flex;flex:0 0 auto;gap:var(--slotted-space-2, .25rem);line-height:1;unicode-bidi:plaintext;--slotted-icon-size: var(--_icon-size)}[data-ui=number-field]>[data-part=start]>svg,[data-ui=number-field]>[data-part=end]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=number-field]>[data-part=start]:not(:has(svg,img,[data-ui=icon])),[data-ui=number-field]>[data-part=end]:not(:has(svg,img,[data-ui=icon])){padding-inline:calc(var(--_icon-size) / 8)}[data-ui=number-field]>:is([data-part=start],[data-part=end]):has(>[data-part=scrub]){align-self:stretch}[data-ui=number-field] [data-part=scrub]{align-items:center;align-self:stretch;cursor:ew-resize;display:inline-flex;gap:var(--slotted-space-2, .25rem);touch-action:none;transition:color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);user-select:none;-webkit-user-select:none}[data-ui=number-field]:not([data-disabled]):not([data-readonly]) [data-part=scrub]:is(:hover,[data-scrubbing]){color:var(--slotted-number-field-scrub-active-color, var(--slotted-text, CanvasText))}[data-ui=number-field]:is([data-disabled],[data-readonly]) [data-part=scrub]{cursor:default;touch-action:auto}[data-ui=number-field]>[data-part=stepper]>button,[data-ui=number-field]>[data-part=decrement],[data-ui=number-field]>[data-part=increment]{align-items:center;appearance:none;background-color:transparent;border:0;color:var(--slotted-number-field-stepper-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;justify-content:center;padding:0;position:relative;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=number-field] [data-part=decrement],[data-ui=number-field] [data-part=increment]{--slotted-icon-size: var(--_icon-size)}[data-ui=number-field][data-stepper=stacked] [data-part=increment]>[data-ui=icon]{rotate:.5turn}[data-ui=number-field][data-part=root][data-stepper=stacked]{padding-inline-end:0}[data-ui=number-field]>[data-part=stepper]{align-self:stretch;box-sizing:content-box;display:flex;flex:0 0 auto;flex-direction:column;inline-size:var(--_stepper-size);padding-block:var(--_column-inset);padding-inline-end:var(--_column-inset)}[data-ui=number-field]>[data-part=stepper]>button{block-size:50%;border-radius:var(--_column-radius);inline-size:100%}[data-ui=number-field]>[data-part=stepper]>:is([data-part=increment],[data-part=decrement]):after{content:\"\";inset-inline:0 calc(var(--_column-inset) * -1);position:absolute}[data-ui=number-field]>[data-part=stepper]>[data-part=increment]:after{inset-block:calc(var(--_column-inset) * -1) 0}[data-ui=number-field]>[data-part=stepper]>[data-part=decrement]:after{inset-block:0 calc(var(--_column-inset) * -1)}[data-ui=number-field]>[data-part=stepper]>button>[data-ui=icon]{block-size:min(var(--_icon-size),100%);contain:size}[data-ui=number-field][data-part=root][data-stepper=split]{gap:0;padding-inline:var(--_inset)}[data-ui=number-field][data-stepper=split]>[data-part=decrement],[data-ui=number-field][data-stepper=split]>[data-part=increment]{block-size:var(--_action-size);border-radius:var(--_action-radius);inline-size:var(--_action-size)}[data-ui=number-field][data-stepper=split]>[data-part=input]{padding-inline:var(--_gap);text-align:center}[data-ui=number-field][data-stepper=split]>[data-part=start]{padding-inline-start:var(--_gap)}[data-ui=number-field][data-stepper=split]>[data-part=end]{padding-inline-end:var(--_gap)}[data-ui=number-field][data-stepper=split]>[data-part=decrement]:after,[data-ui=number-field][data-stepper=split]>[data-part=increment]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=number-field][data-stepper=split]>:is([data-part=decrement],[data-part=increment]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=number-field]>[data-part=stepper]>:is([data-part=increment],[data-part=decrement]):after{inset-inline:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}}[data-ui=number-field] [data-part=decrement]:hover:not(:disabled),[data-ui=number-field] [data-part=increment]:hover:not(:disabled){background-color:var( --slotted-number-field-stepper-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=number-field] [data-part=decrement]:active:not(:disabled),[data-ui=number-field] [data-part=increment]:active:not(:disabled){background-color:var( --slotted-number-field-stepper-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=number-field] [data-part=decrement]:disabled,[data-ui=number-field] [data-part=increment]:disabled{background-color:var( --slotted-number-field-stepper-disabled-background, var(--slotted-disabled-background) );color:var(--slotted-number-field-stepper-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=number-field] [data-part=decrement]:focus-visible,[data-ui=number-field] [data-part=increment]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=number-field][data-part=root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){border-color:var(--slotted-number-field-hover-border-color, var(--slotted-tone-accent-border))}[data-ui=number-field][data-part=root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-number-field-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=number-field][data-part=root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-number-field-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui=number-field][data-part=root]: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=number-field][data-part=root][data-variant=plain]:has(>[data-part=input]:focus-visible){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=number-field][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-number-field-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-number-field-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-number-field-invalid-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-number-field-invalid-border-color, var(--slotted-tone-danger-border) );box-shadow:var(--_invalid-edge)}[data-ui=number-field][data-part=root][data-invalid]: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=number-field][data-part=root][data-variant=plain][data-invalid]:has(>[data-part=input]:focus-visible){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui=number-field][data-part=root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui=number-field][data-part=root][data-invalid]: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)}[data-ui=number-field][data-part=root][data-variant=plain][data-invalid]: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:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}}[data-ui=number-field][data-part=root][data-readonly]{background-color:var( --slotted-number-field-readonly-background, var(--slotted-tone-secondary-subtle-hover) );border-color:var( --slotted-number-field-readonly-border-color, var(--slotted-border-subtle, ButtonBorder) );cursor:default}[data-ui=number-field][data-part=root][data-disabled],[data-ui=number-field][data-part=root]:has(>[data-part=input]:disabled){background-color:var( --slotted-number-field-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-number-field-disabled-border-color, var(--slotted-disabled-border));box-shadow:none;color:var(--slotted-number-field-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=number-field][data-part=root][data-disabled]>[data-part=start],[data-ui=number-field][data-part=root][data-disabled]>[data-part=end]{color:var(--slotted-disabled-foreground)}}\n"], dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNumberField, decorators: [{
+            type: Component,
+            args: [{ selector: '[slNumberField]', standalone: true, exportAs: 'slNumberField', imports: [SlGlyph, SlIcon], template: `@if (resolvedStepper() === 'split') {
+      <button
+        data-part="decrement"
+        type="button"
+        tabindex="-1"
+        [attr.aria-controls]="control()?.controlId()"
+        [attr.aria-label]="t('decrement')"
+        [disabled]="decrementDisabled()"
+        (pointerdown)="press(-1, $event)"
+        (pointerup)="release()"
+        (pointerleave)="release()"
+        (pointercancel)="release()"
+      >
+        <span slIcon><svg slGlyph name="minus"></svg></span>
+      </button>
+    }
+    <ng-content select="[slNumberFieldStart]" />
+    <ng-content />
+    <ng-content select="[slNumberFieldEnd]" />
+    @if (resolvedStepper() === 'split') {
+      <button
+        data-part="increment"
+        type="button"
+        tabindex="-1"
+        [attr.aria-controls]="control()?.controlId()"
+        [attr.aria-label]="t('increment')"
+        [disabled]="incrementDisabled()"
+        (pointerdown)="press(1, $event)"
+        (pointerup)="release()"
+        (pointerleave)="release()"
+        (pointercancel)="release()"
+      >
+        <span slIcon><svg slGlyph name="plus"></svg></span>
+      </button>
+    } @else if (resolvedStepper() === 'stacked') {
+      <span data-part="stepper">
+        <button
+          data-part="increment"
+          type="button"
+          tabindex="-1"
+          [attr.aria-controls]="control()?.controlId()"
+          [attr.aria-label]="t('increment')"
+          [disabled]="incrementDisabled()"
+          (pointerdown)="press(1, $event)"
+          (pointerup)="release()"
+          (pointerleave)="release()"
+          (pointercancel)="release()"
+        >
+          <!-- Both halves draw the down chevron; the stylesheet turns the
+               increment's half a turn. -->
+          <span slIcon><svg slGlyph name="chevron-down"></svg></span>
+        </button>
+        <button
+          data-part="decrement"
+          type="button"
+          tabindex="-1"
+          [attr.aria-controls]="control()?.controlId()"
+          [attr.aria-label]="t('decrement')"
+          [disabled]="decrementDisabled()"
+          (pointerdown)="press(-1, $event)"
+          (pointerup)="release()"
+          (pointerleave)="release()"
+          (pointercancel)="release()"
+        >
+          <span slIcon><svg slGlyph name="chevron-down"></svg></span>
+        </button>
+      </span>
+    }
+    @if (control()?.submissionName(); as submissionName) {
+      <input
+        type="hidden"
+        [attr.name]="submissionName"
+        [attr.form]="control()?.submissionForm()"
+        [value]="hiddenValue()"
+      />
+    }`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'number-field',
+                        'data-part': 'root',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-stepper]': 'resolvedStepper()',
+                        '[attr.data-disabled]': "control()?.resolvedDisabled() === true ? '' : null",
+                        '[attr.data-invalid]': "control()?.resolvedInvalid() === true ? '' : null",
+                        '[attr.data-readonly]': "control()?.resolvedReadOnly() === true ? '' : null",
+                        '[attr.data-scrubbing]': "scrubbing() ? '' : null",
+                    }, styles: ["@layer slotted.components{[data-ui=number-field][data-part=root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-floor: var(--slotted-number-field-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px);--_stepper-size: var( --slotted-number-field-stepper-size, max( var(--slotted-target-min, 24px), min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) ) );--_action-size: var( --slotted-number-field-action-size, min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_inset: max( 0px, calc( (var(--_height) - 2 * var(--slotted-control-border-width, 1px) - var(--_action-size)) / 2 ) );--_action-radius: max( var(--slotted-radius-xs, 2px), calc(var(--slotted-number-field-radius, var(--slotted-control-radius, 4px)) - var(--_inset)) );--_column-inset: var(--slotted-space-1, 2px);--_column-radius: max( var(--slotted-radius-xs, 2px), calc( var(--slotted-number-field-radius, var(--slotted-control-radius, 4px)) - var(--_column-inset) ) );align-items:center;background-color:var(--slotted-number-field-background, var(--slotted-control-surface, Field));border:var(--slotted-control-border-width, 1px) solid var(--slotted-number-field-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-number-field-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-number-field-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-number-field-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);inline-size:100%;min-inline-size:0;min-block-size:var(--_height);padding-inline:var(--_padding-inline);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)}[data-ui=number-field]>[data-part=input]{background-color:transparent;align-self:stretch;margin-block:calc(var(--slotted-control-border-width, 1px) * -1);border:0;color:inherit;flex:1 1 auto;font:inherit;font-variant-numeric:tabular-nums;outline:none;padding:0;min-inline-size:0;text-overflow:ellipsis;unicode-bidi:plaintext}[data-ui=number-field]:dir(rtl)>[data-part=input]{text-align:right}[data-ui=number-field]>[data-part=input]::placeholder{color:var(--slotted-number-field-placeholder-color, var(--slotted-text-muted, GrayText));text-overflow:ellipsis}[data-ui=number-field][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px));--_inner-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui=number-field][data-part=root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px)}[data-ui=number-field][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px));--_inner-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui=number-field][data-part=root][data-variant=subtle]{background-color:var( --slotted-number-field-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-number-field-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=number-field][data-part=root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}@media(forced-colors:active){[data-ui=number-field][data-part=root][data-variant=plain]{border-color:ButtonBorder}}[data-ui=number-field]>[data-part=start],[data-ui=number-field]>[data-part=end]{align-items:center;color:var(--slotted-number-field-adornment-color, var(--slotted-text-muted, GrayText));display:inline-flex;flex:0 0 auto;gap:var(--slotted-space-2, .25rem);line-height:1;unicode-bidi:plaintext;--slotted-icon-size: var(--_icon-size)}[data-ui=number-field]>[data-part=start]>svg,[data-ui=number-field]>[data-part=end]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=number-field]>[data-part=start]:not(:has(svg,img,[data-ui=icon])),[data-ui=number-field]>[data-part=end]:not(:has(svg,img,[data-ui=icon])){padding-inline:calc(var(--_icon-size) / 8)}[data-ui=number-field]>:is([data-part=start],[data-part=end]):has(>[data-part=scrub]){align-self:stretch}[data-ui=number-field] [data-part=scrub]{align-items:center;align-self:stretch;cursor:ew-resize;display:inline-flex;gap:var(--slotted-space-2, .25rem);touch-action:none;transition:color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);user-select:none;-webkit-user-select:none}[data-ui=number-field]:not([data-disabled]):not([data-readonly]) [data-part=scrub]:is(:hover,[data-scrubbing]){color:var(--slotted-number-field-scrub-active-color, var(--slotted-text, CanvasText))}[data-ui=number-field]:is([data-disabled],[data-readonly]) [data-part=scrub]{cursor:default;touch-action:auto}[data-ui=number-field]>[data-part=stepper]>button,[data-ui=number-field]>[data-part=decrement],[data-ui=number-field]>[data-part=increment]{align-items:center;appearance:none;background-color:transparent;border:0;color:var(--slotted-number-field-stepper-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;justify-content:center;padding:0;position:relative;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=number-field] [data-part=decrement],[data-ui=number-field] [data-part=increment]{--slotted-icon-size: var(--_icon-size)}[data-ui=number-field][data-stepper=stacked] [data-part=increment]>[data-ui=icon]{rotate:.5turn}[data-ui=number-field][data-part=root][data-stepper=stacked]{padding-inline-end:0}[data-ui=number-field]>[data-part=stepper]{align-self:stretch;box-sizing:content-box;display:flex;flex:0 0 auto;flex-direction:column;inline-size:var(--_stepper-size);padding-block:var(--_column-inset);padding-inline-end:var(--_column-inset)}[data-ui=number-field]>[data-part=stepper]>button{block-size:50%;border-radius:var(--_column-radius);inline-size:100%}[data-ui=number-field]>[data-part=stepper]>:is([data-part=increment],[data-part=decrement]):after{content:\"\";inset-inline:0 calc(var(--_column-inset) * -1);position:absolute}[data-ui=number-field]>[data-part=stepper]>[data-part=increment]:after{inset-block:calc(var(--_column-inset) * -1) 0}[data-ui=number-field]>[data-part=stepper]>[data-part=decrement]:after{inset-block:0 calc(var(--_column-inset) * -1)}[data-ui=number-field]>[data-part=stepper]>button>[data-ui=icon]{block-size:min(var(--_icon-size),100%);contain:size}[data-ui=number-field][data-part=root][data-stepper=split]{gap:0;padding-inline:var(--_inset)}[data-ui=number-field][data-stepper=split]>[data-part=decrement],[data-ui=number-field][data-stepper=split]>[data-part=increment]{block-size:var(--_action-size);border-radius:var(--_action-radius);inline-size:var(--_action-size)}[data-ui=number-field][data-stepper=split]>[data-part=input]{padding-inline:var(--_gap);text-align:center}[data-ui=number-field][data-stepper=split]>[data-part=start]{padding-inline-start:var(--_gap)}[data-ui=number-field][data-stepper=split]>[data-part=end]{padding-inline-end:var(--_gap)}[data-ui=number-field][data-stepper=split]>[data-part=decrement]:after,[data-ui=number-field][data-stepper=split]>[data-part=increment]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=number-field][data-stepper=split]>:is([data-part=decrement],[data-part=increment]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=number-field]>[data-part=stepper]>:is([data-part=increment],[data-part=decrement]):after{inset-inline:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}}[data-ui=number-field] [data-part=decrement]:hover:not(:disabled),[data-ui=number-field] [data-part=increment]:hover:not(:disabled){background-color:var( --slotted-number-field-stepper-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=number-field] [data-part=decrement]:active:not(:disabled),[data-ui=number-field] [data-part=increment]:active:not(:disabled){background-color:var( --slotted-number-field-stepper-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=number-field] [data-part=decrement]:disabled,[data-ui=number-field] [data-part=increment]:disabled{background-color:var( --slotted-number-field-stepper-disabled-background, var(--slotted-disabled-background) );color:var(--slotted-number-field-stepper-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=number-field] [data-part=decrement]:focus-visible,[data-ui=number-field] [data-part=increment]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=number-field][data-part=root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){border-color:var(--slotted-number-field-hover-border-color, var(--slotted-tone-accent-border))}[data-ui=number-field][data-part=root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-number-field-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=number-field][data-part=root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-number-field-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui=number-field][data-part=root]: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=number-field][data-part=root][data-variant=plain]:has(>[data-part=input]:focus-visible){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=number-field][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-number-field-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-number-field-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-number-field-invalid-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-number-field-invalid-border-color, var(--slotted-tone-danger-border) );box-shadow:var(--_invalid-edge)}[data-ui=number-field][data-part=root][data-invalid]: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=number-field][data-part=root][data-variant=plain][data-invalid]:has(>[data-part=input]:focus-visible){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui=number-field][data-part=root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui=number-field][data-part=root][data-invalid]: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)}[data-ui=number-field][data-part=root][data-variant=plain][data-invalid]: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:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}}[data-ui=number-field][data-part=root][data-readonly]{background-color:var( --slotted-number-field-readonly-background, var(--slotted-tone-secondary-subtle-hover) );border-color:var( --slotted-number-field-readonly-border-color, var(--slotted-border-subtle, ButtonBorder) );cursor:default}[data-ui=number-field][data-part=root][data-disabled],[data-ui=number-field][data-part=root]:has(>[data-part=input]:disabled){background-color:var( --slotted-number-field-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-number-field-disabled-border-color, var(--slotted-disabled-border));box-shadow:none;color:var(--slotted-number-field-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=number-field][data-part=root][data-disabled]>[data-part=start],[data-ui=number-field][data-part=root][data-disabled]>[data-part=end]{color:var(--slotted-disabled-foreground)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], stepper: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepper", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlNumberFieldControl), { ...{ descendants: true }, isSignal: true }] }] } });
+
+/** `undefined` stays absent; anything else becomes a number. */
+const optionalNumber = (value) => value === undefined || value === null || value === '' ? undefined : numberAttribute(value);
+/**
+ * The control itself: the number, the identifier, and everything the field
+ * around it says.
+ *
+ * **The element is `type="text"` and carries the APG's `spinbutton` role.**
+ * `type="number"` empties itself whenever the text is not a valid
+ * floating-point number, so no grouping separator, no decimal comma and no
+ * currency affix survives it.
+ *
+ * **The text belongs to the element and the number belongs to the family.** The
+ * number moves on every keystroke that parses. Under `formatOn="change"`, the
+ * default, the text takes the locale's shape on that same keystroke: the
+ * grouping a long number is read by appears while it is being typed, and the
+ * caret comes back to the character it was on because it is counted in the
+ * reader's own characters rather than in string indices. Under
+ * `formatOn="commit"` the text is the reader's until blur, `Enter`, a stepper
+ * press, a key step or a wheel turn.
+ *
+ * Rounding, padding and clamping belong to the commit under both. A keystroke
+ * never takes away a nought the reader has just typed.
+ *
+ * **Unset means ask the field.** `disabled`, `readOnly` and `invalid` default to
+ * `undefined` rather than `false`. A value the consumer wrote as a static
+ * attribute is read before the host binding computes, so the binding never
+ * writes over it.
+ */
+class SlNumberFieldInput {
+    /**
+     * Present means the consumer owns the number, for the life of the component.
+     * `null` is empty, and `undefined` is the absence that makes the control
+     * uncontrolled — the two are different answers.
+     */
+    value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: (raw) => (raw === undefined ? undefined : (optionalNumber(raw) ?? null)) });
+    /** The number the control starts from when nobody else writes one. */
+    defaultValue = input(null, { ...(ngDevMode ? { debugName: "defaultValue" } : /* istanbul ignore next */ {}), transform: (raw) => (raw === undefined ? null : (optionalNumber(raw) ?? null)) });
+    min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    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 });
+    /** The amount `Alt` moves by. Defaults to `step / 10`. */
+    smallStep = input(undefined, { ...(ngDevMode ? { debugName: "smallStep" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    /** Where an empty control starts stepping from. Defaults to `min`, then nought. */
+    stepFrom = input(undefined, { ...(ngDevMode ? { debugName: "stepFrom" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    snapToStep = input(false, { ...(ngDevMode ? { debugName: "snapToStep" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Where a value outside the range goes, and when. Defaults to the token, then `blur`. */
+    clamp = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clamp" }] : /* istanbul ignore next */ []));
+    /** How the value is written and read back, through `Intl.NumberFormat`. */
+    format = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    /** When the text takes that shape. Defaults to the token, then `change`. */
+    formatOn = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatOn" }] : /* istanbul ignore next */ []));
+    /** BCP 47. Defaults to the language in force (`provideSlotted`). */
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    /**
+     * Lets the wheel move the value while the control has focus. Off by default:
+     * a reader scrolling a form must not change an amount by passing over it.
+     */
+    wheel = input(false, { ...(ngDevMode ? { debugName: "wheel" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** 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();
+    element = inject(ElementRef).nativeElement;
+    /**
+     * The frame around the control. Injected without `optional`, so an `input`
+     * written without it fails at construction rather than silently losing its
+     * border, its ring and the place its two buttons stand.
+     */
+    numberField = inject(SlNumberField);
+    field = inject(SlField, { optional: true });
+    defaults = injectNumberFieldDefaults();
+    appLocale = injectLocale();
+    writtenId = inject(new HostAttributeToken('id'), { optional: true });
+    writtenName = inject(new HostAttributeToken('name'), { optional: true });
+    writtenForm = inject(new HostAttributeToken('form'), { optional: true });
+    writtenInputMode = inject(new HostAttributeToken('inputmode'), {
+        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,
+    });
+    writtenReadonly = inject(new HostAttributeToken('readonly'), { optional: true });
+    /** What the family holds when nobody else owns it. */
+    own = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "own" }] : /* istanbul ignore next */ []));
+    /** What the element is showing. Never a second copy of the number. */
+    text = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    formDisabled = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    onChangeFn = () => undefined;
+    onTouchedFn = () => undefined;
+    /**
+     * One formatter, rebuilt only when the locale or the format changes. The
+     * options object is read through a signal, so an inline object handed on
+     * every change detection does not rebuild the parser.
+     */
+    formatter = computed(() => {
+        const options = this.format();
+        return createNumberFormat({
+            locale: this.locale() ?? this.appLocale(),
+            ...(options === undefined ? {} : { options }),
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []));
+    /** Present means the consumer owns it; absent means the directive does. */
+    controlled = computed(() => this.value() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlled" }] : /* istanbul ignore next */ []));
+    numberValue = computed(() => {
+        const bound = this.value();
+        return bound === undefined ? this.own() : bound;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "numberValue" }] : /* istanbul ignore next */ []));
+    valueText = computed(() => {
+        const shown = this.text();
+        return shown === '' ? null : shown;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
+    resolvedClamp = computed(() => this.clamp() ?? this.defaults.clamp, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedClamp" }] : /* istanbul ignore next */ []));
+    resolvedFormatOn = computed(() => this.formatOn() ?? this.defaults.formatOn, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedFormatOn" }] : /* 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.writtenReadonly === null ? undefined : true) ??
+        this.field?.resolvedReadOnly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedReadOnly" }] : /* istanbul ignore next */ []));
+    /**
+     * Unstated, the control asks the field. Under `clamp="none"` nothing returns
+     * a number outside `min`…`max` to the range, so the control reports it.
+     */
+    outsideRange = computed(() => {
+        const current = this.numberValue();
+        const min = this.min();
+        const max = this.max();
+        return (this.resolvedClamp() === 'none' &&
+            current !== null &&
+            ((min !== undefined && current < min) || (max !== undefined && current > max)));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outsideRange" }] : /* istanbul ignore next */ []));
+    resolvedInvalid = computed(() => this.invalid() ?? (this.outsideRange() ? true : this.field?.invalid()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedInvalid" }] : /* 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 */ []));
+    parsedText = computed(() => this.formatter().parse(this.text()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parsedText" }] : /* istanbul ignore next */ []));
+    atMax = computed(() => {
+        const max = this.max();
+        const current = this.parsedText();
+        return max !== undefined && current !== null && current >= max;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "atMax" }] : /* istanbul ignore next */ []));
+    atMin = computed(() => {
+        const min = this.min();
+        const current = this.parsedText();
+        return min !== undefined && current !== null && current <= min;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "atMin" }] : /* istanbul ignore next */ []));
+    /**
+     * The software keyboard, derived from the props rather than from the user
+     * agent. Neither numeric keypad offers a minus sign on every platform, so a
+     * control that admits a negative asks for the full keyboard.
+     */
+    resolvedInputMode = computed(() => {
+        if (this.writtenInputMode !== null)
+            return this.writtenInputMode;
+        const min = this.min();
+        if (min === undefined || min < 0)
+            return 'text';
+        return this.formatter().maximumFractionDigits > 0 ? 'decimal' : 'numeric';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedInputMode" }] : /* 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 */ []));
+    disabledAttribute = computed(() => this.resolvedDisabled() === true ? '' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledAttribute" }] : /* istanbul ignore next */ []));
+    readonlyAttribute = computed(() => this.resolvedReadOnly() === true ? '' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readonlyAttribute" }] : /* istanbul ignore next */ []));
+    constructor() {
+        /* The element shows what the family holds, and the text is only rewritten
+           when it no longer means the same number — typing `1234` must not become
+           `1,234` between two keystrokes. */
+        effect(() => {
+            const next = this.numberValue();
+            const formatter = this.formatter();
+            if (Object.is(next, formatter.parse(this.text())))
+                return;
+            this.write(formatter.format(next));
+        });
+        this.attachWheel();
+    }
+    /**
+     * Angular creates every directive in a template before it binds any input, so
+     * the starting value is read here rather than in the constructor: read there,
+     * `defaultValue` is always its own default and the control starts empty.
+     */
+    ngOnInit() {
+        const bound = this.value();
+        const initial = bound === undefined ? this.defaultValue() : bound;
+        if (bound === undefined)
+            this.own.set(initial);
+        this.write(this.formatter().format(initial));
+    }
+    /** The native element, for `focus()`, `select()` and `setSelectionRange()`. */
+    get inputElement() {
+        return this.element;
+    }
+    /** Steps up by one step and reports `programmatic`. */
+    increment() {
+        this.move(1, this.step(), 'programmatic', undefined);
+    }
+    /** Steps down by one step and reports `programmatic`. */
+    decrement() {
+        this.move(-1, this.step(), 'programmatic', undefined);
+    }
+    /** What a `slNumberFieldScrub` drag calls, once per whole step travelled. */
+    scrubBy(steps, source) {
+        if (steps === 0)
+            return;
+        const step = this.step();
+        const amount = source.shiftKey
+            ? (this.largeStep() ?? step * 10)
+            : source.altKey
+                ? (this.smallStep() ?? step / 10)
+                : step;
+        this.move(steps > 0 ? 1 : -1, amount * Math.abs(steps), 'pointer', source);
+    }
+    /** What the frame's two buttons call. Focus returns to the value. */
+    stepBy(direction, source) {
+        this.element.focus();
+        this.move(direction, this.step(), 'pointer', source);
+    }
+    writeValue(value) {
+        this.own.set(value ?? null);
+        this.write(this.formatter().format(value ?? null));
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    onInput(event) {
+        const raw = this.element.value;
+        const native = event;
+        /* An IME commits a whole run, and a run reshaped half way through is a run
+           the engine can no longer finish. The text is left alone until
+           `compositionend` sends a keystroke that is not composing. */
+        if (this.resolvedFormatOn() !== 'change' || native.isComposing) {
+            this.text.set(raw);
+            this.request(this.formatter().parse(raw), 'keyboard', undefined);
+            return;
+        }
+        const formatter = this.formatter();
+        const caret = this.element.selectionStart ?? raw.length;
+        const deletion = native.inputType?.startsWith('delete') === true;
+        const edited = deletion
+            ? formatter.deleteAcrossSeparator(this.text(), { text: raw, caret }, native.inputType === 'deleteContentForward' ? 1 : -1)
+            : { text: raw, caret };
+        const shaped = formatter.formatWhileTyping(edited);
+        this.write(shaped.text);
+        /* Only while the reader is in the control: moving the selection of an
+           element nobody is typing in scrolls it into view on some engines. */
+        if (this.element.ownerDocument.activeElement === this.element) {
+            this.element.setSelectionRange(shaped.caret, shaped.caret);
+        }
+        this.request(formatter.parse(shaped.text), 'keyboard', undefined);
+    }
+    /**
+     * The keystroke filter. `beforeinput` is where a keystroke, a paste and a
+     * drop all arrive before the element changes, and it is the only place a
+     * character that cannot be part of a number can be refused without moving
+     * the caret.
+     */
+    onBeforeInput(event) {
+        if (event.defaultPrevented)
+            return;
+        /* An IME commits a whole run; refusing it character by character would
+           make a full-width `１２３` untypeable. */
+        if (event.isComposing)
+            return;
+        if (event.inputType.startsWith('delete'))
+            return;
+        const start = this.element.selectionStart ?? this.element.value.length;
+        const finish = this.element.selectionEnd ?? this.element.value.length;
+        const next = this.element.value.slice(0, start) + (event.data ?? '') + this.element.value.slice(finish);
+        const formatter = this.formatter();
+        if (!formatter.isPartial(next)) {
+            event.preventDefault();
+            return;
+        }
+        if (this.resolvedClamp() !== 'strict')
+            return;
+        const parsed = formatter.parse(next);
+        if (parsed === null)
+            return;
+        const min = this.min();
+        const max = this.max();
+        if ((min !== undefined && parsed < min) || (max !== undefined && parsed > max)) {
+            event.preventDefault();
+        }
+    }
+    onKeyDown(event) {
+        if (event.defaultPrevented)
+            return;
+        if (this.resolvedDisabled() === true || this.resolvedReadOnly() === true)
+            return;
+        const step = this.step();
+        const large = this.largeStep() ?? step * 10;
+        const small = this.smallStep() ?? step / 10;
+        const amount = event.shiftKey ? large : event.altKey ? small : step;
+        switch (event.key) {
+            case 'ArrowUp':
+                event.preventDefault();
+                this.move(1, amount, 'keyboard', event);
+                return;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.move(-1, amount, 'keyboard', event);
+                return;
+            case 'PageUp':
+                event.preventDefault();
+                this.move(1, large, 'keyboard', event);
+                return;
+            case 'PageDown':
+                event.preventDefault();
+                this.move(-1, large, 'keyboard', event);
+                return;
+            case 'Home': {
+                const min = this.min();
+                if (min === undefined || event.ctrlKey || event.metaKey)
+                    return;
+                event.preventDefault();
+                this.settle(min, this.request(min, 'keyboard', event));
+                return;
+            }
+            case 'End': {
+                const max = this.max();
+                if (max === undefined || event.ctrlKey || event.metaKey)
+                    return;
+                event.preventDefault();
+                this.settle(max, this.request(max, 'keyboard', event));
+                return;
+            }
+            case 'Enter':
+                /* Committed and not intercepted: a single-line control submits its
+                   form, which is the platform's behaviour. */
+                this.commit('keyboard', event);
+                return;
+            default:
+        }
+    }
+    onBlur(event) {
+        this.onTouchedFn();
+        this.commit('blur', event);
+    }
+    /**
+     * The wheel, when it is asked for, and never otherwise. It is a native
+     * listener rather than a host binding because the event has to be cancelled,
+     * and a host listener on `wheel` is passive in some browsers.
+     */
+    attachWheel() {
+        const onWheel = (event) => {
+            if (!this.wheel())
+                return;
+            if (this.resolvedDisabled() === true || this.resolvedReadOnly() === true)
+                return;
+            if (this.element.ownerDocument.activeElement !== this.element)
+                return;
+            if (event.deltaY === 0)
+                return;
+            event.preventDefault();
+            this.move(event.deltaY < 0 ? 1 : -1, this.step(), 'pointer', event);
+        };
+        this.element.addEventListener('wheel', onWheel, { passive: false });
+        inject(DestroyRef).onDestroy(() => this.element.removeEventListener('wheel', onWheel));
+    }
+    /** Formats what the reader typed and puts the value back in range. */
+    commit(reason, source) {
+        const formatter = this.formatter();
+        let next = formatter.parse(this.text());
+        const min = this.min();
+        const max = this.max();
+        if (next !== null) {
+            /* The number committed is the number shown: rounded to the precision
+               the format states, through the same formatter. */
+            next = formatter.parse(formatter.format(next)) ?? next;
+            /* A typed value goes to the nearest multiple of the grid. */
+            if (this.snapToStep())
+                next = snapToStep(next, this.step(), min ?? 0);
+            if (this.resolvedClamp() !== 'none') {
+                next = clamp(next, min ?? Number.NEGATIVE_INFINITY, max ?? Number.POSITIVE_INFINITY);
+            }
+        }
+        this.settle(next, this.request(next, reason, source));
+    }
+    move(direction, amount, reason, source) {
+        const min = this.min();
+        const max = this.max();
+        const stepFrom = this.stepFrom();
+        const next = stepNumber({
+            value: this.formatter().parse(this.text()),
+            direction,
+            step: amount,
+            ...(min === undefined ? {} : { min }),
+            ...(max === undefined ? {} : { max }),
+            ...(stepFrom === undefined ? {} : { stepFrom }),
+            snapToStep: this.snapToStep(),
+        });
+        this.settle(next, this.request(next, reason, source));
+    }
+    /**
+     * Asks to move, and says whether anything did. A refused request answers
+     * `false`, and the caller uses that to decide what the element shows: a
+     * control that wrote the new number into the text regardless would show a
+     * value the consumer never accepted.
+     */
+    request(next, reason, source) {
+        const current = this.numberValue();
+        if (Object.is(next, current))
+            return false;
+        let cancelled = false;
+        const state = createControllable({
+            controlled: undefined,
+            initial: current,
+            onRequest: (pending) => {
+                this.valueChange.emit(pending);
+                cancelled = pending.cancelled;
+            },
+        });
+        state.request(next, reason, source);
+        if (cancelled)
+            return false;
+        this.onChangeFn(next);
+        /* A controlled control never moves its own number: it asks, and waits for
+           the consumer's next value. */
+        if (this.controlled())
+            return false;
+        this.own.set(next);
+        return true;
+    }
+    settle(next, moved) {
+        const shown = moved ? next : this.numberValue();
+        this.write(this.formatter().format(shown));
+    }
+    /** One place the element's text is written, so the signal never drifts from it. */
+    write(value) {
+        if (this.element.value !== value)
+            this.element.value = value;
+        this.text.set(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNumberFieldInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlNumberFieldInput, isStandalone: true, selector: "input[slNumberFieldInput]", 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 }, smallStep: { classPropertyName: "smallStep", publicName: "smallStep", isSignal: true, isRequired: false, transformFunction: null }, stepFrom: { classPropertyName: "stepFrom", publicName: "stepFrom", isSignal: true, isRequired: false, transformFunction: null }, snapToStep: { classPropertyName: "snapToStep", publicName: "snapToStep", isSignal: true, isRequired: false, transformFunction: null }, clamp: { classPropertyName: "clamp", publicName: "clamp", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, formatOn: { classPropertyName: "formatOn", publicName: "formatOn", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, wheel: { classPropertyName: "wheel", publicName: "wheel", 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" }, host: { attributes: { "data-part": "input", "autocomplete": "off", "autocorrect": "off", "spellcheck": "false" }, listeners: { "input": "onInput($event)", "beforeinput": "onBeforeInput($event)", "keydown": "onKeyDown($event)", "blur": "onBlur($event)" }, properties: { "attr.type": "'text'", "attr.role": "'spinbutton'", "attr.id": "controlId()", "attr.inputmode": "resolvedInputMode()", "attr.aria-describedby": "describedBy()", "attr.aria-invalid": "ariaInvalid()", "attr.aria-required": "ariaRequired()", "attr.aria-valuenow": "numberValue()", "attr.aria-valuemin": "min() ?? null", "attr.aria-valuemax": "max() ?? null", "attr.aria-valuetext": "valueText()", "attr.name": "null", "attr.disabled": "disabledAttribute()", "attr.readonly": "readonlyAttribute()" } }, providers: [
+            { provide: SlNumberFieldControl, useExisting: forwardRef(() => SlNumberFieldInput) },
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlNumberFieldInput), multi: true },
+        ], exportAs: ["slNumberFieldInput"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNumberFieldInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[slNumberFieldInput]',
+                    standalone: true,
+                    exportAs: 'slNumberFieldInput',
+                    providers: [
+                        { provide: SlNumberFieldControl, useExisting: forwardRef(() => SlNumberFieldInput) },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlNumberFieldInput), multi: true },
+                    ],
+                    host: {
+                        'data-part': 'input',
+                        autocomplete: 'off',
+                        autocorrect: 'off',
+                        spellcheck: 'false',
+                        /* Bound rather than static, so a consumer who wrote `type="number"` on a
+                           number field does not get the element that empties its own value. */
+                        '[attr.type]': "'text'",
+                        '[attr.role]': "'spinbutton'",
+                        '[attr.id]': 'controlId()',
+                        '[attr.inputmode]': 'resolvedInputMode()',
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '[attr.aria-invalid]': 'ariaInvalid()',
+                        '[attr.aria-required]': 'ariaRequired()',
+                        '[attr.aria-valuenow]': 'numberValue()',
+                        '[attr.aria-valuemin]': 'min() ?? null',
+                        '[attr.aria-valuemax]': 'max() ?? null',
+                        '[attr.aria-valuetext]': 'valueText()',
+                        '[attr.name]': 'null',
+                        '[attr.disabled]': 'disabledAttribute()',
+                        '[attr.readonly]': 'readonlyAttribute()',
+                        '(input)': 'onInput($event)',
+                        '(beforeinput)': 'onBeforeInput($event)',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(blur)': 'onBlur($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], 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 }] }], smallStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "smallStep", required: false }] }], stepFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepFrom", required: false }] }], snapToStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapToStep", required: false }] }], clamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "clamp", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], formatOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatOn", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], wheel: [{ type: i0.Input, args: [{ isSignal: true, alias: "wheel", 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"] }] } });
+
+/**
+ * An adornment before the value in the reading direction: a currency mark, a
+ * unit, an icon. Named for the direction rather than for a side, so the same
+ * markup puts the mark before the amount in both directions.
+ *
+ * It is a sibling of the number rather than part of it. A symbol that belongs
+ * *inside* the value — the `R$` of a currency format, a percent sign — is
+ * `format`'s job and arrives through `Intl` as part of the string the control
+ * holds; this one is never selected, never copied and never parsed.
+ */
+class SlNumberFieldStart {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNumberFieldStart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlNumberFieldStart, isStandalone: true, selector: "[slNumberFieldStart]", host: { attributes: { "data-part": "start" } }, exportAs: ["slNumberFieldStart"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNumberFieldStart, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slNumberFieldStart]',
+                    standalone: true,
+                    exportAs: 'slNumberFieldStart',
+                    host: { 'data-part': 'start' },
+                }]
+        }] });
+/** An adornment after the value in the reading direction. */
+class SlNumberFieldEnd {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNumberFieldEnd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlNumberFieldEnd, isStandalone: true, selector: "[slNumberFieldEnd]", host: { attributes: { "data-part": "end" } }, exportAs: ["slNumberFieldEnd"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNumberFieldEnd, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slNumberFieldEnd]',
+                    standalone: true,
+                    exportAs: 'slNumberFieldEnd',
+                    host: { 'data-part': 'end' },
+                }]
+        }] });
+/**
+ * A mark that moves the number when it is dragged sideways — the design
+ * tools' gesture. Placed inside `slNumberFieldStart` or `slNumberFieldEnd`,
+ * where the frame it belongs to is its ancestor:
+ *
+ * ```html
+ * <span slNumberFieldStart><span slNumberFieldScrub>W</span></span>
+ * ```
+ *
+ * Each `sensitivity` pixels towards the inline end is one step up; `Shift`
+ * moves by the large step and `Alt` by the small one, as on the keyboard. It
+ * is hidden from assistive technology and takes no focus: the input's arrow
+ * keys are the same movement.
+ */
+class SlNumberFieldScrub {
+    /** Pixels of horizontal travel per step. Defaults to 2. */
+    sensitivity = input(SCRUB_SENSITIVITY, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sensitivity" }] : /* istanbul ignore next */ []));
+    frame = inject(SlNumberField);
+    active = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    travel = null;
+    begin(event) {
+        const control = this.frame.control();
+        if (event.button !== 0 || control === undefined || this.frame.inert())
+            return;
+        /* No text selection, and the caret stays in the value the drag moves. */
+        event.preventDefault();
+        control.inputElement.focus();
+        event.currentTarget?.setPointerCapture?.(event.pointerId);
+        this.travel = createScrub({
+            clientX: event.clientX,
+            sensitivity: this.sensitivity(),
+            rtl: getComputedStyle(control.inputElement).direction === 'rtl',
+        });
+        this.active.set(true);
+        this.frame.scrubbing.set(true);
+    }
+    drag(event) {
+        if (this.travel === null)
+            return;
+        this.frame.control()?.scrubBy(this.travel.steps(event.clientX), event);
+    }
+    end() {
+        if (this.travel === null)
+            return;
+        this.travel = null;
+        this.active.set(false);
+        this.frame.scrubbing.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNumberFieldScrub, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlNumberFieldScrub, isStandalone: true, selector: "[slNumberFieldScrub]", inputs: { sensitivity: { classPropertyName: "sensitivity", publicName: "sensitivity", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "scrub", "aria-hidden": "true" }, listeners: { "pointerdown": "begin($event)", "pointermove": "drag($event)", "pointerup": "end()", "pointercancel": "end()", "lostpointercapture": "end()" }, properties: { "attr.data-scrubbing": "active() ? '' : null" } }, exportAs: ["slNumberFieldScrub"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNumberFieldScrub, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slNumberFieldScrub]',
+                    standalone: true,
+                    exportAs: 'slNumberFieldScrub',
+                    host: {
+                        'data-part': 'scrub',
+                        'aria-hidden': 'true',
+                        '[attr.data-scrubbing]': "active() ? '' : null",
+                        '(pointerdown)': 'begin($event)',
+                        '(pointermove)': 'drag($event)',
+                        '(pointerup)': 'end()',
+                        '(pointercancel)': 'end()',
+                        '(lostpointercapture)': 'end()',
+                    },
+                }]
+        }], propDecorators: { sensitivity: [{ type: i0.Input, args: [{ isSignal: true, alias: "sensitivity", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NUMBER_FIELD_DEFAULTS, SlNumberField, SlNumberFieldControl, SlNumberFieldEnd, SlNumberFieldInput, SlNumberFieldScrub, SlNumberFieldStart, injectNumberFieldDefaults, provideNumberFieldDefaults };
+//# sourceMappingURL=slotted-angular-number-field.mjs.map