Refactoring

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

@@ -77,7 +77,9 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor, OnDe
     if (this.disabledAdvancedState !== disabledAdvanced) {
       this.disabledAdvancedState = disabledAdvanced;
       this.updateIntervalValue();
-      this.boundInterval();
+      if (!this.disabledAdvancedState) {
+        this.boundInterval();
+      }
     }
   }
 

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

@@ -32,7 +32,7 @@
       <section class="tb-form-panel stroked" *ngIf="realtimeIntervalSelectionAvailable; else timezoneSelectionPanel">
         <div class="tb-flex space-between"
              [ngClass]="{'align-end': realtimeTypeSelectionAvailable, 'align-center': !realtimeTypeSelectionAvailable }">
-          <div class="tb-flex column no-flex flex-xs">
+          <div class="tb-flex-xs column">
             <div class="tb-form-panel-title">{{ 'timewindow.timewindow' | translate }}</div>
             <ng-container formGroupName="realtime" *ngIf="realtimeTypeSelectionAvailable">
               <tb-toggle-select appearance="stroked" [options]="realtimeTimewindowOptions" formControlName="realtimeType">
@@ -73,7 +73,7 @@
       <section class="tb-form-panel stroked" *ngIf="historyIntervalSelectionAvailable; else timezoneSelectionPanel">
         <div class="tb-flex space-between"
              [ngClass]="{'align-end': historyTypeSelectionAvailable, 'align-center': !historyTypeSelectionAvailable }">
-          <div class="tb-flex column no-flex flex-xs">
+          <div class="tb-flex-xs column">
             <div class="tb-form-panel-title">{{ 'timewindow.timewindow' | translate }}</div>
             <ng-container formGroupName="history" *ngIf="historyTypeSelectionAvailable">
               <tb-toggle-select appearance="stroked" [options]="historyTimewindowOptions" formControlName="historyType">
@@ -182,8 +182,8 @@
   </div>
 
   <ng-template #timezoneSelectionPanel>
-    <section class="tb-form-panel stroked tb-flex row align-center space-between">
-      <div class="tb-form-panel-title">{{ 'timezone.timezone' | translate }}</div>
+    <section class="tb-form-row space-between same-padding">
+      <div>{{ 'timezone.timezone' | translate }}</div>
       <ng-container *ngTemplateOutlet="timezoneSelection">
       </ng-container>
     </section>

ui-ngx/src/form.scss

@@ -264,18 +264,21 @@
   }
 
   .tb-flex {
-    display: flex;
     flex: 1;
-    gap: 8px;
+
     &.no-flex {
       flex: none;
-      &.flex-xs {
-        @media #{$mat-xs} {
-          width: auto;
-          flex: 1;
-        }
+    }
+
+    &-xs {
+      @media #{$mat-xs} {
+        flex: 1;
       }
     }
+  }
+  [class*="tb-flex"] {
+    display: flex;
+    gap: 8px;
     &.row {
       flex-direction: row;
     }