import * as i1 from '@angular/cdk/platform'; import { normalizePassiveListenerOptions } from '@angular/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 '@angular/cdk/coercion'; import { EMPTY, Subject, fromEvent } from 'rxjs'; import { auditTime, takeUntil } from 'rxjs/operators'; import { DOCUMENT } from '@angular/common'; /** 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)); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: AutofillMonitor, deps: [{ token: i1.Platform }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); } static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: AutofillMonitor, providedIn: 'root' }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", 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); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkAutofill, deps: [{ token: i0.ElementRef }, { token: AutofillMonitor }], target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: CdkAutofill, selector: "[cdkAutofill]", outputs: { cdkAutofill: "cdkAutofill" }, ngImport: i0 }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkAutofill, decorators: [{ type: Directive, args: [{ selector: '[cdkAutofill]', }] }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: AutofillMonitor }]; }, propDecorators: { cdkAutofill: [{ type: Output }] } }); /** Directive to automatically resize a textarea to fit its content. */ class CdkTextareaAutosize { /** 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(); } 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; } /** 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); } } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkTextareaAutosize, deps: [{ token: i0.ElementRef }, { token: i1.Platform }, { token: i0.NgZone }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", 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: "16.1.1", 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 }] } }); class TextFieldModule { static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: TextFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); } static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: TextFieldModule, declarations: [CdkAutofill, CdkTextareaAutosize], exports: [CdkAutofill, CdkTextareaAutosize] }); } static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: TextFieldModule }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: TextFieldModule, decorators: [{ type: NgModule, args: [{ declarations: [CdkAutofill, CdkTextareaAutosize], exports: [CdkAutofill, CdkTextareaAutosize], }] }] }); /** * Generated bundle index. Do not edit. */ export { AutofillMonitor, CdkAutofill, CdkTextareaAutosize, TextFieldModule }; //# sourceMappingURL=text-field.mjs.map