UI: Create overlay models and refactoring code

ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.ts

@@ -45,7 +45,7 @@ import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
 import { TranslateService } from '@ngx-translate/core';
 import { deepClone } from '@core/utils';
 import { fromEvent, Subscription } from 'rxjs';
-import { POSITION_MAP } from '@shared/components/popover.models';
+import { POSITION_MAP } from '@shared/models/overlay.models';
 
 export const ALARM_FILTER_CONFIG_DATA = new InjectionToken<any>('AlarmFilterConfigData');
 

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

@@ -123,7 +123,7 @@ import {
 } from '@home/components/alarm/alarm-filter-config.component';
 import { getCurrentAuthUser } from '@core/auth/auth.selectors';
 import { FormBuilder } from '@angular/forms';
-import { DEFAULT_OVERLAY_POSITIONS } from '@shared/components/popover.models';
+import { DEFAULT_OVERLAY_POSITIONS } from '@shared/models/overlay.models';
 
 interface AlarmsTableWidgetSettings extends TableWidgetSettings {
   alarmsTitle: string;

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

@@ -52,9 +52,9 @@ import {
   getPlacementName,
   popoverMotion,
   PopoverPlacement,
-  POSITION_MAP,
   PropertyMapping
 } from '@shared/components/popover.models';
+import { POSITION_MAP } from '@shared/models/overlay.models';
 import { distinctUntilChanged, take, takeUntil } from 'rxjs/operators';
 import { isNotEmptyStr, onParentScrollOrWindowResize } from '@core/utils';
 import { animate, AnimationBuilder, AnimationMetadata, style } from '@angular/animations';

ui-ngx/src/app/shared/components/popover.models.ts

@@ -15,8 +15,9 @@
 ///
 
 import { animate, AnimationTriggerMetadata, style, transition, trigger } from '@angular/animations';
-import { ConnectedOverlayPositionChange, ConnectionPositionPair } from '@angular/cdk/overlay';
+import { ConnectedOverlayPositionChange } from '@angular/cdk/overlay';
 import { TbPopoverComponent } from '@shared/components/popover.component';
+import { POSITION_MAP } from '@shared/models/overlay.models';
 
 export const popoverMotion: AnimationTriggerMetadata = trigger('popoverMotion', [
   transition('void => active', [
@@ -45,35 +46,8 @@ export const PopoverPlacements = ['top', 'topLeft', 'topRight', 'right', 'rightT
 type PopoverPlacementTuple = typeof PopoverPlacements;
 export type PopoverPlacement = PopoverPlacementTuple[number];
 
-export const POSITION_MAP: { [key: string]: ConnectionPositionPair } = {
-  top: new ConnectionPositionPair({ originX: 'center', originY: 'top' }, { overlayX: 'center', overlayY: 'bottom' }),
-  topLeft: new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' }),
-  topRight: new ConnectionPositionPair({ originX: 'end', originY: 'top' }, { overlayX: 'end', overlayY: 'bottom' }),
-  right: new ConnectionPositionPair({ originX: 'end', originY: 'center' }, { overlayX: 'start', overlayY: 'center' }),
-  rightTop: new ConnectionPositionPair({ originX: 'end', originY: 'top' }, { overlayX: 'start', overlayY: 'top' }),
-  rightBottom: new ConnectionPositionPair(
-    { originX: 'end', originY: 'bottom' },
-    { overlayX: 'start', overlayY: 'bottom' }
-  ),
-  bottom: new ConnectionPositionPair({ originX: 'center', originY: 'bottom' }, { overlayX: 'center', overlayY: 'top' }),
-  bottomLeft: new ConnectionPositionPair(
-    { originX: 'start', originY: 'bottom' },
-    { overlayX: 'start', overlayY: 'top' }
-  ),
-  bottomRight: new ConnectionPositionPair({ originX: 'end', originY: 'bottom' }, { overlayX: 'end', overlayY: 'top' }),
-  left: new ConnectionPositionPair({ originX: 'start', originY: 'center' }, { overlayX: 'end', overlayY: 'center' }),
-  leftTop: new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'end', overlayY: 'top' }),
-  leftBottom: new ConnectionPositionPair(
-    { originX: 'start', originY: 'bottom' },
-    { overlayX: 'end', overlayY: 'bottom' }
-  )
-};
-
 export const DEFAULT_POPOVER_POSITIONS = [POSITION_MAP.top, POSITION_MAP.right, POSITION_MAP.bottom, POSITION_MAP.left];
 
-export const DEFAULT_OVERLAY_POSITIONS = [POSITION_MAP.bottomLeft, POSITION_MAP.bottomRight, POSITION_MAP.topLeft,
-  POSITION_MAP.topRight, POSITION_MAP.left, POSITION_MAP.right];
-
 export function getPlacementName(position: ConnectedOverlayPositionChange): PopoverPlacement | undefined {
   for (const placement in POSITION_MAP) {
     if (

ui-ngx/src/app/shared/components/time/timewindow.component.ts

@@ -61,7 +61,7 @@ import {
   textStyle,
   TimewindowStyle
 } from '@shared/models/widget-settings.models';
-import { DEFAULT_OVERLAY_POSITIONS } from '@shared/components/popover.models';
+import { DEFAULT_OVERLAY_POSITIONS } from '@shared/models/overlay.models';
 import { fromEvent } from 'rxjs';
 
 // @dynamic

ui-ngx/src/app/shared/models/overlay.models.ts

@@ -0,0 +1,44 @@
+///
+/// Copyright © 2016-2023 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { ConnectionPositionPair } from '@angular/cdk/overlay';
+
+export const POSITION_MAP: { [key: string]: ConnectionPositionPair } = {
+  top: new ConnectionPositionPair({ originX: 'center', originY: 'top' }, { overlayX: 'center', overlayY: 'bottom' }),
+  topLeft: new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' }),
+  topRight: new ConnectionPositionPair({ originX: 'end', originY: 'top' }, { overlayX: 'end', overlayY: 'bottom' }),
+  right: new ConnectionPositionPair({ originX: 'end', originY: 'center' }, { overlayX: 'start', overlayY: 'center' }),
+  rightTop: new ConnectionPositionPair({ originX: 'end', originY: 'top' }, { overlayX: 'start', overlayY: 'top' }),
+  rightBottom: new ConnectionPositionPair(
+    { originX: 'end', originY: 'bottom' },
+    { overlayX: 'start', overlayY: 'bottom' }
+  ),
+  bottom: new ConnectionPositionPair({ originX: 'center', originY: 'bottom' }, { overlayX: 'center', overlayY: 'top' }),
+  bottomLeft: new ConnectionPositionPair(
+    { originX: 'start', originY: 'bottom' },
+    { overlayX: 'start', overlayY: 'top' }
+  ),
+  bottomRight: new ConnectionPositionPair({ originX: 'end', originY: 'bottom' }, { overlayX: 'end', overlayY: 'top' }),
+  left: new ConnectionPositionPair({ originX: 'start', originY: 'center' }, { overlayX: 'end', overlayY: 'center' }),
+  leftTop: new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'end', overlayY: 'top' }),
+  leftBottom: new ConnectionPositionPair(
+    { originX: 'start', originY: 'bottom' },
+    { overlayX: 'end', overlayY: 'bottom' }
+  )
+};
+
+export const DEFAULT_OVERLAY_POSITIONS = [POSITION_MAP.bottomLeft, POSITION_MAP.bottomRight, POSITION_MAP.topLeft,
+  POSITION_MAP.topRight, POSITION_MAP.left, POSITION_MAP.right];

ui-ngx/src/app/shared/models/public-api.ts

@@ -44,6 +44,8 @@ export * from './notification.models';
 export * from './websocket/notification-ws.models';
 export * from './websocket/websocket.models';
 export * from './oauth2.models';
+export * from './ota-package.models';
+export * from './overlay.models';
 export * from './queue.models';
 export * from './relation.models';
 export * from './resource.models';