UI: Switch to native ResizeObserver.

ui-ngx/package.json

@@ -32,7 +32,6 @@
     "@flowjs/ngx-flow": "~0.6.0",
     "@geoman-io/leaflet-geoman-free": "2.14.2",
     "@iplab/ngx-color-picker": "^15.0.2",
-    "@juggle/resize-observer": "^3.4.0",
     "@mat-datetimepicker/core": "~11.0.3",
     "@material-ui/core": "4.12.3",
     "@material-ui/icons": "4.11.2",

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

@@ -87,7 +87,6 @@ import {
 import { deepClone } from '@core/utils';
 import { Filters } from '@shared/models/query/query.models';
 import { hidePageSizePixelValue } from '@shared/models/constants';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { DeleteTimeseriesPanelComponent } from '@home/components/attribute/delete-timeseries-panel.component';
 import { FormBuilder } from '@angular/forms';
 

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

@@ -150,7 +150,6 @@ import { TbPopoverService } from '@shared/components/popover.service';
 import { catchError, distinctUntilChanged, map, skip, tap } from 'rxjs/operators';
 import { LayoutFixedSize, LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models';
 import { TbPopoverComponent } from '@shared/components/popover.component';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { HasDirtyFlag } from '@core/guards/confirm-on-exit.guard';
 import {
   MoveWidgetsDialogComponent,

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

@@ -53,7 +53,6 @@ import { Widget, WidgetPosition } from '@app/shared/models/widget.models';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { SafeStyle } from '@angular/platform-browser';
 import { distinct, take } from 'rxjs/operators';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { UtilsService } from '@core/services/utils.service';
 import { WidgetComponentAction, WidgetComponentActionType } from '@home/components/widget/widget-container.component';
 import { TbPopoverComponent } from '@shared/components/popover.component';

ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts

@@ -64,7 +64,6 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { TbAnchorComponent } from '@shared/components/tb-anchor.component';
 import { isDefined, isEqual, isNotEmptyStr, isUndefined } from '@core/utils';
 import { HasUUID } from '@shared/models/id/has-uuid';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { hidePageSizePixelValue } from '@shared/models/constants';
 import { EntitiesTableAction, IEntitiesTableComponent } from '@home/models/entity/entity-table-component.models';
 import { EntityDetailsPanelComponent } from '@home/components/entity/entity-details-panel.component';

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

@@ -49,7 +49,6 @@ import { EntityId } from '@shared/models/id/entity-id';
 import { RelationsDatasource } from '../../models/datasource/relation-datasource';
 import { RelationDialogComponent, RelationDialogData } from '@home/components/relation/relation-dialog.component';
 import { hidePageSizePixelValue } from '@shared/models/constants';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { FormBuilder } from '@angular/forms';
 
 @Component({

ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts

@@ -41,7 +41,6 @@ import { EntityVersion, VersionCreationResult, VersionLoadResult } from '@shared
 import { EntitiesVersionControlService } from '@core/http/entities-version-control.service';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { hidePageSizePixelValue } from '@shared/models/constants';
 import { Direction, SortOrder } from '@shared/models/page/sort-order';
 import { BranchAutocompleteComponent } from '@shared/components/vc/branch-autocomplete.component';

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

@@ -52,7 +52,6 @@ import {
   WidgetActionDialogData
 } from '@home/components/widget/action/widget-action-dialog.component';
 import { deepClone } from '@core/utils';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { hidePageSizePixelValue } from '@shared/models/constants';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 

ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts

@@ -104,7 +104,6 @@ import {
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { entityFields } from '@shared/models/entity.models';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { hidePageSizePixelValue } from '@shared/models/constants';
 import {
   ALARM_ASSIGNEE_PANEL_DATA,

ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts

@@ -49,7 +49,6 @@ import {
 import { DataKey } from '@shared/models/widget.models';
 import { formatNumberValue, formatValue, isDefined, isDefinedAndNotNull, isNumeric } from '@core/utils';
 import { map } from 'rxjs/operators';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
 import { TbTimeSeriesChart } from '@home/components/widget/lib/chart/time-series-chart';

ui-ngx/src/app/modules/home/components/widget/lib/cards/label-card-widget.component.ts

@@ -41,7 +41,6 @@ import {
   resolveCssSize,
   textStyle
 } from '@shared/models/widget-settings.models';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
 

ui-ngx/src/app/modules/home/components/widget/lib/cards/label-value-card-widget.component.ts

@@ -40,7 +40,6 @@ import {
   resolveCssSize,
   textStyle
 } from '@shared/models/widget-settings.models';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
 import {

ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.ts

@@ -42,7 +42,6 @@ import {
 } from '@shared/models/widget-settings.models';
 import { WidgetComponent } from '@home/components/widget/widget.component';
 import { progressBarDefaultSettings, ProgressBarLayout, ProgressBarWidgetSettings } from './progress-bar-widget.models';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { Observable } from 'rxjs';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';

ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.ts

@@ -30,7 +30,6 @@ import {
 import { WidgetAction, WidgetContext } from '@home/models/widget-component.models';
 import { isDefined } from '@core/utils';
 import { backgroundStyle, ComponentStyle, overlayStyle, textStyle } from '@shared/models/widget-settings.models';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { BehaviorSubject, fromEvent, Observable, ReplaySubject, Subscription } from 'rxjs';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';

ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts

@@ -44,7 +44,6 @@ import {
 import { valueCardDefaultSettings, ValueCardLayout, ValueCardWidgetSettings } from './value-card-widget.models';
 import { WidgetComponent } from '@home/components/widget/widget.component';
 import { Observable } from 'rxjs';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
 

ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts

@@ -41,7 +41,6 @@ import {
   textStyle
 } from '@shared/models/widget-settings.models';
 import { WidgetComponent } from '@home/components/widget/widget.component';
-import { ResizeObserver } from '@juggle/resize-observer';
 import {
   valueChartCardDefaultSettings,
   ValueChartCardLayout,

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

@@ -37,7 +37,6 @@ import { WidgetContext } from '@home/models/widget-component.models';
 import { Observable } from 'rxjs';
 import { backgroundStyle, ComponentStyle, overlayStyle, textStyle } from '@shared/models/widget-settings.models';
 import { TbLatestChart } from '@home/components/widget/lib/chart/latest-chart';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
 import { WidgetComponent } from '@home/components/widget/widget.component';

ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.ts

@@ -14,7 +14,6 @@
 /// limitations under the License.
 ///
 
-import { ResizeObserver } from '@juggle/resize-observer';
 import { ECharts, echartsModule, EChartsOption } from '@home/components/widget/lib/chart/echarts-widget.models';
 import {
   LatestChartDataItem,

ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts

@@ -45,7 +45,6 @@ import {
   updateDarkMode,
   updateXAxisTimeWindow
 } from '@home/components/widget/lib/chart/time-series-chart.models';
-import { ResizeObserver } from '@juggle/resize-observer';
 import {
   calculateAxisSize,
   ECharts,

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

@@ -41,7 +41,6 @@ import {
   CountWidgetSettings
 } from '@home/components/widget/lib/count/count-widget.models';
 import { coerceBoolean } from '@shared/decorators/coercion';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { UtilsService } from '@core/services/utils.service';
 
 const layoutHeight = 36;

ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.ts

@@ -102,7 +102,6 @@ import { sortItems } from '@shared/models/page/page-link';
 import { entityFields } from '@shared/models/entity.models';
 import { DatePipe } from '@angular/common';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { hidePageSizePixelValue } from '@shared/models/constants';
 import { AggregationType } from '@shared/models/time/time.models';
 import { FormBuilder } from '@angular/forms';

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

@@ -58,7 +58,6 @@ import { AttributeData, AttributeScope } from '@shared/models/telemetry/telemetr
 import { forkJoin, Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { ImportExportService } from '@shared/import-export/import-export.service';
-import { ResizeObserver } from '@juggle/resize-observer';
 
 // @dynamic
 @Component({

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

@@ -20,7 +20,6 @@ import { AttributeService } from '@core/http/attribute.service';
 import { AttributeData, AttributeScope } from '@shared/models/telemetry/telemetry.models';
 import { WidgetContext } from '@home/models/widget-component.models';
 import { TbFlot } from '@home/components/widget/lib/flot-widget';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { IWidgetSubscription, SubscriptionInfo, WidgetSubscriptionOptions } from '@core/api/widget-api.models';
 import { UtilsService } from '@core/services/utils.service';
 import { DatasourceType, LegendConfig, LegendData, LegendPosition, widgetType } from '@shared/models/widget.models';

ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts

@@ -45,7 +45,6 @@ import {
   BatteryLevelLayout,
   BatteryLevelWidgetSettings
 } from '@home/components/widget/lib/indicator/battery-level-widget.models';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { Observable } from 'rxjs';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';

ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.ts

@@ -57,7 +57,6 @@ import {
 } from '@shared/models/widget-settings.models';
 import { WidgetComponent } from '@home/components/widget/widget.component';
 import { formatValue, isDefinedAndNotNull, isNumeric, isUndefinedOrNull } from '@core/utils';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { Element, G, Svg, SVG } from '@svgdotjs/svg.js';
 import {
   signalBarActive,

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

@@ -41,7 +41,6 @@ import {
   resolveCssSize,
   textStyle
 } from '@shared/models/widget-settings.models';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ValueType } from '@shared/models/constants';

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

@@ -25,7 +25,6 @@ import { UtilsService } from '@core/services/utils.service';
 import { Observable, Subject } from 'rxjs';
 import { MINUTE } from '@shared/models/time/time.models';
 import { isDefinedAndNotNull, mergeDeep } from '@core/utils';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { backgroundStyle, ComponentStyle, overlayStyle } from '@shared/models/widget-settings.models';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';

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

@@ -40,7 +40,6 @@ import { AttributeService } from '@core/http/attribute.service';
 import { AttributeData, AttributeScope, LatestTelemetry } from '@shared/models/telemetry/telemetry.models';
 import { forkJoin, Observable, Subject } from 'rxjs';
 import { EntityId } from '@shared/models/id/entity-id';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { takeUntil } from 'rxjs/operators';
 import {
   JsonObjectEditDialogComponent,

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

@@ -23,7 +23,6 @@ import { AppState } from '@core/core.state';
 import { isDefined, isNumber } from '@core/utils';
 import { CanvasDigitalGaugeOptions } from '@home/components/widget/lib/canvas-digital-gauge';
 import tinycolor from 'tinycolor2';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { ColorProcessor, gradientColor } from '@shared/models/widget-settings.models';
 import GenericOptions = CanvasGauges.GenericOptions;
 

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

@@ -25,7 +25,6 @@ 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 checkStatusPollingInterval = 10000;

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

@@ -73,7 +73,6 @@ import {
   PersistentFilterPanelData
 } from '@home/components/widget/lib/rpc/persistent-filter-panel.component';
 import { PersistentAddDialogComponent } from '@home/components/widget/lib/rpc/persistent-add-dialog.component';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { hidePageSizePixelValue } from '@shared/models/constants';
 import { HttpErrorResponse } from '@angular/common/http';
 

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

@@ -28,7 +28,6 @@ import {
 import { BasicActionWidgetComponent, ValueSetter } from '@home/components/widget/lib/action/action-widget.models';
 import { backgroundStyle, ComponentStyle, overlayStyle } from '@shared/models/widget-settings.models';
 import { Observable } from 'rxjs';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ValueType } from '@shared/models/constants';

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

@@ -24,7 +24,6 @@ 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';
 

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

@@ -40,7 +40,6 @@ import {
   textStyle
 } from '@shared/models/widget-settings.models';
 import { Observable } from 'rxjs';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ValueType } from '@shared/models/constants';

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

@@ -34,7 +34,6 @@ import {
   textStyle
 } from '@shared/models/widget-settings.models';
 import { Observable } from 'rxjs';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ValueType } from '@shared/models/constants';

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

@@ -25,7 +25,6 @@ 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';
 import { ThemePalette } from '@angular/material/core';
 
 const switchAspectRation = 2.7893;

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

@@ -120,6 +120,7 @@ export class ScadaSymbolWidgetComponent implements OnInit, AfterViewInit, OnDest
 
   onScadaSymbolObjectLoadingState(loading: boolean) {
     this.loadingSubject.next(loading);
+    this.cd.detectChanges();
   }
 
   onScadaSymbolObjectError(error: string) {

ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts

@@ -41,7 +41,6 @@ import { ColorProcessor, constantColor, Font } from '@shared/models/widget-setti
 import { AttributeScope } from '@shared/models/telemetry/telemetry.models';
 import { UtilsService } from '@core/services/utils.service';
 import { WidgetAction, WidgetActionType, widgetActionTypeTranslationMap } from '@shared/models/widget.models';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { catchError, map, take, takeUntil } from 'rxjs/operators';
 import { isSvgIcon, splitIconName } from '@shared/models/icon.models';
 import { MatIconRegistry } from '@angular/material/icon';

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

@@ -34,7 +34,6 @@ import { AppState } from '@core/core.state';
 import { CustomActionDescriptor } from '@shared/models/widget.models';
 import { Ace } from 'ace-builds';
 import { CancelAnimationFrame, RafService } from '@core/services/raf.service';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { CustomPrettyActionEditorCompleter } from '@home/components/widget/lib/settings/common/action/custom-action.models';
 import { Observable } from 'rxjs/internal/Observable';
 import { forkJoin, from } from 'rxjs';

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

@@ -85,7 +85,6 @@ import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { SubscriptionEntityInfo } from '@core/api/widget-api.models';
 import { DatePipe } from '@angular/common';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { hidePageSizePixelValue } from '@shared/models/constants';
 import {
   DISPLAY_COLUMNS_PANEL_DATA,

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

@@ -51,7 +51,6 @@ import {
   parseFunction,
   safeExecute
 } from '@core/utils';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { MapWidgetInterface } from '@home/components/widget/lib/maps/map-widget.interface';
 
 interface DataMap {

ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.ts

@@ -43,7 +43,6 @@ import {
   overlayStyle
 } from '@shared/models/widget-settings.models';
 import { formatValue, isDefinedAndNotNull, isNumeric } from '@core/utils';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { Path, Svg, SVG, Text } from '@svgdotjs/svg.js';
 import { DataKey } from '@shared/models/widget.models';
 import { Observable } from 'rxjs';

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

@@ -100,7 +100,6 @@ import { DashboardService } from '@core/http/dashboard.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';
 import { EntityDataService } from '@core/api/entity-data.service';
 import { TranslateService } from '@ngx-translate/core';
 import { NotificationType } from '@core/notification/notification.models';

ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts

@@ -17,7 +17,6 @@
 import { ImageResourceInfo } from '@shared/models/resource.models';
 import * as svgjs from '@svgdotjs/svg.js';
 import { Box, Element, Rect, Style, SVG, Svg, Timeline } from '@svgdotjs/svg.js';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { ViewContainerRef } from '@angular/core';
 import { forkJoin, from } from 'rxjs';
 import {

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

@@ -60,7 +60,6 @@ import {
   SaveWidgetTypeAsDialogResult
 } from '@home/pages/widget/save-widget-type-as-dialog.component';
 import { forkJoin, mergeMap, of, Subscription, throwError } from 'rxjs';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { widgetEditorCompleter } from '@home/pages/widget/widget-editor.models';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError, map, tap } from 'rxjs/operators';

ui-ngx/src/app/shared/components/button/widget-button.component.ts

@@ -36,7 +36,6 @@ import {
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { ComponentStyle, iconStyle, validateCssSize } from '@shared/models/widget-settings.models';
 import { UtilsService } from '@core/services/utils.service';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { Observable, of } from 'rxjs';
 import { WidgetContext } from '@home/models/widget-component.models';
 import { isDefinedAndNotNull, isNotEmptyStr } from '@core/utils';

ui-ngx/src/app/shared/components/css.component.ts

@@ -34,7 +34,6 @@ import { AppState } from '@core/core.state';
 import { UtilsService } from '@core/services/utils.service';
 import { TranslateService } from '@ngx-translate/core';
 import { CancelAnimationFrame, RafService } from '@core/services/raf.service';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { beautifyCss } from '@shared/models/beautify.models';
 
 @Component({

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

@@ -29,7 +29,6 @@ import {
 } from '@angular/core';
 import { WINDOW } from '@core/services/window.service';
 import { _Constructor, CanColor, mixinColor, ThemePalette } from '@angular/material/core';
-import { ResizeObserver } from '@juggle/resize-observer';
 
 export declare type FabToolbarDirection = 'left' | 'right';
 

ui-ngx/src/app/shared/components/grid/scroll-grid.component.ts

@@ -34,7 +34,6 @@ import {
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { isObject } from '@app/core/utils';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import { ResizeObserver } from '@juggle/resize-observer';
 
 export type ItemSizeFunction = (itemWidth: number) => number;
 

ui-ngx/src/app/shared/components/html.component.ts

@@ -34,7 +34,6 @@ import { AppState } from '@core/core.state';
 import { UtilsService } from '@core/services/utils.service';
 import { TranslateService } from '@ngx-translate/core';
 import { CancelAnimationFrame, RafService } from '@core/services/raf.service';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { beautifyHtml } from '@shared/models/beautify.models';
 
 @Component({

ui-ngx/src/app/shared/components/image/image-gallery.component.ts

@@ -48,7 +48,6 @@ import { AppState } from '@core/core.state';
 import { DialogService } from '@core/services/dialog.service';
 import { FormBuilder } from '@angular/forms';
 import { Direction, SortOrder } from '@shared/models/page/sort-order';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { hidePageSizePixelValue } from '@shared/models/constants';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { ActivatedRoute, QueryParamsHandling, Router } from '@angular/router';

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

@@ -36,7 +36,6 @@ 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';
 import { TbEditorCompleter } from '@shared/models/ace/completion.models';
 import { beautifyJs } from '@shared/models/beautify.models';
 import { ScriptLanguage } from '@shared/models/rule-node.models';

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

@@ -35,7 +35,6 @@ 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';
 import { getAce } from '@shared/models/ace/ace.models';
 import { beautifyJs } from '@shared/models/beautify.models';
 import { coerceBoolean } from '@shared/decorators/coercion';

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

@@ -39,7 +39,6 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { CancelAnimationFrame, RafService } from '@core/services/raf.service';
 import { guid, isDefinedAndNotNull, isObject, isUndefined } from '@core/utils';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { getAce } from '@shared/models/ace/ace.models';
 import { coerceBoolean } from '@shared/decorators/coercion';
 

ui-ngx/src/app/shared/components/markdown-editor.component.ts

@@ -28,7 +28,6 @@ import {
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Ace } from 'ace-builds';
 import { getAce } from '@shared/models/ace/ace.models';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { CancelAnimationFrame, RafService } from '@core/services/raf.service';
 

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

@@ -26,7 +26,6 @@ import {
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Ace } from 'ace-builds';
 import { CancelAnimationFrame, RafService } from '@core/services/raf.service';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { guid } from '@core/utils';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Store } from '@ngrx/store';

ui-ngx/src/app/shared/components/svg-xml.component.ts

@@ -34,7 +34,6 @@ import { AppState } from '@core/core.state';
 import { UtilsService } from '@core/services/utils.service';
 import { TranslateService } from '@ngx-translate/core';
 import { CancelAnimationFrame, RafService } from '@core/services/raf.service';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({

ui-ngx/yarn.lock

@@ -1697,11 +1697,6 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@juggle/resize-observer@^3.4.0":
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
-  integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
-
 "@leichtgewicht/ip-codec@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"