UNPKG

8.89 kBJavaScriptView Raw
1import { coerceElement, coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
2import * as i0 from '@angular/core';
3import { Injectable, EventEmitter, Directive, Output, Input, NgModule } from '@angular/core';
4import { Observable, Subject } from 'rxjs';
5import { debounceTime } from 'rxjs/operators';
6
7/**
8 * Factory that creates a new MutationObserver and allows us to stub it out in unit tests.
9 * @docs-private
10 */
11class MutationObserverFactory {
12 create(callback) {
13 return typeof MutationObserver === 'undefined' ? null : new MutationObserver(callback);
14 }
15 static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MutationObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
16 static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MutationObserverFactory, providedIn: 'root' }); }
17}
18i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MutationObserverFactory, decorators: [{
19 type: Injectable,
20 args: [{ providedIn: 'root' }]
21 }] });
22/** An injectable service that allows watching elements for changes to their content. */
23class ContentObserver {
24 constructor(_mutationObserverFactory) {
25 this._mutationObserverFactory = _mutationObserverFactory;
26 /** Keeps track of the existing MutationObservers so they can be reused. */
27 this._observedElements = new Map();
28 }
29 ngOnDestroy() {
30 this._observedElements.forEach((_, element) => this._cleanupObserver(element));
31 }
32 observe(elementOrRef) {
33 const element = coerceElement(elementOrRef);
34 return new Observable((observer) => {
35 const stream = this._observeElement(element);
36 const subscription = stream.subscribe(observer);
37 return () => {
38 subscription.unsubscribe();
39 this._unobserveElement(element);
40 };
41 });
42 }
43 /**
44 * Observes the given element by using the existing MutationObserver if available, or creating a
45 * new one if not.
46 */
47 _observeElement(element) {
48 if (!this._observedElements.has(element)) {
49 const stream = new Subject();
50 const observer = this._mutationObserverFactory.create(mutations => stream.next(mutations));
51 if (observer) {
52 observer.observe(element, {
53 characterData: true,
54 childList: true,
55 subtree: true,
56 });
57 }
58 this._observedElements.set(element, { observer, stream, count: 1 });
59 }
60 else {
61 this._observedElements.get(element).count++;
62 }
63 return this._observedElements.get(element).stream;
64 }
65 /**
66 * Un-observes the given element and cleans up the underlying MutationObserver if nobody else is
67 * observing this element.
68 */
69 _unobserveElement(element) {
70 if (this._observedElements.has(element)) {
71 this._observedElements.get(element).count--;
72 if (!this._observedElements.get(element).count) {
73 this._cleanupObserver(element);
74 }
75 }
76 }
77 /** Clean up the underlying MutationObserver for the specified element. */
78 _cleanupObserver(element) {
79 if (this._observedElements.has(element)) {
80 const { observer, stream } = this._observedElements.get(element);
81 if (observer) {
82 observer.disconnect();
83 }
84 stream.complete();
85 this._observedElements.delete(element);
86 }
87 }
88 static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ContentObserver, deps: [{ token: MutationObserverFactory }], target: i0.ɵɵFactoryTarget.Injectable }); }
89 static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ContentObserver, providedIn: 'root' }); }
90}
91i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ContentObserver, decorators: [{
92 type: Injectable,
93 args: [{ providedIn: 'root' }]
94 }], ctorParameters: function () { return [{ type: MutationObserverFactory }]; } });
95/**
96 * Directive that triggers a callback whenever the content of
97 * its associated element has changed.
98 */
99class CdkObserveContent {
100 /**
101 * Whether observing content is disabled. This option can be used
102 * to disconnect the underlying MutationObserver until it is needed.
103 */
104 get disabled() {
105 return this._disabled;
106 }
107 set disabled(value) {
108 this._disabled = coerceBooleanProperty(value);
109 this._disabled ? this._unsubscribe() : this._subscribe();
110 }
111 /** Debounce interval for emitting the changes. */
112 get debounce() {
113 return this._debounce;
114 }
115 set debounce(value) {
116 this._debounce = coerceNumberProperty(value);
117 this._subscribe();
118 }
119 constructor(_contentObserver, _elementRef, _ngZone) {
120 this._contentObserver = _contentObserver;
121 this._elementRef = _elementRef;
122 this._ngZone = _ngZone;
123 /** Event emitted for each change in the element's content. */
124 this.event = new EventEmitter();
125 this._disabled = false;
126 this._currentSubscription = null;
127 }
128 ngAfterContentInit() {
129 if (!this._currentSubscription && !this.disabled) {
130 this._subscribe();
131 }
132 }
133 ngOnDestroy() {
134 this._unsubscribe();
135 }
136 _subscribe() {
137 this._unsubscribe();
138 const stream = this._contentObserver.observe(this._elementRef);
139 // TODO(mmalerba): We shouldn't be emitting on this @Output() outside the zone.
140 // Consider brining it back inside the zone next time we're making breaking changes.
141 // Bringing it back inside can cause things like infinite change detection loops and changed
142 // after checked errors if people's code isn't handling it properly.
143 this._ngZone.runOutsideAngular(() => {
144 this._currentSubscription = (this.debounce ? stream.pipe(debounceTime(this.debounce)) : stream).subscribe(this.event);
145 });
146 }
147 _unsubscribe() {
148 this._currentSubscription?.unsubscribe();
149 }
150 static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkObserveContent, deps: [{ token: ContentObserver }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
151 static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: { disabled: ["cdkObserveContentDisabled", "disabled"], debounce: "debounce" }, outputs: { event: "cdkObserveContent" }, exportAs: ["cdkObserveContent"], ngImport: i0 }); }
152}
153i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkObserveContent, decorators: [{
154 type: Directive,
155 args: [{
156 selector: '[cdkObserveContent]',
157 exportAs: 'cdkObserveContent',
158 }]
159 }], ctorParameters: function () { return [{ type: ContentObserver }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { event: [{
160 type: Output,
161 args: ['cdkObserveContent']
162 }], disabled: [{
163 type: Input,
164 args: ['cdkObserveContentDisabled']
165 }], debounce: [{
166 type: Input
167 }] } });
168class ObserversModule {
169 static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ObserversModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
170 static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: ObserversModule, declarations: [CdkObserveContent], exports: [CdkObserveContent] }); }
171 static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ObserversModule, providers: [MutationObserverFactory] }); }
172}
173i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ObserversModule, decorators: [{
174 type: NgModule,
175 args: [{
176 exports: [CdkObserveContent],
177 declarations: [CdkObserveContent],
178 providers: [MutationObserverFactory],
179 }]
180 }] });
181
182/**
183 * Generated bundle index. Do not edit.
184 */
185
186export { CdkObserveContent, ContentObserver, MutationObserverFactory, ObserversModule };
187//# sourceMappingURL=observers.mjs.map