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

package/fesm2022/slotted-angular-otp-input.mjs

@@ -0,0 +1,629 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, booleanAttribute, numberAttribute, contentChild, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, output, ElementRef, DestroyRef, HostAttributeToken, signal, effect, forwardRef, Directive } from '@angular/core';
+import { currentSlots, spreadPlaceholder, sanitize, normalizeSelection } from '@slotted/core/otp';
+import { SlField } from '@slotted/angular/field';
+import { createControllable } from '@slotted/core/state';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+const FALLBACK = {
+    attached: false,
+    length: 6,
+    placeholder: '',
+    size: 'md',
+    type: 'numeric',
+    variant: 'outline',
+};
+const OTP_INPUT_DEFAULTS = new InjectionToken('slotted otp input defaults', { providedIn: 'root', factory: () => FALLBACK });
+/**
+ * An application decides once what its code fields look like — and how long
+ * its codes are — rather than repeating the same inputs on every verification
+ * screen. A control that states any of them itself still wins.
+ *
+ * `size` is the one the field outranks: a control inside a field takes the
+ * field's step and this token answers only outside one.
+ */
+function provideOtpInputDefaults(defaults) {
+    return {
+        provide: OTP_INPUT_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a code field renders as here, before it states anything of its own. */
+function injectOtpInputDefaults() {
+    return inject(OTP_INPUT_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 `text-field` already has.
+ * The control provides itself as this, and the frame queries for it.
+ */
+class SlOtpInputState {
+}
+
+/** The character a masked box shows, which is the one a password field shows. */
+const MASK = '•';
+/**
+ * `groups` has to add up to `length`; a partition that does not is one group.
+ * A silent fallback rather than a throw, because a code field that renders
+ * nothing on a verification screen locks the reader out of the product.
+ */
+function partition(length, groups) {
+    if (groups === undefined)
+        return [length];
+    const sum = groups.reduce((total, size) => total + size, 0);
+    return sum === length && groups.every((size) => size > 0) ? [...groups] : [length];
+}
+/**
+ * The frame: N painted boxes around one real input.
+ *
+ * **It is not the control.** The element carrying `data-ui` is the consumer's
+ * own box with no role; the `input` inside it holds the value, the identifier
+ * and every native attribute, and lies over the boxes, transparent. The boxes
+ * are drawn here from what the control reports, and are hidden from assistive
+ * technology.
+ *
+ * **Angular pays one element for that frame, and React pays none.** React can
+ * render a wrapper from inside a component; an Angular directive cannot create
+ * a box around its own host. `slOtpInputControl` injects this class, so a
+ * control written without the frame is a compile-time failure rather than a
+ * silent one.
+ */
+class SlOtpInput {
+    /** 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 */ []));
+    /** Joins the boxes of a group along one seam. Defaults to the token's. */
+    attached = input(undefined, { ...(ngDevMode ? { debugName: "attached" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /** How many characters the code has. Defaults to the token's, then 6. */
+    length = input(undefined, { ...(ngDevMode ? { debugName: "length" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null ? undefined : numberAttribute(value) });
+    /**
+     * How the boxes are partitioned: `[3, 3]` draws two groups of three with a
+     * separator between them. The sum has to be `length`; a partition that does
+     * not add up draws one group.
+     */
+    groupsInput = input(undefined, { ...(ngDevMode ? { debugName: "groupsInput" } : /* istanbul ignore next */ {}), alias: 'groups' });
+    /**
+     * What an empty box shows: one character repeats over every box, and a
+     * string as long as the code distributes. Defaults to the token's.
+     */
+    placeholder = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Hides the characters: the control becomes `type="password"`, so the
+     * platform treats the value as a secret, and each filled box shows a bullet.
+     */
+    mask = input(false, { ...(ngDevMode ? { debugName: "mask" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    defaults = injectOtpInputDefaults();
+    field = inject(SlField, { optional: true });
+    /**
+     * The control inside. It provides itself as `SlOtpInputState`, so the frame
+     * can paint the value and the cursor without either directive importing the
+     * other.
+     */
+    control = contentChild(SlOtpInputState, { ...(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 */ []));
+    resolvedAttached = computed(() => this.attached() ?? this.defaults.attached, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAttached" }] : /* istanbul ignore next */ []));
+    resolvedLength = computed(() => this.length() ?? this.defaults.length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLength" }] : /* istanbul ignore next */ []));
+    resolvedPlaceholder = computed(() => this.placeholder() ?? this.defaults.placeholder, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPlaceholder" }] : /* istanbul ignore next */ []));
+    complete = computed(() => {
+        const control = this.control();
+        return control !== undefined && control.code().length === this.resolvedLength();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "complete" }] : /* istanbul ignore next */ []));
+    groups = computed(() => {
+        const length = this.resolvedLength();
+        const control = this.control();
+        const code = control?.code() ?? '';
+        const selection = control?.focused() === true ? control.selection() : null;
+        const active = new Set(selection === null ? [] : currentSlots({ ...selection, length, valueLength: code.length }));
+        const placeholders = spreadPlaceholder(this.resolvedPlaceholder(), length);
+        const mask = this.mask();
+        let index = 0;
+        return partition(length, this.groupsInput()).map((count) => Array.from({ length: count }, () => {
+            const character = code[index] ?? '';
+            const slot = {
+                index,
+                shown: character === '' ? '' : mask ? MASK : character,
+                placeholder: placeholders[index] ?? '',
+                current: active.has(index),
+            };
+            index += 1;
+            return slot;
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    /**
+     * A press on a box puts the cursor in that box. The input lies over the
+     * boxes and would otherwise place its caret by the x of transparent text;
+     * the box under the pointer is what the reader meant, so it is found from
+     * the point and handed to the control.
+     */
+    onPointerDown(event) {
+        const control = this.control();
+        if (control === undefined || control.resolvedDisabled() === true)
+            return;
+        if (typeof document.elementsFromPoint !== 'function')
+            return;
+        const host = event.currentTarget;
+        const slot = document
+            .elementsFromPoint(event.clientX, event.clientY)
+            .find((candidate) => candidate instanceof HTMLElement &&
+            candidate.dataset['part'] === 'slot' &&
+            candidate.closest("[data-ui='otp-input']") === host);
+        if (slot === undefined)
+            return;
+        event.preventDefault();
+        control.pressAt(Number(slot.dataset['index'] ?? 0));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlOtpInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlOtpInput, isStandalone: true, selector: "[slOtpInput]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, attached: { classPropertyName: "attached", publicName: "attached", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, groupsInput: { classPropertyName: "groupsInput", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "otp-input", "data-part": "root" }, listeners: { "pointerdown": "onPointerDown($event)" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-attached": "resolvedAttached() ? '' : null", "attr.data-mask": "mask() ? '' : null", "attr.data-complete": "complete() ? '' : null", "attr.data-disabled": "control()?.resolvedDisabled() === true ? '' : null", "attr.data-invalid": "control()?.resolvedInvalid() === true ? '' : null", "attr.data-readonly": "control()?.resolvedReadOnly() === true ? '' : null" } }, queries: [{ propertyName: "control", first: true, predicate: SlOtpInputState, descendants: true, isSignal: true }], exportAs: ["slOtpInput"], ngImport: i0, template: `<ng-content />
+    @for (group of groups(); track $index; let first = $first) {
+      @if (!first) {
+        <div data-part="separator" aria-hidden="true"></div>
+      }
+      <div data-part="group" aria-hidden="true">
+        @for (slot of group; track slot.index) {
+          <div
+            data-part="slot"
+            [attr.data-index]="slot.index"
+            [attr.data-current]="slot.current ? '' : null"
+            [attr.data-placeholder]="
+              slot.shown === '' && slot.placeholder !== '' ? slot.placeholder : null
+            "
+            [textContent]="slot.shown"
+          ></div>
+        }
+      </div>
+    }`, isInline: true, styles: ["@layer slotted.components{[data-ui=otp-input][data-part=root]{--_height: var(--slotted-control-height-md, 34px);--_font-size: var(--slotted-font-size-md, .875rem);--_gap: var(--slotted-control-gap-md, 8px);--_radius: var(--slotted-otp-input-radius, var(--slotted-control-radius, 4px));--_caret-width: var(--slotted-otp-input-caret-width, var(--slotted-border-width-thin, 1px));align-items:center;color:var(--slotted-otp-input-color, var(--slotted-text, CanvasText));direction:ltr;display:inline-flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-otp-input-font-weight, var(--slotted-font-weight-medium, 500));font-variant-numeric:tabular-nums;gap:var(--slotted-otp-input-group-gap, var(--slotted-space-4, .5rem));inline-size:fit-content;line-height:1;max-inline-size:100%;position:relative}[data-ui=otp-input]>[data-part=input]{appearance:none;background-color:transparent;block-size:100%;border:0;box-shadow:none;caret-color:transparent;color:transparent;font:inherit;inline-size:100%;inset:0;margin:0;outline:none;padding:0;position:absolute;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:transparent;z-index:1}[data-ui=otp-input]>[data-part=input]::selection{background-color:transparent!important;color:transparent!important;text-shadow:none!important;-webkit-text-fill-color:transparent!important}[data-ui=otp-input]>[data-part=input]{-webkit-user-drag:none}[data-ui=otp-input]>[data-part=input]:autofill{box-shadow:inset 0 0 0 100px var(--slotted-otp-input-autofill-background, var(--slotted-tone-accent-surface));-webkit-text-fill-color:transparent}[data-ui=otp-input]>[data-part=group]{align-items:center;display:flex;gap:var(--_gap);min-inline-size:0}[data-ui=otp-input]>[data-part=separator]{background-color:var( --slotted-otp-input-separator-color, var(--slotted-control-border-color, ButtonBorder) );block-size:var(--slotted-border-width-thick, 2px);border-radius:var(--slotted-radius-full, 9999px);flex:0 0 auto;inline-size:var(--slotted-otp-input-separator-size, var(--slotted-space-4, .5rem))}[data-ui=otp-input] [data-part=slot]{align-items:center;background-color:var(--slotted-otp-input-background, var(--slotted-control-surface, Field));block-size:var(--_height);border:var(--slotted-control-border-width, 1px) solid var(--slotted-otp-input-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--_radius);box-shadow:var(--slotted-otp-input-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;display:flex;flex:0 1 auto;inline-size:var(--_height);justify-content:center;min-inline-size:calc(var(--_height) * .6);position:relative;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);white-space:nowrap}[data-ui=otp-input] [data-part=slot]:empty:before{color:var(--slotted-otp-input-placeholder-color, var(--slotted-text-muted));content:attr(data-placeholder)}[data-ui=otp-input][data-mask] [data-part=slot]:not(:empty){font-size:var(--slotted-otp-input-mask-size, var(--slotted-font-size-2xl, 1.25rem))}[data-ui=otp-input][data-attached]>[data-part=group]{gap:0}[data-ui=otp-input][data-attached] [data-part=slot]{border-radius:0}[data-ui=otp-input][data-attached] [data-part=slot]:not(:first-child){margin-inline-start:calc(var(--slotted-control-border-width, 1px) * -1)}[data-ui=otp-input][data-attached] [data-part=slot]:first-child{border-start-start-radius:var(--_radius);border-end-start-radius:var(--_radius)}[data-ui=otp-input][data-attached] [data-part=slot]:last-child{border-start-end-radius:var(--_radius);border-end-end-radius:var(--_radius)}[data-ui=otp-input][data-attached] [data-part=slot][data-current]{z-index:1}[data-ui=otp-input][data-part=root][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_font-size: var(--slotted-font-size-sm, .8125rem);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=otp-input][data-part=root][data-size=md]{--_height: var(--slotted-control-height-md, 34px);--_font-size: var(--slotted-font-size-md, .875rem);--_gap: var(--slotted-control-gap-md, 8px)}[data-ui=otp-input][data-part=root][data-size=lg]{--_height: var(--slotted-control-height-lg, 38px);--_font-size: var(--slotted-font-size-lg, 1rem);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=otp-input][data-variant=subtle] [data-part=slot]{background-color:var( --slotted-otp-input-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-otp-input-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=otp-input][data-part=root]:has(>[data-part=input]:focus) [data-part=slot][data-current]:empty:after{animation:slotted-otp-input-blink var(--slotted-duration-loop) step-end infinite;background-color:currentcolor;block-size:1em;content:\"\";inline-size:var(--_caret-width);position:absolute}@keyframes slotted-otp-input-blink{0%,50%{opacity:1}50.01%,to{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=otp-input][data-part=root]:has(>[data-part=input]:focus) [data-part=slot][data-current]:empty:after{animation:none}}[data-ui=otp-input][data-part=root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]) [data-part=slot]{border-color:var(--slotted-otp-input-hover-border-color, var(--slotted-tone-accent-border))}[data-ui=otp-input][data-part=root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]) [data-part=slot]{background-color:var( --slotted-otp-input-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=otp-input][data-part=root]:not([data-invalid]):has(>[data-part=input]:focus) [data-part=slot][data-current]{border-color:var(--slotted-otp-input-current-border-color, var(--slotted-tone-accent-border))}[data-ui=otp-input][data-part=root]:has(>[data-part=input]:focus) [data-part=slot][data-current]:not(:empty){background-color:var( --slotted-otp-input-selection-background, var(--slotted-tone-accent-surface) )}[data-ui=otp-input][data-part=root]:has(>[data-part=input]:focus-visible) [data-part=slot][data-current]{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=otp-input][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-otp-input-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui=otp-input][data-part=root][data-invalid] [data-part=slot]{--_invalid-edge-width: var( --slotted-otp-input-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-otp-input-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-otp-input-invalid-border-color, var(--slotted-tone-danger-border));box-shadow:var(--_invalid-edge)}[data-ui=otp-input][data-part=root][data-invalid]:has(>[data-part=input]:focus-visible) [data-part=slot][data-current]{box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}@media(forced-colors:active){[data-ui=otp-input][data-part=root][data-invalid] [data-part=slot]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui=otp-input][data-part=root][data-invalid]:has(>[data-part=input]:focus-visible) [data-part=slot][data-current]{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=otp-input][data-part=root][data-readonly] [data-part=slot]{background-color:var( --slotted-otp-input-readonly-background, var(--slotted-tone-secondary-subtle-hover) );cursor:default}[data-ui=otp-input][data-part=root][data-readonly] [data-part=slot]:after{content:none}[data-ui=otp-input][data-part=root][data-disabled],[data-ui=otp-input][data-part=root]:has(>[data-part=input]:disabled){color:var(--slotted-otp-input-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=otp-input][data-part=root][data-disabled] [data-part=slot],[data-ui=otp-input][data-part=root]:has(>[data-part=input]:disabled) [data-part=slot]{background-color:var( --slotted-otp-input-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-otp-input-disabled-border-color, var(--slotted-disabled-border));box-shadow:none}@media(forced-colors:active){[data-ui=otp-input]>[data-part=input]{forced-color-adjust:none}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlOtpInput, decorators: [{
+            type: Component,
+            args: [{ selector: '[slOtpInput]', standalone: true, exportAs: 'slOtpInput', template: `<ng-content />
+    @for (group of groups(); track $index; let first = $first) {
+      @if (!first) {
+        <div data-part="separator" aria-hidden="true"></div>
+      }
+      <div data-part="group" aria-hidden="true">
+        @for (slot of group; track slot.index) {
+          <div
+            data-part="slot"
+            [attr.data-index]="slot.index"
+            [attr.data-current]="slot.current ? '' : null"
+            [attr.data-placeholder]="
+              slot.shown === '' && slot.placeholder !== '' ? slot.placeholder : null
+            "
+            [textContent]="slot.shown"
+          ></div>
+        }
+      </div>
+    }`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'otp-input',
+                        'data-part': 'root',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-attached]': "resolvedAttached() ? '' : null",
+                        '[attr.data-mask]': "mask() ? '' : null",
+                        '[attr.data-complete]': "complete() ? '' : null",
+                        '[attr.data-disabled]': "control()?.resolvedDisabled() === true ? '' : null",
+                        '[attr.data-invalid]': "control()?.resolvedInvalid() === true ? '' : null",
+                        '[attr.data-readonly]': "control()?.resolvedReadOnly() === true ? '' : null",
+                        '(pointerdown)': 'onPointerDown($event)',
+                    }, styles: ["@layer slotted.components{[data-ui=otp-input][data-part=root]{--_height: var(--slotted-control-height-md, 34px);--_font-size: var(--slotted-font-size-md, .875rem);--_gap: var(--slotted-control-gap-md, 8px);--_radius: var(--slotted-otp-input-radius, var(--slotted-control-radius, 4px));--_caret-width: var(--slotted-otp-input-caret-width, var(--slotted-border-width-thin, 1px));align-items:center;color:var(--slotted-otp-input-color, var(--slotted-text, CanvasText));direction:ltr;display:inline-flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-otp-input-font-weight, var(--slotted-font-weight-medium, 500));font-variant-numeric:tabular-nums;gap:var(--slotted-otp-input-group-gap, var(--slotted-space-4, .5rem));inline-size:fit-content;line-height:1;max-inline-size:100%;position:relative}[data-ui=otp-input]>[data-part=input]{appearance:none;background-color:transparent;block-size:100%;border:0;box-shadow:none;caret-color:transparent;color:transparent;font:inherit;inline-size:100%;inset:0;margin:0;outline:none;padding:0;position:absolute;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:transparent;z-index:1}[data-ui=otp-input]>[data-part=input]::selection{background-color:transparent!important;color:transparent!important;text-shadow:none!important;-webkit-text-fill-color:transparent!important}[data-ui=otp-input]>[data-part=input]{-webkit-user-drag:none}[data-ui=otp-input]>[data-part=input]:autofill{box-shadow:inset 0 0 0 100px var(--slotted-otp-input-autofill-background, var(--slotted-tone-accent-surface));-webkit-text-fill-color:transparent}[data-ui=otp-input]>[data-part=group]{align-items:center;display:flex;gap:var(--_gap);min-inline-size:0}[data-ui=otp-input]>[data-part=separator]{background-color:var( --slotted-otp-input-separator-color, var(--slotted-control-border-color, ButtonBorder) );block-size:var(--slotted-border-width-thick, 2px);border-radius:var(--slotted-radius-full, 9999px);flex:0 0 auto;inline-size:var(--slotted-otp-input-separator-size, var(--slotted-space-4, .5rem))}[data-ui=otp-input] [data-part=slot]{align-items:center;background-color:var(--slotted-otp-input-background, var(--slotted-control-surface, Field));block-size:var(--_height);border:var(--slotted-control-border-width, 1px) solid var(--slotted-otp-input-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--_radius);box-shadow:var(--slotted-otp-input-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;display:flex;flex:0 1 auto;inline-size:var(--_height);justify-content:center;min-inline-size:calc(var(--_height) * .6);position:relative;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);white-space:nowrap}[data-ui=otp-input] [data-part=slot]:empty:before{color:var(--slotted-otp-input-placeholder-color, var(--slotted-text-muted));content:attr(data-placeholder)}[data-ui=otp-input][data-mask] [data-part=slot]:not(:empty){font-size:var(--slotted-otp-input-mask-size, var(--slotted-font-size-2xl, 1.25rem))}[data-ui=otp-input][data-attached]>[data-part=group]{gap:0}[data-ui=otp-input][data-attached] [data-part=slot]{border-radius:0}[data-ui=otp-input][data-attached] [data-part=slot]:not(:first-child){margin-inline-start:calc(var(--slotted-control-border-width, 1px) * -1)}[data-ui=otp-input][data-attached] [data-part=slot]:first-child{border-start-start-radius:var(--_radius);border-end-start-radius:var(--_radius)}[data-ui=otp-input][data-attached] [data-part=slot]:last-child{border-start-end-radius:var(--_radius);border-end-end-radius:var(--_radius)}[data-ui=otp-input][data-attached] [data-part=slot][data-current]{z-index:1}[data-ui=otp-input][data-part=root][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_font-size: var(--slotted-font-size-sm, .8125rem);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=otp-input][data-part=root][data-size=md]{--_height: var(--slotted-control-height-md, 34px);--_font-size: var(--slotted-font-size-md, .875rem);--_gap: var(--slotted-control-gap-md, 8px)}[data-ui=otp-input][data-part=root][data-size=lg]{--_height: var(--slotted-control-height-lg, 38px);--_font-size: var(--slotted-font-size-lg, 1rem);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=otp-input][data-variant=subtle] [data-part=slot]{background-color:var( --slotted-otp-input-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-otp-input-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=otp-input][data-part=root]:has(>[data-part=input]:focus) [data-part=slot][data-current]:empty:after{animation:slotted-otp-input-blink var(--slotted-duration-loop) step-end infinite;background-color:currentcolor;block-size:1em;content:\"\";inline-size:var(--_caret-width);position:absolute}@keyframes slotted-otp-input-blink{0%,50%{opacity:1}50.01%,to{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=otp-input][data-part=root]:has(>[data-part=input]:focus) [data-part=slot][data-current]:empty:after{animation:none}}[data-ui=otp-input][data-part=root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]) [data-part=slot]{border-color:var(--slotted-otp-input-hover-border-color, var(--slotted-tone-accent-border))}[data-ui=otp-input][data-part=root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]) [data-part=slot]{background-color:var( --slotted-otp-input-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=otp-input][data-part=root]:not([data-invalid]):has(>[data-part=input]:focus) [data-part=slot][data-current]{border-color:var(--slotted-otp-input-current-border-color, var(--slotted-tone-accent-border))}[data-ui=otp-input][data-part=root]:has(>[data-part=input]:focus) [data-part=slot][data-current]:not(:empty){background-color:var( --slotted-otp-input-selection-background, var(--slotted-tone-accent-surface) )}[data-ui=otp-input][data-part=root]:has(>[data-part=input]:focus-visible) [data-part=slot][data-current]{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=otp-input][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-otp-input-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui=otp-input][data-part=root][data-invalid] [data-part=slot]{--_invalid-edge-width: var( --slotted-otp-input-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-otp-input-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-otp-input-invalid-border-color, var(--slotted-tone-danger-border));box-shadow:var(--_invalid-edge)}[data-ui=otp-input][data-part=root][data-invalid]:has(>[data-part=input]:focus-visible) [data-part=slot][data-current]{box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}@media(forced-colors:active){[data-ui=otp-input][data-part=root][data-invalid] [data-part=slot]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui=otp-input][data-part=root][data-invalid]:has(>[data-part=input]:focus-visible) [data-part=slot][data-current]{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=otp-input][data-part=root][data-readonly] [data-part=slot]{background-color:var( --slotted-otp-input-readonly-background, var(--slotted-tone-secondary-subtle-hover) );cursor:default}[data-ui=otp-input][data-part=root][data-readonly] [data-part=slot]:after{content:none}[data-ui=otp-input][data-part=root][data-disabled],[data-ui=otp-input][data-part=root]:has(>[data-part=input]:disabled){color:var(--slotted-otp-input-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=otp-input][data-part=root][data-disabled] [data-part=slot],[data-ui=otp-input][data-part=root]:has(>[data-part=input]:disabled) [data-part=slot]{background-color:var( --slotted-otp-input-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-otp-input-disabled-border-color, var(--slotted-disabled-border));box-shadow:none}@media(forced-colors:active){[data-ui=otp-input]>[data-part=input]{forced-color-adjust:none}}}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], attached: [{ type: i0.Input, args: [{ isSignal: true, alias: "attached", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], groupsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlOtpInputState), { ...{ descendants: true }, isSignal: true }] }] } });
+
+/**
+ * The control itself: the value, the identifier, and everything the field
+ * around it says. `dragstart` is refused: a press on a selected character
+ * would otherwise drag that text, with a ghost of the character floating
+ * under the pointer, and in a full code a character is selected at every
+ * press.
+ *
+ * **The element owns the characters, and the directive keeps a copy.** The
+ * frame paints every character, so unlike `text-field` this mirror is the
+ * value and not only its length. `writeValue` from a form and a `[value]`
+ * binding both write the element; typing writes it directly, and the copy
+ * follows — which is what Angular's own `DefaultValueAccessor` does.
+ *
+ * **The selection is normalised, not the keys.** Every key is the browser's.
+ * After each change the directive makes sure a cursor inside the value has
+ * one character selected, so typing replaces it instead of being refused by
+ * `maxlength` — the rule `@slotted/core/otp` holds.
+ *
+ * **Unset means ask the field.** `disabled`, `readOnly` and `invalid` default
+ * to `undefined` rather than `false`. A value the consumer wrote as a static
+ * attribute is read before the host binding computes, so the binding never
+ * writes over it.
+ */
+class SlOtpInputControl {
+    /** Present means the consumer owns the value. */
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** The value the control starts from when nobody else writes one. */
+    defaultValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+    /** Which characters the code takes. Defaults to the token's, then `numeric`. */
+    type = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Tested against each character; outranks `type` in what is accepted. */
+    pattern = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []));
+    /**
+     * Run over every edit before the filter: strip a `G-` prefix, uppercase a
+     * code the reader typed in lowercase.
+     */
+    transform = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "transform" }] : /* istanbul ignore next */ []));
+    /** Unstated rather than `false`, so the control defers to the field. */
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /** Unstated rather than `false`. Reaches the element as the native `readonly`. */
+    readOnly = input(undefined, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /** Unstated rather than `false`. Reaches the element as `aria-invalid`. */
+    invalid = input(undefined, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /** Submits the owning form when the code is complete. */
+    autoSubmit = input(false, { ...(ngDevMode ? { debugName: "autoSubmit" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Asks the platform for the code the moment an SMS arrives, where the
+     * WebOTP API exists. The request is abandoned when the form submits or the
+     * control is destroyed.
+     */
+    webOtp = input(false, { ...(ngDevMode ? { debugName: "webOtp" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * One output for one transition, carrying the value, the value it replaces,
+     * the reason, the originating event and `cancel()`. There is no `[(value)]`,
+     * because a two-way binding has one slot and can carry none of those; a form
+     * gets the same movement through `ControlValueAccessor`.
+     */
+    valueChange = output();
+    /** The value, the moment it reaches `length` characters. */
+    complete = output();
+    /** What an edit lost to the filter, before the value moves. */
+    rejected = output();
+    element = inject(ElementRef).nativeElement;
+    destroyRef = inject(DestroyRef);
+    /**
+     * The frame around the control. Injected without `optional`, so an `input`
+     * written without it fails at construction rather than silently losing its
+     * boxes. It is public because the host bindings read its length and mask.
+     */
+    frame = inject(SlOtpInput);
+    field = inject(SlField, { optional: true });
+    defaults = injectOtpInputDefaults();
+    writtenId = inject(new HostAttributeToken('id'), { optional: true });
+    writtenType = inject(new HostAttributeToken('type'), { optional: true });
+    writtenAutocomplete = inject(new HostAttributeToken('autocomplete'), {
+        optional: true,
+    });
+    writtenInputMode = inject(new HostAttributeToken('inputmode'), {
+        optional: true,
+    });
+    writtenSpellcheck = inject(new HostAttributeToken('spellcheck'), {
+        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 element is showing, cut to the code. */
+    mirror = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mirror" }] : /* istanbul ignore next */ []));
+    code = this.mirror.asReadonly();
+    ownSelection = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownSelection" }] : /* istanbul ignore next */ []));
+    selection = this.ownSelection.asReadonly();
+    ownFocused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownFocused" }] : /* istanbul ignore next */ []));
+    focused = this.ownFocused.asReadonly();
+    previousSelection = null;
+    reported = null;
+    formDisabled = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    onChangeFn = () => undefined;
+    onTouchedFn = () => undefined;
+    resolvedType = computed(() => this.frame.mask() ? 'password' : (this.writtenType ?? 'text'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedType" }] : /* istanbul ignore next */ []));
+    /** Which characters the code takes, stated here or by the token. */
+    codeType = computed(() => this.type() ?? this.defaults.type, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "codeType" }] : /* 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 */ []));
+    resolvedAutocomplete = computed(() => this.writtenAutocomplete ?? 'one-time-code', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAutocomplete" }] : /* istanbul ignore next */ []));
+    resolvedInputMode = computed(() => this.writtenInputMode ?? (this.codeType() === 'numeric' ? 'numeric' : 'text'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedInputMode" }] : /* istanbul ignore next */ []));
+    resolvedSpellcheck = computed(() => this.writtenSpellcheck ?? 'false', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSpellcheck" }] : /* istanbul ignore next */ []));
+    /** Merged after the consumer's own, so a tour step is read before the help. */
+    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() {
+        /* A consumer's own value writes the element, the way a form's does. */
+        effect(() => {
+            const next = this.value();
+            if (next === undefined)
+                return;
+            const clean = this.sanitize(next).value;
+            if (clean === this.element.value)
+                return;
+            this.element.value = clean;
+            this.mirror.set(clean);
+            this.reportCompletion();
+        });
+        /**
+         * The browser fires `selectionchange` on the document, for every control
+         * at once; it is read only while this one holds focus. `capture` because
+         * the event does not bubble in every engine.
+         */
+        const onSelectionChange = () => {
+            if (this.ownFocused() && document.activeElement === this.element)
+                this.syncSelection();
+        };
+        document.addEventListener('selectionchange', onSelectionChange, { capture: true });
+        this.destroyRef.onDestroy(() => document.removeEventListener('selectionchange', onSelectionChange, { capture: true }));
+    }
+    /**
+     * Angular creates every directive in a template before it binds any input,
+     * so the starting value is read here rather than in the constructor.
+     */
+    ngOnInit() {
+        const initial = this.sanitize(this.defaultValue() ?? this.element.value).value;
+        if (initial !== this.element.value)
+            this.element.value = initial;
+        this.mirror.set(initial);
+        this.reportCompletion();
+        /**
+         * A native reset restores the element's own value and tells nothing, so
+         * the copy would keep painting the last thing typed.
+         */
+        const form = this.element.form;
+        if (form !== null) {
+            const onReset = () => {
+                /* The element is restored after the event; the copy follows it. */
+                queueMicrotask(() => this.mirror.set(this.sanitize(this.element.value).value));
+            };
+            form.addEventListener('reset', onReset);
+            this.destroyRef.onDestroy(() => form.removeEventListener('reset', onReset));
+        }
+        if (this.webOtp())
+            this.requestWebOtp();
+    }
+    /** The native element, for `focus()`, `select()` and `setSelectionRange()`. */
+    get inputElement() {
+        return this.element;
+    }
+    writeValue(value) {
+        const clean = this.sanitize(value ?? '').value;
+        this.element.value = clean;
+        this.mirror.set(clean);
+        this.reportCompletion();
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    pressAt(index) {
+        const at = Math.min(index, this.element.value.length);
+        this.element.focus();
+        const end = at < this.element.value.length ? at + 1 : at;
+        this.previousSelection = null;
+        this.element.setSelectionRange(at, end);
+        this.syncSelection();
+    }
+    onInput(event) {
+        const element = this.element;
+        const { rejected, value: next } = this.sanitize(element.value);
+        if (rejected !== '')
+            this.rejected.emit({ text: rejected, source: event });
+        if (next !== element.value) {
+            /* What the filter dropped is taken out of the element, and the cursor
+               goes where the accepted characters end. */
+            const caret = Math.min(element.selectionStart ?? next.length, next.length);
+            element.value = next;
+            element.setSelectionRange(caret, caret);
+        }
+        /* After an edit the cursor is inserting: the next selection reads as one
+           that came from a caret, not from a selected character. */
+        const caret = element.selectionStart ?? next.length;
+        this.previousSelection = { start: caret, end: caret };
+        if (this.request(next, 'keyboard', event)) {
+            this.mirror.set(next);
+            this.onChangeFn(next);
+            this.reportCompletion();
+        }
+        else {
+            /* Refused: the element goes back to what the copy holds. */
+            element.value = this.mirror();
+        }
+        this.syncSelection();
+    }
+    onFocus() {
+        this.ownFocused.set(true);
+        /* Focus lands after the last character, or on it when the code is full. */
+        const at = this.element.value.length;
+        this.element.setSelectionRange(Math.min(at, this.frame.resolvedLength() - 1), at);
+        this.previousSelection = null;
+        this.syncSelection();
+    }
+    onBlur() {
+        this.ownFocused.set(false);
+        this.ownSelection.set(null);
+        this.previousSelection = null;
+        this.onTouchedFn();
+    }
+    sanitize(text) {
+        return sanitize(text, {
+            length: this.frame.resolvedLength(),
+            pattern: this.pattern(),
+            transform: this.transform(),
+            type: this.codeType(),
+        });
+    }
+    /** Reads the element's selection, corrects it, and paints the current box. */
+    syncSelection() {
+        const element = this.element;
+        const start = element.selectionStart ?? element.value.length;
+        const end = element.selectionEnd ?? start;
+        const corrected = normalizeSelection({
+            start,
+            end,
+            valueLength: element.value.length,
+            length: this.frame.resolvedLength(),
+            previous: this.previousSelection ?? undefined,
+        });
+        if (corrected !== null) {
+            element.setSelectionRange(corrected.start, corrected.end, corrected.direction);
+        }
+        const final = corrected ?? { start, end };
+        this.previousSelection = final;
+        this.ownSelection.set(final);
+    }
+    /**
+     * Completion is a fact about the value, reported once per value: a full
+     * code edited into another full code reports again, and a code emptied and
+     * retyped reports again.
+     */
+    reportCompletion() {
+        const code = this.mirror();
+        if (code.length !== this.frame.resolvedLength()) {
+            this.reported = null;
+            return;
+        }
+        if (this.reported === code)
+            return;
+        this.reported = code;
+        this.complete.emit(code);
+        if (this.autoSubmit())
+            this.element.form?.requestSubmit();
+    }
+    /**
+     * The WebOTP API: where it exists, the platform hands over the code the
+     * moment the SMS arrives. Abandoned when the form submits on its own or the
+     * directive is destroyed, which is the shape MDN's example takes.
+     */
+    requestWebOtp() {
+        if (typeof window === 'undefined' || !('OTPCredential' in window))
+            return;
+        const controller = new AbortController();
+        const form = this.element.form;
+        const abort = () => controller.abort();
+        form?.addEventListener('submit', abort);
+        this.destroyRef.onDestroy(() => {
+            form?.removeEventListener('submit', abort);
+            controller.abort();
+        });
+        navigator.credentials
+            .get({ otp: { transport: ['sms'] }, signal: controller.signal })
+            .then((credential) => {
+            const code = credential?.code;
+            if (code === undefined)
+                return;
+            const next = this.sanitize(code).value;
+            if (!this.request(next, 'programmatic', credential))
+                return;
+            this.element.value = next;
+            this.mirror.set(next);
+            this.onChangeFn(next);
+            this.reportCompletion();
+        })
+            .catch(() => undefined);
+    }
+    /** Emits the request and says whether anything may commit. */
+    request(next, reason, source) {
+        if (next === this.mirror())
+            return false;
+        let cancelled = false;
+        const state = createControllable({
+            controlled: undefined,
+            initial: this.mirror(),
+            onRequest: (request) => {
+                this.valueChange.emit(request);
+                cancelled = request.cancelled;
+            },
+        });
+        state.request(next, reason, source);
+        return !cancelled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlOtpInputControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlOtpInputControl, isStandalone: true, selector: "input[slOtpInputControl]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", 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 }, autoSubmit: { classPropertyName: "autoSubmit", publicName: "autoSubmit", isSignal: true, isRequired: false, transformFunction: null }, webOtp: { classPropertyName: "webOtp", publicName: "webOtp", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", complete: "complete", rejected: "rejected" }, host: { attributes: { "data-part": "input" }, listeners: { "input": "onInput($event)", "dragstart": "$event.preventDefault()", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.id": "controlId()", "attr.type": "resolvedType()", "attr.autocomplete": "resolvedAutocomplete()", "attr.inputmode": "resolvedInputMode()", "attr.maxlength": "frame.resolvedLength()", "attr.spellcheck": "resolvedSpellcheck()", "attr.aria-describedby": "describedBy()", "attr.aria-invalid": "ariaInvalid()", "attr.aria-required": "ariaRequired()", "attr.disabled": "disabledAttribute()", "attr.readonly": "readonlyAttribute()" } }, providers: [
+            { provide: SlOtpInputState, useExisting: forwardRef(() => SlOtpInputControl) },
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlOtpInputControl), multi: true },
+        ], exportAs: ["slOtpInputControl"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlOtpInputControl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[slOtpInputControl]',
+                    standalone: true,
+                    exportAs: 'slOtpInputControl',
+                    providers: [
+                        { provide: SlOtpInputState, useExisting: forwardRef(() => SlOtpInputControl) },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlOtpInputControl), multi: true },
+                    ],
+                    host: {
+                        'data-part': 'input',
+                        '[attr.id]': 'controlId()',
+                        '[attr.type]': 'resolvedType()',
+                        '[attr.autocomplete]': 'resolvedAutocomplete()',
+                        '[attr.inputmode]': 'resolvedInputMode()',
+                        '[attr.maxlength]': 'frame.resolvedLength()',
+                        '[attr.spellcheck]': 'resolvedSpellcheck()',
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '[attr.aria-invalid]': 'ariaInvalid()',
+                        '[attr.aria-required]': 'ariaRequired()',
+                        '[attr.disabled]': 'disabledAttribute()',
+                        '[attr.readonly]': 'readonlyAttribute()',
+                        '(input)': 'onInput($event)',
+                        '(dragstart)': '$event.preventDefault()',
+                        '(focus)': 'onFocus()',
+                        '(blur)': 'onBlur()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], transform: [{ type: i0.Input, args: [{ isSignal: true, alias: "transform", 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 }] }], autoSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSubmit", required: false }] }], webOtp: [{ type: i0.Input, args: [{ isSignal: true, alias: "webOtp", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], complete: [{ type: i0.Output, args: ["complete"] }], rejected: [{ type: i0.Output, args: ["rejected"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { OTP_INPUT_DEFAULTS, SlOtpInput, SlOtpInputControl, SlOtpInputState, injectOtpInputDefaults, provideOtpInputDefaults };
+//# sourceMappingURL=slotted-angular-otp-input.mjs.map