Change resize events to observer (#2652)

ui-ngx/package-lock.json

@@ -1561,6 +1561,11 @@
         }
       }
     },
+    "@juggle/resize-observer": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.1.3.tgz",
+      "integrity": "sha512-y7qc6SzZBlSpx8hEDfV0S9Cx6goROX/vBhS2Ru1Q78Jp1FlCMbxp7UcAN90rLgB3X8DSMBgDFxcmoG/VfdAhFA=="
+    },
     "@mat-datetimepicker/core": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@mat-datetimepicker/core/-/core-4.1.0.tgz",

ui-ngx/package.json

@@ -28,6 +28,7 @@
     "@date-io/date-fns": "^2.6.1",
     "@flowjs/flow.js": "^2.14.0",
     "@flowjs/ngx-flow": "^0.4.3",
+    "@juggle/resize-observer": "^3.1.3",
     "@mat-datetimepicker/core": "^4.1.0",
     "@material-ui/core": "^4.9.11",
     "@material-ui/icons": "^4.9.1",

ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts

@@ -53,6 +53,7 @@ import { Widget, WidgetPosition } from '@app/shared/models/widget.models';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { SafeStyle } from '@angular/platform-browser';
 import { distinct } from 'rxjs/operators';
+import { ResizeObserver } from '@juggle/resize-observer';
 
 @Component({
   selector: 'tb-dashboard',
@@ -166,7 +167,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
 
   private optionsChangeNotificationsPaused = false;
 
-  private gridsterResizeListener = null;
+  private gridsterResize$: ResizeObserver;
 
   constructor(protected store: Store<AppState>,
               private timeService: TimeService,
@@ -225,9 +226,8 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
 
   ngOnDestroy(): void {
     super.ngOnDestroy();
-    if (this.gridsterResizeListener) {
-      // @ts-ignore
-      removeResizeListener(this.gridster.el, this.gridsterResizeListener);
+    if (this.gridsterResize$) {
+      this.gridsterResize$.disconnect();
     }
     if (this.breakpointObserverSubscription) {
       this.breakpointObserverSubscription.unsubscribe();
@@ -290,9 +290,10 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
   }
 
   ngAfterViewInit(): void {
-    this.gridsterResizeListener = this.onGridsterParentResize.bind(this);
-    // @ts-ignore
-    addResizeListener(this.gridster.el, this.gridsterResizeListener);
+    this.gridsterResize$ = new ResizeObserver(() => {
+      this.onGridsterParentResize()
+    });
+    this.gridsterResize$.observe(this.gridster.el);
   }
 
   onUpdateTimewindow(startTimeMs: number, endTimeMs: number, interval?: number, persist?: boolean): void {

ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.ts

@@ -35,6 +35,7 @@ import { CustomActionDescriptor } from '@shared/models/widget.models';
 import * as ace from 'ace-builds';
 import { CancelAnimationFrame, RafService } from '@core/services/raf.service';
 import { css_beautify, html_beautify } from 'js-beautify';
+import { ResizeObserver } from '@juggle/resize-observer';
 
 @Component({
   selector: 'tb-custom-action-pretty-resources-tabs',
@@ -64,7 +65,7 @@ export class CustomActionPrettyResourcesTabsComponent extends PageComponent impl
 
   aceEditors: ace.Ace.Editor[] = [];
   editorsResizeCafs: {[editorId: string]: CancelAnimationFrame} = {};
-  aceResizeListeners: { element: any, resizeListener: any }[] = [];
+  aceResizeObservers: ResizeObserver[] = [];
   htmlEditor: ace.Ace.Editor;
   cssEditor: ace.Ace.Editor;
   setValuesPending = false;
@@ -84,9 +85,8 @@ export class CustomActionPrettyResourcesTabsComponent extends PageComponent impl
   }
 
   ngOnDestroy(): void {
-    this.aceResizeListeners.forEach((resizeListener) => {
-      // @ts-ignore
-      removeResizeListener(resizeListener.element, resizeListener.resizeListener);
+    this.aceResizeObservers.forEach((resize$) => {
+      resize$.disconnect();
     });
   }
 
@@ -188,11 +188,11 @@ export class CustomActionPrettyResourcesTabsComponent extends PageComponent impl
     aceEditor.session.setUseWrapMode(true);
     this.aceEditors.push(aceEditor);
 
-    const resizeListener = this.onAceEditorResize.bind(this, aceEditor);
-
-    // @ts-ignore
-    addResizeListener(editorElement, resizeListener);
-    this.aceResizeListeners.push({element: editorElement, resizeListener});
+    const resize$ = new ResizeObserver(() => {
+      this.onAceEditorResize(aceEditor);
+    });
+    resize$.observe(editorElement);
+    this.aceResizeObservers.push(resize$);
     return aceEditor;
   }
 

ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.ts

@@ -58,6 +58,7 @@ import { AttributeData, AttributeScope } from '@shared/models/telemetry/telemetr
 import { forkJoin, Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { ImportExportService } from '@home/components/import-export/import-export.service';
+import { ResizeObserver } from '@juggle/resize-observer';
 
 // @dynamic
 @Component({
@@ -93,7 +94,7 @@ export class GatewayFormComponent extends PageComponent implements OnInit, OnDes
   private successfulSaved: string;
   private gatewayNameExists: string;
   private archiveFileName: string;
-  private formResizeListener: any;
+  private formResize$: ResizeObserver;
   private subscribeStorageType$: any;
   private subscribeGateway$: any;
 
@@ -116,15 +117,15 @@ export class GatewayFormComponent extends PageComponent implements OnInit, OnDes
 
     this.buildForm();
     this.ctx.updateWidgetParams();
-    this.formResizeListener = this.resize.bind(this);
-    // @ts-ignore
-    addResizeListener(this.formContainerRef.nativeElement, this.formResizeListener);
+    this.formResize$ = new ResizeObserver(() => {
+      this.resize();
+    });
+    this.formResize$.observe(this.formContainerRef.nativeElement);
   }
 
   ngOnDestroy(): void {
-    if (this.formResizeListener) {
-      // @ts-ignore
-      removeResizeListener(this.formContainerRef.nativeElement, this.formResizeListener);
+    if (this.formResize$) {
+      this.formResize$.disconnect();
     }
     this.subscribeGateway$.unsubscribe();
     this.subscribeStorageType$.unsubscribe();

ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts

@@ -33,6 +33,7 @@ import { AttributeService } from '@core/http/attribute.service';
 import { AttributeData, AttributeScope, LatestTelemetry } from '@shared/models/telemetry/telemetry.models';
 import { forkJoin, Observable } from 'rxjs';
 import { EntityId } from '@shared/models/id/entity-id';
+import { ResizeObserver } from '@juggle/resize-observer';
 
 type FieldAlignment = 'row' | 'column';
 
@@ -94,7 +95,7 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
   @Input()
   ctx: WidgetContext;
 
-  private formResizeListener: any;
+  private formResize$: ResizeObserver;
   private settings: MultipleInputWidgetSettings;
   private widgetConfig: WidgetConfig;
   private subscription: IWidgetSubscription;
@@ -135,15 +136,15 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
     this.updateDatasources();
     this.buildForm();
     this.ctx.updateWidgetParams();
-    this.formResizeListener = this.resize.bind(this);
-    // @ts-ignore
-    addResizeListener(this.formContainerRef.nativeElement, this.formResizeListener);
+    this.formResize$ = new ResizeObserver(() => {
+      this.resize();
+    });
+    this.formResize$.observe(this.formContainerRef.nativeElement);
   }
 
   ngOnDestroy(): void {
-    if (this.formResizeListener) {
-      // @ts-ignore
-      removeResizeListener(this.formContainerRef.nativeElement, this.formResizeListener);
+    if (this.formResize$) {
+      this.formResize$.disconnect();
     }
   }
 

ui-ngx/src/app/modules/home/components/widget/lib/rpc/knob.component.ts

@@ -22,9 +22,9 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { isDefined, isNumber } from '@core/utils';
 import { CanvasDigitalGauge, CanvasDigitalGaugeOptions } from '@home/components/widget/lib/canvas-digital-gauge';
-import GenericOptions = CanvasGauges.GenericOptions;
 import * as tinycolor_ from 'tinycolor2';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import GenericOptions = CanvasGauges.GenericOptions;
+import { ResizeObserver } from '@juggle/resize-observer';
 
 const tinycolor = tinycolor_;
 
@@ -103,7 +103,7 @@ export class KnobComponent extends PageComponent implements OnInit, OnDestroy {
 
   private canvasBar: CanvasDigitalGauge;
 
-  private knobResizeListener: any;
+  private knobResize$: ResizeObserver;
 
   constructor(private utils: UtilsService,
               protected store: Store<AppState>) {
@@ -126,16 +126,16 @@ export class KnobComponent extends PageComponent implements OnInit, OnDestroy {
     this.textMeasure = $(this.textMeasureRef.nativeElement);
     this.canvasBarElement = this.canvasBarElementRef.nativeElement;
 
-    this.knobResizeListener = this.resize.bind(this);
-    // @ts-ignore
-    addResizeListener(this.knobContainerRef.nativeElement, this.knobResizeListener);
+    this.knobResize$ = new ResizeObserver(() => {
+      this.resize();
+    });
+    this.knobResize$.observe(this.knobContainerRef.nativeElement);
     this.init();
   }
 
   ngOnDestroy(): void {
-    if (this.knobResizeListener) {
-      // @ts-ignore
-      removeResizeListener(this.knobContainerRef.nativeElement, this.knobResizeListener);
+    if (this.knobResize$) {
+      this.knobResize$.disconnect();
     }
   }
 

ui-ngx/src/app/modules/home/components/widget/lib/rpc/led-indicator.component.ts

@@ -25,6 +25,7 @@ import { UtilsService } from '@core/services/utils.service';
 import { IWidgetSubscription, SubscriptionInfo, WidgetSubscriptionOptions } from '@core/api/widget-api.models';
 import { DatasourceType, widgetType } from '@shared/models/widget.models';
 import { EntityType } from '@shared/models/entity-type.models';
+import { ResizeObserver } from '@juggle/resize-observer';
 import Timeout = NodeJS.Timeout;
 
 const tinycolor = tinycolor_;
@@ -93,7 +94,7 @@ export class LedIndicatorComponent extends PageComponent implements OnInit, OnDe
   private ledErrorContainer: JQuery<HTMLElement>;
   private ledError: JQuery<HTMLElement>;
 
-  private ledResizeListener: any;
+  private ledResize$: ResizeObserver;
 
   private subscriptionOptions: WidgetSubscriptionOptions = {
     callbacks: {
@@ -122,9 +123,10 @@ export class LedIndicatorComponent extends PageComponent implements OnInit, OnDe
     this.ledErrorContainer = $(this.ledErrorContainerRef.nativeElement);
     this.ledError = $(this.ledErrorRef.nativeElement);
 
-    this.ledResizeListener = this.resize.bind(this);
-    // @ts-ignore
-    addResizeListener(this.ledContainerRef.nativeElement, this.ledResizeListener);
+    this.ledResize$ = new ResizeObserver(() => {
+      this.resize();
+    });
+    this.ledResize$.observe(this.ledContainerRef.nativeElement);
     this.init();
   }
 
@@ -136,9 +138,8 @@ export class LedIndicatorComponent extends PageComponent implements OnInit, OnDe
     if (this.subscription) {
       this.ctx.subscriptionApi.removeSubscription(this.subscription.id);
     }
-    if (this.ledResizeListener) {
-      // @ts-ignore
-      removeResizeListener(this.ledContainerRef.nativeElement, this.ledResizeListener);
+    if (this.ledResize$) {
+      this.ledResize$.disconnect();
     }
   }
 

ui-ngx/src/app/modules/home/components/widget/lib/rpc/round-switch.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { WidgetContext } from '@home/models/widget-component.models';
 import { UtilsService } from '@core/services/utils.service';
@@ -24,6 +24,7 @@ import { isDefined } from '@core/utils';
 import { IWidgetSubscription, SubscriptionInfo, WidgetSubscriptionOptions } from '@core/api/widget-api.models';
 import { DatasourceType, widgetType } from '@shared/models/widget.models';
 import { EntityType } from '@shared/models/entity-type.models';
+import { ResizeObserver } from '@juggle/resize-observer';
 
 type RetrieveValueMethod = 'rpc' | 'attribute' | 'timeseries';
 
@@ -88,7 +89,7 @@ export class RoundSwitchComponent extends PageComponent implements OnInit, OnDes
   private switchErrorContainer: JQuery<HTMLElement>;
   private switchError: JQuery<HTMLElement>;
 
-  private switchResizeListener: any;
+  private switchResize$: ResizeObserver;
 
   constructor(private utils: UtilsService,
               protected store: Store<AppState>) {
@@ -110,20 +111,19 @@ export class RoundSwitchComponent extends PageComponent implements OnInit, OnDes
       this.onValue();
     });
 
-    this.switchResizeListener = this.resize.bind(this);
-    // @ts-ignore
-    addResizeListener(this.switchContainerRef.nativeElement, this.switchResizeListener);
+    this.switchResize$ = new ResizeObserver(() => {
+      this.resize();
+    });
+    this.switchResize$.observe(this.switchContainerRef.nativeElement);
     this.init();
-    // this.ctx.resize = this.resize.bind(this);
   }
 
   ngOnDestroy(): void {
     if (this.valueSubscription) {
       this.ctx.subscriptionApi.removeSubscription(this.valueSubscription.id);
     }
-    if (this.switchResizeListener) {
-      // @ts-ignore
-      removeResizeListener(this.switchContainerRef.nativeElement, this.switchResizeListener);
+    if (this.switchResize$) {
+      this.switchResize$.disconnect();
     }
   }
 

ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.ts

@@ -25,6 +25,7 @@ import { IWidgetSubscription, SubscriptionInfo, WidgetSubscriptionOptions } from
 import { DatasourceType, widgetType } from '@shared/models/widget.models';
 import { EntityType } from '@shared/models/entity-type.models';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { ResizeObserver } from '@juggle/resize-observer';
 
 const switchAspectRation = 2.7893;
 
@@ -98,7 +99,7 @@ export class SwitchComponent extends PageComponent implements OnInit, OnDestroy
   private switchErrorContainer: JQuery<HTMLElement>;
   private switchError: JQuery<HTMLElement>;
 
-  private switchResizeListener: any;
+  private switchResize$: ResizeObserver;
 
   constructor(private utils: UtilsService,
               protected store: Store<AppState>) {
@@ -118,9 +119,10 @@ export class SwitchComponent extends PageComponent implements OnInit, OnDestroy
     this.switchErrorContainer = $(this.switchErrorContainerRef.nativeElement);
     this.switchError = $(this.switchErrorRef.nativeElement);
 
-    this.switchResizeListener = this.resize.bind(this);
-    // @ts-ignore
-    addResizeListener(this.switchContainerRef.nativeElement, this.switchResizeListener);
+    this.switchResize$ = new ResizeObserver(() => {
+      this.resize();
+    })
+    this.switchResize$.observe(this.switchContainerRef.nativeElement);
     this.init();
   }
 
@@ -128,9 +130,8 @@ export class SwitchComponent extends PageComponent implements OnInit, OnDestroy
     if (this.valueSubscription) {
       this.ctx.subscriptionApi.removeSubscription(this.valueSubscription.id);
     }
-    if (this.switchResizeListener) {
-      // @ts-ignore
-      removeResizeListener(this.switchContainerRef.nativeElement, this.switchResizeListener);
+    if (this.switchResize$) {
+      this.switchResize$.disconnect();
     }
   }
 

ui-ngx/src/app/modules/home/components/widget/widget.component.ts

@@ -91,6 +91,7 @@ import { DatasourceService } from '@core/api/datasource.service';
 import { WidgetSubscription } from '@core/api/widget-subscription';
 import { EntityService } from '@core/http/entity.service';
 import { ServicesMap } from '@home/models/services.map';
+import { ResizeObserver } from '@juggle/resize-observer';
 
 @Component({
   selector: 'tb-widget',
@@ -140,7 +141,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
 
   cafs: {[cafId: string]: CancelAnimationFrame} = {};
 
-  onResizeListener = null;
+  private widgetResize$: ResizeObserver;
 
   private cssParser = new cssjs();
 
@@ -647,10 +648,8 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
   }
 
   private destroyDynamicWidgetComponent() {
-    if (this.widgetContext.$containerParent && this.onResizeListener) {
-      // @ts-ignore
-      removeResizeListener(this.widgetContext.$containerParent[0], this.onResizeListener);
-      this.onResizeListener = null;
+    if (this.widgetContext.$containerParent && this.widgetResize$) {
+      this.widgetResize$.disconnect()
     }
     if (this.dynamicWidgetComponentRef) {
       this.dynamicWidgetComponentRef.destroy();
@@ -709,9 +708,10 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
         }
       }
 
-      this.onResizeListener = this.onResize.bind(this);
-      // @ts-ignore
-      addResizeListener(this.widgetContext.$containerParent[0], this.onResizeListener);
+      this.widgetResize$ = new ResizeObserver(() => {
+        this.onResize();
+      });
+      this.widgetResize$.observe(this.widgetContext.$containerParent[0]);
   }
 
   private createSubscription(options: WidgetSubscriptionOptions, subscribe?: boolean): Observable<IWidgetSubscription> {

ui-ngx/src/app/modules/home/pages/dashboard/dashboard-toolbar.component.ts

@@ -14,8 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, OnDestroy, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
-import { PageComponent } from '@shared/components/page.component';
+import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector: 'tb-dashboard-toolbar',

ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts

@@ -46,6 +46,7 @@ import {
 } from '@home/pages/widget/save-widget-type-as-dialog.component';
 import { Subscription } from 'rxjs';
 import Timeout = NodeJS.Timeout;
+import { ResizeObserver } from '@juggle/resize-observer';
 
 // @dynamic
 @Component({
@@ -124,7 +125,7 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
   jsonSettingsEditor: ace.Ace.Editor;
   dataKeyJsonSettingsEditor: ace.Ace.Editor;
   jsEditor: ace.Ace.Editor;
-  aceResizeListeners: { element: any, resizeListener: any }[] = [];
+  aceResizeObservers: ResizeObserver[] = [];
 
   onWindowMessageListener = this.onWindowMessage.bind(this);
 
@@ -193,9 +194,8 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
 
   ngOnDestroy(): void {
     this.window.removeEventListener('message', this.onWindowMessageListener);
-    this.aceResizeListeners.forEach((resizeListener) => {
-      // @ts-ignore
-      removeResizeListener(resizeListener.element, resizeListener.resizeListener);
+    this.aceResizeObservers.forEach((resize$) => {
+      resize$.disconnect();
     });
     this.rxSubscriptions.forEach((subscription) => {
       subscription.unsubscribe();
@@ -343,11 +343,11 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
     aceEditor.session.setUseWrapMode(true);
     this.aceEditors.push(aceEditor);
 
-    const resizeListener = this.onAceEditorResize.bind(this, aceEditor);
-
-    // @ts-ignore
-    addResizeListener(editorElement, resizeListener);
-    this.aceResizeListeners.push({element: editorElement, resizeListener});
+    const resize$ = new ResizeObserver(() => {
+      this.onAceEditorResize(aceEditor);
+    });
+    resize$.observe(editorElement);
+    this.aceResizeObservers.push(resize$);
     return aceEditor;
   }
 

ui-ngx/src/app/shared/components/fab-toolbar.component.ts

@@ -29,6 +29,7 @@ import {
 } from '@angular/core';
 import { WINDOW } from '@core/services/window.service';
 import { CanColorCtor, mixinColor } from '@angular/material/core';
+import { ResizeObserver } from '@juggle/resize-observer';
 
 export declare type FabToolbarDirection = 'left' | 'right';
 
@@ -77,14 +78,14 @@ export class FabActionsDirective implements OnInit {
 })
 export class FabToolbarComponent extends MatFabToolbarMixinBase implements OnInit, OnDestroy, AfterViewInit, OnChanges {
 
+  private fabToolbarResize$: ResizeObserver;
+
   @Input()
   isOpen: boolean;
 
   @Input()
   direction: FabToolbarDirection;
 
-  fabToolbarResizeListener = this.onFabToolbarResize.bind(this);
-
   constructor(private el: ElementRef<HTMLElement>,
               @Inject(WINDOW) private window: Window) {
     super(el);
@@ -96,13 +97,14 @@ export class FabToolbarComponent extends MatFabToolbarMixinBase implements OnIni
     element.find('mat-fab-trigger').find('button')
       .prepend('<div class="mat-fab-toolbar-background"></div>');
     element.addClass(`mat-${this.direction}`);
-    // @ts-ignore
-    addResizeListener(this.el.nativeElement, this.fabToolbarResizeListener);
+    this.fabToolbarResize$ = new ResizeObserver(() => {
+      this.onFabToolbarResize();
+    });
+    this.fabToolbarResize$.observe(this.el.nativeElement);
   }
 
   ngOnDestroy(): void {
-    // @ts-ignore
-    removeResizeListener(this.el.nativeElement, this.fabToolbarResizeListener);
+    this.fabToolbarResize$.disconnect();
   }
 
   ngAfterViewInit(): void {

ui-ngx/src/app/shared/components/js-func.component.ts

@@ -15,11 +15,11 @@
 ///
 
 import {
-  ChangeDetectionStrategy,
   Component,
   ElementRef,
   forwardRef,
-  Input, OnDestroy,
+  Input,
+  OnDestroy,
   OnInit,
   ViewChild,
   ViewEncapsulation
@@ -34,6 +34,7 @@ import { UtilsService } from '@core/services/utils.service';
 import { guid, isUndefined } from '@app/core/utils';
 import { TranslateService } from '@ngx-translate/core';
 import { CancelAnimationFrame, RafService } from '@core/services/raf.service';
+import { ResizeObserver } from '@juggle/resize-observer';
 
 @Component({
   selector: 'tb-js-func',
@@ -60,7 +61,7 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor,
 
   private jsEditor: ace.Ace.Editor;
   private editorsResizeCaf: CancelAnimationFrame;
-  private editorResizeListener: any;
+  private editorResize$: ResizeObserver;
 
   toastTargetId = `jsFuncEditor-${guid()}`;
 
@@ -152,16 +153,15 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor,
       this.cleanupJsErrors();
       this.updateView();
     });
-    this.editorResizeListener = this.onAceEditorResize.bind(this);
-    // @ts-ignore
-    addResizeListener(editorElement, this.editorResizeListener);
+    this.editorResize$ = new ResizeObserver(() => {
+      this.onAceEditorResize();
+    });
+    this.editorResize$.observe(editorElement);
   }
 
   ngOnDestroy(): void {
-    if (this.editorResizeListener) {
-      const editorElement = this.javascriptEditorElmRef.nativeElement;
-      // @ts-ignore
-      removeResizeListener(editorElement, this.editorResizeListener);
+    if (this.editorResize$) {
+      this.editorResize$.disconnect();
     }
   }
 

ui-ngx/src/app/shared/components/json-content.component.ts

@@ -20,10 +20,10 @@ import {
   forwardRef,
   Input,
   OnChanges,
+  OnDestroy,
   OnInit,
-  ViewChild,
   SimpleChanges,
-  OnDestroy
+  ViewChild
 } from '@angular/core';
 import { ControlValueAccessor, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator } from '@angular/forms';
 import * as ace from 'ace-builds';
@@ -34,6 +34,7 @@ import { AppState } from '@core/core.state';
 import { ContentType, contentTypesMap } from '@shared/models/constants';
 import { CancelAnimationFrame, RafService } from '@core/services/raf.service';
 import { guid } from '@core/utils';
+import { ResizeObserver } from '@juggle/resize-observer';
 
 @Component({
   selector: 'tb-json-content',
@@ -59,7 +60,7 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid
 
   private jsonEditor: ace.Ace.Editor;
   private editorsResizeCaf: CancelAnimationFrame;
-  private editorResizeListener: any;
+  private editorResize$: ResizeObserver;
 
   toastTargetId = `jsonContentEditor-${guid()}`;
 
@@ -97,8 +98,6 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid
 
   contentValid: boolean;
 
-  validationError: string;
-
   errorShowed = false;
 
   private propagateChange = null;
@@ -135,16 +134,15 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid
       this.cleanupJsonErrors();
       this.updateView();
     });
-    this.editorResizeListener = this.onAceEditorResize.bind(this);
-    // @ts-ignore
-    addResizeListener(editorElement, this.editorResizeListener);
+    this.editorResize$ = new ResizeObserver(() => {
+      this.onAceEditorResize();
+    });
+    this.editorResize$.observe(editorElement);
   }
 
   ngOnDestroy(): void {
-    if (this.editorResizeListener) {
-      const editorElement = this.jsonEditorElmRef.nativeElement;
-      // @ts-ignore
-      removeResizeListener(editorElement, this.editorResizeListener);
+    if (this.editorResize$) {
+      this.editorResize$.disconnect();
     }
   }
 

ui-ngx/src/app/shared/components/json-object-edit.component.ts

@@ -14,16 +14,8 @@
 /// limitations under the License.
 ///
 
-import {
-  Attribute, ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  forwardRef,
-  Input, OnDestroy,
-  OnInit,
-  ViewChild
-} from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormControl, Validator, NG_VALIDATORS } from '@angular/forms';
+import { Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ControlValueAccessor, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator } from '@angular/forms';
 import * as ace from 'ace-builds';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { ActionNotificationHide, ActionNotificationShow } from '@core/notification/notification.actions';
@@ -31,6 +23,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { CancelAnimationFrame, RafService } from '@core/services/raf.service';
 import { guid } from '@core/utils';
+import { ResizeObserver } from '@juggle/resize-observer';
 
 @Component({
   selector: 'tb-json-object-edit',
@@ -56,7 +49,7 @@ export class JsonObjectEditComponent implements OnInit, ControlValueAccessor, Va
 
   private jsonEditor: ace.Ace.Editor;
   private editorsResizeCaf: CancelAnimationFrame;
-  private editorResizeListener: any;
+  private editorResize$: ResizeObserver;
 
   toastTargetId = `jsonObjectEditor-${guid()}`;
 
@@ -128,16 +121,15 @@ export class JsonObjectEditComponent implements OnInit, ControlValueAccessor, Va
       this.cleanupJsonErrors();
       this.updateView();
     });
-    this.editorResizeListener = this.onAceEditorResize.bind(this);
-    // @ts-ignore
-    addResizeListener(editorElement, this.editorResizeListener);
+    this.editorResize$ = new ResizeObserver(() => {
+      this.onAceEditorResize();
+    });
+    this.editorResize$.observe(editorElement);
   }
 
   ngOnDestroy(): void {
-    if (this.editorResizeListener) {
-      const editorElement = this.jsonEditorElmRef.nativeElement;
-      // @ts-ignore
-      removeResizeListener(editorElement, this.editorResizeListener);
+    if (this.editorResize$) {
+      this.editorResize$.disconnect();
     }
   }