[3.0] Minor fix (#2615)

* Improvement tenant setting from mobile view

* Improvement timewindow setting from mobile view

* Improvement entity-view setting from mobile view

* Update license header and license config

pom.xml

@@ -320,12 +320,15 @@
                             <exclude>docker/haproxy/**</exclude>
                             <exclude>docker/tb-node/**</exclude>
                             <exclude>ui/**</exclude>
+                            <exclude>src/browserslist</exclude>
+                            <exclude>**/*.raw</exclude>
                         </excludes>
                         <mapping>
                             <proto>JAVADOC_STYLE</proto>
                             <cql>DOUBLEDASHES_STYLE</cql>
                             <scss>JAVADOC_STYLE</scss>
                             <jsx>SLASHSTAR_STYLE</jsx>
+                            <tsx>SLASHSTAR_STYLE</tsx>
                             <conf>SCRIPT_STYLE</conf>
                             <gradle>JAVADOC_STYLE</gradle>
                         </mapping>

ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageTenantAdmins')"
@@ -28,7 +28,7 @@
           [fxShow]="!hideDelete() && !isEdit">
     {{'tenant.delete' | translate }}
   </button>
-  <div fxLayout="row">
+  <div fxLayout="row" fxLayout.xs="column">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onTenantIdCopied($event)"

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

@@ -18,11 +18,10 @@ import { Component, Inject } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Customer } from '@shared/models/customer.model';
+import { Tenant } from '@app/shared/models/tenant.model';
-import {Tenant} from '@app/shared/models/tenant.model';
+import { ActionNotificationShow } from '@app/core/notification/notification.actions';
-import {ActionNotificationShow} from '@app/core/notification/notification.actions';
+import { TranslateService } from '@ngx-translate/core';
-import {TranslateService} from '@ngx-translate/core';
+import { ContactBasedComponent } from '../../components/entity/contact-based.component';
-import {ContactBasedComponent} from '../../components/entity/contact-based.component';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 
 @Component({

ui-ngx/src/app/modules/home/pages/tenant/tenant.module.ts

@@ -17,9 +17,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '@shared/shared.module';
-import {TenantComponent} from '@modules/home/pages/tenant/tenant.component';
+import { TenantComponent } from '@modules/home/pages/tenant/tenant.component';
-import {TenantRoutingModule} from '@modules/home/pages/tenant/tenant-routing.module';
+import { TenantRoutingModule } from '@modules/home/pages/tenant/tenant-routing.module';
-import {HomeComponentsModule} from '@modules/home/components/home-components.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 import { TenantTabsComponent } from '@home/pages/tenant/tenant-tabs.component';
 
 @NgModule({

ui-ngx/src/app/modules/home/pages/tenant/tenants-table-config.resolver.ts

@@ -27,14 +27,9 @@ import {
 import { TenantService } from '@core/http/tenant.service';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';
-import {
+import { EntityType, entityTypeResources, entityTypeTranslations } from '@shared/models/entity-type.models';
-  EntityType,
-  entityTypeResources,
-  entityTypeTranslations
-} from '@shared/models/entity-type.models';
 import { TenantComponent } from '@modules/home/pages/tenant/tenant.component';
 import { EntityAction } from '@home/models/entity/entity-component.models';
-import { User } from '@shared/models/user.model';
 import { TenantTabsComponent } from '@home/pages/tenant/tenant-tabs.component';
 
 @Injectable()

ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.scss

@@ -0,0 +1,21 @@
+/**
+ * Copyright © 2016-2020 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.
+ */
+:host ::ng-deep {
+  .mat-form-field-infix {
+    width: auto;
+    min-width: 100px;
+  }
+}

ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts

@@ -30,7 +30,7 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 @Component({
   selector: 'tb-entity-autocomplete',
   templateUrl: './entity-autocomplete.component.html',
-  styleUrls: [],
+  styleUrls: ['./entity-autocomplete.component.scss'],
   providers: [{
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => EntityAutocompleteComponent),

ui-ngx/src/app/shared/components/entity/entity-type-select.component.ts

@@ -14,14 +14,14 @@
 /// limitations under the License.
 ///
 
-import {AfterViewInit, Component, forwardRef, Input, OnInit} from '@angular/core';
+import { AfterViewInit, Component, forwardRef, Input, OnInit } from '@angular/core';
-import {ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR} from '@angular/forms';
+import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
-import {Store} from '@ngrx/store';
+import { Store } from '@ngrx/store';
-import {AppState} from '@app/core/core.state';
+import { AppState } from '@app/core/core.state';
-import {TranslateService} from '@ngx-translate/core';
+import { TranslateService } from '@ngx-translate/core';
-import {AliasEntityType, EntityType, entityTypeTranslations} from '@app/shared/models/entity-type.models';
+import { AliasEntityType, EntityType, entityTypeTranslations } from '@app/shared/models/entity-type.models';
-import {EntityService} from '@core/http/entity.service';
+import { EntityService } from '@core/http/entity.service';
-import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
 @Component({
   selector: 'tb-entity-type-select',

ui-ngx/src/app/shared/components/json-form/react/json-form-ace-editor.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 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.
@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 import * as React from 'react';
 import ThingsboardBaseComponent from './json-form-base-component';
 import reactCSS from 'reactcss';

ui-ngx/src/app/shared/components/json-form/react/json-form-array.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 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.

ui-ngx/src/app/shared/components/json-form/react/json-form-base-component.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 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.

ui-ngx/src/app/shared/components/json-form/react/json-form-checkbox.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 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.

ui-ngx/src/app/shared/components/json-form/react/json-form-color.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 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.

ui-ngx/src/app/shared/components/json-form/react/json-form-css.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 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.

ui-ngx/src/app/shared/components/json-form/react/json-form-date.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 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.

ui-ngx/src/app/shared/components/json-form/react/json-form-fieldset.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 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.

ui-ngx/src/app/shared/components/json-form/react/json-form-help.tsx

@@ -1,3 +1,18 @@
+/*
+ * Copyright © 2016-2020 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 * as React from 'react';
 import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models';
 

ui-ngx/src/app/shared/components/json-form/react/json-form-html.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 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.

ui-ngx/src/app/shared/components/json-form/react/json-form-image.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 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.

ui-ngx/src/app/shared/components/json-form/react/json-form-javascript.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 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.

ui-ngx/src/app/shared/components/json-form/react/json-form-json.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 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.

ui-ngx/src/app/shared/components/json-form/react/json-form-number.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 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.

ui-ngx/src/app/shared/components/json-form/react/json-form-radios.tsx

@@ -1,3 +1,18 @@
+/*
+ * Copyright © 2016-2020 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 * as React from 'react';
 import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models';
 import FormControlLabel from '@material-ui/core/FormControlLabel';

ui-ngx/src/app/shared/components/json-form/react/json-form-rc-select.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 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.
@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 import * as React from 'react';
 import ThingsboardBaseComponent from './json-form-base-component';
 import Select, {Option} from 'rc-select';

ui-ngx/src/app/shared/components/json-form/react/json-form-react.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 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.

ui-ngx/src/app/shared/components/json-form/react/json-form-schema-form.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 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.

ui-ngx/src/app/shared/components/json-form/react/json-form-select.tsx

@@ -1,3 +1,18 @@
+/*
+ * Copyright © 2016-2020 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 * as React from 'react';
 import {
   JsonFormFieldProps,

ui-ngx/src/app/shared/components/json-form/react/json-form-text.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 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.

ui-ngx/src/app/shared/components/time/datetime-period.component.html

@@ -16,7 +16,7 @@
 
 -->
 <section fxLayout="column" fxLayoutAlign="start start">
-  <section fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="16px">
+  <section fxLayout="row" fxLayout.xs="row wrap" fxLayoutAlign="start start" fxLayoutGap="16px">
     <mat-form-field>
       <mat-placeholder translate>datetime.date-from</mat-placeholder>
       <mat-datetimepicker-toggle [for]="startDatePicker" matPrefix></mat-datetimepicker-toggle>
@@ -30,7 +30,7 @@
       <input matInput [disabled]="disabled" [(ngModel)]="startDate" [matDatetimepicker]="startTimePicker" (ngModelChange)="onStartDateChange()">
     </mat-form-field>
   </section>
-  <section fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="16px">
+  <section fxLayout="row" fxLayout.xs="row wrap" fxLayoutAlign="start start" fxLayoutGap="16px">
     <mat-form-field>
       <mat-placeholder translate>datetime.date-to</mat-placeholder>
       <mat-datetimepicker-toggle [for]="endDatePicker" matPrefix></mat-datetimepicker-toggle>

ui-ngx/src/app/shared/components/time/datetime-period.component.scss

@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import '../../../../scss/constants';
+
 :host ::ng-deep {
   .mat-form-field-wrapper {
     padding-bottom: 8px;
@@ -22,5 +24,9 @@
   }
   .mat-form-field-infix {
     width: 150px;
+
+    @media #{$mat-xs} {
+      width: 100%;
+    }
   }
 }

ui-ngx/src/app/shared/components/time/datetime.component.scss

@@ -21,6 +21,7 @@
     bottom: 8px;
   }
   .mat-form-field-infix {
-    width: 150px;
+    width: auto;
+    min-width: 100px;
   }
 }

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

@@ -14,9 +14,9 @@
 /// limitations under the License.
 ///
 
-import {Component, forwardRef, Input, OnInit} from '@angular/core';
+import { Component, forwardRef, Input, OnInit } from '@angular/core';
-import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
 @Component({
   selector: 'tb-datetime',

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

@@ -22,7 +22,7 @@
   </section>
   <section class="interval-section" fxLayout="column" fxFlex [fxShow]="advanced && (isEdit || !hideFlag)">
     <label class="tb-small interval-label" translate>{{ predefinedName }}</label>
-    <section fxLayout="row" fxLayoutAlign="start start" fxFlex fxLayoutGap="6px">
+    <section fxLayout="row wrap" fxLayoutAlign="start start" fxFlex fxLayoutGap="6px">
       <mat-form-field class="number-input">
         <mat-label translate>timeinterval.days</mat-label>
         <input matInput [disabled]="hideFlag || disabled" type="number" step="1" min="0" [(ngModel)]="days" (ngModelChange)="onTimeInputChange('days')"/>
@@ -44,7 +44,7 @@
   <section class="interval-section" fxLayout="row" fxFlex [fxShow]="!advanced && (isEdit || !hideFlag)">
     <mat-form-field fxFlex>
       <mat-label translate>{{ predefinedName }}</mat-label>
-      <mat-select matInput [disabled]="hideFlag || disabled" [(ngModel)]="intervalMs" (ngModelChange)="onIntervalMsChange()" style="min-width: 150px;">
+      <mat-select [disabled]="hideFlag || disabled" [(ngModel)]="intervalMs" (ngModelChange)="onIntervalMsChange()" style="min-width: 150px;">
         <mat-option *ngFor="let interval of intervals" [value]="interval.value">
           {{ interval.name | translate:interval.translateParams }}
         </mat-option>

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

@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import '../../../../scss/constants';
+
 :host {
   min-width: 355px;
 
@@ -37,6 +39,10 @@
     }
   }
 
+  @media #{$mat-xs} {
+    min-width: 0;
+    width: 100%;
+  }
 }
 
 :host ::ng-deep {

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

@@ -14,15 +14,8 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectorRef, Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
-import {
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-  ControlValueAccessor,
-  FormControl,
-  NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
-  Validator
-} from '@angular/forms';
-import { Timewindow } from '@shared/models/time/time.models';
 import { TimeInterval, TimeService } from '@core/services/time.service';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 

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

@@ -39,11 +39,12 @@
               <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideInterval"
                             (ngModelChange)="onHideIntervalChanged()"></mat-checkbox>
             </section>
-            <section fxLayout="column" [fxShow]="isEdit || !timewindow.hideInterval">
+            <section fxLayout="column" fxFlex [fxShow]="isEdit || !timewindow.hideInterval">
               <div formGroupName="history" class="mat-content mat-padding" style="padding-top: 8px;">
                 <mat-radio-group formControlName="historyType">
                   <mat-radio-button [value]="historyTypes.LAST_INTERVAL" color="primary">
                     <section fxLayout="column">
+                      <span translate>timewindow.last</span>
                       <tb-timeinterval
                         formControlName="timewindowMs"
                         predefinedName="timewindow.last"
@@ -80,7 +81,7 @@
           <section fxFlex fxLayout="column" [fxShow]="isEdit || !timewindow.hideAggregation">
             <mat-form-field>
               <mat-label translate>aggregation.function</mat-label>
-              <mat-select matInput formControlName="type" style="min-width: 150px;">
+              <mat-select formControlName="type" style="min-width: 150px;">
                 <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
                   {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
                 </mat-option>
@@ -138,8 +139,7 @@
           predefinedName="aggregation.group-interval">
         </tb-timeinterval>
       </div>
-      <div fxLayout="row" class="tb-panel-actions">
+      <div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
-        <span fxFlex></span>
         <button type="submit"
                 mat-raised-button
                 color="primary"

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

@@ -35,6 +35,10 @@
     margin-right: 5px;
   }
 
+  tb-timeinterval[ng-reflect-fx-show="true"] {
+    margin-bottom: -16px;
+  }
+
   .limit-slider-container {
     >:first-child {
       margin-right: 16px;

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

@@ -14,28 +14,16 @@
 /// limitations under the License.
 ///
 
+import { Component, Inject, InjectionToken, OnInit, ViewContainerRef } from '@angular/core';
 import {
-  Component,
-  Inject,
-  InjectionToken,
-  OnInit,
-  ViewChild,
-  ViewContainerRef
-} from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { MillisecondsToTimeStringPipe } from '@shared/pipe/milliseconds-to-time-string.pipe';
-import {
-  Aggregation,
   aggregationTranslations,
-  AggregationType, DAY,
+  AggregationType,
-  HistoryWindow,
+  DAY,
   HistoryWindowType,
-  IntervalWindow,
   Timewindow,
   TimewindowType
 } from '@shared/models/time/time.models';
-import { DatePipe } from '@angular/common';
+import { OverlayRef } from '@angular/cdk/overlay';
-import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';

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

@@ -23,7 +23,7 @@
 </button>
 <section *ngIf="!asButton" cdkOverlayOrigin #timewindowPanelOrigin="cdkOverlayOrigin"
          class="tb-timewindow" fxLayout="row" fxLayoutAlign="start center">
-  <button *ngIf="direction === 'left'" [disabled]="timewindowDisabled" mat-button mat-icon-button class="tb-mat-32"
+  <button *ngIf="direction === 'left'" [disabled]="timewindowDisabled" mat-icon-button class="tb-mat-32"
           type="button"
           (click)="openEditMode()"
           matTooltip="{{ 'timewindow.edit' | translate }}"
@@ -36,7 +36,7 @@
         [matTooltipPosition]="tooltipPosition">
     {{innerValue?.displayValue}}
   </span>
-  <button *ngIf="direction === 'right'" [disabled]="timewindowDisabled" mat-button mat-icon-button class="tb-mat-32"
+  <button *ngIf="direction === 'right'" [disabled]="timewindowDisabled" mat-icon-button class="tb-mat-32"
           type="button"
           (click)="openEditMode()"
           matTooltip="{{ 'timewindow.edit' | translate }}"

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

@@ -15,6 +15,7 @@
  */
 :host {
   min-width: 52px;
+  margin: 8px 0;
   section.tb-timewindow {
     min-height: 32px;
     padding: 0 6px;

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

@@ -14,32 +14,19 @@
 /// limitations under the License.
 ///
 
-import {
+import { Component, forwardRef, Inject, Input, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
-  ChangeDetectionStrategy,
-  Component,
-  forwardRef, Inject,
-  Input,
-  OnDestroy,
-  OnInit,
-  ViewChild,
-  ViewContainerRef
-} from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { MillisecondsToTimeStringPipe } from '@shared/pipe/milliseconds-to-time-string.pipe';
 import {
+  cloneSelectedTimewindow,
   HistoryWindowType,
+  initModelFromDefaultTimewindow,
   Timewindow,
-  TimewindowType,
+  TimewindowType
-  initModelFromDefaultTimewindow, cloneSelectedTimewindow
 } from '@shared/models/time/time.models';
-import { DatePipe } from '@angular/common';
+import { DatePipe, DOCUMENT } from '@angular/common';
-import {
+import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
-  Overlay,
-  CdkOverlayOrigin,
-  OverlayConfig,
-  OverlayPositionBuilder, ConnectedPosition, PositionStrategy, OverlayRef
-} from '@angular/cdk/overlay';
 import {
   TIMEWINDOW_PANEL_DATA,
   TimewindowPanelComponent,
@@ -48,7 +35,6 @@ import {
 import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
 import { MediaBreakpoints } from '@shared/models/constants';
 import { BreakpointObserver } from '@angular/cdk/layout';
-import { DOCUMENT } from '@angular/common';
 import { WINDOW } from '@core/services/window.service';
 import { TimeService } from '@core/services/time.service';
 import { TooltipPosition } from '@angular/material/tooltip';
@@ -163,14 +149,14 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
     if (this.timewindowDisabled) {
       return;
     }
-    const isGtSm = this.breakpointObserver.isMatched(MediaBreakpoints['gt-sm']);
+    const isGtXs = this.breakpointObserver.isMatched(MediaBreakpoints['gt-xs']);
     const position = this.overlay.position();
     const config = new OverlayConfig({
       panelClass: 'tb-timewindow-panel',
       backdropClass: 'cdk-overlay-transparent-backdrop',
-      hasBackdrop: isGtSm,
+      hasBackdrop: isGtXs,
     });
-    if (isGtSm) {
+    if (isGtXs) {
       config.minWidth = '417px';
       config.maxHeight = '440px';
       const panelHeight = 375;