@kato-lee/cdk 14.2.7 → 20.2.14

package/{fesm2020 → fesm2022}/text-field.mjs

@@ -1,459 +1,432 @@
-import * as i1 from '@kato-lee/cdk/platform';
-import { normalizePassiveListenerOptions } from '@kato-lee/cdk/platform';
-import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Directive, Output, Optional, Inject, Input, NgModule } from '@angular/core';
-import { coerceElement, coerceNumberProperty, coerceBooleanProperty } from '@kato-lee/cdk/coercion';
-import { EMPTY, Subject, fromEvent } from 'rxjs';
-import { auditTime, takeUntil } from 'rxjs/operators';
-import { DOCUMENT } from '@angular/common';
-
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-/** Options to pass to the animationstart listener. */
-const listenerOptions = normalizePassiveListenerOptions({ passive: true });
-/**
- * An injectable service that can be used to monitor the autofill state of an input.
- * Based on the following blog post:
- * https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
- */
-class AutofillMonitor {
-    constructor(_platform, _ngZone) {
-        this._platform = _platform;
-        this._ngZone = _ngZone;
-        this._monitoredElements = new Map();
-    }
-    monitor(elementOrRef) {
-        if (!this._platform.isBrowser) {
-            return EMPTY;
-        }
-        const element = coerceElement(elementOrRef);
-        const info = this._monitoredElements.get(element);
-        if (info) {
-            return info.subject;
-        }
-        const result = new Subject();
-        const cssClass = 'cdk-text-field-autofilled';
-        const listener = ((event) => {
-            // Animation events fire on initial element render, we check for the presence of the autofill
-            // CSS class to make sure this is a real change in state, not just the initial render before
-            // we fire off events.
-            if (event.animationName === 'cdk-text-field-autofill-start' &&
-                !element.classList.contains(cssClass)) {
-                element.classList.add(cssClass);
-                this._ngZone.run(() => result.next({ target: event.target, isAutofilled: true }));
-            }
-            else if (event.animationName === 'cdk-text-field-autofill-end' &&
-                element.classList.contains(cssClass)) {
-                element.classList.remove(cssClass);
-                this._ngZone.run(() => result.next({ target: event.target, isAutofilled: false }));
-            }
-        });
-        this._ngZone.runOutsideAngular(() => {
-            element.addEventListener('animationstart', listener, listenerOptions);
-            element.classList.add('cdk-text-field-autofill-monitored');
-        });
-        this._monitoredElements.set(element, {
-            subject: result,
-            unlisten: () => {
-                element.removeEventListener('animationstart', listener, listenerOptions);
-            },
-        });
-        return result;
-    }
-    stopMonitoring(elementOrRef) {
-        const element = coerceElement(elementOrRef);
-        const info = this._monitoredElements.get(element);
-        if (info) {
-            info.unlisten();
-            info.subject.complete();
-            element.classList.remove('cdk-text-field-autofill-monitored');
-            element.classList.remove('cdk-text-field-autofilled');
-            this._monitoredElements.delete(element);
-        }
-    }
-    ngOnDestroy() {
-        this._monitoredElements.forEach((_info, element) => this.stopMonitoring(element));
-    }
-}
-AutofillMonitor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AutofillMonitor, deps: [{ token: i1.Platform }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-AutofillMonitor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AutofillMonitor, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AutofillMonitor, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1.Platform }, { type: i0.NgZone }]; } });
-/** A directive that can be used to monitor the autofill state of an input. */
-class CdkAutofill {
-    constructor(_elementRef, _autofillMonitor) {
-        this._elementRef = _elementRef;
-        this._autofillMonitor = _autofillMonitor;
-        /** Emits when the autofill state of the element changes. */
-        this.cdkAutofill = new EventEmitter();
-    }
-    ngOnInit() {
-        this._autofillMonitor
-            .monitor(this._elementRef)
-            .subscribe(event => this.cdkAutofill.emit(event));
-    }
-    ngOnDestroy() {
-        this._autofillMonitor.stopMonitoring(this._elementRef);
-    }
-}
-CdkAutofill.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkAutofill, deps: [{ token: i0.ElementRef }, { token: AutofillMonitor }], target: i0.ɵɵFactoryTarget.Directive });
-CdkAutofill.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: CdkAutofill, selector: "[cdkAutofill]", outputs: { cdkAutofill: "cdkAutofill" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkAutofill, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[cdkAutofill]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: AutofillMonitor }]; }, propDecorators: { cdkAutofill: [{
-                type: Output
-            }] } });
-
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-/** Directive to automatically resize a textarea to fit its content. */
-class CdkTextareaAutosize {
-    constructor(_elementRef, _platform, _ngZone,
-    /** @breaking-change 11.0.0 make document required */
-    document) {
-        this._elementRef = _elementRef;
-        this._platform = _platform;
-        this._ngZone = _ngZone;
-        this._destroyed = new Subject();
-        this._enabled = true;
-        /**
-         * Value of minRows as of last resize. If the minRows has decreased, the
-         * height of the textarea needs to be recomputed to reflect the new minimum. The maxHeight
-         * does not have the same problem because it does not affect the textarea's scrollHeight.
-         */
-        this._previousMinRows = -1;
-        this._isViewInited = false;
-        /** Handles `focus` and `blur` events. */
-        this._handleFocusEvent = (event) => {
-            this._hasFocus = event.type === 'focus';
-        };
-        this._document = document;
-        this._textareaElement = this._elementRef.nativeElement;
-    }
-    /** Minimum amount of rows in the textarea. */
-    get minRows() {
-        return this._minRows;
-    }
-    set minRows(value) {
-        this._minRows = coerceNumberProperty(value);
-        this._setMinHeight();
-    }
-    /** Maximum amount of rows in the textarea. */
-    get maxRows() {
-        return this._maxRows;
-    }
-    set maxRows(value) {
-        this._maxRows = coerceNumberProperty(value);
-        this._setMaxHeight();
-    }
-    /** Whether autosizing is enabled or not */
-    get enabled() {
-        return this._enabled;
-    }
-    set enabled(value) {
-        value = coerceBooleanProperty(value);
-        // Only act if the actual value changed. This specifically helps to not run
-        // resizeToFitContent too early (i.e. before ngAfterViewInit)
-        if (this._enabled !== value) {
-            (this._enabled = value) ? this.resizeToFitContent(true) : this.reset();
-        }
-    }
-    get placeholder() {
-        return this._textareaElement.placeholder;
-    }
-    set placeholder(value) {
-        this._cachedPlaceholderHeight = undefined;
-        if (value) {
-            this._textareaElement.setAttribute('placeholder', value);
-        }
-        else {
-            this._textareaElement.removeAttribute('placeholder');
-        }
-        this._cacheTextareaPlaceholderHeight();
-    }
-    /** Sets the minimum height of the textarea as determined by minRows. */
-    _setMinHeight() {
-        const minHeight = this.minRows && this._cachedLineHeight ? `${this.minRows * this._cachedLineHeight}px` : null;
-        if (minHeight) {
-            this._textareaElement.style.minHeight = minHeight;
-        }
-    }
-    /** Sets the maximum height of the textarea as determined by maxRows. */
-    _setMaxHeight() {
-        const maxHeight = this.maxRows && this._cachedLineHeight ? `${this.maxRows * this._cachedLineHeight}px` : null;
-        if (maxHeight) {
-            this._textareaElement.style.maxHeight = maxHeight;
-        }
-    }
-    ngAfterViewInit() {
-        if (this._platform.isBrowser) {
-            // Remember the height which we started with in case autosizing is disabled
-            this._initialHeight = this._textareaElement.style.height;
-            this.resizeToFitContent();
-            this._ngZone.runOutsideAngular(() => {
-                const window = this._getWindow();
-                fromEvent(window, 'resize')
-                    .pipe(auditTime(16), takeUntil(this._destroyed))
-                    .subscribe(() => this.resizeToFitContent(true));
-                this._textareaElement.addEventListener('focus', this._handleFocusEvent);
-                this._textareaElement.addEventListener('blur', this._handleFocusEvent);
-            });
-            this._isViewInited = true;
-            this.resizeToFitContent(true);
-        }
-    }
-    ngOnDestroy() {
-        this._textareaElement.removeEventListener('focus', this._handleFocusEvent);
-        this._textareaElement.removeEventListener('blur', this._handleFocusEvent);
-        this._destroyed.next();
-        this._destroyed.complete();
-    }
-    /**
-     * Cache the height of a single-row textarea if it has not already been cached.
-     *
-     * We need to know how large a single "row" of a textarea is in order to apply minRows and
-     * maxRows. For the initial version, we will assume that the height of a single line in the
-     * textarea does not ever change.
-     */
-    _cacheTextareaLineHeight() {
-        if (this._cachedLineHeight) {
-            return;
-        }
-        // Use a clone element because we have to override some styles.
-        let textareaClone = this._textareaElement.cloneNode(false);
-        textareaClone.rows = 1;
-        // Use `position: absolute` so that this doesn't cause a browser layout and use
-        // `visibility: hidden` so that nothing is rendered. Clear any other styles that
-        // would affect the height.
-        textareaClone.style.position = 'absolute';
-        textareaClone.style.visibility = 'hidden';
-        textareaClone.style.border = 'none';
-        textareaClone.style.padding = '0';
-        textareaClone.style.height = '';
-        textareaClone.style.minHeight = '';
-        textareaClone.style.maxHeight = '';
-        // In Firefox it happens that textarea elements are always bigger than the specified amount
-        // of rows. This is because Firefox tries to add extra space for the horizontal scrollbar.
-        // As a workaround that removes the extra space for the scrollbar, we can just set overflow
-        // to hidden. This ensures that there is no invalid calculation of the line height.
-        // See Firefox bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=33654
-        textareaClone.style.overflow = 'hidden';
-        this._textareaElement.parentNode.appendChild(textareaClone);
-        this._cachedLineHeight = textareaClone.clientHeight;
-        textareaClone.remove();
-        // Min and max heights have to be re-calculated if the cached line height changes
-        this._setMinHeight();
-        this._setMaxHeight();
-    }
-    _measureScrollHeight() {
-        const element = this._textareaElement;
-        const previousMargin = element.style.marginBottom || '';
-        const isFirefox = this._platform.FIREFOX;
-        const needsMarginFiller = isFirefox && this._hasFocus;
-        const measuringClass = isFirefox
-            ? 'cdk-textarea-autosize-measuring-firefox'
-            : 'cdk-textarea-autosize-measuring';
-        // In some cases the page might move around while we're measuring the `textarea` on Firefox. We
-        // work around it by assigning a temporary margin with the same height as the `textarea` so that
-        // it occupies the same amount of space. See #23233.
-        if (needsMarginFiller) {
-            element.style.marginBottom = `${element.clientHeight}px`;
-        }
-        // Reset the textarea height to auto in order to shrink back to its default size.
-        // Also temporarily force overflow:hidden, so scroll bars do not interfere with calculations.
-        element.classList.add(measuringClass);
-        // The measuring class includes a 2px padding to workaround an issue with Chrome,
-        // so we account for that extra space here by subtracting 4 (2px top + 2px bottom).
-        const scrollHeight = element.scrollHeight - 4;
-        element.classList.remove(measuringClass);
-        if (needsMarginFiller) {
-            element.style.marginBottom = previousMargin;
-        }
-        return scrollHeight;
-    }
-    _cacheTextareaPlaceholderHeight() {
-        if (!this._isViewInited || this._cachedPlaceholderHeight != undefined) {
-            return;
-        }
-        if (!this.placeholder) {
-            this._cachedPlaceholderHeight = 0;
-            return;
-        }
-        const value = this._textareaElement.value;
-        this._textareaElement.value = this._textareaElement.placeholder;
-        this._cachedPlaceholderHeight = this._measureScrollHeight();
-        this._textareaElement.value = value;
-    }
-    ngDoCheck() {
-        if (this._platform.isBrowser) {
-            this.resizeToFitContent();
-        }
-    }
-    /**
-     * Resize the textarea to fit its content.
-     * @param force Whether to force a height recalculation. By default the height will be
-     *    recalculated only if the value changed since the last call.
-     */
-    resizeToFitContent(force = false) {
-        // If autosizing is disabled, just skip everything else
-        if (!this._enabled) {
-            return;
-        }
-        this._cacheTextareaLineHeight();
-        this._cacheTextareaPlaceholderHeight();
-        // If we haven't determined the line-height yet, we know we're still hidden and there's no point
-        // in checking the height of the textarea.
-        if (!this._cachedLineHeight) {
-            return;
-        }
-        const textarea = this._elementRef.nativeElement;
-        const value = textarea.value;
-        // Only resize if the value or minRows have changed since these calculations can be expensive.
-        if (!force && this._minRows === this._previousMinRows && value === this._previousValue) {
-            return;
-        }
-        const scrollHeight = this._measureScrollHeight();
-        const height = Math.max(scrollHeight, this._cachedPlaceholderHeight || 0);
-        // Use the scrollHeight to know how large the textarea *would* be if fit its entire value.
-        textarea.style.height = `${height}px`;
-        this._ngZone.runOutsideAngular(() => {
-            if (typeof requestAnimationFrame !== 'undefined') {
-                requestAnimationFrame(() => this._scrollToCaretPosition(textarea));
-            }
-            else {
-                setTimeout(() => this._scrollToCaretPosition(textarea));
-            }
-        });
-        this._previousValue = value;
-        this._previousMinRows = this._minRows;
-    }
-    /**
-     * Resets the textarea to its original size
-     */
-    reset() {
-        // Do not try to change the textarea, if the initialHeight has not been determined yet
-        // This might potentially remove styles when reset() is called before ngAfterViewInit
-        if (this._initialHeight !== undefined) {
-            this._textareaElement.style.height = this._initialHeight;
-        }
-    }
-    _noopInputHandler() {
-        // no-op handler that ensures we're running change detection on input events.
-    }
-    /** Access injected document if available or fallback to global document reference */
-    _getDocument() {
-        return this._document || document;
-    }
-    /** Use defaultView of injected document if available or fallback to global window reference */
-    _getWindow() {
-        const doc = this._getDocument();
-        return doc.defaultView || window;
-    }
-    /**
-     * Scrolls a textarea to the caret position. On Firefox resizing the textarea will
-     * prevent it from scrolling to the caret position. We need to re-set the selection
-     * in order for it to scroll to the proper position.
-     */
-    _scrollToCaretPosition(textarea) {
-        const { selectionStart, selectionEnd } = textarea;
-        // IE will throw an "Unspecified error" if we try to set the selection range after the
-        // element has been removed from the DOM. Assert that the directive hasn't been destroyed
-        // between the time we requested the animation frame and when it was executed.
-        // Also note that we have to assert that the textarea is focused before we set the
-        // selection range. Setting the selection range on a non-focused textarea will cause
-        // it to receive focus on IE and Edge.
-        if (!this._destroyed.isStopped && this._hasFocus) {
-            textarea.setSelectionRange(selectionStart, selectionEnd);
-        }
-    }
-}
-CdkTextareaAutosize.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkTextareaAutosize, deps: [{ token: i0.ElementRef }, { token: i1.Platform }, { token: i0.NgZone }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-CdkTextareaAutosize.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: { minRows: ["cdkAutosizeMinRows", "minRows"], maxRows: ["cdkAutosizeMaxRows", "maxRows"], enabled: ["cdkTextareaAutosize", "enabled"], placeholder: "placeholder" }, host: { attributes: { "rows": "1" }, listeners: { "input": "_noopInputHandler()" }, classAttribute: "cdk-textarea-autosize" }, exportAs: ["cdkTextareaAutosize"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkTextareaAutosize, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'textarea[cdkTextareaAutosize]',
-                    exportAs: 'cdkTextareaAutosize',
-                    host: {
-                        'class': 'cdk-textarea-autosize',
-                        // Textarea elements that have the directive applied should have a single row by default.
-                        // Browsers normally show two rows by default and therefore this limits the minRows binding.
-                        'rows': '1',
-                        '(input)': '_noopInputHandler()',
-                    },
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.Platform }, { type: i0.NgZone }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }]; }, propDecorators: { minRows: [{
-                type: Input,
-                args: ['cdkAutosizeMinRows']
-            }], maxRows: [{
-                type: Input,
-                args: ['cdkAutosizeMaxRows']
-            }], enabled: [{
-                type: Input,
-                args: ['cdkTextareaAutosize']
-            }], placeholder: [{
-                type: Input
-            }] } });
-
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-class TextFieldModule {
-}
-TextFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TextFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TextFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: TextFieldModule, declarations: [CdkAutofill, CdkTextareaAutosize], exports: [CdkAutofill, CdkTextareaAutosize] });
-TextFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TextFieldModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TextFieldModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [CdkAutofill, CdkTextareaAutosize],
-                    exports: [CdkAutofill, CdkTextareaAutosize],
-                }]
-        }] });
-
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { AutofillMonitor, CdkAutofill, CdkTextareaAutosize, TextFieldModule };
-//# sourceMappingURL=text-field.mjs.map
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, inject, NgZone, RendererFactory2, Injectable, ElementRef, EventEmitter, Directive, Output, Renderer2, DOCUMENT, booleanAttribute, Input, NgModule } from '@angular/core';
+import { EMPTY, Subject } from 'rxjs';
+import { Platform } from './platform2.mjs';
+import { _CdkPrivateStyleLoader } from './style-loader.mjs';
+import { coerceElement, coerceNumberProperty } from './element.mjs';
+import { auditTime } from 'rxjs/operators';
+import '@angular/common';
+
+/** Component used to load the structural styles of the text field. */
+class _CdkTextFieldStyleLoader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: _CdkTextFieldStyleLoader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.0-next.2", type: _CdkTextFieldStyleLoader, isStandalone: true, selector: "ng-component", host: { attributes: { "cdk-text-field-style-loader": "" } }, ngImport: i0, template: '', isInline: true, 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}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: _CdkTextFieldStyleLoader, decorators: [{
+            type: Component,
+            args: [{ template: '', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'cdk-text-field-style-loader': '' }, 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}\n"] }]
+        }] });
+
+/** Options to pass to the animationstart listener. */
+const listenerOptions = { passive: true };
+/**
+ * An injectable service that can be used to monitor the autofill state of an input.
+ * Based on the following blog post:
+ * https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
+ */
+class AutofillMonitor {
+    _platform = inject(Platform);
+    _ngZone = inject(NgZone);
+    _renderer = inject(RendererFactory2).createRenderer(null, null);
+    _styleLoader = inject(_CdkPrivateStyleLoader);
+    _monitoredElements = new Map();
+    constructor() { }
+    monitor(elementOrRef) {
+        if (!this._platform.isBrowser) {
+            return EMPTY;
+        }
+        this._styleLoader.load(_CdkTextFieldStyleLoader);
+        const element = coerceElement(elementOrRef);
+        const info = this._monitoredElements.get(element);
+        if (info) {
+            return info.subject;
+        }
+        const subject = new Subject();
+        const cssClass = 'cdk-text-field-autofilled';
+        const listener = (event) => {
+            // Animation events fire on initial element render, we check for the presence of the autofill
+            // CSS class to make sure this is a real change in state, not just the initial render before
+            // we fire off events.
+            if (event.animationName === 'cdk-text-field-autofill-start' &&
+                !element.classList.contains(cssClass)) {
+                element.classList.add(cssClass);
+                this._ngZone.run(() => subject.next({ target: event.target, isAutofilled: true }));
+            }
+            else if (event.animationName === 'cdk-text-field-autofill-end' &&
+                element.classList.contains(cssClass)) {
+                element.classList.remove(cssClass);
+                this._ngZone.run(() => subject.next({ target: event.target, isAutofilled: false }));
+            }
+        };
+        const unlisten = this._ngZone.runOutsideAngular(() => {
+            element.classList.add('cdk-text-field-autofill-monitored');
+            return this._renderer.listen(element, 'animationstart', listener, listenerOptions);
+        });
+        this._monitoredElements.set(element, { subject, unlisten });
+        return subject;
+    }
+    stopMonitoring(elementOrRef) {
+        const element = coerceElement(elementOrRef);
+        const info = this._monitoredElements.get(element);
+        if (info) {
+            info.unlisten();
+            info.subject.complete();
+            element.classList.remove('cdk-text-field-autofill-monitored');
+            element.classList.remove('cdk-text-field-autofilled');
+            this._monitoredElements.delete(element);
+        }
+    }
+    ngOnDestroy() {
+        this._monitoredElements.forEach((_info, element) => this.stopMonitoring(element));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: AutofillMonitor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: AutofillMonitor, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: AutofillMonitor, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+/** A directive that can be used to monitor the autofill state of an input. */
+class CdkAutofill {
+    _elementRef = inject(ElementRef);
+    _autofillMonitor = inject(AutofillMonitor);
+    /** Emits when the autofill state of the element changes. */
+    cdkAutofill = new EventEmitter();
+    constructor() { }
+    ngOnInit() {
+        this._autofillMonitor
+            .monitor(this._elementRef)
+            .subscribe(event => this.cdkAutofill.emit(event));
+    }
+    ngOnDestroy() {
+        this._autofillMonitor.stopMonitoring(this._elementRef);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkAutofill, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: CdkAutofill, isStandalone: true, selector: "[cdkAutofill]", outputs: { cdkAutofill: "cdkAutofill" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkAutofill, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cdkAutofill]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { cdkAutofill: [{
+                type: Output
+            }] } });
+
+/** Directive to automatically resize a textarea to fit its content. */
+class CdkTextareaAutosize {
+    _elementRef = inject(ElementRef);
+    _platform = inject(Platform);
+    _ngZone = inject(NgZone);
+    _renderer = inject(Renderer2);
+    _resizeEvents = new Subject();
+    /** Keep track of the previous textarea value to avoid resizing when the value hasn't changed. */
+    _previousValue;
+    _initialHeight;
+    _destroyed = new Subject();
+    _listenerCleanups;
+    _minRows;
+    _maxRows;
+    _enabled = true;
+    /**
+     * Value of minRows as of last resize. If the minRows has decreased, the
+     * height of the textarea needs to be recomputed to reflect the new minimum. The maxHeight
+     * does not have the same problem because it does not affect the textarea's scrollHeight.
+     */
+    _previousMinRows = -1;
+    _textareaElement;
+    /** Minimum amount of rows in the textarea. */
+    get minRows() {
+        return this._minRows;
+    }
+    set minRows(value) {
+        this._minRows = coerceNumberProperty(value);
+        this._setMinHeight();
+    }
+    /** Maximum amount of rows in the textarea. */
+    get maxRows() {
+        return this._maxRows;
+    }
+    set maxRows(value) {
+        this._maxRows = coerceNumberProperty(value);
+        this._setMaxHeight();
+    }
+    /** Whether autosizing is enabled or not */
+    get enabled() {
+        return this._enabled;
+    }
+    set enabled(value) {
+        // Only act if the actual value changed. This specifically helps to not run
+        // resizeToFitContent too early (i.e. before ngAfterViewInit)
+        if (this._enabled !== value) {
+            (this._enabled = value) ? this.resizeToFitContent(true) : this.reset();
+        }
+    }
+    get placeholder() {
+        return this._textareaElement.placeholder;
+    }
+    set placeholder(value) {
+        this._cachedPlaceholderHeight = undefined;
+        if (value) {
+            this._textareaElement.setAttribute('placeholder', value);
+        }
+        else {
+            this._textareaElement.removeAttribute('placeholder');
+        }
+        this._cacheTextareaPlaceholderHeight();
+    }
+    /** Cached height of a textarea with a single row. */
+    _cachedLineHeight;
+    /** Cached height of a textarea with only the placeholder. */
+    _cachedPlaceholderHeight;
+    /** Used to reference correct document/window */
+    _document = inject(DOCUMENT);
+    _hasFocus;
+    _isViewInited = false;
+    constructor() {
+        const styleLoader = inject(_CdkPrivateStyleLoader);
+        styleLoader.load(_CdkTextFieldStyleLoader);
+        this._textareaElement = this._elementRef.nativeElement;
+    }
+    /** Sets the minimum height of the textarea as determined by minRows. */
+    _setMinHeight() {
+        const minHeight = this.minRows && this._cachedLineHeight ? `${this.minRows * this._cachedLineHeight}px` : null;
+        if (minHeight) {
+            this._textareaElement.style.minHeight = minHeight;
+        }
+    }
+    /** Sets the maximum height of the textarea as determined by maxRows. */
+    _setMaxHeight() {
+        const maxHeight = this.maxRows && this._cachedLineHeight ? `${this.maxRows * this._cachedLineHeight}px` : null;
+        if (maxHeight) {
+            this._textareaElement.style.maxHeight = maxHeight;
+        }
+    }
+    ngAfterViewInit() {
+        if (this._platform.isBrowser) {
+            // Remember the height which we started with in case autosizing is disabled
+            this._initialHeight = this._textareaElement.style.height;
+            this.resizeToFitContent();
+            this._ngZone.runOutsideAngular(() => {
+                this._listenerCleanups = [
+                    this._renderer.listen('window', 'resize', () => this._resizeEvents.next()),
+                    this._renderer.listen(this._textareaElement, 'focus', this._handleFocusEvent),
+                    this._renderer.listen(this._textareaElement, 'blur', this._handleFocusEvent),
+                ];
+                this._resizeEvents.pipe(auditTime(16)).subscribe(() => {
+                    // Clear the cached heights since the styles can change
+                    // when the window is resized (e.g. by media queries).
+                    this._cachedLineHeight = this._cachedPlaceholderHeight = undefined;
+                    this.resizeToFitContent(true);
+                });
+            });
+            this._isViewInited = true;
+            this.resizeToFitContent(true);
+        }
+    }
+    ngOnDestroy() {
+        this._listenerCleanups?.forEach(cleanup => cleanup());
+        this._resizeEvents.complete();
+        this._destroyed.next();
+        this._destroyed.complete();
+    }
+    /**
+     * Cache the height of a single-row textarea if it has not already been cached.
+     *
+     * We need to know how large a single "row" of a textarea is in order to apply minRows and
+     * maxRows. For the initial version, we will assume that the height of a single line in the
+     * textarea does not ever change.
+     */
+    _cacheTextareaLineHeight() {
+        if (this._cachedLineHeight) {
+            return;
+        }
+        // Use a clone element because we have to override some styles.
+        const textareaClone = this._textareaElement.cloneNode(false);
+        const cloneStyles = textareaClone.style;
+        textareaClone.rows = 1;
+        // Use `position: absolute` so that this doesn't cause a browser layout and use
+        // `visibility: hidden` so that nothing is rendered. Clear any other styles that
+        // would affect the height.
+        cloneStyles.position = 'absolute';
+        cloneStyles.visibility = 'hidden';
+        cloneStyles.border = 'none';
+        cloneStyles.padding = '0';
+        cloneStyles.height = '';
+        cloneStyles.minHeight = '';
+        cloneStyles.maxHeight = '';
+        // App styles might be messing with the height through the positioning properties.
+        cloneStyles.top = cloneStyles.bottom = cloneStyles.left = cloneStyles.right = 'auto';
+        // In Firefox it happens that textarea elements are always bigger than the specified amount
+        // of rows. This is because Firefox tries to add extra space for the horizontal scrollbar.
+        // As a workaround that removes the extra space for the scrollbar, we can just set overflow
+        // to hidden. This ensures that there is no invalid calculation of the line height.
+        // See Firefox bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=33654
+        cloneStyles.overflow = 'hidden';
+        this._textareaElement.parentNode.appendChild(textareaClone);
+        this._cachedLineHeight = textareaClone.clientHeight;
+        textareaClone.remove();
+        // Min and max heights have to be re-calculated if the cached line height changes
+        this._setMinHeight();
+        this._setMaxHeight();
+    }
+    _measureScrollHeight() {
+        const element = this._textareaElement;
+        const previousMargin = element.style.marginBottom || '';
+        const isFirefox = this._platform.FIREFOX;
+        const needsMarginFiller = isFirefox && this._hasFocus;
+        const measuringClass = isFirefox
+            ? 'cdk-textarea-autosize-measuring-firefox'
+            : 'cdk-textarea-autosize-measuring';
+        // In some cases the page might move around while we're measuring the `textarea` on Firefox. We
+        // work around it by assigning a temporary margin with the same height as the `textarea` so that
+        // it occupies the same amount of space. See #23233.
+        if (needsMarginFiller) {
+            element.style.marginBottom = `${element.clientHeight}px`;
+        }
+        // Reset the textarea height to auto in order to shrink back to its default size.
+        // Also temporarily force overflow:hidden, so scroll bars do not interfere with calculations.
+        element.classList.add(measuringClass);
+        // The measuring class includes a 2px padding to workaround an issue with Chrome,
+        // so we account for that extra space here by subtracting 4 (2px top + 2px bottom).
+        const scrollHeight = element.scrollHeight - 4;
+        element.classList.remove(measuringClass);
+        if (needsMarginFiller) {
+            element.style.marginBottom = previousMargin;
+        }
+        return scrollHeight;
+    }
+    _cacheTextareaPlaceholderHeight() {
+        if (!this._isViewInited || this._cachedPlaceholderHeight != undefined) {
+            return;
+        }
+        if (!this.placeholder) {
+            this._cachedPlaceholderHeight = 0;
+            return;
+        }
+        const value = this._textareaElement.value;
+        this._textareaElement.value = this._textareaElement.placeholder;
+        this._cachedPlaceholderHeight = this._measureScrollHeight();
+        this._textareaElement.value = value;
+    }
+    /** Handles `focus` and `blur` events. */
+    _handleFocusEvent = (event) => {
+        this._hasFocus = event.type === 'focus';
+    };
+    ngDoCheck() {
+        if (this._platform.isBrowser) {
+            this.resizeToFitContent();
+        }
+    }
+    /**
+     * Resize the textarea to fit its content.
+     * @param force Whether to force a height recalculation. By default the height will be
+     *    recalculated only if the value changed since the last call.
+     */
+    resizeToFitContent(force = false) {
+        // If autosizing is disabled, just skip everything else
+        if (!this._enabled) {
+            return;
+        }
+        this._cacheTextareaLineHeight();
+        this._cacheTextareaPlaceholderHeight();
+        // If we haven't determined the line-height yet, we know we're still hidden and there's no point
+        // in checking the height of the textarea.
+        if (!this._cachedLineHeight) {
+            return;
+        }
+        const textarea = this._elementRef.nativeElement;
+        const value = textarea.value;
+        // Only resize if the value or minRows have changed since these calculations can be expensive.
+        if (!force && this._minRows === this._previousMinRows && value === this._previousValue) {
+            return;
+        }
+        const scrollHeight = this._measureScrollHeight();
+        const height = Math.max(scrollHeight, this._cachedPlaceholderHeight || 0);
+        // Use the scrollHeight to know how large the textarea *would* be if fit its entire value.
+        textarea.style.height = `${height}px`;
+        this._ngZone.runOutsideAngular(() => {
+            if (typeof requestAnimationFrame !== 'undefined') {
+                requestAnimationFrame(() => this._scrollToCaretPosition(textarea));
+            }
+            else {
+                setTimeout(() => this._scrollToCaretPosition(textarea));
+            }
+        });
+        this._previousValue = value;
+        this._previousMinRows = this._minRows;
+    }
+    /**
+     * Resets the textarea to its original size
+     */
+    reset() {
+        // Do not try to change the textarea, if the initialHeight has not been determined yet
+        // This might potentially remove styles when reset() is called before ngAfterViewInit
+        if (this._initialHeight !== undefined) {
+            this._textareaElement.style.height = this._initialHeight;
+        }
+    }
+    _noopInputHandler() {
+        // no-op handler that ensures we're running change detection on input events.
+    }
+    /**
+     * Scrolls a textarea to the caret position. On Firefox resizing the textarea will
+     * prevent it from scrolling to the caret position. We need to re-set the selection
+     * in order for it to scroll to the proper position.
+     */
+    _scrollToCaretPosition(textarea) {
+        const { selectionStart, selectionEnd } = textarea;
+        // IE will throw an "Unspecified error" if we try to set the selection range after the
+        // element has been removed from the DOM. Assert that the directive hasn't been destroyed
+        // between the time we requested the animation frame and when it was executed.
+        // Also note that we have to assert that the textarea is focused before we set the
+        // selection range. Setting the selection range on a non-focused textarea will cause
+        // it to receive focus on IE and Edge.
+        if (!this._destroyed.isStopped && this._hasFocus) {
+            textarea.setSelectionRange(selectionStart, selectionEnd);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkTextareaAutosize, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.2.0-next.2", type: CdkTextareaAutosize, isStandalone: true, selector: "textarea[cdkTextareaAutosize]", inputs: { minRows: ["cdkAutosizeMinRows", "minRows"], maxRows: ["cdkAutosizeMaxRows", "maxRows"], enabled: ["cdkTextareaAutosize", "enabled", booleanAttribute], placeholder: "placeholder" }, host: { attributes: { "rows": "1" }, listeners: { "input": "_noopInputHandler()" }, classAttribute: "cdk-textarea-autosize" }, exportAs: ["cdkTextareaAutosize"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkTextareaAutosize, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'textarea[cdkTextareaAutosize]',
+                    exportAs: 'cdkTextareaAutosize',
+                    host: {
+                        'class': 'cdk-textarea-autosize',
+                        // Textarea elements that have the directive applied should have a single row by default.
+                        // Browsers normally show two rows by default and therefore this limits the minRows binding.
+                        'rows': '1',
+                        '(input)': '_noopInputHandler()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { minRows: [{
+                type: Input,
+                args: ['cdkAutosizeMinRows']
+            }], maxRows: [{
+                type: Input,
+                args: ['cdkAutosizeMaxRows']
+            }], enabled: [{
+                type: Input,
+                args: [{ alias: 'cdkTextareaAutosize', transform: booleanAttribute }]
+            }], placeholder: [{
+                type: Input
+            }] } });
+
+class TextFieldModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: TextFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.0-next.2", ngImport: i0, type: TextFieldModule, imports: [CdkAutofill, CdkTextareaAutosize], exports: [CdkAutofill, CdkTextareaAutosize] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: TextFieldModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: TextFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CdkAutofill, CdkTextareaAutosize],
+                    exports: [CdkAutofill, CdkTextareaAutosize],
+                }]
+        }] });
+
+export { AutofillMonitor, CdkAutofill, CdkTextareaAutosize, TextFieldModule };
+//# sourceMappingURL=text-field.mjs.map