/** * @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 */ import { Platform, normalizePassiveListenerOptions, PlatformModule } from '@angular/cdk/platform'; import { Directive, ElementRef, EventEmitter, Injectable, NgZone, Output, Input, NgModule, ɵɵdefineInjectable, ɵɵinject } from '@angular/core'; import { coerceElement, coerceBooleanProperty } from '@angular/cdk/coercion'; import { EMPTY, Subject, fromEvent } from 'rxjs'; import { auditTime, takeUntil } from 'rxjs/operators'; /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * Options to pass to the animationstart listener. * @type {?} */ var 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 */ var AutofillMonitor = /** @class */ (function () { function AutofillMonitor(_platform, _ngZone) { this._platform = _platform; this._ngZone = _ngZone; this._monitoredElements = new Map(); } /** * @param {?} elementOrRef * @return {?} */ AutofillMonitor.prototype.monitor = /** * @param {?} elementOrRef * @return {?} */ function (elementOrRef) { var _this = this; if (!this._platform.isBrowser) { return EMPTY; } /** @type {?} */ var element = coerceElement(elementOrRef); /** @type {?} */ var info = this._monitoredElements.get(element); if (info) { return info.subject.asObservable(); } /** @type {?} */ var result = new Subject(); /** @type {?} */ var cssClass = 'cdk-text-field-autofilled'; /** @type {?} */ var listener = (/** @type {?} */ (((/** * @param {?} event * @return {?} */ function (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((/** * @return {?} */ function () { return result.next({ target: (/** @type {?} */ (event.target)), isAutofilled: true }); })); } else if (event.animationName === 'cdk-text-field-autofill-end' && element.classList.contains(cssClass)) { element.classList.remove(cssClass); _this._ngZone.run((/** * @return {?} */ function () { return result.next({ target: (/** @type {?} */ (event.target)), isAutofilled: false }); })); } })))); this._ngZone.runOutsideAngular((/** * @return {?} */ function () { element.addEventListener('animationstart', listener, listenerOptions); element.classList.add('cdk-text-field-autofill-monitored'); })); this._monitoredElements.set(element, { subject: result, unlisten: (/** * @return {?} */ function () { element.removeEventListener('animationstart', listener, listenerOptions); }) }); return result.asObservable(); }; /** * @param {?} elementOrRef * @return {?} */ AutofillMonitor.prototype.stopMonitoring = /** * @param {?} elementOrRef * @return {?} */ function (elementOrRef) { /** @type {?} */ var element = coerceElement(elementOrRef); /** @type {?} */ var 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); } }; /** * @return {?} */ AutofillMonitor.prototype.ngOnDestroy = /** * @return {?} */ function () { var _this = this; this._monitoredElements.forEach((/** * @param {?} _info * @param {?} element * @return {?} */ function (_info, element) { return _this.stopMonitoring(element); })); }; AutofillMonitor.decorators = [ { type: Injectable, args: [{ providedIn: 'root' },] }, ]; /** @nocollapse */ AutofillMonitor.ctorParameters = function () { return [ { type: Platform }, { type: NgZone } ]; }; /** @nocollapse */ AutofillMonitor.ngInjectableDef = ɵɵdefineInjectable({ factory: function AutofillMonitor_Factory() { return new AutofillMonitor(ɵɵinject(Platform), ɵɵinject(NgZone)); }, token: AutofillMonitor, providedIn: "root" }); return AutofillMonitor; }()); /** * A directive that can be used to monitor the autofill state of an input. */ var CdkAutofill = /** @class */ (function () { function CdkAutofill(_elementRef, _autofillMonitor) { this._elementRef = _elementRef; this._autofillMonitor = _autofillMonitor; /** * Emits when the autofill state of the element changes. */ this.cdkAutofill = new EventEmitter(); } /** * @return {?} */ CdkAutofill.prototype.ngOnInit = /** * @return {?} */ function () { var _this = this; this._autofillMonitor .monitor(this._elementRef) .subscribe((/** * @param {?} event * @return {?} */ function (event) { return _this.cdkAutofill.emit(event); })); }; /** * @return {?} */ CdkAutofill.prototype.ngOnDestroy = /** * @return {?} */ function () { this._autofillMonitor.stopMonitoring(this._elementRef); }; CdkAutofill.decorators = [ { type: Directive, args: [{ selector: '[cdkAutofill]', },] }, ]; /** @nocollapse */ CdkAutofill.ctorParameters = function () { return [ { type: ElementRef }, { type: AutofillMonitor } ]; }; CdkAutofill.propDecorators = { cdkAutofill: [{ type: Output }] }; return CdkAutofill; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * Directive to automatically resize a textarea to fit its content. */ var CdkTextareaAutosize = /** @class */ (function () { function CdkTextareaAutosize(_elementRef, _platform, _ngZone) { 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._textareaElement = (/** @type {?} */ (this._elementRef.nativeElement)); } Object.defineProperty(CdkTextareaAutosize.prototype, "minRows", { /** Minimum amount of rows in the textarea. */ get: /** * Minimum amount of rows in the textarea. * @return {?} */ function () { return this._minRows; }, set: /** * @param {?} value * @return {?} */ function (value) { this._minRows = value; this._setMinHeight(); }, enumerable: true, configurable: true }); Object.defineProperty(CdkTextareaAutosize.prototype, "maxRows", { /** Maximum amount of rows in the textarea. */ get: /** * Maximum amount of rows in the textarea. * @return {?} */ function () { return this._maxRows; }, set: /** * @param {?} value * @return {?} */ function (value) { this._maxRows = value; this._setMaxHeight(); }, enumerable: true, configurable: true }); Object.defineProperty(CdkTextareaAutosize.prototype, "enabled", { /** Whether autosizing is enabled or not */ get: /** * Whether autosizing is enabled or not * @return {?} */ function () { return this._enabled; }, set: /** * @param {?} value * @return {?} */ function (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(); } }, enumerable: true, configurable: true }); /** Sets the minimum height of the textarea as determined by minRows. */ /** * Sets the minimum height of the textarea as determined by minRows. * @return {?} */ CdkTextareaAutosize.prototype._setMinHeight = /** * Sets the minimum height of the textarea as determined by minRows. * @return {?} */ function () { /** @type {?} */ var 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. */ /** * Sets the maximum height of the textarea as determined by maxRows. * @return {?} */ CdkTextareaAutosize.prototype._setMaxHeight = /** * Sets the maximum height of the textarea as determined by maxRows. * @return {?} */ function () { /** @type {?} */ var maxHeight = this.maxRows && this._cachedLineHeight ? this.maxRows * this._cachedLineHeight + "px" : null; if (maxHeight) { this._textareaElement.style.maxHeight = maxHeight; } }; /** * @return {?} */ CdkTextareaAutosize.prototype.ngAfterViewInit = /** * @return {?} */ function () { var _this = this; 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((/** * @return {?} */ function () { fromEvent(window, 'resize') .pipe(auditTime(16), takeUntil(_this._destroyed)) .subscribe((/** * @return {?} */ function () { return _this.resizeToFitContent(true); })); })); } }; /** * @return {?} */ CdkTextareaAutosize.prototype.ngOnDestroy = /** * @return {?} */ function () { 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. */ /** * 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. * @private * @return {?} */ CdkTextareaAutosize.prototype._cacheTextareaLineHeight = /** * 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. * @private * @return {?} */ function () { if (this._cachedLineHeight) { return; } // Use a clone element because we have to override some styles. /** @type {?} */ var textareaClone = (/** @type {?} */ (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'; (/** @type {?} */ (this._textareaElement.parentNode)).appendChild(textareaClone); this._cachedLineHeight = textareaClone.clientHeight; (/** @type {?} */ (this._textareaElement.parentNode)).removeChild(textareaClone); // Min and max heights have to be re-calculated if the cached line height changes this._setMinHeight(); this._setMaxHeight(); }; /** * @return {?} */ CdkTextareaAutosize.prototype.ngDoCheck = /** * @return {?} */ function () { 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. */ /** * 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. * @return {?} */ CdkTextareaAutosize.prototype.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. * @return {?} */ function (force) { var _this = this; if (force === void 0) { force = false; } // If autosizing is disabled, just skip everything else if (!this._enabled) { return; } this._cacheTextareaLineHeight(); // 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; } /** @type {?} */ var textarea = (/** @type {?} */ (this._elementRef.nativeElement)); /** @type {?} */ var 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; } /** @type {?} */ var placeholderText = textarea.placeholder; // 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. // Long placeholders that are wider than the textarea width may lead to a bigger scrollHeight // value. To ensure that the scrollHeight is not bigger than the content, the placeholders // need to be removed temporarily. textarea.classList.add('cdk-textarea-autosize-measuring'); textarea.placeholder = ''; // The cdk-textarea-autosize-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). /** @type {?} */ var height = textarea.scrollHeight - 4; // Use the scrollHeight to know how large the textarea *would* be if fit its entire value. textarea.style.height = height + "px"; textarea.classList.remove('cdk-textarea-autosize-measuring'); textarea.placeholder = placeholderText; this._ngZone.runOutsideAngular((/** * @return {?} */ function () { if (typeof requestAnimationFrame !== 'undefined') { requestAnimationFrame((/** * @return {?} */ function () { return _this._scrollToCaretPosition(textarea); })); } else { setTimeout((/** * @return {?} */ function () { return _this._scrollToCaretPosition(textarea); })); } })); this._previousValue = value; this._previousMinRows = this._minRows; }; /** * Resets the textarea to its original size */ /** * Resets the textarea to its original size * @return {?} */ CdkTextareaAutosize.prototype.reset = /** * Resets the textarea to its original size * @return {?} */ function () { // 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) { return; } this._textareaElement.style.height = this._initialHeight; }; /** * @return {?} */ CdkTextareaAutosize.prototype._noopInputHandler = /** * @return {?} */ function () { // 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. */ /** * 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. * @private * @param {?} textarea * @return {?} */ CdkTextareaAutosize.prototype._scrollToCaretPosition = /** * 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. * @private * @param {?} textarea * @return {?} */ function (textarea) { var selectionStart = textarea.selectionStart, selectionEnd = textarea.selectionEnd; // 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 && document.activeElement === textarea) { textarea.setSelectionRange(selectionStart, selectionEnd); } }; 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()', }, },] }, ]; /** @nocollapse */ CdkTextareaAutosize.ctorParameters = function () { return [ { type: ElementRef }, { type: Platform }, { type: NgZone } ]; }; CdkTextareaAutosize.propDecorators = { minRows: [{ type: Input, args: ['cdkAutosizeMinRows',] }], maxRows: [{ type: Input, args: ['cdkAutosizeMaxRows',] }], enabled: [{ type: Input, args: ['cdkTextareaAutosize',] }] }; return CdkTextareaAutosize; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var TextFieldModule = /** @class */ (function () { function TextFieldModule() { } TextFieldModule.decorators = [ { type: NgModule, args: [{ declarations: [CdkAutofill, CdkTextareaAutosize], imports: [PlatformModule], exports: [CdkAutofill, CdkTextareaAutosize], },] }, ]; return TextFieldModule; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ export { AutofillMonitor, CdkAutofill, CdkTextareaAutosize, TextFieldModule }; //# sourceMappingURL=text-field.es5.js.map