@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.1

package/text/index.jsx

@@ -0,0 +1,61 @@
+// Ported from react-aria-components Text (packages/react-aria-components/src/Text.tsx), Apache-2.0, © Adobe.
+// Rivet: props merged with `TextContext` (`contextProps`; fields provide `{ slots: { description, errorMessage } }`
+// with the part ids); `span` / `div` / `p` are compiled branches, other `elementType`s render through
+// `Dynamic` (no resumable event handlers on those). `render` (RAC DOMRenderProps): given, the attributes object goes to `render(attrs, undefined)`; the default path is the compiled element. Deviations: not a hideable
+// collection component (`createHideableComponent`: Rivet collections do not render parts twice).
+import { createContext, untrack } from "@rivetjs/reactivity";
+import { Dynamic } from "@rivetjs/runtime/dom";
+import { renderSlot } from "@rivetjs/runtime/slot";
+import { slotChildren } from "../utils/render.js";
+import { resumableContext, contextProps, probeSlot, } from "../slots/index.jsx";
+import { isHiddenPart } from "../collections/hidden.js";
+import { slotProbing } from "#server";
+import { hasLive } from "../utils/live.jsx";
+import { liveElement } from "../utils/live-element.jsx";
+export const TextContext = resumableContext(createContext({}, { id: "rv-text" }));
+export function Text(props) {
+    // A field's server slot probe (`probeSlots`; browser: the constant `false`): mark the description / errorMessage slot id
+    // this part takes, render nothing. RAC createHideableComponent: nothing in the collection build pass.
+    if (slotProbing)
+        return (probeSlot(props, TextContext), null);
+    if (isHiddenPart())
+        return null;
+    const [merged, ref] = contextProps(props, props.ref, TextContext);
+    // Live props (P5): class / style / children live (one `Dynamic` element); `elementType` read once.
+    if (hasLive(merged)) {
+        const live = untrack(() => (merged.render ? null : (merged.elementType ?? "span")));
+        if (live)
+            return untrack(() => liveElement(merged, ref, live, "rv-Text"));
+    }
+    const { elementType = "span", children, class: className, style, slot, render, ...domProps } = merged;
+    const cls = className ?? "rv-Text";
+    const s = slot ?? undefined;
+    const r = ref;
+    if (render)
+        return render({
+            ...domProps,
+            style: (typeof style === "function" ? style() : style),
+            slot: s,
+            ref: r,
+            class: cls,
+            children: slotChildren(children),
+        }, undefined);
+    if (elementType === "span")
+        return (<span {...domProps} style={(typeof style === "function" ? style() : style)} slot={s} ref={r} class={cls}>
+        {renderSlot(children)}
+      </span>);
+    if (elementType === "div")
+        return (<div {...domProps} style={(typeof style === "function" ? style() : style)} slot={s} ref={r} class={cls}>
+        {renderSlot(children)}
+      </div>);
+    if (elementType === "p")
+        return (<p {...domProps} style={(typeof style === "function" ? style() : style)} slot={s} ref={r} class={cls}>
+        {renderSlot(children)}
+      </p>);
+    // `style` only when set: the server `Dynamic` rejects the `style` attribute name (even with an `undefined` value), so an unset
+    // style must not be a key (ui `Typography` renders `h1`…`h6` / `code` through this branch).
+    const dynamicStyle = style === undefined ? {} : { style: (typeof style === "function" ? style() : style) };
+    return (<Dynamic component={elementType} {...domProps} {...dynamicStyle} slot={s} ref={r} class={cls}>
+      {renderSlot(children)}
+    </Dynamic>);
+}

package/text-area/index.d.ts

@@ -0,0 +1,19 @@
+import { type DOMRenderProps } from "../utils/render.js";
+import type { InputRenderProps } from "../input/index.jsx";
+import { type ClassNameOrFunction, type ContextValue, type AccessorProps, type HTMLProps, type RefValue, type SlotProps, type StyleOrFunction } from "../slots/index.jsx";
+import type { HoverEvents } from "../utils/types.js";
+export type { InputRenderProps } from "../input/index.jsx";
+export interface TextAreaProps extends AccessorProps<HTMLProps<"textarea">, "autoFocus">, HoverEvents, SlotProps, DOMRenderProps<"textarea", InputRenderProps> {
+    /**
+     * The CSS class of the element. A function may be provided to compute the class based on component state.
+     *
+     * @default "rv-TextArea"
+     */
+    class?: ClassNameOrFunction<InputRenderProps>;
+    /** The inline style of the element. A function may be provided to compute the style based on component state. */
+    style?: StyleOrFunction<InputRenderProps>;
+    ref?: RefValue<HTMLTextAreaElement>;
+}
+export declare const TextAreaContext: import("@rivetjs/reactivity").Context<ContextValue<TextAreaProps, HTMLTextAreaElement>>;
+/** A textarea allows a user to input multi-line text. */
+export declare function TextArea(props: TextAreaProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement | null;

package/text-area/index.jsx

@@ -0,0 +1,76 @@
+// Ported from react-aria-components TextArea (packages/react-aria-components/src/TextArea.tsx), Apache-2.0, © Adobe.
+// A native `<textarea>` with hover / focus / focus-visible state (`data-hovered`, `data-focused`,
+// `data-focus-visible`, `data-disabled`, `data-invalid`); fields provide `TextAreaContext`.
+// Rivet: as `../input/index.tsx` (accessor render props, bindings over hover / focus-ring signals).
+// `render` (RAC DOMRenderProps): given, the attributes go to `render(attrs, InputRenderProps)` instead of the default element.
+import { createContext, untrack } from "@rivetjs/reactivity";
+import { hasLive, liveAt, liveOmit, readOnce } from "../utils/live.jsx";
+import { liveRenderProps, slottedContext } from "../slots/index.jsx";
+import { mergeIds } from "../utils/id.js";
+import { useFocusRing } from "../focus/focus-ring.jsx";
+import { hoverProps } from "../interactions/hover.jsx";
+import { mergeProps } from "../interactions/merge-props.jsx";
+import { read } from "../interactions/utils.js";
+import {} from "../utils/render.js";
+import { resumableContext, contextProps, renderProps, } from "../slots/index.jsx";
+import { isHiddenPart } from "../collections/hidden.js";
+import { slotProbing } from "#server";
+export const TextAreaContext = resumableContext(createContext({}, { id: "rv-text-area" }));
+/** A textarea allows a user to input multi-line text. */
+export function TextArea(props) {
+    // RAC createHideableComponent: nothing in the collection build pass (its context providers are absent).
+    if (slotProbing) {
+        // A field's server slot probe: an own `id` merges into the field's input id now (RA mergeIds, as `Input`), so the
+        // Label that renders before this TextArea writes `for` = this id.
+        const own = props.id;
+        const ctxId = slottedContext(TextAreaContext, props.slot)?.id;
+        if (typeof own === "string" && own && typeof ctxId === "string" && ctxId)
+            mergeIds(ctxId, own);
+        return null;
+    }
+    if (isHiddenPart())
+        return null;
+    const [merged, ref] = contextProps(props, props.ref, TextAreaContext);
+    // Live props (P5): read-once keys untracked, the rest forwarded unread (`liveOmit`); class / style from a live view.
+    const live = hasLive(merged);
+    const { onHoverStart, onHoverEnd, onHoverChange, class: className, style, slot, render, } = readOnce(merged, ["onHoverStart", "onHoverEnd", "onHoverChange", "class", "style", "slot", "render"]);
+    const rest = liveOmit(merged, ["onHoverStart", "onHoverEnd", "onHoverChange", "class", "style", "slot", "render"]);
+    // Context values may be accessors (fields provide reactive `aria-invalid`, `disabled`, …): read in bindings.
+    const disabledValue = liveAt(rest, "disabled");
+    const invalidValue = liveAt(rest, "aria-invalid");
+    const disabled = () => !!read(disabledValue);
+    const isInvalid = () => {
+        const v = read(invalidValue);
+        return !!v && v !== "false";
+    };
+    // RAC: hover props without `isDisabled` — the textarea's own `disabled` is not passed as `isDisabled`.
+    const hover = hoverProps({ onHoverStart, onHoverEnd, onHoverChange }, rest);
+    const isHovered = hover.isHovered;
+    const { isFocused, isFocusVisible, focusProps } = useFocusRing({
+        isTextInput: true,
+        autoFocus: untrack(() => read(rest.autoFocus)),
+    });
+    const rp = renderProps({
+        class: className,
+        style,
+        values: { isHovered, isFocused, isFocusVisible, isDisabled: disabled, isInvalid },
+        defaultClassName: "rv-TextArea",
+    }, live ? liveRenderProps(merged, ["class", "style"]) : undefined);
+    // Accessor values are resolved by the element spread (ACCESSOR RULE).
+    const domProps = mergeProps(rest, focusProps, hover.hoverProps);
+    const s = slot ?? undefined;
+    if (render)
+        return render({
+            ...domProps,
+            slot: s,
+            ref: ref,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            "data-focused": () => isFocused() || undefined,
+            "data-disabled": () => disabled() || undefined,
+            "data-hovered": () => isHovered() || undefined,
+            "data-focus-visible": () => isFocusVisible() || undefined,
+            "data-invalid": () => isInvalid() || undefined,
+        }, { isHovered, isFocused, isFocusVisible, isDisabled: disabled, isInvalid });
+    return (<textarea {...domProps} slot={s} ref={ref} class={rp.class()} style={rp.style()} data-focused={isFocused() || undefined} data-disabled={disabled() || undefined} data-hovered={isHovered() || undefined} data-focus-visible={isFocusVisible() || undefined} data-invalid={isInvalid() || undefined}/>);
+}

package/text-field/autosize.d.ts

@@ -0,0 +1,70 @@
+import { type NumberInput } from "../coercion/index.js";
+import { type Observable } from "../observers/index.js";
+export interface TextareaAutosizeOptions {
+    /** `cdkAutosizeMinRows`. */
+    minRows?: NumberInput;
+    /** `cdkAutosizeMaxRows`. */
+    maxRows?: NumberInput;
+    /** `cdkTextareaAutosize` (default true). */
+    enabled?: boolean;
+    /** `placeholder` input: sets / removes the attribute; the textarea is at least as tall as it. */
+    placeholder?: string | null;
+}
+/**
+ * Host attributes for an autosize textarea (SSR markup): `class`, `rows=1`; `native` adds the CSS path and, with
+ * `minRows` / `maxRows`, a `style` object of the CSS variables (spreads onto the `TextArea` part or a `<textarea>`).
+ */
+export declare function autosizeProps(options?: {
+    minRows?: NumberInput;
+    maxRows?: NumberInput;
+    native?: boolean;
+}): {
+    class: string;
+    rows: number;
+    style?: Record<string, number>;
+};
+/** Angular `CdkTextareaAutosize` (exported as `cdkTextareaAutosize`). */
+export interface TextareaAutosize {
+    readonly minRows: number;
+    readonly maxRows: number;
+    readonly enabled: boolean;
+    readonly placeholder: string;
+    setMinRows(value: NumberInput): void;
+    setMaxRows(value: NumberInput): void;
+    /** Enabling resizes to fit (forced); disabling restores the initial height. */
+    setEnabled(value: boolean): void;
+    setPlaceholder(value: string | null | undefined): void;
+    /** Resize to the content; skipped when value and minRows are unchanged unless `force`. */
+    resizeToFitContent(force?: boolean): void;
+    /** Restore the height the textarea had before autosize. */
+    reset(): void;
+    /** Remove listeners and the `value` hook. */
+    destroy(): void;
+}
+/** The `TextareaAutosize` attached to `textarea`, if any. */
+export declare function textareaAutosize(textarea: HTMLTextAreaElement): TextareaAutosize | undefined;
+/** Attach `CdkTextareaAutosize` to `textarea` (or return the attached one, updated with `options`). */
+export declare function autosizeTextarea(textareaOrRef: HTMLTextAreaElement | (() => HTMLTextAreaElement | null | undefined), options?: TextareaAutosizeOptions): TextareaAutosize;
+/** An autofill state change. */
+export type AutofillEvent = {
+    /** The element whose autofill state changed. */
+    target: Element;
+    /** Whether it is now autofilled. */
+    isAutofilled: boolean;
+};
+/** Angular `AutofillMonitor`: autofill state of inputs via `animationstart` on keyframes. */
+export interface AutofillMonitor {
+    /** Autofill changes of `element`; the same stream for repeated calls. Server: completes at once. */
+    monitor(element: Element | (() => Element | null | undefined)): Observable<AutofillEvent>;
+    /** Stop monitoring: removes the listener and classes, completes the stream. */
+    stopMonitoring(element: Element | (() => Element | null | undefined)): void;
+    /** `ngOnDestroy`: stops monitoring every element. */
+    destroy(): void;
+}
+export declare function createAutofillMonitor(): AutofillMonitor;
+/** The shared `AutofillMonitor` (Angular root service), created on first use. */
+export declare function autofillMonitor(): AutofillMonitor;
+/** `cdkAutofill`: `onChange(event)` on autofill changes of `element`. Returns the cleanup (stops monitoring). */
+export declare function onAutofill(element: Element | (() => Element | null | undefined), onChange: (event: AutofillEvent) => void, options?: {
+    monitor?: AutofillMonitor;
+}): () => void;

package/text-field/autosize.js

@@ -0,0 +1,355 @@
+// Ported from angular/components src/cdk/text-field (MIT, © Google LLC): `CdkTextareaAutosize`,
+// `AutofillMonitor`, `CdkAutofill`, `AutofillEvent`, the text-field structural styles.
+//
+// Rivet:
+// - Zero JS: `autosizeProps({ minRows, maxRows, native: true })` (style = object of CSS variables) → CSS `field-sizing: content`
+//   (import `@rivetjs/cdk/text-field.css`). Browsers without `field-sizing` keep the fixed height.
+// - 1:1 behaviour: `autosizeTextarea(textarea, options)` from a client effect or a focus / input
+//   handler. It returns the `CdkTextareaAutosize` controller (minRows / maxRows / enabled /
+//   placeholder setters, `resizeToFitContent(force)`, `reset()`, `destroy()`); `textareaAutosize(el)`
+//   finds an attached one. Angular's `ngDoCheck` (resize on every change detection) becomes an
+//   `input` listener plus an instance `value` accessor, so programmatic writes (signal bindings,
+//   forms) resize too.
+// - `AutofillMonitor` is `createAutofillMonitor()` / the shared `autofillMonitor()`; `onAutofill(el,
+//   fn)` is the `cdkAutofill` directive. The monitor injects its styles on first use (Angular's
+//   private style loader); SSR pages can import `text-field.css` instead.
+// Nothing runs at import time.
+import { coerceElement, coerceNumberProperty } from "../coercion/index.js";
+import { getPlatform, normalizePassiveListenerOptions } from "../platform/index.js";
+import { getNonce } from "../utils/dom.js";
+import { _Subject } from "../observers/index.js";
+const STYLE_ATTR = "data-cdk-text-field";
+const STYLES = "textarea.cdk-textarea-autosize{resize:none}" +
+    "textarea.cdk-textarea-autosize-measuring{padding:2px 0!important;box-sizing:content-box!important;height:auto!important;overflow:hidden!important}" +
+    "textarea.cdk-textarea-autosize-measuring-firefox{padding:2px 0!important;box-sizing:content-box!important;height:0!important}" +
+    "@keyframes cdk-text-field-autofill-start{/*!*/}@keyframes cdk-text-field-autofill-end{/*!*/}" +
+    ".cdk-text-field-autofill-monitored:-webkit-autofill{animation:cdk-text-field-autofill-start 0s 1ms}" +
+    ".cdk-text-field-autofill-monitored:not(:-webkit-autofill){animation:cdk-text-field-autofill-end 0s 1ms}";
+/** Angular `_CdkPrivateStyleLoader.load(_CdkTextFieldStyleLoader)`: once per document. */
+function loadStyles(doc) {
+    if (doc.head.querySelector(`style[${STYLE_ATTR}]`))
+        return;
+    const style = doc.createElement("style");
+    style.setAttribute(STYLE_ATTR, "");
+    const nonce = getNonce(doc);
+    if (nonce)
+        style.setAttribute("nonce", nonce);
+    style.textContent = STYLES;
+    doc.head.prepend(style);
+}
+/**
+ * Host attributes for an autosize textarea (SSR markup): `class`, `rows=1`; `native` adds the CSS path and, with
+ * `minRows` / `maxRows`, a `style` object of the CSS variables (spreads onto the `TextArea` part or a `<textarea>`).
+ */
+export function autosizeProps(options = {}) {
+    if (!options.native)
+        return { class: "cdk-textarea-autosize", rows: 1 };
+    const style = {};
+    const min = coerceNumberProperty(options.minRows);
+    const max = coerceNumberProperty(options.maxRows);
+    if (min)
+        style["--cdk-autosize-min-rows"] = min;
+    if (max)
+        style["--cdk-autosize-max-rows"] = max;
+    return { class: "cdk-textarea-autosize cdk-textarea-autosize-native", rows: 1, ...(min || max ? { style } : {}) };
+}
+const controllers = new WeakMap();
+/** The `TextareaAutosize` attached to `textarea`, if any. */
+export function textareaAutosize(textarea) {
+    return controllers.get(textarea);
+}
+/** Attach `CdkTextareaAutosize` to `textarea` (or return the attached one, updated with `options`). */
+export function autosizeTextarea(textareaOrRef, options = {}) {
+    const textarea = coerceElement(textareaOrRef);
+    const existing = controllers.get(textarea);
+    if (existing) {
+        applyOptions(existing, options);
+        return existing;
+    }
+    const platform = getPlatform();
+    const doc = textarea.ownerDocument;
+    const win = doc.defaultView;
+    loadStyles(doc);
+    // Host bindings.
+    textarea.classList.add("cdk-textarea-autosize");
+    textarea.rows = 1;
+    let minRows = 0;
+    let maxRows = 0;
+    let enabled = true;
+    let previousMinRows = -1;
+    let previousValue;
+    let cachedLineHeight;
+    let cachedPlaceholderHeight;
+    let hasFocus = false;
+    let isViewInited = false;
+    let destroyed = false;
+    let initialHeight;
+    const setMinHeight = () => {
+        const minHeight = minRows && cachedLineHeight ? `${minRows * cachedLineHeight}px` : null;
+        if (minHeight)
+            textarea.style.minHeight = minHeight;
+    };
+    const setMaxHeight = () => {
+        const maxHeight = maxRows && cachedLineHeight ? `${maxRows * cachedLineHeight}px` : null;
+        if (maxHeight)
+            textarea.style.maxHeight = maxHeight;
+    };
+    // Line height from a hidden one-row clone (no padding / border).
+    const cacheTextareaLineHeight = () => {
+        if (cachedLineHeight)
+            return;
+        const clone = textarea.cloneNode(false);
+        const s = clone.style;
+        clone.rows = 1;
+        s.position = "absolute";
+        s.visibility = "hidden";
+        s.border = "none";
+        s.padding = "0";
+        s.height = "";
+        s.minHeight = "";
+        s.maxHeight = "";
+        // App styles may set `top` etc.; the clone must not affect the layout (and scroll position).
+        s.top = s.bottom = s.left = s.right = "auto";
+        // Hidden overflow: a scrollbar could make the content wrap and the clone taller.
+        s.overflow = "hidden";
+        textarea.parentNode.appendChild(clone);
+        cachedLineHeight = clone.clientHeight;
+        clone.remove();
+        setMinHeight();
+        setMaxHeight();
+    };
+    const measureScrollHeight = () => {
+        const previousMargin = textarea.style.marginBottom || "";
+        const measuringClass = platform.FIREFOX ? "cdk-textarea-autosize-measuring-firefox" : "cdk-textarea-autosize-measuring";
+        // Focused textarea: the height change would scroll the page; a margin keeps the layout stable.
+        const needsMarginFiller = hasFocus;
+        if (needsMarginFiller)
+            textarea.style.marginBottom = `${textarea.clientHeight}px`;
+        textarea.classList.add(measuringClass);
+        // 4px: the 2px top / bottom measuring padding.
+        const scrollHeight = textarea.scrollHeight - 4;
+        textarea.classList.remove(measuringClass);
+        if (needsMarginFiller)
+            textarea.style.marginBottom = previousMargin;
+        return scrollHeight;
+    };
+    const cacheTextareaPlaceholderHeight = () => {
+        if (!isViewInited || cachedPlaceholderHeight != undefined)
+            return;
+        if (!textarea.placeholder) {
+            cachedPlaceholderHeight = 0;
+            return;
+        }
+        const value = nativeValue.get.call(textarea);
+        nativeValue.set.call(textarea, textarea.placeholder);
+        cachedPlaceholderHeight = measureScrollHeight();
+        nativeValue.set.call(textarea, value);
+    };
+    const scrollToCaretPosition = () => {
+        const { selectionStart, selectionEnd } = textarea;
+        // Re-setting the selection scrolls the caret into view (Chrome / Firefox keep it hidden after a
+        // height change while the textarea is focused).
+        if (!destroyed && hasFocus)
+            textarea.setSelectionRange(selectionStart, selectionEnd);
+    };
+    const resizeToFitContent = (force = false) => {
+        if (!enabled)
+            return;
+        cacheTextareaLineHeight();
+        cacheTextareaPlaceholderHeight();
+        // Not in the DOM / hidden: nothing to measure.
+        if (!cachedLineHeight)
+            return;
+        const value = nativeValue.get.call(textarea);
+        if (!force && minRows === previousMinRows && value === previousValue)
+            return;
+        const height = Math.max(measureScrollHeight(), cachedPlaceholderHeight || 0);
+        textarea.style.height = `${height}px`;
+        if (typeof win.requestAnimationFrame !== "undefined")
+            win.requestAnimationFrame(scrollToCaretPosition);
+        else
+            setTimeout(scrollToCaretPosition);
+        previousValue = value;
+        previousMinRows = minRows;
+    };
+    // `ngDoCheck`: resize after programmatic value writes.
+    const nativeValue = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value");
+    Object.defineProperty(textarea, "value", {
+        configurable: true,
+        enumerable: true,
+        get() {
+            return nativeValue.get.call(this);
+        },
+        set(next) {
+            nativeValue.set.call(this, next);
+            if (isViewInited)
+                resizeToFitContent();
+        },
+    });
+    // `window` resize, audited to 16ms; resets the cached heights.
+    let auditTimer;
+    const onWindowResize = () => {
+        if (auditTimer !== undefined)
+            return;
+        auditTimer = setTimeout(() => {
+            auditTimer = undefined;
+            cachedLineHeight = cachedPlaceholderHeight = undefined;
+            controller.resizeToFitContent(true);
+        }, 16);
+    };
+    const onFocus = (event) => {
+        hasFocus = event.type === "focus";
+    };
+    const onInput = () => resizeToFitContent();
+    win.addEventListener("resize", onWindowResize);
+    textarea.addEventListener("focus", onFocus);
+    textarea.addEventListener("blur", onFocus);
+    textarea.addEventListener("input", onInput);
+    const controller = {
+        get minRows() {
+            return minRows;
+        },
+        get maxRows() {
+            return maxRows;
+        },
+        get enabled() {
+            return enabled;
+        },
+        get placeholder() {
+            return textarea.placeholder;
+        },
+        setMinRows(value) {
+            minRows = coerceNumberProperty(value);
+            setMinHeight();
+            if (isViewInited)
+                resizeToFitContent();
+        },
+        setMaxRows(value) {
+            maxRows = coerceNumberProperty(value);
+            setMaxHeight();
+        },
+        setEnabled(value) {
+            if (enabled !== value)
+                (enabled = value) ? resizeToFitContent(true) : controller.reset();
+        },
+        setPlaceholder(value) {
+            cachedPlaceholderHeight = undefined;
+            if (value)
+                textarea.setAttribute("placeholder", value);
+            else
+                textarea.removeAttribute("placeholder");
+            cacheTextareaPlaceholderHeight();
+            if (isViewInited)
+                resizeToFitContent(true);
+        },
+        resizeToFitContent: (force) => resizeToFitContent(force),
+        reset() {
+            // Not initialized yet: undefined (keep the height).
+            if (initialHeight !== undefined)
+                textarea.style.height = initialHeight;
+        },
+        destroy() {
+            if (destroyed)
+                return;
+            destroyed = true;
+            clearTimeout(auditTimer);
+            win.removeEventListener("resize", onWindowResize);
+            textarea.removeEventListener("focus", onFocus);
+            textarea.removeEventListener("blur", onFocus);
+            textarea.removeEventListener("input", onInput);
+            delete textarea.value;
+            controllers.delete(textarea);
+        },
+    };
+    applyOptions(controller, options);
+    // `ngAfterViewInit`.
+    initialHeight = textarea.style.height;
+    hasFocus = doc.activeElement === textarea;
+    resizeToFitContent();
+    isViewInited = true;
+    resizeToFitContent(true);
+    controllers.set(textarea, controller);
+    return controller;
+}
+function applyOptions(controller, options) {
+    if ("minRows" in options)
+        controller.setMinRows(options.minRows);
+    if ("maxRows" in options)
+        controller.setMaxRows(options.maxRows);
+    if ("placeholder" in options)
+        controller.setPlaceholder(options.placeholder);
+    if (options.enabled !== undefined)
+        controller.setEnabled(options.enabled);
+}
+const EMPTY = {
+    subscribe(observer) {
+        if (observer && typeof observer !== "function")
+            observer.complete?.();
+        return { unsubscribe() { } };
+    },
+};
+const listenerOptions = { passive: true };
+export function createAutofillMonitor() {
+    const monitored = new Map();
+    const monitor = {
+        monitor(elementOrRef) {
+            if (!getPlatform().isBrowser)
+                return EMPTY;
+            const element = coerceElement(elementOrRef);
+            loadStyles(element.ownerDocument);
+            const info = monitored.get(element);
+            if (info)
+                return info.subject;
+            const subject = new _Subject();
+            const cssClass = "cdk-text-field-autofilled";
+            const listener = (event) => {
+                // Start / end animations fire when the `:-webkit-autofill` state changes; the class guards
+                // against duplicate events (e.g. the initial "end" of an unfilled input).
+                if (event.animationName === "cdk-text-field-autofill-start" && !element.classList.contains(cssClass)) {
+                    element.classList.add(cssClass);
+                    subject.next({ target: event.target, isAutofilled: true });
+                }
+                else if (event.animationName === "cdk-text-field-autofill-end" && element.classList.contains(cssClass)) {
+                    element.classList.remove(cssClass);
+                    subject.next({ target: event.target, isAutofilled: false });
+                }
+            };
+            const options = normalizePassiveListenerOptions(listenerOptions);
+            element.classList.add("cdk-text-field-autofill-monitored");
+            element.addEventListener("animationstart", listener, options);
+            const unlisten = () => element.removeEventListener("animationstart", listener, options);
+            monitored.set(element, { subject, unlisten });
+            return subject;
+        },
+        stopMonitoring(elementOrRef) {
+            const element = coerceElement(elementOrRef);
+            const info = monitored.get(element);
+            if (!info)
+                return;
+            info.unlisten();
+            info.subject.complete();
+            element.classList.remove("cdk-text-field-autofill-monitored");
+            element.classList.remove("cdk-text-field-autofilled");
+            monitored.delete(element);
+        },
+        destroy() {
+            for (const element of [...monitored.keys()])
+                monitor.stopMonitoring(element);
+        },
+    };
+    return monitor;
+}
+let sharedAutofill;
+/** The shared `AutofillMonitor` (Angular root service), created on first use. */
+export function autofillMonitor() {
+    return (sharedAutofill ??= createAutofillMonitor());
+}
+/** `cdkAutofill`: `onChange(event)` on autofill changes of `element`. Returns the cleanup (stops monitoring). */
+export function onAutofill(element, onChange, options = {}) {
+    const m = options.monitor ?? autofillMonitor();
+    const subscription = m.monitor(element).subscribe(onChange);
+    return () => {
+        subscription.unsubscribe();
+        m.stopMonitoring(element);
+    };
+}