1 | import { coerceElement, coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
|
2 | import * as i0 from '@angular/core';
|
3 | import { Injectable, EventEmitter, Directive, Output, Input, NgModule } from '@angular/core';
|
4 | import { Observable, Subject } from 'rxjs';
|
5 | import { debounceTime } from 'rxjs/operators';
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 | class 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 | }
|
18 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MutationObserverFactory, decorators: [{
|
19 | type: Injectable,
|
20 | args: [{ providedIn: 'root' }]
|
21 | }] });
|
22 |
|
23 | class ContentObserver {
|
24 | constructor(_mutationObserverFactory) {
|
25 | this._mutationObserverFactory = _mutationObserverFactory;
|
26 |
|
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 |
|
45 |
|
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 |
|
67 |
|
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 |
|
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 | }
|
91 | i0.ɵɵ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 |
|
97 |
|
98 |
|
99 | class CdkObserveContent {
|
100 | |
101 |
|
102 |
|
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 |
|
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 |
|
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 |
|
140 |
|
141 |
|
142 |
|
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 | }
|
153 | i0.ɵɵ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 | }] } });
|
168 | class 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 | }
|
173 | i0.ɵɵ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 |
|
184 |
|
185 |
|
186 | export { CdkObserveContent, ContentObserver, MutationObserverFactory, ObserversModule };
|
187 |
|