Merge pull request #12997 from vvlladd28/improvement/popover-settings/disable-close-click-outside

Disabled closing the settings panel popover on outside click

ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.ts

@@ -305,7 +305,7 @@ export class EntityVersionDiffComponent extends PageComponent implements OnInit,
       this.popoverService.hidePopover(trigger);
     } else {
       const restoreVersionPopover = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, EntityVersionRestoreComponent, 'leftTop', true, null,
+        this.viewContainerRef, EntityVersionRestoreComponent, 'leftTop', false, null,
         {
           versionName: this.versionName,
           versionId: this.versionId,

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

@@ -212,7 +212,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
       this.popoverService.hidePopover(trigger);
     } else {
       const createVersionPopover = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, EntityVersionCreateComponent, 'leftTop', true, null,
+        this.viewContainerRef, EntityVersionCreateComponent, 'leftTop', false, null,
         {
           branch: this.branch,
           entityId: this.entityId,
@@ -244,7 +244,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
       this.popoverService.hidePopover(trigger);
     } else {
       const complexCreateVersionPopover = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, ComplexVersionCreateComponent, 'leftTop', true, null,
+        this.viewContainerRef, ComplexVersionCreateComponent, 'leftTop', false, null,
         {
           branch: this.branch,
           onClose: (result: VersionCreationResult | null, branch: string | null) => {
@@ -296,7 +296,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
       this.popoverService.hidePopover(trigger);
     } else {
       const restoreVersionPopover = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, EntityVersionRestoreComponent, 'leftTop', true, null,
+        this.viewContainerRef, EntityVersionRestoreComponent, 'leftTop', false, null,
         {
           versionName: entityVersion.name,
           versionId: entityVersion.id,
@@ -323,7 +323,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
       this.popoverService.hidePopover(trigger);
     } else {
       const restoreEntitiesVersionPopover = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, ComplexVersionLoadComponent, 'leftTop', true, null,
+        this.viewContainerRef, ComplexVersionLoadComponent, 'leftTop', false, null,
         {
           versionName: entityVersion.name,
           versionId: entityVersion.id,

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings.component.ts

@@ -142,7 +142,7 @@ export class GetValueActionSettingsComponent implements OnInit, ControlValueAcce
       };
       const getValueSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
         this.viewContainerRef, GetValueActionSettingsPanelComponent,
-        ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], true, null,
+        ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], false, null,
         ctx,
         {},
         {}, {}, true);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings.component.ts

@@ -125,7 +125,7 @@ export class SetValueActionSettingsComponent implements OnInit, ControlValueAcce
       };
      const setValueSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
         this.viewContainerRef, SetValueActionSettingsPanelComponent,
-       ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], true, null,
+       ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], false, null,
         ctx,
         {},
         {}, {}, true);

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

@@ -123,7 +123,7 @@ export class WidgetActionSettingsComponent implements OnInit, ControlValueAccess
       };
       const widgetActionSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
         this.viewContainerRef, WidgetActionSettingsPanelComponent,
-        ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], true, null,
+        ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], false, null,
         ctx,
         {},
         {}, {}, true);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings.component.ts

@@ -83,7 +83,7 @@ export class AutoDateFormatSettingsComponent implements OnInit, ControlValueAcce
         defaultValues: this.defaultValues
       };
       const autoDateFormatSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, AutoDateFormatSettingsPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], true, null,
+        this.viewContainerRef, AutoDateFormatSettingsPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], false, null,
         ctx,
         {},
         {}, {}, true);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.ts

@@ -37,9 +37,10 @@ import { TbPopoverService } from '@shared/components/popover.service';
 import {
   BackgroundSettingsPanelComponent
 } from '@home/components/widget/lib/settings/common/background-settings-panel.component';
-import { Observable, of } from 'rxjs';
+import { Observable, of, pipe } from 'rxjs';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
+import { tap } from 'rxjs/operators';
 
 @Component({
   selector: 'tb-background-settings',
@@ -110,7 +111,7 @@ export class BackgroundSettingsComponent implements OnInit, ControlValueAccessor
         backgroundSettings: this.modelValue
       };
      const backgroundSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, BackgroundSettingsPanelComponent, ['left'], true, null,
+        this.viewContainerRef, BackgroundSettingsPanelComponent, ['left'], false, null,
         ctx,
         {},
         {}, {}, true);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style.component.ts

@@ -133,7 +133,7 @@ export class WidgetButtonCustomStyleComponent implements OnInit, OnChanges, Cont
       };
       const widgetButtonCustomStylePanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
         this.viewContainerRef, WidgetButtonCustomStylePanelComponent,
-        ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], true, null,
+        ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], false, null,
         ctx,
         {},
         {}, {}, true);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-toggle-custom-style.component.ts

@@ -137,7 +137,7 @@ export class WidgetButtonToggleCustomStyleComponent implements OnInit, OnChanges
       };
       const widgetButtonCustomStylePanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
         this.viewContainerRef, WidgetButtonToggleCustomStylePanelComponent,
-        ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], true, null,
+        ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], false, null,
         ctx,
         {},
         {}, {}, true);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings-button.component.ts

@@ -92,7 +92,7 @@ export class TimeSeriesChartAxisSettingsButtonComponent implements OnInit, Contr
         advanced: this.advanced
       };
       const axisSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, TimeSeriesChartAxisSettingsPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], true, null,
+        this.viewContainerRef, TimeSeriesChartAxisSettingsPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], false, null,
         ctx,
         {},
         {}, {}, true);

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

@@ -108,7 +108,7 @@ export class TimeSeriesChartThresholdSettingsComponent implements OnInit, Contro
         yAxisIds: this.yAxisIds
       };
       const thresholdSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, TimeSeriesChartThresholdSettingsPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], true, null,
+        this.viewContainerRef, TimeSeriesChartThresholdSettingsPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], false, null,
         ctx,
         {},
         {}, {}, true);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axis-row.component.ts

@@ -158,7 +158,7 @@ export class TimeSeriesChartYAxisRowComponent implements ControlValueAccessor, O
         advanced: this.advanced
       };
       const yAxisSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, TimeSeriesChartAxisSettingsPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], true, null,
+        this.viewContainerRef, TimeSeriesChartAxisSettingsPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], false, null,
         ctx,
         {},
         {}, {}, true);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.ts

@@ -126,7 +126,7 @@ export class ColorRangeSettingsComponent implements OnInit, ControlValueAccessor
         settingsComponents: this.colorSettingsComponentService.getOtherColorSettingsComponents(this)
       };
       const colorRangeSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, ColorRangePanelComponent, 'left', true, null,
+        this.viewContainerRef, ColorRangePanelComponent, 'left', false, null,
         ctx,
         {},
         {}, {}, true);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.ts

@@ -171,7 +171,7 @@ export class ColorSettingsComponent implements OnInit, ControlValueAccessor, OnD
         maxValue: this.maxValue
       };
       const colorSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, ColorSettingsPanelComponent, 'left', true, null,
+        this.viewContainerRef, ColorSettingsPanelComponent, 'left', false, null,
         ctx,
         {},
         {}, {}, true);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-select.component.ts

@@ -166,7 +166,7 @@ export class DateFormatSelectComponent implements OnInit, ControlValueAccessor {
         dateFormat: deepClone(this.modelValue)
       };
       const dateFormatSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, DateFormatSettingsPanelComponent, 'top', true, null,
+        this.viewContainerRef, DateFormatSettingsPanelComponent, 'top', false, null,
         ctx,
         {},
         {}, {}, true);
@@ -192,7 +192,7 @@ export class DateFormatSelectComponent implements OnInit, ControlValueAccessor {
           defaultAutoDateFormatSettings, this.modelValue.autoDateFormatSettings)
       };
       const autoDateFormatSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, AutoDateFormatSettingsPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], true, null,
+        this.viewContainerRef, AutoDateFormatSettingsPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], false, null,
         ctx,
         {},
         {}, {}, true);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-property-row.component.ts

@@ -175,7 +175,7 @@ export class DynamicFormPropertyRowComponent implements ControlValueAccessor, On
         property: deepClone(this.modelValue)
       };
       const dynamicFormPropertyPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, DynamicFormPropertyPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], true, null,
+        this.viewContainerRef, DynamicFormPropertyPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], false, null,
         ctx,
         {},
         {}, {}, true);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings.component.ts

@@ -110,7 +110,7 @@ export class FontSettingsComponent implements OnInit, ControlValueAccessor {
         }
       }
       const fontSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, FontSettingsPanelComponent, 'left', true, null,
+        this.viewContainerRef, FontSettingsPanelComponent, 'left', false, null,
         ctx,
         {},
         {}, {}, true);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings.component.ts

@@ -106,7 +106,7 @@ export class DataLayerColorSettingsComponent implements ControlValueAccessor {
         helpId: this.helpId
       };
       const colorSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, DataLayerColorSettingsPanelComponent, 'left', true, null,
+        this.viewContainerRef, DataLayerColorSettingsPanelComponent, 'left', false, null,
         ctx,
         {},
         {}, {}, true);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-layer-row.component.ts

@@ -184,7 +184,7 @@ export class MapLayerRowComponent implements ControlValueAccessor, OnInit {
         mapLayerSettings: deepClone(this.modelValue)
       };
       const mapLayerSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, MapLayerSettingsPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], true, null,
+        this.viewContainerRef, MapLayerSettingsPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], false, null,
         ctx,
         {},
         {}, {}, true);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-tooltip-tag-actions.component.ts

@@ -162,7 +162,7 @@ export class MapTooltipTagActionsComponent implements ControlValueAccessor, OnIn
       };
       const widgetActionSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
         this.viewContainerRef, WidgetActionSettingsPanelComponent,
-        ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], true, null,
+        ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], false, null,
         ctx,
         {},
         {}, {}, true);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-image-settings.component.ts

@@ -80,7 +80,7 @@ export class MarkerImageSettingsComponent implements ControlValueAccessor {
         markerImageSettings: this.modelValue,
       };
       const markerImageSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, MarkerImageSettingsPanelComponent, 'left', true, null,
+        this.viewContainerRef, MarkerImageSettingsPanelComponent, 'left', false, null,
         ctx,
         {},
         {}, {}, true);

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

@@ -522,7 +522,7 @@ export class JsFuncComponent implements OnInit, OnChanges, OnDestroy, ControlVal
         modules: deepClone(this.modules)
       };
       const modulesPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, JsFuncModulesComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], true, null,
+        this.viewContainerRef, JsFuncModulesComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], false, null,
         ctx,
         {},
         {}, {}, true);