UI: Datasources and Alias filter style improvements

ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html

@@ -28,9 +28,9 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div mat-dialog-content>
-    <fieldset class="tb-form-panel no-padding no-border no-gap" [disabled]="isLoading$ | async">
-      <div class="tb-form-row column-xs align-start no-border no-gap no-padding tb-standard-fields">
-        <mat-form-field class="flex">
+    <fieldset class="tb-form-panel outlined" [disabled]="isLoading$ | async">
+      <div class="flex flex-row items-start xs:flex-col xs:items-stretch">
+        <mat-form-field class="flex-1" appearance="outline">
           <mat-label translate>alias.name</mat-label>
           <input matInput formControlName="alias" required>
           <mat-error *ngIf="entityAliasFormGroup.get('alias').hasError('required')">

ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.scss

@@ -19,7 +19,7 @@
   .tb-resolve-multiple-switch {
     padding: 18px 0 0 18px;
     @media #{$mat-xs} {
-      padding: 0 0 18px 0;
+      padding: 0 0 22px 0;
     }
   }
 }

ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html

@@ -38,14 +38,14 @@
         <span style="min-width: 80px;"></span>
       </div>
     </div>
-    <fieldset [disabled]="isLoading$ | async">
+    <fieldset [disabled]="isLoading$ | async" class="tb-form-panel outlined">
       <mat-divider></mat-divider>
       <div class="flex flex-1 flex-row items-center justify-start"
            formArrayName="entityAliases"
            *ngFor="let entityAliasControl of entityAliasesFormArray().controls; let $index = index">
         <span class="max-w-5% flex-full">{{$index + 1}}.</span>
         <div class="mat-elevation-z4 tb-alias flex max-w-95% flex-full flex-row items-center justify-start">
-          <mat-form-field class="mat-block flex-1 gt-sm:min-w-52 gt-sm:max-w-52 gt-sm:basis-52" style="padding-top: 20px;">
+          <mat-form-field class="mat-block flex-1 gt-sm:min-w-52 gt-sm:max-w-52 gt-sm:basis-52" style="padding-top: 20px;" appearance="outline">
             <input matInput [formControl]="entityAliasControl.get('alias')" required placeholder="{{ 'entity.alias' | translate }}">
             <mat-error *ngIf="entityAliasControl.get('alias').hasError('required')">
               {{ 'entity.alias-required' | translate }}

ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html

@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div [formGroup]="entityFilterFormGroup" class="tb-entity-filter flex flex-col">
-  <mat-form-field class="mat-block">
+<div [formGroup]="entityFilterFormGroup" class="tb-entity-filter">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>alias.filter-type</mat-label>
     <mat-select required formControlName="type">
       <mat-option *ngFor="let type of aliasFilterTypes" [value]="type">
@@ -30,18 +30,21 @@
   <section class="flex flex-col" [formGroup]="filterFormGroup" [ngSwitch]="entityFilterFormGroup.get('type').value">
     <ng-template [ngSwitchCase]="aliasFilterType.singleEntity">
       <tb-entity-select required
+                        appearance="outline"
                         useAliasEntityTypes="true"
                         formControlName="singleEntity">
       </tb-entity-select>
     </ng-template>
     <ng-template [ngSwitchCase]="aliasFilterType.entityList">
       <tb-entity-type-select required
+                             appearance="outline"
                              showLabel
                              useAliasEntityTypes="true"
                              [allowedEntityTypes]="listEntityTypes"
                              formControlName="entityType">
       </tb-entity-type-select>
       <tb-entity-list required
+                      appearance="outline"
                       labelText="{{'entity.entity-list' | translate}}"
                       [entityType]="filterFormGroup.get('entityType').value"
                       formControlName="entityList">
@@ -49,12 +52,13 @@
     </ng-template>
     <ng-template [ngSwitchCase]="aliasFilterType.entityName">
       <tb-entity-type-select required
+                             appearance="outline"
                              showLabel
                              useAliasEntityTypes="true"
                              [allowedEntityTypes]="listEntityTypes"
                              formControlName="entityType">
       </tb-entity-type-select>
-      <mat-form-field class="mat-block">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>entity.name-starts-with</mat-label>
         <mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
                   matTooltip="{{'entity.help-text' | translate }}">help</mat-icon>
@@ -66,6 +70,7 @@
     </ng-template>
     <ng-template [ngSwitchCase]="aliasFilterType.entityType">
       <tb-entity-type-select required
+                             appearance="outline"
                              showLabel
                              useAliasEntityTypes="true"
                              [allowedEntityTypes]="listEntityTypes"
@@ -73,14 +78,14 @@
       </tb-entity-type-select>
     </ng-template>
     <ng-template [ngSwitchCase]="aliasFilterType.stateEntity">
-      <mat-form-field floatLabel="always" class="mat-block">
+      <mat-form-field floatLabel="always" class="mat-block" appearance="outline">
         <mat-label translate>alias.state-entity-parameter-name</mat-label>
         <input matInput formControlName="stateEntityParamName"
                placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
       </mat-form-field>
-      <div class="flex flex-col">
-        <label class="tb-small">{{ 'alias.default-state-entity' | translate }}</label>
-        <tb-entity-select class="flex-1"
+      <div class="tb-form-panel stroked no-padding-bottom">
+        <div class="tb-form-panel-title tb-normal">{{ 'alias.default-state-entity' | translate }}</div>
+        <tb-entity-select appearance="outline"
                           useAliasEntityTypes="true"
                           formControlName="defaultStateEntity">
         </tb-entity-select>
@@ -88,10 +93,13 @@
     </ng-template>
     <ng-template [ngSwitchCase]="aliasFilterType.assetType">
       <tb-entity-subtype-list required
+                              floatLabel="always"
+                              appearance="outline"
+                              label="{{ 'asset.asset-types' | translate }}"
                               [entityType]="entityType.ASSET"
                               formControlName="assetTypes">
       </tb-entity-subtype-list>
-      <mat-form-field class="mat-block">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>asset.name-starts-with</mat-label>
         <mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
                   matTooltip="{{'asset.help-text' | translate }}">help</mat-icon>
@@ -100,10 +108,13 @@
     </ng-template>
     <ng-template [ngSwitchCase]="aliasFilterType.deviceType">
       <tb-entity-subtype-list required
+                              floatLabel="always"
+                              appearance="outline"
+                              label="{{ 'device.device-types' | translate }}"
                               [entityType]="entityType.DEVICE"
                               formControlName="deviceTypes">
       </tb-entity-subtype-list>
-      <mat-form-field class="mat-block">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>device.name-starts-with</mat-label>
         <mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
                   matTooltip="{{'device.help-text' | translate }}">help</mat-icon>
@@ -112,10 +123,13 @@
     </ng-template>
     <ng-template [ngSwitchCase]="aliasFilterType.entityViewType">
       <tb-entity-subtype-list required
+                              floatLabel="always"
+                              appearance="outline"
+                              label="{{ 'entity-view.entity-view-types' | translate }}"
                               [entityType]="entityType.ENTITY_VIEW"
                               formControlName="entityViewTypes">
       </tb-entity-subtype-list>
-      <mat-form-field class="mat-block">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>entity-view.name-starts-with</mat-label>
         <mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
                   matTooltip="{{'entity-view.help-text' | translate }}">help</mat-icon>
@@ -124,36 +138,51 @@
     </ng-template>
     <ng-template [ngSwitchCase]="aliasFilterType.edgeType">
       <tb-entity-subtype-list required
+                              floatLabel="always"
+                              appearance="outline"
+                              label="{{ 'edge.edge-types' | translate }}"
                               [entityType]="entityType.EDGE"
                               formControlName="edgeTypes">
       </tb-entity-subtype-list>
-      <mat-form-field class="mat-block">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>edge.name-starts-with</mat-label>
         <input matInput formControlName="edgeNameFilter">
       </mat-form-field>
     </ng-template>
     <ng-template [ngSwitchCase]="aliasFilterType.relationsQuery">
       <section class="tb-form-panel no-border no-padding">
-        <div class="tb-form-panel stroked no-gap">
+        <div class="tb-form-panel stroked" [class.no-padding-bottom]="!filterFormGroup.get('rootStateEntity').value">
           <div class="tb-form-panel-title" translate>alias.root-entity</div>
-          <mat-slide-toggle class="mat-slide margin" formControlName="rootStateEntity">
+          <mat-slide-toggle class="mat-slide" formControlName="rootStateEntity">
             {{ 'alias.root-state-entity' | translate }}
           </mat-slide-toggle>
-          <div *ngIf="filterFormGroup.get('rootStateEntity').value" class="tb-form-panel no-border no-padding no-gap">
-            <mat-form-field>
-              <mat-label translate>alias.state-entity-parameter-name</mat-label>
-              <input matInput formControlName="stateEntityParamName">
-            </mat-form-field>
-            <tb-entity-select useAliasEntityTypes="true" formControlName="defaultStateEntity">
+          @if (filterFormGroup.get('rootStateEntity').value) {
+            <div class="tb-form-panel no-border no-padding no-gap">
+              <mat-form-field floatLabel="always" class="mat-block" appearance="outline">
+                <mat-label translate>alias.state-entity-parameter-name</mat-label>
+                <input matInput formControlName="stateEntityParamName"
+                       placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
+              </mat-form-field>
+              <div class="tb-form-panel stroked no-padding-bottom">
+                <div class="tb-form-panel-title tb-normal">{{ 'alias.default-state-entity' | translate }}</div>
+                <tb-entity-select appearance="outline"
+                                  useAliasEntityTypes="true"
+                                  formControlName="defaultStateEntity">
+                </tb-entity-select>
+              </div>
+            </div>
+          } @else {
+            <tb-entity-select required
+                              appearance="outline"
+                              useAliasEntityTypes="true"
+                              formControlName="rootEntity">
             </tb-entity-select>
-          </div>
-          <tb-entity-select *ngIf="!filterFormGroup.get('rootStateEntity').value"
-                            required
-                            useAliasEntityTypes="true"
-                            formControlName="rootEntity">
-          </tb-entity-select>
-          <div class="tb-form-row no-border no-padding tb-standard-fields">
-            <mat-form-field class="flex">
+          }
+        </div>
+        <div class="tb-form-panel stroked">
+          <div class="tb-form-panel-title" translate>alias.query-options</div>
+          <div class="flex flex-row gap-4">
+            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
               <mat-label translate>relation.direction</mat-label>
               <mat-select required formControlName="direction">
                 <mat-option *ngFor="let type of directionTypes" [value]="type">
@@ -161,7 +190,7 @@
                 </mat-option>
               </mat-select>
             </mat-form-field>
-            <mat-form-field class="flex" floatLabel="always">
+            <mat-form-field class="flex-1" floatLabel="always" appearance="outline" subscriptSizing="dynamic">
               <mat-label translate>alias.max-relation-level</mat-label>
               <input matInput
                      type="number"
@@ -172,7 +201,7 @@
             </mat-form-field>
           </div>
           <mat-slide-toggle *ngIf="filterFormGroup.get('maxLevel').value > 1 || !filterFormGroup.get('maxLevel').value"
-            class="mat-slide" formControlName="fetchLastLevelOnly">
+                            class="mat-slide" formControlName="fetchLastLevelOnly">
             {{ 'alias.last-level-relation' | translate }}
           </mat-slide-toggle>
         </div>
@@ -191,98 +220,113 @@
                                  entityFilterFormGroup.get('type').value === aliasFilterType.edgeSearchQuery ||
                                  entityFilterFormGroup.get('type').value === aliasFilterType.entityViewSearchQuery ?
                                  entityFilterFormGroup.get('type').value : ''">
-      <label class="tb-small">{{ 'alias.root-entity' | translate }}</label>
-      <section class="tb-root-state-entity-switch flex flex-row items-center justify-start" style="padding-left: 0;">
-        <mat-slide-toggle class="root-state-entity-switch"
-                          formControlName="rootStateEntity">
-        </mat-slide-toggle>
-        <label class="tb-small root-state-entity-label" translate>alias.root-state-entity</label>
-      </section>
-      <div class="flex flex-1 flex-row" *ngIf="!filterFormGroup.get('rootStateEntity').value">
-        <tb-entity-select class="flex-1"
-                          required
-                          useAliasEntityTypes="true"
-                          formControlName="rootEntity">
-        </tb-entity-select>
-      </div>
-      <div class="flex flex-1 flex-col gt-sm:flex-row" *ngIf="filterFormGroup.get('rootStateEntity').value">
-        <mat-form-field floatLabel="always" class="mat-block" style="margin-top: 24px; padding-right: 8px;">
-          <mat-label translate>alias.state-entity-parameter-name</mat-label>
-          <input matInput formControlName="stateEntityParamName"
-                 placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
-        </mat-form-field>
-        <div class="flex flex-1 flex-col">
-          <label class="tb-small">{{ 'alias.default-state-entity' | translate }}</label>
-          <tb-entity-select class="flex-1"
-                            useAliasEntityTypes="true"
-                            formControlName="defaultStateEntity">
-          </tb-entity-select>
+      <section class="tb-form-panel no-border no-padding">
+        <div class="tb-form-panel stroked" [class.no-padding-bottom]="!filterFormGroup.get('rootStateEntity').value">
+          <div class="tb-form-panel-title" translate>alias.root-entity</div>
+          <mat-slide-toggle class="mat-slide" formControlName="rootStateEntity">
+            {{ 'alias.root-state-entity' | translate }}
+          </mat-slide-toggle>
+          @if (filterFormGroup.get('rootStateEntity').value) {
+            <div class="tb-form-panel no-border no-padding no-gap">
+              <mat-form-field floatLabel="always" class="mat-block" appearance="outline">
+                <mat-label translate>alias.state-entity-parameter-name</mat-label>
+                <input matInput formControlName="stateEntityParamName"
+                       placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
+              </mat-form-field>
+              <div class="tb-form-panel stroked no-padding-bottom">
+                <div class="tb-form-panel-title tb-normal">{{ 'alias.default-state-entity' | translate }}</div>
+                <tb-entity-select appearance="outline"
+                                  useAliasEntityTypes="true"
+                                  formControlName="defaultStateEntity">
+                </tb-entity-select>
+              </div>
+            </div>
+          } @else {
+            <tb-entity-select required
+                              appearance="outline"
+                              useAliasEntityTypes="true"
+                              formControlName="rootEntity">
+            </tb-entity-select>
+          }
         </div>
-      </div>
-      <div class="flex flex-1 flex-row">
-        <section class="tb-root-state-entity-switch flex flex-row items-center justify-start" style="padding-left: 0;">
-          <mat-slide-toggle class="root-state-entity-switch"
-                            formControlName="fetchLastLevelOnly">
+        <div class="tb-form-panel stroked">
+          <div class="tb-form-panel-title" translate>alias.query-options</div>
+          <div class="flex flex-row gap-4">
+            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+              <mat-label translate>relation.direction</mat-label>
+              <mat-select required formControlName="direction">
+                <mat-option *ngFor="let type of directionTypes" [value]="type">
+                  {{ directionTypeTranslations.get(directionTypeEnum[type]) | translate }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+            <mat-form-field class="flex-1" floatLabel="always" appearance="outline" subscriptSizing="dynamic">
+              <mat-label translate>alias.max-relation-level</mat-label>
+              <input matInput
+                     type="number"
+                     min="1"
+                     step="1"
+                     placeholder="{{ 'alias.unlimited-level' | translate }}"
+                     formControlName="maxLevel">
+            </mat-form-field>
+          </div>
+          <mat-slide-toggle *ngIf="filterFormGroup.get('maxLevel').value > 1 || !filterFormGroup.get('maxLevel').value"
+                            class="mat-slide" formControlName="fetchLastLevelOnly">
+            {{ 'alias.last-level-relation' | translate }}
           </mat-slide-toggle>
-          <label class="tb-small root-state-entity-label" translate>alias.last-level-relation</label>
-        </section>
-      </div>
-      <div class="flex flex-1 flex-row gap-2 xs:flex-col">
-        <mat-form-field class="mat-block" style="min-width: 100px;">
-          <mat-label translate>relation.direction</mat-label>
-          <mat-select required formControlName="direction">
-            <mat-option *ngFor="let type of directionTypes" [value]="type">
-              {{ directionTypeTranslations.get(directionTypeEnum[type]) | translate }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field floatLabel="always" class="mat-block flex-1">
-          <mat-label translate>alias.max-relation-level</mat-label>
-          <input matInput
-                 type="number"
-                 min="1"
-                 step="1"
-                 placeholder="{{ 'alias.unlimited-level' | translate }}"
-                 formControlName="maxLevel">
-        </mat-form-field>
-      </div>
-      <div class="mat-caption" style="color: rgba(0,0,0,0.57);" translate>relation.relation-type</div>
-      <tb-relation-type-autocomplete
-        class="flex-1"
-        formControlName="relationType">
-      </tb-relation-type-autocomplete>
-    </ng-template>
-    <ng-template [ngSwitchCase]="aliasFilterType.assetSearchQuery">
-      <div class="mat-caption tb-required" style="color: rgba(0,0,0,0.57);" translate>asset.asset-types</div>
-      <tb-entity-subtype-list
-        required
-        [entityType]="entityType.ASSET"
-        formControlName="assetTypes">
-      </tb-entity-subtype-list>
-    </ng-template>
-    <ng-template [ngSwitchCase]="aliasFilterType.deviceSearchQuery">
-      <div class="mat-caption tb-required" style="color: rgba(0,0,0,0.57);" translate>device.device-types</div>
-      <tb-entity-subtype-list
-        required
-        [entityType]="entityType.DEVICE"
-        formControlName="deviceTypes">
-      </tb-entity-subtype-list>
-    </ng-template>
-    <ng-template [ngSwitchCase]="aliasFilterType.edgeSearchQuery">
-      <div class="mat-caption tb-required" style="color: rgba(0,0,0,0.57);" translate>edge.edge-types</div>
-      <tb-entity-subtype-list
-        required
-        [entityType]="entityType.EDGE"
-        formControlName="edgeTypes">
-      </tb-entity-subtype-list>
-    </ng-template>
-    <ng-template [ngSwitchCase]="aliasFilterType.entityViewSearchQuery">
-      <div class="mat-caption tb-required" style="color: rgba(0,0,0,0.57);" translate>entity-view.entity-view-types</div>
-      <tb-entity-subtype-list
-        required
-        [entityType]="entityType.ENTITY_VIEW"
-        formControlName="entityViewTypes">
-      </tb-entity-subtype-list>
+        </div>
+        <div class="tb-form-panel stroked no-padding-bottom">
+          <div class="tb-form-panel-title" translate>relation.relation-filter</div>
+          <tb-relation-type-autocomplete
+            appearance="outline"
+            subscriptSizing="dynamic"
+            formControlName="relationType">
+          </tb-relation-type-autocomplete>
+          <ng-container [ngSwitch]="entityFilterFormGroup.get('type').value">
+            <ng-template [ngSwitchCase]="aliasFilterType.assetSearchQuery">
+              <tb-entity-subtype-list
+                required
+                floatLabel="always"
+                appearance="outline"
+                label="{{ 'asset.asset-types' | translate }}"
+                [entityType]="entityType.ASSET"
+                formControlName="assetTypes">
+              </tb-entity-subtype-list>
+            </ng-template>
+            <ng-template [ngSwitchCase]="aliasFilterType.deviceSearchQuery">
+              <tb-entity-subtype-list
+                required
+                floatLabel="always"
+                appearance="outline"
+                label="{{ 'device.device-types' | translate }}"
+                [entityType]="entityType.DEVICE"
+                formControlName="deviceTypes">
+              </tb-entity-subtype-list>
+            </ng-template>
+            <ng-template [ngSwitchCase]="aliasFilterType.edgeSearchQuery">
+              <tb-entity-subtype-list
+                required
+                floatLabel="always"
+                appearance="outline"
+                label="{{ 'edge.edge-types' | translate }}"
+                [entityType]="entityType.EDGE"
+                formControlName="edgeTypes">
+              </tb-entity-subtype-list>
+            </ng-template>
+            <ng-template [ngSwitchCase]="aliasFilterType.entityViewSearchQuery">
+              <tb-entity-subtype-list
+                required
+                floatLabel="always"
+                appearance="outline"
+                label="{{ 'entity-view.entity-view-types' | translate }}"
+                [entityType]="entityType.ENTITY_VIEW"
+                formControlName="entityViewTypes">
+              </tb-entity-subtype-list>
+            </ng-template>
+          </ng-container>
+        </div>
+      </section>
     </ng-template>
+
   </section>
 </div>

ui-ngx/src/app/modules/home/components/entity/entity-filter.component.scss

@@ -15,25 +15,7 @@
  */
 :host {
   .tb-entity-filter {
-    #relationsQueryFilter {
-      padding-top: 20px;
-
-      tb-entity-select {
-        min-height: 92px;
-      }
-    }
-
-    .tb-root-state-entity-switch {
-      padding-left: 10px;
-      padding-bottom: 10px;
-
-      .root-state-entity-switch {
-        margin: 0;
-      }
-
-      .root-state-entity-label {
-        margin: 5px 0 5px 10px;
-      }
-    }
+    display: flex;
+    flex-direction: column;
   }
 }

ui-ngx/src/app/modules/home/components/rule-node/action/generator-config.component.scss

@@ -31,21 +31,5 @@
         }
       }
     }
-    .tb-entity-select {
-      @media screen and (min-width: 599px) {
-        display: flex;
-        flex-direction: row;
-        gap: 16px;
-      }
-      tb-entity-type-select {
-        flex: 1;
-      }
-      tb-entity-autocomplete {
-        flex: 1;
-        mat-form-field {
-          width: 100% !important;
-        }
-      }
-    }
   }
 }

ui-ngx/src/app/modules/home/components/widget/config/datasource.component.html

@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<section class="tb-datasource-section" [formGroup]="datasourceFormGroup">
-  <mat-form-field *ngIf="!basicMode" class="tb-datasource-type" hideRequiredMarker>
+<section class="tb-datasource-section tb-form-panel outlined" [formGroup]="datasourceFormGroup">
+  <mat-form-field *ngIf="!basicMode" class="tb-datasource-type" hideRequiredMarker appearance="outline">
     <mat-label translate>widget-config.datasource-type</mat-label>
     <mat-select formControlName="type">
       <mat-option *ngFor="let datasourceType of datasourceTypes" [value]="datasourceType">
@@ -44,18 +44,20 @@
       <tb-entity-autocomplete *ngIf="datasourceFormGroup.get('type').value === datasourceType.device"
                               [required]="!datasourcesOptional"
                               [entityType]="entityType.DEVICE"
+                              appearance="outline"
                               formControlName="deviceId">
       </tb-entity-autocomplete>
       <tb-entity-alias-select
         *ngIf="datasourceFormGroup.get('type').value !== datasourceType.device"
         [showLabel]="true"
+        appearance="outline"
         [tbRequired]="!entityAliasOptional"
         [aliasController]="aliasController"
         formControlName="entityAliasId"
         [callbacks]="entityAliasSelectCallbacks">
       </tb-entity-alias-select>
       <mat-form-field *ngIf="!hideDatasourceLabel && [datasourceType.entityCount, datasourceType.alarmCount].includes(datasourceFormGroup.get('type').value)"
-                      class="flex-1">
+                      class="flex-1" appearance="outline">
         <input matInput
                placeholder="{{ 'datasource.label' | translate }}"
                formControlName="name">
@@ -64,6 +66,7 @@
   </section>
   <section *ngIf="!hideDataKeys" class="flex flex-1 flex-col items-stretch justify-start">
     <tb-data-keys class="tb-data-keys flex-1"
+                  appearance="outline"
                   [widgetType]="widgetType"
                   [datasourceType]="datasourceFormGroup.get('type').value"
                   [hideDataKeyLabel]="hideDataKeyLabel"
@@ -86,6 +89,7 @@
                   formControlName="dataKeys">
     </tb-data-keys>
     <tb-data-keys *ngIf="hasAdditionalLatestDataKeys" class="tb-data-keys flex-1"
+                  appearance="outline"
                   [widgetType]="widgetTypes.latest"
                   [datasourceType]="datasourceFormGroup.get('type').value"
                   [hideDataKeyLabel]="hideDataKeyLabel"
@@ -109,6 +113,7 @@
   </section>
   <tb-filter-select
     *ngIf="(!basicMode || displayDatasourceFilterForBasicMode) && ![datasourceType.function].includes(datasourceFormGroup.get('type').value)"
+    appearance="outline"
     [showLabel]="true"
     [aliasController]="aliasController"
     formControlName="filterId"

ui-ngx/src/app/modules/home/components/widget/config/datasources.component.scss

@@ -20,6 +20,7 @@
     height: auto;
     display: block;
     padding: 0;
+    overflow: visible;
   }
   &.tb-draggable {
     &.cdk-drag-preview {

ui-ngx/src/app/shared/components/entity/entity-list.component.html

@@ -21,7 +21,7 @@
                 [class.tb-chips]="inlineField"
                 [class.flex]="inlineField"
                 [subscriptSizing]="inlineField ? 'dynamic' : subscriptSizing">
-  <mat-label *ngIf="!inlineField && labelText">{{ labelText }}</mat-label>  <mat-label *ngIf="labelText">{{ labelText }}</mat-label>
+  <mat-label *ngIf="!inlineField && labelText">{{ labelText }}</mat-label>
   <mat-chip-grid #chipList formControlName="entities">
     <mat-chip-row
       *ngFor="let entity of entities"

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

@@ -15,9 +15,11 @@
     limitations under the License.
 
 -->
-<div [formGroup]="entitySelectFormGroup">
+<div [formGroup]="entitySelectFormGroup" class="flex flex-row gap-4 xs:flex-col xs:gap-0">
   <tb-entity-type-select
     *ngIf="displayEntityTypeSelect"
+    class="flex-1"
+    [appearance]="appearance"
     [showLabel]="true"
     [required]="required"
     [useAliasEntityTypes]="useAliasEntityTypes"
@@ -27,6 +29,8 @@
   </tb-entity-type-select>
   <tb-entity-autocomplete
     *ngIf="modelValue.entityType && !entityTypeNullUUID.has(modelValue.entityType)"
+    class="flex-1"
+    [appearance]="appearance"
     [required]="required"
     [entityType]="modelValue.entityType"
     formControlName="entityId">

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

@@ -25,6 +25,7 @@ import { EntityId } from '@shared/models/id/entity-id';
 import { NULL_UUID } from '@shared/models/id/has-uuid';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatFormFieldAppearance } from '@angular/material/form-field';
 
 @Component({
   selector: 'tb-entity-select',
@@ -58,6 +59,9 @@ export class EntitySelectComponent implements ControlValueAccessor, OnInit, Afte
   @Input()
   additionEntityTypes: {[entityType in string]: string} = {};
 
+  @Input()
+  appearance: MatFormFieldAppearance = 'fill';
+
   displayEntityTypeSelect: boolean;
 
   AliasEntityType = AliasEntityType;

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -721,6 +721,7 @@
         "state-entity-parameter-name": "State entity parameter name",
         "default-state-entity": "Default state entity",
         "default-entity-parameter-name": "By default",
+        "query-options": "Query options",
         "max-relation-level": "Max relation level",
         "unlimited-level": "Unlimited level",
         "state-entity": "Dashboard state entity",
@@ -4367,6 +4368,7 @@
         "add-relation-filter": "Add relation filter",
         "any-relation": "Any relation",
         "relation-filters": "Relation filters",
+        "relation-filter": "Relation filter",
         "additional-info": "Additional info (JSON)",
         "invalid-additional-info": "Unable to parse additional info json.",
         "no-relations-text": "No relations found",

ui-ngx/src/form.scss

@@ -163,6 +163,9 @@
   .tb-form-panel-title {
     font-weight: 500;
     font-size: 16px;
+    &.tb-normal {
+      font-weight: normal;
+    }
 
     &.tb-required::after {
       font-size: 13px;
@@ -819,4 +822,41 @@
       }
     }
   }
+
+  .tb-form-panel.outlined {
+    --mdc-outlined-text-field-outline-color: rgba(0,0,0,0.12);
+    --mdc-outlined-text-field-container-shape: 6px;
+    --mat-form-field-trailing-icon-color: rgba(0, 0, 0, 0.56);
+
+    box-shadow: none;
+    gap: 0;
+    padding-bottom: 0;
+
+    &:not(.stroked) {
+      border-radius: 0;
+    }
+
+    &:not(.mat-padding,.padding) {
+      padding: 0;
+    }
+
+    & > .tb-form-panel-title {
+      margin-bottom: 16px;
+    }
+
+    .tb-form-panel {
+      @media #{$mat-xs} {
+        gap: 16px;
+      }
+    }
+
+    .tb-form-row {
+      height: 56px;
+      margin-bottom: 22px;
+      &.disabled {
+        border-color: var(--mdc-outlined-text-field-disabled-outline-color);
+        color: var(--mdc-outlined-text-field-disabled-input-text-color);
+      }
+    }
+  }
 }