Merge pull request #15357 from mtsymbarov-del/feat/outline-inputs

Moved of inputs to Outline appearance

ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html

@@ -33,18 +33,19 @@
     <fieldset [disabled]="isLoading$ | async">
       <mat-radio-group formControlName="addToDashboardType">
         <mat-radio-button [value]="0" color="primary">
-          <section class="flex flex-col" style="width: 300px;">
+          <section class="flex flex-col gap-1" style="width: 300px;">
             <span translate>dashboard.select-existing</span>
             <tb-dashboard-autocomplete formControlName="dashboardId"
+                                       appearance="outline"
                                        [required]="addWidgetFormGroup.get('addToDashboardType').value === 0"
                                        [selectFirstDashboard]="false">
             </tb-dashboard-autocomplete>
           </section>
         </mat-radio-button>
         <mat-radio-button [value]="1" color="primary">
-          <section class="flex flex-col" style="width: 300px;">
+          <section class="flex flex-col gap-1" style="width: 300px;">
             <span translate>dashboard.create-new</span>
-            <mat-form-field class="mat-block">
+            <mat-form-field class="mat-block" appearance="outline">
               <mat-label translate>dashboard.new-dashboard-title</mat-label>
               <input matInput formControlName="newDashboardTitle"
                      [required]="addWidgetFormGroup.get('addToDashboardType').value === 1">

ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html

@@ -25,7 +25,7 @@
   </button>
 </mat-toolbar>
 <form [formGroup]="deleteTimeseriesFormGroup" class="mat-content mat-padding tb-form-settings">
-  <mat-form-field class="mat-block" subscriptSizing="dynamic">
+  <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
     <mat-label translate>attribute.delete-timeseries.strategy</mat-label>
     <mat-select formControlName="strategy">
       @for (strategy of strategiesTranslationsMap.keys(); track strategy) {
@@ -37,13 +37,13 @@
   </mat-form-field>
   @if (isPeriodStrategy()) {
     <div class="tb-select-interval">
-      <mat-form-field class="mat-block" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
         <mat-label translate>attribute.delete-timeseries.start-time</mat-label>
         <mat-datetimepicker-toggle [for]="startDateTimePicker" matPrefix></mat-datetimepicker-toggle>
         <mat-datetimepicker #startDateTimePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
         <input required matInput formControlName="startDateTime" [matDatetimepicker]="startDateTimePicker">
       </mat-form-field>
-      <mat-form-field class="mat-block" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
         <mat-label translate>attribute.delete-timeseries.ends-on</mat-label>
         <mat-datetimepicker-toggle [for]="endDatePicker" matPrefix></mat-datetimepicker-toggle>
         <mat-datetimepicker #endDatePicker type="datetime" openOnFocus="true"></mat-datetimepicker>

ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.scss

@@ -26,7 +26,7 @@
     display: flex;
     flex-direction: column;
     gap: 16px;
-    padding-top: 0;
+    padding-top: 4px;
   }
 
   .tb-select-interval {

ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html

@@ -31,7 +31,7 @@
   }
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async" class="flex flex-col">
-      <mat-form-field class="mat-block">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>dashboard.state-name</mat-label>
         <input required matInput formControlName="name">
         @if (stateFormGroup.get('name').hasError('required')) {
@@ -40,7 +40,7 @@
           </mat-error>
         }
       </mat-form-field>
-      <mat-form-field class="mat-block">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>dashboard.state-id</mat-label>
         <input required matInput formControlName="id">
         @if (stateFormGroup.get('id').hasError('required')) {

ui-ngx/src/app/modules/home/components/device/device-credentials.component.html

@@ -62,7 +62,7 @@
     @case (deviceCredentialsType.X509_CERTIFICATE) {
       <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>device.certificate-pem-format</mat-label>
-        <textarea matInput formControlName="credentialsValue" cols="15" rows="5" required></textarea>
+        <textarea matInput formControlName="credentialsValue" cdkTextareaAutosize rows="15" required></textarea>
         @if (deviceCredentialsFormGroup.get('credentialsValue').value) {
           <tb-copy-button
             matSuffix

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

@@ -20,7 +20,7 @@
     @for (column of showColumns; track column) {
       @switch (column.key) {
         @case (isSelector(column.key)) {
-          <mat-form-field>
+          <mat-form-field appearance="outline">
             <mat-label>{{ column.title | translate}}</mat-label>
             <mat-select [formControlName]="column.key">
               <mat-option [value]="">{{ 'event.all-events' | translate}}</mat-option>
@@ -33,7 +33,7 @@
           </mat-form-field>
         }
         @case (isNumberFields(column.key)) {
-          <mat-form-field>
+          <mat-form-field appearance="outline">
             <mat-label>{{ column.title | translate}}</mat-label>
             <input matInput type="number" min="0" [name]="column.key" [formControlName]="column.key">
             @if (eventFilterFormGroup.get(column.key).hasError('min')) {
@@ -50,13 +50,13 @@
           </tb-checkbox>
         }
         @case ('errorStr') {
-          <mat-form-field [class.!hidden]="!showErrorMsgFields()">
+          <mat-form-field [class.!hidden]="!showErrorMsgFields()" appearance="outline">
             <mat-label>{{ column.title | translate}}</mat-label>
             <input matInput type="text" name="errorSearchText" formControlName="errorStr">
           </mat-form-field>
         }
         @default {
-          <mat-form-field>
+          <mat-form-field appearance="outline">
             <mat-label>{{ column.title | translate}}</mat-label>
             <input matInput type="text" [name]="column.key" [formControlName]="column.key">
           </mat-form-field>

ui-ngx/src/app/modules/home/components/event/event-table-header.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field class="mat-block">
+<mat-form-field class="mat-block" appearance="outline" subscriptSizing="dynamic">
   <mat-label translate>event.event-type</mat-label>
   <mat-select [ngModel]="eventTableConfig.eventType"
               (ngModelChange)="eventTypeChanged($event)">

ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html

@@ -26,10 +26,9 @@
   </div>
   <mat-divider></mat-divider>
   @for (mappingConfig of mappingsConfigFormArray.controls; track mappingConfig; let isLast = $last) {
-    <div
-      [formGroup]="mappingConfig" class="mapping-list flex flex-row items-center justify-start gap-2">
+    <div [formGroup]="mappingConfig" class="mapping-list flex flex-row items-center justify-start gap-2">
       <div class="tb-layout-fill flex flex-1 flex-row items-stretch justify-start gap-2">
-        <mat-form-field class="max-w-26% flex-full">
+        <mat-form-field class="max-w-26% flex-full" appearance="outline">
           <mat-select formControlName="dataType" required>
             @for (dataType of dataTypes; track dataType) {
               <mat-option [value]="dataType">
@@ -43,7 +42,7 @@
             </mat-error>
           }
         </mat-form-field>
-        <mat-form-field class="max-w-37% flex-full">
+        <mat-form-field class="max-w-37% flex-full" appearance="outline">
           <input matInput formControlName="key" required/>
           @if (mappingConfig.get('key').hasError('required')) {
             <mat-error>
@@ -51,7 +50,7 @@
             </mat-error>
           }
         </mat-form-field>
-        <mat-form-field class="max-w-37% flex-full">
+        <mat-form-field class="max-w-37% flex-full" appearance="outline">
           <input matInput formControlName="oid" required/>
           @if (mappingConfig.get('oid').hasError('required')) {
             <mat-error>

ui-ngx/src/app/modules/home/components/profile/tenant-profile-autocomplete.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="selectTenantProfileFormGroup" class="mat-block">
+<mat-form-field [formGroup]="selectTenantProfileFormGroup" class="mat-block" [appearance]="appearance">
   <mat-label translate>tenant-profile.tenant-profile</mat-label>
   <input matInput type="text"
          #tenantProfileInput

ui-ngx/src/app/modules/home/components/profile/tenant-profile-autocomplete.component.ts

@@ -35,6 +35,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { TenantProfileDialogComponent, TenantProfileDialogData } from './tenant-profile-dialog.component';
 import { emptyPageData } from '@shared/models/page/page-data';
 import { getEntityDetailsPageURL } from '@core/utils';
+import { MatFormFieldAppearance } from '@angular/material/form-field';
 
 @Component({
     selector: 'tb-tenant-profile-autocomplete',
@@ -71,6 +72,9 @@ export class TenantProfileAutocompleteComponent implements ControlValueAccessor,
   @Input()
   showDetailsPageLink = false;
 
+  @Input()
+  appearance: MatFormFieldAppearance = 'fill';
+
   @Output()
   tenantProfileUpdated = new EventEmitter<TenantProfileId>();
 

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

@@ -50,7 +50,7 @@
 <div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
-      <mat-form-field class="mat-block" appearance="fill">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>tenant-profile.name</mat-label>
         <input matInput formControlName="name" required/>
         @if (entityForm.get('name').hasError('required')) {
@@ -103,9 +103,9 @@
           </mat-expansion-panel>
         </mat-accordion>
       </div>
-      <mat-form-field class="mat-block" appearance="fill">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>tenant-profile.description</mat-label>
-        <textarea matInput formControlName="description" rows="2"></textarea>
+        <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="1" rows="1"></textarea>
       </mat-form-field>
     </fieldset>
   </form>

ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html

@@ -21,7 +21,7 @@
       {{ 'tenant-profile.entities' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
     <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-devices</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxDevices"
@@ -38,7 +38,7 @@
         }
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-dashboards</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxDashboards"
@@ -57,7 +57,7 @@
       </mat-form-field>
     </div>
     <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-assets</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxAssets"
@@ -74,7 +74,7 @@
         }
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-users</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxUsers"
@@ -100,7 +100,7 @@
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
         <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.maximum-customers</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxCustomers"
@@ -117,7 +117,7 @@
             }
             <mat-hint></mat-hint>
           </mat-form-field>
-          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.maximum-rule-chains</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxRuleChains"
@@ -136,7 +136,7 @@
           </mat-form-field>
         </div>
         <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-          <mat-form-field class="mat-block flex-1" appearance="fill">
+          <mat-form-field class="mat-block flex-1" appearance="outline">
             <mat-label translate>tenant-profile.maximum-edges</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxEdges"
@@ -164,7 +164,7 @@
       {{ 'tenant-profile.rule-engine' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
     <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-r-e-executions</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxREExecutions"
@@ -181,7 +181,7 @@
         }
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-transport-messages</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxTransportMessages"
@@ -207,7 +207,7 @@
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
         <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.max-j-s-executions</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxJSExecutions"
@@ -224,7 +224,7 @@
             }
             <mat-hint></mat-hint>
           </mat-form-field>
-          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.max-tbel-executions</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxTbelExecutions"
@@ -243,7 +243,7 @@
           </mat-form-field>
         </div>
         <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.max-rule-node-executions-per-message</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxRuleNodeExecutionsPerMessage"
@@ -260,7 +260,7 @@
             }
             <mat-hint></mat-hint>
           </mat-form-field>
-          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.max-transport-data-points</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxTransportDataPoints"
@@ -286,7 +286,7 @@
       {{ 'tenant-profile.calculated-fields' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
     <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-calculated-fields</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxCalculatedFieldsPerEntity"
@@ -303,7 +303,7 @@
         }
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-data-points-per-rolling-arg</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxDataPointsPerRollingArg"
@@ -322,7 +322,7 @@
       </mat-form-field>
     </div>
     <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-arguments-per-cf</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxArgumentsPerCF"
@@ -349,7 +349,7 @@
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
         <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.max-state-size</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxStateSizeInKBytes"
@@ -366,7 +366,7 @@
             }
             <mat-hint></mat-hint>
           </mat-form-field>
-          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.max-value-argument-size</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxSingleValueArgumentSizeInKBytes"
@@ -385,7 +385,7 @@
           </mat-form-field>
         </div>
         <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.max-related-level-per-argument</mat-label>
             <input matInput required min="1" step="1"
                    formControlName="maxRelationLevelPerCfArgument"
@@ -402,7 +402,7 @@
             }
             <mat-hint></mat-hint>
           </mat-form-field>
-          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.min-allowed-scheduled-update-interval</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="minAllowedScheduledUpdateIntervalInSecForCF"
@@ -421,7 +421,7 @@
           </mat-form-field>
         </div>
         <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.min-allowed-aggregation-interval</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="minAllowedAggregationIntervalInSecForCF"
@@ -438,7 +438,7 @@
             }
             <mat-hint></mat-hint>
           </mat-form-field>
-          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.min-allowed-deduplication-interval</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="minAllowedDeduplicationIntervalInSecForCF"
@@ -457,7 +457,7 @@
           </mat-form-field>
         </div>
         <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.intermediate-aggregation-interval</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="intermediateAggregationIntervalInSecForCF"
@@ -474,7 +474,7 @@
             }
             <mat-hint></mat-hint>
           </mat-form-field>
-          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.reevaluation-check-interval</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="cfReevaluationCheckInterval"
@@ -493,7 +493,7 @@
           </mat-form-field>
         </div>
         <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.relation-search-entity-limit</mat-label>
             <input matInput required min="1" step="1"
                    formControlName="maxRelatedEntitiesToReturnPerCfArgument"
@@ -521,7 +521,7 @@
       {{ 'tenant-profile.time-to-live' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
     <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-d-p-storage-days</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxDPStorageDays"
@@ -538,7 +538,7 @@
         }
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.alarms-ttl-days</mat-label>
         <input matInput required min="0" step="1"
                formControlName="alarmsTtlDays"
@@ -557,7 +557,7 @@
       </mat-form-field>
     </div>
     <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.default-storage-ttl-days</mat-label>
         <input matInput required min="0" step="1"
                formControlName="defaultStorageTtlDays"
@@ -574,7 +574,7 @@
         }
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.rpc-ttl-days</mat-label>
         <input matInput required min="0" step="1"
                formControlName="rpcTtlDays"
@@ -593,7 +593,7 @@
       </mat-form-field>
     </div>
     <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.queue-stats-ttl-days</mat-label>
         <input matInput required min="0" step="1"
                formControlName="queueStatsTtlDays"
@@ -610,7 +610,7 @@
         }
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.rule-engine-exceptions-ttl-days</mat-label>
         <input matInput required min="0" step="1"
                formControlName="ruleEngineExceptionsTtlDays"
@@ -639,7 +639,7 @@
     </mat-slide-toggle>
     @if (tenantProfileConfigurationForm.get('smsEnabled').value) {
       <mat-form-field class="mat-block flex-1"
-                      appearance="fill" subscriptSizing="dynamic">
+                      appearance="outline" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-sms</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxSms"
@@ -657,7 +657,7 @@
       </mat-form-field>
     }
     <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-emails</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxEmails"
@@ -674,7 +674,7 @@
         }
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-created-alarms</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxCreatedAlarms"
@@ -693,7 +693,7 @@
       </mat-form-field>
     </div>
     <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.alarms-reevaluation-interval</mat-label>
         <input matInput required min="0" step="1"
                formControlName="alarmsReevaluationInterval"
@@ -719,7 +719,7 @@
       {{ 'tenant-profile.debug' | translate }}
     </legend>
     <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-debug-duration-min</mat-label>
         <input matInput min="0" step="1"
                formControlName="maxDebugModeDurationMinutes"
@@ -740,7 +740,7 @@
       {{ 'tenant-profile.ota-files-in-bytes' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
     <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-resources-sum-data-size</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxResourcesInBytes"
@@ -757,7 +757,7 @@
         }
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-ota-packages-sum-data-size</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxOtaPackagesInBytes"
@@ -776,7 +776,7 @@
       </mat-form-field>
     </div>
     <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-      <mat-form-field class="mat-block flex-1" appearance="fill">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>tenant-profile.maximum-resource-size</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxResourceSize"
@@ -802,7 +802,7 @@
       {{ 'tenant-profile.ws-title' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
     <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-      <mat-form-field class="mat-block flex-1" appearance="fill">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>tenant-profile.ws-limit-max-sessions-per-tenant</mat-label>
         <input matInput type="number" formControlName="maxWsSessionsPerTenant">
         @if (tenantProfileConfigurationForm.get('maxWsSessionsPerTenant').hasError('min')) {
@@ -811,7 +811,7 @@
           </mat-error>
         }
       </mat-form-field>
-      <mat-form-field class="mat-block flex-1" appearance="fill">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-tenant</mat-label>
         <input matInput type="number" formControlName="maxWsSubscriptionsPerTenant">
         @if (tenantProfileConfigurationForm.get('maxWsSubscriptionsPerTenant').hasError('min')) {
@@ -822,7 +822,7 @@
       </mat-form-field>
     </div>
     <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-      <mat-form-field class="mat-block flex-1" appearance="fill">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>tenant-profile.ws-limit-max-sessions-per-customer</mat-label>
         <input matInput type="number" formControlName="maxWsSessionsPerCustomer">
         @if (tenantProfileConfigurationForm.get('maxWsSessionsPerCustomer').hasError('min')) {
@@ -831,7 +831,7 @@
           </mat-error>
         }
       </mat-form-field>
-      <mat-form-field class="mat-block flex-1" appearance="fill">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-customer</mat-label>
         <input matInput type="number" formControlName="maxWsSubscriptionsPerCustomer">
         @if (tenantProfileConfigurationForm.get('maxWsSubscriptionsPerCustomer').hasError('min')) {
@@ -849,7 +849,7 @@
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
         <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-          <mat-form-field class="mat-block flex-1" appearance="fill">
+          <mat-form-field class="mat-block flex-1" appearance="outline">
             <mat-label translate>tenant-profile.ws-limit-max-sessions-per-public-user</mat-label>
             <input matInput type="number" formControlName="maxWsSessionsPerPublicUser">
             @if (tenantProfileConfigurationForm.get('maxWsSessionsPerPublicUser').hasError('min')) {
@@ -858,7 +858,7 @@
               </mat-error>
             }
           </mat-form-field>
-          <mat-form-field class="mat-block flex-1" appearance="fill">
+          <mat-form-field class="mat-block flex-1" appearance="outline">
             <mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-public-user</mat-label>
             <input matInput type="number" formControlName="maxWsSubscriptionsPerPublicUser">
             @if (tenantProfileConfigurationForm.get('maxWsSubscriptionsPerPublicUser').hasError('min')) {
@@ -869,7 +869,7 @@
           </mat-form-field>
         </div>
         <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-          <mat-form-field class="mat-block flex-1" appearance="fill">
+          <mat-form-field class="mat-block flex-1" appearance="outline">
             <mat-label translate>tenant-profile.ws-limit-max-sessions-per-regular-user</mat-label>
             <input matInput type="number" formControlName="maxWsSessionsPerRegularUser">
             @if (tenantProfileConfigurationForm.get('maxWsSessionsPerRegularUser').hasError('min')) {
@@ -878,7 +878,7 @@
               </mat-error>
             }
           </mat-form-field>
-          <mat-form-field class="mat-block flex-1" appearance="fill">
+          <mat-form-field class="mat-block flex-1" appearance="outline">
             <mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-regular-user</mat-label>
             <input matInput type="number" formControlName="maxWsSubscriptionsPerRegularUser">
             @if (tenantProfileConfigurationForm.get('maxWsSubscriptionsPerRegularUser').hasError('min')) {
@@ -889,7 +889,7 @@
           </mat-form-field>
         </div>
         <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-          <mat-form-field class="mat-block flex-1" appearance="fill">
+          <mat-form-field class="mat-block flex-1" appearance="outline">
             <mat-label translate>tenant-profile.ws-limit-queue-per-session</mat-label>
             <input matInput type="number" formControlName="wsMsgQueueLimitPerSession">
             @if (tenantProfileConfigurationForm.get('wsMsgQueueLimitPerSession').hasError('min')) {

ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html

@@ -22,7 +22,7 @@
         <div class="tb-rate-limits-operation" translate>tenant-profile.rate-limits.and-also-less-than</div>
       }
       <div class="flex flex-1 flex-row gap-2">
-        <mat-form-field hideRequiredMarker appearance="fill" class="mat-block flex-1" subscriptSizing="dynamic">
+        <mat-form-field hideRequiredMarker appearance="outline" class="mat-block flex-1" subscriptSizing="dynamic">
           <mat-label translate>tenant-profile.rate-limits.number-of-messages</mat-label>
           <input matInput placeholder="{{ 'tenant-profile.rate-limits.number-of-messages' | translate }}"
                  type="number" min="1" step="1" formControlName="value" required>
@@ -33,7 +33,7 @@
             <mat-error translate>tenant-profile.rate-limits.number-of-messages-min</mat-error>
           }
         </mat-form-field>
-        <mat-form-field hideRequiredMarker appearance="fill" class="mat-block flex-1" subscriptSizing="dynamic">
+        <mat-form-field hideRequiredMarker appearance="outline" class="mat-block flex-1" subscriptSizing="dynamic">
           <mat-label translate>tenant-profile.rate-limits.per-seconds</mat-label>
           <input matInput placeholder="{{ 'tenant-profile.rate-limits.per-seconds' | translate }}"
                  type="number" min="1" step="1" formControlName="time" required>

ui-ngx/src/app/modules/home/components/queue/queue-form.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="queueFormGroup" class="flex flex-col">
-  <mat-form-field class="mat-block" appearance="fill">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>admin.queue-name</mat-label>
     <input matInput formControlName="name" required>
     @if (queueFormGroup.get('name').hasError('required')) {
@@ -62,7 +62,7 @@
           @if (hideBatchSize) {
             <div class="flex-1">
               <label class="group-label" translate>queue.grouping-parameter</label>
-              <mat-form-field class="mat-block">
+              <mat-form-field class="mat-block" appearance="outline">
                 <mat-label translate>queue.batch-size</mat-label>
                 <input type="number" matInput formControlName="batchSize" required>
                 @if (queueFormGroup.get('submitStrategy.batchSize').hasError('required')) {
@@ -107,7 +107,7 @@
           </div>
           <div class="flex-1">
             <label class="group-label" translate>queue.retries-settings</label>
-            <mat-form-field class="mat-block" subscriptSizing="dynamic">
+            <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
               <mat-label translate>queue.retries</mat-label>
               <input type="number" matInput formControlName="retries" required>
               <mat-hint></mat-hint>
@@ -123,7 +123,7 @@
                 </mat-error>
               }
             </mat-form-field>
-            <mat-form-field class="mat-block" subscriptSizing="dynamic">
+            <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
               <mat-label translate>queue.failure-percentage</mat-label>
               <input type="number" matInput formControlName="failurePercentage" required>
               <mat-hint></mat-hint>
@@ -147,7 +147,7 @@
                 </mat-error>
               }
             </mat-form-field>
-            <mat-form-field class="mat-block" subscriptSizing="dynamic">
+            <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
               <mat-label translate>queue.pause-between-retries</mat-label>
               <input type="number" matInput formControlName="pauseBetweenRetries" required>
               <mat-hint></mat-hint>
@@ -163,7 +163,7 @@
                 </mat-error>
               }
             </mat-form-field>
-            <mat-form-field class="mat-block" subscriptSizing="dynamic">
+            <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
               <mat-label translate>queue.max-pause-between-retries</mat-label>
               <input type="number" matInput formControlName="maxPauseBetweenRetries" required>
               <mat-hint></mat-hint>
@@ -194,7 +194,7 @@
           <div class="flex-1">
             <label class="group-label" translate>queue.batch-processing</label>
             <div class="flex flex-1 flex-row gap-2.5 xs:flex-col">
-              <mat-form-field class="mat-block flex-1">
+              <mat-form-field class="mat-block flex-1" appearance="outline">
                 <mat-label translate>queue.poll-interval</mat-label>
                 <input type="number" matInput formControlName="pollInterval" required>
                 @if (queueFormGroup.get('pollInterval').hasError('required')) {
@@ -209,7 +209,7 @@
                   </mat-error>
                 }
               </mat-form-field>
-              <mat-form-field class="mat-block flex-1">
+              <mat-form-field class="mat-block flex-1" appearance="outline">
                 <mat-label translate>queue.partitions</mat-label>
                 <input type="number" matInput formControlName="partitions" required>
                 @if (queueFormGroup.get('partitions').hasError('required')) {
@@ -232,7 +232,7 @@
               <mat-checkbox class="flex-1 gt-xs:flex gt-xs:items-stretch gt-xs:justify-center" formControlName="consumerPerPartition">
                 {{ 'queue.consumer-per-partition' | translate }}
               </mat-checkbox>
-              <mat-form-field class="mat-block flex-1">
+              <mat-form-field class="mat-block flex-1" appearance="outline">
                 <mat-label translate>queue.processing-timeout</mat-label>
                 <input type="number" matInput formControlName="packProcessingTimeout" required>
                 @if (queueFormGroup.get('packProcessingTimeout').hasError('required')) {
@@ -257,14 +257,14 @@
     <mat-checkbox class="flex-1" formControlName="duplicateMsgToAllPartitions" style="padding-bottom: 16px;">
       {{ 'queue.duplicate-msg-to-all-partitions' | translate }}
     </mat-checkbox>
-    <mat-form-field class="mat-block" subscriptSizing="dynamic">
+    <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
       <mat-label translate>queue.custom-properties</mat-label>
-      <textarea matInput formControlName="customProperties" cdkTextareaAutosize cdkAutosizeMinRows="1"></textarea>
+      <textarea matInput formControlName="customProperties" cdkTextareaAutosize cdkAutosizeMinRows="1" rows="1"></textarea>
       <mat-hint translate>queue.custom-properties-hint</mat-hint>
     </mat-form-field>
-    <mat-form-field class="mat-block" appearance="fill">
+    <mat-form-field class="mat-block" appearance="outline">
       <mat-label translate>queue.description</mat-label>
-      <textarea matInput formControlName="description" rows="2"></textarea>
+      <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="1" rows="1"></textarea>
       <mat-hint translate>queue.description-hint</mat-hint>
     </mat-form-field>
   </div>

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

@@ -34,14 +34,16 @@
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
       <tb-relation-type-autocomplete
+        appearance="outline"
         formControlName="type"
-        required="true">
+        [required]="true">
       </tb-relation-type-autocomplete>
       <small>{{(direction === entitySearchDirection.FROM ?
       'relation.to-entity' : 'relation.from-entity') | translate}}</small>
       <tb-entity-list-select
         formControlName="targetEntityIds"
         [additionEntityTypes]="additionEntityTypes"
+        appearance="outline"
         required="true">
       </tb-entity-list-select>
       <tb-json-object-edit

ui-ngx/src/app/modules/home/components/relation/relation-table.component.html

@@ -19,11 +19,11 @@
   <div class="tb-entity-table-content tb-outlined-border flex flex-1 flex-col">
     <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode || !dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
-        <div class="title-container flex flex-row items-center justify-start xs:flex-col xs:items-start xs:justify-center">
+        <div class="title-container flex flex-row items-center justify-start xs:flex-col xs:items-start xs:justify-center pt-1">
           <span class="tb-entity-table-title">
             {{(direction == directions.FROM ? 'relation.from-relations' : 'relation.to-relations') | translate}}
           </span>
-          <mat-form-field class="mat-block tb-relation-direction">
+          <mat-form-field class="mat-block tb-relation-direction" appearance="outline" subscriptSizing="dynamic">
             <mat-label translate>relation.direction</mat-label>
             <mat-select [ngModel]="direction"
                         (ngModelChange)="directionChanged($event)">

ui-ngx/src/app/modules/home/components/rule-node/action/advanced-processing-setting-row.component.html

@@ -17,7 +17,7 @@
 -->
 <section [formGroup]="processingSettingRowForm" class="tb-form-panel stroked no-gap no-padding-bottom">
   <div class="tb-form-panel-title mb-4">{{ title }}</div>
-  <mat-form-field>
+  <mat-form-field [appearance]="appearance">
     <mat-label translate>rule-node-config.save-time-series.strategy</mat-label>
     <mat-select formControlName="type">
       @for (strategy of processingStrategies; track strategy) {
@@ -34,6 +34,7 @@
       maxErrorText="{{ 'rule-node-config.save-time-series.deduplication-interval-min-max-range' | translate }}"
       [minTime]="1"
       [maxTime]="maxDeduplicateTime"
+      [appearance]="appearance"
       formControlName="deduplicationIntervalSecs">
     </tb-time-unit-input>
   }

ui-ngx/src/app/modules/home/components/rule-node/action/advanced-processing-setting-row.component.ts

@@ -32,6 +32,7 @@ import {
 } from '@home/components/rule-node/action/timeseries-config.models';
 import { isDefinedAndNotNull } from '@core/utils';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatFormFieldAppearance } from '@angular/material/form-field';
 
 @Component({
     selector: 'tb-advanced-processing-setting-row',
@@ -52,6 +53,9 @@ export class AdvancedProcessingSettingRowComponent implements ControlValueAccess
   @Input()
   title: string;
 
+  @Input()
+  appearance: MatFormFieldAppearance = 'fill';
+
   processingSettingRowForm = this.fb.group({
     type: [defaultAdvancedProcessingConfig.type],
     deduplicationIntervalSecs: [{value: 60, disabled: true}]

ui-ngx/src/app/modules/home/components/rule-node/action/advanced-processing-setting.component.html

@@ -24,30 +24,35 @@
   @if (timeseries) {
     <tb-advanced-processing-setting-row
       formControlName="timeseries"
+      appearance="outline"
       title="{{ 'rule-node-config.save-time-series.time-series' | translate }}"
     ></tb-advanced-processing-setting-row>
   }
   @if (attributes) {
     <tb-advanced-processing-setting-row
       formControlName="attributes"
+      appearance="outline"
       title="{{ 'rule-node-config.save-attribute.attributes' | translate }}"
     ></tb-advanced-processing-setting-row>
   }
   @if (latest) {
     <tb-advanced-processing-setting-row
       formControlName="latest"
+      appearance="outline"
       title="{{ 'rule-node-config.save-time-series.latest' | translate }}"
     ></tb-advanced-processing-setting-row>
   }
   @if (webSockets) {
     <tb-advanced-processing-setting-row
       formControlName="webSockets"
+      appearance="outline"
       title="{{ 'rule-node-config.save-time-series.web-sockets' | translate }}"
     ></tb-advanced-processing-setting-row>
   }
   @if (calculatedFields) {
     <tb-advanced-processing-setting-row
       formControlName="calculatedFields"
+      appearance="outline"
       title="{{ 'rule-node-config.save-time-series.calculated-fields-and-alarm-rules' | translate }}"
     ></tb-advanced-processing-setting-row>
   }

ui-ngx/src/app/modules/home/components/rule-node/action/assign-customer-config.component.html

@@ -17,7 +17,7 @@
 -->
 <section [formGroup]="assignCustomerConfigForm" class="flex flex-col">
   <div class="tb-form-panel no-padding no-border">
-    <mat-form-field class="mat-block" subscriptSizing="dynamic">
+    <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
       <mat-label translate>rule-node-config.customer-name-pattern</mat-label>
       <input required matInput formControlName="customerNamePattern">
       @if (assignCustomerConfigForm.get('customerNamePattern').hasError('required') ||

ui-ngx/src/app/modules/home/components/rule-node/action/attributes-config.component.html

@@ -28,7 +28,7 @@
       </tb-toggle-select>
     </div>
     @if(!attributesConfigForm.get('processingSettings.isAdvanced').value) {
-      <mat-form-field>
+      <mat-form-field appearance="outline">
         <mat-label translate>rule-node-config.save-attribute.strategy</mat-label>
         <mat-select formControlName="type">
           @for (strategy of processingStrategies; track strategy) {
@@ -39,6 +39,7 @@
 
       @if(attributesConfigForm.get('processingSettings.type').value === ProcessingType.DEDUPLICATE) {
         <tb-time-unit-input
+          appearance="outline"
           required
           labelText="{{ 'rule-node-config.save-attribute.deduplication-interval' | translate }}"
           requiredText="{{ 'rule-node-config.save-attribute.deduplication-interval-required' | translate }}"
@@ -63,7 +64,7 @@
       rule-node-config.save-attribute.scope
     </div>
     <div class="tb-form-row no-border no-padding tb-standard-fields">
-      <mat-form-field class="flex" subscriptSizing="dynamic">
+      <mat-form-field class="flex" subscriptSizing="dynamic" appearance="outline">
         <mat-label>{{ 'rule-node-config.attributes-scope' | translate }}</mat-label>
         <mat-select required
                     class="tb-entity-type-select" matInput formControlName="scope">
@@ -74,7 +75,7 @@
           }
         </mat-select>
       </mat-form-field>
-      <mat-form-field class="flex" subscriptSizing="dynamic">
+      <mat-form-field class="flex" subscriptSizing="dynamic" appearance="outline">
         <mat-label>{{ 'rule-node-config.attributes-scope-value' | translate }}</mat-label>
         <input type="text" matInput readonly disabled [ngModel]="attributesConfigForm.get('scope').value" [ngModelOptions]="{standalone: true}">
         <button type="button"

ui-ngx/src/app/modules/home/components/rule-node/action/clear-alarm-config.component.html

@@ -62,7 +62,7 @@
       {{ testScriptLabel | translate }}
     </button>
   </div>
-  <mat-form-field class="mat-block" subscriptSizing="dynamic">
+  <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
     <mat-label translate>rule-node-config.alarm-type</mat-label>
     <input required matInput formControlName="alarmType">
     @if (clearAlarmConfigForm.get('alarmType').hasError('required')) {

ui-ngx/src/app/modules/home/components/rule-node/action/create-alarm-config.component.html

@@ -77,7 +77,7 @@
   }
   @if (createAlarmConfigForm.get('useMessageAlarmData').value === false) {
     <section class="flex flex-col">
-      <mat-form-field class="flex-1" subscriptSizing="dynamic">
+      <mat-form-field class="flex-1" subscriptSizing="dynamic" appearance="outline">
         <mat-label translate>rule-node-config.alarm-type</mat-label>
         <input required matInput formControlName="alarmType">
         @if (createAlarmConfigForm.get('alarmType').hasError('required')) {
@@ -91,7 +91,7 @@
         {{ 'rule-node-config.use-alarm-severity-pattern' | translate }}
       </mat-checkbox>
       @if (!createAlarmConfigForm.get('dynamicSeverity').value) {
-        <mat-form-field class="flex-1">
+        <mat-form-field class="flex-1" appearance="outline">
           <mat-label translate>rule-node-config.alarm-severity</mat-label>
           <mat-select formControlName="severity" required>
             @for (severity of alarmSeverities; track severity) {
@@ -108,7 +108,7 @@
         </mat-form-field>
       }
       @if (createAlarmConfigForm.get('dynamicSeverity').value) {
-        <mat-form-field class="flex-1" subscriptSizing="dynamic">
+        <mat-form-field class="flex-1" subscriptSizing="dynamic" appearance="outline">
           <mat-label translate>rule-node-config.alarm-severity-pattern</mat-label>
           <input matInput formControlName="severity" required>
           @if (createAlarmConfigForm.get('severity').hasError('required')) {
@@ -124,7 +124,7 @@
       </mat-checkbox>
       @if (createAlarmConfigForm.get('propagate').value === true) {
         <section>
-          <mat-form-field floatLabel="always" class="mat-block" subscriptSizing="dynamic">
+          <mat-form-field floatLabel="always" class="mat-block" subscriptSizing="dynamic" appearance="outline">
             <mat-label translate>rule-node-config.relation-types-list</mat-label>
             <mat-chip-grid #relationTypesChipList>
               @for (key of createAlarmConfigForm.get('relationTypes').value; track key) {

ui-ngx/src/app/modules/home/components/rule-node/action/create-relation-config.component.html

@@ -19,7 +19,7 @@
   <div class="tb-form-panel stroked no-padding-bottom">
     <div class="tb-form-panel-title" translate>rule-node-config.relation-parameters</div>
     <div class="flex flex-col">
-      <mat-form-field class="mat-block" hideRequiredMarker>
+      <mat-form-field class="mat-block" hideRequiredMarker appearance="outline">
         <mat-label translate>relation.direction</mat-label>
         <mat-select required matInput formControlName="direction">
           @for (type of directionTypes; track type) {
@@ -30,6 +30,7 @@
         </mat-select>
       </mat-form-field>
       <tb-relation-type-autocomplete
+        appearance="outline"
         required
         formControlName="relationType">
       </tb-relation-type-autocomplete>
@@ -40,6 +41,7 @@
     <div class="tb-form-panel-title" translate>rule-node-config.target-entity</div>
     <div class="flex flex-row gap-4">
       <tb-entity-type-select
+        appearance="outline"
         class="flex-1"
         showLabel
         required
@@ -50,6 +52,7 @@
       @if (createRelationConfigForm.get('entityType').value &&
         createRelationConfigForm.get('entityType').value !== entityType.TENANT) {
         <mat-form-field
+          appearance="outline"
           class="mat-block flex-1">
           <mat-label>{{ entityTypeNamePatternTranslation.get(createRelationConfigForm.get('entityType').value) | translate }}</mat-label>
           <input required matInput formControlName="entityNamePattern">
@@ -59,6 +62,7 @@
       @if (createRelationConfigForm.get('entityType').value === entityType.DEVICE ||
         createRelationConfigForm.get('entityType').value === entityType.ASSET) {
         <mat-form-field
+          appearance="outline"
           class="mat-block flex-1">
           <mat-label translate>rule-node-config.profile-name</mat-label>
           <input matInput formControlName="entityTypePattern">

ui-ngx/src/app/modules/home/components/rule-node/action/delete-attributes-config.component.html

@@ -20,7 +20,7 @@
     <tb-example-hint [hintText]="'rule-node-config.attributes-scope-hint'">
     </tb-example-hint>
     <div class="tb-form-row no-border no-padding tb-standard-fields">
-      <mat-form-field class="flex">
+      <mat-form-field class="flex" appearance="outline">
         <mat-label>{{ 'rule-node-config.attributes-scope' | translate }}</mat-label>
         <mat-select required
                     class="tb-entity-type-select" matInput formControlName="scope">
@@ -31,7 +31,7 @@
           }
         </mat-select>
       </mat-form-field>
-      <mat-form-field class="flex">
+      <mat-form-field class="flex" appearance="outline">
         <mat-label>{{ 'rule-node-config.attributes-scope-value' | translate }}</mat-label>
         <input type="text" matInput readonly disabled [ngModel]="deleteAttributesConfigForm.get('scope').value" [ngModelOptions]="{standalone: true}">
         <button type="button"
@@ -49,7 +49,7 @@
     </div>
   </div>
 
-  <mat-form-field class="mat-block" subscriptSizing="dynamic">
+  <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
     <mat-label>{{ 'rule-node-config.attributes-keys' | translate }}</mat-label>
     <mat-chip-grid formControlName="keys" #attributeChipList>
       @for (key of deleteAttributesConfigForm.get('keys').value; track key) {

ui-ngx/src/app/modules/home/components/rule-node/action/delete-relation-config.component.html

@@ -19,7 +19,7 @@
   <div class="tb-form-panel stroked no-padding-bottom">
     <div class="tb-form-panel-title" translate>rule-node-config.relation-parameters</div>
     <div class="flex flex-col">
-      <mat-form-field class="mat-block" hideRequiredMarker>
+      <mat-form-field class="mat-block" hideRequiredMarker appearance="outline">
         <mat-label translate>relation.direction</mat-label>
         <mat-select required matInput formControlName="direction">
           @for (type of directionTypes; track type) {
@@ -30,6 +30,7 @@
         </mat-select>
       </mat-form-field>
       <tb-relation-type-autocomplete
+        appearance="outline"
         required
         formControlName="relationType">
       </tb-relation-type-autocomplete>
@@ -49,11 +50,13 @@
             class="flex-1"
             showLabel
             required
+            appearance="outline"
             [allowedEntityTypes]="allowedEntityTypes"
             formControlName="entityType">
           </tb-entity-type-select>
           @if (deleteRelationConfigForm.get('entityType').value && deleteRelationConfigForm.get('entityType').value !== entityType.TENANT) {
             <mat-form-field
+              appearance="outline"
               class="mat-block flex-1">
               <mat-label>{{ entityTypeNamePatternTranslation.get(deleteRelationConfigForm.get('entityType').value) | translate }}</mat-label>
               <input required matInput formControlName="entityNamePattern">

ui-ngx/src/app/modules/home/components/rule-node/action/device-state-config.component.html

@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="deviceState">
-  <mat-form-field class="mat-block" subscriptSizing="dynamic">
+  <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
     <mat-label>{{ 'rule-node-config.select-device-connectivity-event' | translate }}</mat-label>
     <mat-select formControlName="event">
       @for (eventOption of eventOptions; track eventOption) {

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

@@ -19,7 +19,7 @@
   <div class="tb-form-panel no-padding-bottom stroked">
     <div class="tb-form-panel-title" translate>rule-node-config.generation-parameters</div>
     <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">
-      <mat-form-field class="flex">
+      <mat-form-field class="flex" appearance="outline">
         <mat-label translate>rule-node-config.message-count</mat-label>
         <input required type="number" min="0" step="1" matInput formControlName="msgCount">
         @if (generatorConfigForm.get('msgCount').hasError('required')) {
@@ -33,7 +33,7 @@
           </mat-error>
         }
       </mat-form-field>
-      <mat-form-field class="flex">
+      <mat-form-field class="flex" appearance="outline">
         <mat-label translate>rule-node-config.generation-frequency-seconds</mat-label>
         <input required type="number" min="1" step="1" matInput formControlName="periodInSeconds">
         @if (generatorConfigForm.get('periodInSeconds').hasError('required')) {
@@ -53,6 +53,7 @@
   <div class="tb-form-panel no-padding-bottom stroked">
     <div class="tb-form-panel-title" translate>rule-node-config.originator</div>
     <tb-entity-select class="flex-1"
+                      appearance="outline"
                       required="true"
                       useAliasEntityTypes="true"
                       [allowedEntityTypes]="allowedEntityTypes"

ui-ngx/src/app/modules/home/components/rule-node/action/gps-geo-action-config.component.html

@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>rule-node-config.coordinate-field-names</div>
     <section>
       <div class="flex flex-row gap-4">
-        <mat-form-field class="mat-block max-w-50% flex-full">
+        <mat-form-field class="mat-block max-w-50% flex-full" appearance="outline">
           <mat-label>{{ 'rule-node-config.latitude-field-name' | translate }}</mat-label>
           <input matInput formControlName="latitudeKeyName" required>
           @if (geoActionConfigForm.get('latitudeKeyName').hasError('required')) {
@@ -29,7 +29,7 @@
             </mat-error>
           }
         </mat-form-field>
-        <mat-form-field class="mat-block max-w-50% flex-full">
+        <mat-form-field class="mat-block max-w-50% flex-full" appearance="outline">
           <mat-label>{{ 'rule-node-config.longitude-field-name' | translate }}</mat-label>
           <input matInput formControlName="longitudeKeyName" required>
           @if (geoActionConfigForm.get('longitudeKeyName').hasError('required')) {
@@ -45,7 +45,7 @@
   <section class="tb-form-panel stroked" [class.no-padding-bottom]="!defaultPaddingEnable">
     <div class="tb-form-panel-title" translate>rule-node-config.geofence-configuration</div>
     <section class="flex flex-col">
-      <mat-form-field class="mat-block flex-1" hideRequiredMarker>
+      <mat-form-field class="mat-block flex-1" hideRequiredMarker appearance="outline">
         <mat-label>{{ 'rule-node-config.perimeter-type' | translate }}</mat-label>
         <mat-select formControlName="perimeterType">
           @for (type of perimeterTypes; track type) {
@@ -70,7 +70,7 @@
         </mat-slide-toggle>
       </div>
       @if (geoActionConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value) {
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" appearance="outline">
           <mat-label>{{ 'rule-node-config.perimeter-key-name' | translate }}</mat-label>
           <input matInput formControlName="perimeterKeyName" required>
           @if (geoActionConfigForm.get('perimeterKeyName').hasError('required')) {
@@ -83,8 +83,7 @@
       }
       @if (geoActionConfigForm.get('perimeterType').value === perimeterType.CIRCLE &&
         !geoActionConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value) {
-        <div class="flex flex-col"
-             >
+        <div class="flex flex-col">
           <div class="flex flex-row gap-4">
             <mat-form-field class="flex-1">
               <mat-label>{{ 'rule-node-config.circle-center-latitude' | translate }}</mat-label>
@@ -95,7 +94,7 @@
                 </mat-error>
               }
             </mat-form-field>
-            <mat-form-field class="flex-1">
+            <mat-form-field class="flex-1" appearance="outline">
               <mat-label>{{ 'rule-node-config.circle-center-longitude' | translate }}</mat-label>
               <input type="number" min="-180" max="180" step="0.1" matInput formControlName="centerLongitude" required>
               @if (geoActionConfigForm.get('centerLongitude').hasError('required')) {
@@ -106,7 +105,7 @@
             </mat-form-field>
           </div>
           <div class="flex flex-row gap-4">
-            <mat-form-field class="flex-1">
+            <mat-form-field class="flex-1" appearance="outline">
               <mat-label>{{ 'rule-node-config.range' | translate }}</mat-label>
               <input type="number" min="0" step="0.1" matInput formControlName="range" required>
               @if (geoActionConfigForm.get('range').hasError('required')) {
@@ -115,7 +114,7 @@
                 </mat-error>
               }
             </mat-form-field>
-            <mat-form-field class="flex-1">
+            <mat-form-field class="flex-1" appearance="outline">
               <mat-label>{{ 'rule-node-config.range-units' | translate }}</mat-label>
               <mat-select formControlName="rangeUnit" required>
                 @for (type of rangeUnits; track type) {
@@ -136,7 +135,7 @@
       @if (geoActionConfigForm.get('perimeterType').value === perimeterType.POLYGON &&
         !geoActionConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value) {
         <div class="flex flex-col">
-          <mat-form-field class="mat-block" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
             <mat-label translate>rule-node-config.polygon-definition</mat-label>
             <input matInput formControlName="polygonsDefinition" required>
             <mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
@@ -174,7 +173,7 @@
       @if (geoActionConfigForm.get('reportPresenceStatusOnEachMessage').value === false) {
         <div>
           <div class="flex flex-col gt-sm:flex-row gt-sm:gap-2">
-            <mat-form-field class="mat-block flex-1">
+            <mat-form-field class="mat-block flex-1" appearance="outline">
               <mat-label translate>rule-node-config.min-inside-duration</mat-label>
               <input type="number" step="1" min="1" max="2147483647" matInput formControlName="minInsideDuration" required>
               @if (geoActionConfigForm.get('minInsideDuration').hasError('required')) {
@@ -193,7 +192,7 @@
                 </mat-error>
               }
             </mat-form-field>
-            <mat-form-field class="mat-block flex-1">
+            <mat-form-field class="mat-block flex-1" appearance="outline">
               <mat-label translate>rule-node-config.min-inside-duration-time-unit</mat-label>
               <mat-select formControlName="minInsideDurationTimeUnit" required>
                 @for (timeUnit of timeUnits; track timeUnit) {
@@ -205,7 +204,7 @@
             </mat-form-field>
           </div>
           <div class="flex flex-col gt-sm:flex-row gt-sm:gap-2">
-            <mat-form-field class="mat-block flex-1">
+            <mat-form-field class="mat-block flex-1" appearance="outline">
               <mat-label translate>rule-node-config.min-outside-duration</mat-label>
               <input type="number" step="1" min="1" max="2147483647" matInput formControlName="minOutsideDuration" required>
               @if (geoActionConfigForm.get('minOutsideDuration').hasError('required')) {
@@ -224,7 +223,7 @@
                 </mat-error>
               }
             </mat-form-field>
-            <mat-form-field class="mat-block flex-1">
+            <mat-form-field class="mat-block flex-1" appearance="outline">
               <mat-label translate>rule-node-config.min-outside-duration-time-unit</mat-label>
               <mat-select formControlName="minOutsideDurationTimeUnit" required>
                 @for (timeUnit of timeUnits; track timeUnit) {

ui-ngx/src/app/modules/home/components/rule-node/action/math-function-config.component.html

@@ -19,6 +19,7 @@
   <tb-math-function-autocomplete
     class="flex-full max-h-30% xs:max-h-full md:max-h-full"
     required
+    appearance="outline"
     formControlName="operation">
   </tb-math-function-autocomplete>
   <fieldset class="fields-group flex flex-col gap-2">
@@ -31,7 +32,7 @@
     <fieldset
       class="fields-group flex flex-col gap-2">
       <legend class="group-title">{{'rule-node-config.custom-expression-field-input' | translate }} *</legend>
-      <mat-form-field class="mat-block no-margin-top flex-1" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block no-margin-top flex-1" subscriptSizing="dynamic" appearance="outline">
         <input matInput formControlName="customFunction" required/>
         <div  matSuffix
               class="pr-2"
@@ -51,7 +52,7 @@
   <fieldset class="fields-group flex flex-col gap-2">
     <legend class="group-title" translate>rule-node-config.result-title</legend>
     <div formGroupName="result">
-      <mat-form-field class="mat-block flex-1">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>rule-node-config.type-field-input</mat-label>
         <mat-select formControlName="type" required>
           <mat-select-trigger>
@@ -75,7 +76,7 @@
       </mat-form-field>
       <div class="xs:flex-col gt-xs:gap-4 flex flex-1 flex-row">
         @if (mathFunctionConfigForm.get('result').get('type').value === ArgumentTypeResult.ATTRIBUTE) {
-          <mat-form-field class="mat-block flex-1">
+          <mat-form-field class="mat-block flex-1" appearance="outline">
             <mat-label translate>rule-node-config.attribute-scope-field-input</mat-label>
             <mat-select required formControlName="attributeScope">
               @for (scope of attributeScopeResult; track scope) {
@@ -86,7 +87,7 @@
             </mat-select>
           </mat-form-field>
         }
-        <mat-form-field floatLabel="always" class="mat-block flex-1">
+        <mat-form-field floatLabel="always" class="mat-block flex-1" appearance="outline">
           <mat-label translate>rule-node-config.key-field-input</mat-label>
           <input matInput formControlName="key" required/>
           <mat-icon class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix
@@ -100,7 +101,7 @@
         </mat-form-field>
       </div>
       <div class="xs:flex-col gt-xs:gap-4 flex flex-1 flex-row">
-        <mat-form-field floatLabel="always" class="mat-block flex-1" subscriptSizing="dynamic">
+        <mat-form-field floatLabel="always" class="mat-block flex-1" subscriptSizing="dynamic" appearance="outline">
           <mat-label translate>rule-node-config.number-floating-point-field-input</mat-label>
           <input formControlName="resultValuePrecision"
                  matInput
@@ -110,8 +111,7 @@
         </mat-form-field>
       </div>
       @if ([ArgumentTypeResult.ATTRIBUTE, ArgumentTypeResult.TIME_SERIES].includes(mathFunctionConfigForm.get('result').get('type').value)) {
-        <div
-          class="xs:flex-col gt-xs:gap-4 flex flex-1 flex-row items-stretch justify-start" style="padding-top: 16px;">
+        <div class="xs:flex-col gt-xs:gap-4 flex flex-1 flex-row items-stretch justify-start" style="padding-top: 16px;">
           <mat-checkbox formControlName="addToBody">
             {{'rule-node-config.add-to-message-field-input' | translate }}
           </mat-checkbox>

ui-ngx/src/app/modules/home/components/rule-node/action/msg-count-config.component.html

@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="msgCountConfigForm" class="flex flex-col">
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.interval-seconds</mat-label>
     <input required type="number" min="1" step="1" matInput formControlName="interval">
     @if (msgCountConfigForm.get('interval').hasError('required')) {
@@ -30,7 +30,7 @@
       </mat-error>
     }
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.output-timeseries-key-prefix</mat-label>
     <input required matInput formControlName="telemetryPrefix">
     @if (msgCountConfigForm.get('telemetryPrefix').hasError('required')) {

ui-ngx/src/app/modules/home/components/rule-node/action/msg-delay-config.component.html

@@ -22,6 +22,7 @@
   <div class="tb-hint" translate>rule-node-config.use-metadata-period-in-seconds-patterns-hint</div>
   @if (msgDelayConfigForm.get('useMetadataPeriodInSecondsPatterns').value !== true) {
     <mat-form-field
+      appearance="outline"
       class="mat-block">
       <mat-label translate>rule-node-config.period-seconds</mat-label>
       <input required type="number" min="0" step="1" matInput formControlName="periodInSeconds">
@@ -37,7 +38,7 @@
       }
     </mat-form-field>
   } @else {
-    <mat-form-field class="mat-block" subscriptSizing="dynamic">
+    <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
       <mat-label translate>rule-node-config.period-in-seconds-pattern</mat-label>
       <input required matInput formControlName="periodInSecondsPattern">
       @if (msgDelayConfigForm.get('periodInSecondsPattern').hasError('required')) {
@@ -48,7 +49,7 @@
       <mat-hint translate>rule-node-config.general-pattern-hint</mat-hint>
     </mat-form-field>
   }
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.max-pending-messages</mat-label>
     <input required type="number" min="1" max="100000" step="1" matInput formControlName="maxPendingMsgs">
     @if (msgDelayConfigForm.get('maxPendingMsgs').hasError('required')) {

ui-ngx/src/app/modules/home/components/rule-node/action/push-to-cloud-config.component.html

@@ -20,7 +20,7 @@
     <tb-example-hint [hintText]="'rule-node-config.attributes-scope-hint'">
     </tb-example-hint>
     <div class="tb-form-row no-border no-padding tb-standard-fields">
-      <mat-form-field class="flex">
+      <mat-form-field class="flex" appearance="outline">
         <mat-label>{{ 'rule-node-config.attributes-scope' | translate }}</mat-label>
         <mat-select required
                     class="tb-entity-type-select" matInput formControlName="scope">
@@ -31,7 +31,7 @@
           }
         </mat-select>
       </mat-form-field>
-      <mat-form-field class="flex">
+      <mat-form-field class="flex" appearance="outline">
         <mat-label>{{ 'rule-node-config.attributes-scope-value' | translate }}</mat-label>
         <input type="text" matInput readonly disabled [ngModel]="pushToCloudConfigForm.get('scope').value" [ngModelOptions]="{standalone: true}">
         <button type="button"

ui-ngx/src/app/modules/home/components/rule-node/action/push-to-edge-config.component.html

@@ -20,7 +20,7 @@
     <tb-example-hint [hintText]="'rule-node-config.attributes-scope-hint'">
     </tb-example-hint>
     <div class="tb-form-row no-border no-padding tb-standard-fields">
-      <mat-form-field class="flex">
+      <mat-form-field class="flex" appearance="outline">
         <mat-label>{{ 'rule-node-config.attributes-scope' | translate }}</mat-label>
         <mat-select required
                     class="tb-entity-type-select" matInput formControlName="scope">
@@ -31,7 +31,7 @@
           }
         </mat-select>
       </mat-form-field>
-      <mat-form-field class="flex">
+      <mat-form-field class="flex" appearance="outline">
         <mat-label>{{ 'rule-node-config.attributes-scope-value' | translate }}</mat-label>
         <input type="text" matInput readonly disabled [ngModel]="pushToEdgeConfigForm.get('scope').value" [ngModelOptions]="{standalone: true}">
         <button type="button"

ui-ngx/src/app/modules/home/components/rule-node/action/rpc-reply-config.component.html

@@ -20,15 +20,15 @@
   <tb-example-hint [hintText]="'rule-node-config.rpc-reply-routing-configuration-hint'">
   </tb-example-hint>
   <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">
-    <mat-form-field class="flex">
+    <mat-form-field class="flex" appearance="outline">
       <mat-label translate>rule-node-config.service-id-metadata-attribute</mat-label>
       <input matInput formControlName="serviceIdMetaDataAttribute">
     </mat-form-field>
-    <mat-form-field class="flex">
+    <mat-form-field class="flex" appearance="outline">
       <mat-label translate>rule-node-config.session-id-metadata-attribute</mat-label>
       <input matInput formControlName="sessionIdMetaDataAttribute">
     </mat-form-field>
-    <mat-form-field class="flex">
+    <mat-form-field class="flex" appearance="outline">
       <mat-label translate>rule-node-config.request-id-metadata-attribute</mat-label>
       <input matInput formControlName="requestIdMetaDataAttribute">
     </mat-form-field>

ui-ngx/src/app/modules/home/components/rule-node/action/rpc-request-config.component.html

@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="rpcRequestConfigForm" class="flex flex-col">
-  <mat-form-field class="mat-block flex-1">
+  <mat-form-field class="mat-block flex-1" appearance="outline">
     <mat-label translate>rule-node-config.timeout-sec</mat-label>
     <input type="number" min="0" step="1" matInput formControlName="timeoutInSeconds" required>
     @if (rpcRequestConfigForm.get('timeoutInSeconds').hasError('required')) {

ui-ngx/src/app/modules/home/components/rule-node/action/save-to-custom-table-config.component.html

@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="saveToCustomTableConfigForm" class="tb-form-panel no-border no-padding">
-  <mat-form-field class="mat-block" subscriptSizing="dynamic">
+  <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
     <mat-label translate>rule-node-config.custom-table-name</mat-label>
     <input required matInput formControlName="tableName">
     <mat-icon class="help-icon m-2 cursor-pointer"
@@ -45,7 +45,7 @@
     [valRequiredText]="'rule-node-config.table-col-required' | translate"
     [hintText]="'rule-node-config.fields-mapping-hint'">
   </tb-kv-map-config>
-  <mat-form-field class="mat-block flex-1">
+  <mat-form-field class="mat-block flex-1" appearance="outline">
     <mat-label translate>rule-node-config.default-ttl</mat-label>
     <input type="number" min="0" step="1" matInput formControlName="defaultTtl" required>
     <mat-hint translate>rule-node-config.default-ttl-zero-hint</mat-hint>

ui-ngx/src/app/modules/home/components/rule-node/action/send-rest-api-call-reply-config.component.html

@@ -20,11 +20,11 @@
   <tb-example-hint [hintText]="'rule-node-config.reply-routing-configuration-hint'">
   </tb-example-hint>
   <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">
-    <mat-form-field class="flex">
+    <mat-form-field class="flex" appearance="outline">
       <mat-label translate>rule-node-config.service-id-metadata-attribute</mat-label>
       <input matInput formControlName="serviceIdMetaDataAttribute">
     </mat-form-field>
-    <mat-form-field class="flex">
+    <mat-form-field class="flex" appearance="outline">
       <mat-label translate>rule-node-config.request-id-metadata-attribute</mat-label>
       <input matInput formControlName="requestIdMetaDataAttribute">
     </mat-form-field>

ui-ngx/src/app/modules/home/components/rule-node/action/timeseries-config.component.html

@@ -28,7 +28,7 @@
       </tb-toggle-select>
     </div>
     @if(!timeseriesConfigForm.get('processingSettings.isAdvanced').value) {
-      <mat-form-field>
+      <mat-form-field appearance="outline">
         <mat-label translate>rule-node-config.save-time-series.strategy</mat-label>
         <mat-select formControlName="type">
           @for (strategy of processingStrategies; track strategy) {
@@ -39,6 +39,7 @@
 
       @if(timeseriesConfigForm.get('processingSettings.type').value === ProcessingType.DEDUPLICATE) {
         <tb-time-unit-input
+          appearance="outline"
           required
           labelText="{{ 'rule-node-config.save-time-series.deduplication-interval' | translate }}"
           requiredText="{{ 'rule-node-config.save-time-series.deduplication-interval-required' | translate }}"
@@ -70,6 +71,7 @@
           </mat-slide-toggle>
         </div>
         <tb-time-unit-input
+          appearance="outline"
           required
           subscriptSizing="dynamic"
           labelText="{{ 'rule-node-config.default-ttl' | translate }}"

ui-ngx/src/app/modules/home/components/rule-node/action/unassign-customer-config.component.html

@@ -26,7 +26,7 @@
         </mat-slide-toggle>
       </div>
       @if (unassignCustomerConfigForm.get('unassignFromCustomer').value) {
-        <mat-form-field class="mat-block" subscriptSizing="dynamic">
+        <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
           <mat-label translate>rule-node-config.customer-name-pattern</mat-label>
           <input required matInput formControlName="customerNamePattern">
           @if (unassignCustomerConfigForm.get('customerNamePattern').hasError('required') ||

ui-ngx/src/app/modules/home/components/rule-node/common/arguments-map-config.component.html

@@ -45,8 +45,8 @@
                 <span
                 style="padding: 0 10px; min-width: 20px;">{{argumentControl.get('name').value}}.</span>
               }
-              <div class="flex flex-1 flex-col">
-                <mat-form-field class="mat-block">
+              <div class="flex flex-1 flex-col mt-2">
+                <mat-form-field class="mat-block" appearance="outline">
                   <mat-label translate>rule-node-config.argument-source-field-input</mat-label>
                   <mat-select [formControl]="argumentControl.get('type')" required>
                     <mat-select-trigger>
@@ -70,8 +70,7 @@
                 </mat-form-field>
                 <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
                   @if (argumentControl.get('type').value && argumentControl.get('type').value !== ArgumentType.CONSTANT) {
-                    <mat-form-field floatLabel="always" class="mat-block gt-xs:max-w-50% gt-xs:flex-full"
-                                    >
+                    <mat-form-field floatLabel="always" class="mat-block gt-xs:max-w-50% gt-xs:flex-full" appearance="outline">
                       <mat-label translate>rule-node-config.argument-key-field-input</mat-label>
                       <input [formControl]="argumentControl.get('key')" matInput required/>
                       <mat-icon class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix
@@ -87,8 +86,7 @@
                     </mat-form-field>
                   }
                   @if (argumentControl.get('type').value === ArgumentType.CONSTANT) {
-                    <mat-form-field floatLabel="always" class="mat-block flex-1"
-                                    >
+                    <mat-form-field floatLabel="always" class="mat-block flex-1" appearance="outline">
                       <mat-label translate>rule-node-config.constant-value-field-input</mat-label>
                       <input [formControl]="argumentControl.get('key')"
                              matInput
@@ -103,15 +101,14 @@
                     </mat-form-field>
                   }
                   @if (argumentControl.get('type').value && argumentControl.get('type').value !== ArgumentType.CONSTANT) {
-                    <mat-form-field
-                      floatLabel="always" class="mat-block gt-xs:max-w-50% gt-xs:flex-full">
+                    <mat-form-field floatLabel="always" class="mat-block gt-xs:max-w-50% gt-xs:flex-full" appearance="outline">
                       <mat-label translate>rule-node-config.default-value-field-input</mat-label>
                       <input [formControl]="argumentControl.get('defaultValue')" matInput step="1" type="number"/>
                     </mat-form-field>
                   }
                 </div>
                 @if (argumentControl.get('type').value === ArgumentType.ATTRIBUTE) {
-                  <mat-form-field class="mat-block">
+                  <mat-form-field class="mat-block" appearance="outline">
                     <mat-label translate>rule-node-config.attribute-scope-field-input</mat-label>
                     <mat-select required [formControl]="argumentControl.get('attributeScope')">
                       @for (scope of attributeScope; track scope) {

ui-ngx/src/app/modules/home/components/rule-node/common/credentials-config.component.html

@@ -24,7 +24,7 @@
       </mat-panel-description>
     </mat-expansion-panel-header>
     <ng-template matExpansionPanelContent>
-      <mat-form-field class="mat-block" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
         <mat-label translate>rule-node-config.credentials-type</mat-label>
         <mat-select formControlName="type" required>
           @for (credentialsType of allCredentialsTypes; track credentialsType) {
@@ -44,7 +44,7 @@
         <section class="flex flex-col">
         @switch (credentialsConfigFormGroup.get('type').value) {
             @case("basic") {
-              <mat-form-field class="mat-block">
+              <mat-form-field class="mat-block" appearance="outline">
                 <mat-label translate>rule-node-config.username</mat-label>
                 <input required matInput formControlName="username">
                 @if (credentialsConfigFormGroup.get('username').hasError('required')) {
@@ -53,7 +53,7 @@
                   </mat-error>
                 }
               </mat-form-field>
-              <mat-form-field class="mat-block">
+              <mat-form-field class="mat-block" appearance="outline">
                 <mat-label translate>rule-node-config.password</mat-label>
                 <input type="password" [required]="passwordFieldRequired" matInput formControlName="password" autocomplete="new-password">
                 <tb-toggle-password matSuffix></tb-toggle-password>

ui-ngx/src/app/modules/home/components/rule-node/common/device-relations-query-config.component.html

@@ -17,7 +17,7 @@
 -->
 <section class="flex flex-col" [formGroup]="deviceRelationsQueryFormGroup">
   <div class="flex flex-row gap-5">
-    <mat-form-field class="mat-block max-w-50% flex-full" subscriptSizing="dynamic" style="min-width: 100px;" hideRequiredMarker>
+    <mat-form-field class="mat-block max-w-50% flex-full" subscriptSizing="dynamic" style="min-width: 100px;" hideRequiredMarker appearance="outline">
       <mat-label translate>relation.direction</mat-label>
       <mat-select required formControlName="direction">
         @for (type of directionTypes; track type) {
@@ -27,7 +27,7 @@
         }
       </mat-select>
     </mat-form-field>
-    <mat-form-field floatLabel="always" class="mat-block max-w-50% flex-full">
+    <mat-form-field floatLabel="always" class="mat-block max-w-50% flex-full" appearance="outline">
       <mat-label translate>rule-node-config.max-relation-level</mat-label>
       <input matInput
              type="text"
@@ -57,10 +57,12 @@
     </div>
   }
   <tb-relation-type-autocomplete
+    appearance="outline"
     class="flex-1"
     formControlName="relationType">
   </tb-relation-type-autocomplete>
   <tb-entity-subtype-list
+    appearance="outline"
     required
     [label]="'rule-node-config.device-profiles' | translate"
     [entityType]="entityType.DEVICE"

ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config-old.component.html

@@ -31,7 +31,7 @@
       <div class="row flex flex-row items-center justify-start gap-2"
            formArrayName="keyVals"
            >
-        <mat-form-field class="cell mat-block flex-1">
+        <mat-form-field class="cell mat-block flex-1" appearance="outline">
           <input [formControl]="keyValControl.get('key')" matInput required
                  placeholder="{{ keyText | translate }}"/>
           @if (keyValControl.get('key').hasError('required')) {
@@ -40,7 +40,7 @@
             </mat-error>
           }
         </mat-form-field>
-        <mat-form-field class="cell mat-block flex-1">
+        <mat-form-field class="cell mat-block flex-1" appearance="outline">
           <input [formControl]="keyValControl.get('value')" matInput required
                  placeholder="{{ valText | translate }}"/>
           @if (keyValControl.get('value').hasError('required')) {

ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config.component.html

@@ -47,8 +47,7 @@
       </div>
       <div class="tb-form-table-body">
         @for (keyValControl of keyValsFormArray().controls; track keyValControl) {
-          <div class="tb-form-table-row"
-               >
+          <div class="tb-form-table-row">
             <mat-form-field class="tb-inline-field field-space" appearance="outline" subscriptSizing="dynamic">
               <input [placeholder]="keyText+'*'" [formControl]="keyValControl.get('key')" matInput/>
             </mat-form-field>
@@ -56,7 +55,7 @@
               <input [placeholder]="valText+'*'" [formControl]="keyValControl.get('value')" matInput/>
             </mat-form-field>
             <div class="tb-form-table-row-cell-buttons">
-              <button [class.tb-hidden]="keyValsFormArray().controls.length === 1"
+              <button [class.tb-hidden]="required && keyValsFormArray().controls.length === 1"
                       type="button"
                       mat-icon-button
                       (click)="removeKeyVal($index)"
@@ -67,6 +66,10 @@
               </button>
             </div>
           </div>
+        } @empty {
+          @if (emptyText) {
+            <div class="tb-prompt flex items-center justify-center">{{ emptyText }}</div>
+          }
         }
       </div>
     </div>

ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config.component.ts

@@ -80,6 +80,8 @@ export class KvMapConfigComponent implements ControlValueAccessor, OnInit, Valid
 
   @Input() hintText: string;
 
+  @Input() emptyText: string;
+
   @Input() popupHelpLink: string;
 
   @Input()
@@ -171,7 +173,7 @@ export class KvMapConfigComponent implements ControlValueAccessor, OnInit, Valid
   };
 
   writeValue(keyValMap: { [key: string]: string }): void {
-    const keyValuesData = Object.keys(keyValMap).map(key => ({key, value: keyValMap[key]}));
+    const keyValuesData = Object.keys(keyValMap ?? {}).map(key => ({key, value: keyValMap[key]}));
     if (this.keyValsFormArray().length === keyValuesData.length) {
       this.keyValsFormArray().patchValue(keyValuesData, {emitEvent: false});
     } else {

ui-ngx/src/app/modules/home/components/rule-node/common/math-function-autocomplete.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="mathFunctionForm" class="mat-block">
+<mat-form-field [formGroup]="mathFunctionForm" class="mat-block" [appearance]="appearance">
   <mat-label translate>rule-node-config.functions-field-input</mat-label>
   <input [required]="required"
          (focusin)="onFocus()"

ui-ngx/src/app/modules/home/components/rule-node/common/math-function-autocomplete.component.ts

@@ -21,6 +21,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { FunctionData, MathFunction, MathFunctionMap } from '../rule-node-config.models';
 import { map, tap } from 'rxjs/operators';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MatFormFieldAppearance } from '@angular/material/form-field';
 
 @Component({
     selector: 'tb-math-function-autocomplete',
@@ -50,6 +51,9 @@ export class MathFunctionAutocompleteComponent implements ControlValueAccessor,
 
   @Input() disabled: boolean;
 
+  @Input()
+  appearance: MatFormFieldAppearance = 'fill';
+
   @ViewChild('operationInput', {static: true}) operationInput: ElementRef;
 
   mathFunctionForm: UntypedFormGroup;

ui-ngx/src/app/modules/home/components/rule-node/common/message-types-config.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="messageTypeConfigForm" style="width: 100%;">
+<mat-form-field [formGroup]="messageTypeConfigForm" style="width: 100%;" appearance="outline">
   @if (label) {
     <mat-label>{{ label }}</mat-label>
   }

ui-ngx/src/app/modules/home/components/rule-node/common/output-message-type-autocomplete.component.html

@@ -16,7 +16,7 @@
 
 -->
 <section class="tb-form-row no-border no-padding tb-standard-fields column-xs" [formGroup]="messageTypeFormGroup">
-  <mat-form-field class="flex" subscriptSizing="{{ subscriptSizing }}" hideRequiredMarker>
+  <mat-form-field class="flex" subscriptSizing="{{ subscriptSizing }}" hideRequiredMarker [appearance]="appearance">
     <mat-label>{{'rule-node-config.output-message-type' | translate}}</mat-label>
     <mat-select formControlName="messageTypeAlias">
       @for (msgType of messageTypes; track msgType) {
@@ -26,7 +26,7 @@
       }
     </mat-select>
   </mat-form-field>
-  <mat-form-field class="flex" subscriptSizing="{{ subscriptSizing }}" [hideRequiredMarker]="messageTypeFormGroup.get('messageType').disabled">
+  <mat-form-field class="flex" subscriptSizing="{{ subscriptSizing }}" [hideRequiredMarker]="messageTypeFormGroup.get('messageType').disabled" [appearance]="appearance">
     <mat-label>{{'rule-node-config.message-type-value' | translate}}</mat-label>
     <input matInput type="text" formControlName="messageType">
     @if (messageTypeFormGroup.get('messageType').value) {

ui-ngx/src/app/modules/home/components/rule-node/common/output-message-type-autocomplete.component.ts

@@ -24,7 +24,7 @@ import {
   Validator,
   Validators
 } from '@angular/forms';
-import { SubscriptSizing } from '@angular/material/form-field';
+import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
 import { coerceBoolean } from '@shared/public-api';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
@@ -61,6 +61,9 @@ export class OutputMessageTypeAutocompleteComponent implements ControlValueAcces
   @coerceBoolean()
   disabled: boolean;
 
+  @Input()
+  appearance: MatFormFieldAppearance = 'fill';
+
   @Input()
   @coerceBoolean()
   set required(value) {

ui-ngx/src/app/modules/home/components/rule-node/common/relations-query-config.component.html

@@ -19,7 +19,7 @@
   <div class="tb-form-panel-title tb-required" translate>rule-node-config.relations-query</div>
   <section>
     <div class="flex flex-row gap-4">
-      <mat-form-field class="mat-block max-w-50% flex-full" style="min-width: 100px;" hideRequiredMarker>
+      <mat-form-field class="mat-block max-w-50% flex-full" style="min-width: 100px;" hideRequiredMarker appearance="outline">
         <mat-label translate>relation.direction</mat-label>
         <mat-select required formControlName="direction">
           @for (type of directionTypes; track type) {
@@ -29,7 +29,7 @@
           }
         </mat-select>
       </mat-form-field>
-      <mat-form-field floatLabel="always" class="mat-block max-w-50% flex-full">
+      <mat-form-field floatLabel="always" class="mat-block max-w-50% flex-full" appearance="outline">
         <mat-label translate>rule-node-config.max-relation-level</mat-label>
         <input matInput
                type="text"

ui-ngx/src/app/modules/home/components/rule-node/common/select-attributes.component.html

@@ -20,24 +20,28 @@
   [popupHelpLink]="popupHelpLink"></tb-example-hint>
   <tb-string-items-list subscriptSizing="dynamic" class="mat-block" editable
                         (focusout)="onTouched()"
+                        appearance="outline"
                         [placeholder]="'rule-node-config.add-attribute-key' | translate"
                         [label]="'rule-node-config.client-attributes' | translate" formControlName="clientAttributeNames">
     <ng-container matSuffix *ngTemplateOutlet="helpIcon"></ng-container>
   </tb-string-items-list>
   <tb-string-items-list subscriptSizing="dynamic" class="mat-block" editable
                         (focusout)="onTouched()"
+                        appearance="outline"
                         [placeholder]="'rule-node-config.add-attribute-key' | translate"
                         [label]="'rule-node-config.shared-attributes' | translate" formControlName="sharedAttributeNames">
     <ng-container matSuffix *ngTemplateOutlet="helpIcon"></ng-container>
   </tb-string-items-list>
   <tb-string-items-list subscriptSizing="dynamic" class="mat-block" editable
                         (focusout)="onTouched()"
+                        appearance="outline"
                         [placeholder]="'rule-node-config.add-attribute-key' | translate"
                         [label]="'rule-node-config.server-attributes' | translate" formControlName="serverAttributeNames">
     <ng-container matSuffix *ngTemplateOutlet="helpIcon"></ng-container>
   </tb-string-items-list>
   <tb-string-items-list subscriptSizing="dynamic" editable class="mat-block"
                         (focusout)="onTouched()"
+                        appearance="outline"
                         [placeholder]="'rule-node-config.add-telemetry-key' | translate"
                         [label]="'rule-node-config.latest-telemetry' | translate" formControlName="latestTsKeyNames">
     <ng-container matSuffix *ngTemplateOutlet="helpIcon"></ng-container>

ui-ngx/src/app/modules/home/components/rule-node/enrichment/calculate-delta-config.component.html

@@ -17,7 +17,7 @@
 -->
 <section [formGroup]="calculateDeltaConfigForm">
   <div class="gt-sm:flex gt-sm:flex-row gt-sm:gap-5.5">
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label>{{ 'rule-node-config.input-value-key' | translate }}</mat-label>
       <input matInput formControlName="inputValueKey">
       @if (calculateDeltaConfigForm.get('inputValueKey').hasError('required') ||
@@ -27,7 +27,7 @@
         </mat-error>
       }
     </mat-form-field>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label>{{ 'rule-node-config.output-value-key' | translate }}</mat-label>
       <input matInput formControlName="outputValueKey">
       @if (calculateDeltaConfigForm.get('outputValueKey').hasError('required') ||
@@ -38,7 +38,7 @@
       }
     </mat-form-field>
   </div>
-  <mat-form-field class="mat-block flex-1">
+  <mat-form-field class="mat-block flex-1" appearance="outline">
     <mat-label>{{ 'rule-node-config.number-of-digits-after-floating-point' | translate }}</mat-label>
     <input type="number" min="0" max="15" step="1" matInput formControlName="round">
     @if (calculateDeltaConfigForm.get('round').hasError('min')) {
@@ -80,7 +80,7 @@
         </mat-slide-toggle>
       </div>
       @if (calculateDeltaConfigForm.get('addPeriodBetweenMsgs').value) {
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" appearance="outline">
           <mat-label>{{ 'rule-node-config.period-value-key' | translate }}</mat-label>
           <input required matInput formControlName="periodValueKey">
           @if (calculateDeltaConfigForm.get('periodValueKey').hasError('required')) {

ui-ngx/src/app/modules/home/components/rule-node/enrichment/entity-details-config.component.html

@@ -18,6 +18,7 @@
 <section [formGroup]="entityDetailsConfigForm">
   <tb-string-items-list [predefinedValues]="predefinedValues"
                         class="mat-block" required
+                        appearance="outline"
                         [label]="'rule-node-config.select-details' | translate"
                         [placeholder]="'rule-node-config.add-detail' | translate"
                         [requiredText]="'rule-node-config.entity-details-list-empty' | translate"

ui-ngx/src/app/modules/home/components/rule-node/enrichment/get-telemetry-from-database-config.component.html

@@ -18,6 +18,7 @@
 <section [formGroup]="getTelemetryFromDatabaseConfigForm" class="tb-form-panel no-padding no-border">
   <tb-string-items-list class="mat-block" editable [placeholder]="'rule-node-config.add-timeseries-key' | translate"
                         subscriptSizing="dynamic" required
+                        appearance="outline"
                         [requiredText]="'rule-node-config.timeseries-keys-required' | translate"
                         [label]="'rule-node-config.timeseries-keys' | translate" formControlName="latestTsKeyNames"
                         [hint]="'rule-node-config.general-pattern-hint' | translate">
@@ -40,10 +41,9 @@
       </mat-slide-toggle>
     </div>
     @if (getTelemetryFromDatabaseConfigForm.get('useMetadataIntervalPatterns').value === false) {
-      <div formGroupName="interval" class="flex flex-col"
-           >
+      <div formGroupName="interval" class="flex flex-col">
         <div class="flex flex-col gap-0 gt-sm:flex-row gt-sm:gap-4">
-          <mat-form-field class="mat-block gt-sm:max-w-50% gt-sm:flex-full">
+          <mat-form-field class="mat-block gt-sm:max-w-50% gt-sm:flex-full" appearance="outline">
             <mat-label>{{ 'rule-node-config.interval-start' | translate }}</mat-label>
             <input type="number" step="1" min="1" max="2147483647" matInput formControlName="startInterval" required>
             @if (getTelemetryFromDatabaseConfigForm.get('interval.startInterval').hasError('required')) {
@@ -62,7 +62,7 @@
               </mat-error>
             }
           </mat-form-field>
-          <mat-form-field class="mat-block gt-sm:max-w-50% gt-sm:flex-full" hideRequiredMarker>
+          <mat-form-field class="mat-block gt-sm:max-w-50% gt-sm:flex-full" hideRequiredMarker appearance="outline">
             <mat-label>{{ 'rule-node-config.time-unit' | translate }}</mat-label>
             <mat-select formControlName="startIntervalTimeUnit" required>
               @for (timeUnit of timeUnits; track timeUnit) {
@@ -74,7 +74,7 @@
           </mat-form-field>
         </div>
         <div class="flex flex-col gap-0 gt-sm:flex-row gt-sm:gap-4">
-          <mat-form-field class="mat-block gt-sm:max-w-50% gt-sm:flex-full">
+          <mat-form-field class="mat-block gt-sm:max-w-50% gt-sm:flex-full" appearance="outline">
             <mat-label>{{ 'rule-node-config.interval-end' | translate }}</mat-label>
             <input type="number" step="1" min="1" max="2147483647" matInput formControlName="endInterval" required>
             @if (getTelemetryFromDatabaseConfigForm.get('interval.endInterval').hasError('required')) {
@@ -93,7 +93,7 @@
               </mat-error>
             }
           </mat-form-field>
-          <mat-form-field class="mat-block gt-sm:max-w-50% gt-sm:flex-full" hideRequiredMarker>
+          <mat-form-field class="mat-block gt-sm:max-w-50% gt-sm:flex-full" hideRequiredMarker appearance="outline">
             <mat-label>{{ 'rule-node-config.time-unit' | translate }}</mat-label>
             <mat-select formControlName="endIntervalTimeUnit" required>
               @for (timeUnit of timeUnits; track timeUnit) {
@@ -123,7 +123,7 @@
       </div>
     } @else {
       <div class="input-block flex flex-col">
-        <mat-form-field class="mat-block flex-1">
+        <mat-form-field class="mat-block flex-1" appearance="outline">
           <mat-label>{{ 'rule-node-config.start-interval' | translate }}</mat-label>
           <input matInput formControlName="startIntervalPattern" required>
           @if (getTelemetryFromDatabaseConfigForm.get('startIntervalPattern').hasError('required') ||
@@ -133,7 +133,7 @@
             </mat-error>
           }
         </mat-form-field>
-        <mat-form-field class="mat-block flex-1">
+        <mat-form-field class="mat-block flex-1" appearance="outline">
           <mat-label>{{ 'rule-node-config.end-interval' | translate }}</mat-label>
           <input matInput formControlName="endIntervalPattern" required>
           @if (getTelemetryFromDatabaseConfigForm.get('endIntervalPattern').hasError('required') ||
@@ -167,7 +167,7 @@
     </div>
     @if (getTelemetryFromDatabaseConfigForm.get('fetchMode').value === fetchMode.ALL) {
       <div>
-        <mat-form-field class="mat-block" hideRequiredMarker
+        <mat-form-field class="mat-block" hideRequiredMarker appearance="outline"
                         [subscriptSizing]="defaultPaddingEnable() ? 'fixed' : 'dynamic'">
           <mat-label>{{ 'aggregation.function' | translate }}</mat-label>
           <mat-select formControlName="aggregation" required>
@@ -180,7 +180,7 @@
         </mat-form-field>
         @if (getTelemetryFromDatabaseConfigForm.get('aggregation').value === aggregationTypes.NONE) {
           <div>
-            <mat-form-field class="mat-block" hideRequiredMarker>
+            <mat-form-field class="mat-block" hideRequiredMarker appearance="outline">
               <mat-label> {{ "rule-node-config.order-by-timestamp" | translate }} </mat-label>
               <mat-select formControlName="orderBy" required>
                 @for (order of samplingOrders; track order) {
@@ -190,7 +190,7 @@
                 }
               </mat-select>
             </mat-form-field>
-            <mat-form-field class="mat-block">
+            <mat-form-field class="mat-block" appearance="outline">
               <mat-label>{{ "rule-node-config.limit" | translate }}</mat-label>
               <input type="number" min="2" max="1000" step="1" matInput formControlName="limit" required>
               <mat-hint>{{ "rule-node-config.limit-hint" | translate }}</mat-hint>

ui-ngx/src/app/modules/home/components/rule-node/external/ai-config.component.html

@@ -82,6 +82,7 @@
         </mat-form-field>
         <tb-entity-list
           class="flex-1"
+          appearance="outline"
           syncIdsWithDB
           allowCreateNew
           placeholderText="{{ 'rule-node-config.ai.ai-resources' | translate }}"
@@ -133,6 +134,7 @@
               <tb-time-unit-input
                 required
                 inlineField
+                appearance="outline"
                 requiredText="{{ 'rule-node-config.ai.timeout-required' | translate }}"
                 minErrorText="{{ 'rule-node-config.ai.timeout-validation' | translate }}"
                 maxErrorText="{{ 'rule-node-config.ai.timeout-validation' | translate }}"

ui-ngx/src/app/modules/home/components/rule-node/external/azure-iot-hub-config.component.html

@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="azureIotHubConfigForm"  class="flex flex-col">
-  <mat-form-field class="mat-block" subscriptSizing="dynamic">
+  <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
     <mat-label translate>rule-node-config.topic</mat-label>
     <input required matInput formControlName="topicPattern">
     @if (azureIotHubConfigForm.get('topicPattern').hasError('required')) {
@@ -26,7 +26,7 @@
     }
     <mat-hint translate>rule-node-config.general-pattern-hint</mat-hint>
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.hostname</mat-label>
     <input required matInput formControlName="host">
     @if (azureIotHubConfigForm.get('host').hasError('required')) {
@@ -35,7 +35,7 @@
       </mat-error>
     }
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.device-id</mat-label>
     <input required matInput formControlName="clientId" autocomplete="new-clientId">
     @if (azureIotHubConfigForm.get('clientId').hasError('required')) {
@@ -44,7 +44,7 @@
       </mat-error>
     }
   </mat-form-field>
-  <tb-mqtt-version-select formControlName="protocolVersion" subscriptSizing="fixed"
+  <tb-mqtt-version-select formControlName="protocolVersion" subscriptSizing="fixed" appearance="outline"
                           [excludeVersions]="[MqttVersion.MQTT_3_1, MqttVersion.MQTT_5]">
   </tb-mqtt-version-select>
   <mat-accordion>
@@ -56,7 +56,7 @@
         </mat-panel-description>
       </mat-expansion-panel-header>
       <section formGroupName="credentials" class="flex flex-col">
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" appearance="outline">
           <mat-label translate>rule-node-config.credentials-type</mat-label>
           <mat-select formControlName="type" required>
             @for (credentialsType of allAzureIotHubCredentialsTypes; track credentialsType) {
@@ -75,7 +75,7 @@
           @switch (azureIotHubConfigForm.get('credentials.type').value) {
             @case ('anonymous') {}
             @case ('sas') {
-              <mat-form-field class="mat-block">
+              <mat-form-field class="mat-block" appearance="outline">
                 <mat-label translate>rule-node-config.sas-key</mat-label>
                 <input type="password" required matInput formControlName="sasKey" autocomplete="new-password">
                 <tb-toggle-password matSuffix></tb-toggle-password>
@@ -124,7 +124,7 @@
                              noFileText="rule-node-config.no-file"
                              dropLabel="{{'rule-node-config.drop-file' | translate}}">
               </tb-file-input>
-              <mat-form-field class="mat-block">
+              <mat-form-field class="mat-block" appearance="outline">
                 <mat-label translate>rule-node-config.private-key-password</mat-label>
                 <input type="password" matInput formControlName="password" autocomplete="new-password">
                 <tb-toggle-password matSuffix></tb-toggle-password>

ui-ngx/src/app/modules/home/components/rule-node/external/kafka-config.component.html

@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="kafkaConfigForm" class="flex flex-col">
-  <mat-form-field class="mat-block" subscriptSizing="dynamic">
+  <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
     <mat-label translate>rule-node-config.topic-pattern</mat-label>
     <input required matInput formControlName="topicPattern">
     @if (kafkaConfigForm.get('topicPattern').hasError('required')) {
@@ -26,13 +26,13 @@
     }
     <mat-hint translate>rule-node-config.general-pattern-hint</mat-hint>
   </mat-form-field>
-  <mat-form-field class="mat-block" subscriptSizing="dynamic">
+  <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
     <mat-label translate>rule-node-config.key-pattern</mat-label>
     <input matInput formControlName="keyPattern">
     <mat-hint translate>rule-node-config.general-pattern-hint</mat-hint>
   </mat-form-field>
   <div class="tb-hint" translate>rule-node-config.key-pattern-hint</div>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.bootstrap-servers</mat-label>
     <input required matInput formControlName="bootstrapServers">
     @if (kafkaConfigForm.get('bootstrapServers').hasError('required')) {
@@ -41,7 +41,7 @@
       </mat-error>
     }
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.retries</mat-label>
     <input type="number" step="1" min="0" matInput formControlName="retries">
     @if (kafkaConfigForm.get('retries').hasError('min')) {
@@ -50,7 +50,7 @@
       </mat-error>
     }
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.batch-size-bytes</mat-label>
     <input type="number" step="1" min="0" matInput formControlName="batchSize">
     @if (kafkaConfigForm.get('batchSize').hasError('min')) {
@@ -59,7 +59,7 @@
       </mat-error>
     }
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.linger-ms</mat-label>
     <input type="number" step="1" min="0" matInput formControlName="linger">
     @if (kafkaConfigForm.get('linger').hasError('min')) {
@@ -68,7 +68,7 @@
       </mat-error>
     }
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.buffer-memory-bytes</mat-label>
     <input type="number" step="1" min="0" matInput formControlName="bufferMemory">
     @if (kafkaConfigForm.get('bufferMemory').hasError('min')) {
@@ -77,7 +77,7 @@
       </mat-error>
     }
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.acks</mat-label>
     <mat-select formControlName="acks" required>
       @for (ackValue of ackValues; track ackValue) {
@@ -88,20 +88,21 @@
     </mat-select>
   </mat-form-field>
   <label translate class="tb-title">rule-node-config.other-properties</label>
-  <tb-kv-map-config-old
+  <tb-kv-map-config
     required="false"
     formControlName="otherProperties"
-    keyText="rule-node-config.key"
-    keyRequiredText="rule-node-config.key-required"
-    valText="rule-node-config.value"
-    valRequiredText="rule-node-config.value-required">
-  </tb-kv-map-config-old>
+    [keyText]="'rule-node-config.key' | translate"
+    [keyRequiredText]="'rule-node-config.key-required' | translate"
+    [valText]="'rule-node-config.value' | translate"
+    [valRequiredText]="'rule-node-config.value-required' | translate"
+    [emptyText]="'rule-node-config.other-properties-empty' | translate">
+  </tb-kv-map-config>
   <mat-checkbox class="flex-1" formControlName="addMetadataKeyValuesAsKafkaHeaders">
     {{ 'rule-node-config.add-metadata-key-values-as-kafka-headers' | translate }}
   </mat-checkbox>
   <div class="tb-hint" translate>rule-node-config.add-metadata-key-values-as-kafka-headers-hint</div>
   @if (kafkaConfigForm.get('addMetadataKeyValuesAsKafkaHeaders').value) {
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>rule-node-config.charset-encoding</mat-label>
       <mat-select formControlName="kafkaHeadersCharset" required>
         @for (charset of ToByteStandartCharsetTypesValues; track charset) {

ui-ngx/src/app/modules/home/components/rule-node/external/lambda-config.component.html

@@ -24,7 +24,7 @@
                      popupHelpLink="rulenode/node-templatization-doc">
     </tb-example-hint>
     <div class="tb-standard-fields">
-      <mat-form-field class="mat-block">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label>{{'rule-node-config.function-name' | translate}}</mat-label>
         <input required matInput formControlName="functionName">
         @if (lambdaConfigForm.get('functionName').hasError('required')) {
@@ -33,7 +33,7 @@
           </mat-error>
         }
       </mat-form-field>
-      <mat-form-field class="mat-block">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label>{{'rule-node-config.qualifier' | translate}}</mat-label>
         <input matInput formControlName="qualifier">
         <mat-hint translate>rule-node-config.qualifier-hint</mat-hint>
@@ -47,7 +47,7 @@
         <mat-panel-title class="tb-form-panel-title tb-required" translate>rule-node-config.aws-credentials</mat-panel-title>
       </mat-expansion-panel-header>
       <div class="tb-standard-fields">
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" appearance="outline">
           <mat-label translate>rule-node-config.aws-access-key-id</mat-label>
           <input required matInput formControlName="accessKey">
           @if (lambdaConfigForm.get('accessKey').hasError('required')) {
@@ -56,7 +56,7 @@
             </mat-error>
           }
         </mat-form-field>
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" appearance="outline">
           <mat-label translate>rule-node-config.aws-secret-access-key</mat-label>
           <input required matInput formControlName="secretKey">
           @if (lambdaConfigForm.get('secretKey').hasError('required')) {
@@ -65,7 +65,7 @@
             </mat-error>
           }
         </mat-form-field>
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" appearance="outline">
           <mat-label translate>rule-node-config.aws-region</mat-label>
           <input required matInput formControlName="region">
           @if (lambdaConfigForm.get('region').hasError('required')) {
@@ -84,7 +84,7 @@
       </mat-expansion-panel-header>
       <div class="tb-form-panel no-border no-padding no-gap" style="margin-top: 0">
         <div class="tb-form-row no-border same-padding tb-standard-fields">
-          <mat-form-field class="flex">
+          <mat-form-field class="flex" appearance="outline">
             <mat-label translate>rule-node-config.connection-timeout</mat-label>
             <input type="number" required min="0" matInput formControlName="connectionTimeout">
             @if (lambdaConfigForm.get('connectionTimeout').hasError('required')) {
@@ -101,7 +101,7 @@
                       color="primary"
             matTooltip="{{ 'rule-node-config.connection-timeout-hint' | translate }}">help</mat-icon>
           </mat-form-field>
-          <mat-form-field class="flex">
+          <mat-form-field class="flex" appearance="outline">
             <mat-label translate>rule-node-config.request-timeout</mat-label>
             <input type="number" required min="0" matInput formControlName="requestTimeout">
             @if (lambdaConfigForm.get('requestTimeout').hasError('required')) {

ui-ngx/src/app/modules/home/components/rule-node/external/mqtt-config.component.html

@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="mqttConfigForm" class="flex flex-col">
-  <mat-form-field class="mat-block" subscriptSizing="dynamic">
+  <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
     <mat-label translate>rule-node-config.topic-pattern</mat-label>
     <input required matInput formControlName="topicPattern">
     @if (mqttConfigForm.get('topicPattern').hasError('required')) {
@@ -27,7 +27,7 @@
     <mat-hint translate>rule-node-config.general-pattern-hint</mat-hint>
   </mat-form-field>
   <div class="flex flex-1 flex-col gt-sm:flex-row gt-sm:gap-2">
-    <mat-form-field class="mat-block gt-sm:max-w-60% gt-sm:flex-full">
+    <mat-form-field class="mat-block gt-sm:max-w-60% gt-sm:flex-full" appearance="outline">
       <mat-label translate>rule-node-config.host</mat-label>
       <input required matInput formControlName="host">
       @if (mqttConfigForm.get('host').hasError('required')) {
@@ -36,7 +36,7 @@
         </mat-error>
       }
     </mat-form-field>
-    <mat-form-field class="mat-block gt-sm:max-w-40% gt-sm:flex-full">
+    <mat-form-field class="mat-block gt-sm:max-w-40% gt-sm:flex-full" appearance="outline">
       <mat-label translate>rule-node-config.port</mat-label>
       <input required type="number" step="1" min="1" max="65535" matInput formControlName="port">
       @if (mqttConfigForm.get('port').hasError('required')) {
@@ -55,7 +55,7 @@
         </mat-error>
       }
     </mat-form-field>
-    <mat-form-field class="mat-block gt-sm:max-w-40% gt-sm:flex-full">
+    <mat-form-field class="mat-block gt-sm:max-w-40% gt-sm:flex-full" appearance="outline">
       <mat-label translate>rule-node-config.connect-timeout</mat-label>
       <input required type="number" step="1" min="1" max="200" matInput formControlName="connectTimeoutSec">
       @if (mqttConfigForm.get('connectTimeoutSec').hasError('required')) {
@@ -75,7 +75,7 @@
       }
     </mat-form-field>
   </div>
-  <mat-form-field class="mat-block" subscriptSizing="dynamic">
+  <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
     <mat-label translate>rule-node-config.client-id</mat-label>
     <input matInput formControlName="clientId">
     <mat-hint>{{'rule-node-config.client-id-hint' | translate}}</mat-hint>

ui-ngx/src/app/modules/home/components/rule-node/external/notification-config.component.html

@@ -19,12 +19,14 @@
   <tb-template-autocomplete
     required
     allowCreate
+    appearance="outline"
     formControlName="templateId"
     [notificationTypes]="notificationType.RULE_NODE">
   </tb-template-autocomplete>
   <tb-entity-list
     required
     formControlName="targets"
+    appearance="outline"
     labelText="{{ 'notification.recipients' | translate }}"
     placeholderText="{{ 'notification.recipient' | translate }}"
     requiredText="{{ 'notification.recipients-required' | translate }}"

ui-ngx/src/app/modules/home/components/rule-node/external/pubsub-config.component.html

@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="pubSubConfigForm" class="flex flex-col">
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.gcp-project-id</mat-label>
     <input required matInput formControlName="projectId">
     @if (pubSubConfigForm.get('projectId').hasError('required')) {
@@ -25,7 +25,7 @@
       </mat-error>
     }
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.pubsub-topic-name</mat-label>
     <input required matInput formControlName="topicName">
     @if (pubSubConfigForm.get('topicName').hasError('required')) {
@@ -46,12 +46,13 @@
   </tb-file-input>
   <label translate class="tb-title">rule-node-config.message-attributes</label>
   <div class="tb-hint" [innerHTML]="'rule-node-config.message-attributes-hint' | translate | safe: 'html'"></div>
-  <tb-kv-map-config-old
+  <tb-kv-map-config
     required="false"
     formControlName="messageAttributes"
-    keyText="rule-node-config.name"
-    keyRequiredText="rule-node-config.name-required"
-    valText="rule-node-config.value"
-    valRequiredText="rule-node-config.value-required">
-  </tb-kv-map-config-old>
+    [keyText]="'rule-node-config.name' | translate"
+    [keyRequiredText]="'rule-node-config.name-required' | translate"
+    [valText]="'rule-node-config.value' | translate"
+    [valRequiredText]="'rule-node-config.value-required' | translate"
+    [emptyText]="'rule-node-config.message-attributes-empty' | translate">
+  </tb-kv-map-config>
 </section>

ui-ngx/src/app/modules/home/components/rule-node/external/rabbit-mq-config.component.html

@@ -16,15 +16,15 @@
 
 -->
 <section [formGroup]="rabbitMqConfigForm" class="flex flex-col">
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.exchange-name-pattern</mat-label>
     <input matInput formControlName="exchangeNamePattern">
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.routing-key-pattern</mat-label>
     <input matInput formControlName="routingKeyPattern">
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.message-properties</mat-label>
     <mat-select formControlName="messageProperties">
       @for (property of messageProperties; track property) {
@@ -35,7 +35,7 @@
     </mat-select>
   </mat-form-field>
   <div class="gt-sm:flex gt-sm:flex-row gt-sm:gap-2">
-    <mat-form-field class="mat-block gt-sm:max-w-60% gt-sm:flex-full">
+    <mat-form-field class="mat-block gt-sm:max-w-60% gt-sm:flex-full" appearance="outline">
       <mat-label translate>rule-node-config.host</mat-label>
       <input required matInput formControlName="host">
       @if (rabbitMqConfigForm.get('host').hasError('required')) {
@@ -44,7 +44,7 @@
         </mat-error>
       }
     </mat-form-field>
-    <mat-form-field class="mat-block gt-sm:max-w-40% gt-sm:flex-full">
+    <mat-form-field class="mat-block gt-sm:max-w-40% gt-sm:flex-full" appearance="outline">
       <mat-label translate>rule-node-config.port</mat-label>
       <input required type="number" step="1" min="1" max="65535" matInput formControlName="port">
       @if (rabbitMqConfigForm.get('port').hasError('required')) {
@@ -64,15 +64,15 @@
       }
     </mat-form-field>
   </div>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.virtual-host</mat-label>
     <input matInput formControlName="virtualHost">
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.username</mat-label>
     <input matInput formControlName="username">
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.password</mat-label>
     <input type="password" matInput formControlName="password" autocomplete="new-password">
     <tb-toggle-password matSuffix></tb-toggle-password>
@@ -80,7 +80,7 @@
   <mat-checkbox formControlName="automaticRecoveryEnabled">
     {{ 'rule-node-config.automatic-recovery' | translate }}
   </mat-checkbox>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.connection-timeout-ms</mat-label>
     <input type="number" step="1" min="0" matInput formControlName="connectionTimeout">
     @if (rabbitMqConfigForm.get('connectionTimeout').hasError('min')) {
@@ -89,7 +89,7 @@
       </mat-error>
     }
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.handshake-timeout-ms</mat-label>
     <input type="number" step="1" min="0" matInput formControlName="handshakeTimeout">
     @if (rabbitMqConfigForm.get('handshakeTimeout').hasError('min')) {
@@ -99,12 +99,13 @@
     }
   </mat-form-field>
   <label translate class="tb-title">rule-node-config.client-properties</label>
-  <tb-kv-map-config-old
+  <tb-kv-map-config
     required="false"
     formControlName="clientProperties"
-    keyText="rule-node-config.key"
-    keyRequiredText="rule-node-config.key-required"
-    valText="rule-node-config.value"
-    valRequiredText="rule-node-config.value-required">
-  </tb-kv-map-config-old>
+    [keyText]="'rule-node-config.key' | translate"
+    [keyRequiredText]="'rule-node-config.key-required' | translate"
+    [valText]="'rule-node-config.value' | translate"
+    [valRequiredText]="'rule-node-config.value-required' | translate"
+    [emptyText]="'rule-node-config.client-properties-empty' | translate">
+  </tb-kv-map-config>
 </section>

ui-ngx/src/app/modules/home/components/rule-node/external/rest-api-call-config.component.html

@@ -18,7 +18,7 @@
 <section [formGroup]="restApiCallConfigForm" class="flex flex-col gap-4">
   <div class="tb-form-panel stroked">
     <div class="tb-form-panel-title" translate>rule-node-config.request-url</div>
-    <mat-form-field class="mat-block" subscriptSizing="dynamic">
+    <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
       <mat-label translate>rule-node-config.url</mat-label>
       <input required matInput formControlName="restEndpointUrlPattern">
       @if (restApiCallConfigForm.get('restEndpointUrlPattern').hasError('required')) {
@@ -45,7 +45,7 @@
       </ng-template>
     </mat-expansion-panel>
   </div>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.request-method</mat-label>
     <mat-select formControlName="requestMethod">
       @for (requestType of httpRequestTypes; track requestType) {
@@ -61,15 +61,16 @@
         {{ 'rule-node-config.headers' | translate }}
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <tb-kv-map-config-old
+        <div class="tb-form-hint tb-primary-fill mb-4" [innerHTML]="'rule-node-config.headers-hint' | translate | safe: 'html'"></div>
+        <tb-kv-map-config
+          required="false"
           formControlName="headers"
-          keyText="rule-node-config.header"
-          keyRequiredText="rule-node-config.header-required"
-          valText="rule-node-config.value"
-          valRequiredText="rule-node-config.value-required"
-          description="rule-node-config.headers-hint"
-          emptyText="rule-node-config.headers-empty">
-        </tb-kv-map-config-old>
+          [keyText]="'rule-node-config.header' | translate"
+          [keyRequiredText]="'rule-node-config.header-required' | translate"
+          [valText]="'rule-node-config.value' | translate"
+          [valRequiredText]="'rule-node-config.value-required' | translate"
+          [emptyText]="'rule-node-config.headers-empty' | translate">
+        </tb-kv-map-config>
       </ng-template>
     </mat-expansion-panel>
   </div>
@@ -92,7 +93,7 @@
               @if (!restApiCallConfigForm.get('useSystemProxyProperties').value) {
                 <div>
                   <div class="gt-sm:flex gt-sm:flex-row gt-sm:gap-2">
-                    <mat-form-field class="md-block gt-sm:max-w-50% gt-sm:flex-full">
+                    <mat-form-field class="md-block gt-sm:max-w-50% gt-sm:flex-full" appearance="outline">
                       <mat-label translate>rule-node-config.proxy-host</mat-label>
                       <input matInput required formControlName="proxyHost">
                       @if (restApiCallConfigForm.get('proxyHost').hasError('required')) {
@@ -101,7 +102,7 @@
                         </mat-error>
                       }
                     </mat-form-field>
-                    <mat-form-field class="mat-block gt-sm:max-w-50% gt-sm:flex-full">
+                    <mat-form-field class="mat-block gt-sm:max-w-50% gt-sm:flex-full" appearance="outline">
                       <mat-label translate>rule-node-config.proxy-port</mat-label>
                       <input matInput required formControlName="proxyPort" type="number" step="1">
                       @if (restApiCallConfigForm.get('proxyPort').hasError('required')) {
@@ -116,11 +117,11 @@
                       }
                     </mat-form-field>
                   </div>
-                  <mat-form-field class="mat-block">
+                  <mat-form-field class="mat-block" appearance="outline">
                     <mat-label translate>rule-node-config.proxy-user</mat-label>
                     <input matInput formControlName="proxyUser">
                   </mat-form-field>
-                  <mat-form-field class="mat-block">
+                  <mat-form-field class="mat-block" appearance="outline">
                     <mat-label translate>rule-node-config.proxy-password</mat-label>
                     <input matInput type="password" formControlName="proxyPassword">
                     <tb-toggle-password matSuffix></tb-toggle-password>
@@ -142,7 +143,7 @@
             {{ 'rule-node-config.ignore-request-body' | translate }}
           </mat-slide-toggle>
         </div>
-        <mat-form-field class="mat-block" subscriptSizing="dynamic">
+        <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
           <mat-label translate>rule-node-config.read-timeout</mat-label>
           <input type="text" min="0" [max]="IntLimit" inputmode="numeric" pattern="[0-9]*" matInput formControlName="readTimeoutMs">
           <mat-hint translate>rule-node-config.read-timeout-hint</mat-hint>
@@ -152,7 +153,7 @@
             </mat-error>
           }
         </mat-form-field>
-        <mat-form-field class="mat-block" subscriptSizing="dynamic">
+        <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
           <mat-label translate>rule-node-config.max-parallel-requests-count</mat-label>
           <input type="text" min="0" [max]="IntLimit" inputmode="numeric" pattern="[0-9]*" matInput formControlName="maxParallelRequestsCount">
           <mat-hint translate>rule-node-config.max-parallel-requests-count-hint</mat-hint>
@@ -162,7 +163,7 @@
             </mat-error>
           }
         </mat-form-field>
-        <mat-form-field class="mat-block" subscriptSizing="dynamic">
+        <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
           <mat-label translate>rule-node-config.max-response-size</mat-label>
           <input type="text" min="1" [max]="MemoryBufferSizeInKbLimit" inputmode="numeric" pattern="[0-9]*" matInput formControlName="maxInMemoryBufferSizeInKb">
           <mat-hint translate>rule-node-config.max-response-size-hint</mat-hint>

ui-ngx/src/app/modules/home/components/rule-node/external/send-email-config.component.html

@@ -21,7 +21,7 @@
   </mat-checkbox>
   @if (sendEmailConfigForm.get('useSystemSmtpSettings').value === false) {
     <section class="flex flex-col">
-      <mat-form-field class="mat-block">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>rule-node-config.smtp-protocol</mat-label>
         <mat-select formControlName="smtpProtocol">
           @for (smtpProtocol of smtpProtocols; track smtpProtocol) {
@@ -32,7 +32,7 @@
         </mat-select>
       </mat-form-field>
       <div class="gt-sm:flex gt-sm:flex-row gt-sm:gap-2">
-        <mat-form-field class="mat-block gt-sm:max-w-60% gt-sm:flex-full">
+        <mat-form-field class="mat-block gt-sm:max-w-60% gt-sm:flex-full" appearance="outline">
           <mat-label translate>rule-node-config.smtp-host</mat-label>
           <input required matInput formControlName="smtpHost">
           @if (sendEmailConfigForm.get('smtpHost').hasError('required')) {
@@ -41,7 +41,7 @@
             </mat-error>
           }
         </mat-form-field>
-        <mat-form-field class="mat-block gt-sm:max-w-40% gt-sm:flex-full">
+        <mat-form-field class="mat-block gt-sm:max-w-40% gt-sm:flex-full" appearance="outline">
           <mat-label translate>rule-node-config.smtp-port</mat-label>
           <input required type="number" step="1" min="1" max="65535" matInput formControlName="smtpPort">
           @if (sendEmailConfigForm.get('smtpPort').hasError('required')) {
@@ -61,7 +61,7 @@
           }
         </mat-form-field>
       </div>
-      <mat-form-field class="mat-block">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>rule-node-config.timeout-msec</mat-label>
         <input required type="number" step="1" min="0" matInput formControlName="timeout">
         @if (sendEmailConfigForm.get('timeout').hasError('required')) {
@@ -79,7 +79,7 @@
         {{ 'rule-node-config.enable-tls' | translate }}
       </mat-checkbox>
       @if (sendEmailConfigForm.get('enableTls').value === true) {
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" appearance="outline">
           <mat-label translate>rule-node-config.tls-version</mat-label>
           <mat-select formControlName="tlsVersion">
             @for (tlsVersion of tlsVersions; track tlsVersion) {
@@ -96,7 +96,7 @@
       @if (sendEmailConfigForm.get('enableProxy').value) {
         <div>
           <div class="gt-sm:flex gt-sm:flex-row gt-sm:gap-2">
-            <mat-form-field class="mat-block gt-sm:max-w-60% gt-sm:flex-full">
+            <mat-form-field class="mat-block gt-sm:max-w-60% gt-sm:flex-full" appearance="outline">
               <mat-label translate>rule-node-config.proxy-host</mat-label>
               <input matInput required formControlName="proxyHost">
               @if (sendEmailConfigForm.get('proxyHost').hasError('required')) {
@@ -105,7 +105,7 @@
                 </mat-error>
               }
             </mat-form-field>
-            <mat-form-field class="mat-block gt-sm:max-w-40% gt-sm:flex-full">
+            <mat-form-field class="mat-block gt-sm:max-w-40% gt-sm:flex-full" appearance="outline">
               <mat-label translate>rule-node-config.proxy-port</mat-label>
               <input matInput required formControlName="proxyPort" type="number" step="1" min="1" max="65535">
               @if (sendEmailConfigForm.get('proxyPort').hasError('required')) {
@@ -120,21 +120,21 @@
               }
             </mat-form-field>
           </div>
-          <mat-form-field class="mat-block">
+          <mat-form-field class="mat-block" appearance="outline">
             <mat-label translate>rule-node-config.proxy-user</mat-label>
             <input matInput formControlName="proxyUser">
           </mat-form-field>
-          <mat-form-field class="mat-block">
+          <mat-form-field class="mat-block" appearance="outline">
             <mat-label translate>rule-node-config.proxy-password</mat-label>
             <input matInput formControlName="proxyPassword">
           </mat-form-field>
         </div>
       }
-      <mat-form-field class="mat-block" floatLabel="always">
+      <mat-form-field class="mat-block" floatLabel="always" appearance="outline">
         <mat-label translate>rule-node-config.username</mat-label>
         <input matInput placeholder="{{ 'rule-node-config.enter-username' | translate }}" formControlName="username">
       </mat-form-field>
-      <mat-form-field class="mat-block" floatLabel="always">
+      <mat-form-field class="mat-block" floatLabel="always" appearance="outline">
         <mat-label translate>rule-node-config.password</mat-label>
         <input matInput type="password" placeholder="{{ 'rule-node-config.enter-password' | translate }}" formControlName="password" autocomplete="new-password">
         <tb-toggle-password matSuffix></tb-toggle-password>

ui-ngx/src/app/modules/home/components/rule-node/external/send-sms-config.component.html

@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="sendSmsConfigForm" class="flex flex-col">
-  <mat-form-field class="mat-block" subscriptSizing="dynamic">
+  <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
     <mat-label translate>rule-node-config.numbers-to-template</mat-label>
     <input required matInput formControlName="numbersToTemplate">
     @if (sendSmsConfigForm.get('numbersToTemplate').hasError('required')) {
@@ -26,9 +26,9 @@
     }
     <mat-hint [innerHTML]="'rule-node-config.numbers-to-template-hint' | translate | safe: 'html'"></mat-hint>
   </mat-form-field>
-  <mat-form-field class="mat-block" subscriptSizing="dynamic">
+  <mat-form-field class="mat-block mt-1" subscriptSizing="dynamic" appearance="outline">
     <mat-label translate>rule-node-config.sms-message-template</mat-label>
-    <textarea required matInput formControlName="smsMessageTemplate" rows="6"></textarea>
+    <textarea required matInput formControlName="smsMessageTemplate" cdkTextareaAutosize cdkAutosizeMinRows="1" rows="1"></textarea>
     @if (sendSmsConfigForm.get('smsMessageTemplate').hasError('required')) {
       <mat-error>
         {{ 'rule-node-config.sms-message-template-required' | translate }}

ui-ngx/src/app/modules/home/components/rule-node/external/slack-config.component.html

@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="slackConfigForm" class="flex flex-col">
-  <mat-form-field class="mat-block flex-1">
+  <mat-form-field class="mat-block flex-1" appearance="outline">
     <mat-label translate>rule-node-config.message-template</mat-label>
     <input required matInput formControlName="messageTemplate">
     @if (slackConfigForm.get('messageTemplate').hasError('required')) {
@@ -30,7 +30,7 @@
     {{ 'rule-node-config.use-system-slack-settings' | translate }}
   </mat-checkbox>
   @if (!slackConfigForm.get('useSystemSettings').value) {
-    <mat-form-field class="mat-block">
+    <mat-form-field class="mat-block" appearance="outline">
       <mat-label translate>rule-node-config.slack-api-token</mat-label>
       <input required matInput formControlName="botToken">
       @if (slackConfigForm.get('botToken').hasError('required')) {
@@ -49,6 +49,7 @@
     }
   </mat-radio-group>
   <tb-slack-conversation-autocomplete
+    appearance="outline"
     formControlName="conversation"
     required
     [token]="slackConfigForm.get('useSystemSettings').value ? '' : slackConfigForm.get('botToken').value"

ui-ngx/src/app/modules/home/components/rule-node/external/sns-config.component.html

@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="snsConfigForm" class="flex flex-col">
-  <mat-form-field class="mat-block" subscriptSizing="dynamic">
+  <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
     <mat-label translate>rule-node-config.topic-arn-pattern</mat-label>
     <input required matInput formControlName="topicArnPattern">
     @if (snsConfigForm.get('topicArnPattern').hasError('required')) {
@@ -26,7 +26,7 @@
     }
     <mat-hint translate>rule-node-config.general-pattern-hint</mat-hint>
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.aws-access-key-id</mat-label>
     <input required matInput formControlName="accessKeyId">
     @if (snsConfigForm.get('accessKeyId').hasError('required')) {
@@ -35,7 +35,7 @@
       </mat-error>
     }
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.aws-secret-access-key</mat-label>
     <input required matInput formControlName="secretAccessKey">
     @if (snsConfigForm.get('secretAccessKey').hasError('required')) {
@@ -44,7 +44,7 @@
       </mat-error>
     }
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.aws-region</mat-label>
     <input required matInput formControlName="region">
     @if (snsConfigForm.get('region').hasError('required')) {

ui-ngx/src/app/modules/home/components/rule-node/external/sqs-config.component.html

@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="sqsConfigForm" class="flex flex-col">
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.queue-type</mat-label>
     <mat-select formControlName="queueType" required>
       @for (type of sqsQueueTypes; track type) {
@@ -26,7 +26,7 @@
       }
     </mat-select>
   </mat-form-field>
-  <mat-form-field class="mat-block" subscriptSizing="dynamic">
+  <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
     <mat-label translate>rule-node-config.queue-url-pattern</mat-label>
     <input required matInput formControlName="queueUrlPattern">
     @if (sqsConfigForm.get('queueUrlPattern').hasError('required')) {
@@ -37,7 +37,7 @@
     <mat-hint translate>rule-node-config.general-pattern-hint</mat-hint>
   </mat-form-field>
   @if (sqsConfigForm.get('queueType').value === sqsQueueType.STANDARD) {
-    <mat-form-field class="mat-block">
+    <mat-form-field class="mat-block" appearance="outline">
       <mat-label translate>rule-node-config.delay-seconds</mat-label>
       <input required type="number" min="0" max="900" step="1" matInput formControlName="delaySeconds">
       @if (sqsConfigForm.get('delaySeconds').hasError('min')) {
@@ -54,15 +54,16 @@
   }
   <label translate class="tb-title">rule-node-config.message-attributes</label>
   <div class="tb-hint" [innerHTML]="'rule-node-config.message-attributes-hint' | translate | safe: 'html'"></div>
-  <tb-kv-map-config-old
+  <tb-kv-map-config
     required="false"
     formControlName="messageAttributes"
-    keyText="rule-node-config.name"
-    keyRequiredText="rule-node-config.name-required"
-    valText="rule-node-config.value"
-    valRequiredText="rule-node-config.value-required">
-  </tb-kv-map-config-old>
-  <mat-form-field class="mat-block">
+    [keyText]="'rule-node-config.name' | translate"
+    [keyRequiredText]="'rule-node-config.name-required' | translate"
+    [valText]="'rule-node-config.value' | translate"
+    [valRequiredText]="'rule-node-config.value-required' | translate"
+    [emptyText]="'rule-node-config.message-attributes-empty' | translate">
+  </tb-kv-map-config>
+  <mat-form-field class="mat-block mt-2" appearance="outline">
     <mat-label translate>rule-node-config.aws-access-key-id</mat-label>
     <input required matInput formControlName="accessKeyId">
     @if (sqsConfigForm.get('accessKeyId').hasError('required')) {
@@ -71,7 +72,7 @@
       </mat-error>
     }
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block mt-2" appearance="outline">
     <mat-label translate>rule-node-config.aws-secret-access-key</mat-label>
     <input required matInput formControlName="secretAccessKey">
     @if (sqsConfigForm.get('secretAccessKey').hasError('required')) {
@@ -80,7 +81,7 @@
       </mat-error>
     }
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block mt-2" appearance="outline">
     <mat-label translate>rule-node-config.aws-region</mat-label>
     <input required matInput formControlName="region">
     @if (sqsConfigForm.get('region').hasError('required')) {

ui-ngx/src/app/modules/home/components/rule-node/filter/check-message-config.component.html

@@ -23,6 +23,7 @@
     </div>
   </div>
   <tb-string-items-list editable subscriptSizing="dynamic"
+                        appearance="outline"
                         [label]="'rule-node-config.data-keys' | translate"
                         [placeholder]="'rule-node-config.add-message-field' | translate"
                         formControlName="messageNames">
@@ -30,6 +31,7 @@
               matTooltip="{{ 'rule-node-config.chip-help' | translate: { inputName: 'rule-node-config.field-name' | translate } }}">help</mat-icon>
   </tb-string-items-list>
   <tb-string-items-list editable subscriptSizing="dynamic"
+                        appearance="outline"
                         [label]="'rule-node-config.metadata-keys' | translate"
                         [placeholder]="'rule-node-config.add-metadata-field' | translate"
                         formControlName="metadataNames">

ui-ngx/src/app/modules/home/components/rule-node/filter/check-relation-config.component.html

@@ -18,7 +18,7 @@
 <section [formGroup]="checkRelationConfigForm" class="tb-form-panel stroked no-padding-bottom">
   <div class="tb-form-panel-title" translate>rule-node-config.relation-search-parameters</div>
   <div class="flex flex-col">
-    <mat-form-field class="mat-block" hideRequiredMarker>
+    <mat-form-field class="mat-block" hideRequiredMarker appearance="outline">
       <mat-label>{{ 'relation.direction' | translate }}</mat-label>
       <mat-select formControlName="direction" required>
         @for (direction of entitySearchDirection; track direction) {
@@ -29,6 +29,7 @@
       </mat-select>
     </mat-form-field>
     <tb-relation-type-autocomplete
+      appearance="outline"
       required
       formControlName="relationType">
     </tb-relation-type-autocomplete>
@@ -41,6 +42,7 @@
     @if (checkRelationConfigForm.get('checkForSingleEntity').value) {
       <div class="same-width-component-row">
         <tb-entity-type-select
+          appearance="outline"
           style="min-width: 100px; flex: 1;"
           showLabel
           required
@@ -48,6 +50,7 @@
         </tb-entity-type-select>
         @if (checkRelationConfigForm.get('entityType').value) {
           <tb-entity-autocomplete
+            appearance="outline"
             class="flex-1"
             required
             [entityType]="checkRelationConfigForm.get('entityType').value"

ui-ngx/src/app/modules/home/components/rule-node/filter/gps-geo-filter-config.component.html

@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>rule-node-config.coordinate-field-names</div>
     <section>
       <div class="flex flex-row gap-4">
-        <mat-form-field class="mat-block max-w-50% flex-full">
+        <mat-form-field class="mat-block max-w-50% flex-full" appearance="outline">
           <mat-label>{{ 'rule-node-config.latitude-field-name' | translate }}</mat-label>
           <input matInput formControlName="latitudeKeyName" required>
           @if (geoFilterConfigForm.get('latitudeKeyName').hasError('required')) {
@@ -29,7 +29,7 @@
             </mat-error>
           }
         </mat-form-field>
-        <mat-form-field class="mat-block max-w-50% flex-full">
+        <mat-form-field class="mat-block max-w-50% flex-full" appearance="outline">
           <mat-label>{{ 'rule-node-config.longitude-field-name' | translate }}</mat-label>
           <input matInput formControlName="longitudeKeyName" required>
           @if (geoFilterConfigForm.get('longitudeKeyName').hasError('required')) {
@@ -45,7 +45,7 @@
   <section class="tb-form-panel stroked" [class.no-padding-bottom]="!defaultPaddingEnable">
     <div class="tb-form-panel-title" translate>rule-node-config.geofence-configuration</div>
     <section class="flex flex-col">
-      <mat-form-field class="mat-block flex-1" hideRequiredMarker>
+      <mat-form-field class="mat-block flex-1" hideRequiredMarker appearance="outline">
         <mat-label>{{ 'rule-node-config.perimeter-type' | translate }}</mat-label>
         <mat-select formControlName="perimeterType">
           @for (type of perimeterTypes; track type) {
@@ -70,7 +70,7 @@
         </mat-slide-toggle>
       </div>
       @if (geoFilterConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value) {
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" appearance="outline">
           <mat-label>{{ 'rule-node-config.perimeter-key-name' | translate }}</mat-label>
           <input matInput formControlName="perimeterKeyName" required>
           @if (geoFilterConfigForm.get('perimeterKeyName').hasError('required')) {
@@ -83,10 +83,9 @@
       }
       @if (geoFilterConfigForm.get('perimeterType').value === perimeterType.CIRCLE &&
         !geoFilterConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value) {
-        <div class="flex flex-col"
-             >
+        <div class="flex flex-col">
           <div class="flex flex-row gap-4">
-            <mat-form-field class="flex-1">
+            <mat-form-field class="flex-1" appearance="outline">
               <mat-label>{{ 'rule-node-config.circle-center-latitude' | translate }}</mat-label>
               <input type="number" min="-90" max="90" step="0.1" matInput formControlName="centerLatitude" required>
               @if (geoFilterConfigForm.get('centerLatitude').hasError('required')) {
@@ -95,7 +94,7 @@
                 </mat-error>
               }
             </mat-form-field>
-            <mat-form-field class="flex-1">
+            <mat-form-field class="flex-1" appearance="outline">
               <mat-label>{{ 'rule-node-config.circle-center-longitude' | translate }}</mat-label>
               <input type="number" min="-180" max="180" step="0.1" matInput formControlName="centerLongitude" required>
               @if (geoFilterConfigForm.get('centerLongitude').hasError('required')) {
@@ -106,7 +105,7 @@
             </mat-form-field>
           </div>
           <div class="flex flex-row gap-4">
-            <mat-form-field class="flex-1">
+            <mat-form-field class="flex-1" appearance="outline">
               <mat-label>{{ 'rule-node-config.range' | translate }}</mat-label>
               <input type="number" min="0" step="0.1" matInput formControlName="range" required>
               @if (geoFilterConfigForm.get('range').hasError('required')) {
@@ -115,7 +114,7 @@
                 </mat-error>
               }
             </mat-form-field>
-            <mat-form-field class="flex-1">
+            <mat-form-field class="flex-1" appearance="outline">
               <mat-label>{{ 'rule-node-config.range-units' | translate }}</mat-label>
               <mat-select formControlName="rangeUnit" required>
                 @for (type of rangeUnits; track type) {
@@ -135,8 +134,7 @@
       }
       @if (geoFilterConfigForm.get('perimeterType').value === perimeterType.POLYGON &&
         !geoFilterConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value) {
-        <mat-form-field class="mat-block" subscriptSizing="dynamic"
-                        >
+        <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
           <mat-label>{{ 'rule-node-config.polygon-definition' | translate }}</mat-label>
           <input matInput formControlName="polygonsDefinition" required>
           <mat-hint>{{ 'rule-node-config.polygon-definition-hint' | translate }}</mat-hint>

ui-ngx/src/app/modules/home/components/rule-node/filter/originator-type-config.component.html

@@ -17,6 +17,7 @@
 -->
 <section [formGroup]="originatorTypeConfigForm">
   <tb-entity-type-list class="flex-1"
+                       appearance="outline"
                        formControlName="originatorTypes"
                        [allowedEntityTypes]="allowedEntityTypes"
                        [ignoreAuthorityFilter]="true"

ui-ngx/src/app/modules/home/components/rule-node/flow/rule-chain-input.component.html

@@ -27,6 +27,7 @@
                             [excludeEntityIds]="[ruleChainId]"
                             [entityType]="entityType.RULE_CHAIN"
                             [entitySubtype]="ruleChainType"
+                            appearance="outline"
                             formControlName="ruleChainId">
     </tb-entity-autocomplete>
   </div>

ui-ngx/src/app/modules/home/components/rule-node/transformation/change-originator-config.component.html

@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="changeOriginatorConfigForm" class="tb-form-panel no-border no-padding">
-  <mat-form-field class="mat-block" subscriptSizing="dynamic" hideRequiredMarker>
+  <mat-form-field class="mat-block" subscriptSizing="dynamic" hideRequiredMarker appearance="outline">
     <mat-label translate>rule-node-config.new-originator</mat-label>
     <mat-select formControlName="originatorSource" required>
       <mat-select-trigger>
@@ -40,8 +40,7 @@
       </mat-select>
     </mat-form-field>
     @if (changeOriginatorConfigForm.get('originatorSource').value === originatorSource.ENTITY) {
-      <div class="tb-form-panel stroked no-padding-bottom"
-           >
+      <div class="tb-form-panel stroked no-padding-bottom">
         <tb-example-hint [hintText]="'rule-node-config.entity-name-pattern-hint'"
                          popupHelpLink="rulenode/change_originator_node_fields_templatization">
         </tb-example-hint>
@@ -49,11 +48,12 @@
           <tb-entity-type-select
             showLabel
             required
+            appearance="outline"
             [allowedEntityTypes] = "allowedEntityTypes"
             formControlName="entityType"
             class="mat-mdc-form-field flex">
           </tb-entity-type-select>
-          <mat-form-field class="flex">
+          <mat-form-field class="flex" appearance="outline">
             <mat-label translate>rule-node-config.entity-name-pattern</mat-label>
             <input required matInput formControlName="entityNamePattern">
             @if (changeOriginatorConfigForm.get('entityNamePattern').hasError('required') ||

ui-ngx/src/app/modules/home/components/rule-node/transformation/copy-keys-config.component.html

@@ -23,6 +23,7 @@
   </tb-msg-metadata-chip>
   <tb-string-items-list class="mat-block"
                         required
+                        appearance="outline"
                         [label]="'rule-node-config.keys' | translate"
                         [placeholder]="'rule-node-config.add-key' | translate"
                         [requiredText]="'rule-node-config.key-val.at-least-one-key-error' | translate"

ui-ngx/src/app/modules/home/components/rule-node/transformation/deduplication-config.component.html

@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="deduplicationConfigForm">
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label>{{'rule-node-config.interval' | translate}}</mat-label>
     <input type='number' required matInput formControlName="interval">
     @if (deduplicationConfigForm.get('interval').hasError('required')) {
@@ -44,26 +44,24 @@
         }
       </tb-toggle-select>
       @if (deduplicationConfigForm.get('strategy').value === 'ALL') {
-        <tb-example-hint [hintText]="'rule-node-config.strategy-all-hint'"
-                         >
+        <tb-example-hint [hintText]="'rule-node-config.strategy-all-hint'">
         </tb-example-hint>
       }
       @if (deduplicationConfigForm.get('strategy').value === 'FIRST') {
         <tb-example-hint [hintText]="'rule-node-config.strategy-first-hint'"
-                         textAlign="'center'"
-                         >
+                         textAlign="'center'">
         </tb-example-hint>
       }
       @if (deduplicationConfigForm.get('strategy').value === 'LAST') {
         <tb-example-hint [hintText]="'rule-node-config.strategy-last-hint'"
-                         textAlign="'center'"
-                         >
+                         textAlign="'center'">
         </tb-example-hint>
       }
       @if (deduplicationConfigForm.get('strategy').value === deduplicationStrategie.ALL) {
         <div>
           <tb-output-message-type-autocomplete
             required
+            appearance="outline"
             formControlName="outMsgType">
           </tb-output-message-type-autocomplete>
         </div>
@@ -75,7 +73,7 @@
           <mat-panel-title translate>rule-node-config.advanced-settings</mat-panel-title>
         </mat-expansion-panel-header>
         <div class="tb-form-row no-border no-padding tb-standard-fields">
-          <mat-form-field class="flex">
+          <mat-form-field class="flex" appearance="outline">
             <mat-label>{{'rule-node-config.max-pending-msgs' | translate}}</mat-label>
             <input type = 'number' required matInput formControlName="maxPendingMsgs">
             @if (deduplicationConfigForm.get('maxPendingMsgs').hasError('required')) {
@@ -97,7 +95,7 @@
                       color="primary"
             matTooltip="{{ 'rule-node-config.max-pending-msgs-hint' | translate }}">help</mat-icon>
           </mat-form-field>
-          <mat-form-field class="flex">
+          <mat-form-field class="flex" appearance="outline">
             <mat-label>{{'rule-node-config.max-retries' | translate}}</mat-label>
             <input type = 'number' required matInput formControlName="maxRetries">
             @if (deduplicationConfigForm.get('maxRetries').hasError('required')) {

ui-ngx/src/app/modules/home/components/rule-node/transformation/delete-keys-config.component.html

@@ -22,6 +22,7 @@
   </tb-msg-metadata-chip>
   <tb-string-items-list class="mat-block"
                         required
+                        appearance="outline"
                         [label]="'rule-node-config.keys' | translate"
                         [placeholder]="'rule-node-config.add-key' | translate"
                         [requiredText]="'rule-node-config.key-val.at-least-one-key-error' | translate"

ui-ngx/src/app/modules/home/components/rule-node/transformation/node-json-path-config.component.html

@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="jsonPathConfigForm">
-  <mat-form-field subscriptSizing="dynamic" class="mat-block">
+  <mat-form-field subscriptSizing="dynamic" class="mat-block" appearance="outline">
     <mat-label>{{ 'rule-node-config.json-path-expression' | translate }}</mat-label>
     <input matInput formControlName="jsonPath" required/>
     <mat-hint>{{ 'rule-node-config.json-path-expression-hint' | translate }}</mat-hint>

ui-ngx/src/app/modules/home/components/rule-node/transformation/to-email-config.component.html

@@ -19,7 +19,7 @@
   <div class="tb-form-panel stroked">
     <div class="tb-form-panel-title" translate>rule-node-config.email-sender</div>
     <div class="tb-form-row no-border no-padding tb-standard-fields">
-      <mat-form-field class="flex" subscriptSizing="dynamic">
+      <mat-form-field class="flex" subscriptSizing="dynamic" appearance="outline">
         <mat-label translate>rule-node-config.from-template</mat-label>
         <input required matInput formControlName="fromTemplate">
         <mat-hint align="start">
@@ -52,7 +52,7 @@
       </tb-example-hint>
     </div>
     <div class="tb-form-row no-border no-padding tb-standard-fields">
-      <mat-form-field class="flex">
+      <mat-form-field class="flex" appearance="outline">
         <mat-label translate>rule-node-config.to-template</mat-label>
         <textarea required
                   matInput
@@ -66,7 +66,7 @@
           </mat-error>
         }
       </mat-form-field>
-      <mat-form-field class="flex">
+      <mat-form-field class="flex" appearance="outline">
         <mat-label translate>rule-node-config.cc-template</mat-label>
         <textarea matInput
                   formControlName="ccTemplate"
@@ -74,7 +74,7 @@
                   cdkTextareaAutosize
         cdkAutosizeMinRows="1"></textarea>
       </mat-form-field>
-      <mat-form-field class="flex">
+      <mat-form-field class="flex" appearance="outline">
         <mat-label translate>rule-node-config.bcc-template</mat-label>
         <textarea matInput
                   formControlName="bccTemplate"
@@ -90,7 +90,7 @@
                      popupHelpLink="rulenode/to_email_node_fields_templatization">
     </tb-example-hint>
     <section>
-      <mat-form-field class="mat-block">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>rule-node-config.subject-template</mat-label>
         <textarea required
                   matInput
@@ -104,7 +104,7 @@
           </mat-error>
         }
       </mat-form-field>
-      <mat-form-field class="mat-block">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>rule-node-config.mail-body-type</mat-label>
         <mat-select formControlName="mailBodyType">
           <mat-select-trigger>
@@ -128,13 +128,13 @@
           </mat-select>
         </mat-form-field>
         @if (toEmailConfigForm.get('mailBodyType').value === 'dynamic') {
-          <mat-form-field class="mat-block">
+          <mat-form-field class="mat-block" appearance="outline">
             <mat-label translate>rule-node-config.body-type-template</mat-label>
             <input required matInput formControlName="isHtmlTemplate">
             <mat-hint translate>rule-node-config.mail-body-types.after-template-evaluation-hint</mat-hint>
           </mat-form-field>
         }
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" appearance="outline">
           <mat-label translate>rule-node-config.body-template</mat-label>
           <textarea required
                     matInput

ui-ngx/src/app/modules/home/components/sms/aws-sns-provider-configuration.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="awsSnsProviderConfigurationFormGroup" style="padding-bottom: 16px;">
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>admin.aws-access-key-id</mat-label>
     <input required matInput formControlName="accessKeyId">
     @if (awsSnsProviderConfigurationFormGroup.get('accessKeyId').hasError('required')) {
@@ -25,7 +25,7 @@
       </mat-error>
     }
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>admin.aws-secret-access-key</mat-label>
     <input required type="password" matInput formControlName="secretAccessKey" autocomplete="new-password">
     <tb-toggle-password matSuffix></tb-toggle-password>
@@ -35,7 +35,7 @@
       </mat-error>
     }
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>admin.aws-region</mat-label>
     <input required matInput formControlName="region">
     @if (awsSnsProviderConfigurationFormGroup.get('region').hasError('required')) {

ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html

@@ -17,7 +17,7 @@
 -->
 <form [formGroup]="smppSmsProviderConfigurationFormGroup" style="padding-bottom: 16px;">
   <div class="flex flex-row flex-wrap gap-1.5">
-    <mat-form-field class="mat-block lt-sm:flex-full gt-xs:max-w-25% gt-xs:flex-full">
+    <mat-form-field class="mat-block lt-sm:flex-full gt-xs:max-w-25% gt-xs:flex-full" appearance="outline">
       <mat-label translate>admin.smpp-provider.smpp-version</mat-label>
       <mat-select formControlName="protocolVersion">
         @for (smppVersion of smppVersions; track smppVersion) {
@@ -27,7 +27,7 @@
         }
       </mat-select>
     </mat-form-field>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>admin.smpp-provider.smpp-host</mat-label>
       <input required matInput formControlName="host">
       @if (smppSmsProviderConfigurationFormGroup.get('host').hasError('required')) {
@@ -36,7 +36,7 @@
         </mat-error>
       }
     </mat-form-field>
-    <mat-form-field class="mat-block lt-sm:flex-full gt-xs:max-w-25% gt-xs:flex-full">
+    <mat-form-field class="mat-block lt-sm:flex-full gt-xs:max-w-25% gt-xs:flex-full" appearance="outline">
       <mat-label translate>admin.smpp-provider.smpp-port</mat-label>
       <input required matInput type="number" formControlName="port">
       @if (smppSmsProviderConfigurationFormGroup.get('port').hasError('required')) {
@@ -47,7 +47,7 @@
     </mat-form-field>
   </div>
   <div class="flex flex-row flex-wrap gap-1.5">
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>admin.smpp-provider.system-id</mat-label>
       <input required matInput formControlName="systemId">
       @if (smppSmsProviderConfigurationFormGroup.get('systemId').hasError('required')) {
@@ -56,7 +56,7 @@
         </mat-error>
       }
     </mat-form-field>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>admin.smpp-provider.password</mat-label>
       <input required matInput type="password" autocomplete="new-password" formControlName="password">
       <tb-toggle-password matSuffix></tb-toggle-password>
@@ -75,11 +75,11 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" appearance="outline">
           <mat-label translate>admin.smpp-provider.system-type</mat-label>
           <input matInput formControlName="systemType">
         </mat-form-field>
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" appearance="outline">
           <mat-label translate>admin.smpp-provider.bind-type</mat-label>
           <mat-select formControlName="bindType">
             @for (bindType of bindTypes; track bindType) {
@@ -89,7 +89,7 @@
             }
           </mat-select>
         </mat-form-field>
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" appearance="outline">
           <mat-label translate>admin.smpp-provider.service-type</mat-label>
           <input matInput formControlName="serviceType">
         </mat-form-field>
@@ -102,11 +102,11 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" appearance="outline">
           <mat-label translate>admin.smpp-provider.source-address</mat-label>
           <input matInput formControlName="sourceAddress">
         </mat-form-field>
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" appearance="outline">
           <mat-label translate>admin.smpp-provider.source-ton</mat-label>
           <mat-select formControlName="sourceTon">
             @for (sourceTon of typeOfNumber; track sourceTon) {
@@ -116,7 +116,7 @@
             }
           </mat-select>
         </mat-form-field>
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" appearance="outline">
           <mat-label translate>admin.smpp-provider.source-npi</mat-label>
           <mat-select formControlName="sourceNpi">
             @for (sourceNpi of numberingPlanIdentification; track sourceNpi) {
@@ -135,7 +135,7 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" appearance="outline">
           <mat-label translate>admin.smpp-provider.destination-ton</mat-label>
           <mat-select formControlName="destinationTon">
             @for (destinationTon of typeOfNumber; track destinationTon) {
@@ -145,7 +145,7 @@
             }
           </mat-select>
         </mat-form-field>
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" appearance="outline">
           <mat-label translate>admin.smpp-provider.destination-npi</mat-label>
           <mat-select formControlName="destinationNpi">
             @for (destinationNpi of numberingPlanIdentification; track destinationNpi) {
@@ -164,11 +164,11 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" appearance="outline">
           <mat-label translate>admin.smpp-provider.address-range</mat-label>
           <input matInput formControlName="addressRange">
         </mat-form-field>
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" appearance="outline">
           <mat-label translate>admin.smpp-provider.coding-scheme</mat-label>
           <mat-select formControlName="codingScheme">
             @for (codingScheme of codingSchemes; track codingScheme) {

ui-ngx/src/app/modules/home/components/sms/sms-provider-configuration.component.html

@@ -16,7 +16,7 @@
 
 -->
 <div [formGroup]="smsProviderConfigurationFormGroup">
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>admin.sms-provider-type</mat-label>
     <mat-select formControlName="type" [required]="required">
       @for (type of smsProviderTypes; track type) {

ui-ngx/src/app/modules/home/components/sms/twilio-sms-provider-configuration.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="twilioSmsProviderConfigurationFormGroup" style="padding-bottom: 16px;">
-  <mat-form-field class="mat-block" subscriptSizing="dynamic">
+  <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
     <mat-label translate>admin.number-from</mat-label>
     <input type="tel" required [pattern]="phoneNumberPatternTwilio" matInput formControlName="numberFrom">
     @if (twilioSmsProviderConfigurationFormGroup.get('numberFrom').hasError('required')) {
@@ -31,7 +31,7 @@
     }
     <mat-hint innerHTML="{{ 'admin.phone-number-hint-twilio' | translate }}"></mat-hint>
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>admin.twilio-account-sid</mat-label>
     <input required matInput formControlName="accountSid">
     @if (twilioSmsProviderConfigurationFormGroup.get('accountSid').hasError('required')) {
@@ -40,7 +40,7 @@
       </mat-error>
     }
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>admin.twilio-account-token</mat-label>
     <input required type="password" autocomplete="new-password" matInput formControlName="accountToken">
     <tb-toggle-password matSuffix></tb-toggle-password>

ui-ngx/src/app/modules/home/components/widget/config/basic/button/command-button-basic-config.component.html

@@ -16,7 +16,7 @@
 
 -->
 <ng-container [formGroup]="commandButtonWidgetConfigForm">
-  <tb-target-device formControlName="targetDevice"></tb-target-device>
+  <tb-target-device formControlName="targetDevice" appearance="outline"></tb-target-device>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.command-button.behavior</div>
     <div class="tb-form-row space-between">

ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html

@@ -16,7 +16,7 @@
 
 -->
 <ng-container [formGroup]="powerButtonWidgetConfigForm">
-  <tb-target-device formControlName="targetDevice"></tb-target-device>
+  <tb-target-device formControlName="targetDevice" appearance="outline"></tb-target-device>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.power-button.behavior</div>
     <div class="tb-form-row">

ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html

@@ -16,7 +16,7 @@
 
 -->
 <ng-container [formGroup]="toggleButtonWidgetConfigForm">
-  <tb-target-device formControlName="targetDevice"></tb-target-device>
+  <tb-target-device formControlName="targetDevice" appearance="outline"></tb-target-device>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.toggle-button.behavior</div>
     <div class="tb-form-row">

ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html

@@ -16,7 +16,7 @@
 
 -->
 <ng-container [formGroup]="statusWidgetConfigForm">
-  <tb-target-device formControlName="targetDevice"></tb-target-device>
+  <tb-target-device formControlName="targetDevice" appearance="outline"></tb-target-device>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.status-widget.behavior</div>
     <div class="tb-form-row">

ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html

@@ -16,7 +16,7 @@
 
 -->
 <ng-container [formGroup]="singleSwitchWidgetConfigForm">
-  <tb-target-device formControlName="targetDevice"></tb-target-device>
+  <tb-target-device formControlName="targetDevice" appearance="outline"></tb-target-device>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.single-switch.behavior</div>
     <div class="tb-form-row">

ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html

@@ -16,7 +16,7 @@
 
 -->
 <ng-container [formGroup]="sliderWidgetConfigForm">
-  <tb-target-device formControlName="targetDevice"></tb-target-device>
+  <tb-target-device formControlName="targetDevice" appearance="outline"></tb-target-device>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.slider.behavior</div>
     <div class="tb-form-row">

ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/value-stepper-basic-config.component.html

@@ -16,7 +16,7 @@
 
 -->
 <ng-container [formGroup]="valueStepperWidgetConfigForm">
-  <tb-target-device formControlName="targetDevice"></tb-target-device>
+  <tb-target-device formControlName="targetDevice" appearance="outline"></tb-target-device>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.value-stepper.behavior</div>
     <div class="tb-form-row">

ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html

@@ -16,7 +16,7 @@
 
 -->
 <ng-container [formGroup]="scadaSymbolWidgetConfigForm">
-  <tb-target-device formControlName="targetDevice"></tb-target-device>
+  <tb-target-device formControlName="targetDevice" appearance="outline"></tb-target-device>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>scada.symbol.symbol</div>
     <tb-scada-symbol-input required

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

@@ -25,6 +25,7 @@
   </div>
   @if (targetDeviceFormGroup.get('type').value === targetDeviceType.device) {
     <tb-entity-autocomplete
+      [appearance]="appearance"
       [required]="(!widgetEditMode && !targetDeviceOptional)"
       [entityType]="entityType.DEVICE"
       formControlName="deviceId">
@@ -32,6 +33,7 @@
   }
   @if (targetDeviceFormGroup.get('type').value === targetDeviceType.entity) {
     <tb-entity-alias-select
+      [appearance]="appearance"
       [tbRequired]="(!widgetEditMode && !targetDeviceOptional)"
       [aliasController]="aliasController"
       [callbacks]="entityAliasSelectCallbacks"

ui-ngx/src/app/modules/home/components/widget/config/target-device.component.ts

@@ -33,6 +33,7 @@ import { EntityType } from '@shared/models/entity-type.models';
 import { IAliasController } from '@core/api/widget-api.models';
 import { EntityAliasSelectCallbacks } from '@home/components/widget/lib/settings/common/alias/entity-alias-select.component.models';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatFormFieldAppearance } from '@angular/material/form-field';
 
 @Component({
     selector: 'tb-target-device',
@@ -73,6 +74,9 @@ export class TargetDeviceComponent implements ControlValueAccessor, OnInit, Vali
   @Input()
   disabled: boolean;
 
+  @Input()
+  appearance: MatFormFieldAppearance = 'fill';
+
   widgetEditMode = this.utils.widgetEditMode;
 
   targetDeviceFormGroup: UntypedFormGroup;

ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator-panel.component.html

@@ -17,7 +17,7 @@
 -->
 <div class="mat-content mat-padding flex flex-col">
   @if (settings.showTemplate) {
-    <mat-form-field class="mat-block">
+    <mat-form-field class="mat-block" appearance="outline">
       <input readonly [ngModel]="model.chosenLabel" matInput type="text">
     </mat-form-field>
   }

ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.html

@@ -19,7 +19,7 @@
      [class.short-mode]="ctx.width < 400"
      [class.labels-hidden]="settings.hideLabels"
      [class.long-mode]="ctx.width >= 400">
-  <mat-form-field class="mat-block" [class.!hidden]="settings.hidePicker" (click)="openNavigatorPanel($event)">
+  <mat-form-field class="mat-block" [class.!hidden]="settings.hidePicker" (click)="openNavigatorPanel($event)" appearance="outline">
     @if (!settings.hideLabels) {
       <mat-label translate>widgets.date-range-navigator.localizationMap.Date picker</mat-label>
     }
@@ -29,7 +29,7 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-  <mat-form-field class="mat-block" [class.!hidden]="settings.hideInterval">
+  <mat-form-field class="mat-block" [class.!hidden]="settings.hideInterval" appearance="outline">
     @if (!settings.hideLabels) {
       <mat-label translate>widgets.date-range-navigator.localizationMap.Interval</mat-label>
     }
@@ -51,7 +51,7 @@
     <button mat-icon-button (click)="goBack()">
       <mat-icon>keyboard_arrow_left</mat-icon>
     </button>
-    <mat-form-field class="mat-block gt-sm:flex-1">
+    <mat-form-field class="mat-block gt-sm:flex-1" appearance="outline">
       @if (!settings.hideLabels) {
         <mat-label translate>widgets.date-range-navigator.localizationMap.Step size</mat-label>
       }

ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html

@@ -18,8 +18,8 @@
 @if (addMode || editMode) {
   <div class="flex flex-row">
     <div class="tb-edit-link flex flex-1 flex-col" [class.edit-mode]="editMode" [formGroup]="editDocLinkFormGroup">
-      <tb-material-icon-select required formControlName="icon"></tb-material-icon-select>
-      <mat-form-field class="mat-block flex-1">
+      <tb-material-icon-select required formControlName="icon" appearance="outline"></tb-material-icon-select>
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.documentation.name</mat-label>
         <input required matInput formControlName="name">
         @if (editDocLinkFormGroup.get('name').hasError('required')) {
@@ -28,7 +28,7 @@
           </mat-error>
         }
       </mat-form-field>
-      <mat-form-field class="mat-block flex-1">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.documentation.link</mat-label>
         <input required matInput formControlName="link">
         @if (editDocLinkFormGroup.get('link').hasError('required')) {

ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html

@@ -18,7 +18,7 @@
 @if (addMode || editMode) {
   <div class="flex flex-row">
     <div class="tb-edit-link flex flex-1 flex-col" [class.edit-mode]="editMode" [formGroup]="editQuickLinkFormGroup">
-      <mat-form-field class="mat-block flex-1">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.quick-links.quick-link</mat-label>
         <input matInput type="text"
                #linkInput

ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html

@@ -38,8 +38,8 @@
           {{ rpcMessageTypeText }}
         </mat-slide-toggle>
       </div>
-      <div class="flex flex-row flex-wrap gap-1.5 xs:flex-col">
-        <mat-form-field class="mat-block flex-1">
+      <div class="flex flex-row flex-wrap gap-1.5 xs:flex-col mt-1">
+        <mat-form-field class="mat-block flex-1" appearance="outline">
           <mat-label translate>widgets.persistent-table.method</mat-label>
           <input matInput formControlName="method" required>
           @if (persistentFormGroup.get('method').hasError('required')) {
@@ -53,7 +53,7 @@
             </mat-error>
           }
         </mat-form-field>
-        <mat-form-field class="mat-block flex-1">
+        <mat-form-field class="mat-block flex-1" appearance="outline">
           <mat-label translate>widgets.persistent-table.retries</mat-label>
           <input matInput type="number" formControlName="retries">
         </mat-form-field>