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

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

@@ -0,0 +1,1131 @@
+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 { currencyFieldMessages } from '@slotted/core/i18n';
+import { STEP_REPEAT_DELAY_COARSE, STEP_REPEAT_DELAY, STEP_REPEAT_INTERVAL, stepNumber, SCRUB_SENSITIVITY, createScrub } from '@slotted/core/number';
+import { SlField } from '@slotted/angular/field';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { createCurrencyFormat, MAX_AMOUNT_DIGITS, withAmount } from '@slotted/core/currency';
+import { clamp } from '@slotted/core/measure';
+import { createControllable } from '@slotted/core/state';
+
+const FALLBACK = {
+    align: 'end',
+    clamp: 'blur',
+    currency: undefined,
+    currencyDisplay: 'symbol',
+    entry: 'cents',
+    formatOn: 'change',
+    size: 'md',
+    stepper: 'none',
+    variant: 'outline',
+};
+const CURRENCY_FIELD_DEFAULTS = new InjectionToken('slotted currency field defaults', { providedIn: 'root', factory: () => FALLBACK });
+/**
+ * An application decides once which currency it charges in and how its
+ * amounts are typed, 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`).
+ *
+ * `currency` is the one worth setting first, and the only one a field cannot be
+ * built without: a product has one currency in nine screens out of ten, and the
+ * tenth states its own.
+ */
+function provideCurrencyFieldDefaults(defaults) {
+    return {
+        provide: CURRENCY_FIELD_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a currency field renders as here, before it states anything of its own. */
+function injectCurrencyFieldDefaults() {
+    return inject(CURRENCY_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`, `text-field` and
+ * `number-field` already have. The input provides itself as this, and the
+ * frame queries it.
+ */
+class SlCurrencyFieldControl {
+}
+
+/**
+ * The frame: one amount, and the two buttons that move it when a product asks
+ * for them.
+ *
+ * **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 amount, 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 steppers are withdrawn by default**, where `number-field` ships them:
+ * an invoice total is typed, not nudged.
+ *
+ * **Angular pays one element for the 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. `slCurrencyFieldInput` injects this class, so a
+ * control written without the frame is a compile-time failure rather than a
+ * silent one.
+ */
+class SlCurrencyField {
+    /** 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 */ []));
+    /** Which edge the amount is set against. Defaults to the token, then `end`. */
+    align = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /** Where the two steppers sit. Defaults to the token, then `none`. */
+    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 = injectCurrencyFieldDefaults();
+    field = inject(SlField, { optional: true });
+    /**
+     * The control inside. It provides itself as `SlCurrencyFieldControl`, so the
+     * frame can read the bounds, the submission name and the shared states
+     * without either directive importing the other.
+     */
+    control = contentChild(SlCurrencyFieldControl, { ...(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 */ []));
+    resolvedAlign = computed(() => this.align() ?? this.defaults.align, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAlign" }] : /* istanbul ignore next */ []));
+    resolvedStepper = computed(() => this.stepper() ?? this.defaults.stepper, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedStepper" }] : /* istanbul ignore next */ []));
+    /**
+     * The entry model belongs to the control, because it is behaviour before it
+     * is an axis: the frame only paints what the control resolved. Two inputs
+     * for one decision would let the box and the element disagree about how the
+     * next keystroke is read.
+     */
+    resolvedEntry = computed(() => this.control()?.resolvedEntry() ?? this.defaults.entry, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedEntry" }] : /* istanbul ignore next */ []));
+    /** The family's words in the language in force, with this field's `messages` laid over them. */
+    t = injectMessages(currencyFieldMessages, this.messages);
+    /** Whether a `slCurrencyFieldScrub` 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 amount: 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: SlCurrencyField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlCurrencyField, isStandalone: true, selector: "[slCurrencyField]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", 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": "currency-field", "data-part": "root" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-align": "resolvedAlign()", "attr.data-entry": "resolvedEntry()", "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: SlCurrencyFieldControl, descendants: true, isSignal: true }], exportAs: ["slCurrencyField"], 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="[slCurrencyFieldStart]" />
+    <ng-content />
+    <ng-content select="[slCurrencyFieldEnd]" />
+    @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=currency-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-currency-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-currency-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-currency-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-currency-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-currency-field-radius, var(--slotted-control-radius, 4px)) - var(--_column-inset) ) );align-items:center;background-color:var( --slotted-currency-field-background, var(--slotted-control-surface, Field) );border:var(--slotted-control-border-width, 1px) solid var(--slotted-currency-field-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-currency-field-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-currency-field-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-currency-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=currency-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=currency-field]>[data-part=input]::placeholder{color:var(--slotted-currency-field-placeholder-color, var(--slotted-text-muted, GrayText));text-overflow:ellipsis}[data-ui=currency-field][data-align=end]>[data-part=input]{text-align:right}[data-ui=currency-field][data-align=end]:dir(rtl)>[data-part=input]{text-align:left}[data-ui=currency-field][data-align=start]>[data-part=input]{text-align:left}[data-ui=currency-field][data-align=start]:dir(rtl)>[data-part=input]{text-align:right}[data-ui=currency-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=currency-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=currency-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=currency-field][data-part=root][data-variant=subtle]{background-color:var( --slotted-currency-field-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-currency-field-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=currency-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=currency-field][data-part=root][data-variant=plain]{border-color:ButtonBorder}}[data-ui=currency-field]>[data-part=start],[data-ui=currency-field]>[data-part=end]{align-items:center;color:var(--slotted-currency-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=currency-field]>[data-part=start]>svg,[data-ui=currency-field]>[data-part=end]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=currency-field]>[data-part=start]:not(:has(svg,img,[data-ui=icon])),[data-ui=currency-field]>[data-part=end]:not(:has(svg,img,[data-ui=icon])){padding-inline:calc(var(--_icon-size) / 8)}[data-ui=currency-field]>:is([data-part=start],[data-part=end]):has(>[data-part=scrub]){align-self:stretch}[data-ui=currency-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);unicode-bidi:plaintext;user-select:none;-webkit-user-select:none}[data-ui=currency-field]:not([data-disabled]):not([data-readonly]) [data-part=scrub]:is(:hover,[data-scrubbing]){color:var(--slotted-currency-field-scrub-active-color, var(--slotted-text, CanvasText))}[data-ui=currency-field]:is([data-disabled],[data-readonly]) [data-part=scrub]{cursor:default;touch-action:auto}[data-ui=currency-field]>[data-part=stepper]>button,[data-ui=currency-field]>[data-part=decrement],[data-ui=currency-field]>[data-part=increment]{align-items:center;appearance:none;background-color:transparent;border:0;color:var(--slotted-currency-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=currency-field] [data-part=decrement],[data-ui=currency-field] [data-part=increment]{--slotted-icon-size: var(--_icon-size)}[data-ui=currency-field][data-stepper=stacked] [data-part=increment]>[data-ui=icon]{rotate:.5turn}[data-ui=currency-field][data-part=root][data-stepper=stacked]{padding-inline-end:0}[data-ui=currency-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=currency-field]>[data-part=stepper]>button{block-size:50%;border-radius:var(--_column-radius);inline-size:100%}[data-ui=currency-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=currency-field]>[data-part=stepper]>[data-part=increment]:after{inset-block:calc(var(--_column-inset) * -1) 0}[data-ui=currency-field]>[data-part=stepper]>[data-part=decrement]:after{inset-block:0 calc(var(--_column-inset) * -1)}[data-ui=currency-field]>[data-part=stepper]>button>[data-ui=icon]{block-size:min(var(--_icon-size),100%);contain:size}[data-ui=currency-field][data-part=root][data-stepper=split]{gap:0;padding-inline:var(--_inset)}[data-ui=currency-field][data-stepper=split]>[data-part=decrement],[data-ui=currency-field][data-stepper=split]>[data-part=increment]{block-size:var(--_action-size);border-radius:var(--_action-radius);inline-size:var(--_action-size)}[data-ui=currency-field][data-stepper=split]>[data-part=start]{padding-inline-start:var(--_gap)}[data-ui=currency-field][data-stepper=split]>[data-part=end]{padding-inline-end:var(--_gap)}[data-ui=currency-field][data-stepper=split]>[data-part=input]{padding-inline:var(--_padding-inline)}[data-ui=currency-field][data-stepper=split]>[data-part=decrement]:after,[data-ui=currency-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=currency-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=currency-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=currency-field] [data-part=decrement]:hover:not(:disabled),[data-ui=currency-field] [data-part=increment]:hover:not(:disabled){background-color:var( --slotted-currency-field-stepper-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=currency-field] [data-part=decrement]:active:not(:disabled),[data-ui=currency-field] [data-part=increment]:active:not(:disabled){background-color:var( --slotted-currency-field-stepper-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=currency-field] [data-part=decrement]:disabled,[data-ui=currency-field] [data-part=increment]:disabled{background-color:var( --slotted-currency-field-stepper-disabled-background, var(--slotted-disabled-background) );color:var(--slotted-currency-field-stepper-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=currency-field] [data-part=decrement]:focus-visible,[data-ui=currency-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=currency-field][data-part=root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){border-color:var( --slotted-currency-field-hover-border-color, var(--slotted-tone-accent-border) )}[data-ui=currency-field][data-part=root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-currency-field-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=currency-field][data-part=root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-currency-field-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui=currency-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=currency-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=currency-field][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-currency-field-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-currency-field-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-currency-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-currency-field-invalid-border-color, var(--slotted-tone-danger-border) );box-shadow:var(--_invalid-edge)}[data-ui=currency-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=currency-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=currency-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=currency-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=currency-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=currency-field][data-part=root][data-readonly]{background-color:var( --slotted-currency-field-readonly-background, var(--slotted-tone-secondary-subtle-hover) );border-color:var( --slotted-currency-field-readonly-border-color, var(--slotted-border-subtle, ButtonBorder) );cursor:default}[data-ui=currency-field][data-part=root][data-disabled],[data-ui=currency-field][data-part=root]:has(>[data-part=input]:disabled){background-color:var( --slotted-currency-field-disabled-background, var(--slotted-disabled-background) );border-color:var( --slotted-currency-field-disabled-border-color, var(--slotted-disabled-border) );box-shadow:none;color:var(--slotted-currency-field-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=currency-field][data-part=root][data-disabled]>[data-part=start],[data-ui=currency-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: SlCurrencyField, decorators: [{
+            type: Component,
+            args: [{ selector: '[slCurrencyField]', standalone: true, exportAs: 'slCurrencyField', 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="[slCurrencyFieldStart]" />
+    <ng-content />
+    <ng-content select="[slCurrencyFieldEnd]" />
+    @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': 'currency-field',
+                        'data-part': 'root',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-align]': 'resolvedAlign()',
+                        '[attr.data-entry]': 'resolvedEntry()',
+                        '[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=currency-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-currency-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-currency-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-currency-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-currency-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-currency-field-radius, var(--slotted-control-radius, 4px)) - var(--_column-inset) ) );align-items:center;background-color:var( --slotted-currency-field-background, var(--slotted-control-surface, Field) );border:var(--slotted-control-border-width, 1px) solid var(--slotted-currency-field-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-currency-field-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-currency-field-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-currency-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=currency-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=currency-field]>[data-part=input]::placeholder{color:var(--slotted-currency-field-placeholder-color, var(--slotted-text-muted, GrayText));text-overflow:ellipsis}[data-ui=currency-field][data-align=end]>[data-part=input]{text-align:right}[data-ui=currency-field][data-align=end]:dir(rtl)>[data-part=input]{text-align:left}[data-ui=currency-field][data-align=start]>[data-part=input]{text-align:left}[data-ui=currency-field][data-align=start]:dir(rtl)>[data-part=input]{text-align:right}[data-ui=currency-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=currency-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=currency-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=currency-field][data-part=root][data-variant=subtle]{background-color:var( --slotted-currency-field-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-currency-field-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=currency-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=currency-field][data-part=root][data-variant=plain]{border-color:ButtonBorder}}[data-ui=currency-field]>[data-part=start],[data-ui=currency-field]>[data-part=end]{align-items:center;color:var(--slotted-currency-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=currency-field]>[data-part=start]>svg,[data-ui=currency-field]>[data-part=end]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=currency-field]>[data-part=start]:not(:has(svg,img,[data-ui=icon])),[data-ui=currency-field]>[data-part=end]:not(:has(svg,img,[data-ui=icon])){padding-inline:calc(var(--_icon-size) / 8)}[data-ui=currency-field]>:is([data-part=start],[data-part=end]):has(>[data-part=scrub]){align-self:stretch}[data-ui=currency-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);unicode-bidi:plaintext;user-select:none;-webkit-user-select:none}[data-ui=currency-field]:not([data-disabled]):not([data-readonly]) [data-part=scrub]:is(:hover,[data-scrubbing]){color:var(--slotted-currency-field-scrub-active-color, var(--slotted-text, CanvasText))}[data-ui=currency-field]:is([data-disabled],[data-readonly]) [data-part=scrub]{cursor:default;touch-action:auto}[data-ui=currency-field]>[data-part=stepper]>button,[data-ui=currency-field]>[data-part=decrement],[data-ui=currency-field]>[data-part=increment]{align-items:center;appearance:none;background-color:transparent;border:0;color:var(--slotted-currency-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=currency-field] [data-part=decrement],[data-ui=currency-field] [data-part=increment]{--slotted-icon-size: var(--_icon-size)}[data-ui=currency-field][data-stepper=stacked] [data-part=increment]>[data-ui=icon]{rotate:.5turn}[data-ui=currency-field][data-part=root][data-stepper=stacked]{padding-inline-end:0}[data-ui=currency-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=currency-field]>[data-part=stepper]>button{block-size:50%;border-radius:var(--_column-radius);inline-size:100%}[data-ui=currency-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=currency-field]>[data-part=stepper]>[data-part=increment]:after{inset-block:calc(var(--_column-inset) * -1) 0}[data-ui=currency-field]>[data-part=stepper]>[data-part=decrement]:after{inset-block:0 calc(var(--_column-inset) * -1)}[data-ui=currency-field]>[data-part=stepper]>button>[data-ui=icon]{block-size:min(var(--_icon-size),100%);contain:size}[data-ui=currency-field][data-part=root][data-stepper=split]{gap:0;padding-inline:var(--_inset)}[data-ui=currency-field][data-stepper=split]>[data-part=decrement],[data-ui=currency-field][data-stepper=split]>[data-part=increment]{block-size:var(--_action-size);border-radius:var(--_action-radius);inline-size:var(--_action-size)}[data-ui=currency-field][data-stepper=split]>[data-part=start]{padding-inline-start:var(--_gap)}[data-ui=currency-field][data-stepper=split]>[data-part=end]{padding-inline-end:var(--_gap)}[data-ui=currency-field][data-stepper=split]>[data-part=input]{padding-inline:var(--_padding-inline)}[data-ui=currency-field][data-stepper=split]>[data-part=decrement]:after,[data-ui=currency-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=currency-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=currency-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=currency-field] [data-part=decrement]:hover:not(:disabled),[data-ui=currency-field] [data-part=increment]:hover:not(:disabled){background-color:var( --slotted-currency-field-stepper-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=currency-field] [data-part=decrement]:active:not(:disabled),[data-ui=currency-field] [data-part=increment]:active:not(:disabled){background-color:var( --slotted-currency-field-stepper-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=currency-field] [data-part=decrement]:disabled,[data-ui=currency-field] [data-part=increment]:disabled{background-color:var( --slotted-currency-field-stepper-disabled-background, var(--slotted-disabled-background) );color:var(--slotted-currency-field-stepper-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=currency-field] [data-part=decrement]:focus-visible,[data-ui=currency-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=currency-field][data-part=root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){border-color:var( --slotted-currency-field-hover-border-color, var(--slotted-tone-accent-border) )}[data-ui=currency-field][data-part=root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-currency-field-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=currency-field][data-part=root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-currency-field-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui=currency-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=currency-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=currency-field][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-currency-field-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-currency-field-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-currency-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-currency-field-invalid-border-color, var(--slotted-tone-danger-border) );box-shadow:var(--_invalid-edge)}[data-ui=currency-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=currency-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=currency-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=currency-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=currency-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=currency-field][data-part=root][data-readonly]{background-color:var( --slotted-currency-field-readonly-background, var(--slotted-tone-secondary-subtle-hover) );border-color:var( --slotted-currency-field-readonly-border-color, var(--slotted-border-subtle, ButtonBorder) );cursor:default}[data-ui=currency-field][data-part=root][data-disabled],[data-ui=currency-field][data-part=root]:has(>[data-part=input]:disabled){background-color:var( --slotted-currency-field-disabled-background, var(--slotted-disabled-background) );border-color:var( --slotted-currency-field-disabled-border-color, var(--slotted-disabled-border) );box-shadow:none;color:var(--slotted-currency-field-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=currency-field][data-part=root][data-disabled]>[data-part=start],[data-ui=currency-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 }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", 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(() => SlCurrencyFieldControl), { ...{ descendants: true }, isSignal: true }] }] } });
+
+/** `undefined` stays absent; anything else becomes a number. */
+const optionalNumber = (value) => value === undefined || value === null || value === '' ? undefined : numberAttribute(value);
+/** The two keys that set the sign under cents-first entry. */
+const SIGN_KEYS = new Set(['-', '−', '+', '(']);
+/**
+ * The control itself: the amount, the currency, 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 and no currency symbol
+ * survives it.
+ *
+ * **Under `entry="cents"` the digits are the amount.** After every edit the
+ * directive reads the digits out of the text and divides by the currency's
+ * minor units, so `1234` is `R$ 12,34`. The text is generated rather than
+ * typed, which is why rewriting it on every keystroke is legal here and
+ * forbidden in `number-field`: there is no typed text to protect, and the caret
+ * has exactly one legal position.
+ *
+ * **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.
+ */
+class SlCurrencyFieldInput {
+    /**
+     * An ISO 4217 code. It decides the symbol, the minor units and therefore how
+     * far a digit shifts. Required here or on the token: a field that guessed two
+     * minor digits would write `¥12,34`.
+     */
+    currency = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
+    /** How the currency is written beside the amount. Defaults to the token, then `symbol`. */
+    currencyDisplay = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currencyDisplay" }] : /* istanbul ignore next */ []));
+    /** Overrides the currency's own minor units, for a unit price quoted finer. */
+    fractionDigits = input(undefined, { ...(ngDevMode ? { debugName: "fractionDigits" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    /**
+     * Present means the consumer owns the amount, 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 amount 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)) });
+    /** How the reader types. Defaults to the token, then `cents`. */
+    entry = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "entry" }] : /* istanbul ignore next */ []));
+    /**
+     * When the text takes the locale's shape under `entry="natural"`. Defaults to
+     * the token, then `change`. Cents-first entry generates the text after every
+     * edit, so it decides nothing there.
+     */
+    formatOn = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatOn" }] : /* istanbul ignore next */ []));
+    min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    /** What the arrows and the two buttons move by, in major units. */
+    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 });
+    /** Where an amount outside the range goes, and when. Defaults to the token, then `blur`. */
+    clamp = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clamp" }] : /* istanbul ignore next */ []));
+    /** Any other `Intl.NumberFormatOptions`. Every key here wins over the family's own. */
+    format = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    /**
+     * BCP 47. Decides the separators and the numbering system, never the symbol.
+     * Defaults to the language in force (`provideSlotted`).
+     */
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    /**
+     * Lets the wheel move the amount while the control has focus. Off by default:
+     * a reader scrolling a form must not change a total by passing over it.
+     */
+    wheel = input(false, { ...(ngDevMode ? { debugName: "wheel" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether an emptied control holds nothing, or nought.
+     *
+     * Off, because an amount is not an optional number: a total, a price and a
+     * balance are all nought when nothing is in them. Cleared, the control shows
+     * `0,00` and emits `0`. On, it can be left empty and emits `null`.
+     */
+    allowEmpty = input(false, { ...(ngDevMode ? { debugName: "allowEmpty" } : /* 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 amount, the amount it replaces,
+     * the currency, the exact integer of minor units, 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.
+     */
+    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 and its ring.
+     */
+    currencyField = inject(SlCurrencyField);
+    field = inject(SlField, { optional: true });
+    defaults = injectCurrencyFieldDefaults();
+    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,
+    });
+    writtenAutocomplete = inject(new HostAttributeToken('autocomplete'), {
+        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 amount. */
+    text = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    formDisabled = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * The sign, while the field holds nothing to carry it. Typing `-` into an
+     * empty amount and then a digit produces a debit, which a sign derived from
+     * the text alone could not express.
+     */
+    pendingNegative = false;
+    onChangeFn = () => undefined;
+    onTouchedFn = () => undefined;
+    /**
+     * One formatter, rebuilt only when something it reads actually 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 currency = this.currency() ?? this.defaults.currency;
+        if (currency === undefined) {
+            /* Loudly, and where it is written: a currency field cannot decide how
+               many digits a cent has, and one that guessed two would write ¥12,34. */
+            throw new Error('slCurrencyFieldInput needs a currency: set [currency], or provideCurrencyFieldDefaults({ currency }).');
+        }
+        const fractionDigits = this.fractionDigits();
+        const options = this.format();
+        return createCurrencyFormat({
+            currency,
+            currencyDisplay: this.currencyDisplay() ?? this.defaults.currencyDisplay,
+            locale: this.locale() ?? this.appLocale(),
+            ...(fractionDigits === undefined ? {} : { fractionDigits }),
+            ...(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();
+        const held = bound === undefined ? this.own() : bound;
+        /* The amount the family settles on when nothing is left in the control.
+           It governs what is emitted, what `aria-valuenow` reports and what the
+           hidden input submits alike, so the three never disagree. */
+        return this.allowEmpty() ? held : (held ?? 0);
+    }, /* @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 */ []));
+    resolvedEntry = computed(() => this.entry() ?? this.defaults.entry, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedEntry" }] : /* istanbul ignore next */ []));
+    resolvedFormatOn = computed(() => this.formatOn() ?? this.defaults.formatOn, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedFormatOn" }] : /* istanbul ignore next */ []));
+    resolvedClamp = computed(() => this.clamp() ?? this.defaults.clamp, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedClamp" }] : /* 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 */ []));
+    resolvedInvalid = computed(() => this.invalid() ?? 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 */ []));
+    /** Whether the range admits a debit at all. There is no `allowNegative`. */
+    allowNegative = computed(() => {
+        const min = this.min();
+        return min === undefined || min < 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowNegative" }] : /* istanbul ignore next */ []));
+    /**
+     * The software keyboard, derived from the props rather than from the user
+     * agent. Cents-first entry types neither a separator nor a sign into the
+     * digits, so the numeric keypad is complete for the task.
+     */
+    resolvedInputMode = computed(() => {
+        if (this.writtenInputMode !== null)
+            return this.writtenInputMode;
+        if (this.resolvedEntry() === 'cents')
+            return 'numeric';
+        if (this.allowNegative())
+            return 'text';
+        return this.formatter().maximumFractionDigits > 0 ? 'decimal' : 'numeric';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedInputMode" }] : /* istanbul ignore next */ []));
+    /**
+     * `transaction-amount` is the token a payment amount belongs to, and the
+     * default is `off`: most amounts in a back office are not payment amounts,
+     * and a browser filling an invoice total is worse than no help at all.
+     */
+    resolvedAutocomplete = computed(() => this.writtenAutocomplete ?? 'off', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAutocomplete" }] : /* 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 amount. */
+        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 amount 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(this.numberValue()));
+    }
+    /** 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 `slCurrencyFieldScrub` 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 amount. */
+    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(this.settledAmount(value ?? null)));
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    onInput(event) {
+        const next = this.element.value;
+        const formatter = this.formatter();
+        if (this.resolvedEntry() !== 'cents') {
+            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. */
+            if (this.resolvedFormatOn() !== 'change' || native.isComposing) {
+                this.text.set(next);
+                this.request(this.settledAmount(formatter.parse(next)), 'keyboard', event);
+                return;
+            }
+            const caret = this.element.selectionStart ?? next.length;
+            const deletion = native.inputType?.startsWith('delete') === true;
+            const edited = deletion
+                ? formatter.deleteAcrossSeparator(this.text(), { text: next, caret }, native.inputType === 'deleteContentForward' ? 1 : -1)
+                : { text: next, caret };
+            const shaped = formatter.formatWhileTyping(edited);
+            this.write(shaped.text);
+            /* `write` puts the caret after the last digit under cents-first entry and
+               leaves it alone otherwise, so this is the only place it moves here. */
+            if (this.element.ownerDocument.activeElement === this.element) {
+                this.element.setSelectionRange(shaped.caret, shaped.caret);
+            }
+            this.request(this.settledAmount(formatter.parse(shaped.text)), 'keyboard', event);
+            return;
+        }
+        const inputType = event.inputType;
+        const edit = formatter.editFromText({
+            text: next,
+            /* What the element showed before this keystroke, which is what turns the
+               digits the reader added into digits at the right rather than digits
+               where the caret happened to be. */
+            previous: this.text(),
+            negative: this.negativeNow(),
+            allowNegative: this.allowNegative(),
+            allowEmpty: this.allowEmpty(),
+            ...(inputType === undefined ? {} : { inputType }),
+        });
+        this.pendingNegative = edit.value !== null && edit.value < 0;
+        this.settle(edit.value, this.request(edit.value, 'keyboard', event, edit.minorUnits));
+    }
+    /**
+     * 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 an amount 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;
+        /* A paste is parsed rather than filtered: it is the reader's own amount. */
+        if (event.inputType === 'insertFromPaste' || event.inputType === 'insertFromDrop')
+            return;
+        const formatter = this.formatter();
+        const start = this.element.selectionStart ?? this.element.value.length;
+        const finish = this.element.selectionEnd ?? this.element.value.length;
+        const inserted = event.data ?? '';
+        const next = this.element.value.slice(0, start) + inserted + this.element.value.slice(finish);
+        const min = this.min();
+        const max = this.max();
+        if (this.resolvedEntry() !== 'cents') {
+            if (!formatter.isPartial(next)) {
+                event.preventDefault();
+                return;
+            }
+            if (this.resolvedClamp() !== 'strict')
+                return;
+            const parsed = formatter.parse(next);
+            if (parsed === null)
+                return;
+            if ((min !== undefined && parsed < min) || (max !== undefined && parsed > max)) {
+                event.preventDefault();
+            }
+            return;
+        }
+        /* The sign is a key rather than a digit, so `-` pressed twice does not
+           produce two signs and never enters the digit run. */
+        if (SIGN_KEYS.has(inserted)) {
+            event.preventDefault();
+            if (!this.allowNegative())
+                return;
+            const wanted = inserted !== '+';
+            this.pendingNegative = wanted;
+            const current = this.numberValue();
+            if (current === null || current === 0 || current < 0 === wanted)
+                return;
+            const flipped = -current;
+            this.settle(flipped, this.request(flipped, 'keyboard', event, formatter.toMinorUnits(flipped)));
+            return;
+        }
+        if (formatter.digitsOf(inserted).length !== [...inserted].length) {
+            event.preventDefault();
+            return;
+        }
+        /* Fifteen digits is where a double stops holding a cent, so the text stops
+           growing rather than rounding silently. */
+        if (formatter.digitsOf(next).length > MAX_AMOUNT_DIGITS) {
+            event.preventDefault();
+            return;
+        }
+        if (this.resolvedClamp() !== 'strict')
+            return;
+        const edit = formatter.editFromText({
+            text: next,
+            previous: this.element.value,
+            negative: this.negativeNow(),
+            allowNegative: this.allowNegative(),
+            allowEmpty: this.allowEmpty(),
+        });
+        if (edit.value === null)
+            return;
+        if ((min !== undefined && edit.value < min) || (max !== undefined && edit.value > 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));
+    }
+    /** The sign at the moment of the edit, rather than at the last render. */
+    negativeNow() {
+        const current = this.numberValue();
+        /* Nought has no sign — `-0` and `0` are one amount — so a debit held
+           against an empty or nought amount can only come from the key. */
+        return current === null || current === 0 ? this.pendingNegative : current < 0;
+    }
+    /** Formats what the reader typed and puts the amount back in range. */
+    commit(reason, source) {
+        const formatter = this.formatter();
+        let next = formatter.parse(this.text());
+        /* The commit is where a half-typed amount stops being half typed, so it is
+           where an emptied one becomes the nought it means. */
+        if (next === null && !this.allowEmpty())
+            next = 0;
+        if (next !== null && this.resolvedClamp() !== 'none') {
+            next = clamp(next, this.min() ?? Number.NEGATIVE_INFINITY, this.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 }),
+        });
+        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.
+     */
+    request(next, reason, source, minorUnits) {
+        const formatter = this.formatter();
+        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(withAmount(pending, formatter.currency, minorUnits ?? formatter.toMinorUnits(next)));
+                cancelled = pending.cancelled;
+            },
+        });
+        state.request(next, reason, source);
+        if (cancelled)
+            return false;
+        this.onChangeFn(next);
+        /* A controlled control never moves its own amount: it asks, and waits for
+           the consumer's next value. */
+        if (this.controlled())
+            return false;
+        this.own.set(next);
+        return true;
+    }
+    /** Nothing, or the nought it means. The one rule `allowEmpty` decides. */
+    settledAmount(amount) {
+        return this.allowEmpty() ? amount : (amount ?? 0);
+    }
+    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. Under cents-first entry the caret goes back after the last digit —
+     * before whatever affix the locale writes at the end — because that is the
+     * only position where the next keystroke means anything.
+     */
+    write(value) {
+        if (this.element.value !== value)
+            this.element.value = value;
+        this.text.set(value);
+        if (this.resolvedEntry() !== 'cents')
+            return;
+        if (this.element.ownerDocument.activeElement !== this.element)
+            return;
+        const formatter = this.formatter();
+        let position = value.length;
+        for (let index = value.length; index > 0; index -= 1) {
+            if (formatter.digitsOf(value[index - 1] ?? '') !== '') {
+                position = index;
+                break;
+            }
+        }
+        this.element.setSelectionRange(position, position);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCurrencyFieldInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlCurrencyFieldInput, isStandalone: true, selector: "input[slCurrencyFieldInput]", inputs: { currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, currencyDisplay: { classPropertyName: "currencyDisplay", publicName: "currencyDisplay", isSignal: true, isRequired: false, transformFunction: null }, fractionDigits: { classPropertyName: "fractionDigits", publicName: "fractionDigits", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: false, transformFunction: null }, formatOn: { classPropertyName: "formatOn", publicName: "formatOn", 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 }, clamp: { classPropertyName: "clamp", publicName: "clamp", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, wheel: { classPropertyName: "wheel", publicName: "wheel", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", 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", "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.autocomplete": "resolvedAutocomplete()", "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: SlCurrencyFieldControl, useExisting: forwardRef(() => SlCurrencyFieldInput) },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SlCurrencyFieldInput),
+                multi: true,
+            },
+        ], exportAs: ["slCurrencyFieldInput"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCurrencyFieldInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[slCurrencyFieldInput]',
+                    standalone: true,
+                    exportAs: 'slCurrencyFieldInput',
+                    providers: [
+                        { provide: SlCurrencyFieldControl, useExisting: forwardRef(() => SlCurrencyFieldInput) },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SlCurrencyFieldInput),
+                            multi: true,
+                        },
+                    ],
+                    host: {
+                        'data-part': 'input',
+                        autocorrect: 'off',
+                        spellcheck: 'false',
+                        /* Bound rather than static, so a consumer who wrote `type="number"` on a
+                           currency field does not get the element that empties its own value. */
+                        '[attr.type]': "'text'",
+                        '[attr.role]': "'spinbutton'",
+                        '[attr.id]': 'controlId()',
+                        '[attr.inputmode]': 'resolvedInputMode()',
+                        '[attr.autocomplete]': 'resolvedAutocomplete()',
+                        '[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: { currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], currencyDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyDisplay", required: false }] }], fractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "fractionDigits", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], entry: [{ type: i0.Input, args: [{ isSignal: true, alias: "entry", required: false }] }], formatOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatOn", 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 }] }], clamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "clamp", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], wheel: [{ type: i0.Input, args: [{ isSignal: true, alias: "wheel", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", 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 amount in the reading direction: a currency mark, a
+ * period, 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 amount is what `currency` and `currencyDisplay` write, and it is
+ * selected, copied and parsed with the amount; this one is none of those
+ * things.
+ */
+class SlCurrencyFieldStart {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCurrencyFieldStart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlCurrencyFieldStart, isStandalone: true, selector: "[slCurrencyFieldStart]", host: { attributes: { "data-part": "start" } }, exportAs: ["slCurrencyFieldStart"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCurrencyFieldStart, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slCurrencyFieldStart]',
+                    standalone: true,
+                    exportAs: 'slCurrencyFieldStart',
+                    host: { 'data-part': 'start' },
+                }]
+        }] });
+/** An adornment after the amount in the reading direction. */
+class SlCurrencyFieldEnd {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCurrencyFieldEnd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlCurrencyFieldEnd, isStandalone: true, selector: "[slCurrencyFieldEnd]", host: { attributes: { "data-part": "end" } }, exportAs: ["slCurrencyFieldEnd"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCurrencyFieldEnd, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slCurrencyFieldEnd]',
+                    standalone: true,
+                    exportAs: 'slCurrencyFieldEnd',
+                    host: { 'data-part': 'end' },
+                }]
+        }] });
+/**
+ * A mark that moves the amount when it is dragged sideways — the design
+ * tools' gesture, shared with `slNumberFieldScrub`. Placed inside
+ * `slCurrencyFieldStart` or `slCurrencyFieldEnd`, where the frame it belongs
+ * to is its ancestor; the currency symbol, with `currencyDisplay="none"` on
+ * the control, is the natural mark:
+ *
+ * ```html
+ * <span slCurrencyFieldStart><span slCurrencyFieldScrub>R$</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 SlCurrencyFieldScrub {
+    /** Pixels of horizontal travel per step. Defaults to 2. */
+    sensitivity = input(SCRUB_SENSITIVITY, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sensitivity" }] : /* istanbul ignore next */ []));
+    frame = inject(SlCurrencyField);
+    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 amount 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: SlCurrencyFieldScrub, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlCurrencyFieldScrub, isStandalone: true, selector: "[slCurrencyFieldScrub]", 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: ["slCurrencyFieldScrub"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCurrencyFieldScrub, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slCurrencyFieldScrub]',
+                    standalone: true,
+                    exportAs: 'slCurrencyFieldScrub',
+                    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 { CURRENCY_FIELD_DEFAULTS, SlCurrencyField, SlCurrencyFieldControl, SlCurrencyFieldEnd, SlCurrencyFieldInput, SlCurrencyFieldScrub, SlCurrencyFieldStart, injectCurrencyFieldDefaults, provideCurrencyFieldDefaults };
+//# sourceMappingURL=slotted-angular-currency-field.mjs.map