123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437 |
- import * as i0 from '@angular/core';
- import { Component, ChangeDetectionStrategy, ViewEncapsulation, inject, NgZone, RendererFactory2, Injectable, ElementRef, EventEmitter, Directive, Output, Renderer2, booleanAttribute, Input, NgModule } from '@angular/core';
- import { EMPTY, Subject } from 'rxjs';
- import { P as Platform } from './platform-DmdVEw_C.mjs';
- import { _ as _CdkPrivateStyleLoader } from './style-loader-Cu9AvjH9.mjs';
- import { _ as _bindEventWithOptions } from './backwards-compatibility-DHR38MsD.mjs';
- import { a as coerceElement, c as coerceNumberProperty } from './element-x4z00URv.mjs';
- import { DOCUMENT } from '@angular/common';
- import { auditTime } from 'rxjs/operators';
- /** Component used to load the structural styles of the text field. */
- class _CdkTextFieldStyleLoader {
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: _CdkTextFieldStyleLoader, deps: [], target: i0.ɵɵFactoryTarget.Component });
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", 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: "19.2.6", 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 _bindEventWithOptions(this._renderer, 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: "19.2.6", ngImport: i0, type: AutofillMonitor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AutofillMonitor, providedIn: 'root' });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", 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: "19.2.6", ngImport: i0, type: CdkAutofill, deps: [], target: i0.ɵɵFactoryTarget.Directive });
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: CdkAutofill, isStandalone: true, selector: "[cdkAutofill]", outputs: { cdkAutofill: "cdkAutofill" }, ngImport: i0 });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", 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;
- /** Cached scroll top of a textarea */
- _cachedScrollTop;
- /** Used to reference correct document/window */
- _document = inject(DOCUMENT, { optional: true });
- _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();
- this._cachedScrollTop = this._textareaElement.scrollTop;
- // 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);
- textarea.scrollTop = this._cachedScrollTop;
- }
- }
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CdkTextareaAutosize, deps: [], target: i0.ɵɵFactoryTarget.Directive });
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.6", 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: "19.2.6", 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: "19.2.6", ngImport: i0, type: TextFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: TextFieldModule, imports: [CdkAutofill, CdkTextareaAutosize], exports: [CdkAutofill, CdkTextareaAutosize] });
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextFieldModule });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextFieldModule, decorators: [{
- type: NgModule,
- args: [{
- imports: [CdkAutofill, CdkTextareaAutosize],
- exports: [CdkAutofill, CdkTextareaAutosize],
- }]
- }] });
- export { AutofillMonitor, CdkAutofill, CdkTextareaAutosize, TextFieldModule };
- //# sourceMappingURL=text-field.mjs.map
|