@fundamental-ngx/cdk 0.43.24 → 0.43.26

package/fesm2020/fundamental-ngx-cdk-utils.mjs

@@ -902,7 +902,8 @@ function hasElementRef(something) {
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 class AttributeObserver {
     /** @hidden */
-    constructor(_mutationObserverFactory) {
+    constructor(_zone, _mutationObserverFactory) {
+        this._zone = _zone;
         this._mutationObserverFactory = _mutationObserverFactory;
         /** @Hidden */
         this._observedElements = new Map();
@@ -914,14 +915,14 @@ class AttributeObserver {
     /** @Hidden */
     observe(elementOrRef) {
         const element = getNativeElement(elementOrRef);
-        return new Observable((observer) => {
+        return this._zone.runOutsideAngular(() => new Observable((observer) => {
             const stream = this._observeElement(element);
             const subscription = stream.subscribe(observer);
             return () => {
                 subscription.unsubscribe();
                 this._unobserveElement(element);
             };
-        });
+        }));
     }
     /** @Hidden */
     unobserve(element) {
@@ -929,20 +930,22 @@ class AttributeObserver {
     }
     /** @hidden */
     _observeElement(element) {
-        if (!this._observedElements.has(element)) {
-            const stream = new Subject();
-            const observer = this._mutationObserverFactory.create((mutations) => stream.next(mutations));
-            if (observer) {
-                observer.observe(element, {
-                    attributes: true
-                });
+        return this._zone.runOutsideAngular(() => {
+            if (!this._observedElements.has(element)) {
+                const stream = new Subject();
+                const observer = this._mutationObserverFactory.create((mutations) => stream.next(mutations));
+                if (observer) {
+                    observer.observe(element, {
+                        attributes: true
+                    });
+                }
+                this._observedElements.set(element, { observer, stream, count: 1 });
             }
-            this._observedElements.set(element, { observer, stream, count: 1 });
-        }
-        else {
-            this._observedElements.get(element).count++;
-        }
-        return this._observedElements.get(element).stream;
+            else {
+                this._observedElements.get(element).count++;
+            }
+            return this._observedElements.get(element).stream;
+        });
     }
     /** @Hidden */
     _unobserveElement(element) {
@@ -965,14 +968,14 @@ class AttributeObserver {
         }
     }
 }
-AttributeObserver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AttributeObserver, deps: [{ token: i1$2.MutationObserverFactory }], target: i0.ɵɵFactoryTarget.Injectable });
+AttributeObserver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AttributeObserver, deps: [{ token: i0.NgZone }, { token: i1$2.MutationObserverFactory }], target: i0.ɵɵFactoryTarget.Injectable });
 AttributeObserver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AttributeObserver, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AttributeObserver, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.MutationObserverFactory }]; } });
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$2.MutationObserverFactory }]; } });
 
 /* eslint-disable @typescript-eslint/member-ordering */
 class DeprecatedAutoCompleteDirective extends DeprecatedSelector {
@@ -3030,14 +3033,16 @@ class FocusableItemDirective {
     }
     /** Set tabbable state */
     setTabbable(state) {
-        this._tabbable = state;
-        this._renderer2.setAttribute(this.elementRef.nativeElement, 'tabindex', this._tabbable ? '0' : '-1');
-        if (state) {
-            this._enableTabbableElements();
-        }
-        else {
-            this._disableTabbableElements();
-        }
+        this._zone.runOutsideAngular(() => {
+            this._tabbable = state;
+            this._renderer2.setAttribute(this.elementRef.nativeElement, 'tabindex', this._tabbable ? '0' : '-1');
+            if (state) {
+                this._enableTabbableElements();
+            }
+            else {
+                this._disableTabbableElements();
+            }
+        });
     }
     /** @hidden */
     async _onFocusin() {