423 lines
20 KiB
JavaScript
423 lines
20 KiB
JavaScript
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
|